/**
 * Topee header - bar, pill and drawer styles.
 *
 * Split out of the theme template by topee-header-migrate.php. A real .css
 * file: a typo here is now a broken rule, not a PHP fatal.
 */

/* NO ITALIC ANYWHERE */
*, *::before, *::after,
em, i, cite, blockquote, q, address, dfn, var,
.italic,
.tp-quote,
.tp-voice-q,
.tp-hero-h em,
.tp-h2 em,
.tp-cost-h em,
.tsq-step .tsq-h em {
  font-style: normal !important;
}

/* Smooth scroll & offset for anchor jumps */
html {
  scroll-behavior: smooth !important;
  scroll-padding-top: 76px !important;
}

#lifestyle, #maintenance, #process, #bases, #hairline, #choosing-a-base, #find-your-system, #tp-catalogue, .tp-stepc {
  scroll-margin-top: 76px !important;
}

/* ==========================================================================
   SKIPER38 NAVBAR CSS - APPLE LUXURY AESTHETIC (56px HEIGHT, 46px LOGO)
   ========================================================================== */
html body header#site-header.site-header.skiper38-header,
header#site-header.skiper38-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 60px !important;
  min-height: 60px !important;
  background: rgba(14, 16, 18, 0.94) !important;
  background-color: rgba(14, 16, 18, 0.94) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45) !important;
  z-index: 99999 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  transition: background 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-bottom 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              backdrop-filter 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              -webkit-backdrop-filter 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
}

/* ONLY on the HOME PAGE when NOT scrolled: transparent */
html body.home header#site-header.site-header.skiper38-header:not(.scrolled):not(.drawer-open),
html body.page-id-38 header#site-header.site-header.skiper38-header:not(.scrolled):not(.drawer-open),
html body header#site-header.site-header.skiper38-header.is-home-header:not(.scrolled):not(.drawer-open),
header#site-header.skiper38-header.is-home-header:not(.scrolled):not(.drawer-open) {
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0) 100%) !important;
  background-color: rgba(0,0,0,0.001) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
}

body.admin-bar header#site-header.skiper38-header {
  top: 32px !important;
}
@media screen and (max-width: 782px) {
  body.admin-bar header#site-header.skiper38-header {
    top: 46px !important;
  }
}

html body header#site-header.site-header.skiper38-header.scrolled,
html body header#site-header.site-header.skiper38-header.drawer-open,
body header#site-header.site-header.skiper38-header.scrolled,
body header#site-header.site-header.skiper38-header.drawer-open,
header#site-header.skiper38-header.scrolled,
header#site-header.skiper38-header.drawer-open {
  background: rgba(14, 16, 18, 0.94) !important;
  background-color: rgba(14, 16, 18, 0.94) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45) !important;
}

.skiper38-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 clamp(16px, 3.5vw, 56px) !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   DESKTOP: the bar floats as a centred pill

   The header element stays a full-width fixed shell - it still has to span
   the viewport to centre its contents and to sit above everything else - but
   all of its visible chrome (background, blur, border, shadow) moves onto
   .skiper38-container, which is capped, centred and fully rounded. The
   behaviour is unchanged: the same .scrolled / .drawer-open / .is-home-header
   states that used to paint the bar now paint the pill, so it is still
   transparent over the hero at the top of the home page and still turns to
   dark glass on scroll.

   The three items sit in one row with a single shared gap and are centred as
   a group, so the space between logo and menu is the same as between menu and
   the call button - which edge-to-edge space-between could never give, since
   the logo and the button are nowhere near the same width.

   Held to >=992px on purpose. Below that the hamburger drawer is pinned to a
   60px bar (inset: 60px 0 0), so the mobile header is left exactly as it was.
   ========================================================================== */
@media (min-width: 992px) {
  /* strip the chrome off the bar itself. Five repeated classes because the
     home-page transparent rule and the hero widget's own header rule are both
     highly specific and the latter ships inline in the body, so it would
     otherwise win on load order. */
  html body header#site-header.site-header.skiper38-header.skiper38-header.skiper38-header.skiper38-header {
    height: auto !important;
    min-height: 0 !important;
    padding: 14px 0 0 !important;
    background: none !important;
    background-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    display: block !important;
  }

  /* the pill */
  html body header#site-header.skiper38-header .skiper38-container {
    width: -moz-max-content !important;
    width: max-content !important;
    max-width: min(1120px, calc(100% - 40px)) !important;
    margin-inline: auto !important;
    height: 60px !important;
    padding: 0 14px 0 26px !important;
    gap: clamp(24px, 3vw, 44px) !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: rgba(14, 16, 18, 0.94) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45) !important;
    transition: background 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                backdrop-filter 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                -webkit-backdrop-filter 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  /* transparent at the top of the home page, exactly as the bar used to be */
  html body header#site-header.skiper38-header.is-home-header:not(.scrolled):not(.drawer-open) .skiper38-container {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  /* the nav no longer needs to be pushed apart - the gap does that now */
  html body header#site-header.skiper38-header .skiper38-nav {
    margin: 0 !important;
  }
}

/* --- the same pill on phones and tablets ---
   Same floating surface, but the row here is hamburger / logo / call, so the
   ends stay anchored with space-between rather than being centred as a group.
   The drawer used to hang off a 60px slab that reached the top of the screen;
   it now opens below the floating pill and is rounded to sit with it. Both
   numbers come from the two variables so the bar and the drawer can never
   drift apart again. */
:root {
  --tp-bar-gap: 10px;
  --tp-bar-h: 56px;
}
@media (max-width: 991px) {
  html body header#site-header.site-header.skiper38-header.skiper38-header.skiper38-header.skiper38-header {
    height: auto !important;
    min-height: 0 !important;
    padding: var(--tp-bar-gap) 0 0 !important;
    background: none !important;
    background-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    display: block !important;
  }
  html body header#site-header.skiper38-header .skiper38-container {
    width: auto !important;
    max-width: calc(100% - 24px) !important;
    margin-inline: auto !important;
    height: var(--tp-bar-h) !important;
    padding: 0 8px 0 16px !important;
    gap: 10px !important;
    justify-content: space-between !important;
    border-radius: 999px !important;
    background: rgba(14, 16, 18, 0.94) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45) !important;
  }
  html body header#site-header.skiper38-header.is-home-header:not(.scrolled):not(.drawer-open) .skiper38-container {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
  html body .skiper38-mobile-drawer {
    top: calc(var(--tp-bar-gap) + var(--tp-bar-h) + var(--tp-bar-gap)) !important;
    height: calc(100vh - (var(--tp-bar-gap) + var(--tp-bar-h) + 8px)) !important;
    height: calc(100dvh - (var(--tp-bar-gap) + var(--tp-bar-h) + 8px)) !important;
    border-top: 0 !important;
    border-radius: 18px 18px 0 0 !important;
  }
}

/* Brand Logo (Enlarged to 44px-46px for Prominent, Crisp Branding) */
.skiper38-brand {
  display: flex !important;
  align-items: center !important;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  z-index: 10 !important;
}
.skiper38-logo-img {
  height: 48px !important;
  max-height: 48px !important;
  width: auto !important;
  display: block !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}
@media (min-width: 768px) {
  .skiper38-logo-img {
    height: 52px !important;
    max-height: 52px !important;
  }
}
@media (min-width: 768px) {
  .skiper38-logo-img {
  height: 48px !important;
  max-height: 48px !important;
  width: auto !important;
  display: block !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}
@media (min-width: 768px) {
  .skiper38-logo-img {
    height: 52px !important;
    max-height: 52px !important;
  }
}
}
.skiper38-brand:hover .skiper38-logo-img {
  height: 48px !important;
  max-height: 48px !important;
  width: auto !important;
  display: block !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}
@media (min-width: 768px) {
  .skiper38-logo-img {
    height: 52px !important;
    max-height: 52px !important;
  }
}

/* Navigation Links (Desktop) */
.skiper38-nav {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  margin-left: clamp(20px, 3.2vw, 44px) !important;
  flex: 1 !important;
  justify-content: flex-start !important;
}
.skiper38-menu {
  display: flex !important;
  align-items: center !important;
  gap: clamp(4px, 1.4vw, 18px) !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 100% !important;
}
.skiper38-item {
  position: relative !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.skiper38-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 7px 12px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.92) !important;
  text-decoration: none !important;
  border-radius: 999px !important;
  transition: color 0.2s ease, background-color 0.2s ease !important;
  cursor: pointer !important;
}
.skiper38-link:hover,
.skiper38-link.is-active,
.skiper38-item:hover > .skiper38-link,
.skiper38-item.is-hovered > .skiper38-link {
  color: #FFFFFF !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}


.skiper38-chevron {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  color: rgba(255, 255, 255, 0.5) !important;
}
.skiper38-item:hover .skiper38-chevron,
.skiper38-item.is-hovered .skiper38-chevron {
  transform: rotate(180deg) !important;
  color: #FFFFFF !important;
}

/* Mega-Menu Dropdown Panel */
.skiper38-dropdown {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  transform: translateY(8px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 10000 !important;
}
/* Center How It Works & Studios dropdowns under their respective buttons */
.skiper38-item:not(:first-child) .skiper38-dropdown {
  left: 50% !important;
  transform: translateX(-50%) translateY(8px) !important;
}
/* Invisible hover bridge to prevent cursor gap drop */
.skiper38-dropdown::before {
  content: '' !important;
  position: absolute !important;
  top: -16px !important;
  left: 0 !important;
  right: 0 !important;
  height: 16px !important;
  display: block !important;
}
.skiper38-item:hover .skiper38-dropdown,
.skiper38-item.is-hovered .skiper38-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}
.skiper38-item:not(:first-child):hover .skiper38-dropdown,
.skiper38-item:not(:first-child).is-hovered .skiper38-dropdown {
  transform: translateX(-50%) translateY(0) !important;
}

.skiper38-dropdown-inner {
  width: min(580px, 92vw) !important;
  background: #14171A !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  padding: 16px !important;
  display: grid !important;
  grid-template-columns: 1.4fr 1fr !important;
  gap: 14px !important;
  backdrop-filter: blur(24px) !important;
  box-sizing: border-box !important;
}

.skiper38-dropdown-links {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.skiper38-sublink {
  display: block !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  transition: background-color 0.18s ease !important;
}
.skiper38-sublink:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}
.skiper38-sublink-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  letter-spacing: -0.01em !important;
}
.skiper38-arrow {
  opacity: 0 !important;
  transform: translateX(-4px) !important;
  transition: opacity 0.18s ease, transform 0.18s ease !important;
  color: rgba(255, 255, 255, 0.6) !important;
}
.skiper38-sublink:hover .skiper38-arrow {
  opacity: 1 !important;
  transform: translateX(0) !important;
  color: #FFFFFF !important;
}
.skiper38-sublink-desc {
  font-family: 'Poppins', sans-serif !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  margin: 3px 0 0 0 !important;
}

/* Dropdown Right Teaser Card */
.skiper38-dropdown-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 18px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
.skiper38-card-tag {
  font-family: 'Poppins', sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #C5A880 !important;
  margin-bottom: 6px !important;
}
.skiper38-card-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: #FFFFFF !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.25 !important;
}
.skiper38-card-text {
  font-family: 'Poppins', sans-serif !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin: 0 0 14px 0 !important;
}
.skiper38-card-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  transition: color 0.18s ease, transform 0.18s ease !important;
}
.skiper38-card-link:hover {
  color: #C5A880 !important;
  transform: translateX(3px) !important;
}

/* Right Actions (WhatsApp Button + Hamburger) */
.skiper38-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
  z-index: 10 !important;
}

/* Luxury Monochrome White WhatsApp Button

   The visible disc is deliberately smaller than the element that carries it.
   The bar is 60px tall, and the logo sitting next to it has roughly 16%
   transparent padding baked into the PNG itself - so the wordmark only ever
   reads as about 35px of actual ink inside its 52px box, i.e. ~12px of
   optical breathing room above and below. A hard-edged 44px disc in that same
   bar gets only 8px, which is why it read as cramped and sat visually heavier
   than the logo next to it.

   Painting the disc on ::before at 36px gives it the same ~12px of clearance
   the logo has, while the link element itself stays a full 44px so the touch
   target is still at the 44px minimum on phones. Shrinking the link outright
   would have fixed the look and broken the tap target. */
.skiper38-wa-btn {
  position: relative !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.skiper38-wa-btn::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 36px !important;
  height: 36px !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
  transition: background 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: none !important;
}
.skiper38-wa-btn svg {
  position: relative !important;
  z-index: 1 !important;
}
.skiper38-wa-btn:hover {
  transform: scale(1.05) !important;
}
.skiper38-wa-btn:hover::before {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* ==========================================================================
   MOBILE TAP & TOUCH FEEDBACK SYSTEM
   ========================================================================== */
.skiper38-hamburger,
.skiper38-drawer-title,
.skiper38-drawer-chevron,
.skiper38-drawer-sub a,
.skiper38-drawer-cta,
.skiper38-drawer-cta-wa {
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

/* Hamburger for Mobile with Tactile Feedback */
.skiper38-hamburger {
  display: none !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 5px !important;
  width: 44px !important;
  height: 44px !important;
  padding: 10px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.12s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.skiper38-hamburger:active,
.skiper38-hamburger.is-pressed {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  transform: scale(0.92) !important;
}
.skiper38-hamburger-line {
  display: block !important;
  width: 20px !important;
  height: 1.5px !important;
  background: #FFFFFF !important;
  border-radius: 2px !important;
  transition: transform 0.22s ease, opacity 0.22s ease !important;
}
.skiper38-hamburger.is-active .line-1 {
  transform: translateY(3.25px) rotate(45deg) !important;
}
.skiper38-hamburger.is-active .line-2 {
  transform: translateY(-3.25px) rotate(-45deg) !important;
}

/* Mobile Fullscreen Drawer */
.skiper38-mobile-drawer {
  display: none;
  position: fixed !important;
  top: 60px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: calc(100vh - 60px) !important;
  background: #0E1012 !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.25s ease !important;
  z-index: 99998 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.skiper38-mobile-drawer.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}
.skiper38-drawer-inner {
  padding: 8px 20px 32px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.skiper38-drawer-group {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 4px 0 !important;
}
.skiper38-drawer-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 4px 4px 4px 8px !important;
  margin: 0 -8px !important;
  border-radius: 12px !important;
  transition: background-color 0.15s ease !important;
}
.skiper38-drawer-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  letter-spacing: 0.01em !important;
  padding: 12px 10px !important;
  margin-left: -8px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: color 0.12s ease, background-color 0.12s ease, transform 0.12s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  position: relative !important;
}
.skiper38-drawer-title::before {
  content: '' !important;
  width: 3px !important;
  height: 0 !important;
  background: #C5A880 !important;
  border-radius: 2px !important;
  margin-right: 0 !important;
  transition: height 0.15s ease !important;
  flex-shrink: 0 !important;
}
.skiper38-drawer-title.is-active::before {
  height: 16px !important;
  margin-right: 6px !important;
}
.skiper38-drawer-title.is-active {
  color: #C5A880 !important;
}
.skiper38-drawer-title:active,
.skiper38-drawer-title.is-pressed {
  color: #C5A880 !important;
  background-color: rgba(197, 168, 128, 0.16) !important;
  transform: scale(0.97) translateX(3px) !important;
}
.skiper38-drawer-title.is-navigating {
  color: #C5A880 !important;
  background-color: rgba(197, 168, 128, 0.20) !important;
}
.skiper38-drawer-title.is-navigating::after {
  content: '' !important;
  display: inline-block !important;
  width: 12px !important;
  height: 12px !important;
  border: 2px solid #C5A880 !important;
  border-top-color: transparent !important;
  border-radius: 50% !important;
  animation: tp-nav-spin 0.6s linear infinite !important;
  margin-left: 6px !important;
}
@keyframes tp-nav-spin {
  to { transform: rotate(360deg); }
}

/* Enlarged 44x44px Round Chevron Button with Tactile Feedback */
.skiper38-drawer-chevron {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}
.skiper38-drawer-chevron:active,
.skiper38-drawer-chevron.is-pressed {
  background: rgba(197, 168, 128, 0.25) !important;
  border-color: rgba(197, 168, 128, 0.5) !important;
  color: #FFFFFF !important;
  transform: scale(0.90) !important;
}
.skiper38-drawer-chevron.is-expanded {
  transform: rotate(180deg) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
}
.skiper38-drawer-chevron.is-expanded:active,
.skiper38-drawer-chevron.is-expanded.is-pressed {
  transform: rotate(180deg) scale(0.90) !important;
  background: rgba(197, 168, 128, 0.25) !important;
}

/* Accordion Sublinks with Card Row Look & Instant Tap State */
.skiper38-drawer-sub {
  display: none;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 10px 0 4px 0 !important;
}
.skiper38-drawer-sub.is-visible {
  display: flex !important;
  animation: tp-drawer-slide 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
@keyframes tp-drawer-slide {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.skiper38-drawer-sub a {
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  font-weight: 450 !important;
  color: rgba(255, 255, 255, 0.82) !important;
  text-decoration: none !important;
  padding: 12px 14px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.12s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
.skiper38-drawer-sub a .tp-sub-arrow {
  opacity: 0.45 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease !important;
  flex-shrink: 0 !important;
}
.skiper38-drawer-sub a:hover,
.skiper38-drawer-sub a:focus {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
.skiper38-drawer-sub a:active,
.skiper38-drawer-sub a.is-pressed {
  background: rgba(197, 168, 128, 0.18) !important;
  border-color: rgba(197, 168, 128, 0.45) !important;
  color: #FFFFFF !important;
  transform: scale(0.98) translateX(4px) !important;
}
.skiper38-drawer-sub a:active .tp-sub-arrow,
.skiper38-drawer-sub a.is-pressed .tp-sub-arrow {
  opacity: 1 !important;
  color: #C5A880 !important;
  transform: translateX(3px) !important;
}
.skiper38-drawer-sub a.is-navigating {
  background: rgba(197, 168, 128, 0.22) !important;
  border-color: rgba(197, 168, 128, 0.5) !important;
  color: #FFFFFF !important;
}

/* ---- every drawer row on one left rail ----

   The three rows that carry a submenu (Hair Systems, How It Works, Studios)
   were being pulled 8px left of their group twice over - once by a negative
   margin on .skiper38-drawer-head and again by one on the title itself - so
   their text started at 22px. The three plain rows below them (Reviews,
   About, Contact) sit flush inside the same group and started at 34px. One
   list, two left edges, which is what reads as "some left-aligned, some
   centred".

   These rules drop both negative margins and give the parent rows the same
   card and the same 14px inset the plain rows already have, so all six share
   one edge. The little gold active-marker is also taken out of the text flow
   and pinned absolutely, so an active row's label no longer shifts 9px right
   of its neighbours. */
.skiper38-drawer-head {
  padding: 0 6px 0 14px !important;
  margin: 0 !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.skiper38-drawer-head:active {
  background: rgba(197, 168, 128, 0.10) !important;
}
.skiper38-drawer-title:not(.solo) {
  flex: 1 1 auto !important;
  padding: 13px 0 !important;
  margin-left: 0 !important;
  font-size: 15px !important;
  border-radius: 0 !important;
}
.skiper38-drawer-title:not(.solo):active,
.skiper38-drawer-title:not(.solo).is-pressed {
  background-color: transparent !important;
  transform: none !important;
}
.skiper38-drawer-title::before {
  position: absolute !important;
  top: 50% !important;
  left: 5px !important;
  transform: translateY(-50%) !important;
  margin-right: 0 !important;
}
.skiper38-drawer-title:not(.solo)::before {
  left: -9px !important;
}
.skiper38-drawer-title.is-active::before {
  height: 16px !important;
  margin-right: 0 !important;
}

/* Solo Nav Links */
.skiper38-drawer-title.solo {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 13px 14px !important;
  margin-left: 0 !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}
.skiper38-drawer-group:has(> .skiper38-drawer-title.solo) {
  border-bottom: none !important;
  padding: 3px 0 !important;
}
.skiper38-drawer-title.solo .tp-sub-arrow {
  opacity: 0.45 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease !important;
}
.skiper38-drawer-title.solo:active,
.skiper38-drawer-title.solo.is-pressed {
  background: rgba(197, 168, 128, 0.18) !important;
  border-color: rgba(197, 168, 128, 0.45) !important;
  color: #FFFFFF !important;
  transform: scale(0.98) translateX(4px) !important;
}
.skiper38-drawer-title.solo:active .tp-sub-arrow,
.skiper38-drawer-title.solo.is-pressed .tp-sub-arrow {
  opacity: 1 !important;
  color: #C5A880 !important;
  transform: translateX(3px) !important;
}
.skiper38-drawer-title.solo.is-navigating {
  background: rgba(197, 168, 128, 0.22) !important;
  border-color: rgba(197, 168, 128, 0.5) !important;
  color: #FFFFFF !important;
}

/* Drawer Bottom Quick Action Buttons */
.skiper38-drawer-actions {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  padding-top: 18px !important;
  margin-top: 10px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.skiper38-drawer-cta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 15px 16px !important;
  background: #C5A880 !important;
  color: #0E1012 !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  flex: 1.3 !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 18px rgba(197, 168, 128, 0.3) !important;
  transition: background-color 0.15s ease, transform 0.12s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
}
.skiper38-drawer-cta:active,
.skiper38-drawer-cta.is-pressed {
  background: #D4BA94 !important;
  transform: scale(0.96) !important;
}
.skiper38-drawer-cta-wa {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 15px !important;
  background: rgba(37, 211, 102, 0.10) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(37, 211, 102, 0.35) !important;
  border-radius: 999px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 0 !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  flex: 0 0 52px !important;
  width: 52px !important;
  box-sizing: border-box !important;
  transition: background-color 0.15s ease, transform 0.12s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.15s ease !important;
}
.skiper38-drawer-cta-wa svg {
  color: #25D366 !important;
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
}
.skiper38-drawer-cta-wa span {
  display: none !important;
}
.skiper38-drawer-cta-wa:active,
.skiper38-drawer-cta-wa.is-pressed {
  background: rgba(37, 211, 102, 0.2) !important;
  border-color: rgba(37, 211, 102, 0.55) !important;
  transform: scale(0.94) !important;
}


/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */
@media (max-width: 1024px) {
  .skiper38-nav {
    display: none !important;
  }
  html body header#site-header.site-header.skiper38-header,
  header#site-header.skiper38-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 60px !important;
    min-height: 60px !important;
    z-index: 999999 !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
  }
  .skiper38-hamburger {
    display: flex !important;
  }
  .skiper38-mobile-drawer {
    display: block !important;
  }
}
@media (max-width: 767px) {
  .skiper38-nav {
    display: none !important;
  }
  html body header#site-header.site-header.skiper38-header,
  header#site-header.skiper38-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 60px !important;
    min-height: 60px !important;
    z-index: 999999 !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
  }
}
/* ---- the drawer is as tall as its six rows, not as tall as the screen ----
   It was pinned bottom:0 with a viewport-height fallback, so on a phone the
   menu ended after Contact and then ran on as ~450px of empty dark panel.
   Height now comes from the content, capped so a short screen still scrolls,
   and the bottom corners are rounded like the top ones since the panel no
   longer reaches the bottom edge. */
@media (max-width: 1024px) {
  html body .skiper38-mobile-drawer {
    bottom: auto !important;
    height: auto !important;
    max-height: calc(100vh - 84px) !important;
    max-height: calc(100dvh - 84px) !important;
    border-radius: 18px !important;
    /* The bar floats with a 12px gutter each side; the drawer ran edge to edge
       underneath it, so the panel was wider than the thing it hangs from. Same
       gutter, and the same gap under the bar as above it. */
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
  }
}
@media (max-width: 991px) {
  html body .skiper38-mobile-drawer {
    max-height: calc(100vh - (var(--tp-bar-gap) + var(--tp-bar-h) + 24px)) !important;
    max-height: calc(100dvh - (var(--tp-bar-gap) + var(--tp-bar-h) + 24px)) !important;
  }
}

/* ---- the drawer reads as a menu, not as a full-bleed page ----
   Full width made six short labels float in a lot of dark space, and the
   hairline under each group drew a second set of lines through rows that are
   already cards. The panel is capped and hangs off the right edge under the
   bar, the rows carry one consistent inset, and the group rules come off. */
@media (max-width: 1024px) {
  html body .skiper38-mobile-drawer {
    left: auto !important;
    right: 12px !important;
    width: min(360px, calc(100% - 24px)) !important;
    max-width: none !important;
  }
  html body .skiper38-drawer-inner {
    padding: 12px 14px 18px !important;
    gap: 8px !important;
  }
  html body .skiper38-drawer-group {
    border-bottom: 0 !important;
    padding: 0 !important;
  }
  html body .skiper38-drawer-head {
    padding-left: 18px !important;
  }
  html body .skiper38-drawer-title.solo {
    padding-left: 18px !important;
  }
  html body .skiper38-drawer-sub {
    padding: 8px 0 2px 12px !important;
    gap: 6px !important;
  }
  html body .skiper38-drawer-sub a {
    padding-left: 16px !important;
  }
}

/* While the drawer is open, force the header itself solid so there's no
   light hero strip showing behind the hamburger/close row. Placed last to
   beat the .is-home-header:not(.scrolled):not(.drawer-open) transparent rule. */
html body header#site-header.site-header.skiper38-header.drawer-open,
html body header#site-header.site-header.skiper38-header.is-home-header.drawer-open,
header#site-header.skiper38-header.is-home-header.drawer-open {
  background: rgba(14, 16, 18, 0.98) !important;
  background-color: rgba(14, 16, 18, 0.98) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
}