/* ═══════════════════════════════════════════════════════════════════════
   Adhesive wall strips - banner above the product description tabs.

   Colours and type come from the theme tokens (design-system.css), not from
   the standalone palette the banner was prototyped in: warm neutrals, the
   brand orange as the single accent, Geologica for the headline.

   The whole illustration is CSS - no image request, no canvas, no library.
   ═══════════════════════════════════════════════════════════════════════ */

.vhb-section {
  padding: var(--vh-space-10, 40px) 0 0;
  background: var(--vh-white);
}

.vhb-banner {
  container-type: inline-size;
  position: relative;
  isolation: isolate;
  display: block;
  min-height: clamp(320px, 30vw, 430px);
  overflow: hidden;
  border: 1px solid var(--vh-sand);
  border-radius: clamp(18px, 2.2vw, 28px);
  background: var(--vh-cream);
  color: var(--vh-espresso);
  box-shadow: 0 20px 60px rgba(26, 23, 21, .07);
  text-decoration: none;
  cursor: pointer;
  outline: none;
}
.vhb-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background: linear-gradient(105deg, var(--vh-cream) 0 49%, var(--vh-linen) 49% 100%);
}
.vhb-banner::after {
  content: "";
  position: absolute;
  right: -8cqw;
  top: -21cqw;
  z-index: -2;
  width: 44cqw;
  aspect-ratio: 1;
  border: 1px solid rgba(168, 159, 149, .35);
  border-radius: 50%;
  box-shadow: 0 0 0 7cqw rgba(168, 159, 149, .09), 0 0 0 14cqw rgba(168, 159, 149, .05);
  transition: transform 1s var(--vh-ease-out, cubic-bezier(.22, 1, .36, 1));
}
.vhb-banner:hover::after,
.vhb-banner:focus-visible::after { transform: scale(1.05) rotate(9deg) }
.vhb-banner:focus-visible { outline: 3px solid var(--vh-orange); outline-offset: 5px }

.vhb-grid {
  display: grid;
  grid-template-columns: minmax(0, 56%) minmax(320px, 44%);
  min-height: inherit;
  width: 100%;
}

.vhb-copy {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(30px, 4.2vw, 64px);
  padding-right: 3vw;
}

.vhb-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(20px, 2.2vw, 32px);
  font-family: var(--vh-font-body);
  font-size: clamp(10px, .82vw, 12px);
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--vh-charcoal);
}
.vhb-kicker i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--vh-orange);
  box-shadow: 0 0 0 6px rgba(249, 115, 22, .1);
}

.vhb-story, .vhb-title, .vhb-description { display: block }
.vhb-story {
  transition: opacity .26s ease, transform .45s var(--vh-ease-out, cubic-bezier(.22, 1, .36, 1));
  will-change: opacity, transform;
}
.vhb-story.is-changing { opacity: 0; transform: translateY(13px) }

.vhb-title {
  max-width: 780px;
  margin: 0;
  font-family: var(--vh-font-heading);
  font-size: clamp(30px, 3.7vw, 58px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.035em;
  text-wrap: balance;
  color: var(--vh-ink);
}
.vhb-title em {
  font-style: normal;
  background: var(--vh-gradient-cta);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.vhb-description {
  max-width: 600px;
  min-height: 3.3em;
  margin: clamp(16px, 1.8vw, 24px) 0 0;
  font-family: var(--vh-font-body);
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.65;
  color: var(--vh-charcoal);
  text-wrap: balance;
}

.vhb-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 1.8vw, 26px);
  margin-top: clamp(24px, 2.8vw, 38px);
}
.vhb-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 15px 20px 15px 23px;
  border-radius: 999px;
  background: var(--vh-ink);
  color: var(--vh-white);
  font-family: var(--vh-font-body);
  font-size: clamp(13px, .95vw, 15px);
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(26, 23, 21, .16);
  transition: transform .3s var(--vh-ease-out, cubic-bezier(.22, 1, .36, 1)), background .2s;
}
.vhb-banner:hover .vhb-cta,
.vhb-banner:focus-visible .vhb-cta { background: var(--vh-espresso); transform: translateY(-3px) }
.vhb-cta-arrow {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--vh-gradient-cta);
  color: var(--vh-white);
  font-size: 17px;
  font-style: normal;
  transition: transform .35s var(--vh-ease-out, cubic-bezier(.22, 1, .36, 1));
}
.vhb-banner:hover .vhb-cta-arrow,
.vhb-banner:focus-visible .vhb-cta-arrow { transform: translateX(4px) rotate(-7deg) }

.vhb-meta { display: flex; flex-direction: column; gap: 4px }
.vhb-duration {
  font-family: var(--vh-font-body);
  font-size: clamp(10px, .8vw, 12px);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--vh-warm-gray);
  white-space: nowrap;
}
.vhb-price {
  font-family: var(--vh-font-heading);
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 700;
  color: var(--vh-ink);
  white-space: nowrap;
}

.vhb-progress { display: flex; gap: 7px; margin-top: 24px }
.vhb-progress i {
  display: block;
  width: 25px; height: 3px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--vh-sand);
}
.vhb-progress i::after {
  content: "";
  display: block;
  width: 100%; height: 100%;
  background: var(--vh-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.vhb-progress i.is-active::after { transform: scaleX(1) }

/* ── The illustration ───────────────────────────────────────────────── */
.vhb-visual { position: relative; min-width: 0; min-height: inherit; overflow: hidden }
.vhb-sun {
  position: absolute;
  right: clamp(40px, 8cqw, 120px);
  top: 50%;
  width: clamp(200px, 24cqw, 330px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--vh-orange);
  box-shadow: inset -30px -22px 60px rgba(154, 62, 12, .22), 0 28px 60px rgba(249, 115, 22, .18);
  transform: translateY(-50%);
}
.vhb-orbit {
  position: absolute;
  left: 50%; top: 50%;
  width: 70cqw;
  aspect-ratio: 1;
  border: 1px solid rgba(168, 159, 149, .32);
  border-radius: 50%;
  animation: vhb-orbit 24s linear infinite;
}
.vhb-orbit::before { content: "+"; position: absolute; left: 13%; top: 12%; font-size: 20px; color: var(--vh-warm-gray) }
.vhb-orbit::after {
  content: "";
  position: absolute;
  right: 11%; bottom: 18%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--vh-amber);
  box-shadow: 0 0 0 7px rgba(245, 158, 11, .2);
}

.vhb-strip-pair {
  position: absolute;
  left: 50%; top: 50%;
  width: 260px; height: 320px;
  perspective: 1000px;
  transform: translate(-49%, -50%);
  filter: drop-shadow(0 28px 24px rgba(26, 23, 21, .2));
}
.vhb-strip {
  position: absolute;
  width: 92px; height: 290px;
  border: 1px solid var(--vh-sand);
  border-radius: 17px 17px 43px 43px;
  background: linear-gradient(100deg, #F3EFEA 0, #fff 32%, #F4F0EB 100%);
  box-shadow: inset 7px 0 12px rgba(255, 255, 255, .6), inset -7px 0 12px rgba(168, 159, 149, .28), 0 4px 5px rgba(26, 23, 21, .08);
  transform-style: preserve-3d;
}
.vhb-strip-a { left: 40px; top: 12px; transform: rotate(-15deg) rotateY(9deg); animation: vhb-float-a 5.6s ease-in-out infinite }
.vhb-strip-b { right: 33px; top: 2px; transform: rotate(13deg) rotateY(-8deg); animation: vhb-float-b 6.2s ease-in-out infinite }

.vhb-dot-field {
  position: absolute;
  inset: 12px 8px 61px;
  overflow: hidden;
  border-radius: 11px 11px 7px 7px;
  background-color: #EFEAE4;
  background-image:
    radial-gradient(circle, #fff 0 1.15px, #D4CBC0 1.3px 1.75px, transparent 1.9px),
    radial-gradient(circle, #fff 0 1.05px, #DED6CC 1.25px 1.65px, transparent 1.82px);
  background-position: 0 0, 3px 3px;
  background-size: 6px 6px;
  box-shadow: inset 0 0 14px rgba(168, 159, 149, .3), 0 1px #fff;
}
.vhb-dot-field::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .6) 48%, transparent 60%);
  transform: translateX(-65%);
  animation: vhb-sheen 6s var(--vh-ease-out, cubic-bezier(.22, 1, .36, 1)) infinite;
}
.vhb-tab-line { position: absolute; left: 17px; right: 17px; bottom: 52px; height: 1px; background: var(--vh-sand); box-shadow: 0 1px #fff }
.vhb-grip { position: absolute; left: 50%; bottom: 18px; width: 22px; height: 4px; border-top: 1px solid var(--vh-stone); border-bottom: 1px solid #fff; transform: translateX(-50%) }

.vhb-fact {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 15px;
  border: 1px solid #fff;
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  color: var(--vh-charcoal);
  font-family: var(--vh-font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  box-shadow: 0 12px 30px rgba(26, 23, 21, .1);
  backdrop-filter: blur(9px);
  animation: vhb-chip 5s ease-in-out infinite;
}
.vhb-fact::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--vh-orange) }
.vhb-fact-one { right: 6%; top: 15% }
.vhb-fact-two { left: 3%; bottom: 16%; animation-delay: -2.4s }

.vhb-index {
  position: absolute;
  right: 7%; bottom: 10%;
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--vh-ink);
  color: var(--vh-white);
  font-family: var(--vh-font-heading);
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 14px 35px rgba(26, 23, 21, .22);
  transform: rotate(-9deg);
}
.vhb-index::before { content: "↘"; position: absolute; left: -28px; top: -9px; font-size: 24px; color: var(--vh-orange); animation: vhb-arrow 1.4s ease-in-out infinite }

@keyframes vhb-float-a { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-15deg) rotateY(9deg) } 50% { transform: translate3d(-8px, -13px, 24px) rotate(-11deg) rotateY(2deg) } }
@keyframes vhb-float-b { 0%, 100% { transform: translate3d(0, 0, 0) rotate(13deg) rotateY(-8deg) } 50% { transform: translate3d(10px, 12px, 18px) rotate(9deg) rotateY(-2deg) } }
@keyframes vhb-sheen { 0%, 55% { transform: translateX(-65%) } 80%, 100% { transform: translateX(65%) } }
@keyframes vhb-orbit { to { transform: rotate(360deg) } }
@keyframes vhb-chip { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-7px) } }
@keyframes vhb-arrow { 0%, 100% { transform: translate(0, 0) } 50% { transform: translate(-5px, -3px) } }

/* Pause the decorative loops while the banner is scrolled out of view -
   it sits below the fold and used to animate for the whole visit. */
.vhb-banner.is-idle .vhb-orbit,
.vhb-banner.is-idle .vhb-strip,
.vhb-banner.is-idle .vhb-dot-field::after,
.vhb-banner.is-idle .vhb-fact,
.vhb-banner.is-idle .vhb-index::before { animation-play-state: paused }

/* ── Lightbox ───────────────────────────────────────────────────────── */
.vhb-lightbox {
  width: min(1540px, calc(100vw - 24px));
  height: min(940px, calc(100dvh - 24px));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 24px;
  background: var(--vh-cream);
  box-shadow: 0 35px 160px rgba(26, 23, 21, .45);
}
.vhb-lightbox::backdrop { background: rgba(26, 23, 21, .72); backdrop-filter: blur(10px) }
.vhb-lightbox iframe {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--vh-cream);
}
.vhb-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--vh-font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--vh-warm-gray);
}
.vhb-close {
  position: absolute;
  z-index: 3;
  right: 14px; top: 14px;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 50%;
  background: rgba(250, 248, 245, .92);
  color: var(--vh-ink);
  font: 400 30px/1 Arial, sans-serif;
  box-shadow: 0 8px 28px rgba(26, 23, 21, .16);
  cursor: pointer;
  backdrop-filter: blur(10px);
}
.vhb-close:hover, .vhb-close:focus-visible { background: var(--vh-orange); color: var(--vh-white); outline: none }

/* ── Responsive ─────────────────────────────────────────────────────── */
@container (max-width: 760px) {
  .vhb-banner { min-height: 560px }
  .vhb-banner::before { background: linear-gradient(180deg, var(--vh-cream) 0 58%, var(--vh-linen) 58%) }
  .vhb-grid { grid-template-columns: 1fr; grid-template-rows: auto 250px }
  .vhb-copy { padding: 30px 24px 10px }
  .vhb-title { font-size: clamp(30px, 9cqw, 50px) }
  .vhb-description { font-size: 14px; min-height: 3.2em }
  .vhb-visual { min-height: 250px }
  .vhb-strip-pair { transform: translate(-49%, -48%) scale(.72) }
  .vhb-sun { width: 190px; right: calc(50% - 95px) }
  .vhb-fact { padding: 8px 11px; font-size: 9px }
  .vhb-fact-one { right: 5%; top: 8% }
  .vhb-fact-two { left: 4%; bottom: 13% }
  .vhb-index { width: 52px; height: 52px; font-size: 13px }
  .vhb-bottom { margin-top: 22px }
  .vhb-meta { flex-direction: row; align-items: center; gap: 10px }
  .vhb-progress { margin-top: 18px }
}

@media (max-width: 560px) {
  .vhb-section { padding-top: 24px }
  .vhb-lightbox { width: 100vw; height: 100dvh; border: 0; border-radius: 0 }
  .vhb-close { width: 43px; height: 43px; right: 9px; top: 9px }
  .vhb-cta { padding: 13px 16px 13px 19px }
  .vhb-cta-arrow { width: 27px; height: 27px }
}

@media (prefers-reduced-motion: reduce) {
  .vhb-banner *, .vhb-banner *::before, .vhb-banner *::after { animation: none !important; transition-duration: .01ms !important }
  .vhb-story { transition: none }
  .vhb-orbit { transform: translate(0, 0) }
}