/* ============================================================================= Ssm_FullWidth — 1. LARGHEZZA DELLA PAGINA, SU TUTTO IL SITO (v4) ----------------------------------------------------------------------------- Caricato dal layout `default`, quindi su OGNI pagina del front-end: catalogo, ricerca, carrello, checkout, area cliente, blog, contatti, 404. Le pagine CMS hanno un foglio a parte (`cms-page-width.css`) e sono escluse qui: v. §1.3. I TRE TETTI DI LARGHEZZA — misurati, non dedotti (2026-09-01, finestra 1920): .page-main 1366px ← mgs_theme_style_guide.css (body.width1366) .page-main > .columns 1366px ← theme_setting.css (.width1366 ...) .breadcrumbs 1280px ← styles-l.css, Luma DI SERIE, non il tema Le classi width1024/width1200/width1366 vengono dalla configurazione GLOBALE Theme Settings → General → Width (oggi `width1366`). Non sono elencate una per una: i selettori qui sotto hanno più classi delle regole del tema e vincono comunque, qualunque valore abbia quella configurazione domani. PERCHÉ NON SI USA L'OPZIONE NATIVA "Full width" DI QUELLA CONFIGURAZIONE Funziona — provata: `.fullwidth .page-main > .columns{max-width:100vw}` sta in `MGS_ThemeSettings/css/theme_setting.css` e porta a 100vw tutto il sito. Ma **non lascia margine**: il contenuto finisce attaccato ai bordi della finestra, titolo e filtri partono da x=0. Qui il margine c'è e cresce con lo spazio guadagnato. Restano fuori, e a ragione, solo le pagine che sono già piene per conto loro (§1.3). NOTE SUL TEMA (docs/DESIGN_AUDIT.md) - `mgs_theme.css` si carica DOPO i fogli aggiunti dai moduli via layout: a parità di specificità vince il tema. Tutti i selettori qui sotto sono più specifici; dove il tema usa `!important` si risponde con `!important`. - la base dei rem è 16px, non 10px. ========================================================================== */ /* ----------------------------------------------------------------------------- 1.3 CHI RESTA FUORI, E PERCHÉ - `.cms-index-index` e `.page-layout-cms-full-width`: la home è **già** a tutta larghezza (page layout `cms-full-width`, misurata 1920/1920). Darle anche il margine laterale la farebbe rientrare di 64px. - `.cms-page-view`: tutte le altre pagine CMS. Stanno in `cms-page-width.css` perché lì serve una guardia `:has(.section-builder)` per le pagine costruite con le sezioni Fbuilder — anch'esse già piene e disegnate al vivo. Tenendo quella guardia in un file separato, un browser che non conosce `:has()` perde l'allargamento delle sole pagine CMS invece che di tutto il sito. - `.checkout-index-index` NON è escluso: il checkout si allarga come il resto, ma il modulo dei suoi form resta quello del tema (v. `checkout-page.css`). -------------------------------------------------------------------------- */ body:not(.cms-index-index):not(.page-layout-cms-full-width):not(.cms-page-view) { /* Margine laterale sotto i 992px (tema mobile, o finestra desktop molto stretta): la formula della v3, che a 1366px dava i 15px del tema e cresceva solo con lo spazio guadagnato. Sotto i 992px vale 15px. */ --ssm-gutter: clamp(15px, calc((100vw - 1200px) / 12), 64px); } /* ----------------------------------------------------------------------------- 1.1 IL MARGINE DA DESKTOP: il 5% della pagina dei contenuti (v4) Vincolo del 2026-09-14: fra il bordo della finestra e la pagina dei contenuti deve esserci ALMENO il 5% della larghezza dei contenuti. Se la finestra è V e il margine per lato è V/22, i contenuti sono 20/22 di V e ogni margine è esattamente 1/20 dei contenuti, cioè il 5%. È un `100%` e non un `100vw` di proposito: il padding in percentuale si calcola sul contenitore (`.page-wrapper`, largo quanto la finestra MENO la barra di scorrimento), mentre `100vw` la include e su Windows sbaglierebbe di 17px. Lo stesso `100%` si ripete in `product-page.css` per allineare il box "aggiungi al carrello", che è `position: fixed` e per cui il 100% è di nuovo la finestra senza barra: le due misure coincidono. Conseguenza misurata, da sapere: a 1366px il margine passa da 15px a 61px per lato e i contenuti da 1321px a 1228px — la v3 aveva scelto di non rendere mai la pagina più stretta di com'era, questo vincolo lo impone. Sotto i 992px non cambia nulla (media query). `--ssm-gutter-pagina` è il punto di innesto per una singola pagina che voglia un margine PIÙ largo ("almeno" il 5%): la dichiara sul con la specificità che ha, senza dover battere il selettore qui sotto. Oggi la usa la scheda prodotto (product-page.css §2.3) per fermare i contenuti quando entrambe le colonne sono al massimo. -------------------------------------------------------------------------- */ @media (min-width: 992px) { body:not(.cms-index-index):not(.page-layout-cms-full-width):not(.cms-page-view) { --ssm-gutter: var(--ssm-gutter-pagina, calc(100% / 22)); } } /* Primo tetto. */ body:not(.cms-index-index):not(.page-layout-cms-full-width):not(.cms-page-view) .page-main { max-width: 100%; padding-left: var(--ssm-gutter); padding-right: var(--ssm-gutter); } /* Secondo tetto, più il padding di 15px che il tema mette sulle colonne: il margine laterale lo dà `.page-main` qui sopra, uno solo. */ body:not(.cms-index-index):not(.page-layout-cms-full-width):not(.cms-page-view) .page-main > .columns, body:not(.cms-index-index):not(.page-layout-cms-full-width):not(.cms-page-view) .breadcrumbs .items { max-width: 100%; padding-left: 0; padding-right: 0; } /* Terzo tetto, che riguarda solo le briciole: `.breadcrumbs` (il contenitore, non la lista dentro) è fermo a 1280px da `styles-l.css`, cioè dal Luma di serie, non dal tema. Senza questa riga le briciole restano rientrate di ~280px rispetto al resto della pagina. */ body:not(.cms-index-index):not(.page-layout-cms-full-width):not(.cms-page-view) .breadcrumbs { max-width: 100%; } /* ============================================================================= 1.4 LE COLONNE LATERALI NON CRESCONO ALL'INFINITO ----------------------------------------------------------------------------- Il tema dà a `.sidebar` `calc(25% + 15px)`: su una pagina larga 1800px sono 465px per un menù di account o per il box "Confronta Prodotti", che è quasi sempre vuoto. Oltre i 1600px si ferma a 350px e lo spazio va al contenuto. 350 e non 320: è la larghezza che quella colonna ha **oggi** a 1366px (349px misurati). Così nessuna colonna diventa più stretta di com'è adesso — che è la regola che questo modulo si è dato ovunque, ed è anche il modo di non scoprire contenuti che in una colonna più stretta non ci stanno (v. la riga `overflow-wrap` qui sotto, trovata sul blog il 2026-09-01). Vale per area cliente, lista desideri, blog, 404 — tutte le pagine a due colonne che NON sono un listato di prodotti. I listati (categoria e risultati di ricerca, `body.page-products`) hanno la loro regola in `listing-page.css`: lì la colonna è quella dei FILTRI e va al 30%, non a 320px. Entrambe le sidebar sono elencate, come fa il tema: alcune pagine usano `sidebar-main`, altre `sidebar-additional`, e restringere la colonna centrale senza toccare anche l'altra le fa **sovrapporre** (verificato il 2026-08-17 su /faq.html). ========================================================================== */ @media (min-width: 1600px) { body:not(.cms-index-index):not(.page-layout-cms-full-width):not(.cms-page-view):not(.page-products) .page-main > .columns .sidebar.sidebar-main, body:not(.cms-index-index):not(.page-layout-cms-full-width):not(.cms-page-view):not(.page-products) .page-main > .columns .sidebar.sidebar-additional { width: 350px !important; } body:not(.cms-index-index):not(.page-layout-cms-full-width):not(.cms-page-view):not(.page-products) .page-main > .columns .column.main { width: calc(100% - 350px) !important; } } /* Contenuti che non si spezzano. Finché la colonna laterale stava in mezzo alla pagina, un elemento più largo di lei sbordava nella colonna centrale e non si notava. Ora la colonna è **al bordo della finestra** e lo stesso elemento produce una barra di scorrimento orizzontale su tutta la pagina: successo sul blog, dove la nuvola di tag ha voci lunghe come "#scatoleamericane #cartoneondulato #spedizione" (367px in una colonna da 350). Con questa riga vanno a capo. */ body:not(.cms-index-index):not(.page-layout-cms-full-width):not(.cms-page-view):not(.page-products) .page-main > .columns .sidebar { overflow-wrap: break-word; word-wrap: break-word; } /* ============================================================================= 1.5 DIFENSIVA: modalità "boxed" ----------------------------------------------------------------------------- Se il tema venisse messo in boxed (`body.boxed`), il contenitore esterno tornerebbe a stringere e le regole qui sopra non basterebbero. Oggi il ha `wide`: blocco inerte. ========================================================================== */ body.boxed:not(.cms-index-index):not(.page-layout-cms-full-width) > .page-wrapper { max-width: 100%; }