/* ============================================================================= Ssm_PdpWidth — la scheda prodotto a tutta larghezza sul desktop ----------------------------------------------------------------------------- REGOLA DI CONTENIMENTO: ogni selettore parte da `body.catalog-product-view`. Nessuna regola può raggiungere home, categorie, carrello, checkout o CMS. Il file è caricato solo dall'handle catalog_product_view. PERCHÉ NON BASTA LA CONFIGURAZIONE DEL TEMA Il tema mette sul una classe di larghezza presa da una configurazione GLOBALE (Contenuti → Configurazione → Theme Settings → General → Width: 1024px / 1200px / 1366px / Full width / Custom). Due problemi: a) è globale — cambiarla allarga tutto il sito, non solo la scheda prodotto; b) anche impostandola su "Full width" la pagina NON diventa piena, perché il tema applica DUE tetti e quell'opzione ne toglie uno solo: .page-main → 1366px (tolto da "Full width") .page-main > .columns → 1200px (NON tolto: resta 1200px) il contenuto resterebbe quindi largo 1200px come oggi. Qui si tolgono entrambi i tetti, e solo sulla scheda prodotto. 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 di quelli del tema; dove il tema usa `!important` (le larghezze delle due colonne) si risponde con `!important`. - l'header è in position:absolute e lo spazio è riservato solo da .page-header{min-height:98px}: non si tocca. ========================================================================== */ body.catalog-product-view { /* margine laterale della pagina: 16px su schermo stretto, fino a 64px su schermo largo. Senza, a tutta larghezza il testo tocca i bordi. */ --ssm-gutter: clamp(16px, 4vw, 64px); /* distanza fra colonna immagine e colonna acquisto */ --ssm-colonna: clamp(24px, 3vw, 56px); } /* ============================================================================= 1. I DUE TETTI DI LARGHEZZA ----------------------------------------------------------------------------- Le classi width1024/width1200/width1366 sono elencate una per una perché il valore arriva dalla configurazione: se domani qualcuno lo cambia da admin, la scheda prodotto resta comunque a tutta larghezza. ========================================================================== */ body.catalog-product-view .page-main, body.catalog-product-view.width1024 .page-main, body.catalog-product-view.width1200 .page-main, body.catalog-product-view.width1366 .page-main { max-width: 100%; padding-left: var(--ssm-gutter); padding-right: var(--ssm-gutter); } /* Il secondo tetto (1200px) più il padding di 15px che il tema mette sulle colonne: il margine laterale lo dà .page-main qui sopra, uno solo. */ body.catalog-product-view .page-main > .columns, body.catalog-product-view .breadcrumbs .items, body.catalog-product-view.width1366 .breadcrumbs .items { max-width: 100%; padding-left: 0; padding-right: 0; } /* Difensiva: se un domani il tema viene messo in modalità "boxed" (body.boxed), il contenitore esterno torna a stringere a 1366px e le due regole qui sopra non basterebbero. Oggi il NON ha questa classe, e finché non ce l'ha questo blocco è inerte. */ body.catalog-product-view.boxed.width1024 > .page-wrapper, body.catalog-product-view.boxed.width1200 > .page-wrapper, body.catalog-product-view.boxed.width1366 > .page-wrapper { max-width: 100%; } /* ============================================================================= 2. PROPORZIONI DELLE DUE COLONNE ----------------------------------------------------------------------------- Senza questo blocco la pagina si allarga ma il tema tiene le colonne al 50% ciascuna: su un monitor da 1920px la colonna di destra diventa larga ~900px e le righe di testo del configuratore diventano illeggibili (l'ottimo di lettura sta fra 45 e 75 caratteri per riga). Il tema impagina le due colonne con i FLOAT (.product.media{float:left}, .product-info-main{float:right}, in styles-l.css) e ne fissa le larghezze con !important. Il meccanismo NON si cambia: trasformare .column.main in flex annulla i float, la colonna immagine collassa a zero e la gallery owl — che calcola le proprie misure sulla larghezza del contenitore al momento dell'init — nasce larga 0. Si cambiano solo le proporzioni. ========================================================================== */ @media (min-width: 992px) { /* Colonna immagine: da metà pagina a poco meno di due terzi. */ body.catalog-product-view .product.media { width: calc(60% - var(--ssm-colonna)) !important; margin: 0 0 25px; } /* Colonna acquisto: il resto. */ body.catalog-product-view .product-info-main { width: 40% !important; padding: 0 0 0 var(--ssm-colonna) !important; } } /* Oltre i 1800px la colonna acquisto smette di allargarsi: una riga di testo lunga 900px non si legge e il configuratore non guadagna nulla. Lo spazio in più va tutto all'immagine. */ @media (min-width: 1800px) { body.catalog-product-view .product-info-main { width: 640px !important; } body.catalog-product-view .product.media { width: calc(100% - 640px - var(--ssm-colonna)) !important; } } /* Sotto i 992px il tema impila già le due colonne: qui si annullano soltanto le larghezze fisse, senza aggiungere nulla. Il comportamento su telefono e su tablet resta quello di oggi. */ @media (max-width: 991.98px) { body.catalog-product-view .product.media, body.catalog-product-view .product-info-main { width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } } /* ============================================================================= 3. LA FOTO NON VIENE INGRANDITA OLTRE LA SUA RISOLUZIONE ----------------------------------------------------------------------------- La foto grande della scheda è una rendition da 600×800 px (product_page_image_medium in etc/view.xml dei temi, salvo override da Theme Settings → Product Image Dimention → detail_big). In una colonna larga 900–1000px, stirarla al 100% la sgrana. Qui resta alla sua dimensione naturale, centrata nella colonna. Per farle riempire davvero la colonna più larga serve rigenerare le immagini a una risoluzione maggiore: procedura nel README, §6. ========================================================================== */ body.catalog-product-view .product.media .product.item-image { text-align: center; } body.catalog-product-view .product.media .product.item-image img { max-width: 100%; height: auto; }