/* "N sold in the last X". Colours, size and corner radius come from Admin > Sold counter (set as --sc-* variables on the page);
   the fallbacks below only apply if those variables are missing. */
.sc-counter { display: flex; align-items: center; gap: .5em; box-sizing: border-box; width: fit-content; max-width: 100%; margin: .6rem 0 .9rem; padding: .55em .9em; font-size: var(--sc-size, 13px); line-height: 1.45; color: var(--sc-color, #9a3412); background: var(--sc-bg, #fff7ed); border: 1px solid var(--sc-border, #fed7aa); border-radius: var(--sc-radius, 8px); }
.sc-counter[hidden] { display: none; }
.sc-counter .sc-icon { flex: none; font-size: 1.25em; line-height: 1; }
.sc-counter .sc-icon[hidden] { display: none; }
.sc-counter .sc-text { min-width: 0; overflow-wrap: anywhere; }
.sc-counter strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.sc-counter.sc-card { justify-content: center; margin: .15rem auto .5rem; padding: .25em .6em; text-align: center; }

/* Phones: full width on the product page. Tablets and larger screens count as "desktop" for the show / hide switches in the admin. */
@media (max-width: 767px) { .sc-counter.sc-product { width: 100%; } .sc-counter.sc-hide-mobile { display: none; } }
@media (min-width: 768px) { .sc-counter.sc-hide-desktop { display: none; } }
@media (max-width: 480px) { .sc-counter.sc-product { padding: .5em .75em; } }