/* =================== hc-pdp-base.css =================== */
/* Extracted from 125-hc-pdp-m1.css: shared PDP layout primitives. */

/* ---- folded from 136-hc-pdp.css ---- */
/* PDP base layout primitives. Variants own visual skin in 125/126/127. */

.hc-pdp {
  padding-top: var(--hc-sp-5);
}

.hc-pdp__main,
.hc-pdp__grid {
  display: grid;
  gap: clamp(14px, 1.3vw, 22px);
  align-items: start;
}

.page-pdp .hc-pdp__grid {
  grid-template-columns: minmax(360px, 1.05fr) minmax(360px, 1fr) minmax(320px, 0.95fr);
  margin-top: var(--hc-sp-4, 20px);
  margin-bottom: clamp(40px, 4vw, 64px);
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.hc-pdp__title-col,
.hc-pdp__info,
.hc-pdp__main {
  min-width: 0;
}

.hc-pdp__title {
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.hc-pdp__related {
  margin: 32px 0 12px;
}

.hc-pdp__related-title {
  font-size: 18px;
  margin: 0 0 12px;
  font-weight: 500;
}

@media (max-width: 1360px) {
  .page-pdp .hc-pdp__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 920px) {
  .hc-pdp__title-col,
  .hc-pdp__info {
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .page-pdp .hc-pdp__grid {
    grid-template-columns: 1fr;
  }
}