/* ============================================
   客製紙盒 custom-paper-box.css（瑋崧企業社）
   由 Locofy 電腦版匯出「轉寫」而非重新設計：
   色彩／間距／圓角／字級／行高皆沿用 Locofy 原值，
   僅將絕對定位版面重構為正常流 + RWD（clamp() 慣例）。
   桌機（≥1280px）忠實重現 Locofy 量測值。
   BEM 前綴：.cpb-
   位置定位：全頁不使用 position:absolute 放置區塊；
   僅「固定尺寸 widget 內」的局部 badge 保留 absolute（見 .cpb-tagpair）。
   ============================================ */

/* ===================================================
   共用：區塊標頭 cpb-sec-head + 標題膠囊 cpb-pill
   Locofy：.union-parent 標題（#5a3b1f 24px 膠囊感），
   .frame 米色 intro bar #ffe9ce（800×105），內文 700px。
   標題以 CSS 膠囊重建（取代 union svg）。
   =================================================== */
.cpb-process,
.cpb-materials,
.cpb-printing,
.cpb-small-batch,
.cpb-about {
  padding-block: clamp(48px, 6vw, 88px);
}

.cpb-materials {
  background-color: #b3b3b329;
}

.cpb-sec-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-bottom: clamp(32px, 4vw, 64px);
}
/* H2 票根標籤已統一至共用 .page-tab / .page-tab--wide（5-components.css）；
   背景票根 SVG 由 PHP inline style 指定（短標題 Union-11281、長標題 Union-11614）。 */

/* ===================================================
   2. 流程 Process（cpb-process）
   Locofy 灰帶 .item（#b3b3b3 opacity .13）→ 區塊淡灰底
   =================================================== */
.cpb-process {
}
.cpb-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}
/* 步驟之間的直立連接線（重建 line svg：4×48 #5a3b1f） */
/* 步驟連接線：向下箭頭（原稿 down-brown-arrow，15×49 #AA560E） */
.cpb-steps__line {
  width: 15px;
  height: 49px;
  background: url("../../images/custom-paper-box/down-brown-arrow-367-11380.svg")
    center / contain no-repeat;
  flex-shrink: 0;
}
.cpb-step {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
/* 步驟標頭：STEP 徽章 + 點點 + 標題 */
.cpb-step__head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cpb-step__badge {
  min-height: 28px;
  min-width: 76px;
  border-radius: 4px;
  background-color: #5a3b1f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
  box-sizing: border-box;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}
/* 點點裝飾（重建 8/6/4px #5a3b1f 圓點） */
.cpb-dots {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cpb-dots__dot {
  border-radius: 50%;
  background-color: #5a3b1f;
}
.cpb-dots__dot--lg {
  width: 8px;
  height: 8px;
}
.cpb-dots__dot--md {
  width: 6px;
  height: 6px;
}
.cpb-dots__dot--sm {
  width: 4px;
  height: 4px;
}

.cpb-step__name {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #ee6e00;
}
.cpb-step__intro {
  margin: 0;
  width: 700px;
  max-width: 100%;
  font-size: 16px;
  line-height: 20px;
  color: #000;
  text-align: left;
}
.cpb-step__intro--center {
  text-align: center;
}
.cpb-step__note {
  margin: 0;
  width: 100%;
  font-size: 16px;
  line-height: 20px;
  color: #000;
  text-align: left;
}
.cpb-step__note--center {
  text-align: center;
}

/* STEP.1 三尺寸圓 */
.cpb-sizes {
  width: 458px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;
  text-align: left;
}
.cpb-sizes__list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}
.cpb-size {
  width: 126px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
}
/* 100px 圓：小型 #ee6e00 / 中型 #cc9a55 / 大型 #aa560e */
.cpb-size__circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px;
  box-sizing: border-box;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  flex-shrink: 0;
}
.cpb-size__circle--sm {
  background-color: #ee6e00;
}
.cpb-size__circle--md {
  background-color: #cc9a55;
}
.cpb-size__circle--lg {
  background-color: #aa560e;
}

.cpb-size__range {
  align-self: stretch;
  text-align: center;
  font-size: 16px;
  line-height: 20px;
  color: #000;
}
/* 米色 caption bar #ffe9ce */
.cpb-size__caption {
  align-self: stretch;
  min-height: 24px;
  background-color: #ffe9ce;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 20px;
  color: #000;
}

/* STEP.2 四盒型卡 */
.cpb-boxtypes {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  text-align: left;
}
.cpb-boxtypes__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.cpb-boxtype {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
/* 照片 height 140px、radius 8px */
.cpb-boxtype__img {
  width: 100%;
  height: 140px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}
/* 兩標籤膠囊：實心 #ab7a44 + 描邊 #ab7a44（局部 absolute 於固定尺寸 widget 內） */
.cpb-tagpair {
  position: relative;
  width: 200px;
  max-width: 100%;
  height: 30px;
  font-size: 16px;
}
.cpb-tagpair__solid {
  position: absolute; /* 局部 badge：在固定 200×30 widget 內疊放，非版面定位 */
  top: 0;
  left: 0;
  border-radius: 40px 0 0 40px;
  background-color: #ab7a44;
  width: 89px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.cpb-tagpair__outline {
  position: absolute; /* 局部 badge：同上 */
  top: 0;
  left: 82px;
  border-radius: 4px 40px 40px 4px;
  border: 1px solid #ab7a44;
  box-sizing: border-box;
  width: 118px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ab7a44;
}
.cpb-boxtype__caption {
  margin: 0;
  align-self: stretch;
  font-size: 14px;
  color: #000;
  text-align: center;
}

/* ===================================================
   3. 材質 Materials（cpb-materials）
   3 欄：照片 320px(radius 12px) + 棕色標籤 #aa560e + 條列
   =================================================== */
.cpb-materials__grid {
  list-style: none;
  margin: 0 auto clamp(28px, 3vw, 40px);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 78px;
  max-width: 1116px;
}
.cpb-material {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}
.cpb-material__img {
  width: 100%;
  height: 320px;
  border-radius: 12px;
  object-fit: cover;
  display: block;
}
.cpb-material__body {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.cpb-material__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
/* 棕色標籤 #aa560e 白字 20px */
.cpb-material__tag {
  min-width: 101px;
  min-height: 28px;
  background-color: #aa560e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 20px;
  box-sizing: border-box;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
}
.cpb-material__desc {
  margin: 0;
  font-size: 16px;
  line-height: 20px;
  color: #000;
}
.cpb-material__note {
  margin: 0;
  font-size: 16px;
  line-height: 20px;
  color: #000;
}
/* 條列：#ab7a44 小圓點 + 橘色強調 */
.cpb-deflist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.cpb-deflist__row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 20px;
}
.cpb-deflist__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #ab7a44;
  flex-shrink: 0;
}
.cpb-deflist__text {
  color: #ee6e00;
}
.cpb-deflist__val {
  color: #000;
}
.cpb-em {
  font-weight: 500;
}

/* ===================================================
   4. 印刷加工 Printing（cpb-printing）
   2×2：320px 圖 + 詳情卡（標題、虛線 divider、標籤列）
   =================================================== */
.cpb-techs {
  list-style: none;
  margin: 0 auto clamp(28px, 3vw, 40px);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 70px 78px;
  max-width: 1256px;
}
.cpb-tech {
  display: flex;
  align-items: center;
  gap: 30px;
}
.cpb-tech__img {
  width: 320px;
  height: 320px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.cpb-tech__card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 25px;
}
.cpb-tech__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 17px;
}
.cpb-tech__name {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  color: #ee6e00;
}
.cpb-tech__desc {
  margin: 0;
  font-size: 16px;
  line-height: 20px;
  color: #000;
}
/* 虛線 divider（Locofy .line-div）：1px dashed #ee6e00 */
.cpb-tech__divider {
  align-self: stretch;
  height: 0;
  border-top: 1px dashed #ee6e00;
}
.cpb-tech__rows {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}
.cpb-tech__row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
/* 標籤：描邊 #ab7a44 */
.cpb-tech__key {
  margin: 0;
  min-height: 26px;
  min-width: 79px;
  border: 1px solid #ab7a44;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  flex-shrink: 0;
  font-size: 16px;
  color: #ab7a44;
}
.cpb-tech__val {
  margin: 0;
  font-size: 16px;
  line-height: 20px;
  color: #000;
}

/* ===================================================
   5. 少量方案 Small-batch（cpb-small-batch）
   Locofy 米色漸層帶 .child → 區塊背景漸層
   =================================================== */
.cpb-small-batch {
  background: linear-gradient(157.41deg, rgba(244, 237, 221, 0.5) 34.98%, #fff);
}
.cpb-sb {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  max-width: 905px;
  margin: 0 auto clamp(28px, 3vw, 40px);
}
.cpb-sb__col {
  width: 422px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}
.cpb-sb__col--stack {
  width: 429px;
  align-items: center;
  justify-content: center;
  gap: 11px;
}
.cpb-sb__head {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 20px;
}
/* 漸層 pill header（Locofy .logo-wrapper） */
.cpb-sb__badge,
.cpb-sb__feature-head {
  align-self: stretch;
  min-height: 74px;
  border-radius: 12px;
  background: linear-gradient(0deg, #ee6e00 65%, #ffe9ce);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 60px;
  box-sizing: border-box;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
}
.cpb-sb__lead {
  margin: 0;
  align-self: flex-end;
  font-size: 16px;
  line-height: 20px;
  color: #000;
}
/* 白色現成尺寸卡（白底 + 陰影） */
.cpb-sb__card {
  align-self: stretch;
  box-shadow: 0 4px 20.3px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  padding: 21px 25px;
  box-sizing: border-box;
}
.cpb-sb__card-title {
  margin: 0;
  font-size: 16px;
  line-height: 20px;
  color: #000;
}
.cpb-sb__sizes {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cpb-sb__size {
  display: flex;
  gap: 16px;
  font-size: 16px;
  line-height: 20px;
}
.cpb-sb__size dt {
  margin: 0;
  white-space: pre-wrap;
  color: #ee6e00;
}
.cpb-sb__size dd {
  margin: 0;
  color: #000;
}
/* 米色 note bar #ffe9ce（疊在白卡下緣） */
.cpb-sb__note {
  align-self: stretch;
  min-height: 40px;
  box-shadow: 0 4px 20.3px rgba(0, 0, 0, 0.1);
  background-color: #ffe9ce;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 20px;
  color: #000;
  white-space: nowrap; /* 不換行；下方 ≥1280 放寬欄寬使其完整顯示 */
}
.cpb-sb__feature {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cpb-sb__feature-text {
  margin: 0;
  font-size: 16px;
  line-height: 20px;
  color: #000;
}
/* 箭頭裝飾（重建 faarrow svg）：CSS 三角形 */
/* 箭頭（原稿 gradient-brown-arrow，28×30 棕色漸層，預設向右） */
.cpb-sb__arrow {
  flex-shrink: 0;
  width: 28px;
  height: 30px;
  background: url("../../images/custom-paper-box/gradient-brown-arrow-367-11636.svg")
    center / contain no-repeat;
  /* 中間箭頭：對齊左右橘色 header（min-height 74px）的垂直中心 */
  align-self: flex-start;
  margin-top: calc((74px - 30px) / 2);
}
/* 右欄內箭頭：旋轉 90° 改為向下，連接加印Logo→急單處理 */
.cpb-sb__arrow--down {
  align-self: center;
  margin-top: 0;
  transform: rotate(90deg);
}

/* ===================================================
   6. 關於工廠 About（cpb-about）
   Locofy 米色帶 .rectangle-div → 區塊米色底 #f4eddd
   4 個 200px 圓（4px 白邊、陰影），交錯 #ab7a44 / #5a3b1f
   =================================================== */
.cpb-about {
  background-color: #f4eddd; /* 取代 .rectangle-div 絕對定位米色帶 */
}
/* about 區說明：背景白色（區塊本身已是米色底，故 lead 改白以區隔） */
.cpb-about .page-sec-lead {
  background-color: #fff;
}
.cpb-features {
  list-style: none;
  margin: 0 auto clamp(28px, 3vw, 40px);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 42px;
  max-width: 1182px;
  text-align: center;
}
.cpb-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
/* 200px 圓：4px 白邊 + 陰影 */
.cpb-feature__circle {
  width: 200px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 4px 16.7px rgba(101, 67, 12, 0.25);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.cpb-feature__circle--a {
  background-color: #ab7a44;
}
.cpb-feature__circle--b {
  background-color: #5a3b1f;
}
/* About 圓形 icon（原稿 SVG，白色線稿） */
.cpb-feature__icon {
  width: 96px;
  height: auto;
  object-fit: contain;
}
/* 標題：位於圓圈下方、棕色 #5a3b1f */
.cpb-feature__name {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  color: #5a3b1f;
}
/* 白色 caption 卡 */
.cpb-feature__caption {
  margin: 0;
  align-self: stretch;
  min-height: 98px;
  border-radius: 12px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 20px;
  color: #000;
  text-align: left;
}

/* 本頁 .page-components 上內距：改數字即可，只影響本頁（未設則沿用共用預設 30px） */
.page-components { padding-top:73px; }

/* CTA 按鈕（pill-btn / section-actions）已移至 5-components.css（全頁共用） */

/* ===================================================
   RWD（斷點 1280 / 1024 / 768 / 640）
   桌機 ≥1280 重現 Locofy；以下逐步收斂多欄與側距。
   =================================================== */
/* 電腦版（≥1280）：少量方案 note bar 依文字撐寬（突破欄寬 422px），維持單行完整顯示
   （hero 前言／區塊說明的單行已由共用 .page-hero__lead / .page-sec-lead 處理） */
@media (min-width: 1280px) {
  .cpb-sb__note {
    align-self: center;
    width: max-content;
    max-width: 100%;
  }
}

@media (max-width: 1024px) {
  /* 印刷加工 2×2 → 單欄 */
  .cpb-techs {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  /* 材質 3 欄 → 2 欄 */
  .cpb-materials__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px;
  }
  /* 盒型 4 欄 → 2 欄 */
  .cpb-boxtypes__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* 關於 4 圓 → 2 欄 */
  .cpb-features {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  /* 印刷加工：圖 + 卡改直向堆疊 */
  .cpb-tech {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .cpb-tech__img {
    width: 100%;
    height: clamp(220px, 50vw, 320px);
  }
  .cpb-tech__card {
    width: 100%;
  }
  /* 少量方案：左右 → 上下堆疊 */
  .cpb-sb {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }
  .cpb-sb__col,
  .cpb-sb__col--stack {
    width: 100%;
  }
  .cpb-sb__arrow {
    display: none; /* 水平箭頭僅桌機用，堆疊後省略 */
  }
  /* 材質：2 欄 → 1 欄 */
  .cpb-materials__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  /* STEP.1 三圓區寬度自適應 */
  .cpb-sizes {
    width: 100%;
  }
}

@media (max-width: 640px) {
  /* ============================================
     ≤640 手機版：依 Figma 手機畫布（375 寬）逐區塊重排，像素級對齊
     只新增手機規則、不改桌機。設計稿：figma-export/custom-paper-box/mobile
     ============================================ */

  /* ===== 共用：區塊標頭、說明、CTA 手機字級 ===== */
  .cpb-process,
  .cpb-materials,
  .cpb-printing,
  .cpb-small-batch,
  .cpb-about {
    padding-block: 48px;
  }
  .cpb-sec-head {
    margin-bottom: 24px;
  }
  /* 手機版 H2 票根膠囊 SVG 已統一至共用 .page-tab ≤640（5-components.css），此處不再重複。 */

  /* ===== 流程 Process ===== */
  .cpb-steps {
    gap: 0;
  }
  /* 步驟連接線：手機高 48px */
  .cpb-steps__line {
    height: 48px;
    margin-block: 20px;
  }
  .cpb-step {
    gap: 12px;
  }
  .cpb-step__head {
    gap: 4px;
  }
  /* STEP 徽章 13px、padding 8/6 */
  .cpb-step__badge {
    min-height: 20px;
    min-width: 64px;
    padding: 1px 11px;
    font-size: 13px;
    font-weight: var(--fw-semibold);
  }
  /* 標題 13px 橘 */
  .cpb-step__name {
    font-size: 13px;
    font-weight: var(--fw-semibold);
  }
  /* 內文/說明 13px / 22px、置中 */
  .cpb-step__intro,
  .cpb-step__note {
    width: 100%;
    max-width: 260px;
    font-size: 13px;
    line-height: 22px;
  }

  /* STEP.1 三尺寸圓：手機改橫向（膠囊左 + 文字右），整組置中、列距 20 */
  .cpb-sizes {
    width: auto;
    align-items: center;
    gap: 20px;
  }
  .cpb-sizes__list {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  /* 圓在左跨兩列、右上 range / 右下 caption；欄距 8、列距 4 */
  .cpb-size {
    width: auto;
    display: grid;
    grid-template-columns: 64px 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    justify-content: start;
    column-gap: 12px;
    row-gap: 4px;
  }
  /* 膠囊：固定 64×84、文字置中（取代桌機 100 正圓） */
  .cpb-size__circle {
    grid-row: 1 / span 2;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    align-self: center;
    border-radius: 50px;
    padding: 0;
    font-size: 13px;
    font-weight: var(--fw-semibold);
    line-height: 1.4;
  }
  /* 範圍：右欄上列，靠下對齊（貼近 caption） */
  .cpb-size__range {
    align-self: end;
    text-align: center;
    font-size: 13px;
    line-height: 22px;
  }
  /* caption 米色 bar：右欄下列、自然寬（不撐滿） */
  .cpb-size__caption {
    align-self: start;
    justify-self: start;
    min-height: 22px;
    width: 100px;
    padding: 2px 1px;
    font-size: 13px;
    line-height: 22px;
  }

  /* ===== 盒型卡 STEP.2：手機橫向（圖左 + 文字區右），單欄寬 240 ===== */
  .cpb-boxtypes {
    gap: 28px;
  }
  .cpb-boxtypes__grid {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 240px;
    margin-inline: auto;
  }
  /* 卡：圖左跨兩列 + 右側上(標籤對)下(說明) grid */
  .cpb-boxtype {
    display: grid;
    grid-template-columns: 96px 1fr;
    grid-template-rows: auto auto;
    align-items: end;
    column-gap: 12px;
    row-gap: 8px;
  }
  .cpb-boxtype__img {
    grid-row: 1 / span 2;
    align-self: center;
    width: 96px;
    height: 96px;
  }
  /* 標籤對：橫向相連兩段膠囊（名稱實心左 + 用途描邊右），高 24、13px */
  .cpb-tagpair {
    width: auto;
    height: 24px;
    display: flex;
    align-items: center;
    font-size: 13px;
  }
  .cpb-tagpair__solid {
    position: static;
    width: auto;
    height: 24px;
    padding: 0 10px;
    border-radius: 40px 0 0 40px;
    white-space: nowrap;
    line-height: 22px;
  }
  .cpb-tagpair__outline {
    position: static;
    width: auto;
    height: 24px;
    margin-left: -1px;
    padding: 0 10px;
    border-radius: 4px 40px 40px 4px;
    white-space: nowrap;
    line-height: 22px;
  }
  .cpb-boxtype__caption {
    font-size: 13px;
    line-height: 22px;
    text-align: center;
  }

  /* ===== 材質 Materials：手機橫向（圖左 + 內容右），單欄 ===== */
  .cpb-materials__grid {
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 306px;
  }
  .cpb-material {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
  .cpb-material__img {
    width: 80px;
    height: auto;
    flex-shrink: 0;
    object-fit: cover;
  }
  /* 手機版材質圖換設計稿圖（content 替換 img 顯示來源；桌機 src 不變） */
  .cpb-materials__grid .cpb-material:nth-child(1) .cpb-material__img {
    content: url("../../images/custom-paper-box/material-card__photo-461-5367.webp");
  }
  .cpb-materials__grid .cpb-material:nth-child(2) .cpb-material__img {
    content: url("../../images/custom-paper-box/material-card__photo-461-5391.webp");
  }
  .cpb-materials__grid .cpb-material:nth-child(3) .cpb-material__img {
    content: url("../../images/custom-paper-box/material-card__photo-461-5409.webp");
  }
  .cpb-material__body {
    gap: 8px;
    align-self: center;
  }
  .cpb-material__intro {
    gap: 4px;
  }
  /* 棕標籤縮成 13px chip */
  .cpb-material__tag {
    min-width: 0;
    min-height: 0;
    padding: 2px 12px;
    font-size: 13px;
    font-weight: var(--fw-semibold);
  }
  .cpb-material__desc,
  .cpb-material__note {
    font-size: 13px;
    line-height: 22px;
  }
  .cpb-deflist {
    gap: 4px;
  }
  .cpb-deflist__row {
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.6;
  }

  /* ===== 印刷加工 Printing：手機橫向（圖左 + 卡右） ===== */
  .cpb-techs {
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 307px;
  }
  .cpb-tech {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
  .cpb-tech__img {
    width: 72px;
    height: 178px;
    flex-shrink: 0;
    object-fit: cover;
  }
  /* 手機版印刷加工圖換設計稿圖（彩盒印刷/燙金/局部上光/霧膜） */
  .cpb-techs .cpb-tech:nth-child(1) .cpb-tech__img {
    content: url("../../images/custom-paper-box/printing-card__photo-461-5429.webp");
  }
  .cpb-techs .cpb-tech:nth-child(2) .cpb-tech__img {
    content: url("../../images/custom-paper-box/finish-card__photo-461-5449.webp");
  }
  .cpb-techs .cpb-tech:nth-child(3) .cpb-tech__img {
    content: url("../../images/custom-paper-box/finish-card__photo-461-5469.webp");
  }
  .cpb-techs .cpb-tech:nth-child(4) .cpb-tech__img {
    content: url("../../images/custom-paper-box/finish-card__photo-461-5489.webp");
  }
  .cpb-tech__card {
    gap: 8px;
  }
  .cpb-tech__head {
    gap: 8px;
  }
  .cpb-tech__name {
    font-size: 13px;
    font-weight: var(--fw-semibold);
  }
  .cpb-tech__desc {
    font-size: 13px;
    line-height: 1.3;
  }
  .cpb-tech__rows {
    gap: 8px;
  }
  .cpb-tech__key {
    min-height: 0;
    min-width: 64px;
    padding: 2px;
    font-size: 13px;
  }
  .cpb-tech__val {
    font-size: 13px;
    line-height: 22px;
  }

  /* ===== 少量方案 Small-batch：堆疊、卡片化 ===== */
  .cpb-sb {
    flex-direction: column;
    align-items: stretch;
    gap: 68px;
    max-width: 284px;
  }
  .cpb-sb__col,
  .cpb-sb__col--stack {
    width: 100%;
  }
  .cpb-sb__col--stack {
    gap: 60px;
  }
  .cpb-sb__arrow {
    display: none;
  }
  /* 漸層 header chip 縮小 13px */
  .cpb-sb__badge,
  .cpb-sb__feature-head {
    min-height: 0;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: var(--fw-semibold);
    background: linear-gradient(180deg, #ee6e00 18%, #ffe9ce 100%);
  }
  .cpb-sb__head {
    gap: 12px;
    margin-bottom: 12px;
  }
  .cpb-sb__lead {
    font-size: 13px;
    line-height: 22px;
  }
  .cpb-sb__card {
    padding: 16px 30px 11px;
    gap: 10px;
  }
  .cpb-sb__card-title,
  .cpb-sb__size {
    font-size: 13px;
    line-height: 22px;
  }
  .cpb-sb__note {
    min-height: 0;
    padding: 10px 13px;
    font-size: 13px;
    line-height: 22px;
    white-space: normal;
  }
  .cpb-sb__feature-text {
    font-size: 13px;
    line-height: 22px;
  }

  /* ===== 關於工廠 About：圓 icon + 標題 + 白卡，單欄置中 ===== */
  .cpb-features {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-width: 313px;
  }
  .cpb-feature {
    gap: 12px;
  }
  /* 圓縮小 */
  .cpb-feature__circle {
    width: 96px;
    padding: 18px;
    border: 2px solid #fff;
  }
  /* 手機版對調：第3「大量生產能力」改深棕、第4「全台配送服務」改棕 */
  .cpb-features .cpb-feature:nth-child(3) .cpb-feature__circle {
    background-color: #5a3b1f;
  }
  .cpb-features .cpb-feature:nth-child(4) .cpb-feature__circle {
    background-color: #ab7a44;
  }
  .cpb-feature__icon {
    width: 48px;
  }
  .cpb-feature__name {
    font-size: 13px;
    font-weight: var(--fw-semibold);
  }
  .cpb-feature__caption {
    min-height: 0;
    border-radius: 8px;
    padding: 22px 10px;
    font-size: 13px;
    line-height: 22px;
  }

  .page-components { padding-top:28px; }
}