/* RISITEX catalogue (pages/products/list.html). The live markup's utility classes come from
   rx-app.css; these are the pieces the live build never compiled (arbitrary values, Radix/Next
   behaviour the live site got from JS components) plus the page's own rxl-* components.
   Colours are design tokens only, so light and dark mode both follow rx-tokens.css. */

/* ---------- missing utilities from the live markup ---------- */
@media (min-width: 1536px) {
	.\32xl\:px-16 { padding-left: 4rem; padding-right: 4rem; }
	.\32xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.hover\:shadow-lg:hover { box-shadow: var(--shadow-popover); }

/* ---------- filter rail ---------- */
@media (min-width: 1024px) {
	.rxl-rail {
		position: sticky; top: 112px; max-height: calc(100vh - 8rem); overflow-y: auto;
		padding-right: .5rem; scrollbar-width: thin;
	}
}
.rxl-collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--motion-duration-base) var(--motion-ease-standard); }
.rxl-collapse.is-open { grid-template-rows: 1fr; }

.rxl-swatch {
	background-color: var(--surface-sunken); background-size: cover; background-position: center;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
[data-theme=dark] .rxl-swatch { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }

.rxl-num { -moz-appearance: textfield; appearance: textfield; }
.rxl-num::-webkit-inner-spin-button, .rxl-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=search]::-webkit-search-cancel-button { cursor: pointer; }

/* ---------- buttons (the live Button component, size sm) ---------- */
.rxl-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem; white-space: nowrap;
	height: 2.25rem; padding: 0 .875rem; border-radius: .5rem; border: 1px solid transparent;
	font-size: .8125rem; font-weight: 500; line-height: 1; text-decoration: none;
	transition: background-color var(--motion-duration-fast) var(--motion-ease-standard), border-color var(--motion-duration-fast) var(--motion-ease-standard);
}
.rxl-btn:active { transform: translateY(1px); }
.rxl-btn--primary { background: var(--action-primary-bg); color: var(--action-primary-text); }
.rxl-btn--primary:hover { background: var(--action-primary-bg-hover); }
.rxl-btn--secondary { background: var(--action-secondary-bg); color: var(--action-secondary-text); border-color: var(--border-strong); }
.rxl-btn--secondary:hover { background: var(--action-secondary-bg-hover); }

/* ---------- sort menu ---------- */
.rxl-menu {
	position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 13rem; margin: 0; padding: .375rem;
	list-style: none; border: 1px solid var(--border-subtle); border-radius: .75rem;
	background: var(--surface-raised); box-shadow: var(--shadow-popover);
}
.rxl-menu__item {
	display: flex; align-items: center; justify-content: space-between; gap: .75rem;
	padding: .5rem .625rem; border-radius: .5rem; font-size: .8125rem; color: var(--text-secondary); text-decoration: none;
}
.rxl-menu__item:hover { background: var(--surface-sunken); color: var(--text-primary); }
.rxl-menu__item.is-active { color: var(--text-primary); font-weight: 600; }

/* ---------- grid + tiles ---------- */
.rxl-media { aspect-ratio: 4 / 5; overflow: hidden; }
.rxl-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; color: transparent; }

.rxl-thumbs { -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.rxl-thumbs::-webkit-scrollbar { display: none; }

.rxl-heart { cursor: pointer; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .18)); color: var(--text-muted); }
.rxl-heart:hover { color: #ef4444; }
.rxl-heart.is-on { color: #ef4444; }
.rxl-heart.is-on svg { fill: currentColor; }

/* ---------- pagination ---------- */
.rxl-page {
	display: inline-grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding: 0 .625rem;
	border: 1px solid var(--border-subtle); border-radius: .5rem; background: var(--surface-raised);
	font-size: .8125rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text-secondary); text-decoration: none;
	transition: background-color var(--motion-duration-fast), border-color var(--motion-duration-fast), color var(--motion-duration-fast);
}
a.rxl-page:hover { border-color: var(--border-strong); color: var(--text-primary); }
.rxl-page.is-active { background: var(--action-primary-bg); border-color: var(--action-primary-bg); color: var(--action-primary-text); }
.rxl-page--gap { border-color: transparent; background: transparent; color: var(--text-muted); }

/* ---------- mobile filter drawer ---------- */
.rxl-scrim { position: absolute; inset: 0; background: var(--surface-overlay); }
.rxl-drawer {
	position: absolute; top: 0; bottom: 0; left: 0; display: flex; flex-direction: column;
	width: min(88vw, 360px); background: var(--surface-background); box-shadow: var(--shadow-modal);
}
.rxl-drawer--in { animation: rxl-slide-in var(--motion-duration-slow) var(--motion-ease-enter); }
.rxl-drawer--out { animation: rxl-slide-in var(--motion-duration-base) var(--motion-ease-exit) reverse; }
@keyframes rxl-slide-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }