/* Cocoa Product Photography – Pre-Shoot Questionnaire
 * Palette: roasted-cocoa ink, cacao-pod green accent, cool neutral lines.
 * Everything is scoped under .cpq-wrap so the host theme is untouched.
 */
#cpq-form.cpq-wrap {
	--cpq-ink: #2b211c;
	--cpq-muted: #6e625a;
	--cpq-line: #e2ddd8;
	--cpq-line-strong: #c9c1ba;
	--cpq-surface: #ffffff;
	--cpq-tint: #f4f6f4;
	--cpq-accent: #1e5b4b;
	--cpq-accent-hover: #164638;
	--cpq-accent-soft: #e5efeb;
	--cpq-danger: #b42318;
	--cpq-danger-soft: #fdf0ee;
	--cpq-focus: 0 0 0 3px rgba(30, 91, 75, .28);
	--cpq-font: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	max-width: 760px;
	margin: 24px auto 0;
	color: var(--cpq-ink);
	font-family: var(--cpq-font);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

#cpq-form.cpq-wrap *,
#cpq-form.cpq-wrap *::before,
#cpq-form.cpq-wrap *::after { box-sizing: border-box; }

/* Neutralise common theme overrides inside the form (zero-specificity :where keeps our own rules in charge). */
#cpq-form.cpq-wrap :where(div, p, span, strong, em, label, legend, fieldset, h2, h3, h4, ol, ul, li, figure, figcaption, small) {
	letter-spacing: normal;
	text-transform: none;
	font-family: inherit;
	float: none;
}
#cpq-form.cpq-wrap :where(span, strong, em, small) { font-size: inherit; line-height: inherit; }
#cpq-form.cpq-wrap :where(p, h2, h3, h4, ol, ul, figure) { margin: 0; }
#cpq-form.cpq-wrap :where(ol, ul) { padding: 0; }
#cpq-form.cpq-wrap :where(li)::before { content: none; }
#cpq-form.cpq-wrap :where(svg) { max-width: none; flex: none; }
#cpq-form.cpq-wrap :where(img) { border: 0; max-width: 100%; }

#cpq-form.cpq-wrap .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---------- Shell ---------- */
#cpq-form .cpq-form {
	background: var(--cpq-surface);
	border: 1px solid var(--cpq-line);
	border-radius: 16px;
	padding: 40px 44px 28px;
	box-shadow: 0 1px 2px rgba(43, 33, 28, .04), 0 12px 32px -18px rgba(43, 33, 28, .18);
}

#cpq-form .cpq-head { margin-bottom: 28px; }
#cpq-form.cpq-wrap .cpq-title {
	margin: 0 0 8px;
	font-family: var(--cpq-font);
	font-size: 28px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -.015em;
	color: var(--cpq-ink);
}
#cpq-form .cpq-intro { margin: 0; color: var(--cpq-muted); max-width: 62ch; }
#cpq-form .cpq-req { color: var(--cpq-danger); font-weight: 600; }
#cpq-form .cpq-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }

/* ---------- Progress ---------- */
#cpq-form .cpq-progress {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}
#cpq-form .cpq-progress__item {
	display: block;
	position: static;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
	border: 0;
}
#cpq-form .cpq-progress__item::before,
#cpq-form .cpq-progress__item::after { content: none; display: none; }
#cpq-form .cpq-progress__item::marker { content: ""; }
#cpq-form .cpq-progress__btn {
	all: unset;
	box-sizing: border-box;
	position: static;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
	min-width: 0;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 10px 0 0;
	border: 0;
	border-top: 3px solid var(--cpq-line);
	border-radius: 0;
	background: none;
	box-shadow: none;
	cursor: pointer;
	font: 500 14px/1.3 var(--cpq-font);
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	text-decoration: none;
	white-space: normal;
	color: var(--cpq-muted);
	transition: border-color .2s, color .2s;
}
#cpq-form .cpq-progress__btn:hover,
#cpq-form .cpq-progress__btn:focus { background: none; color: var(--cpq-ink); }
#cpq-form .cpq-progress__btn:focus-visible { outline: none; box-shadow: var(--cpq-focus); border-radius: 2px; }
#cpq-form .cpq-progress__dot {
	flex: none;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	margin: 0;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	background: var(--cpq-tint);
	color: var(--cpq-muted);
	font-variant-numeric: tabular-nums;
}
#cpq-form .cpq-progress__label {
	display: block;
	position: static;
	max-width: 100%;
	overflow-wrap: anywhere;
	hyphens: auto;
}
#cpq-form .cpq-progress__item.is-done .cpq-progress__btn { border-top-color: var(--cpq-accent); color: var(--cpq-ink); }
#cpq-form .cpq-progress__item.is-done .cpq-progress__dot { background: var(--cpq-accent-soft); color: var(--cpq-accent); }
#cpq-form .cpq-progress__item.is-current .cpq-progress__btn { border-top-color: var(--cpq-accent); color: var(--cpq-ink); font-weight: 600; }
#cpq-form .cpq-progress__item.is-current .cpq-progress__dot { background: var(--cpq-accent); color: #fff; }

/* Shown instead of the per-step labels on narrow screens. */
#cpq-form .cpq-stepname { display: none; margin: -16px 0 24px; font-size: 14px; color: var(--cpq-muted); }
#cpq-form .cpq-stepname strong { color: var(--cpq-ink); font-weight: 600; }
#cpq-form.cpq-wrap:not(.cpq-js) .cpq-stepname { display: none; }

/* ---------- Steps ---------- */
#cpq-form.cpq-js .cpq-step { display: none; }
#cpq-form.cpq-js .cpq-step.is-active { display: block; animation: cpq-in .28s ease-out; }
#cpq-form .cpq-step + .cpq-step { margin-top: 40px; }
#cpq-form.cpq-js .cpq-step + .cpq-step { margin-top: 0; }
@keyframes cpq-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

#cpq-form.cpq-wrap .cpq-step__title {
	margin: 0 0 6px;
	font-family: var(--cpq-font);
	font-size: 20px;
	line-height: 1.3;
	font-weight: 650;
	letter-spacing: -.01em;
	color: var(--cpq-ink);
}
#cpq-form .cpq-step__lead { margin: 0 0 24px; color: var(--cpq-muted); max-width: 62ch; }
#cpq-form .cpq-step:focus { outline: none; }

/* ---------- Fields ---------- */
#cpq-form .cpq-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 20px;
}
#cpq-form .cpq-field { display: flex; flex-direction: column; min-width: 0; }
#cpq-form .cpq-field--wide { grid-column: 1 / -1; }
#cpq-form .cpq-field--narrow input { max-width: 160px; }
#cpq-form .cpq-q { margin: 0 0 28px; }

#cpq-form.cpq-wrap label,
#cpq-form.cpq-wrap .cpq-label,
#cpq-form.cpq-wrap legend {
	display: block;
	margin: 0 0 6px;
	padding: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--cpq-ink);
}
#cpq-form.cpq-wrap fieldset { margin: 0 0 28px; padding: 0; border: 0; min-width: 0; }
#cpq-form.cpq-wrap legend { float: none; width: 100%; }
#cpq-form .cpq-help { margin: 6px 0 0; font-size: 14px; color: var(--cpq-muted); line-height: 1.45; }
#cpq-form .cpq-field > .cpq-help:first-of-type { order: 0; }

#cpq-form.cpq-wrap input[type="text"],
#cpq-form.cpq-wrap input[type="email"],
#cpq-form.cpq-wrap input[type="tel"],
#cpq-form.cpq-wrap input[type="number"],
#cpq-form.cpq-wrap select,
#cpq-form.cpq-wrap textarea {
	width: 100%;
	margin: 0;
	padding: 11px 14px;
	font: 400 16px/1.4 var(--cpq-font);
	color: var(--cpq-ink);
	background: var(--cpq-surface);
	border: 1px solid var(--cpq-line-strong);
	border-radius: 8px;
	box-shadow: none;
	transition: border-color .15s, box-shadow .15s;
	height: auto;
	min-height: 46px;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
}
#cpq-form.cpq-wrap textarea { resize: vertical; min-height: 84px; }
#cpq-form.cpq-wrap select {
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%236e625a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
	cursor: pointer;
}
#cpq-form.cpq-wrap ::placeholder { color: #a39890; opacity: 1; }
#cpq-form.cpq-wrap input:hover,
#cpq-form.cpq-wrap select:hover,
#cpq-form.cpq-wrap textarea:hover { border-color: #a99f97; }
#cpq-form.cpq-wrap input:focus,
#cpq-form.cpq-wrap select:focus,
#cpq-form.cpq-wrap textarea:focus {
	outline: none;
	border-color: var(--cpq-accent);
	box-shadow: var(--cpq-focus);
}
#cpq-form.cpq-wrap .is-invalid,
#cpq-form.cpq-wrap .is-invalid:hover { border-color: var(--cpq-danger); }
#cpq-form.cpq-wrap .is-invalid:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, .2); }
#cpq-form .cpq-field-error { margin: 6px 0 0; font-size: 14px; font-weight: 500; color: var(--cpq-danger); }

#cpq-form .cpq-other { margin-top: 8px !important; display: none; }
#cpq-form .cpq-other.is-shown { display: block; }
#cpq-form .cpq-reveal { display: none; margin-top: 14px; }
#cpq-form .cpq-reveal.is-shown { display: block; }
#cpq-form .cpq-reveal label { font-weight: 500; }

/* ---------- Segmented Yes / No ---------- */
#cpq-form .cpq-seg {
	display: inline-flex;
	padding: 4px;
	gap: 4px;
	background: var(--cpq-tint);
	border: 1px solid var(--cpq-line);
	border-radius: 10px;
}
#cpq-form.cpq-wrap .cpq-seg label { margin: 0; position: relative; font-weight: 500; }
#cpq-form .cpq-seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; cursor: pointer; }
#cpq-form .cpq-seg span {
	display: block;
	font-size: 15px;
	line-height: 1.4;
	min-width: 76px;
	padding: 8px 18px;
	text-align: center;
	border-radius: 7px;
	color: var(--cpq-muted);
	transition: background .15s, color .15s;
	cursor: pointer;
}
#cpq-form .cpq-seg label:hover span { color: var(--cpq-ink); }
#cpq-form .cpq-seg input:checked + span {
	background: var(--cpq-surface);
	color: var(--cpq-accent);
	font-weight: 650;
	box-shadow: 0 1px 2px rgba(43, 33, 28, .1), 0 0 0 1px var(--cpq-line);
}
#cpq-form .cpq-seg input:focus-visible + span { box-shadow: var(--cpq-focus); }

/* ---------- Product cards ---------- */
#cpq-form .cpq-products { display: flex; flex-direction: column; gap: 16px; }
#cpq-form .cpq-product {
	border: 1px solid var(--cpq-line);
	border-radius: 12px;
	background: var(--cpq-surface);
	overflow: hidden;
}
#cpq-form .cpq-product.is-new { animation: cpq-in .3s ease-out; }
#cpq-form .cpq-product__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 12px 12px 16px;
	background: var(--cpq-tint);
	border-bottom: 1px solid var(--cpq-line);
}
#cpq-form .cpq-product.is-collapsed .cpq-product__head { border-bottom-color: transparent; }
#cpq-form .cpq-product__num {
	flex: none;
	display: inline-grid;
	place-items: center;
	min-width: 26px; height: 26px;
	padding: 0 6px;
	border-radius: 7px;
	background: var(--cpq-surface);
	border: 1px solid var(--cpq-line);
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--cpq-accent);
}
#cpq-form.cpq-wrap .cpq-product__title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-family: var(--cpq-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--cpq-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#cpq-form .cpq-product__title.is-placeholder { color: var(--cpq-muted); font-weight: 500; }
#cpq-form .cpq-product__meta { flex: none; font-size: 13px; color: var(--cpq-muted); white-space: nowrap; }
#cpq-form .cpq-product__body { padding: 20px 20px 22px; }
#cpq-form .cpq-product.is-collapsed .cpq-product__body { display: none; }

#cpq-form .cpq-icon-btn {
	all: unset;
	box-sizing: border-box;
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 34px; height: 34px;
	border-radius: 8px;
	color: var(--cpq-muted);
	cursor: pointer;
	transition: background .15s, color .15s;
}
#cpq-form .cpq-icon-btn:hover { background: var(--cpq-surface); color: var(--cpq-ink); }
#cpq-form .cpq-icon-btn:focus-visible { box-shadow: var(--cpq-focus); }
#cpq-form .cpq-icon-btn--danger:hover { color: var(--cpq-danger); background: var(--cpq-danger-soft); }
#cpq-form .cpq-icon-btn[data-toggle] svg { transition: transform .2s; }
#cpq-form .cpq-icon-btn[aria-expanded="false"] svg { transform: rotate(-90deg); }
#cpq-form .cpq-products.is-single .cpq-icon-btn--danger { display: none; }

/* Dimensions + live package outline — the one signature detail. */
#cpq-form .cpq-dimsrow {
	display: grid;
	grid-template-columns: 1fr 148px;
	gap: 20px;
	align-items: end;
	padding: 16px;
	border-radius: 10px;
	background: var(--cpq-tint);
}
#cpq-form .cpq-dims { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
#cpq-form.cpq-wrap .cpq-dim { margin: 0; }
#cpq-form.cpq-wrap .cpq-dim__label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 500; color: var(--cpq-muted); }
#cpq-form .cpq-unit { position: relative; display: block; }
#cpq-form.cpq-wrap .cpq-unit input { padding-right: 38px; font-variant-numeric: tabular-nums; }
#cpq-form .cpq-unit > span {
	position: absolute; right: 12px; top: 50%;
	transform: translateY(-50%);
	font-size: 14px; color: var(--cpq-muted);
	pointer-events: none;
}
#cpq-form.cpq-wrap .cpq-unit input::-webkit-outer-spin-button,
#cpq-form.cpq-wrap .cpq-unit input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#cpq-form.cpq-wrap .cpq-unit input[type="number"] { -moz-appearance: textfield; }

#cpq-form .cpq-box { margin: 0; text-align: center; }
#cpq-form .cpq-box__svg { display: block; width: 100%; height: 96px; overflow: visible; }
#cpq-form .cpq-box__svg .f-front { fill: #fff; }
#cpq-form .cpq-box__svg .f-top { fill: var(--cpq-accent-soft); }
#cpq-form .cpq-box__svg .f-side { fill: #d4e3dd; }
#cpq-form .cpq-box__svg polygon { stroke: var(--cpq-accent); stroke-width: 1.2; stroke-linejoin: round; }
#cpq-form .cpq-box__svg .ghost { fill: none; stroke: var(--cpq-line-strong); stroke-dasharray: 3 3; }
#cpq-form .cpq-box__svg text { font: 500 9px var(--cpq-font); fill: var(--cpq-muted); }
#cpq-form .cpq-box__cap { margin-top: 6px; font-size: 12px; line-height: 1.35; color: var(--cpq-muted); }
#cpq-form .cpq-box__cap.is-warn { color: var(--cpq-danger); }

/* ---------- Uploads ---------- */
#cpq-form .cpq-upload .cpq-help { margin: 0 0 10px; }
#cpq-form.cpq-wrap .cpq-drop {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 22px 16px;
	text-align: center;
	border: 1.5px dashed var(--cpq-line-strong);
	border-radius: 10px;
	background: var(--cpq-surface);
	color: var(--cpq-muted);
	font-weight: 400;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}
#cpq-form .cpq-drop:hover,
#cpq-form .cpq-drop.is-over { border-color: var(--cpq-accent); background: var(--cpq-accent-soft); }
#cpq-form .cpq-drop:focus-within { border-color: var(--cpq-accent); box-shadow: var(--cpq-focus); }
#cpq-form .cpq-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
#cpq-form .cpq-drop svg { color: var(--cpq-accent); margin-bottom: 2px; }
#cpq-form .cpq-drop__text { color: var(--cpq-ink); font-size: 15px; }
#cpq-form .cpq-drop__text strong { color: var(--cpq-accent); font-weight: 650; }
#cpq-form .cpq-drop__types { font-size: 12px; letter-spacing: .02em; }

#cpq-form .cpq-filelist { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#cpq-form .cpq-filelist:empty { display: none; }
#cpq-form .cpq-filelist li {
	display: flex; align-items: center; gap: 12px;
	margin: 0;
	padding: 8px 10px;
	border: 1px solid var(--cpq-line);
	border-radius: 8px;
	font-size: 14px;
}
#cpq-form .cpq-filelist li::before { content: none; }
#cpq-form .cpq-filelist .thumb {
	flex: none; width: 40px; height: 40px;
	border-radius: 6px; object-fit: cover;
	background: var(--cpq-tint);
	display: grid; place-items: center;
	font-size: 10px; font-weight: 700; color: var(--cpq-muted);
}
#cpq-form .cpq-filelist .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#cpq-form .cpq-filelist .size { color: var(--cpq-muted); font-variant-numeric: tabular-nums; }
#cpq-form .cpq-filelist .is-bad { border-color: var(--cpq-danger); background: var(--cpq-danger-soft); }
#cpq-form .cpq-filelist .is-bad .size { color: var(--cpq-danger); }

/* ---------- Checklist ---------- */
#cpq-form .cpq-checklist .cpq-help { margin: 0 0 12px; }
#cpq-form.cpq-wrap .cpq-check {
	display: flex; align-items: flex-start; gap: 12px;
	margin: 0;
	padding: 10px 0;
	border-top: 1px solid var(--cpq-line);
	font-weight: 400;
	cursor: pointer;
}
#cpq-form.cpq-wrap .cpq-check:last-child { border-bottom: 1px solid var(--cpq-line); }
#cpq-form .cpq-check input {
	-webkit-appearance: none; appearance: none;
	flex: none;
	width: 20px; height: 20px;
	margin: 2px 0 0;
	border: 1.5px solid var(--cpq-line-strong);
	border-radius: 5px;
	background: var(--cpq-surface) center / 14px no-repeat;
	cursor: pointer;
	transition: background-color .15s, border-color .15s;
}
#cpq-form .cpq-check input:checked {
	background-color: var(--cpq-accent);
	border-color: var(--cpq-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#cpq-form .cpq-check input:focus-visible { box-shadow: var(--cpq-focus); outline: none; }
#cpq-form .cpq-check input:checked + span { color: var(--cpq-ink); }

/* ---------- Buttons & nav ---------- */
#cpq-form .cpq-btn {
	all: unset;
	box-sizing: border-box;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 46px;
	padding: 0 22px;
	border-radius: 10px;
	font: 600 15px/1 var(--cpq-font);
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s, transform .05s;
}
#cpq-form .cpq-btn:active { transform: translateY(1px); }
#cpq-form .cpq-btn:focus-visible { box-shadow: var(--cpq-focus); }
#cpq-form .cpq-btn--primary { background: var(--cpq-accent); color: #fff; }
#cpq-form .cpq-btn--primary:hover { background: var(--cpq-accent-hover); color: #fff; }
#cpq-form .cpq-btn--primary[disabled] { opacity: .6; cursor: progress; }
#cpq-form .cpq-btn--ghost { color: var(--cpq-ink); border: 1px solid var(--cpq-line-strong); }
#cpq-form .cpq-btn--ghost:hover { background: var(--cpq-tint); }
#cpq-form .cpq-btn--add {
	margin-top: 16px;
	width: 100%;
	border: 1.5px dashed var(--cpq-line-strong);
	color: var(--cpq-accent);
}
#cpq-form .cpq-btn--add:hover { border-color: var(--cpq-accent); background: var(--cpq-accent-soft); }

#cpq-form .cpq-nav {
	display: flex; align-items: center; gap: 12px;
	margin-top: 36px;
	padding-top: 20px;
	border-top: 1px solid var(--cpq-line);
}
#cpq-form .cpq-nav__count { flex: 1; text-align: center; font-size: 14px; color: var(--cpq-muted); font-variant-numeric: tabular-nums; }
#cpq-form.cpq-wrap:not(.cpq-js) .cpq-nav [data-prev],
#cpq-form.cpq-wrap:not(.cpq-js) .cpq-nav [data-next],
#cpq-form.cpq-wrap:not(.cpq-js) .cpq-progress { display: none; }
#cpq-form.cpq-wrap:not(.cpq-js) .cpq-nav { justify-content: flex-end; }
#cpq-form.cpq-js .cpq-nav [hidden] { display: none; }

/* ---------- Notices ---------- */
#cpq-form .cpq-notice { margin: 0 0 28px; padding: 16px 18px; border-radius: 10px; font-size: 15px; }
#cpq-form .cpq-notice:focus { outline: none; }
#cpq-form .cpq-notice p { margin: 0; }
#cpq-form .cpq-notice ul { margin: 8px 0 8px 20px; padding: 0; }
#cpq-form .cpq-notice li { margin: 2px 0; }
#cpq-form .cpq-notice--error { background: var(--cpq-danger-soft); border: 1px solid #f3c7c1; color: #7a1a12; }
#cpq-form .cpq-notice--error .cpq-help { color: #7a1a12; opacity: .85; }

#cpq-form .cpq-done { text-align: center; padding: 56px 32px; }
#cpq-form .cpq-done svg { color: var(--cpq-accent); margin-bottom: 12px; }
#cpq-form .cpq-done p { margin: 0 auto; max-width: 52ch; color: var(--cpq-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
	#cpq-form .cpq-form { padding: 24px 18px 20px; border-radius: 12px; }
	#cpq-form.cpq-wrap .cpq-title { font-size: 24px; }
	#cpq-form .cpq-grid { grid-template-columns: 1fr; gap: 18px; }
	#cpq-form .cpq-progress { gap: 6px; margin-bottom: 24px; }
	#cpq-form .cpq-progress__btn { align-items: center; }
	#cpq-form .cpq-progress__label { display: none; }
	#cpq-form .cpq-stepname { display: block; margin-top: -12px; }
	#cpq-form .cpq-dimsrow { grid-template-columns: 1fr; }
	#cpq-form .cpq-box { display: flex; align-items: center; gap: 12px; text-align: left; }
	#cpq-form .cpq-box__svg { width: 100px; flex: none; height: 80px; }
	#cpq-form .cpq-product__body { padding: 16px; }
	#cpq-form .cpq-product__meta { display: none; }
	#cpq-form .cpq-dims { gap: 8px; }
	#cpq-form.cpq-wrap .cpq-unit input { padding-left: 10px; padding-right: 30px; }
	#cpq-form .cpq-unit > span { right: 9px; font-size: 13px; }
	#cpq-form .cpq-dimsrow { padding: 14px; }
	#cpq-form .cpq-seg { display: flex; }
	#cpq-form .cpq-seg label { flex: 1; }
	#cpq-form .cpq-seg span { min-width: 0; }
	#cpq-form .cpq-nav__count { display: none; }
	#cpq-form .cpq-nav .cpq-btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
	#cpq-form.cpq-wrap *, #cpq-form.cpq-wrap *::before, #cpq-form.cpq-wrap *::after { animation: none !important; transition: none !important; }
}

#cpq-form .cpq-btn svg,
#cpq-form .cpq-icon-btn svg { width: 16px; height: 16px; }
#cpq-form .cpq-drop svg { width: 22px; height: 22px; }
#cpq-form .cpq-done svg { width: 48px; height: 48px; }
#cpq-form .cpq-filelist li { list-style: none; }
#cpq-form .cpq-intro,
#cpq-form .cpq-step__lead,
#cpq-form .cpq-done p { font-size: 16px; line-height: 1.55; }
#cpq-form .cpq-notice p,
#cpq-form .cpq-notice li { font-size: 15px; line-height: 1.5; }

/* ---------- Spreadsheet import ---------- */
#cpq-form .cpq-import {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 20px;
	margin: 0 0 32px;
	padding: 18px 20px;
	border: 1px solid var(--cpq-line);
	border-radius: 12px;
	background: var(--cpq-tint);
}
#cpq-form.cpq-wrap:not(.cpq-js) .cpq-import { display: none; }
#cpq-form .cpq-import__text { flex: 1 1 300px; min-width: 0; }
#cpq-form.cpq-wrap .cpq-import__title {
	margin: 0 0 4px;
	font-family: var(--cpq-font);
	font-size: 16px;
	font-weight: 650;
	line-height: 1.35;
	color: var(--cpq-ink);
}
#cpq-form .cpq-import__desc { margin: 0; font-size: 14px; line-height: 1.5; color: var(--cpq-muted); }
#cpq-form .cpq-import__actions { display: flex; flex-wrap: wrap; gap: 8px; flex: 0 1 auto; }
#cpq-form .cpq-btn--sm { min-height: 40px; padding: 0 16px; font-size: 14px; border-radius: 9px; white-space: nowrap; text-decoration: none; }
#cpq-form .cpq-btn--ghost.cpq-btn--sm { background: var(--cpq-surface); }
#cpq-form.cpq-wrap .cpq-import__upload { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 9px; margin: 0; color: #fff; font-size: 14px; font-weight: 600; line-height: 1; overflow: hidden; }
#cpq-form .cpq-import__upload input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; font-size: 0; }
#cpq-form .cpq-import__upload:focus-within { box-shadow: var(--cpq-focus); }
#cpq-form .cpq-import__upload.is-busy { opacity: .65; pointer-events: none; }
#cpq-form .cpq-import__status { flex: 1 1 100%; padding: 12px 14px; border-radius: 9px; font-size: 14px; line-height: 1.5; }
#cpq-form .cpq-import__status[hidden] { display: none; }
#cpq-form .cpq-import__status p { margin: 0; font-size: 14px; }
#cpq-form .cpq-import__status p + p { margin-top: 6px; }
#cpq-form .cpq-import__status ul { margin: 4px 0 0 18px; padding: 0; list-style: disc; }
#cpq-form .cpq-import__status li { margin: 2px 0; font-size: 14px; }
#cpq-form .cpq-import__status.is-loading { background: var(--cpq-surface); color: var(--cpq-muted); }
#cpq-form .cpq-import__status.is-ok { background: var(--cpq-accent-soft); color: #134235; }
#cpq-form .cpq-import__status.is-warn { background: #fdf6e7; color: #6b4a0b; border: 1px solid #f0dcae; }
#cpq-form .cpq-import__status.is-error { background: var(--cpq-danger-soft); color: #7a1a12; border: 1px solid #f3c7c1; }

@media (max-width: 640px) {
	#cpq-form .cpq-import { padding: 16px; margin-bottom: 24px; }
	#cpq-form .cpq-import__actions { flex: 1 1 100%; }
	#cpq-form .cpq-import__actions .cpq-btn { flex: 1 1 100%; }
}