/**
 * INTERLUX — catalogue pages: a category, its ranges and its products beside
 * a long column of filters.
 *
 * Markup: templates/catalog.php and template-parts/catalog/filters.php
 * (model in inc/catalog.php, behaviour in assets/js/catalog.js). Drawn in
 * the vocabulary of the menu and the reading pages: gold kickers over serif
 * titles, pale stages, fine rules and one easing curve for every movement.
 */

.ilx-catalog .ilx-site__content {
	padding-block: 0;
}

.ilx-main.ilx-cat {
	max-width: none;
	margin: 0;
	padding: 0;
	background: #fff;
}

.ilx-cat {
	--cat-ink: #171714;
	--cat-text: #3b3934;
	--cat-muted: #8a857b;
	--cat-soft: #b9b3a9;
	--cat-wine: #8d2025;
	--cat-gold: #c79d66;
	--cat-gold-dark: #9f7442;
	--cat-pale: #f5f3ed;
	--cat-stage: #ece8e0;
	--cat-line: rgba(23, 23, 20, .1);
	--cat-line-soft: rgba(23, 23, 20, .06);
	--cat-green: #3f7d57;
	--cat-ease: cubic-bezier(.22, 1, .36, 1);
	--cat-serif: Georgia, "Times New Roman", serif;
	--cat-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--cat-top: 104px; /* where the filter column sticks: under the header (set by catalog.js) */
	color: var(--cat-text);
	font-family: var(--cat-sans);
	letter-spacing: 0;
}

.ilx-cat *,
.ilx-cat *::before,
.ilx-cat *::after {
	box-sizing: border-box;
}

/* The base layer spaces running-text lists; these lists are laid out by their own gaps. */
.ilx-cat li + li {
	margin-top: 0;
}

/*
 * The base layer dresses every button and label as a form control (dark
 * fill, capitals, a hover that turns the fill bronze, a margin under each
 * label). The catalogue's controls are drawn below; this takes the base
 * layer's look off them first. :where() keeps it weaker than every rule of
 * this file.
 */
:where(.ilx-cat) button {
	border-radius: 0;
	background-color: transparent;
	color: inherit;
	letter-spacing: 0;
	text-transform: none;
}

/* On hover the base layer turns the fill bronze; only that is taken off here
   on phones and tablets. (Resetting the corners too, at hover's weight,
   squared every rounded button once touched — a tap leaves :hover behind.)
   Desktop keeps its reset as it was. */
:where(.ilx-cat) button:hover {
	background-color: transparent;
	color: inherit;
}

@media (min-width: 1024px) {
	:where(.ilx-cat) button:hover {
		border-radius: 0;
		letter-spacing: 0;
		text-transform: none;
	}
}

:where(.ilx-cat) label {
	margin: 0;
	font-weight: inherit;
}

/* Focus rings are for the keyboard: after a click or a tap (and when the
   script moves focus, as the sort list and the sheet do) Safari would ring
   the control. Same rule as the header's (base.css). */
html[data-ilx-input="pointer"] .ilx-cat :focus-visible {
	outline: none;
}

html[data-ilx-input="pointer"] .ilx-cat .ilx-check input:focus-visible + .ilx-check__box,
html[data-ilx-input="pointer"] .ilx-cat .ilx-switch input:focus-visible + .ilx-switch__track {
	box-shadow: none;
}

.ilx-cat__wrap {
	width: min(1400px, calc(100% - 64px));
	margin: 0 auto;
}

.ilx-cat__kicker {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	color: var(--cat-gold-dark);
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .2em;
	line-height: 1.3;
	text-transform: uppercase;
}

.ilx-cat__kicker::before {
	content: "";
	flex: none;
	width: 18px;
	height: 1px;
	background: var(--cat-gold);
}

/* =========================================================================
 * Title and ranges
 * ====================================================================== */

.ilx-cat-hero {
	position: relative;
	padding: 36px 0 44px;
	overflow: hidden;
	background:
		radial-gradient(55% 90% at 100% 0%, rgba(199, 157, 102, .13), transparent 62%),
		var(--cat-pale);
}

.ilx-cat-hero .ilx-breadcrumbs {
	margin: 0 0 44px;
}

.ilx-cat-hero .ilx-breadcrumbs li {
	font-size: 12px;
	letter-spacing: .02em;
	text-transform: none;
}

.ilx-cat-hero .ilx-breadcrumbs li + li::before {
	color: rgba(23, 23, 20, .25);
}

.ilx-cat-hero .ilx-breadcrumbs a {
	color: var(--cat-muted);
}

.ilx-cat-hero .ilx-breadcrumbs a:hover {
	color: var(--cat-wine);
}

.ilx-cat-hero .ilx-breadcrumbs li:last-child {
	color: var(--cat-ink);
}

.ilx-cat-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	align-items: end;
	gap: 64px;
}

.ilx-cat-hero__copy .ilx-cat__kicker,
.ilx-cat-hero__title,
.ilx-cat-hero__lead,
.ilx-cat-hero__meta {
	animation: ilxCatUp .9s var(--cat-ease) both;
}

.ilx-cat-hero__title {
	margin: 0;
	color: var(--cat-ink);
	font-family: var(--cat-serif);
	font-size: clamp(42px, 5.4vw, 80px);
	font-weight: 400;
	letter-spacing: -.022em;
	line-height: 1.02;
	text-wrap: balance;
	animation-delay: .05s;
}

.ilx-cat-hero__side {
	padding-bottom: 6px;
}

.ilx-cat-hero__lead {
	max-width: 54ch;
	margin: 0 0 20px;
	color: var(--cat-text);
	font-size: 16px;
	line-height: 1.7;
	animation-delay: .12s;
}

.ilx-cat-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0;
	color: var(--cat-muted);
	font-size: 13px;
	animation-delay: .18s;
}

.ilx-cat-hero__meta i {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--cat-gold);
}

.ilx-cat-hero__meta a {
	color: var(--cat-ink);
	font-weight: 600;
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size .45s var(--cat-ease), color .3s ease;
}

.ilx-cat-hero__meta a:hover {
	color: var(--cat-wine);
	background-size: 100% 1px;
}

/* The ranges: a photograph, a name and a count, as the menu shows them. */
.ilx-cat-rail {
	margin-top: 40px;
}

.ilx-cat-rail__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ilx-cat-rail__list > li {
	animation: ilxCatUp .8s var(--cat-ease) both;
	animation-delay: calc(.2s + var(--i, 0) * .05s);
}

.ilx-cat-rail__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 5px 22px 5px 5px;
	border: 1px solid rgba(23, 23, 20, .07);
	border-radius: 16px;
	background: rgba(255, 255, 255, .78);
	color: var(--cat-ink);
	text-decoration: none;
	transition: transform .5s var(--cat-ease), box-shadow .5s var(--cat-ease), background .35s ease, border-color .35s ease;
}

/* A small upright stage with the whole door standing in it. The stage's one
   row is its own height (a grid row sized "auto" would grow to the photo's
   and let the door overflow, showing only its top). */
.ilx-cat-rail__thumb {
	display: grid;
	grid-template: 100% / 100%;
	place-items: center;
	flex: none;
	width: 42px;
	height: 54px;
	overflow: hidden;
	border-radius: 12px;
	background: linear-gradient(180deg, #f1ede6, #e6e0d6);
	box-shadow: inset 0 0 0 1px rgba(23, 23, 20, .04);
}

.ilx-cat-rail__thumb img {
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	max-width: 100%;
	max-height: 100%;
	padding: 6px 4px 5px;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform .7s var(--cat-ease);
}

.ilx-cat-rail__door {
	width: 20px;
	height: 26px;
	color: var(--cat-gold-dark);
	opacity: .7;
}

.ilx-cat-rail__text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.ilx-cat-rail__name {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.25;
	white-space: nowrap;
}

.ilx-cat-rail__count {
	color: var(--cat-muted);
	font-size: 11.5px;
	line-height: 1.3;
	transition: color .35s ease;
}

.ilx-cat-rail__item:hover {
	border-color: rgba(199, 157, 102, .45);
	background: #fff;
	box-shadow: 0 16px 34px rgba(28, 24, 18, .09);
	transform: translateY(-2px);
}

.ilx-cat-rail__item:hover .ilx-cat-rail__thumb img {
	transform: scale(1.08);
}

.ilx-cat-rail__item.is-current {
	border-color: var(--cat-ink);
	background: var(--cat-ink);
	color: #fff;
}

.ilx-cat-rail__item.is-current .ilx-cat-rail__thumb {
	background: #f1ede6;
}

.ilx-cat-rail__item.is-current .ilx-cat-rail__count {
	color: rgba(255, 255, 255, .62);
}

/* =========================================================================
 * Layout: the filter column and the grid
 * ====================================================================== */

.ilx-cat__layout {
	display: grid;
	grid-template-columns: 292px minmax(0, 1fr);
	align-items: start;
	gap: 56px;
	padding: 48px 0 104px;
}

/* ---------- the filter column ---------- */

.ilx-cat-side {
	position: sticky;
	top: var(--cat-top);
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - var(--cat-top) - 20px);
	animation: ilxCatUp .9s .15s var(--cat-ease) both;
}

.ilx-cat-side__sheet {
	display: flex;
	flex-direction: column;
	min-height: 0;
	max-height: 100%;
}

.ilx-cat-side__scrim,
.ilx-cat-side__close,
.ilx-cat-side__foot {
	display: none;
}

.ilx-cat-side__head {
	display: flex;
	flex: none;
	align-items: baseline;
	gap: 12px;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--cat-ink);
}

.ilx-cat-side__title {
	flex: 1;
	margin: 0;
	color: var(--cat-ink);
	font-family: var(--cat-serif);
	font-size: 26px;
	font-weight: 400;
	letter-spacing: -.01em;
	line-height: 1.1;
}

.ilx-cat-side__reset {
	color: var(--cat-wine);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-decoration: none;
	text-transform: uppercase;
	animation: ilxCatFade .4s ease both;
}

.ilx-cat-side__reset:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.ilx-cat-side__reset[hidden] {
	display: none;
}

.ilx-cat-side__form {
	min-height: 0;
	margin: 0 -12px 0 0;
	padding: 0 12px 0 0;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(23, 23, 20, .18) transparent;
	-webkit-mask-image: linear-gradient(#000 calc(100% - 44px), transparent);
	mask-image: linear-gradient(#000 calc(100% - 44px), transparent);
}

.ilx-cat-side__form.is-end {
	-webkit-mask-image: none;
	mask-image: none;
}

.ilx-cat-side__form::-webkit-scrollbar {
	width: 4px;
}

.ilx-cat-side__form::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background: rgba(23, 23, 20, .16);
}

.ilx-cat-side__apply {
	width: 100%;
	height: 48px;
	margin: 24px 0 8px;
	border: 0;
	border-radius: 999px;
	background: var(--cat-ink);
	color: #fff;
	font: 700 12px/1 var(--cat-sans);
	letter-spacing: .14em;
	text-transform: uppercase;
	cursor: pointer;
}

.ilx-cat-side__apply:hover {
	background: #000;
	color: #fff;
}

/* ---------- a group ---------- */

.ilx-facet {
	border-bottom: 1px solid var(--cat-line);
}

.ilx-facet__heading {
	margin: 0;
	font: inherit;
}

.ilx-facet__head,
.ilx-facet__head:hover {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	width: 100%;
	padding: 20px 0;
	border: 0;
	background: none;
	color: var(--cat-ink);
	font: 700 11.5px/1.2 var(--cat-sans);
	letter-spacing: .16em;
	text-align: left;
	text-transform: uppercase;
	cursor: pointer;
}

.ilx-facet__label {
	flex: 1;
}

.ilx-facet__chev {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	margin-right: -4px;
	border-radius: 50%;
	color: var(--cat-muted);
	transition: background .3s ease, color .3s ease;
}

.ilx-facet__chev svg {
	width: 16px;
	height: 16px;
	transform: rotate(180deg);
	transition: transform .55s var(--cat-ease);
}

.ilx-facet:not(.is-open) .ilx-facet__chev svg {
	transform: none;
}

.ilx-facet__head:hover .ilx-facet__chev {
	background: var(--cat-pale);
	color: var(--cat-ink);
}

.ilx-facet__body {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows .55s var(--cat-ease);
}

.ilx-facet:not(.is-open) .ilx-facet__body {
	grid-template-rows: 0fr;
}

.ilx-facet__inner {
	min-height: 0;
	overflow: hidden;
	transition: opacity .4s ease;
}

.ilx-facet__inner::after {
	content: "";
	display: block;
	height: 22px;
}

.ilx-facet:not(.is-open) .ilx-facet__inner {
	opacity: 0;
}

.ilx-cat-side__form > .ilx-facet {
	animation: ilxCatUp .8s var(--cat-ease) both;
}

.ilx-cat-side__form > .ilx-facet:nth-of-type(2) { animation-delay: .22s; }
.ilx-cat-side__form > .ilx-facet:nth-of-type(3) { animation-delay: .27s; }
.ilx-cat-side__form > .ilx-facet:nth-of-type(4) { animation-delay: .32s; }
.ilx-cat-side__form > .ilx-facet:nth-of-type(n + 5) { animation-delay: .37s; }

/* ---------- ranges ----------
   No fills and no guide lines: rows of type with a gold dot on the range on
   show (as the sort list marks its choice), counts standing in one column,
   and a small round control that opens a range's own ranges, which then
   come in one after another. */

.ilx-tree,
.ilx-tree__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ilx-tree__list {
	padding-left: 18px;
}

.ilx-tree__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 28px;
	align-items: center;
	gap: 4px;
}

.ilx-tree__link {
	display: grid;
	grid-template-columns: 10px minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
	min-width: 0;
	padding: 8px 0;
	color: var(--cat-text);
	font-size: 14.5px;
	line-height: 1.3;
	text-decoration: none;
}

.ilx-tree__list .ilx-tree__list .ilx-tree__link {
	font-size: 14px;
	color: #6b665d;
}

.ilx-tree__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cat-gold);
	opacity: 0;
	transform: scale(0);
	transition: transform .5s var(--cat-ease), opacity .3s ease;
}

.ilx-tree__name {
	min-width: 0;
	transition: color .35s ease, transform .5s var(--cat-ease);
}

.ilx-tree__count,
.ilx-tree__soon {
	justify-self: end;
	color: var(--cat-muted);
	font-size: 11.5px;
	font-variant-numeric: tabular-nums;
	transition: color .35s ease, opacity .35s ease;
}

.ilx-tree__soon {
	color: var(--cat-gold-dark);
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ilx-tree__link:hover .ilx-tree__name {
	color: var(--cat-ink);
	transform: translateX(3px);
}

.ilx-tree__link:hover .ilx-tree__dot {
	opacity: .45;
	transform: scale(.65);
}

.ilx-tree__item.is-current > .ilx-tree__row > .ilx-tree__link .ilx-tree__name {
	color: var(--cat-wine);
	font-weight: 600;
	transform: none;
}

.ilx-tree__item.is-current > .ilx-tree__row > .ilx-tree__link .ilx-tree__dot {
	opacity: 1;
	transform: none;
}

.ilx-tree__item.is-current > .ilx-tree__row > .ilx-tree__link .ilx-tree__count {
	color: var(--cat-wine);
}

/* Nothing there with the filters chosen: the count steps back, the name stays. */
.ilx-tree__item.is-empty > .ilx-tree__row > .ilx-tree__link .ilx-tree__count {
	opacity: .45;
}

.ilx-tree__toggle,
.ilx-tree__toggle:hover {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background .35s ease, color .35s ease;
}

.ilx-tree__toggle {
	background: none;
	color: var(--cat-muted);
}

.ilx-tree__toggle:hover,
.ilx-tree__item.is-open > .ilx-tree__row > .ilx-tree__toggle {
	background: var(--cat-pale);
	color: var(--cat-ink);
}

.ilx-tree__toggle svg {
	width: 14px;
	height: 14px;
	transform: rotate(-90deg);
	transition: transform .55s var(--cat-ease);
}

.ilx-tree__item.is-open > .ilx-tree__row > .ilx-tree__toggle svg {
	transform: none;
}

.ilx-tree__kids {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .55s var(--cat-ease);
}

.ilx-tree__kids > .ilx-tree__list {
	min-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: opacity .3s ease;
}

.ilx-tree__item.is-open > .ilx-tree__kids {
	grid-template-rows: 1fr;
}

.ilx-tree__item.is-open > .ilx-tree__kids > .ilx-tree__list {
	opacity: 1;
	transition: opacity .2s ease;
}

/* The ranges of a branch come in one after another as it opens. */
.ilx-tree__item.is-open > .ilx-tree__kids > .ilx-tree__list > .ilx-tree__item {
	animation: ilxTreeIn .55s var(--cat-ease) both;
	animation-delay: calc(.06s + var(--k, 0) * 35ms);
}

/* …and again each time the "Game" group itself is opened (a second name,
   so the entrance plays anew: an animation already run does not restart). */
.ilx-facet.is-open .ilx-tree__item.is-open > .ilx-tree__kids > .ilx-tree__list > .ilx-tree__item {
	animation-name: ilxTreeInAgain;
}

@keyframes ilxTreeIn {
	from { opacity: 0; transform: translateX(-8px); }
	to { opacity: 1; transform: none; }
}

@keyframes ilxTreeInAgain {
	from { opacity: 0; transform: translateX(-8px); }
	to { opacity: 1; transform: none; }
}

/* ---------- price ---------- */

.ilx-price {
	--thumb: 20px;
	padding-top: 2px;
}

.ilx-price__hist {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 46px;
	padding: 0 calc(var(--thumb) / 2);
}

.ilx-price__hist i {
	flex: 1;
	height: calc(var(--h, 0) * 100%);
	border-radius: 2px 2px 0 0;
	background: #e7e2d8;
	transition: height .6s var(--cat-ease), background .35s ease;
}

.ilx-price__hist i.is-in {
	background: linear-gradient(#dcc098, var(--cat-gold));
}

.ilx-price__track {
	position: relative;
	height: 30px;
	margin-top: -1px;
}

.ilx-price__rail {
	position: absolute;
	top: 50%;
	right: calc(var(--thumb) / 2);
	left: calc(var(--thumb) / 2);
	height: 2px;
	border-radius: 2px;
	background: #e7e2d8;
	transform: translateY(-50%);
}

.ilx-price__fill {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--lo, 0) * 100%);
	right: calc((1 - var(--hi, 1)) * 100%);
	border-radius: 2px;
	background: var(--cat-ink);
}

.ilx-price__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 30px;
	margin: 0;
	padding: 0;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

.ilx-price__range:focus {
	border: 0;
	outline: none;
	box-shadow: none; /* the base layer rings every focused input; here the thumb shows focus */
}

.ilx-price__range::-webkit-slider-runnable-track {
	height: 30px;
	background: transparent;
}

.ilx-price__range::-moz-range-track {
	height: 30px;
	background: transparent;
}

.ilx-price__range::-webkit-slider-thumb {
	width: var(--thumb);
	height: var(--thumb);
	margin-top: calc((30px - var(--thumb)) / 2);
	border: 1.5px solid var(--cat-ink);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 4px 12px rgba(23, 23, 20, .16);
	cursor: grab;
	pointer-events: auto;
	transition: transform .35s var(--cat-ease), box-shadow .35s ease;
	-webkit-appearance: none;
	appearance: none;
}

.ilx-price__range::-moz-range-thumb {
	width: var(--thumb);
	height: var(--thumb);
	border: 1.5px solid var(--cat-ink);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 4px 12px rgba(23, 23, 20, .16);
	cursor: grab;
	pointer-events: auto;
	transition: transform .35s var(--cat-ease), box-shadow .35s ease;
}

.ilx-price__range:hover::-webkit-slider-thumb {
	transform: scale(1.12);
}

.ilx-price__range:hover::-moz-range-thumb {
	transform: scale(1.12);
}

.ilx-price__range:active::-webkit-slider-thumb,
.ilx-price__range:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 6px rgba(199, 157, 102, .28), 0 6px 16px rgba(23, 23, 20, .2);
	cursor: grabbing;
	transform: scale(1.18);
}

.ilx-price__range:active::-moz-range-thumb,
.ilx-price__range:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 6px rgba(199, 157, 102, .28), 0 6px 16px rgba(23, 23, 20, .2);
	cursor: grabbing;
	transform: scale(1.18);
}

.ilx-price__fields {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr);
	align-items: end;
	gap: 8px;
	margin-top: 12px;
}

.ilx-price__caption {
	display: block;
	margin: 0 0 6px 2px;
	color: var(--cat-muted);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.ilx-price__box {
	display: flex;
	align-items: baseline;
	gap: 6px;
	padding: 10px 12px;
	border: 1px solid var(--cat-line);
	border-radius: 12px;
	background: #fff;
	transition: border-color .3s ease, box-shadow .3s ease;
}

.ilx-price__box:focus-within {
	border-color: var(--cat-ink);
	box-shadow: 0 0 0 4px rgba(199, 157, 102, .18);
}

.ilx-price__field {
	display: block;
}

.ilx-price__box input:focus {
	border: 0;
	box-shadow: none;
}

.ilx-price__box input {
	width: 100%;
	min-width: 0;
	padding: 0;
	border: 0;
	outline: none;
	background: none;
	color: var(--cat-ink);
	font: 600 15px/1.2 var(--cat-sans);
	font-variant-numeric: tabular-nums;
}

.ilx-price__box em {
	color: var(--cat-muted);
	font-size: 12px;
	font-style: normal;
}

.ilx-price__dash {
	height: 1px;
	margin-bottom: 21px;
	background: var(--cat-soft);
}

.ilx-price__note {
	margin: 14px 0 0;
	color: var(--cat-muted);
	font-size: 12px;
	line-height: 1.55;
}

.ilx-price__note[hidden] {
	display: none;
}

/* ---------- boxes, dots and the switch ---------- */

.ilx-checks {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ilx-check {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
	color: var(--cat-text);
	font-size: 14.5px;
	line-height: 1.3;
	cursor: pointer;
	transition: opacity .3s ease;
}

.ilx-check input,
.ilx-switch input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.ilx-check__box {
	display: grid;
	place-items: center;
	flex: none;
	width: 19px;
	height: 19px;
	border: 1.5px solid #cfc8bd;
	border-radius: 6px;
	background: #fff;
	color: #fff;
	transition: background .3s ease, border-color .3s ease, transform .35s var(--cat-ease);
}

.ilx-check__box svg {
	width: 13px;
	height: 13px;
}

.ilx-check__box path {
	stroke-dasharray: 14;
	stroke-dashoffset: 14;
	transition: stroke-dashoffset .35s var(--cat-ease) .05s;
}

.ilx-check:hover .ilx-check__box {
	border-color: var(--cat-ink);
}

.ilx-check input:checked + .ilx-check__box {
	border-color: var(--cat-ink);
	background: var(--cat-ink);
	transform: scale(1.04);
}

.ilx-check input:checked + .ilx-check__box path {
	stroke-dashoffset: 0;
}

.ilx-check input:focus-visible + .ilx-check__box,
.ilx-switch input:focus-visible + .ilx-switch__track {
	box-shadow: 0 0 0 4px rgba(199, 157, 102, .35);
}

.ilx-check__dot {
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--cat-soft);
}

.ilx-check__dot.is-in {
	background: var(--cat-green);
	box-shadow: 0 0 0 3px rgba(63, 125, 87, .14);
}

.ilx-check__dot.is-order {
	background: var(--cat-gold);
	box-shadow: 0 0 0 3px rgba(199, 157, 102, .18);
}

.ilx-check__label {
	flex: 1;
	min-width: 0;
}

.ilx-check__count,
.ilx-switch__count {
	flex: none;
	color: var(--cat-muted);
	font-size: 11.5px;
	font-variant-numeric: tabular-nums;
}

.ilx-check.is-empty,
.ilx-switch.is-empty {
	opacity: .42;
}

.ilx-check.is-off {
	cursor: default;
}

.ilx-switch {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 4px 0;
	color: var(--cat-text);
	font-size: 14.5px;
	line-height: 1.35;
	cursor: pointer;
	transition: opacity .3s ease;
}

.ilx-switch__track {
	position: relative;
	flex: none;
	width: 40px;
	height: 24px;
	border-radius: 999px;
	background: #e3ded4;
	transition: background .4s ease, box-shadow .3s ease;
}

.ilx-switch__knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 6px rgba(23, 23, 20, .22);
	transition: transform .5s var(--cat-ease);
}

.ilx-switch input:checked + .ilx-switch__track {
	background: var(--cat-wine);
}

.ilx-switch input:checked + .ilx-switch__track .ilx-switch__knob {
	transform: translateX(16px);
}

.ilx-switch__label {
	flex: 1;
}

/* ---------- filters that come later ---------- */

.ilx-facet-soon {
	position: relative;
	margin: 30px 0 4px;
	padding: 18px 18px 16px;
	overflow: hidden;
	border: 1px solid rgba(199, 157, 102, .3);
	border-radius: 16px;
	background: linear-gradient(135deg, #f8f4ec, #f2ece0);
}

.ilx-facet-soon::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%);
	transform: translateX(-100%);
	animation: ilxCatSheen 5.5s 1.2s ease-in-out infinite;
	pointer-events: none;
}

.ilx-facet-soon__kicker {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
	color: var(--cat-gold-dark);
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.ilx-facet-soon__kicker::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cat-gold);
	box-shadow: 0 0 0 3px rgba(199, 157, 102, .2);
}

.ilx-facet-soon__text {
	margin: 0;
	color: var(--cat-text);
	font-size: 12.5px;
	line-height: 1.55;
}

.ilx-facet.is-soon .ilx-facet__label {
	color: var(--cat-muted);
}

.ilx-facet__soon {
	padding: 4px 8px;
	border-radius: 999px;
	background: rgba(199, 157, 102, .14);
	color: var(--cat-gold-dark);
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .12em;
}

.ilx-facet.is-soon .ilx-facet__inner > * {
	opacity: .55;
	pointer-events: none;
	user-select: none;
}

.ilx-swatches {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px 6px;
	margin: 0;
	padding: 2px 0 0;
	list-style: none;
}

.ilx-swatches li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	text-align: center;
}

.ilx-swatch {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--sw);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .09), 0 1px 3px rgba(0, 0, 0, .08);
}

/* Metal: a sheen across the face, lighter at the top. */
.ilx-swatch.is-metal {
	background:
		linear-gradient(160deg, rgba(255, 255, 255, .75) 0%, rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, .12) 62%, rgba(255, 255, 255, .28) 100%),
		var(--sw);
}

.ilx-swatch.is-wood {
	background:
		repeating-linear-gradient(97deg, rgba(0, 0, 0, .08) 0 1px, transparent 1px 6px),
		repeating-linear-gradient(93deg, rgba(255, 255, 255, .1) 0 2px, transparent 2px 9px),
		var(--sw);
}

.ilx-swatch__name {
	color: var(--cat-muted);
	font-size: 10.5px;
	line-height: 1.25;
}

.ilx-chipset {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ilx-chipset__chip {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 14px;
	border: 1px solid var(--cat-line);
	border-radius: 999px;
	color: var(--cat-text);
	font-size: 13px;
}

.ilx-openings {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ilx-openings__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 14px 8px 12px;
	border: 1px solid var(--cat-line);
	border-radius: 14px;
	color: var(--cat-text);
	font-size: 13px;
}

.ilx-openings__tile svg {
	width: 34px;
	height: 40px;
	color: var(--cat-ink);
}

/* =========================================================================
 * Results
 * ====================================================================== */

.ilx-cat-results {
	min-width: 0;
}

/* Above the grid, so the sort list opens over the products. */
.ilx-cat-bar {
	position: relative;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 0 0 18px;
	border-bottom: 1px solid var(--cat-line);
	animation: ilxCatUp .9s .2s var(--cat-ease) both;
}

.ilx-cat-bar__count {
	display: flex;
	flex: 1;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
	margin: 0;
}

.ilx-cat-bar__count strong {
	color: var(--cat-ink);
	font-family: var(--cat-serif);
	font-size: 30px;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.ilx-cat-bar__count span {
	color: var(--cat-muted);
	font-size: 13px;
}

.ilx-cat-bar__filters {
	display: none;
	align-items: center;
	gap: 8px;
	height: 42px;
	padding: 0 16px 0 14px;
	border: 1px solid var(--cat-ink);
	border-radius: 999px;
	background: var(--cat-ink);
	color: #fff;
	font: 600 13px/1 var(--cat-sans);
	cursor: pointer;
}

.ilx-cat-bar__filters:hover {
	border-color: var(--cat-ink);
	background: #000;
	color: #fff;
}

.ilx-cat-bar__filters svg {
	width: 18px;
	height: 18px;
}

.ilx-cat-bar__badge {
	display: grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--cat-gold);
	color: var(--cat-ink);
	font-size: 11px;
	font-weight: 800;
}

.ilx-cat-bar__badge[hidden] {
	display: none;
}

/* ---------- sort ---------- */

.ilx-cat-sort {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
}

.ilx-cat-sort__label {
	color: var(--cat-muted);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.ilx-cat-sort__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 42px;
	padding: 0 14px 0 18px;
	border: 1px solid var(--cat-line);
	border-radius: 999px;
	background: #fff;
	color: var(--cat-ink);
	font: 600 13.5px/1 var(--cat-sans);
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: border-color .3s ease, box-shadow .3s ease;
}

.ilx-cat-sort__button svg {
	width: 16px;
	height: 16px;
	transition: transform .5s var(--cat-ease);
}

.ilx-cat-sort__button:hover,
.ilx-cat-sort.is-open .ilx-cat-sort__button {
	border-color: var(--cat-ink);
	background: #fff;
	color: var(--cat-ink);
}

.ilx-cat-sort.is-open .ilx-cat-sort__button svg {
	transform: rotate(180deg);
}

.ilx-cat-sort__list {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 30;
	min-width: 230px;
	margin: 0;
	padding: 8px;
	border: 1px solid var(--cat-line-soft);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 30px 70px rgba(28, 24, 18, .16);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px) scale(.98);
	transform-origin: top right;
	transition: opacity .3s ease, transform .45s var(--cat-ease), visibility 0s .45s;
}

.ilx-cat-sort.is-open .ilx-cat-sort__list {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .3s ease, transform .45s var(--cat-ease), visibility 0s;
}

.ilx-cat-sort__list:focus {
	outline: none;
}

.ilx-cat-sort__list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 14px;
	border-radius: 11px;
	color: var(--cat-text);
	font-size: 14px;
	cursor: pointer;
	transition: background .25s ease, color .25s ease;
}

.ilx-cat-sort__list li a {
	color: inherit;
	text-decoration: none;
	pointer-events: none;
}

.ilx-cat-sort__list li::after {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cat-gold);
	transform: scale(0);
	transition: transform .4s var(--cat-ease);
}

.ilx-cat-sort__list li:hover,
.ilx-cat-sort__list li.is-active {
	background: var(--cat-pale);
	color: var(--cat-ink);
}

.ilx-cat-sort__list li[aria-selected="true"] {
	color: var(--cat-wine);
	font-weight: 600;
}

.ilx-cat-sort__list li[aria-selected="true"]::after {
	transform: none;
}

/* ---------- active filters ---------- */

.ilx-cat-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding-top: 16px;
}

.ilx-cat-chips:empty {
	padding-top: 0;
}

.ilx-cat-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 6px 0 14px;
	border: 1px solid rgba(23, 23, 20, .07);
	border-radius: 999px;
	background: var(--cat-pale);
	color: var(--cat-ink);
	font: 500 12.5px/1 var(--cat-sans);
	animation: ilxCatChip .45s var(--cat-ease) both;
}

.ilx-cat-chip button {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--cat-muted);
	cursor: pointer;
	transition: background .25s ease, color .25s ease, transform .35s var(--cat-ease);
}

.ilx-cat-chip button svg {
	width: 12px;
	height: 12px;
}

.ilx-cat-chip button:hover {
	background: var(--cat-ink);
	color: #fff;
	transform: rotate(90deg);
}

.ilx-cat-chips__clear {
	margin-left: 6px;
	padding: 6px 2px;
	border: 0;
	background: none;
	color: var(--cat-wine);
	font: 700 11px/1 var(--cat-sans);
	letter-spacing: .14em;
	text-transform: uppercase;
	cursor: pointer;
	animation: ilxCatChip .45s var(--cat-ease) both;
}

.ilx-cat-chips__clear:hover {
	background: none;
	color: var(--cat-wine);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ---------- the grid ---------- */

.ilx-cat-grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 52px 28px;
	padding-top: 34px;
}

/* ---------- a product ---------- */

.ilx-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* The products the page arrives with rise in, one after another. Products
   added later (a filter, "Încarcă încă") are animated by catalog.js, and
   those below the screen wait until they are scrolled to. */
.ilx-card {
	animation: ilxCatUp .9s var(--cat-ease) both;
	animation-delay: calc(.28s + var(--i, 0) * 55ms);
}

.ilx-card.is-new {
	animation: none;
	transition: opacity .6s var(--cat-ease), transform .8s var(--cat-ease);
	transition-delay: calc(var(--d, 0) * 50ms);
}

.ilx-card.is-new.is-waiting {
	opacity: 0;
	transform: translateY(24px);
}

.ilx-card__stage {
	position: relative;
	display: grid;
	grid-template: 100% / 100%;
	place-items: center;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 22px;
	background: var(--cat-stage);
	text-decoration: none;
	isolation: isolate;
	transition: transform .7s var(--cat-ease), box-shadow .7s var(--cat-ease);
}

.ilx-card__stage--t1 { background: #ebe6db; }
.ilx-card__stage--t2 { background: #e3e7e3; }
.ilx-card__stage--t3 { background: #e7e2df; }
.ilx-card__stage--t4 { background: #e2dfd8; }
.ilx-card__stage--t5 { background: #ebe6dd; }
.ilx-card__stage--t6 { background: #e1e1de; }

/* A soft light from above, so the stage reads as a surface, not a fill. */
.ilx-card__stage::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(90% 60% at 50% 0%, rgba(255, 255, 255, .55), transparent 70%);
}

.ilx-card__photo {
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	max-width: 100%;
	max-height: 100%;
	padding: 10% 8%;
	object-fit: contain;
	object-position: center;
	mix-blend-mode: multiply;
	transition: scale 1.1s var(--cat-ease), opacity .7s ease;
}

/* Upright photographs: the door is framed on itself, not on the white border
   its file may carry (measured when the page is built). */
.ilx-card__photo.is-tall {
	padding: 9% 0;
	transform: translateY(var(--ink-shift, 0)) scale(var(--ink-scale, 1));
}

.ilx-card.is-made .ilx-card__photo:not(.is-loaded) {
	opacity: 0;
}

.ilx-card__flag {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	padding: 6px 10px;
	border-radius: 999px;
	background: var(--cat-wine);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1;
}

.ilx-card__peek {
	position: absolute;
	bottom: 16px;
	left: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px 10px 18px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .88);
	box-shadow: 0 12px 30px rgba(28, 24, 18, .14);
	color: var(--cat-ink);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	opacity: 0;
	transform: translate(-50%, 14px);
	transition: opacity .4s ease, transform .6s var(--cat-ease);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.ilx-card__peek svg {
	width: 15px;
	height: 15px;
	transition: transform .5s var(--cat-ease);
}

.ilx-card__body {
	padding: 18px 4px 0;
}

.ilx-card__line {
	margin: 0 0 7px;
	overflow: hidden;
	color: var(--cat-gold-dark);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .16em;
	line-height: 1.3;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

.ilx-card__name {
	margin: 0;
	color: var(--cat-ink);
	font-family: var(--cat-serif);
	font-size: 19px;
	font-weight: 400;
	letter-spacing: -.005em;
	line-height: 1.25;
}

.ilx-card__name a {
	color: inherit;
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size .55s var(--cat-ease), color .3s ease;
}

.ilx-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 12px;
	margin-top: 12px;
}

.ilx-card__price {
	margin: 0;
	color: var(--cat-ink);
	font-size: 14.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1.3;
}

.ilx-card__price del {
	margin-right: 6px;
	color: var(--cat-muted);
	font-size: 12.5px;
	font-weight: 400;
}

.ilx-card__price ins {
	color: var(--cat-wine);
	text-decoration: none;
}

.ilx-card__price.is-ask {
	color: var(--cat-muted);
	font-size: 13px;
	font-weight: 500;
}

.ilx-card__stock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--cat-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .02em;
	white-space: nowrap;
}

.ilx-card__stock::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cat-soft);
}

.ilx-card__stock.is-in::before {
	background: var(--cat-green);
}

.ilx-card__stock.is-order::before {
	background: var(--cat-gold);
}

@media (hover: hover) {
	.ilx-card:hover .ilx-card__stage {
		box-shadow: 0 34px 60px -34px rgba(28, 24, 18, .45);
		transform: translateY(-4px);
	}

	.ilx-card:hover .ilx-card__photo {
		scale: 1.045;
	}

	.ilx-card:hover .ilx-card__peek {
		opacity: 1;
		transform: translate(-50%, 0);
	}

	.ilx-card:hover .ilx-card__name a {
		background-size: 100% 1px;
	}

	.ilx-card__peek:hover svg {
		transform: translateX(3px);
	}

	/* A pointer sweeping across the grid does not set every card moving. */
	.ilx-card:hover .ilx-card__stage,
	.ilx-card:hover .ilx-card__photo,
	.ilx-card:hover .ilx-card__peek {
		transition-delay: .06s;
	}
}

.ilx-card__name a:focus-visible,
.ilx-card__stage:focus-visible {
	outline: 2px solid var(--cat-gold);
	outline-offset: 4px;
}

/* ---------- how a family's photographs sit ----------
   Set on each card (is-stage-…) — a group page mixes families — and on the
   page for its row of ranges (ilx-cat--stage-…); a range bubble on a group
   page carries its family's class too. */

/* 'photo' (entry doors): the photographs carry their own even grey backdrop
   (#f0f0f0) and the door runs the photograph's full height. Cropping them to
   the stage cut the door's top and bottom; instead the whole photograph
   stands in a stage of that same grey, with air above and below, so the
   photograph's edges cannot be seen. */
.ilx-card.is-stage-photo .ilx-card__stage,
.ilx-cat--stage-photo .ilx-cat-rail__thumb,
.ilx-cat-rail__item.is-stage-photo .ilx-cat-rail__thumb {
	background: #f0f0f0;
}

.ilx-card.is-stage-photo .ilx-card__stage::before {
	display: none;
}

.ilx-card.is-stage-photo .ilx-card__photo,
.ilx-card.is-stage-photo .ilx-card__photo.is-tall {
	padding: 7% 0;
	object-fit: contain;
	mix-blend-mode: normal;
	transform: none;
}

.ilx-cat--stage-photo .ilx-cat-rail__thumb img,
.ilx-cat-rail__item.is-stage-photo .ilx-cat-rail__thumb img {
	padding: 4px 0;
	mix-blend-mode: normal;
}

/* 'wide' (handles): a lower stage for wide pictures on the family's own page.
   Their backdrop is almost white (246–252), which showed as a pale box on
   the tinted stage: a touch of brightness takes it to pure white, which the
   stage then absorbs. The photographs are small (200 px wide), so they are
   not blown up past the size at which they stay sharp. */
.ilx-cat--stage-wide .ilx-card__stage {
	aspect-ratio: 4 / 3;
}

.ilx-card.is-stage-wide .ilx-card__photo {
	max-width: min(100%, 260px);
	padding: 6% 4%;
	filter: brightness(1.045);
}

/* Hardware ranges: a wider stage of the same height as every other range's,
   so the row stays aligned and a handle lies whole in it, level, with air
   around it. */
.ilx-cat--stage-wide .ilx-cat-rail__thumb,
.ilx-cat-rail__item.is-stage-wide .ilx-cat-rail__thumb {
	width: 76px;
}

.ilx-cat--stage-wide .ilx-cat-rail__thumb img,
.ilx-cat-rail__item.is-stage-wide .ilx-cat-rail__thumb img {
	padding: 8px 7px;
	filter: brightness(1.045);
}

.ilx-cat--stage-wide .ilx-cat-rail__door,
.ilx-cat-rail__item.is-stage-wide .ilx-cat-rail__door {
	width: 26px;
	height: 20px;
}

/* A family of wide photographs (garage doors): a wide stage for its cards. */
.ilx-cat--landscape .ilx-card__stage {
	aspect-ratio: 4 / 3;
}

/* 'framed' (joinery): real photographs, set whole on the stage as a print on
   a mount — rounded, with a soft shadow that follows the picture (a window
   cut out on transparency casts the window's own shape). */
.ilx-card.is-stage-framed .ilx-card__photo,
.ilx-card.is-stage-framed .ilx-card__photo.is-tall {
	width: auto;
	height: auto;
	max-width: 84%;
	max-height: 84%;
	padding: 0;
	border-radius: 10px;
	object-fit: contain;
	mix-blend-mode: normal;
	transform: none;
	filter: drop-shadow(0 16px 22px rgba(28, 24, 18, .22));
}

.ilx-cat--stage-framed .ilx-cat-rail__thumb img,
.ilx-cat-rail__item.is-stage-framed .ilx-cat-rail__thumb img {
	padding: 5px;
	border-radius: 6px;
	mix-blend-mode: normal;
}

/* ---------- nothing found ---------- */

.ilx-cat-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 72px 20px 24px;
	text-align: center;
	animation: ilxCatUp .7s var(--cat-ease) both;
}

.ilx-cat-empty[hidden],
.ilx-cat-empty [hidden] {
	display: none;
}

.ilx-cat-empty > div {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ilx-cat-empty__mark {
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	margin-bottom: 22px;
	border-radius: 50%;
	background: var(--cat-pale);
	color: var(--cat-gold-dark);
}

.ilx-cat-empty__mark svg {
	width: 40px;
	height: 40px;
}

.ilx-cat-empty__title {
	margin: 0 0 8px;
	color: var(--cat-ink);
	font-family: var(--cat-serif);
	font-size: 24px;
	line-height: 1.25;
}

.ilx-cat-empty__text {
	margin: 0 0 24px;
	color: var(--cat-muted);
	font-size: 14px;
}

/* ---------- more ---------- */

.ilx-cat-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-top: 72px;
}

.ilx-cat-more[hidden] {
	display: none;
}

.ilx-cat-more__seen {
	margin: 0;
	color: var(--cat-muted);
	font-size: 12.5px;
	letter-spacing: .02em;
}

.ilx-cat-more__bar {
	display: block;
	width: 220px;
	height: 2px;
	overflow: hidden;
	border-radius: 2px;
	background: #ebe6dd;
}

.ilx-cat-more__bar i {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--cat-gold-dark), var(--cat-gold));
	transform: scaleX(var(--p, 0));
	transform-origin: left;
	transition: transform .9s var(--cat-ease);
}

.ilx-cat-more__button,
.ilx-cat-empty__reset {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 52px;
	margin-top: 8px;
	padding: 0 30px;
	border: 1px solid var(--cat-ink);
	border-radius: 999px;
	background: transparent;
	color: var(--cat-ink);
	font: 700 12px/1 var(--cat-sans);
	letter-spacing: .14em;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .4s ease, color .4s ease, transform .5s var(--cat-ease), box-shadow .5s var(--cat-ease);
}

.ilx-cat-more__button[hidden] {
	display: none;
}

.ilx-cat-more__button svg {
	width: 16px;
	height: 16px;
	transition: transform .5s var(--cat-ease);
}

.ilx-cat-more__button:hover,
.ilx-cat-empty__reset:hover {
	background: var(--cat-ink);
	box-shadow: 0 18px 40px rgba(23, 23, 20, .18);
	color: #fff;
	transform: translateY(-2px);
}

.ilx-cat-more__button:hover svg {
	transform: translateY(3px);
}

/* ---------- the floating "Filtre" on phones ---------- */

.ilx-cat-float {
	display: none;
}

@media (max-width: 1023px) {
	.ilx-cat-float {
		position: fixed;
		bottom: calc(18px + env(safe-area-inset-bottom));
		left: 50%;
		z-index: 90;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		height: 48px;
		padding: 0 20px 0 18px;
		border: 1px solid rgba(255, 255, 255, .14);
		border-radius: 999px;
		background: rgba(23, 23, 20, .92);
		box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
		color: #fff;
		font: 600 14px/1 var(--cat-sans);
		opacity: 0;
		pointer-events: none;
		transform: translate(-50%, 24px) scale(.96);
		transition: opacity .35s ease, transform .6s var(--cat-ease);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
	}

	.ilx-cat-float:hover {
		background: #000;
		color: #fff;
	}

	.ilx-cat-float svg {
		width: 18px;
		height: 18px;
	}

	.ilx-cat-float.is-shown {
		opacity: 1;
		pointer-events: auto;
		transform: translate(-50%, 0);
	}

	.ilx-cat.is-filtering .ilx-cat-float {
		opacity: 0;
		pointer-events: none;
	}
}

/* ---------- the "Filtre" buttons' motion (phones and tablets only) ----------
   The icon is a pair of sliders: its two knobs glide apart and settle back,
   as if just tuned, when the button arrives, when the filter sheet closes
   and each time the floating button comes up. A pale light crosses the pill
   as it arrives, a press sinks it a touch, and the count of active filters
   pops in. Desktop has no such button (the filters are the left column). */

@keyframes ilxCatTuneA {
	0%, 100% { transform: none; }
	42% { transform: translateX(-6px); }
}

@keyframes ilxCatTuneB {
	0%, 100% { transform: none; }
	42% { transform: translateX(6px); }
}

@keyframes ilxCatGleam {
	from { transform: translateX(-110%); }
	to { transform: translateX(110%); }
}

@keyframes ilxCatPop {
	0% { opacity: 0; transform: scale(.3); }
	60% { opacity: 1; transform: scale(1.14); }
	100% { opacity: 1; transform: none; }
}

@media (max-width: 1023px) {
	.ilx-cat-bar__filters {
		position: relative;
		transition: transform .6s var(--cat-ease), background-color .35s ease;
	}

	.ilx-cat-bar__filters,
	.ilx-cat-float {
		overflow: hidden;
		isolation: isolate;
		-webkit-tap-highlight-color: transparent;
	}

	/* A press: in quickly, back slowly. */
	.ilx-cat-bar__filters:active {
		transform: scale(.96);
		transition-duration: .15s;
	}

	.ilx-cat-float.is-shown:active {
		transform: translate(-50%, 0) scale(.96);
		transition-duration: .15s;
	}

	/* The knobs are filled with the pill's own colour, so the line runs
	   behind them wherever they stop. No fill-mode: once played, the
	   animation lets go and a hover can move them. */
	.ilx-cat-tune circle {
		fill: var(--cat-ink);
		transition: transform .7s var(--cat-ease), fill .35s ease;
	}

	.ilx-cat-float .ilx-cat-tune circle {
		fill: #292926;
	}

	.ilx-cat-bar__filters:hover .ilx-cat-tune circle,
	.ilx-cat-float:hover .ilx-cat-tune circle {
		fill: #000;
	}

	.ilx-cat-tune__a {
		animation: ilxCatTuneA 1.1s .6s var(--cat-ease);
	}

	.ilx-cat-tune__b {
		animation: ilxCatTuneB 1.1s .6s var(--cat-ease);
	}

	.ilx-cat-float .ilx-cat-tune circle {
		animation-delay: .25s;
	}

	/* Taking the animation away while hidden replays it on the way back:
	   the sheet closing, the floating pill coming up. */
	.ilx-cat.is-filtering .ilx-cat-tune circle,
	.ilx-cat-float:not(.is-shown) .ilx-cat-tune circle {
		animation: none;
	}

	/* The light crossing the pill, under its text. */
	.ilx-cat-bar__filters::after,
	.ilx-cat-float::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(105deg, transparent 38%, rgba(255, 238, 212, .07) 44%, rgba(255, 238, 212, .24) 50%, rgba(255, 238, 212, .07) 56%, transparent 62%);
		transform: translateX(-110%);
		pointer-events: none;
		animation: ilxCatGleam 1.4s .45s cubic-bezier(.45, 0, .2, 1);
	}

	.ilx-cat-float::after {
		animation-delay: .15s;
	}

	.ilx-cat-float:not(.is-shown)::after {
		animation: none;
	}

	.ilx-cat-bar__badge:not([hidden]) {
		animation: ilxCatPop .6s .5s var(--cat-ease) both;
	}

	.ilx-cat.is-filtering .ilx-cat-bar__badge,
	.ilx-cat-float:not(.is-shown) .ilx-cat-bar__badge {
		animation: none;
	}
}

/* With a pointer that hovers (a tablet with a trackpad): the knobs move
   apart and stay while it rests there, and the light crosses again. */
@media (max-width: 1023px) and (hover: hover) {
	.ilx-cat-bar__filters:hover .ilx-cat-tune__a,
	.ilx-cat-float:hover .ilx-cat-tune__a {
		transform: translateX(-6px);
	}

	.ilx-cat-bar__filters:hover .ilx-cat-tune__b,
	.ilx-cat-float:hover .ilx-cat-tune__b {
		transform: translateX(6px);
	}

	.ilx-cat-bar__filters:hover::after,
	.ilx-cat-float.is-shown:hover::after {
		animation: ilxCatGleam 1.1s cubic-bezier(.45, 0, .2, 1);
	}
}

/* =========================================================================
 * About the range: the category's own text, unchanged
 * ====================================================================== */

.ilx-cat-about {
	padding: 104px 0 112px;
	background: var(--cat-pale);
}

.ilx-cat-about[hidden] {
	display: none;
}

.ilx-cat-about__grid {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	align-items: start;
	gap: 80px;
}

.ilx-cat-about__head {
	position: sticky;
	top: var(--cat-top);
}

.ilx-cat-about__title {
	max-width: 18ch;
	margin: 0;
	color: var(--cat-ink);
	font-family: var(--cat-serif);
	font-size: clamp(30px, 3.2vw, 46px);
	font-weight: 400;
	letter-spacing: -.015em;
	line-height: 1.1;
	text-wrap: balance;
}

.ilx-cat-about__sub {
	max-width: 40ch;
	margin: 18px 0 0;
	color: var(--cat-muted);
	font-size: 14px;
	line-height: 1.6;
}

.ilx-cat-about__text {
	max-width: 66ch;
}

.ilx-cat-about__text p {
	margin: 0;
	color: var(--cat-text);
	font-size: 16px;
	line-height: 1.8;
}

.ilx-cat-about__text p:first-child {
	color: var(--cat-ink);
	font-family: var(--cat-serif);
	font-size: 21px;
	line-height: 1.6;
}

.ilx-cat-about__text p + p {
	margin-top: 20px;
}

/* Revealed as it comes into view (catalog.js). */
.ilx-cat-about [data-reveal] {
	transition: opacity .9s var(--cat-ease), transform 1s var(--cat-ease);
	transition-delay: calc(var(--d, 0) * 90ms);
}

.ilx-cat-about [data-reveal].is-waiting {
	opacity: 0;
	transform: translateY(20px);
}

/* A range switched in place: the title block eases over. */
.ilx-cat-hero.is-swapping .ilx-cat-hero__grid,
.ilx-cat-hero.is-swapping .ilx-cat-rail,
.ilx-cat-hero.is-swapping .ilx-breadcrumbs {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .25s ease, transform .35s var(--cat-ease);
}

/* =========================================================================
 * Motion
 * ====================================================================== */

@keyframes ilxCatUp {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}

@keyframes ilxCatFade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes ilxCatChip {
	from { opacity: 0; transform: scale(.9); }
	to { opacity: 1; transform: none; }
}

@keyframes ilxCatSheen {
	0%, 62% { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

/* =========================================================================
 * Smaller screens
 * ====================================================================== */

@media (max-width: 1280px) {
	.ilx-cat__layout {
		grid-template-columns: 264px minmax(0, 1fr);
		gap: 44px;
	}

	.ilx-cat-grid {
		gap: 44px 22px;
	}
}

/* The filter column becomes a sheet that rises from the bottom. */
@media (max-width: 1023px) {
	.ilx-cat__wrap {
		width: min(1400px, calc(100% - 40px));
	}

	.ilx-cat-hero__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}

	.ilx-cat__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		padding: 28px 0 80px;
	}

	.ilx-cat-bar__filters {
		display: inline-flex;
	}

	.ilx-cat-side {
		position: fixed;
		inset: 0;
		z-index: 420;
		max-height: none;
		visibility: hidden;
		pointer-events: none;
		animation: none;
		transition: visibility 0s .6s;
	}

	.ilx-cat.is-filtering .ilx-cat-side {
		visibility: visible;
		pointer-events: auto;
		transition: visibility 0s;
	}

	.ilx-cat-side__scrim {
		position: absolute;
		inset: 0;
		display: block;
		background: rgba(15, 14, 12, .46);
		opacity: 0;
		transition: opacity .45s ease;
	}

	.ilx-cat.is-filtering .ilx-cat-side__scrim {
		opacity: 1;
	}

	.ilx-cat-side__sheet {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: min(92vh, 100% - 40px);
		max-height: none;
		padding: 20px 20px 0;
		border-radius: 26px 26px 0 0;
		background: #fff;
		box-shadow: 0 -30px 80px rgba(0, 0, 0, .2);
		transform: translateY(104%);
		transition: transform .6s var(--cat-ease);
	}

	.ilx-cat.is-filtering .ilx-cat-side__sheet {
		transform: none;
	}

	.ilx-cat-side__sheet::before {
		content: "";
		position: absolute;
		top: 8px;
		left: 50%;
		width: 38px;
		height: 4px;
		border-radius: 4px;
		background: rgba(23, 23, 20, .14);
		transform: translateX(-50%);
	}

	.ilx-cat-side__head {
		align-items: center;
		border-bottom-color: var(--cat-line);
	}

	.ilx-cat-side__head .ilx-cat-side__reset {
		display: none;
	}

	.ilx-cat-side__close {
		display: grid;
		place-items: center;
		width: 40px;
		height: 40px;
		margin-right: -8px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--cat-pale);
		color: var(--cat-ink);
		cursor: pointer;
	}

	.ilx-cat-side__close:hover {
		background: #ebe6dc;
		color: var(--cat-ink);
	}

	.ilx-cat-side__close svg {
		width: 20px;
		height: 20px;
	}

	.ilx-cat-side__form {
		flex: 1;
		margin: 0 -20px;
		padding: 0 20px;
		overscroll-behavior: contain;
	}

	.ilx-cat-side__form > .ilx-facet {
		animation: none;
	}

	.ilx-cat-side__foot {
		display: flex;
		flex: none;
		align-items: center;
		gap: 16px;
		margin: 0 -20px;
		padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
		border-top: 1px solid var(--cat-line);
		background: #fff;
	}

	.ilx-cat-side__clear {
		color: var(--cat-ink);
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .12em;
		text-decoration: underline;
		text-transform: uppercase;
		text-underline-offset: 4px;
	}

	/* A block, not a flex box: a flex box drops the space between "Vezi" and the count. */
	.ilx-cat-side__show {
		display: block;
		flex: 1;
		height: 52px;
		padding: 0 16px;
		line-height: 52px;
		text-align: center;
		white-space: nowrap;
		border: 0;
		border-radius: 999px;
		background: var(--cat-ink);
		color: #fff;
		font: 600 14px/1 var(--cat-sans);
		cursor: pointer;
	}

	.ilx-cat-side__show:hover {
		background: #000;
		color: #fff;
	}

	.ilx-cat-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ilx-cat-about {
		padding: 72px 0 80px;
	}

	.ilx-cat-about__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.ilx-cat-about__head {
		position: static;
	}
}

@media (max-width: 760px) {
	.ilx-cat__wrap {
		width: calc(100% - 32px);
	}

	.ilx-cat-hero {
		padding: 22px 0 30px;
	}

	.ilx-cat-hero .ilx-breadcrumbs {
		margin-bottom: 26px;
	}

	.ilx-cat-hero__title {
		font-size: clamp(38px, 11vw, 52px);
	}

	.ilx-cat-hero__lead {
		font-size: 15px;
	}

	/* The ranges scroll sideways instead of wrapping into a wall. */
	.ilx-cat-rail {
		margin: 26px -16px 0;
	}

	.ilx-cat-rail__list {
		flex-wrap: nowrap;
		padding: 2px 16px 8px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		/* Snapping aligns a bubble with the scroller's edge unless told
		   otherwise; this keeps the first one off the screen's edge. */
		scroll-padding-inline: 16px;
		scrollbar-width: none;
	}

	.ilx-cat-rail__list::-webkit-scrollbar {
		display: none;
	}

	.ilx-cat-rail__list > li {
		flex: none;
		scroll-snap-align: start;
	}

	.ilx-cat-bar {
		flex-wrap: wrap;
		gap: 12px;
	}

	.ilx-cat-bar__count {
		flex-basis: 100%;
	}

	.ilx-cat-sort {
		margin-left: auto;
	}

	.ilx-cat-sort__label {
		display: none;
	}

	.ilx-cat-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 34px 12px;
		padding-top: 24px;
	}

	.ilx-card__stage {
		border-radius: 16px;
	}

	.ilx-card__flag {
		top: 10px;
		left: 10px;
		padding: 5px 8px;
		font-size: 10px;
	}

	.ilx-card__peek {
		display: none;
	}

	.ilx-card__body {
		padding: 12px 2px 0;
	}

	.ilx-card__line {
		font-size: 9px;
		letter-spacing: .12em;
	}

	.ilx-card__name {
		font-size: 16px;
	}

	.ilx-card__foot {
		flex-direction: column;
		align-items: flex-start;
		gap: 5px;
		margin-top: 8px;
	}

	.ilx-card__price {
		font-size: 13.5px;
	}

	.ilx-card__price del {
		display: block;
		margin: 0 0 1px;
		font-size: 11.5px;
	}

	.ilx-cat-more {
		margin-top: 52px;
	}

	.ilx-cat-about__text p:first-child {
		font-size: 19px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ilx-cat *,
	.ilx-cat *::before,
	.ilx-cat *::after {
		animation: none !important;
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}
}