SAUNA REVIEWER — REDESIGNED HOMEPAGE
   WordPress-ready: paste sections into your page builder
   or use as a full custom page template.
   ============================================================ */

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

:root {
  --orange: #D97B2B;
  --orange-dark: #C06A1F;
  --orange-light: #FFF5EB;
  --charcoal: #1A1A1A;
  --dark: #2D2D2D;
  --gray-700: #444;
  --gray-500: #777;
  --gray-300: #CCC;
  --gray-100: #F5F5F5;
  --white: #FFFFFF;
  --gold: #F5A623;
  --green: #27AE60;
  --radius: 12px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
  --shadow-md: 0 4px 20px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.12);
  --transition: .25s ease;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--dark);
  line-height: 1.6;
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }

/* ----------  HIDE PARENT THEME (FLAVOR/SPACE) ELEMENTS  ---------- */
/* The parent theme uses .space-* classes for its header, search, breadcrumbs, etc. */

/* Parent theme header — the div with search icon and empty logo */
.space-header,
.space-header-wrap,
.space-header-float,
.space-header-height,
.space-header-ins,
.space-header-logo,
.space-header-menu,
.space-header-search,
.space-header-search-block,
.space-mobile-menu-icon,
.space-close-icon,
.space-default-search-form {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

/* ----------  UTILITY  ---------- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section-label {
  text-transform: uppercase; font-size: 13px; font-weight: 700;
  letter-spacing: 2px; color: var(--orange); margin-bottom: 8px;
}
.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 4vw, 42px);
  color: var(--charcoal);
  margin-bottom: 16px;
}
.section-subtitle {
  font-size: 17px; color: var(--gray-500); max-width: 600px; line-height: 1.7;
}

/* ============================================================
   1. TOP BAR
   ============================================================ */
.topbar {
  background: var(--charcoal);
  color: rgba(255,255,255,.7);
  font-size: 13px;
  padding: 8px 0;
  text-align: center;
  letter-spacing: .3px;
}
.topbar strong { color: var(--white); }

/* ============================================================
   2. HEADER / MEGA NAV
   ============================================================ */
.header {
  background: var(--white);
  position: sticky; top: 0; z-index: 1000;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.header-top {
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.logo {
  display: flex; align-items: center;
}
.logo-img {
  height: 50px; width: auto;
  object-fit: contain;
}
.header-utils {
  display: flex; align-items: center; gap: 16px;
}
.header-search-wrap {
  position: relative; display: flex; align-items: center;
}
.header-search-btn {
  background: var(--gray-100); border: none;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--gray-500); cursor: pointer;
  transition: all var(--transition); position: relative; z-index: 2;
}
.header-search-btn:hover { background: #e8e8e8; color: var(--charcoal); }
.header-search-input {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 24px;
  border: 2px solid transparent; background: var(--gray-100);
  padding: 0 40px 0 16px; font-family: inherit; font-size: 14px;
  color: var(--charcoal); outline: none; opacity: 0;
  transition: width .35s cubic-bezier(.4,0,.2,1), opacity .25s ease, border-color .25s ease, box-shadow .25s ease;
  z-index: 1;
}
.header-search-wrap.open .header-search-input {
  width: 280px; opacity: 1; border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(217,123,43,.15);
}
.header-search-wrap.open .header-search-btn {
  background: var(--orange); color: var(--white);
}
.header-search-close {
  display: none; align-items: center; justify-content: center;
  background: none; border: none; font-size: 18px; color: var(--gray-500);
  cursor: pointer; margin-left: 4px; transition: color .2s;
}
.header-search-close:hover { color: var(--charcoal); }
.header-search-wrap.open .header-search-close { display: flex; }
.mega-nav-bar {
  background: var(--charcoal);
}
.mega-nav-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: stretch;
  position: relative;
}
.mega-nav-item {
  position: relative;
}
.mega-nav-item > a {
  display: flex; align-items: center; gap: 6px;
  padding: 0 20px; height: 48px;
  font-size: 14px; font-weight: 600; color: rgba(255,255,255,.8);
  transition: all var(--transition);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.mega-nav-item > a .chevron {
  font-size: 8px; opacity: .5;
  transition: transform .2s ease, opacity .2s ease;
}
.mega-nav-item:hover > a,
.mega-nav-item.active > a {
  color: var(--white);
  background: rgba(255,255,255,.07);
  border-bottom-color: var(--orange);
}
.mega-nav-item:hover > a .chevron {
  opacity: 1;
  transform: rotate(180deg);
}
.mega-nav-item.home > a { gap: 5px; }
.mega-nav-item > a::after {
  content: '';
  position: absolute; bottom: 0; left: 50%; right: 50%;
  height: 3px;
  background: var(--orange);
  transition: left .25s ease, right .25s ease;
  border-radius: 3px 3px 0 0;
}
.mega-dropdown {
  position: absolute;
  top: 100%; left: 0;
  min-width: 280px;
  background: var(--white);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 12px 48px rgba(0,0,0,.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 999;
  padding: 8px 0;
  border-top: 3px solid var(--orange);
}
.mega-nav-item:hover .mega-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mega-dropdown a {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px;
  font-size: 14px; font-weight: 500; color: var(--gray-700);
  transition: all .15s ease;
  position: relative;
}
.mega-dropdown a .dd-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--gray-100);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  transition: all .15s ease;
}
.mega-dropdown a .dd-text {
  display: flex; flex-direction: column;
}
.mega-dropdown a .dd-label {
  font-weight: 600; color: var(--charcoal); font-size: 14px;
  transition: color .15s ease;
}
.mega-dropdown a .dd-desc {
  font-size: 12px; color: var(--gray-500); line-height: 1.4; margin-top: 1px;
}
.mega-dropdown a .dd-arrow {
  margin-left: auto; font-size: 12px; color: var(--gray-300);
  transition: all .15s ease;
  opacity: 0; transform: translateX(-4px);
}
.mega-dropdown a:hover {
  background: var(--orange-light);
}
.mega-dropdown a:hover .dd-icon {
  background: var(--orange);
  color: var(--white);
}
.mega-dropdown a:hover .dd-label { color: var(--orange); }
.mega-dropdown a:hover .dd-arrow {
  opacity: 1; transform: translateX(0); color: var(--orange);
}
.dd-separator {
  height: 1px; background: var(--gray-200);
  margin: 6px 16px;
}
.dd-header {
  padding: 10px 20px 4px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--gray-500);
}
.mega-dropdown.wide {
  min-width: 520px;
  padding: 20px;
  right: 0; left: auto;
}
.mega-dropdown.wide .mega-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mega-dropdown.wide .mega-cols a {
  padding: 10px 14px;
  border-radius: 8px;
}
.dd-featured {
  margin: 8px 12px 4px;
  padding: 16px;
  background: linear-gradient(135deg, var(--orange-light), #FDE8D0);
  border-radius: 10px;
  display: flex; align-items: center; gap: 14px;
}
.dd-featured-icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--orange); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.dd-featured h4 {
  font-size: 14px; font-weight: 700; color: var(--charcoal); margin-bottom: 2px;
}
.dd-featured p {
  font-size: 12px; color: var(--gray-500); line-height: 1.4;
}
.mobile-toggle {
  display: none; background: none; border: none;
  color: var(--white); font-size: 22px; cursor: pointer;
  padding: 12px 20px;
}
@media (max-width: 1024px) {
  .mega-nav-item > a { padding: 0 14px; font-size: 13px; }
}
@media (max-width: 860px) {
  .mega-nav-inner { display: none; }
  .mobile-toggle { display: block; }
  .mega-nav-bar { display: flex; justify-content: center; }
}

/* ============================================================
   3. HERO
   ============================================================ */
.hero {
  position: relative;
  background: #1a1207;
  padding: 100px 0 110px;
  overflow: hidden;
  color: var(--white);
}
.hero-bg-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: .5;
  z-index: 0;
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,18,7,.5) 0%, rgba(26,18,7,.3) 40%, rgba(26,18,7,.7) 100%);
  z-index: 0;
}
.hero .container { position: relative; z-index: 1; text-align: center; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(217,123,43,.15); border: 1px solid rgba(217,123,43,.3);
  padding: 8px 18px; border-radius: 50px; font-size: 13px; font-weight: 600;
  color: var(--gold); margin-bottom: 28px;
}
.hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(36px, 5.5vw, 62px);
  line-height: 1.15;
  margin-bottom: 20px;
  max-width: 780px; margin-left: auto; margin-right: auto;
}
.hero h1 span { color: var(--gold); }
.hero p {
  font-size: 18px; color: rgba(255,255,255,.7);
  max-width: 560px; margin: 0 auto 40px; line-height: 1.7;
}
.hero-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.btn-primary {
  background: var(--orange); color: var(--white); border: none;
  padding: 16px 36px; border-radius: 10px; font-size: 16px; font-weight: 700;
  transition: all var(--transition); display: inline-flex; align-items: center; gap: 8px;
}
.btn-primary:hover { background: var(--orange-dark); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(217,123,43,.35); }
.btn-secondary {
  background: rgba(255,255,255,.08); color: var(--white); border: 1px solid rgba(255,255,255,.2);
  padding: 16px 36px; border-radius: 10px; font-size: 16px; font-weight: 600;
  transition: all var(--transition);
}
.btn-secondary:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.35); }

/* ============================================================
   4. TRUST BAR
   ============================================================ */
.trust-bar {
  background: var(--white);
  border-bottom: 1px solid rgba(0,0,0,.06);
  padding: 24px 0;
}
.trust-bar .container {
  display: flex; justify-content: center; gap: 48px; flex-wrap: wrap;
}
.trust-item {
  display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--gray-700);
}
.trust-icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--orange-light); color: var(--orange);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.trust-item strong { display: block; font-size: 20px; color: var(--charcoal); line-height: 1.2; }
.trust-item span { font-size: 13px; color: var(--gray-500); }

/* ============================================================
   5. SAUNA FINDER (filters)
   ============================================================ */
.finder {
  padding: 80px 0;
  background: var(--gray-100);
}
.finder-header { text-align: center; margin-bottom: 48px; }
.finder-header .section-subtitle { margin: 0 auto; }

.finder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  max-width: 900px;
  margin: 0 auto 32px;
}
.filter-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}
.filter-card:hover { box-shadow: var(--shadow-md); }
.filter-card label {
  display: block; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--gray-500); margin-bottom: 10px;
}
.filter-card select {
  width: 100%; padding: 12px 16px; border: 2px solid #E8E8E8;
  border-radius: 8px; font-size: 15px; font-weight: 500;
  color: var(--dark); background: var(--white);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23777' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
  transition: border-color var(--transition);
}
.filter-card select:focus { outline: none; border-color: var(--orange); }

.finder-btn-wrap { text-align: center; }
.finder-btn {
  background: var(--orange); color: var(--white); border: none;
  padding: 16px 48px; border-radius: 10px; font-size: 16px; font-weight: 700;
  transition: all var(--transition);
}
.finder-btn:hover { background: var(--orange-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(217,123,43,.3); }

/* ============================================================
   6. CATEGORIES
   ============================================================ */
.categories { padding: 80px 0; }
.categories-header { text-align: center; margin-bottom: 48px; }
.categories-header .section-subtitle { margin: 0 auto; }

.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.cat-card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: #2a1a0a; aspect-ratio: 4/3;
  transition: transform .35s ease, box-shadow .35s ease;
}
.cat-card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(217,123,43,.3); }
.cat-card-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .6; transition: opacity .5s ease, transform .6s ease;
  filter: saturate(.85);
}
.cat-card:hover .cat-card-bg { opacity: .75; transform: scale(1.06); filter: saturate(1); }
/* Orange tint overlay */
.cat-card-tint {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(135deg, rgba(217,123,43,.25) 0%, rgba(192,106,31,.15) 50%, rgba(217,123,43,.3) 100%);
  mix-blend-mode: multiply;
  transition: opacity .4s ease;
}
.cat-card:hover .cat-card-tint { opacity: .7; }
/* Shimmer overlay */
.cat-card::before {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(105deg, transparent 40%, rgba(255,200,130,.1) 45%, rgba(255,220,160,.18) 50%, rgba(255,200,130,.1) 55%, transparent 60%);
  background-size: 250% 100%;
  background-position: 200% 0;
  transition: background-position .8s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.cat-card:hover::before {
  background-position: -50% 0;
}
/* Warm gradient at bottom for text readability */
.cat-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 70%;
  background: linear-gradient(to top, rgba(30,15,5,.85) 0%, rgba(50,25,10,.45) 45%, transparent 100%);
  z-index: 1; pointer-events: none;
}
.cat-card-content {
  position: relative; z-index: 3;
  height: 100%; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 28px;
}
.cat-card h3 {
  color: var(--white); font-size: 20px; font-weight: 700; margin-bottom: 4px;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.cat-card p {
  color: rgba(255,255,255,.8); font-size: 14px;
  text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.cat-card .arrow {
  position: absolute; top: 20px; right: 20px; z-index: 3;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.15); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; transition: background var(--transition), transform .3s ease;
  backdrop-filter: blur(4px);
}
.cat-card:hover .arrow { background: var(--orange); transform: translateX(3px); }

/* ============================================================
   7. TOP PICKS
   ============================================================ */
.top-picks {
  padding: 80px 0;
  background: var(--gray-100);
}
.top-picks-header { text-align: center; margin-bottom: 48px; }
.top-picks-header .section-subtitle { margin: 0 auto; }

.picks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 24px;
}
.pick-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex; flex-direction: column;
}
.pick-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.pick-badge {
  position: absolute; top: 16px; left: 16px;
  background: var(--orange); color: var(--white);
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; padding: 6px 12px; border-radius: 6px;
  z-index: 2;
}
.pick-img {
  position: relative; background: #F9F6F2;
  padding: 32px; display: flex; align-items: center; justify-content: center;
  min-height: 220px;
}
.pick-img img { max-height: 180px; object-fit: contain; }
.pick-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.pick-rating {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.stars { color: var(--gold); font-size: 14px; letter-spacing: 2px; }
.rating-num { font-size: 14px; font-weight: 700; color: var(--charcoal); }
.rating-count { font-size: 13px; color: var(--gray-500); }
.pick-body h3 { font-size: 18px; font-weight: 700; color: var(--charcoal); margin-bottom: 8px; line-height: 1.4; }
.pick-body .pick-desc { font-size: 14px; color: var(--gray-500); line-height: 1.6; margin-bottom: 16px; flex: 1; }
.pick-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.pick-tag {
  font-size: 12px; font-weight: 600; padding: 5px 12px;
  border-radius: 50px; background: var(--orange-light); color: var(--orange);
}
.pick-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 16px; border-top: 1px solid #F0F0F0;
}
.pick-price { font-size: 22px; font-weight: 800; color: var(--charcoal); }
.pick-price small { font-size: 13px; font-weight: 500; color: var(--gray-500); }
.pick-cta {
  background: var(--orange); color: var(--white); border: none;
  padding: 12px 24px; border-radius: 8px; font-size: 14px; font-weight: 700;
  transition: all var(--transition); display: inline-flex; align-items: center; gap: 6px;
}
.pick-cta:hover { background: var(--orange-dark); }

/* ============================================================
   8. HOW WE TEST
   ============================================================ */
.how-we-test { padding: 80px 0; }
.how-we-test-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.hwt-text .section-label, .hwt-text .section-title { text-align: left; }
.hwt-text p { font-size: 16px; color: var(--gray-500); line-height: 1.8; margin-bottom: 24px; }
.hwt-steps { display: flex; flex-direction: column; gap: 20px; margin-top: 24px; }
.hwt-step {
  display: flex; gap: 16px; align-items: flex-start;
}
.hwt-step-num {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--orange); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; flex-shrink: 0;
}
.hwt-step h4 { font-size: 15px; font-weight: 700; color: var(--charcoal); margin-bottom: 2px; }
.hwt-step p { font-size: 14px; color: var(--gray-500); margin-bottom: 0; }
.hwt-visual {
  background: linear-gradient(135deg, #FFF5EB, #FDE8D0);
  border-radius: 20px; padding: 48px; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 420px;
}
.hwt-visual-icon { font-size: 80px; margin-bottom: 24px; }
.hwt-visual h3 { font-size: 28px; font-weight: 800; color: var(--charcoal); margin-bottom: 8px; }
.hwt-visual p { font-size: 15px; color: var(--gray-500); }
.hwt-stat-row {
  display: flex; gap: 32px; margin-top: 28px;
}
.hwt-stat { text-align: center; }
.hwt-stat strong { display: block; font-size: 28px; font-weight: 800; color: var(--orange); }
.hwt-stat span { font-size: 13px; color: var(--gray-500); }

/* ============================================================
   9. BRANDS
   ============================================================ */
.brands {
  padding: 60px 0;
  background: var(--gray-100);
  border-top: 1px solid rgba(0,0,0,.04);
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.brands-header { text-align: center; margin-bottom: 36px; }
.brands-grid {
  display: flex; justify-content: center; gap: 40px; flex-wrap: wrap;
  align-items: center;
}
.brand-logo {
  background: var(--white); padding: 16px 28px; border-radius: 10px;
  font-size: 16px; font-weight: 700; color: var(--gray-500);
  box-shadow: var(--shadow-sm); transition: all var(--transition);
  white-space: nowrap;
}
.brand-logo:hover { color: var(--orange); box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* ============================================================
   10. NEWSLETTER
   ============================================================ */
.newsletter {
  padding: 80px 0;
  background: linear-gradient(135deg, #1a1207, #3d2a10);
  color: var(--white);
  text-align: center;
}
.newsletter .section-label { color: var(--gold); }
.newsletter .section-title { color: var(--white); }
.newsletter p { color: rgba(255,255,255,.65); font-size: 17px; max-width: 520px; margin: 0 auto 32px; line-height: 1.7; }
.newsletter-form {
  display: flex; gap: 12px; justify-content: center; max-width: 480px; margin: 0 auto;
}
.newsletter-form input {
  flex: 1; padding: 16px 20px; border: 2px solid rgba(255,255,255,.15);
  border-radius: 10px; background: rgba(255,255,255,.08);
  color: var(--white); font-size: 15px; font-family: inherit;
}
.newsletter-form input::placeholder { color: rgba(255,255,255,.4); }
.newsletter-form input:focus { outline: none; border-color: var(--orange); }
.newsletter-form button {
  background: var(--orange); color: var(--white); border: none;
  padding: 16px 28px; border-radius: 10px; font-size: 15px; font-weight: 700;
  transition: background var(--transition); white-space: nowrap;
}
.newsletter-form button:hover { background: var(--orange-dark); }

/* ============================================================
   11. FOOTER
   ============================================================ */
.footer {
  background: var(--charcoal); color: rgba(255,255,255,.5);
  padding: 60px 0 32px;
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;
  margin-bottom: 40px;
}
.footer-brand p { font-size: 14px; line-height: 1.8; margin-top: 12px; max-width: 300px; }
.footer h4 {
  color: var(--white); font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px;
}
.footer ul { list-style: none; }
.footer ul li { margin-bottom: 10px; }
.footer ul a { font-size: 14px; color: rgba(255,255,255,.5); transition: color var(--transition); }
.footer ul a:hover { color: var(--orange); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 24px; text-align: center; font-size: 13px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .nav { display: none; }
  .mobile-toggle { display: block; }
  .how-we-test-inner { grid-template-columns: 1fr; }
  .hwt-visual { min-height: 300px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .trust-bar .container { gap: 24px; }
  .picks-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .hero { padding: 64px 0 72px; }
  .hero-buttons { flex-direction: column; align-items: center; }
  .newsletter-form { flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr; }
  .finder-grid { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: 1fr 1fr; }
}
</style>
</head>
<body>

<!-- ========== TOP BAR ========== -->
<div class="topbar">
  <strong>🔥 Spring Sale:</strong> Up to 40% off top-rated saunas — <a href="#" style="color:#F5A623;text-decoration:underline;">See our best deals →</a>
</div>

<!-- ========== HEADER ========== -->
<header class="header">

  <!-- Top Row: Logo + Utils -->
  <div class="header-top">
    <a href="https://saunareviewer.com/" class="logo">
      <div class="logo-icon">🧖</div>
      SAUNA REVIEWER
    </a>
    <div class="header-utils">
      <div class="header-search-wrap">
        <input type="text" class="header-search-input" placeholder="Search saunas, brands, guides…" />
        <button class="header-search-btn" aria-label="Search" onclick="toggleHeaderSearch(this)">🔍</button>
      </div>
      <button class="header-search-close" aria-label="Close search" onclick="closeHeaderSearch()">✕</button>
    </div>
  </div>

  <!-- Mega Nav Bar -->
  <nav class="mega-nav-bar">
    <div class="mega-nav-inner">

      <button class="mobile-toggle" aria-label="Menu">☰ Menu</button>

      <!-- HOME -->
      <div class="mega-nav-item home">
        <a href="https://saunareviewer.com/">🏠 Home</a>
      </div>

      <!-- PORTABLE SAUNAS -->
      <div class="mega-nav-item">
        <a href="https://saunareviewer.com/category/portable-sauna/">
          Portable Saunas <span class="chevron">▼</span>
        </a>
        <div class="mega-dropdown">
          <div class="dd-featured">
            <div class="dd-featured-icon">💼</div>
            <div>
              <h4>Portable Saunas</h4>
              <p>Compact, affordable sauna therapy on the go</p>
            </div>
          </div>
          <div class="dd-separator"></div>
          <a href="https://saunareviewer.com/best-brand-reviews-radiant-saunas-bsa6310-rejuvenator-portable-sauna/">
            <span class="dd-icon">🔋</span>
            <span class="dd-text">
              <span class="dd-label">BSA6310 Rejuvenator Portable</span>
              <span class="dd-desc">Top-rated portable infrared sauna</span>
            </span>
            <span class="dd-arrow">→</span>
          </a>
          <a href="https://saunareviewer.com/best-selling-far-infrared-portable-sauna-negative-ion-detox/">
            <span class="dd-icon">⚡</span>
            <span class="dd-text">
              <span class="dd-label">Negative Ion Detox</span>
              <span class="dd-desc">Far infrared with ion therapy</span>
            </span>
            <span class="dd-arrow">→</span>
          </a>
          <a href="https://saunareviewer.com/best-infrared-sauna-slim-belt-reviews/">
            <span class="dd-icon">🎗️</span>
            <span class="dd-text">
              <span class="dd-label">Infrared Sauna Slim Belt</span>
              <span class="dd-desc">Wearable infrared therapy belt</span>
            </span>
            <span class="dd-arrow">→</span>
          </a>
          <a href="https://saunareviewer.com/best-infrared-sauna-blanket-reviews/">
            <span class="dd-icon">🛏️</span>
            <span class="dd-text">
              <span class="dd-label">Infrared Sauna Blanket</span>
              <span class="dd-desc">Full-body blanket sauna therapy</span>
            </span>
            <span class="dd-arrow">→</span>
          </a>
          <a href="https://saunareviewer.com/best-brand-reviews-radiant-saunas-bsa6310-rejuvenator-portable-sauna/">
            <span class="dd-icon">✨</span>
            <span class="dd-text">
              <span class="dd-label">Portable Radiant Saunas</span>
              <span class="dd-desc">Radiant brand portable range</span>
            </span>
            <span class="dd-arrow">→</span>
          </a>
        </div>
      </div>

      <!-- INFRARED SAUNAS -->
      <div class="mega-nav-item">
        <a href="https://saunareviewer.com/category/infrared-saunas/">
          Infrared Saunas <span class="chevron">▼</span>
        </a>
        <div class="mega-dropdown">
          <div class="dd-featured">
            <div class="dd-featured-icon">🔥</div>
            <div>
              <h4>Infrared Saunas</h4>
              <p>The most popular type for home wellness</p>
            </div>
          </div>
          <div class="dd-separator"></div>
          <a href="https://saunareviewer.com/best-carbon-fiber-far-infrared-sauna-reviews/">
            <span class="dd-icon">🪵</span>
            <span class="dd-text">
              <span class="dd-label">Carbon Infrared Saunas</span>
              <span class="dd-desc">Even heat, energy efficient panels</span>
            </span>
            <span class="dd-arrow">→</span>
          </a>
          <a href="https://saunareviewer.com/best-corner-shaped-infrared-sauna/">
            <span class="dd-icon">📐</span>
            <span class="dd-text">
              <span class="dd-label">Corner Shaped Infrared Sauna</span>
              <span class="dd-desc">Space-saving corner designs</span>
            </span>
            <span class="dd-arrow">→</span>
          </a>
          <a href="https://saunareviewer.com/reviews-and-benefits-of-best-far-infrared-sauna/">
            <span class="dd-icon">🌡️</span>
            <span class="dd-text">
              <span class="dd-label">FAR Infrared Sauna</span>
              <span class="dd-desc">Deep-penetrating far infrared heat</span>
            </span>
            <span class="dd-arrow">→</span>
          </a>
          <a href="https://saunareviewer.com/best-infrared-sauna-cabin/">
            <span class="dd-icon">🏠</span>
            <span class="dd-text">
              <span class="dd-label">Infrared Sauna Cabins</span>
              <span class="dd-desc">Full cabin sauna setups</span>
            </span>
            <span class="dd-arrow">→</span>
          </a>
          <div class="dd-separator"></div>
          <a href="https://saunareviewer.com/infrared-sauna-vs-traditional-steam-sauna/">
            <span class="dd-icon">⚖️</span>
            <span class="dd-text">
              <span class="dd-label">Infrared VS Traditional</span>
              <span class="dd-desc">Which type is right for you?</span>
            </span>
            <span class="dd-arrow">→</span>
          </a>
        </div>
      </div>

      <!-- OUTDOOR VS INDOOR -->
      <div class="mega-nav-item">
        <a href="https://saunareviewer.com/outdoor-vs-indoor-infrared-sauna/">
          Indoor & Outdoor <span class="chevron">▼</span>
        </a>
        <div class="mega-dropdown">
          <div class="dd-featured">
            <div class="dd-featured-icon">🏡</div>
            <div>
              <h4>Indoor & Outdoor Saunas</h4>
              <p>Find the perfect fit for your space</p>
            </div>
          </div>
          <div class="dd-separator"></div>
          <a href="https://saunareviewer.com/find-best-indoor-infrared-sauna-kits-for-sale/">
            <span class="dd-icon">🏢</span>
            <span class="dd-text">
              <span class="dd-label">Indoor Infrared Saunas</span>
              <span class="dd-desc">Best indoor sauna kits for sale</span>
            </span>
            <span class="dd-arrow">→</span>
          </a>
          <a href="https://saunareviewer.com/3-best-rated-outdoor-infrared-sauna-kits-for-sale/">
            <span class="dd-icon">🌲</span>
            <span class="dd-text">
              <span class="dd-label">Outdoor Infrared Saunas</span>
              <span class="dd-desc">Weather-proof backyard saunas</span>
            </span>
            <span class="dd-arrow">→</span>
          </a>
          <a href="https://saunareviewer.com/best-barrel-sauna-kit-review-and-hot-sales/">
            <span class="dd-icon">🛢️</span>
            <span class="dd-text">
              <span class="dd-label">Barrel Sauna Kits</span>
              <span class="dd-desc">Classic barrel design kits</span>
            </span>
            <span class="dd-arrow">→</span>
          </a>
          <a href="https://saunareviewer.com/tips-to-choose-the-best-cedar-infrared-sauna-kits/">
            <span class="dd-icon">🌿</span>
            <span class="dd-text">
              <span class="dd-label">Cedar Sauna Kits</span>
              <span class="dd-desc">Premium Western Red Cedar builds</span>
            </span>
            <span class="dd-arrow">→</span>
          </a>
        </div>
      </div>

      <!-- SAUNA SAFETY TIPS (no dropdown) -->
      <div class="mega-nav-item">
        <a href="https://saunareviewer.com/sauna-dangers-and-safe-use/">
          Safety Tips
        </a>
      </div>

      <!-- BY PERSON -->
      <div class="mega-nav-item">
        <a href="https://saunareviewer.com/buy-best-infrared-sauna-by-person/">
          By Person <span class="chevron">▼</span>
        </a>
        <div class="mega-dropdown">
          <div class="dd-featured">
            <div class="dd-featured-icon">👥</div>
            <div>
              <h4>Shop by Capacity</h4>
              <p>Find the right size for you &amp; your family</p>
            </div>
          </div>
          <div class="dd-separator"></div>
          <a href="https://saunareviewer.com/best-1-person-infrared-sauna/">
            <span class="dd-icon">1️⃣</span>
            <span class="dd-text">
              <span class="dd-label">1 Person Sauna</span>
              <span class="dd-desc">Compact personal saunas</span>
            </span>
            <span class="dd-arrow">→</span>
          </a>
          <a href="https://saunareviewer.com/the-advantages-of-buying-a-2-person-infrared-sauna/">
            <span class="dd-icon">2️⃣</span>
            <span class="dd-text">
              <span class="dd-label">2 Person Sauna</span>
              <span class="dd-desc">Perfect for couples</span>
            </span>
            <span class="dd-arrow">→</span>
          </a>
          <a href="https://saunareviewer.com/overview-3-person-infrared-saunas/">
            <span class="dd-icon">3️⃣</span>
            <span class="dd-text">
              <span class="dd-label">3 Person Sauna</span>
              <span class="dd-desc">Family-friendly mid-size</span>
            </span>
            <span class="dd-arrow">→</span>
          </a>
          <a href="https://saunareviewer.com/a-look-at-the-4-person-infrared-sauna/">
            <span class="dd-icon">4️⃣</span>
            <span class="dd-text">
              <span class="dd-label">4 Person Sauna</span>
              <span class="dd-desc">Large saunas for the whole family</span>
            </span>
            <span class="dd-arrow">→</span>
          </a>
        </div>
      </div>

      <!-- BUDGET SAUNAS (no dropdown) -->
      <div class="mega-nav-item">
        <a href="https://saunareviewer.com/cheap-infrared-saunas-for-sale/">
          💰 Budget Saunas
        </a>
      </div>

      <!-- BRANDS -->
      <div class="mega-nav-item">
        <a href="#">
          Brands <span class="chevron">▼</span>
        </a>
        <div class="mega-dropdown wide" style="right:0;left:auto;">
          <div class="dd-header">JNH Lifestyles Freedom Collection</div>
          <div class="mega-cols">
            <a href="https://saunareviewer.com/jnh-lifestyles-freedom-1-person-far-infrared-sauna/">
              <span class="dd-icon">1️⃣</span>
              <span class="dd-text">
                <span class="dd-label">JNH Freedom 1 Person</span>
                <span class="dd-desc">Personal cedar sauna</span>
              </span>
              <span class="dd-arrow">→</span>
            </a>
            <a href="https://saunareviewer.com/jnh-lifestyles-freedom-2-person-far-infrared-sauna/">
              <span class="dd-icon">2️⃣</span>
              <span class="dd-text">
                <span class="dd-label">JNH Freedom 2 Person</span>
                <span class="dd-desc">Couples infrared sauna</span>
              </span>
              <span class="dd-arrow">→</span>
            </a>
            <a href="https://saunareviewer.com/jnh-lifestyles-freedom-3-person-far-infrared-sauna/">
              <span class="dd-icon">3️⃣</span>
              <span class="dd-text">
                <span class="dd-label">JNH Freedom 3 Person</span>
                <span class="dd-desc">Family-size premium</span>
              </span>
              <span class="dd-arrow">→</span>
            </a>
            <a href="https://saunareviewer.com/jnh-lifestyles-freedom-4-person-far-infrared-sauna/">
              <span class="dd-icon">4️⃣</span>
              <span class="dd-text">
                <span class="dd-label">JNH Freedom 4 Person</span>
                <span class="dd-desc">Full-size luxury cedar</span>
              </span>
              <span class="dd-arrow">→</span>
            </a>
          </div>
          <div class="dd-separator" style="margin-top:12px;"></div>
          <a href="https://saunareviewer.com/jnh-lifestyles-freedom/" style="margin:4px 6px;border-radius:8px;">
            <span class="dd-icon">📖</span>
            <span class="dd-text">
              <span class="dd-label">View All JNH Freedom Reviews</span>
              <span class="dd-desc">Complete Freedom collection overview</span>
            </span>
            <span class="dd-arrow">→</span>
          </a>
        </div>
      </div>

    </div>
  </nav>

</header>

<!-- ========== HERO ========== -->
<section class="hero">
  <img class="hero-bg-img" src="https://saunareviewer.com/wp-content/uploads/2025/12/sauna-reviews-1024x482.webp" alt="Sauna reviews" />
  <div class="container">
    <div class="hero-badge">✅ Independently Tested · Not Sponsored</div>
    <h1>Find Your <span>Perfect Sauna</span> for Home</h1>
    <p>We've tested 50+ infrared, traditional, and outdoor saunas so you don't have to. Honest reviews, real data, zero fluff.</p>
    <div class="hero-buttons">
      <a href="#finder" class="btn-primary" onclick="event.preventDefault();document.querySelector('.finder').scrollIntoView({behavior:'smooth'})">🔍 Find Your Sauna</a>
      <a href="https://saunareviewer.com/choose-best-infrared-saunas-by-budget/" class="btn-secondary">📖 Read Our Buying Guide</a>
    </div>
  </div>
</section>

<!-- ========== TRUST BAR ========== -->
<div class="trust-bar">
  <div class="container">
    <div class="trust-item">
      <div class="trust-icon">🧪</div>
      <div><strong>50+</strong><span>Saunas Tested</span></div>
    </div>
    <div class="trust-item">
      <div class="trust-icon">📅</div>
      <div><strong>8+ Years</strong><span>Reviewing Saunas</span></div>
    </div>
    <div class="trust-item">
      <div class="trust-icon">👥</div>
      <div><strong>120K+</strong><span>Monthly Readers</span></div>
    </div>
    <div class="trust-item">
      <div class="trust-icon">⭐</div>
      <div><strong>Unbiased</strong><span>Independent Reviews</span></div>
    </div>
  </div>
</div>

<!-- ========== SAUNA FINDER ========== -->
<section class="finder" id="finder">
  <div class="container">
    <div class="finder-header">
      <p class="section-label">Sauna Finder</p>
      <h2 class="section-title">Find the Right Sauna for You</h2>
      <p class="section-subtitle">Use our filters to narrow down the perfect sauna based on your needs, space, and budget.</p>
    </div>
    <div class="finder-grid">
      <div class="filter-card">
        <label>Sauna Type</label>
        <select>
          <option>All Types</option>
          <option>Infrared Sauna</option>
          <option>Traditional / Finnish</option>
          <option>Steam Sauna</option>
          <option>Outdoor Sauna</option>
          <option>Portable Sauna</option>
          <option>Barrel Sauna</option>
          <option>Sauna Blanket</option>
        </select>
      </div>
      <div class="filter-card">
        <label>Capacity (Persons)</label>
        <select>
          <option>Any Size</option>
          <option>1 Person</option>
          <option>2 Person</option>
          <option>3 Person</option>
          <option>4+ Person</option>
        </select>
      </div>
      <div class="filter-card">
        <label>Brand</label>
        <select>
          <option>All Brands</option>
          <option>JNH Lifestyles</option>
          <option>Dynamic Saunas</option>
          <option>Radiant Saunas</option>
          <option>Almost Heaven</option>
          <option>SereneLife</option>
          <option>Maxxus</option>
          <option>Sunray</option>
          <option>Clearlight</option>
          <option>Health Mate</option>
        </select>
      </div>
      <div class="filter-card">
        <label>Budget</label>
        <select>
          <option>Any Budget</option>
          <option>Under $1,000</option>
          <option>$1,000 – $2,000</option>
          <option>$2,000 – $3,500</option>
          <option>$3,500+</option>
        </select>
      </div>
      <div class="filter-card">
        <label>Heat Source</label>
        <select>
          <option>Any</option>
          <option>Carbon Infrared</option>
          <option>Ceramic Infrared</option>
          <option>Far Infrared</option>
          <option>Full Spectrum</option>
          <option>Wood Burning</option>
          <option>Electric</option>
        </select>
      </div>
      <div class="filter-card">
        <label>Location</label>
        <select>
          <option>Indoor & Outdoor</option>
          <option>Indoor Only</option>
          <option>Outdoor Only</option>
        </select>
      </div>
    </div>
    <div class="finder-btn-wrap">
      <button class="finder-btn">Show Matching Saunas →</button>
    </div>
  </div>
</section>

<!-- ========== CATEGORIES ========== -->
<section class="categories">
  <div class="container">
    <div class="categories-header">
      <p class="section-label">Browse by Category</p>
      <h2 class="section-title">Explore Sauna Types</h2>
      <p class="section-subtitle">Whether you want a compact indoor unit or a backyard barrel sauna, we've reviewed the best in every category.</p>
    </div>
    <div class="cat-grid">
      <a href="https://saunareviewer.com/category/infrared-saunas/" class="cat-card">
        <div class="cat-card-bg" style="background-image:url('https://images.unsplash.com/photo-1612004534765-1fce8c2e5881?w=600&q=80');"></div>
        <div class="cat-card-tint"></div>
        <div class="cat-card-content">
          <h3>Infrared Saunas</h3>
          <p>Most popular for home use</p>
        </div>
        <div class="arrow">→</div>
      </a>
      <a href="https://saunareviewer.com/3-best-rated-outdoor-infrared-sauna-kits-for-sale/" class="cat-card">
        <div class="cat-card-bg" style="background-image:url('https://images.unsplash.com/photo-1575488605885-3e0a75eee4f7?w=600&q=80');"></div>
        <div class="cat-card-tint"></div>
        <div class="cat-card-content">
          <h3>Outdoor Saunas</h3>
          <p>Backyard & garden options</p>
        </div>
        <div class="arrow">→</div>
      </a>
      <a href="https://saunareviewer.com/best-barrel-sauna-kit-review-and-hot-sales/" class="cat-card">
        <div class="cat-card-bg" style="background-image:url('https://images.unsplash.com/photo-1571987937391-98ee649de58d?w=600&q=80');"></div>
        <div class="cat-card-tint"></div>
        <div class="cat-card-content">
          <h3>Barrel Saunas</h3>
          <p>Classic look, efficient heat</p>
        </div>
        <div class="arrow">→</div>
      </a>
      <a href="https://saunareviewer.com/category/portable-sauna/" class="cat-card">
        <div class="cat-card-bg" style="background-image:url('https://images.unsplash.com/photo-1600891964599-f94d5765e4bc?w=600&q=80');"></div>
        <div class="cat-card-tint"></div>
        <div class="cat-card-content">
          <h3>Portable Saunas</h3>
          <p>Budget-friendly & compact</p>
        </div>
        <div class="arrow">→</div>
      </a>
      <a href="https://saunareviewer.com/best-infrared-sauna-blanket-reviews/" class="cat-card">
        <div class="cat-card-bg" style="background-image:url('https://images.unsplash.com/photo-1544161515-4ab6ce6db874?w=600&q=80');"></div>
        <div class="cat-card-tint"></div>
        <div class="cat-card-content">
          <h3>Sauna Blankets</h3>
          <p>Infrared therapy on the go</p>
        </div>
        <div class="arrow">→</div>
      </a>
      <a href="https://saunareviewer.com/infrared-sauna-vs-traditional-steam-sauna/" class="cat-card">
        <div class="cat-card-bg" style="background-image:url('https://images.unsplash.com/photo-1515377905703-c4788e51af15?w=600&q=80');"></div>
        <div class="cat-card-tint"></div>
        <div class="cat-card-content">
          <h3>Traditional / Finnish</h3>
          <p>The authentic experience</p>
        </div>
        <div class="arrow">→</div>
      </a>
      <a href="https://saunareviewer.com/find-best-indoor-infrared-sauna-kits-for-sale/" class="cat-card">
        <div class="cat-card-bg" style="background-image:url('https://images.unsplash.com/photo-1583417319070-4a69db38a482?w=600&q=80');"></div>
        <div class="cat-card-tint"></div>
        <div class="cat-card-content">
          <h3>Indoor Saunas</h3>
          <p>Fits right in your home</p>
        </div>
        <div class="arrow">→</div>
      </a>
      <a href="https://saunareviewer.com/best-steam-sauna-shower-combo/" class="cat-card">
        <div class="cat-card-bg" style="background-image:url('https://images.unsplash.com/photo-1540555700478-4be289fbec6d?w=600&q=80');"></div>
        <div class="cat-card-tint"></div>
        <div class="cat-card-content">
          <h3>Steam Saunas</h3>
          <p>Humidity & deep relaxation</p>
        </div>
        <div class="arrow">→</div>
      </a>
      <a href="https://saunareviewer.com/the-advantages-of-buying-a-2-person-infrared-sauna/" class="cat-card">
        <div class="cat-card-bg" style="background-image:url('https://images.unsplash.com/photo-1596178060810-72f53ce9a65c?w=600&q=80');"></div>
        <div class="cat-card-tint"></div>
        <div class="cat-card-content">
          <h3>2-Person Saunas</h3>
          <p>Compact for couples</p>
        </div>
        <div class="arrow">→</div>
      </a>
    </div>
  </div>
</section>

<!-- ========== TOP PICKS ========== -->
<section class="top-picks">
  <div class="container">
    <div class="top-picks-header">
      <p class="section-label">Editor's Choice</p>
      <h2 class="section-title">Our Top Rated Saunas for 2026</h2>
      <p class="section-subtitle">Hand-tested picks across every budget and category. Updated monthly.</p>
    </div>
    <div class="picks-grid">

      <!-- Pick 1 -->
      <div class="pick-card">
        <div class="pick-img">
          <div class="pick-badge">🏆 Best Overall</div>
          <img src="https://images.unsplash.com/photo-1612004534765-1fce8c2e5881?w=400&q=80" alt="Best Overall Sauna" style="max-height:170px;object-fit:contain;border-radius:8px;">
        </div>
        <div class="pick-body">
          <div class="pick-rating">
            <span class="stars">★★★★★</span>
            <span class="rating-num">9.6/10</span>
            <span class="rating-count">(Expert Score)</span>
          </div>
          <h3>JNH Lifestyles Joyous 2-Person</h3>
          <p class="pick-desc">Our top pick for most buyers. Carbon fiber heaters, solid hemlock construction, and excellent heat distribution at a fair price.</p>
          <div class="pick-tags">
            <span class="pick-tag">2 Person</span>
            <span class="pick-tag">Carbon IR</span>
            <span class="pick-tag">Indoor</span>
          </div>
          <div class="pick-footer">
            <div class="pick-price">$1,499 <small>MSRP</small></div>
            <button class="pick-cta">Read Review →</button>
          </div>
        </div>
      </div>

      <!-- Pick 2 -->
      <div class="pick-card">
        <div class="pick-img">
          <div class="pick-badge">💰 Best Value</div>
          <img src="https://images.unsplash.com/photo-1600891964599-f94d5765e4bc?w=400&q=80" alt="Best Value Sauna" style="max-height:170px;object-fit:contain;border-radius:8px;">
        </div>
        <div class="pick-body">
          <div class="pick-rating">
            <span class="stars">★★★★★</span>
            <span class="rating-num">9.2/10</span>
            <span class="rating-count">(Expert Score)</span>
          </div>
          <h3>SereneLife Portable Infrared</h3>
          <p class="pick-desc">Incredible bang for your buck. Sets up in minutes, folds flat for storage, and delivers genuine infrared heat therapy.</p>
          <div class="pick-tags">
            <span class="pick-tag">1 Person</span>
            <span class="pick-tag">Portable</span>
            <span class="pick-tag">Budget</span>
          </div>
          <div class="pick-footer">
            <div class="pick-price">$189 <small>MSRP</small></div>
            <button class="pick-cta">Read Review →</button>
          </div>
        </div>
      </div>

      <!-- Pick 3 -->
      <div class="pick-card">
        <div class="pick-img">
          <div class="pick-badge">🌲 Best Outdoor</div>
          <img src="https://images.unsplash.com/photo-1540555700478-4be289fbec6d?w=400&q=80" alt="Best Outdoor Sauna" style="max-height:170px;object-fit:contain;border-radius:8px;">
        </div>
        <div class="pick-body">
          <div class="pick-rating">
            <span class="stars">★★★★★</span>
            <span class="rating-num">9.4/10</span>
            <span class="rating-count">(Expert Score)</span>
          </div>
          <h3>Almost Heaven Pinnacle Barrel</h3>
          <p class="pick-desc">Stunning barrel design, premium rustic red cedar construction, and room for 4. A backyard showpiece that performs.</p>
          <div class="pick-tags">
            <span class="pick-tag">4 Person</span>
            <span class="pick-tag">Barrel</span>
            <span class="pick-tag">Outdoor</span>
          </div>
          <div class="pick-footer">
            <div class="pick-price">$3,299 <small>MSRP</small></div>
            <button class="pick-cta">Read Review →</button>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>

<!-- ========== HOW WE TEST ========== -->
<section class="how-we-test">
  <div class="container">
    <div class="how-we-test-inner">
      <div class="hwt-text">
        <p class="section-label">Our Process</p>
        <h2 class="section-title">How We Test & Rate Saunas</h2>
        <p>Every sauna we review goes through a rigorous hands-on evaluation. We don't rely on spec sheets — we build, heat, and sweat in every unit we recommend.</p>
        <div class="hwt-steps">
          <div class="hwt-step">
            <div class="hwt-step-num">1</div>
            <div>
              <h4>Unbox & Assemble</h4>
              <p>We time and document the full setup process</p>
            </div>
          </div>
          <div class="hwt-step">
            <div class="hwt-step-num">2</div>
            <div>
              <h4>Heat Performance</h4>
              <p>We measure heat-up time, max temp, and heat distribution</p>
            </div>
          </div>
          <div class="hwt-step">
            <div class="hwt-step-num">3</div>
            <div>
              <h4>Build Quality</h4>
              <p>Materials, craftsmanship, and durability testing</p>
            </div>
          </div>
          <div class="hwt-step">
            <div class="hwt-step-num">4</div>
            <div>
              <h4>Real-World Use</h4>
              <p>30+ days of daily sessions before we publish a review</p>
            </div>
          </div>
        </div>
      </div>
      <div class="hwt-visual">
        <div class="hwt-visual-icon">🌡️</div>
        <h3>Data-Driven Reviews</h3>
        <p>Every rating is backed by measurable performance data</p>
        <div class="hwt-stat-row">
          <div class="hwt-stat">
            <strong>30+</strong>
            <span>Days Testing</span>
          </div>
          <div class="hwt-stat">
            <strong>12</strong>
            <span>Criteria Scored</span>
          </div>
          <div class="hwt-stat">
            <strong>100%</strong>
            <span>Independent</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ========== BRANDS ========== -->
<section class="brands">
  <div class="container">
    <div class="brands-header">
      <p class="section-label">Brands We Review</p>
      <h2 class="section-title" style="font-size:28px;">Trusted Sauna Brands</h2>
    </div>
    <div class="brands-grid">
      <a href="#" class="brand-logo">JNH Lifestyles</a>
      <a href="#" class="brand-logo">Dynamic Saunas</a>
      <a href="#" class="brand-logo">Radiant Saunas</a>
      <a href="#" class="brand-logo">Almost Heaven</a>
      <a href="#" class="brand-logo">Clearlight</a>
      <a href="#" class="brand-logo">Health Mate</a>
      <a href="#" class="brand-logo">Maxxus</a>
      <a href="#" class="brand-logo">SereneLife</a>
    </div>
  </div>
</section>

<!-- ========== NEWSLETTER ========== -->
<section class="newsletter">
  <div class="container">
    <p class="section-label">Stay Updated</p>
    <h2 class="section-title">Get the Best Sauna Deals</h2>
    <p>Join 15,000+ subscribers. We send sauna deals, new reviews, and buying tips — no spam, ever.</p>
    <form class="newsletter-form" onsubmit="event.preventDefault();">
      <input type="email" placeholder="Enter your email" aria-label="Email address">
      <button type="submit">Subscribe →</button>
    </form>
  </div>
</section>

<!-- ========== FOOTER ========== -->
<footer class="footer">
  <div class="container">
    <div class="footer-grid">
      <div class="footer-brand">
        <div class="logo" style="color:#fff;font-size:20px;">
          <div class="logo-icon" style="width:34px;height:34px;font-size:18px;">🧖</div>
          SAUNA REVIEWER
        </div>
        <p>Independent sauna reviews since 2018. We test every sauna we recommend so you can buy with confidence.</p>
      </div>
      <div>
        <h4>Reviews</h4>
        <ul>
          <li><a href="#">Infrared Saunas</a></li>
          <li><a href="#">Outdoor Saunas</a></li>
          <li><a href="#">Barrel Saunas</a></li>
          <li><a href="#">Portable Saunas</a></li>
          <li><a href="#">Sauna Blankets</a></li>
        </ul>
      </div>
      <div>
        <h4>Guides</h4>
        <ul>
          <li><a href="#">Buying Guide</a></li>
          <li><a href="#">Infrared vs Traditional</a></li>
          <li><a href="#">Health Benefits</a></li>
          <li><a href="#">Installation Tips</a></li>
          <li><a href="#">Sauna Safety</a></li>
        </ul>
      </div>
      <div>
        <h4>Company</h4>
        <ul>
          <li><a href="#">About Us</a></li>
          <li><a href="#">How We Test</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Privacy Policy</a></li>
          <li><a href="#">Affiliate Disclosure</a></li>
        </ul>
      </div>
    </div>
    <div class="footer-bottom">
      © 2026 Sauna Reviewer. All rights reserved. As an Amazon Associate, we earn from qualifying purchases.
    </div>
  </div>
</footer>

<script>
/* ---- Expanding Search Box ---- */
function toggleHeaderSearch(btn) {
  const wrap = btn.closest('.header-search-wrap');
  const input = wrap.querySelector('.header-search-input');
  if (wrap.classList.contains('open')) {
    if (input.value.trim()) {
      window.location.href = '/?s=' + encodeURIComponent(input.value.trim());
    }
  } else {
    wrap.classList.add('open');
    setTimeout(() => input.focus(), 100);
  }
}
function closeHeaderSearch() {
  const wrap = document.querySelector('.header-search-wrap');
  const input = wrap.querySelector('.header-search-input');
  wrap.classList.remove('open');
  input.value = '';
}
document.addEventListener('keydown', e => {
  if (e.key === 'Escape') closeHeaderSearch();
  if (e.key === 'Enter') {
    const input = document.querySelector('.header-search-wrap.open .header-search-input');
    if (input && input.value.trim()) {
      window.location.href = '/?s=' + encodeURIComponent(input.value.trim());
    }
  }
});
document.addEventListener('click', e => {
  const wrap = document.querySelector('.header-search-wrap');
  const closeBtn = document.querySelector('.header-search-close');
  if (wrap && wrap.classList.contains('open') && !wrap.contains(e.target) && e.target !== closeBtn) {
    closeHeaderSearch();
  }
});
</script>