/* Baltresto shared design system
   Header, footer, buttons, colours, type — used by all pages.
   Shared components, homepage, story and catalogue layouts.
   All pages use these tokens; avoid page-wide inline overrides.
*/

:root {
  --cream: #f5efe6;
  --cream-dark: #ebe3d6;
  --text: #1c1c1c;
  --text-muted: #5c5c5c;
  --muted: #6b6560;
  --accent: #9a6b4a;
  --accent-dark: #7d5639;
  --gold: #c4a574;
  --white: #fff;
  --radius: 1.75rem;
  --radius-sm: 1.15rem;
  --shadow: 0 6px 28px rgba(28, 28, 28, 0.06);
  --shadow-hover: 0 16px 40px rgba(154, 107, 74, 0.12);
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Inter', system-ui, sans-serif;
  --max: 1200px;
  --header-h: 4.5rem;
  --section-pad-x: 1.25rem;
  --section-pad-x-md: 2rem;
  --section-gap: 3.5rem;
  --section-gap-md: 4rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  padding-top: var(--header-h);
  overflow-x: hidden;
}
body.modal-open {
  overflow: hidden;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}

/* ===== Floating glass header (universal) ===== */
.header {
  position: fixed;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 1.5rem);
  max-width: 1120px;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(245, 239, 230, 0.5);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 8px 32px rgba(28, 28, 28, 0.06);
  transition:
    background 0.35s,
    box-shadow 0.35s;
}
.header.scrolled {
  background: rgba(245, 239, 230, 0.7);
  box-shadow: 0 10px 40px rgba(28, 28, 28, 0.1);
}
.logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  flex-shrink: 0;
}
.logo-img {
  display: block;
  height: 36px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}
.logo-img-light {
  display: none;
}
.header.over-video .logo-img-dark {
  display: none;
}
.header.over-video .logo-img-light {
  display: block;
}
.footer-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  margin-bottom: 0.65rem;
}
.footer-logo img {
  display: block;
  height: 36px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}
.footer-brand .logo {
  /* legacy text logo fallback */
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 700;
}
.nav {
  display: none;
  align-items: center;
  gap: 1.5rem;
}
.nav a {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.25s;
}
.nav a:hover,
.nav a.active {
  color: var(--accent);
}
.nav-cta {
  background: var(--accent) !important;
  color: #fff !important;
  padding: 0.45rem 1.05rem;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 600;
  transition:
    background 0.25s,
    transform 0.25s;
}
.nav-cta:hover {
  background: var(--accent-dark) !important;
  transform: translateY(-1px);
}
.menu-toggle {
  display: block;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.35rem;
  color: var(--text);
}

/* Mobile nav */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(245, 239, 230, 0.98);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
}
.mobile-nav.open {
  display: flex;
}
.mobile-nav a {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 700;
}
.mobile-nav .close {
  position: absolute;
  top: 1.15rem;
  right: 1.15rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
}

/* Shared footer */
.footer {
  background: var(--cream);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  color: var(--text-muted);
  padding: 3rem 1.25rem 1.75rem;
}
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}
.footer-brand .logo {
  color: var(--text);
  margin-bottom: 0.55rem;
}
.footer-brand p {
  font-size: 0.92rem;
  max-width: 30ch;
}
.footer h4 {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.85rem;
.footer ul {
}
  list-style: none;
}
.footer li {
  margin-bottom: 0.4rem;
}
.footer a {
  font-size: 0.92rem;
  transition: color 0.2s;
}
.footer a:hover {
  color: var(--accent);
}
.footer-bottom {
  max-width: var(--max);
  margin: 0 auto;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.82rem;
  text-align: center;
}

/* Shared utilities */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition:
    transform 0.25s,
    background 0.25s;
}
.btn-dark {
  background: var(--text);
  color: var(--cream);
}
.btn-dark:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-2px);
}
.btn-gold {
  background: var(--gold);
  color: var(--text);
}
.btn-gold:hover {
  background: #d4b88a;
  transform: translateY(-2px);
}
.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
}
.reveal {
  /* Progressive enhancement: never depend on JavaScript to show content. */
  opacity: 1;
  transform: none;
  transition:
    opacity 0.65s ease,
    transform 0.65s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 768px) {
  .header {
    padding: 0.75rem 1.35rem;
    width: calc(100% - 2.5rem);
  }
  .nav {
    display: flex;
  }
  .menu-toggle {
    display: none;
  }
  .footer {
    padding: 3.5rem 2rem 2rem;
  }
  .footer-inner {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 2.25rem;
  }
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* Focus states */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.chip:focus-visible,
.filter-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Unified section labels (homepage + shared) */
.section-label,
.benefits-label {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.72rem !important;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent) !important;
  margin-bottom: 0.65rem;
  line-height: 1;
}
.section-label .label-icon,
.benefits-label .label-icon,
.section-label .benefits-icon,
.benefits-label .benefits-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.95em;
  height: 0.95em;
  flex-shrink: 0;
  color: var(--accent);
}
.section-label .label-icon svg,
.benefits-label .label-icon svg,
.section-label .benefits-icon svg,
.benefits-label .benefits-icon svg {
  display: block;
  width: 0.95em;
  height: 0.95em;
  stroke: currentColor;
}

/* ===== Homepage & page components ===== */
/* Full-bleed video hero */
    .video-hero {
      position: relative;
      width: 100%;
      height: 100vh;
      min-height: 560px;
      max-height: 100dvh;
      overflow: hidden;
      background: #1a1816;
      margin-top: calc(-1 * var(--header-h, 4.5rem));
    }
    .video-hero-media { position: absolute; inset: 0; z-index: 0; }
    .video-hero-media video {
      position: absolute;
      top: 50%; left: 50%;
      width: 100vw;
      height: 56.25vw;
      min-height: 100%;
      min-width: 177.78vh;
      transform: translate(-50%, -50%);
      object-fit: cover;
      pointer-events: none;
    }
    .video-hero-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(
        180deg,
        rgba(20, 18, 16, 0) 0%,
        rgba(20, 18, 16, 0) 70%,
        rgba(20, 18, 16, 1) 100%
      );
    }
    .video-hero-content {
      position: relative;
      z-index: 2;
      height: 100%;
      max-width: var(--max);
      margin: 0 auto;
      padding: 6.5rem 1.25rem 2.5rem;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      color: #fff;
    }
    .video-hero h1 {
      font-family: var(--font-serif);
      font-size: clamp(3.2rem, 12vw, 5.8rem);
      font-weight: 700;
      line-height: 0.95;
      letter-spacing: -0.03em;
      margin-bottom: 1rem;
      max-width: 12ch;
    }
    .video-hero h1 span { display: block; }
    .video-hero-sub {
      font-size: 1.05rem;
      line-height: 1.5;
      opacity: 0.92;
      max-width: 36ch;
      margin-bottom: 1.5rem;
    }
    .video-hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.7rem;
      margin-bottom: 1.5rem;
    }
    .video-hero .btn-dark { background: #fff; color: var(--text); }
    .video-hero .btn-dark:hover { background: var(--cream); color: var(--accent); }
    .video-hero .btn-gold { background: var(--gold); color: var(--text); }
    .video-hero-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem 1.5rem;
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      opacity: 0.75;
    }
    .video-hero-scroll {
      position: absolute;
      bottom: 1.25rem;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      color: rgba(255,255,255,0.7);
      font-size: 0.72rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.35rem;
      text-decoration: none;
    }
    .video-hero-scroll span {
      width: 1px;
      height: 28px;
      background: rgba(255,255,255,0.5);
      animation: scrollPulse 1.8s ease-in-out infinite;
    }
    @keyframes scrollPulse {
      0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
      50% { opacity: 1; transform: scaleY(1); }
    }

    /* Brand + proof */
    .proof {
      max-width: var(--max);
      margin: 0 auto;
      padding: 2.5rem 1.25rem 3.5rem;
      text-align: center;
    }
    .proof-label {
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 0.75rem;
    }
    .proof h2 {
      font-family: var(--font-serif);
      font-size: clamp(1.85rem, 4.5vw, 2.5rem);
      font-weight: 700;
      line-height: 1.15;
      margin-bottom: 0.85rem;
    }
    .proof > p {
      color: var(--muted);
      font-size: 1.05rem;
      line-height: 1.65;
      max-width: 54ch;
      margin: 0 auto 1.75rem;
    }
    .proof-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.85rem;
      max-width: 100%;
      width: 100%;
      margin: 0 auto;
    }
    .proof-stat {
      background: var(--white);
      border-radius: var(--radius-sm);
      padding: 1.25rem 1.15rem 1.35rem;
      box-shadow: var(--shadow);
      text-align: left;
    }
    .proof-stat strong {
      display: block;
      font-family: var(--font-serif);
      font-size: 1.55rem;
      font-weight: 700;
      color: var(--accent);
      line-height: 1.1;
    }
    .proof-stat span {
      font-size: 0.9rem;
      color: var(--muted);
    }


    /* Category toggle */
    .cat-toggle-wrap {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 1.25rem 3.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.75rem;
    }
    .cat-toggle-label {
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .cat-toggle {
      display: inline-flex;
      background: var(--white);
      border-radius: 999px;
      padding: 0.3rem;
      box-shadow: var(--shadow);
      gap: 0.15rem;
    }
    .cat-toggle button {
      appearance: none;
      border: none;
      background: transparent;
      font-family: inherit;
      font-size: 0.88rem;
      font-weight: 600;
      padding: 0.55rem 1.15rem;
      border-radius: 999px;
      cursor: pointer;
      color: var(--muted);
      transition: background 0.25s, color 0.25s;
    }
    .cat-toggle button:hover { color: var(--text); }
    .cat-toggle button.active {
      background: var(--accent);
      color: #fff;
    }
    .cat-blurb {
      text-align: center;
      font-size: 0.95rem;
      color: var(--muted);
      max-width: 42ch;
      min-height: 2.8em;
    }
    .p-card[hidden] { display: none !important; }


    .collections-head {
      text-align: center;
      margin-bottom: 1.35rem;
    }
    .collections-head h2 {
      font-family: var(--font-serif);
      font-size: clamp(1.7rem, 4vw, 2.2rem);
      font-weight: 700;
      margin-bottom: 0.35rem;
    }
    .collections-head .benefits-label {
      display: inline-flex;
      margin-bottom: 0.65rem;
    }
    .collections-head > p:not(.benefits-label) {
      color: var(--muted);
      font-size: 0.98rem;
      margin-top: 0.35rem;
    }
    .faq h2 {
      margin-top: 0;
    }

    /* Collections */
    .collections {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 1.25rem 3.5rem;
    }
    .collections-head {
      margin-bottom: 1.25rem;
    }
    .collections-head h2 {
      font-family: var(--font-serif);
      font-size: clamp(1.7rem, 4vw, 2.2rem);
      font-weight: 700;
    }
    .collections-head .benefits-label {
      display: inline-flex;
      margin-bottom: 0.65rem;
    }
    .collections-head > p:not(.benefits-label) {
      color: var(--muted);
      font-size: 0.98rem;
      margin-top: 0.35rem;
    }
    .col-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
    }
    .col-card {
      position: relative;
      border-radius: var(--radius);
      overflow: hidden;
      aspect-ratio: 1 / 1;
      box-shadow: var(--shadow);
      display: block;
    }
    .col-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s ease;
    }
    .col-card:hover img { transform: scale(1.04); }
    .col-content {
      position: absolute;
      inset: auto 0 0 0;
      padding: 1.5rem 1.25rem;
      background: linear-gradient(transparent, rgba(28, 28, 28, 0.75));
      color: #fff;
    }
    .col-content h3 {
      font-family: var(--font-serif);
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 0.25rem;
    }
    .col-content p {
      font-size: 0.9rem;
      opacity: 0.9;
      margin-bottom: 0.45rem;
    }
    .col-link {
      font-size: 0.85rem;
      font-weight: 600;
    }

    /* Featured */
    .featured {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 1.25rem 3.5rem;
    }
    .sec-head {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      margin-bottom: 1.35rem;
    }
    .sec-head h2 {
      font-family: var(--font-serif);
      font-size: clamp(1.7rem, 4vw, 2.2rem);
      font-weight: 700;
    }
    .sec-head a {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--accent);
    }
    .feat-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
    }
    .p-card {
      background: var(--white);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
      transition: transform 0.3s, box-shadow 0.3s;
      display: flex;
      flex-direction: column;
    }
    .p-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
    }
    .p-img {
      aspect-ratio: 1 / 1;
      overflow: hidden;
      background: var(--cream-dark);
    }
    .p-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s ease;
    }
    .p-card:hover .p-img img { transform: scale(1.04); }
    .p-body {
      padding: 1.15rem 1.2rem 1.35rem;
      display: flex;
      flex-direction: column;
      flex: 1;
    }
    .p-body h3 {
      font-family: var(--font-serif);
      font-size: 1.25rem;
      font-weight: 700;
      margin-bottom: 0.3rem;
    }
    .p-body p {
      font-size: 0.9rem;
      color: var(--muted);
      margin-bottom: 0.75rem;
      flex: 1;
    }
    .p-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
    }
    .feat-note {
      font-size: 0.85rem;
      color: var(--muted);
      margin-top: 0.25rem;
    }
    .p-price {
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--accent);
    }
    .p-link {
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--accent);
    }

    /* Benefits */
    .benefits-panel[hidden] { display: none !important; }

    .faq {
      text-align: center;
    }
    .faq-item {
      text-align: left;
    }

    .benefits {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 1.25rem 3.5rem;
    }
    .benefits-head {
      text-align: center;
      max-width: 540px;
      margin: 0 auto 1.75rem;
    }


    .benefits-head h2 {
      font-family: var(--font-serif);
      font-size: clamp(1.85rem, 4.5vw, 2.5rem);
      font-weight: 700;
      line-height: 1.15;
      margin-bottom: 0.65rem;
    }
    .benefits-head .benefits-label {
      display: inline-flex;
      margin-bottom: 0.65rem;
    }
    .benefits-head .benefits-intro {
      color: var(--muted);
      font-size: 1.02rem;
      line-height: 1.55;
    }
    .benefits-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.75rem;
    }
    .benefit {
      background: var(--white);
      border-radius: var(--radius-sm);
      padding: 1.25rem 1.2rem;
      box-shadow: var(--shadow);
    }
    .benefit h3 {
      font-size: 1.02rem;
      font-weight: 600;
      margin-bottom: 0.3rem;
    }
    .benefit p {
      font-size: 0.9rem;
      color: var(--muted);
      margin: 0;
      line-height: 1.5;
    }


    .contact-hub {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 1.25rem 4rem;
    }
    .contact-hub-head {
      text-align: center;
      max-width: 560px;
      margin: 0 auto 1.75rem;
    }
    .contact-hub-label {
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 0.55rem;
    }
    .contact-hub-head h2 {
      font-family: var(--font-serif);
      font-size: clamp(1.85rem, 4.5vw, 2.45rem);
      font-weight: 700;
      line-height: 1.15;
      margin-bottom: 0.55rem;
    }
    .contact-hub-head .benefits-label {
      display: inline-flex;
      margin-bottom: 0.55rem;
    }
    .contact-hub-head > p:not(.benefits-label) {
      color: var(--muted);
      font-size: 1.02rem;
      line-height: 1.55;
    }
    .duo-card h3 {
      font-family: var(--font-serif);
      font-size: 1.45rem;
      font-weight: 700;
      line-height: 1.2;
    }
    .duo-card-wide { grid-column: 1 / -1; }
    .contact-hub-note {
      text-align: center;
      font-size: 0.85rem;
      color: var(--muted);
      margin-top: 1.25rem;
    }
    .contact-duo { display: none; } /* legacy removed */

    /* Contact / Dealer duo */
    .contact-duo {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0.5rem 1.25rem 3.5rem;
    }
    .duo-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
    }
    .duo-card {
      background: var(--white);
      border-radius: var(--radius);
      padding: 1.75rem 1.5rem;
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }
    .duo-card h2 {
      font-family: var(--font-serif);
      font-size: clamp(1.55rem, 3.5vw, 1.95rem);
      font-weight: 700;
      line-height: 1.2;
    }
    .duo-card p {
      color: var(--muted);
      font-size: 0.98rem;
      line-height: 1.55;
      flex: 1;
    }
    .duo-card .btn { align-self: flex-start; margin-top: 0.35rem; }

    /* Simple modals */
    .form-backdrop {
      position: fixed;
      inset: 0;
      z-index: 200;
      background: rgba(20, 18, 16, 0.5);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s, visibility 0.3s;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding: 0;
    }
    .form-backdrop.open {
      opacity: 1;
      visibility: visible;
    }
    .form-modal {
      background: var(--cream);
      border-radius: 1.5rem 1.5rem 0 0;
      width: 100%;
      max-height: min(92vh, 920px);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transform: translateY(100%);
      transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
      position: relative;
      box-shadow: 0 -12px 40px rgba(0,0,0,0.12);
    }
    .form-backdrop.open .form-modal { transform: translateY(0); }
    .form-modal-handle {
      width: 36px;
      height: 4px;
      border-radius: 999px;
      background: rgba(0,0,0,0.12);
      margin: 0.55rem auto 0;
      flex-shrink: 0;
    }
    .form-modal-header {
      flex-shrink: 0;
      padding: 0.85rem 1.35rem 0.75rem;
      padding-right: 3.25rem;
      border-bottom: 1px solid rgba(0,0,0,0.06);
      position: relative;
    }
    .form-modal-header h2 {
      font-family: var(--font-serif);
      font-size: 1.55rem;
      font-weight: 700;
      margin: 0 0 0.3rem;
      line-height: 1.2;
    }
    .form-modal-header .form-lead {
      color: var(--muted);
      font-size: 0.9rem;
      line-height: 1.45;
      margin: 0;
    }
    .form-close {
      position: absolute;
      top: 0.85rem;
      right: 1rem;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: none;
      background: var(--white);
      box-shadow: var(--shadow);
      cursor: pointer;
      font-size: 1.05rem;
      line-height: 1;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text);
    }
    .form-close:hover { background: var(--cream-dark); }
    .form-scroll {
      flex: 1 1 auto;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      padding: 1.1rem 1.35rem 0.5rem;
      scrollbar-width: thin;
      scrollbar-color: rgba(0,0,0,0.2) transparent;
    }
    .form-scroll::-webkit-scrollbar { width: 6px; }
    .form-scroll::-webkit-scrollbar-thumb {
      background: rgba(0,0,0,0.18);
      border-radius: 999px;
    }
    .form-group {
      margin-bottom: 0.85rem;
    }
    .form-group label {
      display: block;
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      margin-bottom: 0.3rem;
      color: var(--text);
    }
    .form-group input,
    .form-group select,
    .form-group textarea {
      width: 100%;
      padding: 0.7rem 0.85rem;
      border-radius: 0.85rem;
      border: 1.5px solid rgba(0,0,0,0.1);
      background: var(--white);
      font-family: inherit;
      font-size: 0.95rem;
      color: var(--text);
      outline: none;
      transition: border-color 0.2s;
    }
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
      border-color: var(--accent);
    }
    .form-group textarea {
      min-height: 88px;
      resize: vertical;
      max-height: 160px;
    }
    .form-footer {
      flex-shrink: 0;
      padding: 0.85rem 1.35rem 1.15rem;
      border-top: 1px solid rgba(0,0,0,0.06);
      background: rgba(245, 239, 230, 0.96);
      backdrop-filter: blur(8px);
    }
    .form-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }
    .form-actions .btn {
      flex: 1;
      min-width: 120px;
      padding: 0.8rem 1.2rem;
    }
    .form-note {
      font-size: 0.78rem;
      color: var(--muted);
      margin-top: 0.65rem;
      text-align: center;
    }
    .form-success {
      text-align: center;
      padding: 2rem 1.35rem;
      display: none;
    }
    .form-success.show { display: block; }
    .form-success h3 {
      font-family: var(--font-serif);
      font-size: 1.6rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
    }
    .form-success p { color: var(--muted); margin-bottom: 1.25rem; }
    .form-body {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }
    .form-body form {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }
    .form-body.hide { display: none; }



    .faq-head {
      text-align: center;
      max-width: 540px;
      margin: 0 auto 1.35rem;
    }
    .faq-head .benefits-label {
      display: inline-flex;
      margin-bottom: 0.65rem;
    }
    .sec-head .benefits-label {
      justify-content: flex-start;
      margin-bottom: 0.35rem;
    }
    .contact-hub-head .benefits-label {
      margin-bottom: 0.55rem;
    }
    .faq-head h2 {
      font-family: var(--font-serif);
      font-size: clamp(1.7rem, 4vw, 2.2rem);
      font-weight: 700;
      margin: 0;
    }

    /* FAQ accordion */
    .faq {
      max-width: 720px;
      margin: 0 auto;
      padding: 0 1.25rem 3.5rem;
    }
    .faq h2 {
      font-family: var(--font-serif);
      font-size: clamp(1.7rem, 4vw, 2.2rem);
      font-weight: 700;
      text-align: center;
      margin-bottom: 1.35rem;
    }
    .faq-item {
      background: var(--white);
      border-radius: var(--radius-sm);
      margin-bottom: 0.55rem;
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .faq-item button {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      background: none;
      border: none;
      cursor: pointer;
      font-family: inherit;
      text-align: left;
      padding: 1.1rem 1.2rem;
      font-size: 0.98rem;
      font-weight: 600;
      color: var(--text);
    }
    .faq-item button span {
      color: var(--accent);
      font-size: 1.25rem;
      font-weight: 500;
      line-height: 1;
      transition: transform 0.2s;
    }
    .faq-item.open button span { transform: rotate(45deg); }
    .faq-panel {
      display: none;
      padding: 0 1.2rem 1.1rem;
      font-size: 0.92rem;
      color: var(--muted);
      line-height: 1.55;
    }
    .faq-item.open .faq-panel { display: block; }

    /* CTA */
    .cta {
      text-align: center;
      padding: 2.5rem 1.25rem 4rem;
      max-width: 560px;
      margin: 0 auto;
    }
    .cta h2 {
      font-family: var(--font-serif);
      font-size: clamp(1.85rem, 4vw, 2.35rem);
      font-weight: 700;
      margin-bottom: 0.5rem;
    }
    .cta p {
      color: var(--muted);
      margin-bottom: 0.35rem;
    }
    .cta-note {
      font-size: 0.85rem;
      color: var(--muted);
      margin-bottom: 1.35rem;
    }

    .header.over-video {
      background: rgba(28, 28, 28, 0.35) !important;
      border-color: rgba(255,255,255,0.15) !important;
      box-shadow: none !important;
    }
    .header.over-video .nav a:not(.nav-cta),
    .header.over-video .menu-toggle { color: #fff !important; }
    .header.over-video .nav a:not(.nav-cta):hover,
    .header.over-video .nav a:not(.nav-cta).active { color: var(--gold) !important; }
    .header.over-video .nav-cta {
      background: #fff !important;
      color: #1c1c1c !important;
    }
    .header.over-video .nav-cta:hover {
      background: #f5efe6 !important;
      color: #9a6b4a !important;
    }




    @media (min-width: 768px) {
      .video-hero-content { padding: 7rem 2rem 3.5rem; }
      .video-hero h1 { font-size: clamp(4.5rem, 8vw, 6.5rem); }
      .video-hero-sub { font-size: 1.15rem; }
      .proof { padding: 3rem 2rem 4rem; }
      .cat-toggle-wrap { padding: 0 2rem 4rem; }
      .proof-stats {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.85rem;
      }
      .collections { padding: 0 2rem 4rem; }
      .col-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
      }
      .col-card { aspect-ratio: 1 / 1; }
      .featured { padding: 0 2rem 4rem; }
      .sec-head {
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
      }
      .feat-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
      }
      .benefits { padding: 0 2rem 4rem; }
      .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
      }

      .faq { padding: 0 2rem 4rem; }
      .contact-hub { padding: 0 2rem 5rem; }
      .duo-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
      .duo-card-wide { grid-column: 1 / -1; }
      .form-backdrop { align-items: center; padding: 1.5rem; }
      .form-modal {
        border-radius: var(--radius);
        max-width: 460px;
        max-height: min(88vh, 760px);
        transform: translateY(12px) scale(0.98);
        opacity: 0;
        transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), opacity 0.35s;
      }
      .form-backdrop.open .form-modal {
        transform: translateY(0) scale(1);
        opacity: 1;
      }
      .form-modal-handle { display: none; }
      .faq { padding: 0 2rem 4rem; }
      .cta { padding: 3rem 2rem 5rem; }
    }


    .sticky-cta {
      display: none;
      position: fixed;
      bottom: 1rem;
      left: 50%;
      transform: translateX(-50%);
      z-index: 90;
      padding: 0.75rem 1.35rem;
      border-radius: 999px;
      background: var(--accent);
      color: #fff !important;
      font-size: 0.88rem;
      font-weight: 600;
      box-shadow: 0 10px 32px rgba(154, 107, 74, 0.35);
      border: none;
      cursor: pointer;
      font-family: inherit;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s, transform 0.3s;
    }
    .sticky-cta.show {
      display: inline-flex;
      opacity: 1;
      pointer-events: auto;
    }
    .sticky-cta:hover { background: var(--accent-dark); }
    @media (min-width: 768px) {
      .sticky-cta { display: none !important; }
    }

    @media (prefers-reduced-motion: reduce) {
      .video-hero-scroll span { animation: none; }
    }


/* ===== Our story page ===== */
.story-page {
  padding-bottom: 0;
}
.story-hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: 2.5rem var(--section-pad-x) var(--section-gap);
  text-align: center;
}
.story-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0.5rem auto 1rem;
  max-width: 18ch;
}
.story-lead {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 48ch;
  margin: 0 auto;
}
.story-block {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--section-pad-x) var(--section-gap);
}
/* No full-bleed alt bands — keeps rhythm with homepage */
.story-block-alt {
  background: transparent;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--section-pad-x) var(--section-gap);
}
.story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
}
.story-text h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 0.85rem;
}
.story-text p {
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.65;
  margin-bottom: 0.85rem;
}
.story-text p:last-child {
  margin-bottom: 0;
}
.story-media {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
  background: var(--cream-dark);
}
.story-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-center {
  text-align: center;
  max-width: 540px;
  margin: 0 auto 1.5rem;
}
.story-center h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 4vw, 2.25rem);
  font-weight: 700;
  margin-bottom: 0.65rem;
}
.story-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  max-width: 800px;
  margin: 0 auto;
}
.story-stat {
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 1.15rem 1rem;
  text-align: center;
  box-shadow: var(--shadow);
}
.story-stat strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
  margin-bottom: 0.25rem;
}
.story-stat span {
  font-size: 0.9rem;
  color: var(--muted);
}
.story-principles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}
.story-principle {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.35rem 1.25rem;
  box-shadow: var(--shadow);
}
.story-principle h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.story-principle p {
  font-size: 0.95rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}
.story-note {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow);
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.story-note h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.55rem, 3.5vw, 2rem);
  font-weight: 700;
  margin-bottom: 0.65rem;
}
.story-note > p:not(.benefits-label) {
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0;
}
.story-cta {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--section-pad-x) 4.5rem;
}
.story-cta-inner {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  background: var(--white);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  box-shadow: var(--shadow);
}
.story-cta-inner h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 4vw, 2.2rem);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.story-cta-inner > p {
  color: var(--muted);
  margin-bottom: 1.25rem;
}
.story-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
}

@media (min-width: 768px) {
  .story-hero {
    padding: 3.25rem var(--section-pad-x-md) var(--section-gap-md);
  }
  .story-block,
  .story-block-alt {
    padding: 0 var(--section-pad-x-md) var(--section-gap-md);
  }
  .story-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
  .story-grid-reverse .story-text { order: 2; }
  .story-grid-reverse .story-media { order: 1; }
  .story-stats {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }
  .story-principles {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
  }
  .story-principles-2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
  .story-note {
    padding: 2rem 2.25rem;
  }
  .story-cta {
    padding: 0 var(--section-pad-x-md) 5rem;
  }
  .story-cta-inner {
    padding: 2.25rem 2.5rem;
  }
}

/* Homepage updates */
.how-it-works {
  max-width: 42ch;
  margin: 0 auto 1.75rem;
  font-size: 0.98rem;
  color: var(--muted);
  line-height: 1.55;
}
.how-it-works strong {
  color: var(--text);
  font-weight: 600;
}
.feat-row {
  margin-bottom: 3rem;
}
.feat-row:last-child {
  margin-bottom: 0;
}
.contact-card-note {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 0.75rem;
}
.p-meta {
  justify-content: flex-start;
}




/* ===== Shared product modal — locked to approved design ===== */
.product-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: rgba(20, 18, 16, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.product-modal-backdrop.open {
  opacity: 1;
  visibility: visible;
}
.product-modal {
  width: 100%;
  max-height: 92vh;
  background: var(--cream);
  border-radius: 1.5rem 1.5rem 0 0;
  box-shadow: 0 -12px 50px rgba(0, 0, 0, 0.12);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.product-modal-backdrop.open .product-modal {
  transform: translateY(0);
}
.product-modal-handle {
  width: 40px;
  height: 4px;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  margin: 0.55rem auto 0;
  flex-shrink: 0;
}
.product-modal-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--text);
  box-shadow: var(--shadow);
  z-index: 5;
}
.product-modal-close:hover {
  background: var(--cream-dark);
}
.product-modal-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0.5rem 1.15rem 1.5rem;
  flex: 1;
}
.product-modal-layout {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.product-modal-gallery {
  aspect-ratio: 1;
  border-radius: 1.25rem;
  overflow: hidden;
  background: var(--cream-dark);
}
.product-modal-gallery > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-modal-thumbs {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.65rem;
  overflow-x: auto;
}
.pm-thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 0.65rem;
  overflow: hidden;
  cursor: pointer;
  background: var(--cream-dark);
}
.pm-thumb.active {
  border-color: var(--accent);
}
.pm-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-modal-desc {
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}
.product-modal-title {
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 3.5vw, 1.85rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.45rem;
  padding-right: 2rem;
  color: var(--text);
}
.product-modal-meta {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0 0 0.85rem;
  line-height: 1.4;
}
.product-modal-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
}
.product-modal-metrics span {
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  background: var(--white);
  color: var(--text);
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.product-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.product-modal-actions .btn {
  width: 100%;
  border-radius: 999px;
  padding: 0.8rem 1.25rem;
}
.btn-outline {
  background: transparent;
  color: var(--text);
  border: 1.5px solid rgba(0, 0, 0, 0.12);
}
.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: transparent;
  transform: none;
}
.product-modal-specs-wrap {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 0.85rem;
}
.product-modal-specs-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 0 0.5rem;
}
.product-modal-specs-toggle .specs-chevron {
  font-size: 1rem;
  color: var(--accent);
  font-weight: 500;
}
.product-modal-specs {
  width: 100%;
}
.product-modal-specs[hidden] {
  display: none !important;
}
.product-modal-specs table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.product-modal-specs tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.product-modal-specs tr:last-child {
  border-bottom: none;
}
.product-modal-specs th {
  text-align: left;
  font-weight: 400;
  color: var(--muted);
  padding: 0.55rem 0.5rem 0.55rem 0;
  width: 52%;
}
.product-modal-specs td {
  text-align: right;
  font-weight: 500;
  color: var(--text);
  padding: 0.55rem 0;
}

@media (min-width: 768px) {
  .product-modal-backdrop {
    align-items: center;
    padding: 1.5rem;
  }
  .product-modal {
    max-width: 960px;
    max-height: min(90vh, 820px);
    border-radius: 1.75rem;
    transform: translateY(12px) scale(0.98);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s;
  }
  .product-modal-backdrop.open .product-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  .product-modal-handle {
    display: none;
  }
  .product-modal-scroll {
    padding: 1.5rem 1.6rem 1.75rem;
  }
  .product-modal-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
  }
  .product-modal-left {
    position: sticky;
    top: 0;
  }
  .product-modal-actions {
    flex-direction: row;
  }
  .product-modal-actions .btn {
    width: auto;
    flex: 1;
  }
}

/* Product cards always visible (don't wait for scroll observer) */
.p-card.reveal,
.card.reveal {
  opacity: 1;
  transform: none;
}


/* ===== Category layouts ===== */
    .page-hero{padding:3.5rem 2rem 2.5rem;max-width:var(--max);margin:0 auto}
    .breadcrumb{font-size:.8rem;color:var(--text-muted);margin-bottom:1rem}.breadcrumb a:hover{color:var(--accent)}
    .page-hero h1{font-family:var(--font-serif);font-size:clamp(2.6rem,5.5vw,4rem);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin-bottom:.75rem}
    .page-hero p{font-size:1.1rem;color:var(--text-muted);max-width:46ch}
    .content{max-width:var(--max);margin:0 auto;padding:0 2rem 4.5rem}
    .intro{background:var(--white);border-radius:var(--radius);padding:1.35rem 1.5rem;margin-bottom:2rem;box-shadow:var(--shadow);color:var(--text-muted)}.intro strong{color:var(--text);font-weight:600}
    .label{font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
    .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-bottom:2.5rem}
    .card{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .4s cubic-bezier(.25,.46,.45,.94),box-shadow .4s;display:flex;flex-direction:column}
    .card:hover{transform:translateY(-8px);box-shadow:var(--shadow-hover)}
    .card-img{aspect-ratio:1;overflow:hidden;background:var(--cream-dark);position:relative}
    .card-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.25,.46,.45,.94)}
    .card:hover .card-img img{transform:scale(1.08)}
    .badge{position:absolute;top:.85rem;left:.85rem;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);font-size:.72rem;font-weight:600;padding:.3rem .7rem;border-radius:999px}
    .card-body{padding:1.25rem 1.3rem 1.4rem;display:flex;flex-direction:column;flex:1}
    .card h3{font-family:var(--font-serif);font-size:1.35rem;font-weight:700;margin-bottom:.35rem}
    .card p{font-size:.92rem;color:var(--text-muted);margin-bottom:.9rem;flex:1}
    .card-meta{display:flex;align-items:center;justify-content:space-between}
    .count{font-size:.85rem;color:var(--text-muted);font-weight:700}
    .link{font-size:.85rem;font-weight:600;color:var(--accent)}
    .highlights{background:var(--white);border-radius:var(--radius);padding:1.75rem;margin-bottom:2.5rem;display:grid;grid-template-columns:1.15fr 1fr;gap:2rem;align-items:center;box-shadow:var(--shadow)}
    .highlights h3{font-family:var(--font-serif);font-size:1.6rem;font-weight:700;margin-bottom:.6rem}
    .highlights p{color:var(--text-muted);margin-bottom:1rem}
    .highlights ul{list-style:none}.highlights li{display:flex;gap:.55rem;font-size:.95rem;margin-bottom:.4rem}
    .highlights li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);margin-top:.45rem;flex-shrink:0}
    .highlights-visual{border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:1;background:var(--cream-dark)}
    .highlights-visual img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
    .highlights:hover .highlights-visual img{transform:scale(1.05)}
    .features{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-bottom:2.5rem}
    .feature{background:var(--white);border-radius:var(--radius-sm);padding:1.4rem;box-shadow:var(--shadow);transition:transform .35s}
    .feature:hover{transform:translateY(-4px)}
    .feature h4{font-size:1rem;font-weight:600;margin-bottom:.35rem}
    .feature p{font-size:.9rem;color:var(--text-muted)}
    .cta{background:linear-gradient(135deg,var(--accent),#b07d5a);color:#fff;border-radius:var(--radius);padding:1.75rem 2rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;box-shadow:0 12px 40px rgba(154,107,74,.25)}
    .cta h3{font-family:var(--font-serif);font-size:1.5rem;font-weight:700;margin-bottom:.25rem}
    .cta p{opacity:.92}

.card { border:0; text-align:left; font:inherit; color:inherit; width:100%; cursor:pointer; }
.card-img { flex-shrink:0; }
.card-quick { position:absolute; left:.75rem; right:.75rem; bottom:.75rem; background:rgba(245,239,230,.92); backdrop-filter:blur(10px); color:var(--text); font-size:.875rem; font-weight:600; text-align:center; padding:.55rem .75rem; border-radius:999px; opacity:0; transform:translateY(6px); transition:opacity .25s,transform .25s; pointer-events:none; }
.card:hover .card-quick,.card:focus-visible .card-quick { opacity:1; transform:none; }
.filters { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.filter-chip { border:1px solid var(--cream-dark); background:var(--white); color:var(--text-muted); padding:.65rem 1rem; border-radius:999px; font:inherit; font-size:.875rem; cursor:pointer; }
.filter-chip.active { background:var(--accent); border-color:var(--accent); color:white; }
.catalogue-count { color:var(--text-muted); font-size:.875rem; margin-bottom:1rem; }
.cta .btn { background:white; color:var(--accent); flex-shrink:0; }
.section-head { margin-bottom:1.25rem; }
.section-head h2 { font:700 clamp(1.6rem,4vw,2.1rem) var(--font-serif); }
.section-head > p { color:var(--muted); margin-top:.35rem; }
@media(max-width:1024px) { .grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .highlights { grid-template-columns:1fr; } .features { grid-template-columns:1fr 1fr; } }
@media(max-width:767px) { .page-hero { padding:2.5rem 1.25rem 1.75rem; } .content { padding:0 1.25rem 3rem; } .grid,.features { grid-template-columns:minmax(0,1fr); } .cta { flex-direction:column; align-items:flex-start; } }
@media(hover:none) { .card-quick { opacity:1; transform:none; } }

/* Accessibility and resilient layout */
[hidden] { display:none !important; }
button,input,select,textarea { font-family:inherit; }
.btn,.nav a { font-size:.875rem; }
.btn-outline { color:var(--text); background:transparent; border:1px solid var(--cream-dark); }
.mobile-nav { z-index:240; overflow-y:auto; padding:4rem 1.25rem; }
.menu-toggle,.mobile-nav .close,.product-modal-close,.form-close { min-width:44px; min-height:44px; }
.skip-link { position:fixed; top:.5rem; left:1rem; z-index:300; padding:.75rem 1rem; background:var(--text); color:white; border-radius:.5rem; transform:translateY(-160%); }
.skip-link:focus { transform:none; }
#main-content,#contact { scroll-margin-top:6rem; }
.reveal { opacity:1; transform:none; }
.js-reveal .reveal[data-reveal-pending] { opacity:0; transform:translateY(22px); }
.p-card,.card { position:relative; }
.product-open { border:0; background:none; padding:0; color:inherit; font:inherit; text-align:left; cursor:pointer; }
/* Whole-card clicks are handled by the article; no stretched button overlay. */
.product-open:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:.2rem; }
.p-card:has(.product-open:focus-visible),.card:has(.product-open:focus-visible) { box-shadow:0 0 0 2px var(--accent),var(--shadow); }
.product-modal-title { padding-right:2.5rem; }
.product-modal-scroll,.form-scroll { overscroll-behavior:contain; }
.product-modal { max-height:92dvh; }
.product-modal-layout > *, .grid > *, .footer-inner > * { min-width:0; }
.product-modal-specs th,.product-modal-specs td { overflow-wrap:anywhere; }
.pm-thumb { min-width:44px; min-height:44px; }
input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media(prefers-reduced-motion:reduce) {
 *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
 .js-reveal .reveal[data-reveal-pending] { opacity:1; transform:none; }
}

/* Product → quote stays inside one dialog and one scroll container. */
.pm-quote-view { width:100%; max-width:680px; margin:0 auto; padding:.25rem 0; }
.pm-back { display:inline-flex; align-items:center; min-height:44px; margin:0 3rem 1rem 0; padding:0; border:0; background:transparent; color:var(--accent); font:600 .9rem var(--font-sans); cursor:pointer; }
.pm-quote-heading { margin-bottom:1.25rem; }
.pm-eyebrow { font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:.4rem; }
.pm-quote-heading h2 { font:600 clamp(1.8rem,4vw,2.3rem)/1.15 var(--font-serif); margin-bottom:.5rem; }
.pm-quote-heading > p:last-child { color:var(--muted); font-size:.95rem; }
.pm-quote-summary { display:flex; align-items:center; gap:1rem; padding:.8rem; background:var(--white); border-radius:var(--radius-sm); margin-bottom:1.4rem; }
.pm-quote-summary img { width:64px; height:64px; object-fit:cover; border-radius:.75rem; background:var(--cream-dark); flex-shrink:0; }
.pm-quote-summary span { display:block; font-size:.8rem; color:var(--muted); margin-bottom:.15rem; }
.pm-quote-summary strong { display:block; font-size:1rem; font-weight:600; overflow-wrap:anywhere; }
.pm-field-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.pm-field { margin-bottom:1rem; min-width:0; }
.pm-field label { display:block; font-size:.9rem; font-weight:600; margin-bottom:.4rem; }
.pm-field label span { font-weight:400; color:var(--muted); }
.pm-field input,.pm-field textarea { display:block; width:100%; padding:.8rem .9rem; border:1px solid var(--cream-dark); border-radius:.85rem; background:var(--white); color:var(--text); font:400 1rem/1.45 var(--font-sans); }
.pm-field textarea { resize:vertical; min-height:110px; }
.pm-quote-footer { padding-top:.3rem; }
.pm-quote-footer .btn { width:100%; min-height:46px; }
.pm-quote-footer p { color:var(--muted); text-align:center; font-size:.8rem; margin-top:.7rem; }
.pm-quote-success { padding:1.25rem 0; }
.pm-quote-success h3 { font:600 1.7rem var(--font-serif); margin-bottom:.65rem; }
.pm-quote-success p { color:var(--muted); margin-bottom:1.25rem; }
.pm-quote-success .btn { margin:.25rem .25rem .25rem 0; }
@media(max-width:767px) { .pm-field-grid { grid-template-columns:1fr; gap:0; } }


/* Homepage — proof tiles with text titles */
.proof-stats {
  max-width: var(--max) !important;
  width: 100%;
  gap: 1rem !important;
}
.proof-stat {
  padding: 1.35rem 1.25rem 1.45rem !important;
  text-align: left;
}
.proof-stat strong {
  font-size: inherit;
}
.proof-stat-title {
  display: block;
  font-family: var(--font-sans);
  font-size: 1.12rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  letter-spacing: -0.015em;
  margin-bottom: 0.5rem;
  line-height: 1.25;
}
.proof-stat span {
  font-size: 0.92rem !important;
  line-height: 1.5;
  color: var(--muted);
}
@media (min-width: 900px) {
  .proof-stats {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.15rem !important;
  }
  .proof-stat strong {
  font-size: inherit;
}
.proof-stat-title {
    font-size: 1.18rem !important;
  }
}

/* How it works in the UK */
.uk-steps {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--section-pad-x) var(--section-gap);
}
.uk-steps-head {
  text-align: center;
  max-width: 540px;
  margin: 0 auto 1.75rem;
}
.uk-steps-head h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 4vw, 2.35rem);
  font-weight: 700;
  line-height: 1.15;
}
.uk-steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}
.uk-step {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.35rem 1.25rem 1.4rem;
  box-shadow: var(--shadow);
}
.uk-step-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.5rem;
}
.uk-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0;
}
.uk-step-head h3,
.uk-step h3 {
  font-size: 1.08rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.25;
}
.uk-step p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.5;
  padding-left: 0;
}
@media (min-width: 768px) {
  .uk-steps {
    padding: 0 var(--section-pad-x-md) var(--section-gap-md);
  }
  .uk-steps-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
  }
}

/* Homepage alignment with the UK main-page reference. Scoped to the homepage. */
.home-page .home-section {
  width: 100%; max-width: var(--max); margin: 0 auto;
  padding: 0 var(--section-pad-x) var(--section-gap);
}
.home-page .proof.home-section { padding-top: var(--section-gap); }
.home-page .home-section-title {
  font-family: var(--font-serif); font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 700; line-height: 1.15; letter-spacing: -.02em;
  color: var(--text); text-align: center; text-transform: none;
  margin: 0 0 1rem; max-width: none;
}
.home-page .collections-head, .home-page .uk-steps-head,
.home-page .contact-hub-head, .home-page .home-section-head {
  max-width: 850px; margin: 0 auto 2rem; text-align: center;
}
.home-page .proof > .home-section-title { margin-bottom: 2rem; }
.home-page .home-section h3 {
  font-family: var(--font-sans); font-size: 1.125rem; font-weight: 600;
  line-height: 1.4; letter-spacing: normal; color: var(--text);
}
.home-page .proof-stats, .home-page .uk-steps-grid,
.home-page .col-grid, .home-page .duo-grid { gap: 1.25rem; align-items: stretch; }
.home-page .proof-stat, .home-page .uk-step, .home-page .duo-card {
  padding: 1.5rem; border-radius: var(--radius-sm); background: var(--white);
  box-shadow: var(--shadow); height: 100%; text-align: left;
}
.home-page .proof-stat h3 { margin: 0 0 .65rem; }
.home-page .proof-stat span, .home-page .uk-step p, .home-page .duo-card p {
  font-size: .95rem; line-height: 1.65; color: var(--muted);
}
.home-page .duo-card { display: flex; flex-direction: column; }
.home-page .duo-card .btn { margin-top: auto; align-self: flex-start; }
.home-page .duo-card p { }
/* Restore the two image-led category cards. */
.home-page .col-card {
  position: relative; display: block; aspect-ratio: 1 / 1;
  min-width: 0; overflow: hidden; isolation: isolate;
  background: var(--cream-dark); border-radius: var(--radius);
  box-shadow: var(--shadow); transition: box-shadow .25s ease;
}
.home-page .col-card > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  aspect-ratio: auto; object-fit: cover; object-position: center;
  transition: transform .45s ease;
}
.home-page .col-content {
  position: absolute; inset: auto 0 0; z-index: 1;
  padding: 3.5rem clamp(1.15rem, 2.5vw, 2rem) 1.75rem;
  background: linear-gradient(transparent, rgba(20, 18, 16, .58) 42%, rgba(20, 18, 16, .8));
  color: var(--white);
}
.home-page .col-content h3 {
  font-family: var(--font-serif); font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700; line-height: 1.15; color: var(--white);
  margin-bottom: .6rem; text-wrap: balance;
}
.home-page .col-content p {
  font-size: .95rem; line-height: 1.5; color: var(--white);
  opacity: .95; margin-bottom: .85rem;
}
.home-page .col-link { color: var(--white); font-size: .9rem; font-weight: 600; }
.home-page .col-card:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 5px; }
.home-page .col-card:focus-visible .col-link { text-decoration: underline; text-underline-offset: 4px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .home-page .col-card:hover > img { transform: scale(1.025); }
  .home-page .col-card:hover { box-shadow: var(--shadow-hover); }
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .home-page .col-card:hover > img { transform: none; }
  .home-page .col-card, .home-page .col-card > img { transition: none; }
}
@media (max-width: 380px) {
  .home-page .col-content { padding: 2.5rem 1rem 1.1rem; }
  .home-page .col-content h3 { font-size: 1.4rem; }
  .home-page .col-content p { font-size: .85rem; margin-bottom: .5rem; }
}
.home-page .video-hero {
  display: grid; height: auto; min-height: 100vh; min-height: 100dvh;
  max-height: none;
}
.home-page .video-hero-media video {
  inset: 0; width: 100%; height: 100%; min-width: 0; min-height: 0;
  transform: none; object-fit: cover; object-position: center;
}
.home-page .video-hero-content {
  width: 100%; height: auto; min-height: 100vh; min-height: 100dvh;
  max-width: 1320px;
  padding: 9rem 1.25rem 6rem; justify-content: flex-end; align-items: flex-start;
}
.home-page .video-hero h1 { max-width: 22ch; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.05; }
.home-page .video-hero-sub { max-width: 65ch; }
.home-page .home-eyebrow { font-size: .75rem; letter-spacing: .12em; font-weight: 600; margin-bottom: 1.25rem; }
.home-page .video-hero-scroll { bottom: 1.25rem; }
.home-page .uk-step-head { align-items: flex-start; }
.home-page .sec-head h3 { margin: 0; }
@media (min-width: 768px) {
  .home-page .home-section { padding: 0 var(--section-pad-x-md) var(--section-gap-md); }
  .home-page .proof.home-section { padding-top: var(--section-gap-md); }
  .home-page .video-hero-content { padding-left: 2rem; padding-right: 2rem; padding-bottom: 4.5rem; }
  .home-page .proof-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-page .col-grid, .home-page .duo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .home-page .proof-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .home-page .proof-stats, .home-page .col-grid, .home-page .duo-grid { grid-template-columns: minmax(0, 1fr); }
  .home-page .video-hero-actions { align-items: stretch; }
  .home-page .video-hero-actions .btn { width: 100%; text-align: center; }
}

/* Shared two-level navigation */
.header .nav { gap: 1.1rem; }
.nav-group { position: relative; }
.nav-group-heading { display: flex; align-items: center; gap: .15rem; }
.nav-group-heading > a { white-space: nowrap; }
.submenu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 36px; flex-shrink: 0;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--text-muted); cursor: pointer;
}
.submenu-toggle svg { transition: transform .18s ease; }
.submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.submenu-toggle:hover { background: rgba(154,107,74,.12); }
.nav a:focus-visible, .submenu-toggle:focus-visible, .mobile-nav a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 4px; border-radius: .4rem;
}
.header .nav-group.is-current > .nav-group-heading > a { color: var(--accent); }
.header.over-video .submenu-toggle { color: white; }
.header.over-video .nav-group.is-current > .nav-group-heading > a { color: var(--gold); }
.nav-submenu {
  list-style: none; margin: 0; padding: .5rem;
  position: absolute; top: 100%; left: 0; min-width: 260px;
  background: var(--cream); border: 1px solid rgba(154,107,74,.16);
  border-radius: 1rem; box-shadow: 0 16px 40px rgba(28,28,28,.16); z-index: 2;
}
.nav-submenu[hidden] { display: none !important; }
.header .nav .nav-submenu a {
  display: block; padding: .8rem 1rem; border-radius: .65rem;
  color: var(--text); font-size: .85rem; line-height: 1.4;
}
.header .nav .nav-submenu a:hover, .header .nav .nav-submenu a.active {
  background: var(--cream-dark); color: var(--accent-dark);
}
#mobileNav {
  z-index: 240; overflow-y: auto; overscroll-behavior: contain;
  align-items: stretch; justify-content: flex-start;
  padding: 5rem 1.5rem 2.5rem; gap: 0;
}
#mobileNav .close { width: 44px; height: 44px; color: var(--text); }
.mobile-nav-links { width: 100%; max-width: 560px; margin: 0 auto; }
.mobile-nav-links > a, .mobile-nav-links .nav-group-heading > a {
  display: block; padding: .95rem 0; font-size: clamp(1.25rem, 4.5vw, 1.65rem); line-height: 1.3;
}
.mobile-nav-links .nav-group-heading { justify-content: space-between; gap: .75rem; }
.mobile-nav-links .nav-group { border-bottom: 1px solid var(--cream-dark); }
.mobile-nav-links .submenu-toggle { width: 44px; height: 44px; background: var(--cream-dark); }
.mobile-nav-links .nav-submenu {
  position: static; min-width: 0; border: 0; box-shadow: none;
  background: var(--cream-dark); margin: 0 0 .75rem; padding: .4rem;
}
.mobile-nav-links .nav-submenu a {
  display: block; padding: .85rem .8rem; font-family: var(--font-sans);
  font-size: .95rem; font-weight: 500; line-height: 1.45; border-radius: .5rem;
}
.mobile-nav-links .nav-submenu a:hover, .mobile-nav-links .nav-submenu a.active {
  background: var(--cream); color: var(--accent-dark);
}
.mobile-nav-links > .nav-cta { display: inline-block; padding: .8rem 1.4rem; margin-top: .85rem; font-family: var(--font-sans); font-size: 1rem; }
@media (max-width: 1023px) {
  .header .nav { display: none; }
  .header .menu-toggle { display: block; }
}
@media (min-width: 1024px) {
  .header .nav { display: flex; }
  .header .menu-toggle { display: none; }
}
@media (prefers-reduced-motion: reduce) { .submenu-toggle svg { transition: none; } }

/* Keep cream dropdowns readable over the dark video header. */
.header.over-video .nav .nav-submenu a:not(.nav-cta) { color: var(--text) !important; }
.header.over-video .nav .nav-submenu a:not(.nav-cta):hover,
.header.over-video .nav .nav-submenu a:not(.nav-cta).active { color: var(--accent-dark) !important; }
.header.over-video .nav-group.is-current > .nav-group-heading > a:not(.nav-cta) { color: var(--gold) !important; }

.video-hero-scroll span {
  position: relative;
  width: 1px;
  height: 28px;
  background: currentColor;
  animation: none;
}

.video-hero-scroll span::after {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 50%;
  width: 9px;
  height: 9px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateX(-50%) rotate(45deg);
}

.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer ul li {
  list-style: none;
  margin: 0 0 0.6rem;
}

.footer li,
.footer li a,
.footer li p {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-muted);
}

.footer li p {
  margin: 0;
}

.footer li a:hover {
  color: var(--accent);
}

/* Append after existing styles. Matches the compact barrel-sauna product view. */
#productModal .product-modal,
#modalBackdrop .modal {
  background: var(--cream, #f5efe6);
  color: var(--text, #1c1c1c);
  font-family: var(--font-sans, 'Inter', sans-serif);
}
#productModal .product-modal-title,
#productModal #pmTitle,
#modalBackdrop .modal-title {
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 .55rem;
  padding-right: 2rem;
}
#productModal .product-modal-desc,
#modalBackdrop .modal-left .modal-desc {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: .88rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--muted, #6b6560);
  margin-top: .75rem;
}
#productModal .product-modal-meta { display: none; }
#productModal .product-modal-metrics,
#modalBackdrop .modal-metrics {
  gap: .35rem;
  margin-bottom: .7rem;
}
#productModal .product-modal-metrics span,
#modalBackdrop .metric {
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.4;
  padding: .28rem .65rem;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--text, #1c1c1c);
}
#productModal .product-modal-actions,
#modalBackdrop .modal-actions {
  margin-bottom: 1rem;
  gap: .5rem;
}
#productModal .product-modal-actions .btn,
#modalBackdrop .modal-actions .btn {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.2;
  padding: .7rem 1.1rem;
  border-radius: 999px;
}
#productModal .product-modal-actions .btn-dark,
#modalBackdrop .modal-actions .btn-primary {
  background: var(--accent, #9a6b4a);
  color: #fff;
  border: 1px solid transparent;
}
#productModal .product-modal-actions .btn-dark:hover,
#modalBackdrop .modal-actions .btn-primary:hover {
  background: var(--accent-dark, #7d5639);
}
/* Only the redundant product-view close action; quote form controls stay intact. */
#productModal .product-modal-actions .btn-outline { display: none; }
#productModal .product-modal-specs-wrap,
#modalBackdrop .modal-specs-wrap {
  padding: .75rem .95rem;
  border: 0;
}
#productModal .product-modal-specs-toggle,
#modalBackdrop .specs-toggle {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted, #6b6560);
  padding: 0 0 .5rem;
  margin: 0 0 .4rem;
}
#productModal .product-modal-specs-toggle .specs-chevron { display: none; }
#productModal .product-modal-specs table,
#modalBackdrop .modal-specs {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: .84rem; line-height: 1.5;
}
#productModal .product-modal-specs th,
#productModal .product-modal-specs td,
#modalBackdrop .modal-specs td {
  padding: .38rem 0;
  font-size: inherit;
  font-weight: 400;
  vertical-align: top;
  overflow-wrap: anywhere;
}
#productModal .product-modal-specs th,
#modalBackdrop .modal-specs td:first-child {
  width: 45%; padding-right: .65rem;
  text-align: left; color: var(--muted, #6b6560);
}
#productModal .product-modal-specs td,
#modalBackdrop .modal-specs td:last-child {
  text-align: right; color: var(--text, #1c1c1c);
}
#productModal .product-modal-specs tr,
#modalBackdrop .modal-specs tr { border-bottom: 1px solid rgba(0,0,0,.05); }
#productModal .product-modal-specs tr:last-child,
#modalBackdrop .modal-specs tr:last-child { border-bottom: 0; }
#productModal .product-modal-gallery,
#modalBackdrop .modal-gallery { border-radius: 1.75rem; background: #fff; }
#productModal .product-modal-gallery > img,
#modalBackdrop .modal-gallery img { object-fit: contain; background: #fff; }
#productModal .product-modal-thumbs,
#modalBackdrop .modal-thumbs { gap: .35rem; }
#productModal .pm-thumb,
#modalBackdrop .modal-thumbs button {
  width: 48px; height: 48px; flex: 0 0 48px;
}
@media (min-width: 768px) {
  #productModal .product-modal {
    width: min(995px, 94vw); max-width: 995px;
    max-height: 92vh; max-height: 92dvh; border-radius: 1.75rem;
  }
  #productModal .product-modal-scroll,
  #modalBackdrop .modal-scroll {
    padding: 1.5rem 1.75rem 1.6rem;
    overflow-y: auto; min-height: 0;
  }
  #productModal .product-modal-layout,
  #modalBackdrop .modal-view.active.product-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 1.5rem; align-items: start; max-height: none;
  }
  #productModal .product-modal-gallery,
  #modalBackdrop .modal-gallery {
    aspect-ratio: 1; max-height: min(470px, 47vh);
  }
  #productModal .product-modal-actions,
  #modalBackdrop .modal-actions { max-width: 50%; }
  #productModal .product-modal-actions .btn,
  #modalBackdrop .modal-actions .btn { width: 100%; flex: 1; }
}
@media (max-width: 767px) {
  #productModal .product-modal-specs-wrap,
  #modalBackdrop .modal-specs-wrap { padding: .75rem 0; }
  #productModal .product-modal-actions,
  #modalBackdrop .modal-actions { max-width: none; }
}

/* Shared Slava product modal and barrel category layout. */
:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content,
#modalBackdrop{
      --cream: #f5efe6;
      --cream-dark: #ebe3d6;
      --text: #1c1c1c;
      --text-muted: #5c5c5c;
      --accent: #9a6b4a;
      --accent-dark: #7d5639;
      --gold: #c4a574;
      --white: #fff;
      --radius: 1.75rem;
      --radius-sm: 1rem;
      --shadow: 0 6px 28px rgba(28,28,28,.06);
      --shadow-hover: 0 16px 40px rgba(154,107,74,.12);
      --font-serif: "Cormorant Garamond", Georgia, serif;
      --font-sans: "Inter", system-ui, sans-serif;
      --max: 1200px;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) img{ max-width: 100%; display: block; }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) a{ color: inherit; text-decoration: none; }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .page-hero{
      padding: 2.5rem 1.25rem 1.75rem;
      max-width: var(--max);
      margin: 0 auto;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .breadcrumb{
      font-size: 0.78rem;
      color: var(--text-muted);
      margin-bottom: 0.85rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .breadcrumb a:hover{ color: var(--accent); }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .page-hero h1{
      font-family: var(--font-serif);
      font-size: clamp(2.2rem, 8vw, 3.5rem);
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.1;
      margin-bottom: 0.65rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .page-hero p{
      font-size: 1.05rem;
      color: var(--text-muted);
      max-width: 44ch;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .content{
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 1.25rem 4rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .intro{
      background: var(--white);
      border-radius: var(--radius);
      padding: 1.2rem 1.35rem;
      margin-bottom: 1.75rem;
      box-shadow: var(--shadow);
      color: var(--text-muted);
      font-size: 0.98rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .intro strong{ color: var(--text); font-weight: 600; }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .label{
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 0.9rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .grid{
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
      margin-bottom: 2.25rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .card{
      background: var(--white);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
      transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s;
      display: flex;
      flex-direction: column;
      cursor: pointer;
      border: none;
      text-align: left;
      font-family: inherit;
      color: inherit;
      width: 100%;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .card:hover{
      transform: translateY(-6px);
      box-shadow: var(--shadow-hover);
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .card-img{
      aspect-ratio: 1;
      overflow: hidden;
      background: var(--cream-dark);
      position: relative;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .card-img img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.7s cubic-bezier(0.22,1,0.36,1);
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .card:hover .card-img img{ transform: scale(1.07); }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .badge{
      position: absolute;
      top: 0.75rem;
      left: 0.75rem;
      background: rgba(255,255,255,.94);
      backdrop-filter: blur(8px);
      font-size: 0.7rem;
      font-weight: 600;
      padding: 0.28rem 0.65rem;
      border-radius: 999px;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .card-body{
      padding: 1.15rem 1.2rem 1.3rem;
      display: flex;
      flex-direction: column;
      flex: 1;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .card h3{
      font-family: var(--font-serif);
      font-size: 1.2rem;
      font-weight: 700;
      margin-bottom: 0.3rem;
      line-height: 1.25;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .card p{
      font-size: 0.88rem;
      color: var(--text-muted);
      margin-bottom: 0.8rem;
      flex: 1;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .card-meta{
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .price{
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--accent);
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .view-link{
      font-size: 0.84rem;
      font-weight: 600;
      color: var(--accent);
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .info-grid{
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
      margin-bottom: 2.25rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .info-card{
      background: var(--white);
      border-radius: var(--radius);
      padding: 1.4rem;
      box-shadow: var(--shadow);
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .info-card h3{
      font-family: var(--font-serif);
      font-size: 1.3rem;
      font-weight: 700;
      margin-bottom: 0.45rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .info-card p{
      font-size: 0.95rem;
      color: var(--text-muted);
      margin-bottom: 0.7rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .info-card ul{ list-style: none; }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .info-card li{
      display: flex;
      gap: 0.5rem;
      font-size: 0.9rem;
      margin-bottom: 0.3rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .info-card li::before{
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--gold);
      margin-top: 0.45rem;
      flex-shrink: 0;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .cta{
      background: linear-gradient(135deg, var(--accent), #b07d5a);
      color: #fff;
      border-radius: var(--radius);
      padding: 1.6rem 1.5rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      align-items: flex-start;
      box-shadow: 0 12px 36px rgba(154,107,74,.22);
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .cta h3{
      font-family: var(--font-serif);
      font-size: 1.4rem;
      font-weight: 700;
      margin-bottom: 0.2rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .cta p{ opacity: 0.92; font-size: 0.95rem; }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .btn{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.75rem 1.4rem;
      font-size: 0.88rem;
      font-weight: 600;
      border-radius: 999px;
      border: none;
      cursor: pointer;
      background: #fff;
      color: var(--accent);
      transition: transform 0.25s, background 0.25s;
      font-family: inherit;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .btn:hover{ transform: translateY(-2px); }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .footer-inner{
      max-width: var(--max);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr;
      gap: 2rem;
      margin-bottom: 2rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .footer-brand p{ font-size: 0.92rem; max-width: 30ch; }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .footer-bottom{
      max-width: var(--max);
      margin: 0 auto;
      padding-top: 1.25rem;
      border-top: 1px solid rgba(0,0,0,.06);
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      font-size: 0.82rem;
      text-align: center;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .card-img{ position: relative; }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .card-quick{
      position: absolute;
      inset: auto 0.75rem 0.75rem 0.75rem;
      background: rgba(245, 239, 230, 0.92);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      color: var(--text);
      font-size: 0.82rem;
      font-weight: 600;
      text-align: center;
      padding: 0.55rem 0.75rem;
      border-radius: 999px;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.25s, transform 0.25s;
      pointer-events: none;
      letter-spacing: 0.02em;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .card:hover .card-quick,
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .card:focus-visible .card-quick{
      opacity: 1;
      transform: translateY(0);
    }
@media (hover: none){:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .card-quick{
        opacity: 1;
        transform: none;
        background: rgba(245, 239, 230, 0.88);
      }
}
#modalBackdrop{
      position: fixed;
      inset: 0;
      z-index: 200;
      background: rgba(20,18,16,0.45);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s, visibility 0.3s;
    }
#modalBackdrop.open{
      opacity: 1;
      visibility: visible;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal{
      position: fixed;
      z-index: 210;
      left: 0; right: 0; bottom: 0;
      max-height: 92vh;
      background: var(--cream);
      border-radius: 1.5rem 1.5rem 0 0;
      box-shadow: 0 -12px 50px rgba(0,0,0,0.15);
      transform: translateY(100%);
      transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
#modalBackdrop.open .modal{
      transform: translateY(0);
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-handle{
      width: 40px;
      height: 4px;
      background: rgba(0,0,0,0.15);
      border-radius: 999px;
      margin: 0.65rem auto 0;
      flex-shrink: 0;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-close{
      position: absolute;
      top: 0.85rem;
      right: 1rem;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--white);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.15rem;
      color: var(--text);
      box-shadow: var(--shadow);
      z-index: 5;
      transition: background 0.2s;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-close:hover{ background: var(--cream-dark); }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-scroll{
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 0.75rem 1.25rem 2rem;
      flex: 1;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-view{ display: none; }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-view.active{ display: block; }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-gallery{
      aspect-ratio: 1;
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--cream-dark);
      margin-bottom: 1.25rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-gallery img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-thumbs{
      display: flex;
      gap: 0.45rem;
      margin-bottom: 0;
      overflow-x: auto;
      padding-bottom: 0.25rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-thumbs button{
      flex-shrink: 0;
      width: 56px;
      height: 56px;
      border-radius: 0.75rem;
      overflow: hidden;
      border: 2px solid transparent;
      background: var(--cream-dark);
      cursor: pointer;
      padding: 0;
      transition: border-color 0.2s;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-thumbs button.active,
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-thumbs button:hover{
      border-color: var(--accent);
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-thumbs img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-title{
      font-family: var(--font-serif);
      font-size: clamp(1.65rem, 3vw, 2.05rem);
      font-weight: 700;
      line-height: 1.18;
      margin-bottom: 0.75rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-desc{
      font-size: 0.95rem;
      color: var(--text-muted);
      margin: 1rem 0 0;
      line-height: 1.55;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-left .modal-desc{
      margin-top: 1rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-metrics{
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      margin-bottom: 1.15rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .metric{
      display: inline-flex;
      background: var(--white);
      border-radius: 999px;
      padding: 0.35rem 0.8rem;
      font-size: 0.82rem;
      font-weight: 500;
      box-shadow: var(--shadow);
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-price{
      font-size: 1.45rem;
      font-weight: 600;
      color: var(--accent);
      margin-bottom: 0.25rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-note{
      font-size: 0.84rem;
      color: var(--text-muted);
      margin-bottom: 1.25rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-actions{
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
      margin-bottom: 1.5rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .btn-primary{
      background: var(--accent);
      color: #fff;
      width: 100%;
      padding: 0.9rem 1.4rem;
      box-shadow: 0 8px 24px rgba(154,107,74,0.22);
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .btn-primary:hover{
      background: var(--accent-dark);
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .btn-ghost{
      background: transparent;
      color: var(--text);
      border: 1.5px solid rgba(0,0,0,0.1);
      width: 100%;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .btn-ghost:hover{
      border-color: var(--accent);
      color: var(--accent);
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-specs-title{
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 0.75rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-specs{
      width: 100%;
      border-collapse: collapse;
      font-size: 0.92rem;
      margin-bottom: 0.5rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-specs tr{
      border-bottom: 1px solid rgba(0,0,0,0.06);
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-specs td{
      padding: 0.6rem 0;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-specs td:first-child{
      color: var(--text-muted);
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-specs td:last-child{
      text-align: right;
      font-weight: 500;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .specs-toggle{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: none;
      border: none;
      cursor: pointer;
      font-family: inherit;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
      padding: 0;
      margin-bottom: 0;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .specs-toggle .specs-chevron{
      font-size: 1.1rem;
      font-weight: 500;
      color: var(--accent);
      line-height: 1;
      transition: transform 0.2s;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .specs-toggle[aria-expanded="true"] .specs-chevron{
      transform: rotate(45deg);
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .model-switch{
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .model-switch-btn{
    flex: 1;
    border: 1.5px solid rgba(0,0,0,0.1);
    background: var(--white);
    border-radius: 999px;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .model-switch-btn.active{
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .specs-panel{
      margin-top: 0.55rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .specs-panel[hidden]{
      display: none !important;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-price{
      margin-bottom: 0.2rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-note{
      margin-bottom: 0.85rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-metrics{
      margin-bottom: 1rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .quote-back{
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--text-muted);
      background: none;
      border: none;
      cursor: pointer;
      margin-bottom: 1.1rem;
      padding: 0;
      font-family: inherit;
      transition: color 0.2s;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .quote-back:hover{ color: var(--accent); }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .quote-product-label{
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 0.35rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .quote-product-name{
      font-family: var(--font-serif);
      font-size: 1.4rem;
      font-weight: 700;
      margin-bottom: 1.5rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .form-group{
      margin-bottom: 1.35rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .form-label{
      display: block;
      font-size: 0.88rem;
      font-weight: 600;
      margin-bottom: 0.55rem;
      color: var(--text);
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .form-hint{
      font-size: 0.8rem;
      color: var(--text-muted);
      margin-bottom: 0.5rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .chips{
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .chip{
      appearance: none;
      -webkit-appearance: none;
      border: 1.5px solid rgba(0,0,0,0.1);
      background: var(--white);
      color: var(--text);
      padding: 0.55rem 1.05rem;
      border-radius: 999px;
      font-size: 0.88rem;
      font-weight: 500;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.2s;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .chip:hover{
      border-color: var(--accent);
      color: var(--accent);
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .chip.selected{
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .form-input{
      width: 100%;
      padding: 0.75rem 1rem;
      border: 1.5px solid rgba(0,0,0,0.1);
      border-radius: 0.85rem;
      font-size: 0.95rem;
      font-family: inherit;
      background: var(--white);
      color: var(--text);
      transition: border-color 0.2s;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .form-input:focus{
      outline: none;
      border-color: var(--accent);
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .form-input::placeholder{
      color: #a8a29e;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) textarea.form-input{
      min-height: 90px;
      resize: vertical;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .form-error{
      font-size: 0.8rem;
      color: #b45309;
      margin-top: 0.35rem;
      display: none;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .form-error.show{ display: block; }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .success-view{
      text-align: center;
      padding: 2rem 0.5rem 1rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .success-icon{
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: rgba(154,107,74,0.12);
      color: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.75rem;
      margin: 0 auto 1.25rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .success-view h3{
      font-family: var(--font-serif);
      font-size: 1.6rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .success-view p{
      color: var(--text-muted);
      font-size: 0.98rem;
      max-width: 32ch;
      margin: 0 auto 1.5rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .filters{
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      margin-bottom: 1.25rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .filter-chip{
      appearance: none;
      border: 1.5px solid rgba(0,0,0,0.1);
      background: var(--white);
      color: var(--text);
      padding: 0.45rem 0.95rem;
      border-radius: 999px;
      font-size: 0.84rem;
      font-weight: 500;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.2s;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .filter-chip:hover{ border-color: var(--accent); color: var(--accent); }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .filter-chip.active{
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .quote-summary{
      background: var(--white);
      border-radius: var(--radius-sm);
      padding: 0.9rem 1.1rem;
      margin-bottom: 1.25rem;
      font-size: 0.88rem;
      color: var(--text-muted);
      box-shadow: var(--shadow);
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .quote-summary strong{ color: var(--text); }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .quote-reply{
      font-size: 0.82rem;
      color: var(--text-muted);
      text-align: center;
      margin-top: 0.75rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .faq-block{
      margin: 2.25rem 0;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .faq-block h2{
      font-family: var(--font-serif);
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 1rem;
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .faq-item{
      background: var(--white);
      border-radius: var(--radius-sm);
      padding: 1rem 1.15rem;
      margin-bottom: 0.55rem;
      box-shadow: var(--shadow);
    }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .faq-item h3{ font-size: 0.95rem; font-weight: 600; margin-bottom: 0.25rem; }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .faq-item p{ font-size: 0.88rem; color: var(--text-muted); margin: 0; }
/* Removed legacy page-specific reveal opacity overrides; shared rules above own reveal. */
@media (min-width: 768px){:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .page-hero{ padding: 3rem 2rem 2rem; }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .content{ padding: 0 2rem 4.5rem; }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .grid{
        grid-template-columns: repeat(3, 1fr);
        gap: 1.15rem;
      }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .info-grid{ grid-template-columns: 1fr 1fr; gap: 1.15rem; }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .cta{
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 1.75rem 2rem;
      }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .footer-inner{
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
        gap: 2.25rem;
      }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .footer-bottom{
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
      }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal{
        left: 50%;
        right: auto;
        bottom: auto;
        top: 50%;
        width: min(995px, 94vw);
        max-height: 92vh;
        border-radius: var(--radius);
        transform: translate(-50%, -46%) scale(0.96);
        opacity: 0;
        transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), opacity 0.35s;
      }
#modalBackdrop.open .modal{
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
      }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-handle{ display: none; }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-scroll{
        padding: 1.5rem 1.75rem 1.6rem;
        overflow-y: auto;
      }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-view.active.product-layout{
        display: grid;
        grid-template-columns: 1fr 1.05fr;
        gap: 1.5rem;
        align-items: start;
      }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-left{ position: sticky; top: 0; }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-gallery{
        margin-bottom: 1rem;
        aspect-ratio: 1;
        max-height: min(470px, 47vh);
      }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-gallery img{
        object-fit: contain;
        background: #fff;
      }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-thumbs{
        gap: 0.35rem;
      }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-thumbs button{
        width: 48px;
        height: 48px;
      }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-left .modal-desc{
        margin-top: 0.75rem;
        font-size: 0.88rem;
        line-height: 1.45;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-title{
        font-size: 1.75rem;
        margin-bottom: 0.55rem;
        line-height: 1.15;
      }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-metrics{
        gap: 0.35rem;
        margin-bottom: 0.7rem;
      }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .metric{
        padding: 0.28rem 0.65rem;
        font-size: 0.78rem;
      }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-price{
        font-size: 1.25rem;
        margin-bottom: 0.15rem;
      }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-note{
        font-size: 0.78rem;
        margin-bottom: 0.85rem;
      }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-actions{
        flex-direction: row;
        gap: 0.5rem;
        margin-bottom: 1rem;
        max-width: 50%;
      }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .btn-primary,
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .btn-ghost{
        width: auto;
        flex: 1;
        padding: 0.7rem 1.1rem;
      }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-specs-wrap{
        padding: 0.75rem 0.95rem;
      }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-specs-title{
        margin-bottom: 0.4rem;
        font-size: 0.68rem;
      }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-specs{
        font-size: 0.84rem;
      }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-specs td{
        padding: 0.38rem 0;
      }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .quote-form-wrap{
        max-width: 480px;
        margin: 0 auto;
      }
}
@media (min-width: 1024px) and (min-height: 780px){:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal{
        max-height: 90vh;
      }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-scroll{
        overflow-y: hidden;
      }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-view.active.product-layout{
        max-height: calc(90vh - 3.2rem);
      }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-gallery{
        max-height: min(470px, 47vh);
        aspect-ratio: 1;
      }
}
@media (min-width: 1024px) and (min-height: 900px){:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-gallery{
        max-height: min(470px, 47vh);
      }
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-title{ font-size: 1.9rem; max-width: 90%;}
:is(:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content, #modalBackdrop) .modal-left .modal-desc{
        -webkit-line-clamp: 5;
      }
}

/* Avoid clipping tall specifications; retain the reference's desktop layout. */
#modalBackdrop .modal-scroll { overflow-y:auto; }
#modalBackdrop .modal-view.active.product-layout { max-height:none; }
#modalBackdrop .modal-desc { display:block; -webkit-line-clamp:unset; overflow:visible; }
#modalBackdrop [hidden] { display:none !important; }
:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content .card[hidden] { display:none !important; }
:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content .catalogue-count { font-size:.85rem; color:var(--text-muted); margin-bottom:1rem; }
:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content .card:focus-visible, #modalBackdrop button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

#modalBackdrop[hidden] { display:none !important; }
#modalBackdrop .modal-view[hidden] { display:none !important; }
:is(body[data-catalogue="barrel-saunas"], body[data-catalogue="cube-barrel-saunas"], body[data-catalogue="big-oval-saunas"], body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]) #main-content .product-open {
  border:0; padding:0; background:none; color:inherit; font:inherit; text-align:inherit; cursor:pointer;
}

/* The open state must outrank scoped Slava modal base styles. */
#modalBackdrop.open[aria-hidden="false"] > .modal {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (min-width: 768px) {
  #modalBackdrop.open[aria-hidden="false"] > .modal {
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Outdoor Saunas category page — uses the same image-led collection cards as the homepage. */
.outdoor-saunas-page .sauna-collections {
  max-width: none;
  padding: 0;
  margin: 0 0 2.5rem;
}
.outdoor-saunas-page .collections-head {
  max-width: 850px;
  margin: 0 auto 1.75rem;
  text-align: center;
}
.outdoor-saunas-page .collections-head .label {
  margin-bottom: .65rem;
}
.outdoor-saunas-page .collections-head h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 .7rem;
}
.outdoor-saunas-page .collections-head > p:not(.label) {
  color: var(--text-muted);
  font-size: .98rem;
  margin: 0 auto;
}
.outdoor-saunas-page .col-card {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--cream-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: box-shadow .25s ease;
}
.outdoor-saunas-page .col-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
  transition: transform .45s ease;
}
.outdoor-saunas-page .col-content {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  padding: 3.5rem clamp(1.15rem, 2.5vw, 1.75rem) 1.6rem;
  background: linear-gradient(transparent, rgba(20, 18, 16, .58) 42%, rgba(20, 18, 16, .8));
  color: var(--white);
}
.outdoor-saunas-page .col-content h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 2.3vw, 1.9rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--white);
  margin-bottom: .55rem;
  text-wrap: balance;
}
.outdoor-saunas-page .col-content p {
  font-size: .92rem;
  line-height: 1.5;
  color: var(--white);
  opacity: .95;
  margin-bottom: .8rem;
}
.outdoor-saunas-page .col-link {
  color: var(--white);
  font-size: .88rem;
  font-weight: 600;
}
.outdoor-saunas-page .col-card:focus-visible {
  outline: 3px solid var(--accent-dark);
  outline-offset: 5px;
}
.outdoor-saunas-page .col-card:focus-visible .col-link {
  text-decoration: underline;
  text-underline-offset: 4px;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .outdoor-saunas-page .col-card:hover > img { transform: scale(1.025); }
  .outdoor-saunas-page .col-card:hover { box-shadow: var(--shadow-hover); }
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .outdoor-saunas-page .col-card:hover > img { transform: none; }
  .outdoor-saunas-page .col-card,
  .outdoor-saunas-page .col-card > img { transition: none; }
}
@media (min-width: 1024px) {
  .outdoor-saunas-page .sauna-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 380px) {
  .outdoor-saunas-page .col-content { padding: 2.5rem 1rem 1.1rem; }
  .outdoor-saunas-page .col-content h3 { font-size: 1.4rem; }
  .outdoor-saunas-page .col-content p { font-size: .85rem; margin-bottom: .5rem; }
}


/* Outdoor Saunas compact video hero. Page-specific only. */
.outdoor-saunas-page .sauna-category-video-hero {
  position: relative;
  width: calc(100% - 4rem);
  max-width: var(--max);
  height: clamp(350px, 35vw, 430px);
  margin: 1.5rem auto 2.25rem;
  overflow: hidden;
  border-radius: var(--radius);
  background: #1a1816;
  box-shadow: var(--shadow);
}
.outdoor-saunas-page .sauna-category-video-media,
.outdoor-saunas-page .sauna-category-video-overlay {
  position: absolute;
  inset: 0;
}
.outdoor-saunas-page .sauna-category-video-media { z-index: 0; }
.outdoor-saunas-page .sauna-category-video-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
}
.outdoor-saunas-page .sauna-category-video-overlay {
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(20, 18, 16, 0) 0%,
    rgba(20, 18, 16, 0) 70%,
    rgba(20, 18, 16, 1) 100%
  );
}
.outdoor-saunas-page .sauna-category-video-content {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  color: var(--white);
}
.outdoor-saunas-page .sauna-category-video-content .breadcrumb {
  color: rgba(255,255,255,.8);
  margin-bottom: .75rem;
}
.outdoor-saunas-page .sauna-category-video-content .breadcrumb a {
  color: inherit;
}
.outdoor-saunas-page .sauna-category-video-content .breadcrumb a:hover {
  color: var(--white);
}
.outdoor-saunas-page .sauna-category-video-content h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 5vw, 4.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  margin: 0 0 .75rem;
  color: var(--white);
}
.outdoor-saunas-page .sauna-category-video-content > p {
  max-width: 48ch;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.5;
  color: rgba(255,255,255,.94);
}
.outdoor-saunas-page .outdoor-saunas-content {
  padding-top: 0;
}
.outdoor-saunas-page .sauna-collections {
  margin-top: 0;
}
@media (max-width: 767px) {
  .outdoor-saunas-page .sauna-category-video-hero {
    width: calc(100% - 2.5rem);
    height: 330px;
    margin: 1rem auto 1.75rem;
    border-radius: var(--radius-sm);
  }
  .outdoor-saunas-page .sauna-category-video-content {
    padding: 1.35rem;
  }
  .outdoor-saunas-page .sauna-category-video-content h1 {
    font-size: clamp(2.5rem, 12vw, 3.35rem);
  }
  .outdoor-saunas-page .sauna-category-video-content > p {
    font-size: .98rem;
  }
}

/* Category/subcategory consultation block: matches the homepage contact hub. */
.content > .category-contact-hub {
  max-width: none;
  margin: 0;
  padding: 2.75rem 0 0;
}
.category-contact-hub .contact-hub-head {
  max-width: 850px;
  margin: 0 auto 2rem;
  text-align: center;
}
.category-contact-hub .contact-hub-head h2 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 1rem;
}
.category-contact-hub .contact-hub-head > p {
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.55;
}
.category-contact-hub .duo-grid {
  gap: 1.25rem;
  align-items: stretch;
}
.category-contact-hub .duo-card {
  padding: 1.5rem;
  border-radius: var(--radius-sm);
  height: 100%;
  text-align: left;
}
.category-contact-hub .duo-card h3 {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: normal;
  color: var(--text);
  margin: 0;
}
.category-contact-hub .duo-card p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--muted);
}
.category-contact-hub .duo-card .btn {
  margin-top: auto;
  align-self: flex-start;
}
@media (max-width: 767px) {
  .content > .category-contact-hub { padding-top: 2rem; }
  .category-contact-hub .contact-hub-head { margin-bottom: 1.5rem; }
}

/* Subcategory hero: full-width section with comfortable site gutters. */
:is(
  body[data-catalogue="barrel-saunas"],
  body[data-catalogue="cube-barrel-saunas"],
  body[data-catalogue="big-oval-saunas"],
  body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]
) #main-content > .page-hero {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: clamp(1.25rem, 9.5vw, 12rem);
  padding-right: clamp(1.25rem, 9.5vw, 12rem);
}

:is(
  body[data-catalogue="barrel-saunas"],
  body[data-catalogue="cube-barrel-saunas"],
  body[data-catalogue="big-oval-saunas"],
  body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]
) #main-content > .page-hero p {
  max-width: none;
}

/* Category/subcategory contact buttons: match homepage button treatment. */
.category-contact-hub .duo-card .btn.btn-dark {
  background: var(--text);
  color: var(--cream);
  padding: 0.75rem 1.4rem;
  border-radius: 999px;
}

.category-contact-hub .duo-card .btn.btn-dark:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-2px);
}

.category-contact-hub .duo-card .btn.btn-gold {
  background: var(--gold);
  color: var(--text);
  padding: 0.75rem 1.4rem;
  border-radius: 999px;
}

.category-contact-hub .duo-card .btn.btn-gold:hover {
  background: #d4b88a;
  color: var(--text);
  transform: translateY(-2px);
}

@media (max-width: 767px) {
  :is(
    body[data-catalogue="barrel-saunas"],
    body[data-catalogue="cube-barrel-saunas"],
    body[data-catalogue="big-oval-saunas"],
    body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]
  ) #main-content > .page-hero {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* Subcategory hero content: align to the same centered width as the floating header. */
@media (min-width: 768px) {
  :is(
    body[data-catalogue="barrel-saunas"],
    body[data-catalogue="cube-barrel-saunas"],
    body[data-catalogue="big-oval-saunas"],
    body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]
  ) #main-content > .page-hero {
    width: calc(100% - 3rem);
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }

  :is(
    body[data-catalogue="barrel-saunas"],
    body[data-catalogue="cube-barrel-saunas"],
    body[data-catalogue="big-oval-saunas"],
    body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]
  ) #main-content > .page-hero p {
    max-width: 100%;
  }
}

/* Product quote form: fixed header/footer with a scrollable form body. */
#modalBackdrop.quote-mode .modal-scroll {
  overflow: hidden !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#modalBackdrop.quote-mode #viewQuote.active {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

#modalBackdrop.quote-mode .quote-form-wrap {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

#modalBackdrop.quote-mode .quote-form-header {
  flex: 0 0 auto;
  padding: 1.4rem 1.35rem 1rem;
  padding-right: 4rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

#modalBackdrop.quote-mode .quote-form-header .quote-back {
  margin-bottom: 1rem;
}

#modalBackdrop.quote-mode .quote-form-header .quote-product-name {
  margin-bottom: 0;
}

#modalBackdrop.quote-mode #quoteForm {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

#modalBackdrop.quote-mode .quote-form-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 1rem 1.35rem 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.2) transparent;
}

#modalBackdrop.quote-mode .quote-form-scroll::-webkit-scrollbar {
  width: 6px;
}

#modalBackdrop.quote-mode .quote-form-scroll::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.18);
  border-radius: 999px;
}

#modalBackdrop.quote-mode .quote-form-footer {
  flex: 0 0 auto;
  padding: 0.9rem 1.35rem 1.15rem;
  border-top: 1px solid rgba(0,0,0,0.06);
  background: rgba(245,239,230,0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#modalBackdrop.quote-mode .quote-form-footer .btn-primary {
  width: 100%;
  margin: 0;
}

#modalBackdrop.quote-mode .quote-form-footer .quote-reply {
  margin: 0.65rem 0 0;
  text-align: center;
}

@media (max-width: 767px), (max-height: 820px) {
  #modalBackdrop.quote-mode .modal {
    height: 92vh;
  }
}

@media (min-width: 768px) {
  #modalBackdrop.quote-mode .quote-form-header {
    padding-top: 1.5rem;
  }
}

/* Subcategory consultation buttons: override the catalogue-wide white .btn rule. */
:is(
  body[data-catalogue="barrel-saunas"],
  body[data-catalogue="cube-barrel-saunas"],
  body[data-catalogue="big-oval-saunas"],
  body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]
) #main-content .category-contact-hub .duo-card .btn.btn-dark {
  background: var(--text);
  color: var(--cream);
}

:is(
  body[data-catalogue="barrel-saunas"],
  body[data-catalogue="cube-barrel-saunas"],
  body[data-catalogue="big-oval-saunas"],
  body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]
) #main-content .category-contact-hub .duo-card .btn.btn-dark:hover {
  background: var(--accent);
  color: #fff;
}

:is(
  body[data-catalogue="barrel-saunas"],
  body[data-catalogue="cube-barrel-saunas"],
  body[data-catalogue="big-oval-saunas"],
  body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]
) #main-content .category-contact-hub .duo-card .btn.btn-gold {
  background: var(--gold);
  color: var(--text);
}

:is(
  body[data-catalogue="barrel-saunas"],
  body[data-catalogue="cube-barrel-saunas"],
  body[data-catalogue="big-oval-saunas"],
  body[data-catalogue="fiberglass-hot-tubs"], body[data-catalogue="ice-baths"], body[data-catalogue="fiberglass-hot-tub-liners"]
) #main-content .category-contact-hub .duo-card .btn.btn-gold:hover {
  background: #d4b88a;
  color: var(--text);
}


/* Cross-browser reveal & video fallback: visual layout and colours unchanged. */
/* Hero headings and copy always render, even if a script or observer fails. */
.page-hero .reveal,
.video-hero .reveal,
.sauna-category-video-hero .reveal {
  opacity: 1 !important;
  transform: none !important;
}
/* Product cards can be injected after the reveal observer starts. Never hide them. */
.js-reveal .p-card.reveal,
.js-reveal .card.reveal {
  opacity: 1;
  transform: none;
}
/* Use existing local images until video is actually playing (or when video is blocked). */
.home-page .video-hero-media {
  background: #1a1816 url('/images/main-page-sauna-baltresto-co-uk-1.png') center / cover no-repeat;
}
.outdoor-saunas-page .sauna-category-video-media {
  background: #1a1816 url('/images/main-page-sauna-baltresto-co-uk-1.png') center / cover no-repeat;
}
.wood-fired-hot-tubs-page .sauna-category-video-media {
  background-image: url('/images/main-page-hot-tub-baltresto-co-uk-1.png');
}
/* Keep hero videos visible independently of JS playback detection.
   The video poster handles loading; CSS backgrounds remain as fallback. */