/**
 * Mosestance Swatches Enhancement — Amazon-Style v4.4 (6-col PC / 5-col mobile)
 * v4.2: rewrite selectors — .vi-wpvs-variation-wrap as base (NO design-type class)
 *       covers image/color/button designs universally
 */
.vi-wpvs-variation-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    gap: 10px !important;
}
.vi-wpvs-variation-wrap .vi-wpvs-option-wrap,
.vi-wpvs-variation-wrap .vi-wpvs-option-wrap.vi-wpvs-option-wrap-default,
.vi-wpvs-variation-wrap .vi-wpvs-option-wrap.vi-wpvs-option-wrap-hover,
.vi-wpvs-variation-wrap .vi-wpvs-option-wrap.vi-wpvs-option-wrap-selected {
    width: calc((100% - 50px) / 6) !important;
    height: auto !important; aspect-ratio: 1 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}
.vi-wpvs-variation-wrap .vi-wpvs-option-wrap .vi-wpvs-option {
    width: 100% !important;
    height: 100% !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}
.vi-wpvs-variation-wrap .vi-wpvs-option-wrap-default:not(.vi-wpvs-option-wrap-out-of-stock):not(.vi-wpvs-option-wrap-out-of-stock-attribute) .vi-wpvs-option {
    opacity: 1 !important;
    border: 2px solid transparent !important;
}
.vi-wpvs-variation-wrap .vi-wpvs-option-wrap-hover:not(.vi-wpvs-option-wrap-out-of-stock):not(.vi-wpvs-option-wrap-out-of-stock-attribute) .vi-wpvs-option,
.vi-wpvs-variation-wrap .vi-wpvs-option-wrap:not(.vi-wpvs-option-wrap-out-of-stock):not(.vi-wpvs-option-wrap-out-of-stock-attribute):hover .vi-wpvs-option {
    opacity: 0.85 !important;
    border-color: #999 !important;
}
.vi-wpvs-variation-wrap .vi-wpvs-option-wrap-selected .vi-wpvs-option {
    opacity: 1 !important;
    border: 2px solid #e77600 !important;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #e77600 !important;
}
.vi-wpvs-variation-wrap .vi-wpvs-option-wrap.vi-wpvs-option-wrap-selected,
.vi-wpvs-variation-wrap .vi-wpvs-option-wrap-selected {
    box-shadow: none !important;
}
.vi-wpvs-variation-wrap .vi-wpvs-option-wrap .vi-wpvs-option-tooltip {
    font-size: 12px !important;
    background: #0F1111 !important;
    color: #fff !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
}
.swatch-color-label {
    width: 100%;
    font-size: 14px;
    color: #565959;
    margin: 0 0 8px 0;
    line-height: 1.4;
    order: -1;
}

.swatch-pagination-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    margin-top: 14px !important;
    width: 100% !important;
}
.swatch-page-btn {
    min-width: 32px; height: 32px; padding: 0 6px;
    border: 1px solid #D5D9D9; border-radius: 8px;
    background: #FFFFFF; color: #0F1111;
    font-size: 14px; font-weight: 400; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s, border-color 0.15s;
}
.swatch-page-btn:hover:not(:disabled):not(.swatch-page-active):not(.swatch-page-ellipsis) {
    background: #F0F2F2; border-color: #007185;
}
.swatch-page-btn:disabled { opacity: 0.4; cursor: default; }
.swatch-page-btn.swatch-page-active {
    background: #0F1111; color: #fff;
    border-color: #0F1111; font-weight: 700;
}
.swatch-page-btn.swatch-page-nav { font-size: 16px; font-weight: 700; }
.swatch-page-btn.swatch-page-ellipsis {
    border: none; background: transparent;
    cursor: default; font-size: 14px; color: #565959;
}
@media screen and (max-width: 1024px) {
    .vi-wpvs-variation-wrap .vi-wpvs-option-wrap,
    .vi-wpvs-variation-wrap .vi-wpvs-option-wrap.vi-wpvs-option-wrap-default,
    .vi-wpvs-variation-wrap .vi-wpvs-option-wrap.vi-wpvs-option-wrap-hover,
    .vi-wpvs-variation-wrap .vi-wpvs-option-wrap.vi-wpvs-option-wrap-selected {
        width: calc((100% - 50px) / 6) !important;
        height: auto !important; aspect-ratio: 1 !important;
    }
    .vi-wpvs-variation-wrap .vi-wpvs-option-wrap .vi-wpvs-option { width: 100% !important; height: 100% !important; }
    .swatch-page-btn { min-width: 28px; height: 28px; font-size: 13px; }
    .swatch-pagination-nav { gap: 3px; margin-top: 10px; }
}
@media screen and (max-width: 768px) {
    .vi-wpvs-variation-wrap .vi-wpvs-option-wrap,
    .vi-wpvs-variation-wrap .vi-wpvs-option-wrap.vi-wpvs-option-wrap-default,
    .vi-wpvs-variation-wrap .vi-wpvs-option-wrap.vi-wpvs-option-wrap-hover,
    .vi-wpvs-variation-wrap .vi-wpvs-option-wrap.vi-wpvs-option-wrap-selected {
        width: calc((100% - 32px) / 5) !important;
        height: auto !important; aspect-ratio: 1 !important;
    }
    .vi-wpvs-variation-wrap .vi-wpvs-option-wrap .vi-wpvs-option { width: 100% !important; height: 100% !important; }
    .vi-wpvs-variation-wrap { gap: 8px !important; }
    .swatch-page-btn { min-width: 26px; height: 26px; font-size: 12px; border-radius: 6px; }
    .swatch-pagination-nav { gap: 2px; margin-top: 8px; }
}