/* ==========================================================
   DESKTOP
   ========================================================== */
@media (min-width: 681px) {
  .nome-mobile {
    display: none;
  }

  .blocco-principale {
    display: grid;
    gap: clamp(1rem, calc(-0.5rem + 2vw), 3rem);
    grid-template-columns: clamp(50%, calc(39.2% + 10.2vw), 65%) 1fr;
    margin-bottom: clamp(1rem, calc(-0.5rem + 2vw), 3rem);
  }

  .blocco-principale .blocco-destro {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, calc(-1rem + 5vw), 2rem);
    position: sticky;
    top: 80px;
  }

  .gruppo-immagini-prodotto {
    position: relative;
    top: -50px;
  }

  .container-blocco-destro {
    padding: 0 1rem;
  }
    
  .mobile-product-toolbar {
    display: none;
  }
}


/* ==========================================================
   STRUTTURA GENERALE
   ========================================================== */
.container-blocco-destro {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, calc(-0.5rem + 2vw), 2rem);
}

.product__manufacturer {
  text-align: right;
}

.product-actions__quantity.product__quantity.quantity-button.js-quantity-button {
  display: none;
}


/* ==========================================================
   PREZZO E DISPONIBILITÀ
   ========================================================== */

.product__price{
  display: flex;
  align-items: center;
  gap: .4rem
}

.product__price-info{
  position: relative;
  display: inline-flex;
  align-items: center
}

.product__price-info-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .68rem;
  line-height: 1;
}
  
.product__price-info-trigger:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 3px
}

.product__price-tooltip {
	position: absolute;
	z-index: 30;
	top: calc(100% + .55rem);
	right: 0;
	width: max-content;
	max-width: min(18rem,calc(100vw - 2rem));
	padding: .7rem .85rem;
	border: 1px solid currentColor;
	border-radius: .4rem;
	background: var(--colore-superficie);
	font-size: var(--dimensione-testo-secondario);
	box-shadow: 0 .35rem 1rem rgba(0,0,0,.12);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-.25rem);
	transition: opacity .15s ease,transform .15s ease,visibility 0s linear .15s;
}

@media (hover:none) {
  .product__price-info:hover .product__price-tooltip{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform:translateY(-.25rem);
  }

  .product__price-info.is-open .product__price-tooltip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion:reduce) {
  .product__price-tooltip {
    transition: none;
  }
}


/* ==========================================================
   VARIANTI PRODOTTO (UNIFICATE E CORRETTE)
   ========================================================== */
.page-product .product__variants {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.product-variant__legend {
  font-size: var(--dimensione-testo);
  margin-bottom: 0.75rem;
}

.selected-value.product-variant__selected {
  display: none;
}

.product-variant__radios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 10px;
  width: 100%;
}

.product-variant__radio {
	max-width: 150px;
	width: 100%;
	margin: 0;
	padding: 0;
}

.product-variant__radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.product-variant__radio label {
  margin: 0;
  width: 100%;
  cursor: pointer;
  display: block;
}

.product-variant__radio .form-check-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: var(--angolo-leggero, 4px);
  background-color: var(--colore-superficie-trasparente, #fff);
  text-align: center;
  user-select: none;
  transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}

/* Hover */
.product-variant__radio label:hover .form-check-label {
  border-color: #000;
  background-color: #f8f9fa;
}

/* Selezionato (Checked) */
.product-variant__radio input[type="radio"]:checked + label .form-check-label {
  border-color: var(--colore-ombra, #000);
  background-color: var(--colore-ombra, #000);
  color: var(--colore-testo-contrasto, #fff);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Accessibilità Tastiera (Focus) */
.product-variant__radio input[type="radio"]:focus-visible + label .form-check-label {
  outline: 2px solid var(--colore-accento, #005fcc);
  outline-offset: 2px;
}


/* ==========================================================
   VARIANTI COLORE
   ========================================================== */
.product-variant__colors {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.product-variant__color .input-color__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.product-variant__color .input-color__input:checked + label {
  border-color: var(--colore-accento);
}

.product-variant__color .color {
  display: block;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.product-variant__color .color[data-check-color="black"] {
  --check-color: var(--colore-testo);
}

.product-variant__color .color[data-check-color="white"] {
  --check-color: var(--colore-testo-contrasto);
}

.product-variant__color .color::after {
  content: "";
  position: absolute;
  display: none;
  left: 50%;
  top: 45%;
  width: 10px;
  height: 15px;
  border: solid var(--check-color, var(--colore-testo-contrasto));
  border-width: 0px 4px 4px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.product-variant__color .input-color__input:checked + label .color::after {
  display: block;
}


/* ==========================================================
   SEZIONI INFERIORI
   ========================================================== */
.blocco-inferiore {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, calc(-0.5rem + 2vw), 2rem);
  margin-bottom: clamp(1rem, calc(-0.5rem + 2vw), 3rem);
}

.rassicurazioni-cliente {
  justify-content: space-between;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  text-align: center;
  padding: 1rem;
  background: var(--colore-superficie);
}

.rassicurazioni-cliente p {
  font-size: var(--dimensione-testo-secondario);
  padding: 1rem;
}