/* Fanatyco Variation Color Swatches v1.0.1 */
/* Global variables */
:root{
  --fanaty-swatch-size: 28px;
  --fanaty-swatch-gap: 8px;
  --fanaty-swatch-border: 2px;
  --fanaty-swatch-radius: 0px;     /* square corners per request */
  --fanaty-swatch-ring: #00C8F4;
  --fanaty-size-font: 14px;
  --fanaty-size-pad-x: 10px;
  --fanaty-size-pad-y: 6px;
  --fanaty-size-radius: 4px;       /* can adjust if you want square: set to 0 */
}

/* Common row/list wrappers */
.fanaty-row{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 12px;
  flex-wrap: wrap;
}
.fanaty-list{
  display: flex;
  gap: var(--fanaty-swatch-gap);
  align-items: center;
  flex-wrap: wrap;
}

/* ===== Color swatches (squares) ===== */
.fanaty-swatch{
  width: var(--fanaty-swatch-size);
  height: var(--fanaty-swatch-size);
  border: var(--fanaty-swatch-border) solid rgba(255,255,255,.5);
  border-radius: var(--fanaty-swatch-radius);
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  outline: none;
  padding: 0; /* 0px padding per request */
}
.fanaty-swatch[aria-checked="true"]{
  box-shadow: 0 0 0 2px var(--fanaty-swatch-ring);
  border-color: #fff;
}
.fanaty-swatch.is-disabled{
  opacity: .35;
  pointer-events: none;
}

/* Hide the original select but keep it accessible to screen readers */
.fanaty-visually-hidden{
  position:absolute !important;
  height:1px; width:1px;
  overflow:hidden; clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
  border:0; padding:0; margin:-1px;
}

/* ===== Size radios (text buttons) ===== */
.fanaty-size{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fanaty-size-font);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: var(--fanaty-size-radius);
  padding: var(--fanaty-size-pad-y) var(--fanaty-size-pad-x);
  line-height: 1;
  cursor: pointer;
  background: transparent;
  color: inherit;
}
.fanaty-size[aria-checked="true"]{
  border-color: var(--fanaty-swatch-ring);
  box-shadow: 0 0 0 2px rgba(0,200,244,.25);
}
.fanaty-size.is-disabled{
  opacity: .35;
  pointer-events: none;
}