/* =================== hc-qv.css =================== */
body.hc-modal-open {
  overflow: hidden;
}

.hc-qv {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: clamp(18px, 3vw, 44px);
  background: rgba(26, 23, 20, 0.48);
  backdrop-filter: blur(10px);
}

.hc-qv__panel {
  position: relative;
  width: min(980px, 100%);
  max-height: calc(100dvh - 64px);
  overflow: hidden;
  border-radius: var(--sf-radius-xl, 24px);
  border: 1px solid rgba(224, 210, 190, 0.9);
  background: var(--hc-paper, #fffaf2);
  box-shadow: 0 34px 90px rgba(26, 23, 20, 0.28);
}

.hc-qv__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(54, 45, 34, 0.14);
  border-radius: 50%;
  background: rgba(255, 252, 247, 0.92);
  color: var(--sf-ink, #1a1714);
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(26, 23, 20, 0.12);
}

.hc-qv__close:hover {
  background: #fff;
}

.hc-qv__body {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 34px);
  /* Sprint52v3 — start (NOT stretch), иначе gallery вытягивается под высоту
   * длинной info-колонки (660px) и получаем letterbox т.к. natural ratio
   * картинки ~4:3, а container 4:6,6. */
  align-items: start;
  max-height: inherit;
  padding: clamp(22px, 2.8vw, 42px);
}

/* Sprint52 — fix gallery letterbox.
 * Было: aspect-ratio 1/1 + max-height 570px → квадрат 570x570 с img 300x360
 *       → ~200px empty space сверху и снизу image. УРОДСТВО.
 * Стало: matches sibling-column height (align stretch) + image fills 92% width.
 * Image natural drop-shadow остаётся. */
.hc-qv__gallery {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* Sprint52v3 — gallery sizes to its own preferred 4:3 aspect (matches
   * typical Blum product photo); position: sticky пинит сверху, чтобы
   * картинка не «уезжала» когда info-колонка скроллится. */
  aspect-ratio: 4 / 3;
  max-height: 540px;
  padding: clamp(20px, 2vw, 32px);
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(circle at 20% 80%, rgba(184, 154, 112, 0.14) 0 20%, transparent 21%),
    radial-gradient(circle at 86% 16%, rgba(120, 137, 115, 0.14) 0 19%, transparent 20%),
    linear-gradient(145deg, #fbf6ea 0%, #eadbc4 100%);
}

/* Sprint52 — picture-tag wrapper for hc-qv__img.
 * <picture> is inline by default → collapses to 0×0 while img natural=0
 * → img width:100% resolves to 0 → image never visually renders.
 * Forcing block + full-flex sizing inside gallery solves this without
 * touching the picture macro (kept generic for other components). */
.hc-qv__gallery > picture {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: inherit;
}

.hc-qv__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 20px 34px rgba(26, 23, 20, 0.12));
}

.hc-qv__placeholder {
  display: grid;
  place-items: center;
  width: min(74%, 280px);
  aspect-ratio: 1 / 1;
}

.hc-qv__placeholder .hc-ph {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 18px 30px rgba(26, 23, 20, 0.1));
}

.hc-qv__badge {
  position: absolute;
  top: 18px;
  left: 18px;
}

.hc-qv__info {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  max-height: calc(100dvh - 148px);
  overflow: auto;
  padding-right: 10px;
}

.hc-qv__title {
  margin: 0;
  color: var(--sf-ink, #1a1714);
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(28px, 2.35vw, 40px);
  font-weight: 500;
  line-height: 1.02;
}

.hc-qv__price {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: baseline;
}

.hc-qv__old {
  color: rgba(26, 23, 20, 0.48);
  text-decoration: line-through;
  font-size: 16px;
}

.hc-qv__cur {
  color: var(--sf-red, #c7442e);
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(32px, 3vw, 46px);
  font-weight: 500;
  line-height: 1;
}

.hc-qv__cur--ask {
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.62));
  font-size: 24px;
  font-style: italic;
  font-weight: 400;
}

.hc-qv__desc {
  margin: 0;
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.68));
  font-size: 15px;
  line-height: 1.5;
}

.hc-qv__specs {
  display: grid;
  gap: 0;
  margin: 0;
}

.hc-qv__spec {
  display: grid;
  grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(54, 45, 34, 0.14);
}

.hc-qv__spec dt {
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.58));
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hc-qv__spec dd {
  margin: 0;
  color: var(--sf-ink, #1a1714);
  font-weight: 600;
}

.hc-qv__assurance {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.hc-qv__buy {
  display: grid;
  gap: 10px;
}

.hc-qv__actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.hc-qv__secondary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.hc-qv__secondary .hc-btn {
  min-width: 0;
}

.hc-qv__oneclick-wrap {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
}

.hc-qv__oneclick-wrap > summary {
  list-style: none;
}

.hc-qv__oneclick-wrap > summary::-webkit-details-marker {
  display: none;
}

.hc-qv__oneclick-wrap > .hc-qv__oneclick {
  display: none;
}

.hc-qv__oneclick-wrap[open] > .hc-qv__oneclick {
  display: grid;
}

.hc-qv__ship {
  align-self: start;
}

.hc-qv__oneclick {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(54, 45, 34, 0.12);
  background: rgba(255, 255, 255, 0.74);
}

.hc-qv__msg {
  min-height: 0;
}

@media (max-width: 768px) {
  .hc-qv {
    align-items: end;
    padding: 10px;
  }

  .hc-qv__panel {
    width: 100%;
    max-height: calc(100dvh - 20px);
    border-radius: 22px 22px 12px 12px;
  }

  .hc-qv__body {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 18px;
    overflow: auto;
  }

  .hc-qv__gallery {
    min-height: 180px;
    max-height: none;
    aspect-ratio: 16 / 10;
  }

  .hc-qv__placeholder {
    width: min(54%, 170px);
  }

  .hc-qv__info {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .hc-qv__title {
    font-size: clamp(25px, 8vw, 31px);
  }

  .hc-qv__specs {
    order: 7;
  }

  .hc-qv__assurance {
    order: 5;
  }

  .hc-qv__buy {
    order: 6;
  }

  .hc-qv__ship {
    order: 8;
  }

  .hc-qv__actions {
    grid-template-columns: 1fr;
  }

  .hc-qv__secondary {
    grid-template-columns: 1fr;
  }

  .hc-qv__spec {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}