.maple-product-addons-container {
    display: flex;
    flex-direction: column;
    width: var(--width, 100%);
    max-width: var(--max-width, none);
    height: var(--height, auto);
    min-height: var(--min-height, auto);
    aspect-ratio: var(--aspect-ratio, auto);
    padding: var(--padding, 0);
    margin: var(--margin, 0);
    background-size: var(--background-size, cover);
    background-position: var(--background-position, center center);
    background-repeat: var(--background-repeat, no-repeat);
    background-image: var(--background-image, none);
}

@media (max-width: 1024px) {
    .maple-product-addons-container {
        width: var(--width-tablet, var(--width));
        max-width: var(--max-width-tablet, var(--max-width));
        height: var(--height-tablet, var(--height));
        min-height: var(--min-height-tablet, var(--min-height));
        aspect-ratio: var(--aspect-ratio-tablet, var(--aspect-ratio));
        padding: var(--padding-tablet, var(--padding));
        margin: var(--margin-tablet, var(--margin));
        background-image: var(--background-image-tablet, var(--background-image));
        background-size: var(--background-size-tablet, var(--background-size));
        background-position: var(--background-position-tablet, var(--background-position));
        background-repeat: var(--background-repeat-tablet, var(--background-repeat));
    }
}

@media (max-width: 600px) {
    .maple-product-addons-container {
        width: var(--width-mobile, var(--width-tablet));
        max-width: var(--max-width-mobile, var(--max-width-tablet));
        height: var(--height-mobile, var(--height-tablet));
        min-height: var(--min-height-mobile, var(--min-height-tablet));
        aspect-ratio: var(--aspect-ratio-mobile, var(--aspect-ratio-tablet));
        padding: var(--padding-mobile, var(--padding-tablet));
        margin: var(--margin-mobile, var(--margin-tablet));
        background-image: var(--background-image-mobile, var(--background-image-tablet));
        background-size: var(--background-size-mobile, var(--background-size-tablet));
        background-position: var(--background-position-mobile, var(--background-position-tablet));
        background-repeat: var(--background-repeat-mobile, var(--background-repeat-tablet));
    }
}

.maple-product-addons-title {
    font-family: var(--container-title-font-family, inherit);
    font-size: var(--container-title-font-size, 1.5rem);
    font-weight: var(--container-title-font-weight, bold);
    color: var(--container-title-font-color, inherit);
    padding: var(--container-title-padding, 0);
    margin: var(--container-title-margin, 0 0 1rem 0);
}

@media (max-width: 1024px) {
    .maple-product-addons-title {
        padding: var(--container-title-padding-tablet, var(--container-title-padding));
        margin: var(--container-title-margin-tablet, var(--container-title-margin));
    }
}

@media (max-width: 600px) {
    .maple-product-addons-title {
        padding: var(--container-title-padding-mobile, var(--container-title-padding-tablet));
        margin: var(--container-title-margin-mobile, var(--container-title-margin-tablet));
    }
}

.maple-product-addons-list {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns, 3), 1fr);
    gap: var(--row-gap, var(--grid-gap, 20px)) var(--grid-gap, 20px);
}

@media (max-width: 1024px) {
    .maple-product-addons-list {
        grid-template-columns: repeat(var(--grid-columns-tablet, var(--grid-columns)), 1fr);
        gap: var(--row-gap-tablet, var(--grid-gap-tablet, var(--grid-gap))) var(--grid-gap-tablet, var(--grid-gap));
    }
}

@media (max-width: 600px) {
    .maple-product-addons-list {
        grid-template-columns: repeat(var(--grid-columns-mobile, var(--grid-columns-tablet)), 1fr);
        gap: var(--row-gap-mobile, var(--grid-gap-mobile, var(--grid-gap-tablet))) var(--grid-gap-mobile, var(--grid-gap-tablet));
    }
}

.maple-product-addon-row {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    padding: var(--addon-padding, 15px);
    margin: var(--addon-margin, 0);
    background-color: var(--addon-background-color, transparent);
    color: var(--addon-text-color, inherit);
    width: var(--addon-width, 100%);
    max-width: var(--addon-max-width, none);
    height: var(--addon-height, 100%);
    min-height: var(--addon-min-height, auto);
    aspect-ratio: var(--addon-aspect-ratio, auto);
    border-radius: var(--addon-border-radius, 0);
    box-sizing: border-box;
}

@media (min-width: 601px) {
    .maple-product-addons-list.is-list-layout .maple-product-addon-row {
        display: grid;
        grid-template-columns: 1.5fr 3fr auto;
        align-items: start;
        gap: 20px;
    }
}

.maple-product-addon-row.glass {
    /* Glass styles are usually handled by inline styles from get_styles */
}

@media (max-width: 600px) {
    .maple-product-addon-row {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas: 
            "title price"
            "desc desc";
        align-items: start;
        gap: 10px;
    }

    .maple-product-addon-title {
        grid-area: title;
    }

    .maple-product-addon-price-container {
        grid-area: price;
        margin-top: 0;
    }

    .maple-product-addon-description {
        grid-area: desc;
    }
}

.maple-product-addon-title {
    font-family: var(--addon-title-font-family, inherit);
    font-size: var(--addon-title-font-size, 1.1rem);
    font-weight: var(--addon-title-font-weight, bold);
    color: var(--addon-title-font-color, inherit);
    flex: 1;
}

.maple-product-addon-description {
    font-family: var(--addon-description-font-family, inherit);
    font-size: var(--addon-description-font-size, 0.9rem);
    font-weight: var(--addon-description-font-weight, normal);
    color: var(--addon-description-font-color, inherit);
    flex: 1;
}

.maple-product-addon-stockcode {
    font-family: var(--addon-stockcode-font-family, inherit);
    font-size: var(--addon-stockcode-font-size, 0.8rem);
    font-weight: var(--addon-stockcode-font-weight, normal);
    color: var(--addon-stockcode-font-color, inherit);
}

.maple-product-addon-price {
    font-family: var(--addon-price-font-family, inherit);
    font-size: var(--addon-price-font-size, 1rem);
    font-weight: var(--addon-price-font-weight, bold);
    color: var(--addon-price-font-color, inherit);
    white-space: nowrap;
}

.maple-product-addon-price-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: auto;
}

.maple-product-addon-tax-badge {
    margin-top: 4px;
}

@media (min-width: 601px) {
    .maple-product-addons-list.is-list-layout .maple-product-addon-price-container {
        margin-top: 0;
    }
}