/* 04/11/2026 blog6-20261104 (agente B2, SOLO STAGE): pagine del blog nel negozio (/shop/blog, /shop/blog/categoria/<slug>,
   /shop/blog/<slug>), modulo mallardo_blog. Registrato SOLO sui due controller del modulo (file a parte, fuori dal CSS combinato).
   Rollback: /root/prof/rollback-blog6-20261104.sh
   - Standard grafico: monocromatico (#111, #6f6f6f, #e4e4e4, #f6f6f6), Manrope per titoli e card come la riga «Articoli più recenti»
     della home; testo di lettura Manrope 16 px / 1,6 (17 px / 1,65 da 768 px), interruttore ?blogtesto=poppins (classe
     html.mblogp-poppins) per il font del resto del sito.
   - Colonna di lettura 760 px centrata, foto in evidenza piena larghezza della colonna; indice largo al massimo 1200 px:
     2 colonne sotto 768 px, 3 fino a 991, 4 da 992 (12 articoli = 3 righe da 4).
   - Card: stesse regole della riga in home (custom.css, blocco BLOG5, limitato a body#index), qui sotto .mblogp.
   - Lo <style id="mblogp-crit"> in linea (_head.tpl) viene DOPO questo file: le regole che lo scavalcano hanno un antenato in piu'. */

/* ---------------------------------------------------------------- impianto */
.mblogp { box-sizing: border-box; width: 100%; margin: 0 auto; padding: 0 0 40px; color: #111; text-align: left; font-family: Manrope, sans-serif; }
.mblogp *, .mblogp *::before, .mblogp *::after { box-sizing: border-box; }
.mblogp-art { max-width: 760px; }
.mblogp-lista, .mblogp-altri { max-width: 1200px; }
.mblogp a { color: #111; }
.mblogp a:hover, .mblogp a:focus { color: #111; }
.mblogp a:focus-visible { outline: 2px solid #111 !important; outline-offset: 2px; } /* il tema ha a,button{outline:0!important} */

/* ---------------------------------------------------------------- testate */
.mblogp-h1 { margin: 6px 0 8px; padding: 0; font-family: Manrope, sans-serif; font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #111; text-wrap: balance; }
.mblogp-lista .mblogp-h1 { text-transform: uppercase; letter-spacing: .02em; }
.mblogp-hd { margin: 0 0 20px; }
.mblogp-intro { margin: 0; font-family: Manrope, sans-serif; font-size: 14px; line-height: 20px; color: #6f6f6f; }
.mblogp-npag { white-space: nowrap; }
.mblogp-npag::before { content: "\00b7\00a0"; }
.mblogp-torna { display: inline-block; margin: 4px 0 10px; font-family: Manrope, sans-serif; font-size: 13px; font-weight: 600; line-height: 20px; color: #111; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mblogp-torna:hover { text-decoration-thickness: 2px; }
.mblogp-k { display: inline-block; margin: 6px 0 0; font-family: Manrope, sans-serif; font-size: 11px; font-weight: 600; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: #6f6f6f; text-decoration: none; }
a.mblogp-k:hover { color: #111; text-decoration: underline; text-underline-offset: 3px; }
.mblogp-data { margin: 0; font-family: Manrope, sans-serif; font-size: 13px; line-height: 20px; color: #6f6f6f; }
.mblogp-hero { margin: 20px 0 24px; padding: 0; background: #f6f6f6; }
.mblogp-hero img { display: block; width: 100%; max-width: 100%; height: auto; }

/* ---------------------------------------------------------------- filtri per categoria (indice) */
.mblogp-filtri { display: flex; flex-wrap: nowrap; gap: 8px; margin: 16px -15px 0; padding: 2px 15px 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mblogp-filtri::-webkit-scrollbar { display: none; }
.mblogp-chip { flex: 0 0 auto; display: inline-block; padding: 7px 14px; border: 1px solid #e4e4e4; background: #fff; font-family: Manrope, sans-serif; font-size: 13px; font-weight: 600; line-height: 18px; color: #111; text-decoration: none; white-space: nowrap; }
.mblogp-chip:hover, .mblogp-chip:focus { border-color: #111; color: #111; text-decoration: none; }
.mblogp a.mblogp-chip.is-on, .mblogp a.mblogp-chip.is-on:hover { border-color: #111; background: #111; color: #fff; }

/* ---------------------------------------------------------------- card (come la riga della home) */
.mblogp-griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; margin: 0; padding: 0; list-style: none; }
.mblogp .mblog-i { min-width: 0; margin: 0; padding: 0; list-style: none; }
.mblogp .mblog-i::before { content: none; }
.mblogp .mblog-a { display: flex; flex-direction: column; height: 100%; color: #111; text-decoration: none; }
.mblogp .mblog-a:hover, .mblogp .mblog-a:focus { color: #111; text-decoration: none; }
.mblogp .mblog-f { position: relative; display: block; flex: 0 0 auto; height: 0; padding: 66.6667% 0 0; overflow: hidden; background: #f6f6f6; }
.mblogp .mblog-f img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; transition: transform .4s ease; }
.mblogp .mblog-k { display: block; margin: 10px 0 0; font-family: Manrope, sans-serif; font-size: 11px; font-weight: 600; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: #6f6f6f; }
.mblogp .mblog-t { display: block; display: -webkit-box; margin: 4px 0 0; font-family: Manrope, sans-serif; font-size: 14px; font-weight: 600; line-height: 19px; letter-spacing: 0; text-transform: none; color: #111; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; max-height: 57px; text-wrap: pretty; }
.mblogp .mblog-f + .mblog-t { margin-top: 10px; }
.mblogp .mblog-d { display: block; margin: auto 0 0; padding: 6px 0 0; font-family: Manrope, sans-serif; font-size: 12px; font-weight: 400; line-height: 16px; color: #6f6f6f; }
@media (hover: hover) {
  .mblogp .mblog-a:hover .mblog-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .mblogp .mblog-a:hover .mblog-f img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .mblogp .mblog-f img { transition: none; }
}

/* ---------------------------------------------------------------- paginazione */
.mblogp-pag { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; margin: 36px 0 0; font-family: Manrope, sans-serif; font-size: 14px; line-height: 20px; }
.mblogp-pag-n { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; order: 0; }
.mblogp-pag-i { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 6px; border: 1px solid #e4e4e4; color: #111; font-weight: 600; text-decoration: none; }
.mblogp a.mblogp-pag-i:hover { border-color: #111; text-decoration: none; }
.mblogp-pag-i.is-on { border-color: #111; background: #111; color: #fff; }
.mblogp-pag-gap { display: inline-flex; align-items: flex-end; justify-content: center; min-width: 20px; height: 38px; color: #6f6f6f; }
.mblogp-pag-ps { display: inline-flex; align-items: center; height: 38px; font-weight: 600; color: #111; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap; }
.mblogp-pag-ps.is-off { color: #b5b5b5; text-decoration: none; }
@media (max-width: 575px) {
  .mblogp-pag { gap: 12px; }
  .mblogp-pag-n { order: -1; flex: 1 0 100%; }
  .mblogp-pag-ps { flex: 1 1 0; }
  .mblogp-pag-ps:last-child { justify-content: flex-end; }
}

/* ---------------------------------------------------------------- testo dell'articolo */
.mblogp-testo { font-family: Manrope, sans-serif; font-size: 16px; line-height: 1.6; font-weight: 400; color: #1a1a1a; overflow-wrap: break-word; word-wrap: break-word; }
html.mblogp-poppins .mblogp-testo { font-family: Poppins, sans-serif; font-size: 15px; line-height: 1.7; }
.mblogp-testo::after { content: ""; display: table; clear: both; }
.mblogp-testo p { margin: 0 0 1em; font: inherit; color: inherit; }
.mblogp-testo h2, .mblogp-testo h3, .mblogp-testo h4 { margin: 1.6em 0 .55em; padding: 0; font-family: Manrope, sans-serif; font-weight: 700; letter-spacing: 0; text-transform: none; color: #111; text-wrap: balance; }
.mblogp-testo h2 { font-size: 22px; line-height: 28px; }
.mblogp-testo h3 { font-size: 18px; line-height: 24px; }
.mblogp-testo h4 { font-size: 16px; line-height: 22px; }
.mblogp-testo h2 strong, .mblogp-testo h3 strong, .mblogp-testo h4 strong { font-weight: inherit; }
.mblogp-testo > :first-child { margin-top: 0; }
.mblogp-testo strong, .mblogp-testo b { font-weight: 700; }
.mblogp-testo em, .mblogp-testo i { font-style: italic; }
.mblogp-testo a { color: #111; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.mblogp-testo a:hover { text-decoration-thickness: 2px; }
.mblogp-testo ul, .mblogp-testo ol { margin: 0 0 1em; padding: 0 0 0 1.4em; }
.mblogp-testo ul { list-style: disc outside; }
.mblogp-testo ol { list-style: decimal outside; }
.mblogp-testo li { display: list-item; margin: .35em 0; padding: 0; font: inherit; color: inherit; }
.mblogp-testo li::before { content: none; }
.mblogp-testo li > ul, .mblogp-testo li > ol { margin: .35em 0 0; }
.mblogp-testo img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.mblogp-testo figure { margin: 1.5em 0; padding: 0; }
.mblogp-testo figcaption { margin: 8px 0 0; font-size: 13px; line-height: 18px; color: #6f6f6f; text-align: center; }
.mblogp-testo .aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.mblogp-testo .alignleft, .mblogp-testo .alignright { margin: 0 0 1em; }
.mblogp-testo blockquote { margin: 1.5em 0; padding: 2px 0 2px 16px; border-left: 3px solid #111; font-style: italic; color: #333; }
.mblogp-testo blockquote p:last-child { margin-bottom: 0; }
/* articoli del blog citati con l'embed di WordPress: restano come link («Leggi anche») */
.mblogp-testo blockquote.wp-embedded-content { padding: 12px 16px; border: 1px solid #e4e4e4; font-style: normal; font-weight: 600; color: #111; }
.mblogp-testo blockquote.wp-embedded-content::before { content: "Leggi anche"; display: block; margin: 0 0 2px; font-size: 11px; font-weight: 600; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: #6f6f6f; }
.mblogp-testo hr { height: 0; margin: 2em 0; border: 0; border-top: 1px solid #e4e4e4; }
.mblogp-testo .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mblogp-testo table { width: 100%; min-width: 480px; margin: 0; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.mblogp-testo th, .mblogp-testo td { padding: 8px 10px; border: 1px solid #e4e4e4; text-align: left; vertical-align: top; }
.mblogp-testo th, .mblogp-testo thead td { background: #f6f6f6; font-weight: 700; }
.mblogp-testo iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 0; border: 0; background: #111; }
.mblogp-fine { margin: 32px 0 0; padding: 20px 0 0; border-top: 1px solid #e4e4e4; }

/* ---------------------------------------------------------------- «Altri articoli» */
.mblogp-altri { padding-top: 8px; }
.mblogp-altri-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.mblogp-h2s { margin: 0; padding: 0; font-family: Manrope, sans-serif; font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #111; }
.mblogp-tutti { flex: 0 0 auto; font-family: Manrope, sans-serif; font-size: 13px; font-weight: 600; line-height: 16px; color: #111; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap; }
/* sotto 768 px: riga scorrevole come in home (schede da 260 px) */
.mblogp .mblogp-griglia3 { display: flex; gap: 12px; margin: -4px -15px; padding: 4px 15px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 15px; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.mblogp .mblogp-griglia3::-webkit-scrollbar { display: none; }
.mblogp .mblogp-griglia3 .mblog-i { flex: 0 0 260px; scroll-snap-align: start; }

@media (min-width: 768px) {
  .mblogp-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 16px; }
  .mblogp .mblog-t { font-size: 15px; line-height: 20px; max-height: 60px; }
  .mblogp-testo { font-size: 17px; line-height: 1.65; }
  html.mblogp-poppins .mblogp-testo { font-size: 16px; line-height: 1.7; }
  .mblogp-testo h2 { font-size: 24px; line-height: 30px; }
  .mblogp-testo h3 { font-size: 20px; line-height: 26px; }
  .mblogp-testo h4 { font-size: 17px; line-height: 23px; }
  .mblogp-testo .alignleft { float: left; max-width: 50%; margin: .3em 1.4em 1em 0; }
  .mblogp-testo .alignright { float: right; max-width: 50%; margin: .3em 0 1em 1.4em; }
  .mblogp .mblogp-griglia3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: -4px; padding: 4px; overflow: visible; scroll-snap-type: none; }
  .mblogp .mblogp-griglia3 .mblog-i { scroll-snap-align: none; }
  .mblogp-h2s { font-size: 20px; line-height: 26px; }
  .mblogp-tutti { font-size: 14px; line-height: 20px; }
}
@media (min-width: 992px) {
  .mblogp-h1 { font-size: 34px; line-height: 42px; }
  .mblogp-lista .mblogp-griglia { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mblogp-hd { margin-bottom: 28px; }
  .mblogp-filtri { flex-wrap: wrap; margin: 18px 0 0; padding: 0; overflow: visible; }
  .mblogp-art .mblogp-hero { margin: 24px 0 32px; }
  .mblogp-altri { max-width: 1000px; }
}