/* Grocery Mart shop: Country of origin filter + results skeleton. Own file (linked from livewire/filter-shop.blade.php) so it never collides with edits to grocery_mart.css. */

/* Country of origin filter (sidebar + phone sheet): flag + name + count pill (the .check/.box/.n look is the shared filter style), no layout shift while the flag loads */
body[data-theme="grocery_mart"] .gm-origin .check { cursor: pointer; }
body[data-theme="grocery_mart"] .gm-origin .check .gm-flag { width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--cream-2); display: block; }
body[data-theme="grocery_mart"] .gm-origin .check .gm-oname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-theme="grocery_mart"] .gm-origin .check .n { flex: none; min-width: 30px; text-align: center; }
body[data-theme="grocery_mart"] .gm-origin .check .gm-sr-only:focus-visible + .box { outline: 3px solid var(--green-600); outline-offset: 2px; }
body[data-theme="grocery_mart"] .gm-origin .check:not(.on) .box svg { display: none; }

/* Results skeleton: same grid + card sizes, laid over the list while a filter / sort / page request is in flight (wire:loading.class on .gm-results) */
body[data-theme="grocery_mart"] .gm-results { position: relative; }
body[data-theme="grocery_mart"] .gm-results-skel { display: none; position: absolute; inset: 0; z-index: 5; overflow: hidden; background: var(--cream); }
body[data-theme="grocery_mart"] .gm-results.is-loading .gm-results-skel { display: block; }
body[data-theme="grocery_mart"] .gm-results[data-view="list"] .gm-results-skel { display: none !important; }
body[data-theme="grocery_mart"] .gm-results-skel .gm-skel-card.is-real { --sk-body: 216px; }
@media (max-width: 640px) { body[data-theme="grocery_mart"] .gm-results-skel .gm-skel-card.is-real { --sk-body: 183px; } }