/* ==========================================================================
   PurOstill V2 — shop and category archives
   ========================================================================== */

.v2-shop { display: block; padding-bottom: 3rem; }

/* Title band --------------------------------------------------------------- */

.v2-shop__banner {
	padding: clamp(2rem, 4vw, 3.25rem) 0;
	background: color-mix(in srgb, var(--v2-accent) 9%, var(--v2-surface));
	text-align: center;
}
.v2-shop__banner-title {
	font-size: clamp(1.9rem, 3.6vw, 2.75rem);
	letter-spacing: -.02em;
	color: var(--v2-ink);
}
.v2-shop__banner-text {
	max-width: 74ch;
	margin: .9rem auto 0;
	color: color-mix(in srgb, var(--v2-ink) 72%, var(--v2-muted));
	font-size: 1.02rem;
	line-height: 1.6;
}

/* Toolbar strip ------------------------------------------------------------ */

.v2-shop__bar {
	background: var(--v2-surface);
	border-bottom: 1px solid var(--v2-line);
	margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.v2-shop__bar-inner {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: .75rem 1.5rem;
	padding-top: 1.1rem;
	padding-bottom: 1.1rem;
}

.v2-shop__count { color: var(--v2-muted); font-size: .95rem; }

.v2-shop__sort { display: flex; align-items: center; gap: .6rem; }
.v2-shop__sort label { color: var(--v2-muted); font-size: .95rem; white-space: nowrap; }
.v2-shop__sort select {
	width: auto; min-width: 190px; min-height: 42px;
	padding: .4rem 2.2rem .4rem .9rem;
	font-size: .95rem;
	border-radius: .6rem;
}

/* Layout ------------------------------------------------------------------- */

.v2-shop__layout {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	gap: 1.75rem;
	align-items: start;
}

/* Filter panel ------------------------------------------------------------- */

.v2-shop__side-toggle { display: none; width: 100%; }

.v2-shop__filters {
	position: sticky; top: calc(var(--v2-header-h) + 1.5rem);
	padding: 1.5rem;
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-radius);
	background: var(--v2-surface);
}

.v2-filters__title {
	padding-bottom: .9rem;
	margin-bottom: 1.25rem;
	border-bottom: 1px solid var(--v2-line);
	font-size: 1.25rem;
	letter-spacing: -.01em;
}

.v2-filter + .v2-filter { margin-top: 1.5rem; }
.v2-filter__head { margin-bottom: .8rem; font-size: 1rem; font-weight: 700; color: var(--v2-ink); }

.v2-filter__checks { display: flex; flex-direction: column; gap: .65rem; }

/* The whole category tree, drawn as checkboxes but behaving as links: ticking
   one loads that category rather than filtering the one already open. */
.v2-filter__cats { margin: 0 -.5rem; }

.v2-cats { list-style: none; margin: 0; padding: 0; }
.v2-cats--sub { margin-left: 1.45rem; border-left: 1px solid var(--v2-line); }

.v2-cats__row {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .45rem .5rem;
	border-radius: 9px;
	color: var(--v2-ink);
	font-size: .95rem;
	line-height: 1.35;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease;
}

.v2-cats__row:hover,
.v2-cats__row:focus-visible { background: var(--v2-tint); color: var(--v2-brand); }

.v2-cats__row.is-current { color: var(--v2-brand); font-weight: 600; }

.v2-cats__box {
	display: grid;
	place-items: center;
	flex: none;
	width: 17px;
	height: 17px;
	border: 1.5px solid var(--v2-line);
	border-radius: 4px;
	background: var(--v2-surface);
	color: #fff;
	transition: background-color .18s ease, border-color .18s ease;
}

.v2-cats__box svg { width: 12px; height: 12px; opacity: 0; transition: opacity .18s ease; }

.v2-cats__box.is-checked { border-color: var(--v2-brand); background: var(--v2-brand); }
.v2-cats__box.is-checked svg { opacity: 1; }

.v2-cats__row:hover .v2-cats__box { border-color: var(--v2-brand); }

/* min-width: 0 and anywhere: a slash-separated name has nothing to break on,
   so without these it grows past the card and takes the count with it. */
.v2-cats__name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.v2-cats__count { flex: none; font-size: .8rem; font-weight: 600; color: var(--v2-muted); }

/* The sub-levels step down a little, so depth reads at a glance. */
.v2-cats--sub .v2-cats__row { font-size: .9rem; }
.v2-cats--sub .v2-cats--sub .v2-cats__row { font-size: .875rem; }

.v2-filter__check { align-items: center; gap: .65rem; color: var(--v2-ink); }
.v2-filter__check input { flex: none; width: 17px; height: 17px; border-radius: 4px; }

/* min-width: 0 and anywhere: a slash-separated name has nothing to break on,
   so without these it grows past the card and takes the count with it. */
.v2-filter__label { flex: 1; min-width: 0; font-size: .95rem; line-height: 1.35; overflow-wrap: anywhere; }
.v2-filter__count { flex: none; font-size: .8rem; font-weight: 600; color: var(--v2-muted); }

/* Stars and their "(4+ stars)" note sit on one line. */
.v2-filter__check .v2-filter__label { display: flex; align-items: center; gap: .5rem; }
.v2-filter__check .v2-rating { gap: .08rem; }
.v2-filter__check .v2-rating__star { font-size: 1rem; line-height: 1; color: var(--v2-ink); }
.v2-filter__check .v2-rating__star.is-empty { color: color-mix(in srgb, var(--v2-muted) 45%, var(--v2-line)); }
.v2-filter__stars-note { font-size: .85rem; color: var(--v2-muted); white-space: nowrap; }

/* Price ------------------------------------------------------------------- */

.v2-filter__prices { display: flex; align-items: center; gap: .5rem; }
.v2-filter__price {
	width: 100%; min-height: 42px;
	padding: .45rem .7rem;
	border-radius: .5rem;
	font-size: .95rem;
	text-align: left;
}
.v2-filter__dash { flex: none; color: var(--v2-muted); }

.v2-filter__range { width: 100%; margin-top: 1rem; accent-color: var(--v2-accent); }
.v2-filter__range-labels {
	display: flex; justify-content: space-between;
	margin-top: .3rem;
	font-size: .82rem; color: var(--v2-muted);
}

.v2-filter__actions { margin-top: 1.5rem; display: flex; flex-direction: column; align-items: center; gap: .75rem; }

/* Filters apply as they are changed, so the submit button is only there for
   browsers without JavaScript. */
.js .v2-filter__submit { display: none; }

/* A quiet hint that the results are on their way. */
.v2-shop.is-applying .v2-shop__results { opacity: .5; transition: opacity .15s ease; pointer-events: none; }
.v2-filter__reset { font-size: .85rem; font-weight: 600; color: var(--v2-muted); text-decoration: underline; text-underline-offset: 3px; }
.v2-filter__reset:hover { color: var(--v2-accent); }

/* Results ------------------------------------------------------------------ */

.v2-shop__results { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.v2-shop__results > :first-child { margin-top: 0; }

/* Three across, as the design lays it out. */
.v2-shop__grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
@media (min-width: 1000px) { .v2-shop__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* The shop cards are quieter than the home page ones: no rating row, and a
   solid full-width button. */
.v2-shop__grid .v2-rating { display: none; }
.v2-shop__grid .v2-product-card__body { gap: .55rem; }
.v2-shop__grid .v2-product-card__body h3 { font-size: 1.02rem; font-weight: 600; line-height: 1.4; }
.v2-shop__grid .v2-product-card__price { font-size: 1.45rem; font-weight: 800; }
.v2-shop__grid .v2-product-card__actions > * { flex: 1 1 100%; }
.v2-shop__grid .v2-btn--soft { background: var(--v2-accent); color: #fff; }
.v2-shop__grid .v2-btn--soft:hover { background: color-mix(in srgb, var(--v2-accent) 88%, #000); }

/* Small screens ------------------------------------------------------------ */

@media (max-width: 900px) {
	.v2-shop__layout { grid-template-columns: minmax(0, 1fr); }
	.v2-shop__side-toggle { display: inline-flex; }
	.v2-shop__filters { position: static; }
	.v2-shop__filters:not(.is-open) { display: none; }
	.v2-shop__filters.is-open { margin-top: 1rem; }
}

@media (max-width: 640px) {
	.v2-shop__banner { padding: 1.75rem 0; }
	.v2-shop__banner-text { font-size: .95rem; }

	.v2-shop__bar-inner { padding-top: .9rem; padding-bottom: .9rem; }
	.v2-shop__count { font-size: .88rem; }
	.v2-shop__sort { flex: 1; justify-content: flex-end; }
	.v2-shop__sort select { min-width: 0; flex: 1; max-width: 60%; }

	.v2-shop__layout { gap: 1.25rem; }
	.v2-shop__filters { padding: 1.25rem; }

	/* Two per row keeps the grid scannable on a phone without shrinking the
	   images to nothing. */
	.v2-shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
	.v2-shop__grid .v2-product-card__media img { max-height: 130px; padding: .25rem; }
	.v2-shop__grid .v2-product-card__body { padding: .8rem; gap: .35rem; }
	.v2-shop__grid .v2-product-card__body h3 { font-size: .92rem; }
	.v2-shop__grid .v2-product-card__price { font-size: 1.1rem; }
	.v2-shop__grid .v2-product-card__actions { padding: 0 .8rem .8rem; }

	.v2-pagination .page-numbers { min-width: 40px; height: 40px; }
}

@media (max-width: 360px) {
	.v2-shop__grid { grid-template-columns: minmax(0, 1fr); }
}