/* =========================================================
   GLIFO EDIZIONI — product.css
   Veste il markup nativo della scheda prodotto HikaShop
   (override show_default.php) con layout a 3 breakpoint via
   CSS Grid puro — nessun JS per il riordino.
   Caricato solo su view=product (vedi index.php).
   ========================================================= */

/* padding orizzontale/verticale di .main-body ora globale (user.css) */

/* --- breadcrumb / heading Joomla sopra il form --- */
body.view-product .hikashop_cpanel_main_interface,
body.view-product .page-header {
  margin-bottom: 16px;
}

/* =========================================================
   GRID PRINCIPALE — desktop: 2 colonne, sinistra fissa
   ========================================================= */
.glifo-product {
  display: grid !important;
  grid-template-columns: 340px 1fr !important;
  grid-template-rows: max-content 1fr !important; /* FIX: senza questo,
    quando un elemento (.glifo-product-left) scavalca 2 righe con
    altezza "auto", il browser distribuisce lo spazio in eccesso
    principalmente sulla riga più corta (qui: il titolo) per farla
    "raggiungere" l'altezza della colonna sinistra — risultato: un
    vuoto enorme sotto il titolo, anche a padding zero. Forzando la
    prima riga a "max-content" le impediamo di crescere oltre il
    contenuto reale del titolo: tutto lo spazio in eccesso finisce
    nella seconda riga (la citazione/descrizione), dove non si nota
    perché è già naturalmente più lunga. */
  grid-template-areas:
    "left   block1"
    "left   block2" !important;
  gap: 0;
  background: #fff;
  width: 100%;
}

/* NOTA: !important su display/grid-template-* qui e nel breakpoint
   tablet sotto sono difensivi — il markup mantiene per compatibilità
   anche gli ID/classi originali di HikaShop (es. #hikashop_product_left_part),
   e se il CSS bundled di HikaShop definisce regole basate su
   quell'ID (specificità naturalmente più alta di una singola classe),
   possono competere con il nostro grid senza che serva !important
   dall'altra parte per "vincere" comunque. */
.glifo-product-left {
  grid-area: left;
  border-right: 0.5px solid var(--g-border);
  /* padding solo a destra (lato interno, verso il divisore) e in
     basso: il lato sinistro tocca il bordo di .main-body, che ha già
     il proprio padding orizzontale per questa vista — aggiungerne
     un altro qui lo raddoppierebbe */
  padding: 0 24px 24px 0;
  min-width: 0;
  width: auto !important;
  float: none !important;
}
.glifo-block-1 {
  grid-area: block1;
  /* stesso ragionamento, speculare: padding solo a sinistra (lato
     interno) — il lato destro tocca già il padding di .main-body */
  padding: 0 0 16px 32px;
  min-width: 0; width: auto !important; float: none !important;
}
.glifo-block-2 {
  grid-area: block2;
  padding: 16px 0 28px 32px;
  border-top: 0.5px solid var(--g-border);
  min-width: 0; width: auto !important; float: none !important;
}

/* colonna sinistra: su desktop media+info sono semplicemente impilati */
.glifo-left-media { margin-bottom: 18px; }

/* =========================================================
   TITOLO / TAG / SINOSSI (blocco 1)
   ========================================================= */
.glifo-product-title {
  font-size: var(--g-fs-h1);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--g-ink);
  margin: 0 0 12px;
}
#hikashop_product_code_main {
  display: block;
  font-size: var(--g-fs-small);
  color: var(--g-text-muted);
  font-weight: 400;
  margin-top: 4px;
}

.glifo-product-authors {
  font-size: var(--g-fs-h4);
  color: var(--g-mid);
  font-weight: 600;
  margin-bottom: 4px;
}
.glifo-product-translation {
  font-size: var(--g-fs-small);
  color: var(--g-text-muted);
  font-style: italic;
  margin-bottom: 8px;
}

/* Elementi che HikaShop può renderizzare vuoti (voto disattivato, nessun
   social configurato): se restano vuoti, non devono comunque occupare
   spazio — altrimenti creano vuoti fantasma tra il blocco 1 e la
   citazione, indipendenti dal nostro padding. */
.hikashop_product_socialnetwork:empty,
.hikashop_socialnetwork_div:empty,
.hikashop_product_vote_mini:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.hikashop_product_socialnetwork,
.hikashop_socialnetwork_div {
  display: flex;
  gap: 8px;
  margin: 4px 0 8px;
}

.hikashop_product_vote_mini { margin-bottom: 4px; }

/* =========================================================
   COPERTINA + DEARFLIP + DOWNLOAD (colonna sinistra, gruppo media)
   ========================================================= */
.glifo-cover-block {
  margin-top: 0 !important; /* garantisce che la copertina parta
                                esattamente allineata in alto col
                                gruppo acquisto/bottoni nella colonna
                                accanto, a tablet */
  margin-bottom: 16px;
}
.glifo-cover-block > *:first-child { margin-top: 0 !important; }

/* Immagine a filo del contenitore, nessuno spazio/ombra: HikaShop a
   volte imposta dimensioni o spaziature proprie su questi elementi
   (anche inline via JS per la gestione zoom), quindi forziamo con
   !important dove serve per avere la certezza che vinca il nostro
   stile invece di quello di default del componente. */
.glifo-cover-block #hikashop_main_image_div,
.glifo-cover-block .hikashop_product_main_image,
.glifo-cover-block .hikashop_product_main_image_subdiv {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  line-height: 0; /* elimina lo spazio fantasma sotto l'immagine inline */
}
.glifo-cover-block img#hikashop_main_image {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
  border-radius: 3px;
  box-shadow: none;
  margin: 0 !important;
}
.glifo-cover-block .hikashop_small_image_div { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.glifo-cover-block .hikashop_child_image {
  border-radius: 3px;
  border: 0.5px solid var(--g-border);
  cursor: pointer;
  width: 48px;
  height: 48px;
  object-fit: cover;
}
.glifo-cover-block .hikashop_child_image_active { border-color: var(--g-rust); }

/* trigger "Sfoglia l'anteprima" — generato dal campo custom flipbook_pdf
   con classe .flipbook-trigger, che è anche un elemento "_df_button" di
   DearFlip. DearFlip applica al proprio elemento un CSS interno con
   !important (confermato dalla documentazione ufficiale: per
   personalizzare un _df_button serve sempre !important, altrimenti le
   regole normali perdono sempre, a prescindere da specificità/ordine).
   Blindiamo quindi ogni proprietà di layout critica.

   IMPORTANTE: l'allineamento icona+testo NON è delegato al div
   ._df_button stesso (DearFlip potrebbe aggiungere propri elementi
   interni dopo il caricamento, rompendo un layout flex a 2 figli).
   Icona e testo vanno avvolti in uno <span class="flipbook-trigger-inner">
   dedicato, che resta allineato a prescindere da cosa DearFlip
   aggiunga nel div esterno. Aggiorna il "Formato per ogni file" del
   campo flipbook_pdf in HikaShop così:
   <div class="_df_button flipbook-trigger" source="{url}">
     <span class="flipbook-trigger-inner"><i class="ti ti-book-2" aria-hidden="true"></i>Sfoglia l'anteprima</span>
   </div> */
.glifo-flip-trigger-wrap { margin-top: 12px; width: 100%; }
.flipbook-trigger {
  all: unset !important;
  box-sizing: border-box !important;
  position: static !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 12px 14px !important;
  margin: 0 !important;
  border: 0.5px solid var(--g-border) !important;
  border-radius: var(--g-radius-md) !important;
  background: var(--g-card-bg) !important;
  cursor: pointer !important;
  text-align: center !important;
}
.flipbook-trigger:hover { border-color: var(--g-blu) !important; }
.flipbook-trigger:hover .flipbook-trigger-inner { color: var(--g-blu) !important; }

.flipbook-trigger-inner {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  font-family: var(--g-font) !important;
  font-size: var(--g-fs-body) !important;
  line-height: 1 !important;
  color: var(--g-mid) !important;
  font-weight: 500 !important;
  vertical-align: middle !important;
}
.flipbook-trigger-inner i {
  font-size: 26px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

/* bottone "Download scheda libro" — campo custom press_kit_pdf con
   classe .download-scheda-btn. Posizionato DOPO la scheda tecnica
   (vedi show_default.php), non più subito sotto la copertina. */
.glifo-download-wrap { margin-top: 18px; }
.download-scheda-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  padding: 12px 14px;
  border: 0.5px solid var(--g-border);
  border-radius: var(--g-radius-lg);
  background: #fff;
  color: var(--g-ink);
  font-family: var(--g-font);
  font-size: var(--g-fs-body);
  font-weight: 600;
}
.download-scheda-btn:hover { border-color: var(--g-rust); }
.download-scheda-btn i { font-size: 26px; color: var(--g-rust); flex-shrink: 0; }

/* =========================================================
   BOX ACQUISTO (prezzo + quantità + carrello)
   ========================================================= */
/* Tentativo di ALLINEAMENTO reciproco (griglia CSS a 2 colonne per
   affiancare prezzo+stepper, JS che spostava il bottone in una riga
   dedicata) rimosso su richiesta esplicita: non funzionava in modo
   affidabile in produzione. Lo stile VISIVO di ogni singolo elemento
   resta invece — non era mai stato il problema. Ogni blocco si impila
   nel proprio ordine naturale (nessun grid-column/grid-row, nessun
   JS che sposta nodi), ma prezzo, campo quantità e bottone mantengono
   il loro aspetto. */
.glifo-buy-block {
  background: var(--g-card-bg);
  border: 0.5px solid var(--g-border);
  border-radius: var(--g-radius-lg);
  padding: 16px;
  margin-bottom: 18px;
}

.hikashop_product_price_main {
  display: block;
  font-size: 26px;
  font-weight: 700;
  color: var(--g-rust);
  margin: 0 0 12px;
}
.hikashop_product_price_main .hikashop_product_old_price,
.hikashop_product_price_main .hikashop_product_discount_price_old {
  font-size: var(--g-fs-small);
  color: var(--g-text-muted);
  text-decoration: line-through;
  font-weight: 400;
  margin-left: 8px;
}
/* "cad." (prezzo per unità di peso): disattivato nativamente da
   HikaShop — Sistema > Configurazione > Display > "Visualizza il
   costo per unità di peso" = No — non serve più nasconderlo qui. */

.hikashop_product_quantity_field {
  width: 56px;
  text-align: center;
  border: 0.5px solid var(--g-border);
  border-radius: var(--g-radius-sm);
  padding: 8px 4px;
  font-size: var(--g-fs-body);
  font-family: inherit;
}

/* Bottone "Aggiungi al carrello" — stesso mattone di tutti gli altri
   bottoni del sito (vedi .tu.cart nell'header). !important necessario:
   confermato più volte in questa conversazione che il CSS bundle di
   HikaShop vince altrimenti in modo silenzioso sulle nostre regole
   normali, indipendentemente dall'ordine o dalla specificità. Questo
   riguarda SOLO l'aspetto del bottone, non la sua posizione: resta
   dove lo mette HikaShop nel markup nativo, non lo spostiamo più. */
a.glifo-btn.glifo-btn-cart,
.hikashop_product_quantity_add_to_cart_div a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  background: var(--g-rust) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--g-radius-md) !important;
  padding: 12px 0 !important;
  font-size: var(--g-fs-body) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  margin-top: 10px !important;
}
a.glifo-btn.glifo-btn-cart:hover,
.hikashop_product_quantity_add_to_cart_div a:hover { background: var(--g-rust-dark) !important; }

.hikashop_product_contact_main .glifo-btn {
  display: block;
  text-align: center;
  padding: 10px;
  border: 0.5px solid var(--g-border);
  border-radius: var(--g-radius-md);
  margin-top: 10px;
  font-size: var(--g-fs-small);
  color: var(--g-mid);
}

/* =========================================================
   SCHEDA TECNICA (campi personalizzati: Autore, ISBN, ecc.)
   ========================================================= */
.glifo-specs-block { margin-bottom: 16px; }
#hikashop_product_custom_info_main h4 {
  font-size: var(--g-fs-caption);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--g-text-muted);
  font-weight: 700;
  margin: 0 0 12px;
  border-top: 0.5px solid var(--g-border);
  padding-top: 16px;
}
.hikashop_product_custom_info_main_table {
  width: 100%;
  border-collapse: collapse;
}
.hikashop_product_custom_info_main_table tr {
  border-bottom: 0.5px solid #f0ede8;
}
.hikashop_product_custom_info_main_table td {
  padding: 6px 0;
  font-size: var(--g-fs-small);
  vertical-align: top;
}
.hikashop_product_custom_info_main_table td.key {
  width: 110px;
  color: var(--g-text-muted);
  flex-shrink: 0;
}
.hikashop_product_custom_name { font-weight: 500; }
.hikashop_product_custom_value { color: var(--g-ink); font-weight: 500; }

/* =========================================================
   BLOCCO 2 — descrizione, citazione, rassegna stampa
   ========================================================= */
#hikashop_product_description_main {
  font-size: var(--g-fs-body);
  line-height: 1.7;
  color: #444;
}
#hikashop_product_description_main p { margin: 0 0 14px; }

/* citazione grande: scritta nell'editor come blockquote (vedi nota nel
   file PHP) — la formattiamo con barra laterale mattone come nei mockup */
#hikashop_product_description_main blockquote {
  font-family: var(--g-font-serif);
  font-size: 22px;
  line-height: 1.4;
  font-style: italic;
  color: var(--g-ink);
  border-left: 3px solid var(--g-rust);
  padding: 4px 0 4px 20px;
  margin: 0 0 22px;
}

/* file/rassegna stampa (show_block_product_files) */
.hikashop_product_files_main { margin-top: 22px; border-top: 0.5px solid var(--g-border); padding-top: 20px; }
.hikashop_product_files_main .hikashop_product_file_name {
  font-size: var(--g-fs-small);
  color: var(--g-rust);
  font-weight: 600;
}

/* =========================================================
   BREAKPOINT 1 — TABLET (650-1024px)
   Blocco1 -> colonna sinistra su 2 sotto-colonne -> blocco2
   ========================================================= */
@media (max-width: 1024px) {
  .glifo-product {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important; /* reset del fix desktop: qui
      "left" occupa una sola riga, non più due, quindi non serve
      vincolare la prima riga a max-content */
    grid-template-areas:
      "block1"
      "left"
      "block2" !important;
  }
  .glifo-product-left {
    border-right: none;
    border-bottom: 0.5px solid var(--g-border);
    padding-top: 24px !important; /* uguale al padding orizzontale:
                                       in questo breakpoint la colonna
                                       è delimitata da un bordo
                                       orizzontale sopra, non da uno
                                       stroke verticale, quindi ha
                                       senso dare respiro anche sopra */
  }
  .glifo-block-1 { border-bottom: 0.5px solid var(--g-border); }
  .glifo-block-2 { border-top: none; }

  /* Qui non c'è più una colonna "interna" e una "esterna": tutti e
     tre i blocchi sono a piena larghezza, uno sopra l'altro. Niente
     padding orizzontale proprio — si affidano tutti a quello di
     .main-body, un solo gutter coerente su entrambi i lati. */
  .glifo-product-left,
  .glifo-block-1,
  .glifo-block-2 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .glifo-product-left {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 40px;
    align-items: start;
  }
  .glifo-left-media,
  .glifo-left-info {
    min-width: 0;
    width: auto !important;
    margin-top: 0 !important;
  }
  .glifo-left-media { margin-bottom: 0; }
}

/* =========================================================
   SPAZIO PRIMA DEI SUBMODULE HIKASHOP (correlati, ecc.) — SOLO
   DESKTOP: sotto i 1024px il documento è già ben distanziato (vedi
   i padding verticali dei blocchi nei breakpoint sopra), ma oltre
   quella soglia .glifo-product finisce attaccato al blocco successivo
   generato da HikaShop. Interveniamo qui, su un elemento che
   controlliamo per intero, invece che sul submodule HikaShop (la cui
   classe esatta può variare a seconda di quali sottomoduli sono
   attivi in questo momento sul prodotto). */
@media (min-width: 1025px) {
  .glifo-product { margin-bottom: 40px; }
}

/* =========================================================
   BREAKPOINT 2 — MOBILE (<650px)
   Tutto impilato in una colonna, ordine invariato
   ========================================================= */
@media (max-width: 650px) {
  .glifo-product-left {
    grid-template-columns: 1fr !important;
    gap: 0;
  }
  .glifo-left-media { margin-bottom: 18px; }

  .glifo-block-1,
  .glifo-block-2,
  .glifo-product-left {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    /* orizzontale resta a 0 (ereditato dal breakpoint tablet sopra):
       stesso principio, un solo gutter da .main-body */
  }

  .glifo-product-title { font-size: 26px; }
  .hikashop_product_price_main { font-size: 22px; }
  #hikashop_product_description_main blockquote { font-size: 18px; }
}