/* ============================================
   包裝材料配件 packaging-accessories.css（瑋崧企業社）
   由 Locofy 電腦版匯出「轉寫」而非重新設計：色彩／間距／圓角／字級／
   行高皆沿用 Locofy 原值；僅將絕對定位版面重構為正常流 + RWD。

   命名規範（使用者要求）：
   - 以 H2 為界，每區塊各自一份獨立 CSS，區塊間不共用任何 class
     （膠囊也各區分開：pka-tag__chip / pka-inner__pill / pka-card__pill）。
   - 每區塊上下 padding 各寫各的、不共用同一條規則。
   - 唯一例外＝跨頁共用組件：page-hero / page-tab / page-sec-lead / pill-btn。
   BEM 前綴：.pka-
   ============================================ */

/* ====================================================================
   區塊 1：吊牌印刷（pka-tag）
   3 張圖卡（Rectangle SVG 背景 248×278）+ 橘字規格 #ee6e00 + 膠囊/清單。
   ==================================================================== */
.pka-tag {
  padding-top: clamp(48px, 6vw, 84px);
  padding-bottom: 0;
}
.pka-tag__bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.pka-tag__cards {
  display: grid;
  grid-template-columns: repeat(3, 248px);
  justify-content: center;
  gap: 56px;
  max-width: 1000px;
  margin-inline: auto;
}
/* 圖卡：Rectangle 五角形 SVG 當背景（上方有尖角），
   內容下移避開尖角區、垂直置中於下半部。 */
.pka-tag__card {
  min-height: 278px;
  background: center / 100% 100% no-repeat;
  padding: 92px 30px 36px; /* 上 padding 加大避開五角形尖角 */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
}
/* 卡內白字（疊在橘漸層底上，對齊設計稿） */
.pka-tag__title {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
}
.pka-tag__rows {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pka-tag__row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  line-height: 20px;
  color: #fff;
}
.pka-tag__row dd {
  margin: 0;
  color: #fff;
  white-space: nowrap; /* 值維持單行不硬折 */
}
/* 膠囊（本區專屬）：白底（疊在橘底上），黑字 */
.pka-tag__chip {
  flex-shrink: 0;
  min-width: 58px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 13px;
  box-sizing: border-box;
  background-color: #fff;
  font-size: 16px;
  line-height: 20px;
  color: #ee6e00;
  white-space: nowrap;
  box-shadow: 0px 4px 19.1px rgba(0, 0, 0, 0.25);
}
/* 較長膠囊（白卡紙/特殊紙）：縮字級、padding 維持單行 */
.pka-tag__chip--wide {
  min-width: 0;
  padding: 4px 10px;
  font-size: 13px;
}
.pka-tag__list {
  list-style: disc;
  margin: 0;
  padding-left: 21px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  font-size: 16px;
  line-height: 20px;
  color: #fff;
}

/* ====================================================================
   區塊 2：盒內襯設計（pka-inner）
   白卡 1200（無圓角、無陰影）：2 group（棕標頭 bar #aa560e radius 20 +
   橘描邊膠囊）+ 右下內襯裝飾圖 + 騎底框 CTA。
   ==================================================================== */
.pka-inner {
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(48px, 6vw, 80px);
}
/* H2 票根標籤 + 說明 bar 放進白卡內（浮在右下裝飾圖上層） */
.pka-inner__bar {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: clamp(32px, 4vw, 56px);
}
/* 白卡 1200：無圓角、無陰影；定位基準（裝飾圖 + CTA 絕對定位） */
.pka-inner__panel {
  position: relative;
  max-width: 1200px;
  margin-inline: auto;
  padding: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 60px) clamp(56px, 6vw, 80px);
  background-color: #fff;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);
}
/* 右下內襯裝飾圖（370×328）：黏白卡右下角 */
.pka-inner__decor {
  position: absolute;
  right: -119px;
  bottom: -163px;
  z-index: 0;
  width: clamp(220px, 26vw, 370px);
  height: auto;
  object-fit: contain;
  pointer-events: none;
}
.pka-inner__groups {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 801px;
  margin-inline: auto;
}
/* CTA：騎在白卡底部框線、垂直置中（絕對定位於 panel 底緣中央） */
.pka-inner__actions {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  z-index: 2;
  margin: 0;
}
.pka-inner__group {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.pka-inner__head {
  border-radius: 40px;
  background-color: #aa560e;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 16px;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
}
.pka-inner__lead {
  margin: 0;
  font-size: 16px;
  line-height: 20px;
  color: #000;
  text-align: center;
}
.pka-inner__items {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 34px;
}
.pka-inner__item {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 16px;
  line-height: 20px;
  color: #000;
}
/* 橘描邊膠囊（本區專屬） */
.pka-inner__pill {
  flex-shrink: 0;
  min-width: 112px;
  text-align: center;
  border-radius: 60px;
  border: 1px solid #ee6e00;
  padding: 9px 10px;
  box-sizing: border-box;
  color: #ee6e00;
  white-space: nowrap;
}
.pka-inner__scenes {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 34px;
  font-size: 16px;
  line-height: 20px;
  color: #000;
}
.pka-inner__scene {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* 適用情境項目符號：改用設計稿 SVG 圖示（桌機手機共用） */
.pka-inner__dot {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 0;
  background: url("../../images/packaging-accessories/liner-usage__item-icon-461-6922.svg")
    center / contain no-repeat;
}

/* ====================================================================
   區塊 3：紙卡（pka-card）
   2 白卡描邊（border 1px #ab7a44）：橘標題 #ee6e00 + 分隔線 + 橘膠囊／icon 清單。
   ==================================================================== */
/* 紙卡：整區米色底 */
.pka-card {
  padding-top: clamp(48px, 6vw, 84px);
  padding-bottom: clamp(40px, 5vw, 66px);
  background-color: rgba(244, 237, 221, 0.8);
}
.pka-card__bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: clamp(32px, 4vw, 56px);
}
/* 紙卡說明 bar 改白底（米色區上米色 bar 看不出，改白），僅限本區 */
.pka-card__bar .page-sec-lead {
  background-color: #fff;
}
.pka-card__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 373px));
  justify-content: center;
  gap: 52px;
  max-width: 800px;
  margin-inline: auto;
}
.pka-card__panel {
  min-height: 217px;
  background-color: #fff;
  border: 1px solid #ab7a44;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  padding: 33.5px 46px;
}
.pka-card__head {
  width: 100%;
  max-width: 281px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.pka-card__title {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  color: #ee6e00;
}
.pka-card__divider {
  width: 100%;
  height: 1px;
  background-color: #ab7a44;
}
.pka-card__rows {
  margin: 0;
  width: 198px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pka-card__row {
  display: flex;
  align-items: center;
  gap: 13px;
  width: max-content;
  font-size: 16px;
  line-height: 20px;
  color: #000;
}
.pka-card__row dd {
  margin: 0;
}
/* 橘底膠囊（本區專屬） */
.pka-card__pill {
  flex-shrink: 0;
  width: 112px;
  min-height: 24px;
  border-radius: 60px;
  background-color: #ee6e00;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  box-sizing: border-box;
  color: #fff;
  white-space: nowrap;
}
.pka-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 198px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 16px;
  line-height: 20px;
  color: #000;
}
.pka-card__list li {
  display: flex;
  align-items: center;
  gap: 13px;
}
/* 項目符號：圖片（info-card__row-icon-shape.svg 22×21），非 CSS 圓點 */
.pka-card__bullet {
  flex-shrink: 0;
  width: 22px;
  height: 21px;
  object-fit: contain;
}
/* 卡內 CTA：僅手機版顯示（見 ≤640），桌機隱藏以維持原 2 欄版面 */
.pka-card__cta {
  display: none;
}

/* ====================================================================
   區塊 4：封口貼紙（pka-sticker）
   3 圓形卡（262 radius 100）：橘描邊（border 2px #ee6e00）/ 橘底 #ee6e00 交替。
   ==================================================================== */
.pka-sticker {
  padding-top: clamp(48px, 6vw, 84px);
  padding-bottom: clamp(40px, 5vw, 66px);
}
.pka-sticker__bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.pka-sticker__cards {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
}
.pka-sticker__circle {
  width: 262px;
  height: 262px;
  border-radius: 100px;
  background-color: #fff;
  border: 2px solid #ee6e00;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
  color: #5a3b1f;
}
/* 橘底圓卡（中間那張） */
.pka-sticker__circle--fill {
  background-color: #ee6e00;
  border-color: #fff;
  color: #fff;
}
.pka-sticker__title {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
}
.pka-sticker__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  text-align: left;
  font-size: 16px;
  line-height: 20px;
}
.pka-sticker__list li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pka-sticker__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

/* ====================================================================
   區塊 5：紙繩與包裝配件（pka-cord）
   白卡橫 2 欄（border 1px #5a3b1f 805×230）+ 直分隔線 + 紙繩裝飾圖。
   ==================================================================== */
/* 整區背景圖（牛皮紙繩／緞帶大圖，淡雅滿版 cover） */
.pka-cord {
  position: relative;
  z-index: 0;
  padding-top: clamp(48px, 6vw, 84px);
  padding-bottom: 600px;
}
/* 背景裝飾圖：偽元素鋪滿整區、放在內容後面（z-index:-1） */
.pka-cord::before {
  content: "";
  position: absolute;
  inset: 0;
  top: -155px;
  z-index: -1;
  background-image: url("../../images/packaging-accessories/pka-cord-bg.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  pointer-events: none;
}
.pka-cord__bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: clamp(32px, 4vw, 56px);
}
/* 定位基準：黃緞帶裝飾相對 panel 絕對定位於左下角。白底（浮在背景圖上）。 */
.pka-cord__panel {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 28px;
  max-width: 805px;
  margin-inline: auto;
  border: 1px solid #5a3b1f;
  box-sizing: border-box;
  background-color: #fff;
  padding: 49px clamp(28px, 3vw, 48px);
}
.pka-cord__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.pka-cord__title {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  color: #ee6e00;
}
.pka-cord__divider {
  flex-shrink: 0;
  width: 1px;
  background-color: #000;
}
.pka-cord__list {
  list-style: disc;
  margin: 0;
  padding-left: 21px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  font-size: 16px;
  line-height: 20px;
  color: #000;
}
/* 紙繩裝飾圖：置中下方 */
/* 黃色緞帶：黏在 panel 左下角、往下突出（相對 section 定位到 panel 左下）。
   panel 置中 max-width 805 → 左緣 ≈ max(0, 50% - 402px)。 */
/* 黃色緞帶：黏在 panel 左下角、往左下突出（相對 panel 定位） */
.pka-cord__decor {
  position: absolute;
  z-index: 2;
  left: -159px;
  bottom: -204px;
  width: 518px;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

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


/* ====================================================================
   RWD（斷點 1280 / 1024 / 768 / 640）— 每區塊各自收斂
   ==================================================================== */
@media (max-width: 1024px) {
  /* 吊牌：3 → 2 欄 */
  .pka-tag__cards {
    grid-template-columns: repeat(2, 248px);
  }
  /* 紙卡：2 → 1 欄 */
  .pka-card__cards {
    grid-template-columns: minmax(0, 373px);
  }
  /* 紙繩：橫 2 欄 → 直向、移除直分隔線 */
  .pka-cord__panel {
    flex-direction: column;
    gap: 24px;
  }
  .pka-cord__divider {
    width: auto;
    height: 1px;
  }
}

@media (max-width: 640px) {
  /* ============================================
     ≤640 手機版：依 Figma 手機畫布（375 寬）逐區塊重排，像素級對齊
     只新增手機規則、不改桌機。設計稿：figma-export/packaging-accessories/mobile
     各區字級統一 13px / line-height 22px；標題/膠囊 13px。
     ============================================ */

  /* 各區塊上下間距收斂 */
  .pka-tag,
  .pka-inner,
  .pka-card,
  .pka-sticker {
    padding-block: 48px;
  }

  .pka-tag {
    padding-bottom: 16px;
  }

  .pka-inner {
    padding-bottom: 64px;
  }

  .pka-tag__bar,
  .pka-inner__bar,
  .pka-card__bar,
  .pka-sticker__bar,
  .pka-cord__bar {
    margin-bottom: 24px;
  }

  /* ===== 區塊1 吊牌印刷：圖卡單欄、13px ===== */
  .pka-tag__cards {
    grid-template-columns: 248px;
    gap: 28px;
  }
  /* 手機版 3 張圖卡背景改用設計稿 SVG（!important 蓋過 inline） */
  .pka-tag__cards .pka-tag__card {
    background-image: url("../../images/packaging-accessories/size-card__media-461-6837.svg") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
  }
  /* 卡內容置中、間距 16（設計稿 body gap 16） */
  .pka-tag__card {
    padding: 76px 25px 32px;
    gap: 16px;
    min-height: 248px;
  }
  .pka-tag__title {
    font-size: 13px;
    font-weight: var(--fw-semibold);
  }
  .pka-tag__rows {
    gap: 12px;
  }
  .pka-tag__row,
  .pka-tag__list {
    gap: 9px;
    font-size: 13px;
    line-height: 22px;
  }
  .pka-tag__chip {
    min-height: 0;
    min-width: 0;
    padding: 6px 13px;
    font-size: 13px;
  }

  /* ===== 區塊2 盒內襯：白卡、膠囊直向、13px ===== */
  .pka-inner__panel {
    padding: 28px 16px 48px;
    max-width: 310px;
  }
  .pka-inner__groups {
    gap: 24px;
  }
  .pka-inner__group {
    gap: 12px;
    align-items: center;
  }
  /* 棕標頭 bar #aa560e radius 20（設計稿 liner-specs-head） */
  .pka-inner__head {
    min-height: 28px;
    width: 100%;
    border-radius: 20px;
    padding: 4px 16px;
    font-size: 13px;
    font-weight: var(--fw-semibold);
  }
  .pka-inner__lead {
    font-size: 13px;
    line-height: 22px;
  }
  /* 膠囊橫排 → 直向、間距 16（設計稿 liner-specs-list gap 16） */
  .pka-inner__items,
  .pka-inner__scenes {
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    gap: 16px;
    font-size: 13px;
    line-height: 22px;
  }
  .pka-inner__item {
    gap: 13px;
    font-size: 13px;
    line-height: 22px;
  }
  /* 橘描邊膠囊 radius 60（設計稿 liner-specs-row-label） */
  .pka-inner__pill {
    border-radius: 60px;
    min-width: 112px;
    padding: 2px 12px;
    font-size: 13px;
    text-align: center;
  }
  .pka-inner__scene {
    gap: 8px;
  }
  /* 右下內襯裝飾圖：手機改用 gallery-right-bottom-dec.svg，寬 120。
     設計稿為緊貼「螢幕右緣」出血（非黏在白卡右緣）。白卡置中 max-width 310，
     其右緣距視窗中心 155px，故 right = -(50vw - 155px) 把裝飾圖右緣推到視窗右緣。 */
  .pka-inner__decor {
    display: block;
    content: url("../../images/packaging-accessories/gallery-right-bottom-dec.svg");
    width: 120px;
    height: auto;
    right: calc(-50vw + 155px);
    bottom: -36px;
  }

  /* ===== 區塊3 紙卡：白卡單欄、13px（設計稿 paper-card-specs-group：白底 #ab7a44 描邊、小圓角） ===== */
  .pka-card__cards {
    grid-template-columns: minmax(0, 300px);
    gap: 28px;
    max-width: 238px;
  }
  /* 白卡棕描邊：設計稿為小圓角（非 30），內距 24/20、群組間距 18 */
  .pka-card__panel {
    min-height: 0;
    padding: 24px 20px;
    gap: 18px;
  }
  .pka-card__head {
    gap: 12px;
  }
  .pka-card__title {
    font-size: 13px;
    font-weight: var(--fw-semibold);
  }
  .pka-card__rows {
    gap: 12px;
    width: 100%;
  }

  .pka-card__list {
    gap: 12px;
    width: auto;
  }
  .pka-card__row,
  .pka-card__list li {
    gap: 13px;
    font-size: 13px;
    line-height: 22px;
  }
  /* 橘底膠囊 radius 60；固定寬讓右側值左緣對齊（設計稿三值同一直線） */
  .pka-card__pill {
    width: 80px;
    min-height: 0;
    border-radius: 60px;
    padding: 1px 12px;
    font-size: 13px;
    box-sizing: border-box;
  }
  /* 卡內 CTA：手機版於「紙卡尺寸大小」卡底部顯示（設計稿），置中 */
  .pka-card__cta {
    display: inline-flex;
    align-self: center;
    margin-top: -8px;
  }
  /* 紙卡尺寸大小（第一張卡）底部留白縮為 10 */
  .pka-card__cards .pka-card__panel:first-child {
    padding-bottom: 10px;
  }

  /* ===== 區塊4 封口貼紙：手機非圓卡→圓角矩形堆疊（設計稿 spec-group radius 30、橘框/橘底交替、✦星號項目符號） ===== */
  .pka-sticker__cards {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 16px;
  }
  /* 圓卡改圓角矩形：滿版單欄、內容左靠、標題置中 */
  .pka-sticker__circle {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 30px;
    align-items: stretch;
    padding: 20px 24px;
    gap: 12px;
    z-index: 1;
  }
  .pka-sticker__title {
    font-size: 13px;
    font-weight: var(--fw-semibold);
    text-align: center;
  }
  .pka-sticker__list {
    gap: 4px;
    font-size: 13px;
    line-height: 22px;
    align-items: center;
    align-self: center;
  }
  .pka-sticker__list li {
    gap: 8px;
    width: fit-content;
    align-self: flex-start;
  }
  /* 項目符號改設計稿 ✦ 四角星：白卡用橘星 SVG */
  .pka-sticker__dot {
    width: 8px;
    height: 8px;
    border-radius: 0;
    background: url("../../images/packaging-accessories/spec__bullet-461-7049.svg")
      center / contain no-repeat;
  }
  /* 橘底卡（紙卡材質）改白星 SVG */
  .pka-sticker__circle--fill .pka-sticker__dot {
    background-image: url("../../images/packaging-accessories/spec__bullet-461-7061.svg");
  }

  /* ===== 區塊5 紙繩配件：白卡欄堆疊、13px；裝飾圖縮 ===== */
  /* 底距容納騎底框按鈕(半顆 22)+左下緞帶突出(96)+留白 */
  .pka-cord {
    padding-bottom: 140px;
  }
  /* 手機專屬背景圖（用既有 hero__photo，不覆蓋桌機共用圖） */
  .pka-cord::before {
    background-image: url("../../images/packaging-accessories/hero__photo-461-6803.webp");
    background-size: contain;
    top: -345px;
  }
  .pka-cord__panel {
    flex-direction: column;
    gap: 24px;
    padding: 33px 20px;
    max-width: 223px;
  }
  .pka-cord__col {
    gap: 16px;
  }
  .pka-cord__divider {
    width: 132px;
    height: 1px;
    align-self: center;
  }
  .pka-cord__title {
    font-size: 13px;
    font-weight: var(--fw-semibold);
  }
  .pka-cord__list {
    gap: 12px;
    font-size: 13px;
    line-height: 22px;
  }
  /* CTA：騎在白卡底部框線上、置中（往上拉半個按鈕高，讓按鈕中心落在 panel 下緣），
     並提到緞帶裝飾圖之上 */
  .pka-cord .section-actions {
    position: relative;
    z-index: 3;
    margin-top: -14px;
  }
  /* 紙繩緞帶裝飾圖：手機改用 accessory__photo（content 換圖，不動桌機 src），
     黏白卡左下角、往左下突出（設計稿小尺寸） */
  .pka-cord__decor {
    content: url("../../images/packaging-accessories/accessory__photo-461-7108.webp");
    left: -71px;
    bottom: -94px;
    width: 230px;
  }

  .page-components {
    margin-top: -90px;
  }
}