/* Homepage rows (template-parts/home/row-track.php, home.js): one line of the shop's own product cards,
   the flash sale's track without its panel. Four in view from 1200px and three from 768px, as the grids
   were; on a phone a little over two, so the next card shows there is more to swipe. The line ends on
   a tile that opens the whole list. */
.au-row-track{--au-row-gap:var(--space-6);display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * var(--au-row-gap)) / 4);gap:var(--au-row-gap);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--radius-card)}
.au-row-track::-webkit-scrollbar{display:none}
.au-row-track:focus-visible{outline:2px solid var(--primary);outline-offset:4px}
.au-row-track>*{scroll-snap-align:start}

/* the end tile: the size of a card's picture */
.au-row-all{align-self:start;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);aspect-ratio:1;padding:var(--space-4);border-radius:var(--radius-card);background:var(--blush);color:var(--ink);font-size:var(--text-md);font-weight:600;line-height:1.35;text-align:center;text-decoration:none;transition:background var(--duration)}
.au-row-all .au-icon{box-sizing:content-box;width:18px;height:18px;padding:13px;border-radius:50%;background:var(--surface);color:var(--primary);transition:transform var(--duration)}
.au-row-all:hover .au-icon{transform:translateX(3px)}
.au-surface .au-row-all{background:var(--bg)}

/* arrows under the row, as on the flash sale */
.au-row-pager{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-5)}
.au-row-pager[hidden]{display:none}
.au-row-count{margin-right:var(--space-2);font-size:var(--text-sm);color:var(--muted);font-variant-numeric:tabular-nums}
.au-row-step{border:1px solid var(--control);background:var(--surface)}
.au-row-step:hover{background:var(--surface);border-color:var(--primary)}
.au-row-step:disabled{opacity:.4;cursor:default}
.au-row-prev .au-icon{transform:rotate(180deg)}

/* on the highlight banner's picture */
.au-highlight--light .au-row-all{background:rgb(255 255 255 / 14%);color:#fff}
.au-highlight--light .au-row-all:hover{background:rgb(255 255 255 / 22%)}
.au-highlight--light .au-row-count{color:rgb(255 255 255 / 72%)}

@media(min-width:768px) and (max-width:1199px){.au-row-track{grid-auto-columns:calc((100% - 2 * var(--au-row-gap)) / 3)}}
@media(max-width:767px){
	.au-row-track{--au-row-gap:var(--space-3);grid-auto-columns:calc((100% - var(--au-row-gap)) / 2.15)}
	.au-row-pager{display:none} /* a phone swipes; the half card is the cue */
	.au-row-all{gap:var(--space-3);font-size:var(--text-sm)}
}
/* 'pages' (The Studio Edit's half of the row, 2026-10-21): from 1024px two rows of two, filled down
   then across, so each step of the arrows turns a page of four. After the 3-in-view rule, which it beats. */
@media(min-width:1024px){.au-row-track--pages{grid-template-rows:repeat(2,auto);grid-auto-columns:calc((100% - var(--au-row-gap)) / 2);row-gap:var(--space-8)}}