.hp-inquiry {
  min-width: 0;
}

.hp-inquiry-form {
  display: grid;
  gap: 24px;
}

.hp-inquiry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.hp-inquiry-field {
  min-width: 0;
}

.hp-inquiry-field--full {
  grid-column: 1 / -1;
}

.hp-inquiry-label {
  display: block;
  margin-bottom: 8px;
  color: var(--t1);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.hp-inquiry-required {
  color: var(--danger-strong);
}

.hp-inquiry-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hp-inquiry-control {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--field-border);
  border-radius: var(--r-5);
  background: var(--bg0);
  color: var(--t1);
  font-size: 16px;
  line-height: 1.4;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}

.hp-inquiry-control:focus {
  border-color: var(--brand);
}

.hp-inquiry-control[aria-invalid="true"] {
  border-color: var(--danger-strong);
  background: var(--danger-50);
}

.hp-inquiry-message {
  min-height: 144px;
}

.hp-inquiry-contacts,
.hp-inquiry-products {
  min-width: 0;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--line1);
  border-radius: var(--r-6);
  background: var(--bg1);
}

.hp-inquiry-contacts legend,
.hp-inquiry-products legend {
  padding: 0 8px;
  color: var(--t1);
  font-size: 17px;
  font-weight: 800;
}

.hp-inquiry-products[aria-invalid="true"] {
  border-color: var(--danger-strong);
  background: var(--danger-50);
}

.hp-inquiry-product-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.hp-inquiry-product-option {
  display: flex;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line1);
  border-radius: var(--r-5);
  background: var(--bg0);
  color: var(--t1);
  font-size: 16px;
  line-height: 1.4;
  cursor: pointer;
}

.hp-inquiry-product-option:focus-within {
  border-color: var(--brand);
}

.hp-inquiry-product-option input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--brand);
}

.hp-inquiry-product-option span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.hp-inquiry-product-selected,
.hp-inquiry-product-picker {
  margin-bottom: 16px;
}

.hp-inquiry-product-picker summary {
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line1);
  border-radius: var(--r-5);
  background: var(--bg0);
  color: var(--t1);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.hp-inquiry-product-picker[open] summary {
  margin-bottom: 16px;
}

.hp-inquiry-product-search {
  margin-bottom: 16px;
}

.hp-inquiry-product-done {
  min-height: 44px;
  margin-top: 16px;
  padding: 10px 14px;
  border: 1px solid var(--brand);
  border-radius: var(--r-5);
  background: var(--bg0);
  color: var(--brand-txt);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.hp-inquiry-product-option[hidden],
.hp-inquiry-product-selected[hidden],
.hp-inquiry-product-search[hidden],
.hp-inquiry-product-done[hidden] {
  display: none;
}

.hp-inquiry-product-other {
  margin-top: 16px;
}

.hp-inquiry-help {
  margin: 0 0 16px;
  color: var(--t3);
  font-size: 14px;
}

.hp-inquiry-contact-list {
  display: grid;
  gap: 12px;
}

/* 🔴 2026-09-18 第三列（原来放「移除」按钮）随按钮一起去掉。
   留着它会在每一行右边留一条空轨道，账号框因此白白窄一截。 */
.hp-inquiry-contact-row {
  display: grid;
  grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
  gap: 12px;
  align-items: end;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line1);
  border-radius: var(--r-5);
  background: var(--bg0);
}

/* 🔴 2026-09-18 去掉每行联系方式的「移除」按钮、2026-09-19 又去掉
   「添加其他联系方式」按钮之后，这两个按钮的全部样式（基础、禁用态、hover、
   两个断点下的宽度）都删干净了，不留死代码 —— 残骸就是污染现场。
   09-18 那一版注释写着「添加按钮他明确要留」，那是当时的裁决，09-19 他改口了。 */
.hp-inquiry-submit {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding-right: 24px;
  padding-left: 24px;
  border-color: var(--brand);
  border-radius: var(--r-5);
  background: var(--brand);
  color: var(--on-brand);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

/* 🔴 2026-09-30 审查 O3:点了之后按钮变灰(inquiry-form.js 在校验通过的那一下加 disabled),
   让人看得出「已经在发了」,不会再点第二下。只改深浅和鼠标形状,尺寸一个像素不动。 */
.hp-inquiry-submit:disabled {
  opacity: 0.6;
  cursor: progress;
}

.hp-inquiry-actions {
  display: flex;
  justify-content: flex-start;
}

.hp-inquiry-feedback {
  margin: 0 0 24px;
  padding: 16px 18px;
  border: 1px solid var(--line2);
  border-radius: var(--r-5);
}

.hp-inquiry-feedback > :last-child {
  margin-bottom: 0;
}

.hp-inquiry-feedback-success {
  border-color: var(--success);
  background: var(--success-50);
  color: var(--success-strong);
}

.hp-inquiry-feedback-error {
  border-color: var(--danger);
  background: var(--danger-50);
  color: var(--danger-strong);
}

.hp-inquiry-feedback-success p,
.hp-inquiry-feedback-error p,
.hp-inquiry-feedback-error li {
  color: inherit;
}

.hp-inquiry-error-summary {
  margin-bottom: 0;
}

.hp-inquiry-error-summary ul {
  margin: 8px 0 0;
  padding-left: 22px;
}

.hp-inquiry-error-summary a {
  color: inherit;
  font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
  .hp-inquiry-submit:hover {
    border-color: var(--brand-deep);
    background: var(--brand-deep);
    color: var(--on-brand);
  }
}

@media (max-width: 767px) {
  .hp-inquiry-grid,
  .hp-inquiry-product-list,
  .hp-inquiry-contact-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .hp-inquiry-field--full {
    grid-column: auto;
  }

  .hp-inquiry-contacts,
  .hp-inquiry-products {
    padding: 16px;
  }
}

@media (max-width: 540px) {
  .hp-inquiry-submit {
    width: 100%;
  }

  .hp-inquiry-actions {
    display: block;
  }
}

/*
 * 🔴🔴 2026-09-19 第四轮 · 询价页压紧。站长原话:
 * 「询价页上下之间太空,没有压紧,包括上下之间的文字距离和上下之间的板块距离
 *   离得太远,修改下,保留一点点呼吸感就行,或者不要呼吸感」
 *
 * 🔴 根因和前几轮一模一样:**这个文件整份没有 ≤640px 那一档**。
 *    手机上量到的 24 / 20 / 16 / 12 / 8 全是电脑端的值,手机断点一次都没覆盖过。
 *    前几轮压的是首页、分类页、商品页 —— 都不是这个文件。
 *
 * 🔴 数值全部沿用他这几天【已经拍板过】的那一档,不是新发明的:
 *    · 板块之间 6px —— 和他给商品卡定的一样。0 或 2 的话两个输入框的边框
 *      会挨成一条粗线,他上一轮就是为这个理由否掉 0 的。
 *    · 白卡内边距 8px · 页面壳上下 6/10 · 标题 19px/行高 1.05 —— 全站同档。
 *
 * 🔴 **左右页边距本轮不动**(仍是 16px)。他说的是「上下」,不扩大范围。
 * 🔴 **行高不动**。规范 08 第五节写着正文那一档行高保留 —— 采购要一段段读。
 * 🔴 产品说明框的高度(min-height:144px)本轮也不动 —— 那是输入框大小,
 *    不是「上下之间的距离」,改它是另一件事,他没说。
 *
 * 🔴 这些规则写在【本文件里】就等于只作用于询价页:
 *    inquiry-form.css 只在带 [hp_inquiry_form] 短代码的页面才加载(functions.php)。
 *    .hp-page-entry 是所有内容页共用的壳,直接改 components.css 会连 B2B 四页
 *    和以后的 Resources 文章一起改掉 —— 那不是他要的。
 */
@media (max-width: 640px) {
  .hp-page-entry {
    padding-top: 6px;
    padding-bottom: 10px;
  }

  .hp-page-entry > .hp-entry-title {
    margin-bottom: 2px;
    font-size: 19px;
    line-height: 1.05;
  }

  .hp-inquiry-intro {
    margin-bottom: 2px;
  }

  /* 板块之间(两组字段 / 联系方式白卡 / 折叠区 / 提交按钮) */
  .hp-inquiry-form {
    gap: 6px;
  }

  /* 同一组里的字段之间 */
  .hp-inquiry-grid {
    gap: 6px;
  }

  /*
   * 🔴 标签到【它自己那个输入框】必须比「字段之间」更近(2px < 6px)。
   *    反过来的话,标签看着像是贴在上一个字段下面的,采购会填错行。
   *    验证里有一条正控制专门盯这个顺序,不是只盯数值。
   */
  .hp-inquiry-label {
    margin-bottom: 2px;
  }

  .hp-inquiry-contacts,
  .hp-inquiry-products {
    padding: 8px;
  }

  .hp-inquiry-contacts legend,
  .hp-inquiry-products legend {
    padding: 0 4px;
    font-size: 14px;
    line-height: 1.25;
  }

  .hp-inquiry-help {
    margin-bottom: 4px;
  }

  .hp-inquiry-contact-list {
    gap: 6px;
  }

  .hp-inquiry-contact-row {
    gap: 6px;
    padding: 8px;
  }

  .hp-inquiry-product-list {
    gap: 6px;
  }

  .hp-inquiry-product-selected,
  .hp-inquiry-product-picker,
  .hp-inquiry-product-search {
    margin-bottom: 6px;
  }

  .hp-inquiry-product-picker[open] summary {
    margin-bottom: 6px;
  }

  .hp-inquiry-product-done {
    margin-top: 6px;
  }

  .hp-inquiry-product-other {
    margin-top: 6px;
  }

  .hp-inquiry-feedback {
    margin-bottom: 6px;
    padding: 8px 10px;
  }
}