/* ==========================================================================
   WooPlainly – WooCommerce – Wishlist
   ========================================================================= */

.wooplainly-wishlist {
  /* --- Layout scale --- */
  --container-max: 1250px !important;
  --gap-xl: 2.75rem !important; /* ~44px  */
  --gap-lg: 1.5rem !important; /* 24px   */
  --gap-md: 1rem !important; /* 16px   */
  --gap-sm: 0.75rem !important; /* 12px   */

  /* --- Theme tokens (global) --- */
  --bg: var(--wooplainly-color-surface) !important;
  --surface: var(--wooplainly-color-surface-alt) !important;
  --surface-2: color-mix(
    in srgb,
    var(--wooplainly-color-surface) 75%,
    var(--wooplainly-color-surface-contrast) 25%
  ) !important;
  --stroke: var(--wooplainly-color-surface-contrast) !important;

  --text: var(--wooplainly-color-text) !important;
  --muted: var(--wooplainly-color-text-muted) !important;
  --muted-2: var(--wooplainly-color-text-muted-strong) !important;

  --primary: var(--wooplainly-color-primary) !important;
  --primary-600: var(--wooplainly-color-primary-alt) !important;
  --primary-700: var(--wooplainly-color-primary-strong) !important;
  --on-primary: var(--wooplainly-color-on-primary, #fff) !important;

  --danger: var(--wooplainly-color-danger) !important;
  --success: var(--wooplainly-color-success) !important;

  --radius-lg: var(--wooplainly-radius-lg) !important;
  --radius-md: var(--wooplainly-radius-md) !important;
  --radius-sm: var(--wooplainly-radius-sm) !important;

  --shadow: var(--wooplainly-shadow-lg) !important;

  inline-size: min(var(--container-max), 100%) !important;
  margin-inline: auto !important;
  padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 3vw, 2.5rem) !important;
  color: var(--text) !important;
}

/* =========================================================
   LAYOUT
   ========================================================= */

.wooplainly-wishlist__layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) clamp(18.75rem, 32vw, 26.25rem) !important; /* 300–420px */
  gap: clamp(1.5rem, 4vw, 2.75rem) !important;
  align-items: start !important;
}

@media (max-width: 62rem) {
  /* ~992px */
  .wooplainly-wishlist__layout {
    grid-template-columns: 1fr !important;
  }
}

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

.wooplainly-wishlist__header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: clamp(1rem, 4vw, 2rem) !important;
  margin-block-end: clamp(1.5rem, 3vw, 2rem) !important;
}

.wooplainly-wishlist__eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--muted-2) !important;
}

.wooplainly-wishlist__title {
  margin: 0.35rem 0 0.5rem !important;
  font-size: clamp(1.875rem, 4vw, 2.5rem) !important;
  font-weight: 800 !important;
  color: var(--text) !important;
}

.wooplainly-wishlist__subtitle {
  margin: 0 !important;
  max-inline-size: 35ch !important;
  color: var(--muted) !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
}

.wooplainly-wishlist__badge {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  padding: 0.75rem 1rem !important;
  min-inline-size: 8rem !important;
}

.wooplainly-wishlist__badge-count {
  margin: 0 !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

.wooplainly-wishlist__badge-label {
  margin: 0 !important;
  font-size: 0.875rem !important;
  color: var(--muted) !important;
}

/* =========================================================
   LIST
   ========================================================= */

.wooplainly-wishlist__list {
  display: grid !important;
  gap: clamp(1rem, 2vw, 1.5rem) !important;
}

.wooplainly-wishlist__item {
  position: relative !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  gap: clamp(1rem, 3vw, 1.75rem) !important;
  padding: clamp(1rem, 2vw, 1.5rem) !important;
  background: var(--surface) !important;
  border: 1px solid color-mix(in srgb, var(--stroke) 75%, transparent) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow) !important;
}

[data-theme="dark"] .wooplainly-wishlist__item {
  background: var(--surface-2) !important;
  border-color: color-mix(in srgb, var(--stroke) 45%, transparent) !important;
}

.wooplainly-wishlist__media {
  margin: auto;
  inline-size: clamp(6rem, 12vw, 8rem) !important;
  block-size: clamp(6rem, 12vw, 8rem) !important;
  border-radius: var(--radius-sm) !important;
  overflow: hidden !important;
  background: var(--surface-2) !important;
  flex-shrink: 0 !important;
}

.wooplainly-wishlist__media img {
  inline-size: 100% !important;
  block-size: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.wooplainly-wishlist__body {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

.wooplainly-wishlist__title-link {
  margin: 0 !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  text-decoration: none !important;
}

.wooplainly-wishlist__title-link:is(:hover, :focus-visible, :active),
.wooplainly-wishlist__title-link:focus {
  color: var(--primary) !important;
}

/* --- EXCERPT: 2 linie + „… Rozwiń/Zwiń” (bez zmian w HTML) --- */
/* --- EXCERPT poprawione: logika po stronie JS, tylko styl tu --- */
.wooplainly-wishlist__excerpt {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
  max-inline-size: 60ch !important;
  overflow: hidden !important;
  position: relative !important;
}

/* przycisk Rozwiń/Zwiń */
.wooplainly-wishlist__excerpt-toggle {
  position: absolute;
  background: none !important;
  border: none !important;
  color: var(--muted) !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  padding: 0 !important;
  display: inline !important;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  line-height: 1.55 !important;
}

/* cena + status */
.wooplainly-wishlist__price {
  margin: 0 !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

.wooplainly-wishlist__meta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: 0.875rem !important;
  color: var(--muted-2) !important;
}

.wooplainly-wishlist__meta.is-in-stock {
  color: var(--success) !important;
}
.wooplainly-wishlist__meta.is-out-of-stock {
  color: var(--danger) !important;
}

/* actions (prawa kolumna itemu) */
.wooplainly-wishlist__actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
}

/* =========================================================
   BUTTONS (spójne z cart.css / mini-cart.css)
   ========================================================= */

.wooplainly-wishlist__button {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.5rem !important;
  min-height: 3.125rem !important; /* 50px */
  padding: 0.94em 1.875em !important;
  border-radius: var(--radius-sm) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  border: none !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important; /* 15px */
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease !important;
}

.wooplainly-wishlist__button--primary {
  background: var(--primary) !important;
  color: var(--on-primary) !important;
}

.wooplainly-wishlist__button--primary:is(:hover, :focus-visible, :active),
.wooplainly-wishlist__button--primary:focus {
  background: var(--primary-600) !important;
  transform: translateY(-0.125rem) !important; /* -2px */
  box-shadow: 0 0.25rem 0.9375rem
    color-mix(in srgb, var(--primary) 18%, transparent) !important;
  outline: none !important;
}

.wooplainly-wishlist__button--ghost {
  border: 1.5px solid var(--stroke) !important; /* px */
  background: var(--bg) !important;
  color: var(--text) !important;
}

.wooplainly-wishlist__button--ghost:is(:hover, :focus-visible, :active),
.wooplainly-wishlist__button--ghost:focus {
  background: var(--surface-2) !important;
  transform: translateY(-0.125rem) !important;
  box-shadow: 0 0.25rem 0.9375rem
    color-mix(in srgb, var(--text) 18%, transparent) !important;
  outline: none !important;
}

/* remove „x” */
.wooplainly-wishlist__close {
  position: absolute !important;
  display: flex;
  inset-block-start: 0.5rem !important;
  inset-inline-end: 0.5rem !important;
  appearance: none !important;
  background: none !important;
  height: 1.75em;
  width: 1.75em;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 !important;
  border-radius: var(--radius-sm) !important;
  background: transparent !important;
  cursor: pointer !important;
  transition:
    color 0.2s ease,
    background 0.2s ease !important;
  color: var(--muted-2) !important;
}

.wooplainly-wishlist__close:is(:hover, :focus-visible, :active),
.wooplainly-wishlist__close:focus {
  color: var(--danger) !important;
  background: color-mix(in srgb, var(--danger) 14%, transparent) !important;
  outline: none !important;
}

.wooplainly-wishlist__remove-container {
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
}

.wooplainly-wishlist__remove {
  display: flex;
  padding: 0.5em !important;
  border-radius: var(--radius-sm) !important;
  background: transparent !important;
  cursor: pointer !important;
  transition:
    color 0.2s ease,
    background 0.2s ease !important;
  color: var(--muted-2) !important;
}

.wooplainly-wishlist__remove svg {
  height: 1.25em !important;
  width: 1.25em !important;
  stroke: color-mix(in srgb, var(--danger) 85%, var(--text) 15%) !important;
}

.wooplainly-wishlist__remove:is(:hover, :focus-visible, :active) {
  color: var(--danger) !important;
  background: color-mix(in srgb, var(--danger) 14%, transparent) !important;
  outline: none !important;
}

/* =========================================================
   EMPTY STATE
   ========================================================= */
[hidden] {
  display: none !important;
}
.wooplainly-wishlist__empty {
  display: grid;
  gap: 1rem !important;
  justify-items: start !important;
  padding: clamp(2rem, 4vw, 2.75rem) !important;
  background: var(--surface) !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid color-mix(in srgb, var(--stroke) 65%, transparent) !important;
  box-shadow: var(--shadow) !important;
  text-align: left !important;
}

.wooplainly-wishlist__empty-illustration {
  inline-size: clamp(3.5rem, 6vw, 4.5rem) !important;
  block-size: clamp(3.5rem, 6vw, 4.5rem) !important;
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--primary) 15%, transparent) !important;
  position: relative !important;
}

.wooplainly-wishlist__empty-illustration::before,
.wooplainly-wishlist__empty-illustration::after {
  content: "" !important;
  position: absolute !important;
  inset: 30% !important;
  border-radius: 50% !important;
  border: 0.125rem solid color-mix(in srgb, var(--primary) 40%, transparent) !important; /* 2px */
}

.wooplainly-wishlist__empty-title {
  margin: 0 !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

.wooplainly-wishlist__empty-text {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
}

.wooplainly-wishlist__empty-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.75rem 1.5rem !important;
  background: var(--primary) !important;
  color: var(--on-primary) !important;
  border-radius: var(--radius-md) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow) !important;
}

.wooplainly-wishlist__empty-link:is(:hover, :focus-visible, :active),
.wooplainly-wishlist__empty-link:focus {
  background: var(--primary-600) !important;
}

/* =========================================================
   SUMMARY COLUMN
   ========================================================= */

.wooplainly-wishlist__summary-inner {
  display: grid !important;
  gap: clamp(1rem, 2vw, 1.5rem) !important;
  position: sticky !important;
  top: clamp(1rem, 4vw, 2rem) !important;
}

.wooplainly-wishlist__benefits {
  display: grid !important;
  gap: 0.75rem !important;
  padding: clamp(1.25rem, 3vw, 1.75rem) !important;
  background: var(--surface) !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid color-mix(in srgb, var(--stroke) 65%, transparent) !important;
  box-shadow: var(--shadow) !important;
}

.wooplainly-wishlist__benefit {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  font-size: 0.95rem !important;
  color: var(--muted-2) !important;
}

.wooplainly-wishlist__benefit-icon {
  inline-size: 2.25rem !important;
  block-size: 2.25rem !important;
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--primary) 20%, transparent) !important;
  color: var(--primary) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.wooplainly-wishlist__actions {
  gap: 0.75rem !important;
}

.wooplainly-wishlist__actions a {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.5rem !important;
  min-height: 3.125rem !important; /* 50px */
  padding: 0.94em 1.875em !important;
  border-radius: var(--radius-sm) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  border: none !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important; /* 15px */
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease !important;
}

.wooplainly-wishlist__actions a.wooplainly-wishlist__cta-primary {
  background: var(--primary) !important;
  color: var(--on-primary) !important;
}

.wooplainly-wishlist__actions
  a.wooplainly-wishlist__cta-primary:is(:hover, :focus-visible, :active),
.wooplainly-wishlist__actions a.wooplainly-wishlist__cta-primary:focus {
  background: var(--primary-600) !important;
  transform: translateY(-0.125rem) !important; /* -2px */
  box-shadow: 0 0.25rem 0.9375rem
    color-mix(in srgb, var(--primary) 18%, transparent) !important;
  outline: none !important;
}

.wooplainly-wishlist__actions a.wooplainly-wishlist__cta-secondary {
  border: 1.5px solid var(--stroke) !important; /* px */
  background: var(--bg) !important;
  color: var(--text) !important;
}

.wooplainly-wishlist__actions
  a.wooplainly-wishlist__cta-secondary:is(:hover, :focus-visible, :active),
.wooplainly-wishlist__actions a.wooplainly-wishlist__cta-secondary:focus {
  background: var(--surface-2) !important;
  transform: translateY(-0.125rem) !important;
  box-shadow: 0 0.25rem 0.9375rem
    color-mix(in srgb, var(--text) 18%, transparent) !important;
  outline: none !important;
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.wooplainly-wishlist a:focus-visible,
.wooplainly-wishlist button:focus-visible {
  outline: 0.1875rem solid color-mix(in srgb, var(--primary) 35%, transparent) !important; /* 3px */
  outline-offset: 0.1875rem !important;
  border-radius: 0.625rem !important; /* 10px */
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 48rem) {
  /* ~768px */
  .wooplainly-wishlist__item {
    grid-template-columns: 1fr !important;
    text-align: left !important;
  }

  .wooplainly-wishlist__media {
    margin: auto;
    inline-size: 100% !important;
    block-size: auto !important;
    aspect-ratio: 4 / 3 !important;
  }

  .wooplainly-wishlist__actions {
    inline-size: 100% !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
  }

  .wooplainly-wishlist__actions .wooplainly-wishlist__button {
    inline-size: auto !important;
  }
}

/* =========================================================
   DARK MODE FINE-TUNING
   ========================================================= */

[data-theme="dark"] .wooplainly-wishlist__benefits,
[data-theme="dark"] .wooplainly-wishlist__empty {
  background: var(--surface-2) !important;
  border-color: color-mix(in srgb, var(--stroke) 45%, transparent) !important;
}