/* 产品详情富文本区
 * 内容来自商品元字段 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: var(--gnr-max-w, 1120px);
  margin: 0 auto;
  padding: var(--gnr-pad-y) var(--gnr-pad-x, 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: var(--gnr-title-size, 34px);
  line-height: 1.15;
  text-align: center;
  margin: 0 0 var(--gnr-title-gap, 12px);
  color: var(--gnr-title-color);
  letter-spacing: -0.01em;
}

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

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

.gnr-card {
  background: transparent;
}

.gnr-figure {
  position: relative;
  border-radius: var(--gnr-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: var(--gnr-tag-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: var(--gnr-card-title-size, 16px);
  line-height: 1.3;
  margin: var(--gnr-card-title-gap, 16px) 0 5px;
  color: var(--gnr-ink);
}

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

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

/* ═══ 回退区：没填 product_details 元字段时，展示商品描述 ═══ */
.gnr-fb-wrap {
  max-width: var(--gnr-max-w, 1120px);
  margin: 0 auto;
  padding: var(--gnr-pad-y, 40px) var(--gnr-pad-x, 20px);
  box-sizing: border-box;
}

.gnr-fb {
  border: 1px solid #E3EAF1;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.gnr-fb__head {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
  font-size: 17px;
  font-weight: 700;
  color: var(--gnr-ink, #17325C);
  user-select: none;
}
.gnr-fb__head::-webkit-details-marker { display: none; }
.gnr-fb__head:hover { background: #F8FBFE; }

.gnr-fb__arrow {
  width: 13px;
  height: 9px;
  flex-shrink: 0;
  transition: transform .25s ease;
}
.gnr-fb[open] .gnr-fb__arrow { transform: rotate(180deg); }

.gnr-fb__body {
  padding: 2px 22px 22px;
  color: var(--gnr-sub, #4A5A68);
  font-size: 14.5px;
  line-height: 1.75;
  border-top: 1px solid #EEF3F8;
  padding-top: 18px;
}
.gnr-fb__body > :first-child { margin-top: 0; }
.gnr-fb__body > :last-child { margin-bottom: 0; }
.gnr-fb__body h2,
.gnr-fb__body h3 {
  font-size: 15.5px;
  color: var(--gnr-ink, #17325C);
  margin: 22px 0 8px;
}
.gnr-fb__body ul { padding-left: 20px; margin: 10px 0; }
.gnr-fb__body li { margin-bottom: 6px; }
.gnr-fb__body img { max-width: 100%; height: auto; border-radius: 10px; }

@media screen and (max-width: 959px) {
  .gnr-fb-wrap {
    padding: var(--gnr-pad-y-mobile, 26px) var(--gnr-pad-x-m, 16px);
  }
  .gnr-fb__head { padding: 15px 17px; font-size: 15px; }
  .gnr-fb__body { padding: 15px 17px 18px; font-size: 13.5px; }
}