/* 产品详情富文本区
 * 内容来自商品元字段 my_fields.product_details（结构化 JSON，非 HTML）。
 * 类名沿用原先手写 HTML 里的 .gnr-*，视觉 1:1，只是样式从「每个产品重复一份 <style>」
 * 变成主题里的一份。
 */

.gnr-details {
  --gnr-ratio: 4 / 3;
  --gnr-ink: #1c1c1a;
  --gnr-sub: #6b6a66;
  --gnr-figure-bg: #f2f0eb;
  --gnr-cols: 2;
  --gnr-title-color: #15361f;
  --gnr-pad-y: 56px;
  --gnr-pad-y-mobile: 36px;

  max-width: 1120px;
  margin: 0 auto;
  padding: var(--gnr-pad-y) 20px;
  font-family: "Poppins", -apple-system, "Helvetica Neue", Arial, sans-serif;
  color: var(--gnr-ink);
  box-sizing: border-box;
}

.gnr-details * {
  box-sizing: border-box;
}

.gnr-title {
  font-family: "Montserrat", "Poppins", sans-serif;
  font-weight: 700;
  font-size: 34px;
  line-height: 1.15;
  text-align: center;
  margin: 0 0 12px;
  color: var(--gnr-title-color);
  letter-spacing: -0.01em;
}

.gnr-sub {
  text-align: center;
  color: var(--gnr-sub);
  font-size: 15px;
  line-height: 1.65;
  margin: 0 auto 38px;
  max-width: 60ch;
}

.gnr-grid {
  display: grid;
  grid-template-columns: repeat(var(--gnr-cols), 1fr);
  gap: 22px;
}

.gnr-card {
  background: transparent;
}

.gnr-figure {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--gnr-figure-bg);
  line-height: 0;
}

/* 图 / GIF / 视频统一套框 */
.gnr-figure img,
.gnr-figure video {
  display: block;
  width: 100%;
  aspect-ratio: var(--gnr-ratio);
  object-fit: cover;
}

.gnr-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(255, 255, 255, 0.92);
  color: #1c1c1a;
  font-family: "Montserrat", "Poppins", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  padding: 7px 11px;
  border-radius: 20px;
}

.gnr-tag.is-dark {
  background: rgba(28, 28, 26, 0.82);
  color: #fff;
}

.gnr-t {
  font-family: "Montserrat", "Poppins", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  margin: 16px 0 5px;
  color: var(--gnr-ink);
}

.gnr-d {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--gnr-sub);
}

@media (max-width: 749px) {
  .gnr-details {
    padding: var(--gnr-pad-y-mobile) 16px;
  }
  .gnr-title {
    font-size: 24px;
  }
  .gnr-sub {
    font-size: 13.5px;
    margin-bottom: 26px;
  }
  /* 窄屏一律单栏 —— 后台的「每行几个」只管桌面 */
  .gnr-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}