/*
  San Diego Shelves Design Studio - main stylesheet
  Hostinger-ready static CSS. Keep reusable layout, configurator, form, and responsive styles here.
  Future expansion: split into smaller files only when pages grow beyond this single product configurator.
*/

:root {
        --ink: #151515;
        --muted: #717171;
        --line: #dedbd5;
        --line-strong: #aaa49a;
        --paper: #ffffff;
        --wash: #f7f6f3;
        --accent: #2f2d29;
        --accent-soft: #eee9df;
        --shadow: 0 24px 70px rgba(27, 25, 22, 0.08);
      }

      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        background: var(--paper);
        color: var(--ink);
        font-family:
          Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          "Segoe UI", sans-serif;
        letter-spacing: 0;
        height: 100vh;
        height: 100svh;
        height: 100dvh;
        min-height: 100svh;
        overflow: hidden;
      }

      button {
        font: inherit;
      }

      .studio-shell {
        display: flex;
        flex-direction: column;
        height: 100vh;
        height: 100svh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
      }

      .topbar {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: clamp(12px, 2.1svh, 24px) clamp(20px, 4vw, 56px);
        border-bottom: 1px solid var(--line);
      }

      .brand {
        display: flex;
        flex-direction: column;
        gap: 5px;
      }

      .brand-mark {
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }

      .brand span:last-child {
        color: var(--muted);
        font-size: 0.92rem;
      }

      .progress-shell {
        display: grid;
        gap: 10px;
        min-width: min(620px, 48vw);
      }

      .step-count {
        color: var(--ink);
        font-size: 0.76rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-align: right;
        text-transform: uppercase;
      }

      .step-meter {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        color: var(--muted);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        flex-wrap: wrap;
      }

      .meter-step {
        display: flex;
        align-items: center;
        gap: 10px;
        transition: color 240ms ease;
      }

      .meter-step::before {
        content: attr(data-step);
        display: grid;
        place-items: center;
        width: 28px;
        height: 28px;
        border: 1px solid var(--line);
        border-radius: 50%;
        color: var(--muted);
        font-size: 0.72rem;
        transition: border-color 240ms ease, color 240ms ease, background 240ms ease;
      }

      .meter-step:not(:last-child)::after {
        content: "";
        width: clamp(14px, 2vw, 36px);
        height: 1px;
        background: var(--line);
      }

      .meter-step.is-active {
        color: var(--ink);
      }

      .meter-step.is-active::before {
        border-color: var(--ink);
        background: var(--ink);
        color: #fff;
      }

      .meter-step.is-complete::before {
        border-color: var(--ink);
        color: var(--ink);
      }

      .progress-track {
        height: 3px;
        overflow: hidden;
        border-radius: 999px;
        background: var(--line);
      }

      .progress-track span {
        display: block;
        width: 0;
        height: 100%;
        border-radius: inherit;
        background: var(--ink);
        transition: width 260ms ease;
      }

      main {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        padding: clamp(14px, 3.2svh, 42px) clamp(20px, 4vw, 56px) clamp(12px, 2.4svh, 28px);
      }

      .configurator {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        width: min(1180px, 100%);
        margin: 0 auto;
      }

      .intro {
        flex: 0 1 auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 20px;
        align-items: end;
        margin-bottom: clamp(12px, 2.2svh, 28px);
      }

      .eyebrow {
        margin: 0 0 12px;
        color: var(--muted);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
      }

      h1 {
        margin: 0;
        max-width: 760px;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(1.95rem, 4.2vw, 4.45rem);
        font-weight: 400;
        line-height: 0.98;
      }

      .intro-copy {
        max-width: 330px;
        color: var(--muted);
        font-size: 0.94rem;
        line-height: 1.55;
      }

      .stage {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        opacity: 1;
        transform: translateY(0);
        transition: opacity 320ms ease, transform 320ms ease;
      }

      .stage.is-hidden {
        display: none !important;
      }

      .stage.is-exiting {
        opacity: 0;
        transform: translateY(12px);
      }

      .stage:not(.is-hidden):is(
        #stage-material,
        #stage-door,
        #stage-construction
      ) {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        min-height: 0;
      }

      .stage-heading {
        flex: 0 1 auto;
        display: flex;
        justify-content: space-between;
        gap: 24px;
        align-items: flex-end;
        margin-bottom: clamp(10px, 1.8svh, 20px);
      }

      .stage-heading h2 {
        margin: 0;
        font-size: clamp(1.45rem, 2.6vw, 2.45rem);
        font-weight: 500;
      }

      .stage-heading p {
        margin: 0;
        max-width: 420px;
        color: var(--muted);
        font-size: 0.94rem;
        line-height: 1.5;
      }

      .stage:not(.is-hidden):is(
        #stage-material,
        #stage-door,
        #stage-construction
      ) > :is(.carousel-shell, .material-section, .finish-section:not([hidden])) {
        min-height: 0;
      }

      .stage:not(.is-hidden):is(
        #stage-exterior,
        #stage-finish
      ) > :is(.material-section, .finish-section:not([hidden])) {
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }

      .stage:not(.is-hidden):is(
        #stage-exterior,
        #stage-finish
      ) > :is(.material-section, .finish-section:not([hidden])) > .carousel-shell {
        flex: 1 1 auto;
      }

      .stage:not(.is-hidden):is(
        #stage-material,
        #stage-door,
        #stage-construction
      ) > .action-row {
        align-self: end;
      }

      #stage-exterior .material-section-header,
      #stage-finish .substage-heading {
        display: none;
      }

      #stage-finish .finish-section + .finish-section {
        margin-top: 0;
      }

      .card-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
      }

      .carousel-shell {
        --carousel-arrow-size: 48px;
        --carousel-gutter: clamp(54px, 5.2vw, 68px);
        --carousel-card-basis: calc((100% - (var(--carousel-gutter) * 2) - (var(--carousel-gap) * 2)) / 3);
        --carousel-fade-size: clamp(34px, 5vw, 72px);
        --carousel-gap: 18px;
        --carousel-step-count: 3;
        --carousel-side-padding: var(--carousel-gutter);

        position: relative;
        display: flex;
        flex: 1 1 min(420px, 48svh);
        min-height: 0;
        min-width: 0;
        isolation: isolate;
      }

      .carousel-shell::before,
      .carousel-shell::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 12px;
        z-index: 3;
        width: var(--carousel-fade-size);
        pointer-events: none;
        opacity: 0;
        transition: opacity 240ms ease;
      }

      .carousel-shell::before {
        left: 0;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0));
      }

      .carousel-shell::after {
        right: 0;
        background: linear-gradient(270deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0));
      }

      .carousel-shell[data-can-scroll-left="true"]::before,
      .carousel-shell[data-can-scroll-right="true"]::after {
        opacity: 1;
      }

      .option-scroll {
        position: relative;
        display: flex !important;
        flex: 1 1 auto;
        min-height: 0;
        gap: var(--carousel-gap);
        align-items: stretch;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        padding: 2px var(--carousel-gutter) clamp(6px, 1.2svh, 14px);
        scroll-behavior: smooth;
        scroll-padding-inline: 2px var(--carousel-side-padding);
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        touch-action: pan-x pan-y;
        -webkit-overflow-scrolling: touch;
      }

      .option-scroll::-webkit-scrollbar {
        display: none;
      }

      .choice-card {
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
        color: inherit;
        text-align: left;
        cursor: pointer;
        transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
      }

      .option-scroll > .choice-card,
      .option-scroll > .material-card {
        flex: 0 0 var(--carousel-card-basis);
        min-width: 0;
        min-height: 0;
        height: auto;
        scroll-snap-align: start;
        scroll-snap-stop: always;
      }

      .choice-card:hover,
      .choice-card:focus-visible {
        border-color: var(--line-strong);
        box-shadow: var(--shadow);
        transform: translateY(-3px);
        outline: none;
      }

      .choice-card[aria-pressed="true"] {
        border-color: var(--ink);
        box-shadow: 0 0 0 1px var(--ink), var(--shadow);
      }

      .choice-card[aria-pressed="true"] .selected-pill {
        opacity: 1;
        transform: translateY(0);
      }

      .card-image {
        flex: 0 1 auto;
        width: 100%;
        aspect-ratio: 1 / 0.94;
        max-height: min(300px, 34svh);
        object-fit: cover;
        object-position: center;
        background: var(--wash);
        border-bottom: 1px solid var(--line);
      }

      .card-body {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
        gap: clamp(8px, 1.4svh, 12px);
        padding: clamp(14px, 1.8vw, 22px);
      }

      .card-kicker {
        color: var(--muted);
        font-size: 0.74rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }

      .choice-card h3 {
        margin: 0;
        font-size: clamp(1.08rem, 1.5vw, 1.35rem);
        font-weight: 500;
      }

      .choice-card p {
        margin: 0;
        color: var(--muted);
        font-size: 0.93rem;
        line-height: 1.55;
      }

      .feature-list {
        display: grid;
        gap: 10px;
        margin: auto 0 0;
        padding: 0;
        list-style: none;
        color: #393735;
        font-size: 0.92rem;
      }

      .feature-list [role="listitem"] {
        display: grid;
        grid-template-columns: 18px 1fr;
        gap: 10px;
        align-items: center;
      }

      .feature-list [role="listitem"]::before {
        content: "";
        width: 6px;
        height: 6px;
        border: 1px solid var(--line-strong);
        border-radius: 50%;
      }

      .selected-pill {
        position: absolute;
        top: 14px;
        right: 14px;
        opacity: 0;
        transform: translateY(-4px);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.92);
        color: var(--ink);
        padding: 8px 12px;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        transition: opacity 180ms ease, transform 180ms ease;
      }

      .material-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
      }

      .material-section + .material-section {
        margin-top: 34px;
      }

      .material-section-header {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        align-items: end;
        margin-bottom: 16px;
      }

      .material-section-header h3 {
        margin: 0;
        font-size: clamp(1.25rem, 2vw, 1.7rem);
        font-weight: 500;
      }

      .material-section-header p {
        margin: 0;
        max-width: 420px;
        color: var(--muted);
        line-height: 1.55;
      }

      .material-card {
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
        cursor: pointer;
        transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
      }

      .material-card:hover,
      .material-card:focus-visible {
        border-color: var(--line-strong);
        box-shadow: var(--shadow);
        transform: translateY(-3px);
        outline: none;
      }

      .material-card[aria-pressed="true"] {
        border-color: var(--ink);
        box-shadow: 0 0 0 1px var(--ink), var(--shadow);
      }

      .material-card[aria-pressed="true"] .selected-pill {
        opacity: 1;
        transform: translateY(0);
      }

      .finish-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
      }

      .carousel-controls {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        z-index: 4;
        pointer-events: none;
        display: flex;
        justify-content: space-between;
        padding-inline: calc((var(--carousel-gutter) - var(--carousel-arrow-size)) / 2);
        transform: translateY(-50%);
      }

      .carousel-arrow {
        display: grid;
        place-items: center;
        width: var(--carousel-arrow-size);
        height: var(--carousel-arrow-size);
        border: 1px solid rgba(21, 21, 21, 0.12);
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.72);
        color: var(--ink);
        cursor: pointer;
        font-size: 1.3rem;
        line-height: 1;
        pointer-events: auto;
        box-shadow: 0 18px 48px rgba(27, 25, 22, 0.13);
        backdrop-filter: blur(16px) saturate(135%);
        -webkit-backdrop-filter: blur(16px) saturate(135%);
        transition: border-color 200ms ease, background 200ms ease, opacity 200ms ease, transform 200ms ease, box-shadow 200ms ease;
      }

      .carousel-arrow:hover:not(:disabled),
      .carousel-arrow:focus-visible {
        border-color: rgba(21, 21, 21, 0.24);
        background: rgba(255, 255, 255, 0.88);
        box-shadow: 0 22px 58px rgba(27, 25, 22, 0.17);
        outline: none;
        transform: scale(1.035);
      }

      .carousel-arrow:disabled {
        opacity: 0;
        cursor: default;
        pointer-events: none;
      }

      .carousel-arrow[data-direction="-1"] {
        margin-left: 2px;
      }

      .carousel-arrow[data-direction="1"] {
        margin-right: 2px;
      }

      @media (prefers-reduced-motion: reduce) {
        .stage,
        .meter-step,
        .meter-step::before,
        .progress-track span,
        .choice-card,
        .material-card,
        .carousel-shell::before,
        .carousel-shell::after,
        .carousel-arrow {
          transition-duration: 1ms;
        }

        .option-scroll {
          scroll-behavior: auto;
        }
      }

      @media (max-height: 820px) {
        .topbar {
          padding-block: 10px;
        }

        main {
          padding-block: 12px;
        }

        .intro {
          gap: 14px;
          margin-bottom: 12px;
        }

        .eyebrow {
          margin-bottom: 8px;
        }

        .intro-copy {
          font-size: 0.88rem;
          line-height: 1.42;
        }

        .stage-heading {
          gap: 16px;
          margin-bottom: 10px;
        }

        .stage-heading p {
          font-size: 0.88rem;
          line-height: 1.4;
        }

        .carousel-shell {
          --carousel-fade-size: clamp(28px, 4vw, 58px);
        }

        .card-image {
          aspect-ratio: 1 / 0.86;
          max-height: min(240px, 29svh);
        }

        .texture,
        .finish-visual {
          max-height: min(210px, 26svh);
        }

        .card-body,
        .door-grid .choice-card .card-body {
          gap: 8px;
          padding-block: 14px;
        }

        .choice-card p,
        .material-info span {
          line-height: 1.42;
        }

        .action-row {
          margin-top: 8px;
        }
      }

      @media (max-height: 700px) {
        .brand span:last-child,
        .intro-copy,
        .stage-heading p {
          display: none;
        }

        .progress-shell {
          gap: 6px;
        }

        .step-meter {
          gap: 7px;
        }

        .meter-step {
          gap: 7px;
        }

        .meter-step::before {
          width: 24px;
          height: 24px;
        }

        .intro {
          margin-bottom: 10px;
        }

        h1 {
          font-size: clamp(1.72rem, 3.4vw, 3.05rem);
        }

        .stage-heading h2 {
          font-size: clamp(1.26rem, 2vw, 1.8rem);
        }

        .card-image {
          aspect-ratio: 1 / 0.78;
          max-height: min(190px, 25svh);
        }

        .texture,
        .finish-visual {
          max-height: min(170px, 23svh);
        }

        .card-body,
        .material-info,
        .door-grid .choice-card .card-body {
          padding-block: 12px;
        }

        .primary-action,
        .secondary-action {
          min-height: 44px;
        }
      }

      .layout-grid,
      .room-type-grid,
      .premium-grid {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 16px;
      }

      .stage:not(.is-hidden)#stage-dimensions {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        min-height: 0;
      }

      .room-layout-scroll {
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 4px;
        scrollbar-width: thin;
      }

      .room-layout-scroll::after {
        content: "";
        position: sticky;
        bottom: 0;
        z-index: 2;
        flex: 0 0 46px;
        margin-top: -46px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 82%);
        pointer-events: none;
      }

      .layout-action-row {
        position: relative;
        z-index: 3;
        margin-top: max(180px, 46svh);
        padding-bottom: 2px;
      }

      .layout-card {
        flex: 0 0 auto;
        height: 100%;
        min-height: 0;
      }

      .compact-choice .card-body,
      .premium-card .card-body {
        justify-content: center;
      }

      .compact-choice {
        min-height: 220px;
      }

      .premium-card {
        min-height: 240px;
      }

      .visual-card .card-image {
        aspect-ratio: 1 / 0.94;
        max-height: min(300px, 34svh);
      }

      @media (max-height: 820px) {
        .visual-card .card-image {
          aspect-ratio: 1 / 0.86;
          max-height: min(240px, 29svh);
        }
      }

      @media (max-height: 700px) {
        .visual-card .card-image {
          aspect-ratio: 1 / 0.78;
          max-height: min(190px, 25svh);
        }
      }

      .island-block {
        position: absolute;
        left: 31px;
        top: 36px;
        width: 24px;
        height: 14px;
        border: 4px solid var(--ink);
        border-radius: 999px;
      }

      #stage-layout .option-scroll {
        flex: 1 1 auto;
        height: 100%;
        min-height: 0;
      }

      #stage-layout .carousel-shell {
        flex: 0 0 clamp(300px, 43svh, 390px);
        height: clamp(300px, 43svh, 390px);
        min-height: 0;
      }

      #stage-layout .option-scroll > .choice-card {
        height: 100%;
        min-height: 0;
      }

      .layout-icon {
        display: grid;
        flex: 0 0 clamp(132px, 22svh, 170px);
        place-items: center;
        height: clamp(132px, 22svh, 170px);
        min-height: 0;
        background: var(--wash);
        border-bottom: 1px solid var(--line);
      }

      .layout-symbol {
        position: relative;
        width: 86px;
        height: 86px;
      }

      .layout-wall {
        position: absolute;
        background: var(--ink);
        border-radius: 999px;
      }

      .wall-top,
      .wall-bottom {
        left: 13px;
        right: 13px;
        height: 4px;
      }

      .wall-top {
        top: 16px;
      }

      .wall-bottom {
        bottom: 16px;
      }

      .wall-left,
      .wall-right {
        top: 16px;
        bottom: 16px;
        width: 4px;
      }

      .wall-left {
        left: 13px;
      }

      .wall-right {
        right: 13px;
      }

      .wall-custom {
        position: absolute;
        width: 62px;
        height: 4px;
        background: var(--ink);
        border-radius: 999px;
        transform-origin: left center;
      }

      .wall-custom:nth-child(1) {
        left: 13px;
        top: 24px;
        transform: rotate(0deg);
      }

      .wall-custom:nth-child(2) {
        left: 28px;
        top: 40px;
        transform: rotate(42deg);
      }

      .wall-custom:nth-child(3) {
        left: 30px;
        top: 67px;
        transform: rotate(-20deg);
      }

      .room-helper {
        margin-top: clamp(16px, 2.4svh, 28px);
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--wash);
        padding: 18px 20px;
        color: var(--muted);
        line-height: 1.55;
      }

      .wall-section {
        overflow: visible;
        margin-top: clamp(22px, 3svh, 34px);
      }

      .wall-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
      }

      .wall-card {
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
        padding: 20px;
      }

      .wall-card h4 {
        margin: 0 0 16px;
        font-size: 1rem;
        font-weight: 600;
      }

      .field-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }

      .field label,
      .optional-field label {
        display: block;
        margin-bottom: 7px;
        color: var(--muted);
        font-size: 0.76rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }

      .field input,
      .optional-field input,
      .optional-field textarea {
        width: 100%;
        min-height: 44px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
        color: var(--ink);
        font: inherit;
        padding: 10px 12px;
        transition: border-color 180ms ease, box-shadow 180ms ease;
      }

      .optional-field textarea {
        min-height: 92px;
        resize: vertical;
      }

      .field input:focus,
      .optional-field input:focus,
      .optional-field textarea:focus {
        border-color: var(--ink);
        box-shadow: 0 0 0 1px var(--ink);
        outline: none;
      }

      .optional-details {
        overflow: visible;
        display: grid;
        gap: 12px;
        margin-top: clamp(18px, 2.5svh, 28px);
      }

      .optional-details details {
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
        padding: 0 18px;
      }

      .optional-details summary {
        cursor: pointer;
        list-style: none;
        padding: 18px 0;
        font-weight: 600;
      }

      .optional-details summary::-webkit-details-marker {
        display: none;
      }

      .optional-details summary::after {
        content: "+";
        float: right;
        color: var(--muted);
      }

      .optional-details details[open] summary::after {
        content: "-";
      }

      .optional-detail-body {
        display: grid;
        gap: 14px;
        padding: 0 0 18px;
      }

      .custom-wall-action {
        margin-top: 14px;
      }

      .finish-section[hidden] {
        display: none;
      }

      .finish-section + .finish-section {
        margin-top: 34px;
      }

      .finish-visual {
        position: relative;
        display: grid;
        flex: 0 1 auto;
        place-items: center;
        aspect-ratio: 1.28 / 1;
        max-height: min(250px, 30svh);
        overflow: hidden;
        border-bottom: 1px solid var(--line);
      }

      .finish-visual::before {
        content: "";
        position: absolute;
        inset: 0;
        background: inherit;
      }

      .cabinet-preview {
        position: relative;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        width: 74%;
        height: 56%;
        border: 1px solid rgba(20, 20, 20, 0.18);
        box-shadow: 0 18px 40px rgba(22, 20, 17, 0.08);
      }

      .cabinet-preview span {
        border-right: 1px solid rgba(20, 20, 20, 0.17);
        background: rgba(255, 255, 255, 0.08);
      }

      .cabinet-preview span:last-child {
        border-right: 0;
      }

      .finish-visual.warm-white {
        background:
          radial-gradient(circle at 20% 24%, rgba(255,255,255,0.76), transparent 14%),
          linear-gradient(135deg, #f4f0e8, #e6dfd2);
      }

      .finish-visual.pure-white {
        background:
          radial-gradient(circle at 22% 24%, rgba(255,255,255,0.92), transparent 15%),
          linear-gradient(135deg, #ffffff, #efefec);
      }

      .finish-visual.greige {
        background:
          radial-gradient(circle at 18% 20%, rgba(255,255,255,0.44), transparent 14%),
          linear-gradient(135deg, #c8c1b5, #9e9689);
      }

      .finish-visual.charcoal {
        background:
          linear-gradient(140deg, rgba(255,255,255,0.16), transparent 34%),
          linear-gradient(135deg, #454441, #232321);
      }

      .finish-visual.matte-black {
        background:
          linear-gradient(140deg, rgba(255,255,255,0.08), transparent 36%),
          linear-gradient(135deg, #1f1f1e, #0b0b0b);
      }

      .finish-visual.custom-color {
        background:
          linear-gradient(135deg, rgba(255,255,255,0.66), transparent 44%),
          conic-gradient(from 210deg, #e9e2d5, #b8b4aa, #59605d, #191918, #f8f7f2, #e9e2d5);
      }

      .finish-visual.white-oak {
        background:
          linear-gradient(120deg, rgba(255,255,255,0.25), transparent 40%, rgba(0,0,0,0.06)),
          repeating-linear-gradient(90deg, #d9bd92 0 8px, #ecd6b5 8px 15px, #c69f6f 15px 17px, #f1dfc2 17px 26px);
      }

      .finish-visual.walnut {
        background:
          linear-gradient(110deg, rgba(255,255,255,0.12), transparent 40%, rgba(0,0,0,0.2)),
          repeating-linear-gradient(88deg, #5b3b27 0 8px, #7c5638 8px 13px, #432719 13px 16px, #916b49 16px 24px);
      }

      .finish-visual.alder {
        background:
          linear-gradient(120deg, rgba(255,255,255,0.2), transparent 42%, rgba(0,0,0,0.08)),
          repeating-linear-gradient(92deg, #c69263 0 7px, #e1b07c 7px 14px, #b97a4d 14px 17px, #d5a070 17px 24px);
      }

      .finish-visual.natural {
        background:
          linear-gradient(110deg, rgba(255,255,255,0.2), transparent 40%),
          repeating-linear-gradient(90deg, #d9bd92 0 8px, #ecd6b5 8px 15px, #c69f6f 15px 17px, #f1dfc2 17px 26px);
      }

      .finish-visual.light-stain {
        background:
          linear-gradient(110deg, rgba(255,255,255,0.14), transparent 40%),
          repeating-linear-gradient(90deg, #cda66f 0 8px, #e0bd87 8px 15px, #b9874e 15px 17px, #e9c994 17px 26px);
      }

      .finish-visual.medium-stain {
        background:
          linear-gradient(110deg, rgba(255,255,255,0.1), transparent 40%, rgba(0,0,0,0.11)),
          repeating-linear-gradient(90deg, #95663d 0 8px, #b27e4c 8px 15px, #744626 15px 17px, #c08c58 17px 26px);
      }

      .finish-visual.dark-stain {
        background:
          linear-gradient(110deg, rgba(255,255,255,0.08), transparent 40%, rgba(0,0,0,0.18)),
          repeating-linear-gradient(90deg, #4a2d1c 0 8px, #654127 8px 15px, #2f1b12 15px 17px, #765036 17px 26px);
      }

      .finish-visual.matte-clear {
        background:
          linear-gradient(110deg, rgba(255,255,255,0.34), transparent 35%, rgba(0,0,0,0.04)),
          repeating-linear-gradient(90deg, #dec49a 0 8px, #f2dbb6 8px 15px, #cda46f 15px 17px, #f5e4c5 17px 26px);
      }

      .door-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
      }

      .door-grid .choice-card .card-body {
        gap: 12px;
        padding: 20px;
      }

      .door-grid .choice-card h3 {
        font-size: 1.12rem;
      }

      .substage-heading {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        align-items: end;
        margin-bottom: 18px;
      }

      .substage-heading h3 {
        margin: 0;
        font-size: clamp(1.25rem, 2vw, 1.7rem);
        font-weight: 500;
      }

      .substage-heading p {
        margin: 0;
        max-width: 400px;
        color: var(--muted);
        line-height: 1.55;
      }

      .panel-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
      }

      .texture {
        flex: 0 1 auto;
        aspect-ratio: 1.15 / 1;
        max-height: min(240px, 29svh);
        border-bottom: 1px solid var(--line);
      }

      .texture.white-oak {
        background:
          linear-gradient(90deg, rgba(255,255,255,0.16), transparent 35%, rgba(0,0,0,0.05) 63%, transparent),
          repeating-linear-gradient(90deg, #d8c2a3 0 7px, #ead8bd 7px 11px, #caa981 11px 13px, #f1dfc2 13px 20px);
      }

      .texture.veneer-panel {
        background:
          linear-gradient(120deg, rgba(255,255,255,0.25), transparent 40%, rgba(0,0,0,0.08)),
          repeating-linear-gradient(90deg, #d9bd92 0 8px, #ecd6b5 8px 15px, #c69f6f 15px 17px, #f1dfc2 17px 26px);
      }

      .texture.paint-grade {
        background:
          linear-gradient(135deg, rgba(255,255,255,0.62), transparent 46%),
          radial-gradient(circle at 22% 30%, rgba(255,255,255,0.72), transparent 13%),
          linear-gradient(135deg, #f7f6f2, #e4e1db 55%, #f1efe9);
      }

      .texture.prefinished-maple {
        background:
          linear-gradient(110deg, rgba(255,255,255,0.22), transparent 38%, rgba(0,0,0,0.04)),
          repeating-linear-gradient(92deg, #e2c99f 0 7px, #f2dfbb 7px 13px, #d3ad78 13px 15px, #ead2a7 15px 23px);
      }

      .texture.white-melamine {
        background:
          radial-gradient(circle at 18% 22%, rgba(255,255,255,0.86), transparent 14%),
          linear-gradient(135deg, #ffffff, #efefec 52%, #f9f9f6);
      }

      .texture.walnut {
        background:
          linear-gradient(105deg, rgba(255,255,255,0.1), transparent 42%, rgba(0,0,0,0.2)),
          repeating-linear-gradient(88deg, #5b3b27 0 8px, #7c5638 8px 13px, #432719 13px 16px, #916b49 16px 24px);
      }

      .texture.painted {
        background:
          radial-gradient(circle at 18% 24%, rgba(255,255,255,0.72), transparent 14%),
          linear-gradient(135deg, #faf9f5, #e7e4de 52%, #f5f3ee);
      }

      .texture.charcoal {
        background:
          linear-gradient(140deg, rgba(255,255,255,0.12), transparent 38%),
          repeating-linear-gradient(90deg, #20201f 0 10px, #2b2b29 10px 18px, #171716 18px 24px);
      }

      .texture.glass {
        background:
          repeating-linear-gradient(90deg, rgba(255,255,255,0.7) 0 4px, rgba(159,170,169,0.35) 4px 9px),
          linear-gradient(135deg, #d9e2df, #f7f8f6 45%, #b9c3c0);
      }

      .texture.laminate {
        background:
          linear-gradient(135deg, rgba(255,255,255,0.5), transparent 44%),
          repeating-linear-gradient(45deg, #d8d5cd 0 6px, #efede8 6px 12px, #c7c4bc 12px 13px);
      }

      .material-info {
        flex: 1;
        display: grid;
        min-height: 0;
        gap: clamp(6px, 1svh, 8px);
        padding: clamp(14px, 1.7vw, 18px);
      }

      .material-info strong {
        font-size: 1rem;
        font-weight: 600;
      }

      .material-info span {
        color: var(--muted);
        font-size: 0.88rem;
      }

      .action-row {
        flex: 0 0 auto;
        z-index: 5;
        display: grid;
        grid-template-columns: minmax(118px, 164px) minmax(0, 1fr) minmax(118px, 164px);
        gap: 16px;
        align-items: center;
        width: 100%;
        margin-top: clamp(8px, 1.6svh, 20px);
        padding: clamp(10px, 1.4svh, 14px) 0 0;
        border-top: 1px solid rgba(222, 219, 213, 0.72);
        background: #fff;
      }

      .action-row .secondary-action {
        grid-column: 1;
        justify-self: start;
        width: 100%;
      }

      .action-row .selection-summary {
        grid-column: 2;
        justify-self: center;
        text-align: center;
      }

      .action-row .primary-action {
        grid-column: 3;
        justify-self: end;
        width: 100%;
      }

      #material-back-step {
        pointer-events: none;
        visibility: hidden;
      }

      .selection-summary {
        min-height: 24px;
        color: var(--muted);
        font-size: 0.92rem;
      }

      .visualization-note {
        display: block;
        margin-top: 4px;
        color: var(--muted);
        font-size: 0.78rem;
        line-height: 1.4;
      }

      .visualization-note[hidden] {
        display: none;
      }

      .primary-action,
      .secondary-action {
        min-height: 48px;
        border-radius: 999px;
        padding: 0 24px;
        cursor: pointer;
        transition: background 180ms ease, color 180ms ease, border-color 180ms ease, opacity 180ms ease;
      }

      .primary-action {
        border: 1px solid var(--ink);
        background: var(--ink);
        color: #fff;
      }

      .primary-action:disabled {
        border-color: var(--line);
        background: #f1f0ed;
        color: #9c9891;
        cursor: not-allowed;
      }

      .secondary-action {
        border: 1px solid var(--line);
        background: #fff;
        color: var(--ink);
      }

      .primary-action:not(:disabled):hover,
      .secondary-action:hover {
        background: var(--accent-soft);
        border-color: var(--ink);
        color: var(--ink);
      }

      .final-note {
        margin-top: 26px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--wash);
        padding: 22px;
        color: var(--muted);
        line-height: 1.6;
      }

      .summary-panel {
        display: grid;
        gap: 18px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--wash);
        padding: clamp(24px, 4vw, 42px);
      }

      #stage-summary {
        overflow-y: auto;
        padding-right: 4px;
        scrollbar-width: thin;
      }

      .summary-panel h2 {
        margin: 0;
        font-size: clamp(1.7rem, 3vw, 2.75rem);
        font-weight: 500;
      }

      .summary-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 12px;
        margin-top: 8px;
      }

      .summary-item {
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
        padding: 18px;
      }

      .summary-item span {
        display: block;
        margin-bottom: 8px;
        color: var(--muted);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .summary-item strong {
        font-size: 1rem;
        font-weight: 600;
      }

      .intake-stack {
        display: grid;
        gap: 24px;
      }

      .intake-panel {
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
        padding: clamp(24px, 4vw, 42px);
      }

      .intake-heading {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(260px, 0.45fr);
        gap: 24px;
        align-items: end;
        margin-bottom: 24px;
      }

      .intake-heading h3 {
        margin: 0;
        font-size: clamp(1.45rem, 2.5vw, 2.1rem);
        font-weight: 500;
      }

      .intake-heading p,
      .contact-helper {
        margin: 0;
        color: var(--muted);
        line-height: 1.6;
      }

      .detail-list {
        display: grid;
        gap: 10px;
      }

      .detail-row {
        display: grid;
        grid-template-columns: minmax(120px, 0.38fr) minmax(0, 1fr);
        gap: 14px;
        border-bottom: 1px solid var(--line);
        padding: 12px 0;
      }

      .detail-row:last-child {
        border-bottom: 0;
      }

      .detail-row span {
        color: var(--muted);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .detail-row strong {
        font-weight: 500;
        line-height: 1.55;
      }

      .contact-form {
        display: grid;
        gap: 22px;
      }

      .next-section {
        display: grid;
        gap: 22px;
        border-top: 1px solid var(--line);
        padding-top: 22px;
      }

      .form-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
      }

      .form-grid.secondary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .form-field {
        display: grid;
        gap: 8px;
      }

      .form-field.full {
        grid-column: 1 / -1;
      }

      .form-field label {
        color: var(--muted);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .trap-field {
        position: absolute;
        left: -10000px;
        width: 1px;
        height: 1px;
        overflow: hidden;
      }

      .form-field input,
      .form-field select,
      .form-field textarea {
        width: 100%;
        min-height: 48px;
        border: 1px solid var(--line);
        border-radius: 6px;
        background: #fff;
        color: var(--ink);
        font: inherit;
        padding: 12px 14px;
        transition: border-color 180ms ease, box-shadow 180ms ease;
      }

      .form-field textarea {
        min-height: 132px;
        resize: vertical;
      }

      .form-field input:focus,
      .form-field select:focus,
      .form-field textarea:focus {
        border-color: var(--ink);
        box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
        outline: none;
      }

      .upload-field {
        min-height: 112px;
        border: 1px dashed var(--line-strong);
        border-radius: 8px;
        background: var(--wash);
        padding: 18px;
      }

      .field-note {
        color: var(--muted);
        font-size: 0.82rem;
        line-height: 1.45;
      }

      .upload-list {
        display: grid;
        gap: 8px;
        list-style: none;
        margin: 4px 0 0;
        padding: 0;
      }

      .upload-list:empty {
        display: none;
      }

      .upload-item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        align-items: center;
        border: 1px solid var(--line);
        border-radius: 6px;
        background: #fff;
        padding: 9px 10px;
      }

      .upload-file-name {
        overflow: hidden;
        color: var(--ink);
        font-size: 0.86rem;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .upload-remove {
        min-height: 32px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: #fff;
        color: var(--ink);
        cursor: pointer;
        font: inherit;
        font-size: 0.78rem;
        padding: 0 12px;
      }

      .upload-remove:hover {
        border-color: var(--ink);
        background: var(--accent-soft);
      }

      .system-page {
        display: grid;
        min-height: 100vh;
        place-items: center;
        padding: clamp(28px, 6vw, 72px);
        background: var(--paper);
      }

      .system-panel {
        display: grid;
        width: min(760px, 100%);
        gap: 20px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
        padding: clamp(28px, 5vw, 54px);
        box-shadow: var(--shadow);
      }

      .system-panel h1 {
        margin: 0;
        font-size: clamp(2rem, 5vw, 3.5rem);
        font-weight: 500;
      }

      .system-panel p {
        margin: 0;
        color: var(--muted);
        line-height: 1.65;
      }

      .next-steps {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 12px;
        counter-reset: nextStep;
      }

      .next-step-card {
        min-height: 128px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--wash);
        padding: 18px;
      }

      .next-step-card::before {
        display: grid;
        width: 32px;
        height: 32px;
        place-items: center;
        margin-bottom: 18px;
        border: 1px solid var(--line-strong);
        border-radius: 50%;
        color: var(--muted);
        content: counter(nextStep);
        counter-increment: nextStep;
        font-size: 0.78rem;
        font-weight: 700;
      }

      .next-step-card h4 {
        margin: 0;
        font-size: 0.96rem;
        font-weight: 600;
        line-height: 1.35;
      }

      .submit-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(190px, 240px);
        gap: 16px;
        align-items: center;
        border-top: 1px solid var(--line);
        padding-top: 22px;
      }

      .submit-row .primary-action {
        justify-self: end;
        width: 100%;
      }

      .form-status {
        color: var(--muted);
        font-size: 0.9rem;
      }

      @media (max-width: 980px) {
        .intro,
        .stage-heading {
          grid-template-columns: 1fr;
          align-items: start;
        }

        .stage-heading,
        .material-section-header {
          display: grid;
        }

        .card-grid,
        .material-grid,
        .door-grid,
        .panel-grid,
        .finish-grid,
        .layout-grid,
        .room-type-grid,
        .premium-grid,
        .wall-grid,
        .summary-list {
          grid-template-columns: 1fr 1fr;
        }

        .layout-card {
          height: 100%;
        }

        #stage-layout .carousel-shell {
          flex-basis: clamp(290px, 40svh, 360px);
          height: clamp(290px, 40svh, 360px);
        }

        .layout-icon {
          flex-basis: clamp(124px, 18svh, 152px);
          height: clamp(124px, 18svh, 152px);
        }

        .carousel-shell {
          --carousel-gutter: clamp(48px, 6.4vw, 58px);
          --carousel-card-basis: calc((100% - (var(--carousel-gutter) * 2) - var(--carousel-gap)) / 2.1);
          --carousel-fade-size: clamp(28px, 6vw, 56px);
          --carousel-step-count: 2;
          --carousel-side-padding: var(--carousel-gutter);
        }

        .option-scroll > .choice-card,
        .option-scroll > .material-card {
          flex-basis: var(--carousel-card-basis);
        }

        .progress-shell {
          width: 100%;
          min-width: 0;
        }

        .step-count {
          text-align: left;
        }

        .step-meter {
          justify-content: flex-start;
          align-items: flex-start;
          gap: 8px;
        }

        .meter-step:not(:last-child)::after {
          display: none;
        }

        .intake-heading,
        .form-grid,
        .form-grid.secondary,
        .next-steps {
          grid-template-columns: 1fr 1fr;
        }
      }

      @media (max-width: 680px) {
        .topbar {
          align-items: flex-start;
          flex-direction: column;
          gap: 14px;
        }

        main {
          padding-top: clamp(10px, 2svh, 18px);
        }

        .brand span:last-child,
        .step-meter {
          display: none;
        }

        .intro {
          gap: 12px;
          margin-bottom: clamp(8px, 1.8svh, 16px);
        }

        h1 {
          font-size: clamp(1.55rem, 8vw, 2.2rem);
        }

        .intro-copy,
        .stage-heading p {
          font-size: 0.86rem;
          line-height: 1.42;
        }

        .stage-heading {
          gap: 12px;
          margin-bottom: 12px;
        }

        .stage-heading h2 {
          font-size: 1.32rem;
        }

        .card-grid,
        .material-grid,
        .door-grid,
        .panel-grid,
        .finish-grid,
        .layout-grid,
        .room-type-grid,
        .premium-grid,
        .wall-grid,
        .field-grid,
        .summary-list {
          grid-template-columns: 1fr;
        }

        .room-layout-scroll {
          padding-right: 0;
        }

        .layout-card {
          height: 100%;
        }

        #stage-layout .carousel-shell {
          flex-basis: clamp(270px, 44svh, 330px);
          height: clamp(270px, 44svh, 330px);
        }

        .layout-icon {
          flex-basis: clamp(112px, 18svh, 136px);
          height: clamp(112px, 18svh, 136px);
        }

        .option-scroll {
          min-height: 0;
          padding-bottom: 10px;
          scroll-snap-type: x proximity;
        }

        .carousel-shell {
          --carousel-arrow-size: 42px;
          --carousel-card-basis: calc(100% - (var(--carousel-gutter) * 2) - 24px);
          --carousel-fade-size: 34px;
          --carousel-gutter: 46px;
          --carousel-gap: 14px;
          --carousel-step-count: 1;
          --carousel-side-padding: var(--carousel-gutter);

          min-height: 0;
        }

        .option-scroll > .choice-card,
        .option-scroll > .material-card {
          flex-basis: var(--carousel-card-basis);
          min-height: 0;
          scroll-snap-stop: normal;
        }

        .carousel-arrow {
          font-size: 1.12rem;
        }

        .card-body {
          padding: clamp(14px, 3svh, 20px);
        }

        .action-row {
          align-items: stretch;
          flex-direction: column;
          gap: 10px;
          grid-template-columns: 1fr;
        }

        .action-row .secondary-action,
        .action-row .selection-summary,
        .action-row .primary-action {
          grid-column: 1;
          justify-self: stretch;
        }

        .intake-heading,
        .form-grid,
        .form-grid.secondary,
        .next-steps,
        .detail-row {
          grid-template-columns: 1fr;
        }

        .submit-row {
          align-items: stretch;
          flex-direction: column;
          grid-template-columns: 1fr;
        }

        .submit-row .primary-action {
          justify-self: stretch;
        }

        .primary-action,
        .secondary-action {
          width: 100%;
        }
      }

      /*
        Active configurator card source of truth.
        Material, Door Style, and Construction Method share one locked card
        structure: fixed render row, fixed content row, and reserved text rows.
      */
      :root {
        --config-card-image-height: 300px;
        --config-card-content-height: 210px;
        --config-card-height: calc(var(--config-card-image-height) + var(--config-card-content-height));
        --config-card-padding: 20px;
        --config-card-gap: 10px;
        --config-card-kicker-height: 16px;
        --config-card-title-height: 54px;
      }

      .option-scroll > :is(.choice-card, .material-card) {
        flex-basis: var(--carousel-card-basis);
        height: var(--config-card-height);
        min-height: var(--config-card-height);
      }

      :is(#stage-material, #stage-door, #stage-construction) :is(.choice-card, .material-card) {
        height: var(--config-card-height);
        min-height: var(--config-card-height);
      }

      :is(#stage-material, #stage-door, #stage-construction) .card-image,
      :is(#stage-material, #stage-door, #stage-construction) .visual-card .card-image {
        flex: 0 0 var(--config-card-image-height);
        width: 100%;
        height: var(--config-card-image-height);
        max-height: none;
        aspect-ratio: auto;
        object-fit: contain;
        object-position: center;
      }

      :is(#stage-material, #stage-door, #stage-construction) .card-body,
      .door-grid .choice-card .card-body {
        display: grid;
        grid-template-rows: var(--config-card-kicker-height) var(--config-card-title-height) 1fr;
        flex: 0 0 var(--config-card-content-height);
        height: var(--config-card-content-height);
        min-height: var(--config-card-content-height);
        gap: var(--config-card-gap);
        padding: var(--config-card-padding);
      }

      :is(#stage-material, #stage-door, #stage-construction) .card-kicker {
        min-height: var(--config-card-kicker-height);
        color: var(--muted);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        line-height: var(--config-card-kicker-height);
        overflow: visible;
        text-transform: uppercase;
        white-space: nowrap;
      }

      :is(#stage-material, #stage-door, #stage-construction) .card-kicker:empty::before {
        content: "\00a0";
      }

      :is(#stage-material, #stage-door, #stage-construction) :is(.choice-card, .material-card) h3,
      .door-grid .choice-card h3 {
        display: block;
        min-height: var(--config-card-title-height);
        margin: 0;
        font-size: 1.12rem;
        font-weight: 500;
        line-height: 1.25;
      }

      :is(#stage-material, #stage-door, #stage-construction) :is(.choice-card, .material-card) p {
        margin: 0;
        color: var(--muted);
        font-size: 0.9rem;
        line-height: 1.42;
        overflow: visible;
      }

      @media (max-height: 820px) {
        :root {
          --config-card-image-height: 250px;
          --config-card-content-height: 210px;
        }
      }

      @media (max-height: 700px) {
        :root {
          --config-card-image-height: 200px;
          --config-card-content-height: 210px;
          --config-card-padding: 18px;
          --config-card-gap: 8px;
          --config-card-title-height: 50px;
        }
      }

      @media (max-width: 680px) and (orientation: portrait) {
        :root {
          --config-card-image-height: clamp(210px, 30svh, 246px);
          --config-card-content-height: 228px;
          --config-card-padding: 18px;
          --config-card-gap: 9px;
          --config-card-title-height: 54px;
        }

        .stage:not(.is-hidden):is(
          #stage-material,
          #stage-door,
          #stage-construction
        ) > .carousel-shell {
          --carousel-card-basis: calc(100% - (var(--carousel-gutter) * 2) - 6px);
          --carousel-fade-size: 22px;
          --carousel-gap: 14px;
          --carousel-gutter: clamp(16px, 5vw, 22px);
          --carousel-step-count: 1;
          --carousel-side-padding: var(--carousel-gutter);
        }

        .stage:not(.is-hidden):is(
          #stage-material,
          #stage-door,
          #stage-construction
        ) .option-scroll {
          padding-inline: var(--carousel-gutter);
          scroll-snap-type: x mandatory;
        }

        .stage:not(.is-hidden):is(
          #stage-material,
          #stage-door,
          #stage-construction
        ) .option-scroll > :is(.choice-card, .material-card) {
          flex-basis: var(--carousel-card-basis);
          scroll-snap-align: start;
          scroll-snap-stop: always;
        }
      }

      /*
        Content-first scrolling rule.
        JavaScript adds this class only after testing that the active fixed
        layout would make stage content or navigation controls inaccessible.
      */
      body.is-scroll-fallback {
        height: auto;
        min-height: 100vh;
        min-height: 100svh;
        min-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
      }

      body.is-scroll-fallback .studio-shell {
        height: auto;
        min-height: 100vh;
        min-height: 100svh;
        min-height: 100dvh;
        overflow: visible;
      }

      body.is-scroll-fallback main {
        flex: 0 0 auto;
        min-height: auto;
        overflow: visible;
      }

      body.is-scroll-fallback .configurator {
        height: auto;
        min-height: 0;
      }

      body.is-scroll-fallback .stage {
        flex: 0 0 auto;
        min-height: auto;
        overflow: visible;
      }

      body.is-scroll-fallback .stage:not(.is-hidden):is(
        #stage-material,
        #stage-door,
        #stage-construction
      ) {
        display: flex;
        flex-direction: column;
        min-height: auto;
      }

      body.is-scroll-fallback .stage:not(.is-hidden):is(
        #stage-material,
        #stage-door,
        #stage-construction
      ) > .carousel-shell {
        flex: 0 0 auto;
        min-height: calc(var(--config-card-height) + 18px);
      }

      body.is-scroll-fallback #stage-summary {
        overflow: visible;
      }

      body.is-scroll-fallback .action-row {
        flex: 0 0 auto;
      }