/* =====================================================================
   Star Elettronic Shop — Modern Refresh
   Layer CSS non distruttivo per Avada + WooCommerce.
   Agisce su: tipografia, bottoni, card prodotto, prezzi, badge,
   form, carrello/checkout, hover e spaziature. Nessuna modifica
   alla struttura del builder. Tutto reversibile.
   ===================================================================== */

:root {
  --mr-radius:        14px;   /* raggio card/elementi  */
  --mr-radius-sm:     10px;   /* raggio bottoni/input  */
  --mr-shadow:        0 6px 22px rgba(0, 22, 56, .08);
  --mr-shadow-hover:  0 14px 36px rgba(0, 22, 56, .16);
  --mr-shadow-soft:   0 2px 10px rgba(0, 22, 56, .06);
  --mr-ease:          cubic-bezier(.21, .61, .35, 1);
  --mr-accent:        #0693e3;  /* blu gia' presente nel sito */
  --mr-ink:           #001638;  /* navy del brand            */
}

/* ---------- Tipografia: resa piu' nitida e leggibile ---------- */
body.fusion-body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.fusion-body h1, .fusion-body h2, .fusion-body h3 {
  letter-spacing: -.01em;
  line-height: 1.18;
}

/* ---------- Bottoni Avada: forma moderna + hover morbido ---------- */
.fusion-button.button-flat,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button,
.woocommerce #respond input#submit {
  border-radius: var(--mr-radius-sm) !important;
  box-shadow: var(--mr-shadow-soft) !important;   /* leggera profondita' a riposo */
  transition: transform .25s var(--mr-ease),
              box-shadow .25s var(--mr-ease),
              filter .25s var(--mr-ease) !important;
  will-change: transform;
}
.fusion-button.button-flat:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button:hover,
.woocommerce #respond input#submit:hover {
  transform: translateY(-2px);
  box-shadow: var(--mr-shadow-hover);
  filter: saturate(1.05);
}
.fusion-button.button-flat:active,
.woocommerce a.button:active,
.woocommerce button.button:active {
  transform: translateY(0);
  box-shadow: var(--mr-shadow-soft);
}

/* ---------- Card prodotto (colonna builder ".post-card" di Avada) ---------- */
/* Il tema disegna un bordo 3px navy a spigolo vivo senza ombra: look datato.
   Lo trasformo in una card moderna: bordo leggero, angoli morbidi, ombra. */
.fusion-body li.post-card,
.fusion-body .fusion-builder-column.post-card,
.fusion-body .post-card.fusion-grid-column {
  border: 1px solid rgba(0, 22, 56, .08) !important;
  border-radius: var(--mr-radius) !important;
  box-shadow: var(--mr-shadow) !important;
  background: #fff !important;
  padding: 16px !important;
  transition: transform .3s var(--mr-ease),
              box-shadow .3s var(--mr-ease),
              border-color .3s var(--mr-ease) !important;
  overflow: hidden;
}
.fusion-body li.post-card:hover,
.fusion-body .fusion-builder-column.post-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--mr-shadow-hover) !important;
  border-color: rgba(6, 147, 227, .4) !important;
}
/* prezzo piu' grande e leggibile dentro la card */
.fusion-body .post-card .woocommerce-Price-amount.amount,
.fusion-body .post-card .fusion-woo-price-tb {
  font-size: 19px !important;
}

/* Immagine prodotto: angoli morbidi + zoom delicato in hover */
.fusion-classic-product-image-wrapper,
.fusion-woo-product-image,
.fusion-post-card-image {
  border-radius: var(--mr-radius);
  overflow: hidden;
}
.fusion-classic-product-image-wrapper img,
.fusion-woo-product-image img {
  transition: transform .5s var(--mr-ease);
}
.fusion-post-card:hover .fusion-classic-product-image-wrapper img,
ul.products li.product:hover .fusion-woo-product-image img {
  transform: scale(1.045);
}

/* ---------- Griglia WooCommerce standard (pagina /shop) ---------- */
/* La /shop usa ul.products li.product (NON .post-card): card ad altezza
   irregolare e area immagine che collassa sui prodotti senza foto.
   Uniformo altezze e area immagine per un look ordinato. */
.woocommerce ul.products li.product {
  display: flex !important;
  flex-direction: column;
}
.woocommerce ul.products li.product .fusion-product-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid rgba(0, 22, 56, .08) !important;
  border-radius: var(--mr-radius) !important;
  box-shadow: var(--mr-shadow) !important;
  background: #fff !important;
  overflow: hidden;
  transition: transform .3s var(--mr-ease), box-shadow .3s var(--mr-ease) !important;
}
.woocommerce ul.products li.product:hover .fusion-product-wrapper {
  transform: translateY(-5px);
  box-shadow: var(--mr-shadow-hover) !important;
}
/* Area immagine SEMPRE della stessa altezza (anche se la foto manca) */
.woocommerce ul.products li.product .product-images,
.woocommerce ul.products li.product .featured-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #f4f6fa;          /* placeholder pulito al posto del bianco vuoto */
  overflow: hidden;
  position: relative;
}
.woocommerce ul.products li.product .featured-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;   /* niente distorsione, niente taglio */
  padding: 10px;
}
/* Etichetta discreta quando l'immagine non c'e' / e' rotta */
.woocommerce ul.products li.product .featured-image::after {
  content: "Immagine non disponibile";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #9aa6b8; letter-spacing: .02em;
  z-index: 0;
}
.woocommerce ul.products li.product .featured-image img { position: relative; z-index: 1; background: #f4f6fa; }
/* Il contenuto testuale spinge i bottoni in fondo -> card allineate */
.woocommerce ul.products li.product .fusion-product-content { flex: 1 1 auto; display: flex; flex-direction: column; }
.woocommerce ul.products li.product .product-buttons { margin-top: auto; }

/* ---------- Prezzi: piu' marcati, sconto piu' chiaro ---------- */
.woocommerce-Price-amount.amount {
  font-weight: 700;
  color: var(--mr-ink);
}
.price.has-sale del,
.price del .woocommerce-Price-amount {
  opacity: .55;
  font-weight: 500;
}
.price.has-sale ins,
.price ins .woocommerce-Price-amount {
  text-decoration: none;
  color: #e23744;            /* prezzo scontato in evidenza */
}

/* ---------- Badge "in offerta": pill moderna ---------- */
.woocommerce span.onsale,
.fusion-woo-price-tb .onsale,
.onsale {
  border-radius: 999px !important;
  padding: .28em .9em !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
  box-shadow: var(--mr-shadow-soft);
  min-height: 0 !important;
  min-width: 0 !important;
  line-height: 1.4 !important;
}

/* ---------- Campi form / input: piu' puliti ---------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .quantity input.qty,
.fusion-body input[type=text],
.fusion-body input[type=email],
.fusion-body input[type=tel],
.fusion-body input[type=password],
.fusion-body input[type=search],
.fusion-body input[type=number],
.fusion-body select,
.fusion-body textarea {
  border-radius: var(--mr-radius-sm) !important;
  border: 1px solid rgba(0, 22, 56, .14) !important;
  transition: border-color .2s var(--mr-ease),
              box-shadow .2s var(--mr-ease) !important;
}
.fusion-body input:focus,
.fusion-body select:focus,
.fusion-body textarea:focus {
  border-color: var(--mr-accent) !important;
  box-shadow: 0 0 0 3px rgba(6, 147, 227, .15) !important;
  outline: none !important;
}

/* ---------- Carrello / Checkout: tabelle piu' ariose ---------- */
.woocommerce table.shop_table {
  border-radius: var(--mr-radius) !important;
  border-collapse: separate !important;
  overflow: hidden;
  box-shadow: var(--mr-shadow-soft);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 16px 18px !important;
}
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce form.checkout #customer_details {
  border-radius: var(--mr-radius);
}

/* ---------- Link: micro-transizione ---------- */
.fusion-body a {
  transition: color .2s var(--mr-ease);
}

/* ---------- Mobile: spaziature un filo piu' generose ---------- */
@media (max-width: 640px) {
  ul.products li.product,
  .fusion-post-card {
    margin-bottom: 18px;
  }
  .fusion-button.button-flat,
  .woocommerce .button {
    border-radius: var(--mr-radius-sm) !important;
  }
}

/* ---------- Bottone "Contattaci" (WhatsApp): testo non tagliato ---------- */
a.button.whatsapp-button {
  padding-right: 16px !important;   /* mancava lo spazio a destra */
  white-space: nowrap !important;
  width: auto !important;
  min-width: 0 !important;
  overflow: visible !important;
}

/* ---------- Mobile: titoli prodotto piu' compatti ---------- */
@media (max-width: 768px) {
  .woocommerce ul.products li.product h3.product-title,
  .woocommerce ul.products li.product .product-title,
  .woocommerce ul.products li.product .product-title a,
  .post-card .fusion-post-card-title,
  .post-card .product-title {
    font-size: 21px !important;
    line-height: 1.25 !important;
  }
}

/* ---------- Fix icona menu mobile (hamburger invisibile) ---------- */
/* Su Avada l'icona del toggle non viene disegnata: si vede solo un box bianco.
   Il pulsante funziona (apre il menu) ma l'utente non lo riconosce.
   Ridisegno hamburger (chiuso) e X (aperto) nel colore del brand. */
@media (max-width: 1100px) {
  .awb-menu__m-toggle { position: relative; min-width: 44px; min-height: 38px; }
  /* nascondo l'icona nativa rotta */
  .awb-menu__m-toggle .awb-menu__m-collapse-icon,
  .awb-menu__m-toggle .awb-menu__m-collapse-icon-open,
  .awb-menu__m-toggle .awb-menu__m-collapse-icon-close { display: none !important; }
  /* due tratti che disegno io */
  .awb-menu__m-toggle::before,
  .awb-menu__m-toggle::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 24px; height: 2.5px; background: var(--mr-ink, #001638);
    border-radius: 2px; transition: transform .25s ease, opacity .2s ease;
  }
  /* CHIUSO -> hamburger (riga centrale + 2 righe via box-shadow) */
  .awb-menu__m-toggle[aria-expanded="false"]::before {
    transform: translate(-50%, -50%);
    box-shadow: 0 -7px 0 var(--mr-ink, #001638), 0 7px 0 var(--mr-ink, #001638);
  }
  .awb-menu__m-toggle[aria-expanded="false"]::after { opacity: 0; }
  /* APERTO -> X */
  .awb-menu__m-toggle[aria-expanded="true"]::before {
    transform: translate(-50%, -50%) rotate(45deg); box-shadow: none;
  }
  .awb-menu__m-toggle[aria-expanded="true"]::after {
    transform: translate(-50%, -50%) rotate(-45deg); opacity: 1;
  }
}

/* ---------- Rispetto delle preferenze di movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .fusion-post-card:hover,
  ul.products li.product:hover,
  .fusion-button.button-flat:hover { transform: none !important; }
}