/* NOA Living — Carpet Size Selector. Scoped to .noa-cs and forms using it. */

.noa-cs {
	--noa-ink: #1f1c19;
	--noa-muted: #5e564d;
	--noa-line: #ddd4c8;
	--noa-paper: #fbf8f3;
	--noa-white: #ffffff;
	--noa-gold: #9a7b4f;
	--noa-gold-text: #6e5532;
	--noa-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	color: var(--noa-ink);
	margin: 8px 0 24px;
	clear: both;
}

/* Hide WooCommerce's own dropdowns and messages only once the selector is running. */
form.variations_form.noa-cs-form table.variations,
form.variations_form.noa-cs-form .reset_variations,
form.variations_form.noa-cs-form .woocommerce-variation-price,
form.variations_form.noa-cs-form .woocommerce-variation-availability,
form.variations_form.noa-cs-form .quantity {
	display: none !important;
}

.noa-cs button {
	font: inherit;
	color: inherit;
	letter-spacing: normal;
	text-transform: none;
	box-shadow: none;
	border-radius: 0;
	margin: 0;
}

.noa-cs__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.noa-cs__title {
	margin: 0;
	font-family: var(--noa-serif);
	font-weight: 500;
	font-size: 26px;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
}
.noa-cs__units { display: flex; border: 1px solid #cfc5b8; }
.noa-cs__units button,
.noa-cs__filter button {
	min-height: 44px;
	padding: 0 16px;
	cursor: pointer;
	font-size: 12px !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	background: transparent;
	border: 0;
}
.noa-cs__filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.noa-cs__filter button { border: 1px solid #cfc5b8; }
.noa-cs__units button.is-on,
.noa-cs__filter button.is-on { background: var(--noa-ink); color: #f6f2ec; border-color: var(--noa-ink); }

.noa-cs__intro,
.noa-cs__text {
	margin: 10px 0 18px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--noa-muted);
}
.noa-cs__text { margin: 4px 0 0; font-size: 13px; }
.noa-cs__intro strong { color: var(--noa-ink); font-weight: 500; }

.noa-cs__list { display: flex; flex-direction: column; gap: 8px; }
.noa-cs__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	width: 100%;
	min-height: 64px;
	padding: 12px 18px;
	text-align: left;
	cursor: pointer;
	background: transparent;
	border: 1px solid var(--noa-line);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.noa-cs__row:hover { border-color: #8f8478; }
.noa-cs__row.is-on { border-color: var(--noa-ink); background: var(--noa-white); }
.noa-cs__row:focus-visible,
.noa-cs__opt:focus-visible,
.noa-cs button:focus-visible { outline: 2px solid var(--noa-ink); outline-offset: 2px; }

.noa-cs__size { font-family: var(--noa-serif); font-size: 23px; line-height: 1.1; min-width: 128px; }
.noa-cs__avail { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--noa-muted); }
.noa-cs__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--noa-gold); flex: 0 0 auto; }
.noa-cs__price { font-size: 14px; white-space: nowrap; }
.noa-cs__price .woocommerce-Price-amount { color: var(--noa-ink); }

.noa-cs__panel {
	margin-top: 22px;
	padding: 22px;
	background: var(--noa-paper);
	border: 1px solid var(--noa-line);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.noa-cs__eyebrow {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--noa-gold-text);
	margin: 0 0 6px;
}
.noa-cs__opt + .noa-cs__eyebrow,
.noa-cs__text + .noa-cs__eyebrow { margin-top: 14px; }
.noa-cs__opt {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	width: 100%;
	padding: 14px 16px;
	text-align: left;
	cursor: pointer;
	background: transparent;
	border: 1px solid var(--noa-line);
}
.noa-cs__opt.is-on { border-color: var(--noa-ink); background: var(--noa-white); }
.noa-cs__opt strong { font-size: 15px; font-weight: 500; }
.noa-cs__opt span { font-size: 13px; line-height: 1.5; color: var(--noa-muted); }

.noa-cs__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}
.noa-cs__steps li {
	margin: 0;
	padding-top: 10px;
	border-top: 2px solid #cfc5b8;
	font-size: 12px;
	line-height: 1.45;
	color: var(--noa-muted);
}
.noa-cs__steps li.is-on { border-top-color: var(--noa-ink); }
.noa-cs__steps strong { display: block; font-weight: 500; color: var(--noa-ink); }

.noa-cs__note { margin: 14px 0 0; font-size: 12px; line-height: 1.6; color: var(--noa-muted); }

.noa-cs__bespoke {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 18px;
	padding: 18px 0;
	border-top: 1px solid var(--noa-line);
	border-bottom: 1px solid var(--noa-line);
}
.noa-cs__bespoke-title { font-family: var(--noa-serif); font-size: 21px; }
.noa-cs__bespoke-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--noa-ink);
	color: var(--noa-ink) !important;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none !important;
}
.noa-cs__bespoke-link:hover { background: var(--noa-ink); color: #f6f2ec !important; }

/* The bag button, restyled to match. */
form.variations_form.noa-cs-form .single_add_to_cart_button.button {
	width: 100%;
	min-height: 58px;
	margin: 6px 0 0;
	float: none;
	border: 0;
	border-radius: 0;
	background: #1f1c19 !important;
	color: #f6f2ec !important;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
form.variations_form.noa-cs-form .single_add_to_cart_button.button:hover { background: #3a342e !important; }
form.variations_form.noa-cs-form .woocommerce-variation-add-to-cart { display: block; }

.noa-cs-from {
	font-size: 0.55em;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	vertical-align: middle;
	margin-right: 4px;
}

@media (max-width: 520px) {
	.noa-cs__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.noa-cs__size { min-width: 0; width: 100%; }
	.noa-cs__panel { padding: 16px; }
}