.byno-product-box {
    margin: 28px 0;
}

.byno-product-box__title {
    margin: 0 0 16px;
}

.byno-product-box ul.products {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.byno-product-box ul.products::before,
.byno-product-box ul.products::after {
    display: none;
}

.byno-product-box ul.products li.product {
    float: none;
    list-style: none;
    margin: 0;
    width: 100%;
}

.byno-product-box ul.products li.product::marker {
    content: none;
}

/* rich-text.css targets every <a> inside post content (color + underline)
   with specificity that ties or beats the card's own link rules; re-assert
   them here, scoped under .byno-product-box, so links inside the card keep
   their normal card styling instead of the rich-text link look. */
.byno-product-box ul.products li.product a {
    text-decoration: none;
}

.byno-product-box .byno-product-card-title a {
    color: var(--byno-var-color-light-dark-text);
}

.byno-product-box .byno-product-card-title a:hover,
.byno-product-box .byno-product-card-title a:focus {
    color: var(--byno-var-color-light-dark-text);
}

.byno-product-box .byno-product-card-actions .button,
.byno-product-box .byno-product-card-actions .byno-mobile-purchase-btn {
    color: #fff;
}

@media only screen and (max-width: 1200px) {
    .byno-product-box ul.products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 900px) {
    .byno-product-box ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 640px) {
    .byno-product-box ul.products {
        gap: 10px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}