/* Wholesome Paper · 手機版
   ─────────────────────────────────────────────────────────────
   桌機維持原樣，這裡只處理窄螢幕。三件事：
     1. 基本可用性——觸控目標 44px、字級下限、首圖不吃掉整個首屏
     2. 型錄改成熟悉的購物介面——吸頂分類、兩欄卡片、底部規格彈層
     3. 檢視切換列——手機版／電腦版

   斷點用 640px：比平板窄、比最大的手機寬，單手操作的範圍。 */

/* ══ 1 · 基本可用性 ════════════════════════════════════════ */
@media (max-width: 640px) {

  /* 觸控目標。拇指按得到才算數——Apple 與 Google 都建議 44px。
     用 padding 撐開，不動字級，版面才不會跟著變形。 */
  .nav-toggle,
  .cart-btn,
  .lang,
  .qty-step,
  .chip,
  .cat-add,
  .mshop-pick {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .lang { padding-inline: 0.55rem; }
  .nav-toggle { padding: 0 0.5rem; }
  .cart-btn { padding-inline: 0.5rem; }

  /* 字級下限。10–11px 在手機上是讀不了的。 */
  .eyebrow,
  .section-eyebrow,
  .sub-eyebrow,
  .footer-eyebrow,
  .partners-col-eyebrow,
  .pedigree-eyebrow,
  .cat-meta,
  .cat-sku,
  .cat-stock,
  .cert-caption,
  .brand-mark,
  .cat-spec,
  .calc-note,
  .ctr-note { font-size: max(0.75rem, 12px); }

  /* 首圖原本 1131px，整個首屏都是圖，標題要滑過一頁才看得到。 */
  .hero { min-height: 0; }
  .hero .photo,
  .hero-media { max-height: 44vh; }
  .hero .photo img,
  .hero-media img { height: 100%; object-fit: cover; }

  /* 區塊間距在手機上過大，累積起來就是十幾個螢幕的空白。 */
  .section { padding-block: clamp(2.5rem, 9vw, 4rem); }
  .section-head { margin-bottom: 1.75rem; }
}

/* ══ 2 · 型錄：淘寶式瀏覽 ═══════════════════════════════════ */
/* html.mshop-on 由 mobile-shop.js 掛上，確保 JS 沒跑起來時
   版面會退回原本的單欄卡片，而不是一堆被藏起來的空殼。 */
@media (max-width: 640px) {

  /* 分類頁籤：單排、可橫向滑、吸在頂欄正下方。
     原本是一列有框的方塊加「篩選」字樣，在 390px 上換行成兩排、
     吃掉 115px——一個 664px 的螢幕用掉六分之一只為了四個分類。
     改成底線式頁籤：沒有框、沒有標籤字、高度 46px。 */
  html.mshop-on .filter-bar {
    position: sticky;
    top: var(--topbar-h, 56px);
    z-index: 30;
    margin-inline: calc(var(--gutter, 1rem) * -1);
    padding: 0 var(--gutter, 1rem);
    background: color-mix(in srgb, var(--paper) 96%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  html.mshop-on .filter-bar::-webkit-scrollbar { display: none; }

  /* 「篩選」字樣與「顯示 N 項」在手機上都是多餘的——
     頁籤本身已經說明了這是分類，數量就寫在頁籤上。 */
  html.mshop-on .filter-bar-label,
  html.mshop-on .filter-status { display: none !important; }

  html.mshop-on .filter-bar .chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-height: 46px;
    min-width: 0;
    padding: 0 0.85rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    border-radius: 0;
    color: var(--ink-soft);
    font-size: max(0.8125rem, 13px);
    letter-spacing: 0.02em;
    white-space: nowrap;
    gap: 0.3rem;
  }
  html.mshop-on .filter-bar .chip[aria-pressed="true"] {
    color: var(--ink);
    font-weight: 500;
    border-bottom-color: var(--brick, var(--ink));
    background: none;
  }
  /* 數量退成小字，不要跟分類名搶注意力。 */
  html.mshop-on .filter-bar .chip-count {
    font-size: max(0.6875rem, 11px);
    color: var(--ink-soft);
    opacity: 0.75;
    background: none;
    padding: 0;
    min-width: 0;
  }
  html.mshop-on .filter-bar .chip[aria-pressed="true"] .chip-count { opacity: 1; }

  /* 兩欄卡片。每張原本 685px，十張就是 10.8 個螢幕；
     收掉描述、規格與內嵌的選項列之後約 260px，整區剩下不到三個螢幕。 */
  html.mshop-on .cat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
  }
  html.mshop-on .cat-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: var(--paper);
    border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
    overflow: hidden;
  }
  html.mshop-on .cat-card .photo { margin: 0; aspect-ratio: 1 / 1; }
  html.mshop-on .cat-card .photo img { width: 100%; height: 100%; object-fit: cover; }

  /* 卡片上只留看得出「是什麼、多少錢」的資訊，其餘進彈層。 */
  html.mshop-on .cat-card .cat-desc,
  html.mshop-on .cat-card .cat-spec,
  html.mshop-on .cat-card .cat-stock,
  html.mshop-on .cat-card .cat-option,
  html.mshop-on .cat-card .cat-actions,
  html.mshop-on .cat-card .cat-price-unit { display: none; }

  html.mshop-on .cat-card .cat-meta { margin: 0.8rem 0.8rem 0; }
  html.mshop-on .cat-card .cat-name {
    margin: 0.2rem 0.8rem 0;
    /* 隨螢幕縮放。360px 的機器上格子只有 130px 寬，固定 0.95rem 時
       「（210 × 115 mm）」的收尾括號會被擠到下一行變成孤字。 */
    font-size: clamp(0.8rem, 3.45vw, 0.95rem);
    line-height: 1.35;
    text-wrap: balance;
  }
  html.mshop-on .cat-card .cat-price {
    display: block;
    margin: 0.55rem 0.8rem 0;
  }
  html.mshop-on .cat-card .cat-price-amount { font-size: 1.05rem; }
  /* "Price on quote" broke over two lines and made its row of cards uneven. */
  html.mshop-on .cat-card .cat-price-amount--quote { font-size: 0.85rem; white-space: nowrap; }

  html.mshop-on .mshop-pick {
    margin: 0.8rem 0.8rem 0.8rem;
    width: calc(100% - 1.6rem);
    background: var(--ink);
    color: var(--paper);
    border: 0;
    font: inherit;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    margin-top: auto;
  }
  html.mshop-on .mshop-pick:active { opacity: 0.85; }
}

/* 桌機與 JS 未啟用時，「選規格」不存在。 */
.mshop-pick { display: none; }
@media (max-width: 640px) { html.mshop-on .mshop-pick { display: inline-flex; } }

/* ── 底部規格彈層 ───────────────────────────────────────── */
.mshop-sheet {
  position: fixed;
  inset: 0;
  z-index: 210;
  pointer-events: none;
}
.mshop-sheet[aria-hidden="false"] { pointer-events: auto; }

.mshop-scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ink) 42%, transparent);
  opacity: 0;
  transition: opacity 260ms cubic-bezier(.2,.7,.2,1);
}
.mshop-sheet[aria-hidden="false"] .mshop-scrim { opacity: 1; }

.mshop-panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--paper);
  border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  padding: 0.75rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
  max-height: 82vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 300ms cubic-bezier(.2,.7,.2,1);
}
.mshop-sheet[aria-hidden="false"] .mshop-panel { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .mshop-scrim, .mshop-panel { transition: none; }
}

.mshop-grab {
  width: 38px; height: 4px;
  margin: 0 auto 0.85rem;
  border-radius: 2px;
  background: color-mix(in srgb, var(--ink) 20%, transparent);
}
.mshop-x {
  position: absolute;
  top: 0.5rem; right: 0.6rem;
  width: 44px; height: 44px;
  border: 0; background: none;
  font-size: 1.6rem; line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
}

.mshop-head {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding-bottom: 0.9rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.mshop-thumb {
  flex: 0 0 86px;
  width: 86px; height: 86px;
  background: var(--paper-deep);
  overflow: hidden;
}
.mshop-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mshop-id { min-width: 0; padding-right: 2.5rem; }
.mshop-name {
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 500;
  text-wrap: balance;
}
.mshop-sku {
  margin: 0.3rem 0 0;
  font-size: max(0.75rem, 12px);
  color: var(--ink-soft);
}

/* 彈層裡的規格用可點的方塊；底下那個 <select> 仍在，
   只是看不見——所有既有邏輯照舊掛在它身上。 */
.mshop-body .cat-option.mshop-opt .cat-variant { display: none; }
.mshop-body .cat-option { display: block; margin: 0 0 1rem; }
.mshop-body .cat-option-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: max(0.75rem, 12px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.mshop-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mshop-chip {
  min-height: 44px;
  padding: 0 0.95rem;
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}
.mshop-chip[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.mshop-body .cat-price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 1rem;
}
.mshop-body .cat-price-amount { font-size: 1.5rem; }

.mshop-body .cat-actions {
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
}
.mshop-body .qty-stepper { flex: 0 0 auto; }
.mshop-body .cat-add { flex: 1 1 auto; min-height: 50px; }

body.mshop-locked { overflow: hidden; }

/* ══ 4 · 窄螢幕頂欄 ═════════════════════════════════════════ */
@media (max-width: 640px) {
  /* 品牌只留字徽。390px 下「豊欣紙業」會被壓成直書把整列撐破，
     原本的設計在 380px 以下才改——門檻太低了。 */
  .brand-name { display: none; }
  .brand { gap: 0; }

  /* 選單：整寬面板，不是浮在中間的一條。
     原本 .topbar-nav.is-open 是 absolute + left:0/right:0，但它同時是
     grid item——絕對定位的包含塊變成格線區域，實際只有 158px 寬，
     看起來像卡在畫面中間。改用 fixed 徹底避開包含塊的問題。 */
  /* 選單開著時關掉頂欄的 backdrop-filter：有濾鏡的元素會成為固定定位
     子元素的包含塊，面板因此被關在 57px 高的頂欄裡出不去。此時底下
     是不透明面板，拿掉模糊看不出差別。 */
  .topbar.has-nav-open,
  .topbar:has(.topbar-nav.is-open) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--paper);
  }

  .topbar-nav.is-open {
    position: fixed;
    top: var(--topbar-h, 56px);
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    /* .topbar-nav 有 justify-self: center。對齊規則也作用在定位盒子上——
       left/right: 0 配上 center，盒子不是撐滿而是縮到內容寬再置中，
       結果就是那條卡在畫面中間的 158px 選單。必須改回 stretch。 */
    justify-self: stretch;
    align-self: stretch;
    z-index: 60;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border-bottom: 0;
    box-shadow: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  }
  .topbar-nav.is-open ul {
    max-width: none;
    margin: 0;
    padding: 0 var(--gutter, 1rem);
    width: 100%;
  }
  .topbar-nav.is-open a {
    padding: 1.05rem 0;
    font-size: 1rem;
  }
  html:lang(zh) .topbar-nav.is-open a { font-size: 1.0625rem; }

  /* 語言切換放在面板最上面——打開選單第一眼就看得到，
     而不是捲到底才發現。order 負值讓它排在 ul 之前，不必動 JS。 */
  .topbar-nav .lang-switch-slot {
    order: -1;
    display: block;
    padding: 0.9rem var(--gutter, 1rem) 1rem;
    border-top: 0;
    border-bottom: var(--rule);
    margin: 0;
  }
  .topbar-nav .lang-switch-slot .lang-switch {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  }
  .topbar-nav .lang-switch-slot .lang {
    flex: none;
    border: 0;
    border-right: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
    padding: 0 0.5rem;
    min-height: 46px;
    font-size: max(0.8125rem, 13px);
  }
  .topbar-nav .lang-switch-slot .lang:last-child { border-right: 0; }
  .topbar-nav .lang-switch-slot .lang.is-active {
    background: var(--ink);
    color: var(--paper);
  }
  .topbar-nav:not(.is-open) .lang-switch-slot { display: none; }

  /* 選單開著時背景不要跟著捲。 */
  body:has(.topbar-nav.is-open) { overflow: hidden; }
}

/* ══ 5 · 型錄卡片收尾 ═══════════════════════════════════════ */
@media (max-width: 640px) {
  /* 品名固定兩行：balance 會把「擦手紙巾」拆成「擦手紙／巾」，
     而且各張卡片的價格會落在不同高度。 */
  html.mshop-on .cat-card .cat-name {
    text-wrap: normal;
    display: -webkit-box;
    /* 最多三行：窄螢幕上「迷你擦手紙（210 × 115 mm）」兩行裝不下，
       收尾括號會被裁掉，看起來像壞掉。min-height 仍保持兩行，
       短名稱的卡片不會因此變高。 */
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(2 * 1.35em);
  }
  /* 彈層裡的加入鍵要是實心主鍵，手機上才看得出是主要動作。 */
  .mshop-body .cat-add {
    background: var(--ink);
    color: var(--paper);
    border: 0;
    justify-content: center;
    gap: 0.5rem;
  }
  .mshop-body .cat-option { border: 0; padding: 0; }
}

/* ══ 6 · 觸控目標補齊 ═══════════════════════════════════════ */
@media (max-width: 640px) {
  /* 表單控制項原本是 43px——差一個像素也是差。 */
  .calc-fields input,
  .calc-fields select,
  .calc-fold input,
  .calc-fold select,
  .ctr-tbl input,
  .qty-input,
  .fx-own-field input { min-height: 46px; }

  .fx-chip,
  .calc-reset,
  .fx-reset,
  .footer-nav a,
  .footer-legal a,
  .footer-legal button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .calc-reset, .fx-reset { padding-inline: 0.8rem; }

  /* 原生核取方塊只有 16px。把可點範圍擴到整個標籤，
     方塊本身也放大——打勾是這個計算機最常用的動作。 */
  .calc-check,
  .calc-pick label,
  label:has(> input[type="checkbox"]) {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }
  input[type="checkbox"] { width: 22px; height: 22px; flex: 0 0 auto; }

  .brand { min-height: 44px; }

  /* 字級下限沒蓋到的零星項目。 */
  .footer-legal, .footer-legal *,
  .partners-list li, .contact-list li, .reach-list li,
  .stat-note, .cat-stock, .timeline-tag { font-size: max(0.75rem, 12px); }
}

/* ══ 7 · 字級下限（手機）════════════════════════════════════
   試算器與裝櫃表裡的細字降到 9.5px，手機上讀不了。12px 是實務下限。
   這裡用 !important 是刻意的：桌機樣式的選擇器比較深
   （例如 .img-placeholder .ph-tag），而這是無障礙底線，不該被蓋過。
   只作用在 640px 以下，桌機的細緻層級完全不受影響。 */
@media (max-width: 640px) {
  .ctr-ref, .ctr-cap, .ctr-tbl td, .ctr-tbl th,
  .calc-ref, .calc-tag, .calc-sec-t, .calc-pick-spec,
  .calc-out-drivers, .calc-pair-k, .calc-bar-v, .calc-axis span,
  .calc-fold summary, .field-label, .calc-block summary,
  .cat-foot a, .cat-add span,
  .reach-meta, .img-placeholder .ph-tag, .mfg-quote-cite,
  .cart-panel .cart-note, .cart-foot p,
  .footer-base-meta a,
  .footer .container p,
  .cap-specs li, .cap-specs li span,
  .contact-list dt, .contact-list dd,
  .spec-chip, .cap-chip,
  .cart-eyebrow, .cart-total-label, .cart-head p,
  .contact-action, .contact-role,
  .filter-bar-label, .filter-bar .chip span, .calc-seg .chip,
  .calc-reset, .calc-headline-k, .calc-opt-badge,
  .fx-label, .fx-note, .fx-own summary,
  .ctr-tbl thead th, .ctr-tbl tbody td, .ctr-tbl tfoot td,
  .calc-tbl th, .calc-tbl td,
  .legal-updated,
  dt, dd:not(.hero-stat-value):not(.stat-value) { font-size: max(0.75rem, 12px) !important; }
}

/* ══ 8 · 其餘控制項高度 ═════════════════════════════════════ */
@media (max-width: 640px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select, textarea { min-height: 46px; }

  .contact-action, .cart-close,
  .cart-submit, .quote-submit { min-height: 44px; }
  .cart-close { min-width: 44px; }
}

/* ══ 9 · 模擬器浮動結果列（手機）═════════════════════════════
   輸入在上、結果在下，手機上改一個數字要捲下去看再捲回來改。
   把最關鍵的那個數字釘在底部，邊改邊看。
   數字是鏡射輸出區的節點，不另外計算，兩邊永遠一致。 */
.msim-bar { display: none; }

@media (max-width: 640px) {
  .msim-bar:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 190;
    padding: 0.7rem var(--gutter, 1rem) calc(0.7rem + env(safe-area-inset-bottom, 0px));
    background: var(--ink);
    color: var(--paper);
    box-shadow: 0 -10px 24px -18px color-mix(in srgb, var(--ink) 70%, transparent);
  }
  .msim-k {
    flex: 0 0 auto;
    font-size: max(0.6875rem, 11px);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.72;
  }
  .msim-v {
    flex: 1 1 auto;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
  }
  .msim-go {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 0.85rem;
    border: 1px solid color-mix(in srgb, var(--paper) 45%, transparent);
    background: none;
    color: var(--paper);
    font: inherit;
    font-size: max(0.8125rem, 13px);
    cursor: pointer;
  }

}

/* ══ 10 · iPhone 不放大 ══════════════════════════════════════
   iOS Safari 會在點到小於 16px 的輸入框時自動放大整頁，之後得手動縮回。 */
@media (max-width: 640px) {
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; }
}