/**
 * AG redesign theme for wishlist drawer.
 * Golos Text · ink #313131 · cyan #8ae6fe · soft #fafafa.
 * Load AFTER ag-wishlist.css so these rules win.
 */

.ag-wl-ov {
  /* Full-viewport dim — cover header too (user closes via panel X / backdrop). */
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 2147483646 !important;
  background: rgba(49, 49, 49, 0.42) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Never keep the site header above the wishlist dim. */
html[data-ag-wl-open] header {
  z-index: 1 !important;
}

.ag-wl-panel {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  max-width: min(420px, 100%) !important;
  background: #fff !important;
  border-left: 1.5px solid #f1f1f1 !important;
  box-shadow: -24px 0 64px rgba(49, 49, 49, 0.16) !important;
  font-family: var(--font-golos), "Golos Text", system-ui, -apple-system, sans-serif !important;
}

.ag-wl-ph {
  padding: 22px 22px 16px !important;
  border-bottom: 1px solid #f1f1f1 !important;
  background: #fff !important;
}

.ag-wl-pt {
  margin: 0 !important;
  font: 700 22px / 1.2 inherit !important;
  color: #313131 !important;
  letter-spacing: -0.4px !important;
}

.ag-wl-ps {
  margin: 6px 0 0 !important;
  font: 500 13.5px / 1.4 inherit !important;
  color: #848484 !important;
}

.ag-wl-count {
  background: rgba(138, 230, 254, 0.35) !important;
  color: #151515 !important;
  font: 700 12px / 1 inherit !important;
  min-height: 26px !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
}

.ag-wl-count[hidden],
.ag-wl-count:empty {
  display: none !important;
}

.ag-wl-x {
  width: 40px !important;
  height: 40px !important;
  border-radius: 100px !important;
  background: #fafafa !important;
  border: 1.5px solid #f1f1f1 !important;
  color: #313131 !important;
}

.ag-wl-x:hover {
  background: #fff !important;
  border-color: #8ae6fe !important;
  color: #313131 !important;
}

.ag-wl-scroll {
  background: #fff !important;
  padding: 20px 18px 40px !important;
}

.ag-wl-empty {
  gap: 14px !important;
  padding: 72px 28px !important;
  color: #848484 !important;
  font: 500 14.5px / 1.55 inherit !important;
}

.ag-wl-empty-ic {
  width: 76px !important;
  height: 76px !important;
  border-radius: 22px !important;
  background: linear-gradient(145deg, #fef2f2, #fff7f7) !important;
  border: 1.5px solid rgba(239, 68, 68, 0.18) !important;
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.08) !important;
}

.ag-wl-empty h3 {
  margin: 0 !important;
  font: 700 20px / 1.25 inherit !important;
  color: #313131 !important;
  letter-spacing: -0.3px !important;
}

.ag-wl-empty p {
  margin: 0 !important;
  max-width: 280px !important;
  color: #848484 !important;
}

.ag-wl-empty-cta {
  margin-top: 8px !important;
  min-height: 46px !important;
  padding: 0 24px !important;
  border-radius: 100px !important;
  background: #313131 !important;
  color: #fafafa !important;
  font: 600 14px / 1 inherit !important;
  letter-spacing: -0.2px !important;
}

.ag-wl-empty-cta:hover {
  background: #151515 !important;
}

.ag-wl-card {
  border: 1.5px solid #f1f1f1 !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: none !important;
  padding: 14px !important;
  margin-bottom: 12px !important;
}

.ag-wl-card:hover {
  border-color: rgba(138, 230, 254, 0.9) !important;
  box-shadow: 0 10px 28px -12px rgba(1, 113, 227, 0.16) !important;
}

.ag-wl-card-media {
  width: 84px !important;
  height: 84px !important;
  border-radius: 16px !important;
  background: #fafafa !important;
  border: 1.5px solid #f1f1f1 !important;
}

.ag-wl-card-name {
  font: 700 14.5px / 1.3 inherit !important;
  color: #313131 !important;
  letter-spacing: -0.2px !important;
}

.ag-wl-card-name:hover {
  color: #0171e3 !important;
}

.ag-wl-chip {
  background: #fafafa !important;
  border: 1px solid #f1f1f1 !important;
  color: #313131 !important;
  font: 600 11px / 1.2 inherit !important;
}

.ag-wl-price-now {
  font: 700 17px / 1 inherit !important;
  color: #313131 !important;
  letter-spacing: -0.3px !important;
}

.ag-wl-open {
  background: #313131 !important;
  color: #fafafa !important;
  border-radius: 100px !important;
  font: 600 12px / 1 inherit !important;
}

.ag-wl-open:hover {
  background: #151515 !important;
}

.ag-wl-mail-btn {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border-color: #f1f1f1 !important;
  font-family: inherit !important;
}

.ag-wl-mail-btn.is-on {
  background: rgba(138, 230, 254, 0.35) !important;
  border-color: #8ae6fe !important;
  color: #151515 !important;
}

.ag-wl-heart.ag-wl-animate-off .ag-wl-h-fill {
  animation: agWlDown .28s cubic-bezier(.22, .68, .35, 1) forwards !important;
}

.ag-wl-remove {
  border: 1.5px solid #f1f1f1 !important;
  color: #848484 !important;
}

.ag-wl-remove:hover {
  color: #e8364e !important;
  border-color: #fecaca !important;
  background: #fef2f2 !important;
}

@media (max-width: 520px) {
  .ag-wl-panel {
    max-width: 100% !important;
  }

  .ag-wl-ph {
    padding: 18px 16px 14px !important;
  }

  .ag-wl-pt {
    font-size: 20px !important;
  }
}