/* Ventra product catalog. Defaults preserve the supplied UI and responsive structure. */
.vr-cat {
	--gold: #d0a85c;
	--gold-lt: #f0dcae;
	--gold-dim: #9a7c3f;
	--warm: #f6f2e8;
	--muted: #a8a196;
	--faint: #6b6559;
	--line: rgba(208, 168, 92, .2);
	--brushed: linear-gradient(135deg, #b99a60 0%, #e6d0a0 46%, #d0a85c 74%, #a8823c 100%);
	--metal: linear-gradient(125deg, #8a6a2f 0%, #f0dcae 34%, #d0a85c 58%, #a8823c 82%, #e3caa0 100%);
	position: relative;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	background: #000;
	color: var(--warm);
}

.vr-cat *, .vr-cat *::before, .vr-cat *::after { box-sizing: border-box; }
.vr-cat__inner { width: 100%; margin-inline: auto; }
.vr-cat__eyebrow { margin: 0 0 14px; color: var(--gold-dim); font: 500 11px/1.3 Jost, sans-serif; letter-spacing: .44em; text-align: center; text-transform: uppercase; }
.vr-cat__title { margin: 0 0 16px; color: var(--warm); font: 400 clamp(30px, 4.2vw, 52px)/1.06 Marcellus, serif; text-align: center; }
.vr-cat__title em { color: var(--gold); background: var(--metal); background-clip: text; font-style: normal; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.vr-cat__sub { max-width: 56ch; margin: 0 auto clamp(28px, 3.4vw, 42px); color: var(--muted); font: 300 clamp(14px, 1.15vw, 16.5px)/1.7 Jost, sans-serif; text-align: center; }
.vr-cat__sub > :first-child { margin-top: 0; }
.vr-cat__sub > :last-child { margin-bottom: 0; }

.vr-cat__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: clamp(28px, 3.5vw, 46px); padding-bottom: clamp(24px, 3vw, 38px); border-bottom: 1px solid var(--line); }
.vr-cat__filters, .vr-cat__sort { display: flex; align-items: center; gap: 10px; }
.vr-cat__filters { flex-wrap: wrap; }
.vr-cat__chip, .vr-cat__select { color: var(--gold); border: 1px solid rgba(208, 168, 92, .32); border-radius: 999px; font: 500 11px/1.3 Jost, sans-serif; letter-spacing: .18em; text-transform: uppercase; transition: background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease; }
.vr-cat__chip { padding: 10px 20px; background: transparent; cursor: pointer; }
.vr-cat__chip:hover { color: var(--gold-lt); border-color: rgba(208, 168, 92, .6); background: rgba(208, 168, 92, .1); }
.vr-cat__chip.is-on { color: #14130f; border-color: rgba(240, 220, 174, .6); background: var(--brushed); box-shadow: 0 8px 20px rgba(0, 0, 0, .45); }
.vr-cat__chip:focus-visible, .vr-cat__select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.vr-cat__chip:active, .vr-cat__select:active { transform: translateY(1px); }
.vr-cat__sort-l { color: var(--gold-dim); font: 500 10px/1.3 Jost, sans-serif; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; }
.vr-cat__select { appearance: none; padding: 10px 34px 10px 18px; background-color: #000; background-image: linear-gradient(45deg, transparent 50%, #d0a85c 50%), linear-gradient(135deg, #d0a85c 50%, transparent 50%); background-position: calc(100% - 19px) center, calc(100% - 13px) center; background-repeat: no-repeat; background-size: 6px 6px; cursor: pointer; }
.vr-cat__select:hover { color: var(--gold-lt); border-color: rgba(208, 168, 92, .6); background-color: rgba(208, 168, 92, .08); }
.vr-cat__select option { color: var(--warm); background: #000; }

.vr-cat__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 22px); }
.vr-cat__card { position: relative; display: flex; overflow: hidden; flex-direction: column; min-width: 0; color: inherit; border: 1px solid var(--line); border-radius: 16px; background: #000; text-decoration: none; transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease; }
.vr-cat__card:hover { border-color: rgba(208, 168, 92, .48); box-shadow: 0 18px 40px rgba(0, 0, 0, .6); transform: translateY(-3px); }
.vr-cat__card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.vr-cat__card[aria-disabled="true"] { cursor: default; }
.vr-cat__card.is-hidden { display: none; }
.vr-cat__tag { position: absolute; z-index: 3; top: 12px; left: 12px; padding: 5px 10px; color: var(--gold); border: 1px solid rgba(208, 168, 92, .34); border-radius: 999px; background: rgba(0, 0, 0, .6); font: 500 8.5px/1.3 "JetBrains Mono", monospace; letter-spacing: .16em; text-transform: uppercase; }

.vr-cat__shot { position: relative; display: flex; overflow: hidden; flex: 0 0 auto; align-items: center; justify-content: center; height: clamp(180px, 19vw, 250px); }
.vr-cat__shot::before { position: absolute; top: 50%; left: 50%; width: 106%; height: 94%; content: ""; opacity: .75; background: radial-gradient(ellipse, rgba(208, 168, 92, .24) 0%, rgba(208, 168, 92, .08) 46%, rgba(208, 168, 92, .02) 62%, transparent 76%); transform: translate(-50%, -50%); transition: opacity .3s ease; }
.vr-cat__shot::after { position: absolute; z-index: 2; bottom: 8%; left: 50%; width: 52%; height: 1px; content: ""; background: linear-gradient(90deg, transparent, rgba(208, 168, 92, .42), transparent); transform: translateX(-50%); }
.vr-cat__card:hover .vr-cat__shot::before { opacity: 1; }
.vr-cat .vr-cat__img { --s: 1; position: relative; z-index: 1; display: block; width: auto !important; max-width: 100% !important; height: 100% !important; max-height: 100% !important; object-fit: contain; filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .7)) drop-shadow(0 0 18px rgba(208, 168, 92, .18)) saturate(1.05); transform: scale(var(--s)); transition: transform .35s ease; }
.vr-cat__card:hover .vr-cat__img { transform: scale(calc(var(--s) * 1.04)); }

.vr-cat__body { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: clamp(14px, 1.8vw, 24px); }
.vr-cat__name { margin: 0 0 7px; color: var(--warm); font: 400 clamp(13.5px, 1.3vw, 18px)/1.28 Jost, sans-serif; overflow-wrap: anywhere; }
.vr-cat__spec { margin: 0 0 14px; color: var(--faint); font: 500 clamp(8.5px, .78vw, 10px)/1.6 "JetBrains Mono", monospace; letter-spacing: .1em; overflow-wrap: anywhere; text-transform: uppercase; }
.vr-cat__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.vr-cat__price { color: var(--gold-lt); font: 400 clamp(15px, 1.4vw, 20px)/1.3 Marcellus, serif; }
.vr-cat__price .amount { color: inherit; }
.vr-cat__price del { margin-right: .35em; color: var(--faint); font-size: .78em; opacity: .8; }
.vr-cat__price ins { color: inherit; text-decoration: none; }
.vr-cat__btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 18px; color: #14130f; border-radius: 999px; background: var(--brushed); box-shadow: 0 6px 16px rgba(0, 0, 0, .45); font: 500 clamp(9.5px, .85vw, 11.5px)/1.3 Jost, sans-serif; letter-spacing: .16em; text-align: center; text-transform: uppercase; white-space: nowrap; transition: filter .25s ease, transform .25s ease; }
.vr-cat__card:hover .vr-cat__btn { filter: brightness(1.07); }
.vr-cat__btn:active { transform: translateY(1px); }
.vr-cat__btn-icon { display: inline-flex; flex: 0 0 auto; }
.vr-cat__btn-icon svg { width: 1em; height: 1em; }
.vr-cat__empty { display: none; grid-column: 1 / -1; margin: 0; padding: clamp(40px, 6vw, 70px) 20px; color: var(--muted); border: 1px dashed rgba(208, 168, 92, .28); border-radius: 16px; font: 300 15px/1.6 Jost, sans-serif; text-align: center; }
.vr-cat__empty.is-on { display: block; }
.vr-cat__pagination { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: clamp(28px, 3.5vw, 46px); }
.vr-cat__page { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 8px 13px; color: var(--gold); border: 1px solid rgba(208, 168, 92, .32); border-radius: 999px; background: transparent; font: 500 11px/1 Jost, sans-serif; letter-spacing: .08em; text-decoration: none; transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease; }
.vr-cat__page:hover { color: var(--gold-lt); border-color: rgba(208, 168, 92, .6); background: rgba(208, 168, 92, .1); }
.vr-cat__page.current { color: #14130f; border-color: rgba(240, 220, 174, .6); background: var(--brushed); box-shadow: 0 8px 20px rgba(0, 0, 0, .45); }
.vr-cat__page:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.vr-cat__page:active { transform: translateY(1px); }

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

@media (max-width: 600px) {
	.vr-cat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.vr-cat__shot { height: 152px; }
	.vr-cat__body { padding: 13px 13px 15px; }
	.vr-cat__name { font-size: 13px; }
	.vr-cat__spec { margin-bottom: 12px; font-size: 8px; letter-spacing: .06em; }
	.vr-cat__foot { flex-direction: column; align-items: stretch; gap: 9px; }
	.vr-cat__price { font-size: 16px; }
	.vr-cat__btn { padding: 10px 12px; font-size: 9.5px; }
	.vr-cat__tag { top: 9px; left: 9px; padding: 4px 8px; font-size: 7.5px; }
	.vr-cat__bar { flex-direction: column; align-items: stretch; gap: 14px; }
	.vr-cat__filters { justify-content: center; gap: 7px; }
	.vr-cat__chip { padding: 8px 14px; font-size: 9.5px; letter-spacing: .14em; }
	.vr-cat__sort { justify-content: center; }
	.vr-cat__select { padding: 9px 32px 9px 16px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.vr-cat *, .vr-cat *::before, .vr-cat *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}