/* =============================================
   HAIRTEC 360 SANAL TUR — STYLES
   ============================================= */

/* Hide Pannellum's built-in white loading box. We render our own branded
   loading overlay (with progress bar and DHI facts) and keep it visible
   until Pannellum fires its 'load' event, so the user never sees the
   default load UI flash between our overlay and the live panorama. */
.hairtec-panorama-wrapper .pnlm-load-box,
.hairtec-panorama-wrapper .pnlm-lbox,
.hairtec-panorama-wrapper .pnlm-lmsg,
.hairtec-panorama-wrapper .pnlm-load-button,
.hairtec-panorama-wrapper .pnlm-loading,
.hairtec-panorama-wrapper .pnlm-fullscreen-toggle-button {
  display: none !important;
}

/* ── Wrapper ── */
.hairtec-panorama-wrapper {
  --ht-color: #2a9d8f;
  --ht-color-sec: #ffffff;
  --ht-size: 44px;
  --ht-icon-size: 18px;
  --ht-border-w: 3px;
  --ht-border-c: #ffffff;
  --ht-opacity: 0.9;
  --ht-label-bg: rgba(0,0,0,0.75);
  --ht-label-color: #ffffff;
  --ht-popup-w: 420px;
  --ht-popup-bg: #ffffff;
  --ht-popup-title: #264653;
  --ht-popup-text: #555555;
  --ht-popup-radius: 16px;
  --ht-popup-overlay: rgba(0,0,0,0.5);
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  contain: layout style;
}

.hairtec-panorama-container {
  width: 100%;
  height: 500px;
}

/* ── Fullscreen sizing ──
   When the user toggles fullscreen via .hairtec-fs-btn, the wrapper
   becomes the fullscreen element. Without these rules, the wrapper's
   inner .hairtec-panorama-container stays at its fixed 500px height,
   leaving a black region under the panorama. Force both the wrapper
   and the container to fill the viewport so Pannellum's renderer
   (which sizes itself from the container) gets the right dimensions
   on its next resize() call. */
.hairtec-panorama-wrapper:fullscreen,
.hairtec-panorama-wrapper:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  background: #000;
}
.hairtec-panorama-wrapper:fullscreen .hairtec-panorama-container,
.hairtec-panorama-wrapper:-webkit-full-screen .hairtec-panorama-container {
  width: 100% !important;
  height: 100% !important;
}

/* ── Pseudo-fullscreen fallback ──
   iOS Safari (iPhone especially) does NOT implement the HTML5
   Fullscreen API on arbitrary elements — only on <video>. So calling
   wrapper.requestFullscreen() silently no-ops on mobile Safari. The
   fullscreen button therefore appears "broken" on iOS. Work around
   this by toggling a class that fixes the wrapper to the viewport and
   raises it above everything — visually identical to real fullscreen.
*/
.hairtec-panorama-wrapper.hairtec-pseudo-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  /* Also cover the iOS Safari URL-bar height when available */
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  z-index: 2147483000 !important;
  background: #000 !important;
}
.hairtec-panorama-wrapper.hairtec-pseudo-fullscreen .hairtec-panorama-container {
  width: 100% !important;
  height: 100% !important;
}
/* Lock body scroll while the pseudo-fullscreen wrapper is active */
body.hairtec-pseudo-fullscreen-active {
  overflow: hidden !important;
  touch-action: none !important;
  -webkit-overflow-scrolling: auto !important;
}
/* Clear contain so position:fixed on wrapper works correctly */
.hairtec-panorama-wrapper.hairtec-pseudo-fullscreen {
  contain: none !important;
}

/* ── Hotspot Base ── */
.hairtec-custom-hotspot {
  cursor: pointer;
  /* Prevent Pannellum perspective from distorting stem/label */
  transform-style: flat !important;
  perspective: none !important;
}

/* ── Guided Tour HUD ── */
.hairtec-gt-hud {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translate(-50%, -8px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(20, 20, 22, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hairtec-gt-hud.hairtec-gt-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.hairtec-gt-hud .hairtec-gt-btn,
.hairtec-gt-hud .hairtec-gt-btn:hover,
.hairtec-gt-hud .hairtec-gt-btn:focus,
.hairtec-gt-hud .hairtec-gt-btn:focus-visible,
.hairtec-gt-hud .hairtec-gt-btn:active {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  font-family: inherit !important;
}
.hairtec-gt-hud .hairtec-gt-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px !important;
  line-height: 1 !important;
  transition: background 0.2s ease, transform 0.15s ease;
}
.hairtec-gt-hud .hairtec-gt-btn:hover {
  background: rgba(255, 255, 255, 0.18) !important;
}
.hairtec-gt-hud .hairtec-gt-btn:active {
  transform: scale(0.92);
}
.hairtec-gt-hud .hairtec-gt-btn i {
  line-height: 1;
  color: inherit;
}
.hairtec-gt-label {
  font-weight: 600;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  min-width: 44px;
  text-align: center;
  opacity: 0.9;
}

@media (max-width: 600px) {
  .hairtec-gt-hud {
    top: 10px;
    padding: 6px 10px;
    gap: 6px;
    font-size: 12px;
  }
  .hairtec-gt-btn {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  .hairtec-gt-label {
    min-width: 36px;
  }
}

/* ── Lazy-load placeholder shown behind the intro splash ── */
.hairtec-lazy-placeholder {
  position: absolute;
  inset: 0;
  background: #f3f5f7;
  z-index: 1;
}

/* ── Guided Tour intro splash ── */
.hairtec-gt-intro {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: transparent;
  z-index: 300;
  opacity: 0;
  transition: opacity 0.25s ease;
  font-family: inherit;
  overflow: hidden;
}

/* Background layer (blurred panorama preview if provided, otherwise neutral) */
.hairtec-gt-intro-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #f3f5f7;
}
.hairtec-gt-intro.hairtec-gt-intro-has-bg .hairtec-gt-intro-bg-layer {
  background-image: var(--ht-intro-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Scale up slightly so the blur doesn't show transparent edges */
  transform: scale(1.08);
  filter: blur(var(--ht-intro-bg-blur, 14px));
  -webkit-filter: blur(var(--ht-intro-bg-blur, 14px));
}
.hairtec-gt-intro.hairtec-gt-intro-has-bg .hairtec-gt-intro-bg-layer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--ht-intro-bg-dim, 0.15));
  pointer-events: none;
}
.hairtec-gt-intro-card {
  position: relative;
  z-index: 1;
}
.hairtec-gt-intro.hairtec-gt-intro-visible {
  opacity: 1;
}
.hairtec-gt-intro-card {
  position: relative;
  max-width: 520px;
  width: 100%;
  background: var(--ht-popup-bg, #ffffff);
  border: 1px solid rgba(38, 70, 83, 0.08);
  border-radius: var(--ht-popup-radius, 16px);
  padding: 36px 30px 28px;
  color: var(--ht-popup-title, #264653);
  text-align: center;
  box-shadow: 0 20px 50px rgba(38, 70, 83, 0.25);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hairtec-gt-intro.hairtec-gt-intro-visible .hairtec-gt-intro-card {
  transform: translateY(0) scale(1);
}
.hairtec-gt-intro-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ht-popup-title, #264653);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(38, 70, 83, 0.25);
}
.hairtec-gt-intro-icon svg {
  display: block;
}
.hairtec-gt-intro-logo {
  max-width: var(--ht-intro-logo-size, 80px);
  width: 100%;
  height: auto;
  margin: 0 auto 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.hairtec-gt-intro-logo img {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}
.hairtec-gt-intro-title {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #223558;
  font-family: inherit;
}
.hairtec-gt-intro-text {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ht-popup-text, #555555);
  font-family: inherit;
}
.hairtec-gt-intro-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.hairtec-gt-intro .hairtec-gt-intro-btn,
.hairtec-gt-intro .hairtec-gt-intro-btn:hover,
.hairtec-gt-intro .hairtec-gt-intro-btn:focus,
.hairtec-gt-intro .hairtec-gt-intro-btn:focus-visible,
.hairtec-gt-intro .hairtec-gt-intro-btn:active {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  outline: none !important;
  text-decoration: none !important;
  font-family: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.hairtec-gt-intro .hairtec-gt-intro-btn {
  border: 1.5px solid transparent !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 12px 24px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
  min-height: auto !important;
}
.hairtec-gt-intro .hairtec-gt-intro-btn svg {
  display: block;
  flex-shrink: 0;
}
.hairtec-gt-intro .hairtec-gt-intro-btn:active {
  transform: scale(0.97);
}
.hairtec-gt-intro .hairtec-gt-intro-auto {
  background: var(--ht-popup-title, #264653) !important;
  color: #ffffff !important;
  border-color: var(--ht-popup-title, #264653) !important;
  box-shadow: 0 6px 16px rgba(38, 70, 83, 0.25) !important;
}
.hairtec-gt-intro .hairtec-gt-intro-auto:hover {
  background: #1d3640 !important;
  border-color: #1d3640 !important;
  box-shadow: 0 8px 20px rgba(38, 70, 83, 0.35) !important;
}
.hairtec-gt-intro .hairtec-gt-intro-manual {
  background: transparent !important;
  color: var(--ht-popup-title, #264653) !important;
  border-color: rgba(38, 70, 83, 0.25) !important;
  box-shadow: none !important;
}
.hairtec-gt-intro .hairtec-gt-intro-manual:hover {
  background: rgba(38, 70, 83, 0.06) !important;
  border-color: var(--ht-popup-title, #264653) !important;
  color: var(--ht-popup-title, #264653) !important;
}

@media (max-width: 600px) {
  .hairtec-gt-intro-card {
    padding: 28px 20px 22px;
    border-radius: 14px;
  }
  .hairtec-gt-intro-icon {
    width: 54px;
    height: 54px;
  }
  .hairtec-gt-intro-title {
    font-size: 18px;
  }
  .hairtec-gt-intro-text {
    font-size: 13px;
    margin-bottom: 20px;
  }
  .hairtec-gt-intro .hairtec-gt-intro-btn {
    padding: 11px 18px !important;
    font-size: 13px !important;
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* Active hotspot (info panel open): sit above the info overlay (z-index 100) */
.hairtec-custom-hotspot.hairtec-hotspot-active {
  z-index: 150 !important;
}
.hairtec-custom-hotspot.hairtec-hotspot-active .hairtec-dot {
  /* Subtle emphasis while panel is open */
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45),
              0 0 0 4px rgba(255, 255, 255, 0.25);
  opacity: 1;
}

/* Pannellum hotspot base — keep children flat */
.pnlm-hotspot-base {
  transform-style: flat !important;
}

.hairtec-dot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ht-size);
  height: var(--ht-size);
  background: var(--ht-dot-color, var(--ht-color));
  border: var(--ht-border-w) solid var(--ht-border-c);
  color: var(--ht-color-sec);
  font-size: var(--ht-icon-size);
  cursor: pointer;
  opacity: var(--ht-opacity);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35),
              0 0 0 3px rgba(255, 255, 255, 0.15);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.25s ease,
              opacity 0.2s ease;
}

/* Dot number text */
.hairtec-dot-number {
  font-size: var(--ht-icon-size);
  font-weight: 700;
  line-height: 1;
  color: var(--ht-color-sec);
}

/* ── Dot Shapes ── */
[data-dot-shape="circle"] .hairtec-dot {
  border-radius: 50%;
}

[data-dot-shape="square"] .hairtec-dot {
  border-radius: 6px;
}

[data-dot-shape="diamond"] .hairtec-dot {
  border-radius: 4px;
  transform: rotate(45deg);
}
[data-dot-shape="diamond"] .hairtec-dot > * {
  transform: rotate(-45deg);
}

[data-dot-shape="pin"] .hairtec-dot {
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}
[data-dot-shape="pin"] .hairtec-dot > * {
  transform: rotate(45deg);
}

/* ── Stem (vertical line, Matterport-style) ── */
.hairtec-dot-stem {
  position: absolute;
  top: var(--ht-size);
  left: 50%;
  width: 2px;
  height: calc(var(--ht-stem-h-local, var(--ht-stem-h, 0px)) * var(--ht-zoom-scale, 1));
  background: rgba(255, 255, 255, 0.75);
  transform: translateX(-50%);
  transform-origin: top center;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  transition: height 0.15s ease;
}

/* Stem end dot (small circle at bottom) */
.hairtec-dot-stem::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  transform: translateX(-50%);
}

/* Hide stem when height is 0 (but not if per-hotspot override exists) */
.hairtec-panorama-wrapper[style*="--ht-stem-h: 0px"] .hairtec-dot-stem:not([style*="--ht-stem-h-local"]) {
  display: none;
}

[data-dot-shape="pin"] .hairtec-dot-stem {
  display: none;
}

/* ── Stem direction: up (line extends upward from dot — for high-mounted items like ceiling TVs) ──
   Use translateY(-100%) so the stem is positioned relative to the dot regardless of
   the parent .pnlm-hotspot wrapper geometry (which may differ across viewports). */
.hairtec-dot-stem[data-direction="up"] {
  top: 0 !important;
  bottom: auto !important;
  transform: translateX(-50%) translateY(-100%) !important;
  transform-origin: bottom center !important;
}
.hairtec-dot-stem[data-direction="up"]::after {
  bottom: auto;
  top: -3px;
}

/* ── Animations ── */

/* Pulse */
.hairtec-dot-anim {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

[data-dot-animation="pulse"] .hairtec-dot-anim {
  background: var(--ht-dot-color, var(--ht-color));
  border-radius: inherit;
  transform: translate(-50%, -50%);
  animation: htPulse 2s ease-out infinite;
  will-change: transform, opacity;
}

@keyframes htPulse {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}

/* Bounce */
[data-dot-animation="bounce"] .hairtec-dot {
  animation: htBounce 2s ease-in-out infinite;
}

@keyframes htBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
[data-dot-shape="diamond"][data-dot-animation="bounce"] .hairtec-dot {
  animation: htBounceDiamond 2s ease-in-out infinite;
}
@keyframes htBounceDiamond {
  0%, 100% { transform: rotate(45deg) translateY(0); }
  50%      { transform: rotate(45deg) translateY(-8px); }
}
[data-dot-shape="pin"][data-dot-animation="bounce"] .hairtec-dot {
  animation: htBouncePin 2s ease-in-out infinite;
}
@keyframes htBouncePin {
  0%, 100% { transform: rotate(-45deg) translateY(0); }
  50%      { transform: rotate(-45deg) translateY(-8px); }
}

/* Glow */
[data-dot-animation="glow"] .hairtec-dot {
  animation: htGlow 2s ease-in-out infinite;
}

@keyframes htGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(0,0,0,0.2), 0 0 0 0 var(--ht-color); }
  50%      { box-shadow: 0 0 8px rgba(0,0,0,0.2), 0 0 20px 4px var(--ht-color); }
}

/* Ripple */
[data-dot-animation="ripple"] .hairtec-dot-anim {
  border: 2px solid var(--ht-dot-color, var(--ht-color));
  border-radius: inherit;
  background: transparent;
  transform: translate(-50%, -50%);
  animation: htRipple 2s ease-out infinite;
  will-change: transform, opacity;
}

@keyframes htRipple {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  50%  { transform: translate(-50%, -50%) scale(1.8); opacity: 0.3; }
  100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
}

/* None */
[data-dot-animation="none"] .hairtec-dot-anim {
  display: none;
}

/* ── Hover Effects ── */
[data-dot-hover="scale"] .hairtec-dot:hover {
  transform: scale(1.2);
  opacity: 1;
}
[data-dot-shape="diamond"][data-dot-hover="scale"] .hairtec-dot:hover {
  transform: rotate(45deg) scale(1.2);
}
[data-dot-shape="pin"][data-dot-hover="scale"] .hairtec-dot:hover {
  transform: rotate(-45deg) scale(1.2);
}

[data-dot-hover="glow"] .hairtec-dot:hover {
  box-shadow: 0 0 20px 6px var(--ht-color);
  opacity: 1;
}

[data-dot-hover="bounce"] .hairtec-dot:hover {
  animation: htHoverBounce 0.4s ease;
  opacity: 1;
}
@keyframes htHoverBounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.3); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1.1); }
}

[data-dot-hover="lift"] .hairtec-dot:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  opacity: 1;
}
[data-dot-shape="diamond"][data-dot-hover="lift"] .hairtec-dot:hover {
  transform: rotate(45deg) translateY(-4px);
}
[data-dot-shape="pin"][data-dot-hover="lift"] .hairtec-dot:hover {
  transform: rotate(-45deg) translateY(-4px);
}

[data-dot-hover="none"] .hairtec-dot:hover {
  /* no effect */
}

/* ── Label (sibling of dot, inside hotSpotDiv) ── */
.hairtec-dot-label {
  position: absolute;
  top: calc(var(--ht-size) / 2);
  left: calc(50% + var(--ht-size) / 2 + 10px);
  transform: translateY(-50%);
  white-space: nowrap;
  background: var(--ht-label-bg);
  color: var(--ht-label-color);
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 5;
}

/* Label visibility modes */
[data-label-show="hover"] .hairtec-dot-label {
  opacity: 0;
  transform: translateY(-50%) translateX(-4px);
}
[data-label-show="hover"] .hairtec-custom-hotspot:hover .hairtec-dot-label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

[data-label-show="always"] .hairtec-dot-label {
  opacity: 1;
}

[data-label-show="never"] .hairtec-dot-label {
  display: none;
}

/* Icon-label type: label sits beside the dot */
.hairtec-dot-inline-label {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: var(--ht-label-bg);
  color: var(--ht-label-color);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* ══════════════════════════════════════
   INFO PANEL — Matterport-style Floating Card
   ══════════════════════════════════════ */
.hairtec-info-overlay {
  position: absolute;
  z-index: 100;
  bottom: 20px;
  left: 20px;
  width: 340px;
  max-width: calc(100% - 40px);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hairtec-info-overlay.hairtec-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.hairtec-info-card {
  position: relative;
  background: rgba(26, 26, 26, 0.96);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  font-family: inherit;
  contain: content;
}

/* ── Frame: positioned wrapper around the card. The close button is a
   SIBLING of the card inside this frame, NOT a child of the card.
   This is necessary because iOS Safari renders <video> elements above
   sibling elements within the same stacking context regardless of
   z-index — so a close button inside the same card as the video would
   always be hidden behind the video on iOS. By making the close button
   a sibling of the card (and the frame the positioning context), the
   close button lives in a separate stacking layer guaranteed to render
   above the video. ── */
.hairtec-info-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hairtec-info-frame > .hairtec-info-card {
  pointer-events: auto;
}
.hairtec-info-frame > .hairtec-info-close {
  pointer-events: auto;
}

.hairtec-info-close {
  width: 30px;
  height: 30px;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  transition: background 0.2s ease, color 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  margin: 0;
}

.hairtec-info-close:hover {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
}

/* ── Image ── */
.hairtec-info-video {
  width: 100%;
  max-height: 240px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
}

.hairtec-info-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hairtec-info-image {
  width: 100%;
  height: 180px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
}

.hairtec-info-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Body ── */
.hairtec-info-body {
  padding: 18px 20px 20px;
}

.hairtec-info-icon-row {
  display: none;
}

.hairtec-info-title {
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.35;
  margin-bottom: 10px;
}

.hairtec-info-description {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 4px;
}

/* Fixed-height scrollable description (replaces "Meer lezen" toggle) */
.hairtec-info-description.hairtec-info-description-scroll {
  max-height: 9.6em; /* ~6 lines @ 1.6 line-height */
  overflow-y: scroll; /* always reserve scrollbar space so the track is visible */
  padding-right: 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: auto;
  scrollbar-color: #223558 rgba(38, 70, 83, 0.12);
  position: relative;
}
.hairtec-info-description.hairtec-info-description-scroll::-webkit-scrollbar {
  width: 10px;
}
.hairtec-info-description.hairtec-info-description-scroll::-webkit-scrollbar-track {
  background: rgba(38, 70, 83, 0.12);
  border-radius: 5px;
}
.hairtec-info-description.hairtec-info-description-scroll::-webkit-scrollbar-thumb {
  background: #223558;
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.hairtec-info-description.hairtec-info-description-scroll::-webkit-scrollbar-thumb:hover {
  background: #5C5C5C;
  background-clip: padding-box;
  border: 2px solid transparent;
}

/* Wrap description in a positioned context so the bottom fade can sit over it */
.hairtec-info-body {
  position: relative;
}
/* Bottom fade affordance — overlays the bottom of the description so the user
   can see there is more content below to scroll. */
.hairtec-info-description.hairtec-info-description-overflowing::after {
  content: '';
  position: sticky;
  display: block;
  bottom: 0;
  left: 0;
  right: 0;
  height: 28px;
  margin-top: -28px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    var(--ht-popup-bg, #ffffff) 90%
  );
  pointer-events: none;
}

.hairtec-info-viewmore {
  display: inline-block !important;
  margin-top: 14px;
  padding: 0 0 2px !important;
  border: none !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.5) !important;
  background: none !important;
  background-color: transparent !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer;
  letter-spacing: 0.01em;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-transform: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border-color 0.2s ease;
}

.hairtec-info-viewmore:hover {
  border-bottom-color: #fff !important;
  background: none !important;
  color: #ffffff !important;
}

/* When no image, show icon row */
.hairtec-info-image[style*="display: none"] ~ .hairtec-info-body .hairtec-info-icon-row,
.hairtec-info-image[style*="display:none"] ~ .hairtec-info-body .hairtec-info-icon-row {
  display: block;
  margin-bottom: 12px;
}

.hairtec-info-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--ht-color), #264653);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  flex-shrink: 0;
}

/* ── MODE overrides (side-panel / bottom-card / popup) ── */

/* Side Panel */
[data-info-mode="side-panel"] .hairtec-info-overlay {
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: var(--ht-popup-w);
  max-width: 45%;
  transform: translateX(100%);
  border-radius: 0;
}

[data-info-mode="side-panel"] .hairtec-info-overlay.hairtec-visible {
  transform: translateX(0);
}

[data-info-mode="side-panel"] .hairtec-info-card {
  height: 100%;
  border-radius: 12px 0 0 12px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

[data-info-mode="side-panel"] .hairtec-info-body {
  flex: 1;
}

/* Bottom Card — centered */
[data-info-mode="bottom-card"] .hairtec-info-overlay {
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
}

[data-info-mode="bottom-card"] .hairtec-info-overlay.hairtec-visible {
  transform: translateX(-50%) translateY(0);
}

/* Popup (Full Overlay) */
[data-info-mode="popup"] .hairtec-info-overlay {
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transform: none;
}

[data-info-mode="popup"] .hairtec-info-overlay.hairtec-visible {
  transform: none;
}

[data-info-mode="popup"] .hairtec-info-frame {
  max-width: 380px;
  width: 90%;
  max-height: calc(100vh - 40px);
  height: auto;
  display: flex;
  flex-direction: column;
  transform: translateY(16px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-info-mode="popup"] .hairtec-info-card {
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

[data-info-mode="popup"] .hairtec-info-card .hairtec-info-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

[data-info-mode="popup"] .hairtec-info-overlay.hairtec-visible .hairtec-info-frame {
  transform: translateY(0) scale(1);
}

/* ── Guided-tour HUD overlap fix ──
   When the auto-play guided tour is running, its HUD pill (pause / N/M /
   next / stop controls) is anchored to the top-center of the wrapper at
   z-index 200. The popup info overlay sits at z-index 100 and centers its
   card vertically — so during auto-play the HUD ends up rendering on top
   of the upper edge of the card (covering the title / close button).
   Detect the running HUD via :has() and shift the popup card down so it
   visually clears the HUD region while still being centered horizontally.
*/
.hairtec-panorama-wrapper:has(.hairtec-gt-hud.hairtec-gt-visible) [data-info-mode="popup"] .hairtec-info-overlay {
  align-items: flex-start;
  padding-top: 76px;
  padding-bottom: 20px;
}
@media (max-width: 600px) {
  .hairtec-panorama-wrapper:has(.hairtec-gt-hud.hairtec-gt-visible) [data-info-mode="popup"] .hairtec-info-overlay {
    padding-top: 60px;
  }
}

/* Anchored — positioned absolutely by JS near the clicked hotspot */
[data-info-mode="anchored"] .hairtec-info-overlay {
  position: absolute;
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  width: auto;
  max-width: none;
  background: transparent;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 110;
}
[data-info-mode="anchored"] .hairtec-info-overlay.hairtec-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
[data-info-mode="anchored"] .hairtec-info-overlay.hairtec-anchored-flip {
  transform: translateY(6px) scale(0.97);
}
[data-info-mode="anchored"] .hairtec-info-overlay.hairtec-anchored-flip.hairtec-visible {
  transform: translateY(0) scale(1);
}
[data-info-mode="anchored"] .hairtec-info-frame {
  width: 100%;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}
[data-info-mode="anchored"] .hairtec-info-card {
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--ht-popup-bg, #ffffff);
  color: var(--ht-popup-title, #264653);
  border-radius: var(--ht-popup-radius, 16px);
  box-shadow: 0 18px 40px rgba(38, 70, 83, 0.28), 0 2px 6px rgba(38, 70, 83, 0.12);
  overflow: hidden;
}

[data-info-mode="anchored"] .hairtec-info-card .hairtec-info-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}
[data-info-mode="anchored"] .hairtec-info-title {
  color: var(--ht-popup-title, #264653);
}
[data-info-mode="anchored"] .hairtec-info-description {
  color: var(--ht-popup-text, #555555);
}
[data-info-mode="anchored"] .hairtec-info-close {
  background: #ffffff !important;
  color: var(--ht-popup-title, #264653) !important;
  width: 34px !important;
  height: 34px !important;
  font-size: 15px !important;
  box-shadow: 0 4px 12px rgba(38, 70, 83, 0.35), 0 0 0 1px rgba(38, 70, 83, 0.12);
}
[data-info-mode="anchored"] .hairtec-info-close:hover {
  background: var(--ht-popup-title, #264653) !important;
  color: #ffffff !important;
}
[data-info-mode="anchored"] .hairtec-info-viewmore {
  color: var(--ht-popup-title, #264653) !important;
  border-bottom-color: rgba(38, 70, 83, 0.5) !important;
  background: none !important;
}
[data-info-mode="anchored"] .hairtec-info-viewmore:hover {
  color: var(--ht-popup-title, #264653) !important;
  border-bottom-color: var(--ht-popup-title, #264653) !important;
}
[data-info-mode="anchored"] .hairtec-info-video,
[data-info-mode="anchored"] .hairtec-info-image {
  background: rgba(38, 70, 83, 0.06);
}

/* ── DEV MODE ── */
.hairtec-dev-banner {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  background: rgba(230, 57, 70, 0.9);
  color: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  pointer-events: none;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}

.hairtec-coord-display {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  background: rgba(0, 0, 0, 0.88);
  color: #4ade80;
  padding: 10px 20px;
  border-radius: 8px;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  border: 1px solid rgba(74, 222, 128, 0.2);
}

.hairtec-coord-display.hairtec-visible {
  opacity: 1;
}

/* ── PANNELLUM OVERRIDES ── */
.hairtec-panorama-container .pnlm-load-button {
  background: var(--ht-color) !important;
  border-radius: 8px !important;
  font-family: inherit !important;
  padding: 10px 24px !important;
}

.hairtec-panorama-container .pnlm-load-button:hover {
  opacity: 0.9;
}

/* ── PLACEHOLDER ── */
.hairtec-panorama-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  background: linear-gradient(135deg, #f5f5f5, #e8e8e8);
  border: 2px dashed #d0d0d0;
  border-radius: 12px;
  color: #888;
  font-size: 15px;
  text-align: center;
}

.hairtec-placeholder-inner {
  padding: 20px;
}

/* ══════════════════════════════════════
   HOTSPOT LIST — floating button + side panel
   ══════════════════════════════════════ */
/* Reset theme/Elementor button styling so dimensions stay exact */
.hairtec-panorama-wrapper .hairtec-hslist-btn,
.hairtec-panorama-wrapper .hairtec-hslist-btn:hover,
.hairtec-panorama-wrapper .hairtec-hslist-btn:focus,
.hairtec-panorama-wrapper .hairtec-hslist-btn:focus-visible,
.hairtec-panorama-wrapper .hairtec-hslist-btn:active,
.hairtec-panorama-wrapper .hairtec-hslist-close,
.hairtec-panorama-wrapper .hairtec-hslist-close:hover,
.hairtec-panorama-wrapper .hairtec-hslist-close:focus,
.hairtec-panorama-wrapper .hairtec-hslist-close:focus-visible,
.hairtec-panorama-wrapper .hairtec-hslist-close:active,
.hairtec-panorama-wrapper .hairtec-fs-btn,
.hairtec-panorama-wrapper .hairtec-fs-btn:hover,
.hairtec-panorama-wrapper .hairtec-fs-btn:focus,
.hairtec-panorama-wrapper .hairtec-fs-btn:focus-visible,
.hairtec-panorama-wrapper .hairtec-fs-btn:active {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  outline: none !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-family: inherit !important;
  box-shadow: none !important;
}

/* Standalone fullscreen toggle — top-left corner of the wrapper */
.hairtec-panorama-wrapper .hairtec-fs-btn {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: #223558 !important;
  color: #ffffff !important;
  font-size: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  z-index: 220;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
}

.hairtec-panorama-wrapper .hairtec-fs-btn:hover {
  background: #5C5C5C !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-1px);
}

.hairtec-panorama-wrapper .hairtec-fs-btn i {
  color: #ffffff !important;
  line-height: 1 !important;
  font-size: 16px !important;
  margin: 0 !important;
}

@media (max-width: 600px) {
  .hairtec-panorama-wrapper .hairtec-fs-btn {
    top: 12px !important;
    left: 12px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    border-radius: 10px !important;
  }
  .hairtec-panorama-wrapper .hairtec-fs-btn i {
    font-size: 14px !important;
  }
}

.hairtec-panorama-wrapper .hairtec-hslist-btn {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: rgba(20, 20, 22, 0.82) !important;
  color: #fff !important;
  font-size: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  z-index: 220;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
}

.hairtec-panorama-wrapper .hairtec-hslist-btn:hover {
  background: var(--ht-color, #2a9d8f) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-1px);
}

.hairtec-panorama-wrapper .hairtec-hslist-btn.hairtec-hslist-btn-active {
  background: var(--ht-color, #2a9d8f) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

.hairtec-panorama-wrapper .hairtec-hslist-btn i {
  color: inherit !important;
  line-height: 1 !important;
  font-size: 16px !important;
  margin: 0 !important;
}

.hairtec-hslist-panel {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 320px;
  max-width: calc(100% - 32px);
  max-height: calc(100% - 32px);
  background: var(--ht-popup-bg, #ffffff);
  border-radius: var(--ht-popup-radius, 16px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  z-index: 230;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  font-family: inherit;
}

.hairtec-hslist-panel.hairtec-hslist-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.hairtec-hslist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--ht-popup-bg, #ffffff);
}

.hairtec-hslist-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ht-popup-title, #264653);
  letter-spacing: 0.01em;
}

.hairtec-panorama-wrapper .hairtec-hslist-close {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
  border-radius: 50% !important;
  border: none !important;
  background: rgba(38, 70, 83, 0.08) !important;
  color: var(--ht-popup-title, #264653) !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
  transition: background 0.2s ease, color 0.2s ease;
}

.hairtec-panorama-wrapper .hairtec-hslist-close:hover {
  background: var(--ht-popup-title, #264653) !important;
  color: #ffffff !important;
}

.hairtec-panorama-wrapper .hairtec-hslist-close i {
  color: inherit !important;
  line-height: 1 !important;
  font-size: 13px !important;
  margin: 0 !important;
}

.hairtec-hslist-items {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.hairtec-hslist-items::-webkit-scrollbar {
  width: 6px;
}
.hairtec-hslist-items::-webkit-scrollbar-thumb {
  background: rgba(38, 70, 83, 0.25);
  border-radius: 3px;
}

.hairtec-hslist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  cursor: pointer;
  transition: background 0.15s ease;
  outline: none;
}

.hairtec-hslist-item:hover,
.hairtec-hslist-item:focus {
  background: rgba(42, 157, 143, 0.08);
}

.hairtec-hslist-item:focus .hairtec-hslist-num,
.hairtec-hslist-item:hover .hairtec-hslist-num {
  background: #5C5C5C;
  color: #ffffff;
}

.hairtec-hslist-item:hover .hairtec-hslist-arrow {
  color: #223558;
  transform: translateX(2px);
}

.hairtec-hslist-num {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #223558;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}

.hairtec-hslist-text {
  flex: 1;
  min-width: 0;
}

.hairtec-hslist-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ht-popup-title, #264653);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hairtec-hslist-item-desc {
  font-size: 12px;
  color: var(--ht-popup-text, #555555);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hairtec-hslist-arrow {
  flex: 0 0 auto;
  font-size: 12px;
  color: rgba(38, 70, 83, 0.35);
  transition: color 0.2s ease, transform 0.2s ease;
}

.hairtec-hslist-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--ht-popup-text, #555555);
  font-size: 13px;
}

@media (max-width: 600px) {
  .hairtec-panorama-wrapper .hairtec-hslist-btn {
    top: 10px !important;
    right: 10px !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }
  .hairtec-panorama-wrapper .hairtec-hslist-btn i {
    font-size: 14px !important;
  }
  .hairtec-hslist-panel {
    top: 10px;
    right: 10px;
    left: 10px;
    width: auto;
    max-width: none;
    max-height: calc(100% - 20px);
  }
}

/* ══════════════════════════════════════
   TV / STREAMING SPECIAL HOTSPOT
   ══════════════════════════════════════ */
.hairtec-info-card.hairtec-info-card-tv {
  background: #0b0f1a !important;
  color: #fff !important;
  overflow: hidden;
}

.hairtec-info-card.hairtec-info-card-tv .hairtec-info-close {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}
.hairtec-info-card.hairtec-info-card-tv .hairtec-info-close:hover {
  background: rgba(255, 255, 255, 0.22) !important;
}

.hairtec-info-tv {
  display: flex;
  flex-direction: column;
  font-family: inherit;
}

.hairtec-tv-screen {
  position: relative;
  background:
    radial-gradient(ellipse at top left, rgba(229, 9, 20, 0.25), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(0, 168, 225, 0.22), transparent 55%),
    linear-gradient(135deg, #1a1f33 0%, #0b0f1a 100%);
  padding: 28px 24px 24px;
  overflow: hidden;
}

.hairtec-tv-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
  opacity: 0.5;
}

.hairtec-tv-screen-inner {
  position: relative;
  z-index: 1;
}

.hairtec-tv-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ff5b6e;
  margin-bottom: 6px;
}

.hairtec-tv-headline {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.hairtec-tv-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 4px;
}

.hairtec-tv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 16px;
  background: #0b0f1a;
}

.hairtec-tv-grid .hairtec-tv-tile:nth-child(5) {
  grid-column: 1 / -1;
}

.hairtec-tv-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  border-radius: 12px;
  text-decoration: none !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  cursor: default;
  user-select: none;
  font-family: inherit;
  outline: none;
}

.hairtec-tv-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55);
}

.hairtec-tv-tile:active {
  transform: translateY(0);
}

.hairtec-tv-tile .hairtec-tv-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-size: 18px;
  line-height: 1;
  max-width: 92%;
  overflow: hidden;
  text-align: center;
}

/* Netflix — red wordmark on black (pure text — no SVG text, no <img>) */
.hairtec-tv-netflix {
  background: #000;
}
.hairtec-tv-netflix .hairtec-tv-logo {
  color: #E50914;
  font-family: inherit;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.04em;
  text-transform: none;
}

/* YouTube — red play button tile + "YouTube" wordmark on white */
.hairtec-tv-youtube {
  background: #fff;
}
.hairtec-tv-youtube .hairtec-tv-logo {
  color: #282828;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  gap: 6px;
}
.hairtec-tv-youtube .hairtec-tv-yt-play {
  display: inline-block;
  width: 28px;
  height: 20px;
  background: #FF0000;
  border-radius: 5px;
  position: relative;
  flex-shrink: 0;
}
.hairtec-tv-youtube .hairtec-tv-yt-play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid #fff;
}
.hairtec-tv-youtube .hairtec-tv-yt-text {
  display: inline-block;
}

/* Amazon Prime Video — "prime video" with cyan swoosh underline */
.hairtec-tv-prime {
  background: linear-gradient(135deg, #1a98ff 0%, #0b6cc5 100%);
}
.hairtec-tv-prime .hairtec-tv-prime-text {
  color: #fff;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  font-family: inherit;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.hairtec-tv-prime .hairtec-tv-prime-text span {
  font-weight: 400;
  opacity: 0.95;
}
.hairtec-tv-prime .hairtec-tv-prime-smile {
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 78%;
  height: 10px;
  border-radius: 0 0 80% 80% / 0 0 100% 100%;
  border-bottom: 2px solid #00d4ff;
  border-right: 2px solid transparent;
  border-left: 2px solid transparent;
  pointer-events: none;
}

/* Disney+ — italic wordmark on dark navy */
.hairtec-tv-disney {
  background: linear-gradient(135deg, #0a1a4f 0%, #061b6e 100%);
}
.hairtec-tv-disney .hairtec-tv-logo {
  font-family: inherit;
  font-style: italic;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
}
.hairtec-tv-disney .hairtec-tv-plus {
  font-style: normal;
  font-weight: 300;
  font-size: 18px;
  margin-left: 2px;
  line-height: 1;
  position: relative;
  top: -4px;
}

/* Max — bold wordmark with gradient A */
.hairtec-tv-hbo {
  background: linear-gradient(135deg, #000000 0%, #1a0e2e 100%);
}
.hairtec-tv-hbo .hairtec-tv-logo {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.05em;
  font-family: inherit;
  color: #fff;
}
.hairtec-tv-hbo .hairtec-tv-hbo-x {
  background: linear-gradient(135deg, #b14fff, #6a3df0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hairtec-tv-footnote {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 16px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  background: #0b0f1a;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.hairtec-tv-footnote i {
  color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 600px) {
  .hairtec-tv-screen {
    padding: 22px 18px 18px;
  }
  .hairtec-tv-headline {
    font-size: 19px;
  }
  .hairtec-tv-grid {
    padding: 12px;
    gap: 8px;
  }
  .hairtec-tv-tile {
    height: 56px;
  }
  .hairtec-tv-netflix .hairtec-tv-logo {
    font-size: 18px;
  }
  .hairtec-tv-youtube .hairtec-tv-logo {
    font-size: 14px;
    gap: 5px;
  }
  .hairtec-tv-youtube .hairtec-tv-yt-play {
    width: 22px;
    height: 16px;
    border-radius: 4px;
  }
  .hairtec-tv-youtube .hairtec-tv-yt-play::after {
    border-top-width: 4px;
    border-bottom-width: 4px;
    border-left-width: 6px;
  }
  .hairtec-tv-disney .hairtec-tv-logo,
  .hairtec-tv-hbo .hairtec-tv-logo {
    font-size: 20px;
  }
  .hairtec-tv-prime .hairtec-tv-logo {
    font-size: 18px;
  }
}

/* ══════════════════════════════════════
   NAVIGATION HOTSPOTS (Scene linking)
   ══════════════════════════════════════ */
.hairtec-nav-hotspot {
  cursor: pointer;
}

.hairtec-nav-dot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.hairtec-nav-inner {
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.6);
  font-size: 12px;
  transition: background 0.2s ease, transform 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  z-index: 2;
}

.hairtec-nav-hotspot:hover .hairtec-nav-inner {
  background: rgba(255, 255, 255, 0.95);
  transform: scale(1.15);
  color: rgba(0, 0, 0, 0.8);
}

.hairtec-nav-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: htNavRing 2.5s ease-out infinite;
  pointer-events: none;
  will-change: transform, opacity;
}

@keyframes htNavRing {
  0%   { transform: translate(-50%, -50%) scale(0.8); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

.hairtec-nav-label {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.hairtec-nav-hotspot:hover .hairtec-nav-label {
  opacity: 1;
}

/* ══════════════════════════════════════
   SPLASH SCREEN
   ══════════════════════════════════════ */
.hairtec-splash {
  position: absolute;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ht-splash-bg, #1a1a2e);
  color: var(--ht-splash-color, #ffffff);
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.hairtec-splash-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.hairtec-splash-content {
  text-align: center;
  padding: 40px 24px;
}

.hairtec-splash-logo img {
  max-width: 120px;
  max-height: 80px;
  margin-bottom: 20px;
  object-fit: contain;
}

.hairtec-splash-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}

.hairtec-splash-subtitle {
  font-size: 14px;
  opacity: 0.7;
  margin: 0 0 24px;
}

.hairtec-splash-progress {
  width: 200px;
  height: 3px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  margin: 0 auto 24px;
  overflow: hidden;
}

.hairtec-splash-bar {
  width: 0;
  height: 100%;
  background: #fff;
  border-radius: 2px;
  transition: width 1s ease;
}

.hairtec-splash-start {
  display: inline-block;
  padding: 12px 32px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 30px;
  background: transparent;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  opacity: 0.3;
  pointer-events: none;
  transition: opacity 0.3s ease, background 0.2s ease, border-color 0.2s ease;
}

.hairtec-splash-start.hairtec-splash-ready {
  opacity: 1;
  pointer-events: auto;
}

.hairtec-splash-start.hairtec-splash-ready:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.6);
}

/* ══════════════════════════════════════
   ABOUT PANEL (Top-Left)
   ══════════════════════════════════════ */
.hairtec-about {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 80;
}

.hairtec-about-toggle {
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.hairtec-about-toggle:hover {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
}

/* Hide toggle when panel is expanded */
.hairtec-about-expanded .hairtec-about-toggle {
  display: none !important;
}

/* Hide panel when collapsed */
.hairtec-about:not(.hairtec-about-expanded) .hairtec-about-panel {
  display: none;
}

.hairtec-about-panel {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px;
  padding: 16px 20px;
  min-width: 220px;
  max-width: 320px;
  color: #fff;
  position: relative;
}

.hairtec-about-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px;
  padding-right: 28px;
}

.hairtec-about-desc {
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 8px;
  opacity: 0.8;
}

.hairtec-about-location {
  font-size: 12px;
  opacity: 0.6;
  margin: 0;
}

.hairtec-about-location i {
  margin-right: 2px;
}

.hairtec-about-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.hairtec-about-close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* ── TABLET ── */
@media (min-width: 601px) and (max-width: 900px) {
  .hairtec-panorama-wrapper {
    --ht-size: 36px;
    --ht-icon-size: 15px;
    --ht-border-w: 2px;
  }

  /* Per-device stem height: tablet override, fallback to desktop-local then global */
  .hairtec-dot-stem {
    height: calc(var(--ht-stem-h-local-tablet, var(--ht-stem-h-local, var(--ht-stem-h, 0px))) * var(--ht-zoom-scale, 1)) !important;
  }
}

/* ── MOBILE ── */
@media (max-width: 600px) {
  /* Responsive hotspot sizing — smaller dots so they sit cleanly on small targets */
  .hairtec-panorama-wrapper {
    --ht-size: 30px;
    --ht-icon-size: 13px;
    --ht-border-w: 2px;
  }

  /* Shorter container so aspect ratio matches what was used when placing hotspots */
  .hairtec-panorama-container {
    height: 320px;
  }

  /* Per-device stem height: mobile override, fallback to desktop-local then global */
  .hairtec-dot-stem {
    height: calc(var(--ht-stem-h-local-mobile, var(--ht-stem-h-local, var(--ht-stem-h, 0px))) * var(--ht-zoom-scale, 1)) !important;
    transform: translateX(-50%);
  }

  /* Floating card mobile — but NOT for anchored mode (positioned by JS) */
  [data-info-mode="floating"] .hairtec-info-overlay,
  [data-info-mode="bottom-card"] .hairtec-info-overlay {
    bottom: 12px;
    left: 10px;
    width: calc(100% - 20px);
    max-width: calc(100% - 20px);
  }

  /* Mobile: make the close X button big, contrasted and always on top
     so it never disappears behind videos / dark TV content. */
  .hairtec-info-topbar {
    top: 8px !important;
    right: 8px !important;
    padding: 0 !important;
    z-index: 60 !important;
  }
  .hairtec-info-card .hairtec-info-close,
  .hairtec-info-card.hairtec-info-card-tv .hairtec-info-close,
  [data-info-mode] .hairtec-info-close {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 50% !important;
    background: #223558 !important;
    background-color: #223558 !important;
    color: #ffffff !important;
    font-size: 16px !important;
    box-shadow: 0 0 0 2px #ffffff, 0 4px 12px rgba(0, 0, 0, 0.5) !important;
    z-index: 60 !important;
    position: relative;
  }
  .hairtec-info-card .hairtec-info-close i,
  .hairtec-info-card.hairtec-info-card-tv .hairtec-info-close i,
  [data-info-mode] .hairtec-info-close i {
    color: #ffffff !important;
    font-size: 16px !important;
  }

  /* Anchored mode mobile: ignore JS hotspot-anchored coordinates and
     center the card as a fixed bottom sheet so it never collides with
     the hotspot list / toolbar buttons in the corners. */
  [data-info-mode="anchored"] .hairtec-info-overlay {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 16px !important;
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    transform: translateX(-50%) translateY(8px) scale(0.98) !important;
    z-index: 200 !important;
    pointer-events: none;
  }
  [data-info-mode="anchored"] .hairtec-info-overlay.hairtec-visible {
    transform: translateX(-50%) translateY(0) scale(1) !important;
    pointer-events: auto;
  }
  [data-info-mode="anchored"] .hairtec-info-card {
    max-height: calc(100vh - 120px) !important;
  }

  .hairtec-info-video {
    max-height: 180px;
  }

  .hairtec-info-image {
    height: 140px;
  }

  .hairtec-info-title {
    font-size: 15px;
  }

  .hairtec-info-description {
    font-size: 13px;
  }

  /* Side panel becomes bottom on mobile */
  [data-info-mode="side-panel"] .hairtec-info-overlay {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    max-height: 55%;
    transform: translateY(100%);
  }

  [data-info-mode="side-panel"] .hairtec-info-overlay.hairtec-visible {
    transform: translateY(0);
  }

  [data-info-mode="side-panel"] .hairtec-info-card {
    border-radius: 12px 12px 0 0;
    height: auto;
  }

  .hairtec-dot-inline-label {
    display: none;
  }

  /* About panel mobile */
  .hairtec-about-panel {
    min-width: 180px;
    max-width: 260px;
  }

  .hairtec-about-title {
    font-size: 14px;
  }

  /* Splash mobile */
  .hairtec-splash-title {
    font-size: 20px;
  }

  .hairtec-splash-progress {
    width: 160px;
  }

  /* Nav hotspot mobile */
  .hairtec-nav-inner {
    width: 32px;
    height: 32px;
  }
}

/* =============================================
   HAIRTEC BRAND BUTTONS — global override
   bg: #223558  |  hover: #5C5C5C  |  text/icon: #fff  |  font: 12px
   ============================================= */
.hairtec-panorama-wrapper .hairtec-info-close,
.hairtec-panorama-wrapper .hairtec-info-viewmore,
.hairtec-panorama-wrapper .hairtec-hslist-btn,
.hairtec-panorama-wrapper .hairtec-hslist-close,
.hairtec-panorama-wrapper .hairtec-about-close,
.hairtec-panorama-wrapper .hairtec-tb-btn,
.hairtec-panorama-wrapper .pnlm-load-button,
.hairtec-gt-hud .hairtec-gt-btn,
.hairtec-gt-intro .hairtec-gt-intro-btn,
[data-info-mode] .hairtec-info-close,
[data-info-mode] .hairtec-info-viewmore,
.hairtec-info-card.hairtec-info-card-tv .hairtec-info-close {
  background: #223558 !important;
  background-color: #223558 !important;
  color: #ffffff !important;
  border-color: #223558 !important;
  font-size: 12px !important;
  text-transform: none !important;
  box-shadow: none !important;
}

.hairtec-panorama-wrapper .hairtec-info-close i,
.hairtec-panorama-wrapper .hairtec-info-viewmore i,
.hairtec-panorama-wrapper .hairtec-hslist-btn i,
.hairtec-panorama-wrapper .hairtec-hslist-close i,
.hairtec-panorama-wrapper .hairtec-about-close i,
.hairtec-panorama-wrapper .hairtec-tb-btn i,
.hairtec-gt-hud .hairtec-gt-btn i,
.hairtec-gt-intro .hairtec-gt-intro-btn i,
.hairtec-gt-intro .hairtec-gt-intro-btn svg,
.hairtec-info-card.hairtec-info-card-tv .hairtec-info-close i {
  color: #ffffff !important;
  fill: #ffffff !important;
}

.hairtec-panorama-wrapper .hairtec-info-close:hover,
.hairtec-panorama-wrapper .hairtec-info-viewmore:hover,
.hairtec-panorama-wrapper .hairtec-hslist-btn:hover,
.hairtec-panorama-wrapper .hairtec-hslist-close:hover,
.hairtec-panorama-wrapper .hairtec-about-close:hover,
.hairtec-panorama-wrapper .hairtec-tb-btn:hover,
.hairtec-panorama-wrapper .pnlm-load-button:hover,
.hairtec-gt-hud .hairtec-gt-btn:hover,
.hairtec-gt-intro .hairtec-gt-intro-btn:hover,
[data-info-mode] .hairtec-info-close:hover,
[data-info-mode] .hairtec-info-viewmore:hover,
.hairtec-info-card.hairtec-info-card-tv .hairtec-info-close:hover {
  background: #5C5C5C !important;
  background-color: #5C5C5C !important;
  color: #ffffff !important;
  border-color: #5C5C5C !important;
}

.hairtec-panorama-wrapper .hairtec-info-close:hover i,
.hairtec-panorama-wrapper .hairtec-info-viewmore:hover i,
.hairtec-panorama-wrapper .hairtec-hslist-btn:hover i,
.hairtec-panorama-wrapper .hairtec-hslist-close:hover i,
.hairtec-panorama-wrapper .hairtec-about-close:hover i,
.hairtec-panorama-wrapper .hairtec-tb-btn:hover i,
.hairtec-gt-hud .hairtec-gt-btn:hover i,
.hairtec-gt-intro .hairtec-gt-intro-btn:hover i,
.hairtec-gt-intro .hairtec-gt-intro-btn:hover svg,
.hairtec-info-card.hairtec-info-card-tv .hairtec-info-close:hover i {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────────────
   Close (X) button — now a sibling of the card inside .hairtec-info-frame
   (NOT a child of the card). Positioned absolutely at the top-right
   of the frame which exactly matches the top-right of the card. This
   structurally avoids the iOS Safari <video> stacking bug because the
   close button is no longer in the same stacking context as the video.
   ───────────────────────────────────────────────────────────────── */
.hairtec-panorama-wrapper .hairtec-info-frame > .hairtec-info-close,
.hairtec-panorama-wrapper [data-info-mode] .hairtec-info-frame > .hairtec-info-close {
  position: absolute !important;
  top: -10px !important;
  right: -10px !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 50% !important;
  border: none !important;
  background: #223558 !important;
  background-color: #223558 !important;
  color: #ffffff !important;
  font-size: 16px !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  /* White ring + drop shadow so the button is visible on any
     background (dark TV grid, videos, blurred panorama, etc.) */
  box-shadow: 0 0 0 2px #ffffff, 0 6px 18px rgba(0, 0, 0, 0.55) !important;
  /* Force its own stacking layer ABOVE the card and its <video> child.
     iOS Safari composites translate3d-promoted layers above native
     <video>, beating the standard z-index limitation. */
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  z-index: 9999;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.hairtec-panorama-wrapper .hairtec-info-frame > .hairtec-info-close i {
  font-size: 16px !important;
  line-height: 1 !important;
  color: #ffffff !important;
  margin: 0 !important;
}
.hairtec-panorama-wrapper .hairtec-info-frame > .hairtec-info-close:hover {
  background: #5C5C5C !important;
  background-color: #5C5C5C !important;
}

@media (max-width: 600px) {
  .hairtec-panorama-wrapper .hairtec-info-frame > .hairtec-info-close,
  .hairtec-panorama-wrapper [data-info-mode] .hairtec-info-frame > .hairtec-info-close {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    top: -8px !important;
    right: -8px !important;
    font-size: 18px !important;
  }
  .hairtec-panorama-wrapper .hairtec-info-frame > .hairtec-info-close i {
    font-size: 18px !important;
  }
}

/* "Meer lezen" text-button: pill shape on brand bg */
.hairtec-panorama-wrapper .hairtec-info-viewmore,
[data-info-mode] .hairtec-info-viewmore {
  display: inline-block !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  margin-top: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* =============================================
   PANORAMA LOADING OVERLAY
   Shown after the user starts the tour, while the (large) panorama
   image is being downloaded. Same visual language as the intro screen:
   blurred panorama background + white card.
   ============================================= */
.hairtec-pano-loading {
  position: absolute;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 1;
  transition: opacity 0.38s ease;
  font-family: inherit;
  overflow: hidden;
}
.hairtec-pano-loading.hairtec-pano-loading-hide {
  opacity: 0;
  pointer-events: none;
}
/* Background layer (mirrors .hairtec-gt-intro-bg-layer) */
.hairtec-pano-loading-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #f3f5f7;
}
.hairtec-pano-loading.hairtec-pano-loading-has-bg .hairtec-pano-loading-bg {
  background-image: var(--ht-pano-loading-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.08);
  filter: blur(var(--ht-pano-loading-bg-blur, 14px));
  -webkit-filter: blur(var(--ht-pano-loading-bg-blur, 14px));
}
.hairtec-pano-loading.hairtec-pano-loading-has-bg .hairtec-pano-loading-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--ht-pano-loading-bg-dim, 0.15));
  pointer-events: none;
}
/* White card (mirrors .hairtec-gt-intro-card) */
.hairtec-pano-loading-card {
  position: relative;
  z-index: 1;
  max-width: 480px;
  width: 100%;
  background: var(--ht-popup-bg, #ffffff);
  border: 1px solid rgba(38, 70, 83, 0.08);
  border-radius: var(--ht-popup-radius, 16px);
  padding: 36px 30px 28px;
  color: var(--ht-popup-title, #264653);
  text-align: center;
  box-shadow: 0 20px 50px rgba(38, 70, 83, 0.25);
}
.hairtec-pano-loading-spinner {
  width: 46px;
  height: 46px;
  margin: 0 auto 18px;
  border-radius: 50%;
  border: 3px solid rgba(38, 70, 83, 0.15);
  border-top-color: var(--ht-popup-title, #264653);
  animation: htPanoLoadingSpin 0.9s linear infinite;
}
@keyframes htPanoLoadingSpin { to { transform: rotate(360deg); } }
.hairtec-pano-loading-label {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 16px;
  color: var(--ht-popup-title, #264653);
}
.hairtec-pano-loading-progress {
  width: 100%;
  height: 8px;
  background: rgba(38, 70, 83, 0.12);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}
.hairtec-pano-loading-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #223558, #2a9d8f);
  border-radius: 999px;
  transition: width 0.28s ease;
}
.hairtec-pano-loading-pct {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-bottom: 22px;
  color: var(--ht-popup-title, #264653);
  opacity: 0.85;
}
.hairtec-pano-loading-fact-wrap {
  border-top: 1px solid rgba(38, 70, 83, 0.12);
  padding-top: 18px;
  min-height: 92px;
}
.hairtec-pano-loading-fact-eyebrow {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(38, 70, 83, 0.55);
  margin-bottom: 8px;
  font-weight: 700;
}
.hairtec-pano-loading-fact {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ht-popup-text, #555555);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.38s ease, transform 0.38s ease;
}
.hairtec-pano-loading-fact.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 600px) {
  .hairtec-pano-loading-card {
    padding: 28px 20px 22px;
    border-radius: 14px;
  }
  .hairtec-pano-loading-spinner {
    width: 40px;
    height: 40px;
    margin-bottom: 14px;
  }
  .hairtec-pano-loading-label {
    font-size: 14px;
  }
  .hairtec-pano-loading-fact-wrap {
    min-height: 110px;
  }
  .hairtec-pano-loading-fact {
    font-size: 13px;
  }
}