/* Modular builder — /pages/modular configurator.
   Mobile-first; desktop layout at 990px. See README.md PART 2. */

.mb {
  background: var(--mb-bg, #ffffff);
  color: #1f1f1f;
  padding: 32px 24px 72px;
}

.mb__inner {
  display: block;
  max-width: 1408px;
  margin: 0 auto;
}

.mb__empty {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 24px;
  text-align: center;
  color: #6b6357;
}

/* Breadcrumb */
.mb__crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #6b6357;
}

.mb__crumb a {
  color: inherit;
  text-decoration: none;
}

.mb__crumb a:hover {
  color: #1f1f1f;
}

.mb__crumb-current {
  color: #1f1f1f;
}

/* Range switcher */
.mb__switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}

.mb-pill {
  padding: 11px 22px;
  border: 1px solid rgba(36, 36, 36, 0.18);
  background: transparent;
  color: #1f1f1f;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.mb-pill:hover {
  border-color: #1f1f1f;
}

.mb-pill--active {
  background: #1f1f1f;
  border-color: #1f1f1f;
  color: #f2efe8;
}

/* Range header */
.mb-range__header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 48px;
}

.mb-range__eyebrow {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mb-accent, #9c614a);
}

.mb-range__title {
  margin: 0 0 18px;
  font-family: "Urbanist", sans-serif;
  font-size: clamp(40px, 11vw, 88px);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.02em;
}

.mb-range__blurb {
  max-width: 480px;
  font-size: 16px;
  line-height: 1.6;
  color: #4a463e;
}

.mb-range__blurb p {
  margin: 0 0 10px;
}

.mb-range__features {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mb-range__features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.mb-range__features svg {
  flex: 0 0 auto;
  color: var(--mb-accent, #9c614a);
}

.mb-range__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Configurator */
.mb-config {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  background: var(--mb-surface, #f2efe8);
  padding: 28px 20px;
}

.mb-config__main {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

/* Steps */
.mb-step__num {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mb-accent, #9c614a);
}

.mb-step__title {
  margin: 0 0 6px;
  font-family: "Urbanist", sans-serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.005em;
}

.mb-step__hint {
  margin: 0 0 22px;
  font-size: 14px;
  color: #6b6357;
}

.mb-step__alert {
  margin: 0;
  padding: 14px 16px;
  background: rgba(156, 97, 74, 0.1);
  border: 1px solid rgba(156, 97, 74, 0.3);
  font-size: 13px;
  color: #4a463e;
}

/* Fabric grid */
.mb-fabrics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 12px;
}

.mb-fabric {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(36, 36, 36, 0.12);
  background: #ffffff;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.mb-fabric:hover {
  border-color: rgba(36, 36, 36, 0.4);
}

.mb-fabric--selected {
  border-color: var(--mb-accent, #9c614a);
  box-shadow: inset 0 0 0 1px var(--mb-accent, #9c614a);
}

.mb-fabric__swatch {
  display: block;
  aspect-ratio: 1;
  background: #ebe5d6;
  overflow: hidden;
}

.mb-fabric__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mb-fabric__name {
  font-size: 12px;
  letter-spacing: 0.02em;
  text-align: center;
}

/* Piece cards */
.mb-pieces {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mb-piece {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid rgba(36, 36, 36, 0.1);
  transition: border-color 0.18s ease;
}

.mb-piece--active {
  border-color: var(--mb-accent, #9c614a);
}

.mb-piece__media {
  overflow: hidden;
}

.mb-piece__img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.mb-piece__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mb-piece__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.mb-piece__name {
  margin: 0;
  font-family: "Urbanist", sans-serif;
  font-size: 18px;
  font-weight: 500;
}

.mb-piece__dims {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #6b6357;
}

.mb-piece__blurb {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #6b6357;
}

.mb-piece__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 6px;
}

.mb-piece__price {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
}

.mb-piece__price-was {
  margin-left: 6px;
  font-size: 13px;
  font-weight: 400;
  color: #6b6357;
}

.mb-piece__price-now {
  color: #79482c;
}

/* Stepper */
.mb-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(36, 36, 36, 0.2);
}

.mb-stepper__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  color: #1f1f1f;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.mb-stepper__btn:hover {
  background: rgba(36, 36, 36, 0.06);
}

.mb-stepper__val {
  min-width: 36px;
  text-align: center;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* Build summary */
.mb-summary {
  align-self: start;
  background: #ffffff;
  border: 1px solid rgba(36, 36, 36, 0.1);
  padding: 24px;
}

.mb-summary__title {
  margin: 0 0 16px;
  font-family: "Urbanist", sans-serif;
  font-size: 20px;
  font-weight: 500;
}

.mb-summary__fabric {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(36, 36, 36, 0.1);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: #4a463e;
}

.mb-summary__empty {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #6b6357;
}

.mb-summary__lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mb-summary__line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
}

.mb-summary__line-name {
  color: #4a463e;
}

.mb-summary__line-price {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mb-summary__totals {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(36, 36, 36, 0.1);
}

.mb-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.mb-summary__row--total {
  font-family: "Urbanist", sans-serif;
  font-size: 18px;
  font-weight: 500;
}

.mb-summary__bonus {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
  font-size: 14px;
}

.mb-summary__bonus-name {
  color: #4a463e;
}

.mb-summary__bonus-free {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mb-accent, #9c614a);
}

.mb-summary__atc {
  width: 100%;
  margin-top: 18px;
  padding: 16px 24px;
  border: none;
  background: #242424;
  color: #f2efe8;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.18s ease;
}

.mb-summary__atc:hover:not(:disabled) {
  opacity: 0.88;
}

.mb-summary__atc:disabled {
  background: rgba(36, 36, 36, 0.18);
  color: rgba(36, 36, 36, 0.5);
  cursor: not-allowed;
}

.mb-summary__note {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: #a23b2a;
}

/* Other ranges */
.mb-other {
  margin-top: 64px;
}

.mb-other__title {
  margin: 0 0 24px;
  font-family: "Urbanist", sans-serif;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.mb-other__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.mb-other-card[hidden] {
  display: none;
}

.mb-other-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 0 16px;
  border: 1px solid rgba(36, 36, 36, 0.1);
  background: #ffffff;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease;
}

.mb-other-card:hover {
  border-color: #1f1f1f;
}

.mb-other-card__media {
  overflow: hidden;
}

.mb-other-card__img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.mb-other-card__name {
  padding: 0 16px;
  font-family: "Urbanist", sans-serif;
  font-size: 20px;
}

.mb-other-card__cta {
  padding: 0 16px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--mb-accent, #9c614a);
}

/* Popular-setup prompt */
.mb-preset {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 18px;
  background: #ffffff;
  border: 1px solid var(--mb-accent, #9c614a);
}

.mb-preset__title {
  margin: 0 0 2px;
  font-family: "Urbanist", sans-serif;
  font-size: 15px;
  font-weight: 500;
}

.mb-preset__hint {
  margin: 0;
  max-width: 42ch;
  font-size: 13px;
  line-height: 1.5;
  color: #6b6357;
}

.mb-preset__btn {
  flex: 0 0 auto;
  padding: 12px 20px;
  border: none;
  background: var(--mb-accent, #9c614a);
  color: #ffffff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.18s ease;
}

.mb-preset__btn:hover {
  opacity: 0.88;
}

/* Free-piece progress */
.mb-progress {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(36, 36, 36, 0.1);
}

.mb-progress__track {
  height: 6px;
  background: rgba(36, 36, 36, 0.1);
  overflow: hidden;
}

.mb-progress__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--mb-accent, #9c614a);
  transition: width 0.3s ease;
}

.mb-progress__msg {
  margin: 8px 0 0;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #4a463e;
}

.mb-progress--complete .mb-progress__msg {
  color: var(--mb-accent, #9c614a);
  font-weight: 500;
}

/* Trust strip */
.mb-trust {
  list-style: none;
  margin: 48px 0 0;
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  background: var(--mb-surface, #f2efe8);
}

.mb-trust__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #4a463e;
}

.mb-trust__item svg {
  flex: 0 0 auto;
  color: #9c614a;
}

/* Mobile sticky bar — hidden on desktop, fixed bottom on mobile */
.mb-bar {
  display: none;
}

.mb-bar__progress {
  height: 4px;
  background: rgba(36, 36, 36, 0.12);
  overflow: hidden;
}

.mb-bar__progress-fill {
  display: block;
  height: 100%;
  width: 0;
  background: #9c614a;
  transition: width 0.3s ease;
}

.mb-bar__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

.mb-bar__info {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.mb-bar__count {
  font-size: 12px;
  color: #6b6357;
}

.mb-bar__total {
  font-family: "Urbanist", sans-serif;
  font-size: 18px;
  font-weight: 500;
}

.mb-bar__atc {
  margin-left: auto;
  padding: 14px 26px;
  border: none;
  background: #242424;
  color: #f2efe8;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.mb-bar__atc:disabled {
  background: rgba(36, 36, 36, 0.18);
  color: rgba(36, 36, 36, 0.5);
  cursor: not-allowed;
}

@media screen and (max-width: 989px) {
  .mb {
    padding-bottom: 116px;
  }

  .mb-bar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    background: #ffffff;
    border-top: 1px solid rgba(36, 36, 36, 0.14);
    box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.09);
  }
}

/* Desktop */
@media screen and (min-width: 990px) {
  .mb {
    padding: 40px 96px 110px;
  }

  .mb-trust {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }

  .mb-range__header {
    grid-template-columns: 1fr 0.85fr;
    gap: 64px;
    align-items: center;
    margin-bottom: 64px;
  }

  .mb-range__img {
    aspect-ratio: 5 / 4;
  }

  .mb-config {
    grid-template-columns: 1fr 360px;
    gap: 48px;
    padding: 48px;
  }

  .mb-summary {
    position: sticky;
    top: 24px;
  }

  .mb-other__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mb-pill,
  .mb-fabric,
  .mb-piece,
  .mb-stepper__btn,
  .mb-summary__atc,
  .mb-other-card {
    transition: none;
  }
}

/* Build step — locked until a fabric is chosen */
.mb-step--build {
  transition: opacity 0.2s ease;
}

.mb-step--locked .mb-step__num,
.mb-step--locked .mb-step__title {
  color: #a8a193;
}

.mb-step--locked .mb-step__hint {
  display: none;
}

.mb-step--locked .mb-preset,
.mb-step--locked .mb-pieces {
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
  filter: grayscale(0.4);
}

.mb-step__lock {
  display: none;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  padding: 12px 14px;
  background: rgba(156, 97, 74, 0.08);
  border: 1px dashed rgba(156, 97, 74, 0.45);
  font-size: 13px;
  font-weight: 500;
  color: var(--mb-accent, #9c614a);
}

.mb-step--locked .mb-step__lock {
  display: flex;
}

.mb-step__lock svg {
  flex: none;
}