/* Theme Name: Blocksy Child (Calzature Mai dev) Description: Tema figlio di Blocksy per il sito di sviluppo Calzature Mai. Contiene solo personalizzazioni dell'ambiente di sviluppo (invio email in prova, ritocchi CSS). Non tocca il tema padre. Author: Seo Siti Marketing Template: blocksy Version: 1.6.1 Text Domain: blocksy-child-mai */ /* Ritocchi dell'ambiente di sviluppo. */ .site-branding .site-logo-container img, .ct-header .site-branding img { max-height: 130px; width: auto; } /* ------------------------------------------------------------------ Caroselli [nasa_products] (eredita' del tema Elessi). Nota: sulla home non si usa piu' questo shortcode (sostituito dal blocco prodotti WooCommerce, che Blocksy stila correttamente). Queste regole restano solo come rete di sicurezza per eventuali altre pagine che usassero ancora [nasa_products] e non fossero inizializzate. ------------------------------------------------------------------ */ .nasa-slick-slider:not(.slick-initialized) { display: block; list-style: none; margin: 0; padding: 0; } .nasa-slick-slider:not(.slick-initialized) > li { display: inline-block; vertical-align: top; width: 24%; margin: 0 0.4% 30px; box-sizing: border-box; list-style: none; } @media (max-width: 1024px) { .nasa-slick-slider:not(.slick-initialized) > li { width: 48.5%; } } @media (max-width: 767px) { .nasa-slick-slider:not(.slick-initialized) > li { width: 100%; margin: 0 0 25px; } } /* ------------------------------------------------------------------ Titolo del prodotto in rosso (richiesta del cliente). ------------------------------------------------------------------ */ .e-con .woocommerce-loop-product__title, .e-con .woocommerce-loop-product__title a { color: #e8363c !important; } /* ------------------------------------------------------------------ Sezione "Offerte del momento" della home (sfondo scuro): prezzo in bianco, leggibile sul fondo scuro. La classe .mai-offerte e' stata aggiunta al container Elementor 2f7732b. NOTA IMPORTANTE: prima queste regole valevano per TUTTI i container (.e-con), quindi il prezzo bianco finiva anche nelle sezioni chiare ("Prodotti più venduti", "Nuovi arrivi") dove risultava INVISIBILE (bianco su bianco). Ora valgono solo per la sezione offerte. ------------------------------------------------------------------ */ .mai-offerte ul.products li.product .price, .mai-offerte ul.products li.product .price ins, .mai-offerte ul.products li.product .price .amount, .mai-offerte ul.products li.product .price bdi { color: #ffffff !important; } /* prezzo originale barrato: bianco tenue, per distinguerlo dall'offerta */ .mai-offerte ul.products li.product .price del, .mai-offerte ul.products li.product .price del .amount, .mai-offerte ul.products li.product .price del bdi { color: rgba(255, 255, 255, 0.55) !important; } /* categorie sotto il titolo: bianche tenui */ .mai-offerte ul.products li.product .entry-meta, .mai-offerte ul.products li.product .entry-meta a, .mai-offerte ul.products li.product .ct-term { color: rgba(255, 255, 255, 0.6) !important; } /* ------------------------------------------------------------------ Riquadro scuro della home ("Il tocco italiano nel tuo look"): il logo del negozio viene usato come firma, quindi va reso bianco perche' il file originale e' scuro e sul fondo nero non si vedrebbe. ------------------------------------------------------------------ */ .mai-firma img { filter: brightness(0) invert(1); width: 140px; height: auto; } /* Stesso trattamento per il logo usato nel riquadro della sidebar */ .ct-sidebar img[src*="calzature-mai-logo"] { filter: brightness(0) invert(1); width: 140px; height: auto; } /* ------------------------------------------------------------------ Header (hero) delle pagine delle categorie di prodotto. Ogni reparto del catalogo ha la sua foto di sfondo, come nel vecchio sito. La classe sul (mai-cat-donna / mai-cat-uomo / mai-cat-borse) e' aggiunta dal tema figlio in base alla categoria RADICE, quindi vale anche per tutte le sottocategorie. I percorsi sono relativi a questo file CSS, cosi' funzionano sia su dev sia in produzione senza modifiche. ------------------------------------------------------------------ */ .mai-cat-donna .hero-section[data-type="type-2"], .mai-cat-uomo .hero-section[data-type="type-2"], .mai-cat-borse .hero-section[data-type="type-2"] { background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } /* Donna -> sandali */ .mai-cat-donna .hero-section[data-type="type-2"] { background-image: url("../../uploads/2019/06/header-shop.png") !important; } /* ------------------------------------------------------------------ VELO sopra la foto del hero (vale per Uomo e Borse e Accessori). Il titolo della pagina e' testo NERO: sopra la foto si legge male, quindi ci mettiamo sopra uno strato semitrasparente. Ora il velo si puo' fare di QUALSIASI colore, con due variabili: --mai-velo-colore : il colore, come "R, G, B" 255,255,255 = bianco (usato su Uomo) 120,120,120 = grigio (usato su Borse) --mai-velo-hero : quanto e' forte 0 = nessun velo (foto piena) 0.35 = velo leggero <-- valore attuale 0.7 = quasi coprente La foto di ogni categoria sta invece in --mai-hero-foto. Donna resta senza velo (la sua foto e' gia' chiara). ------------------------------------------------------------------ */ .mai-cat-uomo .hero-section[data-type="type-2"], .mai-cat-borse .hero-section[data-type="type-2"] { --mai-velo-colore: 255, 255, 255; --mai-velo-hero: 0.35; background-image: linear-gradient( rgba(var(--mai-velo-colore), var(--mai-velo-hero)), rgba(var(--mai-velo-colore), var(--mai-velo-hero)) ), var(--mai-hero-foto) !important; background-color: #ffffff !important; } /* Uomo -> sfilata di scarpe da uomo su fondo bianco (media #175810) Velo BIANCO, come prima. */ .mai-cat-uomo .hero-section[data-type="type-2"] { --mai-hero-foto: url("../../uploads/2026/09/cat-uomo.jpg"); } /* Solo per Uomo e sottocategorie: alza il testo del hero. I due elementi dentro

sono il breadcrumb (nav.ct-breadcrumbs) e il titolo (h1.page-title): entrambi vanno su di 100px, come richiesto. Per regolare: basta cambiare --mai-hero-spostamento (es. -60px per alzare meno, -140px per alzare di piu'). */ .mai-cat-uomo .hero-section[data-type="type-2"] header.entry-header .page-title, .mai-cat-uomo .hero-section[data-type="type-2"] header.entry-header .ct-breadcrumbs { --mai-hero-spostamento: -100px; position: relative; top: var(--mai-hero-spostamento); } /* Borse e Accessori -> borsa rossa (media #56901). Qui il velo e' GRIGIO SCURO, come richiesto dal cliente. Con un velo scuro il titolo nero non si leggerebbe: per questo titolo e breadcrumb diventano BIANCHI (solo su questa categoria). Per regolare il grigio: 120,120,120 -> grigio chiaro (col titolo nero) 70, 70, 70 -> grigio scuro <-- valore attuale 40, 40, 40 -> quasi nero e l'intensita' con --mai-velo-hero (0 = nessun velo, 0.7 = quasi coprente). */ .mai-cat-borse .hero-section[data-type="type-2"] { --mai-hero-foto: url("../../uploads/2019/06/bag-1410823_1920.jpg"); --mai-velo-colore: 70, 70, 70; --mai-velo-hero: 0.50; } /* Testo bianco sopra il velo scuro (titolo + breadcrumb) */ .mai-cat-borse .hero-section[data-type="type-2"] .page-title, .mai-cat-borse .hero-section[data-type="type-2"] .ct-breadcrumbs, .mai-cat-borse .hero-section[data-type="type-2"] .ct-breadcrumbs a, .mai-cat-borse .hero-section[data-type="type-2"] .ct-breadcrumbs span { color: #ffffff !important; } /* Nota: il TESTO del hero (titolo e breadcrumb) segue di proposito lo stile e le dimensioni di default di Blocksy. Le regole che forzavano font-size 34px/26px e l'alone bianco (per imitare il vecchio tema) sono state rimosse: si gestiscono da Blocksy > Personalizza. */ /* ------------------------------------------------------------------ Schede prodotto negli archivi: selettore della MISURA. Il markup lo genera il plugin nasa-core (.nasa-product-content-*), ma gli stili stavano nel tema Elessi, che qui non c'e': senza CSS il blocco appariva come testo spezzato ("MISURA 363739"). Qui lo vestiamo noi. Di base compare solo passando il mouse sulla scheda; sui dispositivi senza mouse (touch) resta sempre visibile. ------------------------------------------------------------------ */ .nasa-product-content-variable-warp { display: flex; align-items: center; width: 100%; min-height: 30px; /* spazio riservato: cosi' al passaggio del mouse la scheda non salta */ margin: 4px 0 0; } .nasa-product-content-select-wrap, .nasa-product-content-child { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; width: 100%; } /* etichetta "MISURA" */ .nasa-toggle-attr-select { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(19, 17, 23, 0.55); text-decoration: none; line-height: 1; } /* elenco delle misure disponibili */ .nasa-toggle-content-attr-select { display: flex; flex-wrap: wrap; gap: 4px; } .nasa-attr-ux-item { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 23px; padding: 0 6px; border: 1px solid rgba(19, 17, 23, 0.18); border-radius: 3px; background: #fff; color: #131117; font-size: 11px; line-height: 1; text-decoration: none; transition: border-color 0.12s ease, color 0.12s ease; } .nasa-attr-ux-item:hover { border-color: #e8363c; color: #e8363c; } /* Si vede solo al passaggio del mouse (solo dove il mouse esiste) */ @media (hover: hover) { .products .product .nasa-product-content-variable-warp { opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0.15s ease; } .products .product:hover .nasa-product-content-variable-warp, .products .product:focus-within .nasa-product-content-variable-warp { opacity: 1; visibility: visible; } } /* ================================================================== BARRA DEI FILTRI SOPRA LA GRIGLIA DEI PRODOTTI (come nel sito attuale / produzione) I widget di filtro di WooCommerce (Categorie, Marca, Colore, Misura, Prezzo) stanno nell'area "Calzature Mai - Filtri sopra la griglia" e vengono stampati dall'hook woocommerce_before_shop_loop: la barra finisce cosi' subito sotto il hero e sopra la griglia, dentro la colonna dei prodotti. La sidebar di sinistra resta con i box "Offerte" e il box scuro "Il tocco italiano". Ogni filtro e' un menu a tendina: il titolo e' cliccabile e apre il pannello con le opzioni. Oltre il quarto filtro si apre con "Altro +". ================================================================== */ .mai-shop-topbar { position: relative; z-index: 30; margin: 0 0 26px; padding: 8px 0; border-top: 1px solid #ececec; border-bottom: 1px solid #ececec; background-color: #ffffff; } /* mentre i filtri si aggiornano senza ricaricare la pagina (AJAX) */ .mai-shop-topbar.mai-caricando, ul.products.mai-caricando { opacity: 0.55; transition: opacity 0.15s ease; } .mai-shop-topbar-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; } /* ---- lato sinistro: "Filtra per:" + i filtri ---------------------- */ .mai-topbar-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; min-width: 0; } .mai-topbar-label { font-size: 15px; font-weight: 700; color: #131117; white-space: nowrap; } .mai-filter-widgets { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; } .mai-filter-widgets .ct-widget { position: relative; margin: 0; padding: 0; background: none; border: 0; } .mai-filter-widgets .ct-widget .widget-title { position: relative; margin: 0; padding: 9px 28px 9px 11px; font-size: 15px; line-height: 1.25; font-weight: 600; color: #131117; white-space: nowrap; cursor: pointer; border-radius: 4px; -webkit-user-select: none; user-select: none; transition: background-color 0.15s ease, color 0.15s ease; } .mai-filter-widgets .ct-widget .widget-title:hover { background-color: #f4f4f4; } /* freccina */ .mai-filter-widgets .ct-widget .widget-title::after { content: ""; position: absolute; top: 50%; right: 11px; width: 6px; height: 6px; margin-top: -5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.15s ease, margin-top 0.15s ease; } .mai-filter-widgets .ct-widget.mai-open > .widget-title::after { transform: rotate(-135deg); margin-top: -1px; } /* filtro attivo -> titolo rosso (stesso rosso dei titoli prodotto) */ .mai-filter-widgets .ct-widget.mai-has-active > .widget-title, .mai-filter-widgets .ct-widget:has(.chosen) > .widget-title { color: #e8363c; } /* ---- il pannello a tendina ---------------------------------------- */ /* tutto quello che non e' il titolo (la lista o il form del prezzo). Uso visibility/opacity invece di display:none perche' lo slider del prezzo deve poter calcolare la sua larghezza anche da chiuso. */ .mai-filter-widgets .ct-widget > *:not(.widget-title) { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 250px; max-width: 340px; max-height: 330px; overflow-y: auto; overscroll-behavior: contain; padding: 12px 14px; background-color: #ffffff; border: 1px solid #e6e6e6; border-radius: 6px; box-shadow: 0 10px 30px rgba(19, 17, 23, 0.13); visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease; } .mai-filter-widgets .ct-widget.mai-open > *:not(.widget-title) { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); } /* ---- contenuto dei filtri ----------------------------------------- */ .mai-filter-widgets .ct-widget ul { margin: 0; padding: 0; list-style: none; } /* la voce e il suo conteggio restano sulla stessa riga: il titolo del termine e' un link, il numero e' un accanto. */ .mai-filter-widgets .ct-widget ul li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; margin: 0; padding: 0; list-style: none; border: 0; } .mai-filter-widgets .ct-widget ul li a { padding: 4px 0; font-size: 14px; line-height: 1.35; color: #4a4a4a; text-decoration: none; } .mai-filter-widgets .ct-widget ul li a:hover { color: #e8363c; } /* le sottocategorie vanno a capo sotto il termine genitore */ .mai-filter-widgets .ct-widget ul.children { flex-basis: 100%; padding-left: 12px; } .mai-filter-widgets .ct-widget .count { font-size: 12px; color: #9a9a9a; } /* ---- filtri attivi: ogni filtro e' una "tag" con la X per toglierlo ------ */ /* Il widget "Pulisci ricerca" di WooCommerce stampa un

per ogni filtro attivo (colore, marca, misura, ...). Qui diventa una pastiglia arrotondata con una X: si capisce che cliccandola si toglie quel filtro. */ .widget_layered_nav_filters ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .widget_layered_nav_filters ul li { display: inline-flex; margin: 0; padding: 0; list-style: none; } .widget_layered_nav_filters ul li a { display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px 6px 15px; font-size: 13px; line-height: 1.25; color: #131117; background-color: #f4f4f4; border: 1px solid #e3e3e3; border-radius: 50px; text-decoration: none; transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; } /* la X, disegnata in SVG e colorata con il colore del testo */ .widget_layered_nav_filters ul li a::after { content: ""; flex: 0 0 auto; width: 12px; height: 12px; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 2.2 9.8 9.8M9.8 2.2 2.2 9.8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 2.2 9.8 9.8M9.8 2.2 2.2 9.8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .widget_layered_nav_filters ul li a:hover, .widget_layered_nav_filters ul li a:focus-visible { color: #ffffff; background-color: #e8363c; border-color: #e8363c; } /* ---- pannello tipo "megamenu" (Categorie, Marca, Colore, Misura) -------- */ /* Il pannello si allarga e le voci si dispongono su piu' colonne. Il numero di colonne lo calcola assets/mai-shop-topbar.js in base a quante voci ci sono e lo passa nella variabile --mai-colonne. */ .mai-filter-widgets .ct-widget.mai-mega > *:not(.widget-title) { min-width: 0; width: max-content; max-width: min(780px, calc(100vw - 48px)); padding: 16px 18px 14px; } .mai-filter-widgets .ct-widget.mai-mega ul { columns: var(--mai-colonne, 1); column-gap: 30px; } .mai-filter-widgets .ct-widget.mai-mega ul li { break-inside: avoid; page-break-inside: avoid; } /* il pallino accanto a ogni voce: al passaggio del mouse diventa una casella */ .mai-filter-widgets .ct-widget ul li > a { display: inline-flex; align-items: center; gap: 9px; } .mai-filter-widgets .ct-widget ul li > a::before { content: ""; flex: 0 0 auto; width: 15px; height: 15px; border: 1.5px solid #cfcfcf; border-radius: 50%; background-color: transparent; transition: border-radius 0.15s ease, border-color 0.15s ease, background-color 0.15s ease; } .mai-filter-widgets .ct-widget ul li > a:hover::before { border-radius: 3px; border-color: #e8363c; background-color: #ffffff; } /* voce attiva: WooCommerce mette .chosen sulla

, WordPress .current-cat */ .mai-filter-widgets .ct-widget ul li.chosen > a::before, .mai-filter-widgets .ct-widget ul li.current-cat > a::before { border-radius: 3px; border-color: #e8363c; background-color: #e8363c; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.4 4.7 8.9 9.8 3.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 11px 11px; } /* su schermi stretti il megamenu torna a una colonna */ @media (max-width: 1024px) { .mai-filter-widgets .ct-widget.mai-mega > *:not(.widget-title) { width: auto; max-width: min(520px, calc(100vw - 40px)); } .mai-filter-widgets .ct-widget.mai-mega ul { columns: 1; } } /* prezzo */ .mai-filter-widgets .widget_price_filter .price_slider_wrapper { padding-top: 4px; } /* Il widget "Prezzo" e' quello nativo di WooCommerce, ma il CSS dello slider (.price_slider / .ui-slider) normalmente arriva dal foglio di stile di WooCommerce, che con Blocksy non viene caricato: Blocksy non ha regole sue per lo slider. Senza queste righe lo slider resta invisibile. */ .mai-filter-widgets .widget_price_filter .price_slider { position: relative; height: 4px; margin: 10px 8px 20px; background-color: #e6e6e6; border: 0; border-radius: 3px; } .mai-filter-widgets .widget_price_filter .price_slider .ui-slider-range { position: absolute; top: 0; height: 100%; background-color: #e8363c; border: 0; border-radius: 3px; } .mai-filter-widgets .widget_price_filter .price_slider .ui-slider-handle { position: absolute; top: 50%; width: 17px; height: 17px; margin: -8.5px 0 0 -8.5px; padding: 0; background-color: #ffffff; border: 2px solid #e8363c; border-radius: 50%; box-shadow: 0 1px 4px rgba(19, 17, 23, 0.25); cursor: grab; outline: 0; transition: box-shadow 0.15s ease, border-color 0.15s ease; } .mai-filter-widgets .widget_price_filter .price_slider .ui-slider-handle:hover, .mai-filter-widgets .widget_price_filter .price_slider .ui-slider-handle:focus { border-color: #d81c22; box-shadow: 0 0 0 4px rgba(232, 54, 60, 0.15); } .mai-filter-widgets .widget_price_filter .price_slider .ui-slider-handle:active { cursor: grabbing; } .mai-filter-widgets .widget_price_filter .price_slider_amount { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .mai-filter-widgets .widget_price_filter .price_slider_amount input[type="text"] { width: 74px; padding: 5px 6px; font-size: 13px; border: 1px solid #dcdcdc; border-radius: 4px; } .mai-filter-widgets .widget_price_filter .price_slider_amount .button { padding: 6px 14px; font-size: 13px; line-height: 1.2; color: #ffffff; background-color: #e8363c; border: 0; border-radius: 4px; cursor: pointer; } .mai-filter-widgets .widget_price_filter .price_slider_amount .button:hover { background-color: #d81c22; } .mai-filter-widgets .widget_price_filter .price_label { font-size: 13px; color: #687279; } /* ---- "Altro +" / "Meno -" ----------------------------------------- */ .mai-topbar-more { font-size: 14px; font-weight: 600; color: #131117; text-decoration: underline; white-space: nowrap; } .mai-topbar-more:hover { color: #e8363c; } .mai-topbar-more[hidden] { display: none; } /* I filtri oltre il quarto restano fuori dalla barra finche' non si clicca "Altro +". NON uso display:none: cosi' lo slider del prezzo avrebbe larghezza 0 e non verrebbe disegnato. Li tengo quindi nel layout ma spostati fuori dallo schermo, e li riporto dentro quando servono. */ .mai-filter-widgets .ct-widget.mai-extra { position: absolute; top: 0; left: -10000px; visibility: hidden; } .mai-shop-topbar.mai-show-all .mai-filter-widgets .ct-widget.mai-extra { position: relative; top: auto; left: auto; visibility: visible; } /* ---- "Ordina per" a destra ---------------------------------------- */ .mai-topbar-sort { display: flex; align-items: center; gap: 8px; margin-left: auto; } .mai-sort-label { font-size: 15px; font-weight: 600; color: #131117; white-space: nowrap; } .mai-topbar-sort .woocommerce-ordering { margin: 0; } .mai-topbar-sort .woocommerce-ordering select { max-width: 220px; padding: 7px 26px 7px 10px; font-size: 14px; line-height: 1.3; color: #131117; background-color: #ffffff; border: 1px solid #dcdcdc; border-radius: 4px; cursor: pointer; } /* su desktop l'icona di ordinamento di Blocksy non serve */ .mai-topbar-sort .ct-sort-icon { display: none; } /* ---- tablet -------------------------------------------------------- */ @media (max-width: 1024px) { .mai-shop-topbar-inner { flex-direction: column; align-items: stretch; gap: 10px; } .mai-topbar-sort { margin-left: 0; justify-content: flex-end; } } /* ---- cellulare: i filtri si spostano nel pannello laterale ---------- */ /* (le regole stanno nella sezione "VERSIONE MOBILE della barra dei filtri", piu' sopra: li' c'e' il pulsante "Filtra per" e il pannello che entra da destra. Prima qui c'era una fisarmonica in linea, sostituita.) */ /* ------------------------------------------------------------------ Contatore "Preferiti" nell'header. Sta nella "Header Widget Area" (ct-header-sidebar-1), richiamata dall'elemento "Widget Area" dell'header, fra account e carrello. Cuore + numero, allineato con le altre icone dell'header. ------------------------------------------------------------------ */ [data-id="widget-area-1"] .ct-widget, [data-id="widget-area-1"] .textwidget { margin: 0; } [data-id="widget-area-1"] p { margin: 0; } .mai-preferiti { display: inline-flex; align-items: center; gap: 3px; color: rgba(19, 17, 23, 0.7); text-decoration: none; line-height: 1; transition: color 0.12s ease; } .mai-preferiti:hover { color: #e8363c; } .mai-preferiti-icon { display: block; width: 17px; height: 17px; } .mai-preferiti-count { min-width: 10px; font-size: 12px; font-weight: 600; line-height: 1; text-align: center; } /* ------------------------------------------------------------------ Pagina "Contatti" (id 56987) - griglia a due colonne con la mappa. La pagina e' ancora scritta con gli shortcode di WPBakery/Elessi e le colonne escono con le classi della vecchia griglia (row, row-fluid, nasa-col, large-6): in Blocksy quelle classi non hanno piu' CSS, per cui le colonne si impilavano una sotto l'altra a tutta larghezza e la mappa (che c'e' in produzione) spariva. Qui si rimettono su due colonne: a sinistra indirizzo/contatti/ info/social, a destra la mappa di Google con l'indirizzo del negozio. ------------------------------------------------------------------ */ .page-id-56987 .row.vc_custom_1560778631694 { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 40px; } .page-id-56987 .row.vc_custom_1560778631694 > .nasa-col.columns { flex: 1 1 0; min-width: 0; } /* la colonna con la mappa sta a destra */ .page-id-56987 .row.vc_custom_1560778631694 > .nasa-col.columns:first-child { order: 2; } /* le due sotto-colonne: Indirizzo/Contatti e Info/Social affiancate */ .page-id-56987 .row.vc_custom_1560778631694 .row-inner.row-fluid { display: flex; flex-wrap: wrap; gap: 0 30px; } .page-id-56987 .row.vc_custom_1560778631694 .row-inner.row-fluid > .nasa-col.columns { flex: 1 1 0; min-width: 0; } /* il padding-right della colonna mappa serviva quando stava a sinistra */ .page-id-56987 .vc_custom_1560779114395 { padding-right: 0 !important; } .page-id-56987 .vc_custom_1560779114395 iframe { display: block; width: 100%; height: 700px; border: 0; } @media (max-width: 999px) { .page-id-56987 .row.vc_custom_1560778631694 { flex-direction: column; gap: 45px 0; } .page-id-56987 .row.vc_custom_1560778631694 > .nasa-col.columns { width: 100%; flex-basis: auto; } .page-id-56987 .vc_custom_1560779114395 iframe { height: 420px; } } /* sui telefoni anche Indirizzo/Contatti e Info/Social vanno uno sotto l'altro: affiancati il testo si spezzava ("Indiriz-zo", "Contatt-i") */ @media (max-width: 767px) { .page-id-56987 .row.vc_custom_1560778631694 .row-inner.row-fluid { flex-direction: column; gap: 0; } .page-id-56987 .row.vc_custom_1560778631694 .row-inner.row-fluid > .nasa-col.columns { width: 100%; flex-basis: auto; } } /* ================================================================== SCHEDE PRODOTTO — cuore (wishlist), occhio (quick view) e pulsante "Scegli"/aggiungi al carrello. Cuore e occhio sono quelli dei plugin YITH, qui solo posizionati sopra l'immagine in alto a destra, come nel sito attuale. Tutto compare al passaggio del mouse sulla scheda. ================================================================== */ .products .product { position: relative; } /* --- cuore + occhio: quadratini bianchi in alto a destra --- */ .products .product .yith-wcwl-add-button, .products .product .yith-wcwl-wishlistaddedbrowse, .products .product .yith-wcwl-wishlistexistsbrowse, .products .product .yith-wcqv-button { position: absolute; right: 10px; z-index: 6; display: flex; align-items: center; justify-content: center; width: 31px; height: 31px; margin: 0; padding: 0; border: 0; border-radius: 3px; background: rgba(255, 255, 255, 0.95) !important; font-size: 0 !important; /* nasconde l'etichetta di testo */ line-height: 1; text-decoration: none; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.09); } .products .product .yith-wcwl-add-button, .products .product .yith-wcwl-wishlistaddedbrowse, .products .product .yith-wcwl-wishlistexistsbrowse { top: 10px; } .products .product .yith-wcqv-button { top: 47px; } /* icone disegnate in CSS (nessuna immagine da caricare) */ .products .product .yith-wcwl-add-button::before, .products .product .yith-wcwl-wishlistaddedbrowse::before, .products .product .yith-wcwl-wishlistexistsbrowse::before, .products .product .yith-wcqv-button::before { content: ""; display: block; width: 15px; height: 15px; background-repeat: no-repeat; background-position: center; background-size: 15px 15px; opacity: 0.75; } .products .product .yith-wcwl-add-button::before, .products .product .yith-wcwl-wishlistaddedbrowse::before, .products .product .yith-wcwl-wishlistexistsbrowse::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath fill='%23131117' d='M13.5,1.8c-1.6-1.4-4.7-1.1-6,1.4c-1.3-2.5-4.4-2.8-6-1.4c-1.8,1.5-2,4.4-0.2,6.6C2.5,10,7.5,14,7.5,14s5-4,6.3-5.6C15.6,6.2,15.3,3.4,13.5,1.8z'/%3E%3C/svg%3E"); } .products .product .yith-wcqv-button::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath fill='%23131117' d='M7.5,2.6C4,2.6,1.2,5.2,0,7.5c1.2,2.3,4,4.9,7.5,4.9s6.3-2.6,7.5-4.9C13.8,5.2,11,2.6,7.5,2.6z M7.5,10.7c-1.8,0-3.2-1.4-3.2-3.2s1.4-3.2,3.2-3.2s3.2,1.4,3.2,3.2S9.3,10.7,7.5,10.7z M7.5,5.4c-1.2,0-2.1,0.9-2.1,2.1s0.9,2.1,2.1,2.1s2.1-0.9,2.1-2.1S8.7,5.4,7.5,5.4z'/%3E%3C/svg%3E"); } .products .product .yith-wcwl-add-button:hover::before, .products .product .yith-wcwl-wishlistaddedbrowse:hover::before, .products .product .yith-wcwl-wishlistexistsbrowse:hover::before, .products .product .yith-wcqv-button:hover::before { opacity: 1; filter: invert(31%) sepia(85%) saturate(3000%) hue-rotate(340deg) brightness(95%) contrast(95%); } /* --- visibili solo al passaggio del mouse --- */ @media (hover: hover) { .products .product .yith-wcwl-add-button, .products .product .yith-wcwl-wishlistaddedbrowse, .products .product .yith-wcwl-wishlistexistsbrowse, .products .product .yith-wcqv-button, .products .product .ct-woo-card-actions { opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0.15s ease; } .products .product:hover .yith-wcwl-add-button, .products .product:hover .yith-wcwl-wishlistaddedbrowse, .products .product:hover .yith-wcwl-wishlistexistsbrowse, .products .product:hover .yith-wcqv-button, .products .product:hover .ct-woo-card-actions, .products .product:focus-within .ct-woo-card-actions { opacity: 1; visibility: visible; } } /* --- Correzioni: posizione e icone (il CSS del plugin YITH imposta "left", che vince sul nostro "right": va annullato) --- */ .products .product .yith-wcwl-add-button, .products .product .yith-wcwl-wishlistaddedbrowse, .products .product .yith-wcwl-wishlistexistsbrowse, .products .product .yith-wcqv-button { left: auto !important; right: 10px !important; } /* nasconde l'icona fornita da YITH: usiamo le nostre, cosi' cuore e occhio hanno lo stesso stile e lo stesso colore */ .products .product .yith-wcwl-add-button svg, .products .product .yith-wcwl-wishlistaddedbrowse svg, .products .product .yith-wcwl-wishlistexistsbrowse svg { display: none !important; } /* icone disegnate con una maschera: il colore si cambia con background-color */ .products .product .yith-wcwl-add-button::before, .products .product .yith-wcwl-wishlistaddedbrowse::before, .products .product .yith-wcwl-wishlistexistsbrowse::before, .products .product .yith-wcqv-button::before { content: "" !important; display: block !important; width: 15px !important; height: 15px !important; background-color: #131117 !important; background-image: none !important; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 15px 15px; mask-size: 15px 15px; } /* cuore (wishlist) */ .products .product .yith-wcwl-add-button::before, .products .product .yith-wcwl-wishlistaddedbrowse::before, .products .product .yith-wcwl-wishlistexistsbrowse::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1L12 21l7.7-7.6 1.1-1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1L12 21l7.7-7.6 1.1-1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E"); } /* occhio (quick view) */ .products .product .yith-wcqv-button::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); } /* al passaggio del mouse l'icona diventa rossa */ .products .product .yith-wcwl-add-button:hover::before, .products .product .yith-wcwl-wishlistaddedbrowse:hover::before, .products .product .yith-wcwl-wishlistexistsbrowse:hover::before, .products .product .yith-wcqv-button:hover::before { background-color: #e8363c !important; } /* --- Il CSS di YITH posiziona l'elemento ESTERNO, non quello interno: .add-to-wishlist-before_image .yith-wcwl-add-to-wishlist { top:10px; left:10px } Percio' il riquadro va messo su .yith-wcwl-add-to-wishlist. --- */ .add-to-wishlist-before_image .yith-wcwl-add-to-wishlist, .products .product .yith-wcwl-add-to-wishlist { position: absolute !important; left: auto !important; right: 10px !important; top: 10px !important; z-index: 6 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 31px !important; height: 31px !important; margin: 0 !important; padding: 0 !important; background: rgba(255, 255, 255, 0.95) !important; border-radius: 3px !important; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.09) !important; overflow: hidden !important; } /* l'elemento interno non deve avere un riquadro suo */ .products .product .yith-wcwl-add-button, .products .product .yith-wcwl-wishlistaddedbrowse, .products .product .yith-wcwl-wishlistexistsbrowse { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; background: none !important; box-shadow: none !important; } /* mostra/nascondi al passaggio del mouse: ora vale per l'elemento esterno */ @media (hover: hover) { .products .product .yith-wcwl-add-to-wishlist { opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0.15s ease; } .products .product:hover .yith-wcwl-add-to-wishlist { opacity: 1; visibility: visible; } } /* ------------------------------------------------------------------ Seconda immagine della galleria al passaggio del mouse. L'immagine la aggiunge il tema figlio (regola 12 in functions.php). ------------------------------------------------------------------ */ .products .product figure { position: relative; } .products .product figure .mai-second-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.25s ease; pointer-events: none; } @media (hover: hover) { .products .product:hover figure .mai-second-image { opacity: 1; } } /* ------------------------------------------------------------------ Box "Newsletter" della home (contenitore Elementor #d8b3606). Il modulo e' un Contact Form 7 (id 175872): ogni iscrizione viene salvata in WordPress da Flamingo (Messaggi + Rubrica, esportabile in CSV) e inviata per email a maicalzature@gmail.com. Qui si da' al modulo l'aspetto del box newsletter di Blocksy: campo email e pulsante rosso sulla stessa riga. ------------------------------------------------------------------ */ .mai-newsletter-form { max-width: 560px; margin: 0 auto; } .mai-newsletter-campi { position: relative; display: flex; align-items: stretch; gap: 10px; } /* CF7 mette un
dopo il campo: dentro il flex non serve */ .mai-newsletter-campi br { display: none; } /* La rotellina di CF7, se sta nel flusso, impedisce al campo di allargarsi: la tolgo dal flusso e la metto sul pulsante. */ .mai-newsletter-campi .wpcf7-spinner { position: absolute; top: 50%; right: 14px; margin: 0; transform: translateY(-50%); } .mai-newsletter-campi .wpcf7-form-control-wrap { /* base 0: cosi' il campo si prende tutto lo spazio che resta accanto al pulsante e il pulsante finisce a filo destro */ flex: 1 1 0%; min-width: 0; } .mai-newsletter-form input[type="email"] { width: 100%; height: 48px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 4px; background: #fff; color: #131117; font-size: 15px; } .mai-newsletter-form input[type="email"]::placeholder { color: #687279; opacity: 1; } .mai-newsletter-form input[type="submit"] { flex: 0 0 auto; height: 48px; padding: 0 26px; border: 0; border-radius: 4px; background: #e8363c; color: #fff; font-size: 15px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer; transition: background 0.15s ease; } .mai-newsletter-form input[type="submit"]:hover { background: #d81c22; } /* CF7 tiene il pulsante disattivato finche' non si spunta la privacy: deve essere chiaro che non si puo' ancora inviare */ .mai-newsletter-form input[type="submit"]:disabled, .mai-newsletter-form input[type="submit"][disabled] { background: rgba(255, 255, 255, 0.35); color: rgba(19, 17, 23, 0.55); cursor: not-allowed; } .mai-newsletter-privacy { margin-top: 12px; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, 0.85); } .mai-newsletter-privacy .wpcf7-list-item { margin: 0; } .mai-newsletter-privacy label { display: inline-flex; align-items: flex-start; gap: 7px; } .mai-newsletter-privacy input[type="checkbox"] { flex: 0 0 auto; width: 14px; height: 14px; margin: 2px 0 0; } .mai-newsletter-privacy a { color: #fff; text-decoration: underline; } /* messaggi e avvisi di CF7 dentro il box scuro */ .mai-newsletter-form .wpcf7-response-output { margin: 14px 0 0; border-color: rgba(255, 255, 255, 0.6); color: #fff; font-size: 13px; } .mai-newsletter-form .wpcf7-not-valid-tip { margin-top: 6px; color: #ffd7d8; font-size: 12px; } .mai-newsletter-form .wpcf7-spinner { background-color: #fff; opacity: 0.85; } /* sui telefoni il pulsante resta a destra del campo: si stringono leggermente entrambi invece di mandarlo a capo */ @media (max-width: 479px) { .mai-newsletter-form { max-width: none; } .mai-newsletter-form input[type="email"] { height: 44px; padding: 0 12px; font-size: 14px; } .mai-newsletter-form input[type="submit"] { height: 44px; padding: 0 16px; font-size: 13px; letter-spacing: 0.02em; } } /* ================================================================== QUICK VIEW: da finestra al centro a GABBIA LATERALE DESTRA. Il plugin YITH apre un lightbox centrato; qui lo trasformiamo in un pannello che entra da destra. Solo CSS, nessuna modifica al plugin. ================================================================== */ #yith-quick-view-modal .yith-wcqv-wrapper { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: min(460px, 94vw) !important; max-width: 100% !important; height: 100% !important; margin: 0 !important; text-align: left !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; transform: translateX(102%); transition: transform 0.3s ease; z-index: 2; } #yith-quick-view-modal.open .yith-wcqv-wrapper { transform: translateX(0); } #yith-quick-view-modal .yith-wcqv-main { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 100%; margin: 0 !important; border-radius: 0 !important; text-align: left !important; box-shadow: -6px 0 30px rgba(0, 0, 0, 0.18); } /* niente ":before" che centra verticalmente */ #yith-quick-view-modal:before { display: none !important; } /* la X di chiusura, in alto a destra della gabbia */ #yith-quick-view-close { position: absolute !important; top: 12px !important; right: 14px !important; left: auto !important; z-index: 5; } /* contenuto: una colonna sola, piu' comodo in una gabbia stretta */ #yith-quick-view-modal .yith-wcqv-wrapper .yith-quick-view-content div.images, #yith-quick-view-modal .yith-wcqv-wrapper .yith-quick-view-content div.summary { float: none !important; width: 100% !important; margin: 0 !important; } /* ------------------------------------------------------------------ HOME - carosello "marche" e "Dicono di noi" Il markup sta in due widget HTML di Elementor; il movimento e i pallini li fa assets/mai-carosello.js. Qui solo l'aspetto. ------------------------------------------------------------------ */ .mai-carosello { position: relative; } .mai-carosello-finestra { position: relative; overflow: hidden; } .mai-carosello-pista { display: flex; margin: 0; padding: 0; list-style: none; transition: transform 0.45s ease; } .mai-carosello-slide { flex: 0 0 100%; min-width: 100%; margin: 0; list-style: none; } .mai-carosello-punti { display: flex; justify-content: center; gap: 9px; margin: 22px 0 0; padding: 0; } .mai-carosello-punti[hidden] { display: none; } .mai-carosello-punto { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(19, 17, 23, 0.2); cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; } .mai-carosello-punto:hover { background: rgba(19, 17, 23, 0.4); } .mai-carosello-punto.attivo { background: #e8363c; transform: scale(1.15); } /* frecce precedente / successiva: stesso chevron del tema Blocksy, discrete (cerchio bianco, grigio del tema), rosse al passaggio del mouse */ .mai-carosello-freccia { position: absolute; top: 50%; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; margin: 0; border: 0; border-radius: 50%; background: #fff; color: #687279; box-shadow: 0 4px 14px rgba(19, 17, 23, 0.1); cursor: pointer; opacity: 0.72; transform: translateY(-50%); transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease; } .mai-carosello-freccia svg { width: 14px; height: 14px; fill: currentColor; } .mai-carosello-freccia:hover, .mai-carosello-freccia:focus-visible { background: #e8363c; color: #fff; opacity: 1; } .mai-carosello-prec { left: 6px; } .mai-carosello-succ { right: 6px; } /* sotto i 992px restano i pallini e lo scorrimento con il dito */ @media (max-width: 991px) { .mai-carosello-freccia { display: none; } } /* ---- 1) le marche ---- */ .mai-marche .mai-carosello-slide { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 26px 54px; } .mai-marche img { width: auto; height: auto; max-width: 190px; max-height: 58px; object-fit: contain; filter: grayscale(100%); opacity: 0.72; transition: filter 0.2s ease, opacity 0.2s ease; } .mai-marche img:hover { filter: none; opacity: 1; } /* ---- 2) "Dicono di noi" ---- */ .mai-recensioni-sez h2 { margin-bottom: 34px; } .mai-recensioni .mai-carosello-slide { padding: 0 4px; } .mai-recensioni .mai-carosello-slide .mai-rec-card { position: relative; max-width: 880px; /* Elementor azzera i margini delle

dentro i widget (.elementor .elementor-widget:not(...) figure { margin: 0 }), quindi per centrare la scheda serve !important. */ margin-left: auto !important; margin-right: auto !important; margin-top: 0; margin-bottom: 0; padding: 28px 36px 32px; background: #fff; border-radius: 25px; box-shadow: 0 14px 34px rgba(19, 17, 23, 0.07); } /* la codina del fumetto */ .mai-rec-card::after { content: ""; position: absolute; left: 52px; bottom: -15px; width: 30px; height: 30px; background: #fff; transform: rotate(45deg); border-radius: 0 0 6px 0; } .mai-rec-testo { margin: 0; color: #687279; font-size: 17px; font-style: italic; line-height: 1.65; } .mai-rec-stelle { display: inline-flex; gap: 3px; margin-right: 10px; vertical-align: -2px; } .mai-rec-stelle svg { width: 17px; height: 17px; fill: #e8363c; } .mai-rec-google { position: absolute; right: 26px; bottom: 20px; display: inline-flex; line-height: 0; opacity: 0.9; } .mai-rec-google svg { width: 24px; height: 24px; } .mai-rec-autore { display: flex; align-items: center; gap: 14px; max-width: 880px; margin: 30px auto 0; padding-left: 44px; } .mai-rec-avatar { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%; object-fit: cover; } .mai-rec-nome { color: #131117; font-size: 15px; font-weight: 700; line-height: 1.35; } .mai-rec-nome span { display: block; color: #687279; font-size: 13px; font-weight: 400; } @media (max-width: 767px) { .mai-marche .mai-carosello-slide { gap: 18px 26px; } .mai-marche img { max-width: 120px; max-height: 38px; } .mai-recensioni .mai-carosello-slide .mai-rec-card { padding: 22px 22px 26px; border-radius: 20px; } .mai-rec-card::after { left: 34px; } .mai-rec-testo { font-size: 15px; } .mai-rec-google { position: static; margin-top: 14px; } .mai-rec-autore { margin-top: 24px; padding-left: 12px; } .mai-rec-avatar { width: 48px; height: 48px; } } /* ------------------------------------------------------------------ HOME su cellulare: lo slider (hero) a filo con l'header. Il contenitore Elementor del hero ha 100px di padding sopra e sotto, e il suo contenitore esterno altri 120px sopra: su mobile erano 220px di spazio vuoto sopra lo slider (e 100px sotto), cioe' le "fasce bianche" viste dal cliente. Su mobile si azzerano. ------------------------------------------------------------------ */ @media (max-width: 767px) { .elementor-3072 .elementor-element-2ccca22, .elementor-3072 .elementor-element-6f4c99a { padding-top: 0; padding-bottom: 0; } /* lo slider resta a tutta larghezza, senza margini laterali */ .elementor-3072 .elementor-element-6f4c99a .rs-fullwidth-wrap, .elementor-3072 .elementor-element-6f4c99a rs-module-wrap, .elementor-3072 .elementor-element-6f4c99a rs-module { margin-left: 0 !important; margin-right: 0 !important; } } /* ------------------------------------------------------------------ VERSIONE MOBILE della barra dei filtri (sotto i 767 px). Restano due comandi affiancati — "Filtra per" e "Ordina per" — e tutti i filtri si spostano in un pannello che entra da destra (come il menu mobile), con la X di chiusura in alto a destra. Su desktop questi elementi restano nascosti. ------------------------------------------------------------------ */ .mai-filtros-abrir, .mai-filtros-drawer, .mai-filtros-fundo { display: none; } @media (max-width: 767px) { /* la barra diventa una riga con due comandi */ .mai-shop-topbar-inner { flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 10px; } .mai-topbar-filters { flex: 1 1 auto; min-width: 0; } .mai-topbar-label, .mai-topbar-more { display: none; } /* i filtri non stanno piu' nella barra: vanno nel pannello */ .mai-shop-topbar .mai-filter-widgets { display: none; } /* pulsante "Filtra per" */ .mai-filtros-abrir { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 11px 14px; font-size: 15px; font-weight: 600; line-height: 1.2; color: #131117; background-color: #f4f4f4; border: 1px solid #e3e3e3; border-radius: 4px; cursor: pointer; } .mai-filtros-abrir svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform 0.2s ease; } .mai-filtros-abrir[aria-expanded="true"] svg { transform: rotate(180deg); } /* filtro attivo: il pulsante si colora (come i titoli su desktop) */ .mai-filtros-abrir.mai-ativo { color: #e8363c; border-color: #e8363c; } /* "Ordina per" resta accanto, piu' stretto */ .mai-topbar-sort { flex: 0 0 auto; gap: 0; } .mai-sort-label { display: none; } .mai-topbar-sort .woocommerce-ordering select { max-width: 44vw; padding: 10px 26px 10px 10px; font-size: 14px; border: 1px solid #e3e3e3; border-radius: 4px; } /* --- il pannello laterale --- */ .mai-filtros-drawer { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 88vw); background-color: #ffffff; box-shadow: -10px 0 34px rgba(19, 17, 23, 0.2); transform: translateX(102%); transition: transform 0.3s ease; z-index: 100002; visibility: hidden; } .mai-filtros-drawer.aberto { transform: none; visibility: visible; } .mai-filtros-topo { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; padding: 16px 18px; border-bottom: 1px solid #ececec; } .mai-filtros-titulo { font-size: 16px; font-weight: 700; color: #131117; } .mai-filtros-fechar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; color: #131117; background: none; border: 0; cursor: pointer; } .mai-filtros-fechar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .mai-filtros-fundo { display: block; position: fixed; inset: 0; background-color: rgba(19, 17, 23, 0.45); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; z-index: 100001; } .mai-filtros-fundo.aberto { opacity: 1; visibility: visible; } body.mai-filtros-aberto { overflow: hidden; } /* --- i filtri dentro al pannello: elenco a fisarmonica --- */ .mai-filtros-drawer .mai-filter-widgets { display: block; } .mai-filtros-drawer .mai-filtros-corpo { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 4px 18px 34px; } .mai-filtros-drawer .mai-filter-widgets .ct-widget { display: block; width: 100%; border-bottom: 1px solid #f0f0f0; } .mai-filtros-drawer .mai-filter-widgets .ct-widget:last-child { border-bottom: 0; } .mai-filtros-drawer .mai-filter-widgets .ct-widget .widget-title { padding: 15px 2px; font-size: 15px; } .mai-filtros-drawer .mai-filter-widgets .ct-widget .widget-title::after { right: 4px; } /* il pannello di ogni filtro non e' piu' un menu a tendina ma una sezione che si apre sotto il titolo */ .mai-filtros-drawer .mai-filter-widgets .ct-widget > *:not(.widget-title) { position: static; display: none; width: auto; min-width: 0; max-width: none; max-height: none; overflow: visible; margin: 0; padding: 0 2px 16px; background: none; border: 0; border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; } .mai-filtros-drawer .mai-filter-widgets .ct-widget.mai-open > *:not(.widget-title) { display: block; } .mai-filtros-drawer .mai-filter-widgets .ct-widget.mai-extra { position: static; top: auto; left: auto; visibility: visible; } .mai-filtros-drawer .mai-filter-widgets ul { columns: 1; } .mai-filtros-drawer .mai-filter-widgets ul.children { padding-left: 14px; } .mai-filtros-drawer .mai-filter-widgets .price_slider_wrapper { padding-right: 6px; } } /* ------------------------------------------------------------------ MEGA MENU "Brand" nel menu MOBILE. L'accordion del tema non apre l'elenco (il link portava a una pagina vuota e il tocco non espandeva nulla): qui le marche si mostrano SEMPRE, subito sotto la voce "Brand", come elenco logo + nome. ------------------------------------------------------------------ */ @media (max-width: 1000px) { /* chiuso per default: si apre al tocco sulla voce "Brand" (la classe .mai-brand-aberto la mette il nostro JS) */ nav[data-id="mobile-menu"] li.mai-mega-brand > .sub-menu { display: none !important; position: static !important; visibility: visible !important; opacity: 1 !important; width: auto !important; min-width: 0 !important; max-height: none !important; height: auto !important; overflow: visible !important; transform: none !important; pointer-events: auto !important; } nav[data-id="mobile-menu"] li.mai-mega-brand.mai-brand-aberto > .sub-menu { display: block !important; } nav[data-id="mobile-menu"] li.mai-mega-brand.mai-brand-aberto .ct-toggle-dropdown-mobile svg { transform: rotate(180deg); } /* freccina a DESTRA del nome e col doppio del tamaño (solo menu mobile) */ nav[data-id="mobile-menu"] li.menu-item-has-children > .ct-sub-menu-parent { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 12px; } nav[data-id="mobile-menu"] .ct-toggle-dropdown-mobile { flex: 0 0 auto; margin-left: auto; } nav[data-id="mobile-menu"] .ct-toggle-dropdown-mobile svg { width: 30px; height: 30px; } nav[data-id="mobile-menu"] li.mai-mega-brand > .sub-menu > li { display: block; width: 100%; } nav[data-id="mobile-menu"] li.mai-mega-brand > .sub-menu > li > a { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 0; text-align: left; } /* il pannello del menu mobile e' scuro: i loghi (quasi tutti scuri) sparirebbero, quindi ognuno ha la sua "targhetta" bianca */ nav[data-id="mobile-menu"] li.mai-mega-brand .mai-marca-logo { max-width: 82px; max-height: 32px; flex: 0 0 auto; background-color: #ffffff; padding: 4px 7px; border-radius: 4px; opacity: 1; } } /* ------------------------------------------------------------------ MEGA MENU "Brand" nell'header. La voce "Brand" ha come sottovoci le marche: qui la tendina diventa una griglia, con il logo della marca e sotto il nome. Le marche senza logo restano con il solo nome, centrato e in evidenza. ------------------------------------------------------------------ */ /* la voce "Brand" fa da riferimento per il pannello (senza questo il pannello si posiziona rispetto all'header e finisce a sinistra) */ .ct-header nav[data-id="menu"] .menu > li.mai-mega-brand { position: relative; } .ct-header nav[data-id="menu"] .menu > li.mai-mega-brand > .sub-menu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px 12px; width: min(640px, calc(100vw - 60px)); min-width: 0; max-width: none; padding: 18px 20px; /* parte dal bordo della voce "Brand" (se non ci sta, il JS la sposta) */ left: 0 !important; right: auto !important; /* il menu dell'header ha una tendina scura: qui serve chiara, per i loghi */ background-color: #ffffff !important; border: 1px solid #ececec; border-radius: 10px; box-shadow: 0 20px 44px rgba(19, 17, 23, 0.16); } /* i link dentro la griglia: nome scuro anche se la tendina del tema e' scura */ .ct-header nav[data-id="menu"] .menu > li.mai-mega-brand > .sub-menu > li > a, .ct-header nav[data-id="menu"] .menu > li.mai-mega-brand > .sub-menu > li > a:hover { color: #131117; } .ct-header nav[data-id="menu"] .menu > li.mai-mega-brand > .sub-menu > li > a:hover { color: #e8363c; } .ct-header nav[data-id="menu"] .menu > li.mai-mega-brand > .sub-menu > li { margin: 0; padding: 0; } .ct-header nav[data-id="menu"] .menu > li.mai-mega-brand > .sub-menu > li > a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 84px; height: 100%; padding: 10px 8px; border-radius: 8px; font-size: 12px; line-height: 1.25; text-align: center; text-decoration: none; color: #131117; transition: background-color 0.15s ease, color 0.15s ease; } .ct-header nav[data-id="menu"] .menu > li.mai-mega-brand > .sub-menu > li > a:hover { background-color: #f6f6f6; color: #e8363c; } .mai-marca-logo { width: auto; height: auto; max-width: 110px; max-height: 44px; object-fit: contain; filter: grayscale(100%); opacity: 0.8; transition: filter 0.15s ease, opacity 0.15s ease; } .ct-header nav[data-id="menu"] .menu > li.mai-mega-brand > .sub-menu > li > a:hover .mai-marca-logo { filter: none; opacity: 1; } /* Igi & Co: logo con proporzione larga, gli diamo piu' spazio */ .ct-header nav[data-id="menu"] .menu > li.mai-mega-brand > .sub-menu > li > a[href*="igi-co"] .mai-marca-logo, .ct-header nav[data-id="menu"] .menu > li.mai-mega-brand > .sub-menu > li > a[href*="igi"] .mai-marca-logo { max-width: 132px; max-height: 52px; } /* Ambitious: il file e' quadrato con molto margine giallo attorno. Con object-fit: cover la casella mostra solo la fascia centrale (il nome), quindi si legge alla stessa altezza delle altre. */ .mai-marca-logo.mai-marca-ritaglio { width: 124px; height: 38px; max-width: 124px; max-height: 38px; object-fit: cover; object-position: center; } /* marche senza logo: solo il nome, piu' in evidenza */ .ct-header nav[data-id="menu"] .menu > li.mai-mega-brand > .sub-menu > li > a:not(:has(.mai-marca-logo)) { font-size: 13px; font-weight: 600; } /* su schermi stretti la griglia si stringe */ @media (max-width: 1200px) { .ct-header nav[data-id="menu"] .menu > li.mai-mega-brand > .sub-menu { grid-template-columns: repeat(4, minmax(0, 1fr)); } }