/*--------------------------------------------------------------
# FZN • Size swatches styling + Divi FOUC/chevron guard
# v1.1.1
#--------------------------------------------------------------*/

/* Hide any select we converted (JS adds this class) */
html.js .variations select.fzn-select-hidden{
  display: none !important;
}

/* Hide Divi's wrapper that draws the dropdown chevron */
html.js .variations td.value > span:has(> select.fzn-select-hidden),
html.js .variations .value > span:has(> select.fzn-select-hidden){
  display: none !important;
}

/* Swatch layout */
.fzn-swatches{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:.5rem 0 1rem;
}

/* Swatch button */
.fzn-swatch{
  border:1px solid #ccc;
  padding:.5rem .75rem;
  border-radius:.375rem;
  background:#fff;
  cursor:pointer;
  line-height:1;
  min-width:2.5rem;
  text-align:center;
  user-select:none;
  font: inherit;
}

/* Hover/focus/selected/disabled states */
.fzn-swatch:hover{ border-color:#666; }

.fzn-swatch:focus{
  outline:2px solid #333;
  outline-offset:2px;
}

.fzn-swatch.is-selected{
  border-color:#111;
  box-shadow:0 0 0 2px rgba(0,0,0,.08) inset;
}

.fzn-swatch.is-disabled{
  opacity:.45;
  cursor:not-allowed;
  text-decoration:line-through;
}