/* Configuratore etichette vestito col brand.
   Fancy Product Designer espone una quarantina di custom properties: invece di
   inseguire i suoi selettori le rimappiamo sui token del tema, così se il cliente
   cambia palette o font dal pannello Stile l'editor lo segue da solo.
   Caricato solo sulle schede prodotto che hanno il designer (inc/fpd.php). */

/* L'!important su queste quattro non è pigrizia: il "layout d'interfaccia" di FPD
   stampa i suoi colori (nero e un verde #27ae60) in uno <style> inline in wp_head
   con priorità 100, cioè dopo questo file. Senza, il verde di fabbrica vince. */
:root {
  --fpd-primary-color: var(--ink) !important;      /* testo, nav della barra strumenti, barra azioni */
  --fpd-primary-fg-color: var(--cream) !important; /* ciò che sta sopra l'ink */
  --fpd-secondary-color: var(--gold) !important;   /* accento: bottoni, focus, selezione */
  --fpd-secondary-fg-color: var(--ink) !important; /* testo sull'oro: col bianco il contrasto non basterebbe */

  --fpd-light-bg-color: var(--bg);
  --fpd-light-grey-color: var(--cream);
  --fpd-dark-grey-color: var(--ink-soft);
  --fpd-border-color: var(--line);
  --fpd-border-radius: 10px;

  --fpd-text-color: var(--ink);
  --fpd-input-text-color: var(--ink);
  --fpd-list-bg-color-active: rgba(168, 148, 106, .16);

  --fpd-snackbar-bg-color: var(--ink);
  --fpd-tooltip-bg-color: var(--ink);
  --fpd-scrollbar-thumb-color: var(--gold);
  --fpd-scrollbar-track-color: var(--cream);
  --fpd-green-color: var(--ok);
  --fpd-yellow-color: var(--cream);
  --fpd-yellow-contrast-color: var(--gold-deep);

  /* il mockup è scontornato con la trasparenza, quindi il canvas fa da fondo:
     crema come il resto del sito, che regge bene una bottiglia scura */
  --fpd-canvas-bg: var(--bg);
}

/* FPD stende un velo bianco al 70% sopra il fondo del canvas: lo togliamo,
   così il colore qui sopra è quello che si vede davvero. */
.fpd-container .fpd-product-stage > .fpd-view-stage {
  background: transparent;
}

/* --- Barra dei comandi (Download, Print, Preview, Info, Done, chiudi) ---------
   Ha fondo ink, ma i bottoni prendono il colore da .fpd-btn e le icone dalle
   regole rimappate in fpd-brand-map.css: entrambi ink, cioè invisibili sul nero.
   Qui dentro va tutto in crema. */
.fpd-container fpd-actions-bar,
.fpd-container fpd-actions-bar .fpd-btn,
.fpd-container fpd-actions-bar .fpd-dropdown-btn,
.fpd-container fpd-actions-bar [class^="fpd-icon-"],
.fpd-container fpd-actions-bar [class*=" fpd-icon-"],
.fpd-container fpd-actions-bar [class^="fpd-icon-"]::before,
.fpd-container fpd-actions-bar [class*=" fpd-icon-"]::before {
  color: var(--cream);
}

/* I menu che si aprono dalla barra hanno fondo bianco: lì il testo torna ink. */
.fpd-container fpd-actions-bar .fpd-dropdown-menu > .fpd-btn,
.fpd-container fpd-actions-bar .fpd-dropdown-menu [class^="fpd-icon-"]::before,
.fpd-container fpd-actions-bar .fpd-dropdown-menu [class*=" fpd-icon-"]::before {
  color: var(--ink);
}

/* "Fatto" è l'azione primaria: oro pieno con testo ink, come i CTA del sito. */
.fpd-container fpd-actions-bar .fpd-btn.fpd-btn-fill {
  background: var(--gold);
  color: var(--ink);
}

/* Il totale del configuratore mostra "€ 0": il prezzo lo fa il tema (supplemento
   in inc/product.php), qui sarebbe solo un numero sbagliato. Senza .fpd-container
   davanti: nel modal la barra sta fuori dal container. */
.fpd-modal-product-designer fpd-actions-bar .fpd-total-price,
.fpd-total-price {
  display: none !important;
}

/* L'editor eredita solo un sans-serif generico: diamogli i caratteri del sito. */
.fpd-container,
.fpd-modal-product-designer,
.fpd-draggable-dialog,
fpd-snackbar {
  font-family: var(--body);
}

/* I bottoni del sito sono in maiuscoletto spaziato, non grassetto pieno. */
.fpd-container .fpd-btn,
.fpd-modal-product-designer .fpd-btn {
  letter-spacing: .06em;
  font-weight: 500;
}

/* Il velo dietro il modal: ink invece del nero puro, come gli altri overlay del sito. */
.fpd-modal-overlay {
  background: rgba(43, 42, 40, .78);
  background: color-mix(in srgb, var(--ink) 78%, transparent);
}

/* Le finestrelle (dialog, modal interni) seguono raggio e fondo crema del tema. */
.fpd-modal-inner,
.fpd-draggable-dialog {
  background: var(--white);
  border-radius: 14px;
}

.fpd-draggable-dialog > .fpd-dialog-head {
  font-family: var(--title);
  letter-spacing: .02em;
}

/* Selettore colore: prima le pastiglie del brand, poi la ruota.
   FPD attacca la tavolozza DOPO il selettore, e il pannello che li contiene si
   ferma a 200px con lo scorrimento: le pastiglie finivano fuori vista, e sono
   il caso normale. column-reverse le rimette in cima senza toccare il plugin. */
.fpd-colorpicker-wrapper {
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
}

/* Colonna degli strumenti: icone e testo piu' grandi.
   Erano 28px di icona e 12 di testo in una colonna da 80: sullo schermo di un
   cliente, che ci passa una volta sola, si leggevano poco.

   Due trappole: la larghezza non e' un `width` ma la variabile
   --fpd-sidebar-nav-width (la colonna la usa come flex-basis), e l'icona la
   colpisce una regola del plugin piu' specifica della nostra
   (`.fpd-container.fpd-sidebar .fpd-navigation > div > span`). */
.fpd-container{--fpd-sidebar-nav-width:112px}
.fpd-container .fpd-navigation .fpd-nav-item{padding:14px 6px;gap:8px}
.fpd-container.fpd-sidebar .fpd-navigation > div > span.fpd-nav-icon{font-size:36px}
.fpd-container.fpd-sidebar .fpd-navigation > div > span.fpd-label{font-size:.82rem;line-height:1.25;letter-spacing:.01em}

@media(max-width:900px){
  /* su schermo stretto la barra e' orizzontale: la larghezza torna quella sua */
  .fpd-container{--fpd-sidebar-nav-width:auto}
  .fpd-container .fpd-navigation .fpd-nav-item{min-width:78px}
  .fpd-container.fpd-sidebar .fpd-navigation > div > span.fpd-nav-icon{font-size:30px}
  .fpd-container.fpd-sidebar .fpd-navigation > div > span.fpd-label{font-size:.74rem}
}