/* ==================================================================
   Eurosima — Lista desideri (template-wishlist.php).
   Mockup: Eurosima-Wishlist-Desktop.html / -Mobile.html. Token: style.css.
   Self-contained (come offerte.css): breadcrumb replicato; la card wishlist
   (.eu-wcard) è una variante locale del product card (× rimuovi + pill stato).

   Layout full-width (niente sidebar) → griglia 4 colonne.

   Estensioni dove il mockup mostra UI senza dato/token a monte (documentate):
   · Colori stato NON nel DS (warn/err): definiti qui come proposta, da validare.
   · Sfondo pagina: uso --color-surface-alt (coerente con eclub/offerte); il
     mockup usava #F7F5F0 (cream, residuo canvas) — deviazione voluta.
   · Chip filtro + ordinamento + barra riepilogo = presentazionali (pagina demo).
   · FOCUS controlli: bordo #0078E8 + ring 3px rgba(0,120,232,0.18).
   ================================================================== */

body.page-template-template-wishlist { background: var(--color-surface-alt); }

/* Wrapper Storefront eventuale → full width. */
body.page-template-template-wishlist #primary,
body.page-template-template-wishlist #main {
  width: 100%;
  max-width: none;
  float: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.eu-wishlist {
  /* Estensioni stato proposte (non token DS) — vedi nota in testa. */
  --wish-warn: #B07A18;
  --wish-warn-soft: #FBF3E0;
  --wish-err: #C2453A;

  font-family: var(--font-sans);
  color: var(--color-ink);
  padding-bottom: var(--space-12);
}
.eu-wishlist * { box-sizing: border-box; }
.eu-wishlist a { text-decoration: none; color: inherit; }

/* ===================== Breadcrumb (replicato da offerte/category) ===================== */
.eu-breadcrumb { font-family: var(--font-sans); }
.eu-breadcrumb__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-block: 14px; font-size: var(--fs-xs); color: var(--color-muted); }
.eu-breadcrumb__item { color: var(--color-muted); text-decoration: none; }
a.eu-breadcrumb__item:hover { color: var(--color-ink); }
.eu-breadcrumb__item.is-current { color: var(--color-ink); font-weight: var(--fw-semibold); }
.eu-breadcrumb__sep { display: flex; align-items: center; opacity: 0.4; color: var(--color-muted); }

.eu-wishlist__inner { padding-top: var(--space-4); }

/* ===================== Testata ===================== */
.eu-wishlist__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-5); }
.eu-wishlist__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--color-primary-ink);
  font-weight: var(--fw-semibold);
  margin-bottom: 8px;
}
.eu-wishlist__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: 40px;
  letter-spacing: -1px;
  line-height: 1.05;
  margin: 0 0 8px;
  color: var(--color-ink);
}
.eu-wishlist__title em { font-style: italic; color: var(--color-primary-ink); }
.eu-wishlist__desc { font-size: var(--fs-base); line-height: 1.5; color: var(--color-ink-2); margin: 0; }
.eu-wishlist__desc b { color: var(--color-ink); font-weight: var(--fw-bold); }

.eu-wishlist__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.eu-wishlist__share,
.eu-wishlist__addall {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  cursor: pointer;
  white-space: nowrap;
}
.eu-wishlist__share { padding: 0 18px; background: transparent; border: 1.5px solid var(--color-navy); color: var(--color-navy); }
.eu-wishlist__share:hover { background: var(--color-navy); color: #fff; }
.eu-wishlist__addall { padding: 0 22px; background: var(--color-primary); border: none; color: var(--color-navy); font-size: 13.5px; }
.eu-wishlist__addall:hover { filter: brightness(0.96); }

/* ===================== Toolbar: chip + ordinamento ===================== */
.eu-wishlist__toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); padding-bottom: 14px; border-bottom: 1px solid var(--color-line); }
.eu-wishlist__chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.eu-wishlist__chip {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
  background: var(--color-surface);
  color: var(--color-ink-2);
  border: 1px solid var(--color-line);
  white-space: nowrap;
  cursor: pointer;
}
.eu-wishlist__chip:hover { border-color: #C9D6DE; color: var(--color-navy); }
.eu-wishlist__chip.is-active { background: var(--color-navy); border-color: var(--color-navy); color: #fff; font-weight: var(--fw-bold); }
.eu-wishlist__chip.is-active:hover { color: #fff; }
.eu-wishlist__chipn { font-weight: var(--fw-medium); opacity: 0.6; margin-left: 2px; }

.eu-wishlist__sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-line);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  white-space: nowrap;
  cursor: pointer;
}
.eu-wishlist__sortlabel { color: var(--color-muted); font-weight: var(--fw-medium); }

/* ===================== Griglia ===================== */
.eu-wishlist__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }

/* ===================== Card wishlist (.eu-wcard) ===================== */
.eu-wcard {
  background: var(--color-surface);
  border-radius: var(--radius-lg-d);
  border: 1px solid var(--color-line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.eu-wcard:hover { border-color: #C9D6DE; }

.eu-wcard__media { position: relative; padding: 22px; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; }
.eu-wcard__img { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.eu-wcard__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.eu-wcard__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.4px;
}
.eu-wcard__remove {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: #fff;
  border: none;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(24,56,88,0.12);
  cursor: pointer;
  transition: color 0.15s ease;
}
.eu-wcard__remove:hover { color: var(--wish-err); }

.eu-wcard__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.eu-wcard__brand { font-size: var(--fs-2xs); color: var(--color-muted); letter-spacing: 0.5px; text-transform: uppercase; }
.eu-wcard__title { font-size: 14.5px; line-height: 1.3; color: var(--color-ink); font-weight: var(--fw-medium); margin: 0; min-height: 38px; }

/* Pill disponibilità */
.eu-wcard__stock { margin-top: 1px; }
.eu-wcard__pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); font-size: var(--fs-2xs); font-weight: var(--fw-bold); }
.eu-wcard__dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; }
.eu-wcard__pill--disponibile { background: var(--color-success-soft); color: var(--color-success); }
.eu-wcard__pill--ultimi-pezzi { background: var(--wish-warn-soft); color: var(--wish-warn); }
.eu-wcard__pill--su-ordinazione { background: var(--color-surface-alt); color: var(--color-muted); }

/* Prezzo */
.eu-wcard__price { margin-top: 4px; }
.eu-wcard__old { display: block; font-size: var(--fs-2xs); color: var(--color-muted); text-decoration: line-through; }
.eu-wcard__old--empty { text-decoration: none; }
.eu-wcard__now { display: flex; align-items: baseline; gap: 4px; }
.eu-wcard__amount { font-family: var(--font-serif); font-size: var(--fs-2xl); color: var(--color-ink); font-weight: var(--fw-medium); }
.eu-wcard__vat { font-size: var(--fs-3xs); color: var(--color-muted); }

/* CTA */
.eu-wcard__cta {
  margin-top: 6px;
  height: 44px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  background: var(--color-primary);
  color: var(--color-navy);
  border: none;
  cursor: pointer;
}
.eu-wcard__cta:hover { filter: brightness(0.96); }
.eu-wcard__cta.is-disabled { background: var(--color-surface-alt); color: var(--color-muted); border: 1px solid var(--color-line); cursor: not-allowed; }
.eu-wcard__cta.is-disabled:hover { filter: none; }

/* ===================== Barra riepilogo (navy) ===================== */
.eu-wishlist__summary { margin-top: var(--space-5); padding: 16px 22px; background: var(--color-navy); color: #fff; border-radius: var(--radius-lg-d); display: flex; align-items: center; gap: 16px; }
.eu-wishlist__summaryicon { width: 40px; height: 40px; border-radius: var(--radius-md); background: rgba(0,168,192,0.20); color: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.eu-wishlist__summarytext { flex: 1; min-width: 0; }
.eu-wishlist__summarytitle { font-size: var(--fs-base); font-weight: var(--fw-bold); }
.eu-wishlist__summarynote { font-size: var(--fs-xs); opacity: 0.75; margin-top: 2px; }
.eu-wishlist__summarycta { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 24px; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-navy); font-size: 13.5px; font-weight: var(--fw-bold); flex-shrink: 0; }
.eu-wishlist__summarycta:hover { filter: brightness(0.96); }

/* [hidden] deve battere display:flex/grid delle sezioni (summary, empty). */
.eu-wishlist [hidden] { display: none !important; }

/* ===================== Gate ospite (non loggato) ===================== */
.eu-wishlist__gate {
  margin-top: var(--space-6);
  padding: 48px 32px;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg-d);
  text-align: center;
}
.eu-wishlist__gateicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary-ink);
  margin-bottom: 16px;
}
.eu-wishlist__gateicon .eu-icon { fill: currentColor; stroke: none; }
.eu-wishlist__gate h2 { font-family: var(--font-serif); font-weight: var(--fw-regular); font-size: var(--fs-2xl); letter-spacing: -0.5px; color: var(--color-ink); margin: 0 0 8px; }
.eu-wishlist__gate p { font-size: var(--fs-base); line-height: 1.6; color: var(--color-ink-2); margin: 0 auto 22px; max-width: 460px; }
.eu-wishlist__gateactions { display: inline-flex; gap: 10px; }
.eu-wishlist__gatebtn { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 26px; border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.eu-wishlist__gatebtn--primary { background: var(--color-primary); color: var(--color-navy); }
.eu-wishlist__gatebtn--primary:hover { filter: brightness(0.96); }
.eu-wishlist__gatebtn--ghost { background: transparent; border: 1.5px solid var(--color-navy); color: var(--color-navy); }
.eu-wishlist__gatebtn--ghost:hover { background: var(--color-navy); color: #fff; }

/* ===================== Stato vuoto (mostrato da wishlist.js) ===================== */
.eu-wishlist__empty {
  margin-top: var(--space-8);
  padding: 48px 32px;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg-d);
  text-align: center;
}
.eu-wishlist__empty h2 { font-family: var(--font-serif); font-weight: var(--fw-regular); font-size: var(--fs-2xl); letter-spacing: -0.5px; color: var(--color-ink); margin: 0 0 8px; }
.eu-wishlist__empty p { font-size: var(--fs-base); line-height: 1.6; color: var(--color-ink-2); margin: 0 auto 18px; max-width: 460px; }
.eu-wishlist__emptycta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-navy);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
}

/* ===================== Header: "Lista" attivo (cuore pieno) ===================== */
/* Page-scoped: chrome.css resta intatto. is-active è reso solo su questa pagina. */
body.page-template-template-wishlist .eu-action--wishlist.is-active .eu-action__icon { color: var(--color-primary); }
body.page-template-template-wishlist .eu-action--wishlist.is-active .eu-action__icon .eu-icon { fill: currentColor; stroke: none; }
body.page-template-template-wishlist .eu-action--wishlist.is-active .eu-action__label { font-weight: var(--fw-bold); color: var(--color-ink); }

/* ===================== Focus a11y (estensione documentata) ===================== */
.eu-wishlist :focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0,120,232,0.18); border-color: #0078E8; }

/* ===================== Tablet (≤1024px) ===================== */
@media (max-width: 1024px) and (min-width: 769px) {
  .eu-wishlist__grid { grid-template-columns: repeat(3, 1fr); }
  .eu-wishlist__title { font-size: var(--fs-4xl); }
}

/* ===================== Mobile (≤768px) ===================== */
@media (max-width: 768px) {
  .eu-wishlist__head { flex-direction: column; align-items: stretch; gap: var(--space-4); }
  .eu-wishlist__title { font-size: var(--fs-3xl); }
  .eu-wishlist__actions { width: 100%; }
  .eu-wishlist__share,
  .eu-wishlist__addall { flex: 1; justify-content: center; }

  .eu-wishlist__toolbar { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .eu-wishlist__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .eu-wishlist__chips::-webkit-scrollbar { display: none; }
  .eu-wishlist__chip { flex: 0 0 auto; }
  .eu-wishlist__sort { align-self: flex-start; }

  .eu-wishlist__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .eu-wcard__media { padding: 14px; }

  .eu-wishlist__summary { flex-wrap: wrap; }
  .eu-wishlist__summarycta { width: 100%; justify-content: center; }
}