/* =========================================================
   AUR WooCommerce Qty + Add to Cart  —  v1.1.0
   - .quantity blir ett 3-kolumners grid: [-] [input] [+]
   - WoodMart-liknande uttryck
   - Elementor-variabler som färgkälla (fallbacks finns)
   ========================================================= */

/* -------- Färger / Variabler (Elementor-aware) -------- */
:root{
  /* Qty */
  --qty-border: var(--e-global-color-text, #e5e7eb);
  --qty-bg: #ffffff;
  --qty-icon: #9ca3af;
  --qty-icon-hover: #4b5563;
  --qty-divider: #e5e7eb;

  /* CTA-knapp */
  --addtocart-bg:        var(--e-global-color-accent, #88B04B);
  --addtocart-bg-hover:  color-mix(in srgb, var(--addtocart-bg) 88%, #000 12%);
  --addtocart-text:      #ffffff;
}

/* =========================================================
   RADLAYOUT: qty + knapp i samma rad
   ========================================================= */
.woocommerce div.product form.cart,
.elementor .woocommerce div.product form.cart,
.elementor-kit .woocommerce div.product form.cart {
  display: flex !important;
  align-items: center !important;
  gap: .75rem !important;
  flex-wrap: wrap !important;
}

/* =========================================================
   QTY — GÖR HELA .quantity TILL GRID
   ========================================================= */
.woocommerce div.product form.cart .quantity.aur-qty,
.woocommerce-cart-form .quantity.aur-qty {
  display: grid !important;
  grid-template-columns: 2.5rem 3rem 2.5rem !important; /* - [input] + */
  align-items: center !important;
  height: 2.6rem !important;
  border: 1px solid var(--qty-border) !important;
  border-radius: .35rem !important;
  background: var(--qty-bg) !important;
  overflow: hidden !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.02) !important;
}

/* Minus i första kolumnen */
.woocommerce div.product form.cart .quantity.aur-qty .aur-qty__btn:first-child,
.woocommerce-cart-form .quantity.aur-qty .aur-qty__btn:first-child {
  grid-column: 1 / 2 !important;
  border: 0 !important;
  border-right: 1px solid var(--qty-divider) !important;
}

/* Plus i sista kolumnen */
.woocommerce div.product form.cart .quantity.aur-qty .aur-qty__btn:last-child,
.woocommerce-cart-form .quantity.aur-qty .aur-qty__btn:last-child {
  grid-column: 3 / 4 !important;
  border: 0 !important;
  border-left: 1px solid var(--qty-divider) !important;
}

/* Gemensam knappstil */
.woocommerce div.product form.cart .quantity.aur-qty .aur-qty__btn,
.woocommerce-cart-form .quantity.aur-qty .aur-qty__btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  color: var(--qty-icon) !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  line-height: 1 !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: color .15s ease, background .15s ease, transform .06s ease !important;
}
.woocommerce div.product form.cart .quantity.aur-qty .aur-qty__btn:hover,
.woocommerce-cart-form .quantity.aur-qty .aur-qty__btn:hover {
  color: var(--qty-icon-hover) !important;
  background: rgba(0,0,0,.03) !important;
}
.woocommerce div.product form.cart .quantity.aur-qty .aur-qty__btn:active,
.woocommerce-cart-form .quantity.aur-qty .aur-qty__btn:active {
  transform: translateY(1px) !important;
}

/* Input i mittenkolumnen */
.woocommerce div.product form.cart .quantity.aur-qty input.qty,
.woocommerce-cart-form .quantity.aur-qty input.qty {
  grid-column: 2 / 3 !important;
  width: 100% !important;
  min-width: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-align: center !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  color: #111827 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Ta bort spinnare i webkit */
.woocommerce div.product form.cart .quantity.aur-qty input.qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart .quantity.aur-qty input.qty::-webkit-inner-spin-button,
.woocommerce-cart-form .quantity.aur-qty input.qty::-webkit-outer-spin-button,
.woocommerce-cart-form .quantity.aur-qty input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
/* Firefox */
.woocommerce div.product form.cart .quantity.aur-qty input.qty[type=number],
.woocommerce-cart-form .quantity.aur-qty input.qty[type=number] {
  -moz-appearance: textfield !important;
}

/* Göm ev. tema-knappar som dubblas */
.woocommerce div.product form.cart .quantity .plus,
.woocommerce div.product form.cart .quantity .minus,
.woocommerce div.product form.cart .quantity .qty-button,
.woocommerce-cart-form .quantity .plus,
.woocommerce-cart-form .quantity .minus,
.woocommerce-cart-form .quantity .qty-button {
  display: none !important;
}

/* =========================================================
   ADD TO CART — WoodMart-liknande knapp
   ========================================================= */
.woocommerce div.product form.cart .single_add_to_cart_button.button,
.elementor .woocommerce div.product form.cart .single_add_to_cart_button.button {
  background: var(--addtocart-bg) !important;
  color: var(--addtocart-text) !important;
  border: 0 !important;
  border-radius: .35rem !important;
  height: 2.6rem !important;        /* matcha qty-höjd */
  padding: 0 1.25rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  line-height: 1 !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.04) !important;
  transition: background .15s ease, transform .06s ease, box-shadow .15s ease !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button.button:hover {
  background: var(--addtocart-bg-hover) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.06) !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button.button:active {
  transform: translateY(1px) !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button.button:disabled,
.woocommerce div.product form.cart .single_add_to_cart_button.button.disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
}

/* Nolla global knappstil på qty-knapparna */
.woocommerce div.product form.cart .quantity.aur-qty .aur-qty__btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  border: 0 !important;              /* ← tar bort den röda ramen */
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Våra egna avdelare (som tidigare) */
.woocommerce div.product form.cart .quantity.aur-qty .aur-qty__btn:first-child {
  border-right: 1px solid var(--qty-divider) !important;
}
.woocommerce div.product form.cart .quantity.aur-qty .aur-qty__btn:last-child {
  border-left: 1px solid var(--qty-divider) !important;
}

/* (valfritt) tydligare fokus utan ram */
.woocommerce div.product form.cart .quantity.aur-qty .aur-qty__btn:focus-visible {
  box-shadow: 0 0 0 .12rem rgba(0,0,0,.08) inset !important;
}




/* =========================================================
   Små skärmar
   ========================================================= */
@media (max-width: 480px){
  .woocommerce div.product form.cart .quantity.aur-qty,
  .woocommerce-cart-form .quantity.aur-qty {
    height: 2.45rem !important;
    grid-template-columns: 2.2rem 2.8rem 2.2rem !important;
  }
  .woocommerce div.product form.cart .single_add_to_cart_button.button {
    height: 2.45rem !important;
    padding: 0 1rem !important;
  }
}

/* Centrera VARIATIONER på mobil – färg & storlek */
@media (max-width: 768px) {
  /* 1) WooCommerce standard: <td class="value"> ... */
  .variations tr td.value {
    text-align: center !important;
  }
  /* Om value innehåller en wrapper (div/ul) – gör den till flex och centrera */
  .variations tr td.value > ul,
  .variations tr td.value > div {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center !important;
    gap: .5rem;
    margin: 0 auto !important;
    padding: 0 !important;
    list-style: none;
    width: auto !important;
    max-width: 100%;
  }
  /* Vanliga klassnamn från swatch-plugins */
  .variable-items-wrapper,
  .variations tr td.value .variable-items-wrapper {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center !important;
    gap: .5rem;
  }

  /* Våra egna färg-swatches (du har redan detta, men säkrar här) */
  .aur-attr__swatches { justify-content: center !important; }

  /* Om storlekar är text/knappar utan wrapper – gör barnen inline-flex */
  .variations tr td.value > a,
  .variations tr td.value > span,
  .variations tr td.value > label {
    display: inline-flex !important;
    margin: 0 .35rem .35rem !important;
  }

  /* Dropdown-fall: centrera själva selecten */
  .variations tr td.value select {
    margin: 0 auto !important;
    display: block !important;
  } 
}



/* Centrera storleksraden (XS–6XL) på mobil */
@media (max-width: 768px) {
  .aur-attr__items--size {
    display: flex;                  /* ifall något tema inte har flex */
    flex-wrap: wrap;
    justify-content: center !important;
    gap: .5rem;                     /* valfritt, snygg spacing */
    width: 100%;
    text-align: center;             /* fallback om barnen är inline */
  }

  /* Om storlekarna är länkar/labels direkt i raden */
  .aur-attr__items--size > * {
    display: inline-flex;
    margin: 0 .35rem .35rem;
  }
}

@media (max-width: 768px) {
  .variations .aur-attr__items--size { justify-content: center !important; }
}

/* Centrera etiketterna "Färg" och "Storlek" på mobil */
@media (max-width: 768px) {
  .variations label[for="pa_storlek"],
  .variations label[for="pa_farg"] {
    display: block;
    text-align: center !important;
    width: 100%;
    margin-bottom: .5rem; /* lite spacing under rubriken */
  }
}

@media (max-width: 768px) {
  .variations label {
    display: block;
    text-align: center !important;
    width: 100%;
    margin-bottom: .5rem;
  }
}

/* ==== TIGHT VARIATIONS SPACING PACK ==== */

/* 1) Ta bort tabellens rad-gap (om temat använder border-spacing-tricket) */
.woocommerce div.product form.cart table.variations,
table.variations {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

/* 2) Tighter vertikal padding i rader/celler */
table.variations tr > th.label,
table.variations tr > td.value {
  padding-top: 0 !important;
  padding-bottom: .0rem !important; /* justera efter smak */
}

/* 3) Litet mellanrum mellan blocken (Färg -> Storlek) */
table.variations tr + tr > th.label,
table.variations tr + tr > td.value {
  padding-top: .0rem !important;
}

/* 4) Vår egen wrapper hade stor under-marginal – minska den */
table.variations .aur-attr {
  margin-bottom: .0rem !important;   /* var ~1rem i swatch-CSS */
}

/* 5) Minska top-marginal på containers för färg/storlek */
.aur-attr__items--color,
.aur-attr__items--size,
.variable-items-wrapper,
.woo-variation-items-wrapper {
  margin-top: .0rem !important;
}

/* 6) Lite tajtare gap mellan individuella knappar (valfritt) */
.aur-attr__items--size { gap: .65rem !important; }
.aur-attr__swatches   { gap: .6rem  !important; } /* färgringarna */