/* Penco Configurator — frontend */

.penco-configurator {
	margin: 1.25em 0;
	padding: 1.1em 1.2em;
	border: 1px solid #d9d9d9;
	border-radius: 6px;
	background: #fafafa;
	color: #1e1e1e;
}

/* Product page: the wizard's own add-to-cart button (in the summary step)
 * replaces WooCommerce's native quantity input + submit button, which are
 * rendered as later siblings in the same form.cart by
 * woocommerce_before_add_to_cart_button. */
.penco-configurator ~ .quantity,
.penco-configurator ~ button.single_add_to_cart_button {
	display: none !important;
}

.penco-configurator-title {
	margin: 0 0 0.9em;
	font-size: 1.15em;
}

.penco-field {
	margin-bottom: 0.85em;
}

.penco-field label {
	display: block;
	font-size: 0.85em;
	font-weight: 600;
	margin-bottom: 0.25em;
}

.penco-field select,
.penco-field input[type="text"],
.penco-field input[type="number"] {
	width: 100%;
	max-width: 420px;
	padding: 0.45em 0.6em;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
}

.penco-field input[type="number"] {
	max-width: 120px;
}

.penco-field select:disabled,
.penco-field input:disabled {
	background: #f1f1f1;
	color: #999;
}

.penco-part-dims {
	margin-top: 0.35em;
	font-size: 0.85em;
	color: #666;
}


/* ---- Wizard ---- */
.penco-wizard { margin: 18px 0; }

/* Persistent two-column shell: step content on the left, a sticky side
 * panel (dimension diagram, color photo, running summary) on the right.
 * .penco-wizard-side is toggled by refreshWizardSide() — collapses to
 * nothing on steps with no side content yet (entry/series/parts). */
.penco-wizard-main { display: flex; gap: 28px; align-items: flex-start; }
.penco-wizard-primary { flex: 1 1 auto; min-width: 0; }
.penco-wizard-side { flex: 0 0 340px; position: sticky; top: 20px; }
.penco-wizard-side[hidden] { display: none; }

/* Price/nav/Add-to-cart pinned to the bottom of the viewport while the
 * shopper scrolls a long step (long card grids, Patriot pre-configured
 * detail cards, etc.) — otherwise it scrolls out of view and the
 * "Add to cart" button requires scrolling back up to find. Sticky (not
 * fixed) so it only engages while the wizard itself is still in view. */
.penco-actions-bar {
	position: sticky;
	bottom: 0;
	background: #fff;
	padding: 10px 0 4px;
	margin-top: 8px;
	box-shadow: 0 -8px 16px -8px rgba(0, 0, 0, 0.12);
	z-index: 5;
}

/* Fade+slide crossfade between wizard steps, toggled by transitionStep()
 * around each body.innerHTML swap. Base rule governs the ~200ms enter
 * (class removed, settling to opacity:1/transform:none); the
 * .penco-step-leaving override's own shorter transition-duration governs
 * the ~150ms exit (class just added, animating out before the swap).
 *
 * The base rule deliberately has NO `transform` of its own (not even the
 * identity `translateY(0)`) — Chromium closes native <select>/<input
 * type=date> popups immediately on open (unless the mouse is held down)
 * whenever any ancestor has a non-`none` transform, even a no-op one. The
 * crossfade still works: transitioning FROM translateY(8px) TO the
 * computed default (none) animates identically. */
.penco-step-body {
	opacity: 1;
	transition: opacity 200ms ease, transform 200ms ease;
}
.penco-step-body.penco-step-leaving {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 150ms ease, transform 150ms ease;
}

/* Question heading above each step's cards, one level down from the
 * widget's own title. Lives as the first child of .penco-step-body (see
 * prependStepHeading()), so it fades/slides in and out with the rest of
 * the step content for free — no separate transition rule needed. */
.penco-step-heading {
	margin: 0 0 0.75em;
	font-size: 1.05em;
	font-weight: 700;
}
.penco-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 16px; }
.penco-steps li { font-size: 12px; color: #8a8a8a; background: #f2f2f2; border-radius: 999px; padding: 4px 12px; }
.penco-steps li.current { background: var(--bg-dark, #1e1e1e); color: #fff; }
.penco-steps li.done { background: #e2efe2; color: #2c6e2c; }
.penco-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.penco-grid-options { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.penco-grid-series { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.penco-grid-panels-gate { grid-template-columns: repeat(2, 1fr); max-width: 500px; }
.penco-card { border: 2px solid #d9d9d9; border-radius: 10px; background: #fff; padding: 14px 10px; text-align: center; cursor: pointer; font: inherit; color: inherit; transition: border-color .15s, box-shadow .15s; }
.penco-card:hover { border-color: var(--yellow, #f0c419); }
.penco-card.selected { border-color: var(--bg-dark, #1e1e1e); box-shadow: 0 0 0 2px var(--yellow, #f0c419); }
.penco-card-label { display: block; font-weight: 700; margin-top: 8px; }
.penco-card-blurb { display: block; font-weight: 400; font-size: 12px; line-height: 1.4; color: #777; margin-top: 6px; text-align: left; }
.penco-card-chip { display: inline-block; margin-top: 6px; font-size: 11px; background: #f2f2f2; border-radius: 999px; padding: 2px 8px; color: #555; }
.penco-card-option { font-weight: 600; }
/* Series step: hover/focus preview panel for the full use-case bullet
 * list (see stepSeries() in penco-configurator.js) — separate from the
 * short inline .penco-card-blurb shown on every card. */
.penco-series-detail { border: 2px solid #e5e5e5; border-radius: 10px; padding: 14px 18px; margin-bottom: 16px; }
.penco-series-detail-title { font-weight: 700; margin: 0 0 6px; }
.penco-series-detail ul { margin: 0; padding-left: 18px; }
.penco-series-detail li { font-size: 13px; line-height: 1.5; color: #444; }
.penco-series-detail-note { font-size: 13px; line-height: 1.5; color: #444; margin: 10px 0 0; }
.penco-series-detail-note + .penco-series-detail-note { margin-top: 8px; }
.penco-svg { width: 92px; height: auto; display: block; margin: 0 auto; }
.penco-svg-body { fill: #fafafa; stroke: #b9b9b9; stroke-width: 3; }
.penco-svg-tier { stroke: #cfcfcf; stroke-width: 2; }
.penco-svg-dim { stroke: #888; stroke-width: 2; }
.penco-svg-label { font-size: 12px; fill: #555; }
.penco-svg-lock { fill: #d8a200; stroke: #b98a00; stroke-width: 1; }
.penco-svg-handle { fill: #b9b9b9; }
.penco-group { margin-bottom: 18px; }
.penco-group-label { font-weight: 700; margin: 0 0 8px; }
.penco-fixed { margin-bottom: 18px; }
.penco-fixed-label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #777; margin: 0 0 6px; }
.penco-chip { display: inline-block; background: #f2f2f2; border-radius: 999px; padding: 4px 12px; margin: 0 6px 6px 0; font-size: 13px; }
.penco-summary { border: 2px solid #e5e5e5; border-radius: 10px; padding: 6px 16px; margin-bottom: 16px; }
.penco-summary-row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px dashed #eee; }
.penco-summary-row:last-child { border-bottom: 0; }
.penco-summary-k { color: #777; }
.penco-summary-v { font-weight: 700; text-align: right; }
.penco-summary-sub { display: inline-block; font-weight: 400; font-size: 12px; color: #888; margin-top: 2px; }
.penco-loading, .penco-error { color: #777; font-style: italic; }
.penco-hint-text { color: #777; font-size: 13px; margin: 0 0 12px; }
.penco-nav { display: flex; gap: 10px; margin: 8px 0 12px; }
.penco-nav button { border: 1px solid #ccc; background: #fff; border-radius: 8px; padding: 8px 18px; cursor: pointer; font: inherit; font-weight: 600; }
.penco-nav .penco-next { background: var(--bg-dark, #1e1e1e); color: #fff; border-color: var(--bg-dark, #1e1e1e); }
/* flex-wrap lets .penco-parts-color-field's flex-basis:100% (see below)
 * drop cleanly to its own line — without wrap, a nowrap row can't
 * satisfy a 100%-basis child alongside the price/note, so flexbox
 * squeezes price+note down to their minimum width instead. */
.penco-result { min-height: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; }
.penco-price { font-size: 26px; font-weight: 800; color: #1e73be; }
.penco-hint { color: #888; font-size: 13px; }
/* "Ships fully assembled" reassurance line — shown next to the price in
 * .penco-result whenever a price is actually visible (assembled-only
 * pricing is the only option this storefront offers), hidden otherwise.
 * CSS-only toggle so no JS changes are needed at any of showPrice()'s
 * several call sites (catalog wizard + Quick Ship). */
.penco-assembled-note { display: none; font-size: 13px; color: #4a8f4a; }
.penco-price:not([hidden]) ~ .penco-assembled-note { display: inline; }
.penco-add-to-cart {
	display: block;
	margin-top: 14px;
	padding: 12px 28px;
	font-size: 15px;
	font-weight: 700;
	background: #1a6dd4;
	color: #fff;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
}
.penco-add-to-cart:disabled,
.penco-add-to-cart.disabled {
	background: #c7c7c7;
	cursor: not-allowed;
}
.penco-add-error {
	display: block;
	color: #b32d2e;
	font-size: 13px;
	margin-top: 8px;
}
.penco-add-error[hidden] { display: none; }

.penco-diagram { margin-bottom: 16px; text-align: center; }
.penco-diagram-img { max-width: 240px; height: auto; border: 1px solid #e2e2e2; border-radius: 10px; padding: 8px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); }

/* Reference photo inside an option card. */
.penco-card-img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	border-radius: 6px;
	display: block;
	margin-bottom: 6px;
	background: #fafafa;
}
/* Entry-step photos (real hallway/product shots, not transparent PNGs) fill
 * their square frame rather than letterboxing like the reference PNGs. */
.penco-card-img-entry {
	object-fit: cover;
}

/* Rendered by summaryStep() as a sibling right before .penco-add-to-cart,
 * not inside .penco-summary — mirrors the price/hint row above it and the
 * button below it, no longer a separator between summary rows. */
.penco-summary-qty {
	max-width: 240px;
	margin-top: 10px;
}

/* Persistent side panel: dimension diagram, running summary, color photo —
 * see .penco-wizard-side / refreshWizardSide() above. */
.penco-wizard-side .penco-diagram-img {
	max-width: 340px;
}
.penco-running-summary {
	border: 2px solid #e5e5e5;
	border-radius: 10px;
	padding: 6px 16px;
	margin-bottom: 16px;
	text-align: left;
}
.penco-running-summary[hidden] { display: none; }
.penco-summary-photo {
	/*max-width: 220px;*/
	width: 100%;
	height: auto;
	margin: 0 auto;
	display: block;
	border: 1px solid #e2e2e2;
	border-radius: 10px;
	background: #fff;
}

.penco-qs-assembled {
	max-width: 260px;
	height: auto;
	margin: 0 auto 18px;
	border: 1px solid #e2e2e2;
	border-radius: 10px;
	background: #fff;
	display: block;
}

@media (max-width: 782px) {
	.penco-wizard-main {
		flex-direction: column;
		align-items: stretch;
	}
	.penco-wizard-side {
		flex: 1 1 auto;
		width: 100%;
		position: static;
	}
}
.penco-color-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.penco-color-grid .penco-card { padding: 10px; }
.penco-color-grid img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 6px; display: block; margin-bottom: 6px; background: #fafafa; }
.penco-color-name { font-size: 12px; font-weight: 600; }

/* ---- Toolbar / Reset ---- */
.penco-toolbar { display: flex; justify-content: flex-end; margin-bottom: 8px; align-items: center; gap: 16px; flex-wrap: wrap; }
.penco-reset { border: 1px solid #ccc; background: #fff; border-radius: 8px; padding: 6px 14px; cursor: pointer; font: inherit; font-size: 13px; color: #555; }
.penco-reset:hover { border-color: #999; }

/* Catalog wizard's "know your part #?" jump-ahead box — same visual
 * language as Quick Ship's SKU quick-search field, but exact-match +
 * submit rather than live-as-you-type (see JS comment: the configs
 * table is 585k+ rows with no part_no-leading index, so a query per
 * keystroke isn't worth it for a field customers fill in from a spec
 * sheet, not browse). */
.penco-catalog .penco-toolbar { justify-content: space-between; }
.penco-part-search { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; position: relative; }
.penco-part-search-label { font-size: 13px; color: #555; white-space: nowrap; }
.penco-part-search-input { border: 1px solid #ccc; border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 13px; width: 140px; }
.penco-part-search-btn { border: 1px solid #ccc; background: #fff; border-radius: 8px; padding: 6px 14px; cursor: pointer; font: inherit; font-size: 13px; color: #333; }
.penco-part-search-btn:hover { border-color: #999; }
.penco-part-search-btn:disabled { opacity: 0.6; cursor: default; }
.penco-part-search-error[hidden] { display: none; }
.penco-part-search-error {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 5;
	margin-top: 4px;
	padding: 8px 12px;
	background: #fff;
	border: 1px solid #d9d9d9;
	border-radius: 8px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
	font-size: 12px;
	color: #a33;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.penco-part-search-pick { align-self: flex-start; border: 1px solid #ccc; background: #f9f9f9; border-radius: 6px; padding: 4px 10px; cursor: pointer; font: inherit; font-size: 12px; color: #333; }
.penco-part-search-pick:hover { border-color: #999; }

/* Quick Ship toolbar: SKU quick-search field shares the row with Reset
 * (the catalog wizard's toolbar only ever holds Reset, so this stays
 * scoped to .penco-quickship rather than widening the shared rule). */
.penco-quickship .penco-toolbar { justify-content: space-between; align-items: flex-start; gap: 16px; }
.penco-sku-quicksearch-field { flex: 1 1 auto; max-width: 320px; margin-bottom: 0; position: relative; }
.penco-sku-search-results {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 5;
	margin: 4px 0 0;
	padding: 4px 0;
	list-style: none;
	background: #fff;
	border: 1px solid #d9d9d9;
	border-radius: 8px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
	max-height: 260px;
	overflow-y: auto;
}
.penco-sku-search-results li { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; cursor: pointer; font-size: 13px; }
.penco-sku-search-results li:hover { background: #f5f5f5; }
.penco-sku-search-results li strong { font-weight: 700; }
.penco-sku-search-results li span { color: #777; font-size: 12px; }
.penco-sku-search-results li.penco-sku-search-empty { cursor: default; color: #999; }
.penco-sku-search-results li.penco-sku-search-empty:hover { background: none; }

/* Clickable breadcrumbs (visited steps) */
.penco-steps li.done { cursor: pointer; }
.penco-steps li.done:hover { background: #cfe5cf; }

/* ---- Parts & Accessories ---- */
.penco-parts-filters { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 18px; }
.penco-parts-icons { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.penco-parts-icon { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 84px; border: 2px solid #d9d9d9; border-radius: 10px; background: #fff; padding: 8px 6px; cursor: pointer; font: inherit; }
.penco-parts-icon:hover { border-color: var(--yellow, #f0c419); }
.penco-parts-icon.selected { border-color: var(--bg-dark, #1e1e1e); box-shadow: 0 0 0 2px var(--yellow, #f0c419); }
.penco-parts-icon img { width: 48px; height: 48px; object-fit: contain; }
.penco-parts-icon-label { font-size: 11px; font-weight: 600; text-align: center; line-height: 1.2; }
.penco-parts-filters .penco-field { flex: 1 1 220px; margin-bottom: 0; }
.penco-parts-grid { grid-template-columns: 1fr; gap: 8px; }
.penco-parts-grid .penco-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; padding: 12px 16px; }
.penco-parts-grid .penco-card-label { margin-top: 0; flex: 1 1 auto; }
.penco-parts-grid .penco-card-chip { margin-top: 0; }
.penco-part-price { font-weight: 700; white-space: nowrap; }
.penco-part-badge { display: inline-block; margin-top: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; border-radius: 4px; padding: 3px 7px; white-space: nowrap; }
.penco-part-badge-qs { background: #fdf0d5; color: #9a5b00; }
.penco-part-badge-customize { background: #e7f1f9; color: #1f5c8b; }
.penco-qs-order-limit { margin: 14px 0 0; padding: 10px 12px; background: #fdf0d5; border: 1px solid #e8c98a; border-radius: 6px; font-size: 0.9em; font-weight: 600; color: #9a5b00; text-align: center; }
.penco-parts-grid .penco-card.penco-card-detail {
	display: block;
	text-align: left;
}
.penco-parts-grid .penco-card.penco-card-detail .penco-card-chip { display: inline-block; margin: 2px 0 8px; }
.penco-part-width { display: block; font-size: 0.85em; color: #555; margin-bottom: 8px; }
.penco-part-features,
.penco-part-accessories { margin: 0 0 8px; font-size: 0.9em; line-height: 1.4; }
.penco-part-accessories { margin-bottom: 10px; }
.penco-card-detail .penco-part-price { display: block; }
.penco-np-form { margin-top: 18px; padding-top: 16px; border-top: 1px solid #e2e2e2; }
.penco-np-form .penco-field { max-width: 260px; }
.penco-np-dynamic { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; }
.penco-np-dynamic .penco-field { flex: 1 1 160px; margin-bottom: 0; }
/* Lives inside the sticky .penco-result actions bar (flex row with the
 * price/hint), not in the scrolling step body — see penco-configurator.js
 * ensureColorFieldEl(). flex-basis 100% forces it onto its own line below
 * the price/hint without needing a separate container. */
.penco-parts-color-field { flex: 1 0 100%; margin-top: 8px; padding-top: 10px; border-top: 1px dashed #ccc; }
.penco-parts-color-field .penco-field { max-width: 260px; margin-bottom: 0; }

/* ---- Post add-to-cart screen ---- */
.penco-post-add { text-align: center; padding: 24px 0; }
.penco-post-add-msg { font-size: 1.2em; font-weight: 700; margin: 0 0 20px; }
.penco-post-add-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.penco-btn { display: inline-block; border: 1px solid #ccc; background: #fff; border-radius: 8px; padding: 10px 20px; cursor: pointer; font: inherit; font-weight: 600; text-decoration: none; color: inherit; }
.penco-btn:hover { border-color: #999; }
.penco-btn-primary { background: var(--bg-dark, #1e1e1e); color: #fff; border-color: var(--bg-dark, #1e1e1e); }
.penco-btn-link { border-color: transparent; color: #1a6dd4; }

/* ---- Post-add "Suggested items" upsell modal ---- */
.penco-upsell-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 100000;
}
.penco-upsell-modal {
	position: relative;
	background: #fff;
	border-radius: 10px;
	padding: 28px;
	max-width: 720px;
	width: 100%;
	max-height: 85vh;
	overflow-y: auto;
}
.penco-upsell-close {
	position: absolute;
	top: 12px;
	right: 14px;
	border: none;
	background: none;
	font-size: 1.6em;
	line-height: 1;
	cursor: pointer;
	color: #666;
}
.penco-upsell-close:hover { color: #000; }
.penco-upsell-title { margin: 0 0 18px; padding-right: 28px; font-size: var(--text-l); }
.penco-upsell-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	margin-bottom: 18px;
}
.penco-upsell-card {
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	padding: 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
}
.penco-upsell-img { width: 72px; height: 72px; object-fit: contain; }
.penco-upsell-name { font-weight: 600; font-size: 0.95em; }
.penco-upsell-price { font-weight: 700; min-height: 1.2em; }
.penco-upsell-fields { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.penco-upsell-fields .penco-field { margin-bottom: 0; }
.penco-upsell-fields .penco-field input { max-width: 100%; }
/* 2026-09-05: Qty + Add to Cart share one row; on the number-plate card
   Start#/End# share one row instead, with Add to Cart on its own row below
   (it stays a direct child of .penco-upsell-card, outside this row). */
.penco-upsell-field-row { display: flex; align-items: flex-end; gap: 8px; }
.penco-upsell-field-row .penco-field { flex: 1 1 0; min-width: 0; }
.penco-upsell-field-row .penco-upsell-add { flex: 1 1 auto; width: auto; }
.penco-upsell-add { width: 100%; }
.penco-upsell-add:disabled { opacity: 0.6; cursor: not-allowed; }
.penco-upsell-error { color: #b32d2e; font-size: 0.85em; }
.penco-upsell-skip { display: block; margin: 0 auto; }
.penco-upsell-viewcart { background: #FF6B35; color: #fff; border-color: #FF6B35; }
.penco-upsell-viewcart:hover { background: #e85a2a; border-color: #e85a2a; }

/* Upsell modal "Also browse" quick links (client 2026-09-02): compact chips
   that jump to the Parts & Accessories step with the type pre-filtered. */
.penco-upsell-browse { margin-top: 16px; padding-top: 12px; border-top: 1px solid #e5e7eb; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.penco-upsell-browse-label { font-size: 12px; font-weight: 600; color: #667085; }
.penco-upsell-browse-btn { border: 1px solid #1f5c8b; color: #1f5c8b; background: #fff; border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s; }
.penco-upsell-browse-btn:hover { background: #1f5c8b; color: #fff; }