/*
Theme Name: NLWC
Description: Responsive WordPress Theme based on Boostrap and Font Awesome.
Version: 1.0
Author: Collini Marino
Text Domain: Tesserefineart
Domain Path: /languages
Tags: grid-layout, blog, custom-menu, featured-images, right-sidebar
License: GNU General Public License v3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/
/* ------------------------------------------------------------------------- */
/* Google Fonts: Roboto + Montserrat */
/* ------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap');
:root{
/* Distanza contenuto dall’header (padding-top pagine) */
--tfa-header-offset: 80px;
/* Posizione top sidebar fixed (regola finché compare sotto l’header) */
--tfa-sidebar-top: 350px; /* ← regola qui per alzare/abbassare la sidebar */
/* Altezza header (aggiornata via JS nel tuo script) */
--mc-header-h: 100px;
/* Responsive header vars */
--tfa-header-bg: #ffffff;
--tfa-header-h-tablet: 84px;
--tfa-header-h-mobile: 72px;
}
html, body{
margin: 0;
padding: 0;
height: 100%;
}
body.admin-bar .navbar-fixed-top{
top: 32px;
z-index: 1000;
}
/* ------------------------------------------------------------------------- */
/* Base */
/* ------------------------------------------------------------------------- */
body{
font-size: 15px;
line-height: 22px;
font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
padding-top: var(--mc-announce-h, 28px);
}
h1, h2, h3, h4, h5, h6{ color: #222; }
a{ color: #5E68D0; text-decoration: none; }
a:focus,
a:hover{ color: #E05039; }
/* ------------------------------------------------------------------------- */
/* Header */
/* ------------------------------------------------------------------------- */
/* HEADER WRAPPER FULL WIDTH */
.nav-wrap{
width: 100%;
height: auto;
padding-top: 25px;
background: #fff;
}
/* Griglia principale dell’header: flex */
.nav-wrap .grid.no-pad-menu{
width: 100%;
max-width: 1800px;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
justify-content: space-between;
}
/* Rimuovo float vecchi */
.nav-wrap .grid.no-pad-menu > .nav-header,
.nav-wrap .grid.no-pad-menu > .nav-container,
.nav-wrap .grid.no-pad-menu > .col-20{
float: none !important;
}
/* Colonne header */
.nav-wrap .grid.no-pad-menu > .col-33:first-child{
flex: 0 0 33% !important;
display: flex !important;
justify-content: flex-start !important;
align-items: center !important;
padding-left: 24px;
}
.nav-wrap .nav-header.col-33{
flex: 0 0 33%;
display: flex;
justify-content: center;
align-items: center;
}
.nav-wrap .nav-container.col-33{
flex: 0 0 33%;
display: flex;
justify-content: center;
align-items: center;
}
.nav-wrap .grid.no-pad-menu > .col-33:last-child{
flex: 0 0 33% !important;
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
padding-right: 24px;
}
/* LOGO */
.logo{
display: flex;
justify-content: center;
align-items: center;
}
.logo img{
height: 100px;
width: auto;
display: block;
}
/* MENU */
.nav-container{
text-transform: none;
display: flex;
justify-content: center;
align-items: center;
}
.nav-container .primary{
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 30px;
align-items: center;
}
.nav-container .primary > li{
float: none !important;
display: inline-flex;
}
header.nav-wrap nav.nav-container ul.primary > li > a,
.nav-wrap .nav-container .primary > li > a{
display: inline-block;
text-decoration: none;
color: #333333;
font-size: large;
font-family: 'Jost', sans-serif !important;
}
.nav-container .primary > li > a:hover{
background: transparent !important;
color: #E05039 !important;
transition: color 0.25s ease;
}
/* Voce menu "FINE ART" — immagine inserita via PHP */
[aria-controls="tfa-mega-1171"] img{
height: 10px !important;
width: auto !important;
vertical-align: middle;
margin-top: -5px;
position: relative;
top: 0;
left: 5px;
}
/* override vecchia regola minicart */
.cart-icon{
position: static !important;
right: auto !important;
top: auto !important;
margin: 0 auto;
}
.cart-icon .cart-contents{ margin: 0 auto; }
/* Header — scorre con la pagina */
.nav-wrap.nav-fixed{
position: relative;
z-index: 9999;
background: #ffffff;
}
/* ------------------------------------------------------------------------- */
/* Announcement Bar */
/* ------------------------------------------------------------------------- */
:root{
--mc-announce-h: 28px; /* fallback reale */
}
.mc-announce__item.is-active{ opacity: 1 !important; }
.mc-announce{
width: 100%;
height: var(--mc-announce-h, 28px);
min-height: var(--mc-announce-h, 28px);
overflow: hidden;
background: #e3d0d0;
color: #333;
border-bottom: 1px solid rgba(255,255,255,.18);
position: fixed;
top: 0;
left: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 0;
}
/* Con l'admin bar di WordPress (utente loggato) la barra annunci — fixed a
top:0 e con z-index più alto dell'admin bar — copre solo i primi 28px dei
32px dell'admin bar: i 4px scuri restanti sporgevano sotto come una sottile
striscia nera. La facciamo partire sotto l'admin bar. Per i visitatori non
loggati (niente admin bar) resta a top:0. */
body.admin-bar .mc-announce{
top: 32px;
}
@media screen and (max-width: 782px){
body.admin-bar .mc-announce{
top: 46px;
}
}
/* Colonne */
.mc-announce__col{
display: flex;
align-items: center;
min-width: 0;
height: 100%;
}
.mc-announce__col--text{
flex: 1;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Jost', sans-serif;
font-size: 10px;
font-weight: bold;
}
/* Banner annunci cliccabile: link che eredita lo stile del testo,
nessun effetto all'hover (solo cursor pointer) */
.mc-announce__link,
.mc-announce__link:hover,
.mc-announce__link:focus{
color: inherit;
text-decoration: none;
cursor: pointer;
}
.mc-announce__col--social{
display: none;
flex: 0 0 40%;
max-width: 40%;
justify-content: flex-end;
gap: 18px;
}
/* Viewport annunci */
.mc-announce__viewport{
position: relative;
width: 100%;
height: 100%;
min-height: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
/* Item rotanti */
.mc-announce__item{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
z-index: 1;
white-space: nowrap;
font-family: 'Jost', sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: .02em;
text-transform: none;
padding: 0;
margin: 0;
opacity: 0;
transition: opacity .6s ease;
}
.mc-announce__item.is-active{
opacity: 1;
}
/* FAILSAFE: se JS non mette .is-active, mostra il primo */
.mc-announce__item:first-child{
opacity: 1;
}
/* Social icons */
.mc-social{
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
color: #fff;
text-decoration: none;
transition: opacity .25s ease, transform .25s ease;
}
.mc-social:hover{
opacity: .8;
transform: translateY(-2px);
}
.mc-social i{ font-size: 14px; }
/* FAILSAFE: mostra il primo SOLO se nessun item è attivo */
.mc-announce__item:first-child{
opacity: 0;
}
.mc-announce__viewport:not(:has(.mc-announce__item.is-active)) .mc-announce__item:first-child{
opacity: 1;
}
/* Header parte sotto la barra annunci */
header.nav-wrap.nav-fixed{
z-index: 9999;
}
/* ------------------------------------------------------------------------- */
/* Announcement Bar sotto header */
/* ------------------------------------------------------------------------- */
/* Barra annunci sotto header */
.mc-announce.mc-announce--below-header{
position: relative;
width: 100%;
z-index: 9998;
border-top: 1px solid rgba(255,255,255,.18);
background-color: #ffffff;
color: #333;
box-sizing: border-box;
padding: 0 24px;
min-height: 42px;
display: flex;
align-items: center;
justify-content: center;
}
.mc-below-header-grid{
width: 100%;
max-width: 1800px;
margin: 0 auto;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.mc-below-header__left{
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
justify-content: flex-start;
}
.mc-below-header__center{
display: none;
}
.mc-below-header__right{
flex: 0 0 auto;
min-width: 0;
display: flex;
align-items: center;
justify-content: flex-end;
}
.mc-announce__col--subnav{
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
color: #333333;
}
.mc-subnav{
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
}
.mc-subnav__list{
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 22px;
}
.mc-subnav__list li{
margin: 0;
padding: 0;
list-style: none;
}
.mc-subnav__list li a{
display: inline-block;
text-decoration: none;
color: inherit;
font-family: 'Jost', sans-serif;
font-size: 15px;
line-height: 1.4;
text-transform: capitalize;
letter-spacing: 0.02em;
white-space: nowrap;
font-weight: bold;
}
.mc-subnav__list li a:hover,
.mc-subnav__list li a:focus{
opacity: 0.75;
}
.mc-announce__col--socialbelow{
display: none; /* nascosto — riattivare con display:flex */
align-items: center;
justify-content: flex-end;
gap: 25px;
}
/* ------------------------------------------------------------------------- */
/* Azioni header: account + cerca + wishlist + minicart */
/* ------------------------------------------------------------------------- */
/* SINISTRA: burger + [lente + account] */
.header-left-actions{
display: flex;
align-items: center;
justify-content: flex-start;
gap: 18px;
position: relative; /* sopra eventuali layer trasparenti che bloccano il click */
z-index: 60;
}
/* Sotto-gruppo lente + account: affiancati con gap minimo */
.header-search-group{
display: flex;
align-items: center;
gap: 28px;
}
/* Lente: allineata con l'icona account */
.header-search-group .mc-search-trigger{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
width: auto !important;
line-height: 1;
color: #111;
cursor: pointer;
}
.header-search-group .mc-search-trigger svg{
width: 22px;
height: 22px;
display: block;
fill: currentColor; /* segue il color del bottone (per l'hover) */
transition: transform .25s ease;
}
/* hover: stesso effetto delle altre action icon dell'header */
.header-search-group .mc-search-trigger:hover{
color: #E05039;
}
.header-search-group .mc-search-trigger:hover svg{
transform: scale(1.12);
}
/* Account nel gruppo sinistra */
.header-search-group .header-account{
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: opacity .2s ease, transform .2s ease;
}
.header-search-group .header-account .header-account__icon{
width: 22px;
height: 22px;
display: block;
transition: filter .25s ease, transform .25s ease;
}
.header-search-group .header-account .header-account__label{
display: none;
}
.header-search-group .header-account:hover .header-account__icon{
filter: brightness(0) saturate(100%) invert(33%) sepia(72%) saturate(1731%) hue-rotate(344deg) brightness(95%) contrast(95%);
transform: scale(1.12);
}
/* CONTENITORE AZIONI HEADER */
.header-actions{
display: flex;
align-items: center !important;
justify-content: right !important;
gap: 14px;
margin: 0;
}
/* ACCOUNT */
.header-account{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
transition: color 0.25s ease;
}
/* ICONA ACCOUNT */
.header-account__icon{
width: 30px;
height: auto;
display: block;
transition: filter 0.25s ease, transform 0.25s ease;
}
.header-account__label{
display: none;
}
/* HOVER ACCOUNT */
.header-account:hover .header-account__icon{
filter: brightness(0) saturate(100%) invert(33%) sepia(72%) saturate(1731%) hue-rotate(344deg) brightness(95%) contrast(95%);
transform: scale(1.12);
}
.header-account:hover{
color: #E05039;
}
/* CART */
.header-cart{
display: flex;
align-items: center;
justify-content: center;
}
/* LINK MINICART */
.header-cart .cart-contents{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
transition: color 0.25s ease, transform 0.25s ease;
}
/* ICONA MINICART */
.header-cart .cart-contents::before{
font-size: 22px;
display: block;
transition: color 0.25s ease, transform 0.25s ease;
}
/* LABEL (nascosta) */
.header-cart__label{
display: none;
}
/* HOVER CART */
.header-cart:hover .cart-contents{
color: #E05039;
border-color: #E05039;
transform: scale(1.12);
}
.header-cart:hover .cart-contents::before{
color: #E05039;
}
/* WISHLIST (header destra) — cerchio come il carrello */
.header-wishlist{
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.header-wishlist__circle{
width: 40px;
height: 40px;
border: 1px solid #333333;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background: transparent;
transition: color .25s ease, border-color .25s ease;
}
.header-wishlist__icon{
width: 18px;
height: 18px;
fill: none;
stroke: #333333;
stroke-width: 1.5;
display: block;
transition: stroke .25s ease, fill .25s ease;
}
.header-wishlist__count{
position: absolute;
height: 20px;
width: 20px;
line-height: 22px;
border-radius: 20px;
text-align: center;
font-size: 10px;
right: -5px;
bottom: -4px;
font-weight: bold;
background: #fe316d;
color: #ffffff;
}
.header-wishlist__label{
display: none;
}
.header-wishlist:hover .header-wishlist__circle{
border-color: #E05039;
transform: scale(1.12);
}
.header-wishlist:hover .header-wishlist__icon{
stroke: #E05039;
}
/* ------------------------------------------------------------------------- */
/* Cart */
/* ------------------------------------------------------------------------- */
.wp-block-woocommerce-cart{ padding-top: 100px; }
/* ------------------------------------------------------------------------- */
/* Modules */
/* ------------------------------------------------------------------------- */
.cover{
padding: 50px 20px;
text-align: center;
position: relative;
}
.cover:before{
content: '';
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-color: #000000;
opacity: 0.5;
z-index: 0;
}
.cover h1,
.cover h2{
color: #fff;
z-index: 1;
position: relative;
}
/* ------------------------------------------------------------------------- */
/* WooCommerce */
/* ------------------------------------------------------------------------- */
.woocommerce-page article{ width: 100%; }
.woocommerce-product-gallery{ padding: 0; }
/* minicart */
.nav-wrap .grid{ position: relative; }
.minicart{
list-style-type: none;
margin: 0;
width: 270px;
max-height: 0;
overflow: hidden;
position: absolute;
z-index: 2;
top: 62px;
right: 25px;
background: transparent;
box-shadow: 0 10px 15px rgba(0,0,0,0.15);
}
.minicart__inside{ padding: 20px; position: relative; }
.minicart .widget{ margin-bottom: 0; }
.minicart .widget li{ position: relative; margin-top: 5px !important; }
.minicart .widget a{ border: none; padding: 0; color: #000; }
.minicart .widget a.button{ padding: 10px; }
.minicart .widget_shopping_cart .total{
border-top: 1px solid #3333;
margin-top: 10px;
padding-top: 20px;
}
.minicart .woocommerce-mini-cart__buttons{ margin-bottom: 0; }
.cart-icon{ color: #333333; margin-top: 0; }
.cart-icon .cart-contents{
text-align: center;
cursor: pointer;
width: 40px;
height: 40px;
border: 1px solid #333333;
border-radius: 100px;
font-size: 18px;
line-height: 40px;
position: relative;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
transition: color .25s ease, border-color .25s ease, transform .25s ease;
}
.cart-contents__number{ margin-bottom: 2px; }
.cart-icon:hover .cart-contents{
background: transparent !important;
color: #E05039 !important;
}
.cart-icon .cart-contents__number{
position: absolute;
height: 20px;
width: 20px;
line-height: 22px;
border-radius: 20px;
text-align: center;
font-size: 10px;
right: -5px;
bottom: -4px;
font-weight: bold;
background: #fe316d;
color: #ffffff;
}
.cart--open{ min-height: 50px; max-height: 600px; }
.woocommerce-mini-cart__buttons{ margin-bottom: 0; }
/* CTA sotto le cornici */
.single-product .single_variation_wrap{ margin-top: 25px; }
/* Nasconde il link "Svuota" (reset variazioni) */
.single-product .reset_variations{ display: none !important; }
/* Label variazioni */
.single-product table.variations th.label label{
font-family: 'Jost', sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: #111;
}
.single-product table.variations{
border: none !important;
border-collapse: collapse;
margin-bottom: 8px;
}
.single-product table.variations tr{
display: block;
}
.single-product table.variations th,
.single-product table.variations td{
border: none !important;
padding: 0;
background: transparent !important;
display: block;
width: 100%;
}
.single-product table.variations th.label{
padding-bottom: 0;
margin-bottom: 0;
}
/* Nascondi select originale */
.single-product table.variations select,
.single-product .reset_variations,
.single-product .single_variation_wrap .woocommerce-variation,
.single-product .tfa-frame-tiles,
.single-product table.variations td.value > *:not(.tfa-swatch-wrap){
display: none !important;
}
/* Disattiva il layout tfa-varsi-formgrid */
.single-product .tfa-varsi-formgrid{
display: block !important;
width: 100% !important;
max-width: 100% !important;
}
.single-product .tfa-varsi-options{
display: block !important;
width: 100% !important;
max-width: 100% !important;
}
.single-product .tfa-varsi-cart{
display: block !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
.single-product .variations_form{
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
.single-product .woocommerce-variation-add-to-cart{
width: 100% !important;
max-width: 100% !important;
padding-top: 16px !important;
margin-top: 16px !important;
border-top: 1px solid #ccc;
}
/* Pulsanti swatch nella scheda prodotto
Griglia invece di flex: con `minmax(max-content, 1fr)` i pulsanti restano
di larghezza uguale quando c'è spazio, ma non scendono MAI sotto la
larghezza della propria scritta. Con il flex precedente (`flex:1 1 0` +
`min-width:0`) la larghezza dipendeva solo dal contenitore (60% della
colonna): quando la colonna si stringeva il pulsante diventava più corto
del testo e, con `white-space:nowrap`, la scritta sbordava a destra —
"WHITE FRAME" usciva dal bordo e "NO FRAME" finiva coperto dal pulsante
accanto, apparendo troncato in "NO FRA".
`grid-auto-flow: column` li tiene su una riga sola con qualsiasi numero
di opzioni. */
.single-product .tfa-swatch-wrap{
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(max-content, 1fr);
gap: 4px;
width: 60%;
margin-top: -8px;
}
.single-product .tfa-swatch-btn{
display: inline-block;
padding: 10px 16px;
white-space: nowrap;
min-width: max-content; /* rete di sicurezza: mai più stretto della scritta */
border: 1px solid #333;
background: #fff;
color: #333;
font-family: 'Jost', sans-serif;
font-size: 10px;
font-weight: 400;
letter-spacing: .02em;
text-transform: uppercase;
cursor: pointer;
text-align: center;
transition: background .2s ease, color .2s ease;
}
.single-product .tfa-swatch-btn:hover{
background: #f5f5f5;
}
.single-product .tfa-swatch-btn.is-active{
background: #333;
color: #fff;
border-color: #333;
}
/* Prezzo variazione sotto — nascosto (aggiorniamo quello in alto) */
.single-product .single_variation .woocommerce-variation-price{
display: none !important;
}
/* HOME – riduce larghezza griglia prodotti */
.home-products{
max-width: 1800px;
margin: 0 auto;
}
/* ===================================================================== */
/* SINGLE PRODUCT GRID */
/* ===================================================================== */
.single-product div.product .woocommerce-product-gallery,
.single-product div.product .summary{
float: none !important;
width: auto !important;
}
.tfa-product__grid{
max-width: 1240px;
margin: 0 auto;
padding: var(--tfa-header-offset) 40px 0;
display: grid;
grid-template-columns: minmax(0, 1fr) 420px;
gap: 48px;
align-items: start;
}
.tfa-product__media,
.tfa-product__summary{ min-width: 0; }
/* sticky rimosso: causava sovrapposizione con il footer */
.tfa-product__summary .product_title{
margin: 0 0 12px;
text-transform: uppercase;
letter-spacing: .06em;
}
.tfa-product__summary .price{
margin: 8px 0 18px;
font-size: 18px;
}
/* ===================================================================== */
/* Accordion */
/* ===================================================================== */
/* Descrizione lunga prodotto */
.tfa-product__long-description{
margin: 24px 0;
font-size: 30px;
font-weight: 700;
line-height: 1.7;
color: #333;
}
.tfa-product__long-description p{ margin: 0 0 12px; }
.tfa-product__long-description p:last-child{ margin-bottom: 0; }
/* Descrizione aggiuntiva (extra Quick View) */
.tfa-product__extra-description{
margin: 16px 0;
font-family: 'Jost', sans-serif;
font-size: 14px;
line-height: 1.6;
color: #555;
}
.tfa-accordion{
margin-top: 36px;
border-top: 1px solid #e7e7e7;
}
.tfa-accordion__item{ border-bottom: 1px solid #e7e7e7; }
.tfa-accordion__trigger{
width: 100%;
text-align: left;
padding: 18px 0;
background: transparent;
border: 0;
font-size: 14px;
letter-spacing: .06em;
text-transform: uppercase;
cursor: pointer;
}
.tfa-accordion__panel{
display: none;
padding: 0 0 18px;
}
.tfa-accordion__item.is-open .tfa-accordion__panel{ display: block; }
/* ------------------------------------------------------------------------- */
/* Index */
/* ------------------------------------------------------------------------- */
.home-title{
position: absolute;
top: -9999px;
color: #fff;
font-size: 12px;
}
/* ------------------------------------------------------------------------- */
/* Sidebar */
/* ------------------------------------------------------------------------- */
.widget_search{ margin-bottom: 50px; }
/* ------------------------------------------------------------------------- */
/* Newsletter */
/* ------------------------------------------------------------------------- */
.newsletter-banner{
margin-top: 250px;
display: flex;
font-weight: 300;
font-size: 20px;
}
.newsletter-banner strong{
width: 30%;
padding: 10px;
background: transparent;
font-weight: 100;
border-right: 3px solid #ffffff;
box-shadow: 0 0 40px rgba(0,0,0,0.8);
}
.newsletter-banner em{
width: 30%;
padding: 10px;
background: transparent;
font-weight: 100;
font-style: normal;
text-align: center;
box-shadow: 0 0 40px rgba(0,0,0,0.8);
}
.newsletter-banner a{
width: 10%;
background: #497e60;
padding: 10px;
text-align: center;
color: #ffffff;
}
.newsletter-banner a:hover{ color: #E05039; }
/* ------------------------------------------------------------------------- */
/* Footer */
/* ------------------------------------------------------------------------- */
/* FIX: alux ".col" usa il selettore generico [class*='col'] che applica
padding:0 20px e position:relative a QUALSIASI elemento con "col" nella
classe, body incluso (es. sulle
categorie collection/color). I 20px laterali creavano i bordi bianchi ai
lati del footer; position:relative rendeva visibile il margin collassato
sotto al footer. Annulliamo entrambi sul body. */
body[class*="col"]{
padding-left: 0;
padding-right: 0;
position: static;
}
.footer{
padding-top: 30px;
padding-bottom: 0;
margin-bottom: 0;
background-color: #333;
}
.footer .grid{
margin-bottom: 0;
}
/* l'ultimo figlio del footer (.footer__bottom, un ) eredita
margin-bottom:20px da alux → fuoriesce dal footer (margin collapsing)
creando la striscia bianca sotto. Azzeriamo. */
.footer > *:last-child,
.footer__bottom{
margin-bottom: 0;
}
.footer__logo{ background: transparent; width: 100px; height: auto; }
.pagamenti__logo{ width: 250px; height: auto; margin-left: 25px; }
.speditoda__logo{ margin-left: 25px; width: 200px; height: auto; }
.info{
color: #ffffff;
font-weight: 400;
margin-left: 20px;
font-size: 22px;
text-transform: uppercase;
}
.footer_label{
color: #ffffff;
font-weight: 400;
padding-bottom: 15px;
font-size: 22px;
text-transform: uppercase;
}
.pagamenti{
color: #ffffff;
font-weight: 400;
margin-left: 30px;
font-size: 22px;
text-transform: uppercase;
}
.speditoda{
color: #ffffff;
font-weight: 400;
margin-left: 30px;
font-size: 22px;
text-transform: uppercase;
padding-top: 40px;
}
.menu{ list-style-type: none; padding: 10px; }
.menu li{ display: block; font-size: 15px; }
.menu li a{ padding: 10px; color: #ffffff; font-weight: 300; }
.footer__socials{ margin-bottom: 20px; }
.footer__social{ font-size: 27px; color: #ffffff; transition: color 0.3s ease; }
.footer__social:hover i{ color: #5E68D0; }
.footer__mail a{
margin-top: 100px;
color: #ffffff;
font-size: 15px;
font-weight: 300;
transition: color 0.3s ease;
}
.footer__mail:hover a{ color: #5E68D0; }
.footer__bottom{
background-color: #333;
color: #ffffff;
text-align: center;
padding: 10px;
}
/* ------------------------------------------------------------------------- */
/* WordPress Default Styles */
/* ------------------------------------------------------------------------- */
.pagination{
margin: 40px 0;
padding: 0;
width: 100%;
}
.pagination span,
.pagination a{
float: left;
margin: 0 10px 10px 0;
padding: 14px 19px;
border: 1px solid #ddd;
}
.wp-block-cover{ margin-top: 100px; }
/* Pagina prodotto WooCommerce */
.woocommerce div.product div.images img{
height: 600px;
width: auto;
}
/* Gallery */
.gallery{
float: left;
margin: 20px 0;
width: 103.55%;
}
.gallery-item{ float: left; width: 33.333333%; text-align: center; }
.gallery img{ margin: 0 10% 0 0; width: 90%; height: auto; border: none !important; }
.gallery-caption{ width: 90%; margin: 10px 0 0; }
/* Image */
.alignleft{ float: left; margin-right: 20px; margin-bottom: 10px; max-width: 97%; height: auto; }
.alignright{ float: right; margin-bottom: 10px; margin-left: 20px; max-width: 97%; height: auto; }
.aligncenter{ display: block; margin: 0 auto; max-width: 97%; height: auto; }
.alignnone{ max-width: 97%; height: auto; }
.alignfull{
margin-left: calc(-100vw / 2 + 100% / 2);
margin-right: calc(-100vw / 2 + 100% / 2);
max-width: 100vw;
width: 100vw;
}
.img-res{ width: 100%; height: auto; }
/* video responsive */
.video-container{
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.video-container iframe{
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
}
/* Table */
table{ border-collapse: collapse; margin: 40px 0; width: 100%; }
table, th, td{
border: 1px solid #ddd;
padding: 10px;
font-size: 18px;
text-transform: capitalize;
}
table tr:first-child td{
font-weight: 900;
text-transform: uppercase;
background: #eee;
padding: 12px 8px;
}
/* Image Caption */
.wp-caption{
margin-top: 1.5rem;
margin-bottom: 0;
padding: 10px;
max-width: 97%;
border: 1px solid #ddd;
text-align: center;
}
.wp-caption img{ margin: 0; padding: 0; width: 100% !important; height: auto; border: 0 none; }
.wp-caption p.wp-caption-text{ margin: 0; padding: 8px; font-size: 1em; line-height: 17px; }
/* Sticky */
.sticky{ border-right: 3px solid #eee; border-bottom: 3px solid #ddd; }
/* Search */
.search-form{ background: #eee; }
.search-form input[type=text]{ width: 80%; color: #333; }
.search-form button{ float: right; border: none; background: none; padding: 11px; }
/* Contact Form 7 */
.wpcf7 label{ width: 100%; }
/* Comments */
.comment-form-author,
.comment-form-email,
.comment-form-url{
float: left;
margin-top: 20px;
margin-right: 3%;
width: 30.3333333%;
}
.comment-form-author input,
.comment-form-email input,
.comment-form-url input{ width: 100%; }
ol.commentlist{ margin: 0 0 1em; padding: 0; list-style: none; text-indent: 0; }
ol.commentlist li.comment{ padding: 1em; border-top: 1px solid #eee; }
ol.commentlist li.comment div.vcard cite.fn{ text-transform: uppercase; font-size: 14px; }
ol.commentlist li.comment div.vcard img.avatar{ float: left; margin: 6px 1em 1em 0; border-radius: 50px; }
ol.commentlist li.comment div.comment-meta{ font-size: 12px; }
ol.commentlist li.comment ul{ margin: 0 0 1em 2em; }
ol.commentlist li.comment div.reply{ margin-left: 80px; font-size: 11px; }
ol.commentlist li.comment ul.children{ margin: 1em 0 0; list-style: none; text-indent: 0; }
ol.commentlist li.comment ul.children li.depth-2,
ol.commentlist li.comment ul.children li.depth-3,
ol.commentlist li.comment ul.children li.depth-4{
margin: 0 0 .25em .25em;
border-left: 1px solid #eee;
}
ol.commentlist li.comment li.even{ background: #fff; }
ol.commentlist li.comment img{ max-width: 97%; }
input[type=text],
input[type=email]{
width: 98%;
margin-right: 10px;
padding: 10px;
border: none;
background: #eee;
-webkit-appearance: none;
border-radius: 0;
font-size: 14px;
font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
textarea{
padding: 10px;
width: 98%;
border: none;
background: #eee;
-webkit-appearance: none;
border-radius: 0;
font-size: 14px;
font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
input[type=submit]{
margin-top: 10px;
padding: 15px 20px;
color: #fff;
text-transform: uppercase;
background: #333;
border: none;
font-size: 14px;
font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
#comments{ width: 100%; }
/* Calendar Widget */
#wp-calendar{ width: 100%; }
#wp-calendar a{ padding: 0; border: none; }
#wp-calendar caption,
.screen-reader-text{
padding-bottom: 10px;
color: #000;
text-align: left;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
}
#wp-calendar thead{ font-size: 10px; }
#wp-calendar thead th{ padding-bottom: 10px; }
#wp-calendar tbody{ color: #aaa; }
#wp-calendar tbody td{
padding: 8px;
border: 1px solid #fff;
background: #f5f5f5;
text-align: center;
}
#wp-calendar tbody td:hover{ background: #fff; }
#wp-calendar tbody .pad{ background: none; }
#wp-calendar tfoot #next{ text-align: right; text-transform: uppercase; font-size: 10px; }
#wp-calendar tfoot #prev{ padding-top: 10px; text-transform: uppercase; font-size: 10px; }
/* ------------------------------------------------------------------------- */
/* Roboto utility classes */
/* ------------------------------------------------------------------------- */
.roboto-100{ font-weight: 100; }
.roboto-300{ font-weight: 300; }
.roboto-400{ font-weight: 400; }
.roboto-500{ font-weight: 500; }
.roboto-700{ font-weight: 700; }
.roboto-900{ font-weight: 900; }
.roboto-100-italic{ font-weight: 100; font-style: italic; }
.roboto-300-italic{ font-weight: 300; font-style: italic; }
.roboto-400-italic{ font-weight: 400; font-style: italic; }
.roboto-500-italic{ font-weight: 500; font-style: italic; }
.roboto-700-italic{ font-weight: 700; font-style: italic; }
.roboto-900-italic{ font-weight: 900; font-style: italic; }
/* ------------------------------------------------------------------------- */
/* Separator */
/* ------------------------------------------------------------------------- */
.wp-block-separator{
width: 2210px;
height: 4px;
background-color: #ffffff;
margin: 20px;
margin-right: auto;
}
/* NB: "1cqb" è una unità nuova; se vuoi massimo supporto, meglio px */
hr{ border-top: 1px solid #333; }
/* ------------------------------------------------------------------------- */
/* Pulsante underline */
/* ------------------------------------------------------------------------- */
.btn-animato{
position: relative;
display: inline-block;
padding: 12px 28px;
font-size: 16px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #ffffff;
background-color: transparent;
text-decoration: none;
border: none;
cursor: pointer;
transition: background-color 0.35s ease, color 0.35s ease;
overflow: hidden;
}
.btn-animato::after{
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: 0%;
height: 2px;
background: #ffffff;
transform: translateX(-50%);
transition: width 0.35s ease;
}
.btn-animato:hover{
background-color: transparent;
color: #ffffff;
}
.btn-animato:hover::after{ width: 80%; }
/* ------------------------------------------------------------------------- */
/* Pulsanti Home Page */
/* ------------------------------------------------------------------------- */
.wp-block-button.home-button .wp-block-button__link{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 18px;
border-radius: 0;
font-family: 'Nunito', sans-serif;
font-size: 10px;
line-height: 20px;
font-weight: 400;
letter-spacing: 3px;
text-transform: uppercase;
background: #ae8687; /* stesso sfondo del pulsante quick view */
border: none;
color: #ffffff;
text-decoration: none !important;
cursor: pointer;
transition: all .2s ease;
}
.wp-block-button.home-button .wp-block-button__link:hover{
background: #333 !important; /* stesso hover del pulsante quick view */
}
.wp-block-button.home-button .wp-block-button__link:active{
transform: translateY(0);
opacity: .9;
}
.wp-block-button.home-button .wp-block-button__link:focus,
.wp-block-button.home-button .wp-block-button__link:focus-visible{
outline: none;
box-shadow: 0 0 0 3px rgba(0,0,0,.12);
}
/* ------------------------------------------------------------------------- */
/* Filtri HOME / SHOP */
/* ------------------------------------------------------------------------- */
.home-filters{
display: none;
gap: 100px;
justify-content: center;
margin: -40px auto 20px;
padding-bottom: 30px;
padding-top: 10px;
}
.home-filter{
display: flex;
flex-direction: column;
min-width: 240px;
position: relative;
}
.home-filter label{
display: block;
margin-bottom: 8px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.08em;
font-family: roboto-400-italic;
}
.home-filter select{
border: none;
border-bottom: 1px solid #222;
background: transparent;
padding: 10px 0;
padding-right: 28px;
font-size: 14px;
text-transform: uppercase;
color: #222;
letter-spacing: 0.05em;
outline: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url('img/arrow.png');
background-repeat: no-repeat;
background-position: right 0 center;
background-size: 10px;
}
.home-filter select:hover{ border-bottom-color: #000; }
.home-filter select:focus{ border-bottom: 2px solid #000; }
.home-filter select:focus-visible{ outline: none; box-shadow: none; }
.home-filter select option{
background: #ffffff;
color: #222;
font-family: inherit;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Custom dropdown */
.has-custom-select .home-filter select{ display: none; }
.custom-select{
position: relative;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #222;
cursor: pointer;
}
.custom-select__selected{
border-bottom: 1px solid #222;
padding: 10px 0;
padding-right: 24px;
position: relative;
}
.custom-select__selected::after{
content: "";
position: absolute;
right: 0;
top: 50%;
width: 8px;
height: 8px;
border-right: 1px solid #222;
border-bottom: 1px solid #222;
transform: translateY(-50%) rotate(45deg);
transition: transform 0.2s ease;
}
.custom-select--open .custom-select__selected::after{
transform: translateY(-50%) rotate(-135deg);
}
.custom-select__list{
position: absolute;
left: 0;
right: 0;
top: calc(100% + 6px);
background: #ffffff;
border: 1px solid #ddd;
border-radius: 0;
box-shadow: 0 8px 18px rgba(0,0,0,0.08);
max-height: 260px;
overflow-y: auto;
z-index: 20;
padding: 6px 0;
display: none;
}
.custom-select--open .custom-select__list{ display: block; }
.custom-select__option{
padding: 8px 4px;
margin: 0 10px;
border-bottom: 1px solid rgba(0,0,0,0.04);
font-size: 13px;
}
.custom-select__option:last-child{ border-bottom: none; }
.custom-select__option:hover{ background: #f5f5f5; }
.custom-select__option.is-selected{ background: #eee; font-weight: 500; }
/* ------------------------------------------------------------------------- */
/* Helper Gutenberg */
/* ------------------------------------------------------------------------- */
.separatore__editoriale{
border: none !important;
height: 0.5px !important;
margin: 4rem auto !important;
background-color: #333 !important;
}
.textalign_justify{ text-align: justify !important; }
.padding__top{ padding-top: 150px !important; }
.padding__top__250{ padding-top: 250px !important; }
.padding__top__100{ padding-top: 100px !important; }
.padding__top__80{ padding-top: 80px !important; }
.padding__bt_80{ padding-bottom: 80px !important; }
.paddingnegativo__top{padding-top: -100px !important; }
.italic{ font-style: italic !important; font-synthesis: style !important; }
.lineheight{ line-height: 25px !important; }
.margin__top{ margin-top: 35px; }
.wp-block-cover.no-overlay::before{ content: none !important; }
.wp-block-cover.no-overlay .wp-block-cover__background,
.wp-block-cover.no-overlay .wp-block-cover__gradient-background{
opacity: 0 !important;
background-image: none !important;
background-color: transparent !important;
display: block !important;
}
.editor-styles-wrapper .wp-block-cover.no-overlay::before{ content: none !important; }
/* ------------------------------------------------------------------------- */
/* Zoom / PhotoSwipe */
/* ------------------------------------------------------------------------- */
.pswp{ z-index: 999999 !important; }
.site-header,
#masthead,
header.site-header{ z-index: 1000; }
.pswp--open ~ .site-header,
.pswp--open ~ #masthead,
.pswp--open ~ header,
.pswp--open ~ .header{
display: none !important;
}
.pswp__caption,
.pswp__caption__center{ display: none !important; }
/* ------------------------------------------------------------------------- */
/* Star Rating */
/* ------------------------------------------------------------------------- */
.p-card__header{
padding: 18px;
}
.p-card__header-row{
display: flex;
align-items: center;
gap: 12px;
}
.p-card__description{
font-size: 16px;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: .06em;
flex: 1;
min-width: 0;
}
.p-card__header-row .star-rating{
margin-left: auto;
flex: 0 0 auto;
}
/* ------------------------------------------------------------------------- */
/* Featured Home (gabbia 1800 + griglia) */
/* ------------------------------------------------------------------------- */
.home .tfa-featured__inner{
max-width: 1000px;
margin: 0 auto 60px;
padding: 0 60px;
}
.home .tfa-featured__header{
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 20px;
margin-bottom: 22px;
}
.home .tfa-featured__title{
margin: 0;
text-transform: uppercase;
letter-spacing: .06em;
}
.home .tfa-featured__inner ul.products{
margin: 0;
padding: 0;
width: 100%;
list-style: none;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
}
/* ------------------------------------------------------------------------- */
/* Fade animations */
/* ------------------------------------------------------------------------- */
.fade-in-down{
opacity: 0;
transform: translateY(-30px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in-down.is-visible{
opacity: 1;
transform: translateY(0);
}
.fade-in-up{
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
will-change: opacity, transform;
}
.fade-in-up.is-visible{
opacity: 1;
transform: translateY(0);
}
.delay-100{ transition-delay: 0.1s; }
.delay-300{ transition-delay: 0.3s; }
.delay-500{ transition-delay: 0.5s; }
.delay-800{ transition-delay: 0.8s; }
.delay-1000{ transition-delay: 1s; }
.fade-in{
opacity: 0;
transition: opacity 0.8s ease-in-out;
will-change: opacity;
}
.fade-in.is-visible{ opacity: 1; }
.wp-block-cover .wp-block-separator,
.wp-block-cover hr{
margin: 10px auto 14px !important;
}
.rotating-categories{
width: 100% !important;
overflow: hidden !important;
}
.rotating-category{
text-align: center !important;
margin-right: 0 !important;
}
.rotating-category__title{
font-size: clamp(28px, 10vw, 54px) !important;
line-height: 0.95 !important;
letter-spacing: 0.06em !important;
word-break: normal !important;
overflow-wrap: normal !important;
hyphens: none !important;
}
/* evita scroll orizzontale */
.wp-block-separator{
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ------------------------------------------------------------------------- */
/* Featured home full-bleed */
/* ------------------------------------------------------------------------- */
.home .tfa-featured{
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
background: #fff !important;
min-height: 120px !important;
position: relative !important;
z-index: 50 !important;
}
.home .tfa-featured__inner{
max-width: 1800px;
margin: 0 auto;
padding: 0;
}
.home .tfa-featured__inner ul.products{
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
width: 100% !important;
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 24px !important;
}
.home .tfa-featured__inner ul.products > li.product{
float: none !important;
width: auto !important;
margin: 0 !important;
}
/* Solo home: 4 colonne per i prodotti featured */
.home .woocommerce ul.products,
.home .woocommerce .products{
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
/* ------------------------------------------------------------------------- */
/* Griglia categorie */
/* ------------------------------------------------------------------------- */
.wc-cat-grid-wrapper{ --wc-gap: 16px; }
.wc-cat-grid{
display: grid;
grid-template-columns: repeat(var(--wc-cat-cols, 4), minmax(0, 1fr));
gap: 20px;
}
.wc-cat-card{
display: block;
text-decoration: none;
border: 1px solid rgba(0,0,0,.08);
border-radius: 100%;
height: 240px;
width: 240px;
overflow: hidden;
background: #fff;
transition: transform .15s ease, box-shadow .15s ease;
}
.wc-cat-card:hover{
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0,0,0,.10);
}
.wc-cat-card__media{
aspect-ratio: 2/3;
width: 100%;
overflow: hidden;
background: rgba(0,0,0,.04);
}
.wc-cat-card__img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.wc-cat-card__placeholder{
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(0,0,0,.04), rgba(0,0,0,.08));
}
.wc-cat-card__body{ padding: 12px 14px 14px; }
.wc-cat-card__title{
display: none;
margin: 0;
font-size: 16px;
line-height: 1.25;
color: inherit;
}
.wc-cat-card__count{
font-weight: 400;
opacity: .7;
margin-left: 6px;
}
/* ------------------------------------------------------------------------- */
/* Griglia categorie home page */
/* ------------------------------------------------------------------------- */
:root{
--books-card-size: 360px; /* <-- CAMBIA QUI: 260 / 300 / 360 / 420 */
--books-gap: 10px;
}
/* container */
.books-grid{
width: 100%;
max-width: none; /* non limitare il container */
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}
/* il blocco che contiene Columns diventa una griglia */
.books-grid .wp-block-columns{
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important; /* ✅ 4 colonne fluide */
gap: var(--books-gap) !important;
justify-content: center !important;
margin: 0 !important;
}
/* le colonne Gutenberg diventano "contenitori" normali */
.books-grid .wp-block-columns > .wp-block-column{
width: auto !important;
max-width: none !important;
min-width: 0 !important;
flex: unset !important;
margin: 0 !important;
padding: 0 !important;
}
/* ✅ forza la cover a riempire la colonna e diventare quadrata */
.books-grid .wp-block-cover{
width: 100% !important;
aspect-ratio: 1 / 1 !important;
min-height: 0 !important; /* disinnesca min-height del blocco */
overflow: hidden !important;
}
/* immagine reale del Cover (Gutenberg usa questo, non
) */
}
.tfa-login__switch a,
.tfa-login__switch a:visited{
font-family: 'Nunito', sans-serif;
font-weight: 400;
font-size: 14px;
letter-spacing: .18em;
text-transform: uppercase;
color: #111;
text-decoration: none;
}
.tfa-login__switch a:hover{ text-decoration: underline; }
.tfa-login__note{
font-family: 'Jost', sans-serif;
font-size: 14px;
color: #555;
margin: 0 0 10px;
}
.tfa-login__text{
font-family: 'Jost', sans-serif;
font-size: 15px;
line-height: 1.5;
color: #444;
text-align: center;
margin: 0 0 30px;
}
/* Carrello pieno: la sezione "Potresti essere interessato a..." sta nella
colonna sinistra (stretta) -> 3 colonne invece delle 4 globali */
.wp-block-woocommerce-cart-items-block .woocommerce ul.products{
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
/* Carrello: card "novita'"/"you may also like" con le STESSE regole dei
featured (stage alto, foto 360px contain, titolo sotto — non sovrapposto) */
.wp-block-woocommerce-cart .woocommerce ul.products li.product > a.woocommerce-LoopProduct-link{
min-height: 520px !important;
padding: 60px 28px !important;
grid-template-rows: 1fr auto !important;
}
.wp-block-woocommerce-cart .woocommerce ul.products li.product > a.woocommerce-LoopProduct-link img{
width: auto !important;
height: 360px !important;
max-width: 100% !important;
object-fit: contain !important; /* proporzioni reali, nessun crop */
}
/* carrello vuoto: griglia a 4 colonne come i featured */
.wp-block-woocommerce-empty-cart-block .woocommerce ul.products{
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
/* Carrello: font Jost per TUTTO (titoli pagina, tabella, totali, bottoni, card) */
.page-id-7 main h1,
.page-id-7 main h2,
.page-id-7 main h3,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-cart *{
font-family: 'Jost', sans-serif !important;
}
/* ============================================================
PAGINE POLICY & ASSISTENZA (body.tfa-legal):
titoli Nunito 400, testi Jost 300
============================================================ */
.tfa-legal main h1,
.tfa-legal main h2,
.tfa-legal main h3,
.tfa-legal main h4{
font-family: 'Nunito', sans-serif !important;
font-weight: 400 !important;
}
.tfa-legal main p,
.tfa-legal main li{
font-family: 'Jost', sans-serif !important;
font-weight: 300 !important;
}
/* Scheda prodotto: categoria (sopra il nome) in Jost 400 */
.tfa-product__cat{
font-family: 'Jost', sans-serif;
font-weight: 400;
font-size: 15px;
color: #666;
margin: 0 0 10px;
}
.tfa-product__cat a{
color: inherit;
text-decoration: none;
}
.tfa-product__cat a:hover{ color: #111; text-decoration: underline; }
/* Specification: attributo "Dimensions and Materials" -> mostra SOLO il
valore, senza il nome dell'attributo (label nascosta, valore a tutta larghezza) */
.woocommerce-product-attributes-item--attribute_dimensions-and-materials{
display: block;
}
.woocommerce-product-attributes-item--attribute_dimensions-and-materials .woocommerce-product-attributes-item__label{
display: none !important;
}
.woocommerce-product-attributes-item--attribute_dimensions-and-materials .woocommerce-product-attributes-item__value{
display: block;
width: 100%;
padding-left: 0 !important;
text-align: left;
}
/* Quick view: "Esaurito" compariva due volte. Il plugin chiama
woocommerce_template_single_add_to_cart(), che per i prodotti semplici
esauriti stampa gia'
, e subito dopo
aggiunge un proprio
. Teniamo quello del
plugin, che e' allineato allo stile del pannello, e nascondiamo il
duplicato di WooCommerce. Limitato a .out-of-stock: gli avvisi di
disponibilita' dei prodotti in stock restano. */
#my-qv-modal .my-qv-cart p.stock.out-of-stock,
.my-qv-cart p.stock.out-of-stock{
display: none !important;
}
/* Quick view: niente miniature. La galleria del plugin e' una griglia
"80px (miniature) + 1fr (immagine)": senza miniature l'immagine
scivolerebbe nella colonna da 80px -> serve la colonna singola. */
#my-qv-modal .my-qv-thumbs{
display: none !important;
}
#my-qv-modal .my-qv-gallery{
grid-template-columns: 1fr !important;
}
/* Selettori di variazione con UNA SOLA opzione: non sono una scelta, sono
un dato, e WooCommerce li disegna comunque come barre cliccabili morte.
Li nascondo sia nella Quick View sia nella scheda prodotto: le misure
restano nell'accordion "Caratteristiche", dove compaiono per tutti i
prodotti allo stesso modo.
Nascondere e' sicuro perche' il valore continua a essere inviato: il JS
delle swatch (del tema e del plugin) attiva da solo l'unico pulsante e
valorizza il
-- verificato sul live, i tre select risultavano
gia' su "21-x-28-cm" e "30-x-40-cm" prima di qualsiasi click.
Cosi' non serve piu' ricordarsi di togliere "Usato per le variazioni"
quando si aggiunge un attributo a valore unico. */
#my-qv-modal table.variations tr:has(.my-qv-swatch-wrap > .my-qv-swatch-btn:only-child),
.single-product table.variations tr:has(.tfa-swatch-wrap > .tfa-swatch-btn:only-child){
display: none;
}
/* Quick view: l'immagine principale rispetta le proporzioni REALI della foto
(come le card/featured/categorie) — override del plugin che forzava 2:3 + crop */
#my-qv-modal .my-qv-main-image{
aspect-ratio: auto !important;
overflow: visible !important;
}
#my-qv-modal .my-qv-main-image img{
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 72vh !important;
object-fit: contain !important; /* foto intera, nessun ritaglio */
}
/* opzionale: nascondi elementi che "sporcano" la card */
.woocommerce ul.products li.product .onsale,
.woocommerce ul.products li.product .added_to_cart{
display: none !important;
}
/* LINK = griglia: stage immagine (1fr) + header (auto) */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link{
width: 100%;
text-decoration: none;
color: inherit;
display: grid;
grid-template-rows: 1fr auto; /* 1) stage 2) header */
align-items: stretch;
min-height: 520px; /* altezza della card-stage */
padding: 60px 28px; /* bianco sopra/sotto */
}
/* IMMAGINE centrata dentro lo stage (riga 1) — stessa altezza, proporzioni reali */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link img{
grid-row: 1;
align-self: center; /* centrata verticalmente nello stage */
width: auto !important;
height: 360px !important; /* STESSA ALTEZZA per tutte */
max-width: 100% !important;
aspect-ratio: auto !important; /* mantiene le proporzioni della foto */
object-fit: contain !important; /* nessun ritaglio */
display: block;
margin: 0 auto !important;
}
/* IMMAGINI ORIZZONTALI (es. SheHer 16:9): gestione dedicata.
Stessa altezza uniforme delle altre card (height dal base: 360/340px),
ma occupano tutta la larghezza con la foto INTERA centrata (no crop),
risultando come una stampa orizzontale con passe-partout sopra/sotto.
La classe .tfa-card-landscape viene aggiunta via JS alle foto orizzontali. */
.woocommerce ul.products li.product img.tfa-card-landscape,
.tfa-shop-layout ul.products li.product img.tfa-card-landscape,
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link img.tfa-card-landscape{
width: 100% !important;
max-width: 100% !important;
object-fit: contain !important; /* foto orizzontale intera, centrata nel riquadro */
}
/* HEADER sempre in basso (riga 2) */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link .p-card__header{
grid-row: 2;
margin-top: 18px;
width: 100%;
}
/* =========================================================
SINGLE PRODUCT — Layout v2
Summary SINISTRA | Gallery DESTRA (sfondo grigio pieno)
Basato sul design di riferimento screenshot
========================================================= */
/* ── 0. FULL WIDTH: rimuovi max-width e padding dal contenitore padre ── */
.single-product main#main,
.single-product #main.grid,
.single-product #main.no-col{
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
margin-bottom:0 !important;
}
/* Rimuovi anche il wrapper WooCommerce interno se presente */
.single-product #main > .woocommerce,
.single-product #main > article{
max-width: 100%;
padding: 0;
}
/* ── 1. Grid: summary sinistra | gallery destra 700px ────── */
.tfa-product__grid{
display: grid;
grid-template-columns: 550px minmax(0, 1fr);
grid-template-rows: auto;
align-items: start;
gap: 0;
max-width: 1600px;
width: 100%;
padding: 70px 0 60px; /* spazio sopra (stacca da header) e sotto (footer) */
margin: 0 auto;
}
.tfa-product__summary{
grid-column: 2;
grid-row: 1;
padding: 0 40px 40px 80px; /* spazio interno summary — allineato in alto con la foto */
min-width: 0;
}
.tfa-product__media{
grid-column: 1; /* gallery a sinistra, 700px */
grid-row: 1;
background: #ffffff;
display: block; /* block: l'immagine imposta l'altezza naturalmente */
padding: 0;
box-sizing: border-box;
min-width: 0;
position: relative;
overflow: hidden;
}
/* ── 2. Gallery: position relative (WooCommerce JS richiede questo) ── */
.single-product .woocommerce-product-gallery{
position: relative !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
display: flex !important;
flex-direction: column;
gap: 10px;
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* FlexSlider / viewport: immagine principale */
.single-product .woocommerce-product-gallery .flex-viewport{
flex: 1;
width: auto !important;
height: auto !important;
overflow: hidden;
}
/* Senza slider (no gallery-slider) */
.single-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper{
flex: 1;
}
/* Thumbnails FlexSlider "classiche" (70px): SOLO quando le thumbs non
sono state trasformate in carosello Swiper (tfa-product-thumbs.js) */
.single-product .woocommerce-product-gallery ol.flex-control-nav:not(.swiper-wrapper){
flex: none;
display: flex !important;
flex-direction: row;
gap: 6px;
list-style: none;
margin: 0;
padding: 0;
width: auto !important;
}
.single-product .woocommerce-product-gallery ol.flex-control-nav:not(.swiper-wrapper) li{
width: 70px !important;
height: 70px !important;
overflow: hidden;
cursor: pointer;
opacity: 0.6;
transition: opacity .2s ease;
}
.single-product .woocommerce-product-gallery ol.flex-control-nav:not(.swiper-wrapper) li:hover{
opacity: 1;
}
.single-product .woocommerce-product-gallery ol.flex-control-nav li img.flex-active{
opacity: 1;
}
.single-product .woocommerce-product-gallery ol.flex-control-nav:not(.swiper-wrapper) li img{
width: 70px !important;
height: 70px !important;
object-fit: cover;
display: block;
}
/* ── Immagine principale: proporzioni REALI della foto, nessun ritaglio ── */
.single-product .woocommerce-product-gallery__image:first-child img,
.single-product div.product .images img{
display: block;
margin: 0 auto !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
max-height: none !important;
object-fit: contain !important; /* era 'none' (zoomava/clippava): ora foto intera */
float: none !important;
}
/* Desktop: limita l'altezza dell'immagine principale della galleria così le
miniature (thumb) restano visibili senza dover scorrere. Il limite si adatta
all'altezza reale dell'header (var --mc-header-h) e alla viewport. */
@media (min-width: 1024px){
.single-product .woocommerce-product-gallery__image:first-child img,
.single-product div.product .images img{
width: auto !important;
max-width: 100% !important;
height: auto !important;
max-height: calc(100vh - var(--mc-header-h, 150px) - 220px) !important;
object-fit: contain !important;
}
}
/* ── 5. Summary: tipografia ──────────────────────────────── */
/* Tag / Artista */
.tfa-product__artist{
font-family: 'Jost', sans-serif;
font-size: 12px;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
color: #111;
margin: 0 0 10px;
}
/* Long description (al posto del titolo) */
.tfa-product__long-description{
font-family: 'Jost', sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.12;
letter-spacing: -.01em;
color: #111;
margin: 0 0 18px;
}
.tfa-product__summary .product_title{
font-size: 38px;
font-weight: 700;
line-height: 1.08;
letter-spacing: -.01em;
text-transform: none;
margin: 0 0 16px;
}
/* Prezzo */
.tfa-product__summary .price{
font-family: 'Jost', sans-serif;
font-size: 16px !important;
font-weight: 400;
color: #111;
margin: 0;
display: inline-block;
}
/* Prezzo + Wishlist sulla stessa riga */
.tfa-product__summary .price,
.tfa-product__wishlist{
display: inline-flex !important;
vertical-align: middle;
}
/* Wishlist affianco al prezzo */
.tfa-product__wishlist{
align-items: center;
gap: 0;
margin: 0 0 0 20px;
}
.tfa-product__wishlist .tfa-wl-btn{
position: static;
width: 18px;
height: 18px;
padding: 0;
background: transparent;
border: none;
cursor: pointer;
}
.tfa-product__wishlist .tfa-wl-icon{
width: 18px;
height: 18px;
fill: none;
stroke: #b28486;
stroke-width: 1.5px;
transition: fill .2s ease, stroke .2s ease;
}
.tfa-product__wishlist .tfa-wl-btn:hover .tfa-wl-icon{
fill: #c00;
stroke: #c00;
}
.tfa-product__wishlist .tfa-wl-btn.is-active .tfa-wl-icon{
fill: #c00;
stroke: #c00;
}
.tfa-product__wishlist-label{
font-family: 'Jost', sans-serif;
font-size: 13px;
font-weight: 400;
color: #b28486 !important;
text-decoration: none !important;
cursor: pointer;
pointer-events: none;
margin-left: -4px;
}
/* Tax + Shipping note */
.tfa-product__tax-note{
font-family: 'Jost', sans-serif;
font-size: 13px;
font-weight: 400;
color: #555;
padding-top: 8px;
margin: 0 0 20px;
}
.tfa-product__tax-note a{
color: #555;
text-decoration: underline;
}
.tfa-product__tax-note a:hover{
color: #111;
}
/* Paper Size */
.tfa-product__paper-size{
margin: 16px 0 0;
}
.tfa-paper-label{
display: block;
font-family: 'Jost', sans-serif;
font-size: 13px;
font-weight: 700;
color: #333;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 8px;
}
.tfa-paper-btn{
display: inline-block;
padding: 8px 16px;
border: 1px solid #ccc;
background: #f5f5f5;
color: #333;
font-family: 'Jost', sans-serif;
font-size: 13px;
font-weight: 400;
letter-spacing: .02em;
}
/* Tax / Shipping note */
.tfa-product__summary .woocommerce-product-details__short-description,
.tfa-product__summary .woocommerce-product-details__short-description p{
font-family: 'Jost', sans-serif;
font-size: 13px;
font-weight: 400;
color: #555;
margin: 0 0 20px;
text-align: justify;
}
/* ── 6. Add to Cart: nero, larghezza flex (affianca la qty) ─ */
.single-product .single_add_to_cart_button,
.single-product button[name="add-to-cart"]{
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 100% !important;
flex: none !important;
height: 52px;
padding: 0 32px;
background: #b28486 !important;
color: #fff !important;
border: none !important;
border-radius: 0;
font-family: 'Jost', sans-serif;
font-size: 14px;
letter-spacing: .08em;
text-transform: uppercase;
font-weight: 500;
cursor: pointer;
box-shadow: none !important;
transition: background .22s ease;
}
.single-product .single_add_to_cart_button:hover,
.single-product button[name="add-to-cart"]:hover{
background: #96696b !important;
}
/* ── 7. Accordion──────────────────────────── */
.tfa-accordion{
border-top: 1px solid #ccc;
margin-top: 24px;
}
.tfa-accordion__item{
border-bottom: 1px solid #ccc;
}
.tfa-accordion__trigger{
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 0;
font-family: 'Jost', sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: .02em;
text-transform: none;
color: #111;
}
.tfa-accordion__trigger::after{
content: '';
display: inline-block;
width: 12px;
height: 7px;
flex-shrink: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23111' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
transition: transform .25s ease;
}
.tfa-accordion__item.is-open .tfa-accordion__trigger::after{
transform: rotate(180deg);
}
.tfa-accordion__panel{
padding: 0 0 20px;
font-family: 'Jost', sans-serif;
font-size: 14px;
line-height: 1.7;
color: #555;
}
/* Ask a Question form */
.tfa-ask-form{
padding: 0;
}
.tfa-ask-row{
display: flex;
gap: 20px;
}
.tfa-ask-col{
flex: 1;
}
.tfa-ask-question label,
.tfa-ask-form label{
font-family: 'Jost', sans-serif;
font-size: 11px;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
color: #999;
display: block;
margin-bottom: 6px;
}
.tfa-ask-question input[type="text"],
.tfa-ask-question input[type="email"],
.tfa-ask-question textarea,
.tfa-ask-form input[type="text"],
.tfa-ask-form input[type="email"],
.tfa-ask-form textarea{
font-family: 'Jost', sans-serif;
font-size: 14px;
font-weight: 400;
width: 100%;
padding: 12px 14px;
border: 1px solid #ddd;
border-radius: 0;
box-sizing: border-box;
margin-bottom: 16px;
color: #333;
background: #fff;
}
.tfa-ask-question input[type="text"]:focus,
.tfa-ask-question input[type="email"]:focus,
.tfa-ask-question textarea:focus,
.tfa-ask-form input:focus,
.tfa-ask-form textarea:focus{
border-color: #999;
outline: none;
}
.tfa-ask-question textarea,
.tfa-ask-form textarea{
min-height: 120px;
resize: vertical;
}
.tfa-ask-submit-wrap{
text-align: center;
margin-top: 8px;
}
.tfa-ask-question input[type="submit"],
.tfa-ask-question .wpcf7-submit,
.tfa-ask-form .wpcf7-submit{
font-family: 'Jost', sans-serif;
font-size: 12px;
font-weight: 400;
letter-spacing: 3px;
text-transform: uppercase;
background: #ccc;
color: #fff;
border: none;
border-radius: 0;
padding: 14px 36px;
cursor: pointer;
transition: background .2s ease;
width: auto;
display: inline-block;
}
.tfa-ask-question input[type="submit"]:hover,
.tfa-ask-question .wpcf7-submit:hover,
.tfa-ask-form .wpcf7-submit:hover{
background: #999;
}
/* Nascondi validazione CF7 inline */
.tfa-ask-form .wpcf7-not-valid-tip{
font-size: 11px;
color: #c00;
}
.tfa-ask-form .wpcf7-response-output{
font-family: 'Jost', sans-serif;
font-size: 13px;
text-align: center;
margin-top: 12px;
}
.tfa-accordion__panel table,
.tfa-accordion__panel th,
.tfa-accordion__panel td{
font-family: 'Jost', sans-serif !important;
font-weight: 400 !important;
text-transform: capitalize !important;
font-style: normal !important;
background: transparent !important;
border: none !important;
}
/* Nascondi il titolo h2 ridondante generato da WooCommerce nei pannelli */
.tfa-accordion__panel h2{
display: none;
}
/* Accordion dentro la summary: nessun max-width extra, eredita il padding del genitore */
.single-product .tfa-accordion{
max-width: none;
margin-top: 32px;
}
/* =========================================================
SINGLE PRODUCT — Prodotti correlati full-width
Fuori dal grid prodotto, colonna unica centrata
========================================================= */
.single-product .related.products{
display: block;
width: 100% !important;
max-width: 100% !important;
position: static;
left: auto;
right: auto;
margin: 0 !important;
float: none !important;
clear: both;
box-sizing: border-box;
padding: 60px 80px;
text-align: center;
}
.single-product .related.products h2{
margin-bottom: 32px;
text-align: center;
font-family: 'Nunito', sans-serif;
font-weight: 300;
font-size: 22px;
letter-spacing: .08em;
text-transform: uppercase;
}
/* 4 colonne centrate con max-width */
.single-product .related.products ul.products{
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
max-width: 1400px !important;
margin: 0 auto !important;
gap: 36px !important;
text-align: left;
}
/* =========================================================
CROSS-SELLS "You may also like": spostati via JS (functions.php)
FUORI dalla colonna del carrello, nel contenitore .tfa-crosssells-full,
così sono a TUTTA LARGHEZZA come i "Prodotti correlati": 4 colonne,
heading centrato uppercase, stesse immagini contain.
========================================================= */
.tfa-crosssells-full{
width: 100%;
clear: both;
padding: 60px 0 20px;
text-align: center;
}
.tfa-crosssells-full .wp-block-heading{
margin: 0 auto 32px !important;
max-width: none !important;
text-align: center !important;
font-family: 'Nunito', sans-serif !important;
font-weight: 300 !important;
font-size: 22px !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
}
.tfa-crosssells-full .woocommerce{
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* 4 colonne centrate, max-width come i correlati */
.tfa-crosssells-full ul.products{
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
max-width: 1400px !important;
margin: 0 auto !important;
gap: 36px !important;
padding: 0 20px !important;
text-align: left;
}
/* mai più di 4 card */
.tfa-crosssells-full ul.products li.product:nth-child(n+5){
display: none !important;
}
/* Pagina carrello: nascondi il titolo pagina "Carrello" (l'unico h1),
resta comunque l'intestazione "IL TUO CARRELLO". */
.woocommerce-cart main.grid h1.wp-block-heading{
display: none !important;
}
/* =========================================================
SINGLE PRODUCT — Fix layout (v2.1)
Correzioni post-screenshot
========================================================= */
/* ── Prezzo: colore nero (sovrascrive giallo WooCommerce) ─── */
.tfa-product__summary .price,
.tfa-product__summary .price .woocommerce-Price-amount,
.tfa-product__summary .price ins .woocommerce-Price-amount,
.single-product .price{
color: #111 !important;
}
/* ── Quantità + Bottone sulla stessa riga ────────────────── */
.single-product form.cart .quantity{
display: flex !important;
align-items: center;
flex-shrink: 0;
}
.single-product form.cart .quantity input.qty{
width: 70px;
height: 52px;
text-align: center;
font-size: 15px;
border: 1px solid #ccc;
border-radius: 0;
padding: 0 8px;
-moz-appearance: textfield;
}
.single-product form.cart .quantity input.qty::-webkit-inner-spin-button,
.single-product form.cart .quantity input.qty::-webkit-outer-spin-button{
-webkit-appearance: none;
}
/* ── Nascondi meta (SKU, Categorie, Tag) ─────────────────── */
.single-product .product_meta{
display: none !important;
}
/* ── Nascondi icona zoom / lente sulla gallery ───────────── */
.woocommerce-product-gallery__trigger{
display: none !important;
}
/* ── Gallery media: padding rimosso (ora usa padding sulla gallery absolute) ── */
/* ── Form: quantità + bottone sulla stessa riga ──────────── */
.single-product form.cart{
display: block;
width: 100% !important;
padding: 0;
margin: 0;
border: none;
}
.single-product form.cart .quantity,
.single-product .quantity,
.single-product .tfa-stepper-init,
.single-product .tfa-qty-btn,
.single-product .tfa-varsi-cart .quantity,
.single-product input.qty,
.single-product .woocommerce-variation-add-to-cart .quantity{
display: none !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
position: absolute !important;
}
.single-product form.cart .single_add_to_cart_button{
margin-top: 0;
width: 100% !important;
flex: 1;
}
/* =========================================================
QUANTITY STEPPER — pulsanti + / -
========================================================= */
/* Wrapper quantità: riga flex con i 3 elementi */
.single-product form.cart .quantity.tfa-stepper-init{
display: flex !important;
align-items: stretch;
border: 1px solid #ccc;
overflow: hidden;
}
/* Input centrale */
.single-product form.cart .quantity.tfa-stepper-init input.qty{
width: 56px;
height: 52px;
border: none;
border-left: 1px solid #ccc;
border-right:1px solid #ccc;
text-align: center;
font-size: 15px;
padding: 0;
background: #fff;
-moz-appearance: textfield;
}
.single-product form.cart .quantity.tfa-stepper-init input.qty::-webkit-inner-spin-button,
.single-product form.cart .quantity.tfa-stepper-init input.qty::-webkit-outer-spin-button{
-webkit-appearance: none;
}
/* Pulsanti − e + */
.tfa-qty-btn{
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 52px;
background: #fff;
border: none;
font-size: 20px;
font-weight: 300;
color: #111;
cursor: pointer;
flex-shrink: 0;
transition: background .18s ease, color .18s ease;
line-height: 1;
padding: 0;
user-select: none;
}
.tfa-qty-btn:hover{
background: #111;
color: #fff;
}
.tfa-qty-btn:active{
background: #333;
color: #fff;
}
/* =====================================================================
SHOP = CATALOGO: allinea la pagina negozio alle pagine categoria
-----------------------------------------------------------------
Il contenuto Gutenberg del negozio viene renderizzato come
.page-description (spacer 100px + h2 + spacer 100px), creando
un'area extra assente nelle pagine categoria. Si nasconde qui.
===================================================================== */
.woocommerce-shop .page-description{
display: none;
}
.woocommerce-result-count{
display: none !important;
}
.woocommerce-pagination,
.woocommerce nav.woocommerce-pagination{
display: none !important;
}
/* Fade-in graduale delle card prodotto */
.woocommerce ul.products li.product{
opacity: 0;
transform: translateY(16px);
transition: opacity .25s ease, transform .25s ease;
}
.woocommerce ul.products li.product.is-visible{
opacity: 1;
transform: translateY(0);
}
/* Il titolo h1.page-title è già coerente tra shop e categorie;
si uniforma la spaziatura sotto al titolo */
.woocommerce-shop h1.page-title,
.tax-product_cat h1.page-title{
font-family: 'Jost', sans-serif !important;
font-weight: 300 !important;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 2.2rem;
margin: 0 0 32px;
}
/* =====================================================================
Font Jost su "Browse the shelves"
- desktop: button con aria-controls="tfa-mega-526"
- mobile drawer: li#menu-item-526 > a
===================================================================== */
.tfa-nav__trigger[aria-controls="tfa-mega-526"],
#menu-item-526 > a{
font-family: 'Jost', sans-serif;
}
/* =====================================================================
Contact page (page-contact.php)
===================================================================== */
.tfa-contact-page{
padding: 180px 20px 120px;
}
.tfa-contact-wrap{
max-width: 1100px;
margin: 0 auto;
}
.tfa-contact-title{
font-family: 'Nunito', sans-serif;
font-weight: 300;
font-size: 34px;
letter-spacing: 0.12em;
text-align: center;
margin: 0 0 80px;
color: #222;
}
.tfa-contact-intro{
text-align: center;
margin: 0 auto 70px;
max-width: 700px;
}
.tfa-contact-intro p{
font-family: 'Nunito', sans-serif;
font-size: 15px;
color: #555;
margin: 0 0 28px;
line-height: 1.6;
}
.tfa-contact-intro a{
color: #555;
text-decoration: underline;
text-underline-offset: 3px;
}
.tfa-contact-intro a:hover{
color: #E05039;
}
.tfa-contact-form .wpcf7-form{
max-width: 1000px;
margin: 0 auto;
}
.tfa-contact-row{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
margin-bottom: 40px;
}
.tfa-contact-field{
display: flex;
flex-direction: column;
}
.tfa-contact-field label{
font-family: 'Nunito', sans-serif;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #333;
margin-bottom: 10px;
}
.tfa-contact-field input[type="text"],
.tfa-contact-field input[type="email"],
.tfa-contact-field textarea{
width: 100%;
background: transparent;
border: 1px solid #ccc;
padding: 10px 12px;
font-family: 'Nunito', sans-serif;
font-size: 14px;
color: #333;
outline: none;
transition: border-color .15s ease;
border-radius: 0;
}
.tfa-contact-field input:focus,
.tfa-contact-field textarea:focus{
border-color: #333;
}
.tfa-contact-field--full{
margin-bottom: 40px;
}
.tfa-contact-field--full textarea{
min-height: 160px;
resize: vertical;
}
.tfa-contact-submit{
display: flex;
justify-content: center;
margin-top: 20px;
}
.tfa-contact-submit .wpcf7-submit{
background: #bfbfbf;
color: #fff;
border: none;
padding: 14px 48px;
font-family: 'Nunito', sans-serif;
font-size: 13px;
letter-spacing: 0.22em;
text-transform: uppercase;
cursor: pointer;
transition: background .15s ease;
border-radius: 0;
}
.tfa-contact-submit .wpcf7-submit:hover{
background: #999;
}
.wpcf7-not-valid-tip{
color: #E05039;
font-size: 12px;
margin-top: 6px;
}
.wpcf7 form .wpcf7-response-output{
display: none;
margin: 30px auto 0;
max-width: 700px;
text-align: center;
border: 1px solid #ccc;
padding: 12px;
font-family: 'Nunito', sans-serif;
font-size: 14px;
}
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output{
display: block;
}
/* =========================================================
TFA Lightbox
========================================================= */
#tfa-lightbox{
display: none;
position: fixed;
inset: 0;
z-index: 99999;
align-items: center;
justify-content: center;
}
#tfa-lightbox.is-open{
display: flex;
}
.tfa-lb__overlay{
position: absolute;
inset: 0;
background: rgba(0,0,0,.85);
cursor: zoom-out;
}
.tfa-lb__wrap{
position: relative;
z-index: 1;
max-width: 90vw;
max-height: 90vh;
display: flex;
align-items: center;
justify-content: center;
}
.tfa-lb__img{
max-width: 90vw;
max-height: 90vh;
width: auto;
height: auto;
object-fit: contain;
display: block;
box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.tfa-lb__close{
position: absolute;
top: -40px;
right: 0;
background: transparent;
border: none;
color: #fff;
font-size: 32px;
line-height: 1;
cursor: pointer;
padding: 0;
transition: opacity .2s ease;
}
.tfa-lb__close:hover{
opacity: .7;
}
/* =========================================================
Category Carousel Lightbox
========================================================= */
.tfa-cat-lightbox{
display: none;
position: fixed;
inset: 0;
z-index: 300000;
align-items: center;
justify-content: center;
}
.tfa-cat-lightbox.is-open{
display: flex;
}
.tfa-cat-lb__overlay{
position: absolute;
inset: 0;
background: rgba(255,255,255,.98); /* sfondo bianco come lo screenshot */
cursor: zoom-out;
}
.tfa-cat-lb__wrap{
position: relative;
z-index: 1;
width: 100vw;
max-width: 100vw;
}
.tfa-cat-lb__close{
position: absolute;
top: -44px;
right: 60px; /* staccata dal bordo: piu' visibile */
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
border: none;
color: #111;
font-family: 'Nunito', sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase; /* CLOSE tutto maiuscolo */
line-height: 1;
cursor: pointer;
padding: 0;
z-index: 2;
transition: opacity .2s ease;
}
.tfa-cat-lb__close-x{
font-size: 26px;
font-weight: 400;
line-height: 1;
}
.tfa-cat-lb__close:hover{ opacity: .7; }
.tfa-cat-swiper{
width: 100%;
overflow: visible; /* mostra slide adiacenti */
}
/* centra verticalmente le slide di altezze diverse (es. orizzontali 16:9):
di default Swiper le allinea in alto (align-items: stretch) */
.tfa-cat-swiper .swiper-wrapper{
align-items: center !important;
}
.tfa-cat-swiper .swiper-slide img{
width: auto;
max-width: 100%;
height: auto;
max-height: 85vh;
aspect-ratio: auto; /* niente forzatura 2:3 */
object-fit: contain; /* foto intera, proporzioni reali, nessun ritaglio */
display: block;
/* niente margin:auto: nel flex prevarrebbe sul justify-content e
centrerebbe anche le prev/next (impedendo lo "sbirciare" ai lati) */
}
/* Slide adiacenti in trasparenza — non cliccabili */
.tfa-cat-swiper .swiper-slide{
opacity: 0.4;
transition: opacity .3s ease;
pointer-events: none;
display: flex;
align-items: center; /* centra verticalmente (es. orizzontali 16:9) */
justify-content: center;
}
.tfa-cat-swiper .swiper-slide-active{
opacity: 1;
pointer-events: auto;
}
/* il link (o lo span per slide non linkate) riempie la slide e centra l'immagine */
.tfa-cat-swiper .swiper-slide > a,
.tfa-cat-swiper .swiper-slide > span{
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
}
/* prev/next: allinea l'immagine adiacente VERSO il centro -> sbircia ai lati */
.tfa-cat-swiper .swiper-slide-prev > a,
.tfa-cat-swiper .swiper-slide-prev > span{ justify-content: flex-end !important; }
.tfa-cat-swiper .swiper-slide-next > a,
.tfa-cat-swiper .swiper-slide-next > span{ justify-content: flex-start !important; }
/* Frecce navigazione laterali (visibili, stile screenshot) */
.tfa-cat-swiper{
--swiper-navigation-color: #111; /* frecce scure su sfondo bianco */
--swiper-navigation-size: 70px;
}
.tfa-cat-swiper__prev,
.tfa-cat-swiper__next{
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100px !important; /* box esplicito: deve essere >= chevron x 1.41 (rotazione 45deg) */
height: 100px !important;
margin-top: -50px; /* ricentra in verticale (meta' dell'altezza del box) */
z-index: 5;
opacity: .8;
transition: opacity .2s ease;
}
.tfa-cat-swiper__prev{ left: 30px; }
.tfa-cat-swiper__next{ right: 30px; }
.tfa-cat-swiper__prev:hover,
.tfa-cat-swiper__next:hover{ opacity: 1; }
/* Frecce SOTTILI: sostituisco il glifo icon-font di Swiper (spessore fisso)
con un chevron disegnato a bordi ->
SPESSORE tratto = border-width (piu' basso = piu' sottile)
GRANDEZZA = width/height */
.tfa-cat-swiper__prev.swiper-button-prev::after,
.tfa-cat-swiper__next.swiper-button-next::after{
content: '';
width: 60px; /* ruotato di 45deg occupa ~85px: sta nel box da 100 */
height: 60px;
border: solid var(--swiper-navigation-color, #111);
border-width: 0 2.5px 2.5px 0; /* <-- SPESSORE frecce (invariato = sottili) */
box-sizing: border-box;
}
.tfa-cat-swiper__prev.swiper-button-prev::after{ transform: rotate(135deg); } /* punta a sinistra */
.tfa-cat-swiper__next.swiper-button-next::after{ transform: rotate(-45deg); } /* punta a destra */
/* Counter 1 / N */
.tfa-cat-lb__counter{
position: absolute;
bottom: -30px;
right: 35%; /* bordo destro della slide centrale */
color: #111;
font-family: 'Jost', sans-serif;
font-size: 12px;
font-weight: 400;
letter-spacing: .1em;
opacity: .7;
}
/* ============================================================
UTILITY (Gutenberg: blocco > Avanzate > "Classi CSS aggiuntive")
tfa-jost -> applica SOLO il font Jost
tfa-justify -> giustifica SOLO il testo
Usale singole o insieme: tfa-jost tfa-justify
Funzionano sul singolo testo o su un Gruppo che le contiene
(font e allineamento si ereditano ai figli).
============================================================ */
.tfa-jost,
.tfa-jost h1,
.tfa-jost h2,
.tfa-jost h3,
.tfa-jost h4,
.tfa-jost p,
.tfa-jost li {
font-family: 'Jost', sans-serif !important;
}
.tfa-nunito,
.tfa-nunito h1,
.tfa-nunito h2,
.tfa-nunito h3,
.tfa-nunito h4,
.tfa-nunito p,
.tfa-nunito li {
font-family: 'Nunito', sans-serif !important;
}
.tfa-justify,
.tfa-justify h1,
.tfa-justify h2,
.tfa-justify h3,
.tfa-justify h4,
.tfa-justify p,
.tfa-justify li {
text-align: justify !important;
}
/* pesi del testo: tfa-w300 (light) ... tfa-w700 (bold) */
.tfa-w300, .tfa-w300 h1, .tfa-w300 h2, .tfa-w300 h3, .tfa-w300 h4, .tfa-w300 p, .tfa-w300 li { font-weight: 300 !important; }
.tfa-w400, .tfa-w400 h1, .tfa-w400 h2, .tfa-w400 h3, .tfa-w400 h4, .tfa-w400 p, .tfa-w400 li { font-weight: 400 !important; }
.tfa-w500, .tfa-w500 h1, .tfa-w500 h2, .tfa-w500 h3, .tfa-w500 h4, .tfa-w500 p, .tfa-w500 li { font-weight: 500 !important; }
.tfa-w600, .tfa-w600 h1, .tfa-w600 h2, .tfa-w600 h3, .tfa-w600 h4, .tfa-w600 p, .tfa-w600 li { font-weight: 600 !important; }
.tfa-w700, .tfa-w700 h1, .tfa-w700 h2, .tfa-w700 h3, .tfa-w700 h4, .tfa-w700 p, .tfa-w700 li { font-weight: 700 !important; }
/* interlinea (line-height): tfa-lh-10 = 1.0 ... tfa-lh-20 = 2.0 */
.tfa-lh-10, .tfa-lh-10 h1, .tfa-lh-10 h2, .tfa-lh-10 h3, .tfa-lh-10 h4, .tfa-lh-10 p, .tfa-lh-10 li { line-height: 1 !important; }
.tfa-lh-11, .tfa-lh-11 h1, .tfa-lh-11 h2, .tfa-lh-11 h3, .tfa-lh-11 h4, .tfa-lh-11 p, .tfa-lh-11 li { line-height: 1.1 !important; }
.tfa-lh-12, .tfa-lh-12 h1, .tfa-lh-12 h2, .tfa-lh-12 h3, .tfa-lh-12 h4, .tfa-lh-12 p, .tfa-lh-12 li { line-height: 1.2 !important; }
.tfa-lh-13, .tfa-lh-13 h1, .tfa-lh-13 h2, .tfa-lh-13 h3, .tfa-lh-13 h4, .tfa-lh-13 p, .tfa-lh-13 li { line-height: 1.3 !important; }
.tfa-lh-14, .tfa-lh-14 h1, .tfa-lh-14 h2, .tfa-lh-14 h3, .tfa-lh-14 h4, .tfa-lh-14 p, .tfa-lh-14 li { line-height: 1.4 !important; }
.tfa-lh-15, .tfa-lh-15 h1, .tfa-lh-15 h2, .tfa-lh-15 h3, .tfa-lh-15 h4, .tfa-lh-15 p, .tfa-lh-15 li { line-height: 1.5 !important; }
.tfa-lh-16, .tfa-lh-16 h1, .tfa-lh-16 h2, .tfa-lh-16 h3, .tfa-lh-16 h4, .tfa-lh-16 p, .tfa-lh-16 li { line-height: 1.6 !important; }
.tfa-lh-18, .tfa-lh-18 h1, .tfa-lh-18 h2, .tfa-lh-18 h3, .tfa-lh-18 h4, .tfa-lh-18 p, .tfa-lh-18 li { line-height: 1.8 !important; }
.tfa-lh-20, .tfa-lh-20 h1, .tfa-lh-20 h2, .tfa-lh-20 h3, .tfa-lh-20 h4, .tfa-lh-20 p, .tfa-lh-20 li { line-height: 2 !important; }
/* ============================================================
PAGINA RISULTATI RICERCA
(template: woocommerce.php ramo is_search)
============================================================ */
.tfa-search-main{
padding: 44px clamp(20px, 4vw, 64px) 80px;
}
.tfa-search-title{
font-family: 'Nunito', sans-serif;
font-size: clamp(34px, 4vw, 52px);
font-weight: 400;
text-transform: uppercase;
color: #111;
margin: 0 0 30px;
}
.tfa-search-form{
display: flex;
max-width: 900px;
margin: 0 0 34px;
}
.tfa-search-form input[type="search"]{
flex: 1;
min-width: 0;
height: 56px; /* stessa altezza del bottone */
background: #efefef;
border: 1px solid #e3e3e3;
border-right: 0;
border-radius: 0;
padding: 0 20px;
font-family: 'Jost', sans-serif;
font-size: 15px;
color: #111;
outline: none;
-webkit-appearance: none;
appearance: none;
box-sizing: border-box;
}
.tfa-search-form button{
background: #ae8687; /* stesso sfondo degli altri bottoni (subscribe/quick view) */
color: #fff;
border: 0;
border-radius: 0;
height: 56px; /* stessa altezza del campo */
padding: 0 44px;
font-family: 'Nunito', sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
cursor: pointer;
transition: background .2s ease;
box-sizing: border-box;
}
.tfa-search-form button:hover{ background: #333; } /* stesso hover degli altri bottoni */
.tfa-search-noresults{
font-family: 'Jost', sans-serif;
font-size: 16px;
color: #111;
margin: 6px 0 60px;
}
/* ============================================================
PATTERN "Explore" — 2 colonne: immagine + titolo + link Explore
(registrato come pattern Gutenberg: "TFA — Explore 2 colonne")
============================================================ */
.tfa-explore-cols{
/* TUTTA LARGHEZZA: 100vw edge-to-edge (stesso metodo di hero/featured) */
width: 100vw;
margin: 40px calc(50% - 50vw);
box-sizing: border-box;
gap: 48px; /* spazio tra le due colonne */
}
/* evita che wrapper Gutenberg taglino il full-bleed */
.entry-content:has(.tfa-explore-cols),
.wp-block-group:has(.tfa-explore-cols),
.wp-block-column:has(.tfa-explore-cols){
overflow: visible !important;
}
.tfa-explore-img img{
width: 100%;
height: auto; /* mantiene l'aspect ratio reale: niente crop */
display: block;
}
.tfa-explore-title{
font-size: clamp(26px, 3vw, 40px);
font-weight: 700;
line-height: 1.1;
margin: 22px 0 14px;
}
.tfa-explore{ margin: 0; }
/* Explore come PULSANTE: stessi colori degli altri bottoni del sito */
.tfa-explore__link,
.tfa-explore__link:visited{
display: inline-block;
background: #ae8687;
color: #fff !important;
font-family: 'Nunito', sans-serif;
font-weight: 400;
font-size: 14px;
letter-spacing: .12em;
text-transform: uppercase;
padding: 14px 34px;
border: 0;
border-radius: 0;
text-decoration: none !important;
transition: background .2s ease;
}
.tfa-explore__link span{
border-bottom: 0; /* via la sottolineatura */
padding-bottom: 0;
}
.tfa-explore__link::after{
content: none; /* via il chevron */
}
.tfa-explore__link:hover{
background: #333; /* stesso hover degli altri bottoni */
color: #fff !important;
}
/* ============================================================
PATTERN "Exhibit" — colonna testo + 2 immagini (a tutta larghezza)
(registrato come pattern Gutenberg: "TFA — Exhibit testo + 2 immagini")
============================================================ */
.tfa-exhibit-cols{
/* TUTTA LARGHEZZA: 100vw edge-to-edge con piccolo respiro ai lati */
width: 100vw;
margin: 48px calc(50% - 50vw);
box-sizing: border-box;
padding: 0 clamp(20px, 4vw, 64px);
gap: 40px;
align-items: start; /* testo e immagini allineati in alto */
}
.tfa-exhibit__overline{
font-size: 14px;
font-weight: 700;
letter-spacing: .02em;
margin: 0 0 18px;
}
.tfa-exhibit__title{
font-size: clamp(38px, 4.5vw, 68px);
font-weight: 800;
line-height: 1.03;
letter-spacing: -0.02em;
margin: 0 0 22px;
}
/* testo del pattern: Jost 400, regolare (niente corsivo, anche dentro );
!important per battere l'inline font-weight:300 e il corsivo di */
.tfa-exhibit__text,
.tfa-exhibit__text em,
.tfa-exhibit__text i{
font-family: 'Jost', sans-serif !important;
font-weight: 400 !important;
font-style: normal !important;
}
.tfa-exhibit__text{
font-size: 16px;
line-height: 1.5;
max-width: 40ch;
margin: 0 0 34px;
}
/* bottone: stesse regole del pulsante SUBSCRIBE del footer */
.tfa-exhibit__btn a,
.tfa-exhibit__btn .wp-block-button__link{
border: 0 !important;
border-radius: 0 !important;
background: #ae8687 !important; /* stesso sfondo di subscribe/quick view */
color: #fff !important;
font-family: 'Nunito', sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
padding: 16px 20px;
transition: background .2s ease;
}
.tfa-exhibit__btn a:hover,
.tfa-exhibit__btn .wp-block-button__link:hover{
background: #333 !important; /* stesso hover di subscribe/quick view */
color: #fff !important;
}
.tfa-exhibit-img img{
width: 100%;
height: auto; /* mantiene l'aspect ratio reale: niente crop */
display: block;
}
/* evita che wrapper Gutenberg taglino il full-bleed */
.entry-content:has(.tfa-exhibit-cols),
.wp-block-group:has(.tfa-exhibit-cols),
.wp-block-column:has(.tfa-exhibit-cols){
overflow: visible !important;
}
/* ============================================================
PATTERN "Exhibition 5 immagini" — pagina mostra completa
(overline, titolo+info, highlight, contatti, 5 foto, testo)
============================================================ */
.tfa-exhibition{
/* tutta larghezza con respiro ai lati */
width: 100vw;
margin: 40px calc(50% - 50vw);
box-sizing: border-box;
padding: 0 clamp(20px, 4vw, 64px);
}
.entry-content:has(.tfa-exhibition),
.wp-block-group:has(.tfa-exhibition),
.wp-block-column:has(.tfa-exhibition){
overflow: visible !important;
}
.tfa-exhi-overline{
font-family: 'Nunito', sans-serif;
font-size: 13px;
font-weight: 400;
letter-spacing: .14em;
text-transform: uppercase;
margin: 0 0 40px;
}
.tfa-exhi-head{ gap: 40px; align-items: flex-start; }
.tfa-exhi-title{
font-family: 'Nunito', sans-serif;
font-size: clamp(26px, 2.8vw, 40px);
font-weight: 400;
line-height: 1.12;
margin: 0 0 26px;
}
.tfa-exhi-h{
font-family: 'Nunito', sans-serif;
font-size: clamp(24px, 2.4vw, 34px);
font-weight: 400;
margin: 0 0 18px;
}
.tfa-exhi-sub,
.tfa-exhi-text{
font-family: 'Jost', sans-serif;
font-size: 16px;
line-height: 1.5;
margin: 0 0 16px;
}
.tfa-exhi-address{
font-family: 'Jost', sans-serif;
font-size: 16px;
line-height: 1.5;
margin: 26px 0 0;
}
/* bottone: come gli altri bottoni del sito */
.tfa-exhi-btn .wp-block-button__link{
background: #ae8687 !important;
color: #fff !important;
border: 0 !important;
border-radius: 0 !important;
font-family: 'Nunito', sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
padding: 16px 34px;
transition: background .2s ease;
}
.tfa-exhi-btn .wp-block-button__link:hover{ background: #333 !important; }
/* fila di 5 immagini: proporzioni ORIGINALI, niente crop */
.tfa-exhi-imgs{
gap: 20px;
margin: 48px 0;
align-items: flex-start;
}
.tfa-exhi-img{ margin: 0; }
.tfa-exhi-img img{
width: 100%;
height: auto; /* aspect ratio reale */
display: block;
cursor: pointer; /* SOLO pointer all'hover, nessun altro effetto; click = carosello */
}
/* testo finale */
.tfa-exhi-body{
font-family: 'Jost', sans-serif;
font-size: 16px;
line-height: 1.55;
max-width: 860px;
margin: 0 0 22px;
}
/* ============================================================
FOOTER
============================================================ */
.tfa-foot{
background: #efefee;
color: #1a1a1a;
margin: 0;
}
.tfa-foot__inner{
max-width: 1500px;
margin: 0 auto;
padding: 64px 40px 28px;
box-sizing: border-box;
}
/* riga principale: logo | Assistenza | Policy | Newsletter */
.tfa-foot__main{
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.6fr;
gap: 40px;
align-items: start;
}
.tfa-foot__logo{ width: 120px; height: auto; display: block; }
/* link sul logo: nessun effetto hover, solo pointer */
.tfa-foot__logolink{ display: inline-block; cursor: pointer; }
.tfa-foot__logolink:hover,
.tfa-foot__logolink:focus{ opacity: 1; }
/* "Back to Home" sotto il logo: Nunito, nessun effetto hover, solo pointer.
Letter-spacing calibrato (testo 88px + 12 caratteri) perche' il testo
si distenda su tutti i 120px del logo. */
.tfa-foot__home,
.tfa-foot__home:hover,
.tfa-foot__home:focus{
display: block;
width: 120px; /* stessa larghezza del logo */
text-align: center;
letter-spacing: 2.9px; /* distende il testo sull'intera larghezza */
margin-top: 14px;
font-family: 'Nunito', sans-serif;
font-size: 14px;
color: #111;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
}
.tfa-foot__head{
font-family: 'Nunito', sans-serif;
font-size: 18px;
font-weight: 700;
color: #111;
margin: 0 0 18px;
}
.tfa-foot__menu{ list-style: none; margin: 0; padding: 0; }
.tfa-foot__menu li{ margin: 0 0 12px; }
.tfa-foot__menu a{
color: #555;
font-family: 'Jost', sans-serif;
font-weight: 400;
font-size: 15px;
text-decoration: none;
transition: color .2s ease;
}
.tfa-foot__menu a:hover{ color: #111; }
/* newsletter (Contact Form 7) */
.tfa-foot__nl-text{ color: #555; font-family: 'Jost', sans-serif; font-weight: 400; font-size: 15px; margin: 0 0 18px; }
.tfa-foot__newsletter .tfa-nl-row{
display: flex;
flex-direction: column;
gap: 14px;
margin: 0;
}
.tfa-foot__newsletter .wpcf7-form-control-wrap{ display: block; width: 100%; }
.tfa-foot__newsletter input[type="email"]{
width: 100%;
border: 1px solid #bdbdbd;
background: #fff;
padding: 16px;
font-size: 15px;
color: #111;
border-radius: 0;
box-sizing: border-box;
}
.tfa-foot__newsletter input[type="email"]::placeholder{ color: #8a8a8a; }
.tfa-foot__newsletter input[type="submit"],
.tfa-foot__newsletter .wpcf7-submit{
width: 100%;
background: #ae8687; /* stesso sfondo del pulsante quick view */
color: #fff;
border: 0;
border-radius: 0;
padding: 16px 20px;
font-family: 'Nunito', sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
cursor: pointer;
transition: background .2s ease;
}
.tfa-foot__newsletter input[type="submit"]:hover,
.tfa-foot__newsletter .wpcf7-submit:hover{ background: #333; }
.tfa-foot__newsletter .wpcf7-spinner{ margin: 8px auto 0; }
.tfa-foot__newsletter .wpcf7-response-output{
font-size: 13px;
margin: 10px 0 0 !important;
padding: 8px 10px !important;
}
/* divisori orizzontali */
.tfa-foot__rule{
border: 0;
border-top: 1px solid #d5d5d3;
margin: 40px 0;
}
/* barra secondaria: copyright+P.IVA (sx) + social (dx) */
.tfa-foot__bar{
display: flex;
justify-content: space-between;
align-items: center; /* copyright centrato in verticale rispetto ai social */
gap: 30px;
}
.tfa-foot__minilabel{
display: block;
color: #8a8a8a;
font-family: 'Nunito', sans-serif;
font-weight: 400;
font-size: 13px;
text-transform: uppercase;
text-align: center; /* centrato sopra le icone social */
margin-bottom: 14px;
}
.tfa-foot__social-wrap{ text-align: center; } /* icone centrate rispetto alla label "Seguici sui social" */
.tfa-foot__socials{ display: inline-flex; gap: 22px; }
.tfa-foot__social{
display: inline-flex;
align-items: center;
color: #111;
font-size: 20px;
transition: opacity .2s ease;
}
/* icona TikTok (svg inline: FA 4.7 non la include) allineata alle icone font */
.tfa-foot__social svg{
width: 18px;
height: 18px;
display: block;
}
.tfa-foot__social:hover{ opacity: .55; }
/* copyright */
.tfa-foot__copy{ color: #6a6a6a; font-size: 14px; margin: 0; }
/* responsive */
@media (max-width: 980px){
.tfa-foot__main{ grid-template-columns: 1fr 1fr; }
.tfa-foot__brand,
.tfa-foot__newsletter{ grid-column: 1 / -1; }
}
@media (max-width: 600px){
.tfa-foot__inner{ padding: 40px 22px 24px; }
.tfa-foot__main{ grid-template-columns: 1fr; gap: 30px; }
.tfa-foot__bar{ flex-direction: column; }
/* il blocco social qui sotto i 768px è nascosto (responsive.css): se un giorno
torna nel footer, deve restare centrato come alle altre larghezze */
.tfa-foot__social-wrap{ text-align: center; }
.tfa-foot__minilabel{ text-align: center; }
}
/* ============================================================
PAGINA PAGAMENTO (checkout + conferma ordine "order-received")
- Titoli: Nunito 400 · Testi: Jost 400
- Spazio tra header e titolo "Pagamento"
============================================================ */
/* Spazio tra header e titolo pagina ("Pagamento") */
body.woocommerce-checkout main#main,
body.woocommerce-order-received main#main{
padding-top: calc(var(--tfa-header-offset, 80px) + 40px) !important;
}
body.woocommerce-checkout main#main > h1.wp-block-heading:first-child,
body.woocommerce-order-received main#main > h1.wp-block-heading:first-child{
margin-top: 0 !important;
}
/* Titoli -> Nunito 400 */
body.woocommerce-checkout h1,
body.woocommerce-checkout h2,
body.woocommerce-checkout h3,
body.woocommerce-order-received h1,
body.woocommerce-order-received h2,
body.woocommerce-order-received h3{
font-family: 'Nunito', sans-serif !important;
font-weight: 400 !important;
}
/* Testi -> Jost 400 */
body.woocommerce-checkout,
body.woocommerce-checkout p,
body.woocommerce-checkout li,
body.woocommerce-checkout td,
body.woocommerce-checkout th,
body.woocommerce-checkout label,
body.woocommerce-checkout input,
body.woocommerce-checkout select,
body.woocommerce-checkout textarea,
body.woocommerce-checkout a,
body.woocommerce-order-received,
body.woocommerce-order-received p,
body.woocommerce-order-received li,
body.woocommerce-order-received td,
body.woocommerce-order-received th,
body.woocommerce-order-received label,
body.woocommerce-order-received a{
font-family: 'Jost', sans-serif !important;
font-weight: 400 !important;
}
/* ============================================================
FIX SAFARI — blocco "Media e testo" (wp-block-media-text)
Problema: e' una CSS grid; gli elementi grid hanno min-width:auto,
e Safari NON rimpicciolisce l'immagine sotto la sua larghezza
intrinseca (es. 683px) -> l'immagine sfonda la colonna e spinge
il testo fuori schermo. Chrome invece la costringe nella colonna.
(Il core mette max-width:unset sull'immagine.)
Fix: le celle grid possono restringersi (min-width:0) e l'immagine
resta dentro (max-width:100%).
============================================================ */
.wp-block-media-text{
min-width: 0;
}
.wp-block-media-text > .wp-block-media-text__media,
.wp-block-media-text > .wp-block-media-text__content{
min-width: 0;
overflow: hidden;
}
.wp-block-media-text > .wp-block-media-text__media img{
max-width: 100%;
height: auto;
}
/* ===================================================================== */
/* Titolo archivio shop / categoria (h1 SEO) */
/* ===================================================================== */
/* Stampato da functions.php su woocommerce_before_shop_loop.
Di default e' nascosto SOLO visivamente, perche' il design non prevede un
titolo a schermo: resta nel DOM, quindi Google e gli screen reader lo leggono.
Mai usare display:none o visibility:hidden qui -> Google li tratta come
testo nascosto e ne annulla il valore.
PER RENDERLO VISIBILE: togliere la classe --hidden dall'echo in functions.php
(la regola .tfa-archive-title qui sotto e' gia' pronta e in stile col tema). */
.tfa-archive-title{
font-family: 'Jost', sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -.01em;
text-transform: uppercase;
color: #111;
margin: 0 0 24px;
}
.tfa-archive-title--hidden{
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ===================================================================== */
/* Paragrafo introduttivo delle categorie prodotto */
/* ===================================================================== */
/* Stampato da functions.php su woocommerce_before_shop_loop.
Compare solo se la categoria ha una descrizione: le categorie senza
testo restano identiche a prima. */
.tfa-archive-intro{
max-width: 68ch;
margin: 0 0 32px;
font-family: 'Jost', sans-serif;
font-size: 15px;
font-weight: 300;
line-height: 1.7;
color: #444;
}
.tfa-archive-intro p{ margin: 0 0 10px; }
.tfa-archive-intro p:last-child{ margin-bottom: 0; }
/* Richiesta del 14/08: il paragrafo non deve vedersi. Resta nel DOM, quindi
Google lo legge, ma non compare a schermo.
ATTENZIONE: e' diverso dal caso dell'h1. Un h1 nascosto e' un elemento
strutturale che la pagina deve avere comunque; un paragrafo di 40 parole
pieno di parole chiave, scritto solo per i motori e mai mostrato a nessuno,
e' quello che le linee guida di Google chiamano testo nascosto. Il rischio
e' basso su 9 pagine, ma non e' zero.
Due alternative senza rischio, entrambe a una riga da qui:
- togliere --hidden dall'echo in functions.php e spostare la stampa in
fondo alla pagina (hook woocommerce_after_shop_loop): testo visibile ma
sotto la griglia, come fanno quasi tutti gli e-commerce;
- lasciarlo in alto dentro un "Leggi di piu'" richiudibile. */
.tfa-archive-intro--hidden{
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
@media (max-width: 767px){
.tfa-archive-intro{
font-size: 14px;
margin: 0 0 24px;
}
}
/* ============================================================
PATTERN "Mostra editoriale" — tfa/mostra-editoriale
Pagina mostra in stile galleria: hero a tutta larghezza,
titolo + testo in colonna stretta, griglia opere con
didascalia, strip prodotti correlati.
Le foto della griglia portano anche .tfa-exhi-img:
il click apre il carosello (Assets/js/tfa-cat-carousel.js).
============================================================ */
.tfa-mostra{
/* tutta larghezza, come .tfa-exhibition */
width: 100vw;
margin: 0 calc(50% - 50vw) 60px;
box-sizing: border-box;
}
/* Trappola del tema: alux.min.css ha [class*="col"]{ padding: 0 20px }, e il
selettore prende QUALSIASI classe che contenga "col" — comprese le
has-text-color / has-link-color che Gutenberg aggiunge appena scegli un
colore nel blocco. Risultato: due strisce bianche da 20px ai lati della
cover a tutta larghezza. Due classi per battere la regola del tema;
il padding laterale qui dentro lo mettono le singole sezioni. */
.wp-block-group.tfa-mostra{
padding-left: 0;
padding-right: 0;
}
.entry-content:has(.tfa-mostra),
.wp-block-group:has(.tfa-mostra),
.wp-block-column:has(.tfa-mostra){
overflow: visible !important;
}
/* ---- Cover di apertura: immagine a tutto schermo col titolo sopra ----
Il blocco Cover porta gia' l'inline style min-height:70vh (come la hero
della home). Qui annullo il .wp-block-cover{margin-top:100px} globale e
riporto le proporzioni 16:9 sotto i 1023px, come fa la hero della home. */
.tfa-mostra__cover{
margin-top: 0;
margin-bottom: 0;
}
/* Proporzioni della cover: 4:3 a QUALSIASI larghezza.
Le impongo qui e non nel blocco perche' il Cover salva l'altezza dentro
il CONTENUTO della pagina: modificarla nel pattern non tocca le pagine
gia' pubblicate, e un blocco senza impostazioni cade sul min-height:430px
di default di WordPress, che su desktop e' una fascia 3,35:1.
min-height:0 serve a battere sia quel default sia l'eventuale inline.
Per un rapporto diverso su una singola pagina basta impostarlo
dall'editor (Dimensioni > Proporzioni): WordPress aggiunge la classe
has-aspect-ratio e questa regola si fa da parte. */
/* Il tetto vale anche per le cover con Proporzioni impostate dall'editor
(classe has-aspect-ratio): senza, su AW26 la cover usciva 1397x1048,
piu' alta della finestra. */
.tfa-mostra .tfa-mostra__cover{
max-height: 60vh;
}
.tfa-mostra .tfa-mostra__cover:not(.has-aspect-ratio){
aspect-ratio: 4 / 3;
/* Tetto: mai piu' alta del 60% della finestra. Senza questo il 4:3 su
un monitor largo produce una cover piu' alta dello schermo (a 1440px
di larghezza sono 1080px di altezza) e il visitatore non vede altro.
Sui telefoni non entra mai in gioco: li' il 4:3 e' gia' piu' basso. */
max-height: 60vh;
/* Niente !important: tre classi bastano a battere il min-height:430px di
core, e cosi' l'Altezza minima scelta nell'editor continua a funzionare
(puo' solo ALZARE il box: sotto l'altezza del rapporto non ha effetto).
max-width serve perche' con un'altezza imposta il rapporto allargherebbe
il box oltre la pagina: misurato 1500px di altezza -> 2000px di larghezza. */
min-height: 0;
max-width: 100%;
}
/* La foto si vede INTERA, nelle sue proporzioni originali: niente ritaglio.
Con una foto verticale dentro un box largo restano due fasce ai lati
(con una 3:4 sono il 22% della larghezza per parte): le riempie questo
fondo. Per fasce chiare invece che scure cambia solo background-color.
Tre classi perche' il CSS di core impone object-fit:cover con due. */
.tfa-mostra__cover{
background-color: #ffffff;
}
.tfa-mostra .tfa-mostra__cover .wp-block-cover__image-background{
object-fit: contain;
}
.tfa-mostra__cover .wp-block-cover__inner-container{
width: 100%;
max-width: 1100px;
padding: 0 20px;
}
/* Titolo dentro la cover.
Serve la specificita' a 3 classi: Assets/css/responsive.css impone
.wp-block-cover .wp-block-heading (2 classi) e viene caricato DOPO. */
.tfa-mostra .tfa-mostra__cover .tfa-mostra__title{
font-family: 'Nunito', sans-serif;
font-weight: 400;
/* Fluido: 100px sui monitor grandi, 28px sui telefoni, con scalatura
continua in mezzo (7vw). Il tetto e' alzato da 50px a 100px perche'
la misura serviva grande e veniva forzata a mano dall'editor con un
valore FISSO in px, che non scala su nessuno schermo. */
font-size: clamp(28px, 7vw, 100px);
line-height: 1.05;
letter-spacing: .14em;
text-transform: uppercase;
text-align: center;
color: #fff;
margin: 0;
text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
/* ---- Hero a immagine semplice (senza titolo sopra) ----
Resta per le pagine gia' costruite con la prima versione del pattern. */
.tfa-mostra__hero{ margin: 0; }
.tfa-mostra__hero img{
display: block;
width: 100%;
height: clamp(320px, 60vh, 720px);
object-fit: cover;
object-position: center;
}
/* variante: hero con proporzioni originali, senza taglio */
.tfa-mostra__hero--intera img{ height: auto; }
/* ---- Introduzione: colonna stretta centrata ---- */
.tfa-mostra__intro{
max-width: 680px;
margin: 0 auto;
padding: clamp(48px, 6vw, 80px) 20px 0;
box-sizing: border-box;
}
/* Titolo della mostra, DENTRO o FUORI dalla cover: stessa misura fluida.
100px sui monitor grandi, 28px sui telefoni, scalatura continua (7vw).
La misura e' ripetuta anche nella regola a tre classi qui sopra e le due
devono restare allineate: serve la specificita' maggiore perche' sotto i
1023px responsive.css impone un font-size ai titoli dentro le cover. */
.tfa-mostra__title{
font-family: 'Nunito', sans-serif;
font-size: clamp(28px, 7vw, 100px);
/* Aspetto scelto sulla pagina Mon Amour, portato qui perche' valga per
tutte le pagine mostra senza rifarlo a mano su ognuna.
Peso 300 e non 100: di Nunito sono caricati 300/400/600/700, quindi
un 100 ricade comunque sul 300.
Spaziatura in em e non in px fissi, cosi' scala col titolo fluido:
.02em fa esattamente 2px sui 100px del desktop. */
font-weight: 300;
line-height: 1.35;
letter-spacing: .02em;
text-transform: lowercase;
color: #333333;
text-align: center;
margin: 0 0 18px;
}
.tfa-mostra__dates{
font-family: 'Jost', sans-serif;
font-size: 14px;
font-weight: 300;
letter-spacing: .08em;
text-transform: uppercase;
text-align: center;
color: #8f8c8c;
margin: 0 0 34px;
}
.tfa-mostra__text{
font-family: 'Jost', sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 1.75;
text-align: justify;
margin: 0 0 20px;
}
.tfa-mostra__credit{
font-family: 'Jost', sans-serif;
font-size: 14px;
font-weight: 300;
line-height: 1.6;
text-align: center;
color: #8f8c8c;
margin: 30px 0 0;
}
/* CTA: stesso bottone degli altri pattern del sito */
.tfa-mostra__cta{ justify-content: center; margin-top: 36px; }
.tfa-mostra__cta .wp-block-button__link{
background: #ae8687 !important;
color: #fff !important;
border: 0 !important;
border-radius: 0 !important;
font-family: 'Nunito', sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
padding: 16px 34px;
transition: background .2s ease;
}
.tfa-mostra__cta .wp-block-button__link:hover{ background: #333 !important; }
/* ---- Titoletto di sezione (Opere selezionate / Potrebbe interessarti) ---- */
.tfa-mostra__kicker{
font-family: 'Nunito', sans-serif;
font-size: 15px;
font-weight: 400;
letter-spacing: .2em;
text-transform: uppercase;
color: #a8a5a5;
text-align: center;
margin: clamp(56px, 6vw, 88px) 0 32px;
padding: 0 clamp(20px, 4vw, 64px);
}
.tfa-mostra__kicker--left{ text-align: left; }
/* ---- Griglia opere: 6 celle per riga, proporzioni originali ----
Le tracce sono il DOPPIO delle celle (12 per 6 celle) e ogni opera ne
occupa due. Serve a centrare l'ultima riga quando e' incompleta: con
tracce singole gli scarti possibili sarebbero solo interi, e una riga
da 1, 3 o 5 opere resterebbe sbilanciata di mezza cella. La geometria
a riga piena e' identica a repeat(6,1fr): 12t+11G = 6c+5G. */
.tfa-mostra__grid{
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: clamp(20px, 2.4vw, 32px);
align-items: start;
margin: 0;
padding: 0 clamp(20px, 4vw, 64px);
}
/* Larghezza massima come l'header (.nav-wrap .grid.no-pad-menu = 1800px
centrato): sopra quella misura il contenuto smette di allargarsi invece
di correre da bordo a bordo dello schermo.
Ci metto anche titoletti e correlati, non solo la griglia: se no su un
monitor largo la griglia si ferma a 1800 mentre "Potrebbe interessarti"
e la striscia prodotti continuano fino al bordo, e le colonne non
combaciano piu'. La cover resta volutamente a tutta larghezza. */
.tfa-mostra__grid,
.tfa-mostra__kicker,
.tfa-mostra__related{
max-width: 1800px;
margin-left: auto;
margin-right: auto;
}
/* se Gutenberg incapsula il gruppo, i figli restano celle della griglia */
.tfa-mostra__grid > .wp-block-group__inner-container{ display: contents; }
.tfa-mostra__item{ margin: 0; }
/* `end` e non `grid-column`: piu' sotto si imposta solo `grid-column-start`
per centrare, e la forma breve azzererebbe lo span rimettendo `end:auto`. */
.tfa-mostra__grid .tfa-mostra__item{ grid-column-end: span 2; }
.tfa-mostra__item img{
display: block;
width: 100%;
height: auto; /* niente crop: proporzioni reali della stampa */
cursor: pointer; /* click = carosello */
}
/* Didascalie: restano nel codice della pagina (lettori di schermo e
motori di ricerca le leggono) ma non si vedono. Stessa tecnica di
.tfa-archive-intro--hidden: NON display:none, che le toglierebbe
anche ai crawler e quindi vanificherebbe lo scopo.
Per rimetterle visibili, cancella questo blocco e togli il commento
a quello sotto. */
.tfa-mostra__item figcaption,
.tfa-mostra__item .wp-element-caption{
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* Didascalie visibili (versione precedente, da riattivare all'occorrenza):
.tfa-mostra__item figcaption,
.tfa-mostra__item .wp-element-caption{
font-family: 'Jost', sans-serif;
font-size: 13px;
font-weight: 300;
line-height: 1.5;
color: #a8a5a5;
text-align: left;
margin: 14px 0 0;
}
*/
/* ---- Correlati ---- */
.tfa-mostra__related{ padding: 0 clamp(20px, 4vw, 64px); }
.tfa-mostra__related .tfa-featured{ margin: 0; }
/* ---- Ultima riga incompleta: si centra ----
Una serie non ha quasi mai un numero di opere multiplo delle celle per
riga: Food ne ha 4, AW26 7, Time Capsule 8. Senza queste regole le
opere della riga finale si accostano tutte da un lato e lasciano il
vuoto dall'altro (su AW26 e' una foto sola in mezzo al nulla).
Come funziona: R = quante opere ci sono nell'ultima riga, cioe' il
resto della divisione per le celle per riga. `:nth-child(Cn+R):last-child`
riconosce R guardando in che posizione cade l'ultima opera; la prima
opera di quella riga e' la R-esima contando dal fondo, e la si fa
partire dalla traccia che lascia lo stesso vuoto ai due lati.
Ogni scaglione sta fra due limiti perche' le media query non alzano la
specificita': senza il `min-width` le regole a 6 celle continuerebbero
ad applicarsi anche sotto, dove le celle sono meno.
I selettori usano il discendente e non `>` di proposito: dove Gutenberg
incapsula il gruppo, le opere sono nipoti e non figlie della griglia. */
@media (min-width: 1201px){ /* 6 celle, 12 tracce */
.tfa-mostra__grid:has(.tfa-mostra__item:nth-child(6n+1):last-child) .tfa-mostra__item:nth-last-child(1){ grid-column-start: 6; }
.tfa-mostra__grid:has(.tfa-mostra__item:nth-child(6n+2):last-child) .tfa-mostra__item:nth-last-child(2){ grid-column-start: 5; }
.tfa-mostra__grid:has(.tfa-mostra__item:nth-child(6n+3):last-child) .tfa-mostra__item:nth-last-child(3){ grid-column-start: 4; }
.tfa-mostra__grid:has(.tfa-mostra__item:nth-child(6n+4):last-child) .tfa-mostra__item:nth-last-child(4){ grid-column-start: 3; }
.tfa-mostra__grid:has(.tfa-mostra__item:nth-child(6n+5):last-child) .tfa-mostra__item:nth-last-child(5){ grid-column-start: 2; }
}
/* ---- Responsive ----
Scaletta delle celle: 6 -> 4 -> 3 -> 2 -> 1, cioe' 12 -> 8 -> 6 -> 4 -> 2
tracce. Le sei celle reggono fino a ~1200px (sotto, ogni foto scenderebbe
oltre i 160px di larghezza). */
@media (max-width: 1200px){
.tfa-mostra__grid{ grid-template-columns: repeat(8, 1fr); }
}
@media (max-width: 1200px) and (min-width: 1101px){ /* 4 celle */
.tfa-mostra__grid:has(.tfa-mostra__item:nth-child(4n+1):last-child) .tfa-mostra__item:nth-last-child(1){ grid-column-start: 4; }
.tfa-mostra__grid:has(.tfa-mostra__item:nth-child(4n+2):last-child) .tfa-mostra__item:nth-last-child(2){ grid-column-start: 3; }
.tfa-mostra__grid:has(.tfa-mostra__item:nth-child(4n+3):last-child) .tfa-mostra__item:nth-last-child(3){ grid-column-start: 2; }
}
@media (max-width: 1100px){
.tfa-mostra__grid{ grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 1100px) and (min-width: 821px){ /* 3 celle */
.tfa-mostra__grid:has(.tfa-mostra__item:nth-child(3n+1):last-child) .tfa-mostra__item:nth-last-child(1){ grid-column-start: 3; }
.tfa-mostra__grid:has(.tfa-mostra__item:nth-child(3n+2):last-child) .tfa-mostra__item:nth-last-child(2){ grid-column-start: 2; }
}
@media (max-width: 820px){
.tfa-mostra__grid{ grid-template-columns: repeat(4, 1fr); }
.tfa-mostra__hero img{ height: clamp(260px, 46vh, 420px); }
}
@media (max-width: 820px) and (min-width: 561px){ /* 2 celle */
.tfa-mostra__grid:has(.tfa-mostra__item:nth-child(2n+1):last-child) .tfa-mostra__item:nth-last-child(1){ grid-column-start: 2; }
}
@media (max-width: 767px){
/* Card dei correlati: stesso respiro delle pagine negozio.
responsive.css da' 28px verticali solo dentro .tfa-shop-layout, classe
che qui non c'e': restava il padding generico di 8px !important e la
card si schiacciava (269px invece di 309). Cinque classi PIU'
!important, perche' la regola da battere ha entrambi. */
.tfa-mostra .tfa-mostra__related ul.products li.product > a.woocommerce-LoopProduct-link{
padding: 28px 12px !important;
}
/* Footer della card: responsive.css definisce il margine negativo per
ogni fascia (-20, -8, -28) ma sotto i 767px NON lo definisce, quindi
si ricade sul -55px del desktop e il titolo finisce SOPRA la foto
(misurato: -27px di sovrapposizione). Home e pagine negozio non se ne
accorgono perche' hanno il proprio -28px sotto .tfa-shop-layout.
Qui rimetto lo stesso -28px, cosi' le card si comportano uguale. */
.tfa-mostra .tfa-mostra__related ul.products li.product .p-card__footer{
margin-top: -28px !important;
}
/* Icona wishlist un filo piu' in alto su telefono: era a 10px e scendeva
sopra l'angolo della foto. Vale per TUTTE le card, non solo per i
correlati: l'icona e' identica ovunque e scostarla in un punto solo
creerebbe la disomogeneita' che stiamo togliendo. */
.woocommerce ul.products li.product .tfa-wl-btn{
top: 2px !important;
}
}
@media (max-width: 560px){
.tfa-mostra__grid{ grid-template-columns: repeat(2, 1fr); }
.tfa-mostra__title{ letter-spacing: .1em; }
/* su schermo stretto il giustificato apre "buchi" tra le parole */
.tfa-mostra__text{ text-align: left; }
}
/* ==========================================================================
Pattern Materiali (tfa/materiali) — inc/tfa-pattern-materiali.php
Tipografia allineata al pattern mostra: Nunito per i titoli, Jost per il
testo, colonna di lettura da 680px, larghezza massima 1800px.
========================================================================== */
.tfa-mat{
width: 100vw;
margin: 0 calc(50% - 50vw) 80px;
box-sizing: border-box;
}
/* stessa trappola di .tfa-mostra: [class*="col"] di alux.min.css */
.wp-block-group.tfa-mat{
padding-left: 0;
padding-right: 0;
}
.entry-content:has(.tfa-mat),
.wp-block-group:has(.tfa-mat),
.wp-block-column:has(.tfa-mat){
overflow: visible !important;
}
/* in front-end WordPress avvolge i gruppi in __inner-container */
.tfa-mat .wp-block-group__inner-container{ display: contents; }
/* I titoli restano centrati anche quando al gruppo viene applicata una
classe di utilita' del tema come .tfa-justify, che giustifica tutto con
!important. Su un titolo di una riga sola il giustificato e'
indistinguibile dall'allineato a sinistra: sembra che il centraggio non
funzioni, e invece e' il giustificato ad avere la meglio.
Servono due classi E !important per vincere. */
.tfa-mat .tfa-mat__title,
.tfa-mat .tfa-mat__heading{ text-align: center !important; }
.tfa-mat__title{
font-family: 'Nunito', sans-serif;
font-size: clamp(28px, 5vw, 64px);
font-weight: 300;
line-height: 1.2;
letter-spacing: .02em;
text-transform: lowercase;
color: #333333;
text-align: center;
margin: clamp(24px, 4vw, 48px) 0 clamp(28px, 4vw, 48px);
padding: 0 20px;
}
/* ---- Apertura: foto a sinistra, pannello chiaro a destra ---- */
.tfa-mat .tfa-mat__intro{
max-width: 1800px;
margin: 0 auto;
padding: 0 clamp(20px, 4vw, 64px);
box-sizing: border-box;
grid-template-columns: 50% 1fr;
}
.tfa-mat__intro .wp-block-media-text__media{
align-self: stretch;
margin: 0;
}
.tfa-mat__intro .wp-block-media-text__media img{
width: 100%;
height: 100%;
min-height: clamp(320px, 42vw, 640px);
object-fit: cover;
display: block;
}
.tfa-mat__intro .wp-block-media-text__content{
background: #f4f2f1;
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(32px, 5vw, 88px) !important;
}
.tfa-mat__intro-title{
font-family: 'Nunito', sans-serif;
font-size: clamp(24px, 2.6vw, 38px);
font-weight: 300;
line-height: 1.25;
color: #333333;
margin: 0 0 24px;
}
.tfa-mat__intro-text{
font-family: 'Jost', sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 1.75;
margin: 0;
}
/* ---- Sezioni di testo: colonna stretta centrata ---- */
/* Stessa larghezza del mosaico e della foto larga (1800px meno lo stesso
respiro laterale): i blocchi di testo si allineano ai bordi delle foto
invece di restare una colonna stretta al centro. */
.tfa-mat__section{
max-width: 1800px;
margin: 0 auto;
padding: clamp(48px, 6vw, 88px) clamp(20px, 4vw, 64px) 0;
box-sizing: border-box;
}
.tfa-mat__heading{
font-family: 'Nunito', sans-serif;
font-size: clamp(20px, 2vw, 26px);
font-weight: 400;
letter-spacing: .04em;
color: #333333;
margin: 0 0 18px;
/* Interlinea che si adatta al corpo invece di essere un rapporto fisso.
Questo titoletto puo' uscire a 20px (valore del pattern) o a 50px, se
la dimensione viene cambiata nell'editor: un numero solo non va bene
per entrambi, perche' l'interlinea deve STRINGERSI man mano che il
carattere cresce. La parte fissa (0.5rem = 8px) pesa molto sui corpi
piccoli e poco su quelli grandi, e fa il lavoro da sola:
20px -> 28 (1.40) 26px -> 34 (1.31) 34px -> 42 (1.24)
45px -> 53 (1.18) 50px -> 58 (1.16) 64px -> 72 (1.13)
Prima non era dichiarata affatto: ereditava dal tema, e a 26px
usciva 1.14, cioe' righe quasi attaccate. */
line-height: calc(1em + 0.5rem);
}
/* Interlinea di base per QUALUNQUE paragrafo del pattern, anche senza la
classe .tfa-mat__text. Scrivendo un paragrafo nuovo nell'editor, o
incollandone uno, la classe non c'e': il testo ereditava dal tema una
line-height FISSA di 22px, che su un corpo di 24px fa 0,92 e manda le
righe una sopra l'altra. Qui si mette il pavimento, poi le regole piu'
specifiche qui sotto rifiniscono. */
.tfa-mat p{ line-height: 1.75; }
.tfa-mat__text{
font-family: 'Jost', sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 1.75;
text-align: center;
margin: 0;
}
/* ---- Mosaico a cinque: due piccole | una grande | due piccole ---- */
.tfa-mat__mosaic{
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 1fr;
gap: clamp(10px, 1.4vw, 20px);
max-width: 1800px;
margin: clamp(56px, 7vw, 104px) auto 0;
padding: 0 clamp(20px, 4vw, 64px);
box-sizing: border-box;
}
/* La posizione la decide l'ORDINE, non la classe.
Prima dipendeva da .tfa-mat__mosaic-img--a/--b/--big/--c/--d, ma quelle
classi si perdono appena si sostituisce una foto nell'editor (si cancella
il blocco e se ne inserisce un altro, e la classe se ne va col blocco).
Il risultato era il mosaico sfasato con un buco al centro. Contando la
posizione, le foto si possono sostituire e riordinare liberamente: la
terza e' sempre la grande.
SI STILA .wp-block-image, NON figure. Gutenberg produce due strutture
diverse per lo stesso blocco immagine:
(caso semplice)
… (con didascalia,
link o classi)
La cella della griglia e' sempre l'elemento che porta .wp-block-image.
Stilando `figure` si colpiva quello annidato, che griglia non e': i
grid-area venivano ignorati, le righe restavano a 0px e il mosaico
spariva pur essendo nel codice. */
.tfa-mat__mosaic .wp-block-image{ margin: 0; min-height: 0; }
.tfa-mat__mosaic .wp-block-image > figure{ margin: 0; height: 100%; }
.tfa-mat__mosaic .wp-block-image:nth-child(1){ grid-area: 1 / 1 / 2 / 2; }
.tfa-mat__mosaic .wp-block-image:nth-child(2){ grid-area: 2 / 1 / 3 / 2; }
.tfa-mat__mosaic .wp-block-image:nth-child(3){ grid-area: 1 / 2 / 3 / 3; } /* la grande */
.tfa-mat__mosaic .wp-block-image:nth-child(4){ grid-area: 1 / 3 / 2 / 4; }
.tfa-mat__mosaic .wp-block-image:nth-child(5){ grid-area: 2 / 3 / 3 / 4; }
/* Il disegno si adatta a QUANTE foto ci sono, cosi' aggiungerne o toglierne
una non lascia buchi e non obbliga a reinserire il pattern (che e' un
modello: viene copiato all'inserimento e non si aggiorna da solo). */
/* tre foto: la grande prende tutta la parte destra */
.tfa-mat__mosaic:not(:has(.wp-block-image:nth-child(4)))
.wp-block-image:nth-child(3){ grid-area: 1 / 2 / 3 / 4; }
/* quattro foto: la quarta e' una colonna intera a destra */
.tfa-mat__mosaic:has(.wp-block-image:nth-child(4)):not(:has(.wp-block-image:nth-child(5)))
.wp-block-image:nth-child(4){ grid-area: 1 / 3 / 3 / 4; }
/* sei foto: la sesta in fascia sotto, a tutta larghezza */
.tfa-mat__mosaic:has(.wp-block-image:nth-child(6)){ grid-template-rows: 1fr 1fr 0.55fr; }
.tfa-mat__mosaic:has(.wp-block-image:nth-child(6))
.wp-block-image:nth-child(6){ grid-area: 3 / 1 / 4 / 4; }
/* l'altezza del mosaico la decide SOLO la foto grande (4:3): le piccole
riempiono la loro cella senza spingerla, anche se sono verticali */
.tfa-mat__mosaic .wp-block-image:not(:nth-child(3)){ position: relative; overflow: hidden; }
.tfa-mat__mosaic .wp-block-image:not(:nth-child(3)) img{ position: absolute; inset: 0; }
.tfa-mat__mosaic .wp-block-image img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.tfa-mat__mosaic .wp-block-image:nth-child(3) img{ aspect-ratio: 4 / 3; }
/* ---- Titolo centrato + tre foto in fila (pattern "materiali-tris") ----
Stessa larghezza e stesso respiro laterale del mosaico e delle sezioni
di testo, cosi' i bordi di tutta la pagina si allineano. Il titoletto e'
quello delle sezioni (.tfa-mat__heading): nessuno stile nuovo.
Il ritaglio 3:4 verticale e' il formato delle stampe e tiene le tre foto
della stessa altezza anche partendo da originali diversi. */
.tfa-mat__tris{
max-width: 1800px;
margin: 0 auto;
padding: clamp(48px, 6vw, 88px) clamp(20px, 4vw, 64px) 0;
box-sizing: border-box;
}
.tfa-mat__tris .tfa-mat__heading{ margin-bottom: clamp(24px, 3vw, 40px); }
.tfa-mat__tris-row{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(10px, 1.4vw, 20px);
}
/* se Gutenberg incapsula il gruppo, le foto restano celle della griglia */
.tfa-mat__tris-row > .wp-block-group__inner-container{ display: contents; }
.tfa-mat__tris-row .wp-block-image{ margin: 0; min-height: 0; }
.tfa-mat__tris-row .wp-block-image > figure{ margin: 0; height: 100%; }
.tfa-mat__tris-row .wp-block-image img{
display: block;
width: 100%;
height: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
}
/* ---- Testo + patchwork di tre foto (pattern "materiali-trio") ----
Stessa idea del mosaico grande, in mezza pagina: una foto alta a
sinistra che decide l'altezza, due impilate a destra. Il pannello di
testo riprende il colore e il respiro dell'apertura, cosi' le due
sezioni si parlano.
Anche qui si stila .wp-block-image e non figure, per lo stesso motivo
del mosaico: Gutenberg a volte avvolge la figure in un div, e la cella
della griglia e' sempre l'elemento con .wp-block-image. */
.tfa-mat .tfa-mat__trio{
max-width: 1800px;
margin: clamp(56px, 7vw, 104px) auto 0;
padding: 0 clamp(20px, 4vw, 64px);
box-sizing: border-box;
gap: 0;
}
.tfa-mat__trio .tfa-mat__trio-media{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: clamp(10px, 1.4vw, 20px);
}
.tfa-mat__trio-media .wp-block-image{ margin: 0; min-height: 0; }
.tfa-mat__trio-media .wp-block-image > figure{ margin: 0; height: 100%; }
/* foto a sinistra del testo: l'alta al bordo esterno, le due piccole
accanto al pannello */
.tfa-mat__trio-media .wp-block-image:nth-child(1){ grid-area: 1 / 1 / 3 / 2; }
.tfa-mat__trio-media .wp-block-image:nth-child(2){ grid-area: 1 / 2 / 2 / 3; }
.tfa-mat__trio-media .wp-block-image:nth-child(3){ grid-area: 2 / 2 / 3 / 3; }
/* foto a DESTRA del testo: il disegno si specchia, cosi' le due piccole
restano comunque accanto al pannello e l'alta va al bordo esterno.
Basta invertire le colonne nell'editor: qui si riconosce dal fatto che
la colonna delle foto e' la seconda. */
.tfa-mat__trio-media:nth-child(2) .wp-block-image:nth-child(1){ grid-area: 1 / 2 / 3 / 3; }
.tfa-mat__trio-media:nth-child(2) .wp-block-image:nth-child(2){ grid-area: 1 / 1 / 2 / 2; }
.tfa-mat__trio-media:nth-child(2) .wp-block-image:nth-child(3){ grid-area: 2 / 1 / 3 / 2; }
.tfa-mat__trio-media .wp-block-image img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* la prima detta l'altezza, le altre due riempiono la loro cella */
.tfa-mat__trio-media .wp-block-image:nth-child(1) img{ height: auto; aspect-ratio: 3 / 4; }
.tfa-mat__trio-media .wp-block-image:not(:nth-child(1)){ position: relative; overflow: hidden; }
.tfa-mat__trio-media .wp-block-image:not(:nth-child(1)) img{ position: absolute; inset: 0; }
.tfa-mat__trio .tfa-mat__trio-content{
background: #f4f2f1;
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(32px, 5vw, 88px);
}
/* ---- Foto larga ---- */
.tfa-mat .tfa-mat__wide{
max-width: 1800px;
margin: clamp(56px, 7vw, 104px) auto 0;
padding: 0 clamp(20px, 4vw, 64px);
box-sizing: border-box;
}
.tfa-mat__wide img{
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
/* ---- Bottone finale: stesso del pattern mostra ---- */
.tfa-mat__cta{ justify-content: center; margin-top: clamp(48px, 6vw, 80px); }
.tfa-mat__cta .wp-block-button__link{
background: #ae8687 !important;
color: #fff !important;
border: 0 !important;
border-radius: 0 !important;
font-family: 'Nunito', sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
padding: 16px 34px;
transition: background .2s ease;
}
.tfa-mat__cta .wp-block-button__link:hover{ background: #333 !important; }
@media (max-width: 781px){
/* Apertura impilata: foto sopra, testo sotto.
Trappola: Assets/css/responsive.css (sotto i 767px, caricato DOPO
style.css) tiene AFFIANCATI tutti i Media&Text del sito (39% / resto,
pensato per la pagina Artist) e rimpicciolisce titolo e testo, tutto
con !important. Per questo qui servono 4 classi + !important. */
.tfa-mat .wp-block-media-text.tfa-mat__intro{ grid-template-columns: 100% !important; }
.tfa-mat .wp-block-media-text.tfa-mat__intro > .wp-block-media-text__media{
grid-column: 1 !important; grid-row: 1 !important;
}
.tfa-mat .wp-block-media-text.tfa-mat__intro > .wp-block-media-text__content{
grid-column: 1 !important; grid-row: 2 !important;
padding: 32px 24px !important;
}
.tfa-mat .tfa-mat__intro .wp-block-media-text__media img{
min-height: 0; aspect-ratio: 4 / 3; object-fit: cover !important;
}
.tfa-mat .tfa-mat__intro .wp-block-media-text__content h2.tfa-mat__intro-title{
font-size: 24px !important; letter-spacing: 0 !important; line-height: 1.25 !important;
}
.tfa-mat .tfa-mat__intro .wp-block-media-text__content p.tfa-mat__intro-text{
font-size: 16px !important; line-height: 1.75 !important;
}
/* !important perche' piu' sopra i titoletti sono centrati con !important
per battere .tfa-justify: senza, qui non tornerebbero a sinistra. */
.tfa-mat__text{ text-align: left; }
.tfa-mat .tfa-mat__heading{ text-align: left !important; }
}
@media (max-width: 560px){
/* tre foto in fila diventerebbero tre strisce da ~170px: si impilano */
.tfa-mat__tris-row{ grid-template-columns: 1fr; }
}
@media (max-width: 900px){
/* Su schermo stretto le due colonne laterali diventerebbero due strisce:
la grande passa sopra a tutta larghezza e le quattro piccole si
dispongono due per riga, quadrate. */
.tfa-mat__mosaic{ grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; }
.tfa-mat__mosaic .wp-block-image:nth-child(3){ grid-area: 1 / 1 / 2 / 3; }
.tfa-mat__mosaic .wp-block-image:nth-child(1){ grid-area: 2 / 1 / 3 / 2; }
.tfa-mat__mosaic .wp-block-image:nth-child(2){ grid-area: 2 / 2 / 3 / 3; }
.tfa-mat__mosaic .wp-block-image:nth-child(4){ grid-area: 3 / 1 / 4 / 2; }
.tfa-mat__mosaic .wp-block-image:nth-child(5){ grid-area: 3 / 2 / 4 / 3; }
.tfa-mat__mosaic .wp-block-image:not(:nth-child(3)) img{ position: static; aspect-ratio: 1; }
/* qui la grande e' gia' sopra a tutta larghezza: le varianti a 3, 4 e 6
foto devono solo aggiungere o togliere righe */
.tfa-mat__mosaic:not(:has(.wp-block-image:nth-child(4)))
.wp-block-image:nth-child(3){ grid-area: 1 / 1 / 2 / 3; }
.tfa-mat__mosaic:has(.wp-block-image:nth-child(4)):not(:has(.wp-block-image:nth-child(5)))
.wp-block-image:nth-child(4){ grid-area: 3 / 1 / 4 / 3; }
.tfa-mat__mosaic:has(.wp-block-image:nth-child(6)){ grid-template-rows: auto auto auto auto; }
.tfa-mat__mosaic:has(.wp-block-image:nth-child(6))
.wp-block-image:nth-child(6){ grid-area: 4 / 1 / 5 / 3; }
}