/**
 * KSquare Gems - Header Styles
 * Pixel-perfect main header with AJAX live search
 *
 * @package Onviqa
 * @since 1.0.0
 */

/* ==========================================================================
   CSS Variables - Header Specific
   ========================================================================== */

:root {
  /* Header dimensions */
  --header-height: 70px;
  --header-max-width: 1400px;
  --header-padding: 0 24px;

  /* Logo dimensions */
  --logo-width: 206px;
  --logo-height: 40px;

  /* Search dimensions */
  --search-width: 400px;
  --search-min-width: 200px; /* floor before the search bar stops shrinking */
  --search-height: 50px;

  /* Icon dimensions */
  --icon-size: 24px;
  --icon-badge-size: 18px;

  /* Menu spacing */
  --menu-gap: 40px;

  /* Header colors */
  --header-bg: #ffffff;
  --header-border: #e5e5e5;
  --header-text: #1a1a1a;
  --header-text-light: #666666;
  --header-accent: #ff6b35;
  --header-accent-hover: #e55a2b;
}

/* ==========================================================================
   Main Header Container - 70px Height, Full Width
   ========================================================================== */

.header-main {
  background: #fff;
  border-bottom: 1px solid #e6e9f0;
  height: 70px;
  min-height: 70px;
  max-height: 70px;
  position: relative; /* Parent site-header is sticky */
  z-index: 1001;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.08);
}

.header-main__container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 40px;
  height: 100%;
  box-sizing: border-box;
}

.header-main__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
  width: 100%;
}

/* ==========================================================================
   Logo Section - 206×40px
   ========================================================================== */

.header-main__logo {
  flex-shrink: 0;
  width: var(--logo-width);
  display: flex;
  align-items: center;
}

.header-main__logo a {
  display: flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
}

.header-main__logo img,
.header-main__logo .header-logo {
  max-width: var(--logo-width);
  max-height: var(--logo-height);
  width: auto;
  height: auto;
  object-fit: contain;
}

.header-main__logo .site-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--header-text);
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.header-main__logo a:hover .site-title,
.header-main__logo a:focus .site-title {
  color: var(--header-accent);
}

/* ==========================================================================
   Mobile Menu Toggle
   ========================================================================== */

.header-main__mobile-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  z-index: 101;
  flex-shrink: 0;
}

/* Mobile toggle SVG icon - hidden by default on desktop */
.mobile-toggle-icon {
  display: none;
}

.mobile-toggle-icon svg {
  width: 32px;
  height: 32px;
  color: #111111;
}

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--header-text);
  border-radius: 1px;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.header-main__mobile-toggle[aria-expanded="true"] .hamburger span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.header-main__mobile-toggle[aria-expanded="true"] .hamburger span:nth-child(2) {
  opacity: 0;
}

.header-main__mobile-toggle[aria-expanded="true"] .hamburger span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* ==========================================================================
   Main Navigation Menu
   ========================================================================== */

.header-main__nav {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  padding-left: var(--spacing-xl, 3rem);
}

.header-menu {
  display: flex;
  align-items: center;
  gap: var(--menu-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-menu li {
  position: relative;
  margin: 0;
  list-style: none;
}

.header-menu > li > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.5rem 0;
  color: #111;
  font-family: "Roboto Flex", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  font-variation-settings: "wght" 500;
  line-height: normal;
  text-decoration: none;
  transition: color 0.2s ease;
  position: relative;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.header-menu > li > a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--header-accent);
  transition: width 0.2s ease;
}

.header-menu > li > a:hover,
.header-menu > li > a:focus,
.header-menu > li.current-menu-item > a,
.header-menu > li.current-menu-ancestor > a {
  color: var(--header-accent);
  text-decoration: none;
}

.header-menu > li > a:hover::after,
.header-menu > li > a:focus::after,
.header-menu > li.current-menu-item > a::after,
.header-menu > li.current-menu-ancestor > a::after {
  width: 100%;
}

/* Menu Icons */
.menu-icon {
  flex-shrink: 0;
  color: currentColor;
}

.menu-icon--grid {
  margin-right: 6px;
  display: inline-flex;
  align-items: center;
  color: #1a1a1a !important;
  transition: color 0.2s ease;
}

.menu-icon--grid svg {
  color: inherit !important;
  stroke: currentColor !important;
  fill: none;
}

.header-menu > li:hover .menu-icon--grid,
.header-menu > li > a:hover .menu-icon--grid,
.header-menu > li > a:focus .menu-icon--grid {
  color: #ff6b35 !important;
}

.menu-caret {
  flex-shrink: 0;
  margin-left: 6px;
  transition: transform 0.2s ease;
}

.header-menu > li:hover > a .menu-caret,
.header-menu > li > a[aria-expanded="true"] .menu-caret {
  transform: rotate(180deg);
}

/* ==========================================================================
   Menu Backdrop Overlay - Subtle blur when dropdown is open
   ========================================================================== */

.header-menu-backdrop {
  position: fixed;
  top: 110px; /* Below topbar (~40px) + header-main (70px) - trust bar gets overlay */
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 999; /* Below header (1001) but above content */
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
  will-change: opacity;
}

/* Show backdrop when dropdown is visible - using :has() selector */
@supports selector(:has(*)) {
  /* Target when menu item with children is hovered */
  .header-main__inner:has(.header-menu > li.menu-item-has-children:hover) ~ .header-menu-backdrop,
	.header-main__inner:has(.header-menu > li.menu-item-has-children:focus-within) ~ .header-menu-backdrop,
	/* Also support fallback menu structure */
	.header-main__inner:has(.header-menu > li.header-menu__item--has-dropdown:hover) ~ .header-menu-backdrop,
	.header-main__inner:has(.header-menu > li.header-menu__item--has-dropdown:focus-within) ~ .header-menu-backdrop {
    opacity: 1;
    visibility: visible;
  }

  /* Hide header border and shadow when dropdown is open */
  .header-main:has(.header-menu > li.menu-item-has-children:hover),
  .header-main:has(.header-menu > li.menu-item-has-children:focus-within),
  .header-main:has(.header-menu > li.header-menu__item--has-dropdown:hover),
  .header-main:has(
    .header-menu > li.header-menu__item--has-dropdown:focus-within
  ) {
    border-bottom-color: transparent;
    box-shadow: none;
  }
}

/* JS fallback class for browsers without :has() support */
.header-menu-backdrop.is-active {
  opacity: 1;
  visibility: visible;
}

/* JS fallback - hide border and shadow when dropdown is active */
.header-main.dropdown-active {
  border-bottom-color: transparent;
  box-shadow: none;
}

/* Adjust backdrop position when header is sticky (topbar scrolled away) */
.site-header.is-sticky .header-menu-backdrop {
  top: 70px; /* Only header-main height when sticky */
}

/* Hide backdrop on mobile - mobile menu has its own overlay */
@media (max-width: 1024px) {
  .header-menu-backdrop {
    display: none;
  }
}

/* ==========================================================================
   Dropdown Menus
   ========================================================================== */

.header-menu__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background-color: var(--header-bg);
  border: 1px solid var(--header-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 0.75rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease,
    transform 0.2s ease;
  z-index: 1100; /* Must be higher than trust bar (1000) */
  list-style: none;
  margin: 0;
}

.header-menu > li:hover > .header-menu__dropdown,
.header-menu > li:focus-within > .header-menu__dropdown,
.header-menu > li > a[aria-expanded="true"] + .header-menu__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header-menu__dropdown li {
  margin: 0;
}

.header-menu__dropdown a {
  display: block;
  padding: 0.625rem 1.25rem;
  color: #111;
  font-family: "Roboto Flex", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.header-menu__dropdown a:hover,
.header-menu__dropdown a:focus {
  background-color: rgba(255, 107, 53, 0.08);
  color: var(--header-accent);
  text-decoration: none;
}

/* Sub-dropdown (nested) */
.header-menu__sub-dropdown {
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 200px;
  background-color: var(--header-bg);
  border: 1px solid var(--header-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 0.75rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(10px);
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease,
    transform 0.2s ease;
  z-index: 1101; /* Must be higher than parent dropdown */
  list-style: none;
  margin: 0;
}

.header-menu__dropdown li:hover > .header-menu__sub-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* ==========================================================================
   Right Section Container
   ========================================================================== */

.header-main__right {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg, 2rem);
  /* Allow shrinking so the search bar can narrow instead of overflowing.
	   The icons themselves stay fixed via .header-main__icons. */
  flex-shrink: 1;
  min-width: 0;
}

/* ==========================================================================
   Search Bar - 400×50px - Figma Pixel-Perfect
   ========================================================================== */

.header-search {
  position: relative;
  /* Prefer --search-width, but shrink down to --search-min-width when the
	   header runs out of room instead of overflowing the container */
  width: var(--search-width);
  min-width: var(--search-min-width, 200px);
  flex: 0 1 var(--search-width);
}

.header-search__form {
  position: relative;
  width: 100%;
}

.header-search__input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  /* Follow the parent (which shrinks) rather than a fixed 400px */
  width: 100%;
  height: 50px;
  background: #fff;
  border: 1px solid #d5dae1;
  border-radius: 8px;
  overflow: hidden;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.header-search__input-wrapper:hover {
  border-color: #b8c0cc;
}

.header-search__input-wrapper:focus-within {
  border-color: var(--header-accent);
  border-width: 2px;
  box-shadow:
    0 0 0 4px rgba(255, 107, 53, 0.15),
    0 4px 16px rgba(255, 107, 53, 0.12);
  background: #fffaf8;
}

.header-search__icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: #999999;
  pointer-events: none;
  flex-shrink: 0;
  z-index: 1;
}

.header-search__input {
  width: 100%;
  height: 100%;
  padding: 0 44px 0 50px;
  border: none;
  background: transparent;
  font-size: 14px;
  font-family: inherit;
  font-weight: 400;
  color: var(--header-text);
  outline: none;
  box-sizing: border-box;
}

.header-search__input::placeholder {
  color: #999999;
  font-weight: 400;
  transition: opacity 0.2s ease;
}

/* Animated placeholder - smooth rendering */
.header-search__input {
  /* Enable GPU acceleration for smoother placeholder updates */
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Prevent layout shifts during animation */
  will-change: contents;
}

.header-search__input:not(:focus)::placeholder {
  opacity: 1;
}

.header-search__input:focus::placeholder {
  opacity: 0.6;
}

.header-search__input::-webkit-search-cancel-button,
.header-search__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* Remove default browser styling */
.header-search__input::-ms-clear {
  display: none;
}

.header-search__clear {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: #999999;
  cursor: pointer;
  border-radius: 50%;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
  z-index: 1;
}

.header-search__clear:hover,
.header-search__clear:focus {
  background-color: rgba(0, 0, 0, 0.08);
  color: var(--header-text);
}

/* Override global form styles for header search */
.header-search .header-search__input,
.header-search input[type="search"].header-search__input {
  width: 100%;
  height: 100%;
  padding: 0 44px 0 50px;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: 14px;
  font-family: inherit;
  font-weight: 400;
  color: var(--header-text);
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.header-search .header-search__input:focus,
.header-search input[type="search"].header-search__input:focus {
  border: none;
  box-shadow: none;
  outline: none;
}

/* ==========================================================================
   AJAX Search Results Dropdown
   ========================================================================== */

.header-search__results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  max-height: 480px;
  background-color: var(--header-bg);
  border: 1px solid var(--header-border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease,
    transform 0.2s ease;
  z-index: 300;
}

.header-search__results.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header-search__results[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Loading State */
.header-search__loading {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  color: var(--header-text-light);
  font-size: 0.875rem;
}

.header-search__spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--header-border);
  border-top-color: var(--header-accent);
  border-radius: 50%;
  animation: ksq-spin 0.8s linear infinite;
}

@keyframes ksq-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Results List */
.header-search__results-list {
  max-height: 360px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--header-border) transparent;
}

.header-search__results-list::-webkit-scrollbar {
  width: 6px;
}

.header-search__results-list::-webkit-scrollbar-track {
  background: transparent;
}

.header-search__results-list::-webkit-scrollbar-thumb {
  background-color: var(--header-border);
  border-radius: 3px;
}

/* Individual Result Item */
.header-search__result-item {
  transition: background-color 0.15s ease;
  border-bottom: 1px solid #f3f4f6;
}

.header-search__result-item:last-child {
  border-bottom: none;
}

.header-search__result-item.is-focused,
.header-search__result-item:hover {
  background-color: rgba(255, 107, 53, 0.04);
}

.header-search__result-link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--header-text);
}

.header-search__result-link:hover,
.header-search__result-link:focus {
  text-decoration: none;
}

/* Product Image - 44×44px */
.header-search__result-image {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
}

.header-search__result-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Product Info */
.header-search__result-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.header-search__result-title {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--header-text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.header-search__result-price {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--header-text);
}

.header-search__result-price del {
  color: #9ca3af;
  font-weight: 400;
  font-size: 0.6875rem;
  margin-right: 4px;
}

.header-search__result-price ins {
  text-decoration: none;
  color: var(--header-accent);
}

/* Star Rating */
.header-search__result-rating {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 1px;
}

.header-search__result-stars {
  display: flex;
  align-items: center;
  gap: 1px;
}

.header-search__result-stars .only-star {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

.header-search__result-rating-count {
  font-size: 0.625rem;
  color: #6b7280;
  font-weight: 500;
}

/* Universal star classes for search */
.only-star {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

/* View All Link */
.header-search__view-all {
  display: none;
  padding: 14px 16px;
  text-align: center;
  color: var(--header-accent);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  border-top: 1px solid var(--header-border);
  transition: background-color 0.15s ease;
}

.header-search__view-all:hover,
.header-search__view-all:focus {
  background-color: rgba(255, 107, 53, 0.05);
  text-decoration: none;
}

/* No Results Message */
.header-search__no-results {
  display: none;
  padding: 32px 16px;
  text-align: center;
  color: var(--header-text-light);
  font-size: 0.875rem;
}

/* ==========================================================================
   Search Suggestions Panel (shows on focus before typing)
   ========================================================================== */

.header-search__suggestions {
  display: none;
  padding: 8px 0;
}

.header-search__live-results {
  display: none;
}

.header-search__suggestions-loading {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  color: var(--header-text-light);
  font-size: 0.875rem;
}

/* Section Headers */
.header-search__section {
  padding: 8px 12px;
}

.header-search__section:first-child {
  padding-top: 6px;
}

.header-search__section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px 0;
  padding: 0;
  font-size: 0.625rem;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.header-search__section-title svg {
  width: 12px;
  height: 12px;
  opacity: 0.6;
}

/* Categories List - Single line compact chips */
.header-search__categories-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.header-search__categories-list::-webkit-scrollbar {
  display: none;
}

.header-search__category-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--header-text);
  text-decoration: none;
  transition: all 0.15s ease;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.header-search__category-item:hover,
.header-search__category-item.is-focused {
  background: #fff7ed;
  border-color: var(--header-accent);
  color: var(--header-accent);
  text-decoration: none;
}

.header-search__category-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
}

.header-search__category-icon svg {
  width: 10px;
  height: 10px;
  color: var(--header-accent);
}

.header-search__category-img {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
}

.header-search__category-name {
  flex: 1;
  white-space: nowrap;
}

.header-search__category-count {
  font-size: 0.5625rem;
  font-weight: 600;
  color: #9ca3af;
  margin-left: 2px;
}

/* Trending Products List */
.header-search__trending-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.header-search__trending-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--header-text);
  transition: all 0.15s ease;
  border-bottom: 1px solid #f3f4f6;
}

.header-search__trending-item:last-child {
  border-bottom: none;
}

.header-search__trending-item:hover,
.header-search__trending-item.is-focused {
  background: rgba(255, 107, 53, 0.04);
  text-decoration: none;
}

.header-search__trending-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* Rank colors - gold, silver, bronze */
.header-search__trending-item:nth-child(1) .header-search__trending-rank {
  background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);
  color: #78350f;
}

.header-search__trending-item:nth-child(2) .header-search__trending-rank {
  background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
  color: #374151;
}

.header-search__trending-item:nth-child(3) .header-search__trending-rank {
  background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
  color: #9a3412;
}

.header-search__trending-image {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
  background: #f9fafb;
  flex-shrink: 0;
  border: 1px solid #e5e7eb;
}

.header-search__trending-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header-search__trending-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.header-search__trending-title {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--header-text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.header-search__trending-price {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--header-text);
}

.header-search__trending-price del {
  color: #9ca3af;
  font-weight: 400;
  font-size: 0.625rem;
  margin-right: 4px;
}

.header-search__trending-price ins {
  text-decoration: none;
  color: #dc2626;
}

/* Divider between sections */
.header-search__section--trending {
  border-top: 1px solid #f0f1f3;
  margin-top: 2px;
  padding-top: 6px;
}

/* Trending Product Rating Stars */
.header-search__trending-rating {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 0;
}

.header-search__trending-stars {
  display: flex;
  align-items: center;
  gap: 1px;
}

.header-search__trending-stars .only-star {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

.header-search__trending-review-count {
  font-size: 0.5625rem;
  color: #6b7280;
  font-weight: 500;
}

/* ==========================================================================
   Header Icons - 24×24px
   ========================================================================== */

/* Header Icons Container - Figma: Frame 1410087165 */
.header-main__icons {
  display: flex;
  align-items: center;
  gap: 24px; /* Figma: gap 24px */
  /* Icons keep their size - only the search bar absorbs the shrink */
  flex-shrink: 0;
}

/* Individual Header Icon - Figma: 32×32px icons */
.header-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111111;
  text-decoration: none;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: color 0.2s ease;
  width: 32px;
  height: 32px;
}

.header-icon:hover,
.header-icon:focus {
  color: #ff6b35;
  text-decoration: none;
  outline: none;
}

.header-icon svg {
  color: inherit;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

/* Cart icon desktop/mobile visibility */
.cart-icon-desktop {
  display: flex;
}

.cart-icon-mobile {
  display: none;
}

/* Language Selector - Figma: Frame 1410087161 */
.header-icon--lang {
  position: relative;
  width: auto;
  height: auto;
}

.header-icon--lang .header-icon__btn {
  display: flex;
  align-items: center;
  gap: 8px; /* Figma: gap 8px between flag and arrow */
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--header-text);
  transition: color 0.2s ease;
}

.header-icon--lang .header-icon__btn:hover,
.header-icon--lang .header-icon__btn:focus {
  color: var(--header-accent);
  outline: none;
}

/* Flag - Figma: 30px × 18px with 2px border-radius */
.header-icon__flag {
  width: 30px !important;
  height: 18px !important;
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}

.header-icon__flag svg {
  width: 30px !important;
  height: 18px !important;
  min-width: 30px !important;
  min-height: 18px !important;
  border-radius: 2px;
  display: block;
}

/* Down Arrow Caret - Figma: 8px × 4px, 1.5px border #111111 */
.header-icon__caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.header-icon__caret svg {
  width: 8px !important;
  height: 5px !important;
  min-width: 8px !important;
  stroke-width: 1.5px !important;
  stroke: #111111 !important;
  color: #111111;
  display: block;
}

.header-icon--lang .header-icon__btn[aria-expanded="true"] .header-icon__caret {
  transform: rotate(180deg);
}

/* Language Dropdown */
.header-icon__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  background-color: var(--header-bg);
  border: 1px solid var(--header-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease,
    transform 0.2s ease;
  z-index: 250;
}

.header-icon--lang:hover .header-icon__dropdown,
.header-icon--lang:focus-within .header-icon__dropdown,
.header-icon--lang
  .header-icon__btn[aria-expanded="true"]
  + .header-icon__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header-lang-dropdown__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: var(--header-text);
  text-decoration: none;
  font-size: 0.875rem;
  transition: background-color 0.15s ease;
}

.header-lang-dropdown__item:hover,
.header-lang-dropdown__item:focus {
  background-color: rgba(255, 107, 53, 0.08);
  text-decoration: none;
}

.header-lang-dropdown__item--active {
  font-weight: 500;
  color: var(--header-accent);
}

/* Cart Badge */
.header-icon__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: var(--icon-badge-size);
  height: var(--icon-badge-size);
  padding: 0 4px;
  background-color: var(--header-accent);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  line-height: var(--icon-badge-size);
  text-align: center;
  border-radius: 9px;
  transition: transform 0.2s ease;
}

.header-icon__badge.hidden {
  display: none;
}

.header-icon__badge.pulse {
  animation: badgePulse 0.3s ease;
}

@keyframes badgePulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

/* ==========================================================================
   Sticky Header
   ========================================================================== */

/* ==========================================================================
   Sticky Header - No extra padding needed
   Header and trust bar use position: sticky, content flows naturally
   ========================================================================== */

/* ==========================================================================
   Mobile Responsive - Tablet
   ========================================================================== */

@media (max-width: 1400px) {
  .header-main__container {
    padding: 0 32px;
  }
}

@media (max-width: 1200px) {
  :root {
    --search-width: 320px;
    --menu-gap: 32px;
  }

  .header-main__container {
    padding: 0 24px;
  }

  .header-main__nav {
    padding-left: var(--spacing-lg, 2rem);
  }
}

@media (max-width: 1024px) {
  :root {
    --search-width: 280px;
    --menu-gap: 24px;
  }

  /* Not enough room for logo + menu + search + icons at this width -
     hide the search bar so the rest of the header fits */
  .header-search {
    display: none;
  }

  .header-main__container {
    padding: 0 20px;
  }

  .header-menu > li > a {
    font-size: 0.875rem;
  }

  .header-main__icons {
    gap: 12px;
  }
}

/* ==========================================================================
   Laptop - Mild Spacing Reduction
   Full content (logo 206 + menu ~689 + search 400 + icons 206 + gaps) needs
   roughly 1660px. Below that, start reclaiming space from the gaps and let
   the search bar shrink, rather than hiding anything.
   ========================================================================== */

@media (max-width: 1660px) and (min-width: 1201px) {
  :root {
    --menu-gap: 16px;
    --search-min-width: 180px;
  }

  .header-main__container {
    padding: 0 24px;
  }

  .header-main__nav {
    padding-left: 16px;
  }

  .header-main__inner {
    gap: 16px;
  }

  .header-main__right {
    gap: 16px;
  }

  /* The menu is the widest element - the 18px default is what pushes the
	   header over at these widths */
  .header-menu > li > a {
    font-size: 0.9375rem;
  }
}

/* ==========================================================================
   Tablet - Tightened Spacing
   The logo, menu, search bar and icons together exceed the available width
   here. Reclaim room by reducing the spacing between them (and letting the
   search bar shrink) rather than hiding any of them.
   ========================================================================== */

@media (max-width: 1200px) and (min-width: 1025px) {
  :root {
    --menu-gap: 14px;
    --search-min-width: 100px;
  }

  .header-main__container {
    padding: 0 16px;
  }

  .header-main__nav {
    padding-left: 0px;
  }

  .header-main__inner {
    gap: 12px;
  }

  .header-main__right {
    gap: 12px;
  }

  .header-main__icons {
    gap: 12px;
  }

  .header-menu > li > a {
    font-size: 0.8125rem;
  }

  /* The mobile account icon duplicates the desktop one at these widths */
  .header-icon--account-mobile {
    display: none !important;
  }

  /* Tighter insets keep the placeholder readable in the narrowed bar */
  .header-search__icon {
    left: 5px;
  }

  .header-search .header-search__input,
  .header-search input[type="search"].header-search__input {
    padding: 0 5px 0 30px;
    font-size: 0.875rem;
  }
}

/* ==========================================================================
   Mobile Responsive - Mobile
   ========================================================================== */

@media (max-width: 1024px) {
  :root {
    --header-height: 60px;
    --logo-width: 160px;
    --logo-height: 32px;
  }

  .header-main {
    height: 60px;
    min-height: 60px;
    max-height: 60px;
  }

  .header-main__container {
    padding: 0 16px;
  }

  .header-main__inner {
    gap: 12px;
  }

  .header-main__mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    order: -1;
    padding: 0;
    width: 28px;
    height: 28px;
  }

  .header-main__mobile-toggle .mobile-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header-main__mobile-toggle .mobile-toggle-icon svg {
    width: 28px;
    height: 28px;
  }

  .header-main__mobile-toggle .mobile-toggle-close svg {
    width: 28px;
    height: 28px;
  }

  .header-main__mobile-toggle .hamburger {
    display: none;
  }

  /* Mobile wishlist icon: next to hamburger on the left */
  .header-icon--wishlist-mobile {
    display: flex !important;
    align-items: center;
    justify-content: center;
    order: -1;
    position: relative;
    width: 28px;
    height: 28px;
    color: #111111;
    text-decoration: none;
    flex-shrink: 0;
  }

  .header-icon--wishlist-mobile svg {
    width: 28px !important;
    height: 28px !important;
  }

  .header-icon--wishlist-mobile .header-icon__badge {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #ff5100;
    color: #ffffff;
    font-family: "General Sans", "Roboto Flex", sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
    border: 1px solid #ffffff;
  }

  .header-main__logo {
    width: auto;
    flex: 1;
    justify-content: center;
  }

  /* Hide desktop elements on mobile */
  .header-search,
  .header-icon--lang {
    display: none;
  }

  /* Hide wishlist and account on mobile - Figma shows only cart */
  .header-icon--wishlist,
  .header-icon--account {
    display: none !important;
  }

  /* Cart icon styling for mobile */
  .header-icon--cart {
    position: relative;
    width: 32px;
    height: 28px;
  }

  .header-icon--cart .cart-icon-desktop {
    display: none;
  }

  .header-icon--cart .cart-icon-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header-icon--cart .cart-icon-mobile svg {
    width: 28px;
    height: 28px;
  }

  .header-icon--cart .header-icon__badge {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: #ff5100;
    border: 1px solid #ffffff;
    border-radius: 50%;
    font-family: "General Sans", "Roboto Flex", sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    color: #ffffff;
    box-sizing: border-box;
  }

  /* Mobile Navigation Drawer */
  .header-main__nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    max-width: 85vw;
    height: 100vh;
    background-color: var(--header-bg);
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.15);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 999;
    overflow-y: auto;
    padding: 80px 24px 24px;
    flex: none;
  }

  .header-main__nav[aria-expanded="true"] {
    transform: translateX(0);
  }

  .header-menu {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
  }

  .header-menu li {
    width: 100%;
    border-bottom: 1px solid var(--header-border);
  }

  .header-menu li:last-child {
    border-bottom: none;
  }

  .header-menu > li > a {
    padding: 16px 0;
    width: 100%;
    justify-content: space-between;
  }

  .header-menu > li > a::after {
    display: none;
  }

  /* Mobile Dropdowns */
  .header-menu__dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0 0 16px 16px;
    display: none;
    background: transparent;
  }

  .header-menu > li.is-open > .header-menu__dropdown,
  .header-menu > li:focus-within > .header-menu__dropdown {
    display: block;
  }

  .header-menu__dropdown a {
    padding: 12px 0;
    font-size: 0.875rem;
  }

  /* Mobile Menu Caret */
  .menu-caret {
    width: 12px;
    height: 8px;
  }

  .header-main__right {
    gap: 0;
    flex-shrink: 0;
  }

  .header-main__icons {
    gap: 20px;
  }

  .header-icon:not(.header-icon--cart):not(.header-icon--account-mobile) svg {
    width: 28px;
    height: 28px;
  }
}

/* ==========================================================================
   Mobile Menu Overlay
   ========================================================================== */

.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* ==========================================================================
   Header Avatar (Logged-In State)
   ========================================================================== */

.header-icon--account {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.header-icon--account.logged-in {
  padding: 0;
}

.header-icon__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid transparent;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease;
}

.header-icon--account:hover .header-icon__avatar,
.header-icon--account:focus .header-icon__avatar {
  border-color: var(--header-accent, #ff6b35);
  transform: scale(1.05);
}

.header-icon__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header-icon__initials {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-transform: uppercase;
}

/* Legacy classes for template-parts/header/header-main.php */
.header-main__action--account.logged-in {
  padding: 0;
}

.header-main__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid transparent;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease;
}

.header-main__action--account:hover .header-main__avatar,
.header-main__action--account:focus .header-main__avatar {
  border-color: var(--header-accent);
  transform: scale(1.05);
}

.header-main__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header-main__initials {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-transform: uppercase;
}

/* ==========================================================================
   Account Dropdown (Logged-in users)
   ========================================================================== */

.header-account-dropdown {
  position: relative;
}

.header-account-dropdown__trigger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-account-dropdown__trigger:hover .header-icon__avatar,
.header-account-dropdown__trigger:focus .header-icon__avatar {
  border-color: var(--header-accent, #ff6b35);
  transform: scale(1.05);
}

.header-account-dropdown__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: -10px;
  width: 280px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  padding: 4px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease,
    transform 0.2s ease;
  z-index: 1100;
}

.header-account-dropdown__menu::before {
  content: "";
  position: absolute;
  top: -8px;
  right: 18px;
  width: 16px;
  height: 16px;
  background: #fff;
  transform: rotate(45deg);
  border-radius: 3px 0 0 0;
  box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.04);
  z-index: 1;
}

.header-account-dropdown.is-open .header-account-dropdown__menu,
.header-account-dropdown__trigger[aria-expanded="true"]
  + .header-account-dropdown__menu,
.header-account-dropdown:hover .header-account-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header-account-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  width: 100%;
  height: 14px;
}

.header-account-dropdown__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  color: #1a1a1a;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.header-account-dropdown__item:hover {
  background-color: #f5f5f5;
  color: var(--header-accent, #ff6b35);
}

.header-account-dropdown__item svg {
  flex-shrink: 0;
  color: #666;
  transition: color 0.15s ease;
}

.header-account-dropdown__item:hover svg {
  color: var(--header-accent, #ff6b35);
}

.header-account-dropdown__divider {
  height: 1px;
  background: #e5e5e5;
  margin: 4px 0;
}

.header-account-dropdown__item--logout {
  color: #dc2626;
}

.header-account-dropdown__item--logout:hover {
  background-color: #fef2f2;
  color: #dc2626;
}

.header-account-dropdown__item--logout svg {
  color: #dc2626;
}

.header-account-dropdown__item--logout:hover svg {
  color: #dc2626;
}

/* Menu Item Badges & Values */
.header-account-dropdown__badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.header-account-dropdown__badge--warning {
  background: #fef3c7;
  color: #d97706;
}

.header-account-dropdown__badge--success {
  background: #d1fae5;
  color: #059669;
}

/* Profile Status Indicators */
.header-account-dropdown__status {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.header-account-dropdown__status--incomplete {
  background: #fef3c7;
  color: #d97706;
}

.header-account-dropdown__status--complete {
  background: #d1fae5;
  color: #059669;
  padding: 4px 10px;
  border-radius: 10px;
}

.header-account-dropdown__status--complete svg {
  display: block;
  width: 14px;
  height: 14px;
}

.header-account-dropdown__value {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  background: #f3f4f6;
  padding: 2px 8px;
  border-radius: 10px;
}

.header-account-dropdown__value--wallet {
  color: #059669;
  background: #d1fae5;
}

.header-account-dropdown__item:hover .header-account-dropdown__value {
  background: #e5e7eb;
}

.header-account-dropdown__item:hover .header-account-dropdown__value--wallet {
  background: #a7f3d0;
}

/* User Header in Dropdown */
.header-account-dropdown__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}

.header-account-dropdown__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}

.header-account-dropdown__user-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.header-account-dropdown__name {
  font-weight: 600;
  font-size: 13px;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-account-dropdown__email {
  font-size: 11px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Navigation Items */
.header-account-dropdown__nav {
  padding: 4px 0;
}

/* Referral Banner */
.header-account-dropdown__referral {
  background: linear-gradient(135deg, #ff6b35 0%, #e85a28 100%);
  margin: 8px;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.header-account-dropdown__referral-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-account-dropdown__referral-icon {
  font-size: 26px;
  line-height: 1;
}

.header-account-dropdown__referral-text {
  display: flex;
  flex-direction: column;
  color: #fff;
  line-height: 1.35;
}

.header-account-dropdown__referral-text strong {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.header-account-dropdown__referral-text span {
  font-size: 12px;
  opacity: 0.95;
}

.header-account-dropdown__referral-btn {
  background: #fff;
  color: #ff6b35;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 6px;
  text-align: center;
  text-decoration: none;
  transition: all 0.2s ease;
}

.header-account-dropdown__referral-btn:hover {
  background: #fff9f7;
  color: #e85a28;
  transform: translateY(-1px);
}

/* Toast Notification */
.ksq-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #1a1a1a;
  color: #fff;
  padding: 14px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  z-index: 99999;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  max-width: 90vw;
}

.ksq-toast.ksq-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Mobile: span the screen instead of shrink-wrapping the text.
   The base rule centres the toast with left:50% + translateX(-50%) and has no
   width, so on a phone a short message rendered as a small box floating in the
   middle of the screen. Anchoring to both edges gives every message the same
   width and a predictable place to appear.

   Both the transform here AND the one on --visible have to be replaced: the
   base transform carries the translateX(-50%) that the centring relied on, and
   leaving it in place once the toast is edge-anchored pushes it half a screen
   off to the left. */
@media (max-width: 768px) {
  .ksq-toast {
    left: 16px;
    right: 16px;
    /* Clears the floating chat bubble that sits at the bottom-right. */
    bottom: 88px;
    max-width: none;
    transform: translateY(120px);
    padding: 14px 18px;
    border-radius: 10px;
  }

  .ksq-toast.ksq-toast--visible {
    transform: translateY(0);
  }

  .ksq-toast__message {
    /* Long messages wrap rather than stretching the box past the viewport. */
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

.ksq-toast--success {
  background: #059669;
}

.ksq-toast--error {
  background: #dc2626;
}

.ksq-toast--info {
  background: #2563eb;
}

.ksq-toast__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.ksq-toast__icon svg {
  width: 100%;
  height: 100%;
}

/* Mobile: hide dropdown, show in mobile menu instead */
@media (max-width: 1024px) {
  .header-account-dropdown {
    display: none !important;
  }
}

/* ==========================================================================
   Mobile User Account Dropdown
   ========================================================================== */

/* Hide mobile-only icons on desktop */
@media (min-width: 1025px) {
  .header-icon--wishlist-mobile {
    display: none !important;
  }
}
.header-icon--account-mobile {
  display: none !important;
}

/* Show mobile account on tablet and mobile */
@media (max-width: 1024px) {
  .header-icon--account-mobile {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    width: 28px;
    height: 28px;
  }

  .header-icon--account-mobile > svg,
  .header-icon--account-mobile svg {
    width: 28px !important;
    height: 28px !important;
  }

  .header-icon--account-mobile .header-icon__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color 0.2s ease;
  }

  .header-icon--account-mobile:hover .header-icon__avatar,
  .header-icon--account-mobile:focus .header-icon__avatar {
    border-color: var(--header-accent, #ff6b35);
  }

  .header-icon--account-mobile .header-icon__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .header-icon--account-mobile .header-icon__initials {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-transform: uppercase;
  }
}

/* Mobile Account Dropdown Container */
.header-account-dropdown-mobile {
  position: relative;
}

.header-account-dropdown-mobile__trigger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile Account Dropdown Menu */
.header-account-dropdown-mobile__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: -10px;
  width: 280px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px) scale(0.98);
  transform-origin: top right;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease,
    transform 0.2s ease;
  z-index: 1100;
}

/* Arrow pointing to profile icon */
.header-account-dropdown-mobile__menu::before {
  content: "";
  position: absolute;
  top: -8px;
  right: 18px;
  width: 16px;
  height: 16px;
  background: #fff;
  transform: rotate(45deg);
  border-radius: 3px 0 0 0;
  box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.04);
}

.header-account-dropdown-mobile.is-open .header-account-dropdown-mobile__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Mobile dropdown overlay */
.header-account-dropdown-mobile__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1099;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}

.header-account-dropdown-mobile.is-open
  .header-account-dropdown-mobile__overlay {
  opacity: 1;
  visibility: visible;
}

/* Mobile specific dropdown styles */
@media (max-width: 768px) {
  .header-account-dropdown-mobile__menu {
    right: -6px;
    width: 270px;
  }

  .header-account-dropdown-mobile__menu::before {
    right: 14px;
  }

  .header-account-dropdown-mobile__menu .header-account-dropdown__header {
    padding: 14px;
    border-bottom: 1px solid #e5e5e5;
  }

  .header-account-dropdown-mobile__menu .header-account-dropdown__avatar {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }

  .header-account-dropdown-mobile__menu .header-account-dropdown__name {
    font-size: 14px;
  }

  .header-account-dropdown-mobile__menu .header-account-dropdown__email {
    font-size: 11px;
  }

  .header-account-dropdown-mobile__menu .header-account-dropdown__divider {
    display: none;
  }

  .header-account-dropdown-mobile__menu .header-account-dropdown__nav {
    padding: 6px 0;
  }

  .header-account-dropdown-mobile__menu .header-account-dropdown__item {
    padding: 12px 14px;
    font-size: 13px;
  }

  .header-account-dropdown-mobile__menu .header-account-dropdown__item svg {
    width: 18px;
    height: 18px;
  }

  .header-account-dropdown-mobile__menu .header-account-dropdown__referral {
    margin: 6px 10px 10px;
    padding: 14px;
    border-radius: 10px;
  }

  .header-account-dropdown-mobile__menu
    .header-account-dropdown__referral-text
    strong {
    font-size: 14px;
  }

  .header-account-dropdown-mobile__menu
    .header-account-dropdown__referral-text
    span {
    font-size: 12px;
  }

  .header-account-dropdown-mobile__menu .header-account-dropdown__referral-btn {
    padding: 10px 14px;
    font-size: 13px;
  }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  .header-main {
    position: static;
    box-shadow: none;
    border-bottom: 1px solid #000;
  }

  .header-search,
  .header-main__icons,
  .header-main__mobile-toggle {
    display: none !important;
  }

  .header-menu__dropdown {
    display: none !important;
  }
}

/* ==========================================================================
   Accessibility Enhancements
   ========================================================================== */

/* Focus indicators */
.header-menu > li > a:focus-visible,
.header-icon:focus-visible,
.header-search__input:focus-visible,
.header-search__clear:focus-visible {
  outline: 2px solid var(--header-accent);
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .header-menu__dropdown,
  .header-search__results,
  .header-icon__dropdown,
  .menu-caret,
  .header-search__spinner {
    transition: none;
    animation: none;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .header-main {
    border-bottom-width: 2px;
  }

  .header-icon__badge {
    outline: 2px solid var(--header-bg);
  }
}