/* Existing site styles win over this low-priority, self-contained fallback layer. */
@layer productbarn-finish-fallback {
    .pb-finishes .pb-finish-group:not(.pb-native-attributes) > .wpo-options-container {
        background: #f1f1f1;
    }
    .pb-finishes .pb-finish-group:not(.pb-native-attributes) .wpo-option-name {
        align-items: center;
        color: inherit;
        cursor: pointer;
        display: flex;
        font: inherit;
        font-size: 1.1em;
        justify-content: space-between;
        margin: 0;
        padding: 1.25em 1em;
        text-transform: uppercase;
    }
    .pb-finishes .pb-finish-group:not(.pb-native-attributes) [data-pb-toggle]::after {
        content: "\25be";
        font-size: 1.2em;
        line-height: 1;
    }
    .pb-finishes .pb-finish-group:not(.pb-native-attributes).open [data-pb-toggle]::after {
        content: "\25b4";
    }
    .pb-finishes .pb-finish-grid {
        display: grid;
        gap: var(--pb-finish-option-gap, 10px);
        grid-auto-rows: max-content;
        grid-template-columns: repeat(auto-fill, min(100%, var(--pb-finish-option-width, 118px)));
        margin: 0 auto;
        padding: 1em 0;
        width: 90%;
    }
    .pb-finishes label.pb-finish-option {
        cursor: pointer;
        margin: 0;
        position: relative;
        user-select: none;
    }
    .pb-finishes label.pb-finish-option > input {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }
    .pb-finishes .pb-finish-option .wpo-image-wrap {
        background: transparent;
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        margin: 0;
        overflow: visible;
        position: relative;
        width: 100%;
    }
    .pb-finishes .pb-finish-option img:not(.cgi-icon),
    .pb-finishes .pb-finish-option .pb-finish-placeholder {
        aspect-ratio: 1;
        background: #eee;
        border: 2px solid #aaa;
        border-radius: 6px;
        display: block;
        height: auto;
        object-fit: cover;
        width: 100%;
    }
    .pb-finishes .pb-finish-option .wpo-image-active {
        aspect-ratio: 1;
        border: 3px solid currentColor;
        border-radius: 6px;
        left: 0;
        pointer-events: none;
        position: absolute;
        top: 0;
        visibility: hidden;
        width: 100%;
        z-index: 2;
    }
    .pb-finishes .pb-finish-option.optionSelected .wpo-image-active {
        visibility: visible;
    }
    .pb-finishes .pb-finish-option .wpo-image-text {
        align-items: flex-start;
        color: inherit;
        display: flex;
        font: inherit;
        justify-content: center;
        line-height: 1.25;
        margin: .35em 0 0;
        min-height: 2.5em;
        padding: 0;
        position: static;
        text-align: center;
        width: 100%;
    }
    .pb-finishes .pb-finish-option .wpo-image-label {
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .pb-finishes .pb-finish-option .cgi-icon {
        border: 0;
        height: auto;
        max-width: 32px;
        position: absolute;
        right: -9px;
        top: -9px;
        width: 28%;
        z-index: 3;
    }
}

.pb-finishes { clear: both; width: 100%; }
.woocommerce div.product form.cart table.pb-finish-heading { margin-bottom: 0; }
/* WPO's outer inset must not create a step below the full-width attribute header. */
.pb-native-attributes > .wpo-options-container { padding-inline: 0; }
.pb-complex-legacy-layout .pb-finish-controls,
.pb-complex-legacy-layout .pb-material-body { display: flow-root; }
.productbarn-finishes-enabled .pb-complex-legacy-layout .pb-material-choice-field {
    box-sizing: border-box;
    clear: both;
    color: inherit;
    float: none;
    font: inherit;
    left: auto;
    right: auto;
    width: 100%;
}
.productbarn-finishes-enabled .variations tr.pb-compat-hidden-axis { display: none !important; }
.productbarn-finishes-enabled form.pb-complex-legacy-form .variations tr:has(select[name="attribute_upholstery-material"]),
.productbarn-finishes-enabled form.pb-complex-legacy-form .variations tr:has(select[name="attribute_finish-treatment"]),
.productbarn-finishes-enabled form.pb-complex-legacy-form .variations tr:has(label[for="upholstery-material"]),
.productbarn-finishes-enabled form.pb-complex-legacy-form .variations tr:has(label[for="finish-treatment"]) { display: none !important; }
.pb-complex-legacy-layout .pb-two-tone-field.viz-disabled {
    opacity: 0.5;
}
.pb-complex-legacy-layout .pb-material-finish-group > .pb-flat-finish-field > .wpo-option-name {
    padding: 30px 0 30px 10px;
    text-transform: none;
}
.pb-finishes .pb-finish-grid[hidden], .pb-finish-status[hidden] { display: none !important; }
body.productbarn-finishes-enabled .wpo-totals-container.pb-variation-total[hidden] { display: none !important; }
.pb-finishes [data-pb-toggle]:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.pb-finishes .pb-finish-option:has(input:focus-visible) .wpo-image-wrap { outline: 2px solid currentColor; outline-offset: 2px; }
.pb-quote-incomplete {
    cursor: not-allowed;
    opacity: .5;
    pointer-events: none;
}
.productbarn-finishes-enabled .product .woocommerce-variation-price {
    display: none !important;
}

/* Some themes style each table row and table body as one contiguous accordion.
 * Our finish headings are separate tables, so match that rhythm only when the
 * native physical headings are already contiguous. */
.pb-finishes.pb-contiguous-native-headings:not(.pb-complex-legacy-layout)
.pb-finish-heading tr.variation-label {
    border-top: 0;
}
.pb-finishes.pb-contiguous-native-headings:not(.pb-complex-legacy-layout)
.pb-finish-group.open > .pb-finish-heading > tbody {
    border-bottom: 0;
}
.pb-finishes.pb-contiguous-native-headings:not(.pb-complex-legacy-layout)
.pb-native-attributes > .wpo-options-container > .wpo-field {
    margin-bottom: 0;
}
