:root :where(.accessories-by-unit-archive .woocommerce-products-header) {
    --_abu-bg-image: var(--abu-bg-image, url("https://www.mmemed.com/wp-content/uploads/2026/10/Oct26-AccessoriesbyUnit_26-3126Desktop-scaled.jpg"));
    --_abu-overlay: var(--abu-overlay,  linear-gradient(to right, var(--clr-default-blue) -10%, transparent 50%));
    --_abu-aspect-ratio: var(--abu-aspect-ratio,  2560 / 976);

    @media(width <= 768px) {
        --abu-overlay: linear-gradient(to right,
                rgb(from black r g b / 0.4),
                rgb(from black r g b / 0.3)
            );
        --abu-bg-image: url("https://www.mmemed.com/wp-content/uploads/2026/10/Oct26-AccessoriesbyUnit_26-3126Mobile.jpg");
        --abu-aspect-ratio: 2348 / 1320
    }
}


/* override inline style: #main > header.woocommerce-products-header > h1 */
.accessories-by-unit-archive .woocommerce-products-header:not(#override) {

    background-image: var(--_abu-overlay), var(--_abu-bg-image);
    aspect-ratio: var(--_abu-aspect-ratio);
    width: 100%;
    height: auto;

    align-content: center;
}


.accessories-by-unit {
}

.grid {
    /* 
        https://css-tricks.com/an-auto-filling-css-grid-with-max-columns/ 
        https://www.youtube.com/watch?v=CHULPvkXIRo
    */
    --_grid-max-cols: var(--grid-max-cols, 4);
    --_grid-min-col-size: var(--grid-min-col-size, 250px);
    --_grid-gap: var(--gutter, 1rem);

    
    --_grid-col-size-calc: calc(
        (100% - var(--_grid-gap) * var(--_grid-max-cols)) /
        var(--_grid-max-cols)
    );
    --_grid-col-min-size-calc: min(
        100%,
        max(var(--_grid-min-col-size), var(--_grid-col-size-calc))
    );

    display: grid;
    gap: var(--_grid-gap);

    grid-template-columns: repeat(
        auto-fit,
        minmax(var(--_grid-col-min-size-calc), 1fr)
    );
}

.abu-grid.abu-grid {
    padding-block: var(--gutter);
    padding-inline: var(--site-content-padding);
    margin-inline: auto;
}

.accessories-by-unit {
    .woocommerce-loop-product__title {
        font: var(--font-copy);
        margin-inline: auto;
    }

    .abu-product {
        margin: auto;
        height: 100%;

        :where(img) {
            display: block;
            margin: auto;
        }
        
        .abu-product__button.afrfqbt:not(:hover)::after, 
        .abu-product__button.button:has(+ .afrfqbt:hover)::after {
            content: "+";
            background-color: transparent;
            mask-image: none;
        }
    }
}

.abu-filter {
    display: block;
    background-color: var(--charcoal);
    padding-block: 1rem;
    padding-inline: var(--site-content-padding);

    form {
        margin: 0;
        display: flex;
        justify-content: end;
        gap: var(--gutter);
    }

    select {
        appearance: none;
        border: 0;
        border-radius: 6969px;
        background-color: white;
        padding-inline-start: 1lh;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3C!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--%3E%3Cpath fill='%23b2b2b2' d='M297.4 438.6C309.9 451.1 330.2 451.1 342.7 438.6L502.7 278.6C515.2 266.1 515.2 245.8 502.7 233.3C490.2 220.8 469.9 220.8 457.4 233.3L320 370.7L182.6 233.4C170.1 220.9 149.8 220.9 137.3 233.4C124.8 245.9 124.8 266.2 137.3 278.7L297.3 438.7z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 1rem center;
        background-size: 1rem;
        min-width: 10ch;
    }
}

.abu-filter__search-wrap {
    display: inline-flex;
    background-color: white;
    border-radius: var(--radius-full);
    padding-inline-start: 1rem;
    min-width: 0;

    input[type], input[type]:focus {
        all: unset;
        min-width: 0;
    }

    &:has(input[type]:focus-visible) {
        outline: 2px solid var(--action-green);
    }
}