/* ==========================================================================
   BB — Pannello wishlist da header / PDP  [WISH-01]

   XD: "WISHLIST_STEP 1_SALVA PRODOTTO" (desktop, riferimento 2560) e
   "WISHLIST STEP 2_UTENTE_OFF CANVAS MOBILE – 16/17" (mobile, riferimento 390).

   Il pannello e' un .bb-offcanvas: la base (transizioni, overlay, X) arriva da
   offcanvas.css, che NON viene toccato. Qui solo il contenuto.
   Questo file e' caricato su tutto il sito: ogni regola deve stare dentro
   #bb-wishlist-offcanvas o .bb-wishlist-panel.
   ========================================================================== */

.bb-wishlist-panel {
  /* 911/2560 dell'XD, come i pannelli di modifica dell'account */
  width: min(456px, 35.6vw);
  max-width: 100%;
}

.bb-wishlist-panel__body {
  padding: clamp(20px, 2vw, 40px) clamp(20px, 2.2vw, 44px) clamp(32px, 3vw, 60px);
}

/* [NEW-204] Vedi account.css: il lockup sta nell'intestazione, sulla linea
   della X, quindi si misura in altezza e non ha piu' margine sotto. */
.bb-wishlist-panel__logo {
  display: block;
  height: clamp(22px, 2vw, 28px);
  width: auto;
  margin: 0;
}

.bb-wishlist-panel__header {
  justify-content: space-between;
}

.bb-wishlist-panel__label {
  margin: 0 0 clamp(10px, 1vw, 20px);
  font-size: var(--bb-body);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--bb-ls-title);
  text-transform: uppercase;
  color: var(--bb-fg);
}

/* sottotitolo editoriale: nell'XD e' IvyOra, qui Playfair (GLB-15) */
.bb-wishlist-panel__intro {
  margin: 0 0 clamp(18px, 1.8vw, 34px);
  font-family: var(--bb-font-editorial);
  font-size: var(--bb-body);
  line-height: 1.5;
  color: var(--bb-fg);
}

/* riga visibile solo da ospite */
.bb-wishlist-panel__signin {
  margin: 0 0 clamp(18px, 1.8vw, 34px);
  font-size: var(--bb-small);
  line-height: 1.5;
  color: var(--bb-muted);
}

.bb-wishlist-panel button.bb-wishlist-panel__signin-link {
  display: inline;
  margin: 0;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  appearance: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
  letter-spacing: var(--bb-ls-tight);
  text-transform: none;
  color: var(--bb-fg) !important;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 0.5px;
  cursor: pointer;
}

/* ── lista ─────────────────────────────────────────────────────────────── */

.bb-wishlist-panel .commercekit-wishlist-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 2.2vw, 46px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bb-wishlist-panel .commercekit-wishlist-list::before,
.bb-wishlist-panel .commercekit-wishlist-list::after { content: none; }

/* shop.css impone display:flex!important su li.product (0,3,2):
   qui serve piu' specificita', non basta !important. */
.bb-wishlist-panel ul.products li.product.bb-wl-item--row {
  display: grid !important;
  flex-direction: row !important;
  /* XD: miniatura 284 su 672 di colonna utile = 42.3% */
  grid-template-columns: 42.3% 1fr;
  gap: clamp(12px, 1.2vw, 30px);
  align-items: start;
  width: auto !important;
  margin: 0 !important;
  padding: 0;
  float: none !important;
  list-style: none;
}

.bb-wishlist-panel .bb-wl-item--row .bb-wl-item__media { display: block; }

.bb-wishlist-panel .bb-wl-item--row .bb-wl-item__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 284 / 354.5;
  object-fit: cover;
  background: var(--bb-light-gray);
}

.bb-wishlist-panel .bb-wl-item--row .bb-wl-item__body > * { margin: 0; }

.bb-wishlist-panel .bb-wl-item--row .bb-wl-item__name-link {
  display: block;
  text-decoration: none;
  color: var(--bb-fg);
}

.bb-wishlist-panel .bb-wl-item--row .bb-wl-item__name {
  font-size: var(--bb-small);
  line-height: 1.45;
  letter-spacing: var(--bb-ls-title);
  text-transform: uppercase;
}

.bb-wishlist-panel .bb-wl-item--row .bb-wl-item__colour {
  margin-top: 4px !important;
  font-size: var(--bb-small);
  line-height: 1.45;
  color: var(--bb-fg);
}

.bb-wishlist-panel .bb-wl-item--row .bb-wl-item__price {
  margin-top: clamp(10px, 1vw, 22px) !important;
  font-size: var(--bb-small);
}

.bb-wishlist-panel .bb-wl-item--row .bb-wl-item__price del { opacity: 0.5; margin-right: 6px; }
.bb-wishlist-panel .bb-wl-item--row .bb-wl-item__price ins { text-decoration: none; }

/* "Aggiungi al carrello" e "Rimuovi" = link di testo, non bottoni:
   reset del `button/.button` nero globale di 99-overrides. */
.bb-wishlist-panel .bb-wl-item--row .bb-wl-item__atc-btn,
.bb-wishlist-panel .bb-wl-item--row .bb-wl-item__remove-link {
  display: block;
  width: auto;
  margin-top: 8px;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  appearance: none;
  font-family: inherit;
  font-size: var(--bb-small);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: var(--bb-ls-tight);
  text-transform: none;
  color: var(--bb-fg) !important;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 0.5px;
}

/* il "Rimuovi" e' lo stesso elemento che CommerceKit stila come cestino:
   niente seconda icona dentro il pannello */
.bb-wishlist-panel .bb-wl-item--row .bb-wl-item__remove-link {
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  text-indent: 0;
  overflow: visible;
}

.bb-wishlist-panel .bb-wl-item--row .bb-wl-item__remove-link::before,
.bb-wishlist-panel .bb-wl-item--row .bb-wl-item__remove-link::after {
  content: none !important;
  display: none !important;
}

.bb-wishlist-panel .bb-wl-item--row .added_to_cart {
  display: block;
  margin-top: 4px;
  font-size: var(--bb-tiny);
  color: var(--bb-muted);
}

/* contatore "N items" del plugin: non previsto dall'XD e non tradotto */
.bb-wishlist-panel .commercekit-wishlist-pages { display: none; }

/* wishlist vuota */
.bb-wishlist-panel .commercekit-wishlist-empty,
.bb-wishlist-panel .cgkit-wishlist-empty {
  margin: 0;
  font-size: var(--bb-body);
  color: var(--bb-muted);
}

/* ── VEDI TUTTO ────────────────────────────────────────────────────────── */

.bb-wishlist-panel .bb-wishlist-panel__all {
  display: inline-block;
  margin-top: clamp(24px, 2.4vw, 48px);
  font-size: var(--bb-body);
  letter-spacing: var(--bb-ls-title);
  text-transform: uppercase;
  color: var(--bb-fg);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 0.5px;
}

/* ── STATO VUOTO ───────────────────────────────────────────────────────────
   Il titolo dello stato vuoto di CommerceKit qui si chiama
   .bb-wsl-empty-title invece di .wsl-no-title: la classe originale faceva
   scattare `body:has(.wsl-no-title) h1.entry-title{display:none}` del plugin,
   che nascondeva il NOME DEL PRODOTTO su tutte le schede (vedi il commento in
   account-wishlist-panel.php). Rinominandola perde lo stile del plugin, che
   comunque era tarato sulla pagina wishlist a tutta larghezza: 48px dentro un
   pannello stretto erano fuori scala.
   Il pannello dice gia' di suo che la wishlist e' vuota ("I tuoi pezzi
   preferiti..."), quindi qui si resta discreti. */

.bb-wishlist-panel .bb-wsl-empty-title {
  font-size: var(--bb-body);
  font-weight: 500;
  letter-spacing: var(--bb-ls-title);
  text-transform: uppercase;
  color: var(--bb-muted);
  text-align: center;
  line-height: 1.4;
  margin: 0 0 8px;
}

/* ── mobile (XD 390) ───────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .bb-wishlist-panel {
    width: 88vw;
    max-width: 88vw;
  }

  /* [NEW-204] la misura del logo ora e' un'altezza, ed e' gia' clampata:
     questa larghezza lo schiacciava (misurato a 390: 195x22, rapporto 8.9
     invece di 2.5). */

  .bb-wishlist-panel ul.products li.product.bb-wl-item--row {
    display: grid !important;
    grid-template-columns: 38% 1fr;
    gap: 14px;
  }
}