/* --- Il posto delle icone, riservato prima che arrivino ----------------------
   Font Awesome e' caricato in asincrono da html/header.php (media="print" onload):
   toglie piu' di un secondo all'FCP su mobile, ma finche' non arriva un
   <i class="fas fa-x"> e' un elemento vuoto largo zero, e quando arriva si allarga
   e spinge quello che ha intorno. Misurato il 01/09/2026: il CLS desktop e' passato
   da 0,124 a 0,741 per questo motivo, su due misure di fila.
   Qui si riserva il posto che le icone occuperanno comunque. min-width e non width:
   qualche icona e' piu' larga di 1em e width la taglierebbe. */
.fa, .fas, .far, .fab, .fal, .fad,
.fa-solid, .fa-regular, .fa-brands, .fa-light, .fa-duotone {
  display: inline-block;
  min-width: 1em;
  min-height: 1em;
  line-height: 1;
}

/* I caratteri arrivano dal <link> in html/header.php, che TUTTE le pagine pubbliche
   includono (verificato in HTTP il 01/09/2026 su home, categoria, brand, merchant, blog,
   scheda e le sette statiche). Qui c'era un @import: dentro un CSS render-blocking e'
   il caso peggiore, perche' il browser deve scaricare e parsare menu.css PRIMA di
   scoprire che serve anche Google Fonts. Due giri cross-origin in fila invece di uno. */

/* RESET E IMPOSTAZIONI GENERALI */
.pdh-header {
  font-family: 'Poppins', sans-serif;
  position: relative;
  width: 100%;
}

/* TOP BAR */
.pdh-topbar {
  background: #4900A6;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  width: 100%;
}

.pdh-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  position: relative;
}

/* ============ DESKTOP LAYOUT ============ */
@media (min-width: 769px) {
  /* LOGO A SINISTRA (desktop) */
  .pdh-logo-wrapper {
    flex-shrink: 0;
    width: 180px;
  }

  .pdh-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s ease;
  }

  .pdh-logo-link:hover {
    transform: scale(1.05);
  }

  .pdh-logo-icon {
    width: 38px;
    height: 38px;
    background: rgba(255,255,255,.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-right: 8px;
    transition: all 0.3s ease;
  }

  .pdh-logo-link:hover .pdh-logo-icon {
    background: rgba(255,255,255,.25);
    transform: rotate(15deg);
  }

  .pdh-logo-text {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
  }

  .pdh-logo-badge {
    margin-left: 4px;
    background: linear-gradient(45deg, #FE6D2C, #FF9A3C);
    color: #fff;
    font-size: .65rem;
    padding: 3px 6px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
  }

  .pdh-logo-link:hover .pdh-logo-badge {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(254, 109, 44, 0.3);
  }

  /* SEARCH AL CENTRO (desktop) - RIDOTTA PER FARE SPAZIO */
  .pdh-search-wrapper {
    flex: 1;
    margin: 0 25px;
    max-width: 400px;
  }

  .pdh-search-wrapper form {
    width: 100%;
  }

  /* SEZIONE DESTRA (CONTENITORE PER AGGIUNGI NEGOZIO + UTILITY MENU) */
  .pdh-right-section {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  /* LINK SEMPLICE "AGGIUNGI IL TUO NEGOZIO" */
  .pdh-add-store-simple {
    color: #FFD54F;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.3s ease;
    background: rgba(255, 213, 79, 0.1);
    border: 1px solid rgba(255, 213, 79, 0.2);
    white-space: nowrap;
  }

  .pdh-add-store-simple:hover {
    color: #FFE082;
    background: rgba(255, 213, 79, 0.15);
    border-color: rgba(255, 213, 79, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  .pdh-add-store-simple i {
    font-size: 14px;
    transition: transform 0.3s ease;
  }

  .pdh-add-store-simple:hover i {
    transform: scale(1.2) rotate(90deg);
  }

  /* UTILITY MENU A DESTRA (desktop) - PIÙ COMPATTO */
  .pdh-utility-nav {
    display: flex;
    gap: 8px;
  }

  .pdh-utility-nav a {
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 6px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
  }

  .pdh-utility-nav a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
  }

  .pdh-utility-nav a:hover::before {
    left: 100%;
  }

  .pdh-utility-nav a:hover {
    color: #FFE082;
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  }

  .pdh-utility-nav a i {
    font-size: 13px;
    transition: all 0.3s ease;
  }

  .pdh-utility-nav a:hover i {
    color: #FFD54F;
    transform: scale(1.1) rotate(5deg);
  }

  /* CATEGORY MENU DESKTOP - PIÙ COMPATTO */
  .pdh-category-bar {
    background: #6000D5;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  }

  .pdh-category-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: space-between;
    gap: 2px;
  }

  .pdh-category-menu li {
    flex: 1;
    min-width: 0;
    position: relative;
  }

  .pdh-category-menu a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    padding: 14px 8px;
    transition: all 0.3s ease;
    height: auto;
    background: rgba(255, 255, 255, 0.05);
    position: relative;
    border-radius: 4px;
  }

  /* Icone nel menu desktop */
  .pdh-category-menu a i {
    font-size: 16px;
    margin-bottom: 6px;
    color: #FFD54F;
    transition: all 0.3s ease;
    flex-shrink: 0;
  }

  /* TESTO DESKTOP */
  .pdh-category-menu .menu-text {
    display: inline-block;
    text-align: center;
    white-space: nowrap !important;
    word-wrap: normal !important;
    word-break: keep-all !important;
    line-height: 1.1;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    width: auto;
    min-width: 0;
    padding: 0 4px;
    font-size: 12px;
    letter-spacing: 0;
    hyphens: none !important;
  }

  /* Parole lunghe desktop */
  .pdh-category-menu li:nth-child(5) .menu-text,
  .pdh-category-menu li:nth-child(8) .menu-text {
    font-size: 11px;
    letter-spacing: -0.1px;
  }

  /* Effetto hover desktop */
  .pdh-category-menu a:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #FFE082;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  .pdh-category-menu a:hover i {
    color: #FFE082;
    transform: scale(1.2);
  }

  /* Linea sotto al hover desktop */
  .pdh-category-menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 80%;
    height: 2px;
    background: #FFD54F;
    transition: all 0.3s ease;
    transform-origin: center;
    border-radius: 2px;
  }

  .pdh-category-menu a:hover::after {
    transform: translateX(-50%) scaleX(1);
  }

  /* HAMBURGER MENU NASCOSTO SU DESKTOP */
  .pdh-menu-toggle {
    display: none;
  }
}

/* ============ MOBILE LAYOUT ============ */
@media (max-width: 768px) {
  /* NASCONDI LA SEZIONE DESTRA SU MOBILE */
  .pdh-right-section {
    display: none;
  }

  .pdh-container {
    flex-direction: column;
    padding: 12px;
    min-height: auto;
    gap: 12px;
    max-width: 100%;
  }

  /* LOGO AL CENTRO SOPRA (mobile) */
  .pdh-logo-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    order: 1;
  }

  .pdh-logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }

  .pdh-logo-icon {
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-right: 6px;
  }

  .pdh-logo-text {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
  }

  .pdh-logo-badge {
    margin-left: 4px;
    background: linear-gradient(45deg, #FE6D2C, #FF9A3C);
    color: #fff;
    font-size: .55rem;
    padding: 2px 5px;
    border-radius: 8px;
    font-weight: 600;
  }

  /* SEARCH SOTTO LOGO (mobile) */
  .pdh-search-wrapper {
    width: 100%;
    order: 2;
    margin: 0;
    max-width: 100%;
    padding: 0 10px;
  }

  .pdh-search-wrapper form {
    width: 100%;
  }

  /* HAMBURGER MENU A DESTRA (mobile) */
  .pdh-menu-toggle {
    display: block;
    order: 3;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 8px 12px;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 1001;
  }

  .pdh-menu-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
  }

  /* CATEGORY MENU MOBILE - NASCONDI DI DEFAULT */
  .pdh-category-bar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1000;
    background: rgba(96, 0, 213, 0.98);
    backdrop-filter: blur(10px);
    transform: translateX(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
  }

  /* QUANDO ATTIVO - MOSTRA IL MENU */
  .pdh-category-bar.active {
    display: block;
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
  }

  .pdh-category-menu {
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 70px 15px 15px 15px;
    gap: 0;
  }

  .pdh-category-menu li {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .pdh-category-menu li:last-child {
    border-bottom: none;
  }

  .pdh-category-menu a {
    display: flex;
    align-items: center;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    padding: 15px 12px;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    margin: 4px 0;
  }

  /* Icone menu mobile */
  .pdh-category-menu a i {
    font-size: 18px;
    margin-right: 12px;
    color: #FFD54F;
    transition: all 0.3s ease;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
  }

  /* Testo menu mobile */
  .pdh-category-menu .menu-text {
    display: block;
    font-size: 14px;
    line-height: 1.3;
    white-space: normal;
    text-align: left;
    width: 100%;
  }

  /* Effetto hover mobile */
  .pdh-category-menu a:hover,
  .pdh-category-menu a:active {
    background: rgba(255, 255, 255, 0.15);
    color: #FFE082;
    transform: translateX(5px);
  }

  .pdh-category-menu a:hover i,
  .pdh-category-menu a:active i {
    color: #FFE082;
    transform: scale(1.1);
  }
}

/* ============ TABLET ORIZZONTALE ============ */
@media (min-width: 769px) and (max-width: 1024px) {
  .pdh-container {
    max-width: 100%;
    padding: 0 20px;
  }
  .pdh-logo-wrapper {
    width: 160px;
  }
  .pdh-search-wrapper {
    margin: 0 15px;
    max-width: 350px;
  }
  .pdh-right-section {
    gap: 10px;
  }
  .pdh-add-store-simple {
    font-size: 11px;
    padding: 6px 10px;
  }
  .pdh-utility-nav {
    gap: 6px;
  }
  .pdh-utility-nav a {
    font-size: 11px;
    padding: 5px 8px;
  }
  .pdh-category-menu a {
    padding: 12px 6px;
    min-height: 65px;
  }
  .pdh-category-menu .menu-text {
    font-size: 11px;
  }
  .pdh-category-menu li:nth-child(5) .menu-text,
  .pdh-category-menu li:nth-child(8) .menu-text {
    font-size: 10px;
  }
  .pdh-category-menu a i {
    font-size: 15px;
  }
}

/* ============ DESKTOP GRANDE ============ */
@media (min-width: 1200px) {
  .pdh-container {
    max-width: 1200px;
  }
  .pdh-search-wrapper {
    max-width: 450px;
  }
  .pdh-add-store-simple {
    font-size: 13px;
    padding: 8px 14px;
  }
  .pdh-utility-nav a {
    font-size: 13px;
    padding: 7px 12px;
  }
  .pdh-category-menu {
    gap: 3px;
  }
  .pdh-category-menu .menu-text {
    font-size: 13px;
  }
  .pdh-category-menu li:nth-child(5) .menu-text,
  .pdh-category-menu li:nth-child(8) .menu-text {
    font-size: 12px;
  }
}

/* ============================================================================
   TESTATA E MENU — 29/08/2026
   ----------------------------------------------------------------------------
   Era la parte piu' colorata del sito e stava su ogni pagina: una fascia viola
   piena (#4900A6) alta 70 px, sotto una seconda fascia viola (#6000D5) alta 60
   con dodici icone, e dentro giallo (#FFD54F, #FFE082) piu' un pulsante con un
   gradiente arancione. Cinque colori prima ancora del contenuto.
   Adesso la testata e' bianca come le card: il viola resta uno solo, e lo si
   vede dove serve — il logo, la voce attiva, il pulsante che chiede un'azione.
   In coda al foglio apposta: vince sulle regole di sopra senza cancellarle.
   ============================================================================ */

:root{
  --pdh-brand:#650ECE;
  --pdh-brand-d:#4C0BA0;
  --pdh-tint:#F3EDFE;
  --pdh-ink:#16141C;
  --pdh-ink2:#464154;
  --pdh-mut:#7B7589;
  --pdh-line:#E7E4EE;
  --pdh-lime:#B8FF3C;   /* l'accento del logo: si usa dove serve fermare l'occhio */
}

/* ---------- fascia superiore ---------- */
.pdh-topbar{
  background:#fff !important;
  border-bottom:1px solid var(--pdh-line) !important;
  box-shadow:none !important;
}
.pdh-container{min-height:66px}

/* logo */
.pdh-logo-icon{
  background:var(--pdh-brand) !important;color:#fff !important;
  border-radius:9px !important;
}
.pdh-logo-link:hover .pdh-logo-icon{background:var(--pdh-brand-d) !important;transform:none !important}
.pdh-logo-link:hover{transform:none !important}
.pdh-logo-text{color:var(--pdh-ink) !important;letter-spacing:-.02em}
.pdh-logo-badge{
  background:var(--pdh-tint) !important;color:var(--pdh-brand-d) !important;
  border:0 !important;font-weight:600 !important;
}

/* La barra di ricerca sta piu' in basso, in un blocco solo: qui c'era la sua prima
   versione, quella per la testata bianca, tolta il 29/08/2026. Insieme all'altra
   piu' sotto si contendeva il campo a colpi di !important, e il risultato era un
   guscio squadrato con dentro due forme tonde che non combaciavano. */

/* il pulsante che chiedeva un'azione: era un gradiente arancione, adesso e' l'accento */
.pdh-add-store-simple{
  background:var(--pdh-brand) !important;color:#fff !important;border:0 !important;
  border-radius:20px !important;font-weight:600 !important;
  box-shadow:0 6px 16px -8px rgba(101,14,206,.85) !important;
  text-shadow:none !important;
}
.pdh-add-store-simple:hover{
  background:var(--pdh-brand-d) !important;color:#fff !important;transform:none !important;
}

/* le voci di servizio: erano gialle su viola */
.pdh-utility-nav a,
.pdh-utility-nav a span{color:var(--pdh-ink2) !important}
.pdh-utility-nav a{
  background:transparent !important;border:1px solid var(--pdh-line) !important;
  border-radius:20px !important;font-weight:500 !important;
}
.pdh-utility-nav a:hover,
.pdh-utility-nav a:hover span{
  color:var(--pdh-brand-d) !important;background:var(--pdh-tint) !important;
  border-color:transparent !important;
}
.pdh-utility-nav a i,.pdh-utility-nav a svg{color:var(--pdh-brand) !important}

.pdh-menu-toggle{color:var(--pdh-ink) !important;background:transparent !important}
.pdh-menu-toggle:hover{background:var(--pdh-tint) !important}

/* ---------- barra delle categorie ---------- */
.pdh-category-bar{
  background:#fff !important;border-bottom:1px solid var(--pdh-line) !important;
  box-shadow:none !important;
}
.pdh-category-menu a,
.pdh-category-menu .menu-item{
  color:var(--pdh-ink2) !important;background:transparent !important;
  border:0 !important;font-weight:500 !important;
}
.pdh-category-menu a:hover,
.pdh-category-menu .menu-item:hover{
  color:var(--pdh-brand-d) !important;background:var(--pdh-tint) !important;
}
.pdh-category-menu a::before,
.pdh-category-menu a::after{display:none !important;content:none !important}
.pdh-category-menu .menu-text{color:inherit !important;font-weight:500 !important}
.pdh-category-menu i,
.pdh-category-menu svg,
.pdh-category-menu img{color:var(--pdh-brand) !important;opacity:.9}
.pdh-category-menu a:hover i,
.pdh-category-menu a:hover svg{opacity:1}

/* ---------- il filo che separa la testata dal contenuto ---------- */
.modern-micro-breadcrumb{
  background:transparent !important;border-bottom:0 !important;padding:14px 0 !important;
}
.modern-micro-breadcrumb a{color:var(--pdh-mut) !important}
.modern-micro-breadcrumb a:hover{color:var(--pdh-brand-d) !important}
.micro-separator{color:var(--pdh-line) !important}

@media (max-width:768px){
  .pdh-container{min-height:58px}
  .pdh-category-menu a,.pdh-category-menu .menu-item{font-size:.72rem !important}
}

/* ============================================================================
   IDENTITA' — 29/08/2026, seconda passata
   ----------------------------------------------------------------------------
   La prima passata aveva cambiato la tavolozza e basta, e Tobia l'ha detto:
   «hai cambiato solo colori». Qui cambia il resto — il marchio, le icone, il
   carattere e le forme.

   IL CARATTERE. Manrope, scelto fra sei saggi messi a confronto sugli stessi prezzi
   veri del catalogo. Poppins e' geometrico ma tondo e largo: su una card da 210 px una
   colonna di cifre ci sta a fatica. Manrope ha la stessa base geometrica ma stretta, ed
   e' la piu' compatta delle sei a parita' di corpo — su un sito fatto di numeri in
   colonna quello si vede. Il corpo del testo resta Poppins: cambiare anche quello
   vorrebbe dire ridisegnare ogni interlinea del sito per un guadagno che non si vede.

   LE FORME. Raggio da 14-15 a 12, e nessun angolo tondo dentro le icone:
   il tratto ha spigoli vivi (stroke-linecap: square). E' quello che rende
   "tecnica" una figura, molto piu' del colore.
   ============================================================================ */

/* ---------- il marchio: solo il nome ----------
   Scelto da Tobia fra sei proposte disegnate. Nessun simbolo: "prezzi" in nero,
   "digitali" nel viola del sito, e un quadratino che chiude come un punto fermo.
   Il simbolo a barre che avevo disegnato prima, a 22 px, non si leggeva: il punto
   che doveva dire "qui conviene" era largo tre pixel. Un marchio che non c'e' non
   si puo' sbagliare, occupa meno spazio in testata e non va ridisegnato per il
   quadrato della scheda social. */
.pdh-logo-icon,.pdh-logo-badge{display:none !important}
/* Il carattere del marchio e Darker Grotesque, scelto da Tobia fra otto: alta,
   stretta e con il peso 900. Il nome e lungo — dodici lettere — e una condensata
   e l unica che lo fa stare in testata senza rimpicciolirlo. Il corpo e 1,95 rem
   contro gli 1,5 di prima perche la x-height di questa famiglia e piu bassa: a
   parita di numero le lettere sembrerebbero meta.
   Il marchio ha diritto al suo carattere: titoli e prezzi restano Manrope. */
.pdh-logo-text{
  font-family:"Darker Grotesque","Manrope",system-ui,sans-serif !important;
  font-weight:900 !important;letter-spacing:-.02em !important;
  font-size:1.95rem !important;color:#B8FF3C !important;line-height:1;
  text-transform:lowercase !important;display:inline-flex;align-items:center;
  -webkit-font-smoothing:antialiased;
  /* Il foglio del tema mette un text-shadow sui testi della testata: sul lime
     sporca i bordi delle lettere e le fa sembrare fuori fuoco. Qui si toglie. */
  text-shadow:none !important;
}
.pdh-logo-text b{color:var(--pdh-brand) !important;font-weight:800}
.pdh-logo-text b{text-shadow:none !important}
.pdh-logo-link,.pdh-logo-link *{text-shadow:none !important;filter:none !important}
.pdh-logo-punto{box-shadow:none !important;
  width:8px;height:8px;background:var(--pdh-brand);border-radius:2px;
  margin-left:7px;flex:none;
}
.pdh-logo-link:hover .pdh-logo-punto{background:var(--pdh-brand-d)}
.pdh-logo-wrapper{width:auto !important}

/* ---------- le icone ---------- */
.pdh-i{
  width:17px;height:17px;flex:none;vertical-align:-3px;
  stroke:currentColor;fill:none;
}
.pdh-utility-nav .pdh-i{width:15px;height:15px;margin-right:6px}
.pdh-add-store-simple .pdh-i{width:15px;height:15px;stroke-width:2.1}
.pdh-category-menu .pdh-i{
  width:21px;height:21px;display:block;margin:0 auto 6px;
  color:var(--pdh-brand);opacity:.92;
  transition:opacity .15s ease, transform .15s ease;
}
.pdh-category-menu a:hover .pdh-i{opacity:1;transform:translateY(-1px)}

/* le regole vecchie parlavano di <i> di Font Awesome: adesso sono <svg> */
.pdh-category-menu a i,
.pdh-utility-nav a i{display:none}

/* ---------- la barra delle categorie, ridisegnata ---------- */
.pdh-category-menu a{
  border-radius:10px !important;padding:10px 12px !important;
  font-family:"Manrope","Poppins",sans-serif !important;
  font-size:.72rem !important;font-weight:500 !important;letter-spacing:-.005em !important;
}
.pdh-category-menu .menu-text{font-family:inherit !important;font-size:inherit !important}

/* ---------- i pulsanti della testata ---------- */
.pdh-add-store-simple{
  font-family:"Manrope",sans-serif !important;
  font-size:.74rem !important;font-weight:600 !important;letter-spacing:-.01em !important;
  text-transform:none !important;border-radius:11px !important;
  display:inline-flex !important;align-items:center;gap:7px;
}
.pdh-utility-nav a{
  font-family:"Manrope",sans-serif !important;
  font-size:.74rem !important;font-weight:500 !important;
  border-radius:11px !important;display:inline-flex !important;align-items:center;
}

/* ---------- il carattere dei titoli, su tutto il sito ---------- */
h1,h2,
.pd-h1,
.product-main-title,
h1.product-main-title,
.featured-section-title,
.description-title,
.specs-title,
.pd-verdetto-prezzo,
.pd-card__prezzo,
.total-val,
.price-cell .price-main,
.main-price-v2 .price-value{
  font-family:"Manrope","Poppins",system-ui,sans-serif !important;
}

/* i numeri: Manrope ha le cifre della stessa larghezza, e in colonna si vede */
.pd-card__prezzo,.total-val,.sped-val,.pd-verdetto-prezzo,
.price-cell .price-main,.main-price-v2 .price-value,.pd-card__estremi{
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;
}

/* ---------- le forme ---------- */
.pd-card,.quick-menu-item,.card-design-v2,.store-card,.seo-card,.modern-blog-card,
.pd-box,.pd-caratteristiche,.prices-table-container,.pd-verdetto,
.product-price-alert-section,.product-rating-wrapper{
  border-radius:12px !important;
}
.pd-card__tile,.product-image-wrapper-v2{border-radius:9px !important}
.pd-card__cta,.action-btn-v2,.buy-button,.pd-applica{border-radius:9px !important}
.product-image-column img.product-main-image,
.product-image-column .default-product-image{border-radius:12px !important}

/* ============================================================================
   MANROPE ANCHE NEL CORPO — 29/08/2026
   ----------------------------------------------------------------------------
   Scelto da Tobia. Io avevo consigliato di tenere due famiglie (Manrope sui
   titoli, una piu larga nel testo) perche Manrope e stretta apposta per fare
   bene i numeri, e la stessa qualita che aiuta una colonna di prezzi rende
   faticoso un paragrafo lungo. Lui ha scelto una famiglia sola, ed e una scelta
   legittima: il sito guadagna in coerenza quello che perde in comodita di
   lettura sui testi distesi.

   Il difetto pero si compensa, e si compensa qui: sui testi lunghi l interlinea
   sale a 1,75 e le lettere si allargano di mezzo centesimo di em. Sono le due
   leve che restituiscono aria a una famiglia stretta senza cambiarla.

   Il selettore e universale ma con tre esclusioni obbligatorie:
   - <i> e qualunque classe fa-*: sono le icone di Font Awesome, che vivono su
     una loro famiglia. Prenderle vorrebbe dire far sparire tutte le icone.
   - il marchio: quello resta Darker Grotesque.
   ============================================================================ */
html body,
html body :not(i):not(svg):not(path):not(circle):not([class*="fa-"]):not(.pdh-logo-text):not(.pdh-logo-text *):not(.pdh-logo-punto){
  font-family:"Manrope", system-ui, -apple-system, sans-serif !important;
}

/* il marchio non si tocca */
html body .pdh-logo-text,
html body .pdh-logo-text b{
  font-family:"Darker Grotesque","Manrope",sans-serif !important;
}

/* Le tre leve che rendono leggibile una famiglia stretta sui testi distesi. */
.description-content,
.pd-desc p,
.s-lead,
.pd-hero-sotto,
.product-description-section p,
.pd-piede-scheda,
.price-summary{
  line-height:1.75 !important;
  letter-spacing:.005em;
}

/* ============================================================================
   IL FOOTER, CHIARO — 29/08/2026
   ----------------------------------------------------------------------------
   Era #2C3E50, un blu ardesia: non brutto, ma un terzo freddo che non e parente
   ne del viola ne del lime. E dentro c era un link in #008CBA, l azzurro di serie
   di Foundation, che non aveva scelto nessuno ed era li da sempre.

   Scelto da Tobia il fondo chiaro. Una conseguenza obbligata: su #F6F5F9 il lime
   ha un contrasto di 1,3 su 21 — illeggibile. Quindi qui il marchio si gira, e
   "prezzi" torna viola. E la regola generale del lime, gia scritta piu su: vive
   su fondo scuro o saturo, mai come testo su chiaro.
   ============================================================================ */
.modern-footer{
  background:#F6F5F9 !important;
  border-top:1px solid var(--pdh-line) !important;
  color:var(--pdh-ink) !important;
}
.modern-footer *{color:inherit}

.modern-footer .footer-section h4,
.modern-footer .footer-section h3,
.modern-footer .footer-brand h4{
  color:var(--pdh-ink) !important;font-weight:700 !important;
  font-size:.7rem !important;letter-spacing:.1em !important;text-transform:uppercase !important;
}
.modern-footer a,
.modern-footer li,
.modern-footer p,
.modern-footer .site-description,
.modern-footer .copyright,
.modern-footer .legal-info,
.modern-footer .footer-disclaimer,
.modern-footer .small-disclaimer{
  color:var(--pdh-mut) !important;
}
.modern-footer a{text-decoration:none}
.modern-footer a:hover{color:var(--pdh-brand-d) !important}

/* l azzurro di Foundation, che non aveva scelto nessuno */
.modern-footer a[href],
.modern-footer .footer-bottom a{color:var(--pdh-mut) !important}
.modern-footer .footer-bottom a:hover{color:var(--pdh-brand-d) !important}

.modern-footer .footer-bottom,
.modern-footer .copyright-container{
  border-top:1px solid var(--pdh-line) !important;
}

/* il marchio si gira: sul chiaro il lime non si legge */
.modern-footer .pdh-logo-text{color:var(--pdh-brand) !important;font-size:1.6rem !important}
.modern-footer .pdh-logo-text b{color:var(--pdh-ink) !important}
.modern-footer .pdh-logo-punto{background:var(--pdh-brand) !important}
.modern-footer .pdh-logo-icon,
.modern-footer .pdh-logo-badge{display:none !important}

.modern-footer .social-links a{
  color:var(--pdh-mut) !important;border:1px solid var(--pdh-line) !important;
  background:#fff !important;border-radius:10px !important;
}
.modern-footer .social-links a:hover{
  color:var(--pdh-brand) !important;border-color:var(--pdh-brand) !important;
}

/* La fascia in fondo al footer aveva background: rgba(0,0,0,.2) — un nero al 20%.
   Sul footer scuro era una sfumatura appena percettibile; sul fondo chiaro diventa
   una fascia grigio sporco. Le trasparenze nere funzionano solo finche il fondo
   resta scuro: qui diventa un colore dichiarato, non un velo. */
.modern-footer .footer-bottom{
  background:#fff !important;
  border-top:1px solid var(--pdh-line) !important;
  padding:18px 24px !important;
}
.modern-footer .footer-disclaimer,
.modern-footer .small-disclaimer{
  font-size:.68rem !important;line-height:1.65 !important;color:var(--pdh-mut) !important;
  max-width:86ch;margin-inline:auto;
}
.modern-footer .footer-disclaimer b,
.modern-footer .small-disclaimer b,
.modern-footer .footer-disclaimer strong{color:var(--pdh-ink2) !important;font-weight:600}
.modern-footer .copyright-container{
  margin-top:12px !important;padding-top:12px !important;
  border-top:1px solid var(--pdh-line) !important;
}
.modern-footer .copyright{font-size:.72rem !important;color:var(--pdh-ink2) !important}
.modern-footer .legal-info{font-size:.68rem !important;color:var(--pdh-mut) !important}

/* ============================================================================
   LA TESTATA TORNA VIOLA — 29/08/2026
   ----------------------------------------------------------------------------
   Tobia: «l'header lo voglio con uno sfondo viola, un bel viola che deve
   attirare l'attenzione».

   Non e' un ritorno a com'era. Prima le fasce viola erano DUE, alte 130 px in
   tutto, con dentro giallo e un pulsante arancione: quattro colori che si
   rubavano l'attenzione a vicenda, e il risultato era che non la attirava
   nessuno. Qui il viola e' su una fascia sola, ed e' l'unico colore: sotto, la
   barra delle categorie resta bianca. Il contrasto fra le due e' quello che fa
   guardare in alto.

   Il pulsante che chiede l'azione si inverte: bianco pieno su viola. Su un
   fondo saturo un pulsante colorato sparisce, uno bianco e' la cosa piu'
   luminosa della pagina.
   ============================================================================ */

/* ---------- la fascia ---------- */
.pdh-topbar{
  background:var(--pdh-brand) !important;
  border-bottom:0 !important;
  box-shadow:0 6px 24px -12px rgba(101,14,206,.55) !important;
}
.pdh-container{min-height:70px}

/* ---------- il marchio, in negativo ---------- */
/* "prezzi" in lime, "digitali" in bianco. Il lime e il contrasto piu forte che il
   viola regge: dice tecnologia e convenienza nello stesso momento, e da lontano
   le due parole si leggono come due cose invece che come una stringa sola —
   che era il difetto del bianco su bianco tenue di prima. */
.pdh-logo-text{color:#B8FF3C !important}
.pdh-logo-text b{color:#fff !important}
.pdh-logo-punto{background:#B8FF3C !important}
.pdh-logo-link:hover .pdh-logo-punto{background:#fff !important}
.pdh-logo-link:hover .pdh-logo-text{color:#C8FF63 !important}

/* ============================================================================
   LA BARRA DI RICERCA — 29/08/2026, riscritta in un posto solo.

   COM'ERA. Descritta in tre punti: qui, in un altro blocco 370 righe piu' su, e in
   160 righe di <style> dentro html/searchform.php. Le tre versioni si contendevano
   il campo a colpi di !important e ne vinceva un pezzo per ciascuna: il guscio
   restava bianco e squadrato (raggio 10), l'input dentro diventava tondo (raggio 22)
   con la sua ombra, il pulsante tondo (raggio 20) galleggiava staccato nel bianco.
   Tre forme diverse una dentro l'altra: e' quello che si vedeva come «quadratini».
   In piu' Foundation lasciava all'input un margin-bottom di 16px, e la riga che
   doveva azzerarlo era scritta male — «.input[type="text"]», con il punto di troppo
   e senza graffe — quindi non ha mai funzionato: il campo era alto 42,8px dentro un
   guscio da 46 e appoggiava storto.

   COM'E' ADESSO. Una forma sola. Il guscio bianco porta il raggio, l'ombra e il
   focus; l'input dentro non ha ne' bordo ne' raggio ne' ombra ne' margini; il
   pulsante chiude a destra con lo stesso raggio del guscio, cosi' i due bordi
   combaciano invece di lasciare due millimetri di bianco nell'angolo.
   Gli !important non sono decorazione: servono a battere Foundation, che su ogni
   input e ogni button mette di suo margine, altezza e ombra.
   ============================================================================ */
.pdh-search-wrapper .custom-search-bar{
  margin:0 !important;padding:0 !important;max-width:none !important;
  width:100%;position:relative;font-family:inherit;
}
.pdh-search-wrapper .search-line-form{margin:0 !important}

/* il guscio: e' lui che ha una forma, tutto quello che sta dentro e' piatto */
.pdh-search-wrapper .search-line-wrapper{
  display:flex;align-items:stretch;position:relative;
  height:46px;background:#fff !important;
  border:0 !important;border-radius:12px !important;
  box-shadow:0 4px 14px -6px rgba(0,0,0,.35) !important;
  transition:box-shadow .18s ease;
}
/* Il campo e il pulsante non hanno un focus loro: si illumina il guscio intero,
   perche' e' quello che l'occhio legge come «la barra». Anello bianco e non viola:
   siamo sopra il viola della testata, e un anello viola su viola non si vedrebbe. */
.pdh-search-wrapper .search-line-wrapper:focus-within{
  box-shadow:0 0 0 4px rgba(255,255,255,.32), 0 6px 18px -6px rgba(0,0,0,.4) !important;
}

/* il campo: piatto, senza niente di suo */
.pdh-search-wrapper .search-line-input,
.pdh-search-wrapper input[type="text"],
.pdh-search-wrapper input[type="search"]{
  flex:1 1 auto;min-width:0;
  height:100% !important;margin:0 !important;padding:0 16px !important;
  border:0 !important;border-radius:0 !important;box-shadow:none !important;
  outline:none !important;background:transparent !important;
  color:var(--pdh-ink) !important;
  font-family:inherit;font-size:15px;line-height:normal;
}
.pdh-search-wrapper .search-line-input::placeholder{color:var(--pdh-mut) !important;opacity:1}

/* il pulsante: chiude il guscio a destra invece di galleggiarci dentro */
.pdh-search-wrapper .search-line-button,
.pdh-search-wrapper button[type="submit"]{
  flex:0 0 auto;box-sizing:border-box;
  width:52px !important;height:auto !important;
  margin:0 !important;padding:0 !important;
  border:0 !important;border-radius:0 12px 12px 0 !important;
  /* Era viola come la testata, e appoggiato sul viola non si staccava: la barra
     sembrava finire nel vuoto. Qui prende il lime del logo, che esiste apposta per
     fermare l'occhio ed e' l'unico punto della fascia dove serve. La lente torna
     viola scura: il bianco sul lime non si legge. */
  background:var(--pdh-lime) !important;color:var(--pdh-brand-d) !important;
  box-shadow:none !important;text-shadow:none !important;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .18s ease;
}
.pdh-search-wrapper .search-line-button:hover{background:#C8FF63 !important}
.pdh-search-wrapper .search-line-button:active{background:#A6F01F !important}
.pdh-search-wrapper .search-line-button svg,
.pdh-search-wrapper button svg{stroke:var(--pdh-brand-d) !important;color:var(--pdh-brand-d) !important;display:block}

/* i suggerimenti */
.pdh-search-wrapper .autocomplete-items{
  position:absolute;top:calc(100% + 6px);left:0;right:0;
  background:#fff;border:1px solid var(--pdh-line);border-radius:12px;
  max-height:300px;overflow-y:auto;list-style:none;padding:6px;margin:0;
  z-index:9999;box-shadow:0 12px 30px -12px rgba(22,20,28,.45);
  opacity:0;visibility:hidden;transform:translateY(4px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s;
}
.pdh-search-wrapper .autocomplete-items.show{opacity:1;visibility:visible;transform:translateY(0)}
.pdh-search-wrapper .autocomplete-items li{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:9px 12px;border-radius:8px;cursor:pointer;
  color:var(--pdh-ink);font-size:14px;line-height:1.35;
}
.pdh-search-wrapper .autocomplete-items li:hover{background:var(--pdh-tint)}
.pdh-search-wrapper .autocomplete-items li strong{color:var(--pdh-brand);font-weight:700}
.pdh-search-wrapper .autocomplete-items .product-name{flex:1 1 auto;min-width:0}
.pdh-search-wrapper .autocomplete-items .product-category{
  flex:0 0 auto;text-transform:uppercase;letter-spacing:.04em;
  color:var(--pdh-mut);font-size:11px;font-weight:600;
  background:#F4F2F8;padding:4px 8px;border-radius:6px;white-space:nowrap;
}

/* Sotto i 900px la testata mette la barra sotto il logo, larga tutta: qui si
   accorcia di due pixel e si stringe il pulsante, niente di piu'. La forma resta
   la stessa, perche' e' la stessa barra. */
@media (max-width:900px){
  .pdh-search-wrapper .search-line-wrapper{height:44px;border-radius:11px !important}
  .pdh-search-wrapper .search-line-button{width:48px !important;border-radius:0 11px 11px 0 !important}
  .pdh-search-wrapper .search-line-input{font-size:15px;padding:0 14px !important}
  .pdh-search-wrapper .autocomplete-items li{padding:8px 10px;font-size:13px}
  .pdh-search-wrapper .autocomplete-items .product-category{font-size:10px}
}

/* ---------- il pulsante dell'azione: invertito ---------- */
.pdh-add-store-simple{
  background:#fff !important;color:var(--pdh-brand-d) !important;border:0 !important;
  box-shadow:0 4px 14px -6px rgba(0,0,0,.35) !important;
}
.pdh-add-store-simple:hover{
  background:rgba(255,255,255,.9) !important;color:var(--pdh-brand-d) !important;
}
.pdh-add-store-simple .pdh-i{color:var(--pdh-brand-d) !important}

/* ---------- le voci di servizio ---------- */
.pdh-utility-nav a,
.pdh-utility-nav a span{color:rgba(255,255,255,.92) !important}
.pdh-utility-nav a{
  background:transparent !important;
  border:1px solid rgba(255,255,255,.24) !important;
}
.pdh-utility-nav a:hover,
.pdh-utility-nav a:hover span{
  color:#fff !important;background:rgba(255,255,255,.16) !important;
  border-color:rgba(255,255,255,.4) !important;
}
.pdh-utility-nav a .pdh-i{color:rgba(255,255,255,.85) !important}
.pdh-utility-nav a:hover .pdh-i{color:#fff !important}

.pdh-menu-toggle{color:#fff !important;background:transparent !important}
.pdh-menu-toggle:hover{background:rgba(255,255,255,.16) !important}

/* ---------- la barra delle categorie resta bianca ----------
   Se fosse viola anche lei tornerebbero le due fasce di prima, e il colore
   smetterebbe di attirare l'occhio proprio perche' ce n'e' troppo. */
.pdh-category-bar{
  background:#fff !important;
  border-bottom:1px solid var(--pdh-line) !important;
  box-shadow:none !important;
}


/* ============================================================================
   LA TESTATA DA TELEFONO — 30/08/2026
   ----------------------------------------------------------------------------
   TRE GUASTI, NON UNO.

   1. IL PULSANTE NON ERA COLLEGATO. Il markup ha #menuToggle e #categoryMenu da
      sempre, e questo foglio ha tutto il vestito del pannello a scomparsa: sotto i
      768px la barra diventa un pannello a tutto schermo con translateX(-100%), e si
      apre con la classe .active. Mancava la riga di JavaScript che quella classe la
      mette: nessuno l'aveva mai scritta. Da telefono il sito NON aveva nessuna
      navigazione per categorie. Il codice sta in fondo a menu.php.

   2. LA PAGINA SBORDAVA DI LATO a 390px, e il pulsante — che sta a right:12px —
      finiva fuori dallo schermo: anche collegato, non si poteva premere. Il motivo e'
      che questo foglio non dichiara mai box-sizing, quindi vale content-box, e il
      blocco mobile mette width:100% CON padding:0 10px sulla ricerca e padding:12px
      sul contenitore. 100% + il padding = piu' largo del padre, ogni volta.

   3. IL PANNELLO USCIVA BIANCO SU BIANCO. Tobia: «quando apri il menu a sandwich
      rimane bianco e a menu aperto con sfondo bianco non si vede». Il blocco mobile
      qui sopra lo voleva viola, ma trecento righe piu' giu' c'e'
      .pdh-category-bar{background:#fff !important} — scritta per la barra del
      desktop, che deve restare bianca — e a parita' di !important vince l'ultima.
      Sul telefono quella barra non e' una barra, e' un pannello sopra la pagina: qui
      torna viola, dentro il @media, dove il desktop non la vede.
   ============================================================================ */
.pdh-header, .pdh-header *,
.pdh-category-bar, .pdh-category-bar * { box-sizing: border-box; }

/* ---------- l'albero vero nel pannello del telefono ----------
   Sul desktop non si stampa: c'e' la striscia delle famiglie, che di un albero e' la
   prima riga. Sotto i 768px si scambiano — la striscia sparisce e resta l'indice, lo
   stesso di /category/, perche' su una colonna sola una striscia di nove icone
   sarebbe solo una lista peggiore. */
.pdh-albero { display: none; }

/* .pdh-container e' lo stesso contenitore della riga logo+ricerca, ed e' display:flex:
   dentro la barra delle categorie la lista diventava un elemento flessibile e si
   stringeva sul contenuto — 779px dentro 1.200, con un vuoto a destra grande un terzo
   della barra. Qui dentro non c' e' nessuna riga da comporre: e' un blocco. */
.pdh-category-bar > .pdh-container { display: block; width: 100%; }

@media (max-width: 768px) {

  /* il pannello e' viola come la testata: e' un piano sopra la pagina, e un piano
     sopra si vede solo se il colore lo dice */
  .pdh-category-bar {
    background: var(--pdh-brand) !important;
    border-bottom: 0 !important;
    /* 100vh sul telefono NON e' quello che si vede: e' l' altezza con le barre del
       browser ritirate, quindi il fondo del pannello finisce sotto la barra degli
       indirizzi e l' ultimo pulsante esce tagliato. 100dvh e' l' altezza vera, che
       cambia mentre si scorre; 100vh resta sopra come ripiego per i browser vecchi. */
    height: 100vh; height: 100dvh;
    -webkit-overflow-scrolling: touch;
  }

  .pdh-category-menu { display: none !important; }

  .pdh-albero {
    display: block;
    /* il fondo e' abbondante di proposito: sotto ci passa la barra del browser, e un
       margin sull' ultimo figlio in un contenitore che scorre non fa spazio */
    padding: 0 14px 96px;
  }

  /* la testa del pannello: il titolo e la X, appiccicate in alto mentre si scorre */
  .pdh-alb-testa {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; justify-content: space-between;
    margin: 0 -14px 16px; padding: 14px;
    background: var(--pdh-brand);
    border-bottom: 1px solid rgba(255,255,255,.18);
  }
  .pdh-alb-testa span {
    font-family: "Manrope", sans-serif; font-weight: 800; font-size: 16px;
    color: #fff; letter-spacing: -.01em;
  }
  .pdh-alb-chiudi {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0;
    border: 1px solid rgba(255,255,255,.34); border-radius: 10px;
    background: transparent; color: #fff; cursor: pointer;
  }
  .pdh-alb-chiudi:active { background: rgba(255,255,255,.18); }

  .pdh-alb-fam { margin-bottom: 16px; }

  .pdh-alb-capo {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 12px;
    background: rgba(255,255,255,.13);
    border-radius: 10px;
    color: #fff !important;
    text-decoration: none;
    font-weight: 700; font-size: 15px;
  }
  .pdh-alb-capo:active { background: rgba(255,255,255,.22); }
  .pdh-alb-capo .pdh-i {
    width: 20px; height: 20px; flex: 0 0 20px;
    color: var(--pdh-lime) !important; opacity: 1 !important;
  }
  .pdh-alb-capo span { flex: 1 1 auto; min-width: 0; }
  /* il numero e' un dato, non un titolo: stessa riga, peso normale, cifre in colonna */
  .pdh-alb-capo b {
    flex: 0 0 auto; font-weight: 600; font-size: 12px;
    color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums;
  }

  .pdh-alb-figli { padding: 2px 0 0 6px; }

  .pdh-alb-figli a {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 12px 11px 24px;
    border-bottom: 1px solid rgba(255,255,255,.13);
    color: rgba(255,255,255,.92) !important;
    text-decoration: none;
    font-size: 14px; line-height: 1.25;
  }
  .pdh-alb-figli a:last-child { border-bottom: 0; }
  .pdh-alb-figli a:active { background: rgba(255,255,255,.14); }
  .pdh-alb-figli a i {
    margin-left: auto; flex: 0 0 auto;
    font-style: normal; font-size: 12px;
    color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums;
  }

  /* l'unica cosa chiara sul viola: e' l'uscita, e si deve trovare senza cercarla */
  .pdh-alb-tutte {
    display: block; margin-top: 20px; padding: 13px 12px;
    text-align: center; border-radius: 10px;
    background: #fff; color: var(--pdh-brand-d) !important;
    text-decoration: none; font-weight: 700; font-size: 14px;
  }
}

/* ---------- la striscia adesso porta i nomi delle famiglie ----------
   «Grandi Elettrodomestici» e «Piccoli Elettrodomestici» non stanno su una riga in un
   nono di 1.200px, e il foglio qui sopra impone white-space:nowrap !important: la
   striscia sbordava o schiacciava le voci. Su due righe ci stanno tutte.
   Le due regole a nth-child(5) e nth-child(8) rimpicciolivano la quinta e l'ottava
   voce perche' nella lista vecchia, scritta a mano, quelle erano «Lavatrici» e
   «Friggitrici»: adesso in quel posto c'e' una famiglia qualunque, e rimpicciolire per
   posizione non vuol piu' dire niente. */
@media (min-width: 769px) {
  .pdh-category-menu .menu-text {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    line-height: 1.15;
    padding: 0 2px;
  }
  .pdh-category-menu li:nth-child(5) .menu-text,
  .pdh-category-menu li:nth-child(8) .menu-text {
    font-size: inherit;
    letter-spacing: inherit;
  }
  .pdh-category-menu a {
    padding: 9px 4px !important;
    min-height: 74px;
    justify-content: flex-start;
  }
  /* le celle erano tutte larghe uguali (flex:1) perche' i dodici nomi scritti a mano
     erano corti e simili. «Piccoli Elettrodomestici» in un nono di barra non ci sta e
     usciva dalla sua cella addosso alla vicina: adesso ogni cella parte dalla
     larghezza del suo nome e cresce da li'. */
  .pdh-category-menu li { flex: 1 1 auto; }
  .pdh-category-menu .menu-text {
    font-size: .68rem !important;
    max-width: 100%;
    overflow-wrap: break-word !important;
  }
  /* «Tutte» chiude la fila e non e' una categoria: si distingue senza gridare */
  .pdh-voce-tutte a { color: var(--pdh-brand-d) !important; font-weight: 600 !important; }
}


/* ============================================================================
   LA FASCIA DELLE CATEGORIE, PIU STRETTA - 30/08/2026 (Tobia: «il menu sotto
   l'header fallo piu' stretto, mi sembra troppo dispersivo»).

   Non era larga la fascia: era larga la SPAZIATURA. Il contenitore ha gia'
   max-width 1200, ma l'elenco dentro usa justify-content: space-between, che
   spalma nove voci su tutta quella larghezza — la prima a x=107, l'ultima a
   x=1225, e in mezzo aria. Con nove voci corte il risultato e' un menu che si
   legge come un elenco sparso invece che come una barra.

   Si stringe l'elenco, non la fascia: la striscia viola resta a tutta pagina
   (e' lei a dare la riga di colore sotto la testata), le voci si raccolgono al
   centro con un passo fisso. E la barra scende da 74 a ~58 px, che su una
   pagina dove la prima cosa da vedere e' la ricerca sono sedici pixel guadagnati.
   ============================================================================ */
.pdh-category-bar .pdh-container{ min-height:0; padding:0 15px; }
.pdh-category-menu{
  justify-content:center !important;
  gap:2px;
  margin:0 auto !important;
  /* 1000 e non meno: a 900 le nove voci non ci stanno piu su una riga e
     flex-wrap le manda a capo, raddoppiando la fascia da 75 a 151 px.
     Misurato, non stimato. */
  max-width:1000px;
  flex-wrap:wrap;
}
.pdh-category-menu > li > a{
  padding:6px 11px !important;
  gap:5px;
}
.pdh-category-menu .pdh-i{ width:18px; height:18px; }
.pdh-category-menu > li > a > span{ font-size:.68rem; }

@media (max-width:1100px){
  .pdh-category-menu{ max-width:100%; }
  .pdh-category-menu > li > a{ padding:8px 9px !important; }
}


/* ============================================================================
   ICONA A SINISTRA, TESTO A DESTRA - 30/08/2026 (Tobia: «mettiamo icona e poi
   testo a destra»).
   Le voci erano incolonnate — icona sopra, parola sotto — e da sole facevano una
   fascia alta 75 px fra la barra di ricerca e l'eroe. Su una riga sola la voce e'
   piu' larga ma la fascia si dimezza, e i pixel guadagnati stanno esattamente dove
   la pagina deve aprire.
   L'elenco torna a 1200: nove voci su una riga sola chiedono piu' larghezza di
   nove voci incolonnate, e stringere qui vorrebbe dire mandarle a capo — che e'
   il difetto che si sta togliendo.
   ============================================================================ */
.pdh-category-menu > li > a{
  flex-direction:row !important;
  align-items:center;
  gap:7px !important;
  padding:0 10px !important;
  min-height:42px;
  white-space:nowrap;
}
.pdh-category-menu{ max-width:1200px; align-items:center; }
.pdh-category-menu .pdh-i{ width:17px; height:17px; flex:0 0 17px; }
.pdh-category-bar .pdh-container{ min-height:0; }

@media (max-width:1150px){
  .pdh-category-menu > li > a{ padding:0 7px !important; gap:5px !important; }
  .pdh-category-menu > li > a > span{ font-size:.66rem; }
}

/* ============================================================================
   IL TESTO DELLA FASCIA, PIU' GRANDE - 30/08/2026 (Tobia: «il font del menu
   sotto l'header mi sembra piccolo»).

   Aveva ragione: 10,88 px. Ma il tetto non e' il gusto, e' la larghezza.
   Le nove voci — otto famiglie piu' «Tutte» — occupano gia' 1.170 px dei 1.170
   disponibili dentro .pdh-container, e appena una va a capo `flex-wrap` raddoppia
   la fascia da 43 a 87 px, che e' esattamente il difetto tolto stamattina.

   MISURATO, non stimato, provando una scala di corpi su una riga sola:
     9 voci (com'e' oggi)  ->  al massimo .76rem = 12,2 px
     8 voci                ->  .84rem = 13,4 px
     7 voci                ->  1rem   = 16 px
   Tobia ha scelto di tenere tutte e nove le voci, quindi .76rem e' il tetto.
   Non c'e' margine: se una famiglia cambia nome e diventa piu' lunga, la fascia
   va a capo. Chi rinomina una famiglia riguarda questa scala.

   PERCHE' TRE SCALINI E NON UNO. Sotto i 1.200 px di finestra il contenitore
   non e' piu' largo 1.170 ma `viewport - 30`, e a quel punto .76rem non ci sta
   piu'. Provato in un iframe a undici larghezze fra 1600 e 1024: cosi' com'e'
   scritto qui la fascia resta su UNA riga da 1600 fino a 1100, e a 1024 va a
   capo come gia' fa oggi — nessun peggioramento a nessuna larghezza.

   PERCHE' IL SELETTORE E' COSI' LUNGO. La riga `.pdh-category-menu .menu-text
   {font-size:inherit !important}` (piu' su in questo file) vince su qualunque
   regola con meno classi: il corpo va messo sull'<a> E sul .menu-text insieme,
   con abbastanza specificita' da batterla. La vecchia
   `.pdh-category-menu > li > a > span{font-size:.68rem}` era gia' morta per
   questo motivo, e infatti non la si vedeva mai applicata.
   ============================================================================ */
@media (min-width:1230px){
  .pdh-category-bar .pdh-category-menu > li > a,
  .pdh-category-bar .pdh-category-menu > li > a > .menu-text{ font-size:.76rem !important; }
}
@media (min-width:1180px) and (max-width:1229px){
  .pdh-category-bar .pdh-category-menu > li > a,
  .pdh-category-bar .pdh-category-menu > li > a > .menu-text{ font-size:.72rem !important; }
}