/* =====================================================
   MOBILE FIXES — Par Excellence product pages
   ===================================================== */

/* 1. 行動版 header & CTA 調整 ----------------------------------- */
@media (max-width: 640px){
  .header-grid {
    grid-template-columns: auto 1fr;
    align-items: start;
  }

  .h-logo img {
    height: 52px;
  }

  .h-nav {
    display: flex;
    flex-wrap: wrap;          /* 允許換行 */
    gap: 10px 12px;
  }

  .h-nav a {
    font-size: 14px;
    line-height: 1.3;
    white-space: normal;      /* 允許斷行，避免文字撐寬 */
    padding: 6px 0;
  }

  .h-nav .cta {
    order: 99;                /* 放在最後一行 */
    width: 100%;              /* 佔滿整行 */
    text-align: center;
    padding: 10px 14px;
    font-size: 15px;
    border-radius: 12px;
    flex: 1 1 100%;
  }
}

/* 2. 防止表單/內容橫向溢出 ----------------------------------- */
html, body {
  overflow-x: hidden;
}

.container,
header,
section,
footer {
  max-width: 100%;
  overflow-x: clip;
}

/* 防止圖片或表格撐出螢幕 */
img,
table,
pre,
code {
  max-width: 100%;
}

/* 讓表格仍能在容器內橫向滾動 */
table.spec {
  table-layout: fixed;
  display: block;
  overflow-x: auto;
}

/* RFQ / 表單欄位在手機改為單欄顯示 */
@media (max-width: 640px){
  form,
  .rfq-form,
  .contact-form {
    width: 100%;
  }

  .form-grid {
    display: block !important;
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  select,
  textarea {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 讓很長的字（email/料號）可以自動斷行 */
  .chips,
  .chip,
  li,
  p,
  td,
  th {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* 3. 小元件：chips 過長自動換行 ----------------------------------- */
.chips {
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  max-width: 100%;
}