.price bdi {
  color: #080707 !important;
  font-weight: 600 !important;
}

/* ===== Selettore taglia a card (pa_size) — Figma 177:2243 ===== */
/* Nasconde il dropdown nativo e la riga label "Size" della tabella variazioni. */
table.variations td.value select[name="attribute_pa_size"] {
  display: none !important;
}
table.variations tr:has(td.value select[name="attribute_pa_size"]) th.label {
  display: none;
}
/* Nasconde la freccia ▼ del wrapper select Impreza e il link "Clear" (× reset_variations). */
td.value:has(.pmc-size-cards) .woocommerce-select::before,
td.value:has(.pmc-size-cards) .woocommerce-select::after {
  display: none !important;
}
form.variations_form:has(select[name="attribute_pa_size"]) .reset_variations {
  display: none !important;
}

.pmc-size-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  border: 0;
  margin: 0;
  padding: 0;
}
.pmc-size-cards__legend {
  width: 100%;
  float: left;
  margin: 0 0 12px;
  padding: 0;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #080707;
}
@media (max-width: 1024px) {
  .pmc-size-cards__legend {
    margin: 0 0 0px;
  }
}
.pmc-size-card {
  flex: 1 1 0;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 16px;
  border-radius: 20px;
  border: 2px solid transparent;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.pmc-size-card__label {
  font-family: "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #080707;
}
.pmc-size-card__price {
  font-family: "Helvetica Neue", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #373636;
}
.pmc-size-card__price bdi {
  color: #373636 !important;
  font-weight: 500 !important;
}

.pmc-size-card.is-selected {
  background: #ffffff;
  border-color: #080707;
}
.pmc-size-card.is-unavailable {
  cursor: default;
  position: relative;
  overflow: hidden;
  opacity: 0.55;
}
.pmc-size-card.is-unavailable .pmc-size-card__label,
.pmc-size-card.is-unavailable .pmc-size-card__price {
  color: #9a968f;
}
.pmc-size-card.is-unavailable::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top right,
    transparent calc(50% - 1px),
    #9a968f calc(50% - 1px),
    #9a968f calc(50% + 1px),
    transparent calc(50% + 1px)
  );
  pointer-events: none;
}

@media (max-width: 600px) {
  /* 3 card in fila (Figma mobile 177:2441): la legend resta sulla sua riga
     grazie a flex-wrap:wrap + width:100%; le card con flex-basis 0 e min-width:0
     si dividono la riga senza andare a capo. NON usare nowrap: metterebbe la
     legend e le card sulla stessa riga, schiacciando le card. */
  .pmc-size-card {
    min-width: 0;
    padding: 14px 8px;
  }
  .pmc-size-card__label {
    font-size: 15px;
  }
  .pmc-size-card__price {
    font-size: 13px;
  }
}

/* ===== Product vendor card (Figma 177:2273) ============================= */
.pmc-product-vendor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin: 16px 0;
}
.pmc-product-vendor__label {
  padding-left: 8px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  color: #080707;
}
.pmc-product-vendor__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid #ffffff;
  border-radius: 999px;
  background: linear-gradient(169.7deg, #fff3df 0%, #e9d8b8 70.59%);
  box-shadow: 0 8px 10px rgba(182, 160, 120, 0.5);
  text-decoration: none;
}
.pmc-product-vendor__card:hover,
.pmc-product-vendor__card:focus {
  text-decoration: none;
}
.pmc-product-vendor__info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.pmc-product-vendor__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  display: block;
}
.pmc-product-vendor__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pmc-product-vendor__name {
  font-family: "Lora", Georgia, serif;
  font-weight: 600;
  font-style: italic;
  font-size: 16px;
  line-height: 1.2;
  color: #080707;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pmc-product-vendor__loc {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  color: #3f3a35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pmc-product-vendor__btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.16);
  color: #080707;
}
.pmc-product-vendor__btn svg {
  width: 7px;
  height: 12px;
  display: block;
}

/* ===== Buy box single product (Figma 719:19406) =======================
 * riga 1: quantità (pill) + "Add to cart" (light blue) + cuore tondo
 * riga 2: "Buy now" (navy, full width)
 * DOM ricomposto da mu-plugins/pmc-product-buybox.php (sposta il cuore nel
 * form e appende Buy now). */
.single-product .w-post-elm.add_to_cart form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0;
}
/* <p class="warranty_info"> vuoto: non deve occupare una cella flex */
.single-product form.cart .warranty_info:empty {
  display: none;
}
/* Prodotti variabili: Woo annida quantità + "Add to cart" due livelli sotto il
 * form (.single_variation_wrap > .woocommerce-variation-add-to-cart). Serve
 * display:contents su ENTRAMBI, altrimenti i figli restano blocchi dentro il
 * wrap e la riga 1 si spezza (qty, bottone e cuore uno sotto l'altro). */
.single-product form.cart .single_variation_wrap,
.single-product form.cart .woocommerce-variation-add-to-cart {
  display: contents;
}
/* Riepilogo variazione (prezzo/stock/disponibilità): riga a sé, full width */
.single-product form.cart .woocommerce-variation.single_variation {
  flex: 1 1 100%;
  margin: 0;
}

/* Quantità → pill bianco pieno, stessa altezza dei bottoni, − 1 + grandi */
.single-product form.cart .quantity {
  flex: 0 0 auto;
  margin: 0;
  height: 48px;
  display: flex;
  align-items: stretch;
  background: #ffffff !important;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(37, 57, 112, 0.1);
}
.single-product form.cart .quantity .minus,
.single-product form.cart .quantity .plus,
.single-product form.cart .quantity input.qty {
  height: 48px !important;
  margin: 0 !important;
  background-color: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* − e + come icone sottili (Figma 522:16655): glifo nascosto, SVG line-icon
 * charcoal #373636 in background (gli <input> reggono background-image). */
.single-product form.cart .quantity .minus,
.single-product form.cart .quantity .plus {
  width: 42px;
  border-radius: 0 !important;
  cursor: pointer;
  color: transparent !important;
  font-size: 0 !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
}
.single-product form.cart .quantity .minus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cline x1='3' y1='8' x2='13' y2='8' stroke='%23373636' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}
.single-product form.cart .quantity .plus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cline x1='3' y1='8' x2='13' y2='8' stroke='%23373636' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='8' y1='3' x2='8' y2='13' stroke='%23373636' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}
.single-product form.cart .quantity .minus:disabled {
  opacity: 0.35;
  cursor: default;
}
.single-product form.cart .quantity input.qty {
  width: 46px;
  font-size: 16px !important;
  font-weight: 500;
  color: #080707 !important;
  text-align: center;
}
.no-touch .single-product form.cart .quantity .minus:hover,
.no-touch .single-product form.cart .quantity .plus:hover {
  background-color: #eef1f8 !important;
}

/* Add to cart: stile secondario del tema (us-btn-style_2, aggiunto dal mu-plugin).
 * Pill pieno + bordo lavanda visibile come Figma; niente alone di button.css. */
.single-product form.cart .single_add_to_cart_button {
  flex: 1 1 auto;
  min-width: 160px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-radius: 999px !important;
  border: 1.5px solid #c6d1f3 !important;
  border-image: none !important;
  box-shadow: none !important;
}
.single-product form.cart .single_add_to_cart_button::before,
.single-product form.cart .single_add_to_cart_button::after {
  display: none !important;
}
/* Hover pulito: il tema porterebbe bg grigio #AEB6CC + border-image bianco
 * (flicker). Manteniamo il light blue, solo leggermente più scuro. */
.no-touch .single-product form.cart .single_add_to_cart_button:hover {
  background: #d6e1ff !important;
  color: #262a42 !important;
  border-color: #b6c4ee !important;
  border-image: none !important;
  box-shadow: none !important;
}

/* Cuore preferiti → bottone tondo, in riga 1 */
.single-product .w-btn-wrapper.for_add_to_favs {
  flex: 0 0 auto;
  margin: 0;
}
.single-product .for_add_to_favs .us_add_to_favs {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  line-height: 1 !important;
  border-radius: 999px;
  border: 0 !important;
  background: #ffffff !important;
  color: #373636 !important;
  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.16) !important;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease,
    transform 0.2s ease;
}
.single-product .for_add_to_favs .us_add_to_favs i {
  margin: 0;
  font-size: 17px;
  line-height: 1;
}
.no-touch .single-product .for_add_to_favs .us_add_to_favs:hover {
  background: #ffffff !important;
  color: #262a42 !important;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2) !important;
  transform: translateY(-1px);
}
/* Stato "nei preferiti": cuore pieno navy */
.single-product .for_add_to_favs .us_add_to_favs.active,
.single-product .for_add_to_favs .us_add_to_favs.added {
  background: #262a42 !important;
  border-color: #262a42 !important;
  color: #ffffff !important;
}

/* Buy now → riga 2, full width, navy (us-btn-style_1) + ombra soft come Figma */
.single-product form.cart .pmc-buy-now {
  flex: 1 1 100%;
  width: 100%;
  height: 48px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  text-align: center;
  border-radius: 999px !important;
  box-shadow: 0 12px 22px rgba(38, 42, 66, 0.28) !important;
}
/* Niente bordo-gradiente bianco (button.css / us-btn-style_1): Figma = navy pulito */
.single-product form.cart .pmc-buy-now::before,
.single-product form.cart .pmc-buy-now::after {
  display: none !important;
}
/* Hover pulito: il tema porterebbe bg grigio/bianco (--color-button-2) + testo
 * nero. Manteniamo il navy (solo più scuro) e testo bianco. */
.no-touch .single-product form.cart .pmc-buy-now:hover {
  background: linear-gradient(91deg, #363c61 0%, #1e2236 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 16px rgba(38, 42, 66, 0.34) !important;
}

/* ----- Buy box mobile (Figma 522:16317) -------------------------------
 * 3 righe da 42px, gap 8px:
 *   1) quantità a tutta larghezza (− a sinistra, valore centrato, + a destra)
 *   2) "Add to cart" (flessibile) + cuore 40px
 *   3) "Buy now" a tutta larghezza
 * Senza questo, il cuore va a capo da solo (riga 1 non ci sta a 393px). */
@media (max-width: 600px) {
  .single-product .w-post-elm.add_to_cart form.cart {
    gap: 8px;
  }

  /* Riga 1 — pill quantità full width. − e + larghi 40px senza padding sul
   * contenitore: centro icona a 20px dal bordo = i 12px + 16/2 del Figma. */
  .single-product form.cart .quantity {
    flex: 1 1 100%;
    width: 100%;
    height: 42px;
  }
  .single-product form.cart .quantity .minus,
  .single-product form.cart .quantity .plus,
  .single-product form.cart .quantity input.qty {
    height: 42px !important;
  }
  .single-product form.cart .quantity .minus,
  .single-product form.cart .quantity .plus {
    flex: 0 0 auto;
    width: 40px;
    padding: 0 !important;
  }
  .single-product form.cart .quantity input.qty {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  /* Riga 2 — Add to cart + cuore (40px nel Figma mobile) */
  .single-product form.cart .single_add_to_cart_button {
    flex: 1 1 auto;
    min-width: 0;
    height: 42px;
  }
  .single-product .for_add_to_favs .us_add_to_favs {
    width: 40px !important;
    height: 40px !important;
  }
  .single-product .for_add_to_favs .us_add_to_favs i {
    font-size: 16px;
  }

  /* Riga 3 — Buy now: ombra più contenuta del desktop (Figma 0 4px 6px) */
  .single-product form.cart .pmc-buy-now {
    height: 42px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.16) !important;
  }
}

/* ===== Galleria single product (Figma 522:16623) =======================
 * Slider Impreza `us_image_slider` (royalSlider) reso come il Figma:
 *   stage 507x720 → ratio 507/720, radius 40px, immagine cover
 *   thumbs 64x64 radius 12, gap stage/thumbs 16px, attiva bordo 1px #080707
 * L'altezza dello stage è inline (calcolata da royalSlider sul ratio
 * dell'immagine): serve `height: auto !important` + aspect-ratio. */
.pmc__product-template-slide .rsOverflow {
  height: auto !important;
  aspect-ratio: 507 / 720;
  background: #ffffff;
  border-radius: 40px;
}
.pmc__product-template-slide .rsSlide,
.pmc__product-template-slide .rsContent {
  height: 100% !important;
}
.pmc__product-template-slide .rsContent img,
.pmc__product-template-slide .rsSlide > img {
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  margin: 0 !important;
  object-fit: cover;
  border-radius: 40px;
}
/* Strip thumbs: royalSlider tiene il gap orizzontale a 4px inline (la sua
 * matematica di scroll dipende da quel valore, non si tocca). */
.pmc__product-template-slide .rsNav.rsThumbs {
  height: 64px !important;
  margin-top: 16px;
  padding: 0 !important;
}
.pmc__product-template-slide .rsThumb {
  border-radius: 12px;
  overflow: hidden;
}
.pmc__product-template-slide .rsThumb img.rsTmb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}
/* Thumb attiva: Impreza disegna un ::after 2px con l'accent #646CFD.
 * Lo riusiamo come bordo Figma: 1px #080707, radius 12. */
.pmc__product-template-slide .rsThumb.rsNavSelected::after {
  border-width: 1px !important;
  border-color: #080707 !important;
  border-radius: 12px !important;
}

/* Mobile: stage 360x290 (orizzontale), non il 507/720 del desktop. */
@media (max-width: 600px) {
  .pmc__product-template-slide .rsOverflow {
    aspect-ratio: 360 / 290;
  }
}