/* CHB temporary homepage hero — SCOPED to #chb-temp-hero-root only.
   No global * resets. Safe alongside Bacola + Elementor. */

#chb-temp-hero-root {
  --sage: #c5cbb0;
  --green-dark: #2f3d2a;
  --green-mid: #4a5a3f;
  --green-btn: #4a5a3f;
  --green-btn-hover: #384632;
  --cream: #f7f2eb;
  --charcoal: #2a2a2a;
  --family-cream: #f7f2eb;
  --sec-family: #f7f2eb;
  --max: 1280px;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Montserrat", system-ui, sans-serif;
  --announce-h: 0px;
  --header-top-h: 0px;
  --header-cat-h: 0px;
  --header-stack-h: 0px;
  --hero-h: min(70vh, 700px);
  --hero-interval: 7000ms;
  --hero-pad-top: clamp(3.25rem, 8vh, 5.5rem);
  --hero-pad-bottom: clamp(4rem, 9vh, 6rem);
  --hero-pad-x: clamp(1.2rem, 4vw, 4rem);
  --h-hero: clamp(2.35rem, 4.8vw, 3.6rem);
  --h-hero-sub: clamp(1.2rem, 2vw, 1.7rem);
}
#chb-temp-hero-root .hero { height: var(--hero-h); min-height: 400px; max-height: 800px; margin: 0; }
#chb-temp-hero-root .container { width: min(100% - 2rem, var(--max)); margin-inline: auto; }

#chb-temp-hero-root .hero{
  --hero-interval: 7000ms;
  --hero-accent: var(--sage);
  position: relative;
  overflow: hidden;
  background: #0e120d;
  width: 100%;
  height: var(--hero-h);
  min-height: 440px;
  max-height: none;
  isolation: isolate;
  /* soft separation from sticky menu above */
  box-shadow: inset 0 1px 0 rgba(255, 250, 240, 0.06);
}#chb-temp-hero-root .hero:focus-visible{
  outline: 2px solid var(--sage);
  outline-offset: -2px;
}

/* Top autoplay progress —#chb-temp-hero-root picks up active slide accent */
.hero-progress{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 8;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}#chb-temp-hero-root .hero-progress__bar{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--hero-accent) 0%, #fffaf0 100%);
  box-shadow: 0 0 12px color-mix(in srgb, var(--hero-accent) 55%, transparent);
  transform-origin: left center;
  transition: none;
}#chb-temp-hero-root .hero-progress__bar.is-running{
  animation: heroProgress var(--hero-interval) linear forwards;
}#chb-temp-hero-root .hero-progress__bar.is-paused{
  animation-play-state: paused;
}
@keyframes heroProgress {from{ width: 0%; }to{ width: 100%; }
}

/* Soft atmosphere —#chb-temp-hero-root subtle, #chb-temp-hero-root brand-tinted */
.hero-ambient{
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}#chb-temp-hero-root .hero-orb{
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.28;
  animation: heroOrbFloat 16s ease-in-out infinite;
  will-change: transform;
}#chb-temp-hero-root .hero-orb--1{
  width: min(32vw, 300px);
  height: min(32vw, 300px);
  left: 4%;
  top: 12%;
  background: radial-gradient(circle, color-mix(in srgb, var(--hero-accent) 70%, transparent) 0%, transparent 70%);
}#chb-temp-hero-root .hero-orb--2{
  width: min(24vw, 220px);
  height: min(24vw, 220px);
  right: 10%;
  bottom: 16%;
  background: radial-gradient(circle, rgba(184, 151, 74, 0.35) 0%, transparent 70%);
  animation-delay: -5s;
  animation-duration: 20s;
}#chb-temp-hero-root .hero-orb--3{
  width: min(18vw, 160px);
  height: min(18vw, 160px);
  left: 38%;
  top: 58%;
  background: radial-gradient(circle, rgba(255, 250, 240, 0.16) 0%, transparent 70%);
  animation-delay: -9s;
  animation-duration: 13s;
}
@keyframes heroOrbFloat {
  0%, 100%{ transform: translate3d(0, 0, 0) scale(1); }
  40%{ transform: translate3d(14px, -18px, 0) scale(1.06); }
  70%{ transform: translate3d(-10px, 10px, 0) scale(0.97); }
}#chb-temp-hero-root .hero-grain{
  position: absolute;
  inset: -10%;
  opacity: 0.045;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  pointer-events: none;
}#chb-temp-hero-root .hero-track{
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 1.05s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
}#chb-temp-hero-root .hero-slide{
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 100%;
}#chb-temp-hero-root .hero-media{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* subtle mouse parallax target */
  transform: scale(1.03);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}#chb-temp-hero-root .hero-media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-focus, center center);
  transform: scale(1.08);
  transition: transform 1.15s cubic-bezier(0.33, 1, 0.68, 1), filter 0.9s ease;
  filter: saturate(1.04) brightness(0.9) contrast(1.02);
  will-change: transform;
}#chb-temp-hero-root .hero-slide.is-active .hero-media img{
  animation: heroKenBurns var(--hero-interval) cubic-bezier(0.22, 1, 0.36, 1) forwards;
  filter: saturate(1.08) brightness(0.98) contrast(1.03);
}
@keyframes heroKenBurns {from{ transform: scale(1.08) translate3d(0, 0, 0); }to{ transform: scale(1) translate3d(-0.8%, -0.4%, 0); }
}

/* Layered scrim —#chb-temp-hero-root keeps open text readable without a box */
.hero-slide::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      100deg,
      rgba(10, 14, 10, 0.78) 0%,
      rgba(10, 14, 10, 0.52) 30%,
      rgba(10, 14, 10, 0.18) 54%,
      rgba(10, 14, 10, 0.04) 74%,
      transparent 90%
    ),
    linear-gradient(to top, rgba(8, 10, 8, 0.55) 0%, rgba(8, 10, 8, 0.14) 30%, transparent 55%),
    radial-gradient(ellipse 65% 60% at 16% 48%, rgba(10, 14, 10, 0.38) 0%, transparent 70%);
  pointer-events: none;
}#chb-temp-hero-root .hero-slide::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 50% 40% at 75% 40%, color-mix(in srgb, var(--hero-accent) 12%, transparent), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
}#chb-temp-hero-root .hero-slide.is-active::after{
  opacity: 1;
}#chb-temp-hero-root .hero-content{
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  /* float the text box mid-hero — not stuck to the top under the menu */
  justify-content: center;
  align-items: stretch;
  padding: var(--hero-pad-top) var(--hero-pad-x) var(--hero-pad-bottom);
  pointer-events: none;
  box-sizing: border-box;
}#chb-temp-hero-root .hero-content .container{
  pointer-events: auto;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  /* box only as tall as content; sits in the vertical centre of padded area */
  display: block;
}

/* Clean open type —#chb-temp-hero-root no glass card */
.chb-hero-copy{
  max-width: min(580px, 100%);
  margin: 0;
  padding: 0;
  color: #fffaf0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}#chb-temp-hero-root .chb-hero-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.95rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chb-hero-accent, #c7d8b5);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}#chb-temp-hero-root .chb-hero-eyebrow::before{
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.75;
  flex-shrink: 0;
}#chb-temp-hero-root .chb-hero-copy h1, #chb-temp-hero-root .chb-hero-copy h2{
  margin: 0 0 0.85rem;
  font-family: var(--font-display);
  font-size: var(--h-hero);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.028em;
  color: var(--chb-hero-heading, #fffaf0);
  text-wrap: balance;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.4);
}#chb-temp-hero-root .chb-hero-copy h1, #chb-temp-hero-root .chb-hero-copy h2 span{
  display: inline-block;
  color: var(--chb-hero-accent, #c7d8b5);
  font-style: italic;
  font-weight: 500;
  text-shadow: 0 4px 22px var(--chb-hero-accent-shadow, rgba(20, 40, 15, 0.55));
}#chb-temp-hero-root .chb-hero-subtitle{
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: var(--h-hero-sub);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.012em;
  color: var(--chb-hero-subtitle, rgba(255, 250, 240, 0.96));
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.35);
}#chb-temp-hero-root .chb-hero-text{
  margin: 0 0 1.65rem;
  max-width: 30rem;
  font-family: var(--font-body);
  font-size: clamp(0.92rem, 1.15vw, 1.05rem);
  font-weight: 400;
  line-height: 1.68;
  letter-spacing: 0.01em;
  color: rgba(255, 250, 240, 0.9);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}#chb-temp-hero-root .chb-hero-cta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.25rem;
}#chb-temp-hero-root .chb-hero-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-width: 0;
  min-height: 50px;
  padding: 0.9rem 1.7rem;
  background: var(--chb-hero-button-bg, #3f5f38);
  color: var(--chb-hero-button-text, #fffaf0) !important;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  border: 1px solid var(--chb-hero-button-border, rgba(255, 250, 240, 0.18));
  box-shadow: 0 12px 28px var(--chb-hero-button-shadow, rgba(20, 35, 20, 0.32));
  transition:
    transform 0.3s cubic-bezier(0.33, 1, 0.68, 1),
    box-shadow 0.3s ease,
    background 0.3s ease,
    filter 0.3s ease;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}#chb-temp-hero-root .chb-hero-button 
.chb-hero-button::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.2) 50%, transparent 65%);
  transform: translateX(-130%);
  transition: transform 0.65s ease;
}#chb-temp-hero-root .chb-hero-button:hover{
  background: var(--chb-hero-button-hover, #2f4a2a);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px var(--chb-hero-button-shadow-hover, rgba(20, 35, 20, 0.4));
  filter: brightness(1.04);
}#chb-temp-hero-root .chb-hero-button:hover 
.chb-hero-button:hover::after{
  transform: translateX(130%);
}#chb-temp-hero-root .chb-hero-link{
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 250, 240, 0.9);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 250, 240, 0.35);
  padding-bottom: 3px;
  transition: color 0.2s, border-color 0.2s, transform 0.2s, gap 0.2s;
}#chb-temp-hero-root .chb-hero-link:hover{
  color: var(--chb-hero-accent, #c7d8b5);
  border-color: var(--chb-hero-accent, #c7d8b5);
  transform: translateX(3px);
}

/* Staggered entrance —#chb-temp-hero-root smoother, #chb-temp-hero-root less blur */
.hero-anim{
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--d, 0) * 0.09s + 0.18s);
}#chb-temp-hero-root .hero-slide.is-active .hero-anim{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}#chb-temp-hero-root /* Per-slide themes + image focus points */
.chb-hero--nature{
  --hero-focus: 58% 42%;
  --hero-accent: #c7d8b5;
  --chb-hero-heading: #fffaf0;
  --chb-hero-accent: #c7d8b5;
  --chb-hero-subtitle: #f4f7ef;
  --chb-hero-text: #fffaf0;
  --chb-hero-button-bg: #3f5f38;
  --chb-hero-button-hover: #2f4a2a;
  --chb-hero-button-border: rgba(255, 250, 240, 0.18);
  --chb-hero-button-shadow: rgba(20, 35, 20, 0.32);
  --chb-hero-button-shadow-hover: rgba(20, 35, 20, 0.4);
}#chb-temp-hero-root .chb-hero--gold{
  --hero-focus: 62% 45%;
  --hero-accent: #d9ad45;
  --chb-hero-heading: #fff8e8;
  --chb-hero-accent: #e0bc5a;
  --chb-hero-subtitle: #fff3d3;
  --chb-hero-text: #fff8e8;
  --chb-hero-button-bg: linear-gradient(135deg, #b78322 0%, #d9ad45 50%, #8a5516 100%);
  --chb-hero-button-hover: linear-gradient(135deg, #936015 0%, #c99832 50%, #6f3f0f 100%);
  --chb-hero-button-border: rgba(255, 230, 160, 0.4);
  --chb-hero-button-shadow: rgba(40, 10, 5, 0.4);
  --chb-hero-button-shadow-hover: rgba(40, 10, 5, 0.5);
}#chb-temp-hero-root .chb-hero--copper{
  --hero-focus: 60% 44%;
  --hero-accent: #d48952;
  --chb-hero-heading: #fff4e6;
  --chb-hero-accent: #e09a66;
  --chb-hero-subtitle: #ffe2c4;
  --chb-hero-text: #fff4e6;
  --chb-hero-button-bg: linear-gradient(135deg, #8f4a24 0%, #d48952 50%, #6f351a 100%);
  --chb-hero-button-hover: linear-gradient(135deg, #743816 0%, #bd7040 50%, #55250f 100%);
  --chb-hero-button-border: rgba(255, 210, 170, 0.4);
  --chb-hero-button-shadow: rgba(45, 18, 8, 0.44);
  --chb-hero-button-shadow-hover: rgba(45, 18, 8, 0.52);
}#chb-temp-hero-root .chb-hero--iodine{
  --hero-focus: 68% 46%;
  --hero-accent: #b8a0e0;
  --chb-hero-heading: #f6f2ff;
  --chb-hero-accent: #cbb6f0;
  --chb-hero-subtitle: #e8dffc;
  --chb-hero-text: #f6f2ff;
  --chb-hero-button-bg: linear-gradient(135deg, #3d2f6b 0%, #6b56a8 50%, #2a1f4a 100%);
  --chb-hero-button-hover: linear-gradient(135deg, #32265a 0%, #5a4794 50%, #1f1738 100%);
  --chb-hero-button-border: rgba(220, 200, 255, 0.35);
  --chb-hero-button-shadow: rgba(20, 12, 40, 0.45);
  --chb-hero-button-shadow-hover: rgba(20, 12, 40, 0.55);
}


/* Colloidal soaps —#chb-temp-hero-root products right, #chb-temp-hero-root soft left for white type (matches site scrim) */
.chb-hero--soaps{
  --hero-focus: 78% 52%;
  --hero-accent: #c7d8b5;
  --chb-hero-heading: #fffaf0;
  --chb-hero-accent: #dce8c8;
  --chb-hero-subtitle: #f4f7ef;
  --chb-hero-text: #fffaf0;
  --chb-hero-button-bg: #3f5f38;
  --chb-hero-button-hover: #2f4a2a;
  --chb-hero-button-border: rgba(255, 250, 240, 0.18);
  --chb-hero-button-shadow: rgba(20, 35, 20, 0.32);
  --chb-hero-button-shadow-hover: rgba(20, 35, 20, 0.4);
}#chb-temp-hero-root .chb-hero--soaps .hero-media img{
  /* Keep soaps bright; other slides dim slightly */
  filter: saturate(1.06) brightness(1) contrast(1.02);
  object-position: var(--hero-focus, 78% 52%);
}
/* Crystal Health & Beauty — refined homepage */
/* Display titles: Cormorant · UI/body: Montserrat
   Fonts load via brand.php (non-blocking) — never @import here (blocks CSS parse / Lighthouse). */


  --chb-hero-button-shadow-hover: rgba(20, 12, 40, 0.55);
}

/* Side arrows —#chb-temp-hero-root always faintly visible on desktop */
.hero-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 48px;
  height: 48px;
  color: #fffaf0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(14, 18, 13, 0.35);
  border: 1px solid rgba(255, 250, 240, 0.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0.55;
  transition: opacity 0.3s, background 0.3s, transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}#chb-temp-hero-root .hero:hover .hero-nav, #chb-temp-hero-root .hero:focus-within .hero-nav{
  opacity: 1;
}#chb-temp-hero-root .hero-nav:hover{
  background: rgba(255, 250, 240, 0.16);
  border-color: rgba(255, 250, 240, 0.48);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transform: translateY(-50%) scale(1.06);
}#chb-temp-hero-root .hero-nav:active{
  transform: translateY(-50%) scale(0.96);
}#chb-temp-hero-root .hero-nav svg{
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}#chb-temp-hero-root .hero-nav--prev{ left: max(14px, env(safe-area-inset-left, 0px)); }#chb-temp-hero-root .hero-nav--next{ right: max(14px, env(safe-area-inset-right, 0px)); }#chb-temp-hero-root /* Bottom controls */
.hero-controls{
  position: absolute;
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.5rem 0.7rem 0.5rem 0.95rem;
  border-radius: 999px;
  background: rgba(10, 14, 10, 0.48);
  border: 1px solid rgba(255, 250, 240, 0.12);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28);
  max-width: calc(100% - 2rem);
}#chb-temp-hero-root .hero-counter{
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(255, 250, 240, 0.88);
  font-variant-numeric: tabular-nums;
  min-width: 3rem;
}#chb-temp-hero-root .hero-counter__sep{
  opacity: 0.4;
  margin: 0 0.12rem;
}#chb-temp-hero-root .hero-dots{
  display: flex;
  gap: 7px;
  align-items: center;
}#chb-temp-hero-root .hero-dots button{
  position: relative;
  width: 32px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
  overflow: hidden;
  padding: 0;
  transition: background 0.25s, width 0.25s, transform 0.25s;
}#chb-temp-hero-root .hero-dots button.active{
  width: 40px;
  background: rgba(255, 255, 255, 0.18);
}#chb-temp-hero-root .hero-dots button:hover{
  background: rgba(255, 255, 255, 0.38);
}#chb-temp-hero-root .hero-dots button .hero-dot__fill{
  position: absolute;
  inset: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--hero-accent) 0%, #fffaf0 100%);
  border-radius: inherit;
}#chb-temp-hero-root .hero-dots button.active .hero-dot__fill{
  animation: heroDotFill var(--hero-interval) linear forwards;
}#chb-temp-hero-root .hero-dots button.active.is-paused .hero-dot__fill{
  animation-play-state: paused;
}
@keyframes heroDotFill {from{ width: 0%; }to{ width: 100%; }
}#chb-temp-hero-root .hero-pause{
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fffaf0;
  background: rgba(255, 250, 240, 0.08);
  border: 1px solid rgba(255, 250, 240, 0.16);
  transition: background 0.2s, transform 0.2s;
}#chb-temp-hero-root .hero-pause:hover{
  background: rgba(255, 250, 240, 0.18);
  transform: scale(1.05);
}#chb-temp-hero-root .hero-pause .icon-play{ display: none; }#chb-temp-hero-root .hero-pause[aria-pressed="true"] .icon-pause{ display: none; }#chb-temp-hero-root .hero-pause[aria-pressed="true"] .icon-play{ display: block; }#chb-temp-hero-root /* Scroll cue */
.hero-scroll{
  position: absolute;
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 250, 240, 0.68);
  text-decoration: none;
  transition: color 0.2s;
  animation: heroScrollBob 2.4s ease-in-out infinite;
}#chb-temp-hero-root .hero-scroll:hover{
  color: #fffaf0;
}#chb-temp-hero-root .hero-scroll svg{ opacity: 0.8; }
@keyframes heroScrollBob {
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(5px); }
}


  }
  
}
/* Mobile header is shorter (no category bar) + hero mobile layout */
@media (max-width: 900px) {#chb-temp-hero-root .hero{
    min-height: 520px;
    height: var(--hero-h);
  }
  /* mobile scrim —#chb-temp-hero-root readable open text, #chb-temp-hero-root no box */
  .hero-slide::before{
    background:
      linear-gradient(
        180deg,
        rgba(10, 14, 10, 0.22) 0%,
        rgba(10, 14, 10, 0.08) 24%,
        rgba(10, 14, 10, 0.28) 52%,
        rgba(10, 14, 10, 0.7) 100%
      ),
      linear-gradient(
        100deg,
        rgba(10, 14, 10, 0.58) 0%,
        rgba(10, 14, 10, 0.22) 48%,
        transparent 78%
      );
  }#chb-temp-hero-root .hero-media img{
    object-position: 68% center;
  }#chb-temp-hero-root .chb-hero--nature{ --hero-focus: 68% 42%; }#chb-temp-hero-root .chb-hero--gold{ --hero-focus: 70% 44%; }#chb-temp-hero-root .chb-hero--copper{ --hero-focus: 68% 44%; }#chb-temp-hero-root .chb-hero--iodine{ --hero-focus: 72% 46%; }#chb-temp-hero-root .chb-hero--soaps{ --hero-focus: 82% 50%; }#chb-temp-hero-root .hero-content{
    justify-content: flex-end;
    align-items: stretch;
  }#chb-temp-hero-root .hero-content .container{
    width: 100%;
    max-width: none;
    margin-top: auto;
  }#chb-temp-hero-root .chb-hero-copy{
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }#chb-temp-hero-root .chb-hero-eyebrow{
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    margin-bottom: 0.65rem;
  }#chb-temp-hero-root .chb-hero-copy h1, #chb-temp-hero-root .chb-hero-copy h2{
    font-size: clamp(2.1rem, 8.5vw, 2.85rem);
    margin-bottom: 0.5rem;
    line-height: 1.02;
  }#chb-temp-hero-root .chb-hero-subtitle{
    font-size: clamp(1.1rem, 4.2vw, 1.35rem);
    margin-bottom: 0.5rem;
  }#chb-temp-hero-root .chb-hero-text{
    font-size: 0.875rem;
    line-height: 1.55;
    margin-bottom: 1.15rem;
    max-width: 22rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }#chb-temp-hero-root .chb-hero-cta{
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
  }#chb-temp-hero-root .chb-hero-button{
    width: auto;
    min-width: 0;
    min-height: 48px;
    padding: 0.85rem 1.35rem;
    font-size: 0.72rem;
    justify-content: center;
  }#chb-temp-hero-root .chb-hero-link{
    text-align: left;
    border-bottom: 1px solid rgba(255, 250, 240, 0.4);
    padding: 0 0 2px;
    font-size: 0.78rem;
    opacity: 0.95;
  }

  /* swipe-first on mobile —#chb-temp-hero-root hide side arrows */
  .hero-nav{
    display: none;
  }#chb-temp-hero-root .hero-scroll{
    display: none;
  }#chb-temp-hero-root .hero-orb{
    opacity: 0.18;
  }#chb-temp-hero-root .hero-orb--3{
    display: none;
  }#chb-temp-hero-root .hero-controls{
    bottom: max(14px, env(safe-area-inset-bottom, 0px));
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: auto;
    max-width: calc(100% - 1.5rem);
    gap: 0.65rem;
    padding: 0.45rem 0.6rem 0.45rem 0.8rem;
  }#chb-temp-hero-root .hero-counter{
    font-size: 0.625rem;
    min-width: 2.6rem;
  }#chb-temp-hero-root .hero-dots button{
    width: 22px;
  }#chb-temp-hero-root .hero-dots button.active{
    width: 30px;
  }#chb-temp-hero-root .hero-pause{
    width: 28px;
    height: 28px;
  }
}
@media (max-width: 640px) {#chb-temp-hero-root .hero{
    min-height: 480px;
  }#chb-temp-hero-root .chb-hero-copy h1, #chb-temp-hero-root .chb-hero-copy h2{
    font-size: clamp(1.95rem, 9vw, 2.45rem);
  }#chb-temp-hero-root .chb-hero-text{
    -webkit-line-clamp: 2;
    font-size: 0.82rem;
  }
}
/* Very short viewports (landscape phones / short windows) */
@media (max-height: 560px) {#chb-temp-hero-root .hero{
    min-height: 300px;
    height: var(--hero-h);
  }#chb-temp-hero-root .chb-hero-copy h1, #chb-temp-hero-root .chb-hero-copy h2{
    font-size: clamp(1.5rem, 5.5vh, 2rem);
  }#chb-temp-hero-root .chb-hero-text, #chb-temp-hero-root .chb-hero-eyebrow{
    display: none;
  }#chb-temp-hero-root .chb-hero-subtitle{
    margin-bottom: 0.55rem;
    font-size: 1rem;
  }#chb-temp-hero-root .chb-hero-cta{
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }#chb-temp-hero-root .chb-hero-button{
    width: auto;
    min-height: 42px;
    padding: 0.65rem 1.1rem;
  }#chb-temp-hero-root .hero-content{
    justify-content: center;
  }#chb-temp-hero-root .hero-orb{
    display: none;
  }
}
/* Ultra-wide: don't let hero get absurdly tall on big monitors */
@media (min-width: 1600px) and (min-height: 900px) {#chb-temp-hero-root .hero{
    height: min(var(--hero-h), 800px);
  }#chb-temp-hero-root .hero-media img{
    object-position: center 42%;
  }
  
}
@media (max-width: 640px) {