@charset "utf-8";
/* ============================================================================
 * themes/custom-kgtwbeef/footer.css — kgtwbeef 主題 footer 版面重排（issue #695）
 * ============================================================================
 *
 * 用途：
 *   共用 footer HTML（resources/views/sites/default/footer.blade.php）已「真．
 *   最大彈性打平」：每一個內容片段（店名/品牌名、logo、聯絡各欄位、服務時間、
 *   社群每顆圖示、LINE ID、QR、加好友、地圖、卡片底框、版權句/Powered by/
 *   統編/每個連結）都是 .footer-default-inner 的**直接子元素**，不再有任何
 *   header/row/col/block/list/ul 中介包裝層。
 *   每個片段同時帶「樣式 hook（footer-default-* / footer-copy-*，決定顏色字級
 *   等外觀）」與「定位 hook（footer-piece--*，唯一、專供本檔 grid-area 指派用）」。
 *
 * 核心技術（直接 grid，不需 display:contents）：
 *   共用 HTML 已經是扁平的，不必再攤平任何包裝層。本檔只需：
 *   1. .footer-default-inner 設 display:grid，grid-template-columns 切成
 *      60 欄（細顆粒度，方便下方「同列多片段」精準分配寬度）。
 *   2. 每個 footer-piece--* 用 grid-column / grid-row 直接指定落點，組出
 *      左卡（地圖+店家資訊）／右卡（QR+聯絡我們+LINE+加好友）並排、logo 置中、
 *      社群置中、統編+連結置中、版權句+Powered by 置中的版面。
 *   3. 「同一列多個片段要並排置中」（統編+5 個連結／4 顆社群圖示／版權句+
 *      Powered by）沒有 flex 容器可用（無包裝層），改用「相鄰欄 + 依實際文字
 *      長度給不等寬欄 + justify-self:center」逼近置中效果（60 欄提供足夠顆粒
 *      度，比照片段字數手動抓比例；欄寬與實際文字寬度略有落差是已知限制，
 *      能再視覺微調但非像素級精確）。
 *   4. 兩個預設隱藏的空 div（footer-piece--card-left/--card-right）顯示後跨
 *      列（grid-row:1/5）當左右卡片背景框，z-index 沉到內容片段之下
 *      （.footer-default-inner 設 isolation:isolate 避免負值 z-index 穿透）。
 *   5. kgtwbeef 不顯示的片段（店名 name、服務時間標題、社群連結標題、
 *      email/tax（聯絡欄的統編，非版權列的 taxid）/fax/break、
 *      footer-default-icon 各欄位左側 zmdi 圖示）一律 display:none。
 *
 * 對應 blade：resources/views/sites/default/footer.blade.php（共用，不可改）
 * 對應 common：public/web/css/common/footer.css（提供部分 .footer-default-*
 *              基礎樣式；因該檔仍殘留舊版 header/row/col/ul 包裝層選擇器，
 *              於新扁平 HTML 下已不生效——本檔對社群圖示等改為完整自帶樣式，
 *              不依賴 common 的 li 巢狀選擇器）
 *
 * 詳細規格：openspec/specs/web-theme-css/spec.md（Requirement R.FUNC.1 / R.FUNC.8）
 * 變更記錄：issue #695（kgtwbeef footer 版面重排；本次改寫為對應 blade 徹底
 *   扁平化後的直接 grid 版本，取代舊的 display:contents 攤平寫法）
 * ============================================================================
 */


/* ============================================================================
 * 區段 1：footer 背景透明，讓頁面本身的牛紋材質穿透（使用者指定 2026/07/20）
 * ============================================================================ */

.footer-area,
.footer-area.gray-bg {
  background: transparent;
}


/* ============================================================================
 * 區段 2：隱藏 kgtwbeef 版面不顯示的片段
 * ============================================================================ */

.footer-piece--service-title,
.footer-piece--social-title,
.footer-piece--fax,
.footer-piece--email,
.footer-piece--break,
.footer-piece--tax,
.footer-default-icon {
  display: none;
}


/* ============================================================================
 * 區段 3：外距（縮小兩側留白，讓兩卡使用更多寬度；使用者指定 2026/07/20）
 * ============================================================================ */

.footer-area .footer-shell.plr-185,
.footer-area .footer-shell--gutter .plr-185 {
  padding-left: clamp(16px, 3vw, 48px);
  padding-right: clamp(16px, 3vw, 48px);
}


/* ============================================================================
 * 區段 4：主 grid——60 欄細顆粒度，每個片段各自 grid-column/grid-row 定位
 *
 *   欄位地圖（桌機 ≥992px）：
 *     左卡：map 1~15／brand・addr・hours・closed 16~30（各佔滿右半 15 欄）
 *     右卡：qr 31~45／title・tel・lineid・addfr 46~60
 *     logo／社群／版權列：整列置中片段，見下方各自 grid-column 註解
 * ============================================================================ */

.footer-default-inner {
  display: grid;
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px 20px 32px;
  column-gap: 0;
  row-gap: 0;
  grid-template-columns: repeat(60, minmax(0, 1fr));
  align-items: start;
  /* text-align 是繼承屬性，common 在 ≤991.98px 可能給祖先 text-align:center，
     這裡在 grid 容器統一釘回 left，左卡店家資訊文字才不會置中跑版
     （logo/社群/版權列另用 justify-self 置中，不受影響） */
  text-align: left;
}

/* --- 左卡：地圖（欄 1~15，列 1~4） --- */

.footer-piece--map {
  grid-column: 1 / 15;
  grid-row: 1 / 5;
}

/* --- 左卡：店家資訊（欄 16~30，各佔一列） --- */

.footer-piece--brand {
  grid-column: 16 / 31;
  grid-row: 1;
}

.footer-piece--address {
  grid-column: 16 / 31;
  grid-row: 2;
}

.footer-piece--hours {
  grid-column: 16 / 31;
  grid-row: 3;
}

.footer-piece--closed {
  grid-column: 16 / 31;
  grid-row: 4;
}

/* --- 右卡：QR（欄 31~45，列 1~4） --- */

.footer-piece--qr {
  grid-column: 31 / 45;
  grid-row: 1 / 5;
}

/* --- 右卡：聯絡我們 + LINE + 加好友（欄 46~60，各佔一列） --- */

.footer-piece--contact-title {
  grid-column: 46 / 61;
  grid-row: 1;
}

.footer-piece--tel {
  grid-column: 46 / 61;
  grid-row: 2;
}

.footer-piece--line-info {
  grid-column: 46 / 61;
  grid-row: 3;
}

.footer-piece--addfriend {
  grid-column: 46 / 61;
  grid-row: 4;
}

/* --- logo（列 5，滿欄置中） --- */

.footer-piece--logo {
  grid-column: 1 / 61;
  grid-row: 5;
}

/* --- name（公司名稱）+ 統編 + 連結群（列 6）：name 加在統編左邊（使用者指定
   2026/07/20）。以「｜」分隔號為兩行共同中線（使用者指定 2026/08/07，同列 8）：
   左半段（name、統編＋｜）一律 justify-self:end 收在中線（欄 31＝60 欄正中），
   右半段（連結群）一律 justify-self:start 從中線往右排。
   舊寫法把每個片段釘在依「猜測字數」切好的固定欄（30/33、33/36…），欄寬與實際
   文字寬度對不上時間距就忽寬忽窄，且整行中線會偏離版面中線 --- */

.footer-piece--name,
.footer-piece--taxid {
  grid-column: 1 / 31;
  grid-row: 6;
  justify-self: end;
  /* 收成內容寬才吃得到 justify-self（區塊層級的自動寬會直接撐滿整格） */
  width: max-content;
}

/* --- 社群圖示（列 7）：全部圖示共用「整列滿欄」同一格、一律置中，實際左右
   位置改由區段 8 的 translateX 依「第幾顆／共幾顆」算出，故無論輸出 1~4 顆
   都對稱於版面中線（舊寫法把 4 顆釘死在欄 25~37，只有剛好 4 顆時才置中，
   後台未填 IG／Messenger 時整組會偏左，2026/08/07 修正） --- */

.footer-piece--social-fb,
.footer-piece--social-ig,
.footer-piece--social-line,
.footer-piece--social-messenger {
  grid-column: 1 / 61;
  grid-row: 7;
}

/* --- 版權句 + Powered by（列 8）：同列 6 的作法，以「｜」為中線切兩半，
   版權句（含 ::after 的｜）收在欄 31 右緣、Powered by 從欄 31 起排；
   兩半各自 width:max-content，長度隨文字自動伸縮，不再靠猜欄寬 --- */

.footer-piece--copyright {
  grid-column: 1 / 31;
  grid-row: 8;
  width: max-content;
}

.footer-piece--powered {
  grid-column: 31 / 61;
  grid-row: 8;
  width: max-content;
}

/* --- 卡片底框（欄 1~30 / 31~60，跨列 1~4，當左右卡片背景） --- */

.footer-piece--card-left {
  grid-column: 1 / 31;
  grid-row: 1 / 5;
  /* 兩卡中間拉開間距：卡框右緣內收，內容（文字 padding-right 28px）有緩衝不被切 */
  margin-right: 20px;
}

.footer-piece--card-right {
  grid-column: 31 / 61;
  grid-row: 1 / 5;
  /* 兩卡中間拉開間距：卡框左緣內收，內容（QR padding-left 24px）有緩衝不被切 */
  margin-left: 20px;
}


/* ============================================================================
 * 區段 5：左卡樣式——地圖 + 店名（品牌名）+ 地址 + 營業時間 + 公休日
 * ============================================================================ */

.footer-default-map {
  align-self: start;
  padding: 24px 0 24px 28px;
}

/* 卡片高度 250px（使用者指定）：地圖高度 202px + 上下各 24px 內距 = 250px */
.footer-default-map iframe {
  width: 100%;
  height: 202px;
  border: 0;
  border-radius: 14px;
  display: block;
}

/* 店名改抓品牌名稱（使用者指定 2026/07/20）：左卡標題顯示 footer-piece--brand
   （常駐但 common 預設隱藏，此處開啟）；footer-piece--name（h2 店名）另於區段 10
   改為統編左側同款小字，並未隱藏 */
.footer-default-brand {
  padding: 24px 28px 0 0;
  margin: 0 0 8px;
  color: #E8380C;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.4;
  display: block;
}

.footer-default-item--address {
  padding: 4px 28px 0 0;
  color: #E8380C;
}

.footer-default-item--hours {
  padding: 4px 28px 0 0;
  color: #E8380C;
}

.footer-default-item--closed {
  padding: 4px 28px 24px 0;
  color: #E8380C;
}

/* 左卡文字所在的列被右卡（含較高的 QR）撐高，改垂直置中讓多出的間距均勻
   分佈於各行之間，而非全部集中在「公休日」下方形成大洞 */
.footer-default-brand,
.footer-default-item--address,
.footer-default-item--hours,
.footer-default-item--closed {
  align-self: center;
}

.footer-default-item--address p,
.footer-default-item--hours p,
.footer-default-item--closed p {
  font-size: 16px;
  line-height: 1.7;
  color: #E8380C;
}


/* ============================================================================
 * 區段 6：右卡樣式——QR + 聯絡我們 + 電話 + LINE ID + 加好友
 * ============================================================================ */

.footer-default-block-title--contact {
  padding: 24px 28px 0 0;
  margin-bottom: 14px;
  color: #2c2320;
  font-size: 26px;
  font-weight: 700;
}

/* 移除標題前的裝飾直條（使用者指定）：kgtwbeef 標題不要 common 的 ::before 小紅條 */
.footer-default-block-title--contact::before {
  content: none;
}

.footer-default-item--tel {
  padding: 0 28px 0 0;
  color: #4a3c30;
}

.footer-default-item--tel p {
  font-size: 15px;
}

.footer-default-line-qr {
  align-self: center;
  padding: 24px 8px 24px 24px;
  text-align: center;
  border: 0;
  background: transparent;
  border-radius: 0;
}

.footer-default-line-qr img {
  width: 100%;
  max-width: 200px;
  height: auto;
  aspect-ratio: 1;
}

.footer-default-line-info {
  padding: 4px 28px 0 0;
}

.footer-default-addfriend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  align-self: start;
  margin: 12px 0 24px 0;
  padding: 10px 26px;
  background: #E8380C;
  color: #ffffff;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.footer-default-addfriend:hover {
  background: #c62f09;
  color: #ffffff;
}

.footer-default-addfriend-icon {
  font-size: 18px;
}


/* ============================================================================
 * 區段 7：logo（置中）
 *
 *   舊寫法把外框釘死 160×100，但 common 的 `.footer-default-logo img`
 *   `height:100%` 在中間那層 <a>（高度 auto）下解析為 auto，圖片仍以原始比例
 *   撐成 160×143，多出的 43px 溢出外框、壓到下一列的統編／隱私政策等連結
 *   （2026/08/07 修正）。改為外框不設固定高、由圖片撐開，圖片本身以
 *   max-width/max-height 等比設限，列高自然容得下 logo，不再重疊。
 * ============================================================================ */

.footer-default-logo {
  width: auto;
  height: auto;
  margin: 24px auto 8px;
  justify-self: center;
}

/* 特異性需壓過 common 的 `.footer-default-logo img`（0,1,1），故加上定位 hook */
.footer-default-logo.footer-piece--logo img {
  width: auto;
  height: auto;
  max-width: 160px;
  max-height: 160px;
  object-fit: contain;
  display: block;
}


/* ============================================================================
 * 區段 8：社群圖示（置中，紅色圓框風格）
 *   共用 blade 已無 <ul>/<li> 包裝，common/footer.css 殘留的
 *   `.footer-social li a.footer-social-link` 巢狀選擇器不再匹配任何元素，
 *   本檔對 .footer-social-link 完整自帶樣式（尺寸/圓框/雙圖交叉淡出/hover）
 *
 *   置中作法（2026/08/07）：blade 只在後台有填該欄位時才輸出對應圖示，故顆數
 *   是 1~4 動態值；扁平 HTML 沒有 flex 容器可用，改用
 *     ① 全部圖示共用整列滿欄的同一格 + justify-self:center（都疊在中線上）
 *     ② 各自 translateX((第幾顆 − (共幾顆+1)/2) × 節距) 往左右對稱散開
 *   「共幾顆」用 :has() 偵測最大的 --social-pos-N 是幾號（pos 是連號，後出現
 *   的規則勝出即為實際顆數）。節距 66px＝圓框 45px + 間隙 21px，與修正前
 *   1440 寬時的 3 欄間距一致，且不再隨視窗寬度伸縮。
 * ============================================================================ */

.footer-default-inner {
  --footer-social-pitch: 66px;
  --footer-social-count: 1;
}

.footer-default-inner:has(.footer-piece--social-pos-1) { --footer-social-count: 1; }
.footer-default-inner:has(.footer-piece--social-pos-2) { --footer-social-count: 2; }
.footer-default-inner:has(.footer-piece--social-pos-3) { --footer-social-count: 3; }
.footer-default-inner:has(.footer-piece--social-pos-4) { --footer-social-count: 4; }

.footer-piece--social-pos-1 { --footer-social-index: 1; }
.footer-piece--social-pos-2 { --footer-social-index: 2; }
.footer-piece--social-pos-3 { --footer-social-index: 3; }
.footer-piece--social-pos-4 { --footer-social-index: 4; }

.footer-piece--social-fb,
.footer-piece--social-ig,
.footer-piece--social-line,
.footer-piece--social-messenger {
  transform: translateX(calc(
    (var(--footer-social-index) - (var(--footer-social-count) + 1) / 2)
    * var(--footer-social-pitch)
  ));
}

.footer-social-link {
  display: flex;
  justify-content: center;
  align-items: center;
  justify-self: center;
  align-self: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid #E8380C;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.footer-social-link:hover {
  background: #E8380C;
  border-color: #E8380C;
}

.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%;
}

/* 只用單色圖轉純紅，不用原彩色圖 */
.footer-social-icon-img--color {
  display: none;
}

.footer-social-icon-img--mono {
  opacity: 1;
  /* 黑白圖先強制變全黑，再用 sepia/hue-rotate 染成品牌紅 #E8380C（近似值，
     瀏覽器間會有些微色差，屬 CSS filter 著色法的已知限制） */
  filter: brightness(0) saturate(100%) invert(19%) sepia(94%) saturate(7466%) hue-rotate(17deg) brightness(95%) contrast(112%);
}

/* hover 紅底時圖示轉白，維持對比 */
.footer-social-link:hover .footer-social-icon-img--mono {
  filter: brightness(0) invert(1);
}


/* ============================================================================
 * 區段 9：卡片底框——顯示後當左右卡片背景框，沉在內容片段之下
 * ============================================================================ */

.footer-piece--card-left,
.footer-piece--card-right {
  display: block;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid #E8380C;
  border-radius: 20px;
  /* .footer-default-inner 設 align-items:start 讓文字內容維持頂端對齊，但卡片
     底框是空 div，需改回 stretch 撐滿整個列跨（1/5）高度，否則會塌縮成一條
     細線（空 div 自身高度=邊框寬度而已） */
  align-self: stretch;
}

/* 卡片框在 DOM 中排在多數左右卡內容片段之後（footer-piece--map/brand/qr/tel…
   皆在其前），同層級疊放順序時晚出現者蓋在上面；用負值 z-index 讓卡片穩定
   沉到內容之後，並在 grid 容器建立獨立 stacking context（isolation）避免負值
   穿透到外層 footer-area／頁面其他區塊底下而消失 */
.footer-default-inner {
  isolation: isolate;
}

.footer-piece--card-left,
.footer-piece--card-right {
  z-index: -1;
}


/* ============================================================================
 * 區段 10：統編 + 連結（列 6）、版權句 + Powered by（列 8）
 *   兩列都以自己的「｜」分隔號為共同中線對齊（使用者指定 2026/08/07）：
 *   左半段 justify-self:end 收在欄 31（版面正中）、右半段 justify-self:start
 *   從欄 31 起排，兩個「｜」因此落在同一條垂直線上。
 *
 *   連結群的間距（使用者指定 2026/08/07「每個間距都要一樣」）：
 *   扁平 HTML 沒有 flex 容器可用 `gap`，欄格又是等寬的，字數不同的標籤放進
 *   等寬格必然忽寬忽窄（退換貨流程 5 字塞進 4 字寬的格子就是原本擠在一起的
 *   主因）。改成「全部連結同在中線右側那一格、各自 width:max-content，再用
 *   margin-left 以 em 疊出固定節距」：
 *       margin-left = 間距 × N + 標籤基準寬 × (N−1) + 前方較長標籤的補償
 *   N 取自 blade 的 --copy-link-pos-N（只計「實際有輸出」的連結，後台關掉
 *   任何一個都會自動遞補），中文標籤一字剛好 1em，故基準寬 4em 即 4 個字。
 * ============================================================================ */

/* name（公司名稱「盛崴商行」）：解除隱藏後接在統編左邊，h2 改成與統編同款小字；
   用 .footer-default-title.footer-piece--name 提高特異性壓過 common 標題樣式 */
.footer-default-title.footer-piece--name {
  margin: 20px 0 0;
  padding: 0;
  border: 0;
  align-self: center;
  color: #a87f54;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
  /* name 與統編同格（欄 1~31）且同樣靠右，靠這段右外距讓出統編＋｜的寬度，
     name 才會落在統編左邊而不是疊在一起（13em ≈ 統編整段寬 + 字間距） */
  margin-right: 13em;
}

.footer-default-title.footer-piece--name::before,
.footer-default-title.footer-piece--name::after {
  content: none;
}

.footer-copy-taxid {
  display: inline;
  color: #a87f54;
  font-size: 15px;
}

/* 統編與第一個連結之間的分隔線「｜」：這個字元的右緣即為列 6 的對齊中線，
   字級與列 8 的分隔號釘成一致（統編本身 15px、版權句 14px），兩條線才等寬 */
.footer-copy-taxid::after {
  content: "｜";
  color: #c3996b;
  font-size: 14px;
  margin-left: 12px;
}

.footer-copy-link {
  /* 間距／標籤基準寬（中文一字 = 1em）／前方較長標籤的補償量 */
  --footer-link-gap: 1em;
  --footer-link-unit: 4em;
  --footer-link-extra: 0em;
  grid-column: 31 / 61;
  grid-row: 6;
  justify-self: start;
  width: max-content;
  color: #a87f54 !important;
}

/* 中文標籤只有「退換貨流程」是 5 字，排在它後面的連結一律再往右補 1 字寬；
   其餘（隱私政策／服務條款／配送說明／會員權益）皆 4 字＝基準寬，不需補償。
   日後若有標籤字數改變，比照本條增列一條即可 */
.footer-piece--link-payreturn ~ .footer-copy-link {
  --footer-link-extra: 1em;
}

.footer-piece--copy-link-pos-1 {
  margin-left: calc(var(--footer-link-gap) * 1 + var(--footer-link-unit) * 0 + var(--footer-link-extra));
}

.footer-piece--copy-link-pos-2 {
  margin-left: calc(var(--footer-link-gap) * 2 + var(--footer-link-unit) * 1 + var(--footer-link-extra));
}

.footer-piece--copy-link-pos-3 {
  margin-left: calc(var(--footer-link-gap) * 3 + var(--footer-link-unit) * 2 + var(--footer-link-extra));
}

.footer-piece--copy-link-pos-4 {
  margin-left: calc(var(--footer-link-gap) * 4 + var(--footer-link-unit) * 3 + var(--footer-link-extra));
}

.footer-piece--copy-link-pos-5 {
  margin-left: calc(var(--footer-link-gap) * 5 + var(--footer-link-unit) * 4 + var(--footer-link-extra));
}

.footer-copy-link:hover {
  color: #E8380C !important;
}

.footer-piece--copyright {
  justify-self: end;
  align-self: center;
  margin: 20px 0 0;
  color: #a87f54;
  font-size: 14px;
  /* 防止版權句換行把 ::after「｜」分隔號孤兒到下一行 */
  white-space: nowrap;
}

/* 版權句與 Powered by 之間的分隔線「｜」：右緣即列 8 的對齊中線，前置外距與
   列 6 的統編分隔號一致（12px），兩列的「｜」才會落在同一條垂直線上 */
.footer-piece--copyright::after {
  content: "｜";
  color: #c3996b;
  font-size: 14px;
  margin-left: 12px;
}

.footer-piece--powered {
  justify-self: start;
  align-self: center;
  /* 分隔號的右間距改由本段的左外距承擔（｜本體必須貼齊中線，不能帶右外距） */
  margin: 20px 0 0 12px;
  color: #a87f54 !important;
  font-size: 14px;
}

.footer-piece--powered:hover {
  color: #E8380C !important;
}

/* 底部三列（統編/連結、社群、版權）垂直間距放鬆：row-gap:0 下靠各片段 margin-top
   撐開列距；同列所有片段給相同 margin-top，避免同列高低錯位。不影響卡片列 1~4 */
.footer-piece--taxid,
.footer-piece--link-privacy,
.footer-piece--link-terms,
.footer-piece--link-shipping,
.footer-piece--link-payreturn,
.footer-piece--link-member {
  margin-top: 20px;
}

.footer-piece--social-fb,
.footer-piece--social-ig,
.footer-piece--social-line,
.footer-piece--social-messenger {
  margin-top: 20px;
}


/* ============================================================================
 * 區段 11：浮動購物車鈕品牌棕色（結構沿用 common，僅覆寫品牌色）
 * ============================================================================ */

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

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


/* ============================================================================
 * 區段 12：RWD——斷點統一 480 / 576 / 768 / 992 / 1200 / 1400
 *   ≤991.98px：兩卡改上下堆疊，改 4 欄（社群圖示維持一列四顆），
 *   其餘片段各自佔滿 4 欄（單欄堆疊、置中）
 * ============================================================================ */

@media (max-width: 991.98px) {
  .footer-default-inner {
    padding: 32px 20px 28px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    text-align: center;
  }

  .footer-piece--map,
  .footer-piece--brand,
  .footer-piece--address,
  .footer-piece--hours,
  .footer-piece--closed,
  .footer-piece--qr,
  .footer-piece--contact-title,
  .footer-piece--tel,
  .footer-piece--line-info,
  .footer-piece--addfriend,
  .footer-piece--logo,
  .footer-piece--name,
  .footer-piece--taxid,
  .footer-piece--copy-link-pos-1,
  .footer-piece--copy-link-pos-2,
  .footer-piece--copy-link-pos-3,
  .footer-piece--copy-link-pos-4,
  .footer-piece--copy-link-pos-5,
  .footer-piece--copyright,
  .footer-piece--powered,
  .footer-piece--card-left,
  .footer-piece--card-right {
    grid-column: 1 / 5;
  }

  .footer-piece--map { grid-row: 1; }
  .footer-piece--brand { grid-row: 2; }
  .footer-piece--address { grid-row: 3; }
  .footer-piece--hours { grid-row: 4; }
  .footer-piece--closed { grid-row: 5; }
  .footer-piece--contact-title { grid-row: 6; }
  .footer-piece--tel { grid-row: 7; }
  .footer-piece--qr { grid-row: 8; }
  .footer-piece--line-info { grid-row: 9; }
  .footer-piece--addfriend { grid-row: 10; }
  .footer-piece--logo { grid-row: 11; }
  /* #721 修正：name（公司名稱）原漏列於單欄堆疊清單，桌機 grid-column:15/20
     在 4 欄 grid 下產生隱式欄、浮到右側邊緣；補進堆疊並置於統編之上 */
  .footer-piece--name { grid-row: 12; }
  .footer-piece--taxid { grid-row: 13; }
  .footer-piece--copy-link-pos-1 { grid-row: 14; }
  .footer-piece--copy-link-pos-2 { grid-row: 15; }
  .footer-piece--copy-link-pos-3 { grid-row: 16; }
  .footer-piece--copy-link-pos-4 { grid-row: 17; }
  .footer-piece--copy-link-pos-5 { grid-row: 18; }
  .footer-piece--copyright { grid-row: 20; }
  .footer-piece--powered { grid-row: 21; }

  /* 手機是單欄堆疊，桌機那套「以｜為中線、左右半段各自靠邊 + em 節距」全部歸零，
     每段各自佔滿一列並置中；width 也放回 auto，長句才能正常換行 */
  .footer-piece--name,
  .footer-piece--taxid,
  .footer-piece--copy-link-pos-1,
  .footer-piece--copy-link-pos-2,
  .footer-piece--copy-link-pos-3,
  .footer-piece--copy-link-pos-4,
  .footer-piece--copy-link-pos-5,
  .footer-piece--copyright,
  .footer-piece--powered {
    justify-self: center;
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }

  /* 社群圖示：唯一在手機仍維持「同一橫排」的群組，佔滿 4 欄的獨立第 19 列，
     左右位置同桌機交給區段 8 的 translateX 對稱算出（舊寫法一顆一欄，只有
     剛好 4 顆時才置中，2 顆時擠在左半邊，2026/08/07 一併修正） */
  .footer-piece--social-fb,
  .footer-piece--social-ig,
  .footer-piece--social-line,
  .footer-piece--social-messenger {
    grid-column: 1 / 5;
    grid-row: 19;
  }

  .footer-piece--card-left { grid-row: 1 / 6; }
  .footer-piece--card-right { grid-row: 6 / 11; }

  /* #1027：區段 4 的 margin-right/left: 20px 是桌機「兩卡左右並排」時拉開中間間距用的,
     改單欄上下堆疊後這組 margin 未歸零,造成上卡向左偏、下卡向右偏,兩者錯開 20px——
     視覺上就是使用者回報的「footer 沒有置中」;同時卡框比同一格的地圖窄 20px,地圖因此
     超出卡框右緣(「地圖也怪怪的」)。單欄堆疊時左右 margin 一律歸零。 */
  .footer-piece--card-left,
  .footer-piece--card-right {
    margin-left: 0;
    margin-right: 0;
  }

  /* 左右間距歸零後,上下堆疊的兩張卡片會直接相貼,改由垂直方向補回同樣的 20px:
     上卡底緣與下卡頂緣各內收 10px,兩者分擔,單邊只犧牲 10px 內容緩衝(上卡末項
     「公休日」與下卡首項「聯絡我們」各自仍留有餘裕)。 */
  .footer-piece--card-left {
    margin-bottom: 10px;
  }

  .footer-piece--card-right {
    margin-top: 10px;
  }

  /* 手機單欄置中：卡片內文字、聯絡資訊、版權列改置中，並取消桌機右內距 */
  .footer-default-brand,
  .footer-default-item--address,
  .footer-default-item--hours,
  .footer-default-item--closed,
  .footer-default-block-title--contact,
  .footer-default-item--tel,
  .footer-default-line-info {
    justify-self: center;
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
  }

  .footer-default-map {
    padding: 20px 20px 0;
  }

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

  .footer-default-line-qr {
    justify-self: center;
    padding: 20px 0;
  }

  .footer-default-addfriend {
    justify-self: center;
    margin: 12px 0 24px;
  }

  .footer-piece--copyright,
  .footer-piece--powered {
    justify-self: center;
  }

  .footer-piece--copyright {
    /* 手機單欄堆疊，版權句改回可換行（避免極窄螢幕/長店名溢出） */
    white-space: normal;
  }

  .footer-piece--copyright::after {
    content: none;
  }

  /* 手機單欄堆疊：name 置中（覆寫桌機 justify-self:end）、允許換行、
     取消桌機讓位給統編的右外距（需同特異性才壓得過桌機那條）、
     統編後的「｜」分隔號取消（下一項已不在同列） */
  .footer-default-title.footer-piece--name {
    justify-self: center;
    white-space: normal;
    margin-right: 0;
  }

  .footer-copy-taxid::after {
    content: none;
  }

  .footer-default-brand {
    font-size: 22px;
  }
}

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

  .footer-default-map {
    padding: 20px 12px 0;
  }

  .footer-default-brand,
  .footer-default-item--address,
  .footer-default-item--hours,
  .footer-default-item--closed,
  .footer-default-block-title--contact,
  .footer-default-item--tel,
  .footer-default-line-info {
    padding-left: 12px;
    padding-right: 12px;
  }

  .footer-default-brand {
    font-size: 18px;
  }

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

  .footer-social-link {
    width: 40px;
    height: 40px;
  }

  /* 圓框縮到 40px，節距同步縮小維持相同視覺間隙（40 + 20） */
  .footer-default-inner {
    --footer-social-pitch: 60px;
  }
}