.pagination-wrapper{margin-top:4rem}@media screen and (min-width:990px){.pagination-wrapper{margin-top:5rem}}.pagination__list{display:flex;flex-wrap:wrap;justify-content:center}.pagination__list>li{flex:1 0 4.4rem;max-width:4.4rem}.pagination__list>li:not(:last-child){margin-right:1rem}.pagination__item{color:rgb(var(--color-foreground));display:inline-flex;justify-content:center;align-items:center;position:relative;height:4.4rem;width:100%;padding:0;text-decoration:none}a.pagination__item:hover:after{height:.1rem}.pagination__item .icon-caret{height:.6rem}.pagination__item--current:after{height:.1rem}.pagination__item--current:after,.pagination__item:hover:after{content:"";display:block;width:2rem;position:absolute;bottom:8px;left:50%;transform:translate(-50%);background-color:currentColor}.pagination__item--next .icon{margin-left:-.2rem;transform:rotate(-90deg)}.pagination__item--next:hover .icon{transform:rotate(-90deg) scale(1.07)}.pagination__item--prev .icon{margin-right:-.2rem;transform:rotate(90deg)}.pagination__item--prev:hover .icon{transform:rotate(90deg) scale(1.07)}.pagination__item-arrow:hover:after{display:none}

/* 375px: seven items (prev 1 2 3 … 22 next) at 4.4rem + 1rem gaps need 368px but only 345px
   is available, so the next chevron wrapped onto a line of its own. Tightening the gap to .4rem
   brings the row to 332px and keeps all seven together; the 4.4rem tap target is untouched. */
@media screen and (max-width:749px){.pagination__list>li:not(:last-child){margin-right:.4rem}}

/* The caret svg points DOWN, so rotate(90deg) aims it LEFT and rotate(-90deg) RIGHT. The two
   were assigned the wrong way round: the previous arrow rendered as > and the next arrow as <, i.e.
   the pair read backwards on screen — the same swap the aria-labels had. */


/* 21 Sep 2026: nothing extra is needed here. The pagination was invisible because an inline
   <style> in sections/product-grid.liquid carried
     [class^="pagination"], [class^="Pagination"], .pagination { display: none !important }
   — the demo hid pagination in favour of its loader dots. That rule is gone, so these shipped
   rules render on their own again. */