/* ==========================================================================
   GIX Wishlist Menu — professional structure + dark/light (v3.8.5)
   ========================================================================== */

.gix-wl,
.gix-wl__drawer,
.gix-wl__overlay {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.gix-wl *,
.gix-wl *::before,
.gix-wl *::after,
.gix-wl__drawer *,
.gix-wl__drawer *::before,
.gix-wl__drawer *::after {
  box-sizing: border-box;
}

.elementor-widget-gix-wishlist,
.elementor-widget-gix-wishlist > .elementor-widget-container {
  overflow: visible !important;
}

/* Tokens — dark default */
.gix-wl,
.gix-wl__drawer {
  --wl-bg: #0a0a0a;
  --wl-surface: #111111;
  --wl-elevated: #1a1a1a;
  --wl-line: rgba(255, 255, 255, 0.08);
  --wl-line-2: rgba(255, 255, 255, 0.14);
  --wl-text: #f4f4f5;
  --wl-muted: #a1a1aa;
  --wl-faint: #71717a;
  --wl-inverse: #ffffff;
  --wl-inverse-text: #0a0a0a;
  --wl-w: 400px;
  --wl-radius: 10px;
  --wl-radius-sm: 6px;
  --wl-z-overlay: 2147483000;
  --wl-z-drawer: 2147483001;
  --wl-dur: 200ms;
  --wl-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

.gix-wl[data-gix-theme="light"],
.gix-wl__drawer[data-gix-theme="light"] {
  --wl-bg: #fafafa;
  --wl-surface: #ffffff;
  --wl-elevated: #f4f4f5;
  --wl-line: rgba(0, 0, 0, 0.08);
  --wl-line-2: rgba(0, 0, 0, 0.12);
  --wl-text: #0a0a0a;
  --wl-muted: #52525b;
  --wl-faint: #71717a;
  --wl-inverse: #0a0a0a;
  --wl-inverse-text: #fafafa;
}

/* Trigger */
.gix-wl {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--wl-text);
}

.gix-wl__trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 40px !important;
  padding: 8px 12px !important;
  background: transparent !important;
  border: 1px solid var(--wl-line-2) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--wl-text) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transition: background var(--wl-dur), border-color var(--wl-dur) !important;
}

.gix-wl__trigger:hover,
.gix-wl__trigger[aria-expanded="true"] {
  background: rgba(127, 127, 127, 0.08) !important;
  border-color: var(--wl-muted) !important;
}

.gix-wl__badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 9px !important;
  background: var(--wl-inverse) !important;
  color: var(--wl-inverse-text) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.gix-wl__badge--hidden {
  transform: scale(0) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.gix-wl__badge.is-pulsing {
  animation: wl-pop 0.35s ease;
}

@keyframes wl-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Overlay */
.gix-wl__overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: var(--wl-z-overlay) !important;
  background: rgba(0, 0, 0, 0.55) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity var(--wl-dur) var(--wl-ease), visibility var(--wl-dur) var(--wl-ease) !important;
  cursor: pointer !important;
}

.gix-wl__overlay.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Drawer */
.gix-wl__drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: var(--wl-w) !important;
  max-width: 100vw !important;
  z-index: var(--wl-z-drawer) !important;
  background: var(--wl-surface) !important;
  color: var(--wl-text) !important;
  border-left: 1px solid var(--wl-line-2) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.35) !important;
  transform: translateX(105%) !important;
  visibility: hidden !important;
  transition: transform var(--wl-dur) var(--wl-ease), visibility var(--wl-dur) var(--wl-ease) !important;
}

.gix-wl__drawer.is-open {
  transform: translateX(0) !important;
  visibility: visible !important;
}

/* Header */
.gix-wl__drawer-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 16px 18px !important;
  border-bottom: 1px solid var(--wl-line) !important;
  flex-shrink: 0 !important;
  background: var(--wl-surface) !important;
}

.gix-wl__drawer-title-group {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.gix-wl__drawer-title,
.gix-wl__title {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  letter-spacing: -0.02em !important;
  color: var(--wl-text) !important;
}

.gix-wl__drawer-count,
.gix-wl__count-label,
[data-wl-count-num] {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--wl-faint) !important;
  font-variant-numeric: tabular-nums !important;
}

.gix-wl__close,
.gix-wl__close-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--wl-radius-sm) !important;
  color: var(--wl-faint) !important;
  cursor: pointer !important;
  font-size: 18px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.gix-wl__close:hover,
.gix-wl__close-btn:hover {
  background: var(--wl-elevated) !important;
  border-color: var(--wl-line-2) !important;
  color: var(--wl-text) !important;
}

/* Toolbar (optional) */
.gix-wl__toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--wl-line) !important;
  background: var(--wl-bg) !important;
}

.gix-wl__toolbar button,
.gix-wl__filter-tab,
.gix-wl__sort-tab {
  height: 28px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border: 1px solid var(--wl-line) !important;
  background: transparent !important;
  color: var(--wl-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

.gix-wl__toolbar button.is-active,
.gix-wl__filter-tab.is-active {
  background: var(--wl-inverse) !important;
  color: var(--wl-inverse-text) !important;
  border-color: var(--wl-inverse) !important;
}

/* Body / items — simple CX layout (v3.8.6) */
.gix-wl__body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  position: relative !important;
  min-height: 140px !important;
  background: var(--wl-surface) !important;
}

.gix-wl__items {
  list-style: none !important;
  margin: 0 !important;
  padding: 8px 0 !important;
}

/*
  Item grid:
  [ thumb ] [ name + price ] [ remove ]
  [     Add to cart (full)           ]
*/
.gix-wl__item {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) 32px !important;
  grid-template-areas:
    "thumb info remove"
    "action action action" !important;
  gap: 10px 12px !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--wl-line) !important;
  align-items: start !important;
  transition: background var(--wl-dur) !important;
}

.gix-wl__item:last-child {
  border-bottom: 0 !important;
}

.gix-wl__item:hover {
  background: rgba(127, 127, 127, 0.04) !important;
}

.gix-wl__item-thumb {
  grid-area: thumb !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: var(--wl-radius-sm) !important;
  overflow: hidden !important;
  border: 1px solid var(--wl-line) !important;
  background: var(--wl-elevated) !important;
  display: block !important;
  flex-shrink: 0 !important;
}

.gix-wl__item-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.gix-wl__item-info {
  grid-area: info !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding-top: 2px !important;
}

.gix-wl__item-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--wl-text) !important;
  text-decoration: none !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.gix-wl__item-name:hover {
  opacity: 0.8 !important;
}

.gix-wl__item-price {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--wl-text) !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.2 !important;
}

.gix-wl__item-price del {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--wl-faint) !important;
  margin-right: 6px !important;
}

.gix-wl__item-price ins {
  text-decoration: none !important;
  font-weight: 700 !important;
}

.gix-wl__item-remove {
  grid-area: remove !important;
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--wl-faint) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: end !important;
  transition: color var(--wl-dur), background var(--wl-dur) !important;
}

.gix-wl__item-remove:hover {
  color: var(--wl-text) !important;
  background: rgba(127, 127, 127, 0.12) !important;
}

.gix-wl__item-action {
  grid-area: action !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.gix-wl__item-cart,
.gix-wl__item-add-cart,
.gix-wl__item-cart-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--wl-inverse) !important;
  color: var(--wl-inverse-text) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: opacity var(--wl-dur) !important;
}

.gix-wl__item-cart:hover,
.gix-wl__item-add-cart:hover {
  opacity: 0.9 !important;
  color: var(--wl-inverse-text) !important;
}

.gix-wl__item-cart--link {
  background: transparent !important;
  color: var(--wl-text) !important;
  border: 1px solid var(--wl-line-2) !important;
}

.gix-wl__item-cart--link:hover {
  border-color: var(--wl-muted) !important;
  opacity: 1 !important;
  color: var(--wl-text) !important;
}

/* Hide legacy stacked actions if present */
.gix-wl__item-actions {
  display: none !important;
}

/* Empty state */
.gix-wl__empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 56px 24px !important;
  text-align: center !important;
}

.gix-wl__empty-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  height: 52px !important;
  margin-bottom: 4px !important;
  border-radius: 50% !important;
  background: var(--wl-elevated) !important;
  color: var(--wl-faint) !important;
  border: 1px solid var(--wl-line) !important;
}

.gix-wl__empty-text,
.gix-wl__empty p {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--wl-text) !important;
}

.gix-wl__empty-hint {
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--wl-faint) !important;
  max-width: 220px !important;
  line-height: 1.4 !important;
}

/* Footer */
.gix-wl__footer {
  flex-shrink: 0 !important;
  padding: 14px 16px !important;
  border-top: 1px solid var(--wl-line) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  background: var(--wl-surface) !important;
}

.gix-wl__footer button,
.gix-wl__btn,
.gix-wl__btn-all-cart,
.gix-wl__btn--primary {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 44px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--wl-inverse) !important;
  color: var(--wl-inverse-text) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  cursor: pointer !important;
  gap: 8px !important;
}

.gix-wl__loading {
  display: none !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.3) !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
}

.gix-wl__loading.is-active {
  display: flex !important;
}

.gix-wl__toast {
  position: fixed !important;
  bottom: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(10px) !important;
  z-index: 100100 !important;
  padding: 12px 16px !important;
  border-radius: 8px !important;
  background: var(--wl-surface, #111) !important;
  color: var(--wl-text, #f4f4f5) !important;
  border: 1px solid var(--wl-line-2, rgba(255,255,255,0.12)) !important;
  font-size: 13px !important;
  font-weight: 550 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 160ms ease, transform 160ms ease !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35) !important;
}

.gix-wl__toast.is-visible {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}

@media (max-width: 480px) {
  .gix-wl__drawer {
    width: 100vw !important;
  }
}


/* ==========================================================================
   Header + top actions — refined (v3.8.7)
   ========================================================================== */

.gix-wl__header,
.gix-wl__drawer-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 14px 14px 14px 16px !important;
  border-bottom: 1px solid var(--wl-line) !important;
  flex-shrink: 0 !important;
  background: var(--wl-surface) !important;
  min-height: 56px !important;
}

.gix-wl__header-left,
.gix-wl__drawer-title-group {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.gix-wl__header-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  flex-shrink: 0 !important;
  border-radius: 8px !important;
  background: var(--wl-elevated) !important;
  border: 1px solid var(--wl-line) !important;
  color: var(--wl-text) !important;
}

.gix-wl__header-icon svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}

.gix-wl__title,
.gix-wl__drawer-title {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  letter-spacing: -0.02em !important;
  color: var(--wl-text) !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.gix-wl__count-label,
.gix-wl__drawer-count {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  background: var(--wl-elevated) !important;
  border: 1px solid var(--wl-line) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--wl-muted) !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.gix-wl__count-label [data-wl-count-num],
.gix-wl__drawer-count-num {
  color: var(--wl-text) !important;
  font-weight: 700 !important;
}

/* Top-right action buttons cluster */
.gix-wl__header-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.gix-wl__share-btn,
.gix-wl__clear-btn,
.gix-wl__close-btn,
.gix-wl__close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--wl-faint) !important;
  cursor: pointer !important;
  line-height: 1 !important;
  transition:
    background 150ms ease,
    color 150ms ease,
    border-color 150ms ease !important;
}

.gix-wl__share-btn svg,
.gix-wl__clear-btn svg,
.gix-wl__close-btn svg,
.gix-wl__close svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  pointer-events: none !important;
}

.gix-wl__share-btn:hover,
.gix-wl__clear-btn:hover {
  background: var(--wl-elevated) !important;
  border-color: var(--wl-line-2) !important;
  color: var(--wl-text) !important;
}

.gix-wl__close-btn:hover,
.gix-wl__close:hover {
  background: var(--wl-elevated) !important;
  border-color: var(--wl-line-2) !important;
  color: var(--wl-text) !important;
}

.gix-wl__share-btn:focus-visible,
.gix-wl__clear-btn:focus-visible,
.gix-wl__close-btn:focus-visible,
.gix-wl__close:focus-visible {
  outline: 1.5px solid var(--wl-text) !important;
  outline-offset: 2px !important;
}

/* Toolbar / sort tabs */
.gix-wl__toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--wl-line) !important;
  background: var(--wl-bg) !important;
  flex-shrink: 0 !important;
}

.gix-wl__sort-tabs {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  align-items: center !important;
}

.gix-wl__sort-tab,
.gix-wl__filter-tab,
.gix-wl__toolbar button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 11px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 1px solid var(--wl-line) !important;
  background: transparent !important;
  color: var(--wl-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease !important;
}

.gix-wl__sort-tab:hover,
.gix-wl__filter-tab:hover,
.gix-wl__toolbar button:hover {
  border-color: var(--wl-line-2) !important;
  color: var(--wl-text) !important;
  background: rgba(127, 127, 127, 0.06) !important;
}

.gix-wl__sort-tab.is-active,
.gix-wl__filter-tab.is-active,
.gix-wl__toolbar button.is-active {
  background: var(--wl-inverse) !important;
  color: var(--wl-inverse-text) !important;
  border-color: var(--wl-inverse) !important;
}

.gix-wl__accent-line {
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--wl-line-2), transparent) !important;
  flex-shrink: 0 !important;
}

/* Body top padding balance with new header */
.gix-wl__body {
  padding-top: 0 !important;
}

.gix-wl__items {
  padding: 6px 0 8px !important;
}

.gix-wl__item {
  padding: 12px 14px !important;
}

.gix-wl__footer {
  padding: 12px 14px 16px !important;
}

/* Header action disabled */
.gix-wl__clear-btn:disabled,
.gix-wl__btn-all-cart:disabled,
.gix-wl__share-btn:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Filter / sort active feedback */
.gix-wl__sort-tab.is-active,
.gix-wl__filter-tab.is-active {
  background: var(--wl-inverse) !important;
  color: var(--wl-inverse-text) !important;
  border-color: var(--wl-inverse) !important;
}

.gix-wl__filter-tabs {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin-left: auto !important;
}

.gix-wl__toolbar {
  justify-content: space-between !important;
}

/* Overlay on body — full viewport, above archive, below drawer */
body > .gix-wl__overlay,
.gix-wl__overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  background: rgba(0, 0, 0, 0.55) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 200ms ease, visibility 200ms ease !important;
  margin: 0 !important;
  border: 0 !important;
}

body > .gix-wl__overlay.is-visible,
.gix-wl__overlay.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

body > .gix-wl__drawer,
.gix-wl__drawer {
  z-index: 100001 !important;
}

body.gix-wl-open {
  overflow: hidden !important;
}

/* Archive grid never shares wishlist drawer styles */
.gix-sr__grid,
.gix-sr__card,
.gix-sr__wish {
  /* isolation only — no drawer coupling */
}



/* ==========================================================================
   Stacking priority — always on top of theme / Elementor / sticky bars
   ========================================================================== */
html body .gix-wl__overlay,
html body > .gix-wl__overlay,
.gix-wl__overlay.is-visible,
body > .gix-wl__overlay.is-visible {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 2147483000 !important;
  pointer-events: auto !important;
}

html body .gix-wl__drawer,
html body > .gix-wl__drawer,
.gix-wl__drawer.is-open,
body > .gix-wl__drawer.is-open {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 2147483001 !important;
  pointer-events: auto !important;
  isolation: isolate !important;
}

html body .gix-wl__toast,
body > .gix-wl__toast {
  z-index: 2147483002 !important;
}

/* Trigger stays above normal content but under drawer */
.gix-wl,
.gix-wl__trigger {
  position: relative;
  z-index: 20;
}