/**
 * Etiler AVS — simple gold-framed image swatches (WoodMart-safe).
 */

.etiler-avs {
  margin: 0;
  position: relative;
  z-index: 20;
  pointer-events: auto !important;
}

.etiler-avs__list {
  position: relative;
  z-index: 21;
  pointer-events: auto !important;
}

body.etiler-avs-active .etiler-avs__swatch {
  pointer-events: auto !important;
  position: relative;
  z-index: 22;
  touch-action: manipulation;
}

body.etiler-avs-active .etiler-avs__swatch .etiler-avs__img {
  pointer-events: none !important;
}

body.etiler-avs-active table.variations tr.etiler-avs-row--image {
  display: table-row;
}

body.etiler-avs-active table.variations tr.etiler-avs-row--image td.value {
  padding-bottom: 1.25rem !important;
}

body.etiler-avs-active table.variations tr.etiler-avs-row--text td.value {
  padding-top: 0.15rem !important;
}

body.etiler-avs-active table.variations tr.etiler-avs-row--image .label label {
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 500 !important;
}

.etiler-avs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.etiler-avs--text .etiler-avs__list {
  gap: 10px;
}

/* Text / option swatches — flex wrap, no WoodMart grid overlap */
body.etiler-avs-active table.variations {
  display: block !important;
  width: 100% !important;
  border: 0 !important;
}

body.etiler-avs-active table.variations tbody,
body.etiler-avs-active table.variations tr,
body.etiler-avs-active table.variations tr.etiler-avs-row--text,
body.etiler-avs-active table.variations tr.etiler-avs-row--image,
body.etiler-avs-active table.variations tr:has(.etiler-avs) {
  display: block !important;
  width: 100% !important;
}

body.etiler-avs-active table.variations th.label,
body.etiler-avs-active table.variations td.label {
  display: block !important;
  width: 100% !important;
  padding: 0 0 10px !important;
  border: 0 !important;
}

body.etiler-avs-active table.variations td.value {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 0 14px !important;
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  column-count: auto !important;
}

body.etiler-avs-active .etiler-avs--text .etiler-avs__list,
body.etiler-avs-active .etiler-avs__list {
  display: flex !important;
  flex-wrap: wrap !important;
  flex-direction: row !important;
  align-items: stretch !important;
  align-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

body.etiler-avs-active .etiler-avs__label {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  vertical-align: top !important;
  float: none !important;
  position: relative !important;
}

/* Hide native selects (keep programmatic access) */
body.etiler-avs-active form.variations_form select.etiler-avs__select,
body.etiler-avs-active form.variations_form select:has(+ .etiler-avs),
body.etiler-avs-active td.value:has(.etiler-avs) > select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
}

.etiler-avs__radio {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.etiler-avs__label {
  display: inline-block;
  margin: 0;
  padding: 0;
  cursor: pointer;
  line-height: normal;
}

.etiler-avs__label .etiler-avs__swatch.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ── IMAGE SWATCH: fixed square, img fills via absolute + cover ── */
body.etiler-avs-active button.etiler-avs__swatch.etiler-avs__swatch--image,
body.etiler-avs-active span.etiler-avs__swatch.etiler-avs__swatch--image,
body.etiler-avs-active .etiler-avs__label .etiler-avs__swatch--image,
body.etiler-avs-active table.variations button.etiler-avs__swatch--image {
  position: relative !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 90px !important;
  height: 90px !important;
  min-width: 90px !important;
  min-height: 90px !important;
  max-width: 90px !important;
  max-height: 90px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 2px solid rgba(184, 149, 59, 0.55) !important;
  border-radius: 10px !important;
  background: #EBD89A !important;
  overflow: hidden !important;
  cursor: pointer !important;
  line-height: 0 !important;
  font-size: 0 !important;
  vertical-align: top !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
  transform: none;
}

body.etiler-avs-active button.etiler-avs__swatch--image:hover:not(.is-disabled),
body.etiler-avs-active span.etiler-avs__swatch--image:hover:not(.is-disabled),
body.etiler-avs-active .etiler-avs__label:hover .etiler-avs__swatch--image:not(.is-disabled) {
  border-color: #b8953b !important;
}

body.etiler-avs-active button.etiler-avs__swatch--image.is-disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}

body.etiler-avs-active button.etiler-avs__swatch--text.is-disabled,
body.etiler-avs-active button.etiler-avs__swatch--text-fallback.is-disabled,
body.etiler-avs-active button.etiler-avs__swatch--color.is-disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}

body.etiler-avs-active button.etiler-avs__swatch--image .etiler-avs__img,
body.etiler-avs-active table.variations button.etiler-avs__swatch--image img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Label */
body.etiler-avs-active table.variations tr:has(.etiler-avs) .label label {
  font-size: 12px !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: #1C1917 !important;
}

/* Premium text buttons */
body.etiler-avs-active button.etiler-avs__swatch--text,
body.etiler-avs-active span.etiler-avs__swatch--text,
body.etiler-avs-active button.etiler-avs__swatch--text-fallback,
body.etiler-avs-active span.etiler-avs__swatch--text-fallback,
body.etiler-avs-active .etiler-avs--text .etiler-avs__swatch,
body.etiler-avs-active .etiler-avs__label .etiler-avs__swatch:not(.etiler-avs__swatch--image):not(.etiler-avs__swatch--color) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 72px;
  min-height: 42px;
  height: auto !important;
  padding: 11px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  text-align: center !important;
  word-break: break-word !important;
  color: #1C1917 !important;
  background: #FBF6D4 !important;
  border: 1.5px solid rgba(184, 149, 59, 0.45) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  float: none !important;
  transform: none !important;
  margin: 0 !important;
}

body.etiler-avs-active button.etiler-avs__swatch--text.is-active,
body.etiler-avs-active span.etiler-avs__swatch--text.is-active,
body.etiler-avs-active button.etiler-avs__swatch--text-fallback.is-active,
body.etiler-avs-active span.etiler-avs__swatch--text-fallback.is-active,
body.etiler-avs-active .etiler-avs--text button.etiler-avs__swatch.is-active,
body.etiler-avs-active .etiler-avs--text span.etiler-avs__swatch.is-active,
body.etiler-avs-active .etiler-avs__label.is-selected .etiler-avs__swatch--text,
body.etiler-avs-active .etiler-avs__label.is-selected .etiler-avs__swatch--text-fallback,
body.etiler-avs-active .etiler-avs__label.is-selected .etiler-avs__swatch:not(.etiler-avs__swatch--image):not(.etiler-avs__swatch--color),
body.etiler-avs-active .etiler-avs__label:has(.etiler-avs__swatch.is-active) .etiler-avs__swatch--text,
body.etiler-avs-active .etiler-avs__label:has(.etiler-avs__swatch.is-active) .etiler-avs__swatch--text-fallback {
  background: #1C1917 !important;
  border-color: #d4af37 !important;
  border-width: 2px !important;
  color: #FBF6D4 !important;
  box-shadow: none !important;
  transform: none !important;
  transform: scale(1.02) !important;
}

body.etiler-avs-active button.etiler-avs__swatch--image.is-active,
body.etiler-avs-active span.etiler-avs__swatch--image.is-active,
body.etiler-avs-active .etiler-avs__label.is-selected .etiler-avs__swatch--image,
body.etiler-avs-active .etiler-avs__label:has(.etiler-avs__swatch--image.is-active) .etiler-avs__swatch--image {
  border-color: #d4af37 !important;
  border-width: 3px !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.85), 0 0 0 4px #d4af37, 0 10px 24px rgba(184, 149, 59, 0.45) !important;
  transform: scale(1.04) !important;
}

body.etiler-avs-active button.etiler-avs__swatch--color.is-active,
body.etiler-avs-active span.etiler-avs__swatch--color.is-active,
body.etiler-avs-active .etiler-avs__label.is-selected .etiler-avs__swatch--color,
body.etiler-avs-active .etiler-avs__label:has(.etiler-avs__swatch--color.is-active) .etiler-avs__swatch--color {
  border-color: #d4af37 !important;
  box-shadow: 0 0 0 2px #000, 0 0 0 4px #d4af37, 0 6px 16px rgba(184, 149, 59, 0.5) !important;
  transform: scale(1.12) !important;
}

/* Color swatches */
body.etiler-avs-active button.etiler-avs__swatch--color {
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border: 2px solid rgba(184, 149, 59, 0.55) !important;
  border-radius: 50% !important;
}

body.etiler-avs-active a.reset_variations,
body.etiler-avs-active .reset_variations {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

body.etiler-avs-active:has(.etiler-avs) .wd-swatches-product,
body.etiler-avs-active:has(.etiler-avs) .wd-attr-swatches,
body.etiler-avs-active:has(.etiler-avs) .wd-swatches-grid,
body.etiler-avs-active:has(.etiler-avs) .wd-swatch,
body.etiler-avs-active:has(.etiler-avs) .wd-swatches-single,
body.etiler-avs-active:has(.etiler-avs) .wd-swatches-wrap,
body.etiler-avs-active:has(.etiler-avs) .swatches-on-grid,
body.etiler-avs-active:has(.etiler-avs) .wd-attr-label-wrap .wd-swatches {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

@media (max-width: 767px) {
  body.etiler-avs-active button.etiler-avs__swatch--image {
    width: 78px !important;
    height: 78px !important;
    min-width: 78px !important;
    min-height: 78px !important;
    max-width: 78px !important;
    max-height: 78px !important;
  }

  .etiler-avs__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .etiler-avs__list::-webkit-scrollbar {
    display: none;
  }
}