.csc-section{position:relative;width:100%;padding-left:15px;padding-right:15px}
.csc-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}
.csc-col{grid-column:span 12;min-width:0}
:where(.csc-col) img{display:block;max-width:100%;height:auto}
/* Sezioni bordo a bordo senza 100vw: si annullano i rientri del tema (misurati sul tema at_movic).
   Home: sotto i 992 px il contenitore sborda di 15 px per lato. CMS: sotto i 992 px e' rientrato di 10 px per lato. */
@media (max-width:991px){
.page-home.csc-host{margin-left:15px;margin-right:15px}
.page-cms.csc-host{margin-left:-10px;margin-right:-10px}
}
/* Home: bsa-pages.css (7-quater) fa risalire ogni hero sotto l'header trasparente (margin-top -190/-150/-145). Va bene solo per la prima
   sezione: un hero piu' in basso coprirebbe la sezione prima. Dalla seconda sezione in poi si torna alle misure base dell'hero. */
/* Parte dell'hero dietro l'header (stessi valori di 7-quater): la usano altezza e spazio sopra scelti nella scheda Stile (CscStyleCompiler). */
#index .bsa-hero-full{--csc-hero-overlap:190px}
@media (max-width:768px){#index .bsa-hero-full{--csc-hero-overlap:150px}}
@media (max-width:991px) and (orientation:landscape){#index .bsa-hero-full{--csc-hero-overlap:145px}}
#index .csc-section~.csc-section .bsa-hero-full{margin-top:0;min-height:55vh;min-height:55svh;--csc-hero-overlap:0px}
#index .csc-section~.csc-section .bsa-hero-full__body{padding-top:28px}
@media (min-width:768px){#index .csc-section~.csc-section .bsa-hero-full__body{padding-top:156px}}
@media (min-width:1200px){#index .csc-section~.csc-section .bsa-hero-full__body{padding-top:84px}}
@media (max-width:991px) and (orientation:landscape){
#index .csc-section~.csc-section .bsa-hero-full{min-height:50vh;min-height:50svh}
#index .csc-section~.csc-section .bsa-hero-full__body{padding-top:20px}
}
/* Nelle CMS il tema lascia 15 px di .row (anche nel footer) oltre il bordo destro e #page non ritaglia sopra i 768 px:
   scrollWidth maggiore della finestra. Si ritaglia come fa gia' il tema sulla home. */
body#index #page,body#cms #page{overflow-x:hidden}
/* Sezioni con hero o band editoriale: il componente va bordo a bordo, senza i rientri di sezione, riga e colonna. */
.csc-full{padding-left:0;padding-right:0}
.csc-full>.csc-row{display:block;max-width:none;margin:0;padding:0}
.csc-full .csc-col{padding:0}
/* Link sotto un elenco di card o di storie (come il pulsante "Tutti gli articoli" del blocco 09). Un div: il tema azzera il margine di ogni p:last-child. */
.csc-blockfoot{text-align:center;margin:32px 0 0}
/* Carosello prodotti: scorrimento orizzontale con aggancio, schede al 25 % (33,33 % sotto i 992 px, 50 % sotto i 576 px) con padding e non gap. */
.csc-pcar{position:relative}
.csc-pcar__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.csc-pcar__track::-webkit-scrollbar{display:none}
.csc-pcar__track>.js-product{flex:0 0 25%;max-width:25%;box-sizing:border-box;padding:0 8px;scroll-snap-align:start;min-width:0}
@media (max-width:991px){.csc-pcar__track>.js-product{flex-basis:33.3333%;max-width:33.3333%}}
@media (max-width:575px){.csc-pcar__track>.js-product{flex-basis:50%;max-width:50%}}
.csc-pcar__arrow{position:absolute;top:50%;z-index:2;width:44px;height:44px;margin-top:-22px;padding:0;border:1px solid var(--bsa-line-2,#D6D4D4);border-radius:50%;background:var(--bsa-white,#fff);color:var(--bsa-ink,#14151A);font-size:20px;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
.csc-pcar__arrow:hover{background:var(--bsa-cream,#f2f1ec)}
.csc-pcar__arrow[data-dir="-1"]{left:-6px}
.csc-pcar__arrow[data-dir="1"]{right:-6px}
.csc-pcar__arrow[hidden]{display:none}
.csc-pcar__empty{width:100%;margin:0;padding:24px 8px;color:var(--bsa-grey,#6B6B66);font-size:14px;text-align:center}
/* Carosello marchi: stesso scorrimento del carosello prodotti, loghi contenuti in un riquadro di altezza fissa. */
.csc-bcar .csc-pcar__track>.csc-bcar__item{flex:0 0 16.6667%;max-width:16.6667%;box-sizing:border-box;padding:12px 16px;scroll-snap-align:start;display:flex;align-items:center;justify-content:center;height:96px}
.csc-bcar .csc-bcar__item img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
@media (max-width:991px){.csc-bcar .csc-pcar__track>.csc-bcar__item{flex-basis:25%;max-width:25%}}
@media (max-width:575px){.csc-bcar .csc-pcar__track>.csc-bcar__item{flex-basis:33.3333%;max-width:33.3333%;height:80px;padding:10px}}
@media (min-width:768px){.csc-pcar__arrow[data-dir="-1"]{left:-22px}.csc-pcar__arrow[data-dir="1"]{right:-22px}}
/* Sottocategorie: card con immagine e nome, colonne per dispositivo (classi csc-subcats--d/t/pN). */
.csc-subcats__title{margin:0 0 16px}
.csc-subcats__grid{display:grid;gap:16px;grid-template-columns:repeat(var(--csc-cols,4),minmax(0,1fr))}
.csc-subcat{display:block;text-align:center;color:inherit;text-decoration:none}
.csc-subcat img{display:block;width:100%;height:auto;margin:0 0 8px}
.csc-subcat__name{display:block;font-weight:600}
.csc-subcats--d1{--csc-cols:1}.csc-subcats--d2{--csc-cols:2}.csc-subcats--d3{--csc-cols:3}.csc-subcats--d4{--csc-cols:4}.csc-subcats--d5{--csc-cols:5}.csc-subcats--d6{--csc-cols:6}
@media (max-width:991px){.csc-subcats--t1{--csc-cols:1}.csc-subcats--t2{--csc-cols:2}.csc-subcats--t3{--csc-cols:3}.csc-subcats--t4{--csc-cols:4}.csc-subcats--t5{--csc-cols:5}.csc-subcats--t6{--csc-cols:6}}
@media (max-width:767px){.csc-subcats--p1{--csc-cols:1}.csc-subcats--p2{--csc-cols:2}.csc-subcats--p3{--csc-cols:3}.csc-subcats--p4{--csc-cols:4}.csc-subcats--p5{--csc-cols:5}.csc-subcats--p6{--csc-cols:6}}
/* Video: il componente a se' (hero e band editoriale hanno il loro CSS in bsa-pages.css). Specificita' zero con :where, altrimenti batte il display:none dei dispositivi in cui il componente e' nascosto. */
:where(.csc-col)>:where(.csc-video){display:block;width:100%;max-width:100%;height:auto;background:transparent}

/* Stampa: solo gli elementi che anim.js tiene in attesa (data-csc-wait) non devono uscire vuoti. */
@media print{[data-csc-wait]{opacity:1!important;transform:none!important}}
