/* 
    ================================================
        !INIZIO! 

        PARTE FILO PER COLORI DINAMICI DI CARD 
        CATEGORIE E PRODOTTI CREA LA TUA BOX
    ================================================
*/

/* 
    ==========================================
        DEFINIZIONE COLORI
    ========================================== 
*/
:root 
{
    /* PALETTE COLORI (Base e Contrasto) */
    --clr-rosa: #F9BED9;
    --clr-rosa-contrasto: #9F315F;
    --clr-viola: #D3B8D6; 
    --clr-viola-contrasto: #6B3F78;
    --clr-blu: #ACCEEC; 
    --clr-blu-contrasto: #245A96;
    --clr-verde: #B9DAB3; 
    --clr-verde-contrasto: #2F6F2F;
    --clr-giallo: #FEE5A3; 
    --clr-giallo-contrasto: #B66B00;

    --clr-crea-box: #4d3a30;

    /* FONT */
    --title-prodotto-crea-box-font-size: 16px;
}

/* 
    ==========================================
        Definizione dei colori basandosi su quale frutto è, lo capisce cercando dei match nel nome dell'immagine:
        es.:
            .product-card-diag[data-frutto-immagine*="Albicocca"] -> Questo è per le pagine di categorie
            .woosb-product:has(img[src*="Albicocca"]) -> Questo è per la pagina prodotto delle box
    ========================================== 
*/

/* VIOLA */
.product-card-diag[data-frutto-immagine*="Albicocca"],
.woosb-product:has(img[src*="Albicocca"]),

.product-card-diag[data-frutto-immagine*="Prugna-2"],
.woosb-product:has(img[src*="Prugna-2"]),

.product-card-diag[data-frutto-immagine*="frutta-gelato-Fico-1"],
.woosb-product:has(img[src*="frutta-gelato-Fico-1"]),

.product-card-diag[data-frutto-immagine*="Lime-1"],
.woosb-product:has(img[src*="Lime-1"]),

.product-card-diag[data-frutto-immagine*="mix-agrumi"],
.woosb-product:has(img[src*="mix-agrumi"]),

.product-card-diag[data-frutto-immagine*="Kumqat-1"],
.woosb-product:has(img[src*="Kumqat-1"]),

.product-card-diag[data-frutto-immagine*="scheda-box-frutta-gelato-mista"],
.woosb-product:has(img[src*="scheda-box-frutta-gelato-mista"])
{
    --colore-main: var(--clr-viola);
    --colore-contrasto: var(--clr-viola-contrasto);
    --card-text-color: var(--clr-viola-contrasto);
}

/* BLU */
.product-card-diag[data-frutto-immagine*="frutta-gelato-Fico-dindia-2"],
.woosb-product:has(img[src*="frutta-gelato-Fico-dindia-2"]),

.product-card-diag[data-frutto-immagine*="pera--"],
.woosb-product:has(img[src*="pera--"]),

.product-card-diag[data-frutto-immagine*="Arancia--"],
.woosb-product:has(img[src*="Arancia--"]),

.product-card-diag[data-frutto-immagine*="Kiwi-2"],
.woosb-product:has(img[src*="Kiwi-2"]),

.product-card-diag[data-frutto-immagine*="Limone-1"],
.woosb-product:has(img[src*="Limone-1"]),

.product-card-diag[data-frutto-immagine*="Bananito-1"],
.woosb-product:has(img[src*="Bananito-1"]),

.product-card-diag[data-frutto-immagine*="Melograno"],
.woosb-product:has(img[src*="Melograno"]),

.product-card-diag[data-frutto-immagine*="pera-"],
.woosb-product:has(img[src*="pera-"]),

.product-card-diag[data-frutto-immagine*="Arancia-"],
.woosb-product:has(img[src*="Arancia-"]),

.product-card-diag[data-frutto-immagine*="mix-esotici"],
.woosb-product:has(img[src*="mix-esotici"]),

.product-card-diag[data-frutto-immagine*="Arachidi-1"],
.woosb-product:has(img[src*="Arachidi-1"])
{
    --colore-main: var(--clr-blu);
    --colore-contrasto: var(--clr-blu-contrasto);
    --card-text-color: var(--clr-blu-contrasto);
}

/* VERDE */
.product-card-diag[data-frutto-immagine*="Mandarino-1"],
.woosb-product:has(img[src*="Mandarino-1"]),

.product-card-diag[data-frutto-immagine*="Mela-1"],
.woosb-product:has(img[src*="Mela-1"]),

.product-card-diag[data-frutto-immagine*="Nespola-"],
.woosb-product:has(img[src*="Nespola-"]),

.product-card-diag[data-frutto-immagine*="Noce-1"],
.woosb-product:has(img[src*="Noce-1"])
{
    --colore-main: var(--clr-verde);
    --colore-contrasto: var(--clr-verde-contrasto);
    --card-text-color: var(--clr-verde-contrasto);
}

/* GIALLO */
.product-card-diag[data-frutto-immagine*="Pesca-2"],
.woosb-product:has(img[src*="Pesca-2"]), 

.product-card-diag[data-frutto-immagine*="Castagna-1"],
.woosb-product:has(img[src*="Castagna-1"]), 

.product-card-diag[data-frutto-immagine*="mix-frutta-secca"],
.woosb-product:has(img[src*="mix-frutta-secca"]), 

.product-card-diag[data-frutto-immagine*="Mela-Verde"],
.woosb-product:has(img[src*="Mela-Verde"])
{
    --colore-main: var(--clr-giallo);
    --colore-contrasto: var(--clr-giallo-contrasto);
    --card-text-color: var(--clr-giallo-contrasto);
}

/* ROSA */
.product-card-diag[data-frutto-immagine*="passione-1"],
.woosb-product:has(img[src*="passione-1"]), 

.product-card-diag[data-frutto-immagine*="fragola-"],
.woosb-product:has(img[src*="fragola-"]), 

.product-card-diag[data-frutto-immagine*="Dattero-1"],
.woosb-product:has(img[src*="Dattero-1"]),

.product-card-diag[data-frutto-immagine*="crea-tua-box"],
.woosb-product:has(img[src*="crea-tua-box"])
{
    --colore-main: var(--clr-rosa);
    --colore-contrasto: var(--clr-rosa-contrasto);
    --card-text-color: var(--clr-rosa-contrasto);
}

/* Out of stock */
.elementor.e-loop-item.outofstock a.card-wave-btn {
    cursor: not-allowed !important;
}

/* APPLICAZIONE CSS DINAMICO E STATICO */

.elementor-element.product-card-diag p.price {
    /* position: absolute;
    width: 80%; */
    color: var(--card-text-color, white) !important;
}

/* Pagina box prodotto */

.woosb-product {
    border-radius: 30px !important;
    background: var(--colore-main, transparent) !important;
    border-color: transparent !important;
}
.woosb-product:hover {
    border-color: transparent !important;
}

/* IMMAGINE SFUMATA AI BORDI (MASCHERA) */

.woosb-product .woosb-thumb-ori {
    display: block;
    border-radius: 30px !important;
    overflow: hidden;
}

.woosb-product .woosb-thumb-ori img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 30px !important;
    
    /* Applica la maschera: nera (100% visibile) al centro, trasparente ai bordi */
    -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%);
    mask-image: radial-gradient(circle, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%);
}

/* Immagini */
.woosb-product img {
    border-radius: 30px !important;
}

/* Titoli dei Prodotti */
.woosb-product .woosb-title .woosb-name a {
    color: var(--colore-contrasto, inherit) !important;
    font-size: var(--title-prodotto-crea-box-font-size) !important;
}

/* Pulsanti Più e Meno */
.woosb-product .woosb-quantity-input-plus, 
.woosb-product .woosb-quantity-input-minus {
    border-radius: 30px !important;
    border: 1px solid transparent !important;
    background-color: var(--colore-contrasto, transparent) !important;
    color: white !important;
}
.woosb-product .woosb-quantity-input-plus:hover, 
.woosb-product .woosb-quantity-input-minus:hover {
    border-color: var(--colore-main) !important;
}

/* Altri dettagli di formattazione */
.quantity .qty {
    width: fit-content !important;
    padding: 0 !important; 
}
.woosb-products .woosb-product .woosb-price * {
    display: none !important;
}
.woosb-alert {
    padding: 6px 10px 6px 14px;
    border-left: 4px solid #4d3a30;
    background-color: var(--e-global-color-secondary) !important;
    color: #4d3a30 !important;
    font-weight: bold;
    font-size: 16px;
}

/* 
    ================================================
        !FINE! 

        PARTE FILO PER COLORI DINAMICI DI CARD 
        CATEGORIE E PRODOTTI CREA LA TUA BOX
    ================================================
*/

/*testi hero*/

/* stato iniziale */
.hero-text-slide .elementor-heading-title{
  opacity: 0;
  transform: translateY(40px);
  animation: heroTextSoftUp 1.6s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
  will-change: transform, opacity;
}

/* piccolo sfalsamento naturale */
.hero-text-slide:nth-of-type(1) .elementor-heading-title{ animation-delay: .2s; }
.hero-text-slide:nth-of-type(2) .elementor-heading-title{ animation-delay: .35s; }
.hero-text-slide:nth-of-type(3) .elementor-heading-title{ animation-delay: .5s; }

@keyframes heroTextSoftUp{
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce){
  .hero-text-slide .elementor-heading-title{
    animation: none;
    opacity: 1;
    transform: none;
  }
}


/*ninja form*/

.nf-form-fields-required {
    display: none;
}

/* accordion */

.e-n-accordion-item[open] > summary{
    border-radius: 30px 30px 0px 0px !important;
}



/*pulsante wave*/

.wave-btn,
.wave-btn-hero {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 10px 32px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    background-color: var(--e-global-color-primary);
    overflow: visible !important;
}

.wave-btn-hero {
    background-color: var(--e-global-color-0129c2c) !important;
}

.wave-btn .elementor-button-text,
.wave-btn-hero .elementor-button-text {
    display: inline-flex !important;
    align-items: center !important;
    overflow: visible !important;
    height: calc(var(--e-global-typography-accent-line-height) * 1.4) !important;
    padding: 4px 0 !important;
}

.wave-btn span,
.wave-btn-hero span {
    display: inline-block !important;
    font-family: var(--e-global-typography-accent-font-family), Sans-serif !important;
    font-size: var(--e-global-typography-accent-font-size) !important;
    font-weight: var(--e-global-typography-accent-font-weight) !important;
    text-transform: var(--e-global-typography-accent-text-transform) !important;
    line-height: var(--e-global-typography-accent-line-height) !important;
    color: #fdfdfd !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    transform-style: preserve-3d !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

.xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn,
.xoo-wsc-container .xoo-wsc-btn,
.xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn .elementor-button-text,
.xoo-wsc-container .xoo-wsc-btn .elementor-button-text{
    overflow: visible !important;
}

.xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn .elementor-button-text span,
.xoo-wsc-container .xoo-wsc-btn .elementor-button-text span{
    display: inline-block !important;
}

/*end pulsante wave*/




/*personalizzazione scheda prodotto*/

/*label scegli opzione kg*/

table tbody>tr:nth-child(odd)>td, table tbody>tr:nth-child(odd)>th {
    background-color: #fdfdfd !important;
}

@media only screen and (max-width: 767px) {
	table.variations tbody tr {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}	
}
																																																							a.reset_variations {
	margin-top:10px !important;
	color:var(--e-global-color-6dd7c49) !important;
	font-family: var(--e-global-typography-text-font-family), Sans-serif !important;
    font-size: var(--e-global-typography-text-font-size) !important;
    font-weight: 600 !important;
    line-height: var(--e-global-typography-text-line-height) !important;
	text-transform:uppercase !important;
}

table td, table th {
    padding: 0px 15px 0px 0px !important;
}

select#pa_confezione {
    outline-color: transparent !important;
	width:32vw;
}

@media only screen and (max-width: 767px) {
	select#pa_confezione {
	width:84vw;
}
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	select#pa_confezione {
	width:68vw;
 }
}

/*end label scegli opzione kg*/

/*spazio pulsante*/
.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-disabled {
    margin-bottom: 30px !important;
}

button.single_add_to_cart_button.button.alt.wave-btn{
	width: 37vw;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	button.single_add_to_cart_button.button.alt {
    width: 74vw !important;
}
}
/*end spazio pulsante*/

/*prezzo confezione selezionata*/

.woocommerce-variation-price {
    margin-bottom: 20px !important;
}

.woocommerce .elementor-233450 .elementor-element.elementor-element-31e22d9c form.cart .variations {

    margin-bottom: -12px !important;
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price {
color:var(--e-global-color-primary) !important;
    font-family: var(--e-global-typography-9e9bd75-font-family), Sans-serif !important;
    font-size: var(--e-global-typography-9e9bd75-font-size) !important;
    font-weight: var(--e-global-typography-9e9bd75-font-weight) !important;
    line-height: var(--e-global-typography-9e9bd75-line-height) !important;
}

/*end prezzo confezione selezionata*/

/*end personalizzazione scheda prodotto*/




/*cart laterale*/

.xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn,
.xoo-wsc-container .xoo-wsc-btn{
	border-radius: 100px !important;
	border: none !important;
	text-decoration: none !important;
	font-family: var(--e-global-typography-accent-font-family), Sans-serif !important;
    font-size: var(--e-global-typography-accent-font-size) !important;
    font-weight: var(--e-global-typography-accent-font-weight) !important;
    text-transform: var(--e-global-typography-accent-text-transform) !important;
    line-height: var(--e-global-typography-accent-line-height) !important;
}

.xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn.wave-btn-hero,
.xoo-wsc-container .xoo-wsc-btn.wave-btn-hero{
	width: 100% !important;
	min-height: 56px !important;
	padding: 10px 32px !important;
	background-color: var(--e-global-color-0129c2c) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: visible !important;
}

.xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn.wave-btn-hero .elementor-button-text,
.xoo-wsc-container .xoo-wsc-btn.wave-btn-hero .elementor-button-text{
	color: #fdfdfd !important;
	display: inline-flex !important;
	align-items: center !important;
	overflow: visible !important;
	height: calc(var(--e-global-typography-accent-line-height) * 1.4) !important;
	padding: 4px 0 !important;
	font-family: var(--e-global-typography-accent-font-family), Sans-serif !important;
	font-size: var(--e-global-typography-accent-font-size) !important;
	font-weight: var(--e-global-typography-accent-font-weight) !important;
	text-transform: var(--e-global-typography-accent-text-transform) !important;
	line-height: var(--e-global-typography-accent-line-height) !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
	transform-style: preserve-3d !important;
	backface-visibility: hidden !important;
	-webkit-backface-visibility: hidden !important;
}

.xoo-wsc-icon-del1:before {
    content: "\e915";
    color: #d9534f;
}

/* Contenitore principale del side cart */
.xoo-wsc-container {
  border-radius: 30px 0 0 30px !important;
  overflow: hidden !important;
 
}



/*end cart laterale*/




/* 
=========================================================
  CARD FRUTTA GELATO LOOP 
========================================================= 
*/

.card-wave-btn {
  position: absolute;
  top: -3em;
  right: 0;
  z-index: 1;
}

/* Wrapper che contiene icone + pulsante — stesso posizionamento absolute del pulsante */
.card-btn-tag-wrap {
    position: absolute !important;
    top: -3em !important;
    right: 0 !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Dentro il wrapper il pulsante non ha più bisogno di position absolute */
.card-btn-tag-wrap .card-wave-btn {
    position: static !important;
}



/* TESTO CERCHIO CHE RUOTA */

.container-img-gelato {
	position: relative;	
}

.text-circle {
  color: #4D3A30;
  font-size: 36px;
  font-weight: 700;
  text-transform: uppercase;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.text-circle{
		font-size: 24px;
	}
}

@media only screen and (max-width: 767px){
	.text-circle{
		font-size: 20px;
	}
}

.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.container-img-gelato{
  position:relative;
  min-height:520px;
  overflow:hidden;
}

/* testo circolare al centro */
.container-img-gelato .circle {
  position:absolute;
  top:50%;
  left:50%;
  z-index:2;
}

.circle { transform: translate(-50%, -50%); }
.circle.circle-home { transform: translate(-50%, 40%); }
.circle.circle-granite { transform: translate(-50%, 30%); }
.circle.circle-gelato-da-passeggio { transform: translate(-50%, 18%); }
.circle.circle-frutta-gelato { transform: translate(-50%, 24%); }
.circle.circle-torte-gelato { transform: translate(-50%, 6%); }

@media only screen and (min-width: 768px) and (max-width: 1024px){
	.container-img-gelato .circle,
	.container-img-gelato .circle.circle-home,
	.container-img-gelato .circle.circle-granite,
	.circle.circle-frutta-gelato
	{ transform:translate(-50%, 49%); }
	.circle.circle-gelato-da-passeggio { transform: translate(-50%, 24%); }
	.circle.circle-torte-gelato { transform: translate(-50%, 20%); }
}


@media only screen and (max-width: 767px){
	.container-img-gelato .circle,
	.container-img-gelato .circle.circle-home,
	.container-img-gelato .circle.circle-granite,
	.circle.circle-frutta-gelato
	{ transform:translate(-50%, 17%);}
	.circle.circle-gelato-da-passeggio { transform:translate(-50%, 26%); }
	.circle.circle-torte-gelato { transform: translate(-50%, 6%); }
}

/* overlay gelato sopra al testo */
.container-img-gelato .gelato-overlay{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}

.container-img-gelato .gelato-overlay img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/*codice container sfondo blu home per nascondere testi fuori dal div*/
.jes-clip-container {
  overflow: hidden !important;
  position: relative !important;
  isolation: isolate !important;
}


/* =========================================================
   NINJA FORM — pulsante submit con stile wave-btn
   ========================================================= */

.nf-field-container.submit-container input[type="submit"].wave-btn,
input.ninja-forms-field[type="submit"].wave-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 10px 32px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    background-color: var(--e-global-color-primary) !important;
    overflow: visible !important;
    font-family: var(--e-global-typography-accent-font-family), Sans-serif !important;
    font-size: var(--e-global-typography-accent-font-size) !important;
    font-weight: var(--e-global-typography-accent-font-weight) !important;
    text-transform: var(--e-global-typography-accent-text-transform) !important;
    line-height: var(--e-global-typography-accent-line-height) !important;
    color: #fdfdfd !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}


/* =========================================================
   NINJA FORMS — submit button sostituito via JS con <button>
   ========================================================= */

.nf-field-element button[type="submit"].wave-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 10px 32px !important;
    min-height: 48px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    background-color: var(--e-global-color-primary) !important;
    overflow: visible !important;
    width: 100% !important;

    /* font identico agli altri wave-btn */
    font-family: var(--e-global-typography-accent-font-family), Sans-serif !important;
    font-size: var(--e-global-typography-accent-font-size) !important;
    font-weight: var(--e-global-typography-accent-font-weight) !important;
    text-transform: var(--e-global-typography-accent-text-transform) !important;
    line-height: var(--e-global-typography-accent-line-height) !important;
    color: #fdfdfd !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.nf-field-element button[type="submit"].wave-btn .elementor-button-text {
    display: inline-flex !important;
    align-items: center !important;
    overflow: visible !important;
    height: calc(var(--e-global-typography-accent-line-height) * 1.4) !important;
    padding: 4px 0 !important;
}

.nf-field-element button[type="submit"].wave-btn .elementor-button-text span {
    display: inline-block !important;
    font-family: var(--e-global-typography-accent-font-family), Sans-serif !important;
    font-size: var(--e-global-typography-accent-font-size) !important;
    font-weight: var(--e-global-typography-accent-font-weight) !important;
    text-transform: var(--e-global-typography-accent-text-transform) !important;
    line-height: var(--e-global-typography-accent-line-height) !important;
    color: #fdfdfd !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    transform-style: preserve-3d !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}


/* =========================================================
   PRODUCT TAG ICONS — card loop (solo icone)
   Il widget shortcode Elementor prende larghezza 100% di default:
   .elementor-widget:has(.seppia-tag-icons) lo forza a width:auto
   così rimane compatto affiancato al pulsante Scopri.
   Il contenitore padre "pulsante" in Elementor: flex-row, align:center.
   ========================================================= */

.elementor-widget:has(.seppia-tag-icons) {
    width: auto !important;
    flex-shrink: 0 !important;
}

.seppia-tag-icons {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
}

.seppia-tag-icon-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.85) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    flex-shrink: 0 !important;
}

.seppia-tag-icon-link:hover {
    transform: scale(1.12) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

.seppia-tag-icon-img {
    width: 32px !important;
    height: 32px !important;
    object-fit: contain !important;
    display: block !important;
}


/* =========================================================
   PRODUCT TAG PILLS — scheda prodotto (icona + testo)
   ========================================================= */

.seppia-tag-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}


.seppia-tag-pill.wave-btn {
    background-color: var(--e-global-color-primary) !important;
    text-decoration: none !important;
    padding: 4px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important; /* gap tra img e span testo — ok perché img non è dentro il flex delle lettere */
}

.seppia-tag-pill.wave-btn .elementor-button-text {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important; /* ZERO: il gap si applicherebbe a ogni span-lettera */
    height: calc(var(--e-global-typography-accent-line-height) * 1.4) !important;
    overflow: visible !important;
}

/* Span lettere del wave: colore secondary, no letter-spacing aggiuntivo */
.seppia-tag-pill.wave-btn .elementor-button-text span {
    color: #fdfdfd !important;
   /* font-family: var(--e-global-typography-accent-font-family), Sans-serif !important;
    font-size: var(--e-global-typography-accent-font-size) !important;
    font-weight: var(--e-global-typography-accent-font-weight) !important;
    text-transform: var(--e-global-typography-accent-text-transform) !important;
    line-height: var(--e-global-typography-accent-line-height) !important;*/
    letter-spacing: 0 !important;
        font-family: var(--e-global-typography-61c51fc-font-family), Sans-serif !important;
    font-size: var(--e-global-typography-61c51fc-font-size) !important;
    font-weight: var(--e-global-typography-61c51fc-font-weight) !important;
    text-transform: var(--e-global-typography-61c51fc-text-transform) !important;
    line-height: var(--e-global-typography-61c51fc-line-height) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    transform-style: preserve-3d !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

.seppia-tag-pill-icon {
    width: 26px !important;
    height: 26px !important;
    object-fit: contain !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    /* margin-right gestito dal gap del flex parent */
}

@media only screen and (max-width: 767px) {
	.seppia-tag-pills {
    display: flex !important;
	flex-direction:column !important;
	gap: 14px !important;
	width:40vw !important;
}
}



/*search and filter*/
/* ========== SEARCH & FILTER — CHECKBOX + RADIO ========== */

/* Layout in row */
div[id^="search-filter-input-checkbox-"],
div[id^="search-filter-input-radio-"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    align-items: center !important;
}

@media only screen and (max-width: 767px){
	div[id^="search-filter-input-checkbox-"],
div[id^="search-filter-input-radio-"] {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    align-items: start !important;
	}
}

/* Tipografia su tutto */
.search-filter-input-checkbox *,
.search-filter-input-radio * {
    font-family: var(--e-global-typography-0dfff15-font-family), Sans-serif !important;
    font-size: var(--e-global-typography-0dfff15-font-size) !important;
    font-weight: var(--e-global-typography-0dfff15-font-weight) !important;
    text-transform: var(--e-global-typography-0dfff15-text-transform) !important;
    line-height: var(--e-global-typography-0dfff15-line-height) !important;
}

/* Nasconde SVG originale checkbox */
.search-filter-input-checkbox__control {
    display: none !important;
}

/* Crea cerchio tramite span control — stesso stile radio */
.search-filter-input-checkbox__container {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
}

/* Cerchio vuoto — usiamo l'SVG del radio via background */
.search-filter-input-checkbox .search-filter-input-checkbox__container::before {
    content: '' !important;
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    border-radius: 50% !important;
    border: 2px solid var(--e-global-color-0129c2c) !important;
    background: transparent !important;
    margin-right: 10px !important;
    transition: background 0.2s !important;
}

/* Cerchio pieno quando attivo */
.search-filter-input-checkbox--is-active .search-filter-input-checkbox__container::before {
    background: var(--e-global-color-0129c2c) !important;
}

/* Radio attivo */
.search-filter-input-radio--is-active
  > .search-filter-input-radio__container
  > .search-filter-input-radio__control
  > svg {
    fill: var(--e-global-color-0129c2c) !important;
    color: var(--e-global-color-0129c2c) !important;
}

/* Label underline */
span.search-filter-input-checkbox__label,
span.search-filter-input-radio__label {
    padding-bottom: 4px !important;
    padding-left: 0px !important;
    border-bottom: 2px solid var(--e-global-color-0129c2c) !important;
}

/* Dimensione control radio */
span.search-filter-input-radio__control {
    padding-right: 10px !important;
    width: 38px !important;
    height: 28px !important;
}

/* Reset pulsante filled */
button.search-filter-input-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    padding: 10px 32px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    background-color: var(--e-global-color-0129c2c) !important;
    border: 2px solid var(--e-global-color-0129c2c) !important;
    box-shadow: none !important;
    width: auto !important;
    transition: all .3s !important;
    font-family: var(--e-global-typography-accent-font-family), Sans-serif !important;
    font-size: var(--e-global-typography-accent-font-size) !important;
    font-weight: var(--e-global-typography-accent-font-weight) !important;
    text-transform: var(--e-global-typography-accent-text-transform) !important;
    color: #fdfdfd !important;
    text-decoration: none !important;
}

button.search-filter-input-button:hover,
button.search-filter-input-button:focus {
    background-color: transparent !important;
    color: var(--e-global-color-0129c2c) !important;
    outline: none !important;
    text-decoration: none !important;
}

.search-filter-field--type-control.search-filter-style--control-reset {
    display: inline-flex !important;
    align-items: center !important;
}

span.search-filter-input-checkbox__label {
    color: var(--e-global-color-0129c2c) !important;
}

/* ========== END SEARCH & FILTER ========== */
/*end search and filter*/

/*carrello pagina*/

@media only screen and (max-width: 767px) {
	td.product-name, td.product-quantity {
    padding-bottom: 20px !important;
    padding-top: 20px !important;
 }
	 .elementor-widget-woocommerce-cart .woocommerce table.cart tr {
        padding: 16px 0px !important;
    }
	.cart_totals {
    margin-top: 78px;
	}
	
	tr.order-total {
    margin-top: 70px;
	}
		a.checkout-button.button.alt.wc-forward {
		width: 100%;
	}
	
	.woocommerce a.remove{
		font-size:2.5em !important;
	}
	.elementor-widget-woocommerce-cart .woocommerce table.cart img {
		width:90px !important;
	}
}

a.shipping-calculator-button {
    margin-bottom: 52px;
}

/* Mostra comunque le thumbnail da mobile nel carrello */

@media only screen and (max-width: 1024px){
	    .woocommerce #content table.cart .product-thumbnail, .woocommerce table.cart .product-thumbnail, .woocommerce-page #content table.cart .product-thumbnail, .woocommerce-page table.cart .product-thumbnail {
		display: block !important;
	}
}

.woocommerce-page table.shop_table_responsive tr .product-thumbnail::before {
	display: none !important;
}

/*end Mostra comunque le thumbnail da mobile nel carrello */

/*end carrello pagina*/

/*pagina account*/

a.woocommerce-button.button.view {
	margin-bottom:20px;
}

th.woocommerce-orders-table__header.woocommerce-orders-table__header-order-actions, .woocommerce-orders-table__header-order-total, .woocommerce-orders-table__header-order-status, .woocommerce-orders-table__header-order-date, .woocommerce-orders-table__header-order-number {
    padding-bottom: 20px !important;
}

/*messaggi info*/
.woocommerce-info {
    border-top-color: #4D3A30 !important;
}

.woocommerce-error, .woocommerce-info, .woocommerce-message {
    border-top: 3px solid #4D3A30 !important;
}

.woocommerce-info::before{
	color:#4D3A30 !important;
}

.woocommerce-info a{
    background-color: #4D3A30 !important;
    color: #fdfdfd !important;
    border-radius: 100px !important;
    padding: 14px 32px !important;
	    font-family: var(--e-global-typography-accent-font-family), Sans-serif !important;
    font-size: var(--e-global-typography-accent-font-size) !important;
    font-weight: var(--e-global-typography-accent-font-weight) !important;
    text-transform: var(--e-global-typography-accent-text-transform) !important;
    line-height: var(--e-global-typography-accent-line-height) !important;
 
}


/* =========================================================
   WOOCOMMERCE BUTTONS — stile wave-btn
   ========================================================= */

a.checkout-button,
button#place_order,
button[name="save_account_details"],
button.woocommerce-Button,
a.woocommerce-button.button,
a.button.wc-forward,
.woocommerce-MyAccount-content a.button,
button.e-apply-coupon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    padding: 10px 32px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    background-color: var(--e-global-color-primary) !important;
    border: none !important;
    box-shadow: none !important;
    font-family: var(--e-global-typography-accent-font-family), Sans-serif !important;
    font-size: var(--e-global-typography-accent-font-size) !important;
    font-weight: var(--e-global-typography-accent-font-weight) !important;
    text-transform: var(--e-global-typography-accent-text-transform) !important;
    line-height: var(--e-global-typography-accent-line-height) !important;
    color: #fdfdfd !important;
    -webkit-font-smoothing: antialiased !important;
    overflow: visible !important;
}

a.checkout-button span,
button#place_order span,
button[name="save_account_details"] span,
button.woocommerce-Button span,
a.woocommerce-button.button span,
a.button.wc-forward span,
.woocommerce-MyAccount-content a.button span,
button.e-apply-coupon span {
    display: inline-block !important;
    color: #fdfdfd !important;
    font-family: var(--e-global-typography-accent-font-family), Sans-serif !important;
    font-size: var(--e-global-typography-accent-font-size) !important;
    font-weight: var(--e-global-typography-accent-font-weight) !important;
    text-transform: var(--e-global-typography-accent-text-transform) !important;
    line-height: var(--e-global-typography-accent-line-height) !important;
    -webkit-font-smoothing: antialiased !important;
    transform-style: preserve-3d !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

/* =========================================================
   END WOOCOMMERCE BUTTONS
   ========================================================= */

/* =========================================================
   WOOCOMMERCE BUTTONS — stile wave-btn
   ========================================================= */

a.checkout-button,
button#place_order,
button[name="save_account_details"],
button.woocommerce-Button,
a.woocommerce-button.button,
a.button.wc-forward,
.woocommerce-MyAccount-content a.button,
button.e-apply-coupon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    padding: 10px 32px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    background-color: var(--e-global-color-primary) !important;
    border: none !important;
    box-shadow: none !important;
    font-family: var(--e-global-typography-accent-font-family), Sans-serif !important;
    font-size: var(--e-global-typography-accent-font-size) !important;
    font-weight: var(--e-global-typography-accent-font-weight) !important;
    text-transform: var(--e-global-typography-accent-text-transform) !important;
    line-height: var(--e-global-typography-accent-line-height) !important;
    color: #fdfdfd !important;
    -webkit-font-smoothing: antialiased !important;
    overflow: visible !important;
}

a.checkout-button span,
button#place_order span,
button[name="save_account_details"] span,
button.woocommerce-Button span,
a.woocommerce-button.button span,
a.button.wc-forward span,
.woocommerce-MyAccount-content a.button span,
button.e-apply-coupon span {
    display: inline-block !important;
    color: #fdfdfd !important;
    font-family: var(--e-global-typography-accent-font-family), Sans-serif !important;
    font-size: var(--e-global-typography-accent-font-size) !important;
    font-weight: var(--e-global-typography-accent-font-weight) !important;
    text-transform: var(--e-global-typography-accent-text-transform) !important;
    line-height: var(--e-global-typography-accent-line-height) !important;
    -webkit-font-smoothing: antialiased !important;
    transform-style: preserve-3d !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

/* =========================================================
   CARD BOX FRUTTA GELATO MISTA — overrides specifici
   ========================================================= */

/* Centra immagine di sfondo */
.e-loop-item.product_cat-box-frutta-gelato-mista .elementor-element-193ef6b {
    /* background-position: center center !important; */
    background-position: center center !important;
}

/* =========================================================
   END WOOCOMMERCE BUTTONS + BOX MISTA
   ========================================================= */


/* =========================================================
   SIDE CART — larghezza popup allargata
   ========================================================= */

.xoo-wsc-container,
.xoo-wsc-slider {
    width: 420px !important;
    max-width: 90vw !important;
}

/* Quando chiuso — sposta fuori schermo della nuova larghezza */
.xoo-wsc-container {
    right: -420px !important;
}

/* Quando aperto — torna a 0 */
.xoo-wsc-cart-active .xoo-wsc-container {
    right: 0 !important;
}

@media only screen and (max-width: 767px) {
    .xoo-wsc-container,
    .xoo-wsc-slider {
        width: 100% !important;
        max-width: 100vw !important;
    }
    .xoo-wsc-container {
        right: -100vw !important;
    }
}

/* Sposta il basket button quando carrello aperto */
.xoo-wsc-cart-active .xoo-wsc-basket {
    right: 420px !important;
}

@media only screen and (max-width: 767px) {
    .xoo-wsc-cart-active .xoo-wsc-basket {
        right: 100vw !important;
    }
}
/* =========================================================
   END SIDE CART
   ========================================================= */

/* La Favola — toggle filtri mobile */
.favola-filtri-toggle{ display:none !important; }
@media (max-width:1024px){
  .favola-filtri-toggle{ display:inline-flex !important; width:100%; }
  .favola-filtri-fields{ display:none; }
  .favola-filtri-fields.aperto{ display:block; }
}


/* ===== LA FAVOLA — filtri mobile/tablet ===== */

/* Heading "Preferenze" tra categorie e tag */
.favola-filtri-heading{
    margin: 22px 0 10px;
    color: var(--e-global-color-primary);
    font-family: var(--e-global-typography-accent-font-family), Sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* Pulsante toggle: nascosto su desktop */
.favola-filtri-wrap .favola-filtri-toggle{ display:none !important; }

@media (max-width:1024px){
  /* Pulsante toggle visibile su tablet/mobile */
  .favola-filtri-wrap .favola-filtri-toggle{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:100%;
    padding:18px 24px;
    border:none;
    cursor:pointer;
    border-radius:30px;
    background:#f2f0ee;
    color:var(--e-global-color-primary);
    text-align:left;
    font-family:var(--e-global-typography-accent-font-family), Sans-serif;
    font-size:var(--e-global-typography-accent-font-size);
    font-weight:var(--e-global-typography-accent-font-weight);
    text-transform:uppercase;
    line-height:1.3;
  }
  /* freccia a destra */
  .favola-filtri-wrap .favola-filtri-toggle::after{
    content:"";
    width:22px; height:22px; flex-shrink:0;
    background:url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234D3A30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>") no-repeat center / contain;
    transition:transform .3s ease;
  }
  .favola-filtri-wrap.aperto .favola-filtri-toggle::after{ transform:rotate(90deg); }

  /* Campi chiusi finché non si apre */
  .favola-filtri-fields{ display:none; }
  .favola-filtri-wrap.aperto .favola-filtri-fields{ display:block; }
}

/* "TUTTI I GUSTI" (reset): in hover resta pieno, solo l'effetto wave */
.favola-filtri-fields button.search-filter-input-button:hover,
.favola-filtri-fields button.search-filter-input-button:focus{
    background-color: var(--e-global-color-0129c2c) !important;
    color: #fdfdfd !important;
    border-color: var(--e-global-color-0129c2c) !important;
}

.search-filter-base.search-filter-field.search-filter-field--id-7.search-filter-field--type-control.search-filter-field--control-type-reset.search-filter-style--id-1.search-filter-style--control-reset {
    margin-bottom: 22px;
}
/* ===== END LA FAVOLA ===== */

/*joinchat*/
.cnb-zindex-10 {
    z-index: 99999;
}
/*end joinchat*/

.woosb-wrap {
    position: relative;
}

/* Rendiamo l'alert sticky CREA LA TUA BOX */
.woosb-wrap .woosb-alert {
    position: -webkit-sticky;
    position: sticky;
    top: calc(var(--combined-header-height, 0px) + 30px); /* La variabile viene calcolata nel js */
    z-index: 99;
    /* Stili opzionali per renderlo più visibile quando diventa sticky */
    background-color: #D9534F !important;
    color: white !important;
    font-weight: bold !important;
    padding: 12px 15px;
    border: 1px solid #D9534F;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.woosb-wrap .woosb-alert::before {
    /* Impostiamo il font di WordPress */
    font-family: 'dashicons'; 
    
    /* Il codice Unicode per l'icona "dashicons-warning" (triangolo d'avviso) */
    content: "\f534"; 
    
    /* Stili dell'icona */
    font-size: 20px;
    margin-right: 8px;
    vertical-align: middle;
    
    /* Assicura che l'icona venga renderizzata nitida */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ppc-button-wrapper {
    margin-top: 20px !important;
}

/* Nasconde il widget Elementor se lo shortcode non ha reso contenuto */
.elementor-widget-shortcode:has(.elementor-shortcode:empty),
.elementor-widget-shortcode:has(.seppia-tag-pills:empty) {
    display: none !important;
}

.flp-simple-product-price .price,
.flp-simple-product-price.price {
    color: var(--e-global-color-primary);
    font-family: var(--e-global-typography-9e9bd75-font-family), Sans-serif;
    font-size: var(--e-global-typography-9e9bd75-font-size);
    font-weight: var(--e-global-typography-9e9bd75-font-weight);
    line-height: var(--e-global-typography-9e9bd75-line-height);
}

/* 
## Prezzo card prodotti ##
*/
.card-price-container p {
    margin: 0px;
}
.card-price-container {
    bottom: -100px;
}
.card-price-container .price {
    font-size: 14px !important;
    line-height: 1 !important;
}
.card-price-container .price .woocommerce-Price-amount {
    font-size: 30px !important;
    line-height: 1 !important;
}
@media only screen and (max-width: 767px) {
    body .elementor-233118
    .elementor-element.elementor-element-9a216aa
    .elementor-element.elementor-element-99adb4c.elementor-widget-woocommerce-product-price{
        bottom: 6px !important;
    }
}

/* Desktop */
.product-card-diag {
    min-height: min(54vh, 500px) !important;
}

/* Tablet */
@media (max-width: 1024px) {
    .product-card-diag {
        min-height: min(30vh, 500px) !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .product-card-diag {
        min-height: min(40vh, 500px) !important;
    }
}





/* ============================================================
   STICKY ADD TO CART — LA FAVOLA (adattamento del tuo CSS)
   Struttura reale: form.variations_form.cart dentro
   .wpcsb-product-action (stesso markup della pagina prodotto,
   con opzione "varianti" del plugin attiva).
   ============================================================ */

/* --- Pulsante "Aggiungi al carrello" nella barra sticky --- */
.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product .wpcsb-product-action .single_add_to_cart_button.button.alt {
    font-family: var(--e-global-typography-accent-font-family), Sans-serif !important;
    font-size: var(--e-global-typography-accent-font-size) !important;
    font-weight: var(--e-global-typography-accent-font-weight) !important;
    text-transform: var(--e-global-typography-accent-text-transform) !important;
    line-height: var(--e-global-typography-accent-line-height) !important;
    border-style: solid !important;
    border-width: 0px !important;
    border-radius: 100px !important;
    padding: 12px 22px !important; /* ridotto rispetto alla pagina prodotto per stare nello spazio stretto della barra */
    color: var(--e-global-color-accent) !important;
    background-color: var(--e-global-color-0129c2c) !important;
    border-color: var(--e-global-color-text) !important;
    transition: all 0.2s !important;
    flex: 0 0 auto !important;
    width: auto !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* Hover: nessuna regola qui — gestito lato JS dalla classe wave-btn
   (vedi script custom code aggiornato). */

/* --- Layout della form dentro la sticky bar: tre righe fisse e
   ordinate — select in cima, poi il prezzo della variante scelta,
   poi quantità+bottone. Uso "order" così la sequenza è garantita
   a prescindere da come il plugin genera il markup. --- */
.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action form.variations_form.cart {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* single_variation_wrap è solo un contenitore di layout: dentro ha
   DAVVERO due elementi diversi (prezzo/descrizione, e quantità +
   bottone) che vogliamo su righe diverse. display:contents lo
   "toglie di mezzo" così i suoi due figli diventano elementi diretti
   della riga flessibile e possiamo ordinarli separatamente — prima
   il mio selettore su ".woocommerce-variation-add-to-cart" cercava
   un figlio diretto del form che in realtà non esiste, per questo
   l'ordinamento non funzionava mai. */
.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action form.variations_form.cart > .single_variation_wrap {
    display: contents !important;
}

/* Riga 1: blocco prezzo/descrizione. Forzo la visibilità SOLO
   quando il blocco prezzo ha davvero del contenuto dentro (":not(:
   empty)"), non sempre: così si mostra quando c'è un prezzo scritto,
   e quando clicchi "Svuota" (che lo svuota) la regola smette di
   applicarsi e torna a nascondersi da sola, invece di restare
   forzato visibile con un prezzo ormai vecchio. */
.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action form.variations_form.cart > .single_variation_wrap > .woocommerce-variation.single_variation {
    order: 1 !important;
    flex: 0 1 auto !important;
    width: auto !important;
}

.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action .woocommerce-variation-price:not(:empty) {
    display: block !important;
}

.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action .woocommerce-variation.single_variation:has(.woocommerce-variation-price:not(:empty)) {
    display: block !important;
}

/* Riga 1: select + Svuota */
.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action form.variations_form.cart > table.variations {
    order: 2 !important;
    flex: 0 1 auto !important;
    width: auto !important;
}

/* Riga 2: quantità + bottone, a piena larghezza (dentro restano
   affiancati come già li dispone il tema/plugin) */
.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action form.variations_form.cart > .single_variation_wrap > .woocommerce-variation-add-to-cart {
    order: 3 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
}

/* --- Tabella varianti ("Confezione") nella sticky bar ---
   La converto da tabella a blocco per farla stare nel flex sopra,
   e nascondo l'etichetta "Confezione" per risparmiare spazio: il
   testo del select ("Scegli un'opzione" / valore scelto) basta. */
.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action .variations,
.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action .variations tbody,
.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action .variations tr {
    display: block !important;
    width: 100% !important;
}

.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action .variations th.label {
    display: none !important;
}

/* .value in colonna: select sopra, "Svuota" sotto — così non si
   sovrappone più al cerchio della quantità (prima erano sulla
   stessa riga e "Svuota" sconfinava sopra il cerchio) */
.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action .variations td.value {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    width: auto !important;
    padding: 0 !important;
}

.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action .variations_form .variations td,
.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action .variations_form .variations th {
    padding: 0px !important;
    border: none !important;
    background: none !important;
}

/* Link "Svuota" — valori reali presi da devtools (a.reset_variations).
   Tolgo margin-top: nel nostro layout a colonna lo spazio lo dà
   già il "gap" sopra, non serve sommarlo. */
.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action a.reset_variations {
    position: static !important;
    order: -1 !important;
    margin-top: 0 !important;
    color: var(--e-global-color-6dd7c49) !important;
    font-family: var(--e-global-typography-text-font-family), Sans-serif !important;
    font-size: var(--e-global-typography-text-font-size) !important;
    font-weight: 600 !important;
    line-height: var(--e-global-typography-text-line-height) !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

/* Prezzo che compare dopo aver scelto la confezione — valori reali
   presi da devtools (span.price), così nella barra sticky ha lo
   stesso colore/font della pagina prodotto invece del colore di
   default WooCommerce */
.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action .woocommerce-variation-price .price,
.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action .woocommerce-variation-price span.price {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    color: var(--e-global-color-primary) !important;
    font-family: var(--e-global-typography-text-font-family), Sans-serif !important;
    font-size: var(--e-global-typography-text-font-size) !important;
    font-weight: 700 !important;
    line-height: var(--e-global-typography-text-line-height) !important;
}

/* Forzo anche i pezzi interni (simbolo euro, importo, bdi) a
   ereditare esattamente la stessa dimensione/riga del prezzo,
   altrimenti uno di questi può restare con misure diverse di
   WooCommerce e sfalsare l'allineamento verticale con "Svuota" */
.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action .woocommerce-variation-price .price *,
.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action .woocommerce-variation-price span.price * {
    font-size: inherit !important;
    line-height: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    vertical-align: middle !important;
}

.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action .woocommerce-variation-price p {
    margin: 0 !important;
}

/* Azzero il margine su tutta la catena di contenitori del blocco
   prezzo (non solo sul tag <p>), per eliminare qualsiasi
   margin-bottom residuo che spingerebbe giù il resto della riga */
.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action .woocommerce-variation.single_variation,
.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action .woocommerce-variation-description,
.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action .woocommerce-variation-price,
.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action .woocommerce-variation-availability {
    margin: 0 !important;
}

.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action .variations_form .single_variation_wrap .woocommerce-variation-add-to-cart > * {
    margin-left: 0px !important;
}

/* Il campo "Confezione" (select) — valori presi 1:1 da devtools
   (select#pa_confezione nella pagina prodotto). Il browser mostra
   la sua freccina di default (il sito non la sostituisce con
   un'icona custom), quindi qui non tocco "appearance". La sola
   differenza rispetto alla pagina prodotto è la larghezza: lì è
   32vw fisso, qui nella barra stretta la lascio flessibile per non
   far uscire il bottone. */
.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    font-family: var(--e-global-typography-accent-font-family), Sans-serif !important;
    font-size: var(--e-global-typography-accent-font-size) !important;
    font-weight: var(--e-global-typography-accent-font-weight) !important;
    text-transform: var(--e-global-typography-accent-text-transform) !important;
    color: var(--e-global-color-primary) !important;
    background-color: var(--e-global-color-secondary) !important;
    border-style: solid !important;
    border-width: 1px !important;
    border-color: var(--e-global-color-0129c2c) !important;
    border-radius: 100px !important;
    outline-color: transparent !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    height: 40px !important;
    line-height: 38px !important;
    padding: 0 34px 0 16px !important;
    flex: 0 1 auto !important;
    min-width: 140px !important;
    max-width: 240px !important;
    width: auto !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    /* freccina disegnata a mano (niente più quella nativa del browser,
       tolta insieme ad "appearance") */
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
    background-position:
        calc(100% - 22px) center,
        calc(100% - 16px) center !important;
    background-size: 6px 6px, 6px 6px !important;
    background-repeat: no-repeat !important;
}

/* --- Quantità: CERCHIO PERFETTO, sia in pagina prodotto sia in
   sticky bar --- */
body.single-product form.cart .quantity,
.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product .wpcsb-product-action .quantity {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
}

body.single-product form.cart .quantity input.qty[type="number"],
.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product .wpcsb-product-action .quantity input.qty[type="number"] {
    font-family: var(--e-global-typography-accent-font-family), Sans-serif !important;
    font-size: var(--e-global-typography-accent-font-size) !important;
    font-weight: var(--e-global-typography-accent-font-weight) !important;
    border-style: solid !important;
    border-width: 1px !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    flex: 0 0 44px !important;
    padding: 0 !important;
    text-align: center !important;
    line-height: 44px !important;
    color: var(--e-global-color-0129c2c) !important;
    background-color: var(--e-global-color-accent) !important;
    border-color: var(--e-global-color-0129c2c) !important;
    transition: all 0.2s !important;
}

/* Frecce "▲"/"▼" (create dallo script quantity-buttons.js):
   semplici, impilate verticalmente a destra del cerchio — al posto
   della freccetta nativa del browser, che si comporta in modo
   incoerente tra i vari browser dentro un campo così stretto.
   Stessa "protezione" di specificità delle altre regole, perché
   sulla pagina prodotto il widget Elementor ha le sue regole con
   selettori molto specifici che altrimenti vincerebbero. */
body.single-product form.cart .quantity .seppia-qty-arrows,
.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product .wpcsb-product-action .quantity .seppia-qty-arrows {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 3px !important;
}

body.single-product form.cart .quantity .seppia-qty-btn,
.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product .wpcsb-product-action .quantity .seppia-qty-btn {
    width: 26px !important;
    height: 24px !important;
    min-width: 26px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    color: var(--e-global-color-0129c2c) !important;
    font-size: 14px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: opacity 0.2s !important;
}

body.single-product form.cart .quantity .seppia-qty-btn:hover,
.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product .wpcsb-product-action .quantity .seppia-qty-btn:hover {
    opacity: 0.6 !important;
}

/* Nasconde le freccette native del numero: ora ci sono i pulsanti
   "−"/"+" sopra, non serve più la freccetta nativa e così il numero
   resta perfettamente centrato nel cerchio */
body.single-product form.cart .quantity input.qty[type="number"]::-webkit-outer-spin-button,
body.single-product form.cart .quantity input.qty[type="number"]::-webkit-inner-spin-button,
.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product .wpcsb-product-action .quantity input.qty[type="number"]::-webkit-outer-spin-button,
.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product .wpcsb-product-action .quantity input.qty[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

body.single-product form.cart .quantity input.qty[type="number"],
.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product .wpcsb-product-action .quantity input.qty[type="number"] {
    -moz-appearance: textfield !important;
}

/* --- Layout generale della sticky bar (invariato dal tuo CSS) --- */
/* max-width ora gestito nella regola più sotto (1170px, come da
   valori che mi hai mostrato) */

.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-image img {
    border-radius: 14px;
    width: 156px !important;
}

.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-image {
    flex: 0 0 158px !important;
}

/* Nome prodotto più grande e più in grassetto (valori scelti a
   occhio, dimmi se li vuoi diversi) */
.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-name {
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-disabled {
    gap: 14px;
}

/* Spazio tra quantità e bottone anche da abilitato (prima il gap
   c'era solo nello stato "disabled"), e allineo il gruppo a destra
   come la riga select/prezzo sopra */
.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action .woocommerce-variation-add-to-cart {
    gap: 14px !important;
    justify-content: flex-end !important;
}

/* La colonna immagine+nome probabilmente si espande di suo a
   riempire lo spazio (comportamento tipico di questi plugin) — le
   do un tetto massimo oltre a bloccarne la crescita, così il "gap"
   qui sotto crea davvero la distanza fissa */
.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-info {
    flex: 0 0 auto !important;
    max-width: 340px !important;
}

/* Allineo verticalmente al centro immagine/nome a sinistra e
   select/prezzo/quantità/bottone a destra, AVVICINATI tra loro
   (gap ridotto) invece che spinti ai due bordi opposti della barra */
.wpcsb-wrapper.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product {
    align-items: center !important;
    justify-content: center !important;
    max-width: 1170px !important;
    gap: 20px !important;
}

.wpcsb-wrapper.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 1 auto !important;
}

.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action form.variations_form.cart {
    justify-content: flex-end !important;
}

/* Un po' di respiro dentro il contenitore della barra */
.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container {
    padding: 16px 30px !important;
}

/* --- Mobile: riscritto secondo il nuovo layout richiesto --- */
@media only screen and (max-width: 767px) {

    .wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container {
        padding: 12px 16px !important;
    }

    /* Immagine E nome nascosti: con prezzo+svuota+select+quantità+
       bottone lo spazio è già striminzito, meglio lasciarli fuori
       piuttosto che stringere ulteriormente il resto */
    .wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-image,
    .wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-info {
        display: none !important;
    }

    /* La barra diventa un unico blocco a piena larghezza */
    .wpcsb-wrapper.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product {
        max-width: 100% !important;
        width: 100% !important;
        gap: 0 !important;
    }

    .wpcsb-wrapper.wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action {
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    .wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action form.variations_form.cart {
        justify-content: flex-end !important;
        align-items: flex-end !important;
        gap: 8px 12px !important;
        width: 100% !important;
    }

    /* Prezzo più grande su mobile, resta a sinistra del select
       sulla stessa riga */
    .wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action .woocommerce-variation-price .price,
    .wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action .woocommerce-variation-price span.price {
        font-size: 20px !important;
    }

    /* Select e Svuota: Svuota sopra, select sotto, entrambi
       allineati al bordo destro — lo stesso bordo del bottone
       nella riga sotto */
    .wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action .variations td.value {
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 4px !important;
    }

    /* Riga quantità + bottone: quantità all'inizio (niente più
       spazio vuoto prima), bottone alla fine — stesso bordo destro
       del select sopra, invece di tutto spinto da un lato solo */
    .wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action .woocommerce-variation-add-to-cart {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action .single_add_to_cart_button.button.alt {
        flex: 0 0 auto !important;
        width: auto !important;
    }

    /* Il pulsante "Aggiungi al carrello" FUORI dalla barra sticky
       (sulla pagina prodotto, probabilmente la versione che Elementor
       rende sticky-in-scroll) eredita una larghezza fissa in vw
       pensata per schermi larghi — su mobile risulta troppo stretta
       e il testo viene tagliato. La correggo solo su mobile. */
    body.single-product form.cart .single_add_to_cart_button.button.alt {
        width: auto !important;
        max-width: 100% !important;
        white-space: normal !important;
        padding: 12px 20px !important;
    }
}

/* --- Tablet: il prezzo resta piccolo (scala di "Svuota") sia nel
   layout desktop che in quello mobile — lo ingrandisco solo in
   questa fascia intermedia --- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action .woocommerce-variation-price .price,
    .wpcsb-wrapper.wpcsb-wrapper .wpcsb-container.wpcsb-container .wpcsb-product-action .woocommerce-variation-price span.price {
        font-size: 22px !important;
    }
}

/* ============================================================
   Spostamento Call Now + Side Cart quando la sticky add to cart
   è visibile — dimensioni ed effetto INVARIATI rispetto al tuo CSS
   ============================================================ */
:root {
    --wpc-sticky-cart-height: 0px;
    --floating-buttons-gap: 16px;
}

#callnowbutton,
.xoo-wsc-basket {
    transition: bottom .3s ease, transform .3s ease !important;
}

body.wpc-sticky-cart-visible #callnowbutton,
body.wpc-sticky-cart-visible .xoo-wsc-basket {
    bottom: calc(var(--wpc-sticky-cart-height) + var(--floating-buttons-gap)) !important;
    z-index: 999999 !important;
}