/* IllumiWeb Variation Swatches */
.iwc-swatches-wrap { margin: 4px 0; }
.iwc-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.iwc-swatch {
    --sz: var(--iwc-swatch-size, 34px);
    position: relative;
    cursor: pointer;
    line-height: 0;
    border: 2px solid transparent;
    outline: 1px solid #d1d5db;
    transition: outline-color .12s, border-color .12s, transform .06s;
}
.iwc-swatch:hover { transform: translateY(-1px); }
.iwc-swatch.is-selected { border-color: var(--iwc-accent, #2271b1); outline-color: var(--iwc-accent, #2271b1); }
.iwc-swatch.is-disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }

/* Shapes */
.iwc-swatches--round .iwc-swatch,
.iwc-swatches--round .iwc-swatch__chip,
.iwc-swatches--round .iwc-swatch__img img { border-radius: 50%; }
.iwc-swatches--square .iwc-swatch,
.iwc-swatches--square .iwc-swatch__chip,
.iwc-swatches--square .iwc-swatch__img img { border-radius: 4px; }

/* Color chips */
.iwc-swatch__chip {
    display: block;
    width: var(--sz);
    height: var(--sz);
}
.iwc-swatch__chip--empty {
    background: repeating-linear-gradient(45deg,#eee,#eee 4px,#f7f7f7 4px,#f7f7f7 8px);
}

/* Image swatches */
.iwc-swatch__img,
.iwc-swatch__img img {
    display: block;
    width: var(--sz);
    height: var(--sz);
    object-fit: cover;
}

/* Button / label swatches */
.iwc-swatches--button .iwc-swatch { outline: none; border: 0; }
.iwc-swatch__btn {
    display: inline-block;
    line-height: 1.4;
    padding: 6px 14px;
    min-width: var(--sz);
    text-align: center;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    color: #1d2327;
    font-size: 13px;
    font-weight: 600;
    transition: all .12s;
}
.iwc-swatch:hover .iwc-swatch__btn { border-color: var(--iwc-accent, #2271b1); }
.iwc-swatch.is-selected .iwc-swatch__btn {
    border-color: var(--iwc-accent, #2271b1);
    background: var(--iwc-accent, #2271b1);
    color: #fff;
}

/* Archive (shop listing) — smaller, read-only */
.iwc-archive-swatches { margin: 6px 0 0; }
.iwc-swatches--mini .iwc-swatch { outline-width: 1px; cursor: default; }
.iwc-swatches--mini .iwc-swatch:hover { transform: none; }
.iwc-swatches--mini .iwc-swatch__chip,
.iwc-swatches--mini .iwc-swatch__img,
.iwc-swatches--mini .iwc-swatch__img img { width: 22px; height: 22px; }