/* Amazon-style kit selector — loaded wherever [gw_kit_selector] or
   [gw_individual_filter_pricing] appears. Self-contained: tokens are scoped
   to .gw-kit-selector (not a bare :root) so this never collides with the
   global :root blocks in style.css / checkout.css, which already disagree
   with each other on --gw-* values. Matches home-v2.css's newer palette. */

.gw-kit-selector {
	--gw-green: #358459;
	--gw-green-deep: #1e6b41;
	--gw-ink: #17301f;
	--gw-text: #3a3f3a;
	--gw-muted: #667;
	--gw-sand: #f4f2ec;
	--gw-border: #dfe3dc;
	--gw-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
		"Helvetica Neue", "Segoe UI", Roboto, Inter, Arial, sans-serif;
	font-family: var(--gw-font);
	color: var(--gw-text);
	max-width: 1100px;
	margin: 0 auto;
}

/* ---- Family tabs ---- */

.gw-kit-family-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
}

.gw-kit-family-tab {
	appearance: none;
	background: #fff;
	border: 1px solid var(--gw-border);
	border-radius: 999px;
	padding: 10px 20px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--gw-text);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.gw-kit-family-tab:hover { border-color: var(--gw-green); }
.gw-kit-family-tab.is-active {
	background: var(--gw-green);
	border-color: var(--gw-green);
	color: #fff;
}

/* ---- Panel: photo left, details right ---- */

.gw-kit-panel {
	display: grid;
	grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

/* 900px, not 640px: the photo column is a fixed 420px, so anything narrower
   than ~900px total leaves the details column too cramped for the swatch
   grid/prong toggle to read comfortably in 2 columns -- it needs to go
   straight to the full-width stacked layout well before that, not linger in
   a squeezed 2-column state at tablet-ish widths. */
@media (max-width: 900px) {
	.gw-kit-panel { grid-template-columns: 1fr; gap: 20px; }
}

.gw-kit-media-col {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.gw-kit-media {
	background: var(--gw-sand);
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gw-kit-photo {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.gw-kit-name {
	font-size: 24px;
	font-weight: 700;
	color: var(--gw-ink);
	margin: 0 0 6px;
	padding: 0;
	letter-spacing: -0.01em;
}

.gw-kit-price {
	font-size: 28px;
	font-weight: 700;
	color: var(--gw-green-deep);
	margin: 0 0 20px;
}

/* ---- Size swatches ---- */

.gw-kit-sizes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 8px;
	margin-bottom: 20px;
}

.gw-kit-size {
	appearance: none;
	background: #fff;
	border: 1px solid var(--gw-border);
	border-radius: 8px;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--gw-text);
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.gw-kit-size:hover { border-color: var(--gw-green); }
.gw-kit-size.is-selected {
	border-color: var(--gw-green);
	border-width: 2px;
	background: #eaf2ec;
	color: var(--gw-green-deep);
}

/* ---- Prong toggle ---- */

.gw-kit-prong-row { margin-bottom: 20px; }

.gw-kit-prong-toggle {
	display: inline-flex;
	border: 1px solid var(--gw-border);
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 8px;
}

.gw-kit-prong {
	appearance: none;
	background: #fff;
	border: none;
	padding: 8px 18px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--gw-text);
	cursor: pointer;
}
.gw-kit-prong + .gw-kit-prong { border-left: 1px solid var(--gw-border); }
.gw-kit-prong.is-selected { background: var(--gw-green); color: #fff; }
.gw-kit-prong:disabled { color: #b7bcb4; cursor: not-allowed; background: #f7f7f5; }

.gw-kit-prong-hint {
	display: block;
	font-size: 12px;
	color: var(--gw-muted);
	line-height: 1.4;
	max-width: 46ch;
}

/* ---- Specs ---- */

.gw-kit-specs {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0 0 22px;
	padding: 20px 24px;
	background: var(--gw-sand);
	border-radius: 10px;
}

.gw-kit-specs [hidden] { display: none !important; }

/* Beige box copy (client 9/18 format): "Covers Approximately:" label, one
   "{rooms} | {sqft}" line, then the contents list. !important on list
   spacing — a sitewide .entry-content ul rule otherwise wins (see the
   specs-box padding history in git). */
.gw-kit-cover-label {
	margin: 0 0 2px;
	padding: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--gw-muted);
}
.gw-kit-cover-line {
	margin: 0;
	padding: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--gw-ink);
}
.gw-kit-specs ul.gw-kit-includes {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.gw-kit-includes li {
	margin: 0 0 6px;
	padding: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--gw-ink);
}
.gw-kit-includes li:last-child { margin-bottom: 0; }
.gw-kit-include-note {
	display: block;
	font-size: 13px;
	font-weight: 400;
	color: var(--gw-muted);
}

.gw-kit-tier-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}
.gw-kit-tier-table th,
.gw-kit-tier-table td {
	padding: 6px 0;
	text-align: left;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.gw-kit-tier-table tr:last-child td { border-bottom: none; }

/* ---- CTA ---- */

.gw-kit-cta {
	display: inline-block;
	background: var(--gw-green);
	color: #fff !important;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	text-align: center;
	padding: 14px 28px;
	border-radius: 8px;
	transition: background 0.15s ease;
}
.gw-kit-cta:hover { background: var(--gw-green-deep); }

/* Add to Cart is a <button>, not the .gw-kit-cta <a> the base rule above was
   written for, and its own size differs from the "Order Individual Filters"
   CTA that also uses .gw-kit-cta — scoped as an addition on top of that base
   skin rather than a replacement, so that other button is unaffected. */
.gw-kit-add-to-cart {
	appearance: none;
	border: none;
	font-family: inherit;
	cursor: pointer;
	padding: 20px 80px;
	font-size: 20px;
}
.gw-kit-add-to-cart:disabled { opacity: 0.6; cursor: default; }

/* Qty picker sits beside Add to Cart (Individual Filters tab only). */
.gw-kit-cart-row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
}
.gw-kit-cart-row [hidden] { display: none !important; }
.gw-kit-qty {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var(--gw-text);
}
.gw-kit-qty-input {
	width: 80px;
	height: 100%;
	min-height: 48px;
	padding: 0 10px;
	font-size: 18px;
	border: 1px solid var(--gw-border);
	border-radius: 8px;
}

.gw-kit-add-confirm {
	margin: 12px 0 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--gw-green-deep);
}
.gw-kit-add-confirm a { color: inherit; text-decoration: underline; }

.gw-kit-details-link {
	display: block;
	margin-top: 12px;
	font-size: 18px;
	font-weight: 600;
	color: var(--gw-muted);
	text-decoration: underline;
}
.gw-kit-details-link:hover { color: var(--gw-text); }

/* ---- Ask-us chatbot card ---- */

/* Mobile only: JS moves .gw-kit-ask-card to right after .gw-kit-details-link
   (see kit-selector.js). This sibling selector only matches that
   arrangement — on desktop the ask card follows .gw-kit-media instead, so
   this doesn't add unwanted extra space to the gap .gw-kit-media-col already
   provides there. */
.gw-kit-details-link + .gw-kit-ask-card {
	margin-top: 28px;
}

.gw-kit-ask-card {
	/* Lives directly under the photo now (Amazon's "Ask Alexa" sits under the
	   image gallery, not below the whole two-column layout) — spacing comes
	   from .gw-kit-media-col's gap, not its own margin. Vertical layout: this
	   column is only ~420px wide, too narrow for the old side-by-side row. */
	padding: 18px 20px;
	border: 1px solid var(--gw-border);
	border-radius: 10px;
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.gw-kit-ask-copy h4 {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 4px;
	padding: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--gw-ink);
}

.gw-kit-ask-icon {
	flex: none;
	width: 30px;
	height: 30px;
	margin-top: -6px;
	color: var(--gw-green-deep);
}
.gw-kit-ask-icon svg { width: 100%; height: 100%; display: block; }
.gw-kit-ask-copy p {
	margin: 0;
	padding: 0;
	font-size: 13px;
	color: var(--gw-muted);
}

.gw-kit-ask-btn {
	appearance: none;
	align-self: stretch;
	text-align: center;
	background: var(--gw-sand);
	border: 1px solid var(--gw-border);
	border-radius: 999px;
	padding: 10px 22px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--gw-green-deep);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.gw-kit-ask-btn:hover { background: #eaf2ec; border-color: var(--gw-green); }

/* ---- Individual filters tier table ---- */

.gw-kit-filter-pricing {
	max-width: 480px;
	margin: 0 auto;
	font-family: var(--gw-font);
}
.gw-kit-filter-pricing table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
}
.gw-kit-filter-pricing th,
.gw-kit-filter-pricing td {
	padding: 12px 14px;
	text-align: left;
	border-bottom: 1px solid var(--gw-border);
	font-size: 15px;
	color: var(--gw-text);
}
.gw-kit-filter-pricing th {
	font-weight: 700;
	color: var(--gw-ink);
}