.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". It leads the question rather than
   trailing it, so a column of ticks is scannable and it cannot land after the
   Clear control that cpq-custom.js appends. */
.nw-cpq .input-container.cpq-input-state-complete .input-label::before {
  content: "\2713";
  margin-right: 8px;
  font-size: 12px;
  color: var(--nwcpq-accent-ink);
}
.nw-cpq .input-container.cpq-input-state-error .input-label { color: #8E2C1E; }

/* CPQ wraps its questions in a Bootstrap .container — max-width 1320px, centred —
   inside a form that already sits in Swift's own, wider container. The two caps
   nest, and the difference is dead margin either side of every question: 86px each
   at 1500px, 176px each at 1920px, where it costs a fifth of the content width. The
   step rail and the section heading are outside that container, which is why they
   run wider than the questions they belong to.

   The questions take the section's width instead. Nothing else uses
   .inputs-container, and the rule is scoped to the configurator regardless. */
.nw-cpq .inputs-container.container {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
  width: 100%;
}

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

/* The BC base gives every .input-control a white panel, which is right for a text
   field and wrong for a tray of cards: it draws a box round a box. */
.nw-cpq .input-radio-container .input-control,
.nw-cpq .input-radiobox-container .input-control,
.nw-cpq .input-colorselector-container .input-control,
.nw-cpq .input-checkboxLarge-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); }


/* The three narrow questions on step one share one line, so the fleet — the choice
   step one exists for — starts within the first screen instead of three questions
   down. Two dropdowns and a two-option switch are the only questions on the page
   narrow enough to pair, which is why this is addressed rather than made a general
   column rule. */
.nw-cpq [id$="_visible_Vessel_Use"],
.nw-cpq [id$="_visible_Vessel_Waters"],
.nw-cpq [id$="_visible_Vessel_Channel"] {
  display: inline-block;
  vertical-align: top;
  border-bottom: none;
  padding-bottom: 10px;
}
.nw-cpq [id$="_visible_Vessel_Waters"] { width: calc(46% - 26px); margin-right: 26px; }
.nw-cpq [id$="_visible_Vessel_Channel"] { width: calc(46% - 26px); }
.nw-cpq [id$="_visible_Vessel_Use"] .input-control,
.nw-cpq [id$="_visible_Vessel_Waters"] .input-control,
.nw-cpq [id$="_visible_Vessel_Channel"] .input-control { max-width: none; }
@media (max-width: 900px) {
  .nw-cpq [id$="_visible_Vessel_Use"],
  .nw-cpq [id$="_visible_Vessel_Waters"] { width: calc(50% - 14px); }
  .nw-cpq [id$="_visible_Vessel_Waters"] { margin-right: 0; }
  .nw-cpq [id$="_visible_Vessel_Channel"] { display: block; width: 100%; }
}
@media (max-width: 700px) {
  .nw-cpq [id$="_visible_Vessel_Use"],
  .nw-cpq [id$="_visible_Vessel_Waters"],
  .nw-cpq [id$="_visible_Vessel_Channel"] { display: block; width: 100%; margin-right: 0; }
}

/* CPQ's `select` is a combobox: a visible text input over a hidden <select>. Give it
   the height and weight of a real control rather than the stock Bootstrap field. */
.nw-cpq .input-select-container .input-control { max-width: none; }
.nw-cpq .input-select-container .input-control input.form-control,
.nw-cpq .input-select-container .input-control input[type="text"] {
  height: 48px;
  font-size: 15px;
  border-color: var(--nwcpq-rule);
  background-color: var(--nwcpq-surface);
}
.nw-cpq .input-select-container .input-control input:focus {
  border-color: var(--nwcpq-accent);
  box-shadow: none;
}

.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; }

/* The last of the stock blue. The BC base paints the selected badge and ring
   #3498db, which is the exact anti-pattern P65 §8 listed: a second accent fighting
   the brand one on the most-looked-at element on the page. */
.nw-cpq .input-radiobox-container .input-control > div.selected::before,
.nw-cpq .input-checkboxLarge-container .input-control > div.selected::before {
  background-color: var(--nwcpq-accent);
  color: #1B1503;
}
.nw-cpq .input-radiobox-container .input-control > div.radiobox-image-overlay.selected {
  border-color: var(--nwcpq-accent);
  box-shadow: 0 0 0 3px var(--nwcpq-accent), 0 12px 24px rgba(12, 27, 41, .22);
}

/* Every option photograph in this catalogue is 1536x1024 — exactly 3:2. CPQ renders
   them with object-fit:cover into a card whose height is a fixed 180px, so at three
   across the box was 2.68:1 and 44% of each image's height was cropped away, top and
   bottom. On a centred studio product shot, that is the product.

   Give the card the image's own ratio and nothing is cropped: cover and contain then
   resolve to the same thing. The hull grid is excluded below — those are wide
   seascapes, where filling the card IS the intended framing. */
.nw-cpq .cpq-tab-container:not([data-cpq-tab="Vessel"])
  .input-radiobox-container .input-control > div.radiobox-image-overlay {
  aspect-ratio: 3 / 2;
  min-height: 0;
}
.nw-cpq .cpq-tab-container:not([data-cpq-tab="Vessel"])
  .input-radiobox-container .input-control > div.radiobox-image-overlay img {
  object-fit: contain;
}

/* An image card's label sits on the photograph, so the selected state cannot tint
   it: dark gold on a dark hull is unreadable. Keep the type white and let the ring
   and the badge carry the state. */
.nw-cpq .input-radiobox-container .input-control > div.radiobox-image-overlay label,
.nw-cpq .input-radiobox-container .input-control > div.radiobox-image-overlay.selected label {
  color: #fff;
  font-weight: 600;
  background: linear-gradient(180deg, rgba(12, 27, 41, 0), rgba(12, 27, 41, .82) 55%);
  padding: 22px 10px 9px;
  font-size: .78rem;
}
.nw-cpq .radiobox-image-overlay .nw-opt-price { color: rgba(255, 255, 255, .88); font-weight: 400; }

/* 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; }

/* A question whose catalogue lookup matched nothing for this hull. The heading over
   an empty tray reads as a broken page; cpq-custom.js puts a stub in its place. */
.input-container.nw-empty { 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. */
/* The vendor template carries its own inline <style> in the body painting the tab
   row and its sticky wrapper white, and a body <style> beats a <head> stylesheet on
   load order — hence the weight here. The rail is part of the page, not a panel
   floating on it, so it takes the page's own ground. */
.nw-cpq #cpq_tabs,
.nw-cpq .cpq-tabs-sticky-target,
.nw-cpq .cpq-tabs-sticky-target.is-fixed {
  background-color: var(--nw-white, #F7FAFC) !important;
}

#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); }

/* ------------------------------------------------------------- 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); }

/* A question with one option is a fitment, not a choice. Saying so stops the
   customer hunting for the alternatives — and it stays theirs to take or leave,
   because these cost money and nothing is selected on their behalf. */
.nw-only {
  display: inline-block;
  margin-left: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nwcpq-ink-soft);
  background: var(--nwcpq-sunk);
  border: 1px solid var(--nwcpq-rule);
  border-radius: 999px;
  padding: 2px 9px;
  vertical-align: middle;
}
/* One card should not stretch across four columns as if three were missing. */
.nw-cpq .input-container.nw-single .input-control { grid-template-columns: repeat(4, 1fr) !important; }
@media (max-width: 900px) { .nw-cpq .input-container.nw-single .input-control { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 640px) { .nw-cpq .input-container.nw-single .input-control { grid-template-columns: repeat(2, 1fr) !important; } }

/* 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: var(--nw-bar-lift, 0px);
  z-index: 1040;
  background: var(--nw-navy, #0C1B29);
  color: #EAF1F5;
  box-shadow: 0 -6px 22px rgba(12, 27, 41, .18);
}
/* Deliberately large. This is the number the whole page exists to move, and on a
   $600k boat it should read as the headline of the experience rather than as a
   status strip. It also carries the forward motion now: the Next control and both
   progress readouts live here rather than at the foot of each section.

   The height is published back to CSS as --nw-bar-h by cpq-custom.js, so the page's
   bottom padding and the drawer's offset follow it instead of repeating a guess. */
.nw-pricebar-in {
  max-width: 1320px;
  margin: 0 auto;
  padding: 58px 32px 64px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 26px 28px;
}

/* The site's own wave, on the bar's top edge: the mask's solid half is already the
   bottom, so the crest rises into the page without flipping anything. Sitting on
   bottom:100% keeps it out of the bar's own height, which --nw-bar-h measures. */
.nw-pricebar-wave {
  position: absolute;
  left: 0; right: 0;
  bottom: 100%;
  height: clamp(26px, 3vw, 44px);
  background-color: var(--nw-navy, #0C1B29);
  -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-price-lab {
  font-size: 11.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--nw-mist, #BFD3DE);
  margin-bottom: 6px;
}
.nw-price-amt {
  font-size: clamp(38px, 3.8vw, 52px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
/* What the headline includes beyond the sticker price. Without it, the bar and the
   specification table differ by the fees and nothing on screen says why. */
.nw-price-note {
  margin-top: 7px;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--nw-mist, #BFD3DE);
}

.nw-price-acts { display: flex; gap: 12px; align-items: stretch; }
.nw-pricebar .nw-btn { padding: 15px 26px; font-size: 15px; }

/* The Next control names its destination and, under it, how much of the step the
   customer has answered — the one place a count is useful, because it is attached
   to the decision to move on rather than floating over the page as a score. */
.nw-pricebar .nw-btn.nw-next {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  min-width: 230px;
  padding: 13px 26px;
  text-align: left;
}
.nw-next-lab { font-size: 16px; font-weight: 700; line-height: 1.2; }
.nw-next-sub {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .72;
}

/* Overall progress, spanning the bar under the price and the control. */
.nw-progress {
  grid-column: 1 / -1;
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(234, 241, 245, .18);
  overflow: visible;
}
.nw-progress-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--nwcpq-accent-dark), var(--nwcpq-accent));
  transition: width .35s ease;
}
.nw-progress-lab {
  position: absolute;
  right: 0;
  top: 14px;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nw-mist, #BFD3DE);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { .nw-progress-fill { transition: none; } }
.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); }

/* Clear of the bar AND of its crest: the wave is drawn above the bar, outside the
   height --nw-bar-h reports, and it paints over anything sharing that space.

   It is a panel, not a second bar — sized to its content and anchored under the
   control that opens it, rather than spanning a width it has nothing to put in. */
.nw-drawer {
  position: fixed;
  left: auto;
  right: 32px;
  width: min(560px, calc(100vw - 48px));
  bottom: calc(var(--nw-bar-h, 96px) + var(--nw-crest-h, 44px) + var(--nw-bar-lift, 0px) + 12px);
  z-index: 1039;
  background: var(--nwcpq-surface);
  border: 1px solid var(--nwcpq-rule);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(12, 27, 41, .22);
  max-height: 46vh;
  overflow-y: auto;
}
.nw-drawer-in { padding: 18px 22px 20px; }
.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; }

/* Desktop reserves the bar height at the end of the document, so the footer cannot
   scroll under the bar. On a phone that reservation is replaced by the docking in
   cpq-custom.js, which lifts the bar clear of the footer instead - there the page is
   several screens long and the footer genuinely arrives from below. */
body.nw-has-pricebar { padding-bottom: calc(var(--nw-bar-h, 96px) + var(--nw-crest-h, 44px)); }
@media (max-width: 900px) { body.nw-has-pricebar { padding-bottom: 0; } }

/* ------------------------------------------------------------- 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: 980px;
  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: 30px; }
.nw-offer-grp-h {
  display: flex;
  align-items: baseline;
  gap: 14px;
  border-bottom: 2px solid var(--nwcpq-ink);
  padding-bottom: 9px;
}
/* The section headings carry the document: they are what a reader scans to check
   their build, so they read as headings rather than as table captions. */
.nw-offer-grp-h h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.005em;
  text-transform: none;
  color: var(--nwcpq-ink);
  margin: 0;
}
.nw-offer-grp-amt { margin-left: auto; font-weight: 700; font-size: 17px; 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); }

/* MSRP, then what is added to it, then the total: the order a boat offer is written
   in, and what lets the headline say MSRP and mean it. */
.nw-offer-sums {
  margin-top: 26px;
  padding-top: 14px;
  border-top: 1px solid var(--nwcpq-rule);
}
.nw-offer-sum {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 5px 0;
  font-size: 15px;
  color: var(--nwcpq-ink-soft);
}
.nw-offer-sum span:last-child { color: var(--nwcpq-ink); font-weight: 600; }

.nw-offer-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin-top: 12px;
  padding-top: 14px;
  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; width: 100%; }
/* The vendor buttons carry me-4 (1.5rem right margin) from Bootstrap; with a flex
   gap as well that is enough to push the row past a 390px viewport. */
.nw-offer-actions .me-4 { margin-right: 0 !important; }
.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);
}
/* .btn-primary comes from Bootstrap and paints through --bs-btn-* custom
   properties, so overriding `background` alone loses to the shorthand the
   framework sets. Set the properties themselves. The stock blue is the same
   #3498db-family accent P65 called out; Northwind's accent is champagne. */
.nw-offer-actions .btn-primary,
.nw-offer-actions input.btn-primary {
  --bs-btn-bg: var(--nwcpq-accent);
  --bs-btn-border-color: var(--nwcpq-accent);
  --bs-btn-color: #1B1503;
  --bs-btn-hover-bg: var(--nwcpq-accent-dark);
  --bs-btn-hover-border-color: var(--nwcpq-accent-dark);
  --bs-btn-hover-color: #1B1503;
  --bs-btn-active-bg: var(--nwcpq-accent-dark);
  --bs-btn-active-border-color: var(--nwcpq-accent-dark);
  --bs-btn-active-color: #1B1503;
  background-color: var(--nwcpq-accent) !important;
  border-color: var(--nwcpq-accent) !important;
  color: #1B1503 !important;
}
.nw-offer-actions .btn-primary:hover,
.nw-offer-actions input.btn-primary:hover {
  background-color: var(--nwcpq-accent-dark) !important;
  border-color: var(--nwcpq-accent-dark) !important;
}

/* 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);
}
/* The bill of materials is a dozen columns wide and will not fit the document's
   measure. Let it break out of the body's padding and use the full card, so the
   common case fits and only a genuinely wide table scrolls. */
.nw-offer-spec #nw-offer-spec-host {
  margin-top: 14px;
  margin-inline: -34px;
  padding-inline: 34px;
  overflow-x: auto;
}
.nw-offer-spec table {
  width: 100%;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  border-collapse: collapse;
}
.nw-offer-spec table th,
.nw-offer-spec table td { padding: 6px 8px; white-space: nowrap; }
.nw-offer-spec table td.col-description,
.nw-offer-spec table th.col-description { white-space: normal; min-width: 180px; }
.nw-offer-spec input.line-discount-amount { width: 56px !important; }
.nw-offer-spec select.line-discount-type { width: 48px !important; }

/* The BOM and totals headers are the last off-brand colour on the page — a teal the
   vendor sets inline on the totals row, so it needs the same weight to move. */
.nw-offer-spec table thead th,
.nw-offer-spec table thead tr {
  background-color: var(--nw-navy, #0C1B29) !important;
  color: #fff !important;
  border-bottom: none;
}
.nw-offer-spec table tbody tr.total th { background: var(--nwcpq-sunk); font-weight: 700; }
.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 carries the same crest the posters
   do, which is cheaper and truer than inventing a second vocabulary. */
.nw-cpq .input-section-title {
  position: relative;
  border-bottom: none;
  padding-bottom: 14px;
  margin-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-spec #nw-offer-spec-host { margin-inline: -20px; padding-inline: 20px; }
  .nw-offer-grp-h h3, .nw-offer-grp-amt { font-size: 16px; }
  .nw-offer-actions .btn,
  .nw-offer-actions input[type="button"] { width: 100%; }
}

/* The option-columns setting is an absolute column count — CPQ emits
   grid-template-columns: repeat(N, 1fr) with no breakpoint of its own — so a
   four-across hull grid is 4 across at 390px too, and the images push the document
   wider than the viewport. Collapse the counts by hand. */
@media (max-width: 900px) {
  .nw-cpq .input-grid .input-control-col-4,
  .nw-cpq .input-grid .input-control-col-5 { grid-template-columns: repeat(3, 1fr); }
  .nw-cpq .input-grid .input-control-col-6,
  .nw-cpq .input-grid .input-control-col-7,
  .nw-cpq .input-grid .input-control-col-8 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .nw-cpq .input-grid .input-control-col-2,
  .nw-cpq .input-grid .input-control-col-3,
  .nw-cpq .input-grid .input-control-col-4,
  .nw-cpq .input-grid .input-control-col-5 { grid-template-columns: repeat(2, 1fr); }
  .nw-cpq .input-grid .input-control-col-6,
  .nw-cpq .input-grid .input-control-col-7,
  .nw-cpq .input-grid .input-control-col-8 { grid-template-columns: repeat(3, 1fr); }
  /* Nothing inside a card may set its own floor, or the grid stops being a grid. */
  .nw-cpq .input-control > div { min-width: 0; }
  .nw-cpq .input-control > div img { max-width: 100%; height: auto; }
}

@media (max-width: 640px) {
  /* The bar carries more now, so it grows on a phone too — but proportionately.
     Price and Next share the first row, progress spans the second. Measured at
     390x844 this lands near 130px, a sixth of the viewport, which is the ceiling
     the end-to-end walk holds it to. */
  .nw-pricebar-in { padding: 14px 16px 20px; gap: 14px 12px; }
  .nw-price-lab { font-size: 9.5px; letter-spacing: .1em; margin-bottom: 2px; }
  .nw-price-amt { font-size: 26px; }
  /* Summary collapses to its caret rather than disappearing: the drawer is the only
     way to see the build on a phone, so the affordance has to survive. The text
     stays in the accessibility tree — font-size:0 hides it visually, not from a
     screen reader, and the button keeps its own aria-label besides. */
  .nw-price-acts #nw-drawer-toggle { font-size: 0; padding: 9px 13px; }
  .nw-price-acts #nw-drawer-toggle .nw-caret { font-size: 11px; }
  .nw-pricebar .nw-btn { padding: 10px 14px; font-size: 14px; }
  .nw-pricebar .nw-btn.nw-next { min-width: 0; padding: 9px 16px; }
  .nw-next-lab { font-size: 14px; }
  .nw-next-sub { font-size: 10px; }
  .nw-progress-lab { top: 11px; font-size: 9.5px; }
  .nw-drawer { right: 12px; width: calc(100vw - 24px); max-height: 52vh; border-radius: 12px; }
  .nw-drawer-in { padding: 14px 14px 16px; }
  #cpq_tabs .nav-link.nw-rail-link { padding: 11px 12px 9px; }
  .nw-rail-t { font-size: 13.5px; }
  .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); }

/* ------------------------------------------------ step one above the fold */

/* The price bar and its crest overlay the page, so the usable first screen is the
   viewport less both — 722px of a 1000px window. Step one has to fit its two
   qualifying questions, the fleet and the pricing switch inside that, which is why
   the vertical rhythm here is tighter than the rest of the configurator. */
.nw-cpq .cpq-tab-container[data-cpq-tab="Vessel"] .input-container { padding: 14px 0 18px; }
.nw-cpq .cpq-tab-container[data-cpq-tab="Vessel"] .input-label { padding-bottom: 9px; }
.nw-cpq .cpq-tab-container[data-cpq-tab="Vessel"] .input-section-title { margin-bottom: 10px; }

/* The fleet reads as a single row of seven, which saves the height a second row
   costs and is also how the range actually wants to be seen — side by side, in
   price order. It falls back to the responsive column counts below 900px. */
.nw-cpq .cpq-tab-container[data-cpq-tab="Vessel"]
  .input-radiobox-container .input-control > div.radiobox-image-overlay { min-height: 152px; }
.nw-cpq .cpq-tab-container[data-cpq-tab="Vessel"]
  .input-radiobox-container .input-control > div.radiobox-image-overlay label {
  font-size: .72rem;
  padding: 18px 7px 7px;
}

/* -------------------------------------------------------- page clearance */

/* Swift reserves room for the floating header as padding on <main> — 259px at
   desktop, sized for a content page that opens on a poster. The configurator opens
   on the step rail, so 153px of that is an empty band between the site menu and
   step 01. Narrow it here only: the token is sitewide and correct everywhere else,
   and at 390px it is already only 14px clear of the header, so this is desktop-only.
   (The clearance is a main padding token, not the header's own offset — see the
   VE-CHROME pass.)

   The value is measured by cpq-custom.js into --nw-head-clear (header height plus a
   16px gap), because the header's own height changes with the viewport: a
   written-down number is either a dead band at one width or a rail hidden under the
   menu at another. The literal is only the fallback for the first paint. */
@media (min-width: 992px) {
  .nw-cpq main,
  .nw-cpq main#content { padding-top: var(--nw-head-clear, 124px) !important; }
}

/* The footer's own wave crest rises into the page, and with the step controls now
   in the price bar there is nothing left at the end of a section to hold it off.
   Give the last question room to finish before the water starts. */
.nw-cpq .cpq-tab-container { padding-bottom: clamp(84px, 8vw, 124px) !important; }
.nw-cpq .nw-offer { padding-bottom: clamp(60px, 6vw, 96px); }

/* On a phone the bar does not stay at the foot of the viewport — it lifts as the
   footer arrives, so it climbs into whatever sits above the footer, and that is the
   last question of the step. Measured at 390px the crest ended up 114px OVER it.
   Reserve the bar and its crest, plus air, so the lift lands in empty space.
   Both values are published by cpq-custom.js, so this follows the real heights
   rather than a number that has to be kept in step with them by hand. */
@media (max-width: 900px) {
  .nw-cpq .cpq-tab-container {
    padding-bottom: calc(var(--nw-bar-h, 100px) + var(--nw-crest-h, 44px) + 84px) !important;
  }
  .nw-cpq .nw-offer {
    padding-bottom: calc(var(--nw-bar-h, 100px) + var(--nw-crest-h, 44px) + 24px);
  }
}

/* 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"; }