/* ══════════════════════════════════════════════
 * ALMA Swimwears — Variation Swatches
 * Replaces YITH Color/Label Swatches
 * Style Belle des Pins, ultra-minimal
 * ══════════════════════════════════════════════ */

/* ── Hide default WooCommerce selects when swatches are active ── */
.alma-swatches-active .variations select {
  display: none !important;
}

/* ── Hide ALL reset/effacer buttons + recap + alerts ── */
.reset_variations,
.variations .reset_variations,
body .reset_variations,
body .variations .reset_variations,
.single-product .reset_variations,
.single-product .variations .reset_variations,
a.reset_variations,
body a.reset_variations,
#alma-recap,
body #alma-recap,
.single-product #alma-recap,
.reset_variations_alert,
body .reset_variations_alert,
.single-product .reset_variations_alert {
  display: none !important;
}

/* ── Remove ALL grey backgrounds on variations ── */
.variations,
.variations tr,
.variations td,
.variations th,
.variations tbody,
table.variations,
table.variations tr,
table.variations td,
table.variations th,
table.variations tbody,
body .variations,
body .variations tr,
body .variations td,
body .variations th,
body table.variations,
body table.variations tr,
body table.variations td,
body table.variations th,
.single-product .variations,
.single-product .variations tr,
.single-product .variations td,
.single-product .variations th,
.single-product table.variations,
.single-product table.variations tr,
.single-product table.variations td,
.single-product table.variations th,
.woocommerce .variations,
.woocommerce .variations tr,
.woocommerce .variations td,
.woocommerce .variations th {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}


/* ══════════════════════════════════════════════
 * LAYOUT — Force inline (label + swatches on same row)
 * ══════════════════════════════════════════════ */

.alma-swatches-active .variations {
  border: none !important;
  margin-bottom: 16px !important;
  border-collapse: collapse !important;
}

.alma-swatches-active .variations tr {
  display: flex !important;
  align-items: center !important;
  border: none !important;
  padding: 10px 0 !important;
}

.alma-swatches-active .variations td,
.alma-swatches-active .variations th {
  display: inline-flex !important;
  align-items: center !important;
  border: none !important;
  padding: 0 !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

.alma-swatches-active .variations th.label,
.alma-swatches-active .variations .label {
  padding-right: 16px !important;
  flex-shrink: 0 !important;
}

.alma-swatches-active .variations td.value {
  flex: 1 !important;
  padding-left: 0 !important;
}

/* ── Swatch row ── */
.alma-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 0;
}

/* ── Attribute label ── */
.variations .label label,
.variations th.label label {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #1a1a1a !important;
}

/* ── Selected value display ── */
.alma-swatch-selected {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #8a8a8a;
  margin-left: 6px;
}

/* Hide the "Choose an option" text */
.alma-swatches-active .variations td.value select {
  display: none !important;
}


/* ══════════════════════════════════════════════
 * COLOR SWATCHES — Circles
 * ══════════════════════════════════════════════ */

.alma-swatch-color {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 1.5px solid #e0e0e0 !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  position: relative !important;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  flex-shrink: 0 !important;
}

/* Inner color fill */
.alma-swatch-color::before {
  content: '' !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  right: 2px !important;
  bottom: 2px !important;
  border-radius: 50% !important;
  background: var(--swatch-color) !important;
}

/* Hover */
.alma-swatch-color:hover {
  border-color: #999 !important;
  transform: scale(1.08) !important;
}

/* Active / Selected */
.alma-swatch-color.active {
  border-color: #1a1a1a !important;
  box-shadow: 0 0 0 1.5px #1a1a1a !important;
  transform: scale(1.08) !important;
}

/* Disabled / out of stock */
.alma-swatch-color.disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.alma-swatch-color.disabled::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: -1px !important;
  right: -1px !important;
  height: 1px !important;
  background: #999 !important;
  transform: rotate(-45deg) !important;
}

/* White color — needs visible border */
.alma-swatch-color[data-color-light="true"] {
  border-color: #d0d0d0 !important;
}

.alma-swatch-color[data-color-light="true"].active {
  border-color: #1a1a1a !important;
}


/* ══════════════════════════════════════════════
 * SIZE / LABEL SWATCHES — Text buttons
 * ══════════════════════════════════════════════ */

.alma-swatch-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  height: 32px !important;
  padding: 0 12px !important;
  border: 1px solid #d8d8d8 !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: #8a8a8a !important;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* Hover */
.alma-swatch-label:hover {
  border-color: #1a1a1a !important;
  color: #1a1a1a !important;
}

/* Active / Selected */
.alma-swatch-label.active {
  border-color: #1a1a1a !important;
  background: #1a1a1a !important;
  color: #fff !important;
}

/* Disabled / out of stock */
.alma-swatch-label.disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  text-decoration: line-through !important;
}


/* ══════════════════════════════════════════════
 * RESPONSIVE
 * ══════════════════════════════════════════════ */

/* ── Tablet ── */
@media (max-width: 768px) {
  .alma-swatch-color {
    width: 34px !important;
    height: 34px !important;
  }

  .alma-swatch-label {
    min-width: 42px !important;
    height: 38px !important;
    padding: 0 14px !important;
    font-size: 11px !important;
  }

  .alma-swatch-row {
    gap: 10px;
  }

  .variations .label label,
  .variations th.label label {
    font-size: 11px !important;
  }

  .alma-swatch-selected {
    font-size: 11px;
  }
}

/* ── Small mobile ── */
@media (max-width: 480px) {
  .alma-swatch-color {
    width: 36px !important;
    height: 36px !important;
  }

  .alma-swatch-label {
    min-width: 44px !important;
    height: 40px !important;
    padding: 0 16px !important;
  }

  .alma-swatch-row {
    gap: 8px;
  }
}

/* ── Très petit mobile ── */
@media (max-width: 380px) {
  .alma-swatch-color {
    width: 32px !important;
    height: 32px !important;
  }

  .alma-swatch-label {
    min-width: 40px !important;
    height: 36px !important;
    padding: 0 12px !important;
    font-size: 10px !important;
  }

  .alma-swatch-row {
    gap: 6px;
  }
}