/* 首页「A clear path to your custom order」右侧询盘表（2026-10-31）
 *
 * 背景：这一步本来是一列纵向流程，右侧空出一大片。
 * 做法：流程列收窄到左，右侧放一张常驻的询盘卡（滚动时跟随）。
 * 只在 .of-process[data-rfq="1"] 下生效，不动站内其它板块。
 */

.of-process[data-rfq='1'] .of-rfq-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(316px, 392px);
  gap: 52px;
  margin-top: 34px;
  align-items: start;
}

/* ── 左：流程列 ───────────────────────────── */
.of-process[data-rfq='1'] .of-rfq-split .of-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.of-process[data-rfq='1'] .of-rfq-split .of-step {
  display: grid;
  grid-template-columns: 38px 148px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 4px 22px;
  align-items: start;
  padding: 18px 0 20px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.of-process[data-rfq='1'] .of-rfq-split .of-step > b {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin: 2px 0 0;
  padding-top: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #c3b595;
}

.of-process[data-rfq='1'] .of-rfq-split .of-step > figure {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
}

.of-process[data-rfq='1'] .of-rfq-split .of-step > figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
}

.of-process[data-rfq='1'] .of-rfq-split .of-step > h3 {
  grid-column: 3;
  grid-row: 1;
  margin: 2px 0 4px;
  font-size: 16px;
  line-height: 1.35;
}

.of-process[data-rfq='1'] .of-rfq-split .of-step > p {
  grid-column: 3;
  grid-row: 2;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: #b9ccc1;
}

.of-process[data-rfq='1'] .of-rfq-split .of-step > .of-step-meta {
  grid-column: 3;
  grid-row: 3;
}

/* ── 右：询盘卡 ───────────────────────────── */
.of-rfq {
  /* 卡片比左侧流程列略高，粘性定位没有可移动的余量，直接常态排布 */
  position: relative;
  text-align: left;
  background: #fbfaf7;
  color: #233f35;
  border-radius: 16px;
  padding: 22px 20px 18px;
  box-shadow: 0 22px 48px rgba(4, 20, 15, 0.32);
}

.of-rfq-kicker {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #b9603c;
}

.of-rfq h3 {
  margin: 0 0 5px;
  font-size: 20px;
  line-height: 1.25;
  text-align: left;
  color: #1c332a !important;
}

.of-rfq-lede {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.6;
  text-align: left;
  color: #5f6f65;
}

.of-rfq label {
  display: block;
  margin: 0 0 9px;
}

.of-rfq label > span {
  display: block;
  margin-bottom: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6d7a6f;
}

.of-rfq input,
.of-rfq textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #dcd8cc;
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.45;
  color: #233f35;
}

.of-rfq textarea {
  resize: vertical;
  min-height: 60px;
}

.of-rfq input:focus,
.of-rfq textarea:focus {
  outline: none;
  border-color: #b9603c;
  box-shadow: 0 0 0 3px rgba(185, 96, 60, 0.15);
}

.of-rfq-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.of-rfq-submit {
  width: 100%;
  margin-top: 4px;
  border: 0;
  border-radius: 999px;
  background: #b9603c;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 13px 18px;
  cursor: pointer;
  transition: background 0.18s ease;
}

.of-rfq-submit:hover {
  background: #a8532f;
}

.of-rfq-submit[disabled] {
  opacity: 0.6;
  cursor: default;
}

.of-rfq-note {
  margin: 9px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: #7b877c;
}

.of-rfq-status {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: #8a4a2c;
}

.of-rfq-status.is-error {
  color: #a02a20;
}

.of-rfq-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.of-rfq-done {
  padding: 6px 0 2px;
}

.of-rfq-done h4 {
  margin: 0 0 6px;
  font-size: 15px;
  color: #1c332a;
}

.of-rfq-done p {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.65;
  color: #5f6f65;
}

.of-rfq-done b {
  color: #b9603c;
}

/* ── 窄屏：卡片落到流程下面，不再跟随 ───────── */
@media (max-width: 1000px) {
  .of-process[data-rfq='1'] .of-rfq-split {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .of-rfq {
    position: static;
    max-width: 640px;
  }
}

@media (max-width: 620px) {
  .of-process[data-rfq='1'] .of-rfq-split .of-step {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 6px 14px;
  }

  .of-process[data-rfq='1'] .of-rfq-split .of-step > b {
    grid-row: 1;
  }

  .of-process[data-rfq='1'] .of-rfq-split .of-step > figure {
    grid-column: 2;
    grid-row: 1;
    max-width: 132px;
  }

  .of-process[data-rfq='1'] .of-rfq-split .of-step > h3 {
    grid-column: 2;
    grid-row: 2;
  }

  .of-process[data-rfq='1'] .of-rfq-split .of-step > p {
    grid-column: 2;
    grid-row: 3;
  }

  .of-rfq-row {
    grid-template-columns: 1fr;
  }
}

/* 这一节的正文默认是居中的（.of-process p / form / label 都带 center），
   卡片里的表单必须是左对齐，否则标签和输入框看起来像浮在中间。 */
.of-process[data-rfq='1'] .of-rfq,
.of-process[data-rfq='1'] .of-rfq div,
.of-process[data-rfq='1'] .of-rfq p,
.of-process[data-rfq='1'] .of-rfq h3,
.of-process[data-rfq='1'] .of-rfq h4,
.of-process[data-rfq='1'] .of-rfq form,
.of-process[data-rfq='1'] .of-rfq label,
.of-process[data-rfq='1'] .of-rfq label > span {
  text-align: left !important;
}

.of-process[data-rfq='1'] .of-rfq .of-rfq-submit {
  text-align: center !important;
}