/* Step configurator (scuba-configurator), layout and colours of the approved mock. */
.sa-cfg,
.sa-halcyon {   /* .sa-halcyon: Halcyon's configurator (HalcyonWidget) uses the same colours and button */
  --sa-navy: #0e2a47; --sa-blue: #1c6e9e; --sa-label: #666666; --sa-muted: #8a8a8a; --sa-line: #e5e8ec;
  --sa-field: #dcdcdc; --sa-ink: #2b2b2b; --sa-save: #2f7d4f; --sa-warn: #c0392b;
  --sa-open: 'Open Sans', Arial, sans-serif; --sa-pop: 'Poppins', Helvetica, Arial, sans-serif;
  margin: 0 0 16px; font: 500 14px/1.7 var(--sa-open); color: var(--sa-label);
}
.sa-cfg__steps { display: grid; gap: 18px; margin-bottom: 22px; }
.sa-cfg__row { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; align-items: start; margin: 0; padding: 0; border: 0; min-width: 0; }
.sa-cfg__row[hidden] { display: none; }
.sa-cfg__lbl { float: left; grid-column: 1; grid-row: 1 / span 3; padding: 9px 0 0; font: 700 14px/1.4 var(--sa-open); color: var(--sa-label); overflow-wrap: anywhere; hyphens: auto; }   /* line by line, not 38px per line: long labels wrap tidily */
.sa-cfg__req { color: var(--sa-warn); }
.sa-cfg__stepno { display: block; margin-top: 2px; font: 600 11px/1.2 var(--sa-open); letter-spacing: .06em; text-transform: uppercase; color: var(--sa-muted); }
.sa-cfg__pills, .sa-cfg__qtywrap, .sa-cfg__hint, .sa-cfg__text, .sa-cfg__file { grid-column: 2; }
.sa-cfg__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.sa-cfg__pill {
  position: relative; display: inline-flex; align-items: baseline; gap: 4px; padding: 9px 18px; margin: 0;
  border: 1px solid var(--sa-field); border-radius: 100px; background: #fff; color: var(--sa-ink);
  font: 500 14px/1.3 var(--sa-pop); cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.sa-cfg__pill input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.sa-cfg__pill:hover { border-color: var(--sa-ink); }
.sa-cfg__pill:has(input:checked) { background: var(--sa-ink); border-color: var(--sa-ink); color: #fff; }
.sa-cfg__pill:has(input:focus-visible) { outline: 2px solid var(--sa-blue); outline-offset: 2px; }
.sa-cfg__pill:has(input:disabled) { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.sa-cfg__pp { font-size: 12.5px; opacity: .75; }
.sa-cfg__pill[hidden] { display: none; }
.sa-cfg__pill--off:has(input:disabled) { text-decoration: none; }
/* Choices with a colour: swatch first (basic look; the swatch design follows in stap 3). */
.sa-cfg__pill--swatch { align-items: center; padding: 5px 14px 5px 5px; }
.sa-cfg__swatch { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--sa-field); object-fit: cover; }
.sa-cfg__text { max-width: 320px; padding: 8px 12px; border: 1px solid var(--sa-field); border-radius: 4px; font: 500 14px var(--sa-open); color: var(--sa-ink); }
.sa-cfg input.sa-cfg__text { box-sizing: border-box; width: 100%; min-height: 40px; padding: 9px 12px !important; line-height: 1.4 !important; }   /* the theme shrinks text inputs */
.sa-cfg__file { font-size: 13px; color: var(--sa-ink); }
.sa-cfg__hint { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--sa-muted); }
.sa-cfg__qtywrap { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.sa-cfg__qtylabel { flex-basis: 100%; font-size: 13px; color: var(--sa-ink); }
.sa-cfg__qty { display: inline-flex; align-items: center; border: 1px solid var(--sa-field); border-radius: 100px; background: #fff; }
.sa-cfg__qtybtn { width: 38px; height: 38px; border: 0; background: none; font-size: 18px; color: var(--sa-ink); cursor: pointer; }
.sa-cfg__qtybtn:focus-visible { outline: 2px solid var(--sa-blue); outline-offset: 2px; }
.sa-cfg__qty input { width: 44px; border: 0 !important; background: transparent !important; text-align: center; font: 600 14px var(--sa-open) !important; color: var(--sa-ink) !important; padding: 0 !important; -moz-appearance: textfield; }
.sa-cfg__qty input::-webkit-outer-spin-button, .sa-cfg__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sa-cfg__unit { font-size: 12.5px; color: var(--sa-muted); }
.sa-cfg__breakdown { padding-block: 14px; margin-bottom: 18px; border-top: 1px solid var(--sa-line); border-bottom: 1px solid var(--sa-line); }
.sa-cfg.is-loading .sa-cfg__breakdown { opacity: .6; }
.sa-cfg__breakdown.is-stale .sa-cfg__lines, .sa-cfg__breakdown.is-stale .sa-cfg__tot { opacity: .35; text-decoration: line-through; }
.sa-cfg__lines { display: grid; gap: 6px; margin: 0 0 10px !important; padding: 0 !important; list-style: none !important; }
.sa-cfg__lines li { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; font-size: 13.5px; list-style: none !important; }
.sa-cfg__n, .sa-cfg__p { color: var(--sa-ink); }
.sa-cfg__p { text-align: right; font-variant-numeric: tabular-nums; }
.sa-cfg__empty { color: var(--sa-muted); }
.sa-cfg__adv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 8px; padding: 8px 0 0; border-top: 1px dashed var(--sa-line); font: 700 14px var(--sa-open); color: var(--sa-save); }
.sa-cfg__adv[hidden] { display: none; }
.sa-cfg__advsum { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sa-cfg__tot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0; padding: 0; }
.sa-cfg__totlbl { font-size: 13px; font-weight: 700; color: var(--sa-label); }
.sa-cfg__sum { font: 600 26px var(--sa-open); color: var(--sa-blue); font-variant-numeric: tabular-nums; }
.sa-cfg__sum small { margin-left: 4px; font-size: 12.5px; font-weight: 500; color: var(--sa-muted); }
.sa-cfg__buy { margin-bottom: 8px; }
.sa-cfg__add { padding: 10px 22px; border: 0; border-radius: 4px; background: var(--sa-navy); color: #fff; font: 700 16px var(--sa-open); cursor: pointer; }
.sa-cfg__add:hover { background: var(--sa-blue); }
.sa-cfg__add:disabled { background: #9aa5b1; cursor: not-allowed; }
.sa-cfg__add:focus-visible { outline: 2px solid var(--sa-blue); outline-offset: 2px; }
.sa-cfg__msg { min-height: 1.5em; margin: 0 0 16px; font-size: 13px; color: var(--sa-muted); }
.sa-cfg__msg.is-warn { color: var(--sa-warn); }
@media (max-width: 480px) {
  .sa-cfg__row { grid-template-columns: 1fr; }
  .sa-cfg__lbl { float: none; grid-row: auto; line-height: 1.4; }
  .sa-cfg__pills, .sa-cfg__qtywrap, .sa-cfg__hint, .sa-cfg__text, .sa-cfg__file { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) { .sa-cfg__pill { transition: none; } }
/* Made to order (configurator.notice, e.g. Halcyon): on the page above the button. */
.sa-cfg__notice { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--sa-blue, #1d4e9b); background: #f4f7fa; font: 500 13px/1.5 var(--sa-open, 'Open Sans', Arial, sans-serif); color: var(--sa-ink, #2b2b2b); }
/* Halcyon's configurator: loads straight away; the button only appears to retry when Halcyon is not reachable. */
.sa-halcyon__target:empty { min-height: 120px; }
.sa-halcyon__open[hidden] { display: none; }
.sa-halcyon__msg { margin: 0 0 12px; font-size: 13px; color: var(--sa-muted); }
.sa-halcyon__msg.is-warn { color: var(--sa-warn); }
/* Page with Halcyon's configurator (body class from HalcyonWidget::bodyClasses): no product image column, the column
   with title, price and configurator gets the full width so Halcyon's wing images are larger. */
body.sa-halcyon-page .et_pb_column:has(> .et_pb_wc_images) { display: none !important; }
body.sa-halcyon-page .et_pb_column:has(> .et_pb_wc_add_to_cart) { width: 100% !important; margin-right: 0 !important; }

/* Live picture of the configuration (ConfiguratorView::preview): base image with colour layers on top. */
.sa-cfg__preview { position: relative; margin: 0 0 22px; background: #fff; }
.sa-cfg__preview img { display: block; width: 100%; height: auto; }
.sa-cfg__preview img:not(.sa-cfg__preview-base) { position: absolute; inset: 0; height: 100%; object-fit: contain; }
.sa-cfg__preview img[hidden] { display: none; }
.sa-cfg__preview.is-in-gallery { position: sticky; top: 120px; margin: 0; }
@media (max-width: 980px) { .sa-cfg__preview.is-in-gallery { position: relative; top: 0; } }