/* ==========================================================================
   Spa Configurator — Design-Token-Based Stylesheet
   Polarbad Lunar Picker redesign
   2-step configurator: Model Selection → Add-Ons Panel
   Covers 320px → 1920px viewport widths
   All transitions 200ms–450ms for 60fps rendering
   ========================================================================== */

/* ---------- Base reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   Design Tokens — CSS Custom Properties
   Requirements: 1.1, 1.2, 1.3, 1.4, 1.5
   ========================================================================== */

:host {
  /* Colors */
  --teal: #1d6b7a;
  --teal-dark: #155a67;
  --teal-light: #e8f2f4;
  --bg: #f5f4f1;
  --white: #ffffff;
  --text: #1a1a1a;
  --muted: #6b6b6b;
  --muted2: #999999;
  --border: #e0ddd8;

  /* Typography */
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;

  /* Spacing */
  --container-max-width: 1100px;
  --container-padding-top: 56px;
  --container-padding-x: 40px;
  --container-padding-bottom: 72px;
  --card-gap: 28px;
  --card-border-radius: 6px;
  --card-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);

  /* `--picker-sticky-offset` is intentionally NOT declared here so a host
     page's own `:root { --picker-sticky-offset: 56px }` (e.g. to clear a
     fixed Webflow nav) takes effect even though the bundle CSS loads after
     the page's inline `\3c style>`. The consumption site below falls back to
     `0px` when the host does not declare it. */
}

/* Improved text wrapping for Norwegian copy */
.configurator-shell__heading,
.configurator-shell__subtext {
  text-wrap: pretty;
}

.model-card__name,
.addon-card__name {
  text-wrap: balance;
}

/* ==========================================================================
   ConfiguratorShell — Layout orchestrator
   Requirements: 14.1, 14.2, 14.4, 14.5
   ========================================================================== */

.configurator-shell {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--container-padding-top) var(--container-padding-x) var(--container-padding-bottom);
  background: var(--bg);
  font-family: var(--sans);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* Heading row: heading left, step indicator + back button right */
.configurator-shell__heading-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 36px;
}

.configurator-shell__heading-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Section heading */
.configurator-shell__heading {
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 500;
  color: var(--teal);
  letter-spacing: 0.01em;
  line-height: 1;
}

/* Subtext below heading */
.configurator-shell__subtext {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 32px;
  margin-top: 8px;
}

/* Content area */
.configurator-shell__content {
  display: flex;
  flex-wrap: wrap;
  /* Don't stretch columns to match the tallest sibling — let each column
     size to its own content. Otherwise the left model+price column gets
     stretched in "selected" mode when the right add-ons column is taller,
     leaving empty space below the price summary. */
  align-items: flex-start;
  gap: var(--card-gap);
  transition: all 300ms ease;
}

/* Browsing mode: models take full width */
.configurator-shell--browsing .configurator-shell__models {
  width: 100%;
}

.configurator-shell--browsing .configurator-shell__addons {
  /* Fully collapse the (still-mounted, invisible) add-ons wrapper in
     browsing mode. `width: 0` alone clips horizontally but the children
     still claim vertical space in the flex row, leaving a tall empty
     gap below the model grid. */
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  flex: 0 0 0;
  overflow: hidden;
}

/* Selected mode: left column 340px fixed, right column fluid */
.configurator-shell--selected .configurator-shell__models {
  flex: 0 0 340px;
  max-width: 340px;
  transition: flex 300ms ease, max-width 300ms ease;
}

.configurator-shell--selected .configurator-shell__addons {
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
  transition: flex 300ms ease;
}

/* ==========================================================================
   Contact Step — Desktop split-column layout
   When Configurator_Step === 'contact', the contact step reuses
   .configurator-shell__models for the left column (selected ModelCard +
   PriceSummaryCard, locked at 340px by the .configurator-shell--selected
   .configurator-shell__models rule above) and uses
   .configurator-shell__contact for the right column (ContactForm, fluid).
   The 28px column gap comes from the parent .configurator-shell__content's
   `gap: var(--card-gap)`. Mobile (<768px) stacked layout lives in task 13.2.
   Requirements: 4.1, 4.5
   ========================================================================== */

@media (min-width: 768px) {
  .configurator-shell__contact {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* ==========================================================================
   Contact Step — Mobile single-column stacked layout
   At <768px the Price_Summary_Card column (.configurator-shell__models)
   stacks above the Contact_Form column (.configurator-shell__contact)
   with a 24px vertical gap. Form controls go full-width and gain a 44px
   minimum tap-target height. Adjacent fields keep at least a 12px gap.
   The shared ≤767px media block lower in this file already switches
   .configurator-shell__content to flex-direction: column and constrains
   the left "models" column to 520px max-width centred — we mirror that
   treatment for .configurator-shell__contact here so the right column
   behaves identically when the contact step is the active branch.
   Requirements: 4.2, 4.5, 12.1, 12.2
   ========================================================================== */
@media (max-width: 767px) {
  /* Right column on mobile when the contact step is rendered: full
     width, centred, matching the .configurator-shell__addons treatment
     used by the add-ons step. */
  .configurator-shell--selected .configurator-shell__contact {
    flex: 0 0 100%;
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
  }

  /* Req 4.2 — 24px vertical gap between the stacked Price_Summary_Card
     column and the Contact_Form column. Scoped to the contact step via
     :has() so the add-ons step keeps its --card-gap (28px) spacing.
     Browsers without :has() support fall back to the inherited 28px
     gap, which is an acceptable +4px graceful degradation. */
  .configurator-shell__content:has(.configurator-shell__contact) {
    gap: 24px;
  }
}

/* ==========================================================================
   Contact Form — Card, grid layout, fields, submit
   White card on the page background, with a 3-column grid for the small
   fields (Butikk, Navn, E-post on row 1; Telefon, Postnummer on row 2)
   and the Info textarea + GDPR consent + Send button each spanning the
   full row. Inputs are white with thin gray borders, labels in teal,
   matching the rest of the configurator's tokens (no new colors / fonts).
   Requirements: 4.1, 4.2, 4.5, 6.1–6.11, 11.5, 12.1, 12.2
   ========================================================================== */

.contact-form {
  background: var(--white);
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-shadow);
  padding: 32px;
  font-family: var(--sans);
}

.contact-form__form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 20px;
  width: 100%;
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* The Info textarea, the GDPR consent row, the error banner and the
   submit footer all span the full grid width. */
.contact-form__field--info,
.contact-form__field--consent,
.contact-form__error-banner,
.contact-form__footer {
  grid-column: 1 / -1;
}

.contact-form__label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--teal);
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}

.contact-form__required-marker {
  color: var(--teal);
}

.contact-form__control {
  width: 100%;
  padding: 11px 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text);
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.contact-form__control::placeholder {
  color: var(--muted2);
}

.contact-form__control:hover {
  border-color: var(--muted2);
}

/* Native select needs an explicit chevron once `appearance: none` is set,
   otherwise the dropdown indicator disappears. The arrow is drawn with a
   teal stroke matching the labels and sits 14px from the right edge. */
.contact-form__control--select {
  padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%276%27 viewBox=%270 0 10 6%27 fill=%27none%27><path d=%27M1 1l4 4 4-4%27 stroke=%27%231d6b7a%27 stroke-width=%271.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

.contact-form__control--textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
}

/* GDPR consent row — checkbox + label inline, full grid width. */
.contact-form__field--consent {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
}

.contact-form__checkbox {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--teal);
  cursor: pointer;
}

.contact-form__consent-label {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  cursor: pointer;
  flex: 1 1 auto;
}

.contact-form__help {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.4;
}

/* Per-field validation errors render inside each field group below the
   control. Hidden via the `hidden` HTML attribute when the field is
   currently valid. */
.contact-form__error {
  display: block;
  font-size: 12px;
  color: #b3261e;
  margin-top: 6px;
  line-height: 1.4;
}

/* Submission-error banner (`role="alert"`) above the submit button. */
.contact-form__error-banner {
  background: #fdecea;
  border: 1px solid #f6c8c2;
  border-radius: 4px;
  padding: 12px 14px;
  font-size: 13px;
  color: #b3261e;
  line-height: 1.4;
}

/* Invalid field treatment — red border kicks in once the user has
   attempted submit and the field still fails validation. */
.contact-form__control[aria-invalid='true'] {
  border-color: #b3261e;
}

/* Footer row — submit button right-aligned. */
.contact-form__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.contact-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--teal);
  color: var(--white);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 11px 32px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  min-width: 120px;
  transition: background 0.2s ease;
}

.contact-form__submit:hover:not(:disabled) {
  background: var(--teal-dark);
}

.contact-form__submit:disabled {
  cursor: not-allowed;
  opacity: 0.8;
}

/* Tiny spinner shown alongside "Sender..." while submitting (Req 10.3). */
.contact-form__spinner {
  width: 12px;
  height: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: contact-form__spin 0.7s linear infinite;
}

@keyframes contact-form__spin {
  to {
    transform: rotate(360deg);
  }
}

/* Success block — replaces the form after a successful submission
   (Req 10.5). Same card chrome as the form itself for visual continuity. */
.contact-form--success {
  text-align: left;
}

.contact-form__success {
  padding: 8px 0;
}

.contact-form__success-heading {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  color: var(--teal);
  margin-bottom: 12px;
  line-height: 1.1;
}

.contact-form__success-body {
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
}

/* ==========================================================================
   Contact Form — Mobile (<768px)
   Collapses the 3-column grid to a single column, keeps full-width
   controls and the 44px tap-target minimum (Req 12.1). The 12px field
   gap (Req 12.2) is supplied by the existing `row-gap`.
   ========================================================================== */

@media (max-width: 767px) {
  .contact-form {
    padding: 20px 18px;
  }

  .contact-form__form {
    grid-template-columns: 1fr;
    row-gap: 14px;
  }

  /* Req 12.1 — every text-typing / selecting / submitting control
     fills the form's content area and has at least a 44px tap target. */
  .contact-form__control,
  .contact-form__submit {
    min-height: 44px;
  }

  /* Larger consent tap target on mobile (Req 12.1). */
  .contact-form__field--consent {
    min-height: 44px;
  }

  /* Submit button stretches full-width on mobile so it remains an easy
     thumb target. */
  .contact-form__footer {
    justify-content: stretch;
  }

  .contact-form__submit {
    width: 100%;
  }

  /* Avoid iOS zoom on focus by ensuring 16px min font-size — handled
     globally below for inputs/textarea, but the select needs an
     explicit override since iOS uses the inherited font-size. */
  .contact-form__control--select {
    font-size: 16px;
  }
}

/* ==========================================================================
   Contact Form — Focus indicators (Req 11.5)
   Same teal outline used by every other interactive element in the
   configurator: 2px solid stroke with 2px offset, ≥3:1 contrast against
   the surrounding white card. The heading-row "Tilbake" back button is
   `.configurator-shell__back-button` and is covered by its own rule
   further down in this file.
   ========================================================================== */

.contact-form__control:focus-visible,
.contact-form__control--select:focus-visible,
.contact-form__control--textarea:focus-visible,
.contact-form__checkbox:focus-visible,
.contact-form__submit:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-color: var(--teal);
}

/* ==========================================================================
   Back Button — "Bytt modell"
   Requirements: 12.1, 12.2, 12.3
   ========================================================================== */

.configurator-shell__back-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 16px;
  padding: 6px 14px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--sans);
  transition: border-color 0.2s, color 0.2s;
}

.configurator-shell__back-button:hover {
  border-color: var(--teal);
  color: var(--teal);
}

.configurator-shell__back-button:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* ==========================================================================
   ModelCard — Horizontal layout with text left, image right
   Requirements: 3.1, 3.2, 3.3, 3.4, 3.5, 3.6, 3.7, 3.8, 5.1, 5.2, 5.3, 5.4
   ========================================================================== */

.model-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--white);
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-shadow), 0 1px 4px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  cursor: pointer;
  border: none;
  text-align: left;
  width: 100%;
  font: inherit;
  font-family: var(--sans);
  color: var(--text);
  padding: 0;
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: box-shadow 0.3s, transform 0.3s, opacity 300ms ease;
}

@media (hover: hover) {
  .model-card:hover {
    box-shadow: 0 8px 40px rgba(29, 107, 122, 0.15), 0 2px 8px rgba(0, 0, 0, 0.06);
    transform: translateY(-4px);
  }
}

@media (hover: none) {
  .model-card:active {
    transform: scale(0.99);
    transition: transform 0.12s;
  }
}

.model-card:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* Hidden state — unselected cards when another card is selected */
.model-card--hidden {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
}

/* Selected state — the chosen card (step 2) */
.model-card--selected {
  cursor: default;
  box-shadow: var(--card-shadow), 0 1px 4px rgba(0, 0, 0, 0.04);
  transform: none;
}

.model-card--selected:hover {
  box-shadow: var(--card-shadow), 0 1px 4px rgba(0, 0, 0, 0.04);
  transform: none;
}

/* Step 2 mode — no hover effects */
.model-card--step-addons {
  cursor: default;
}

.model-card--step-addons:hover {
  box-shadow: var(--card-shadow), 0 1px 4px rgba(0, 0, 0, 0.04);
  transform: none;
}

/* ---------- ModelCard top section: text left, image right ---------- */

.model-card__top {
  display: flex;
  align-items: flex-start;
  padding: 24px 24px 16px;
  gap: 16px;
}

.model-card__info {
  flex: 1;
}

.model-card__product-line {
  font-size: 11px;
  color: var(--muted2);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.model-card__name {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 12px;
}

.model-card__price {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

.model-card__price-value {
  font-weight: 600;
  color: var(--teal);
  font-size: 14px;
}

/* ---------- ModelCard image ---------- */

.model-card__image-wrapper {
  width: 160px;
  height: 130px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.model-card__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.15));
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) {
  .model-card:hover .model-card__image {
    transform: scale(1.05);
  }

  .model-card--step-addons:hover .model-card__image,
  .model-card--selected:hover .model-card__image {
    transform: scale(1);
  }
}

/* ---------- ModelCard spec rows ---------- */

.model-card__specs {
  padding: 0 24px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.model-card__spec {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.model-card__spec:last-child {
  border-bottom: none;
}

.model-card__spec-value {
  font-weight: 700;
  font-size: 17px;
  min-width: 40px;
  color: var(--text);
  font-family: var(--sans);
}

.model-card__spec-label {
  font-size: 13px;
  color: var(--muted);
}

/* ---------- ModelCard CTA area ---------- */

.model-card__cta {
  padding: 0 24px 24px;
}

/* ==========================================================================
   TagRibbon — Angled promotional label
   Requirements: 4.1, 4.2, 4.3
   ========================================================================== */

.tag-ribbon {
  position: absolute;
  top: 16px;
  right: -8px;
  z-index: 2;
  background: var(--teal);
  color: var(--white);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 16px 5px 12px;
  transform: rotate(2deg);
  transform-origin: right center;
  box-shadow: 0 2px 8px rgba(29, 107, 122, 0.35);
}

/* ==========================================================================
   StepIndicator — Progress circles with connecting line
   Requirements: 6.1, 6.2, 6.3, 6.4, 6.5, 6.6
   ========================================================================== */

.step-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
}

.step-indicator__line {
  width: 20px;
  height: 1px;
  background: var(--border);
}

.step-indicator__step {
  display: flex;
  align-items: center;
  gap: 6px;
}

.step-indicator__circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  transition: all 0.35s;
}

/* Active step */
.step-indicator__circle--active {
  background: var(--teal);
  color: var(--white);
  border: none;
}

/* Completed step */
.step-indicator__circle--completed {
  background: var(--teal-light);
  border: 1.5px solid var(--teal);
  color: var(--teal);
}

/* Inactive step */
.step-indicator__circle--inactive {
  background: var(--border);
  color: var(--muted);
  border: none;
}

.step-indicator__label {
  font-size: 12px;
  font-weight: 500;
  transition: color 0.35s;
}

.step-indicator__label--active {
  color: var(--teal);
}

.step-indicator__label--inactive {
  color: var(--muted2);
}

/* ==========================================================================
   ModelSelectionStep — Flex layout and state messages
   Requirements: 14.3, 13.1
   ========================================================================== */

.model-selection-step {
  padding: 0;
}

.model-selection-step__grid {
  display: flex;
  gap: var(--card-gap);
}

.model-selection-step__grid > * {
  flex: 1 1 0;
}

/* ---------- Slider variant for products with many models ---------- */
.model-slider {
  position: relative;
  width: 100%;
  min-width: 0;
}

.model-slider__track {
  display: flex;
  gap: var(--card-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scroll-padding-left: 4px;
  padding: 4px 4px 12px;
  margin: -4px -4px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(29, 107, 122, 0.3) transparent;
  touch-action: pan-x pan-y;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  user-select: none;
  -webkit-user-select: none;
}

.model-slider__track--dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}

.model-slider__track--dragging .model-card {
  pointer-events: none;
}

.model-slider__track::-webkit-scrollbar {
  height: 6px;
}

.model-slider__track::-webkit-scrollbar-thumb {
  background: rgba(29, 107, 122, 0.3);
  border-radius: 3px;
}

.model-slider__track::-webkit-scrollbar-track {
  background: transparent;
}

.model-slider__track > .model-card {
  flex: 0 0 320px;
  max-width: 320px;
  scroll-snap-align: start;
}

.model-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--teal);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: background 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s;
  z-index: 2;
}

.model-slider__arrow:hover:not(:disabled) {
  border-color: var(--teal);
  background: var(--teal-light);
}

.model-slider__arrow:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.model-slider__arrow:disabled {
  opacity: 0;
  pointer-events: none;
}

.model-slider__arrow--prev {
  left: -12px;
}

.model-slider__arrow--next {
  right: -12px;
}

@media (max-width: 768px) {
  .model-slider__track > .model-card {
    flex: 0 0 280px;
    max-width: 280px;
  }

  .model-slider__arrow {
    width: 36px;
    height: 36px;
  }

  .model-slider__arrow--prev {
    left: -4px;
  }

  .model-slider__arrow--next {
    right: -4px;
  }
}

.model-selection-step__loading {
  text-align: center;
  padding: 48px 0;
  font-size: 16px;
  color: var(--muted);
}

.model-selection-step__error {
  text-align: center;
  padding: 48px 0;
  color: #c00;
}

.model-selection-step__retry-button {
  margin-top: 12px;
  padding: 8px 20px;
  border: 1px solid #c00;
  border-radius: 4px;
  background: var(--white);
  color: #c00;
  cursor: pointer;
  font-size: 14px;
  font-family: var(--sans);
}

.model-selection-step__retry-button:hover {
  background: #fef0f0;
}

.model-selection-step__retry-button:focus-visible {
  outline: 2px solid #c00;
  outline-offset: 2px;
}

.model-selection-step__empty {
  text-align: center;
  padding: 48px 0;
  font-size: 16px;
  color: var(--muted);
}

/* ==========================================================================
   AddOnsPanel — White card wrapper with slide-in transition
   Requirements: 8.1, 8.2, 8.3, 13.3
   ========================================================================== */

.addons-panel {
  min-width: 0;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.45s 0.06s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.45s 0.06s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.addons-panel--visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.addons-panel__card {
  background: var(--white);
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-shadow);
  padding: 24px 24px 20px;
}

.addons-panel__title {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  color: var(--teal);
  margin-bottom: 4px;
}

.addons-panel__subtitle {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 20px;
}

/* Mobile-only preview image — duplicates the model image from the
   left-pane ModelCard so it sits prominently above the Skallfarge
   picker on phones (where the left pane stacks below the panel and
   the image would otherwise be far down the page). Hidden by
   default; revealed inside the ≤767px media query below. */
.addons-panel__mobile-preview {
  display: none;
}

.addons-panel__mobile-preview-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.addons-panel__empty {
  text-align: center;
  padding: 48px 0;
  font-size: 16px;
  color: var(--muted);
}

.addons-panel__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 0;
  color: var(--muted);
  font-size: 14px;
}

.addons-panel__loading-text {
  font-weight: 500;
}

.addons-panel__spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(29, 107, 122, 0.2);
  border-top-color: var(--teal);
  animation: addons-panel-spin 0.8s linear infinite;
}

@keyframes addons-panel-spin {
  to {
    transform: rotate(360deg);
  }
}

.addons-panel__list {
  display: flex;
  flex-direction: column;
}

.addons-panel__section-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 8px;
}

/* ==========================================================================
   ShellColorPicker — Skallfarge swatches (CMS-bindable)
   ========================================================================== */

.shell-color-picker {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.shell-color-picker__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}

.shell-color-picker__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}

.shell-color-picker__value {
  font-size: 12px;
  color: var(--teal);
  font-weight: 500;
}

.shell-color-picker__swatches {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.swatch {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  padding: 0;
  background: var(--border);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s, box-shadow 0.25s;
  overflow: hidden;
}

.swatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.swatch--active {
  transform: scale(1.04);
  box-shadow:
    0 0 0 2px var(--white),
    0 0 0 3px rgba(60, 60, 60, 0.55),
    0 1px 3px rgba(0, 0, 0, 0.12);
}

@media (hover: hover) {
  .swatch:hover:not(.swatch--active) {
    transform: scale(1.06);
  }
}

@media (hover: none) {
  .swatch:active {
    transform: scale(0.92);
  }
}

.swatch:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* ==========================================================================
   AddOnCard — Row layout with custom checkbox
   Requirements: 8.4, 8.5, 8.6, 8.7, 8.8, 8.9, 8.10
   ========================================================================== */

.addon-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 4px;
  cursor: pointer;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  margin: 0 -4px;
  transition: background 0.15s;
  font: inherit;
  font-family: var(--sans);
  color: var(--text);
  text-align: left;
  width: calc(100% + 8px);
}

@media (hover: hover) {
  .addon-card:hover {
    background: rgba(29, 107, 122, 0.02);
    box-shadow: none;
  }
}

@media (hover: none) {
  .addon-card:active {
    background: rgba(29, 107, 122, 0.05);
  }
}

.addon-card:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.addon-card--selected {
  background: transparent;
}

/* Custom checkbox */
.addon-card__checkbox {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  flex-shrink: 0;
  margin-top: 2px;
  border: 2px solid #ccc;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  font-size: 0;
  line-height: 0;
}

.addon-card--selected .addon-card__checkbox {
  border-color: var(--teal);
  background: var(--teal);
}

/* Addon card body */
.addon-card__body {
  flex: 1;
}

.addon-card__header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}

.addon-card__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  transition: color 0.2s;
  margin: 0;
}

.addon-card--selected .addon-card__name {
  color: var(--teal);
}

.addon-card__price {
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
  flex-shrink: 0;
  margin: 0;
  white-space: nowrap;
}

.addon-card__description {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.55;
}

.addon-card__link {
  font-size: 13px;
  color: var(--teal);
  text-decoration: underline;
}

.addon-card__link:hover {
  color: var(--teal-dark);
}

/* ==========================================================================
   PriceSummaryCard — Price breakdown card
   Requirements: 10.1, 10.2, 10.3, 10.4, 10.5, 10.6, 10.7, 10.8
   ========================================================================== */

.price-summary-card {
  background: var(--white);
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-shadow);
  padding: 18px 20px;
  margin-top: 16px;
}

.price-summary-card__header {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

.price-summary-card__items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.price-summary-card__line {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.price-summary-card__line-label {
  color: var(--muted);
}

.price-summary-card__line-value {
  font-weight: 500;
}

.price-summary-card__color {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.price-summary-card__color-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.price-summary-card__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  margin-top: 2px;
}

.price-summary-card__total-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.price-summary-card__total-value {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  color: var(--teal);
  transition: all 0.3s;
}

.price-summary-card__disclaimer {
  font-size: 10px;
  color: var(--muted2);
  line-height: 1.5;
  margin-top: 8px;
}

/* ==========================================================================
   CTAButton — Teal call-to-action button
   Requirements: 11.1, 11.2, 11.3, 11.4
   ========================================================================== */

.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--teal);
  color: var(--white);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 13px 20px;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--sans);
  transition: background 0.2s;
}

.cta-button:hover {
  background: var(--teal-dark);
}

.cta-button:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* Smaller variant for model card CTA */
.cta-button--small {
  font-size: 12px;
  padding: 10px 18px;
}

/* Short label is hidden by default; CSS responsive layer swaps it in. */
.cta-button__short {
  display: none;
}

/* Full-width variant for addons panel CTA */
.cta-button--full {
  width: 100%;
  margin-top: 24px;
}

/* ==========================================================================
   PriceDisplay — Legacy (replaced by PriceSummaryCard)
   ========================================================================== */

.price-display {
  display: none;
}

/* ==========================================================================
   Transition Animation Classes
   Requirements: 13.1, 13.2, 13.3, 13.4, 13.5
   ========================================================================== */

.fade-out {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   MobileStickyBar — Apple-style price strip
   Only rendered <768px after the user scrolls past the title.
   ========================================================================== */

.mobile-sticky-bar {
  display: none;
}

@media (max-width: 767px) {
  .mobile-sticky-bar {
    display: flex;
    position: fixed;
    /* Honour the host page's offset (e.g. fixed Webflow nav) AND the
       device safe-area inset so the bar never tucks under Chrome's dynamic
       URL bar / iOS notch / Dynamic Island. */
    top: calc(var(--picker-sticky-offset, 0px) + env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
    padding: 12px 20px;
    align-items: center;
    gap: 12px;
    margin: 0;
    box-shadow:
      0 1px 0 rgba(0, 0, 0, 0.04),
      0 4px 12px rgba(0, 0, 0, 0.05);
    transform: translateY(-110%);
    opacity: 0;
    transition:
      transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  .mobile-sticky-bar--visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-sticky-bar__info {
    flex: 1;
    min-width: 0;
  }

  .mobile-sticky-bar__model {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-sticky-bar__price {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 500;
    color: var(--teal);
    line-height: 1.05;
  }

  .mobile-sticky-bar__cta {
    flex-shrink: 0;
    background: var(--teal);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 9px 14px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  /* Desktop price summary lives in the sticky bar on mobile in step 2 */
  .configurator-shell--selected .price-summary-card {
    display: none !important;
  }
}

/* ==========================================================================
   Responsive Breakpoints
   Requirements: 15.1, 15.2, 15.3, 15.4, 15.5
   ========================================================================== */

/* ---------- Tablet 768–991px ---------- */
@media (max-width: 991px) {
  .configurator-shell {
    padding: 48px 32px 64px;
  }

  .configurator-shell__heading {
    font-size: 38px;
    line-height: 1.05;
  }

  .model-card__image-wrapper {
    width: 130px;
    height: 105px;
  }

  .model-card__name {
    font-size: 20px;
  }
}

/* ---------- Mobile landscape: ≤767px ---------- */
@media (max-width: 767px) {
  .configurator-shell {
    padding: 40px 20px 56px;
  }

  /* Stack and centre heading row + subtext on mobile */
  .configurator-shell__heading-row {
    flex-direction: column;
    align-items: center;
    gap: 18px;
    margin-bottom: 24px;
    text-align: center;
  }

  .configurator-shell__heading {
    width: 100%;
    text-align: center;
    font-size: 30px;
    line-height: 1.05;
  }

  .configurator-shell__heading-right {
    width: 100%;
    justify-content: center;
  }

  .step-indicator {
    width: 100%;
    justify-content: center;
  }

  .configurator-shell__subtext {
    text-align: center;
    margin-bottom: 24px;
    font-size: 13px;
  }

  /* Hide step labels on mobile to keep the indicator compact */
  .step-indicator__label {
    display: none;
  }

  /* Stack model cards vertically with a comfortable max width */
  .model-selection-step__grid {
    flex-direction: column;
    gap: 16px;
  }

  .model-selection-step__grid > * {
    flex: 0 0 auto;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
  }

  /* Stack selected mode vertically */
  .configurator-shell__content {
    flex-direction: column;
  }

  .configurator-shell--selected .configurator-shell__models {
    flex: 0 0 100%;
    max-width: 520px;
    margin: 0 auto;
  }

  .configurator-shell--selected .configurator-shell__addons {
    flex: 0 0 100%;
    max-width: 520px;
    margin: 0 auto;
  }

  /* Show the mobile-only preview image above the Skallfarge picker.
     Sized to fit the container width with a generous height; the
     image itself uses object-fit: contain so the model render is
     never cropped regardless of source aspect ratio. */
  .addons-panel__mobile-preview {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    margin: 4px 0 18px;
    background: var(--bg);
    border-radius: var(--card-border-radius);
    overflow: hidden;
  }

  .addon-card {
    padding: 14px 4px;
  }

  .addon-card__checkbox {
    width: 22px;
    height: 22px;
  }

  .model-card__image-wrapper {
    width: 120px;
    height: 95px;
  }

  .model-card__top {
    padding: 20px 20px 14px;
    gap: 14px;
  }

  .model-card__specs {
    padding: 0 20px 16px;
  }

  .model-card__cta {
    padding: 0 20px 18px;
  }

  /* Smaller CTA copy on mobile */
  .cta-button {
    font-size: 12px;
  }

  /* Prevent iOS zoom on focus */
  input,
  textarea {
    font-size: 16px;
  }
}

/* ---------- Mobile portrait: ≤479px ---------- */
@media (max-width: 479px) {
  .configurator-shell {
    padding: 28px 16px 44px;
  }

  .configurator-shell__heading {
    font-size: 26px;
    line-height: 1.1;
  }

  .model-card__image-wrapper {
    width: 96px;
    height: 78px;
  }

  .model-card__name {
    font-size: 17px;
    letter-spacing: 0.06em;
  }

  .model-card__spec-value {
    font-size: 15px;
    min-width: 32px;
  }

  .model-card__spec-label {
    font-size: 12px;
  }

  .model-card__top {
    padding: 16px 16px 12px;
    gap: 10px;
  }

  .model-card__specs {
    padding: 0 16px 14px;
  }

  .model-card__cta {
    padding: 0 16px 16px;
  }

  .step-indicator__circle {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }

  .addons-panel__card {
    padding: 20px 18px 16px;
  }

  /* Sticky bar slightly tighter */
  .mobile-sticky-bar {
    padding: 10px 16px;
  }

  .mobile-sticky-bar__price {
    font-size: 20px;
  }

  .mobile-sticky-bar__cta {
    padding: 8px 12px;
    font-size: 10px;
  }

  /* Shorten the long addons CTA text on the smallest screens */
  .addons-panel .cta-button .cta-button__label {
    display: none;
  }

  .addons-panel .cta-button .cta-button__short {
    display: inline;
  }
}