/*
 * Collection pages (master plan §11.2, §11.2.1). Tokens only; loaded on shop and category pages only.
 * Operate mode: uniform grid, conventional toolbar, card stagger on first load only.
 */
.v-main--collection { display: block; }
.v-collection { padding-block: var(--v-space-5) var(--v-space-10); }
.v-collection .v-breadcrumb { margin-bottom: var(--v-space-6); }
.v-collection__head { display: grid; gap: var(--v-space-3); max-width: var(--v-measure); margin-bottom: var(--v-space-6); }
.v-collection__title { margin: 0; }
.v-collection__intro { margin: 0; color: var(--v-text-muted); }

/* Styles row: scrolls sideways on phones, wraps on wide screens. */
.v-styles ul { display: flex; gap: var(--v-space-2); margin: 0 0 var(--v-space-5); padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.v-styles ul::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .v-styles ul { flex-wrap: wrap; overflow: visible; } }

/* Toolbar: filters left, count right. Phones: one "Filter and sort" button + count. */
.v-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--v-space-3);
	padding-block: var(--v-space-4);
	border-block: var(--v-hairline) solid var(--v-border);
}
.v-toolbar__count { margin: 0; font-size: var(--v-text-small); color: var(--v-text-muted); font-variant-numeric: tabular-nums; }
.v-filters--bar { display: none; }
@media (min-width: 1024px) {
	.v-filters--bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-space-2); }
	.v-toolbar__open { display: none; }
	.v-toolbar__count { margin-left: auto; }
}
.v-filter { position: relative; }
.v-filter__panel {
	position: absolute;
	top: calc(100% + var(--v-space-2));
	left: 0;
	z-index: var(--v-z-drawer);
	display: grid;
	gap: var(--v-space-4);
	width: max-content;
	min-width: 15rem;
	max-width: 22rem;
	padding: var(--v-space-4);
	border: var(--v-hairline) solid var(--v-border);
	background: var(--v-surface);
	box-shadow: var(--v-shadow-overlay);
}
@starting-style { details[open] > .v-filter__panel { opacity: 0; transform: translateY(calc(var(--v-space-2) * -1)); } }
.v-filter__panel { transition: opacity var(--v-dur-hover) var(--v-ease-out), transform var(--v-dur-hover) var(--v-ease-out); }
.v-filter__options { display: grid; gap: 0; }
.v-filter__options--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--v-space-4); }
.v-filter .v-check { padding-block: var(--v-space-2); }
.v-filters__sort { min-width: 13rem; }
.v-filters--bar .v-filters__sort .v-select { min-height: var(--v-btn-h); font-size: var(--v-text-small); }

/* Drawer version: groups stacked, apply button pinned at the bottom. */
.v-filters--drawer { display: grid; gap: var(--v-space-6); }
.v-filter--open { margin: 0; padding: 0; border: 0; }
.v-filter__legend { margin-bottom: var(--v-space-2); padding: 0; font-weight: var(--v-weight-semibold); }
.v-filters--drawer .v-filter__options--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v-filters__foot { position: sticky; bottom: calc(var(--v-space-5) * -1); padding-block: var(--v-space-4); background: var(--v-surface); }
.v-filters-drawer .v-drawer__inner { max-height: 85dvh; }

/* Active filters */
.v-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-space-2); margin: var(--v-space-4) 0 0; padding: 0; list-style: none; }
.v-collection__clear { margin-left: var(--v-space-2); font-size: var(--v-text-small); }

/* Grid: 4 columns ≥ 1280 · 3 ≥ 1024 · 2 below; uniform 4:5 cards (§11.2). */
.v-product-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--v-space-8) var(--v-gap);
	margin: var(--v-space-6) 0 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 1024px) { .v-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .v-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.v-product-grid .v-card__name { margin: 0; }
.v-card__claim { margin: 0; }

/* Editorial tile: same footprint as a card image (4:5), Chalk surface, text only. */
.v-grid-tile {
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* Long words wrap inside a 2-column phone grid (QA: 11 px overflow at 320). */
	align-content: end;
	overflow-wrap: anywhere;
	gap: var(--v-space-3);
	aspect-ratio: var(--v-card-ratio);
	padding: var(--v-space-5);
	background: var(--v-surface-alt);
	color: var(--v-text);
	text-decoration: none;
}
.v-grid-tile__heading { font-family: var(--v-font-display); font-size: var(--v-text-h3); font-weight: var(--v-weight-semibold); line-height: var(--v-lh-h3); }
.v-grid-tile__text { font-size: var(--v-text-small); color: var(--v-text-muted); }
@media (max-width: 767px) {
	.v-grid-tile { padding: var(--v-space-4); }
	.v-grid-tile__heading { font-size: var(--v-text-h4); font-family: var(--v-font-body); font-weight: var(--v-weight-bold); }
}

/* Load more + real page links */
.v-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--v-space-2); margin: 0; padding: 0; list-style: none; }
.v-pages[hidden] { display: none; }
.v-pages a { display: grid; place-items: center; min-width: var(--v-hit-min); min-height: var(--v-hit-min); color: var(--v-text); }
.v-pages a[aria-current="page"] { font-weight: var(--v-weight-bold); text-decoration: none; }
.v-collection__empty-title { margin: 0; font-family: var(--v-font-body); font-size: var(--v-text-h4); font-weight: var(--v-weight-bold); }

/* About (SEO copy + FAQs) */
.v-collection__about-grid { display: grid; gap: var(--v-space-8); }
@media (min-width: 1024px) { .v-collection__about-grid { grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: var(--v-space-10); align-items: start; } }
.v-collection__seo-title { margin: 0; }
.v-collection__seo-more { margin-top: var(--v-space-5); }
.v-collection__seo-more > summary { display: inline-flex; align-items: center; gap: var(--v-space-3); min-height: var(--v-hit-min); font-weight: var(--v-weight-semibold); cursor: pointer; list-style: none; }
.v-collection__seo-more > summary::-webkit-details-marker { display: none; }
.v-collection__seo-close,
.v-collection__seo-more[open] .v-collection__seo-open { display: none; }
.v-collection__seo-more[open] .v-collection__seo-close { display: inline; }
.v-collection__seo-more[open] .v-accordion__icon::after { transform: rotate(0deg); }
.v-collection__seo-body { max-width: var(--v-measure); margin-top: var(--v-space-4); }
.v-collection__seo-body > * + * { margin-top: var(--v-space-4); }

@media (prefers-reduced-motion: reduce) {
	.v-filter__panel { transition: opacity var(--v-dur-hover) linear; transform: none; }
}