/* ========================================================================== EDENAY SHOP CORE — skin.css IL VESTITO MINIMO, E SI PUO' TOGLIERE: add_filter('edenay_shopc_skin', '__return_false'); Serve perche' il giorno in cui gli shortcode entrano in Divi lo Shop sia gia' presentabile, non perche' il plugin debba decidere l'aspetto dello Shop. Ogni regola qui dentro e' a specificita' bassa: una singola classe, nessun !important tranne dove serve battere un tema. Divi vince sempre. Palette Edenay: nero, bianco, arancio #FF5A17. Font: Poppins se il tema lo carica gia' (non viene caricato da qui: nessuna richiesta esterna). NIENTE POSIZIONE DELLA SIDEBAR. Dove sta il pannello sopra i 1024px lo decide la colonna Divi in cui e' stato messo lo shortcode. ========================================================================== */ /* Pannello e velo sono elencati a parte perche' all'apertura del foglio traslocano in fondo a (vedi core.css): se le variabili arrivassero solo per eredita' da .esc-filtri, fuori di li' il pannello resterebbe senza colori. */ .esc-filtri, .esc-pannello, .esc-velo, .esc-chip, .esc-ordina, .esc-griglia, .esc-pag, .esc-vuoto, .esc-conteggio, .esc-titolo{ --esc-nero:#111111; --esc-bianco:#ffffff; --esc-arancio:#FF5A17; --esc-grigio:#6b6b6b; --esc-linea:#e6e6e6; --esc-fondo:#f7f7f7; --esc-raggio:10px; --esc-font:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; font-family:var(--esc-font); color:var(--esc-nero); } /* -------------------------------------------------------------------------- TESTATA: titolo, conteggio, ordinamento -------------------------------------------------------------------------- */ .esc-titolo{ font-size:clamp(1.5rem,4vw,2.25rem); font-weight:600; letter-spacing:-.01em; margin:0 0 .25em; } .esc-conteggio{ font-size:.875rem; color:var(--esc-grigio); margin:0; } .esc-ordina{ display:flex; align-items:center; gap:.5rem; } .esc-ordina__eti{ font-size:.8125rem; color:var(--esc-grigio); } .esc-select{ font:inherit; font-size:.875rem; color:var(--esc-nero); background:var(--esc-bianco); border:1px solid var(--esc-linea); border-radius:var(--esc-raggio); padding:.5rem 2rem .5rem .75rem; cursor:pointer; } .esc-select:hover{ border-color:var(--esc-nero); } /* -------------------------------------------------------------------------- PULSANTE FILTRI (solo sotto i 1024px, core.css lo nasconde sopra) -------------------------------------------------------------------------- */ .esc-btn, .esc-applica, .esc-vuoto__cta{ font:inherit; font-size:.9375rem; font-weight:500; display:inline-flex; align-items:center; justify-content:center; gap:.375rem; padding:.625rem 1.125rem; border-radius:var(--esc-raggio); border:1px solid var(--esc-nero); background:var(--esc-nero); color:var(--esc-bianco); text-decoration:none; cursor:pointer; } .esc-btn--apri{ width:100%; } .esc-btn__n{ color:var(--esc-arancio); font-weight:600; } .esc-applica{ width:100%; } .esc-applica:hover, .esc-btn:hover, .esc-vuoto__cta:hover{ background:var(--esc-arancio); border-color:var(--esc-arancio); } /* -------------------------------------------------------------------------- PANNELLO -------------------------------------------------------------------------- */ .esc-pannello{ background:var(--esc-bianco); border-top-left-radius:16px; border-top-right-radius:16px; box-shadow:0 -8px 32px rgba(0,0,0,.16); } .esc-velo{ background:rgba(0,0,0,.45); } .esc-pannello__testa{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.25rem; border-bottom:1px solid var(--esc-linea); } .esc-pannello__titolo{ font-size:1.0625rem; font-weight:600; margin:0; } .esc-chiudi{ display:inline-flex; align-items:center; justify-content:center; background:none; border:0; color:var(--esc-nero); cursor:pointer; padding:0; } .esc-pannello__corpo{ padding:.5rem 1.25rem 1rem; } .esc-pannello__piede{ display:flex; align-items:center; gap:.75rem; padding:.875rem 1.25rem; border-top:1px solid var(--esc-linea); background:var(--esc-bianco); } .esc-azzera{ font-size:.875rem; color:var(--esc-grigio); text-decoration:underline; white-space:nowrap; display:inline-flex; align-items:center; } .esc-azzera:hover{ color:var(--esc-nero); } /* -------------------------------------------------------------------------- GRUPPI DI FILTRO -------------------------------------------------------------------------- */ .esc-gruppo{ border:0; border-bottom:1px solid var(--esc-linea); margin:0; padding:1rem 0; } .esc-gruppo:last-child{ border-bottom:0; } .esc-legend{ font-size:.75rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--esc-grigio); padding:0; margin:0 0 .625rem; display:block; } .esc-scelte{ display:flex; flex-direction:column; } .esc-scelte--radio{ flex-flow:row wrap; gap:.5rem; } .esc-scelte--radio .esc-scelta{ border:1px solid var(--esc-linea); border-radius:var(--esc-raggio); padding:0 .875rem; } .esc-scelta{ gap:.625rem; font-size:.9375rem; } .esc-scelta input{ accent-color:var(--esc-arancio); width:18px; height:18px; margin:0; } .esc-scelta__testo{ flex:1 1 auto; } .esc-scelta__n{ font-size:.8125rem; color:var(--esc-grigio); } .esc-input, .esc-num{ font:inherit; font-size:.9375rem; color:var(--esc-nero); background:var(--esc-bianco); border:1px solid var(--esc-linea); border-radius:var(--esc-raggio); padding:.5rem .75rem; width:100%; } .esc-input:focus, .esc-num:focus{ border-color:var(--esc-nero); outline:none; } /* -------------------------------------------------------------------------- PREZZO -------------------------------------------------------------------------- */ .esc-slider{ height:32px; margin:.25rem 0 .75rem; } .esc-slider::before{ content:""; position:absolute; left:0; right:0; top:14px; height:4px; border-radius:2px; background:var(--esc-linea); } .esc-slider__attivo{ top:14px; height:4px; border-radius:2px; background:var(--esc-arancio); } .esc-range{ height:32px; } .esc-range::-webkit-slider-thumb{ width:22px; height:22px; border-radius:50%; background:var(--esc-bianco); border:2px solid var(--esc-nero); box-shadow:0 1px 4px rgba(0,0,0,.2); margin-top:0; cursor:pointer; } .esc-range::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:var(--esc-bianco); border:2px solid var(--esc-nero); box-shadow:0 1px 4px rgba(0,0,0,.2); cursor:pointer; } .esc-prezzo__campi{ display:flex; align-items:center; gap:.5rem; } .esc-campo{ flex:1 1 0; display:block; } .esc-campo__eti{ display:block; font-size:.75rem; color:var(--esc-grigio); margin-bottom:.25rem; } .esc-tratto{ color:var(--esc-grigio); align-self:flex-end; padding-bottom:.625rem; } .esc-rapide{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; } .esc-rapida{ font:inherit; font-size:.8125rem; background:var(--esc-fondo); border:1px solid transparent; border-radius:999px; padding:.375rem .875rem; cursor:pointer; display:inline-flex; align-items:center; } .esc-rapida:hover{ border-color:var(--esc-nero); } .esc-rapida.is-attiva{ background:var(--esc-nero); color:var(--esc-bianco); } /* -------------------------------------------------------------------------- CHIP DEI FILTRI ATTIVI -------------------------------------------------------------------------- */ .esc-chip{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; } .esc-chip__lista{ display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; margin:0; padding:0; } .esc-chip__voce{ display:inline-flex; align-items:center; gap:.5rem; font-size:.8125rem; background:var(--esc-fondo); border:1px solid var(--esc-linea); border-radius:999px; padding:.375rem .75rem; color:var(--esc-nero); text-decoration:none; } .esc-chip__voce:hover{ border-color:var(--esc-nero); } .esc-chip__x{ font-size:1rem; line-height:1; color:var(--esc-grigio); } .esc-chip__voce:hover .esc-chip__x{ color:var(--esc-arancio); } .esc-chip__azzera{ font-size:.8125rem; color:var(--esc-grigio); text-decoration:underline; } .esc-chip__azzera:hover{ color:var(--esc-nero); } /* -------------------------------------------------------------------------- GRIGLIA E CARD Griglia fluida di ripiego: se Divi impone le sue colonne, vincono le sue. -------------------------------------------------------------------------- */ /* La specificita' qui NON e' un vezzo: WooCommerce dichiara .woocommerce ul.products li.product { float:left; width:22.05% } e Divi ci aggiunge le sue. Una singola classe perderebbe, e le card tornerebbero a galleggiare a quattro per riga anche a 360px. Si scrive quindi il selettore completo, senza ricorrere a !important. */ .woocommerce ul.products.esc-griglia, ul.products.esc-griglia{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem .875rem; } @media (min-width:768px){ .woocommerce ul.products.esc-griglia, ul.products.esc-griglia{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.75rem 1.25rem; } } @media (min-width:1280px){ .woocommerce ul.products.esc-griglia, ul.products.esc-griglia{ grid-template-columns:repeat(4,minmax(0,1fr)); } } /* WooCommerce mette due pseudo-elementi sulla lista per il vecchio clearfix dei float (::before e ::after con display:table). In una griglia CSS quei due pseudo-elementi diventano CELLE: la prima card scivola nella seconda colonna e in fondo resta un buco. Vanno spenti insieme ai float. */ .woocommerce ul.products.esc-griglia::before, .woocommerce ul.products.esc-griglia::after, ul.products.esc-griglia::before, ul.products.esc-griglia::after{ content:none; display:none; } .woocommerce ul.products.esc-griglia > li, ul.products.esc-griglia > li{ list-style:none; margin:0; padding:0; width:auto; float:none; clear:none; } .esc-card{ display:flex; flex-direction:column; gap:.625rem; text-decoration:none; color:var(--esc-nero); } /* la piastrella resta piatta e bianca: nessuna ombra, nessun bordo pesante */ .esc-card__media{ position:relative; display:block; background:var(--esc-bianco); border-radius:var(--esc-raggio); overflow:hidden; aspect-ratio:1/1; } /* stessa ragione: WooCommerce impone height:auto alle immagini del loop */ .esc-card__foto, .woocommerce ul.products li.product img.esc-card__foto{ display:block; width:100%; height:100%; margin:0; object-fit:contain; transition:transform .35s cubic-bezier(.22,.61,.36,1); } .esc-card:hover .esc-card__foto{ transform:scale(1.03); } .esc-badge{ position:absolute; top:.5rem; left:.5rem; z-index:2; font-size:.6875rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:.25rem .5rem; border-radius:4px; background:var(--esc-arancio); color:var(--esc-bianco); } .esc-card__info{ display:flex; flex-direction:column; gap:.25rem; } .esc-card__nome{ font-size:.875rem; font-weight:500; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .esc-card__prezzo{ font-size:.9375rem; font-weight:600; } .esc-card__prezzo del{ color:var(--esc-grigio); font-weight:400; margin-right:.375rem; } .esc-card__prezzo ins{ text-decoration:none; color:var(--esc-arancio); } @media (prefers-reduced-motion:reduce){ .esc-card__foto{ transition:none; } .esc-card:hover .esc-card__foto{ transform:none; } } /* -------------------------------------------------------------------------- VUOTO E PAGINAZIONE -------------------------------------------------------------------------- */ .esc-vuoto{ text-align:center; padding:3rem 1rem; } .esc-vuoto__titolo{ font-size:1.125rem; font-weight:600; margin:0 0 .375rem; } .esc-vuoto__testo{ color:var(--esc-grigio); margin:0 0 1.25rem; } .esc-pag ul{ display:flex; flex-wrap:wrap; justify-content:center; gap:.375rem; list-style:none; margin:2rem 0 0; padding:0; } .esc-pag a, .esc-pag span{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; padding:0 .625rem; font-size:.875rem; border:1px solid var(--esc-linea); border-radius:var(--esc-raggio); color:var(--esc-nero); text-decoration:none; } .esc-pag a:hover{ border-color:var(--esc-nero); } .esc-pag .current{ background:var(--esc-nero); border-color:var(--esc-nero); color:var(--esc-bianco); }