/* qualecomprare.net — override/aggiunte CI4 (caricato dopo styles.css/pages.css) */

/* Logo header più grande */
.site-header .logo-img img { height: 56px; width: auto; display: block; }
@media (max-width: 760px) { .site-header .logo-img img { height: 42px; } }

/* Logo footer: immagine su chip bianco (testo scuro leggibile su footer scuro) */
.site-footer .logo-footer { display: inline-block; background: #fff; padding: 8px 12px; border-radius: 12px; line-height: 0; }
.site-footer .logo-footer img { height: 38px; width: auto; display: block; }

/* Logo nel drawer (sfondo chiaro) */
.drawer .logo-img img { height: 40px; width: auto; display: block; }

/* Sottotitolo header pagina: larghezza piena (override del max-width 64ch di pages.css) */
.page-head .page-sub { max-width: none; }

/* Disclaimer affiliazione Amazon (obbligatorio, in evidenza su ogni pagina) */
.site-footer .footer-disclaimer { margin: 0 0 14px; font-size: 13px; color: oklch(72% 0.015 250); }

/* Immagini card prodotto uniformi (no più altezze diverse) */
.pcard .pcard-media { position: relative; display: block; overflow: hidden; }
.pcard .pcard-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  padding: 12px; background: #fff;
}

/* Gallery scheda prodotto: immagini contenute e uniformi */
.gallery .g-main { aspect-ratio: 1/1; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.gallery .g-main img { width: 100%; height: 100%; object-fit: contain; padding: 16px; }
.gallery .g-thumb { background: #fff; overflow: hidden; }
.gallery .g-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

/* Slide interamente cliccabile */
.hero-slider .hs-slide { cursor: pointer; }
.hero-slider .hs-slide a.btn { cursor: pointer; }

/* ============================================================
   Griglie home (prima erano stili inline → non responsive)
   ============================================================ */
.guides-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.topic-grid  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.brand-grid  { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.blog-grid   { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.related-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.blog-layout { display: grid; grid-template-columns: 1fr 280px; gap: 32px; align-items: start; }
@media (max-width: 900px) { .blog-layout { grid-template-columns: 1fr; } }
.desc-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; align-items: start; }
@media (max-width: 760px) { .desc-grid { grid-template-columns: 1fr; gap: 22px; } }

/* ============================================================
   Blocco "Perché QualeComprare" (home)
   ============================================================ */
.about-band { background: var(--accent-soft); border-block: 1px solid var(--border); }
.about-intro { max-width: 760px; margin: 0 auto 26px; text-align: center; }
.about-intro h2 { margin-top: 8px; }
.about-intro p { color: var(--ink-2); font-size: 16.5px; line-height: 1.6; margin-top: 12px; }
.about-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.about-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; }
.about-card h3 { font-size: 17px; margin-bottom: 8px; }
.about-card p { color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }
@media (max-width: 760px) { .about-grid { grid-template-columns: 1fr; } }

/* ============================================================
   MOBILE — sistemazione completa
   ============================================================ */

/* Accessibilità: titolo solo per screen reader / SEO */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Logo-mark (maialino) per header compatto mobile */
.logo-mark-link { display: none; line-height: 0; }
.logo-mark-link img { height: 40px; width: auto; display: block; }

.site-header { z-index: 60; }

/* HEADER MOBILE: una sola riga sticky → maialino · ricerca · menu */
@media (max-width: 760px) {
  .site-header .logo-img { display: none; }          /* logo esteso nascosto */
  .logo-mark-link { display: inline-flex; flex: 0 0 auto; }
  .hdr-actions .hide-mobile { display: none; }        /* via cuore + avvisi */
  .site-header .hdr-row { height: auto; min-height: 58px; gap: 8px; padding-block: 8px; align-items: center; flex-wrap: nowrap; }
  /* la barra di ricerca grande resta in riga, flessibile */
  .site-header .searchbar.searchbar-lg { display: flex !important; flex: 1 1 auto; min-width: 0; max-width: none; }
  .site-header .searchbar.searchbar-lg input { min-width: 0; }
  .site-header .searchbar.searchbar-lg .btn { padding-inline: 12px; }
  .menu-toggle { display: grid; flex: 0 0 auto; }
}

/* Tablet: 2 colonne prodotti/guide */
@media (max-width: 900px) {
  .product-grid, .product-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .guides-grid, .related-grid { grid-template-columns: repeat(2, 1fr); }
  .topic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brand-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Le celle non devono mai forzare la larghezza (causa scroll orizzontale) */
.topic { min-width: 0; overflow-wrap: anywhere; }
.topic-grid, .brand-grid { grid-auto-flow: row; }

/* Smartphone: 1 prodotto/guida per riga */
@media (max-width: 600px) {
  .product-grid, .product-grid.cols-4 { grid-template-columns: 1fr !important; gap: 14px; }
  .guides-grid, .related-grid, .blog-grid { grid-template-columns: 1fr !important; }
  .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* blog: sidebar sotto, larghezza piena */
  .article-layout { grid-template-columns: 1fr !important; }
}

/* Footer: mantieni colonne ordinate anche su telefono (2 col, brand a tutta larghezza) */
@media (max-width: 560px) {
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 26px 18px; }
  .site-footer .footer-brand { grid-column: 1 / -1; }
}