body.bg-catalogo .com-content-article {
  background-color: #c1c1c1 !important;
  padding: 1.5rem;
  border-radius: 6px;
}

.menu-secondo {
  background-color: #F5EB3B;
  border-radius: 14px;
  padding: .4rem .8rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}

#redim-cookiehint .cookiehead,
#redim-cookiehint .cookiehead .headline {
  display: none !important;
}



/* SCHEDA EDITORIALE - HOME BLOG: il box che contiene l'immagine copertinacatalogo */
main .blog-item:has(img[src*="copertinacatalogo"]) {
  background-color: #c1c1c1 !important;
  padding: 1.6rem !important;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  border: 1px solid rgba(0,0,0,.08);
  overflow: hidden; /* per arrotondare anche contenuti interni */
}

/* Spaziatura e tipografia dentro la scheda */
main .blog-item:has(img[src*="copertinacatalogo"]) .item-content {
  gap: .75rem;
}

/* Immagine come “cover” ordinata */
main .blog-item:has(img[src*="copertinacatalogo"]) img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Titolo più “editoriale” (se presente come h2/h3 link) */
main .blog-item:has(img[src*="copertinacatalogo"]) :is(h1,h2,h3) a {
  text-decoration: none;
}

/* Leggibilità testo su grigio */
main .blog-item:has(img[src*="copertinacatalogo"]) {
  color: #111;
}
main .blog-item:has(img[src*="copertinacatalogo"]) a {
  color: inherit;
}



/* =================================================
   GUIDA AUDIO – RESPONSIVE con clamp()
   ================================================= */

.qa-box{
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Display codice */
.qa-box #qa-display{
  font-size: clamp(34px, 6vw, 56px) !important;
  letter-spacing: clamp(6px, 1.2vw, 12px) !important;

  /* altezza/spazio più “intelligente” */
  padding: clamp(6px, 1.6vw, 14px) clamp(14px, 3vw, 24px) !important;
  margin: clamp(8px, 2vw, 14px) auto clamp(10px, 2.4vw, 16px) !important;

  width: fit-content;
  min-width: clamp(180px, 40vw, 240px);
  border: 2px solid #333;
  border-radius: clamp(10px, 2vw, 16px);
  background: #fff;
  color: #000;
  text-align: center;
  font-weight: 700;
}

/* Status testo */
.qa-box #qa-status{
  text-align: center;
  font-size: clamp(14px, 2.2vw, 16px);
  margin-bottom: clamp(10px, 2.4vw, 18px);
}

/* Tastierino telefono (3x4) */
.qa-box #qa-pad.qa-pad-phone{
  display: grid !important;
  grid-template-columns: repeat(3, clamp(54px, 13vw, 70px)) !important;
  gap: clamp(8px, 2.5vw, 12px) !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 auto !important;
}

.qa-box #qa-pad.qa-pad-phone > button{
  width: clamp(54px, 13vw, 70px) !important;
  height: clamp(54px, 13vw, 70px) !important;
  font-size: clamp(18px, 4.2vw, 22px) !important;
  padding: 0 !important;
  border-radius: clamp(10px, 2.5vw, 14px) !important;
}

/* Pulsanti player grandi ma responsivi */
.qa-box .qa-controls{
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap;
  gap: clamp(8px, 2.5vw, 12px) !important;
  margin: clamp(10px, 2.8vw, 16px) 0 !important;
}

.qa-box .qa-controls button{
  min-width: clamp(64px, 18vw, 90px) !important;
  height: clamp(46px, 12vw, 64px) !important;
  font-size: clamp(16px, 4vw, 22px) !important;
  padding: clamp(6px, 1.8vw, 12px) clamp(10px, 3vw, 16px) !important;
  border-radius: clamp(10px, 2.5vw, 14px) !important;
}

/* Slider largo e comodo */
.qa-box .qa-range{
  width: min(520px, 92vw);
  margin-top: clamp(6px, 1.8vw, 12px);
}

/* =========================================
   GUIDA AUDIO – BARRA DI SCORRIMENTO
   POSIZIONATA TRA TASTIERINO E CONTROLLI
   ========================================= */

.qa-box .qa-range{
  order: 3; /* dopo il tastierino */
  width: min(520px, 92vw);
  margin: clamp(12px, 3vw, 18px) auto;
}

/* Tastierino */
.qa-box #qa-pad{
  order: 2;
}

/* Controlli audio */
.qa-box .qa-controls{
  order: 4;
}
/* Avviso per desktop */
.qa-desktop-warning{
  display: none;
  padding: 14px 18px;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: 12px;
  background: #ffffff;
  margin: 20px auto;
  max-width: 720px;
  text-align: center;
  font-size: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* =================================================
   GUIDA AUDIO – DESKTOP: TASTI NUMERICI IN LINEA
   ================================================= */

/* Desktop (schermi larghi). Puoi alzare/abbassare 992px se vuoi */
@media (min-width: 992px){

  /* trasforma la griglia in riga */
  .qa-box #qa-pad.qa-pad-phone{
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* tasti più compatti in riga */
  .qa-box #qa-pad.qa-pad-phone > button{
    width: 40px !important;
    height: 40px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    padding: 0 !important;
  }
}

/* =========================================
   GUIDA AUDIO – PLAY / PAUSA NEUTRI
   ========================================= */

.qa-box #qa-playpause{
  font-size: 22px;
  transition: background-color .2s ease, color .2s ease;
  background-color: #e0e0e0;
  color: #000000;
}

/* stesso stile sia per play che per pausa */
.qa-box #qa-playpause[data-state="play"],
.qa-box #qa-playpause[data-state="pause"]{
  background-color: #e0e0e0;
  color: #000000;
}