/* ===========================================================================
   Lo shop con la pelle del sito nuovo.
   Marco, 09/09: «rimane sempre il fatto che sono sul sito vecchio».

   Lo shop e' WooCommerce, quindi lo disegna il tema WordPress, mentre le
   diciannove pagine del redesign sono statiche: senza questo foglio, chi
   passa dal sito nuovo allo shop cambia sito. Qui si riprendono i colori e i
   caratteri del redesign — fondo scuro sobrio, ambra al posto del ciano,
   Bricolage per i titoli, IBM Plex Sans per il testo, IBM Plex Mono per i
   dati — e si ridisegnano solo le pagine del negozio.

   I caratteri sono gli stessi file del redesign, serviti da noi: nessuna
   richiesta a Google, come sul resto del sito.
   ======================================================================== */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-3y9K6as8bTXq_nANBjzKo3IeZx8z6up5BeSl9D4dj_x9PpZBMlGIInE.woff2") format("woff2");
  font-weight: 200 800; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYY.woff2") format("woff2");
  font-weight: 400; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin--F63fjptAgt5VM-kVkqdyU8n1i8q1w.woff2") format("woff2");
  font-weight: 400; font-display: swap; font-style: normal;
}

.woocommerce-page,
.woocommerce {
  --vd-fondo: #0B0E12;
  --vd-carta: #14181F;
  --vd-riga: #262C35;
  --vd-testo: #E9EDF0;
  --vd-spento: #96A0AD;
  --vd-ambra: #F3B12B;
  --vd-verde: #34C77B;
  --vd-tit: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
  --vd-txt: "IBM Plex Sans", system-ui, sans-serif;
  --vd-dat: "IBM Plex Mono", ui-monospace, monospace;
}

/* ------------------------------------------------------------- il fondo */
body.woocommerce-page,
body.woocommerce { background: var(--vd-fondo); color: var(--vd-testo); }
.woocommerce-page main, .woocommerce main { font-family: var(--vd-txt); }

.woocommerce-page h1, .woocommerce-page h2, .woocommerce-page h3,
.woocommerce h1, .woocommerce h2, .woocommerce h3,
.woocommerce-products-header__title {
  font-family: var(--vd-tit) !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--vd-testo);
}

/* ------------------------------------------------ le schede categoria */
.vortis-shop-cat .vortis-cat {
  background: var(--vd-carta); border-color: var(--vd-riga); color: var(--vd-testo);
}
.vortis-shop-cat .vortis-cat b { font-family: var(--vd-tit); font-size: 16px; letter-spacing: -.01em; }
.vortis-shop-cat .vortis-cat span { font-family: var(--vd-dat); }
.vortis-shop-cat .vortis-cat small { font-family: var(--vd-txt); color: var(--vd-spento); }
.vortis-shop-cat .vortis-cat:hover { border-color: var(--vd-ambra); }
.vortis-shop-cat .vortis-cat.e-qui {
  background: var(--vd-ambra); border-color: var(--vd-ambra); color: #14181F;
}
.vortis-shop-cat .vortis-cat.e-qui small { color: #14181F; opacity: .8; }
.vortis-cat-link a { color: var(--vd-ambra); font-family: var(--vd-txt); }
.woocommerce .term-description { color: var(--vd-spento); font-family: var(--vd-txt); font-size: 17px; }

/* la tendina a gruppi */
.dropdown-menu .dropdown-gruppo { font-family: var(--vd-dat); color: var(--vd-spento); }
.dropdown-menu a.dropdown-tutti { color: var(--vd-ambra); }

/* ------------------ carrello e icona dei cookie come sul sito nuovo */
.cart-float {
  background: var(--vd-carta) !important; border: 1px solid var(--vd-riga);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45) !important; left: 20px !important; bottom: 20px !important;
}
.cart-float svg { stroke: var(--vd-testo); }
.cart-float:hover { transform: none !important; border-color: var(--vd-ambra); }
.cart-badge { background: var(--vd-ambra) !important; color: #14181F !important; }
#vt-consent-icon { background: var(--vd-carta) !important; border-color: var(--vd-riga) !important; color: var(--vd-spento) !important; }

/* --------------------------------- ritorno, e il prezzo che si spiega */
.vortis-indietro { margin: 0 0 18px; font-family: var(--vd-txt); font-size: 15px; }
.vortis-indietro a { color: var(--vd-ambra); text-decoration: none; font-weight: 600; }
.vortis-indietro a:hover { text-decoration: underline; text-underline-offset: 3px; }
.woocommerce .price .vortis-prezzo-per,
.woocommerce .price .vortis-prezzo-da {
  font-family: var(--vd-txt) !important; font-size: 15px !important; font-weight: 400 !important;
  color: var(--vd-spento) !important;
}
.woocommerce .price .vortis-attivazione,
.woocommerce .price .vortis-attivazione .woocommerce-Price-amount {
  display: block; margin-top: 4px; font-family: var(--vd-txt) !important;
  font-size: 14px !important; font-weight: 400 !important; color: var(--vd-spento) !important;
}
.woocommerce .price .vortis-attivazione .woocommerce-Price-amount { display: inline; color: var(--vd-testo) !important; font-weight: 600 !important; }
/* la regola del prezzo grande (.price .woocommerce-Price-amount, 26px ambra)
   e' piu' specifica: senza questa l'attivazione usciva grande come il canone */
.woocommerce ul.products li.product .price .vortis-attivazione .woocommerce-Price-amount,
.woocommerce div.product .price .vortis-attivazione .woocommerce-Price-amount {
  font-family: var(--vd-txt) !important; font-size: 14px !important; font-weight: 600 !important;
  color: var(--vd-testo) !important;
}

/* Sul telefono WooCommerce carica woocommerce-smallscreen.css, che da' a ogni
   scheda width:48% (le due colonne a float di una volta). Dentro la nostra
   griglia la scheda diventava META' della sua colonna e il testo andava a
   capo parola per parola (visto da Marco, 10/09). */
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product,
.woocommerce ul.products li.product {
  width: auto !important; float: none !important; margin: 0 !important; clear: none !important;
}

/* ------------------------------------- la prima pagina: le categorie */
.vortis-shop-intro { color: var(--vd-spento); font-family: var(--vd-txt); font-size: 18px; margin: 4px 0 26px; }
.woocommerce ul.products:has(> li.product-category) {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)) !important;
  gap: 18px !important;
}
.woocommerce ul.products li.product-category { padding: 0 !important; }
.woocommerce ul.products li.product-category > a {
  display: flex; flex-direction: column; gap: 12px; height: 100%;
  padding: 26px 24px 24px; text-decoration: none; color: var(--vd-testo);
}
.woocommerce ul.products li.product-category:hover { border-color: var(--vd-ambra) !important; }
.vortis-tessera-logo {
  width: 56px !important; height: 56px !important; border: 0 !important;
  border-radius: 0 !important; margin: 0 0 6px !important;
}
.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
  font-family: var(--vd-tit) !important; font-size: 26px !important; font-weight: 700 !important;
  letter-spacing: -.02em !important; margin: 0 !important; padding: 0 !important; color: var(--vd-testo) !important;
}
.vortis-tessera-cosa { margin: 0; font-family: var(--vd-txt); font-size: 15.5px; line-height: 1.45; color: var(--vd-spento); }
.vortis-tessera-vai {
  margin-top: auto; padding-top: 10px; font-family: var(--vd-txt); font-weight: 600; font-size: 15px;
  color: var(--vd-ambra);
}
.woocommerce ul.products li.product-category > a:focus-visible { outline: 2px solid var(--vd-ambra); outline-offset: 3px; border-radius: 14px; }

/* ------------------------------------------------------------- le schede */
.woocommerce ul.products li.product {
  background: var(--vd-carta) !important;
  border: 1px solid var(--vd-riga) !important;
  border-radius: 14px !important;
  padding: 18px !important;
  /* Colonna: il pulsante va in fondo e resta alla stessa altezza in tutta la
     fila, anche quando un titolo va su due righe e l'altro no. */
  display: flex !important; flex-direction: column;
}
.woocommerce ul.products li.product > a.button {
  margin-top: auto !important; align-self: flex-start;
}
/* Prodotti pagati via Vortis Billing: il pulsante e' dentro un modulo POST
   (mu-plugins/vortis-billing-shop.php), deve stare in fondo come il link. */
.woocommerce ul.products li.product > form.vortis-acquista {
  margin: auto 0 0 !important; align-self: flex-start;
}
.woocommerce div.product form.vortis-acquista { margin-bottom: 2em; }
.woocommerce ul.products li.product:hover {
  transform: none !important;
  border-color: #3A424E !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45) !important;
}
.woocommerce ul.products li.product img {
  border-radius: 10px !important; border: 1px solid var(--vd-riga);
  margin-bottom: 14px !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--vd-tit) !important;
  font-size: 19px !important; font-weight: 600 !important;
  letter-spacing: 0 !important; text-transform: none !important;
  color: var(--vd-testo) !important; padding: 0 !important;
  /* Sempre lo spazio di due righe (Marco, 10/09: «i prezzi devono essere
     sempre sulla stessa linea»): un titolo corto e uno lungo nella stessa
     fila facevano partire il prezzo a due altezze diverse. */
  line-height: 1.3 !important; min-height: 2.6em;
}
@media (max-width: 600px) {
  /* una colonna sola: niente da allineare, niente spazio vuoto */
  .woocommerce ul.products li.product .woocommerce-loop-product__title { min-height: 0; }
}
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .woocommerce-Price-amount,
.woocommerce div.product p.price, .woocommerce div.product span.price {
  font-family: var(--vd-tit) !important;
  color: var(--vd-ambra) !important;
  font-size: 26px !important; font-weight: 700 !important;
}

/* ------------------------------------------------------------- i pulsanti */
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt {
  background: var(--vd-ambra) !important; color: #14181F !important;
  font-family: var(--vd-txt) !important; font-weight: 600 !important;
  border-radius: 10px !important; text-transform: none !important;
  letter-spacing: 0 !important; padding: 11px 18px !important;
  border: 1px solid var(--vd-ambra) !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce a.button.alt:hover { filter: brightness(1.06); }
.woocommerce a.button:focus-visible, .woocommerce button.button:focus-visible {
  outline: 3px solid var(--vd-testo); outline-offset: 2px;
}

/* ------------------------------------------------- scheda singola e resto */
.woocommerce div.product .product_title { font-family: var(--vd-tit) !important; }
.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--vd-spento); font-size: 17px;
}
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-ordering select {
  font-family: var(--vd-dat) !important; font-size: 13px !important;
  color: var(--vd-spento) !important;
}
.woocommerce .woocommerce-ordering select {
  background: var(--vd-carta); border: 1px solid var(--vd-riga);
  border-radius: 8px; padding: 8px 10px;
}
.woocommerce nav.woocommerce-pagination ul { border-color: var(--vd-riga); }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  font-family: var(--vd-dat); color: var(--vd-testo);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--vd-ambra); color: #14181F;
}
.woocommerce .woocommerce-info, .woocommerce .woocommerce-message {
  background: var(--vd-carta); border-top-color: var(--vd-ambra);
  color: var(--vd-testo);
}
.woocommerce table.shop_table, .woocommerce table.shop_table td,
.woocommerce table.shop_table th { border-color: var(--vd-riga) !important; }

/* ------------------------------------------------- la barra in alto e il fondo
   Sulle pagine del negozio anche la testata veste la pelle nuova: e' il pezzo
   che fa dire «sono ancora sul sito vecchio». Non si tocca il PHP, solo come
   si vede: struttura e voci restano quelle del tema. */
.woocommerce-page .navbar, .woocommerce .navbar {
  background: rgba(11, 14, 18, .86) !important;
  border-bottom: 1px solid var(--vd-riga) !important;
  backdrop-filter: saturate(140%) blur(10px);
}
.woocommerce-page .navbar-logo, .woocommerce .navbar-logo {
  font-family: var(--vd-tit) !important; letter-spacing: .02em !important;
  font-weight: 700 !important; font-size: 20px !important;
}
.woocommerce-page .navbar-logo .dot, .woocommerce .navbar-logo .dot { color: var(--vd-ambra) !important; }
.woocommerce-page .navbar-links a, .woocommerce .navbar-links a,
.woocommerce-page .navbar-links .dropdown-toggle {
  font-family: var(--vd-txt) !important; font-size: 15px !important;
  color: var(--vd-spento) !important;
}
.woocommerce-page .navbar-links a:hover, .woocommerce .navbar-links a:hover {
  color: var(--vd-testo) !important;
}
.woocommerce-page .navbar-cta, .woocommerce .navbar-cta {
  background: var(--vd-ambra) !important; color: #14181F !important;
  font-family: var(--vd-txt) !important; font-weight: 600 !important;
  border-radius: 10px !important; letter-spacing: 0 !important;
}
.woocommerce-page .navbar-cta:hover, .woocommerce .navbar-cta:hover {
  background: var(--vd-ambra) !important; filter: brightness(1.06); transform: none !important;
}
.woocommerce-page footer, .woocommerce footer {
  background: var(--vd-fondo) !important; border-top: 1px solid var(--vd-riga) !important;
}
.woocommerce-page footer a, .woocommerce footer a { color: var(--vd-spento) !important; }
.woocommerce-page footer a:hover, .woocommerce footer a:hover { color: var(--vd-testo) !important; }

/* il menu del telefono coi colori del sito nuovo */
.mobile-menu { background: var(--vd-fondo) !important; }
.mobile-menu a { border-color: var(--vd-riga) !important; color: var(--vd-testo) !important; font-family: var(--vd-txt); }

/* ==========================================================================
   TEMA CHIARO (10/09, Marco: «fai anche lo shop»). Vale quando <html> NON ha
   data-theme="dark": lo decide lo script in testa (header.php), dall'
   impostazione di sistema o dal tasto sole/luna. Qui si ridefiniscono solo i
   colori: i token della pelle nuova (--vd-*) e quelli del tema vecchio
   (--color-*) che usano testata, menu, piè di pagina e banner dei cookie.
   ========================================================================== */
html:not([data-theme="dark"]) body.woocommerce-page,
html:not([data-theme="dark"]) body.woocommerce,
html:not([data-theme="dark"]) .woocommerce-page,
html:not([data-theme="dark"]) .woocommerce {
  color-scheme: light;
  --vd-fondo: #FFFFFF;
  --vd-carta: #F4F5F3;
  --vd-riga: #E2E4E0;
  --vd-testo: #12161C;
  --vd-spento: #55606F;
  --vd-ambra-t: #8A5B00;   /* ambra per i TESTI: quella piena su bianco non si legge */
  --color-bg: #FFFFFF;
  --color-bg2: #F4F5F3;
  --color-bg3: #ECEEEA;
  --color-white: #12161C;
  --color-muted: #55606F;
  --color-border: #E2E4E0;
}
html:not([data-theme="dark"]) body::before { display: none; }              /* le stelline */
html:not([data-theme="dark"]) .navbar.scrolled,
html:not([data-theme="dark"]) .woocommerce-page .navbar,
html:not([data-theme="dark"]) .woocommerce .navbar { background: rgba(255, 255, 255, .9) !important; }
html:not([data-theme="dark"]) .burger span { background: #12161C !important; }
html:not([data-theme="dark"]) .woocommerce ul.products li.product:hover { box-shadow: 0 14px 34px rgba(18, 22, 28, .12) !important; }

/* i testi ambra diventano ambra scura; i pulsanti restano ambra piena */
html:not([data-theme="dark"]) .woocommerce ul.products li.product .price,
html:not([data-theme="dark"]) .woocommerce ul.products li.product .price .woocommerce-Price-amount,
html:not([data-theme="dark"]) .woocommerce div.product p.price,
html:not([data-theme="dark"]) .woocommerce div.product span.price,
html:not([data-theme="dark"]) .vortis-cat-link a,
html:not([data-theme="dark"]) .vortis-indietro a,
html:not([data-theme="dark"]) .vortis-tessera-vai,
html:not([data-theme="dark"]) .dropdown-menu a.dropdown-tutti { color: var(--vd-ambra-t) !important; }
html:not([data-theme="dark"]) .woocommerce ul.products li.product .price .vortis-attivazione .woocommerce-Price-amount { color: var(--vd-testo) !important; }

/* il logo: la versione bianca sparisce sul bianco */
.navbar-logo .logo-chiaro { display: none; }
html:not([data-theme="dark"]) .navbar-logo .logo-scuro { display: none; }
html:not([data-theme="dark"]) .navbar-logo .logo-chiaro { display: block; }

/* il tasto sole/luna */
.tema-btn {
  width: 42px; height: 42px; flex: none; margin-left: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--vd-riga, #262C35); border-radius: 50%;
  color: var(--vd-testo, #E9EDF0); cursor: pointer;
}
.tema-btn:hover { border-color: var(--vd-ambra); }
.tema-btn:focus-visible { outline: 3px solid var(--vd-ambra); outline-offset: 2px; }
.tema-btn svg { width: 19px; height: 19px; }
.tema-sole { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; display: none; }
.tema-luna { fill: currentColor; }
html[data-theme="dark"] .tema-sole { display: block; }
html[data-theme="dark"] .tema-luna { display: none; }
@media (max-width: 768px) { .tema-btn { margin-left: auto; margin-right: 8px; } }

/* Velocita' (10/09): sulle pagine shop Inter e Orbitron di Google non si
   caricano piu'. Testata, piede e banner dei cookie usano --font-sans e
   --font-display del tema vecchio: qui diventano i caratteri della pelle. */
body.woocommerce-page, body.woocommerce {
  --font-sans: var(--vd-txt);
  --font-display: var(--vd-tit);
}
/* un h1 dentro <section> senza dimensione dichiarata e' un avviso di Chrome
   (H1UserAgentFontSizeInSection) e costava punti in "buone pratiche" */
.woocommerce-page h1.page-title, .woocommerce h1.page-title,
.woocommerce-page .entry-title, .woocommerce div.product .product_title {
  font-size: clamp(28px, 4vw, 40px); line-height: 1.15;
}

/* Piede: P.IVA e riga in fondo erano grigio al 50% (2,59:1, sotto il minimo
   di 4,5). Col grigio "spento" della pelle si leggono in tutti e due i temi. */
.woocommerce-page .footer-piva, .woocommerce .footer-piva,
.woocommerce-page .footer-bottom, .woocommerce-page .footer-bottom span,
.woocommerce-page .footer-bottom-links a { color: var(--vd-spento) !important; }

/* ==========================================================================
   BLOG (10/09): elenco e articoli con la pelle nuova. Il body del blog ha
   anche .woocommerce-page (functions.php), quindi token, testata, piede e
   tema chiaro/scuro sono gli stessi dello shop. Qui solo le regole sue.
   ========================================================================== */
.blog-pagina { padding-top: 128px !important; }
.blog-wrap { max-width: 820px !important; }
.blog-testa { margin-bottom: 34px; }
.blog-occhiello, .blog-data {
  display: block; font-family: var(--vd-dat); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--vd-spento); margin: 0 0 10px;
}
.pelle-blog .blog-titolo {
  font-family: var(--vd-tit) !important; font-weight: 700; letter-spacing: -.025em !important;
  font-size: clamp(32px, 5vw, 50px); line-height: 1.08; color: var(--vd-testo); margin: 0 0 14px;
}
.blog-lead { font-family: var(--vd-txt); font-size: 19px; line-height: 1.55; color: var(--vd-spento); margin: 0 0 24px; max-width: 64ch; }

.blog-elenco { display: grid; gap: 16px; }
.blog-scheda {
  display: block; padding: 26px 28px; border-radius: 14px; text-decoration: none;
  background: var(--vd-carta); border: 1px solid var(--vd-riga); color: var(--vd-testo);
  transition: border-color .15s ease;
}
.blog-scheda:hover { border-color: var(--vd-ambra); }
.blog-scheda:focus-visible { outline: 3px solid var(--vd-ambra); outline-offset: 3px; }
.pelle-blog .blog-scheda-titolo {
  font-family: var(--vd-tit) !important; font-size: 23px; font-weight: 700; letter-spacing: -.015em !important;
  line-height: 1.25; color: var(--vd-testo); margin: 0 0 10px;
}
.blog-scheda-estratto { font-family: var(--vd-txt); font-size: 16px; line-height: 1.55; color: var(--vd-spento); margin: 0 0 14px; }
.blog-leggi { font-family: var(--vd-txt); font-weight: 600; font-size: 15px; color: var(--vd-ambra); text-decoration: none; }
html:not([data-theme="dark"]) .blog-leggi,
html:not([data-theme="dark"]) .pelle-blog .blog-content a { color: var(--vd-ambra-t) !important; }

.blog-copertina { border-radius: 14px; overflow: hidden; border: 1px solid var(--vd-riga); margin: 8px 0 36px; }
.blog-copertina img { display: block; width: 100%; height: auto; }

.pelle-blog .blog-content { font-family: var(--vd-txt); font-size: 18px; line-height: 1.75; color: var(--vd-testo); max-width: 68ch; }
.pelle-blog .blog-content p { margin: 0 0 20px; color: var(--vd-testo); }
.pelle-blog .blog-content h2 { font-family: var(--vd-tit) !important; font-size: 28px; line-height: 1.2; margin: 46px 0 14px; color: var(--vd-testo); letter-spacing: -.015em !important; }
.pelle-blog .blog-content h3 { font-family: var(--vd-tit) !important; font-size: 22px; line-height: 1.25; margin: 36px 0 12px; color: var(--vd-testo); }
.pelle-blog .blog-content ul, .pelle-blog .blog-content ol { margin: 14px 0 24px 22px; }
.pelle-blog .blog-content li { margin-bottom: 8px; }
.pelle-blog .blog-content a { color: var(--vd-ambra); text-decoration: underline; text-underline-offset: 3px; }
.pelle-blog .blog-content strong { color: var(--vd-testo); }
.pelle-blog .blog-content blockquote { border-left: 3px solid var(--vd-ambra); padding: 14px 22px; margin: 24px 0; background: var(--vd-carta); border-radius: 0 12px 12px 0; }
.pelle-blog .blog-content img { border-radius: 12px; margin: 24px 0; max-width: 100%; height: auto; }
.pelle-blog .blog-content table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 16px; }
.pelle-blog .blog-content th, .pelle-blog .blog-content td { border-bottom: 1px solid var(--vd-riga); padding: 10px 8px; text-align: left; }

.blog-cta { margin-top: 56px; padding: 32px; border-radius: 14px; background: var(--vd-carta); border: 1px solid var(--vd-riga); }
.pelle-blog .blog-cta-titolo { font-family: var(--vd-tit) !important; font-size: 24px; font-weight: 700; margin: 0 0 8px; color: var(--vd-testo); }
.blog-cta-tasti { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.blog-cta .button {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 22px; border-radius: 10px;
  background: var(--vd-ambra); color: #14181F !important; font-family: var(--vd-txt); font-weight: 600; text-decoration: none;
}
.pelle-blog .nav-links { display: flex; gap: 8px; margin-top: 28px; font-family: var(--vd-txt); }
.pelle-blog .nav-links .page-numbers { padding: 8px 14px; border: 1px solid var(--vd-riga); border-radius: 8px; color: var(--vd-testo); text-decoration: none; }
.pelle-blog .nav-links .current { border-color: var(--vd-ambra); }
@media (max-width: 600px) {
  .blog-pagina { padding-top: 96px !important; }
  .blog-scheda { padding: 20px; }
  .pelle-blog .blog-content { font-size: 17px; }
}

/* Con la voce Blog la barra WordPress andava a capo fra 770 e 1024 px (99 px
   di altezza, voci su tre righe). Sulle pagine con la pelle nuova il menu
   passa all'hamburger gia' sotto i 1180 px, come sul sito statico. */
@media (max-width: 1180px) {
  body.woocommerce-page .burger, body.woocommerce .burger { display: block !important; }
  body.woocommerce-page .navbar-links, body.woocommerce .navbar-links,
  body.woocommerce-page .navbar-cta-wrap, body.woocommerce .navbar-cta-wrap { display: none !important; }
  body.woocommerce-page .tema-btn, body.woocommerce .tema-btn { margin-left: auto; margin-right: 8px; }
}