/* =============================================================================
   PROBAR - PAGINE CATEGORIA
   -----------------------------------------------------------------------------
   Percorso: [child]/css/category-ui.css
   Caricato su tutte le tassonomie prodotto. Dipende da catalog-ui.css, che
   disegna le card: qui c'e' tutto il resto.

   ORDINE DI LETTURA (mobile-first, ed e' l'ordine che converte):
     testata  ->  sottocategorie  ->  PRODOTTI  ->  approfondimento  ->  CTA
   Il testo lungo sta in fondo. Google lo legge comunque; l'utente vede
   subito la merce. Mettere 600 parole prima del primo prodotto e' il modo
   piu' educato di far scappare un cliente.
   ============================================================================= */

:root {
  --pb-gold: #FFCE53;
  --pb-gold-line: rgba(255, 206, 83, 0.14);
  --pb-gold-hover: rgba(255, 206, 83, 0.70);
  --pb-panel: #0a0a0a;
  --pb-card: #0d0d0d;
  --pb-ease: cubic-bezier(0.16, 1, 0.30, 1);
}

/* ==========================================================================
   1. TESTATA - la promessa della categoria
   ========================================================================== */
.pb-cat-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46vh;
  padding: 74px 24px 66px;
  margin: 0 0 42px;
  background-color: #000;
  background-size: cover;
  background-position: center;
  text-align: center;
  overflow: hidden;

  /* A tutta larghezza dentro il contenitore di Astra.
     `100vw` comprende la barra di scorrimento, l'area visibile no: senza
     togliergliela la fascia viene 15px troppo larga e, essendo centrata,
     apre una barra di scorrimento orizzontale (erano gli 8px della pagina
     categoria). `--pb-sb` la misura in inc/abm-larghezza-vera.php; se il
     JavaScript non parte vale 0px, cioe' esattamente com'era prima. */
  width: calc(100vw - var(--pb-sb, 0px));
  margin-left: calc(50% - (100vw - var(--pb-sb, 0px)) / 2);
}

/* Velo scuro su ::before: ::after e' di hero-zoom-bg (lo zoom-out) */
.pb-cat-hero.has-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.76) 0%,
    rgba(0,0,0,0.55) 45%,
    rgba(0,0,0,0.94) 100%);
}

.pb-cat-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 780px;
}

/* Briciole: orientano l'utente e danno a Google la gerarchia del sito */
.pb-cat-crumbs {
  margin: 0 0 18px;
  font-size: 14px;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.62);
}

.pb-cat-crumbs a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.35s ease;
}

.pb-cat-crumbs a:hover { color: var(--pb-gold); }

.pb-cat-kicker {
  margin: 0 0 10px;
  color: var(--pb-gold);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
}

/* L'H1 che prima non esisteva */
.pb-cat-title {
  margin: 0 0 18px;
  color: #fff;
  font-size: clamp(2.1rem, 5.5vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.pb-cat-hero .prestige-sep-wide { margin: 0 auto 20px; }

.pb-cat-intro {
  margin: 0 auto 14px;
  max-width: 62ch;
  color: rgba(255, 255, 255, 0.84);
  font-size: 16.5px;
  line-height: 1.7;
}

.pb-cat-count {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.pb-cat-count strong { color: var(--pb-gold); font-weight: 700; }

/* ==========================================================================
   2. SOTTOCATEGORIE - vetrina, non elenco di link
   ========================================================================== */
.pb-cat-children {
  margin: 0 0 46px;
}

.pb-cat-children__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}

.pb-cat-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 12px 16px;
  border: 1px solid var(--pb-gold-line);
  border-radius: 12px;
  background-color: var(--pb-card);
  text-decoration: none !important;
  transition: transform 0.9s var(--pb-ease),
              border-color 0.9s ease,
              box-shadow 0.9s var(--pb-ease);
}

.pb-cat-tile__media {
  display: block;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;
  background-color: #fff;
}

.pb-cat-tile__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 10px;
  box-sizing: border-box;
  transition: transform 1.3s var(--pb-ease);
}

.pb-cat-tile__name {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  transition: color 0.4s ease;
}

.pb-cat-tile__count {
  position: absolute;
  top: 10px;
  right: 10px;
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 20px;
  background-color: rgba(0, 0, 0, 0.7);
  border: 1px solid var(--pb-gold-line);
  color: var(--pb-gold);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

@media (hover: hover) and (pointer: fine) {
  .pb-cat-tile:hover {
    transform: translateY(-4px);
    border-color: var(--pb-gold-hover);
    box-shadow: 0 18px 40px rgba(0,0,0,0.5),
                0 0 26px rgba(255, 206, 83, 0.15);
  }
  .pb-cat-tile:hover img { transform: scale(1.04); }
  .pb-cat-tile:hover .pb-cat-tile__name { color: var(--pb-gold); }
}

/* ==========================================================================
   3. BARRA STRUMENTI - conteggio e ordinamento
   ========================================================================== */
.ast-shop-toolbar-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 26px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.woocommerce-result-count {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 14px;
}

.woocommerce-ordering select,
.woocommerce-ordering .orderby {
  min-height: 44px;
  padding: 10px 14px !important;
  background-color: var(--pb-card) !important;
  border: 1px solid var(--pb-gold-line) !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-size: 14px !important;
  cursor: pointer;
}

.woocommerce-ordering select:focus {
  outline: none;
  border-color: var(--pb-gold-hover) !important;
}

/* ==========================================================================
   4. APPROFONDIMENTO (SEO / GEO) - in fondo, dove non disturba
   ========================================================================== */
.pb-cat-seo {
  max-width: 820px;
  margin: 64px auto 0;
  padding: 34px 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background-color: var(--pb-panel);
}

.pb-cat-seo__head { text-align: center; margin-bottom: 24px; }

.pb-cat-seo__title {
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.pb-cat-seo__head .prestige-sep-wide { margin: 0 auto; }

/* Il testo parte chiuso: 3 paragrafi visibili, il resto a richiesta */
.pb-cat-seo__body {
  position: relative;
  max-height: 240px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.78);
  font-size: 15.5px;
  line-height: 1.8;
  transition: max-height 0.8s var(--pb-ease);
}

.pb-cat-seo__body.is-open { max-height: 4000px; }

/* Sfumatura in coda: dice "c'e' altro" senza scriverlo */
.pb-cat-seo__body:not(.is-open)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  background: linear-gradient(180deg, rgba(10,10,10,0) 0%, var(--pb-panel) 92%);
  pointer-events: none;
}

.pb-cat-seo__body h2,
.pb-cat-seo__body h3,
.pb-cat-seo__body h4 {
  color: #fff;
  font-size: 16px;
  letter-spacing: 0.5px;
  margin: 26px 0 10px;
}

.pb-cat-seo__body strong { color: #fff; }

.pb-cat-seo__body a {
  color: var(--pb-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pb-cat-seo__body img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 16px 0;
}

.pb-cat-seo__more {
  display: block;
  margin: 22px auto 0;
  padding: 11px 26px;
  background: transparent;
  border: 1px solid var(--pb-gold-hover);
  border-radius: 8px;
  color: var(--pb-gold);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.5s var(--pb-ease), color 0.5s var(--pb-ease);
}

.pb-cat-seo__more:hover {
  background-color: var(--pb-gold);
  color: #111;
}

/* ==========================================================================
   5. MOBILE FIRST - il 70% del traffico
   ========================================================================== */
@media (max-width: 921px) {
  .pb-cat-hero {
    min-height: 38vh;
    padding: 54px 18px 48px;
    margin-bottom: 30px;
  }

  .pb-cat-intro { font-size: 15px; }

  .pb-cat-children__grid {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 10px;
  }

  .pb-cat-tile { padding: 10px 8px 12px; }
  .pb-cat-tile__name { font-size: 14px; }
  .pb-cat-tile:hover { transform: none; box-shadow: none; }

  /* Barra strumenti: ordinamento a piena larghezza, dito-friendly */
  .ast-shop-toolbar-container {
    flex-direction: column;
    align-items: stretch;
  }

  .woocommerce-result-count { text-align: center; }

  .woocommerce-ordering,
  .woocommerce-ordering select { width: 100% !important; }

  .pb-cat-seo {
    margin-top: 44px;
    padding: 24px 18px;
    border-radius: 12px;
  }

  .pb-cat-seo__body { font-size: 15px; max-height: 210px; }
}

/* ==========================================================================
   6. ACCESSIBILITA
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .pb-cat-tile,
  .pb-cat-tile:hover,
  .pb-cat-tile__media img,
  .pb-cat-seo__body {
    transition: none !important;
    transform: none !important;
  }
}

.pb-cat-seo__more:focus-visible,
.pb-cat-tile:focus-visible {
  outline: 2px solid var(--pb-gold);
  outline-offset: 3px;
}

/* =============================================================================
   LA BARRA FISSA IN FONDO ALLE CATEGORIE (26 agosto 2026, notte)
   -----------------------------------------------------------------------------
   Segnalato dal committente dal telefono: «sul telefono compare una barra
   BIANCA fissa in fondo con "FILTER" e "Ordinamento predefinito"».

   MISURATO: la barra e' `.ast-sticky-shop-filters`, la crea Astra Addon dentro
   `.ast-shop-toolbar-container`, ed era `rgb(248,248,248)` - bianco pieno - con
   un bordo `rgba(0,0,0,0.1)` pensato per un tema chiaro. Su un sito nero e' una
   striscia di luce in fondo allo schermo: l'unica cosa che si vede mentre si
   scorre il catalogo, e non e' il catalogo.
   Il pulsante "Filter" era `rgb(255,218,121)` con testo scuro, cioe' un oro
   pieno: lo stesso peso visivo di "Aggiungi al carrello", per un comando che
   non vende niente.

   IL PULSANTE "FILTER" APRIVA IL VUOTO: il pannello a scomparsa conteneva solo
   la sua crocetta, zero widget di filtro (verificato dal vivo, `textContent`
   vuoto). Il committente ha confermato - «togli il pulsante Filtri» - e adesso
   non c'e' piu': tolto dal Personalizza, v. la sezione "IL PULSANTE FILTRI E'
   STATO TOLTO" in fondo a questo foglio.
   Le regole che lo vestivano restano qui sotto, e non sono codice morto per
   sbaglio: se un giorno il pulsante torna, con dentro filtri veri, torna gia'
   vestito e gia' in italiano.
   ========================================================================== */

/* SOLO DOVE LA BARRA E' DAVVERO UNA BARRA. `.ast-sticky-shop-filters` esiste
   anche sul computer, ma li' non e' fissa: e' una riga dentro la pagina, sopra
   la griglia. Vestirla di nero con un filo d'oro e un'ombra all'insu' - come
   serve in fondo a un telefono - sul computer aggiungeva un SECONDO filo a
   quattordici pixel dal primo (quello del contenitore, sez. 3): due righe
   parallele senza motivo. Misurato dal vivo a 1280 px prima di correggere.
   `body.ast-header-break-point` e' il segno che mette Astra quando passa alla
   veste mobile, cioe' esattamente quando il contenitore diventa `fixed`: e' il
   suo confine, non uno inventato da noi. */
body.ast-header-break-point .ast-sticky-shop-filters {
  background-color: rgba(8, 8, 8, 0.96) !important;
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--pb-gold-line) !important;
  border-bottom: 0 !important;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
}

/* Il conteggio dentro la barra fissa: grigio, non nero su nero. */
.ast-sticky-shop-filters .woocommerce-result-count,
.ast-sticky-shop-filters .ast-shop-toolbar-aside-wrap {
  color: rgba(255, 255, 255, 0.62) !important;
}

/* IL PULSANTE FILTRI: contorno d'oro, non oro pieno. In questa pagina l'oro
   pieno e' la lingua dei pulsanti che vendono; un comando di servizio parla
   piu' piano. */
.ast-sticky-shop-filters .astra-shop-filter-button,
.astra-shop-filter-button.ast-flyout-filter {
  min-height: 44px;
  padding: 10px 16px !important;
  background-color: transparent !important;
  border: 1px solid var(--pb-gold-line) !important;
  border-radius: 8px !important;
  color: var(--pb-gold) !important;
  font-size: 14px !important;
  box-shadow: none !important;
}

.astra-shop-filter-button .astra-woo-filter-text,
.astra-shop-filter-button svg,
.astra-shop-filter-button path {
  color: var(--pb-gold) !important;
  fill: currentColor !important;
}

/* SFONDO E TESTO SI DICHIARANO INSIEME, sempre: Astra riempie d'oro ogni
   `button:hover` e, senza la riga del colore, resterebbe oro su oro. */
@media (hover: hover) {
  .astra-shop-filter-button.ast-flyout-filter:hover,
  .astra-shop-filter-button.ast-flyout-filter:focus {
    background-color: rgba(255, 206, 83, 0.10) !important;
    border-color: var(--pb-gold-hover) !important;
    color: var(--pb-gold) !important;
  }
}

/* Il pannello a scomparsa, se un giorno avra' dentro qualcosa: nero come il
   resto, non bianco di serie. */
.astra-off-canvas-sidebar-wrapper .astra-off-canvas-sidebar {
  background-color: #0a0a0a !important;
  color: #f5f5f5;
}

.astra-off-canvas-sidebar-wrapper .ast-shop-filter-close .ast-icon svg {
  fill: #f5f5f5;
}

/* -----------------------------------------------------------------------------
   QUI C'ERA UNA REGOLA PARCHEGGIATA che nascondeva il pulsante "Filtri" da CSS,
   in attesa della conferma del committente. La conferma e' arrivata - «togli il
   pulsante Filtri» - e proprio per questo la regola e' stata **cancellata**
   invece che accesa: una decisione definitiva si scrive nell'interruttore di
   Astra, non in un `display: none`.
   Come e' stato fatto per davvero, e come si rimette: v. la sezione "IL
   PULSANTE FILTRI E' STATO TOLTO" in fondo a questo foglio.
   -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   IL PULSANTE FILTRI E' STATO TOLTO (26 agosto 2026, notte)
   -----------------------------------------------------------------------------
   Confermato dal committente: «togli il pulsante Filtri». Tolto **dal suo
   interruttore**, non da qui: Personalizza > WooCommerce > Negozio > Barra
   strumenti, dove "Filtri" e' uscito dagli elementi visibili
   (`astra-settings[shop-toolbar-structure]`, da `["filters","results","sorting"]`
   a `["results","sorting"]`). I valori di prima sono in
   `H:\COWORK\backup-astra-barra-strumenti-26ago2026.txt`, con scritto come
   rimetterli.
   Un `display: none` nostro avrebbe lasciato la pagina delle impostazioni a
   dire il contrario del sito, e il pulsante sarebbe tornato al primo che
   guarda il Personalizza senza capire perche' non si vede.

   E TOGLIENDOLO E' VENUTO FUORI UN DIFETTO CHE C'ERA GIA'.
   Su mobile Astra prende `.ast-shop-toolbar-container` e lo inchioda in fondo
   allo schermo (`position: fixed; bottom: 0`). Dentro ci sta la barra vera,
   `.ast-sticky-shop-filters`, che e' quella nera. Ma il contenitore portava
   ancora la spaziatura pensata per la barra ORIZZONTALE del computer - 14 px
   sopra e sotto, piu' due fili - e quei 14 px, su un elemento fisso e
   trasparente, sono una fessura in fondo allo schermo attraverso cui si vede
   scorrere la pagina.

   Misurato: contenitore 727-812, barra nera 742-797. Quindici pixel di vuoto
   sopra e quindici sotto, col filo bianco a segnarli. Adesso il contenitore
   non mette niente di suo e la barra nera arriva al bordo.

   LA TRADUZIONE DELL'ETICHETTA RESTA DOV'E'. In `functions.php` c'e'
   `abm_filtri_in_italiano()`, agganciata a
   `astra_get_option_shop-filter-trigger-link`: adesso non ha piu' niente da
   tradurre perche' il pulsante non si stampa, ma se un giorno il committente lo
   rimette - con dentro filtri veri - torna gia' in italiano invece che
   "Filter". Costa una riga e toglie un difetto futuro.
   -------------------------------------------------------------------------- */
body.ast-header-break-point.ast-woocommerce-shop-page-modern-style .ast-shop-toolbar-container {
	padding: 0;
	border-top: 0;
	border-bottom: 0;
	background: transparent;
}

/* E la barra nera si tiene lo spazio della tacca del telefono, sotto. */
body.ast-header-break-point .ast-sticky-shop-filters {
	padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
}