/* ============================================================================
 * common/footer.css — 跨主題共用底部 Footer + 浮動按鈕
 * ============================================================================
 *
 * 用途：
 *   提供 6 個前台主題共用的 footer 區塊樣式（含舊版 .footer / .footer-area
 *   與新版 .footer-default-* 樣式）、社群連結、付款資訊、版權與浮動 Line/FB/Phone
 *   按鈕（function-btns-block）。本檔同時包含 .footer-area 內對 .theme-bg /
 *   .black-bg 的 footer 背景反白覆寫（深底白字）。
 *
 * 內容索引：
 *   1. .footer-area 反白覆寫        在深色背景的 footer 內 p / h4 / 連結 / 社群 icon 強制白字
 *   2. .footer-top-inner / .footer-title / .footer-info        Footer 頂部容器與標題
 *   3. .footer-about / .footer-logo                            關於我們 + logo 區
 *   4. .footer-default-* 系列                                  新版 footer：header / row / col /
 *                                                              logo-stack / map / block / list /
 *                                                              icon / social-list / line-qr / line-tip 等
 *   5. .footer-brief / .footer-social                          簡介 + 社群圖示連結
 *   6. .footer-social-link.footer-social-icon* 系列            社群按鈕的雙圖（一般 / hover）
 *   7. .footer-title / .footer-menu / .footer-message          舊版 footer 標題、選單、聯絡表單
 *   8. .footer-payment / .footer-social-2                      付款方式 + 第 2 套社群連結
 *   9. .footer / .footerLogo                                   新版 footer 主體容器
 *  10. .footerInfoBox / .footerInfo                            聯絡資訊區塊
 *  11. .footerLink                                             footer 連結樣式
 *  12. .footer .footerSocial .socialItem*                      社群區塊（含雙圖切換）
 *  13. .copyRight / .copyRight .elementorBox                   版權聲明
 *  14. .function-btns-block / .function-btns-area              浮動按鈕容器（右下角 Line/FB/Phone）
 *  15. .function-btns-block .btn-Line / .btn-Fb / .btn-Phone / .btn-Expand
 *                                                              個別按鈕樣式（含 hover、QR 展開、active 動畫）
 *
 * 使用頁面：前台所有頁面（透過 web.layouts.app + sites/default/footer.blade.php 載入）
 * 相依 vendor：無
 *
 * 載入順序（最先到最後，後者覆寫前者）：
 *   widgets.css -> default.css（舊單檔，凍結中）-> common/base.css ->
 *   common/header.css -> common/sidebar.css -> themes/default/base.css ->
 *   themes/default/header.css -> themes/default/sidebar.css ->
 *   common/footer.css（本檔）-> themes/default/footer.css ->
 *   其他 common/themes 檔 -> custom.css
 *
 * 抽取來源：public/web/css/default.css 四個區段：
 *   - line 1765~1791：.footer-area .theme-bg / .black-bg 反白覆寫
 *   - line 4394~4889：主 footer 區塊（.footer-top-inner、.footer-default-*、.footer-social、.footer-menu、.footer-payment、.footer-social-2 等）
 *   - line 6492~6755：新版 footer .footerBg / .footer / .footerInfo / .footerSocial / .copyRight
 *   - line 7112~7376：浮動按鈕 .function-btns-block / .btn-Line / .btn-Fb / .btn-Phone / .btn-Expand / .function-btns-area
 *
 * 詳細規格：openspec/specs/web-theme-css/spec.md（Requirement R.FUNC.1 / R.FUNC.8）
 * 變更記錄：openspec/changes/issue518-web-theme-css-modularization/（task 5.4）
 * ============================================================================
 */


/* ============================================================================
 * 區段 1：.footer-area 深底反白覆寫（task 5.1 base 抽取時刻意保留給 footer）
 *   抽取自 default.css line 1765~1791
 * ============================================================================
 */

.footer-area .theme-bg p,
.footer-area .black-bg p,
.footer-area .theme-bg h4,
.footer-area .black-bg h4,
.footer-area .theme-bg .footer-social li a,
.footer-area .black-bg .footer-social li a {
  color: #fff;
}

.footer-area .theme-bg .footer-social li a,
.footer-area .black-bg .footer-social li a {
  border: 1px solid #fff;
}


/* ============================================================================
 * 區段 2：主 footer 區塊（含 .footer-default-* 新版樣式）
 *   抽取自 default.css line 4394~4889
 *   對應 blade：resources/views/sites/default/footer.blade.php
 *   註：原檔 line 4891 有一個遺漏的 @import 已被 CSS spec 忽略（必須在所有 rule 之前），
 *        不抽取至本檔，留在 default.css 不動。
 * ============================================================================
 */

.footer-top-inner {
  padding: 30px 50px;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .footer-top-inner {
    padding: 30px 15px;
  }
}

@media screen and (max-width: 767.98px) {
  .footer-top-inner {
    padding: 30px 15px;
  }

}

.hbnBox {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-default-inner {
  padding: 32px 0 40px;
}

.footer-default-header {
  display: grid;
  grid-template-columns: 1.5fr 10.5fr;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #1a1a1a;
}

.footer-default-header-title {
  min-width: 0;
}

.footer-default-row {
  display: grid;
  grid-template-columns: 1.5fr 3.5fr 2.5fr 2fr 2.5fr;
  gap: 24px;
}

.footer-default-col {
  min-width: 0;
}

.footer-default-col--logo {
  display: flex;
  align-items: flex-start;
}

.footer-default-logo--stack {
  display: flex;
  align-items: flex-start;
}

.footer-default-logo {
  width: 175px;
  height: 210px;
  max-width: 100%;
  flex: 0 0 auto;
}

.footer-default-logo img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  display: block;
  object-fit: contain;
}

.footer-default-title {
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}

.footer-default-map iframe {
  width: 100%;
  height: 200px;
  border: 0;
  border-radius: 10px;
}

.footer-default-block {
  height: 100%;
}

.footer-default-block-title {
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 12px;
  padding-left: 14px;
  position: relative;
}

.footer-default-block-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 14px;
  background: #1a1a1a;
}

.footer-default-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-default-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #666666;
  margin-bottom: 10px;
}

.footer-default-item p {
  line-height: 1.5;
}

.footer-default-icon {
  font-size: 20px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  margin-top: 2px;
  color: #1a1a1a;
}

.footer-default-social-list {
  margin: 0 0 16px;
  padding: 0;
}

.footer-default-line {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-default-line-info {
  min-width: 0;
}

.footer-default-line-label {
  color: #8a8a8a;
}

.footer-default-line-id {
  font-weight: 600;
  color: #00b900;
  word-break: break-all;
}

.footer-default-line-qr img {
  width: 92px;
  height: 92px;
  display: block;
  margin: 0 auto;
}

.footer-default-line-qr {
  padding: 8px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background: #f7f7f7;
  text-align: center;
}

/* LINE ID／QR 連結：維持原文字與 QR 外觀，僅加上滑鼠指標與 hover 微互動 */
.footer-default-line-link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.footer-default-line-link:hover,
.footer-default-line-link:focus-visible {
  opacity: 0.85;
  outline: none;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  /* 平板（992-1199px）footer 收斂：自 common/pages/shoppingCart.css 歸位（footer 為全站共用層，主題以 themes/xxx/footer.css 覆蓋）。 */
  .footer-default-header {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-bottom: 28px;
  }

  .footer-default-row {
    gap: 20px 24px;
  }
}

@media (max-width: 991.98px) {
  .footer-default-inner {
    padding: 24px 20px 32px;
  }

  .footer-default-header {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-default-map iframe {
    height: 180px;
  }

  .footer-default-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 手機／平板：logo 框改為貼合圖片，取消桌機固定 210px 高，矮 logo 不再留下大片空白 */
  .footer-default-logo {
    width: auto;
    height: auto;
  }

  .footer-default-logo img {
    width: auto;
    height: auto;
    max-width: 175px;
    max-height: 100px;
    object-fit: contain;
  }
}

@media (max-width: 575.98px) {
  .footer-default-row {
    grid-template-columns: 1fr;
  }

  /* 手機 LINE 區：LINE ID 靠左對齊，QR 於其右側（以間距控制位置、不貼右邊緣） */
  .footer-default-line {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 32px;
  }
}

@media (max-width: 479.98px) {
  /* 手機（≤480px）footer 標題字級：自 common/pages/shoppingCart.css 歸位。 */
  .footer-default-title,
  .footer-default-block-title {
    font-size: 16px;
    line-height: 1.4;
  }
}

/* ============================================================================
 * issue #695 扁平化修復：社群圖示尺寸基底
 *   舊選擇器 .footer-social li a.footer-social-link 需要 <ul>/<li> 祖先；
 *   共用 footer HTML 扁平化後（resources/views/sites/default/footer.blade.php）
 *   DOM 已無 <li>，規則全數失配 → 圖示退回瀏覽器原生大小（爆版）。
 *   改用扁平選擇器，且僅保留「尺寸/結構」為跨主題共用基底——顏色/外框/背景
 *   等外觀差異改由各主題決定（default 見下方 body[data-theme="default"] 區塊；
 *   kgtwbeef 已在 themes/kgtwbeef/footer.css 完整覆寫這些屬性，不受影響）。
 * ============================================================================ */

.footer-social-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
}

.footer-social-icon {
  display: block;
  position: relative;
  width: 24px;
  height: 24px;
}

.footer-social-icon-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.footer-social-icon-img--mono {
  opacity: 0;
}

.footer-social-link:hover .footer-social-icon-img--mono {
  opacity: 1;
}

.footer-social-link:hover .footer-social-icon-img--color {
  opacity: 0;
}

.facebook:hover {
  background: #3B5998;
}

.google-plus:hover {
  background: #DD493D;
}

.twitter:hover {
  background: #1DA1F2;
}

.rss:hover {
  background: #F36F24;
}

.pinterest:hover {
  background: #cb2027 none repeat scroll 0 0;
}

.line {
  background: #00C300;
  color: #ffffff;
}

.line:hover {
  background: #02a802ff;
}

.message {
  background: #416bc6;
  color: #ffffff;
}

.message:hover {
  background: #3B5998;
}

.copyright {
  padding: 0 100px;
}

.copyright-text {
  padding: 14px 0;
}

.copyright-text p {
  line-height: 1.8;
  margin: 0;
}

@media screen and (max-width: 767.98px) {
  .copyright {
    padding: 0 50px;
  }

  .copyright-text p {
    text-align: center;
    line-height: 2.1;
  }

  .map>iframe {
    width: 100%;
  }

}


.copyright-text p a {
  color: #999999;
  margin: 0 5px;
}

.copyright-text p a:hover {
  color: #ffffff;
}


/* ============================================================================
 * 區段 3：新版 footer 背景與版權區
 *   抽取自 default.css line 6492~6755
 *   （.footerBg / ::after / .row 三條規則已於 2026-07-22 移除：引用的
 *     ../img/bg/bgFooter.png 不存在，且 footerBg class 僅剩 docs/oldData 舊
 *     kgtwbeef footer 使用、現行 Blade 無使用）
 * ============================================================================
 */

.contactBox {
  background: rgba(255, 255, 255, 0.3725490196);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid #2c2c2c;
  padding: 15px 20px;
  border-radius: 20px;
  height: 100%;
}

.mapBox {
  display: flex;
  justify-content: center;
  align-items: center;
}

.mapBox .map {
  margin-right: 20px;
}


@media screen and (max-width: 767.98px) {
  .mapBox .map {
    margin-right: 0px;
  }
}

.mapBox .mapText {
  margin-top: 20px;
  color: #2c2c2c;
}

.mapBox .mapText h1 {
  color: #2c2c2c;
  margin: 0 0 20px;
  /* font-size: 25px;
  line-height: 45px; */
  font-weight: bold;
}

@media screen and (max-width: 767.98px) {
  .mapBox .mapText h1 {
    /* font-size: 18px; */
    line-height: 32px;
    margin: 0 0 12px;
  }
}

.mapBox .mapText p {
  color: #2c2c2c;
  /* font-size: 16px; */
}

.addfriendBox {
  display: flex;
  justify-content: flex-start;
  align-items: start;
}

.addfriendBox .addfriend {
  margin-right: 40px;
}

@media screen and (max-width: 767.98px) {
  .addfriendBox .addfriend {
    margin-right: 10px;
    width: 40%;
  }
}

.addfriendBox .addfriend .addfriendImg {
  width: 100%;
  height: 100%;
  max-height: 200px;
  -o-object-fit: contain;
  object-fit: contain;
}

.addfriendBox .addfriendText {
  margin-top: 20px;
}

.addfriendBox .addfriendText h1 {
  margin: 0 0 20px;
  font-size: 25px;
  font-weight: bold;
  color: #333333;
  line-height: 1.5;
}

@media screen and (max-width: 767.98px) {
  .addfriendBox .addfriendText h1 {
    font-size: 18px;
    line-height: 32px;
    margin: 0 0 12px;
  }
}

.addfriendBox .addfriendText p {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 16px;
  color: #333333;
}

.footer {
  padding: 20px 0;
}

.footer .footerLogo {
  margin-bottom: 30px;
}

.footer .footerLogo .footerLogoImg {
  max-width: 120px;
  display: block;
}

.footerInfoBox {
  margin: 20px auto;
  flex-direction: row;
}

@media screen and (max-width: 767.98px) {
  .footerInfoBox {
    flex-direction: column;
    align-items: center;
  }
}

.footerInfo p {
  color: #313131;
  font-size: 16px;
  margin-right: 12px;
}

.footerInfo p:last-child {
  margin-right: 0;
}

.footerInfo {
  margin-right: 20px;
  position: relative;
}

.footerInfo::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  width: 1px;
  height: 20px;
  background: #313131;
}

@media screen and (max-width: 767.98px) {
  .footerInfo {
    margin-right: 0;
    margin-bottom: 12px;
  }

  .footerInfo::after {
    display: none;
  }
}

.footerLink a {
  color: #313131;
  font-size: 16px;
  margin-right: 10px;
}

.footer .footerSocial .socialItem {
  width: 50px;
  height: 50px;
  margin-right: 15px;
}

.footer .footerSocial .socialItem .socialItemImgBox {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}

.footer .footerSocial .socialItem .socialItemImgBox:hover .socialItemImgH {
  opacity: 1;
  transition: 0.5s;
}

.footer .footerSocial .socialItem .socialItemImgBox .socialItemImg {
  display: block;
}

.footer .footerSocial .socialItem:last-child {
  margin-right: 0;
}

.footer .footerSocial .socialItem .socialItemImgBox .socialItemImgH {
  opacity: 0;
  transition: 0.5s;
}

.footer .footerSocial .socialItem .socialItemImgBox .socialItemImg,
.footer .footerSocial .socialItem .socialItemImgBox .socialItemImgH {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.copyRight {
  padding: 8px 0 20px;
}

.copyRight .elementorBox {
  display: block;
  text-decoration: none;
}

.copyRight .elementorBox .elementorText {
  font-size: 15px;
  color: #717171;
}


/* ============================================================================
 * 區段 4：浮動按鈕（右下角 Line / FB / Phone / Expand）
 *   抽取自 default.css line 7112~7376
 *   對應 blade：sites/default/footer.blade.php 的 .function-btns-area 容器
 * ============================================================================
 */

.function-btns-block {
  width: fit-content;
  margin: 0 auto;
  display: none;
  position: fixed;
  bottom: 80px;
  right: 10px;
  z-index: 10;
  transition: all 0.3s ease 0s;
}


.function-btns-block .btn-Fb {
  width: 60px;
  height: 60px;
  margin: 0 auto 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #0084ff;
  z-index: 10;
  border-radius: 99rem;
  transition: all 0.3s ease 0s;
}

.function-btns-block .btn-Fb:hover {
  background: #0070d9;
}

.function-btns-block .btn-Fb img {
  width: 28px;
  height: 28px;
  aspect-ratio: 1/1;

}

@media screen and (max-width: 767.98px) {
  .function-btns-block .btn-Fb {
    width: 48px;
    height: 48px;
  }

  .function-btns-block .btn-Fb img {
    width: 22px;
    height: 22px;
    aspect-ratio: 1/1;
  }
}


.function-btns-block .btn-Line {
  width: 60px;
  height: 60px;
  margin: 0 auto 10px;
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #4cc764;
  border-radius: 99rem;
  z-index: 10;
  transition: all 0.3s ease 0s;
  cursor: pointer;
}

.function-btns-block .btn-Line:hover {
  background: #42b659;
}

.function-btns-block .btn-Line .Qrcode {
  width: 160px;
  height: auto;
  position: absolute;
  top: 0;
  left: -180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #e4e4e4;
  padding: 10px;
  border-radius: 10px;
  z-index: 10;
  transition: all 0.3s ease 0s;
  opacity: 0;
}

.function-btns-block .btn-Line .Qrcode.active {
  opacity: 1;
}

.function-btns-block .btn-Line .Qrcode img {
  width: 100%;
  height: auto;
  aspect-ratio: 154/197;
}

.function-btns-block .btn-Line img {
  width: 30px;
  height: 30px;
  aspect-ratio: 1/1;

}

@media screen and (max-width: 767.98px) {
  .function-btns-block .btn-Line {
    width: 48px;
    height: 48px;
  }

  .function-btns-block .btn-Line img {
    width: 22px;
    height: 22px;
    aspect-ratio: 1/1;
  }
}

.function-btns-block .btn-Phone {
  width: 60px;
  height: 60px;
  margin: 0 auto 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: red;
  border-radius: 99rem;
  z-index: 10;
  transition: all 0.3s ease 0s;
}

.function-btns-block .btn-Phone:hover {
  background: #ce0000;
}


.function-btns-block .btn-Phone img {
  width: 28px;
  height: 28px;
  aspect-ratio: 1/1;
}

.function-btns-block .btn-Expand {
  width: 60px;
  height: 60px;
  margin: 0 auto 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgb(68, 68, 68);
  color: #ffffff;
  border-radius: 99rem;
  z-index: 10;
  transition: all 0.3s ease 0s;
}

.function-btns-block .btn-Expand:hover {
  background: #282828;
}

/* 購物車懸浮鈕（客服鈕下方）：base 黑白灰色系，與客服鈕同色；各主題可於 themes/<theme>/footer.css 覆寫品牌色 */
.function-btns-block .btn-Cart {
  width: 60px;
  height: 60px;
  margin: 0 auto 10px;
  display: flex;
  position: relative; /* btn-Cart-badge 絕對定位基準 */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgb(68, 68, 68);
  color: #ffffff;
  border: none;
  border-radius: 99rem;
  z-index: 10;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease 0s;
}

.function-btns-block .btn-Cart:hover {
  background: #282828;
}

.function-btns-block .btn-Cart i {
  font-size: 24px;
}

/* 數字 badge：右上角深底白字＋白色外圈，品項數為 0 時 Blade 加 d-none 隱藏 */
.function-btns-block .btn-Cart-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  position: absolute;
  top: -2px;
  right: -2px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #222222;
  color: #ffffff;
  font-size: 12px;
  line-height: 1;
  border-radius: 99rem;
  box-shadow: 0 0 0 2px #ffffff;
}

@media screen and (max-width: 767.98px) {
  .function-btns-block .btn-Phone {
    width: 48px;
    height: 48px;
  }

  .function-btns-block .btn-Phone img {
    width: 22px;
    height: 22px;
    aspect-ratio: 1/1;
  }

  .function-btns-block .btn-Expand {
    width: 48px;
    height: 48px;
  }

  .function-btns-block .btn-Expand img {
    width: 22px;
    height: 22px;
    aspect-ratio: 1/1;
  }

  .function-btns-block .btn-Cart {
    width: 48px;
    height: 48px;
  }

  .function-btns-block .btn-Cart i {
    font-size: 20px;
  }
}

#scrollUp {
  width: 60px;
  height: 60px;
  border-radius: 99rem;
  margin-bottom: 10px;
  opacity: 0;
  transition: all 0.3s ease;
}

#scrollUp:hover {
  background: #555555;
}

#scrollUp.active {
  opacity: 1;
}

#scrollUp i {
  width: 60px;
  line-height: 60px;
}


@media screen and (max-width: 767.98px) {
  #scrollUp {
    width: 48px;
    height: 48px;
    border-radius: 99rem;
  }

  #scrollUp i {
    width: 48px;
    line-height: 48px;
  }
}

.function-btns-area {
  opacity: 1;
  transition: all 0.3s ease;
}

.function-btns-area.active .function-btns-block {
  transform: translateY(-70px);
}

.function-btns-block {
  position: fixed;
  right: 20px;
  bottom: -50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 1000;
}



.function-btns-block a,
.function-btns-block button {
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-Line,
.btn-Fb,
.btn-Phone {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}

.function-btns-block.active .btn-Line,
.function-btns-block.active .btn-Fb,
.function-btns-block.active .btn-Phone {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* === Phase B Batch 2: @media (1170-1400) footer RWD（抽自 default.css 4032-4050）=== */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .plr-185 {
    padding: 0 30px;
  }

  .plr-200 {
    padding-left: 45px;
    padding-right: 45px;
  }

  .footer-top-inner {
    padding: 30px;
  }

  .copyright {
    padding: 0 60px;
  }
}


/* ============================================================================
 * 骨架語意化（issue #709）：footer blade 原 Bootstrap 佈局 utility 的等價規則。
 * ============================================================================ */

/* 原 container-fluid：寬度／置中。footer-top 的 padding 由 plr-185 承擔——本類不得
   宣告 padding（footer.css 晚於 base.css 載入，宣告會反壓 plr-185）；footer-bottom
   無 plr-185，以 --gutter 修飾類補回 container-fluid 的水平 padding */
.footer-shell {
  --bs-gutter-x: 1.5rem;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.footer-shell--gutter {
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
}

/* 原聯絡／營業時間清單 p 的 mb-0 */
.footer-default-item p {
  margin-bottom: 0;
}

/* 原 LINE ID 區兩行文字的 mb-0 */
.footer-default-line-label,
.footer-default-line-id {
  margin-bottom: 0;
}

/* 原 copyright 外框的 text-center */
.copyright-text {
  text-align: center;
}

/* 原「|」分隔的 d-md-inline d-none（<768 隱藏） */
.copy-sep {
  display: none;
}

@media (min-width: 768px) {
  .copy-sep {
    display: inline;
  }
}

/* 原換行 br 的 d-md-none d-block（<768 顯示）與 d-lg-none d-block（<992 顯示） */
.copy-break-md {
  display: block;
}

@media (min-width: 768px) {
  .copy-break-md {
    display: none;
  }
}

.copy-break-lg {
  display: block;
}

@media (min-width: 992px) {
  .copy-break-lg {
    display: none;
  }
}

/* 原 Powered by 連結的 text-white。MUST 完全鏡射 BS utility 的特異性輪廓
   （單類 (0,1,0)＋!important）：dgfactor 以更高特異性＋!important 蓋過（沿用）、
   3ffood 的非 !important hook 維持被壓制（該 hook 歷來未生效，SOP 坑 3 現況保留）；
   改用複合選擇器或拿掉 !important 都會翻轉主題間勝負 */
.copy-link--light {
  color: var(--cms-color-text-inverse) !important;
}


/* ============================================================================
 * issue #695 細粒度彈性 footer：加入好友 CTA 與卡片底框
 *   共用 footer HTML 常駐這兩類元素，但預設隱藏；只有需要的主題（如 kgtwbeef）
 *   於自己的 themes/<theme>/footer.css 以 display 顯示並定位。其他主題不渲染，
 *   對版面零影響（維持既有五欄 grid，卡片底框不佔 grid 軌道）。
 * ============================================================================ */
.footer-default-addfriend,
.footer-default-card,
.footer-default-brand,
.footer-copy-taxid {
  display: none;
}


/* ============================================================================
 * issue #695 最大彈性：版權區移入主容器 footer-default-inner（不再獨立黑底 footer-bottom）。
 *   default 佈局：全寬置中、深色文字、上緣分隔線，於淺色 footer 上可讀。
 *   （dgfactor / shopLinerp / 3ffood 原針對黑底的版權樣式失效，需各自 CSS 再調——依使用者
 *   「以最大彈性 HTML 為主、其他主題後續 CSS 調整」指示，屬後續工項。）
 * ============================================================================ */
.footer-default-copyright {
  padding: 20px 0 8px;
  margin-top: 12px;
  border-top: 1px solid #e5e5e5;
  text-align: center;
}

.footer-default-copyright .copy-text {
  color: #666666;
  line-height: 1.8;
}

.footer-default-copyright .copy-link--light,
.footer-default-copyright .copy-text a {
  color: #888888 !important;
}

.footer-default-copyright .copy-text a:hover {
  color: #1a1a1a !important;
}


/* ============================================================================
 * issue #695 default 主題 footer 版面（webCss=1）
 *   themes/default/footer.css 依設計故意留空殼（default = common 的
 *   baseline，見該檔說明），因此 default 專屬版面規則直接寫在本檔。
 *
 *   共用 footer HTML 已「真．最扁平」：每個內容片段是 .footer-default-inner
 *   的直接子元素，各帶 footer-piece--* 定位 hook。本區塊比照
 *   themes/kgtwbeef/footer.css 的技術（唯一另一個已改用扁平 HTML 的主題）：
 *   .footer-default-inner 設 60 欄細顆粒度 grid，每個片段用 grid-column /
 *   grid-row 直接指定落點；column-gap/row-gap 為 0，片段間距一律用
 *   padding/margin，避免 gap 疊加進 span 造成比例跑掉。
 *
 *   範圍限定：本區塊所有規則以 body[data-theme="default"] 前綴，因為
 *   .footer-default-inner／.footer-piece--* 等 class 是跨主題共用 hook，
 *   若不限定會直接改到 kgtwbeef 的版面（kgtwbeef 對同一批 class 有自己完整
 *   的 grid 版面定義，見 themes/kgtwbeef/footer.css）。唯一例外是上方已抽出
 *   的「社群圖示尺寸基底」——kgtwbeef 對該基底逐一完整覆寫，不受影響。
 * ============================================================================ */

/* 地圖：default 原本就是五欄版面（logo｜聯絡｜服務｜社群｜地圖），地圖是最右
   第五欄。注意 Google 地圖 iframe 在 headless 截圖不載入（一片空白），勿因截圖
   看不到就把它藏掉——以 DOM 位置確認落點即可，真實瀏覽器會正常顯示。
   限定 body[data-theme="default"]（kgtwbeef 有自己的地圖版面，不可波及） */
body[data-theme="default"] .footer-piece--map {
  /* #721：52/61（161px）→ 50/61（約 196px），貼齊扁平化前原版地圖寬（約 200px）；
     社群欄同步左移至 38 起（見下方），維持不重疊 */
  grid-column: 50 / 61;
  grid-row: 2 / 8;
  align-self: start;
}

body[data-theme="default"] .footer-default-inner {
  display: grid;
  grid-template-columns: repeat(60, minmax(0, 1fr));
  column-gap: 0;
  row-gap: 0;
  align-items: start;
  padding: 32px 0 0;
}

/* 店名標題（列 1，滿欄＋底線） */
body[data-theme="default"] .footer-default-title.footer-piece--name {
  grid-column: 1 / -1;
  grid-row: 1;
  /* devweb 基準:36px、文字縮排 12.5%(舊版 header 1.5fr/10.5fr 首欄留白),底線全寬 */
  padding-left: 12.5%;
  padding-bottom: 14px;
  margin-bottom: 17px;
  border-bottom: 1px solid #1a1a1a;
  font-size: 36px;
  line-height: 1;
}

/* logo（欄 1~9，列 2；固定小尺寸——若沿用共用基底 175x210 的高盒子，會把
   同列（title 列）拉得很高，改用較小尺寸貼齊參考圖比例 */
body[data-theme="default"] .footer-piece--logo {
  grid-column: 1 / 9;
  /* 跨列:logo 高度不參與標題列(r2)高度計算,直式 logo 不撐版 */
  grid-row: 2 / 8;
  align-self: start;
}

body[data-theme="default"] .footer-default-logo.footer-piece--logo {
  width: auto;
  height: auto;
}

/* 原圖等比縮,上限 175×175(2026/07/21 使用者指定);欄寬(1440 約 143px)不足 175
   時以欄寬為界,避免壓到聯絡欄——寬幕自然放大至 175 */
body[data-theme="default"] .footer-default-logo.footer-piece--logo img {
  width: auto;
  height: auto;
  max-width: min(175px, 100%);
  max-height: 175px;
  object-fit: contain;
}

/* 聯絡我們欄（欄 10~30） */
body[data-theme="default"] .footer-piece--contact-title { grid-column: 9 / 25; grid-row: 2; }
body[data-theme="default"] .footer-piece--tel,
body[data-theme="default"] .footer-piece--fax,
body[data-theme="default"] .footer-piece--address,
body[data-theme="default"] .footer-piece--email,
body[data-theme="default"] .footer-piece--tax {
  grid-column: 9 / 25;
}
body[data-theme="default"] .footer-piece--contact-pos-1 { grid-row: 3; }
body[data-theme="default"] .footer-piece--contact-pos-2 { grid-row: 4; }
body[data-theme="default"] .footer-piece--contact-pos-3 { grid-row: 5; }
body[data-theme="default"] .footer-piece--contact-pos-4 { grid-row: 6; }
body[data-theme="default"] .footer-piece--contact-pos-5 { grid-row: 7; }
body[data-theme="default"] .footer-piece--tax { margin-bottom: 24px; }

/* 服務時間欄（欄 27~36）：營業時間長句折兩行與扁平化前原版一致（原版欄寬約
   205px 同樣折行），#721 依「與原版一致」原則維持折行、把欄寬讓給社群欄與地圖 */
body[data-theme="default"] .footer-piece--service-title { grid-column: 26 / 39; grid-row: 2; }
/* 服務欄與聯絡欄解耦(devweb 為獨立欄不牽連):營業時間常折兩行,若佔單列會把
   共用列撐高、聯絡欄憑空多出間隙。改跨列 span(跨距內固有高總和>自身高,不觸發
   列高分配)+ 後續項 margin-top 錨定在前項正下方 */
body[data-theme="default"] .footer-piece--hours          { grid-column: 26 / 39; grid-row: 3 / 8; align-self: start; }
body[data-theme="default"] .footer-piece--break          { grid-column: 26 / 39; grid-row: 3 / 8; align-self: start; }
body[data-theme="default"] .footer-piece--closed         { grid-column: 26 / 39; grid-row: 3 / 8; align-self: start; }

/* 社群連結欄（欄 48~61）：4 顆圖示同列排一橫排（欄寬 13 欄，每顆 3 欄剛好放得下）。
   icons 刻意放在列 3（與 tel/hours 同列），LINE ID+QR 刻意放在列 7（與 tax 同列、
   contact 欄最後一列）：兩者都是「contact/service 欄該列本來就有內容」的列，避免
   圖示/QR（比單行文字高）與 fax/break 這類常無資料的欄位共用同一列——那樣空列
   仍會被圖示/QR 撐高，在 tel 與 address 之間、或 address 與 email 之間憑空多出
   一段留白（60 欄共用同一組列高是本技法的已知限制，見 kgtwbeef 對應說明）。 */
/* #721 修正三處：①每顆圖示 2 欄（約 36px）小於圖示本體 45px 造成相鄰重疊
   → 改 3 欄（約 53px）；②整塊左移至 38 起，讓地圖加寬到 50/61；③LINE ID+QR
   從列 7（與統編同列、被 QR 高度撐出大段留白）改跨列 span 緊接圖示下方，
   跨列把 QR 高度分散到多列、貼齊扁平化前原版位置 */
body[data-theme="default"] .footer-piece--social-title     { grid-column: 39 / 48; grid-row: 2; }
/* devweb 基準:社群欄寬約 162px,四顆 45px 圖示為 3+1 兩列 */
/* 社群欄固定節距錨定:全部片段跨列 3/8 靠頂、同一起始欄,margin-left/top
   疊出固定 px 位置(圖示 45px+13px 間隙=58px 節距,devweb 實測值)——
   間距與視窗寬度徹底脫鉤;窄幕(<1600)messenger 換第二列(devweb 同行為) */
body[data-theme="default"] .footer-piece--social-fb,
body[data-theme="default"] .footer-piece--social-ig,
body[data-theme="default"] .footer-piece--social-line,
body[data-theme="default"] .footer-piece--social-messenger,
body[data-theme="default"] .footer-piece--line-info,
body[data-theme="default"] .footer-piece--qr {
  grid-column: 39 / 61;
  grid-row: 3 / 8;
  align-self: start;
  justify-self: start;
}

body[data-theme="default"] .footer-piece--social-fb,
body[data-theme="default"] .footer-piece--social-ig,
body[data-theme="default"] .footer-piece--social-line,
body[data-theme="default"] .footer-piece--social-messenger {
  margin-top: 14px;
}

body[data-theme="default"] .footer-piece--social-pos-2 { transform: translateX(58px); }
body[data-theme="default"] .footer-piece--social-pos-3 { transform: translateX(116px); }
body[data-theme="default"] .footer-piece--social-pos-4 { transform: translateX(174px); }
body[data-theme="default"] .footer-piece--line-info {
  margin-top: 75px; /* 14+45+16 */
  transform: none;
}
/* 寬幕 QR 併於 LINE ID 右側(devweb 排法)，以 margin 參與排版，避免空欄位讓 QR 壓進版權列 */
body[data-theme="default"] .footer-piece--qr {
  margin-top: 75px;
  transform: none;
}

/* 有 LINE ID 文字時,QR 落在其下(label 15 + id 27 + 間 10 ≈ 66) */
body[data-theme="default"] .footer-piece--line-info ~ .footer-piece--qr {
  margin-left: 116px;
  margin-top: 75px;
  transform: none;
}

@media (min-width: 992px) and (max-width: 1599.98px) {
  /* 窄幕:messenger 換第二列(58px 下移),LINE 區順移 */
  body[data-theme="default"] .footer-piece--social-pos-4 {
    transform: translateY(58px); /* 換第二列:45+13 */
  }

  body[data-theme="default"] .footer-piece--line-info { grid-row: 6; transform: none; margin-top: 16px; }
  body[data-theme="default"] .footer-piece--qr        { grid-row: 7; transform: none; margin-top: 10px; }

  body[data-theme="default"] .footer-piece--line-info ~ .footer-piece--qr {
    grid-row: 7;
    transform: none;
  }
}

/* 跨列 span 區域內貼齊頂部，避免在 span 區內垂直置中產生不均等留白 */
body[data-theme="default"] .footer-piece--social-fb,
body[data-theme="default"] .footer-piece--social-ig,
body[data-theme="default"] .footer-piece--social-line,
body[data-theme="default"] .footer-piece--social-messenger,
body[data-theme="default"] .footer-piece--line-info,
body[data-theme="default"] .footer-piece--qr {
  align-self: start;
  justify-self: start;
}

/* 欄內垂直間距:項目間隙統一由 .footer-default-item 的 margin-bottom:10 承擔
   (聯絡欄節距 = 服務欄錨定節距 = 27+10 = 37px;2026/07/21 使用者指定統一)。
   原 margin-top:8 已移除——它讓聯絡欄比服務欄多 8px、也把「標題→第一項」
   撐到 20px(devweb 為 12px = 標題 margin-bottom) */

/* 服務欄固定節距錨定(devweb 內容驅動間距,與視窗寬度脫鉤):
   全部跨列 3/8 靠頂,margin-top 疊出 37px 節距(單行項 27+10);
   1200-1599 內容較窄、營業時間折兩行時由下方 media 帶加高;
   break 存在與否用兄弟選擇器條件化,無資料不留洞 */
body[data-theme="default"] .footer-piece--break {
  transform: translateY(37px);
}

body[data-theme="default"] .footer-piece--closed {
  transform: translateY(37px);
}

body[data-theme="default"] .footer-piece--break ~ .footer-piece--closed {
  transform: translateY(74px);
}

@media (min-width: 992px) and (max-width: 1599.98px) {
  /* 此帶服務欄約 214~272px,營業時間折兩行(h54):後續項下移一行 */
  body[data-theme="default"] .footer-piece--break {
    transform: translateY(64px); /* 54+10 */
  }

  body[data-theme="default"] .footer-piece--closed {
    transform: translateY(64px);
  }

  body[data-theme="default"] .footer-piece--break ~ .footer-piece--closed {
    transform: translateY(101px);
  }
}

/* icons margin-top 已併入上方社群欄固定節距錨定區(#721 devweb 對齊) */



/* line-info/qr margin-top 已併入社群欄固定節距錨定區 */

/* 社群圖示 default 配色（白底灰框、hover 淺灰；尺寸/結構已在上方共用基底定義） */
body[data-theme="default"] .footer-social-link {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  color: inherit;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

body[data-theme="default"] .footer-social-link:hover {
  background: #f5f5f5;
  border-color: #d6d6d6;
}

/* devweb 基準:LINE ID 18px(label 同步放大) */
body[data-theme="default"] .footer-default-line-id {
  font-size: 18px;
}

body[data-theme="default"] .footer-default-line-label {
  font-size: 15px;
}

/* --- 版權列（列 8）：深色滿版橫條 ---
   .footer-default-inner::before 產生跨滿欄的背景層：grid 容器的 ::before 會
   成為第一個 grid item，正常疊放順序下天生排在「真實子元素」之後才畫（越晚
   出現在文件順序中的同層級 in-flow 內容蓋在越上面），因此文字自然蓋在背景
   之上，不需要 z-index/isolation 這類額外機制。
   width:100vw + margin-left:calc(50% - 50vw) 是全站慣用的滿版破版手法：本
   片段作為 grid-column:1/-1 的 grid item，其 containing block 寬度＝
   .footer-default-inner 的內容寬度（由 .footer-shell.plr-185 兩側等寬留白
   置中），故此手法在此可正確破出到視窗邊緣。
   勿改用 box-shadow 100vmax + clip-path：該手法在 Chromium 有「grid item
   兄弟文字消失」的已知 bug（上一輪修改已實測踩雷，記錄於此避免重蹈覆轍）。 */
body[data-theme="default"] .footer-default-inner::before {
  content: "";
  grid-column: 1 / -1;
  grid-row: 8;
  align-self: stretch;
  background: #222222;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* 上面那條滿版背景 MUST 由 #footer 收邊（issue #1014）
 *
 * 100vw **含垂直捲軸寬度**，版面寬度（clientWidth）不含，兩者差值就是捲軸寬（實測 15px）。
 * 因此這條背景帶實際會左右各突出 7.5px。橫向捲動本身已由 base.css 的 html overflow-x:clip
 * 擋掉、畫面上看不出來，但**文件的 scrollWidth 仍被撐大**，全頁截圖與部分手機瀏覽器會在右側
 * 露出一條空白帶（#1014 實測：485px 視窗下 scrollWidth 493）。
 *
 * 此處在 footer 收邊而非改寫上面那條規則：#footer 是 body 的區塊層級子元素，寬度恆等於版面
 * 寬度，突出的部分本來就在視窗外、裁掉後視覺完全相同；改用 100% 則拿不到滿版（containing
 * block 是扣掉 shell 與 inner 兩層 padding 後的內容寬），改用絕對定位又會破壞該片段「身為
 * grid item 才能自動跟著版權列高度伸縮、且天生疊在文字下方」的設計（見上方註解）。
 * 只收 x 軸：overflow-y 維持 visible，不影響任何垂直方向的溢出內容。
 */
body[data-theme="default"] #footer {
  overflow-x: clip;
}

/* devweb 基準:版權整串同一行、18px/1.8、固定間距(與視窗寬度脫鉤)。
   置中錨=col 34:版權句+Powered 右對齊於錨左側(公司名變長向左生長),
   五連結自錨右側以固定 margin-left 鏈式排開(連結文案為固定語系字串) */
body[data-theme="default"] .footer-piece--copyright,
body[data-theme="default"] .footer-piece--powered,
body[data-theme="default"] .footer-piece--link-privacy,
body[data-theme="default"] .footer-piece--link-terms,
body[data-theme="default"] .footer-piece--link-shipping,
body[data-theme="default"] .footer-piece--link-payreturn,
body[data-theme="default"] .footer-piece--link-member {
  grid-row: 8;
  align-self: center;
  padding: 20px 0;
  font-size: 18px;
  line-height: 1.8;
  white-space: nowrap;
}

/* #721：版權列由「左右分散」改「置中群組」，貼齊扁平化前原版（整串置中一行）；
   相鄰欄 + justify-self 逼近置中，60 欄顆粒度下間距非像素精確（同 kgtwbeef 註記） */
body[data-theme="default"] .footer-piece--copyright {
  grid-column: 1 / 27;
  justify-self: end;
  color: #ffffff;
}

body[data-theme="default"] .footer-piece--copyright::after {
  content: "｜";
  margin: 0 10px 0 8px;
  color: #999999;
}

body[data-theme="default"] .footer-piece--powered          { grid-column: 27 / 61; justify-self: start; }
/* 五連結:同錨同列,固定 margin-left 鏈式排開(Powered 176 + 間 24 起算,步距=字寬+24) */
body[data-theme="default"] .footer-piece--link-privacy,
body[data-theme="default"] .footer-piece--link-terms,
body[data-theme="default"] .footer-piece--link-shipping,
body[data-theme="default"] .footer-piece--link-payreturn,
body[data-theme="default"] .footer-piece--link-member {
  grid-column: 27 / 61;
  justify-self: start;
}
body[data-theme="default"] .footer-piece--copy-link-pos-1 { margin-left: 200px; }
body[data-theme="default"] .footer-piece--copy-link-pos-2 { margin-left: 296px; }
body[data-theme="default"] .footer-piece--copy-link-pos-3 { margin-left: 392px; }
body[data-theme="default"] .footer-piece--copy-link-pos-4 { margin-left: 488px; }
body[data-theme="default"] .footer-piece--copy-link-pos-5 { margin-left: 602px; }

body[data-theme="default"] .footer-piece--link-payreturn.footer-piece--copy-link-pos-1 + .footer-piece--link-member.footer-piece--copy-link-pos-2 { margin-left: 314px; }
body[data-theme="default"] .footer-piece--link-payreturn.footer-piece--copy-link-pos-2 + .footer-piece--link-member.footer-piece--copy-link-pos-3 { margin-left: 410px; }
body[data-theme="default"] .footer-piece--link-payreturn.footer-piece--copy-link-pos-3 + .footer-piece--link-member.footer-piece--copy-link-pos-4 { margin-left: 506px; }

body[data-theme="default"] .footer-piece--powered,
body[data-theme="default"] .footer-piece--link-privacy,
body[data-theme="default"] .footer-piece--link-terms,
body[data-theme="default"] .footer-piece--link-shipping,
body[data-theme="default"] .footer-piece--link-payreturn,
body[data-theme="default"] .footer-piece--link-member {
  /* devweb 基準:連結與本文同為純白 */
  color: #ffffff !important;
}

body[data-theme="default"] .footer-piece--powered:hover,
body[data-theme="default"] .footer-piece--link-privacy:hover,
body[data-theme="default"] .footer-piece--link-terms:hover,
body[data-theme="default"] .footer-piece--link-shipping:hover,
body[data-theme="default"] .footer-piece--link-payreturn:hover,
body[data-theme="default"] .footer-piece--link-member:hover {
  color: #cccccc !important;
}


/* ============================================================================
 * issue #695 default 主題 footer RWD：斷點統一 480/576/768/992/1200/1400
 *   ≤991.98px：四欄收成單欄堆疊；社群圖示維持一列（#1027 起整體改靠左對齊，
 *   圖示依實際輸出的第幾顆自左緣往右排開，不再是固定四欄置中）
 *   992~1399.98px：.plr-185 於此區間降為 30px（見 base.css），內容欄若仍撐到
 *   grid 最右欄，QR 會貼近右側 function-btns-block（客服／購物車浮動鈕，
 *   right:20px）造成重疊，補 padding-right 讓出安全距離
 * ============================================================================ */

@media (min-width: 992px) and (max-width: 1399.98px) {
  body[data-theme="default"] .footer-default-inner {
    padding-right: 130px;
  }

  /* 內容寬縮小後 LINE ID 欄不足容納單行 ID（word-break:break-all 會拆字換行），
     改 LINE ID 滿社群欄寬、QR 移至其下方（#721） */
  /* line-info/qr 沿用基準(r6/r7 直落),不需覆寫 */

  /* 欄寬因右側保留空間而變窄，版權列改用較窄字級與較短欄寬，避免版權句／
     Powered by 擠在一起、連結被壓到換行 */
  body[data-theme="default"] .footer-piece--copyright,
  body[data-theme="default"] .footer-piece--powered,
  body[data-theme="default"] .footer-piece--link-privacy,
  body[data-theme="default"] .footer-piece--link-terms,
  body[data-theme="default"] .footer-piece--link-shipping,
  body[data-theme="default"] .footer-piece--link-payreturn,
  body[data-theme="default"] .footer-piece--link-member {
    font-size: 15px;
  }

  /* 15px 字級下鏈式 margin 重算(Powered~147+20;連結步距=60+20;payreturn 75) */
  body[data-theme="default"] .footer-piece--copy-link-pos-1 { margin-left: 167px; }
  body[data-theme="default"] .footer-piece--copy-link-pos-2 { margin-left: 247px; }
  body[data-theme="default"] .footer-piece--copy-link-pos-3 { margin-left: 327px; }
  body[data-theme="default"] .footer-piece--copy-link-pos-4 { margin-left: 407px; }
  body[data-theme="default"] .footer-piece--copy-link-pos-5 { margin-left: 502px; }

  body[data-theme="default"] .footer-piece--link-payreturn.footer-piece--copy-link-pos-1 + .footer-piece--link-member.footer-piece--copy-link-pos-2 { margin-left: 262px; }
  body[data-theme="default"] .footer-piece--link-payreturn.footer-piece--copy-link-pos-2 + .footer-piece--link-member.footer-piece--copy-link-pos-3 { margin-left: 342px; }
  body[data-theme="default"] .footer-piece--link-payreturn.footer-piece--copy-link-pos-3 + .footer-piece--link-member.footer-piece--copy-link-pos-4 { margin-left: 422px; }
}

@media (max-width: 991.98px) {
  /* #1027：手機版 footer 由置中改為靠左（使用者指定）。文字對齊在容器層一次切換，
     各片段的 justify-self 與社群圖示的水平位移另見下方。 */
  body[data-theme="default"] .footer-default-inner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    text-align: left;
    padding: 24px 20px 0;
  }

  body[data-theme="default"] .footer-piece--name,
  body[data-theme="default"] .footer-piece--logo,
  body[data-theme="default"] .footer-piece--contact-title,
  body[data-theme="default"] .footer-piece--tel,
  body[data-theme="default"] .footer-piece--fax,
  body[data-theme="default"] .footer-piece--address,
  body[data-theme="default"] .footer-piece--email,
  body[data-theme="default"] .footer-piece--tax,
  body[data-theme="default"] .footer-piece--service-title,
  body[data-theme="default"] .footer-piece--hours,
  body[data-theme="default"] .footer-piece--break,
  body[data-theme="default"] .footer-piece--closed,
  body[data-theme="default"] .footer-piece--social-title,
  body[data-theme="default"] .footer-piece--line-info,
  body[data-theme="default"] .footer-piece--qr,
  body[data-theme="default"] .footer-piece--map,
  body[data-theme="default"] .footer-piece--copyright,
  body[data-theme="default"] .footer-piece--powered,
  body[data-theme="default"] .footer-piece--link-privacy,
  body[data-theme="default"] .footer-piece--link-terms,
  body[data-theme="default"] .footer-piece--link-shipping,
  body[data-theme="default"] .footer-piece--link-payreturn,
  body[data-theme="default"] .footer-piece--link-member {
    grid-column: 1 / 5;
    /* #1027：改靠左（原 center）。片段本身多為 width:max-content，靠 justify-self
       決定它在整列格內的水平位置，僅改 text-align 不足以移動它們。 */
    justify-self: start;
  }

  body[data-theme="default"] .footer-piece--name          { grid-row: 1; }
  body[data-theme="default"] .footer-piece--logo          { grid-row: 2; }

  /* 手機 logo 上限放寬 175×175(僅 default;共用規則維持 175×100 不動) */
  body[data-theme="default"] .footer-default-logo.footer-piece--logo img {
    max-width: 175px;
    max-height: 175px;
  }
  body[data-theme="default"] .footer-piece--contact-title { grid-row: 3; }
  body[data-theme="default"] .footer-piece--tel           { grid-row: 4; }
  body[data-theme="default"] .footer-piece--fax           { grid-row: 5; }
  body[data-theme="default"] .footer-piece--address       { grid-row: 6; }
  body[data-theme="default"] .footer-piece--email         { grid-row: 7; }
  body[data-theme="default"] .footer-piece--tax           { grid-row: 8; }
  body[data-theme="default"] .footer-piece--service-title { grid-row: 9; }
  body[data-theme="default"] .footer-piece--hours         { grid-row: 10; }
  body[data-theme="default"] .footer-piece--break         { grid-row: 11; }
  body[data-theme="default"] .footer-piece--closed        { grid-row: 12; }
  body[data-theme="default"] .footer-piece--social-title  { grid-row: 13; }

  /* #1027：社群圖示原本每顆釘死一欄(fb=1／ig=2／line=3／messenger=4),欄位是固定的,
     與實際輸出幾顆無關;blade 僅在後台有填該欄位時才輸出圖示,實際常是 2 顆
     (FB+LINE),此時 FB 落欄 1、LINE 落欄 3,兩者之間憑空空出一欄。
     改為全部共用整列滿欄的同一格 + justify-self:start 對齊左緣,再依「第幾顆」
     以固定節距往右排開,顆數多寡都能緊密相鄰。節距沿用本主題桌機的 58px
     (圓框 45px + 間隙 13px)。 */
  body[data-theme="default"] .footer-default-inner {
    --footer-social-pitch: 58px;
  }

  body[data-theme="default"] .footer-piece--social-pos-1 { --footer-social-index: 1; }
  body[data-theme="default"] .footer-piece--social-pos-2 { --footer-social-index: 2; }
  body[data-theme="default"] .footer-piece--social-pos-3 { --footer-social-index: 3; }
  body[data-theme="default"] .footer-piece--social-pos-4 { --footer-social-index: 4; }

  body[data-theme="default"] .footer-piece--social-fb,
  body[data-theme="default"] .footer-piece--social-ig,
  body[data-theme="default"] .footer-piece--social-line,
  body[data-theme="default"] .footer-piece--social-messenger {
    grid-row: 14;
    grid-column: 1 / 5;
    margin-top: 14px;
    justify-self: start;
    /* 桌機那組依 pos 設的 translateX(58/116/174px) 是全域規則,手機版 MUST 歸零,
       否則會與本區段的位移相加。 */
    transform: none;
    /* #1035：位移用 margin-left 而非 transform。理由是「位移」與「收進同一格」
       (上方 grid-column: 1 / 5)是一體的——站台 custom.css 若以 !important 把圖示
       釘回各自的欄位,位移就必須跟著失效,否則圖示會留在自訂欄位上又被額外推開。
       站台覆寫欄位時慣用的寫法是 grid-column + justify-self + margin 一起釘死
       (margin: 0 !important),margin-left 因而會被同一條規則一併中和,transform
       則不會——它不在任何人的覆寫清單裡,那些 custom.css 撰寫時系統還沒有 transform
       位移。實測 yjj.com.tw 320 寬:改前第 3 顆被推到視窗外、scrollWidth 366
       (溢出 46px);改後 scrollWidth 320、零溢出,圖示回到該站自訂的 3 欄佈局。
       無自訂 CSS 的站(web.ping-pong.tw)位移行為與改前完全相同。
       附帶效果:margin 參與排版而 transform 不參與,圖示不再有溢出容器的可能。 */
    margin-left: calc(
      (var(--footer-social-index) - 1) * var(--footer-social-pitch)
    );
  }

  body[data-theme="default"] .footer-piece--line-info { grid-row: 15; margin-top: 16px; }
  body[data-theme="default"] .footer-piece--qr         { grid-row: 16; margin-top: 16px; }

  /* #1027：桌機用 margin-left 把 QR 推到 LINE ID 右側,手機單欄堆疊時未歸零,
     QR 因而整塊右偏(當時手機版仍置中,實測偏離中線 58px＝116/2;之後整體改靠左
     對齊,同一個殘留左外距會直接把 QR 推離左緣 116px,歸零的必要性不變)。 */
  body[data-theme="default"] .footer-piece--line-info ~ .footer-piece--qr {
    margin-left: 0;
  }

  /* #721 修正：地圖原漏列於單欄堆疊清單，桌機的 grid-column:50/61 在 4 欄
     grid 下會產生隱式欄爆版；改滿寬置於 QR 之下、版權列之上 */
  body[data-theme="default"] .footer-piece--map {
    grid-row: 17;
    width: 100%;
    margin-top: 16px;
  }

  /* #1027：版權區背景條隨連結改為橫排而收窄。原本連結各佔一列（20~24），故涵蓋
     18/25；改排成一列後只需 18（版權句）、19（Powered by）、20（連結列）、
     21（第 5 個連結換行時才用到），取 18/22。連結不足 5 個時第 21 列沒有元素、
     高度為 0，背景條不會多出空白。 */
  body[data-theme="default"] .footer-default-inner::before {
    grid-row: 18 / 22;
  }

  body[data-theme="default"] .footer-piece--copyright {
    grid-row: 18;
    white-space: normal;
  }

  /* 手機:margin 錨定鏈全部歸零(單欄堆疊),字級收斂、店名取消縮排回 24px。
     #1035：social-ig／line／messenger 三顆**自本清單移除**——社群圖示的手機版位移
     自本次起改由 margin-left 承載(見上方社群圖示區段),留在此處會被歸零成 0,
     四顆全部疊在左緣。桌機社群只有 margin-top 與 transform、從未設過 margin-left,
     因此移出後沒有任何桌機殘留值需要清。這條清單正是 #1027 當初改用 transform
     而非 margin 的原因;本次把成因一併解掉,不再繞道 transform。 */
  body[data-theme="default"] .footer-piece--line-info,
  body[data-theme="default"] .footer-piece--qr,
  body[data-theme="default"] .footer-piece--link-privacy,
  body[data-theme="default"] .footer-piece--link-terms,
  body[data-theme="default"] .footer-piece--link-shipping,
  body[data-theme="default"] .footer-piece--link-payreturn,
  body[data-theme="default"] .footer-piece--link-member,
  body[data-theme="default"] .footer-piece--break,
  body[data-theme="default"] .footer-piece--closed {
    margin-left: 0;
  }

  /* 上面那組歸零 MUST 連同「payreturn + member」三條複合規則一起做
   * （issue #1014 與 #1027 各自獨立撞到同一個成因，以下併記雙方實測）
   *
   * 那三條（本檔 body[data-theme=default] .footer-piece--link-payreturn.…-pos-N +
   * .footer-piece--link-member.…-pos-N+1）是桌機的鏈式排開基準、**沒有包在任何 @media 內**，
   * 因此在手機寬度照樣生效；權重 (0,5,1) 又高過上面那組單類選擇器 (0,2,1)，只歸零
   * .footer-piece--link-member 壓不過它。實測後果：會員專區連結在手機保留桌機左邊距
   * （314～506px）被推到畫面外右側，整站每一頁都因此多出一條橫向捲動、右側露出一條空白帶，
   * 連結本身也看不到——#1014 實測 485px 視窗下 scrollWidth 503；#1027 實測 450px 下
   * scrollWidth 486、溢出 36px。頁面一旦可橫向捲動，fixed 的浮動按鈕不跟著捲、static 的
   * 漢堡鈕跟著跑，兩者看起來就都偏掉了（#1027）。
   * 故此處以同結構、同特異性的複合選擇器歸零，權重才咬得住。
   */
  body[data-theme="default"] .footer-piece--link-payreturn.footer-piece--copy-link-pos-1 + .footer-piece--link-member.footer-piece--copy-link-pos-2,
  body[data-theme="default"] .footer-piece--link-payreturn.footer-piece--copy-link-pos-2 + .footer-piece--link-member.footer-piece--copy-link-pos-3,
  body[data-theme="default"] .footer-piece--link-payreturn.footer-piece--copy-link-pos-3 + .footer-piece--link-member.footer-piece--copy-link-pos-4 {
    margin-left: 0;
  }

  /* #1027／#1035：社群四顆不在本清單,但**同樣要歸零**桌機的 transform——它們改在
     上方的社群圖示區段內自行 transform:none,因為那裡同時要設 margin-left 位移,
     兩者寫在一起才看得出「歸零舊位移、改用新載體」是同一件事。其餘片段
     (line-info／qr／break／closed)維持在此歸零。
     **本次回併注意**：develop 側（#1014）原本把 social-ig／line／messenger
     三顆列在本清單，已依 #1035 的新架構移除——本清單位置在社群區段之後，
     留著會蓋掉那裡的設定。 */
  body[data-theme="default"] .footer-piece--line-info,
  body[data-theme="default"] .footer-piece--qr,
  body[data-theme="default"] .footer-piece--break,
  body[data-theme="default"] .footer-piece--closed,
  body[data-theme="default"] .footer-piece--break ~ .footer-piece--closed,
  body[data-theme="default"] .footer-piece--line-info ~ .footer-piece--qr {
    transform: none;
  }

  body[data-theme="default"] .footer-piece--break,
  body[data-theme="default"] .footer-piece--closed,
  body[data-theme="default"] .footer-piece--break ~ .footer-piece--closed {
    margin-top: 8px;
  }

  body[data-theme="default"] .footer-piece--line-info ~ .footer-piece--qr {
    margin-top: 16px;
  }

  body[data-theme="default"] .footer-piece--copyright,
  body[data-theme="default"] .footer-piece--powered,
  body[data-theme="default"] .footer-piece--link-privacy,
  body[data-theme="default"] .footer-piece--link-terms,
  body[data-theme="default"] .footer-piece--link-shipping,
  body[data-theme="default"] .footer-piece--link-payreturn,
  body[data-theme="default"] .footer-piece--link-member {
    white-space: normal;
  }

  body[data-theme="default"] .footer-piece--copyright,
  body[data-theme="default"] .footer-piece--powered,
  body[data-theme="default"] .footer-piece--link-privacy,
  body[data-theme="default"] .footer-piece--link-terms,
  body[data-theme="default"] .footer-piece--link-shipping,
  body[data-theme="default"] .footer-piece--link-payreturn,
  body[data-theme="default"] .footer-piece--link-member {
    font-size: 15px;
    padding: 6px 0;
  }

  body[data-theme="default"] .footer-default-title.footer-piece--name {
    padding-left: 0;
    font-size: 24px;
  }

  body[data-theme="default"] .footer-piece--copyright::after {
    content: none;
  }

  body[data-theme="default"] .footer-piece--powered        { grid-row: 19; }

  /* #1027：版權連結原本每個獨佔一列（20~24），手機版因此多吃 4~5 行、約 156px，
     而每個連結文字僅約 60px 寬、右側 275px 全是空白，浪費的是橫向而非縱向空間。
     改為同一列、依實際輸出序號各佔一欄（4 欄 grid 剛好排 4 個，第 5 個換下一列）。
     用 --copy-link-pos-N 而非 link-* 定位是關鍵：blade 只在後台有開該連結時才輸出，
     pos 是「實際輸出的連號」，因此不論開幾個都緊密相鄰，不會像固定欄位那樣留空格。
     以 4 個連結計，由 4 行壓成 1 行，省約 117px。 */
  body[data-theme="default"] .footer-piece--copy-link-pos-1,
  body[data-theme="default"] .footer-piece--copy-link-pos-2,
  body[data-theme="default"] .footer-piece--copy-link-pos-3,
  body[data-theme="default"] .footer-piece--copy-link-pos-4 {
    grid-row: 20;
  }

  body[data-theme="default"] .footer-piece--copy-link-pos-1 { grid-column: 1; }
  body[data-theme="default"] .footer-piece--copy-link-pos-2 { grid-column: 2; }
  body[data-theme="default"] .footer-piece--copy-link-pos-3 { grid-column: 3; }
  body[data-theme="default"] .footer-piece--copy-link-pos-4 { grid-column: 4; }

  body[data-theme="default"] .footer-piece--copy-link-pos-5 {
    grid-row: 21;
    grid-column: 1;
  }

  /* #1027：橫排後每個連結只有約 83px 欄寬(375 扣內距 ÷4),而桌機基準對這五個連結
     設了 white-space:nowrap(整串同一行的版權列),grid item 的寬度不受欄寬約束,
     長語系文案會直接跨欄壓到隔壁。lang/ 下 en／jp／kr 皆已有文案(如
     "Return & Exchange Policy"、"プライバシーポリシー"),不是未來才會發生的情境。
     手機版解除 nowrap 並允許長字斷行,超長文案改為折行而非溢出重疊。 */
  body[data-theme="default"] .footer-piece--copy-link-pos-1,
  body[data-theme="default"] .footer-piece--copy-link-pos-2,
  body[data-theme="default"] .footer-piece--copy-link-pos-3,
  body[data-theme="default"] .footer-piece--copy-link-pos-4,
  body[data-theme="default"] .footer-piece--copy-link-pos-5 {
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 100%;
  }
}