/**
 * Kosmetix Header Styles
 * Sticky header with AJAX search, mega-menu, and mobile sidebar
 */

/* ============================================
   HEADER BASE
   ============================================ */

.kosmetix-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  background: var(--wp--preset--color--white);
  box-shadow: var(--wp--custom--shadow--sm);
  transition: all var(--wp--custom--transition--fast);
  overflow: visible;
  display: flex;
  flex-direction: column; /* Ensure Main and Categories stack vertically */
}

/* Compressed header on scroll */
.kosmetix-header.is-scrolled {
  box-shadow: var(--wp--custom--shadow--md);
}

.kosmetix-header.is-scrolled .kosmetix-header__main {
  padding: 0; /* Maximize compression for main row */
}

.kosmetix-header.is-scrolled .kosmetix-header__logo img {
  max-height: 32px; /* Smaller logo */
}

.kosmetix-header.is-scrolled .kosmetix-header__categories {
  padding: var(--wp--preset--spacing--xs) 0; /* Increased padding for better spacing */
}

.kosmetix-header.is-scrolled .kosmetix-categories-nav__toggle,
.kosmetix-header.is-scrolled .kosmetix-categories-nav__link {
  padding: var(--wp--preset--spacing--2xs) var(--wp--preset--spacing--sm);
  font-size: var(--wp--preset--font-size--xs);
}

.kosmetix-header__container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--wp--preset--spacing--lg); /* Increased for premium spacing */
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--lg);
  height: 80px; /* Fixed height for consistency */
  transition: height var(--wp--custom--transition--fast);
}

.kosmetix-header.is-scrolled .kosmetix-header__container {
  height: 60px; /* Compressed height */
}

/* ============================================
   BRANDING (LEFT)
   ============================================ */
.kosmetix-header__branding {
  flex-shrink: 0;
  padding: var(--wp--preset--spacing--sm) 0; /* Vertical breathing room */
}

.kosmetix-header__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.kosmetix-header__logo img {
  max-height: 56px; /* +40% from original 40px for premium presence */
  width: auto;
  transition: max-height var(--wp--custom--transition--fast);
}

.kosmetix-header.is-scrolled .kosmetix-header__logo img {
  max-height: 40px; /* Compressed but still visible */
}

/* ============================================
   NAVIGATION (CENTER)
   ============================================ */
.kosmetix-header__nav-center {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0; /* CRITICAL: Allows flex container to shrink below content size */
  overflow: hidden; /* Clip overflow */
}

/* Reuse existing nav classes but restyle */
.kosmetix-categories-nav {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--sm); /* Small gap */
  flex-shrink: 1; /* Allow shrinking */
  min-width: 0;
  /* FIX: overflow removed to allow dropdowns */
}

.kosmetix-categories-nav__list {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm); /* row-gap column-gap */
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap; /* Allow multi-row when items overflow */
  justify-content: center;
}

.kosmetix-categories-nav__link {
  color: var(--wp--preset--color--charcoal);
  text-decoration: none;
  font-family: var(--wp--preset--font-family--heading); /* Editorial font */
  font-size: 11px; /* Smaller editorial size */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em; /* Tighter tracking */
  padding: var(--wp--preset--spacing--2xs) 0;
  position: relative;
  transition: color var(--wp--custom--transition--fast);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Link Icon (for Marki, Shop) */
.kosmetix-categories-nav__link-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity var(--wp--custom--transition--fast);
}

.kosmetix-categories-nav__link:hover .kosmetix-categories-nav__link-icon {
  opacity: 1;
}

/* Special styling for Marki and Shop items */
.kosmetix-categories-nav__item--brands .kosmetix-categories-nav__link,
.kosmetix-categories-nav__item--shop .kosmetix-categories-nav__link {
  color: var(--wp--preset--color--rose-gold-dark, #b8860b);
}

.kosmetix-categories-nav__item--brands .kosmetix-categories-nav__link:hover,
.kosmetix-categories-nav__item--shop .kosmetix-categories-nav__link:hover {
  color: var(--wp--preset--color--espresso, #3d3229);
}

/* Underline Effect */
.kosmetix-categories-nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--wp--preset--color--charcoal);
  transition: width var(--wp--custom--transition--normal);
}

.kosmetix-categories-nav__link:hover {
  color: var(--wp--preset--color--black);
}

.kosmetix-categories-nav__link:hover::after {
  width: 100%;
}

/* Nav Item Dividers - Subtle vertical separators */
.kosmetix-categories-nav__item {
  position: relative;
}

.kosmetix-categories-nav__item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: calc(var(--wp--preset--spacing--sm, 0.5rem) / -2);
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: rgba(0, 0, 0, 0.12);
}

/* Hide divider on wrapped rows (when items stack) */
@media (max-width: 1200px) {
  .kosmetix-categories-nav__item::after {
    display: none;
  }
}

/* Brands submenu - wider to show all brands */
.kosmetix-categories-nav__submenu--brands ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--wp--preset--spacing--2xs);
}

.kosmetix-categories-nav__submenu-more a {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--wp--preset--color--rose-gold, #b8860b);
  font-weight: 600;
  font-size: 11px;
  margin-top: var(--wp--preset--spacing--xs);
  padding-top: var(--wp--preset--spacing--xs);
  border-top: 1px solid var(--wp--preset--color--soft-champagne, #f5f0eb);
  grid-column: 1 / -1;
}

.kosmetix-categories-nav__submenu-more a:hover {
  color: var(--wp--preset--color--espresso, #3d3229);
}

/* Hide navigation on tablet/mobile */
@media (max-width: 991px) {
  .kosmetix-header__nav-center {
    display: none;
  }
}

/* ============================================
   RIGHT ACTIONS (Search, Account, Cart)
   ============================================ */
.kosmetix-header__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--wp--preset--spacing--md);
  width: 200px; /* Match branding width for balance */
}

/* Search Toggle */
.kosmetix-header__search-toggle-desktop {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--wp--preset--color--charcoal);
  padding: var(--wp--preset--spacing--xs);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--wp--custom--transition--fast);
}

.kosmetix-header__search-toggle-desktop:hover {
  color: var(--wp--preset--color--rose-gold);
}
.kosmetix-header__search-wrapper {
  /* REDESIGN: Integrated into main flow instead of floating */
  flex: 1; /* Grow to fill available space */
  max-width: 600px; /* Cap width for optimal readability */
  margin: 0 var(--wp--preset--spacing--md); /* Breathing room */
}

/* Hide on tablet/mobile - will be triggered by toggle */
@media (max-width: 991px) {
  .kosmetix-header__search-wrapper {
    display: none;
  }
}

/* Actions */
.kosmetix-header__actions {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--md); /* Increased for better spacing */
  flex-shrink: 0;
}

.kosmetix-header__action-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--xs);
  width: 48px; /* Larger touch targets for premium UX */
  height: 48px;
  color: var(--wp--preset--color--charcoal);
  text-decoration: none;
  position: relative;
  border-radius: 6px; /* Unified radius token */
  transition: all var(--wp--custom--transition--fast);
  /* Reset for button elements */
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.kosmetix-header__action-link:hover {
  background: var(--wp--preset--color--blush-light);
  color: var(--wp--preset--color--rose-gold);
}

/* REDESIGN: Enlarge icons for better visual weight */
.kosmetix-header__action-link svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.5; /* Delicate for editorial look */
  flex-shrink: 0; /* Prevent SVG from being compressed */
}

/* REDESIGN: Hide text labels - icon-only for clean premium look */
.kosmetix-header__action-label {
  display: none;
}

/* REDESIGN: Fixed cart badge positioning */
.kosmetix-header__cart-count {
  position: absolute;
  top: -4px; /* Above icon instead of overlapping text */
  right: -4px; /* Outside icon boundary */
  min-width: 18px; /* Slightly larger for readability */
  height: 18px;
  padding: 0 5px;
  background: var(--wp--preset--color--rose-gold);
  color: var(--wp--preset--color--white);
  font-size: 10px; /* Slightly larger */
  font-weight: 700;
  border-radius: 99px; /* Keep pill for badges */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(183, 110, 121, 0.3); /* Subtle depth */
}

/* ============================================
   MOBILE HEADER
   ============================================ */
.kosmetix-header__mobile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
  transition: padding var(--wp--custom--transition--fast);
}

/* REDESIGN: Mobile Sticky Compression */
@media (max-width: 991px) {
  /* Hide categories row on mobile completely - available in sidebar */
  .kosmetix-header__categories {
    display: none !important;
  }

  .kosmetix-header.is-scrolled .kosmetix-header__mobile {
    padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
  }
}

@media (min-width: 992px) {
  .kosmetix-header__mobile {
    display: none;
  }
}

/* Ensure desktop wrapper is displayed on desktop */
.kosmetix-header__desktop {
  display: none;
}
@media (min-width: 992px) {
  .kosmetix-header__desktop {
    display: block;
  }
}

/* ============================================
   AJAX SEARCH
   ============================================ */

.kosmetix-search {
  position: relative;
  width: 100%;
}

.kosmetix-search__form {
  margin: 0;
}

.kosmetix-search__input-wrapper {
  display: flex;
  align-items: center;
  background: var(--wp--preset--color--blush-light);
  border-radius: 6px; /* REDESIGN: Unified radius */
  border: 1px solid var(--wp--preset--color--mist);
  transition: all var(--wp--custom--transition--fast);
  overflow: hidden;
}

.kosmetix-search__input-wrapper:focus-within {
  border-color: var(--wp--preset--color--rose-gold-light);
  background: var(--wp--preset--color--white);
  box-shadow: 0 0 0 3px rgba(212, 165, 165, 0.2);
}

.kosmetix-search__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: var(--wp--preset--spacing--sm);
  color: var(--wp--preset--color--slate);
  flex-shrink: 0;
}

.kosmetix-search__input {
  flex: 1;
  padding: 0.75rem var(--wp--preset--spacing--sm);
  border: none;
  background: transparent;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--charcoal);
  outline: none;
  min-width: 0;
}

.kosmetix-search__input::placeholder {
  color: var(--wp--preset--color--slate);
}

.kosmetix-search__submit {
  padding: 0.75rem var(--wp--preset--spacing--lg);
  background: var(--wp--preset--color--rose-gold);
  color: var(--wp--preset--color--white);
  border: none;
  border-radius: 0 6px 6px 0; /* REDESIGN: Match unified radius */
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--wp--custom--transition--fast);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.kosmetix-search__submit:hover {
  background: var(--wp--preset--color--rose-gold-dark);
  box-shadow: var(--wp--custom--shadow--sm);
}

/* Search Results Dropdown */
.kosmetix-search__results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--wp--preset--color--white);
  border-radius: var(--wp--custom--radius--lg);
  box-shadow: var(--wp--custom--shadow--xl);
  max-height: 400px;
  overflow-y: auto;
  z-index: 10000;
}

.kosmetix-search__results[hidden] {
  display: none;
}

.kosmetix-search__section-title {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--letter-spacing--wider);
  color: var(--wp--preset--color--slate);
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
  margin: 0;
  border-bottom: 1px solid var(--wp--preset--color--mist);
}

/* Skeleton Loader */
.kosmetix-search__skeleton {
  padding: var(--wp--preset--spacing--sm);
}

.kosmetix-search__skeleton[hidden] {
  display: none;
}

.kosmetix-search__skeleton-item {
  display: flex;
  gap: var(--wp--preset--spacing--sm);
  padding: var(--wp--preset--spacing--xs);
}

.kosmetix-search__skeleton-image {
  width: 50px;
  height: 50px;
  border-radius: var(--wp--custom--radius--md);
  background: linear-gradient(
    90deg,
    var(--wp--preset--color--mist) 25%,
    var(--wp--preset--color--blush-light) 50%,
    var(--wp--preset--color--mist) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.kosmetix-search__skeleton-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}

.kosmetix-search__skeleton-title {
  height: 14px;
  width: 70%;
  border-radius: var(--wp--custom--radius--sm);
  background: linear-gradient(
    90deg,
    var(--wp--preset--color--mist) 25%,
    var(--wp--preset--color--blush-light) 50%,
    var(--wp--preset--color--mist) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.kosmetix-search__skeleton-price {
  height: 12px;
  width: 40%;
  border-radius: var(--wp--custom--radius--sm);
  background: linear-gradient(
    90deg,
    var(--wp--preset--color--mist) 25%,
    var(--wp--preset--color--blush-light) 50%,
    var(--wp--preset--color--mist) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Product List */
.kosmetix-search__product-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kosmetix-search__product-item {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--sm);
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
  transition: background var(--wp--custom--transition--fast);
}

.kosmetix-search__product-item:hover {
  background: var(--wp--preset--color--blush-light);
}

.kosmetix-search__product-link {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--sm);
  text-decoration: none;
  color: inherit;
  width: 100%;
}

.kosmetix-search__product-image {
  width: 50px;
  height: 50px;
  border-radius: var(--wp--custom--radius--md);
  object-fit: cover;
  flex-shrink: 0;
}

.kosmetix-search__product-info {
  flex: 1;
  min-width: 0;
}

.kosmetix-search__product-name {
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 500;
  color: var(--wp--preset--color--charcoal);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kosmetix-search__product-price {
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  color: var(--wp--preset--color--rose-gold);
  margin: 0;
}

/* Category List */
.kosmetix-search__category-list {
  list-style: none;
  margin: 0;
  padding: var(--wp--preset--spacing--xs) 0;
}

.kosmetix-search__category-item {
  padding: 0;
}

.kosmetix-search__category-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
  text-decoration: none;
  color: var(--wp--preset--color--charcoal);
  font-size: var(--wp--preset--font-size--sm);
  transition: all var(--wp--custom--transition--fast);
}

.kosmetix-search__category-link:hover {
  background: var(--wp--preset--color--blush-light);
  color: var(--wp--preset--color--rose-gold);
}

.kosmetix-search__category-count {
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--slate);
}

/* No Results */
.kosmetix-search__no-results {
  padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
  text-align: center;
  color: var(--wp--preset--color--slate);
}

.kosmetix-search__no-results[hidden] {
  display: none;
}

/* View All */
.kosmetix-search__view-all {
  border-top: 1px solid var(--wp--preset--color--mist);
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
}

.kosmetix-search__view-all[hidden] {
  display: none;
}

.kosmetix-search__view-all-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--xs);
  color: var(--wp--preset--color--rose-gold);
  text-decoration: none;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  transition: color var(--wp--custom--transition--fast);
}

.kosmetix-search__view-all-link:hover {
  color: var(--wp--preset--color--rose-gold-dark);
}

/* ============================================
   CATEGORIES NAVIGATION
   ============================================ */

/* ============================================
   CATEGORIES NAVIGATION (RESPONSIVE REDESIGN)
   ============================================ */

.kosmetix-header__categories {
  /* REDESIGN: Minimal background for lightweight feel */
  background: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06); /* Subtle separator */
  padding: var(--wp--preset--spacing--xs) 0; /* Reduced padding */
  transition: all var(--wp--custom--transition--normal);
  position: relative;
  z-index: 900;
  display: block;
}

/* Sticky State: Even more minimal */
.kosmetix-header.is-scrolled .kosmetix-header__categories {
  background: rgba(255, 255, 255, 0.98); /* Solid for readability */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom-color: rgba(0, 0, 0, 0.08);
  padding: var(--wp--preset--spacing--xs) 0; /* Increased padding */
}

.kosmetix-categories-nav {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--sm); /* Increased for breathing room */
  width: 100%;
  /* FIX: overflow removed to allow dropdowns */
}

/* LIST CONTAINER - Handles Horizontal Scroll on Mobile ONLY */
.kosmetix-categories-nav__list {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--2xs);
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  /* FIX: No overflow restrictions on desktop to allow dropdowns */
  overflow: visible;
}

/* Mobile horizontal scroll (tablets and below) */
@media (max-width: 991px) {
  .kosmetix-categories-nav__list {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    padding-bottom: 2px;
  }

  .kosmetix-categories-nav__list::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }
}

.kosmetix-categories-nav__item {
  position: relative;
  flex-shrink: 0; /* Prevent squashing on mobile */
}

/* LINK STYLES: MINIMALIST REDESIGN */
.kosmetix-categories-nav__link {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 1.25rem; /* Slightly more generous */
  color: var(--wp--preset--color--charcoal);
  text-decoration: none;
  font-family: var(--wp--preset--font-family--heading); /* Editorial font */
  font-size: 14px; /* Fixed size for consistency */
  font-weight: 400; /* REDESIGN: Lighter weight for elegance */
  letter-spacing: 0.01em; /* Subtle tracking */
  text-transform: none; /* REDESIGN: Remove uppercase */
  white-space: nowrap;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  transition: all var(--wp--custom--transition--fast);
}

.kosmetix-categories-nav__link:hover {
  background: rgba(183, 110, 121, 0.06); /* Subtle rose-gold tint */
  color: var(--wp--preset--color--rose-gold);
  border-color: transparent; /* No border on hover for cleaner look */
  transform: translateY(-1px);
}

/* Active State */
.kosmetix-categories-nav__link.active {
  color: var(--wp--preset--color--rose-gold);
  font-weight: 500;
  background: rgba(183, 110, 121, 0.08);
}

/* Sticky State Tweaks for Links */
.kosmetix-header.is-scrolled .kosmetix-categories-nav__link {
  font-size: 13px; /* Slightly smaller */
  padding: 0.5rem 1rem;
  background: transparent; /* REDESIGN: Clean solid background */
}

.kosmetix-header.is-scrolled .kosmetix-categories-nav__link:hover {
  background: rgba(183, 110, 121, 0.08); /* REDESIGN: Consistent subtle hover */
  color: var(--wp--preset--color--rose-gold);
}

/* TOGGLE BUTTON - HIDDEN ON DESKTOP */
.kosmetix-categories-nav__dropdown {
  display: none; /* REDESIGN: Hidden on desktop for minimal look */
}

/* Show on mobile/tablet for mega-menu access */
@media (max-width: 991px) {
  .kosmetix-categories-nav__dropdown {
    display: flex;
  }
}

.kosmetix-categories-nav__toggle {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
  padding: 0.5rem 1rem;
  background: var(--wp--preset--color--rose-gold);
  color: var(--wp--preset--color--white);
  border: none;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--wp--custom--transition--fast);
  border-radius: 6px;
  flex-shrink: 0;
}

.kosmetix-categories-nav__toggle:hover {
  background: var(--wp--preset--color--rose-gold-dark);
  box-shadow: 0 4px 12px rgba(183, 110, 121, 0.3);
}

.kosmetix-categories-nav__chevron-small {
  transition: transform var(--wp--custom--transition--fast);
}

.kosmetix-categories-nav__item:hover .kosmetix-categories-nav__chevron-small {
  transform: rotate(180deg);
}

/* SUBMENU - IMPROVED HOVER DROPDOWN */
.kosmetix-categories-nav__submenu {
  position: absolute;
  top: 100%; /* FIX: No gap - allows smooth mouse transition from item to submenu */
  left: 0;
  min-width: 240px; /* Slightly wider for readability */
  background: var(--wp--preset--color--white);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); /* REDESIGN: Deeper shadow for elevation */
  z-index: 1000; /* Higher z-index to ensure visibility */
  padding: 0.75rem;
  padding-top: 1rem; /* Extra top padding for smoother hover area */
  margin-top: 0; /* No margin to ensure no gap */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px); /* REDESIGN: Slide down animation */
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s;
  pointer-events: none; /* Prevent flickering */
}

/* Remove [hidden] attribute conflict */
.kosmetix-categories-nav__submenu[hidden] {
  display: block !important; /* Override hidden attribute, use CSS for animation */
}

/* Show on hover */
.kosmetix-categories-nav__item:hover .kosmetix-categories-nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.kosmetix-categories-nav__submenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Submenu link styling */
.kosmetix-categories-nav__submenu a {
  display: block;
  padding: 0.7rem 1rem;
  color: var(--wp--preset--color--charcoal);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.005em;
  border-radius: 6px;
  transition: all var(--wp--custom--transition--fast);
}

.kosmetix-categories-nav__submenu a:hover {
  background: rgba(183, 110, 121, 0.08); /* REDESIGN: Consistent subtle hover */
  color: var(--wp--preset--color--rose-gold);
  transform: translateX(4px); /* REDESIGN: Subtle slide instead of padding change */
}

/* SHOP ALL - Now integrated as nav item with .kosmetix-categories-nav__item--shop */

/* MEGA MENU - Keeping desktop focused styling mostly */
.kosmetix-mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 600px;
  background: var(--wp--preset--color--white);
  border-radius: var(--wp--custom--radius--lg);
  box-shadow: var(--wp--custom--shadow--xl);
  z-index: 100;
  margin-top: 12px;
}

.kosmetix-mega-menu__content {
  padding: var(--wp--preset--spacing--md);
}

.kosmetix-mega-menu__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--wp--preset--spacing--md);
}

.kosmetix-mega-menu__category-title {
  display: block;
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 600;
  color: var(--wp--preset--color--charcoal);
  text-decoration: none;
  margin-bottom: var(--wp--preset--spacing--xs);
  transition: color var(--wp--custom--transition--fast);
}

.kosmetix-mega-menu__category-title:hover {
  color: var(--wp--preset--color--rose-gold);
}

.kosmetix-mega-menu__count {
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--slate);
  font-weight: 400;
}

.kosmetix-mega-menu__subcategories a {
  font-family: var(--wp--preset--font-family--body) !important;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--slate);
  text-decoration: none;
  transition: color var(--wp--custom--transition--fast);
  display: block;
  padding: 2px 0;
}

.kosmetix-mega-menu__subcategories a:hover {
  color: var(--wp--preset--color--rose-gold);
}

/* ============================================
   MOBILE HEADER
   ============================================ */

.kosmetix-header__mobile {
  display: block;
}

/* FIX: Align with nav-center breakpoint (was 768px, now 992px) */
@media (min-width: 992px) {
  .kosmetix-header__mobile {
    display: none;
  }
}

.kosmetix-header__mobile-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
  gap: var(--wp--preset--spacing--xs);
  width: 100%;
}

/* Row 1: Logo centered */
.kosmetix-header__mobile-bar .kosmetix-header__logo-mobile {
  display: flex;
  justify-content: center;
  text-align: center;
  padding: var(--wp--preset--spacing--2xs) 0;
  border-bottom: 1px solid var(--wp--preset--color--mist);
}

/* Row 2: Controls container */
.kosmetix-header__mobile-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--sm);
}

.kosmetix-header__menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}

.kosmetix-header__hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
}

.kosmetix-header__hamburger span {
  display: block;
  height: 2px;
  background: var(--wp--preset--color--charcoal);
  border-radius: 2px;
  transition: all var(--wp--custom--transition--fast);
}

.kosmetix-header__menu-toggle[aria-expanded='true'] .kosmetix-header__hamburger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.kosmetix-header__menu-toggle[aria-expanded='true'] .kosmetix-header__hamburger span:nth-child(2) {
  opacity: 0;
}

.kosmetix-header__menu-toggle[aria-expanded='true'] .kosmetix-header__hamburger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.kosmetix-header__logo-mobile {
  text-decoration: none;
}

.kosmetix-header__site-name {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: 600;
  color: var(--wp--preset--color--charcoal);
  flex: 1;
  width: 100%;
  text-align: center;
}

/* Mobile Wishlist Count */
.kosmetix-header__icon-link.wishlist-trigger .kosmetix-header__wishlist-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--wp--preset--color--rose-gold);
  color: var(--wp--preset--color--white);
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  border-radius: 50%;
}

.kosmetix-header__icon-link.wishlist-trigger {
  position: relative;
}

.kosmetix-header__mobile-actions {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--2xs);
}

.kosmetix-header__search-toggle,
.kosmetix-header__icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--wp--preset--color--charcoal);
  text-decoration: none;
  cursor: pointer;
}

.kosmetix-header__cart-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  position: relative;
  color: var(--wp--preset--color--charcoal);
  text-decoration: none;
}

/* Mobile Search Dropdown */
.kosmetix-header__mobile-search {
  padding: 0 var(--wp--preset--spacing--sm) var(--wp--preset--spacing--sm);
  border-bottom: 1px solid var(--wp--preset--color--blush);
}

.kosmetix-header__mobile-search[hidden] {
  display: none;
}

/* ============================================
   MOBILE SIDEBAR
   ============================================ */

.kosmetix-sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  transition: all var(--wp--custom--transition--normal);
}

.kosmetix-sidebar-overlay[hidden] {
  display: none;
}

.kosmetix-sidebar-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.kosmetix-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 85vw; /* Mobile: percentage width */
  max-width: 380px; /* Cap at reasonable max */
  background: var(--wp--preset--color--white);
  z-index: 1002;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform var(--wp--custom--transition--normal);
  box-shadow: var(--wp--custom--shadow--2xl);
}

/* Tablet: Wider sidebar */
@media (min-width: 768px) {
  .kosmetix-sidebar {
    width: 450px;
    max-width: 450px;
  }
}

.kosmetix-sidebar[hidden] {
  display: none;
}

.kosmetix-sidebar.is-active {
  transform: translateX(0);
}

.kosmetix-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
  border-bottom: 1px solid var(--wp--preset--color--mist);
  background: var(--wp--preset--color--blush-light);
}

.kosmetix-sidebar__title {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: 600;
  color: var(--wp--preset--color--charcoal);
}

.kosmetix-sidebar__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--wp--preset--color--charcoal);
  cursor: pointer;
  transition: color var(--wp--custom--transition--fast);
}

.kosmetix-sidebar__close:hover {
  color: var(--wp--preset--color--rose-gold);
}

.kosmetix-sidebar__content {
  flex: 1;
  overflow-y: auto;
  padding: var(--wp--preset--spacing--md);
}

.kosmetix-sidebar__search {
  margin-bottom: var(--wp--preset--spacing--md);
}

.kosmetix-sidebar__section-title {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--letter-spacing--wider);
  color: var(--wp--preset--color--slate);
  margin: 0 0 var(--wp--preset--spacing--sm) 0;
}

/* Categories Accordion */
.kosmetix-sidebar__categories {
  list-style: none;
  margin: 0 0 var(--wp--preset--spacing--md) 0;
  padding: 0;
}

.kosmetix-sidebar__category-item {
  border-bottom: 1px solid var(--wp--preset--color--mist);
}

.kosmetix-sidebar__category-header {
  display: flex;
  align-items: center;
}

.kosmetix-sidebar__category-link {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
  padding: var(--wp--preset--spacing--sm) 0;
  color: var(--wp--preset--color--charcoal);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--wp--custom--transition--fast);
}

.kosmetix-sidebar__category-link:hover {
  color: var(--wp--preset--color--rose-gold);
}

.kosmetix-sidebar__category-count {
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--slate);
  font-weight: 400;
}

.kosmetix-sidebar__accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--wp--preset--color--slate);
  cursor: pointer;
  transition: all var(--wp--custom--transition--fast);
}

.kosmetix-sidebar__accordion-toggle:hover {
  color: var(--wp--preset--color--rose-gold);
}

.kosmetix-sidebar__accordion-toggle svg {
  transition: transform var(--wp--custom--transition--fast);
}

.kosmetix-sidebar__accordion-toggle[aria-expanded='true'] svg {
  transform: rotate(180deg);
}

.kosmetix-sidebar__subcategories {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
}

.kosmetix-sidebar__subcategories[hidden] {
  display: none;
}

.kosmetix-sidebar__subcategory-link {
  display: block;
  padding: var(--wp--preset--spacing--xs) 0;
  color: var(--wp--preset--color--slate);
  text-decoration: none;
  font-size: var(--wp--preset--font-size--sm);
  transition: color var(--wp--custom--transition--fast);
}

.kosmetix-sidebar__subcategory-link:hover {
  color: var(--wp--preset--color--rose-gold);
}

.kosmetix-sidebar__shop-link {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
  color: var(--wp--preset--color--rose-gold);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--wp--preset--font-size--sm);
}

/* Brands Section */
.kosmetix-sidebar__brands {
  margin-top: var(--wp--preset--spacing--md);
  padding-top: var(--wp--preset--spacing--md);
  border-top: 1px solid var(--wp--preset--color--mist);
}

.kosmetix-sidebar__brands .kosmetix-sidebar__section-title {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
}

.kosmetix-sidebar__brands .kosmetix-sidebar__section-title svg {
  color: var(--wp--preset--color--rose-gold);
}

.kosmetix-sidebar__brands-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--wp--preset--spacing--2xs);
}

.kosmetix-sidebar__brand-link {
  display: block;
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
  color: var(--wp--preset--color--charcoal);
  text-decoration: none;
  font-size: var(--wp--preset--font-size--sm);
  background: var(--wp--preset--color--blush-light);
  border-radius: var(--wp--custom--radius--sm);
  transition: all var(--wp--custom--transition--fast);
}

.kosmetix-sidebar__brand-link:hover {
  background: var(--wp--preset--color--rose-gold-light);
  color: var(--wp--preset--color--rose-gold-dark);
}

.kosmetix-sidebar__brands-more {
  grid-column: 1 / -1;
  margin-top: var(--wp--preset--spacing--xs);
}

.kosmetix-sidebar__brands-more a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--wp--preset--color--rose-gold);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--sm);
  text-decoration: none;
}

.kosmetix-sidebar__brands-more a:hover {
  color: var(--wp--preset--color--rose-gold-dark);
}

/* Account Links */
.kosmetix-sidebar__account {
  margin-top: var(--wp--preset--spacing--md);
  padding-top: var(--wp--preset--spacing--md);
  border-top: 1px solid var(--wp--preset--color--mist);
}

.kosmetix-sidebar__account-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kosmetix-sidebar__account-links li {
  margin-bottom: var(--wp--preset--spacing--2xs);
}

.kosmetix-sidebar__account-links a {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--sm);
  padding: var(--wp--preset--spacing--xs) 0;
  color: var(--wp--preset--color--charcoal);
  text-decoration: none;
  font-size: var(--wp--preset--font-size--sm);
  transition: color var(--wp--custom--transition--fast);
}

.kosmetix-sidebar__account-links a:hover {
  color: var(--wp--preset--color--rose-gold);
}

/* Sidebar Footer */
.kosmetix-sidebar__footer {
  padding: var(--wp--preset--spacing--md);
  border-top: 1px solid var(--wp--preset--color--mist);
  background: var(--wp--preset--color--blush-light);
}

.kosmetix-sidebar__cart-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--sm);
  width: 100%;
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
  background: var(--wp--preset--color--rose-gold);
  color: var(--wp--preset--color--white);
  text-decoration: none;
  font-weight: 600;
  border-radius: var(--wp--custom--radius--md);
  transition: background var(--wp--custom--transition--fast);
}

.kosmetix-sidebar__cart-button:hover {
  background: var(--wp--preset--color--rose-gold-dark);
}

.kosmetix-sidebar__cart-count {
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--rose-gold);
  padding: 0.125rem 0.5rem;
  border-radius: var(--wp--custom--radius--pill);
  font-size: var(--wp--preset--font-size--xs);
}

/* ============================================
   BODY SCROLL LOCK
   ============================================ */

body.sidebar-open {
  overflow: hidden;
}

/* ============================================
   MOBILE RESPONSIVENESS FIXES
   ============================================ */

/* Hide redundant header container on mobile */
@media (max-width: 991px) {
  .kosmetix-header__container {
    display: none !important;
  }
}

/* Mobile Header Optimizations */
@media (max-width: 480px) {
  /* Reduce site name font size */
  .kosmetix-header__site-name {
    font-size: var(--wp--preset--font-size--base); /* 16px instead of 20px */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%; /* Prevent overflow */
  }

  /* Mobile bar prevent overflow */
  .kosmetix-header__mobile-bar {
    gap: var(--wp--preset--spacing--2xs); /* Reduce gap */
    padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
  }

  /* Reduce icon button size slightly */
  .kosmetix-header__search-toggle,
  .kosmetix-header__icon-link,
  .kosmetix-header__cart-link,
  .kosmetix-header__menu-toggle {
    width: 40px;
    height: 40px;
  }

  /* Icon size adjustment */
  .kosmetix-header__icon-link .material-symbols-outlined,
  .kosmetix-header__search-toggle .material-symbols-outlined,
  .kosmetix-header__cart-link .material-symbols-outlined {
    font-size: 20px;
  }
}

/* Extra small screens - hide subtitle */
@media (max-width: 380px) {
  .kosmetix-header__site-name {
    max-width: 150px; /* Further reduce on very small screens */
  }
}

/* Categories Navigation - Mobile Accordion */
@media (max-width: 991px) {
  .kosmetix-categories-nav {
    display: none; /* Hide horizontal nav on mobile */
  }

  /* Sidebar on mobile - for filters */
  .kosmetix-sidebar__search {
    position: static; /* Remove absolute positioning */
    margin-bottom: var(--wp--preset--spacing--md);
  }

  .kosmetix-sidebar__content {
    width: 100%;
  }
}

/* ============================================
   TOOLTIPS
   ============================================ */
/* Tooltips are now handled by Tippy.js */
.kosmetix-header__action-link {
  position: relative;
}

/* Old CSS Tooltips - Removed for Tippy.js integration */
/*
.kosmetix-header__action-link[data-tooltip]::before { ... }
*/