/* --- 1. PULIZIA TOTALE RUMORE VISIVO --- */
/* Nasconde SKU, Prezzi sparsi e Label */
/* Nasconde solo la label del campo quantità */
.functional-cart-area .field--name-quantity label, 
.functional-cart-area .js-form-item-quantity label {
    display: none !important;
}

/* Mantieni le altre pulizie che avevi già fatto */
.functional-cart-area .field--name-price,
.functional-cart-area .field--name-sku,
.functional-cart-area .field__label {
    display: none !important;
}

/* --- 2. STRUTTURA A DUE RIGHE --- */
.functional-cart-area form {
    display: flex !important;
    gap: 15px !important;
    width: 100% !important;
	flex-wrap: wrap;
}

/* RIGA 1: La Select Nativa (Varianti/Peso) */
.functional-cart-area .field--name-purchased-entity {
    width: 100% !important;
    order: 1 !important;
}

.functional-cart-area select.form-select {
    width: 100% !important;
    height: 50px !important;
    border: 1px solid #ced4da !important;
    border-radius: 10px !important;
}

/* RIGA 2: CONTENITORE QUANTITÀ + PULSANTE */
/* Drupal usa diversi wrapper, questo selettore li affianca sulla stessa linea */
.functional-cart-area form > div:not(.field--name-purchased-entity) {
    display: flex !important;
    flex-direction: row !important; /* Forza l'allineamento orizzontale */
    align-items: center !important;
    gap: 12px !important;
    order: 2 !important;
}

/* --- 3. LO STEPPER DESIGN (- 1 +) --- */
.field--name-quantity {
    display: flex !important;
    border: 1px solid #ced4da;
    border-radius: 10px;
    background: #fff;
    flex-shrink: 0; /* Impedisce allo stepper di restringersi */
    overflow: hidden;
	width: 128px;
}

.qty-btn {
    width: 40px;
    height: 48px;
    border: none;
    background: #f8f9fa;
    font-size: 1.2rem;
    font-weight: bold;
    color: #b89146; /* Oro Schesir */
    cursor: pointer;
}

.field--name-quantity input {
    width: 45px !important;
    height: 48px !important;
    border: none !important;
    text-align: center !important;
    font-weight: bold !important;
    background: transparent !important;
}

/* --- 4. IL BOTTONE AGGIUNGI ORO --- */
.functional-cart-area .form-actions {
    flex-grow: 1; /* Il bottone occupa tutto lo spazio rimanente sulla riga */
}




/* --- STATO NORMALE (La tua regola originale) --- */
.functional-cart-area .form-submit {
    width: 100% !important;
    height: 50px !important;
    background-color: #b89146 !important; /* Oro */
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    border: none !important;
    white-space: nowrap;
    transition: all 0.3s ease !important; /* Aggiunge fluidità al cambio colore */
    cursor: pointer;
}

/* --- STATO OUT OF STOCK (Esaurito) --- */
/* Puntiamo al bottone quando Drupal lo disabilita o aggiunge la classe out-of-stock */
.functional-cart-area .form-submit:disabled,
.functional-cart-area .form-submit.is-disabled,
.out-of-stock .form-submit {
    background-color: #d1d1d1 !important; /* Grigio chiaro "disattivato" */
    color: #888 !important;              /* Testo grigio scuro */
    cursor: not-allowed !important;      /* Icona del mouse "divieto" */
    pointer-events: none !important;     /* Impedisce il click */
    box-shadow: none !important;
}





/* TITOLO (Il div che contiene "Alleva care...") */
.layout__region--second > div:first-child > div {
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin-bottom: 5px !important;
}

/* SKU (Codice) */
.product--variation-field--variation_sku__2 {
    display: block !important;
    font-size: 0.9rem !important;
    color: #999 !important; 
    font-weight: 500 !important;
    margin-bottom: 10px !important;
}


/* --- FORMATTAZIONE LINK NEL 3° DIV (MARCA) --- */
/* Puntiamo al link contenuto nel terzo div della regione principale */
.layout__region--second > div:nth-child(4) a,
.product--variation-field--brand a {
    display: inline-block !important;
    color: #999 !important; /* Blu istituzionale per i link */
    font-size: 1rem !important;
    font-weight: 500 !important;
    text-decoration: none !important; /* Sottolineatura come da screenshot */
    margin-bottom: 8px !important;
    transition: color 0.2s ease-in-out !important;
}

/* Effetto Hover per la Marca */
.layout__region--second > div:nth-child(4) a:hover {
    color: #b89146 !important; /* Cambio in Oro al passaggio del mouse */
    text-decoration: none !important;
}

/* CONTENITORE PREZZI (Affiancati) */
/* Colpiamo la regione che contiene i campi prezzo */
.layout__region--second {
    display: flex !important;
    flex-direction: column !important;
}

/* Selettori specifici per i div del prezzo */
.product--variation-field--variation_list_price__2,
.product--variation-field--variation_price__2 {
    display: inline-block !important;
    vertical-align: baseline !important;
}

/* Allineamento orizzontale dei prezzi */
.product--variation-field--variation_list_price__2 {
    margin-right: 15px !important;
    color: #999 !important;
    text-decoration: line-through !important; /* Barrato */
    font-size: 1.1rem !important;
}

.product--variation-field--variation_price__2 {
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    color: #333 !important;
}






/* Cornice intorno ai blocchi degli attributi (Formato, Gusto) */
.product--rendered-attribute, 
.field--name-attribute-gusto {
    border: 1px solid #e0e0e0 !important;
    border-radius: 10px !important;
	padding: 0px 10px 10px 10px !important;
	margin-top : 10px !important;
    margin-bottom: 0px !important;
    background-color: #f9f9f9 !important; /* Grigio chiarissimo per far risaltare i bottoni bianchi */
}

/* --- LEGEND (Il titolo "Formato") --- */
.product--rendered-attribute legend,
.field--name-attribute-formato legend {
    float: left !important; /* Forza il posizionamento corretto in alcuni browser */
    width: 100% !important;
    margin-bottom: 0px !important;
    padding: 0 !important;
    border: none !important;
}

.product--rendered-attribute legend span.fieldset-legend,
.field--name-attribute-formato legend span.fieldset-legend {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    /*text-transform: uppercase !important;*/
    color: #333 !important;
    letter-spacing: 0.5px !important;
}




/* --- FORMATO (Rendered Attribute) --- */
.product--rendered-attribute .form-item {
    display: inline-block !important;
    margin: 5px 8px 5px 0 !important;
    vertical-align: middle !important;
}

/* Nascondiamo il radio button circolare di sistema */
.product--rendered-attribute input[type="radio"] {
    display: none !important;
}

/* Formattazione dell'etichetta che diventa il nostro "Bottone" */
.product--rendered-attribute label {
    display: block !important;
    padding: 10px 20px !important;
    border: 1px solid #ddd !important;
    border-radius: 10px !important;
    background-color: #fff !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    transition: all 0.2s ease-in-out !important;
    margin: 0 !important;
}

/* Effetto al passaggio del mouse */
.product--rendered-attribute label:hover {
    border-color: #b89146 !important;
    color: #b89146 !important;
}

/* Stato SELEZIONATO: il bottone diventa Oro */
.product--rendered-attribute input:checked + label {
    background-color: #b89146 !important;
    color: #fff !important;
    border-color: #b89146 !important;
}

/* --- GUSTO (Select) --- */
/* Assicuriamoci che la select dei gusti sia sotto e ben spaziata */
.field--name-attribute-gusto {
    margin-top: 15px !important;
    display: block !important;
}

.field--name-attribute-gusto select {
    width: 100% !important;
    height: 45px !important;
    border-radius: 10px !important;
    border: 1px solid #ddd !important;
    padding: 0 15px !important;
}



/* Aggiunge un effetto di attesa al tuo bottone Oro durante l'invio AJAX */
.ajax-progress-throbber {
    display: none !important; /* Nascondiamo il caricamento standard */
}

button.is-ajaxing {
    opacity: 0.6 !important;
    position: relative;
}

button.is-ajaxing::after {
    content: " ..."; /* Un piccolo segnale visivo */
}





/* Overlay di sfondo */
.fp-confirmation-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}

/* La finestra bianca */
.fp-confirmation-window {
  background: #fff;
  padding: 40px;
  border-radius: 12px;
  text-align: center;
  position: relative;
  max-width: 420px;
  width: 90%;
  border-top: 6px solid #b89146; /* Oro FarmyPet */
  box-shadow: 0 15px 50px rgba(0,0,0,0.4);
}

.fp-close-x {
  position: absolute; top: 10px; right: 15px;
  font-size: 30px; cursor: pointer; color: #ccc;
}

.fp-icon { font-size: 50px; margin-bottom: 20px; }

.fp-confirmation-window h3 { color: #b89146; margin-bottom: 15px; text-transform: uppercase; }

.fp-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; }

.fp-actions .btn-close-modal, .fp-actions .btn-view-cart {
  padding: 12px; border-radius: 6px; text-decoration: none; 
  font-weight: bold; border: none; cursor: pointer;
}

.btn-close-modal { background: #f0f0f0; color: #555; }
.btn-view-cart { background: #b89146; color: #fff; }