/* Macropagina dinamica Ricambi/Componenti: stesso tema e sidebar dell'indice. */
.prodotto-dettaglio-page .prodotto-contenuto{overflow-wrap:anywhere}
.prodotto-dettaglio-page .prodotto-contenuto img{max-width:100%;height:auto}
.prodotto-dettaglio-page .prodotto-contenuto iframe{max-width:100%}
.prodotto-dettaglio-page .prodotto-contenuto table{max-width:100%}
.prodotto-navigazione{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:40px 0 10px;border-top:1px solid #e9e9e9;padding-top:22px}
.prodotto-navigazione>div{min-width:0;flex:1}
.prodotto-navigazione>div:last-child{text-align:right}
.prodotto-navigazione a{display:inline-block;max-width:100%;background:#395ca3;color:#fff;padding:9px 13px;line-height:1.35;text-decoration:none}
.prodotto-navigazione a:hover,.prodotto-navigazione a:focus{background:#2a4987;color:#fff;text-decoration:none}
/* Triangolini pieni bianchi: sola punta, senza asta o cerchio. */
.prodotto-navigazione a.prodotto-nav-prev,.prodotto-navigazione a.prodotto-nav-next{display:inline-flex;align-items:center;gap:9px}
.prodotto-navigazione .prodotto-freccia{display:block;flex:none;width:17px;height:17px;fill:#fff}
.prodotto-navigazione .prodotto-torna-indice{background:#f5f5f5;border:1px solid #ddd;color:#395ca3;text-align:center}
.prodotto-navigazione .prodotto-torna-indice:hover,.prodotto-navigazione .prodotto-torna-indice:focus{background:#e8e8e8;color:#2a4987}
@media(max-width:600px){.prodotto-navigazione{flex-wrap:wrap;gap:9px}.prodotto-navigazione .prodotto-torna-indice{order:-1;flex-basis:100%;width:100%}.prodotto-navigazione>div{flex-basis:calc(50% - 5px)}}

/* WordPress Gutenberg - rendering dei contenuti HTML delle macropagine. */
.prodotto-dettaglio-page .prodotto-contenuto .has-small-font-size{font-size:13px;line-height:1.7}
.prodotto-dettaglio-page .prodotto-contenuto img.alignleft{float:left;margin:0 14px 8px 0;max-width:90px;height:auto}
/* Gutenberg: gallerie moderne <figure> e storiche <ul>. La griglia distribuisce
   tutte le immagini sulla riga ed evita le altezze differenti di SKF. */
.prodotto-dettaglio-page .prodotto-contenuto .wp-block-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;clear:both;margin:20px 0 24px;padding:0;list-style:none;align-items:stretch}
.prodotto-dettaglio-page .prodotto-contenuto .wp-block-gallery.columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.prodotto-dettaglio-page .prodotto-contenuto .wp-block-gallery.columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.prodotto-dettaglio-page .prodotto-contenuto .wp-block-gallery.columns-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.prodotto-dettaglio-page .prodotto-contenuto .wp-block-gallery>figure.wp-block-image{display:block;margin:0;min-width:0}
.prodotto-dettaglio-page .prodotto-contenuto .wp-block-gallery figure.wp-block-image a{display:block;width:100%;height:100%}
.prodotto-dettaglio-page .prodotto-contenuto .wp-block-gallery figure.wp-block-image img{display:block;width:100%;height:auto;object-fit:contain}
.prodotto-dettaglio-page .prodotto-contenuto .wp-block-gallery.is-cropped>figure.wp-block-image{aspect-ratio:1/1;overflow:hidden}
.prodotto-dettaglio-page .prodotto-contenuto .wp-block-gallery.is-cropped>figure.wp-block-image img{height:100%!important;object-fit:cover}
.prodotto-dettaglio-page .prodotto-contenuto ul.wp-block-gallery>li{display:block;list-style:none;margin:0;min-width:0}
.prodotto-dettaglio-page .prodotto-contenuto ul.wp-block-gallery>li figure{width:100%;height:100%;margin:0}
.prodotto-dettaglio-page .prodotto-contenuto ul.wp-block-gallery>li a{display:block;width:100%;height:100%}
.prodotto-dettaglio-page .prodotto-contenuto ul.wp-block-gallery>li img{display:block;width:100%;max-width:100%;height:100%!important;object-fit:cover}
.prodotto-dettaglio-page .prodotto-contenuto ul.wp-block-gallery.is-cropped>li{aspect-ratio:1/1;overflow:hidden}
/* Le colonne editoriali Wordpress sono diverse dalla colonna laterale Razor. */
.prodotto-dettaglio-page .prodotto-contenuto .wp-block-columns{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;margin:16px 0}
.prodotto-dettaglio-page .prodotto-contenuto .wp-block-columns>.wp-block-column{flex:1 1 160px;min-width:0}
.prodotto-dettaglio-page .prodotto-contenuto .wp-block-column img{max-width:100%;height:auto}
/* I cinque video che WordPress generava dai blocchi YouTube. */
.prodotto-dettaglio-page .prodotto-contenuto .wp-block-embed{max-width:100%;margin:18px 0}
.prodotto-dettaglio-page .prodotto-contenuto .wp-block-embed__wrapper{position:relative;width:100%;aspect-ratio:16/9}
.prodotto-dettaglio-page .prodotto-contenuto .wp-block-embed__wrapper iframe{display:block;width:100%;height:100%;border:0}
@media(max-width:480px){.prodotto-dettaglio-page .prodotto-contenuto .wp-block-gallery{gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}.prodotto-dettaglio-page .prodotto-contenuto .wp-block-gallery.columns-3,.prodotto-dettaglio-page .prodotto-contenuto .wp-block-gallery.columns-4{grid-template-columns:repeat(2,minmax(0,1fr))}.prodotto-dettaglio-page .prodotto-contenuto .wp-block-columns>.wp-block-column{flex-basis:100%}}

/* WCAG 2.2 AA: il focus e' distinto dall'hover e rimane visibile. */
.prodotto-navigazione a:focus-visible{outline:3px solid #142b4f;outline-offset:3px;text-decoration:underline}
.prodotto-navigazione a.prodotto-nav-prev,.prodotto-navigazione a.prodotto-nav-next{min-height:44px}
