/* ================================================
   Product Description Styles
   Підключити один раз у шаблоні сайту
   ================================================ */

.pd {
  width: 100%;
  font-family: sans-serif;
  color: #1a1a1a;
}

/* Основний текст опису */
.pd-desc {
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: #1a1a1a;
  margin-bottom: 1rem !important;
}

/* Картки-метрики */
.pd-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 1.25rem 0;
}

.pd-metric {
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 14px 12px;
}

.pd-metric-val {
  font-size: 20px !important;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 3px !important;
  line-height: 1.2 !important;
}

.pd-metric-label {
  font-size: 12px !important;
  color: #888;
  line-height: 1.4;
}

/* Секції (характеристики, застосування) */
.pd-section {
  border-top: 1px solid #e8e8e8;
  padding-top: 1.25rem;
  margin-top: 1.25rem;
}

.pd-section-title {
  font-size: 11px !important;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 12px !important;
}

/* Таблиця характеристик у два стовпці */
.pd-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  overflow: hidden;
}

.pd-spec-row {
  display: contents;
}

.pd-spec-label,
.pd-spec-value {
  padding: 9px 14px !important;
  font-size: 13px !important;
  border-bottom: 1px solid #e8e8e8;
}

.pd-spec-row:last-child .pd-spec-label,
.pd-spec-row:last-child .pd-spec-value {
  border-bottom: none;
}

.pd-spec-label {
  color: #888;
  border-right: 1px solid #e8e8e8;
}

.pd-spec-value {
  font-weight: 500;
  color: #1a1a1a;
}

/* Теги застосування */
.pd-usage {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pd-usage-tag {
  font-size: 13px !important;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid #e0e0e0;
  color: #555;
  white-space: nowrap;
}

/* Адаптив для мобільних */
@media (max-width: 600px) {
  .pd-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .pd-specs {
    grid-template-columns: 1fr;
  }

  .pd-spec-label {
    border-right: none;
    border-bottom: none;
    padding-bottom: 2px;
    color: #888;
  }

  .pd-spec-value {
    padding-top: 2px;
  }
}