/* Shop and category pages. Mobile first; desktop at 64rem (same as navbar). */
.shop ul { margin: 0; padding: 0; list-style: none; }
.shop a { color: var(--ink); }

/* title block */
.shop-head { display: grid; justify-items: start; gap: 0.5rem; padding-block: 0.75rem; }
.crumbs { margin-block: -0.625rem 0; color: var(--ink-muted); font-size: 0.8125rem; }
.crumbs a { display: inline-block; padding-block: 0.625rem; color: var(--teal-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 0.25em; }
.shop-head__title { margin: 0; font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3rem); line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.shop-head__meta { margin: 0; color: var(--ink-muted); font-size: 1rem; line-height: 1.5; }

.shop-layout { display: grid; gap: 0; align-items: start; }

/* colour dots: colour comes from --fabric-<slug> in colors.css; unknown slugs fall back to the field grey */
.swatch { flex: none; display: block; inline-size: 0.75rem; block-size: 0.75rem; border-radius: var(--radius-pill); background: var(--swatch, var(--field)); box-shadow: inset 0 0 0 1px var(--swatch-edge); }

/* filters */
.shop-filters__toggle {
	display: flex; align-items: center; gap: 0.5rem; min-block-size: 3.25rem; margin-block-start: 1rem;
	border-block: 1px solid var(--hairline); font-size: 0.9375rem; font-weight: 500; cursor: pointer; list-style: none;
}
.shop-filters__toggle::-webkit-details-marker { display: none; }
.shop-filters__panel { display: grid; gap: 1.5rem; padding-block: 1.25rem; }
.shop-filters__group { display: grid; gap: 0.75rem; }
.shop-filters__title { margin: 0; font-size: 0.9375rem; font-weight: 600; }
.shop-filters__list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.shop-filters__list--colors { gap: 0.625rem; }
.shop-filters__clear { justify-self: start; color: var(--teal-ink); font-size: 0.9375rem; font-weight: 600; }
.shop .shop-size {
	display: flex; align-items: center; justify-content: center; min-inline-size: 2.75rem; block-size: 2.75rem;
	border: 1px solid var(--control-border); border-radius: var(--radius-sm); background: var(--surface);
	font-size: 0.875rem; font-weight: 600;
}
.shop .shop-size[aria-current] { border-color: var(--action); background: var(--action); color: var(--on-action); }
.shop-color { display: flex; align-items: center; justify-content: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--radius-pill); }
.shop-color .swatch { inline-size: 2.25rem; block-size: 2.25rem; }
.shop-color[aria-current] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--action); }

/* count + sort */
.shop-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.75rem; margin-block-end: 1rem; border-block-end: 1px solid var(--hairline); }
.shop-bar__count { white-space: nowrap; color: var(--ink-muted); font-size: 0.9375rem; }
.shop-sort { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; }
.shop-sort__label { display: none; }
.shop-sort__select { min-block-size: 2.75rem; padding-inline: 0.5rem; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; }
.shop-sort__go { min-block-size: 2.75rem; }

/* cards */
.shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 0.75rem; padding-block: 1.25rem 3rem; }
.shop-card { display: grid; align-content: start; gap: 0.1875rem; transition: transform 0.2s var(--ease); }
.shop-card:active { transform: scale(0.97); }
.shop-card__photo { position: relative; display: block; aspect-ratio: 3 / 4; margin-block-end: 0.5rem; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-soft); }
.shop-card__photo img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.shop-card__tag { position: absolute; inset-block-start: 0.625rem; inset-inline-start: 0.625rem; display: flex; align-items: center; block-size: 1.5rem; padding-inline: 0.625rem; border-radius: var(--radius-pill); background: var(--surface); color: var(--pine); font-size: 0.6875rem; font-weight: 700; }
.shop-card__colors { display: flex; align-items: center; gap: 0.3125rem; min-block-size: 0.75rem; margin-block-end: 0.1875rem; }
.shop-card__colors .swatch { inline-size: 0.75rem; block-size: 0.75rem; }
.shop-card__name { font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }
.shop-card__sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink-muted); font-size: 0.8125rem; line-height: 1.4; }
.shop-card__price { font-size: 1rem; font-weight: 700; line-height: 1.4; }
.shop-card__price small { font-size: 0.75rem; font-weight: 500; }
@media (hover: hover) { .shop-card:hover .shop-card__photo img { transform: scale(1.03); } }

.shop-empty { padding-block: 3rem; color: var(--ink-muted); }

/* infinite scroll: "Show more" is the no-JS fallback; shop.js swaps it for skeleton cards while the next page loads */
.shop-more { display: flex; align-items: center; justify-content: center; inline-size: max-content; margin: 0 auto 3rem; padding-inline: 1.5rem; block-size: 2.75rem; border: 1px solid var(--hairline); border-radius: var(--radius-pill); font-weight: 600; }
.shop-more[hidden] { display: none; }
.shop-skeleton { pointer-events: none; }
.shop-skeleton :is(.shop-skeleton__photo, .shop-skeleton__line) { display: block; background: var(--skeleton); border-radius: var(--radius-md); animation: shop-pulse 1.2s ease-in-out infinite alternate; }
.shop-skeleton__photo { aspect-ratio: 3 / 4; border-radius: var(--radius-lg) !important; margin-block-end: 0.5rem; }
.shop-skeleton__line { block-size: 0.875rem; margin-block-end: 0.375rem; }
.shop-skeleton__line:nth-child(3) { inline-size: 60%; }
@keyframes shop-pulse { from { opacity: 0.55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .shop-skeleton :is(.shop-skeleton__photo, .shop-skeleton__line) { animation: none; } }

/* "Your size" card under the grid (styles in home-promo.css) */
.shop-fit { margin-block: 1rem 3rem; }

@media (min-width: 64rem) {
	.shop-head { gap: 0.5rem; padding-block: 2.75rem 1.75rem; }
	.shop-sort__label { display: inline; }
	.shop-head__meta { font-size: 1.0625rem; }
	.shop-layout { grid-template-columns: 15rem minmax(0, 1fr); gap: 2.5rem; }
	.shop-layout:not(:has(.shop-filters)) { grid-template-columns: minmax(0, 1fr); } /* category with no colour/size: grid gets the full width, four across */
	.shop-layout:not(:has(.shop-filters)) .shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.shop-filters { position: sticky; inset-block-start: 8rem; }
	.shop-filters__toggle { display: none; }
	.shop-filters__panel { gap: 1.75rem; padding-block: 0.25rem 0; }
	.shop-filters__group + .shop-filters__group { padding-block-start: 1.75rem; border-block-start: 1px solid var(--hairline); }
	.shop-filters__list--sizes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.shop .shop-size { inline-size: 100%; block-size: 2.5rem; min-inline-size: 0; }
	.shop-filters__list--colors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; }
	.shop-bar { padding-block: 0 1rem; margin-block-end: 1.25rem; }
	.shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 1.5rem; padding-block: 1.25rem 4rem; }
	.shop-card { gap: 0.25rem; }
	.shop-card__photo { margin-block-end: 0.75rem; }
	.shop-card__tag { inset: 0.875rem auto auto 0.875rem; block-size: 1.625rem; padding-inline: 0.75rem; font-size: 0.75rem; }
	.shop-card__colors { min-block-size: 0.8125rem; }
	.shop-card__colors .swatch { inline-size: 0.8125rem; block-size: 0.8125rem; }
	.shop-card__name { font-size: 1.0625rem; }
	.shop-card__sub { font-size: 0.875rem; }
	.shop-card__price { font-size: 1.0625rem; }
	.shop-fit { margin-block: 2rem 5rem; }
}

@media (prefers-reduced-motion: reduce) {
	.shop-card, .shop-card__photo img { transition: none; }
}