/*
 * Seamless Hold Discovery - low-result search states.
 *
 * Loaded only when SHD_Results_State reports 0, 1 or 2 products for an active
 * Discovery search. Every selector is gated behind body.shd-rstate, so no
 * ordinary Shop, archive or 3+ result view can match a single rule here.
 *
 * The three Elementor ids below are Archive 370's existing filter row, filter
 * rail and results column. They are referenced rather than rebuilt so the
 * template stays byte-identical:
 *   .elementor-element-9a0001b   filter row (flex, direction: row)
 *   .elementor-element-9a0001c   filter rail (264px, border-right)
 *   .elementor-element-9a0001d   the "Filters" heading widget
 *   .elementor-element-9a0001f   results column
 *
 * Specificity note: the Elementor kit and Archive 370's own page CSS style
 * links and containers at 0,1,1 and 0,2,0. Rules below that must beat those
 * are anchored on body.shd-rstate plus their own class.
 */

.shd-rstate-block {
	--shd-primary: #A24522;
	--shd-secondary: #4E341B;
	--shd-text: #1C1106;
	--shd-accent: #846447;
	--shd-ivory: #FBF8F3;
	--shd-cream: #F3EDE5;
	--shd-border: #E5DCD2;
	font-family: Manrope, sans-serif;
	color: var(--shd-text);
}

.shd-rstate-block *,
.shd-rstate-block *::before,
.shd-rstate-block *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ *
 * SPECIFICITY
 * Archive 370's generated page CSS addresses these containers as
 *   .elementor-370 .elementor-element.elementor-element-XXXXXXX        0,3,0
 *   .elementor-370 .elementor-element.elementor-element-XXXXXXX .child 0,4,0
 * so every Elementor-facing rule below repeats that chain behind the
 * state class. That clears the template's own values without !important
 * and without disturbing any other archive state.
 *
 * Boxed Elementor containers carry their flex layout on > .e-con-inner,
 * not on the container element, so direction changes target the inner.
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ *
 * 0 results - nothing is left to filter, so the rail stands down and the
 * branded empty state takes the full content width. The active-filter
 * chips and Clear all are kept: they are the shopper's way back. They are
 * promoted out of the rail into the compact strip Archive 370 already
 * ships for its mobile drawer.
 * ------------------------------------------------------------------ */

body.shd-rstate--0 .elementor-370 .elementor-element.elementor-element-9a0001b > .e-con-inner {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

body.shd-rstate--0 .elementor-370 .elementor-element.elementor-element-9a0001c {
	width: 100%;
	max-width: none;
	flex: 0 0 auto;
	border-right: 0;
	padding-right: 0;
	padding-bottom: 0;
}

body.shd-rstate--0 .elementor-370 .elementor-element.elementor-element-9a0001d {
	display: none;
}

body.shd-rstate--0 .elementor-370 .elementor-element.elementor-element-9a0001f {
	width: 100%;
	max-width: none;
	flex: 1 1 auto;
}

body.shd-rstate--0 .elementor-370 .elementor-element.elementor-element-9a0001e .sh-filter-panel {
	display: none;
}

body.shd-rstate--0 .elementor-370 .elementor-element.elementor-element-9a0001e .sh-active-compact {
	display: block;
	margin: 0;
}

body.shd-rstate--0 .elementor-370 .elementor-element.elementor-element-9a0001e .sh-active-compact .shd-active {
	margin: 0;
	padding: 0 0 16px;
	border-bottom: 1px solid #E5DCD2;
}

/* The branded no-results card reads as a deliberate centred composition. */
body.shd-rstate--0 .shd-noresults {
	max-width: 640px;
	margin: 0 auto;
	padding: 48px 32px 44px;
}

/* ------------------------------------------------------------------ *
 * 1-2 results - the rail stays useful and stays where it is, but its
 * disclosures start closed (server side) and it no longer stretches to
 * the height of the row.
 * ------------------------------------------------------------------ */

body.shd-rstate--1 .elementor-370 .elementor-element.elementor-element-9a0001c,
body.shd-rstate--2 .elementor-370 .elementor-element.elementor-element-9a0001c {
	align-self: flex-start;
}
/* ------------------------------------------------------------------ *
 * Guidance placed inside the product grid
 *
 * ul.products is a four-column grid on desktop, three at 1024 and two at
 * 767. The guidance cell takes the columns the small result set leaves
 * empty, so one card no longer sits beside a void. Below 1024 it drops to
 * a full row of its own, which puts the product first and the guidance
 * beneath it on a phone.
 * ------------------------------------------------------------------ */

.shd-rstate-cell {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.shd-rstate-cell::before,
.shd-rstate-cell::marker {
	content: none;
}

.shd-rstate-cell .shd-rstate-block--few {
	margin: 0;
	height: 100%;
}

@media (min-width: 1025px) {
	body.shd-rstate--1 .shd-rstate-cell {
		grid-column: span 3;
	}

	body.shd-rstate--2 .shd-rstate-cell {
		grid-column: span 2;
	}
}

@media (max-width: 1024px) {
	.shd-rstate-cell {
		grid-column: 1 / -1;
	}
}

/* ------------------------------------------------------------------ *
 * Guidance block
 * ------------------------------------------------------------------ */

.shd-rstate-block--few {
	display: block;
	margin: 34px 0 0;
	padding: 30px 32px 32px;
	border: 1px solid var(--shd-border);
	border-radius: 3px;
	background: var(--shd-ivory);
}

.shd-rstate-block--empty {
	display: block;
	margin: 26px auto 0;
	max-width: 780px;
	text-align: center;
}

body.shd-rstate .shd-rstate__title {
	margin: 0;
	padding: 0;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 27px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.2px;
	color: var(--shd-text);
	text-transform: none;
}

.shd-rstate__text {
	margin: 7px 0 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--shd-secondary);
}

.shd-rstate__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 20px 0 0;
	padding: 0;
}

body.shd-rstate a.shd-rstate__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 12px 22px;
	border: 1px solid var(--shd-primary);
	border-radius: 3px;
	background: var(--shd-primary);
	color: #FFFFFF;
	font-family: Manrope, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.9px;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

body.shd-rstate a.shd-rstate__btn:hover,
body.shd-rstate a.shd-rstate__btn:focus {
	background: var(--shd-secondary);
	border-color: var(--shd-secondary);
	color: #FFFFFF;
}

body.shd-rstate a.shd-rstate__btn--ghost {
	background: transparent;
	color: var(--shd-primary);
}

body.shd-rstate a.shd-rstate__btn--ghost:hover,
body.shd-rstate a.shd-rstate__btn--ghost:focus {
	background: var(--shd-secondary);
	border-color: var(--shd-secondary);
	color: #FFFFFF;
}

/* ------------------------------------------------------------------ *
 * Popular searches row
 * ------------------------------------------------------------------ */

.shd-rstate-block--few .shd-rstate__popular {
	margin: 24px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--shd-border);
}

.shd-rstate__label {
	margin: 0;
	padding: 0;
	font-family: Manrope, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	color: var(--shd-accent);
}

.shd-rstate__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 13px 0 0;
	padding: 0;
	list-style: none;
}

.shd-rstate-block--empty .shd-rstate__chips {
	justify-content: center;
}

.shd-rstate__chipitem {
	margin: 0;
	padding: 0;
	list-style: none;
}

.shd-rstate__chipitem::before,
.shd-rstate__chipitem::marker {
	content: none;
}

body.shd-rstate a.shd-rstate__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 0 16px;
	border: 1px solid var(--shd-border);
	border-radius: 999px;
	background: #FFFFFF;
	color: var(--shd-text);
	font-family: Manrope, sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

body.shd-rstate a.shd-rstate__chip:hover,
body.shd-rstate a.shd-rstate__chip:focus {
	border-color: var(--shd-primary);
	background: var(--shd-primary);
	color: #FFFFFF;
}

body.shd-rstate a.shd-rstate__btn:focus-visible,
body.shd-rstate a.shd-rstate__chip:focus-visible {
	outline: 2px solid var(--shd-primary);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * Tablet - Archive 370 already turns the rail into a drawer at 1024,
 * so only the block proportions need attention.
 * ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.shd-rstate-block--few {
		margin-top: 28px;
		padding: 26px 24px 28px;
	}

	body.shd-rstate .shd-rstate__title {
		font-size: 25px;
	}

	body.shd-rstate--0 .shd-noresults {
		max-width: none;
		padding: 40px 24px;
	}

	.shd-rstate-block--empty {
		max-width: none;
	}
}

/* ------------------------------------------------------------------ *
 * Phone
 * ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.shd-rstate-block--few {
		margin-top: 22px;
		padding: 22px 18px 24px;
	}

	body.shd-rstate .shd-rstate__title {
		font-size: 23px;
	}

	.shd-rstate__text {
		font-size: 13.5px;
	}

	.shd-rstate__actions {
		gap: 10px;
		margin-top: 18px;
	}

	body.shd-rstate a.shd-rstate__btn {
		flex: 1 1 100%;
		min-height: 48px;
	}

	.shd-rstate-block--few .shd-rstate__popular {
		margin-top: 20px;
		padding-top: 18px;
	}

	.shd-rstate__chips {
		gap: 8px;
	}

	body.shd-rstate a.shd-rstate__chip {
		font-size: 12.5px;
		padding: 0 14px;
	}

	body.shd-rstate--0 .shd-noresults {
		padding: 32px 18px;
	}
}