/* Best Sellers + New Arrivals. The card itself is the theme's product card. */

.hb-products { --hb-gap: 12px; }
@media (min-width: 769px) { .hb-products { --hb-gap: clamp(12px, 1.4vw, 28px); } }

.hb-products .product-card__media { aspect-ratio: var(--hb-card-ratio, 2/3); }

/* Sale labels can be switched off per section. */
.hb-products.hb-no-sale .product-card__badge--sale,
.hb-products.hb-no-sale .product-card__badge--discount { display: none; }

/* "New" / "Best seller" badge (top right; sale stays top left). */
.hb-products .product-card__badge--new {
    top: 8px;
    left: 8px;
    left: auto;
    background: var(--hb-accent, var(--color-black-light, #3a3a3a));
    color: var(--hb-accent-text, #fff);
	font-size: 10px !important;
}

/* Star rating (built from Bootstrap Icons; WooCommerce's own CSS is disabled in this theme). */
.hb-stars { display: inline-flex; gap: 2px; color: var(--hb-star, #c2902a); font-size: .78rem; line-height: 1; vertical-align: middle; }
.hb-stars__count { font-size: .72rem; color: var(--_muted, #777); }
.product-card__rating { display: flex; align-items: center; gap: 4px; margin-top: -2px; }

/* Horizontal rail: desktop */
@media (min-width: 769px) {
    .hb-products--d-rail .hb-products__grid {
        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% - (var(--hb-cols, 4) - 1) * var(--hb-gap)) / var(--hb-cols, 4));
        gap: var(--hb-gap);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
        padding-bottom: 10px;
    }
    .hb-products--d-rail .product-card { scroll-snap-align: start; }
}

/* Horizontal rail: mobile (cards peek so people know it scrolls) */
@media (max-width: 768px) {
    .hb-products--m-rail .hb-products__grid {
        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 44%;
        gap: var(--hb-gap);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding-bottom: 6px;
    }
    .hb-products--m-rail .hb-products__grid::-webkit-scrollbar { display: none; }
    .hb-products--m-rail .product-card { scroll-snap-align: start; }
}