/* =============================================================================
   ATTREZZATURABARMAN.IT - Single Product Page Style
   -----------------------------------------------------------------------------
   Salva questo file in: [tema-child]/css/single-product.css
   Caricato automaticamente SOLO nelle pagine prodotto tramite functions.php
   (funzione abm_enqueue_product_page_styles)
   ============================================================================= */

:root {
  --abm-accent: #FFCE53;        /* Oro - colore CTA principale */
  --abm-accent-dark: #e6b93d;   /* Variante scura per hover */
  --abm-text-dark: #1a1a1a;
  --abm-text-muted: #888888;
  --abm-border-light: #ececec;
  --abm-radius: 8px;
}

/* ==========================================================================
   1. IMMAGINI PRODOTTO - angoli arrotondati + ombra morbida
   ========================================================================== */
.single-product div.product .woocommerce-product-gallery {
  position: relative; /* necessario per posizionare i badge */
}

.single-product div.product .woocommerce-product-gallery img,
ul.products li.product img {
  border-radius: var(--abm-radius) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

ul.products li.product:hover img {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12) !important;
}

/* ==========================================================================
   2. BLOCCO PREZZO + PULSANTE AGGIUNGI AL CARRELLO
   Prezzo di listino: oro barrato | Prezzo di vendita: bianco
   ========================================================================== */
body.single-product .woocommerce div.product p.price,
body.single-product div.product p.price,
body.single-product div.product span.price,
body.single-product div.product p.price bdi,
body.single-product div.product p.price span,
body.single-product div.product p.price .amount,
body.single-product div.product p.price .woocommerce-Price-amount,
body.single-product div.product p.price .woocommerce-Price-currencySymbol {
  font-size: 24px !important;
  font-weight: 600;
  color: #ffffff !important;
  margin-bottom: 4px;
}

/* Prezzo di listino (barrato) -> oro */
body.single-product div.product p.price del,
body.single-product div.product p.price del *,
body.single-product div.product p.price del bdi,
body.single-product div.product p.price del span,
body.single-product div.product p.price del .amount,
body.single-product div.product p.price del .woocommerce-Price-amount,
body.single-product div.product p.price del .woocommerce-Price-currencySymbol {
  color: var(--ast-global-color-1, #FFCE53) !important;
  text-decoration: line-through !important;
  opacity: 1;
  font-size: 26px !important;
}

/* Prezzo di vendita (attuale) -> bianco */
body.single-product div.product p.price ins,
body.single-product div.product p.price ins *,
body.single-product div.product p.price ins bdi,
body.single-product div.product p.price ins span,
body.single-product div.product p.price ins .amount,
body.single-product div.product p.price ins .woocommerce-Price-amount,
body.single-product div.product p.price ins .woocommerce-Price-currencySymbol {
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 24px !important;
}

.single-product div.product form.cart .button,
.single-product div.product .single_add_to_cart_button {
  display: block;
  width: 100%;
  background-color: var(--abm-accent) !important;
  color: #111111 !important;
  border: none !important;
  border-radius: 6px;
  padding: 16px 24px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.single-product div.product form.cart .button:hover,
.single-product div.product .single_add_to_cart_button:hover {
  background-color: var(--abm-accent-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(201, 162, 39, 0.35);
}

.single-product div.product form.cart .button:active,
.single-product div.product .single_add_to_cart_button:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(201, 162, 39, 0.3);
}

/* Su desktop il bottone non deve necessariamente essere a piena larghezza
   se preferisci un pulsante più compatto, rimuovi il blocco sotto */
@media (min-width: 769px) {
  .single-product div.product form.cart .button,
  .single-product div.product .single_add_to_cart_button {
    max-width: 380px;
  }
}

@media (max-width: 768px) {
  .single-product div.product form.cart .button,
  .single-product div.product .single_add_to_cart_button {
    padding: 15px 20px;
    font-size: 14px;
  }
}

/* ==========================================================================
   3. METADATI DISCRETI (SKU, categorie, tag) - spostati in fondo dal PHP
   ========================================================================== */
.single-product .product_meta {
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid var(--abm-border-light);
  font-size: 14px;
  color: var(--abm-text-muted);
  line-height: 1.8;
}

.single-product .product_meta > span {
  display: block;
}

/* ==========================================================================
   4. INFO SPEDIZIONE / CONSEGNA STIMATA
   ========================================================================== */
.abm-delivery-info {
  margin: 16px 0 20px 0;
  font-size: 14px;
}

.abm-free-shipping {
  color: #2e7d32;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px 0;
}

.abm-icon-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #2e7d32;
  color: #fff;
  font-size: 10px;
}

.abm-shipping-note {
  color: var(--abm-text-muted);
  margin: 0 0 4px 0;
}

.abm-delivery-estimate {
  color: #555555;
  margin: 0;
}

/* ==========================================================================
   5. BADGE DINAMICI (offerta / scorte basse / ultimo rimasto)
   ========================================================================== */
.abm-badges-wrap {
  position: static;          /* nel flusso normale, sotto i metadati prodotto */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0 0;
}

.abm-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
}

.abm-badge-sale {
  background-color: var(--abm-accent);
  color: #111111;
}

.abm-badge-lowstock {
  background-color: #d9822b;
}

.abm-badge-lastone {
  background-color: #c0392b;
  animation: abmPulse 1.8s infinite;
}

@keyframes abmPulse {
  0%   { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.5); }
  70%  { box-shadow: 0 0 0 10px rgba(192, 57, 43, 0); }
  100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0); }
}

/* ==========================================================================
   9. VARIANTI / SWATCHES (plugin Variation Swatches - cfvsw)

   ATTENZIONE: esistono DUE tipi di swatch:
   - LABEL (testo, es. "30/45ml")  -> riquadro nero, bordo/testo bianco
   - COLORE (nessun testo, il colore E' lo swatch) -> sfondo lasciato al plugin
   In entrambi i casi, quando selezionato -> bordo oro.
   ========================================================================== */
.cfvsw-swatches-container {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px !important;
  margin: 6px 0 12px 0;
}

/* --- Regole COMUNI a tutti gli swatch (niente background qui!) --- */
.cfvsw-swatches-option {
  border: 1px solid #ffffff !important;
  border-radius: 8px !important;
  cursor: pointer;
  box-shadow: none !important;
  outline: none !important;
  /* `transform` sta nella transizione per l'ingrandimento della selezionata:
     senza, il salto sarebbe secco. */
  transition: border-color 0.3s ease, color 0.3s ease, transform 0.18s ease !important;
}

/* --- Swatch TESTUALI (es. 30/45ml): riquadro nero adattato al testo --- */
.cfvsw-swatches-option.cfvsw-label-option {
  background-color: #0d0d0d !important;
  background: #0d0d0d !important;
  color: #ffffff !important;
  padding: 10px 18px !important;
  min-width: auto !important;   /* si adatta al testo contenuto */
  min-height: auto !important;
  width: auto !important;
  height: auto !important;
  text-align: center;
  font-size: 14px !important;
  font-weight: 500;
  line-height: 1.4 !important;
  white-space: nowrap;
}

.cfvsw-swatches-option.cfvsw-label-option * {
  color: inherit !important;
  background: transparent !important;
}

/* --- Swatch COLORE: NON tocchiamo lo sfondo (è il colore del prodotto),
       diamo solo forma e dimensione leggibili --- */
.cfvsw-swatches-option:not(.cfvsw-label-option) {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 8px !important;
}

/* --- Hover (entrambi i tipi) --- */
.cfvsw-swatches-option:hover {
  border-color: var(--abm-accent) !important;
}

.cfvsw-swatches-option.cfvsw-label-option:hover {
  color: var(--abm-accent) !important;
}

/* --- SELEZIONATO -> bordo oro E UN PASSO AVANTI ---------------------------
   Il solo bordo oro non bastava, e su una pastiglia chiara si perdeva: chiesto
   dal committente il 21 agosto 2026, "senza dubbi che sia proprio quella".
   L'ingrandimento e' del 15%: su 34 pixel fa 39, cioe' cinque in piu' degli
   altri, che si vedono anche di sfuggita e non spostano niente, perche' una
   trasformazione non occupa spazio nel flusso. Lo `z-index` serve solo a
   tenerla sopra le vicine quando cresce.
   ------------------------------------------------------------------------- */
.cfvsw-swatches-option.cfvsw-selected-swatch,
.cfvsw-swatches-option[aria-checked="true"] {
  border: 2px solid var(--abm-accent) !important;
  box-shadow: none !important;
  transform: scale(1.15) !important;
  position: relative;
  z-index: 2;
}

/* Solo lo swatch TESTUALE selezionato cambia anche il colore del testo */
.cfvsw-swatches-option.cfvsw-label-option.cfvsw-selected-swatch {
  background-color: #0d0d0d !important;
  color: var(--abm-accent) !important;
}

/* --- Variante non disponibile: SI VEDE E SI CLICCA COME LE ALTRE ----------
   Deciso il 21 agosto 2026. La classe vera del plugin e'
   `cfvsw-swatches-disabled` (le due qui sotto non le usa su questa pagina, e
   restano solo per compatibilita'): non le si toglie opacita' e non le si mette
   `cursor: not-allowed`, perche' su questo sito una variante esaurita **si deve
   poter scegliere**. E' l'unico modo per far comparire il modulo "avvisami
   quando torna disponibile" (v. js/back-in-stock.js). A dire che e' esaurita ci
   pensa WooCommerce, con la sua riga di disponibilita', che e' un'informazione
   piu' chiara di una pastiglia sbiadita.
   ------------------------------------------------------------------------- */
.cfvsw-swatches-option.cfvsw-out-of-stock,
.cfvsw-swatches-option.cfvsw-disabled {
  opacity: 1;
}

/* Link "Svuota" / reset varianti -> NASCOSTO (non necessario) */
.reset_variations,
a.reset_variations {
  display: none !important;
}

/* ==========================================================================
   10. RISPETTO ACCESSIBILITÀ - riduzione animazioni
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .cfvsw-swatches-option {
    transition: none !important;
  }
}

/* ==========================================================================
   11. CATEGORIA NEI METADATI - oro fisso, nessun cambio al hover
   ========================================================================== */
.abm-product-meta .posted_in,
.abm-product-meta .posted_in a,
.abm-product-meta .posted_in a:hover,
.abm-product-meta .posted_in a:focus,
.abm-product-meta .posted_in a:visited,
.product_meta .posted_in a,
.product_meta .posted_in a:hover {
  color: var(--abm-accent) !important;
  text-decoration: none !important;
}

.abm-product-meta,
.abm-product-meta .sku_wrapper,
.abm-product-meta .sku {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* ==========================================================================
   12. FRECCE NAVIGAZIONE PRODOTTO (precedente / successivo)
   Sfondo nero, testo oro, riquadro arrotondato con bordo oro
   ========================================================================== */
/* Il riquadro va SOLO sul link esterno */
.ast-product-navigation-wrapper .product-links a,
.ast-product-navigation-wrapper > .product-links > a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background-color: #0d0d0d !important;
  background: #0d0d0d !important;
  color: var(--abm-accent) !important;
  border: 1px solid var(--abm-accent) !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  transition: all 0.3s ease !important;
}

/* Gli elementi INTERNI non devono avere bordo o sfondo propri
   (altrimenti si crea un doppio riquadro) */
.ast-product-navigation-wrapper .ast-product-icon-previous,
.ast-product-navigation-wrapper .ast-product-icon-next,
.ast-product-navigation-wrapper .ast-icon,
.ast-product-navigation-wrapper .icon-arrow,
.ast-product-navigation-wrapper a i,
.ast-product-navigation-wrapper a span {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
}

.ast-product-navigation-wrapper a svg,
.ast-product-navigation-wrapper a svg path,
.product-links a svg,
.product-links a svg path {
  fill: var(--abm-accent) !important;
  color: var(--abm-accent) !important;
}

.ast-product-navigation-wrapper a:hover,
.product-links a:hover {
  background-color: var(--abm-accent) !important;
  color: #111111 !important;
}

.ast-product-navigation-wrapper a:hover svg,
.ast-product-navigation-wrapper a:hover svg path,
.product-links a:hover svg path {
  fill: #111111 !important;
}

/* ==========================================================================
   13. ICONA CARRELLO FLOTTANTE - sfondo oro
   ========================================================================== */
.moderncart-floating-cart-button,
button.moderncart-floating-cart-button {
  background-color: var(--abm-accent) !important;
  background: var(--abm-accent) !important;
  color: #111111 !important;
}

.moderncart-floating-cart-button svg,
.moderncart-floating-cart-button svg path,
.moderncart-floating-cart-button i {
  fill: #111111 !important;
  color: #111111 !important;
}

/* ==========================================================================
 * PRODOTTI CORRELATI / UP-SELL / CROSS-SELL: stesse card del catalogo
 * --------------------------------------------------------------------------
 * Su scheda prodotto catalog-ui.css NON e' caricato: i correlati avevano
 * immagini distorte (object-fit:fill) e griglia Astra non responsive. Qui
 * replichiamo il trattamento catalogo: riquadro immagine fisso 1:1 con
 * letterbox bianco, e griglia responsive con DUE colonne su mobile (come
 * nelle altre categorie).
 * ========================================================================== */
.related.products ul.products,
.up-sells.products ul.products,
.cross-sells ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 0;
}

.related.products ul.products li.product,
.up-sells.products ul.products li.product,
.cross-sells ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}

/* Immagine: riquadro fisso 1:1, prodotto intero su fondo bianco (letterbox) */
.related.products ul.products li.product img,
.up-sells.products ul.products li.product img,
.cross-sells ul.products li.product img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  background-color: #ffffff;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 12px !important;
}

@media (max-width: 1024px) {
  .related.products ul.products,
  .up-sells.products ul.products,
  .cross-sells ul.products { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}

@media (max-width: 767px) {
  .related.products ul.products,
  .up-sells.products ul.products,
  .cross-sells ul.products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* =========================================================================
   SCHEMI DI CATEGORIA DENTRO LA DESCRIZIONE
   -------------------------------------------------------------------------
   Nati il 10 agosto 2026. Il primo schema era un'immagine sola, orizzontale:
   su un telefono da 375 px rendeva a 335x214 e il testo del disegno finiva a
   5 px, illeggibile. Un'immagine sola non puo' funzionare su tutte e due le
   forme di schermo, perche' il testo si rimpicciolisce con la larghezza.

   Quindi due file: uno largo per il desktop, uno verticale per il telefono,
   disegnati ciascuno per la propria larghezza. Qui si sceglie quale mostrare.

   Si usano due <img> con una classe e non <picture> con <source> perche'
   <picture> e <source> non stanno nella lista dei tag che WordPress lascia
   passare quando ripulisce il contenuto: all'importazione verrebbero tolti,
   e il telefono si ritroverebbe l'immagine larga, cioe' il problema di prima.
   ========================================================================= */

.abm-schema {
	margin: 32px 0;
}

.abm-schema img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.abm-schema figcaption {
	margin-top: 10px;
	font-size: 0.85em;
	line-height: 1.5;
	opacity: 0.75;
}

/* Di partenza si vede la versione larga: e' quella del desktop.

   ATTENZIONE ALLA SPECIFICITA', ed e' il motivo per cui questi selettori
   ripetono `.abm-schema img`. La regola qui sopra vale (0,1,1) perche' e'
   classe piu' elemento; scritte con la sola classe queste varrebbero (0,1,0)
   e perderebbero SEMPRE, a qualsiasi larghezza: il display:block vinceva e in
   pagina comparivano tutte e due le figure, la larga e la verticale alta 2600.
   Successo dal 10 all'11 agosto 2026 su tutte le schede con schema. */
.abm-schema img.abm-schema-mobile {
	display: none;
}

@media (max-width: 767px) {
	.abm-schema img.abm-schema-desktop {
		display: none;
	}
	.abm-schema img.abm-schema-mobile {
		display: block;
	}
}

/* =============================================================================
   14. LE TRE SCHEDE: DESCRIZIONE / INFORMAZIONI AGGIUNTIVE / RECENSIONI
   -----------------------------------------------------------------------------
   Segnalato dal committente il 26 agosto 2026, guardando il sito dal telefono:
   «nelle Informazioni aggiuntive i valori delle varianti sono nero su nero e
   non si leggono», e «l'impaginazione delle tre voci e' lontana dallo stile del
   sito: nude, senza gerarchia».

   IL NERO SU NERO, MISURATO. I valori di una variante non sono testo: sono
   LINK all'archivio di quel termine (`/color/nero/`). Il `td` era gia' chiaro -
   `rgb(245,245,245)` - ma dentro c'erano quattro `<a>` che prendevano il colore
   dei link di Astra, `rgb(20,21,22)`, su una pagina di fondo `rgb(10,10,10)`.
   Undici punti di differenza su 255: sullo schermo e' nero su nero.
   Guardare il colore del `td` diceva che andava tutto bene: e' il genere di
   misura che assolve un difetto invece di trovarlo. Il colore si legge
   sull'elemento che porta il testo, non sul suo contenitore.

   LE TRE VOCI, MISURATE. Su 375 px erano tre righe da 42 pixel, larghe tutta la
   colonna, tutte e tre dello stesso bianco e senza sfondo: **nessun segno
   diceva quale fosse aperta.** Non e' una questione di gusto, e' un elenco che
   non risponde alla sola domanda che gli si fa.
   ========================================================================== */

/* --- Le tre voci: capsule, e una sola accesa --------------------------- */
.woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 26px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--pb-gold-line, rgba(255, 206, 83, 0.16));
  list-style: none;
}

/* WooCommerce disegna di suo le linguette con bordi e due triangolini in
   `::before`/`::after`. Qui non servono: la capsula e' il bordo. */
.woocommerce-tabs ul.tabs li,
.woocommerce-tabs ul.tabs li.active {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
  content: none;
  display: none;
}

/* PERCHE' `!important` SU COLORE E SPAZIATURA, e solo li'. Misurato dal vivo
   il 26 agosto 2026, notte: due regole scrivono su questo stesso `a` e pesano
   entrambe (0,4,4), cioe' il doppio di questa.

     woocommerce-grid.min.css
       .woocommerce-js div.product .woocommerce-tabs ul.tabs li a
       -> padding: 0.5em 0; color: rgb(81,81,81)
     Astra, foglio in linea nella testa
       .woocommerce div.product .woocommerce-tabs ul.tabs li a
       -> color: var(--ast-global-color-2)

   Alla prima stesura sfondo e bordo passavano (nessuno li dichiarava) mentre
   colore e spaziatura no: le capsule si vedevano alte 28 px invece di 44 e
   tutte e tre dello stesso bianco. Rincorrere la specificita' avrebbe voluto
   dire scrivere `body .woocommerce div.product ...` e sperare nell'ordine dei
   fogli, che qui non e' garantito perche' una delle due sta in linea. */
.woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 12px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 11px;
  background-color: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.1px;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.22s ease, border-color 0.22s ease, background-color 0.22s ease;
}

/* LA VOCE APERTA E' L'UNICA COSA D'ORO QUI DENTRO: se fossero due, non
   direbbero piu' niente.

   E QUI I SELETTORI SONO TRE, non uno per vezzo. La voce aperta deve battere
   la regola generale qui sopra, che gia' porta `!important`: fra due
   dichiarazioni forzate decide la specificita', e la riga corta da sola
   pareggerebbe con le due di Astra e di WooCommerce elencate sopra. Le due
   lunghe le scavalcano di un antenato, e non costano niente a chi legge:
   dicono la stessa cosa tre volte, per tre alberi di pagina diversi
   (`.woocommerce`, `.woocommerce-js`, e il caso in cui non ci sia nessuno dei
   due). */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a:focus,
.woocommerce-js div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce-js div.product .woocommerce-tabs ul.tabs li.active a:focus,
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li.active a:focus {
  background-color: var(--pb-gold, #FFCE53) !important;
  border-color: transparent !important;
  color: #111 !important;
}

/* Il passaggio del mouse solo dove un mouse c'e' davvero. Su un telefono lo
   stato `:hover` resta appiccicato alla voce sfiorata finche' non se ne tocca
   un'altra, e si vedono due voci accese: e' successo tre volte in questo
   progetto (le schede dei tre passi, i pulsanti d'oro di Astra, le tre strade
   del checkout). */
@media (hover: hover) {
  .woocommerce-tabs ul.tabs li a:hover {
    background-color: rgba(255, 206, 83, 0.08);
    border-color: var(--pb-gold-hover, rgba(255, 206, 83, 0.7));
    color: #ffffff !important;
  }

  /* E la voce aperta non cambia colore quando ci passi sopra: e' gia' arrivata
     dove doveva. Senza questa riga Astra la riempie d'oro su oro. */
  .woocommerce div.product .woocommerce-tabs ul.tabs li.active a:hover,
  .woocommerce-js div.product .woocommerce-tabs ul.tabs li.active a:hover,
  .woocommerce-tabs ul.tabs li.active a:hover {
    background-color: var(--pb-gold, #FFCE53) !important;
    color: #111 !important;
  }
}

/* --- Il titolo dentro il pannello ------------------------------------- */
.woocommerce-tabs .woocommerce-Tabs-panel > h2:first-child,
.woocommerce-tabs .woocommerce-Tabs-panel > h1:first-child {
  margin: 0 0 16px;
  color: #ffffff;
  font-size: clamp(21px, 5.6vw, 30px);
  line-height: 1.25;
  overflow-wrap: break-word;
}


/* --- La tabella delle informazioni aggiuntive -----------------------------
   RIFATTA IL 27 AGOSTO 2026. Il committente: «sistemami la grafica, e' davvero
   brutta».

   COS'ERA, MISURATO DAL VIVO leggendo il CSSOM invece del computed:
   comandava `.woocommerce-js div.product .woocommerce-tabs .shop_attributes th`
   di Astra - quattro classi e due elementi - e le regole del tema, scritte
   `.woocommerce-tabs .shop_attributes th`, non l'hanno mai battuta. Sullo
   schermo restava la veste di Astra: reticolo `#ddd` su fondo nero, un filo
   verticale fra etichetta e valore, e l'etichetta bianca uguale al valore,
   cioe' due colonne senza nessuna gerarchia.

   Qui i selettori partono da `.woocommerce-js div.product`: non e' un vezzo,
   e' la sola forma che vince senza `!important`.

   COSA CAMBIA, e perche' ognuna delle tre cose:

   1. NIENTE GABBIA. Restano i fili orizzontali fra una voce e l'altra, e
      basta. Il riquadro chiuso su quattro lati e il filo verticale disegnavano
      una tabella di dati; qui sono due o tre righe, e una tabella di due righe
      dentro una cornice sembra piu' importante di quello che dice.

   2. UNA GERARCHIA VERA. L'etichetta e' un'insegna piccola in maiuscoletto
      spaziato al 62% di bianco; il valore e' testo pieno da 15px. E il 62% non
      e' una scelta a occhio: sotto quella soglia, a 12px, la scritta smette di
      leggersi per chi ha piu' di quarant'anni - la stessa misura presa il 27
      agosto sulla scheda "Chi sei".

   3. UNA MISURA DA LEGGERE. Il blocco si ferma a 720px anche su uno schermo
      largo. Prima l'etichetta stava a sinistra e il valore partiva dal 38%
      della pagina: su 1320px sono quattrocento pixel di vuoto fra la parola e
      il suo dato, e l'occhio deve attraversarli per ogni riga.

   Sotto i 600px le due colonne diventano due righe: a quella larghezza una
   colonna da 190px lascia al valore meno di meta' schermo, e "10 x 10 x 28 cm"
   ci va a capo dentro.
   ------------------------------------------------------------------------- */
.woocommerce-js div.product .woocommerce-tabs .woocommerce-product-attributes,
.woocommerce-js div.product .woocommerce-tabs .shop_attributes,
.woocommerce-tabs .woocommerce-product-attributes,
.woocommerce-tabs .shop_attributes {
  width: 100%;
  max-width: 720px;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  background: none;
}

.woocommerce-js div.product .woocommerce-tabs .woocommerce-product-attributes tr,
.woocommerce-js div.product .woocommerce-tabs .shop_attributes tr,
.woocommerce-tabs .woocommerce-product-attributes tr,
.woocommerce-tabs .shop_attributes tr {
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: none;
}

.woocommerce-js div.product .woocommerce-tabs .woocommerce-product-attributes tr:last-child,
.woocommerce-js div.product .woocommerce-tabs .shop_attributes tr:last-child,
.woocommerce-tabs .woocommerce-product-attributes tr:last-child,
.woocommerce-tabs .shop_attributes tr:last-child {
  border-bottom: 0;
}

/* L'etichetta: un'insegna, non un titolo. */
.woocommerce-js div.product .woocommerce-tabs .woocommerce-product-attributes th,
.woocommerce-js div.product .woocommerce-tabs .shop_attributes th,
.woocommerce-tabs .woocommerce-product-attributes th,
.woocommerce-tabs .shop_attributes th {
  width: 190px;
  padding: 15px 26px 15px 0;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 1.2px;
  line-height: 1.6;
  text-align: left;
  text-transform: uppercase;
  vertical-align: top;
}

/* Il valore: e' questo che si e' venuti a leggere. */
.woocommerce-js div.product .woocommerce-tabs .woocommerce-product-attributes td,
.woocommerce-js div.product .woocommerce-tabs .shop_attributes td,
.woocommerce-tabs .woocommerce-product-attributes td,
.woocommerce-tabs .shop_attributes td {
  padding: 15px 0;
  background: none;
  border: 0;
  color: #f2f2f2;
  font-size: 15px;
  font-style: normal;
  line-height: 1.6;
  vertical-align: top;
}

.woocommerce-js div.product .woocommerce-tabs .shop_attributes td p,
.woocommerce-tabs .woocommerce-product-attributes td p,
.woocommerce-tabs .shop_attributes td p {
  margin: 0;
}

/* IL DIFETTO VERO DEL 26 AGOSTO, ed e' una riga sola. I valori di una variante
   sono link: senza questa dichiarazione prendono `rgb(20,21,22)` da Astra e
   spariscono nel fondo. Il filo dorato sotto dice che si possono premere senza
   gridarlo. */
.woocommerce-js div.product .woocommerce-tabs .shop_attributes td a,
.woocommerce-tabs .woocommerce-product-attributes td a,
.woocommerce-tabs .shop_attributes td a {
  color: #f2f2f2;
  text-decoration: underline;
  text-decoration-color: rgba(255, 206, 83, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

@media (hover: hover) {
  .woocommerce-js div.product .woocommerce-tabs .shop_attributes td a:hover,
  .woocommerce-tabs .woocommerce-product-attributes td a:hover,
  .woocommerce-tabs .shop_attributes td a:hover {
    color: var(--pb-gold, #FFCE53);
    text-decoration-color: var(--pb-gold, #FFCE53);
  }
}

/* --- Sotto i 600px etichetta sopra, valore sotto ------------------------- */
@media (max-width: 600px) {
  .woocommerce-js div.product .woocommerce-tabs .woocommerce-product-attributes tr,
  .woocommerce-js div.product .woocommerce-tabs .shop_attributes tr,
  .woocommerce-tabs .woocommerce-product-attributes tr,
  .woocommerce-tabs .shop_attributes tr {
    display: block;
    padding: 13px 0;
  }

  .woocommerce-js div.product .woocommerce-tabs .woocommerce-product-attributes th,
  .woocommerce-js div.product .woocommerce-tabs .shop_attributes th,
  .woocommerce-js div.product .woocommerce-tabs .woocommerce-product-attributes td,
  .woocommerce-js div.product .woocommerce-tabs .shop_attributes td,
  .woocommerce-tabs .woocommerce-product-attributes th,
  .woocommerce-tabs .shop_attributes th,
  .woocommerce-tabs .woocommerce-product-attributes td,
  .woocommerce-tabs .shop_attributes td {
    display: block;
    width: auto;
    padding: 0;
  }

  .woocommerce-js div.product .woocommerce-tabs .woocommerce-product-attributes th,
  .woocommerce-js div.product .woocommerce-tabs .shop_attributes th,
  .woocommerce-tabs .woocommerce-product-attributes th,
  .woocommerce-tabs .shop_attributes th {
    margin: 0 0 5px;
  }
}

/* --- Sotto i 480 px le tre capsule stanno in colonna --------------------- */
@media (max-width: 480px) {
  .woocommerce-tabs ul.tabs li {
    flex: 1 1 100%;
  }
}

/* =============================================================================
   15. IL POSTO VUOTO DELLE DUE FRECCE
   -----------------------------------------------------------------------------
   Nato il 27 agosto 2026 insieme a `inc/abm-navigazione-prodotto.php`: da
   quando le frecce camminano dentro la categoria, il primo e l'ultimo prodotto
   di ogni famiglia hanno un lato senza destinazione.

   IL POSTO RESTA OCCUPATO. Se la freccia mancante sparisse, l'altra
   scivolerebbe sotto il dito che stava per premere quella di prima: e' la
   stessa ragione per cui la barra fra gli ordini in bacheca tiene il suo posto
   vuoto.

   E' UNO `<span>`, NON UN LINK SPENTO, quindi qui non serve `pointer-events`:
   non c'e' niente da premere e non c'e' niente da raggiungere col tab.
   ========================================================================== */
.ast-product-navigation-wrapper .product-links .abm-np__vuoto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(1.8em + 2px);
  width: calc(1.8em + 2px);
  margin-left: 0.4em;
  padding: 6px 10px;
  background-color: #0d0d0d;
  border: 1px solid rgba(255, 206, 83, 0.22);
  border-radius: 6px;
  color: rgba(255, 206, 83, 0.28);
  cursor: default;
}

.ast-product-navigation-wrapper .product-links .abm-np__vuoto svg,
.ast-product-navigation-wrapper .product-links .abm-np__vuoto svg path {
  fill: rgba(255, 206, 83, 0.28) !important;
  color: rgba(255, 206, 83, 0.28) !important;
}

/* =============================================================================
   16. I PEZZI DI UN KIT, CLICCABILI
   -----------------------------------------------------------------------------
   Nati il 27 agosto 2026 con `inc/abm-kit-collegamenti.php`. Chiesto dal
   committente: nelle specifiche dei pezzi ogni prodotto deve portare alla sua
   scheda.

   IL COLLEGAMENTO STA DENTRO UN GRASSETTO CHE C'ERA GIA', e questo decide la
   veste: il testo NON cambia colore. Se diventasse oro, la riga si
   trasformerebbe in un elenco di richiami e il grassetto smetterebbe di dire
   quello che diceva, cioe' "questo e' il nome del pezzo". Resta il filo dorato
   sotto, che e' la stessa grammatica dei valori nella scheda "Informazioni
   aggiuntive": si puo' premere, e lo si dice sottovoce.

   L'oro pieno arriva solo al passaggio del mouse, e solo dove un mouse c'e'.
   ========================================================================== */
.woocommerce-tabs .abm-kitlink,
.pb-fisarmonica .abm-kitlink,
.entry-content .abm-kitlink {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 206, 83, 0.5);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

@media (hover: hover) {
  .woocommerce-tabs .abm-kitlink:hover,
  .pb-fisarmonica .abm-kitlink:hover,
  .entry-content .abm-kitlink:hover {
    color: var(--pb-gold, #FFCE53);
    text-decoration-color: var(--pb-gold, #FFCE53);
  }
}

/* Il fuoco si vede: chi arriva col tasto tab deve sapere dov'e'. */
.woocommerce-tabs .abm-kitlink:focus-visible,
.pb-fisarmonica .abm-kitlink:focus-visible,
.entry-content .abm-kitlink:focus-visible {
  outline: 2px solid var(--pb-gold, #FFCE53);
  outline-offset: 2px;
}

/* =============================================================================
   17. I LINK NEL TESTO DELLA SCHEDA SONO ORO
   -----------------------------------------------------------------------------
   16 settembre 2026. Sulla scheda del mixing tin Tiffany il collegamento
   "Iron Mixing Tin lucido" usciva quasi nero (rgb 20,21,22) sul fondo scuro:
   l'unica regola che colorava i link nella descrizione era quella generica di
   Astra (`a { color: var(--ast-global-color-7) }`), pensata per un tema
   chiaro. Lo stesso valeva per OGNI link nelle descrizioni prodotto, dentro e
   fuori dalle fisarmoniche. Per il committente e' un errore da non ripetere:
   una parola che si puo' premere si vede, ed e' oro.

   La veste e' la stessa delle guide di categoria (category-guide.css): testo
   oro, filo oro leggero sotto, oro piu' chiaro al passaggio. Mai uno sfondo
   oro dietro al testo oro. I pezzi dei kit (.abm-kitlink, sezione 16) restano
   come sono: li' il grassetto dice il nome del pezzo e il colore non cambia.
   ========================================================================== */
.woocommerce-tabs .woocommerce-Tabs-panel--description a:not(.abm-kitlink):not(.button):not(.ast-button),
.pb-fisarmonica--prodotto a:not(.abm-kitlink):not(.button):not(.ast-button),
.woocommerce-product-details__short-description a:not(.abm-kitlink):not(.button) {
  color: var(--pb-gold, #FFCE53);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 206, 83, 0.35);
  transition: border-color 0.2s ease, color 0.2s ease;
}

@media (hover: hover) {
  .woocommerce-tabs .woocommerce-Tabs-panel--description a:not(.abm-kitlink):not(.button):not(.ast-button):hover,
  .pb-fisarmonica--prodotto a:not(.abm-kitlink):not(.button):not(.ast-button):hover,
  .woocommerce-product-details__short-description a:not(.abm-kitlink):not(.button):hover {
    color: #ffdb7f;
    border-bottom-color: var(--pb-gold, #FFCE53);
  }
}

.woocommerce-tabs .woocommerce-Tabs-panel--description a:not(.abm-kitlink):focus-visible,
.pb-fisarmonica--prodotto a:not(.abm-kitlink):focus-visible {
  outline: 2px solid var(--pb-gold, #FFCE53);
  outline-offset: 2px;
}