/* Configurator: responsive (продовження kupolla-config.css) + extras: preview photo, SVG layers, mobile price bar */

/* 10. RESPONSIVE */
@media (max-width: 1024px) {
  .kp-cfg-inner { grid-template-columns: 1fr; }
  .kp-cfg-panel { position: static; flex-direction: row; flex-wrap: wrap; }
  .kp-cfg-preview { flex: 1 1 100%; }
  .kp-cfg-preview__photo-wrap { height: clamp(180px, 40vw, 280px); }
  .kp-cfg-summary { flex: 1; min-width: 220px; }
  .kp-cfg-price { flex: 1; min-width: 240px; }
  .kp-cfg-steps-indicator { display: none; }
  .kp-cfg-tiers { grid-template-columns: repeat(2, 1fr); }
  .kp-cfg-tier__pop {
    font-size: .6875rem;
    padding: .2rem .65rem;
    letter-spacing: .08em;
  }
  .kp-cfg-options { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .kp-cfg-dome-svg { color: #f2efe8; }
  .kp-cfg-hero { padding: 2rem 0 1.75rem; }
  .kp-cfg-panel {
    flex-direction: column;
    min-width: 0;
  }
  .kp-cfg-preview,
  .kp-cfg-summary,
  .kp-cfg-price {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
  }
  .kp-cfg-preview__photo-wrap { height: clamp(160px, 50vw, 240px); }
  .kp-cfg-tiers { grid-template-columns: 1fr; }
  .kp-cfg-models .kp-cfg-model__card { grid-template-columns: 80px 1fr auto; gap: .875rem; }
  .kp-cfg-diams { grid-template-columns: repeat(2, 1fr); }
  .kp-cfg-tiers { grid-template-columns: 1fr; }
  .kp-cfg-options { grid-template-columns: repeat(2, 1fr); }
  .kp-cfg-step__hd, .kp-cfg-step__nav { padding: 1.25rem; }
  .kp-cfg-models, .kp-cfg-diams, .kp-cfg-tiers, .kp-cfg-options { padding: 1rem 1.25rem; }
  .kp-cfg-form-step .kp-cfg-summary-inline,
  .kp-cfg-form-step .kp-form,
  .kp-cfg-form-response {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
  }
  .kp-cfg-form-step .kp-form {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: calc(1.5rem + var(--safe-b));
  }
}
@media (max-width: 480px) {
  .kp-cfg-options { grid-template-columns: 1fr 1fr; }
  .kp-cfg-panel { flex-direction: column; }
  .kp-cfg-tier__pop {
    font-size: .6875rem;
    padding: .2rem .55rem;
  }
}

/* ─── Extras ─── */

.kp-cfg-model-bar {
  background: var(--c-white);
  border-radius: var(--r-xl);
  border: 1px solid var(--c-border);
  margin-bottom: 1.25rem;
  padding: 1rem 1.75rem 1.25rem;
}
.kp-cfg-model-bar__label {
  margin: 0 0 .75rem;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.kp-cfg-model-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
}
.kp-cfg-model-switch__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  min-width: 0;
  padding: .625rem .875rem;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--c-dark);
  background: var(--c-white);
  -webkit-tap-highlight-color: transparent;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.kp-cfg-model-switch__item.is-on {
  border-color: var(--c-forest);
  background: rgba(0, 49, 30, .06);
}
.kp-cfg-model-switch__name {
  font-size: .9375rem;
  line-height: 1.3;
}
.kp-cfg-model-switch__meta {
  font-size: .75rem;
  color: var(--c-muted);
}

@media (max-width: 768px) {
  .kp-cfg-model-bar {
    padding: .875rem 1rem 1rem;
  }
  .kp-cfg-model-switch {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .kp-cfg-model-switch {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (hover: hover) and (pointer: fine) {
  .kp-cfg-model-switch__item:hover {
    border-color: var(--c-forest);
  }
}

.kp-cfg-preview__photo-wrap {
  width: 100%;
  height: clamp(140px, 22vw, 220px);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: .75rem;
}
.kp-cfg-preview__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .3s var(--ease), filter .3s var(--ease);
}
.kp-cfg-preview__photo.is-changing {
  opacity: .45;
  filter: saturate(.6);
}

.kp-cfg-layer { opacity: 0; transition: opacity .4s var(--ease); }
.kp-cfg-layer.is-on { opacity: 1; }
.kp-cfg-dome-group {
  transform-origin: 160px 240px;
  transition: transform .5s var(--ease);
}
.kp-cfg-dome-body { transition: fill .4s var(--ease); }
.kp-cfg-dome-body.is-premium { fill: rgba(202, 187, 172, .14); }

.kp-cfg-price-bar {
  display: none;
}

@media (max-width: 1024px) {
  .kp-cfg-price-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: var(--c-forest);
    padding: .75rem 1.25rem calc(.75rem + env(safe-area-inset-bottom, 0px));
  }
  .kp-cfg-price-bar__copy {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
  }
  .kp-cfg-price-bar__label {
    font-size: .6875rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
  }
  .kp-cfg-price-bar__num {
    font-family: var(--f-serif); text-transform: uppercase; letter-spacing: .01em;
    font-size: 1.375rem;
    color: var(--c-white);
    font-variant-numeric: tabular-nums;
  }
  #mobileCta { display: none; }
  .kp-cfg-layout { padding-bottom: 5.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .kp-cfg-preview__photo,
  .kp-cfg-layer,
  .kp-cfg-dome-group,
  .kp-cfg-dome-body,
  .kp-cfg-price__num.updated {
    transition: none;
    animation: none;
  }
}