/* Ethnoskin Navigation Styles */
/* All styles use !important to prevent theme conflicts */
/* Keep the nav below the admin bar, but don't pad the body */

/* Add top padding to body to account for fixed nav */  
body:not(.logged-in) {
  padding-top: 100px !important;
}
/* Mobile: Add top padding to hero content to avoid navbar overlap */
@media screen and (max-width: 782px) {
  .es-hero-content {
    padding-top: 120px !important;
    padding-bottom: 80px !important;
  }
  .es-hero-scroll{
    display: none !important;
  }
  .es-hero-clinic .es-hero-scroll {
    display:none !important;
  }
}

body.logged-in {
  padding-top: 120px !important;
}

/* Adjust nav position when admin bar is present */
body.admin-bar .ethno-nav {
  top: calc(32px + 24px) !important;
}

body.admin-bar.logged-in {
  padding-top: calc(32px + 100px) !important;
}

@media screen and (max-width: 782px) {
  body.admin-bar .ethno-nav {
    top: calc(46px + 24px) !important;
  }
  
  body.admin-bar.logged-in {
    padding-top: calc(46px + 100px) !important;
  }
}

/* Remove body padding for full-bleed hero pages */
body.no-top-padding {
  padding-top: 0 !important;
}

body.admin-bar.no-top-padding {
  padding-top: 0 !important;
}

/* Floating Pill Navigation */
.ethno-nav {
  position: fixed !important;
  top: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 48px) !important;
  max-width: 1200px !important;
  z-index: 1000 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ethno-nav.scrolled {
  top: 16px !important;
}

.ethno-nav-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 32px !important;
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  border-radius: 100px !important;
  border: 1px solid rgba(44, 36, 24, 0.1) !important;
  box-shadow: 0 4px 24px rgba(44, 36, 24, 0.08) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: visible !important;
}

.ethno-nav.scrolled .ethno-nav-container {
  padding: 12px 28px !important;
  box-shadow: 0 8px 32px rgba(44, 36, 24, 0.12) !important;
}

/* Logo */
.ethno-nav-logo {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #2c2418 !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease !important;
}

.ethno-nav-logo:hover {
  opacity: 0.7 !important;
}

.ethno-logo-text {
  display: block !important;
}

/* Desktop Navigation Links */
.ethno-nav-links {
  display: flex !important;
  gap: 32px !important;
  align-items: center !important;
}

.ethno-nav-link {
  position: relative !important;
  color: #5c5447 !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  transition: color 0.2s ease !important;
}

.ethno-nav-link::after {
  content: "" !important;
  position: absolute !important;
  bottom: -4px !important;
  left: 0 !important;
  width: 0 !important;
  height: 2px !important;
  background: #c4a77d !important;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ethno-nav-link:hover {
  color: #2c2418 !important;
}

.ethno-nav-link:hover::after {
  width: 100% !important;
}

/* Active state - current page */
.ethno-nav-link.current-menu-item,
.ethno-nav-link.current_page_item {
  color: #2c2418 !important;
  font-weight: 600 !important;
}

.ethno-nav-link.current-menu-item::after,
.ethno-nav-link.current_page_item::after {
  width: 100% !important;
  background: #c4a77d !important;
}

/* Cart Container */
.ethno-cart-container {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
}

/* Cart Button */
.ethno-cart-button {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  color: #2c2418 !important;
  text-decoration: none !important;
  border-radius: 50% !important;
  transition: all 0.2s ease !important;
}

.ethno-cart-button:hover {
  background: rgba(196, 167, 125, 0.1) !important;
  transform: scale(1.05) !important;
}

.ethno-cart-button svg {
  display: block !important;
}

.ethno-cart-badge {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  background: #c4a77d !important;
  color: white !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* Cart Dropdown - NO GAP */
.ethno-cart-dropdown {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  right: 0 !important;
  width: 380px !important;
  background: white !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 48px rgba(44, 36, 24, 0.15) !important;
  border: 1px solid rgba(44, 36, 24, 0.1) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-8px) !important;
  transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease !important;
  pointer-events: none !important;
  z-index: 10000 !important;
}

/* Invisible bridge - covers the entire gap between button and dropdown */
.ethno-cart-dropdown::before {
  content: "" !important;
  position: absolute !important;
  top: -12px !important;
  left: 0 !important;
  right: 0 !important;
  height: 16px !important;
  background: transparent !important;
}

/* Keep dropdown open when hovering container OR dropdown */
.ethno-cart-container:hover .ethno-cart-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* Cart Header */
.ethno-cart-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 20px 24px !important;
  border-bottom: 1px solid rgba(44, 36, 24, 0.08) !important;
}

.ethno-cart-header h3 {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #2c2418 !important;
}

.ethno-cart-count-text {
  font-size: 14px !important;
  color: #8b8278 !important;
}

/* Cart Items */
.ethno-cart-items {
  max-height: 320px !important;
  overflow-y: auto !important;
  padding: 16px !important;
}

.ethno-cart-item {
  display: flex !important;
  gap: 12px !important;
  padding: 12px !important;
  border-radius: 12px !important;
  transition: background 0.2s ease !important;
  margin-bottom: 8px !important;
}

.ethno-cart-item:last-child {
  margin-bottom: 0 !important;
}

.ethno-cart-item:hover {
  background: rgba(245, 241, 235, 0.5) !important;
}

.ethno-item-image {
  width: 72px !important;
  height: 72px !important;
  flex-shrink: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  display: block !important;
}

.ethno-item-image img {
  width: 72px !important;
  height: 72px !important;
  object-fit: cover !important;
  display: block !important;
}

.ethno-item-details {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.ethno-item-title {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #2c2418 !important;
  line-height: 1.3 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.ethno-item-price {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #c4a77d !important;
}

.ethno-remove-btn {
  width: 28px !important;
  height: 28px !important;
  border: none !important;
  background: rgba(44, 36, 24, 0.05) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  font-size: 20px !important;
  color: #8b8278 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  outline: none !important;
}

.ethno-remove-btn:hover {
  background: rgba(196, 167, 125, 0.15) !important;
  color: #c4a77d !important;
  box-shadow: none !important;
}

/* Empty Cart */
.ethno-cart-empty {
  padding: 40px 24px !important;
  text-align: center !important;
}

.ethno-cart-empty p {
  margin: 0 !important;
  color: #8b8278 !important;
  font-size: 15px !important;
}

/* Cart Footer */
.ethno-cart-footer {
  padding: 20px 24px !important;
  border-top: 1px solid rgba(44, 36, 24, 0.08) !important;
}

.ethno-cart-total {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 16px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #2c2418 !important;
}

.ethno-total-amount {
  font-size: 20px !important;
  color: #c4a77d !important;
}

.ethno-cart-btn {
  display: block !important;
  width: 100% !important;
  padding: 12px !important;
  text-align: center !important;
  text-decoration: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  transition: all 0.2s ease !important;
  border: none !important;
  cursor: pointer !important;
}

.ethno-view-cart {
  background: #f5f1eb !important;
  color: #5c5447 !important;
  margin-bottom: 8px !important;
}

.ethno-view-cart:hover {
  background: #e8e1d8 !important;
}

.ethno-checkout {
  background: #c4a77d !important;
  color: white !important;
}

.ethno-checkout:hover {
  background: #b89968 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(196, 167, 125, 0.3) !important;
}

/* Mobile Toggle - Override ALL Astra button styles */
.ethno-mobile-toggle {
  display: none !important;
  width: 40px !important;
  height: 40px !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  padding: 0 !important;
  position: relative !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
}

.ethno-mobile-toggle:hover,
.ethno-mobile-toggle:focus,
.ethno-mobile-toggle:active {
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
}

.ethno-hamburger {
  display: block !important;
  width: 24px !important;
  height: 2px !important;
  background: #2c2418 !important;
  position: relative !important;
  transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ethno-hamburger::before,
.ethno-hamburger::after {
  content: "" !important;
  position: absolute !important;
  width: 24px !important;
  height: 2px !important;
  background: #2c2418 !important;
  left: 0 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ethno-hamburger::before {
  top: -8px !important;
}

.ethno-hamburger::after {
  top: 8px !important;
}

.ethno-mobile-toggle.active .ethno-hamburger {
  background: transparent !important;
}

.ethno-mobile-toggle.active .ethno-hamburger::before {
  top: 0 !important;
  transform: rotate(45deg) !important;
  background: white !important;
}

.ethno-mobile-toggle.active .ethno-hamburger::after {
  top: 0 !important;
  transform: rotate(-45deg) !important;
  background: white !important;
}

/* Mobile Menu */
.ethno-mobile-menu {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  background: rgba(44, 36, 24, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  z-index: 100000 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
  will-change: opacity, visibility !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Force fullscreen - override any parent containers */
body .ethno-mobile-menu,
html .ethno-mobile-menu,
.site .ethno-mobile-menu,
.ast-container .ethno-mobile-menu,
#page .ethno-mobile-menu,
.site-content .ethno-mobile-menu {
  width: 100vw !important;
  max-width: none !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ethno-mobile-menu.active {
  opacity: 1 !important;
  visibility: visible !important;
}

/* When menu is open, fix nav position and remove centering */
.ethno-nav.menu-open {
  position: fixed !important;
  top: 24px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  transform: none !important;
  z-index: 100001 !important;
  transition: none !important;
}

body.admin-bar .ethno-nav.menu-open {
  top: calc(32px + 24px) !important;
}

@media screen and (max-width: 782px) {
  body.admin-bar .ethno-nav.menu-open {
    top: calc(46px + 24px) !important;
  }
}

.ethno-nav.menu-open .ethno-nav-container {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  max-width: none !important;
  padding: 16px 32px !important;
  transition: all 0.2s ease !important;
}

.ethno-nav.menu-open .ethno-nav-logo,
.ethno-nav.menu-open .ethno-nav-links,
.ethno-nav.menu-open .ethno-cart-container {
  display: none !important;
}

.ethno-nav.menu-open .ethno-mobile-toggle {
  margin-left: auto !important;
  z-index: 100001 !important;
}

.ethno-mobile-link,
.ethno-mobile-cta {
  font-size: 26px !important;
  font-weight: 600 !important;
  color: white !important;
  text-decoration: none !important;
  position: relative !important;
  opacity: 0 !important;
  transform: translateY(20px) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ethno-mobile-menu.active .ethno-mobile-link:nth-child(1),
.ethno-mobile-menu.active .ethno-mobile-cta:nth-child(1) {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition-delay: 0.1s !important;
}

.ethno-mobile-menu.active .ethno-mobile-link:nth-child(2),
.ethno-mobile-menu.active .ethno-mobile-cta:nth-child(2) {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition-delay: 0.15s !important;
}

.ethno-mobile-menu.active .ethno-mobile-link:nth-child(3),
.ethno-mobile-menu.active .ethno-mobile-cta:nth-child(3) {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition-delay: 0.2s !important;
}

.ethno-mobile-menu.active .ethno-mobile-link:nth-child(4),
.ethno-mobile-menu.active .ethno-mobile-cta:nth-child(4) {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition-delay: 0.25s !important;
}

.ethno-mobile-menu.active .ethno-mobile-link:nth-child(5),
.ethno-mobile-menu.active .ethno-mobile-cta:nth-child(5) {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition-delay: 0.3s !important;
}

.ethno-mobile-menu.active .ethno-mobile-link:nth-child(6),
.ethno-mobile-menu.active .ethno-mobile-cta:nth-child(6) {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition-delay: 0.35s !important;
}

.ethno-mobile-menu.active .ethno-mobile-link:nth-child(7),
.ethno-mobile-menu.active .ethno-mobile-cta:nth-child(7) {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition-delay: 0.4s !important;
}

.ethno-mobile-link::after {
  content: "" !important;
  position: absolute !important;
  bottom: -8px !important;
  left: 0 !important;
  width: 0 !important;
  height: 3px !important;
  background: #c4a77d !important;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ethno-mobile-link:hover::after {
  width: 100% !important;
}

/* Mobile active state */
.ethno-mobile-link.current-menu-item,
.ethno-mobile-link.current_page_item {
  color: #c4a77d !important;
}

.ethno-mobile-link.current-menu-item::after,
.ethno-mobile-link.current_page_item::after {
  width: 100% !important;
}

.ethno-mobile-cta {
  margin-top: 16px !important;
  padding: 16px 48px !important;
  background: #c4a77d !important;
  border-radius: 100px !important;
}

/* Mobile Footer Section */
.ethno-mobile-footer {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 24px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  opacity: 0 !important;
  transform: translateY(20px) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ethno-mobile-menu.active .ethno-mobile-footer {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition-delay: 0.45s !important;
}

.ethno-mobile-social,
.ethno-mobile-contact {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

.ethno-mobile-social:hover,
.ethno-mobile-contact:hover {
  color: #c4a77d !important;
  transform: translateX(4px) !important;
}

.ethno-mobile-social svg {
  flex-shrink: 0 !important;
  width: 20px !important;
  height: 20px !important;
}

.ethno-mobile-contact {
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

.ethno-mobile-contact svg {
  flex-shrink: 0 !important;
  width: 18px !important;
  height: 18px !important;
}

/* Responsive */
@media (max-width: 968px) {
  .ethno-nav-links {
    display: none !important;
  }

  .ethno-mobile-toggle {
    display: block !important;
    z-index: 100002 !important;
  }
  
  /* Group cart + hamburger together on the right */
  .ethno-nav-container::after {
    content: none !important;
  }
  
  .ethno-nav-container {
    gap: 0 !important;
  }
  
  .ethno-cart-container {
    margin-left: auto !important;
    margin-right: 8px !important;
  }

  .ethno-cart-dropdown {
    right: -20px !important;
    left: auto !important;
    transform: translateY(-8px) !important;
    width: 340px !important;
  }
  
  .ethno-cart-container:hover .ethno-cart-dropdown {
    transform: translateY(0) !important;
  }
}

@media (max-width: 480px) {
  .ethno-nav {
    width: calc(100% - 32px) !important;
  }

  .ethno-nav-container {
    padding: 12px 20px !important;
  }
  
  .ethno-cart-container {
    margin-right: 8px !important;
  }

  .ethno-cart-dropdown {
    width: calc(100vw - 64px) !important;
    max-width: 340px !important;
    right: -40px !important;
  }

  .ethno-mobile-link,
  .ethno-mobile-cta {
    font-size: 22px !important;
  }
  
  .ethno-mobile-menu {
    gap: 16px !important;
  }
  
  .ethno-mobile-footer {
    margin-top: 16px !important;
    padding-top: 16px !important;
  }
}