/* Product page "N people are viewing this product". Colours, size and corner radius come from Admin > Viewing counter
   (set as --vc-* variables on the page); the fallbacks below only apply if those variables are missing. */
.vc-counter { display: flex; align-items: center; gap: .55em; box-sizing: border-box; width: fit-content; max-width: 100%; margin: .6rem 0 .9rem; padding: .55em .95em; font-size: var(--vc-size, 14px); line-height: 1.35; color: var(--vc-color, #3b2f1e); background: var(--vc-bg, #fff8e6); border: 1px solid var(--vc-border, #f1d98a); border-radius: var(--vc-radius, 8px); }
.vc-counter[hidden] { display: none; }
.vc-counter .vc-icon { flex: none; width: 1.25em; height: 1.25em; color: currentColor; }
.vc-counter .vc-text { min-width: 0; overflow-wrap: anywhere; }
.vc-counter strong { display: inline-block; font-weight: 700; font-variant-numeric: tabular-nums; }
.vc-counter strong.is-tick { animation: vc-tick .45s ease-out; }
@keyframes vc-tick { 0% { opacity: .35; transform: translateY(-3px); } 100% { opacity: 1; transform: none; } }

/* Phones: full width. Tablets and larger screens count as "desktop" for the show / hide switches in the admin. */
@media (max-width: 767px) { .vc-counter { width: 100%; } .vc-counter.vc-hide-mobile { display: none; } }
@media (min-width: 768px) { .vc-counter.vc-hide-desktop { display: none; } }
@media (prefers-reduced-motion: reduce) { .vc-counter strong.is-tick { animation: none; } }