.input-section-title
{
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 18px;
	border-bottom: 1px solid black;
}

.inputs-container * {
	font-family: 'Inter', sans-serif;
	font-weight: normal;
	font-size: 14px;
}
.inputs-container {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0;
	column-gap: 40px;
}
.input-columns-1 { column-count: 1; }
.input-columns-2 { column-count: 2; }
.input-columns-3 { column-count: 3; }

.input-container {
	display: flex;
    break-inside: avoid;
	margin-bottom: 9px;
	padding-top: 10px;
	flex-direction: row;
	justify-content: space-between;
	vertical-align: baseline;
	background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc4JyBoZWlnaHQ9JzgnPjxjaXJjbGUgY3g9JzEnIGN5PSc0JyByPScxJyBmaWxsPScjZDBkM2Q3JyAvPjwvc3ZnPg==);
	background-repeat: repeat-x;
	background-position: left 25px;
}

.input-label {
	flex: 0 0 auto;
	width: auto;
	max-width: calc(5* 8.33% - 7px);
	padding-right: 7px;
	padding-top: 5px;
	padding-bottom: 5px;
	overflow: hidden;
	background-color: white;
	color: black;
}

.input-container.cpq-input-state-error,
.input-container.cpq-input-state-incomplete,
.input-container.cpq-input-state-complete {
	background-repeat: repeat-x, no-repeat;
	background-size: auto, 100% calc(1.6em + 10px);
	background-position: left 25px, left 9px;
}

.input-container.cpq-input-state-error {
	background-image:
		url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc4JyBoZWlnaHQ9JzgnPjxjaXJjbGUgY3g9JzEnIGN5PSc0JyByPScxJyBmaWxsPScjZDBkM2Q3JyAvPjwvc3ZnPg==),
		linear-gradient(var(--cpq-input-highlight-error, #FEE2E2), var(--cpq-input-highlight-error, #FEE2E2));
}

.input-container.cpq-input-state-incomplete {
	background-image:
		url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc4JyBoZWlnaHQ9JzgnPjxjaXJjbGUgY3g9JzEnIGN5PSc0JyByPScxJyBmaWxsPScjZDBkM2Q3JyAvPjwvc3ZnPg==),
		linear-gradient(var(--cpq-input-highlight-incomplete, #FFF7ED), var(--cpq-input-highlight-incomplete, #FFF7ED));
}

.input-container.cpq-input-state-complete {
	background-image:
		url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc4JyBoZWlnaHQ9JzgnPjxjaXJjbGUgY3g9JzEnIGN5PSc0JyByPScxJyBmaWxsPScjZDBkM2Q3JyAvPjwvc3ZnPg==),
		linear-gradient(var(--cpq-input-highlight-complete, #DCFCE7), var(--cpq-input-highlight-complete, #DCFCE7));
}

.input-container.cpq-input-state-error .input-label,
.input-container.cpq-input-state-incomplete .input-label,
.input-container.cpq-input-state-complete .input-label {
	background-color: transparent;
	align-self: flex-start;
}

.input-control {
	flex-wrap: wrap;
	flex: 0 1 auto;
	padding-left: 7px;
	position: relative;
	width: 60%;
	background-image: none;
	background-color: white;
	color: black;
}

/** radiobox input style **/
.input-radiobox-container .input-control>div,
.input-checkboxLarge-container .input-control>div {
	display: flex;
	align-items: center;
	-webkit-box-align: center;
	gap: .5rem;
	-webkit-box-orient: vertical;
	flex-direction: column;
	-webkit-box-direction: normal;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 8px;
	text-align: center;
	background-color: #ffffff;
	cursor: pointer;
	position: relative;
	transition: border-color 0.3s, background-color 0.3s;
}
  
.input-radiobox-container .input-control>div.selected,
.input-checkboxLarge-container .input-control>div.selected {
	border-color: #3498db;
	background-color: #e7f0ff;
}
  
.input-radiobox-container .input-control>div.selected::before,
.input-checkboxLarge-container .input-control>div.selected::before {
	content: '✔';
	position: absolute;
	top: -8px;
	right: -8px;
	background-color: #3498db;
	color: white;
	width: 16px;
	height: 16px;
	border-radius: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
}
  
.input-radiobox-container .input-control>div input[type="radio"],
.input-checkboxLarge-container .input-control>div input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* Input Style option: radiobox-image-overlay */
.input-radiobox-container .input-control>div.radiobox-image-overlay {
	padding: 0;
	overflow: hidden;
	align-items: stretch;
	justify-content: flex-end;
	min-height: 180px;
	background-color: #111;
}

.input-radiobox-container .input-control>div.radiobox-image-overlay.selected {
	border-color: #3498db;
	box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.9), 0 12px 24px rgba(0, 0, 0, 0.22);
	background-color: #111;
}

.input-radiobox-container .input-control>div.radiobox-image-overlay img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.input-radiobox-container .input-control>div.radiobox-image-overlay label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	margin: 0;
	padding: 8px 10px;
	font-size: 0.72rem;
	line-height: 1.2;
	color: #fff;
	background: rgba(0, 0, 0, 0.36);
	text-shadow: none;
	justify-content: center;
}

.input-radiobox-container .input-control>div.radiobox-image-overlay.selected::before {
	top: 8px;
	right: 8px;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	font-size: 0.8rem;
	z-index: 3;
}
/* ==========================================================================
   Northwind Marine CPQ theme.
   Layered on the BC base, which cpq.css and cpq-inputs.css sit beneath.
   Palette is the site's own: champagne accent, deep hull navy ink. Accent as
   TEXT uses the darker ink token, never the accent itself, because the accent
   on white does not carry body-text contrast.
   ========================================================================== */

:root {
  --nwcpq-accent:        #C9A227;
  --nwcpq-accent-dark:   #A8871F;
  --nwcpq-accent-ink:    #6E5A16;
  --nwcpq-accent-soft:   #F2E6C8;
  --nwcpq-ink:           #0E1D28;
  --nwcpq-ink-soft:      #41545F;
  --nwcpq-rule:          #D8DEDB;
  --nwcpq-surface:       #FFFFFF;
  --nwcpq-sunk:          #F5F7F6;
}

/* A sentinel the design probe can assert is actually in document.styleSheets.
   Bytes on disk are not proof a rule parsed. */
.cpq-theme-northwind-marker { --nwcpq-loaded: "northwind"; }

.inputs-container { color: var(--nwcpq-ink); }

.input-label {
  color: var(--nwcpq-ink);
  font-weight: 600;
  letter-spacing: .005em;
}

.input-container {
  border-bottom: 1px solid var(--nwcpq-rule);
  padding-block: 14px;
}

/* Selected states carry the champagne, and the label darkens to the ink token
   so the text keeps its contrast on a pale fill. */
.input-checkboxLarge-container .input-control > div.selected,
.input-radiobox-container .input-control > div.selected {
  border-color: var(--nwcpq-accent) !important;
  background: var(--nwcpq-accent-soft) !important;
  box-shadow: 0 0 0 1px var(--nwcpq-accent) inset;
}
.input-checkboxLarge-container .input-control > div.selected label,
.input-radiobox-container .input-control > div.selected label {
  color: var(--nwcpq-accent-ink);
  font-weight: 600;
}

.input-checkboxLarge-container .input-control > div,
.input-radiobox-container .input-control > div {
  border: 1px solid var(--nwcpq-rule);
  border-radius: 6px;
  background: var(--nwcpq-surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input-checkboxLarge-container .input-control > div:hover,
.input-radiobox-container .input-control > div:hover {
  border-color: var(--nwcpq-accent-dark);
}

/* Completeness pills, in the brand rather than the stock traffic lights. */
.cpq-grp-pct.cpq-pct-green  { background: #E3F0E8; color: #17603C; }
.cpq-grp-pct.cpq-pct-orange { background: var(--nwcpq-accent-soft); color: var(--nwcpq-accent-ink); }
.cpq-grp-pct.cpq-pct-red    { background: #F7E2DE; color: #8E2C1E; }

/* Tab bar reads as part of the site chrome. */
#cpq_tabs .nav-tabs { border-bottom: 1px solid var(--nwcpq-rule); }
#cpq_tabs .nav-link {
  color: var(--nwcpq-ink-soft);
  border: none;
  border-bottom: 2px solid transparent;
  font-weight: 600;
  padding: 10px 18px;
}
#cpq_tabs .nav-link:hover { color: var(--nwcpq-ink); }
#cpq_tabs .nav-link.active {
  color: var(--nwcpq-ink);
  background: transparent;
  border-bottom-color: var(--nwcpq-accent);
}

/* The summary is the number the customer reads, so give the digits a column. */
[data-dw-itemtype="cpq_items"] table { font-variant-numeric: tabular-nums; }
[data-dw-itemtype="cpq_items"] table th {
  color: var(--nwcpq-ink-soft);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .09em;
  border-bottom: 1px solid var(--nwcpq-rule);
}
[data-dw-itemtype="cpq_items"] table td { border-bottom: 1px solid var(--nwcpq-rule); }
[data-dw-itemtype="cpq_items"] table tr:last-child td { font-weight: 700; color: var(--nwcpq-ink); }

.input-section-title { color: var(--nwcpq-ink); }

@media (max-width: 640px) {
  .input-container { padding-block: 11px; }
  #cpq_tabs .nav-link { padding: 8px 12px; font-size: 14px; }
}

/* The tabs row and the tab containers both carry full Swift row spacing, which stacks into a dead
   band between the tab bar and the first question. The tab script marks the tabs row with
   cpq-tabs-sticky-target, so that is the hook to tighten it against. */
.cpq-tabs-sticky-target { padding-top: 10px !important; padding-bottom: 0 !important; }
.cpq-tab-container { padding-top: 18px !important; padding-bottom: 18px !important; }
.input-section-title { margin-bottom: 4px; }

/* ==========================================================================
   P65 — production pass on the configurator.

   Everything below is additive to the Northwind block above. The class names
   beginning nw- are owned by Assets/js/cpq-custom.js; the ones that are not are
   vendor CPQ hooks, marked as such where it matters.

   Brand tokens come from Custom/northwind_custom.css (--nw-*), which the CPQ
   master loads through the area's CustomHeadInclude. The locals below are kept
   only for the values that block does not publish.
   ========================================================================== */

.nw-cpq {
  --nw-wave-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%2075'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,40%20C240,74%20480,8%20720,32%20C960,56%201200,14%201440,44%20L1440,75%20L0,75%20Z'%20fill='%23000'/%3E%3C/svg%3E");
  --nw-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
}

.nw-nums { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- buttons */

.nw-btn {
  font: inherit;
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.2;
  border-radius: 6px;
  padding: 12px 20px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.nw-btn-primary {
  background: var(--nwcpq-accent);
  border-color: var(--nwcpq-accent);
  color: #1B1503;
}
.nw-btn-primary:hover { background: var(--nwcpq-accent-dark); border-color: var(--nwcpq-accent-dark); }
.nw-btn-quiet {
  background: transparent;
  border-color: var(--nwcpq-rule);
  color: var(--nwcpq-ink-soft);
}
.nw-btn-quiet:hover { border-color: var(--nwcpq-ink-soft); color: var(--nwcpq-ink); }

/* --------------------------------------------------- D3 the question itself */

/* The BC base lays every question out as a form row: label left, control right,
   joined by a dotted leader, with a wash behind anything unanswered. That is a
   data-entry screen. A configurator is a catalogue you are walking through, so the
   question becomes a heading and the answers get the full width beneath it. */
.nw-cpq .input-container {
  display: block;
  background-image: none !important;   /* the leader dots and the state wash */
  background-color: transparent !important;
  border-bottom: 1px solid var(--nwcpq-rule);
  padding: 22px 0 26px;
  margin-bottom: 0;
}
.nw-cpq .input-container:last-child { border-bottom: none; }

.nw-cpq .input-label {
  display: block;
  width: auto;
  max-width: none;
  background: transparent;
  padding: 0 0 12px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--nwcpq-ink);
}

/* The one state worth keeping is "answered", and a rule is enough to say it. */
.nw-cpq .input-container.cpq-input-state-complete .input-label::after {
  content: "\2713";
  margin-left: 9px;
  font-size: 12px;
  color: var(--nwcpq-accent-ink);
}
.nw-cpq .input-container.cpq-input-state-error .input-label { color: #8E2C1E; }

.nw-cpq .input-control { width: 100%; }

/* A plain radio list is not a text field, so it should not be sitting in one. */
.nw-cpq .input-radio-container .input-control,
.nw-cpq .input-checkbox-container .input-control {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.nw-cpq .input-radio-container .form-check { padding-block: 3px; }
.nw-cpq .input-radio-container .form-check-label { cursor: pointer; }
.nw-cpq .input-radio-container .form-check-input:checked { background-color: var(--nwcpq-accent); border-color: var(--nwcpq-accent); }

.nw-stepnav-cell { order: 99; }
.nw-cpq .input-radio-container .input-control,
.nw-cpq .input-number-container .input-control,
.nw-cpq .input-text-container .input-control { max-width: 520px; }

/* checkboxLarge puts its indicator in the corner of the card. Unstyled it escapes
   the card entirely and floats above the next one. */
.nw-cpq .input-checkboxLarge-container .input-control > div { position: relative; }
.nw-cpq .input-checkboxLarge-container .input-control > div .checkbox-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
}

/* Swatch tray — the four questions that are genuinely about colour. Chips at 56px
   sit in the 44-56 band every builder in the field uses. */
.nw-cpq .input-control > div.nw-swatch {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0;
  text-align: center;
  cursor: pointer;
}
.nw-cpq .input-control > div.nw-swatch img.nw-swatch-img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 7px;
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px var(--nwcpq-rule);
  transition: box-shadow .12s ease, border-color .12s ease;
}
.nw-cpq .input-control > div.nw-swatch:hover img.nw-swatch-img { box-shadow: 0 0 0 1px var(--nwcpq-accent-dark); }
.nw-cpq .input-control > div.nw-swatch.selected img.nw-swatch-img {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--nwcpq-accent);
}
.nw-cpq .input-control > div.nw-swatch label {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  color: var(--nwcpq-ink-soft);
  cursor: pointer;
}
.nw-cpq .input-control > div.nw-swatch.selected label { color: var(--nwcpq-accent-ink); font-weight: 600; }
.nw-cpq .input-control > div.nw-swatch.selected::before { display: none; }

/* Name and price on separate lines: cpq-custom.js splits the option label the
   lookup builds, so the price reads as a price rather than as part of the name. */
.nw-opt-price { display: block; font-weight: 400; opacity: .85; }
.nw-swatch .nw-opt-price { font-size: 11px; }

/* The row that held the bill of materials is empty once the offer has taken it. */
.nw-emptied { display: none !important; }

/* ----------------------------------------------------------- D1 step rail */

/* Baymard: users overlook content behind horizontal tabs while actively scanning
   for it. The remedy is not a different widget but a different reading — a
   numbered sequence that says how far through you are, still clickable in any
   order because a dealer configuring their fourth boat this week should not be
   made to walk it. */
#cpq_tabs .nav-tabs.nw-rail {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 0;
  padding-left: 0 !important;
  border-bottom: 1px solid var(--nwcpq-rule);
}
#cpq_tabs .nav-tabs.nw-rail::-webkit-scrollbar { display: none; }

#cpq_tabs .nav-link.nw-rail-link {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  padding: 13px 18px 11px;
  border-bottom: 2px solid transparent;
  color: var(--nwcpq-ink-soft);
}
.nw-rail-n {
  font-family: var(--nw-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--nwcpq-ink-soft);
  opacity: .65;
}
.nw-rail-t { font-size: 14.5px; font-weight: 600; }
#cpq_tabs .nav-link.nw-rail-link.active { border-bottom-color: var(--nwcpq-accent); color: var(--nwcpq-ink); }
#cpq_tabs .nav-link.nw-rail-link.active .nw-rail-n { color: var(--nwcpq-accent-ink); opacity: 1; }
#cpq_tabs .nav-link.nw-rail-link:hover { color: var(--nwcpq-ink); }

/* A tick on a step the customer has already read. Deliberately NOT a percentage:
   most of these choices are optional, and a completion score turns exploring a
   boat into an unfinished chore. No builder in the field shows one. */
.nw-rail-tick { width: 0; overflow: hidden; transition: width .18s ease; }
.nw-rail-link.nw-visited .nw-rail-tick { width: 12px; }
.nw-rail-link.nw-visited .nw-rail-tick::before {
  content: "\2713";
  font-size: 11px;
  color: var(--nwcpq-accent-ink);
}
.cpq-grp-pct { display: none !important; }   /* vendor percentage badge */

/* The offer step sits slightly apart — it is the destination, not another
   question. */
.nw-rail-offer-item { margin-left: auto; }
#cpq_tabs .nav-link.nw-rail-offer .nw-rail-t { color: var(--nwcpq-accent-ink); }

/* -------------------------------------------------------- D1 step footers */

.nw-stepnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--nwcpq-rule);
}
.nw-stepnav .nw-btn-primary { padding: 13px 24px; }

/* ------------------------------------------------------------- D4 locked */

/* The strongest finding in the whole field scan: three tiers exist, and hiding
   is the bottom one. An option the customer never sees cannot be wanted, and
   cannot be understood as unavailable. Name the reason, then offer the way out. */
.nw-locked {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  margin-bottom: 9px;
  border: 1px dashed var(--nwcpq-rule);
  border-radius: 8px;
  background: var(--nwcpq-sunk);
}
.nw-locked-label {
  font-weight: 600;
  font-size: 14px;
  color: var(--nwcpq-ink-soft);
}
.nw-locked-body {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.nw-locked-why { font-size: 13.5px; color: var(--nwcpq-ink-soft); }
.nw-locked-fix {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  background: none;
  border: none;
  padding: 0;
  color: var(--nwcpq-accent-ink);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.nw-locked-fix:hover { color: var(--nwcpq-ink); }

/* -------------------------------------------------------- D3 clear choice */

.nw-clear {
  display: inline-block;
  margin-left: 10px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: none;
  border: none;
  padding: 0;
  color: var(--nwcpq-ink-soft);
  cursor: pointer;
  opacity: .7;
}
.nw-clear:hover { opacity: 1; color: var(--nwcpq-accent-ink); }

/* Options that are present but not available. CPQ writes .option-disabled and
   aria-disabled itself; this is only what they should look like. */
.input-control > div.option-disabled {
  opacity: .42;
  filter: saturate(.25);
  pointer-events: none;
}

/* --------------------------------------------------------- D2 price bar */

/* Universal in the field, and the one thing every builder read this session has
   that we did not. The bar-and-drawer shape is taken over the right rail
   because a rail cannot survive 390px, and this product is researched at a dock. */
.nw-pricebar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1040;
  background: var(--nw-navy, #0C1B29);
  color: #EAF1F5;
  box-shadow: 0 -6px 22px rgba(12, 27, 41, .18);
}
.nw-pricebar-in {
  max-width: 1320px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.nw-price-lab {
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--nw-mist, #BFD3DE);
}
.nw-price-amt {
  font-size: 25px;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.nw-price-acts { display: flex; gap: 10px; align-items: center; }
.nw-pricebar .nw-btn-quiet { color: var(--nw-mist, #BFD3DE); border-color: rgba(234, 241, 245, .28); }
.nw-pricebar .nw-btn-quiet:hover { color: #fff; border-color: rgba(234, 241, 245, .6); }
.nw-caret { display: inline-block; transition: transform .2s ease; font-size: 9px; }
.nw-pricebar.nw-drawer-open .nw-caret { transform: rotate(180deg); }

.nw-drawer {
  position: fixed;
  left: 0; right: 0; bottom: 66px;
  z-index: 1039;
  background: var(--nwcpq-surface);
  border-top: 1px solid var(--nwcpq-rule);
  box-shadow: 0 -10px 26px rgba(12, 27, 41, .12);
  max-height: 46vh;
  overflow-y: auto;
}
.nw-drawer-in { max-width: 1320px; margin: 0 auto; padding: 18px 24px 22px; }
.nw-drawer-grp + .nw-drawer-grp { margin-top: 16px; }
.nw-drawer-grp-h {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--nwcpq-ink-soft);
  border-bottom: 1px solid var(--nwcpq-rule);
  padding-bottom: 6px;
  margin-bottom: 6px;
}
.nw-drawer-line {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 14px;
  padding: 3px 0;
  color: var(--nwcpq-ink);
}
.nw-drawer-line em { font-style: normal; color: var(--nwcpq-ink-soft); }
.nw-drawer-empty { color: var(--nwcpq-ink-soft); font-size: 14px; margin: 0; }

/* The bar overlays the page, so the page needs somewhere to end. */
body.nw-has-pricebar { padding-bottom: 76px; }

/* ------------------------------------------------------------- D5 offer */

/* Most builders in the field end on a raw total: no document, no reference, no
   named person. The bar here is not automotive but Vitsoe — "a drawing and price
   for your system, prepared for you to view online… There is no obligation to
   buy." A reference number is what makes the thing feel filed rather than priced. */
.nw-offer { padding: 8px 0 40px; }
.nw-offer-doc {
  max-width: 860px;
  margin: 0 auto;
  background: var(--nwcpq-surface);
  border: 1px solid var(--nwcpq-rule);
  border-radius: 12px;
  overflow: hidden;
}
.nw-offer-hero {
  position: relative;
  background: linear-gradient(180deg, var(--nw-navy, #0C1B29), var(--nw-navy-subtle, #13293D));
  color: #fff;
  padding: 34px 34px 46px;
}
.nw-offer-ref {
  font-family: var(--nw-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nw-accent-bright, #E8D08A);
}
.nw-offer-model {
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 700;
  letter-spacing: -.015em;
  margin: 10px 0 4px;
  color: #fff;
}
.nw-offer-sub { color: var(--nw-mist, #BFD3DE); font-size: 14.5px; }

/* The same wave device the storefront uses under every poster, so moving into
   the offer feels like moving through the site rather than through a form. */
.nw-offer-wave {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: clamp(28px, 3.4vw, 46px);
  background-color: var(--nwcpq-surface);
  -webkit-mask: var(--nw-wave-mask) no-repeat center / 100% 100%;
  mask: var(--nw-wave-mask) no-repeat center / 100% 100%;
  pointer-events: none;
}

.nw-offer-body { padding: 26px 34px 32px; }
.nw-offer-grp + .nw-offer-grp { margin-top: 22px; }
.nw-offer-grp-h {
  display: flex;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid var(--nwcpq-rule);
  padding-bottom: 7px;
}
.nw-offer-grp-h h3 {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nwcpq-ink-soft);
  margin: 0;
}
.nw-offer-grp-amt { margin-left: auto; font-weight: 700; font-size: 15px; color: var(--nwcpq-ink); }
.nw-offer-edit {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  background: none;
  border: none;
  padding: 0;
  color: var(--nwcpq-accent-ink);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.nw-offer-lines { list-style: none; margin: 0; padding: 0; }
.nw-offer-lines li {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 7px 0;
  font-size: 15px;
  color: var(--nwcpq-ink);
  border-bottom: 1px solid rgba(216, 222, 219, .55);
}
.nw-offer-lines li:last-child { border-bottom: none; }
.nw-offer-line-p { white-space: nowrap; color: var(--nwcpq-ink-soft); }
.nw-offer-lines em { font-style: normal; color: var(--nwcpq-ink-soft); }

.nw-offer-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin-top: 26px;
  padding-top: 16px;
  border-top: 2px solid var(--nwcpq-ink);
  font-size: 16px;
  font-weight: 700;
  color: var(--nwcpq-ink);
}
.nw-offer-total-amt { font-size: 28px; letter-spacing: -.02em; }
.nw-offer-foot { margin: 12px 0 0; font-size: 12.5px; color: var(--nwcpq-ink-soft); max-width: 62ch; }
.nw-offer-empty { color: var(--nwcpq-ink-soft); font-size: 15px; }

/* Baymard: 23% of sites bury the primary action below a review list, and up to
   11% of users abandon believing review meant confirmation. It sits with the
   total, not after the specification. */
.nw-offer-actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.nw-offer-actions #cpq-actions,
.nw-offer-actions #cpq-download-document { display: flex; flex-wrap: wrap; gap: 10px; }
.nw-offer-actions .btn,
.nw-offer-actions input[type="button"] {
  font-weight: 600;
  border-radius: 6px;
  padding: 12px 20px;
  border: 1px solid var(--nwcpq-rule);
  background: #fff;
  color: var(--nwcpq-ink);
}
.nw-offer-actions .btn-primary,
.nw-offer-actions input.btn-primary {
  background: var(--nwcpq-accent);
  border-color: var(--nwcpq-accent);
  color: #1B1503;
}
.nw-offer-actions .btn-primary:hover,
.nw-offer-actions input.btn-primary:hover { background: var(--nwcpq-accent-dark); border-color: var(--nwcpq-accent-dark); }

/* The bill of materials is still there for anyone who wants it — it is simply no
   longer the thing a customer is handed. */
.nw-offer-spec { margin-top: 26px; border-top: 1px solid var(--nwcpq-rule); padding-top: 14px; }
.nw-offer-spec > summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nwcpq-ink-soft);
}
.nw-offer-spec #nw-offer-spec-host { margin-top: 14px; overflow-x: auto; }
.nw-offer-spec table { width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
.nw-offer-spec h4 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--nwcpq-ink-soft); }

/* ------------------------------------------------------- D6 wave divider */

/* One brand device, reused. The section heading gets the same crest the posters
   carry, which is cheaper and truer than inventing a second vocabulary. */
.nw-cpq .input-section-title {
  position: relative;
  border-bottom: none;
  padding-bottom: 14px;
  font-size: 20px;
  letter-spacing: -.01em;
}
.nw-cpq .input-section-title::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 10px;
  background-color: var(--nwcpq-accent);
  opacity: .55;
  -webkit-mask: var(--nw-wave-mask) no-repeat center / 100% 100%;
  mask: var(--nw-wave-mask) no-repeat center / 100% 100%;
}

/* ------------------------------------------------------------ D6 motion */

/* NN/g put the ceiling at ~500ms — past that "animations start to feel like a
   real drag". Selection feedback is the only thing that must feel instant. */
.input-control > div { transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease; }
.nw-drawer { animation: nw-drawer-in .3s ease; }
@keyframes nw-drawer-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .nw-drawer { animation: none; }
  .nw-caret, .nw-rail-tick, .input-control > div { transition: none; }
}

/* -------------------------------------------------------------- D7 mobile */

@media (max-width: 860px) {
  .nw-offer-doc { border-radius: 0; border-left: none; border-right: none; }
  .nw-offer-hero { padding: 26px 20px 38px; }
  .nw-offer-body { padding: 20px 20px 26px; }
  .nw-offer-actions .btn,
  .nw-offer-actions input[type="button"] { width: 100%; }
}

@media (max-width: 640px) {
  .nw-pricebar-in { padding: 9px 14px; gap: 10px; }
  .nw-price-amt { font-size: 20px; }
  .nw-price-acts #nw-to-offer { display: none; }   /* the rail already goes there */
  .nw-drawer { bottom: 58px; max-height: 56vh; }
  .nw-drawer-in { padding: 14px 14px 18px; }
  body.nw-has-pricebar { padding-bottom: 66px; }
  #cpq_tabs .nav-link.nw-rail-link { padding: 11px 12px 9px; }
  .nw-rail-t { font-size: 13.5px; }
  .nw-stepnav { flex-direction: column-reverse; align-items: stretch; }
  .nw-stepnav .nw-btn { width: 100%; }
  .nw-offer-total-amt { font-size: 23px; }
}

/* Focus is visible on every control this layer adds, on both grounds. */
.nw-btn:focus-visible,
.nw-clear:focus-visible,
.nw-locked-fix:focus-visible,
.nw-offer-edit:focus-visible,
#cpq_tabs .nav-link.nw-rail-link:focus-visible {
  outline: 2px solid var(--nwcpq-accent);
  outline-offset: 2px;
}
.nw-pricebar .nw-btn:focus-visible { outline-color: var(--nw-accent-bright, #E8D08A); }

/* Sentinel: bytes on disk are not proof a rule parsed. The gate asserts this
   custom property resolves in the CSSOM. */
.cpq-p65-marker { --nw-p65-loaded: "p65"; }