/* Presentation only. Availability, state, pricing, errors and save/reset handlers
   remain owned by the existing configurators and server pricebook. */
body[data-family] .np5-config-guide,
body[data-family] #family-label,
body[data-family] #np5-c80-scope,
body[data-family] #np5-c80-exclusions,
body[data-family] #controls .intro,
body[data-family] #controls .quiet:not([role="alert"]):not([role="status"]),
body[data-family] #controls .review-note,
body[data-family] #controls .model-source,
body[data-family] #controls [data-manufacturing-reason],
body[data-family] #controls [data-standard-openings],
body[data-family] .option small:not([data-option-price]),
body[data-family] [data-manufacturing-enquiry],
body[data-family] .np5-pricing>div>*:not(label):not(select),
body[data-family] #bottom-count,
body[data-family] .np5-plan-summary details,
body[data-family] .np5-plan-summary .np5-cupcake-documents,
.npm-configurator [data-npm-price-note]:not([data-price-error]),
.npm-configurator [data-npm-review-note],
.npm-configurator [data-npm-step-panel]>p,
.npm-configurator [data-npm-scope],
.npm-configurator [data-npm-exclusions],
.npm-configurator [data-npm-missing],
.npm-configurator :is(h3,h4):has(+[data-npm-scope]),
.npm-configurator :is(h3,h4):has(+[data-npm-exclusions]),
.npm-configurator :is(h3,h4):has(+[data-npm-missing]),
.npm-configurator [data-manufacturing-quantities],
.npm-configurator [data-manufacturing-openings],
.npm-configurator [data-manufacturing-enquiry],
.npm-configurator .npm-option-card small:not([data-option-price]){display:none!important}
/* Both pilot routes share the same customer-facing price and selection shell. */
.pp-pilot .pp-note,
.pp-pilot .pp-vat,
.pp-pilot .pp-compare,
.pp-pilot .pp-excl,
.pp-pilot .pp-actions-note,
body[data-family] .np5-c80-native,
.pp-pilot .pp-rows>dt:not(.pp-total-label),
.pp-pilot .pp-rows>dd:not(.pp-total),
.npm-configurator .npm-save-note,
.npm-configurator .npm-quote>p:not([data-npm-total]):not([data-npm-price-note]),
.npm-configurator .npm-viewer>p,
.npm-configurator .npm-step-note,
.npm-configurator figure small,
.npm-configurator>.npm-note,
.npm-configurator .pp-actions-note,
.npm-configurator [data-npm-groups],
.npm-configurator .npm-quote>h3,
.npm-configurator .npm-quote>h4{display:none!important}
.npm-configurator .npm-option-card.is-disabled strong::after{content:none}
.npm-configurator .npm-option-card.is-disabled{cursor:not-allowed}
body[data-family] .option.disabled{cursor:not-allowed}
body[data-family] .np5-pricing{padding-block:0;border:0;margin-top:16px}
body[data-family] .np5-pricing>label[hidden]{display:none!important}
body[data-family] .np5-pricing>div{font-size:13px}

/* Selection must stay readable on a phone without enabling unpriced options.
   Use the real disabled input as well as the renderer's state class. */
body[data-family] #controls .option,
.npm-configurator .npm-option-card{
  opacity:1;border:2px solid #718298;background:#fff;color:#132b45;
}
body[data-family] #controls .option strong,
.npm-configurator .npm-option-card strong{color:inherit;font-weight:650}
body[data-family] #controls .option img,
.npm-configurator .npm-option-card img{opacity:1;filter:none}
body[data-family] #controls .option .tick,
.npm-configurator .npm-option-card .npm-option-tick{display:none}
body[data-family] #controls .option.selected:not(.disabled):not(:has(input:disabled)),
.npm-configurator .npm-option-card.is-selected:not(.is-disabled):not(:has(input:disabled)){
  border-color:#0b2046;background:#edf3fa;color:#0b2046;
  box-shadow:inset 0 0 0 1px #0b2046;
}
body[data-family] #controls .option.selected:not(.disabled):not(:has(input:disabled)) .tick,
.npm-configurator .npm-option-card.is-selected:not(.is-disabled):not(:has(input:disabled)) .npm-option-tick{
  position:absolute;top:8px;right:8px;display:grid;place-items:center;
  width:26px;height:26px;border-radius:50%;background:#0b2046;color:#fff;
  font-size:16px;font-weight:700;line-height:1;
}
body[data-family] #controls .option:is(.disabled,:has(input:disabled)),
.npm-configurator .npm-option-card:is(.is-disabled,:has(input:disabled)){
  opacity:1;border:2px dashed #b8c0c8;background:#f2f3f5;color:#68727e;
  box-shadow:none;cursor:not-allowed;
}
body[data-family] #controls .option:is(.disabled,:has(input:disabled)) img,
.npm-configurator .npm-option-card:is(.is-disabled,:has(input:disabled)) img{
  filter:grayscale(1);opacity:.52;
}
body[data-family] #controls .option:has(input:focus-visible):not(:has(input:disabled)),
.npm-configurator .npm-option-card:has(input:focus-visible):not(:has(input:disabled)){
  outline:3px solid #417ca9;outline-offset:3px;
}