/* Interactive Goal Matcher high-contrast tab buttons */
    #matcher .matcher-tabs .matcher-tab-btn,
    .matcher-tabs .matcher-tab-btn,
    .matcher-tabs .matcher-tab {
      background: #ffffff !important;
      border: 1.5px solid #8c5f1c !important;
      color: #081d1c !important;
      padding: 0.75rem 1.45rem !important;
      border-radius: 999px !important;
      font-size: 0.88rem !important;
      font-weight: 600 !important;
      cursor: pointer !important;
      box-shadow: 0 3px 10px rgba(11, 34, 33, 0.08) !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      opacity: 1 !important;
      visibility: visible !important;
      transition: all 0.25s ease !important;
    }
    #matcher .matcher-tabs .matcher-tab-btn:hover,
    .matcher-tabs .matcher-tab-btn:hover,
    .matcher-tabs .matcher-tab:hover {
      background: #fbf5ea !important;
      border-color: #8c5f1c !important;
      color: #081d1c !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 6px 16px rgba(140, 95, 28, 0.2) !important;
    }
    #matcher .matcher-tabs .matcher-tab-btn.is-active,
    .matcher-tabs .matcher-tab-btn.is-active,
    .matcher-tabs .matcher-tab.is-active {
      background: linear-gradient(135deg, #e4af60 0%, #c89345 100%) !important;
      border-color: #c89345 !important;
      color: #081d1c !important;
      font-weight: 700 !important;
      box-shadow: 0 6px 20px -2px rgba(200, 147, 69, 0.5) !important;
      transform: translateY(-2px) !important;
    }
    .matcher-panel {
      background: #ffffff !important;
      border: 1.5px solid rgba(140, 95, 28, 0.35) !important;
      box-shadow: 0 16px 40px -12px rgba(11, 34, 33, 0.1) !important;
    }
    .matcher-content h3 {
      color: #081d1c !important;
    }
    .matcher-content .matcher-sub {
      color: #8c5f1c !important;
      font-weight: 700 !important;
      letter-spacing: 0.12em !important;
      text-transform: uppercase !important;
    }
    .matcher-content p {
      color: #33413f !important;
    }
    .matcher-meta-lbl {
      color: #52605e !important;
      font-weight: 600 !important;
    }
    .matcher-meta-val {
      color: #8c5f1c !important;
      font-weight: 700 !important;
    }

/* Editorial Visual Showcase - Fitted Styling for Hair Colour & Highlights */
#hair-colour .hair-showcase-media {
  aspect-ratio: 4 / 4.8;
  max-height: 520px;
}

#hair-colour .hair-showcase-media img {
  object-fit: cover;
  object-position: center 10%;
}

@media (max-width: 899px) {
  #hair-colour .hair-showcase-media {
    max-width: 480px;
    margin: 0 auto;
    aspect-ratio: 4 / 4.6;
  }
}

/* Editorial Visual Showcase - Fitted Styling for Texture & Keratin */
#hair-texture .hair-showcase-media {
  aspect-ratio: 3 / 4;
  max-height: 520px;
}

#hair-texture .hair-showcase-media img {
  object-fit: cover;
  object-position: center 8%;
}

@media (max-width: 899px) {
  #hair-texture .hair-showcase-media {
    max-width: 440px;
    margin: 0 auto;
    aspect-ratio: 3 / 4;
  }
}

/* Category Title Styling */
.hair-category-title {
  font-size: 2.2rem;
  margin: 0;
  font-weight: 500;
}

/* Video Slider Section: remove border-radius while preserving arch shape for hero image slider */
.video-slider-container .arch-item,
.arch-item:has(video),
.arch-item--video {
  border-radius: 0 !important;
}

.video-slider-container .arch-item video,
.video-slider-container .arch-item img,
.arch-item video {
  border-radius: 0 !important;
}