/* State decoration only: WooCommerce/Porto still own availability and selection. */
body.single-product form.variations_form .filter-item-list { overflow: visible; }
body.single-product form.variations_form .filter-item-list a.filter-color {
    position: relative;
    border-radius: 50%;
}
body.single-product form.variations_form .filter-item-list li.active > a.filter-color:not(.disabled) {
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px #222 !important;
    opacity: 1 !important;
}
body.single-product form.variations_form .filter-item-list a:focus-visible {
    outline: 2px solid #2268a2;
    outline-offset: 7px;
}
body.single-product form.variations_form .filter-item-list a.disabled {
    position: relative;
    opacity: .65 !important;
    pointer-events: auto !important;
    cursor: not-allowed;
    box-shadow: none !important;
}
body.single-product form.variations_form .filter-item-list a.disabled::after {
    content: "" !important;
    position: absolute;
    left: 12%; top: 50%; width: 76%; height: 1px;
    margin: 0; border: 0; border-radius: 0;
    background: #666;
    box-shadow: none;
    transform: rotate(-45deg);
    pointer-events: none;
}
body.single-product form.variations_form label.iiifs-color-label::after { content: none !important; }
body.single-product form.variations_form .filter-item-list a.filter-color.disabled::after,
body.single-product form.variations_form .filter-item-list a.filter-image.disabled::after {
    background: #333;
    box-shadow: 0 0 0 .5px rgba(255,255,255,.95);
    height: 1px;
}
body.single-product form.variations_form .iiifs-color-label-cell::after { content: none !important; }
/* Reserve the name's width and height even before a color is selected. */
/* Reserve the same geometry before the delayed swatch script has initialized. */
body.single-product form.variations_form .variations tr:has(.filter-color) label {
    display: block; width: 88px;
}
body.single-product form.variations_form .variations tr:has(.filter-color) td.label::after {
    content: none !important;
}
body.single-product form.variations_form .variations tr:has(.filter-color) label:not(.iiifs-color-label)::after {
    content: "" !important; display: block; width: 88px; height: 1.5em; line-height: 1.5;
}
body.single-product form.variations_form label.iiifs-color-label { display: block; width: 88px; }
.iiifs-selected-color {
    display: block; width: 88px; height: 1.5em; line-height: 1.5;
    margin-left: 0; font-weight: 500; text-transform: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The hint must not participate in the variation table's width/height sizing. */
body.single-product form.variations_form .variations { position: relative; }
body.single-product form.variations_form .variations td.value { position: static; }
.iiifs-swatch-hint {
    position: absolute; top: auto; bottom: calc(100% + 6px); left: 0; z-index: 20;
    display: block; width: max-content; max-width: 100%;
    box-sizing: border-box; margin: 0; padding: 6px 9px;
    border: 1px solid #e5e5e5; border-radius: 4px;
    background: #fff; box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
    color: #555; font-size: 12px; line-height: 1.5;
    white-space: normal; overflow-wrap: anywhere; pointer-events: none;
}
.iiifs-swatch-hint[hidden] { display: none; }