/* ============================================================= */
/* PrintCraft Pro — Catalog Widget                                */
/* Matches the "Apparel & Garment Catalog" mockup design tokens.  */
/* ============================================================= */

.pcp-catalog {
	--pcp-surface: #f7f9fb;
	--pcp-background: #f7f9fb;
	--pcp-on-surface: #191c1e;
	--pcp-on-background: #191c1e;
	--pcp-surface-container-lowest: #ffffff;
	--pcp-surface-container-low: #f2f4f6;
	--pcp-surface-container: #eceef0;
	--pcp-surface-container-high: #e6e8ea;
	--pcp-surface-container-highest: #e0e3e5;
	--pcp-surface-variant: #e0e3e5;
	--pcp-surface-dim: #d8dadc;
	--pcp-outline: #867461;
	--pcp-outline-variant: #d8c3ad;
	--pcp-secondary: #4b41e1;
	--pcp-secondary-container: #645efb;
	--pcp-secondary-fixed: #e2dfff;
	--pcp-secondary-fixed-dim: #c3c0ff;
	--pcp-on-secondary: #ffffff;
	--pcp-on-secondary-fixed: #0f0069;
	--pcp-on-secondary-container: #fffbff;
	--pcp-primary: #855300;
	--pcp-primary-container: #f59e0b;
	--pcp-on-primary: #ffffff;
	--pcp-on-primary-container: #613b00;
	--pcp-primary-fixed: #ffddb8;
	--pcp-tertiary: #565e74;
	--pcp-error: #ba1a1a;
	--pcp-inverse-surface: #2d3133;
	--pcp-inverse-on-surface: #eff1f3;
	--pcp-radius-sm: 0.5rem;
	--pcp-radius: 0.75rem;
	--pcp-radius-lg: 1rem;

	--pcp-font-headline: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
	--pcp-font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;

	background: var(--pcp-surface);
	color: var(--pcp-on-surface);
	font-family: var(--pcp-font-body);
	font-size: 14px;
	line-height: 20px;
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}

.pcp-catalog *,
.pcp-catalog *::before,
.pcp-catalog *::after {
	box-sizing: border-box;
}

.pcp-catalog button,
.pcp-catalog input,
.pcp-catalog select {
	font-family: inherit;
}

.pcp-catalog .pcp-cat-icon,
.pcp-catalog .pcp-cat-card .material-symbols-outlined,
.pcp-catalog .pcp-cat-side .material-symbols-outlined {
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
}

.pcp-catalog-inner {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------- Quick category chips ---------- */
.pcp-cat-chips {
	display: flex;
	align-items: center;
	gap: 10px;
	overflow-x: auto;
	padding: 4px 0 12px;
	border-bottom: 1px solid var(--pcp-surface-container-high);
	scrollbar-width: none;
}
.pcp-cat-chips::-webkit-scrollbar { display: none; }

.pcp-cat-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	padding: 8px 16px;
	border-radius: var(--pcp-radius);
	border: 1px solid var(--pcp-outline-variant);
	background: var(--pcp-surface-container-lowest);
	color: var(--pcp-on-surface);
	font-family: var(--pcp-font-body);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	cursor: pointer;
	transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.pcp-cat-chip:hover { background: var(--pcp-surface-container); }
.pcp-cat-chip.is-active {
	background: var(--pcp-inverse-surface);
	color: var(--pcp-surface-container-lowest);
	border-color: var(--pcp-inverse-surface);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.pcp-cat-chip[disabled] { opacity: 0.5; cursor: default; }

.pcp-cat-chip-count {
	padding: 2px 6px;
	border-radius: 6px;
	background: var(--pcp-surface-container-high);
	color: var(--pcp-tertiary);
	font-size: 10px;
	font-weight: 700;
	line-height: 12px;
}
.pcp-cat-chip.is-active .pcp-cat-chip-count { background: rgba(255, 255, 255, 0.2); color: #fff; }

/* ---------- Top bar ---------- */
.pcp-cat-topbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 16px;
}
.pcp-cat-topbar-left {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 320px;
}
.pcp-cat-search {
	position: relative;
	width: 100%;
	max-width: 320px;
}
.pcp-cat-search .pcp-cat-icon {
	position: absolute;
	inset: 0 auto 0 12px;
	display: flex;
	align-items: center;
	color: var(--pcp-tertiary);
	pointer-events: none;
}
.pcp-cat-search-input {
	width: 100%;
	padding: 6px 12px 6px 38px;
	border-radius: 8px;
	border: 1px solid var(--pcp-outline-variant);
	background: var(--pcp-surface-container-lowest);
	color: var(--pcp-on-surface);
	font-size: 14px;
	line-height: 20px;
	outline: none;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}
.pcp-cat-search-input:focus {
	border-color: var(--pcp-secondary);
	box-shadow: 0 0 0 2px rgba(75, 65, 225, 0.25);
}
.pcp-cat-search-input::placeholder { color: var(--pcp-tertiary); opacity: 0.8; }

.pcp-cat-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pcp-cat-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 8px;
	background: var(--pcp-surface-container-high);
	color: var(--pcp-on-surface);
	font-size: 10px;
	font-weight: 700;
	line-height: 12px;
}
.pcp-cat-pill.is-highlight {
	background: var(--pcp-secondary-fixed);
	color: var(--pcp-on-secondary-fixed);
}
.pcp-cat-pill-remove {
	display: inline-flex;
	align-items: center;
	border: 0;
	background: none;
	padding: 0;
	margin: 0;
	color: inherit;
	cursor: pointer;
	line-height: 1;
}
.pcp-cat-pill-remove:hover { color: var(--pcp-error); }
.pcp-cat-pill-remove .material-symbols-outlined { font-size: 14px; }
.pcp-cat-clearall {
	border: 0;
	background: none;
	padding: 0;
	margin-left: 4px;
	color: var(--pcp-tertiary);
	font-size: 10px;
	font-weight: 700;
	text-decoration: underline;
	line-height: 12px;
	cursor: pointer;
}
.pcp-cat-clearall:hover { color: var(--pcp-secondary); }

.pcp-cat-topbar-right {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.pcp-cat-mode {
	display: flex;
	align-items: center;
	background: var(--pcp-surface-container-lowest);
	border: 1px solid var(--pcp-outline-variant);
	border-radius: var(--pcp-radius);
	padding: 4px;
}
.pcp-cat-mode button {
	border: 0;
	background: none;
	padding: 4px 10px;
	border-radius: 8px;
	color: var(--pcp-on-surface);
	font-size: 10px;
	font-weight: 700;
	line-height: 12px;
	cursor: pointer;
	transition: background 150ms ease, color 150ms ease;
}
.pcp-cat-mode button:hover { color: var(--pcp-secondary); }
.pcp-cat-mode button.is-active {
	background: var(--pcp-secondary);
	color: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.pcp-cat-sort-label {
	color: var(--pcp-tertiary);
	font-size: 10px;
	font-weight: 700;
	line-height: 12px;
}
.pcp-cat-sort {
	background: var(--pcp-surface-container-lowest);
	color: var(--pcp-on-surface);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	padding: 6px 8px;
	padding-right: 24px;
	border-radius: var(--pcp-radius);
	border: 1px solid var(--pcp-outline-variant);
	outline: none;
}
.pcp-cat-sort:focus { border-color: var(--pcp-secondary); }
.pcp-cat-view {
	display: flex;
	align-items: center;
	background: var(--pcp-surface-container-lowest);
	border: 1px solid var(--pcp-outline-variant);
	border-radius: var(--pcp-radius);
	padding: 4px;
}
.pcp-cat-view button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: none;
	padding: 6px;
	border-radius: 8px;
	color: var(--pcp-tertiary);
	cursor: pointer;
	transition: background 150ms ease, color 150ms ease;
}
.pcp-cat-view button:hover { color: var(--pcp-on-surface); }
.pcp-cat-view button.is-active { background: var(--pcp-surface-container); color: var(--pcp-secondary); }
.pcp-cat-view button .material-symbols-outlined { font-size: 18px; }

/* ---------- Layout ---------- */
.pcp-catalog-layout {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
	padding: 32px 0 8px;
}
.pcp-catalog-main { flex: 1 1 auto; width: 100%; }

/* ---------- Sidebar ---------- */
.pcp-cat-side {
	width: 100%;
	max-width: none;
	flex: 0 0 auto;
	background: var(--pcp-surface-container-lowest);
	border: 1px solid var(--pcp-outline-variant);
	border-radius: var(--pcp-radius-lg);
	padding: 20px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	position: sticky;
	top: 96px;
	max-height: calc(100vh - 7rem);
	overflow-y: auto;
}
.pcp-cat-side::-webkit-scrollbar { width: 6px; }
.pcp-cat-side::-webkit-scrollbar-track { background: #f1f5f9; }
.pcp-cat-side::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }

.pcp-cat-side-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--pcp-surface-container-high);
}
.pcp-cat-side-title {
	display: flex;
	align-items: center;
	gap: 8px;
}
.pcp-cat-side-title .material-symbols-outlined { color: var(--pcp-secondary); }
.pcp-cat-side-title h2 {
	margin: 0;
	font-family: var(--pcp-font-headline);
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
	color: var(--pcp-on-surface);
}
.pcp-cat-reset {
	border: 0;
	background: none;
	padding: 0;
	color: var(--pcp-secondary);
	font-size: 10px;
	font-weight: 700;
	line-height: 12px;
	cursor: pointer;
	text-decoration: none;
}
.pcp-cat-reset:hover { text-decoration: underline; }

.pcp-cat-facet { padding: 0 0 16px; margin-top: 16px; border-bottom: 1px solid var(--pcp-surface-container-high); }
.pcp-cat-facet-last { border-bottom: 0; }
.pcp-cat-facet-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	user-select: none;
}
.pcp-cat-facet-title {
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	color: var(--pcp-on-surface);
}
.pcp-cat-facet-head .material-symbols-outlined { color: var(--pcp-tertiary); font-size: 16px; }
.pcp-cat-facet-note {
	font-size: 10px;
	font-weight: 700;
	line-height: 12px;
	color: var(--pcp-tertiary);
}
.pcp-cat-gsm-label {
	font-size: 10px;
	font-weight: 600;
	line-height: 12px;
	color: var(--pcp-secondary);
}

.pcp-cat-facet-open { display: flex; flex-direction: column; gap: 8px; }
.pcp-cat-facet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pcp-cat-facet-sizes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }

.pcp-cat-check {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: 14px;
	line-height: 20px;
	color: var(--pcp-on-surface);
}
.pcp-cat-check:hover { color: var(--pcp-secondary); }
.pcp-cat-check input {
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 4px;
	border: 1px solid var(--pcp-outline-variant);
	background: #fff;
	cursor: pointer;
	position: relative;
	flex: 0 0 auto;
	margin: 0;
}
.pcp-cat-check input:checked {
	background: var(--pcp-secondary);
	border-color: var(--pcp-secondary);
}
.pcp-cat-check input:checked::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 2px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.pcp-cat-check em {
	font-style: normal;
	margin-left: auto;
	font-size: 10px;
	font-weight: 700;
	line-height: 12px;
	color: var(--pcp-tertiary);
}
.pcp-cat-bolt { color: var(--pcp-primary-container); }

.pcp-cat-btn {
	text-align: left;
	padding: 6px 10px;
	border-radius: 8px;
	border: 1px solid var(--pcp-outline-variant);
	background: var(--pcp-surface);
	color: var(--pcp-on-surface);
	font-size: 10px;
	font-weight: 600;
	line-height: 12px;
	cursor: pointer;
	transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.pcp-cat-btn:hover { border-color: var(--pcp-secondary); }
.pcp-cat-btn.is-active {
	border-color: var(--pcp-secondary);
	background: var(--pcp-secondary-fixed);
	color: var(--pcp-secondary);
	font-weight: 700;
}
.pcp-cat-size.is-active { background: var(--pcp-secondary); border-color: var(--pcp-secondary); color: #fff; font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,0.15); }

.pcp-cat-swatches {
	display: flex;
	flex-direction: row;   /* override facet-open's column → horizontal swatch row (mockup) */
	flex-wrap: wrap;
	gap: 10px;
}

/* ============================================================
   Mockup-parity overrides (appended; later in cascade = win).
   Reference: stitch_custom_apparel_homepage_redesign (5)/code.html
   ============================================================ */

/* Toolbar: right controls (mode + sort + view) must stay on the same
   single row as the left (search/pills) — mockup `flex justify-between`.
   Compact sizing so the whole bar fits one line at desktop widths. */
.pcp-cat-topbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.pcp-cat-topbar-left {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	flex: 1 1 240px;
	min-width: 0;
}
.pcp-cat-topbar-right {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}
.pcp-cat-search {
	position: relative;
	width: 100%;
	max-width: 260px;
}
.pcp-cat-mode { padding: 3px; }
.pcp-cat-mode button { padding: 4px 9px; white-space: nowrap; }
.pcp-cat-sort-label { white-space: nowrap; }
.pcp-cat-sort { max-width: 190px; text-overflow: ellipsis; }

/* Match the mockup: below sm (640px) hide the price-mode toggle and the
   "Sort by:" label so the bar stays a single readable line. */
@media (max-width: 639px) {
	.pcp-cat-mode,
	.pcp-cat-sort-label { display: none; }
	.pcp-cat-topbar-left { flex: 1 1 100%; }
	.pcp-cat-sort { max-width: none; }
}

/* Grid: responsive 1 → 2 → 3 → 4 per row, independent of the
   data-view attribute (mockup grid-cols-1 sm:2 lg:3 xl:4).
   A missing/mismatched data-view can never collapse to 1 column. */
.pcp-catalog-grid {
	display: grid;
	gap: 20px;
	margin-top: 24px;
	grid-template-columns: repeat(1, minmax(0, 1fr));
}
.pcp-catalog[data-view="list"] .pcp-catalog-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 12px; }

@media (min-width: 640px) {
	.pcp-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pcp-catalog[data-view="list"] .pcp-catalog-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.pcp-catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pcp-catalog[data-view="list"] .pcp-catalog-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
	.pcp-catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.pcp-catalog[data-view="3"] .pcp-catalog-grid,
	.pcp-catalog[data-view="list"] .pcp-catalog-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 12px; }
}
.pcp-cat-swatch {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.12);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
	cursor: pointer;
	padding: 0;
	box-shadow: 0 0 0 2px transparent;
	transition: box-shadow 150ms ease, transform 150ms ease;
}
.pcp-cat-swatch:hover, .pcp-cat-swatch.is-selected { box-shadow: 0 0 0 2px var(--pcp-secondary); }
.pcp-cat-swatch.is-selected { transform: scale(1.08); }
.pcp-cat-swatch[data-color="white"] { border: 1px solid var(--pcp-outline-variant); }

/* ---------- GSM dual-range slider ---------- */
.pcp-cat-gsm-slider {
	position: relative;
	height: 22px;
	margin: 4px 0 10px;
}
.pcp-cat-gsm-slider input[type="range"] {
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
	height: 4px;
	top: 9px;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	pointer-events: none;
	outline: none;
	margin: 0;
}
.pcp-cat-gsm-slider input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	pointer-events: auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--pcp-secondary);
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	position: relative;
	z-index: 2;
}
.pcp-cat-gsm-slider input[type="range"]::-moz-range-thumb {
	pointer-events: auto;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--pcp-secondary);
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	cursor: pointer;
}
.pcp-cat-gsm-slider input[type="range"]::-webkit-slider-runnable-track {
	background: transparent;
	border: 0;
}
.pcp-cat-gsm-slider::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 9px;
	height: 4px;
	border-radius: 999px;
	background: linear-gradient(to right, var(--pcp-surface-container-high) var(--pcp-low, 0%), var(--pcp-secondary) var(--pcp-low, 0%), var(--pcp-secondary) var(--pcp-high, 100%), var(--pcp-surface-container-high) var(--pcp-high, 100%));
}

/* ---------- Results bar ---------- */
.pcp-cat-results {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--pcp-surface-container);
}
.pcp-cat-results-count {
	margin: 0;
	font-size: 14px;
	line-height: 20px;
	color: var(--pcp-tertiary);
}
.pcp-cat-results-count strong { color: var(--pcp-on-surface); }
.pcp-cat-results-trust {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 10px;
	font-weight: 700;
	line-height: 12px;
	color: var(--pcp-secondary);
}
.pcp-cat-results-trust .material-symbols-outlined { font-size: 16px; }

/* ---------- Grid ---------- */
.pcp-catalog-grid.is-loading {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 150ms ease;
}
.pcp-catalog-grid {
	display: grid;
	gap: 20px;
	margin-top: 24px;
	grid-template-columns: repeat(1, minmax(0, 1fr));
}
/* Responsive default = mockup "4-Column Grid":
   grid-cols-1 → sm:2 → lg:3 → xl:4, NOT dependent on a data-view attribute.
   The view="4" / view="3" / list rules below only CAP or narrow it further. */
.pcp-catalog[data-view="list"] .pcp-catalog-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 12px; }

@media (min-width: 640px) {
	.pcp-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pcp-catalog[data-view="list"] .pcp-catalog-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.pcp-catalog-layout { flex-direction: row; }
	.pcp-cat-side { width: 280px; max-width: 280px; }
	.pcp-catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pcp-catalog[data-view="3"] .pcp-catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
	.pcp-catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	/* "3-Column Large Grid" stays capped at 3; list stays 1 col. */
	.pcp-catalog[data-view="3"] .pcp-catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pcp-catalog[data-view="list"] .pcp-catalog-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 12px; }
}

/* ---------- Card ---------- */
.pcp-cat-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
	background: var(--pcp-surface-container-lowest);
	border: 1px solid var(--pcp-outline-variant);
	border-radius: var(--pcp-radius-lg);
	transition: border-color 300ms ease, box-shadow 300ms ease;
}
.pcp-cat-card:hover {
	border-color: var(--pcp-secondary);
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12);
}

.pcp-cat-card-badges {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.pcp-cat-card-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 6px;
	font-size: 10px;
	font-weight: 700;
	line-height: 12px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
	width: fit-content;
}
.pcp-cat-card-badge-primary { background: var(--pcp-secondary); color: #fff; }
.pcp-cat-card-badge-gsm { background: var(--pcp-primary-container); color: var(--pcp-on-primary-container); font-weight: 800; }

.pcp-cat-card-wish {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 11;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(4px);
	color: var(--pcp-tertiary);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
	transition: color 150ms ease, transform 150ms ease;
}
.pcp-cat-card-wish:hover { color: var(--pcp-error); }
.pcp-cat-card-wish.is-wished .material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; color: var(--pcp-error); }
.pcp-cat-card-wish .material-symbols-outlined { font-size: 18px; }

.pcp-cat-card-media {
	position: relative;
	aspect-ratio: 4 / 5;
	background: var(--pcp-surface-container-low);
	overflow: hidden;
}
.pcp-cat-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms ease;
}
.pcp-cat-card:hover .pcp-cat-card-media img { transform: scale(1.05); }

.pcp-cat-card-overlay {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	display: flex;
	gap: 8px;
	opacity: 0;
	transition: opacity 200ms ease;
}
.pcp-cat-card:hover .pcp-cat-card-overlay { opacity: 1; }
.pcp-cat-card-action {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 8px 0;
	border-radius: var(--pcp-radius);
	font-size: 10px;
	font-weight: 700;
	line-height: 12px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}
.pcp-cat-card-action .material-symbols-outlined { font-size: 16px; }
.pcp-cat-card-quick {
	border: 1px solid var(--pcp-outline-variant);
	background: rgba(255, 255, 255, 0.95);
	color: var(--pcp-on-surface);
	transition: background 150ms ease;
}
.pcp-cat-card-quick:hover { background: var(--pcp-surface-container); }
.pcp-cat-card-customize {
	border: 0;
	background: var(--pcp-primary-container);
	color: var(--pcp-on-primary-container);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	transition: filter 150ms ease;
}
.pcp-cat-card-customize:hover { filter: brightness(1.05); }

.pcp-cat-card-body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 12px;
	flex: 1;
}
.pcp-cat-card-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
	font-size: 10px;
	font-weight: 700;
	line-height: 12px;
}
.pcp-cat-card-fit { color: var(--pcp-secondary); }
.pcp-cat-card-sep { color: var(--pcp-tertiary); }
.pcp-cat-card-colors { color: var(--pcp-tertiary); font-weight: 600; }

.pcp-cat-card-title {
	margin: 0;
	font-family: var(--pcp-font-headline);
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
}
.pcp-cat-card-title a { color: var(--pcp-on-surface); text-decoration: none; transition: color 150ms ease; }
.pcp-cat-card:hover .pcp-cat-card-title a { color: var(--pcp-secondary); }
.pcp-cat-card-sub {
	margin: 2px 0 0;
	font-size: 12px;
	line-height: 16px;
	color: var(--pcp-tertiary);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

.pcp-cat-card-dots {
	display: flex;
	align-items: center;
	gap: 6px;
	padding-top: 4px;
}
.pcp-cat-card-dot {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.pcp-cat-card-dots-more { font-size: 10px; font-weight: 600; line-height: 12px; color: var(--pcp-tertiary); padding-left: 4px; }

.pcp-cat-card-price {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding-top: 12px;
	border-top: 1px solid var(--pcp-surface-container);
}
.pcp-cat-card-price-label {
	display: block;
	font-size: 10px;
	font-weight: 600;
	line-height: 12px;
	color: var(--pcp-tertiary);
	margin-bottom: 2px;
}
.pcp-cat-card-price-value {
	font-family: var(--pcp-font-headline);
	font-size: 16px;
	font-weight: 800;
	line-height: 22px;
	color: var(--pcp-on-surface);
}
.pcp-cat-card-price-value em {
	font-style: normal;
	font-family: var(--pcp-font-body);
	font-size: 12px;
	font-weight: 400;
	color: var(--pcp-tertiary);
}
.pcp-cat-card-price-custom { text-align: right; }
.pcp-cat-card-price-custom .pcp-cat-card-price-label { color: var(--pcp-secondary); font-weight: 700; }
.pcp-cat-card-price-custom .pcp-cat-card-price-value { color: var(--pcp-secondary); }

/* Price mode highlight switch */
.pcp-catalog[data-price-mode="custom"] .pcp-cat-card-price-custom .pcp-cat-card-price-value { color: var(--pcp-secondary); }
.pcp-catalog[data-price-mode="custom"] .pcp-cat-card .pcp-cat-card-price > div:first-child { opacity: 0.55; }
.pcp-catalog[data-price-mode="blank"] .pcp-cat-card-price-custom .pcp-cat-card-price-label { color: var(--pcp-secondary); }

/* ---------- List view ---------- */
.pcp-catalog[data-view="list"] .pcp-cat-card {
	flex-direction: row;
	align-items: stretch;
}
.pcp-catalog[data-view="list"] .pcp-cat-card-media { aspect-ratio: auto; width: 180px; flex: 0 0 auto; }
.pcp-catalog[data-view="list"] .pcp-cat-card-body { flex: 1; }
@media (max-width: 640px) {
	.pcp-catalog[data-view="list"] .pcp-cat-card { flex-direction: column; }
	.pcp-catalog[data-view="list"] .pcp-cat-card-media { width: 100%; aspect-ratio: 4 / 5; }
}

/* ---------- Empty state ---------- */
.pcp-cat-empty {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 64px 24px;
	text-align: center;
	color: var(--pcp-tertiary);
}
.pcp-cat-empty .material-symbols-outlined { font-size: 40px; color: var(--pcp-surface-dim); }

/* ---------- Footer / pagination ---------- */
.pcp-cat-footer {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--pcp-surface-container-high);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
@media (min-width: 640px) {
	.pcp-cat-footer { flex-direction: row; }
}
.pcp-cat-footer-count { margin: 0; font-size: 14px; line-height: 20px; color: var(--pcp-tertiary); }
.pcp-cat-footer-count strong { color: var(--pcp-on-surface); }

.pcp-cat-pager { display: flex; align-items: center; gap: 6px; }
.pcp-cat-page-btn {
	width: 40px;
	height: 40px;
	border-radius: var(--pcp-radius);
	border: 1px solid var(--pcp-outline-variant);
	background: transparent;
	color: var(--pcp-tertiary);
	font-family: var(--pcp-font-body);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.pcp-cat-page-btn:hover { color: var(--pcp-secondary); border-color: var(--pcp-secondary); background: var(--pcp-surface-container); }
.pcp-cat-page-btn.is-active { background: var(--pcp-secondary); color: #fff; border-color: var(--pcp-secondary); font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
.pcp-cat-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pcp-cat-pager-ellipsis { padding: 0 8px; color: var(--pcp-tertiary); font-weight: 700; }

.pcp-cat-loadmore {
	padding: 10px 24px;
	border-radius: var(--pcp-radius);
	border: 1px solid var(--pcp-secondary);
	background: transparent;
	color: var(--pcp-secondary);
	font-family: var(--pcp-font-body);
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	cursor: pointer;
	transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}
.pcp-cat-loadmore:hover { background: rgba(75, 65, 225, 0.05); }
.pcp-cat-loadmore:active { transform: scale(0.97); }
.pcp-cat-loadmore:disabled { opacity: 0.45; cursor: not-allowed; }
.pcp-cat-loadmore.is-loading { pointer-events: none; }

/* ---------- Quick view modal ---------- */
/* The modal is appended to document.body (outside .pcp-catalog where the
   design tokens live), so re-declare the needed tokens here to guarantee a
   solid white, readable popup instead of a transparent one. */
.pcp-cat-modal-backdrop {
	--pcp-surface-container-lowest: #ffffff;
	--pcp-surface-container-low: #f2f4f6;
	--pcp-surface-container: #eceef0;
	--pcp-outline-variant: #d8c3ad;
	--pcp-on-surface: #191c1e;
	--pcp-tertiary: #565e74;
	--pcp-secondary: #4b41e1;
	--pcp-error: #ba1a1a;
	--pcp-primary-container: #f59e0b;
	--pcp-on-primary-container: #613b00;
	--pcp-radius: 0.75rem;
	--pcp-font-headline: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;

	position: fixed;
	inset: 0;
	z-index: 99990;
	background: rgba(25, 28, 30, 0.5);
	backdrop-filter: blur(2px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	animation: pcpCatFade 150ms ease;
}
.pcp-cat-modal {
	background: #ffffff;
	border-radius: 16px;
	border: 1px solid #d8c3ad;
	box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.3);
	width: 100%;
	max-width: 760px;
	max-height: 90vh;
	overflow: auto;
	display: flex;
	flex-direction: column;
	position: relative;
	animation: pcpCatPop 180ms ease;
}
.pcp-cat-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(4px);
	color: var(--pcp-tertiary);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.pcp-cat-modal-close:hover { color: var(--pcp-error); }
.pcp-cat-modal-inner { display: flex; flex-direction: column; }
@media (min-width: 640px) { .pcp-cat-modal-inner { flex-direction: row; } }
.pcp-cat-modal-media { position: relative; background: var(--pcp-surface-container-low); }
@media (min-width: 640px) { .pcp-cat-modal-media { width: 46%; flex: 0 0 auto; } }
.pcp-cat-modal-media img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pcp-cat-modal-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pcp-cat-modal-meta { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 700; }
.pcp-cat-modal-meta .pcp-cat-card-fit { color: var(--pcp-secondary); }
.pcp-cat-modal-title { margin: 0; font-family: var(--pcp-font-headline); font-size: 20px; font-weight: 700; line-height: 26px; }
.pcp-cat-modal-sub { margin: 0; color: var(--pcp-tertiary); font-size: 14px; line-height: 20px; }
.pcp-cat-modal-dots { display: flex; align-items: center; gap: 6px; }
.pcp-cat-modal-dots .pcp-cat-card-dot { width: 20px; height: 20px; }
.pcp-cat-modal-price {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-top: 8px;
	padding-top: 16px;
	border-top: 1px solid var(--pcp-surface-container);
}
.pcp-cat-modal-actions {
	display: flex;
	gap: 10px;
	margin-top: 12px;
	flex-wrap: wrap;
}
.pcp-cat-modal-actions a,
.pcp-cat-modal-actions button {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 16px;
	border-radius: var(--pcp-radius);
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid var(--pcp-outline-variant);
	background: var(--pcp-surface-container-lowest);
	color: var(--pcp-on-surface);
	transition: background 150ms ease, border-color 150ms ease;
}
.pcp-cat-modal-actions a:hover { background: var(--pcp-surface-container); }
.pcp-cat-modal-actions .pcp-cat-card-customize {
	background: var(--pcp-primary-container);
	color: var(--pcp-on-primary-container);
	border-color: transparent;
}
.pcp-cat-modal-actions .pcp-cat-card-customize:hover { filter: brightness(1.05); background: var(--pcp-primary-container); }

@keyframes pcpCatFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pcpCatPop { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }

@media (max-width: 1023px) {
	.pcp-cat-side { position: static; max-height: none; }
}