/* ============================================
   食品烘焙包裝 food-bakery-packaging.css（瑋崧企業社）
   由 Locofy 電腦版匯出「轉寫」而非重新設計：
   色彩／間距／圓角／字級／行高皆沿用 Locofy 原值，
   僅將絕對定位版面重構為正常流 + RWD（clamp() 慣例）。
   桌機（≥1280px）忠實重現 Locofy 量測值。
   BEM 前綴：.fbp-
   Hero 與區塊說明 bar 沿用共用 .page-hero / .page-sec-lead（5-components.css）。
   ============================================ */

/* ===================================================
   產品區塊外殼（每個食品包裝類型為獨立 section）
   =================================================== */
.fbp-type {
  position: relative;
  padding-block: clamp(40px, 5vw, 72px);
}
/* 米色帶 surface（水果盒）：Locofy .band #f4eddd */
.fbp-type--cream {
  background-color: #f4eddd;
}
/* 白卡陰影 surface（咖啡盒）：Locofy .band2 整區白底卡（陰影 + 12px 圓角） */
.fbp-type--card > .container {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 40.6px rgba(0, 0, 0, 0.25);
  padding-block: clamp(32px, 4vw, 56px);
}
/* 咖啡盒 CTA：騎在白卡底部框線上、置中（負 margin 抵銷白卡下緣 padding + 半按鈕高） */
.fbp-type--card .section-actions {
  margin-bottom: calc(-1 * clamp(22px, 4vw, 56px) - 22px);
}
/* 裝飾淡背景圖（外帶餐盒/酒盒區的去背大圖，opacity 低） */
.fbp-type__decor {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
}
.fbp-type__decor--right {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 930px;
  height: 100%;
  background-position: right center;
}
/* 外帶餐盒區（含 --right 餐盒裝飾）：下方不留白 */
.fbp-type:has(.fbp-type__decor--right) {
  padding-bottom: 0;
}
/* 酒瓶圖：全寬橫跨「咖啡盒區 + 酒盒區」的裝飾圖（不受 section 邊界限制）。
   緊貼酒盒區底部、全寬完整顯示；圖高 = 全寬 / 比例(≈1.24) ≈ 80vw，
   貼底後上緣自然穿出酒盒區、進入咖啡盒區下方。z-index:-1 置於所有內容之下。 */
.fbp-type__decor--bottom-left {
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  height: 80.6vw; /* 100vw / 1.24 ≈ 全寬圖的自然高度 */
  background-position: left bottom;
  background-size: 100% auto;
}
/* 含跨區酒瓶背景的 section（酒盒區）放開 overflow，讓圖往上穿出至咖啡盒區；
   並加大下方留白，容納貼底酒瓶圖的展示空間。 */
.fbp-type:has(.fbp-type__decor--bottom-left) {
  overflow: visible;
  padding-bottom: 413px;
}

/* 產品標頭：票根標籤膠囊 + 米色／白底前言 bar（共用 .page-sec-lead 變體） */
.fbp-type__head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 800px;
  margin: 0 auto clamp(32px, 4vw, 48px);
}
/* H2 票根標籤已統一至共用 .page-tab（5-components.css）；背景 SVG 由 PHP inline style 指定。 */
/* 說明 bar 尺寸/字級/間距統一沿用共用 .page-sec-lead（5-components.css），
   此處僅保留各區底色差異：cream 區用白底、plain 區用米色（與 surface 對比）。 */
.fbp-type--cream .fbp-type__intro {
  background-color: #fff;
}
.fbp-type--plain .fbp-type__intro {
  background-color: #ffe9ce;
}

/* 規格面板外殼 */
.fbp-panel {
  position: relative;
  z-index: 1;
  margin: 0 auto;
}

/* ===================================================
   佈局 A：蛋糕盒（diagram 尺寸示意圖 + 材質橘框 + 適用/客製兩欄）
   =================================================== */
.fbp-cake {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(40px, 5vw, 80px);
}
/* 左：尺寸示意圖欄 */
.fbp-cake__sizes {
  width: 471px;
  max-width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  font-size: 20px;
  font-weight: 500;
  color: #ee6e00;
}
.fbp-cake__sizes-title {
  margin: 0;
}
/* 蛋糕尺寸示意圖：完整 inline SVG（蛋糕分層 + 尺寸引線標註皆在 SVG 內） */
.fbp-cake__chart {
  width: 100%;
}
.fbp-cake__chart svg {
  width: 100%;
  height: auto;
  max-width: 471px;
}
/* 右：面板（材質橘框 + 適用/客製兩欄橘框） */
.fbp-cake__panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: left;
}

/* 橘框卡（蛋糕盒專用：白底 + 橘邊 #ee6e00） */
.fbp-obox {
  background-color: #fff;
  border: 1px solid #ee6e00;
  box-sizing: border-box;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fbp-obox__title {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  color: #ee6e00;
}
.fbp-obox__row-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* 材質列：棕底膠囊 chip + 說明 */
.fbp-mchip-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
}
.fbp-mchip {
  min-height: 28px;
  border-radius: 60px;
  background-color: #ab7a44;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 18px;
  box-sizing: border-box;
  color: #fff;
  white-space: nowrap;
}
.fbp-mchip-row__val {
  color: #000;
}
.fbp-obox__note {
  margin: 0;
  font-size: 16px;
  line-height: 20px;
  color: #aa560e;
}
/* note 現位於 row-group 兩 chip 之間（DOM）。桌機用 order 排回最下方、佔整行；
   手機（≤640）維持 DOM 順序 → 顯示於白卡紙↔E楞之間。 */
.fbp-obox__row-group {
  flex-direction: column;
}
.fbp-obox__row-group .fbp-obox__note {
  order: 2;
}
.fbp-mchip-row {
  order: 1;
}
/* 蛋糕盒底部兩欄（適用/客製） */
.fbp-cake__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.fbp-obox--center {
  align-items: center;
  text-align: center;
  min-height: 200px;
  justify-content: center;
}
.fbp-obox--center .fbp-bullets {
  text-align: left;
}

/* 漸層圓點清單（適用/客製通用） */
/* 圓點清單：預設直排（蛋糕／水果／酒盒用）。外帶餐盒另以變體改橫排。 */
.fbp-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.fbp-bullets__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  line-height: 20px;
  color: #000;
}
.fbp-bullets__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(180.23deg, #ffe9ce, #ab7a44);
  flex-shrink: 0;
}

/* ===================================================
   佈局 B：水果盒（4 欄，橘色圓角 header + 白底卡）
   =================================================== */
.fbp-fruit {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr 1fr; /* 材質欄較寬，容納長 chip + 值不換行 */
  gap: 28px;
  align-items: stretch; /* 4 欄等高 */
}
.fbp-fcol {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* 橘色圓角 header（上圓角 8px） */
.fbp-fcol__head {
  min-height: 48px;
  border-radius: 8px 8px 0 0;
  background-color: #ee6e00;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  box-sizing: border-box;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  text-align: center;
}
.fbp-fcol__card {
  flex: 1; /* 撐滿欄剩餘高度 → 4 欄白卡等高 */
  min-height: 221px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px;
  box-sizing: border-box;
}
/* 灰底方標籤 chip（水果盒尺寸/材質） */
.fbp-fchip-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
}
.fbp-fchip {
  min-height: 28px;
  background-color: #d9d9d9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 13px;
  box-sizing: border-box;
  color: #000;
  white-space: nowrap;
  flex-shrink: 0;
}
.fbp-fchip-row__val {
  color: #000;
  text-align: left;
}
/* 水果盒 note（橘字） */
.fbp-fcol__note {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 20px;
  color: #aa560e;
  width: stretch;
  text-align: center;
}
/* chip 卡（尺寸／材質）：內容靠左、每行 chip + 值緊鄰排列（值在 chip 後方）。
   chip 各自自然寬度（不等寬），值不換行。 */
.fbp-fcol__card--chips {
  align-items: flex-start;
  padding: 34.5px 47px; /* 上下 34.5 / 左右 47 */
}
.fbp-fcol__card--chips .fbp-fchip-row__val {
  white-space: nowrap;
}
/* 棕色圓點（適用/客製） */
.fbp-bullets--brown .fbp-bullets__dot {
  background: #aa560e;
}

/* ===================================================
   佈局 C：外帶餐盒（左尺寸欄 + 右 3 橫列，牛皮框 #ab7a44）
   =================================================== */
.fbp-takeaway {
  display: flex;
  align-items: flex-start;
  gap: clamp(28px, 4vw, 48px);
  color: #ab7a44;
}
/* 左：尺寸欄（標題框 + 內容框疊接） */
.fbp-tk-size {
  width: 320px;
  max-width: 100%;
  flex-shrink: 0;
}
.fbp-tk-size__head,
.fbp-tk-row__head,
.fbp-tk-row__body {
  border: 2px solid #ab7a44;
  box-sizing: border-box;
  background-color: #fff;
}
.fbp-tk-size__head {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 500;
}
.fbp-tk-size__body {
  margin-top: -2px; /* 邊框疊合 */
  min-height: 179px;
  border: 2px solid #ab7a44;
  box-sizing: border-box;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.fbp-tk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* 牛皮方 chip #cfb18d */
.fbp-tkchip-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
}
.fbp-tkchip {
  min-height: 28px;
  background-color: #cfb18d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 13px;
  box-sizing: border-box;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
}
.fbp-tkchip-row__val {
  color: #000;
  text-align: left;
}
/* 右：3 橫列（標題框 + 內容框並排） */
.fbp-tk-rows {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 29px;
}
.fbp-tk-row {
  display: flex;
  align-items: stretch;
  min-height: 58px;
}
.fbp-tk-row__head {
  width: 186px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
}
.fbp-tk-row__body {
  flex: 1;
  margin-left: -2px;
  display: flex;
  align-items: center;
  padding: 12px 20px;
  gap: 12px 24px;
  flex-wrap: wrap;
}
/* 外帶餐盒專用：橫列內的圓點清單改橫排（僅影響外帶區，不動其他直排） */
.fbp-tk-row__body .fbp-bullets {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px 24px;
}

/* ===================================================
   佈局 D：咖啡盒（白色大卡 + 4 區直線分隔，膠囊標題 + 清單）
   =================================================== */
/* 白卡陰影由 .fbp-type--card > .container 提供，此處僅排版 */
.fbp-coffee {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}
.fbp-cf-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
/* 膠囊標題：棕底 #ab7a44 / 橘底 #ee6e00 交錯 */
.fbp-cf-head {
  min-width: 162px;
  border-radius: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  box-sizing: border-box;
  color: #fff;
  font-size: 16px;
}
.fbp-cf-head--brown {
  background-color: #ab7a44;
}
.fbp-cf-head--brand {
  background-color: #ee6e00;
}
.fbp-cf-list {
  margin: 0;
  padding-left: 21px;
  font-size: 16px;
  line-height: 20px;
  color: #000;
  text-align: left;
}
.fbp-cf-list li {
  line-height: 20px;
}
/* 直立分隔線 */
.fbp-cf-divider {
  width: 1px;
  align-self: center;
  height: 86px;
  border-right: 1px solid #000;
  flex-shrink: 0;
}

/* ===================================================
   佈局 E：酒盒（4 欄，圓角大膠囊標題在側／底）
   =================================================== */
/* 4 欄寬度依 Locofy：尺寸298 / 材質362（較寬）/ 適用298 / 客製298 */
.fbp-wine {
  display: grid;
  grid-template-columns: 298fr 362fr 298fr 298fr;
  align-items: stretch; /* 各欄等高 */
  gap: 28px;
}
.fbp-wcol {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 白底卡撐滿欄剩餘高度，使 4 欄白卡等高 */
.fbp-wcol__card {
  flex: 1;
}
/* 圓角大膠囊標題（72px radius、棕 #ab7a44 / 深棕 #5a3b1f 交錯） */
.fbp-wcol__head {
  min-width: 152px;
  min-height: 82px;
  margin-bottom: -22px;
  border-radius: 72px;
  display: flex;
  z-index: 1;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  box-sizing: border-box;
  color: #fff;
  line-height: normal;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
}
.fbp-wcol__head--brown {
  background-color: #ab7a44;
}
.fbp-wcol__head--ink {
  background-color: #5a3b1f;
}
/* 白底卡（牛皮邊 #cfb18d） */
.fbp-wcol__card {
  width: 100%;
  min-height: 221px;
  background-color: #fff;
  border: 1px solid #cfb18d;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 53px;
}
/* 牛皮圓角 chip #cfb18d（酒盒尺寸/材質） */
.fbp-wchip-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  width: stretch;
}
.fbp-wchip {
  min-height: 28px;
  min-width: 74px;
  max-width: 166px;
  flex: 1;
  border-radius: 60px;
  background-color: #cfb18d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 13px;
  box-sizing: border-box;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
}
.fbp-wchip-row__val {
  color: #000;
}
.fbp-wcol__note {
  margin: 4px 0 0;
  font-size: 16px;
  line-height: 20px;
  color: #aa560e;
  text-align: center;
}

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


/* ===================================================
   RWD（斷點 1280 / 1024 / 768 / 640）
   =================================================== */
@media (max-width: 1024px) {
  /* 蛋糕盒：示意圖 + 面板上下堆疊 */
  .fbp-cake {
    flex-direction: column;
    align-items: stretch;
  }
  .fbp-cake__sizes {
    width: 100%;
  }
  /* 水果盒 4 欄 → 2 欄 */
  .fbp-fruit {
    grid-template-columns: repeat(2, 1fr);
  }
  /* 外帶餐盒：左右堆疊 */
  .fbp-takeaway {
    flex-direction: column;
  }
  .fbp-tk-size {
    width: 100%;
  }
  /* 酒盒 4 欄 → 2 欄 */
  .fbp-wine {
    grid-template-columns: repeat(2, 1fr);
  }
  /* 裝飾背景縮小 */
  .fbp-type__decor--right {
  }
}

@media (max-width: 768px) {
  /* 咖啡盒：分隔線改水平、欄堆疊 */
  .fbp-coffee {
    flex-direction: column;
  }
  .fbp-cf-divider {
    display: none;
  }
  /* 外帶餐盒右側橫列：標題框 + 內容框改上下 */
  .fbp-tk-row {
    flex-direction: column;
  }
  .fbp-tk-row__head {
    width: 100%;
  }
  .fbp-tk-row__body {
    margin-left: 0;
    margin-top: -2px;
  }
}

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

  /* ===== 共用：區塊外殼、標頭、前言 ===== */
  .fbp-type {
    padding-block: 48px;
  }
  /* 手機版隱藏區塊裝飾背景圖（外帶餐盒/酒盒的淡去背大圖） */
  .fbp-type__decor {
    display: none;
  }
  /* 移除為裝飾圖預留的下方留白（隱藏後不需要） */
  .fbp-type:has(.fbp-type__decor--right),
  .fbp-type:has(.fbp-type__decor--bottom-left) {
    padding-bottom: 48px;
  }

  /* 外帶餐盒區：手機版「紙盒客製方式」卡下方、貼螢幕右側加餐盒裝飾圖 */
  .fbp-type[aria-labelledby="fbp-takeaway-title"] {
    position: relative;
    padding-bottom: 10px; /* 容納下方裝飾圖 */
  }
  .fbp-type[aria-labelledby="fbp-takeaway-title"]::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -81px;
    z-index: 0;
    width: 273px;
    height: 100%;
    background: url("../../images/food-bakery-packaging/page__photo-takeaway-461-5952.webp")
      right bottom / contain no-repeat;
    pointer-events: none;
  }

  /* 酒盒區：手機版底部全寬酒瓶裝飾圖（立即詢價下方、完整顯示不裁切）。
     高度 = 全寬 × 圖比例（≈0.53），background-size:100% auto 讓圖完整撐滿寬度。 */
  .fbp-type[aria-labelledby="fbp-wine-title"] {
    position: relative;
    overflow: hidden;
    padding-bottom: 27vw; /* 容納完整圖高（依圖比例） */
  }
  .fbp-type[aria-labelledby="fbp-wine-title"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    height: 100%;
    background: url("../../images/food-bakery-packaging/page__photo-wine-461-5951.webp")
      center bottom / 100% auto no-repeat;
    pointer-events: none;
  }
  .fbp-type__head {
    margin-bottom: 24px;
  }
  /* 說明 bar 手機尺寸沿用共用 .page-sec-lead ≤640（5-components.css），此處不再重複 */

  /* ===== 蛋糕盒：示意圖 + 面板堆疊（桌機 1024 已堆疊），手機字級 ===== */
  .fbp-cake {
    gap: 28px;
  }
  .fbp-cake__sizes {
    gap: 14px;
    font-size: 13px;
  }
  .fbp-cake__chart {
    width: fit-content;
  }
  .fbp-cake__chart svg {
    max-width: 280px;
  }
  .fbp-cake__panel {
    gap: 28px;
    align-self: center;
  }
  /* 橘框卡 13px */
  .fbp-obox {
    padding: 16px;
    gap: 12px;
    max-width: 290px;
  }
  .fbp-obox__title {
    font-size: 13px;
    font-weight: var(--fw-semibold);
  }
  /* 手機：note 依 DOM 順序顯示於白卡紙↔E楞之間（重置桌機的 order） */
  .fbp-obox__row-group .fbp-obox__note {
    order: 0;
    font-size: 13px;
    line-height: 22px;
  }
  .fbp-mchip-row {
    order: 0;
  }
  .fbp-cake__pair {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .fbp-obox--center {
    min-height: 0;
  }
  /* 材質 chip 列 13px */
  .fbp-mchip-row {
    font-size: 13px;
  }
  .fbp-mchip {
    min-height: 0;
    padding: 4px 8px;
    min-width: 154px;
  }

  /* 圓點清單 13px / 22px */
  .fbp-bullets {
    gap: 8px;
  }
  .fbp-bullets__item {
    font-size: 13px;
    line-height: 22px;
  }

  /* ===== 水果盒：橘 header + 白卡（已單欄），手機字級 ===== */
  .fbp-fruit {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 256px;
    margin-inline: auto;
  }
  .fbp-fcol {
    gap: 12px;
  }
  .fbp-fcol__head {
    min-height: 0;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: var(--fw-semibold);
  }
  .fbp-fcol__card {
    min-height: 0;
    padding: 16px 20px;
    gap: 12px;
  }
  .fbp-fcol__card--chips {
    padding: 16px 20px;
  }

  .fbp-mchip-row__val {
    white-space: nowrap;
  }
  .fbp-fchip-row {
    font-size: 13px;
  }
  .fbp-fchip {
    min-height: 0;
    padding: 6px 13px;
    max-width: 154px;
    font-size: 13px;
  }
  .fbp-fcol__note {
    font-size: 13px;
    line-height: 22px;
    text-align: left;
  }

  /* ===== 外帶餐盒：左右堆疊（桌機已處理），手機字級 + 圓點直排 ===== */
  .fbp-takeaway {
    gap: 28px;
    max-width: 278px;
  }
  .fbp-tk-size__head,
  .fbp-tk-row__head {
    min-height: 0;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: var(--fw-semibold);
  }
  .fbp-tk-size__body {
    min-height: 0;
    padding: 16px;
  }
  .fbp-tk-list {
    gap: 16px;
  }
  .fbp-tkchip-row {
    font-size: 13px;
    min-width: 215px;
  }

  .fbp-tkchip-row__val {
    white-space: nowrap;
  }

  .fbp-tkchip {
    min-height: 0;
    min-width: 58px;
    padding: 3.7px 9.5px;
    font-size: 13px;
  }
  .fbp-tk-rows {
    gap: 20px;
  }
  .fbp-tk-row__body {
    padding: 16px;
    justify-content: center;
  }
  /* 手機外帶圓點清單改回直排（橫排空間不足） */
  .fbp-tk-row__body .fbp-bullets {
    flex-direction: column;
  }

  /* ===== 咖啡盒：分隔線水平、欄堆疊（桌機已處理），手機字級 ===== */

  .fbp-type--card > .container {
    max-width: 316px;
  }
  .fbp-coffee {
    gap: 28px;
    align-items: center;
  }

  .fbp-cf-col {
    align-items: stretch;
    min-width: 229px;
  }
  .fbp-cf-head {
    min-width: 162px;
    max-width: 162px;
    align-self: center;
    padding: 6px 20px;
    font-size: 13px;
    font-weight: var(--fw-semibold);
  }
  .fbp-cf-list {
    font-size: 13px;
    line-height: 22px;
  }
  .fbp-cf-list li {
    line-height: 22px;
  }

  .fbp-type--card .section-actions {
  }

  /* ===== 酒盒：4 欄 → 1 欄，手機字級 ===== */
  .fbp-wine {
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 237px;
    margin-inline: auto;
  }
  .fbp-wcol__head {
    min-width: 152px;
    min-height: 54px;
    padding: 8px 24px;
    font-size: 13px;
    font-weight: var(--fw-semibold);
    margin-bottom: -24px;
  }
  .fbp-wcol__card {
    min-height: 0;
    padding: 52px 13px 30px;
    gap: 12px;
  }
  .fbp-wchip-row {
    font-size: 13px;
    width: auto;
  }
  .fbp-wchip {
    min-height: 0;
    padding: 3.6px 13px;
    font-size: 13px;
    flex: none;
  }
  /* 第1欄「常見酒盒尺寸」：內容置中（單瓶/雙瓶/禮盒組） */
  .fbp-wine .fbp-wcol:nth-child(1) .fbp-wcol__card {
    align-items: center;
  }
  .fbp-wine .fbp-wcol:nth-child(1) .fbp-wchip-row {
    justify-content: center;
  }
  /* 第2欄「紙盒材質」：內容靠左；chip 固定寬 120px（灰紙板/瓦楞紙） */
  .fbp-wine .fbp-wcol:nth-child(2) .fbp-wcol__card {
    align-items: flex-start;
  }
  .fbp-wine .fbp-wcol:nth-child(2) .fbp-wchip {
    flex: 0 0 120px;
    width: 120px;
    min-width: 0;
    max-width: none;
  }
  .fbp-wcol__note {
    font-size: 13px;
    line-height: 22px;
  }

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