/* 询价模式样式:显隐全部由 product-info 上的状态类驱动(兼容变体切换后的局部重渲染) */

/* 询价区:紧贴触发 CTA,两个按钮,无分隔线不厚重 */
.product-inquiry {
  margin-top: 10px;
}

/* 移动端:上下两行 */
.product-inquiry__buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 复制邮箱成功提示条(mailto 唤不起时的回退) */
.product-inquiry__copied {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background-color: rgba(37, 211, 102, 0.12);
  border: 1px solid rgba(37, 211, 102, 0.35);
  color: #0f7a3d;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  word-break: break-all;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.product-inquiry__copied.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* PC 端:左右一行,两个按钮等分 */
@media screen and (min-width: 960px) {
  .product-inquiry__buttons {
    flex-direction: row;
  }

  .product-inquiry__buttons .product-inquiry__btn.button {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* 统一按钮外形:同高、居中、图标+文字 */
.product-inquiry__btn.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 1.2;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease,
    transform 0.12s ease;
}

.product-inquiry__btn.button:active {
  transform: translateY(1px);
}

/* 去掉主题 .button 的 ::after 描边环(默认那圈黑边),询价按钮自定义边框 */
.product-inquiry__btn.button::after {
  box-shadow: none !important;
}

.product-inquiry__btn svg,
.product-inquiry__btn .icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

/* WhatsApp:品牌绿底白字 + 柔和绿光,显质感 */
.product-inquiry__btn--wa.button {
  background-color: #25d366;
  border: none;
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.3);
}

.product-inquiry__btn--wa.button:hover {
  background-color: #20c15d;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.38);
}

/* 邮件:柔和描边款,与绿色实心形成对比(边框比之前更淡) */
.product-inquiry__btn--email.button {
  background-color: transparent;
  border: 1px solid rgba(var(--color-text), 0.16);
  color: rgb(var(--color-text));
}

.product-inquiry__btn--email.button:hover {
  border-color: rgba(var(--color-text), 0.4);
  background-color: rgba(var(--color-text), 0.04);
}

/* ===== 询价模式激活(Size 选"自定义/询价" 或 阶梯选"自定义数量") ===== */

/* 隐藏加购 + 支付按钮 */
.product__info-container.is-inquiry .product-form__buttons {
  display: none !important;
}

/* 询价时隐藏整个主价格块(含单价/运费提示,不留空隙) */
.product__info-container.is-inquiry [id^="price-"] {
  display: none;
}

/* 上传/设计工具区块:询价时整块隐藏(由 component-inquiry.js 对其所在 .product__info-item 设 hidden) */

/* size=自定义:阶梯保留「数量 + 折扣%」,隐藏绝对价格(总价/单价)——
   折扣档位来自 metafield、对定制尺寸依然成立;绝对价格按默认变体算的,不适用,故隐藏 */
/* 询价时(Size=自定义 或 点 CTA)隐藏数量块、阶梯表(含 Show More) */
.product__info-container.is-inquiry [data-quantity-block],
.product__info-container.is-inquiry [data-tier-block] {
  display: none !important;
}

/* CTA 仅在 Size=自定义时隐藏;点 CTA(tier)时保留,便于再点退出 */
.product__info-container.is-inquiry-size .product-inquiry-cta {
  display: none !important;
}

/* 自定义面板:询价时都显示(默认含数量步进框) */
.product-custom-size {
  display: none;
}

.product__info-container.is-inquiry .product-custom-size {
  display: block;
}

/* 自定义尺寸输入框:仅 Size=自定义时显示;点 CTA 时不显示(只留数量) */
.product-custom-size__field--size {
  display: none;
}

.product__info-container.is-inquiry-size .product-custom-size__field--size {
  display: block;
}

.product-custom-size__field {
  margin-bottom: 14px;
}

.product-custom-size__field:last-child {
  margin-bottom: 0;
}

.product-custom-size__field .form__label {
  display: block;
  margin-bottom: 6px;
}

.product-custom-size__text {
  width: 100%;
  max-width: 360px;
  padding: 10px 12px;
  border: 1px solid rgba(var(--color-text), 0.25);
  border-radius: 8px;
  font-size: 14px;
  color: rgb(var(--color-text));
  background: rgb(var(--color-background));
}

/* 数量步进框:左右 +/− */
.product-custom-size__stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid rgba(var(--color-text), 0.25);
  border-radius: 8px;
  overflow: hidden;
  height: 44px;
}

.product-custom-size__btn {
  width: 44px;
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: rgb(var(--color-text));
  transition: background-color 0.15s ease;
}

.product-custom-size__btn:hover {
  background-color: rgba(var(--color-text), 0.06);
}

.product-custom-size__qty {
  width: 84px;
  text-align: center;
  border: none;
  border-left: 1px solid rgba(var(--color-text), 0.15);
  border-right: 1px solid rgba(var(--color-text), 0.15);
  font-size: 14px;
  color: rgb(var(--color-text));
  background: rgb(var(--color-background));
  -moz-appearance: textfield;
  appearance: textfield;
}

.product-custom-size__qty::-webkit-outer-spin-button,
.product-custom-size__qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 询价触发 CTA:加购按钮下方的次级动作,点击进入询价模式(独立于阶梯表) */
.product-inquiry-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  padding: 12px 16px;
  background: transparent;
  border: 1px dashed rgba(var(--color-text), 0.28);
  border-radius: 10px;
  color: rgb(var(--color-text));
  font: inherit;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.product-inquiry-cta:hover {
  border-color: rgba(var(--color-text), 0.55);
  background-color: rgba(var(--color-text), 0.03);
}

.product-inquiry-cta__arrow {
  display: inline-flex;
  flex: 0 0 auto;
  color: rgba(var(--color-text), 0.6);
  transition: transform 0.2s ease;
}

.product-inquiry-cta__arrow svg {
  width: 16px;
  height: 16px;
  transform: rotate(-90deg);
}

.product-inquiry-cta:hover .product-inquiry-cta__arrow {
  transform: translateX(3px);
}

/* 激活态:已进入询价模式(文案变 Back to Pricing) */
.product-inquiry-cta--active {
  border-style: solid;
  border-color: rgb(var(--color-text));
  background-color: rgba(var(--color-text), 0.05);
}

/* 激活时箭头翻向(指回) */
.product-inquiry-cta--active .product-inquiry-cta__arrow svg {
  transform: rotate(90deg);
}