/* Shop listing (template-parts/archive/shop.php + cards/card-prompt-shop.php) – semantic tokens only. */

.promptix-main:has(> .promptix-shop) { padding-top: 0; }
.promptix-shop { padding-bottom: 8px; }

.pxs-grad { padding-right: .06em; background: linear-gradient(90deg, var(--color-purple) 0%, color-mix(in srgb, var(--color-purple) 55%, var(--color-error)) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Hero */
.pxs-hero { position: relative; overflow: hidden; padding: 18px 0 30px; background: var(--gradient-soft); border-bottom: 1px solid var(--border-default); }
.pxs-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.pxs-hero.has-image::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, var(--bg-page) 0%, color-mix(in srgb, var(--bg-page) 88%, transparent) 40%, color-mix(in srgb, var(--bg-page) 15%, transparent) 75%, transparent 100%); }
.pxs-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; align-items: center; }
.pxs-hero .breadcrumb { margin-bottom: 12px; font-size: 13px; }
.pxs-hero__title { margin: 0 0 8px; color: var(--text-heading); font-size: clamp(2rem, 3.8vw, 3rem); font-weight: 800; font-style: italic; line-height: 1.08; letter-spacing: -.02em; }
.pxs-hero__lead { margin: 0 0 22px; color: var(--text-body); font-size: 1.0625rem; }

.pxs-search { position: relative; display: flex; align-items: center; max-width: 640px; padding: 6px 6px 6px 54px; border: 1.5px solid var(--color-cyan); border-radius: var(--radius-pill); background: var(--bg-input); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-cyan) 12%, transparent), var(--shadow-md); }
.pxs-search:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--ui-focus-glow), var(--shadow-md); }
.pxs-search__icon { position: absolute; left: 18px; display: flex; color: var(--text-heading); }
.pxs-search__input { flex: 1; min-width: 0; height: 44px; padding: 0; border: 0; background: transparent; color: var(--text-heading); font: inherit; outline: 0; }
.pxs-search__input::placeholder { color: var(--text-muted); }
.pxs-search__submit { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--gradient-primary); color: var(--text-inverse); cursor: pointer; transition: transform .2s ease; }
.pxs-search__submit:hover { transform: translateX(2px); }

.pxs-popular { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; }
.pxs-popular__label { color: var(--text-heading); font-size: 13px; font-weight: 600; }
.pxs-popular ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pxs-pill { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--bg-card); color: var(--text-body); font-size: 12px; transition: color .2s ease, border-color .2s ease; }
.pxs-pill:hover { color: var(--color-primary); border-color: var(--color-primary); }

.pxs-hero__tags { position: relative; display: grid; justify-items: end; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pxs-hero__tag { padding: 6px 16px; border: 1px solid color-mix(in srgb, var(--color-cyan) 60%, transparent); border-radius: var(--radius-md); background: color-mix(in srgb, var(--bg-card) 85%, transparent); color: var(--text-heading); font-size: 15px; font-weight: 600; box-shadow: 0 0 18px color-mix(in srgb, var(--color-cyan) 22%, transparent); backdrop-filter: blur(4px); transform: rotate(-6deg); }
.pxs-hero__tag--1 { margin-right: 46px; }
.pxs-hero__tag--2 { margin-right: 18px; }
.pxs-hero__tag--3 { margin-right: 40px; }

/* Layout + sidebar (drawer below 1024px comes from directory.css) */
.pxs-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 24px; padding-block: 24px; }
.pxs-sidebar { gap: 0; padding: 16px; }
.pxs-sidebar__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 12px; }
.pxs-sidebar__title { margin: 0; color: var(--text-heading); font-size: 1rem; font-weight: 700; }
.pxs-reset { margin-left: auto; color: var(--color-primary); font-size: 13px; font-weight: 500; }
.pxs-reset:hover { color: var(--ui-hover); }
.pxs-sidebar__find { padding-bottom: 12px; border-bottom: 1px solid var(--border-default); }
.pxs-sidebar__label { display: block; margin-bottom: 8px; color: var(--text-heading); font-size: 14px; font-weight: 600; }
.pxs-sidebar__field { position: relative; display: block; }
.pxs-sidebar__field .promptix-icon { position: absolute; top: 50%; left: 12px; color: var(--text-muted); transform: translateY(-50%); }
.pxs-sidebar__field .input { padding-left: 36px; font-size: 13px; }
.pxs-group { padding: 12px 0; border-bottom: 1px solid var(--border-default); }
.pxs-group:last-of-type { border-bottom: 0; }
.pxs-group__title { display: flex; align-items: center; justify-content: space-between; color: var(--text-heading); font-size: 14px; font-weight: 700; list-style: none; cursor: pointer; }
.pxs-group__title::-webkit-details-marker { display: none; }
.pxs-group__title .promptix-icon { color: var(--text-muted); transition: transform .2s ease; }
.pxs-group:not([open]) .pxs-group__title .promptix-icon { transform: rotate(180deg); }
.pxs-group__body { padding-top: 6px; }
.pxs-sidebar .promptix-facet-option { padding: 3px 0; font-size: 13px; }
.pxs-sidebar .promptix-facet-option__name { display: inline-flex; align-items: center; gap: 7px; }
.pxs-sidebar .promptix-facet-option__count { font-size: 12px; }
.pxs-sidebar .promptix-facet-option.is-hidden,
.pxs-group:not(.is-expanded) .promptix-facet-option.is-extra { display: none; }
.promptix-shop.is-finding .pxs-group .promptix-facet-option.is-extra:not(.is-hidden) { display: flex; }
.promptix-shop.is-finding .pxs-more-opts { display: none; }
.pxs-opt-icon { display: inline-flex; color: var(--text-secondary); }
.pxs-and-up { color: var(--text-secondary); font-size: 12px; }
.pxs-more-opts { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 0; border: 0; background: none; color: var(--color-primary); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.pxs-group.is-expanded .pxs-more-opts .promptix-icon { transform: rotate(180deg); }

/* Rating stars (same markup as the Models page) */
.pxs-sidebar .pxm-stars { position: relative; display: inline-block; color: var(--border-strong); font-size: 13px; letter-spacing: 1px; line-height: 1; }
.pxs-sidebar .pxm-stars > span { position: absolute; inset: 0 auto 0 0; width: var(--fill, 0%); overflow: hidden; color: var(--color-warning); white-space: nowrap; }
.pxs-sidebar .pxm-stars::before { content: "★★★★★"; }

/* Price range: two native ranges over one track */
.pxs-range { position: relative; height: 22px; margin: 6px 4px 0; }
.pxs-range__track { position: absolute; top: 50%; right: 0; left: 0; height: 4px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--border-default) calc(var(--min) / var(--top) * 100%), var(--color-primary) calc(var(--min) / var(--top) * 100%), var(--color-cyan) calc(var(--max) / var(--top) * 100%), var(--border-default) calc(var(--max) / var(--top) * 100%)); transform: translateY(-50%); }
.pxs-range input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.pxs-range input::-webkit-slider-thumb { width: 16px; height: 16px; border: 2px solid var(--bg-card); border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-sm); cursor: pointer; pointer-events: auto; -webkit-appearance: none; appearance: none; }
.pxs-range input::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid var(--bg-card); border-radius: 50%; background: var(--color-primary); cursor: pointer; pointer-events: auto; }
.pxs-range input::-webkit-slider-runnable-track { background: none; }
.pxs-range input::-moz-range-track { background: none; }
.pxs-range input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--ui-focus-glow); }
.pxs-range__out { display: flex; justify-content: space-between; margin: 6px 0 0; color: var(--text-heading); font-size: 13px; }

/* Toolbar */
.pxs-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 10px; }
.pxs-active { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.pxs-active:has([data-facet-chips]:empty) { visibility: hidden; }
.pxs-active__label { color: var(--text-heading); font-size: 13px; font-weight: 600; }
.pxs-active__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pxs-active__chips .promptix-chip { min-height: 30px; padding: 4px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--bg-card); color: var(--text-heading); font-size: 12px; font-weight: 500; }
.pxs-active__chips .promptix-chip:hover { border-color: var(--color-error); color: var(--color-error); }
.pxs-active__clear { color: var(--color-primary); font-size: 13px; text-decoration: underline; }
.pxs-sort { width: auto; min-width: 200px; min-height: 40px; padding: 6px 12px; font-size: 13px; color: var(--text-heading); }
.pxs-view { display: flex; gap: 6px; }
.pxs-view button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; }
.pxs-view button[aria-pressed="true"] { border-color: var(--color-primary); background: var(--bg-active); color: var(--color-primary); }
.promptix-shop .promptix-dir__filters-btn { gap: 6px; }
.pxs-summary { margin: 0 0 14px; color: var(--text-heading); font-size: 14px; }

/* Grid + cards */
.pxs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pxs-grid[aria-busy="true"] { opacity: .85; }

.promptix-shop.is-list-view .pxs-grid { grid-template-columns: 1fr; }
.promptix-shop.is-list-view .pxs-card { display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.promptix-shop.is-list-view .pxs-card__media { aspect-ratio: auto; min-height: 170px; }

/* Pagination + load more */
.pxs-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 24px; margin-top: 26px; }
.pxs-pager .pagination { margin: 0; }
.pxs-load-more { min-height: 44px; padding: 10px 24px; border: 0; background: var(--gradient-cyan); color: var(--text-inverse); }
.pxs-load-more:hover { color: var(--text-inverse); box-shadow: var(--shadow-md); }
.pxs-load-more[hidden] { display: none; }

@media (max-width: 1199px) {
	.pxs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
	.pxs-layout { grid-template-columns: 1fr; }
	.promptix-shop.is-filters-open .promptix-dir__sidebar { transform: none; }
	.pxs-hero__grid { grid-template-columns: 1fr; }
	.pxs-hero__tags { display: none; }
	.pxs-active { order: 3; flex-basis: 100%; }
}

@media (max-width: 600px) {
	.pxs-grid { grid-template-columns: 1fr; }
	.pxs-sort { flex: 1; min-width: 0; }
	.pxs-search { padding-left: 46px; }
	.pxs-search__icon { left: 15px; }
	.promptix-shop.is-list-view .pxs-card { grid-template-columns: 1fr; }
	.promptix-shop.is-list-view .pxs-card__media { min-height: 0; aspect-ratio: 16 / 9; }
}