/* ================================
   TKQB – Quantità base (no dialog)
   Tipografia demandata a Elementor
   ================================ */

:root{
  --tkqb-gap:            clamp(4px, 0.5vw, 12px);
  --tkqb-btn-size:       clamp(34px, 1.9vw, 44px);
  --tkqb-input-w:        clamp(56px, 3.4vw, 72px);
  --tkqb-radius:         5px;
  --tkqb-border:         max(1px, 0.06vw);
  --tkqb-outline:        max(2px, 0.12vw);
  --tkqb-shadow-sm:      0 1px 2px rgba(0,0,0,.06);
  --tkqb-shadow-md:      0 2px 6px rgba(0,0,0,.10);
  --tkqb-border-color:   #e3e3e7;
}

/* Quantità wrapper */
.quantity{
  position: relative !important;
  display: inline-flex !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Bottoni + / − (inseriti via hook PHP) */
.tkqb-qty-btn{
  width: var(--tkqb-btn-size) !important;
  height: var(--tkqb-btn-size) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--tkqb-radius) !important;
  border: var(--tkqb-border) solid var(--tkqb-border-color) !important;
  line-height: 1 !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: var(--tkqb-shadow-sm) !important;
  transition: transform .06s ease, box-shadow .2s ease !important;
}
.tkqb-qty-btn:hover{ box-shadow: var(--tkqb-shadow-md) !important; }
.tkqb-qty-btn:active{ transform: translateY(1px) !important; }
.tkqb-qty-btn:focus{
  outline: var(--tkqb-outline) solid #8ab4f8 !important;
  outline-offset: 2px !important;
}

/* Input quantità */
.quantity input.qty{
  width: var(--tkqb-input-w) !important;
  height: var(--tkqb-btn-size) !important;
  text-align: center !important;
  border: var(--tkqb-border) solid var(--tkqb-border-color) !important;
  border-radius: var(--tkqb-radius) !important;
  background: #fff !important;
  color: inherit !important;
  font: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.04) !important;
  appearance: textfield !important;
  -moz-appearance: textfield !important;
}
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button{
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Stato pulsante “aggiunto” + link carrello */
.single_add_to_cart_button.tkqb-added{
  opacity: .9 !important;
  pointer-events: none !important;
}
.tkqb-view-cart{
  margin-left: clamp(.5rem, 0.8vw, 1rem) !important;
  display: inline-block !important;
  text-decoration: underline !important;
  color: inherit !important;
}

/* Stato loading del pulsante */
.single_add_to_cart_button.is-loading{
  opacity: .85;
  pointer-events: none;
}

.tks-upsell-qty {
  position: relative;
}
.tks-upsell-added-label {
  position: absolute;
  top: -1.6em;
  left: 0;
  font-size: 0.85em;
  font-weight: 600;
  color: #0a8a3a;
  background: rgba(10, 138, 58, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}




.upsell-box-price {font-size: 70%; line-height: 1em;}

/* contenitore della lista */
.lista-upsell {
  position: relative;
  max-height: 30vh;
  overflow: hidden;
  background: #fff;
  border-radius: .75rem;
  transition: max-height .35s ease;
}
.upsell-toggle {
	display: none;
	position: relative;
	height: 5rem;
	margin-top: -5rem;
	width: 100%;
	background: linear-gradient(
	   to bottom,
	   rgba(255,255,255,0) 0%,
	   rgba(255,255,255,1) 90%,
	   #fff 100%
	 );
	z-index: 1;
}
.upsell-toggle.mostra-toggle {display: block!important;}
/* 🔽 Freccia reale che sostituisce ::before */
.upsell-toggle::before {
  content: "";
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%) translateY(50%) rotate(0deg);
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23333' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 2;
  animation: bounce 1.2s ease-in-out infinite;
  cursor: pointer;
}

/* animazione rimbalzo */
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(50%); }
  50% { transform: translateX(-50%) translateY(35%); }
}

/* Stato espanso */
.lista-upsell.expanded {
  max-height: 10000vh;
  overflow: visible;
}
.upsell-toggle.expanded {
	margin-top: 0;
}
/* Rimuovi sfumatura */
.lista-upsell.expanded::after {
  display: none;
}

/* 🔼 Freccia ruotata */
.upsell-toggle.expanded::before {
  background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23333' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 15l7-7 7 7'/%3E%3C/svg%3E");
  transform: translateX(-50%) translateY(50%) rotate(180deg);
}



/* Tabella attributi personalizzata */
.custom-product-attributes {width:100%; border-collapse: collapse; text-align: left}
.custom-product-attributes th, .custom-product-attributes td {width: 50%}
.custom-label {font-size: 70%; font-weight: 400; font-style: italic;}
















/* Responsive */
@media (max-width: 1024px){
  :root{
    --tkqb-btn-size: clamp(36px, 2.6vw, 46px);
    --tkqb-input-w:  clamp(58px, 4.4vw, 78px);
    --tkqb-gap:      clamp(6px, 0.9vw, 12px);
  }
}
@media (max-width: 767px){
  :root{
    --tkqb-btn-size: clamp(38px, 6vw, 50px);
    --tkqb-input-w:  clamp(60px, 14vw, 84px);
    --tkqb-gap:      clamp(6px, 2.5vw, 14px);
  }
  .tkqb-view-cart {
  	padding-top: 20px;
  }
}