/* brand.css — tipografia del sito bschairs dentro il configuratore.
 *
 * Titoli in Bricolage Grotesque, testi in Hanken Grotesk: gli stessi del tema
 * WordPress (tailwind/custom/fonts.css), cosi' il configuratore incorporato
 * nella scheda prodotto non sembra un'altra applicazione.
 *
 * I file woff2 sono copiati in Configuratore/fonts/, serviti dalla stessa
 * origine: niente Google Fonts, niente dipendenza dai percorsi del tema.
 * Caricato per ultimo, dopo style.css e gli altri fogli.
 */

@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/hanken-grotesk-v12-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/hanken-grotesk-v12-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/hanken-grotesk-v12-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/hanken-grotesk-v12-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/bricolage-grotesque-v9-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/bricolage-grotesque-v9-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/bricolage-grotesque-v9-latin-700.woff2") format("woff2"); }

:root {
    --cfg-font-testo: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
    --cfg-font-titoli: "Bricolage Grotesque", "Hanken Grotesk", sans-serif;
}

/* Testi: tutto cio' che prima era Outfit (anche con !important nei fogli
   originali), controlli dei form compresi. */
html,
body,
button,
input,
select,
textarea,
label,
.btn,
.minimal-button,
.accordion-button,
.material-button,
.preloader-text,
.model-info-popup,
.modal-content,
.modal-content * {
    font-family: var(--cfg-font-testo) !important;
}

/* Titoli: nome del modello, titoli di popup e modale. */
h1,
h2,
h3,
h4,
h5,
#product-details h1,
.modal-title,
.popup-title,
.seleziona_modello {
    font-family: var(--cfg-font-titoli) !important;
    letter-spacing: -0.01em;
}

#product-details h1 {
    font-weight: 700;
}

/* La riga dei pulsanti (Reset, Screenshot, PDF, Toolkit) non andava a capo:
   su una colonna stretta l'ultimo restava tagliato. Il vecchio
   display:-webkit-inline-box non sa andare a capo, quindi flex.
   Stesso criterio di css/mobile.css: la riga esiste solo da 1024px in
   orizzontale; sotto ci sono le icone di .pulsanti_mobile e non va toccata. */
@media (min-width: 1024px) and (orientation: landscape) {
    .pulsanti {
        display: flex !important;
        flex-wrap: wrap !important;
        max-width: 100%;
        gap: 10px;
    }
}