/* Amazon Variation Swatches - product card (shop loop) swatches.
   Themes style loop buttons aggressively (uppercase, full width, big padding),
   so the layout properties below are enforced. */

.avs-loop-swatches {
    --avs-swatch-bg: #f5f5f5;
    --avs-swatch-border: #e0e0e0;
    --avs-swatch-color: #2b2b2b;
    --avs-swatch-active-bg: #9c1b25;
    --avs-swatch-active-border: #9c1b25;
    --avs-swatch-active-color: #ffffff;
    --avs-swatch-radius: 4px;
    --avs-swatch-gap: 6px;

    /* Always three equal columns, on every screen size. A fourth option starts
       the next row instead of squeezing the first three. */
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--avs-swatch-gap);
    width: 100%;
    margin: 8px 0 10px;
    padding: 0;
    line-height: 1.2;
    text-align: left;
}

.avs-loop-swatches .avs-loop-swatch {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 6px !important;
    border: 1px solid var(--avs-swatch-border) !important;
    border-radius: var(--avs-swatch-radius) !important;
    background: var(--avs-swatch-bg) !important;
    color: var(--avs-swatch-color) !important;
    box-shadow: none !important;
    font-family: inherit;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.avs-loop-swatches .avs-loop-swatch:hover:not(:disabled) {
    border-color: var(--avs-swatch-active-border) !important;
    color: var(--avs-swatch-active-bg) !important;
    background: var(--avs-swatch-bg) !important;
}

.avs-loop-swatches .avs-loop-swatch:focus-visible {
    outline: 2px solid var(--avs-swatch-active-bg);
    outline-offset: 2px;
}

.avs-loop-swatches .avs-loop-swatch.is-active,
.avs-loop-swatches .avs-loop-swatch.is-active:hover {
    background: var(--avs-swatch-active-bg) !important;
    border-color: var(--avs-swatch-active-border) !important;
    color: var(--avs-swatch-active-color) !important;
}

.avs-loop-swatches .avs-loop-swatch.is-unavailable,
.avs-loop-swatches .avs-loop-swatch:disabled {
    opacity: .45;
    text-decoration: line-through !important;
    cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Price and rating sizing on the cards this plugin manages.
   The class is added by the script, so nothing outside these cards changes.
   Override any of the variables in your theme CSS to retune.
   -------------------------------------------------------------------------- */
.avs-has-loop-swatches {
    --avs-card-price-size: 18px;
    --avs-card-title-size: 13px;
    --avs-card-rating-size: 15px;
    --avs-card-count-size: 13px;
}

/* Product title on the card. */
.avs-has-loop-swatches .wd-entities-title,
.avs-has-loop-swatches .woocommerce-loop-product__title,
.avs-has-loop-swatches .wc-block-grid__product-title,
.avs-has-loop-swatches .product-title {
    font-size: var(--avs-card-title-size) !important;
    line-height: 1.45 !important;
}

.avs-has-loop-swatches .wd-entities-title a,
.avs-has-loop-swatches .woocommerce-loop-product__title a,
.avs-has-loop-swatches .product-title a {
    font-size: inherit !important;
}

/* The rating is moved inside the price element by the script, so the price and
   the stars always share one line even when the card's content area is a flex
   column (where two sibling elements each get their own row). */
.avs-card-rating-inline .price {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.avs-has-loop-swatches .price {
    justify-content: center;
}

.avs-rating-holder {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1;
}

.avs-rating-holder .wd-product-rating,
.avs-rating-holder .woocommerce-product-rating {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1;
}

.avs-rating-holder .star-rating {
    display: inline-block !important;
    float: none !important;
    margin: 0 !important;
    vertical-align: middle;
}

.avs-rating-holder .count,
.avs-rating-holder .wd-rating-count,
.avs-rating-holder .woocommerce-review-link,
.avs-rating-holder .rating-count {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1;
    vertical-align: middle;
}

.avs-has-loop-swatches .price,
.avs-has-loop-swatches .price ins,
.avs-has-loop-swatches .price del,
.avs-has-loop-swatches .price > span,
.avs-has-loop-swatches .wc-block-components-product-price {
    font-size: var(--avs-card-price-size) !important;
    line-height: 1.3 !important;
}

.avs-has-loop-swatches .price ins,
.avs-has-loop-swatches .price ins .amount,
.avs-has-loop-swatches .price ins span,
.avs-has-loop-swatches .price > .amount {
    font-size: var(--avs-card-price-size) !important;
    font-weight: 700 !important;
    text-decoration: none;
}

.avs-has-loop-swatches .price del,
.avs-has-loop-swatches .price del .amount,
.avs-has-loop-swatches .price del span {
    font-size: var(--avs-card-price-size) !important;
    font-weight: 400 !important;
    color: #8a8a8a !important;
    text-decoration: line-through !important;
    opacity: 1;
}

.avs-has-loop-swatches .star-rating,
.avs-has-loop-swatches .wd-product-rating .star-rating,
.avs-has-loop-swatches .wc-block-components-product-rating {
    font-size: var(--avs-card-rating-size) !important;
}

.avs-has-loop-swatches .woocommerce-review-link,
.avs-has-loop-swatches .wd-rating-count,
.avs-has-loop-swatches .count {
    font-size: var(--avs-card-count-size) !important;
}

@media (max-width: 480px) {
    .avs-has-loop-swatches {
        --avs-card-price-size: 20px;
        --avs-card-title-size: 15px;
        --avs-card-rating-size: 16px;
        --avs-card-count-size: 14px;
    }

    .avs-card-rating-inline .price {
        gap: 8px;
    }
}

/* Narrow cards (3-up mobile grids, small sidebars): let a long label wrap to a
   second line rather than being cut off. */
@media (max-width: 480px) {
    .avs-loop-swatches {
        --avs-swatch-gap: 4px;
    }

    .avs-loop-swatches .avs-loop-swatch {
        padding: 10px 3px !important;
        font-size: 11px !important;
        white-space: normal;
    }
}