/*
 * My House Aura - the category page: refine rail, applied chips, results column.
 *
 * The rail is a real column on desktop and a full-screen sheet on phone and tablet, which is what the
 * reference storefront does. Both states are this one stylesheet; nothing is duplicated in markup.
 */

.aura-plp {
	display: grid;
	grid-template-columns: 252px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}
.aura-plp__results { min-width: 0; }

/* ------------------------------------------------------------------ the rail */

.aura-rail {
	position: sticky; top: 16px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	padding-right: 4px;
}
.aura-rail__head {
	display: flex; align-items: center;
	padding-bottom: 12px;
	border-bottom: 1px solid #e4e4e4;
}
.aura-rail__head h2 {
	margin: 0; font-size: 18px; font-weight: 700;
	color: var(--aura-navy, #12284c);
}
.aura-rail__done,
.aura-rail__open { display: none; }

.aura-rail__applied {
	display: flex; flex-wrap: wrap; gap: 6px;
	padding: 12px 0;
	border-bottom: 1px solid #e4e4e4;
}
.aura-chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 10px;
	border: 1px solid var(--aura-navy, #12284c); border-radius: 999px;
	background: #fff;
	font-size: 12px; line-height: 1.2; text-decoration: none;
	color: var(--aura-navy, #12284c);
}
.aura-chip:hover { background: #f2f5fa; }
.aura-rail__clear {
	align-self: center;
	font-size: 12px; font-weight: 700; text-decoration: underline;
	color: var(--aura-navy, #12284c);
}

.aura-facet { border-bottom: 1px solid #e4e4e4; }
.aura-facet__head {
	display: flex; align-items: center; justify-content: space-between;
	width: 100%; min-width: 0; box-sizing: border-box;
	margin: 0; padding: 14px 0;
	border: 0; border-radius: 0; background: none; cursor: pointer;
	font: inherit; font-size: 14px; font-weight: 700; text-align: left;
	color: #1d1d1d;
}
/* The theme hides ::after on every button, which is where the chevron lives. */
.aura-rail .aura-facet__head::after {
	content: "" !important;
	display: block !important;
	width: 8px; height: 8px; flex: 0 0 auto;
	margin-left: 8px;
	border-right: 2px solid #6b6b6b; border-bottom: 2px solid #6b6b6b;
	transform: rotate(45deg) translate(-2px, -2px);
}
.aura-facet.is-open .aura-facet__head::after { transform: rotate(-135deg) translate(-2px, -2px); }

.aura-facet__body { display: none; padding-bottom: 12px; }
.aura-facet.is-open .aura-facet__body { display: block; }

/* Every link state is pinned. These options are anchors, so the theme's :visited colour applied to
   the ones already clicked and the facet list came out in mixed brown and black - it read as if some
   options were disabled. :link and :visited both need saying; `color` alone does not cover them. */
.aura-opt,
.aura-opt:link,
.aura-opt:visited,
.aura-opt:hover,
.aura-opt:focus,
.aura-opt:active {
	display: flex; align-items: center; gap: 9px;
	padding: 6px 0;
	font-size: 13px; line-height: 1.3; text-decoration: none;
	color: #1d1d1d;
}
.aura-opt:visited .aura-opt__n,
.aura-opt .aura-opt__n { color: #767676; }
.aura-opt:hover .aura-opt__label { text-decoration: underline; }
.aura-opt.is-extra { display: none; }
.aura-facet.show-all .aura-opt.is-extra { display: flex; }
.aura-opt__box {
	width: 16px; height: 16px; flex: 0 0 auto;
	border: 1px solid #8a8a8a; border-radius: 2px;
	background: #fff;
	position: relative;
}
.aura-opt.is-on .aura-opt__box {
	border-color: var(--aura-navy, #12284c);
	background: var(--aura-navy, #12284c);
}
/* The tick is a rotated L rather than a glyph, so it never depends on an icon font loading. */
.aura-opt.is-on .aura-opt__box::after {
	content: ""; position: absolute;
	left: 5px; top: 1px; width: 4px; height: 9px;
	border-right: 2px solid #fff; border-bottom: 2px solid #fff;
	transform: rotate(45deg);
}
.aura-opt__label { flex: 1 1 auto; min-width: 0; }
.aura-opt__n { flex: 0 0 auto; color: #767676; font-size: 12px; }

.aura-facet__more {
	margin: 6px 0 0; padding: 0;
	border: 0; background: none; cursor: pointer;
	font: inherit; font-size: 12px; font-weight: 700; text-decoration: underline;
	color: var(--aura-navy, #12284c);
}
.aura-facet.show-all .aura-facet__more { display: none; }

.aura-plp__empty {
	padding: 48px 0; text-align: center;
}
.aura-plp__empty a { font-weight: 700; color: var(--aura-navy, #12284c); }

/* ------------------------------------------------------------------ phone and tablet */

@media (max-width: 1100px) {
	.aura-plp {
		display: block;
	}

	/* The trigger sits above the grid; the rail becomes a sheet over the page. */
	.aura-rail__open {
		display: inline-flex; align-items: center; justify-content: center;
		width: 100%; box-sizing: border-box;
		min-height: 46px; margin: 0 0 16px; padding: 12px 16px;
		border: 1px solid var(--aura-navy, #12284c); border-radius: 4px;
		background: #fff; cursor: pointer;
		font: inherit; font-size: 15px; font-weight: 700;
		color: var(--aura-navy, #12284c);
	}

	.aura-rail {
		position: fixed; inset: 0; z-index: 9998;
		max-height: none; margin: 0;
		padding: 0 16px 24px;
		background: #fff;
		overflow-y: auto;
		transform: translateY(100%);
		transition: transform .25s ease;
		visibility: hidden;
	}
	.aura-rail.is-open { transform: none; visibility: visible; }

	.aura-rail__head {
		position: sticky; top: 0; z-index: 1;
		justify-content: space-between;
		margin: 0 -16px; padding: 12px 16px;
		background: #fff;
	}
	.aura-rail__done {
		display: inline-flex; align-items: center; justify-content: center;
		min-width: 72px; min-height: 40px; padding: 8px 16px;
		border: 0; border-radius: 4px;
		background: var(--aura-navy, #12284c); cursor: pointer;
		font: inherit; font-size: 14px; font-weight: 700;
		color: #fff;
	}

	/* Touch targets, not mouse targets. */
	.aura-opt { padding: 11px 0; font-size: 15px; }
	.aura-opt__box { width: 20px; height: 20px; }
	.aura-opt.is-on .aura-opt__box::after { left: 6px; top: 2px; height: 11px; }
	.aura-facet__head { padding: 16px 0; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
	.aura-rail { transition: none; }
}