/* Shared approved public-site layout, without demo banners or order interception. */
html:has(body.tpl-a2),html:has(body.tpl-b2),html:has(body.ps-buy){background:#f4f1ea}
body.tpl-a2,body.tpl-b2,body.ps-buy{width:100%;max-width:780px;margin-inline:auto;min-height:100dvh}
/* Both templates open a white drawer from the viewport's left edge. */
/* 選單（z 50）住在 header 裡，被 header 這層的 z 封頂：要高過輪播鈕（2）跟購物車鈕（40），
   不然它們會疊到打開的選單上（Kelly 2026-10-07）。兩套皮共用這一條，a2／b2 不再各寫。 */
:is(.tpl-a2,.tpl-b2) .site-header{z-index:45}
/* 電腦版上限 360（Kelly 2026-10-07：75% 在寬螢幕太寬不好讀）；手機 75% 本來就小於它。 */
:is(.tpl-a2,.tpl-b2) .menu-sheet{width:75%;max-width:360px;height:100dvh;max-height:100dvh;margin:0;border-radius:0;background:#fff;box-sizing:border-box;animation:site-menu-enter .3s cubic-bezier(.4,0,.2,1)}
:is(.tpl-a2,.tpl-b2) .menu-head .brand{min-width:0;overflow-wrap:anywhere}
:is(.tpl-a2,.tpl-b2) .menu-close{flex-shrink:0}
body:has(.menu:not([hidden])){overflow:hidden}
@keyframes site-menu-enter{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){:is(.tpl-a2,.tpl-b2) .menu-sheet{animation:none}}
/* Keep the fixed cart inside the centered site, including on wide screens. */
:is(.tpl-a2,.tpl-b2,.ps-buy) .cart-fab{right:max(calc(20px + env(safe-area-inset-right,0px)),calc((100vw - 780px)/2 + 20px))}
:is(.tpl-a2,.tpl-b2) .cart-fab{bottom:calc(24px + env(safe-area-inset-bottom,0px))}
:is(.tpl-a2,.tpl-b2) .site-footer{padding:36px 24px 48px;display:flex;flex-direction:column;gap:16px;border-top:1px solid #e3dfd4;text-align:left}
/* ⚠️ 2026-10-07 起首頁頁尾改靠左、跟商品總覽同一組（見下方「買頁＋商品總覽＋首頁的頁尾」），
   這幾條的置中／宋體已被那組蓋掉，只剩上框線與店名下間距仍有作用。
   店家資訊四種頁面一律置中（Kelly 2026-09-24）。原本只有 A2 置中、B2 與客人端
   靠左——同一份頁尾在不同頁長得不一樣，而那是同一塊資料。 */
:is(.tpl-a2,.tpl-b2) .store-profile{text-align:center}
:is(.tpl-a2,.tpl-b2) .store-profile-name{font:400 20px/1.3 "Noto Serif TC",serif;letter-spacing:.02em;margin:0}
:is(.tpl-a2,.tpl-b2) .store-profile p{margin:0;font:400 13px/1.6 "Noto Sans TC",sans-serif;letter-spacing:.02em;overflow-wrap:anywhere}
/* ⚠️ **聯絡資料各行之間不再另加 margin**（Kelly 2026-09-24，行距參考稿）：
   1.9 行高再疊 6px 段距，四行會散成四個獨立的東西；那是一組聯絡方式，要讀成一塊。
   店名與第一行之間才需要間隔——而且只在真的有聯絡資料時才長出來。 */
:is(.tpl-a2,.tpl-b2) .store-profile-name+p{margin-top:16px}
/* 店名點了回首頁（Kelly 2026-10-07）。外觀不變，命中區撐到 44 高但用負邊距抵掉，不改版面。 */
.site-footer .store-profile-name a{display:inline-flex;align-items:center;min-height:44px;margin:-10px 0;color:inherit;text-decoration:none}
.site-footer .store-profile-name a:hover{text-decoration:underline;text-underline-offset:4px}
/* footer 的會員專區入口（spec §2.8：選單列與 footer 兩邊都有，而且不給店家開關）。
   ⚠️ **不要做成 `.report-entry` 那個大列的樣子**：付款回報那一列是店家可以關的
   （`content.report.enabled`），而它 301 到的也是 `/me`——兩列長得一樣、都通到同一個
   地方、其中一列會消失，那是最難解釋的一種畫面。 */
/* ⚠️ **用 `line-height` 撐 44px 的命中區，不要用 `display:flex`。** flex 會吃掉
   `text-align`，而 footer 的對齊**兩個版型不一樣**（A2 置中、B2 靠左）——
   用 flex 的話這一列會在 A2 裡靠左，夾在置中的店名與置中的版權中間。 */
/* 版權列跟著店家資訊置中（Kelly 2026-09-24）。**A2 本來就是置中的**（`a2.css`），
   靠左的是 B2 與客人端——這裡是把落後的那幾邊對齊已核可的 A2，不是新設計。 */
:is(.tpl-a2,.tpl-b2) .copyright{margin:0;padding-top:16px;border-top:1px solid #e3dfd4;text-align:center;font:400 10.5px/1.8 "Noto Sans TC",sans-serif;letter-spacing:.14em;color:#93918b}
:is(.tpl-a2,.tpl-b2) .site-products-more,.site-return-button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 20px;border:1px solid #d6d1c8;border-radius:12px;background:white;color:#252826;text-decoration:none;font:400 15px/1.5 "Noto Sans TC",sans-serif}
.tpl-b2 .site-products-more,.tpl-b2 .site-return-button{border-radius:4px}
.site-products-more svg{width:18px;height:18px}.site-return-nav{padding:8px 24px 24px;display:flex;flex-direction:column;gap:8px}
.site-return-link{display:flex;justify-content:center;align-items:center;min-height:48px;color:#252826;font-size:14px;text-underline-offset:4px}
.site-return-button:focus-visible,.site-products-more:focus-visible,.site-return-link:focus-visible{outline:2px solid #6f6a60;outline-offset:3px}
/* 還沒有照片的圖位（2026-09-19 Kelly：「圖片都用漸層灰來代替，比較不會有突然出現
   別人圖片的感覺」）。**新店家的第一份站台一張照片都沒有**（fixture-blank），
   所以這一格是他看到的第一個畫面，不是邊角狀態。
   ⚠️ **漸層不是裝飾，是在說「這裡會放一張照片」**：純色一塊看起來像版面壞了或區塊空著，
   而斜向漸層讀起來像一張還沒載入的圖。
   ⚠️ 灰階取自這份稿子自己的暖色盤（#eeeae2 的上下階），不是 App 的冷灰 token
   ——客人端的頁底是 #f4f1ea，冷灰放上去會像從別套設計貼過來的。
   ⚠️ **文字留著**：它是給店家看的（「還缺一張照片」），而這一格在客人端根本不該出現
   ——沒有照片就過不了第一層門檻，發佈不出去。 */
:is(.tpl-a2,.tpl-b2) .hero-empty{width:100%;aspect-ratio:4/5;display:grid;place-items:center;color:#8c887f;
  background:linear-gradient(135deg,#efece5 0%,#ddd9d0 48%,#efece5 100%)}
/* hero 的左右換圖鈕（2026-09-13）。**只有 A2 畫得出來**：A2 的 .hero-media 是一個
   position:relative 的 4:5 方框，鈕疊在圖上就位；B2 的 .hero-media 是 display:contents，
   照片軌是雜誌式版面裡的一個 flex item，沒有可以錨的定位框——B2 的點點本來就在淺色
   資訊列裡（不是疊在照片上的小白點），可見度不靠這兩顆鈕。⚠️ 兩套皮的 DOM 一樣，
   差別只是 display:none（契約 §2.5 允許的那一種差異，跟 hero-caption 同一條）。 */
:is(.tpl-a2,.tpl-b2) .hero-nav{display:none}
/* 按住拖曳換圖時不要選到圖、也不要跳出瀏覽器自己的拖曳幽靈圖。 */
:is(.tpl-a2,.tpl-b2) .hero-img{user-select:none;-webkit-user-drag:none}
/* 有 hover 的細指標＝滑鼠（桌機）。觸控裝置不顯示，手機維持純滑動。 */
@media(hover:hover) and (pointer:fine){
  .tpl-a2 .hero-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:999px;background:#1a1c1a57;cursor:pointer}
  .tpl-a2 .hero-nav:hover{background:#1a1c1a94}
  .tpl-a2 .hero-nav.prev{left:12px}
  .tpl-a2 .hero-nav.next{right:12px}
  /* 箭頭用共用的 CHEVRON（render.mjs），路徑在 24 格裡幾何置中（Kelly 2026-10-07：原本旋轉邊框＋負 margin 的箭頭偏離圓心）。 */
  .tpl-a2 .hero-nav{color:#faf9f6}
  .tpl-a2 .hero-nav.next svg{transform:scaleX(-1)}
  .tpl-a2 .hero-nav:focus-visible{outline:2px solid #faf9f6;outline-offset:2px}
}
@media(min-width:768px){
  .tpl-a2 .hero-media,.tpl-b2 .hero-img,:is(.tpl-a2,.tpl-b2) .hero-empty{aspect-ratio:4/3}
  .tpl-b2 .hero-img{height:auto;object-fit:cover;object-position:center}
  :is(.tpl-a2,.tpl-b2) .sec-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
  :is(.tpl-a2,.tpl-b2) .sec-products>.sec-head,:is(.tpl-a2,.tpl-b2) .sec-products>.site-products-more{grid-column:1/-1}
  :is(.tpl-a2,.tpl-b2) .sec-products>.product-card{min-width:0;width:100%;margin-bottom:0}
  .tpl-b2.product-list .list-body>.site-return-button{margin-top:32px}
}


/* Merchant shopping information: footer links and shared reading dialog. */
.shopping-info-links{display:flex;justify-content:center;gap:12px 24px;flex-wrap:wrap}
.shopping-info-links button{font:13px/1.6 "PingFang TC",sans-serif;color:#6f6a60;background:none;border:0;padding:0;min-height:44px;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.shopping-info-dialog{box-sizing:border-box;width:calc(100% - 32px);max-width:520px;max-height:80dvh;margin:auto;border:1px solid #e6e3dc;padding:0;border-radius:20px;background:#fff;color:#1a1c1a;text-align:left;overflow:auto;box-shadow:0 16px 60px #0002}
.shopping-info-dialog::backdrop{background:#1a1c1a70}
.shopping-info-head{position:sticky;top:0;display:flex;align-items:center;gap:16px;background:#fff;padding:16px 20px;border-bottom:1px solid #e6e3dc}
.shopping-info-head h2{flex:1;margin:0;font:500 21px/1.5 "Noto Serif TC","Songti TC",serif}
.shopping-info-head button{min-width:44px;min-height:44px;border:0;background:none;color:#1a1c1a;font:28px/1 sans-serif;cursor:pointer}
.shopping-info-text{padding:24px;font:14px/1.9 "Noto Sans TC","PingFang TC",sans-serif;overflow-wrap:anywhere}
.shopping-info-footer :focus-visible{outline:2px solid #2477e8;outline-offset:3px}

/* Peer footer links: member, shopping, returns, privacy and terms. */
.site-footer .shopping-info-links{display:flex;justify-content:center;align-items:center;gap:0 24px;flex-wrap:wrap;margin:0 auto}
.site-footer .shopping-info-links>a,.site-footer .shopping-info-links>button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin:0;padding:0;border:0;background:none;color:#6f6a60;font:400 13px/1.6 "PingFang TC",sans-serif;letter-spacing:0;text-decoration:none;white-space:nowrap;cursor:pointer}
.site-footer .shopping-info-links>a:hover,.site-footer .shopping-info-links>button:hover{text-decoration:underline;text-underline-offset:4px;color:#1a1c1a}
@media(max-width:480px){.site-footer .shopping-info-links{max-width:260px}}

/* All customer pages share the same footer and link hierarchy. */
:is(.tpl-a2,.tpl-b2) .site-footer .shopping-info-links>a,:is(.tpl-a2,.tpl-b2) .site-footer .shopping-info-links>button{display:inline-flex;align-items:center;justify-content:center;margin:0;min-height:44px;font:400 13px/1.6 "PingFang TC",sans-serif;letter-spacing:0;color:#6f6a60;text-decoration:none}
:is(.tpl-a2,.tpl-b2,.ps-buy) .site-footer .shopping-info-links>a:hover,:is(.tpl-a2,.tpl-b2,.ps-buy) .site-footer .shopping-info-links>button:hover{color:#1a1c1a;text-decoration:underline;text-underline-offset:4px}

/* P2 overview: two columns at every width; status palette D from the design handoff. */
.product-list:is(.tpl-a2,.tpl-b2) .list-body{display:flex;flex-direction:column}
.product-list.tpl-a2{background:#faf9f6}
.product-list.tpl-a2 .list-body{gap:14px;padding:18px 16px 26px}
.product-list.tpl-b2{background:#fff}
.product-list.tpl-b2 .list-body{gap:0;padding:14px 20px 30px}
.product-list:is(.tpl-a2,.tpl-b2) .sec-head{margin:0}
.product-list.tpl-a2 .sec-title{font:400 26px/1.35 "Noto Sans TC","PingFang TC",sans-serif}
.product-list.tpl-b2 .sec-title{margin-top:10px;font:400 30px/1.3 "Noto Sans TC","PingFang TC",sans-serif}
.product-list:is(.tpl-a2,.tpl-b2) .list-nav{position:sticky;top:0;z-index:5;gap:8px;padding:0 16px 0 8px;min-height:54px;background:#fff}
/* 店名跟首頁 header 同字型字級（Kelly 2026-09-25；10-07 補上 B2 宋體——之前寫成黑體）：A2 黑體 17、B2 宋體 18。 */
.product-list.tpl-a2 .list-nav .brand{font:400 17px/1.3 "Noto Sans TC",sans-serif;letter-spacing:.02em}
.product-list.tpl-b2 .list-nav .brand{font:400 18px/1.3 "Noto Serif TC",serif;letter-spacing:.06em}
.product-list:is(.tpl-a2,.tpl-b2) .list-back{display:grid;place-items:center;min-width:44px;min-height:44px}
.product-list:is(.tpl-a2,.tpl-b2) .list-body>.sec-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:14px 12px;padding:0;margin:0}
.product-list.tpl-b2 .list-body>.sec-products{gap:26px 16px;margin-top:22px}
.product-list:is(.tpl-a2,.tpl-b2) .product-card{display:flex;flex-direction:column;min-width:0;gap:0;margin:0;padding:0;box-shadow:none}
.product-list:is(.tpl-a2,.tpl-b2) .product-card[hidden]{display:none}
.product-list.tpl-a2 .product-card{background:#fff;border:1px solid #e3dfd4;border-radius:14px;overflow:hidden}
.product-list.tpl-b2 .product-card{background:none;border:0;border-radius:0}
.product-list:is(.tpl-a2,.tpl-b2) .catalog-photo{position:relative;aspect-ratio:5/4;flex-shrink:0;overflow:hidden;background:#efebe1}
.product-list.tpl-b2 .catalog-photo{border-radius:3px;background:#f1efea}
.product-list:is(.tpl-a2,.tpl-b2) .catalog-photo .product-photo{display:block;width:100%;height:auto;aspect-ratio:5/4;object-fit:contain;background:#fff;border-radius:0;opacity:1}
/* 商品標籤：首頁、/p、商品單頁同一個樣子，壓在照片左上角（Kelly 2026-09-25）。
   宿主要 position:relative（.catalog-photo、首頁 .product-card、買頁 .product-gallery）。 */
.catalog-tag{position:absolute;left:8px;top:8px;z-index:1;display:inline-flex;align-items:center;box-sizing:border-box;max-width:calc(100% - 16px);height:25px;padding:0 10px;border-radius:6px;background:#fff;border:1px solid #d8dccb;color:#4f5a43;font:500 12px/1 "Noto Sans TC",sans-serif;letter-spacing:.02em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.catalog-tag.stock{border-color:#a9b393;color:#3f4a34}
.catalog-tag.soldout{border-color:#e1e2dc;color:#5f6259}
/* 首頁卡片：照片大，離邊 12；沒有照片時回到文字流（A2 放進照片那一格、B2 排在名稱前）。 */
:is(.tpl-a2,.tpl-b2) .sec-products>.product-card>.catalog-tag{left:12px;top:12px;max-width:calc(100% - 24px)}
.tpl-a2 .sec-products>.product-card:not(:has(.product-photo))>.catalog-tag{position:static;grid-area:photo;justify-self:start;margin:20px 0 0 20px}
.tpl-b2 .sec-products>.product-card:not(:has(.product-photo))>.catalog-tag{position:static;align-self:flex-start}
.product-list .catalog-veil{position:absolute;inset:0;background:rgba(250,249,246,.62)}
.product-list.tpl-b2 .catalog-veil{background:rgba(255,255,255,.6)}
.product-list:is(.tpl-a2,.tpl-b2) .catalog-body{display:flex;flex:1;flex-direction:column;gap:5px;min-width:0;padding:11px 11px 13px}
.product-list.tpl-b2 .catalog-body{gap:9px;padding:9px 0 0}
.product-list:is(.tpl-a2,.tpl-b2) .catalog-body .product-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;margin:0;padding:0;font:500 15.5px/1.4 "Noto Sans TC","PingFang TC",sans-serif;letter-spacing:-.01em}
.product-list.tpl-b2 .catalog-body .product-name{font-size:17px;line-height:1.35}
/* 時間：時鐘圖示＋字，排在名稱與描述中間（Kelly 2026-10-11，同首頁卡片）。 */
.product-list:is(.tpl-a2,.tpl-b2) .catalog-body .product-duration{display:flex;align-items:flex-start;gap:4px;margin:0;padding:0;font:400 11.5px/1.5 "Noto Sans TC",sans-serif;color:#6f6a60;overflow-wrap:anywhere}
.product-list:is(.tpl-a2,.tpl-b2) .catalog-body .product-duration svg{flex:0 0 auto;width:12px;height:12px;margin-top:2.5px}
/* `/p` 卡片的剩餘數量（Kelly 2026-10-11）：價格底下一行，字級顏色跟卡片上的時間（.product-duration）同一組；
   字樣與單頁、購物車同一句「剩餘 N 件」。有規格時是全部規格加總（理由在 render.mjs `stockLeftOf`）。 */
.product-list:is(.tpl-a2,.tpl-b2) .catalog-body .product-stock{margin:0;padding:0;font:400 11.5px/1.5 "Noto Sans TC",sans-serif;color:#6f6a60}
/* 價格字重跟商品單頁 `.ps-buy .product-price` 同為 600（Kelly 2026-10-07）。 */
.product-list:is(.tpl-a2,.tpl-b2) .catalog-body .product-price{margin:0;padding:0;font:600 15px/1.2 "Noto Sans TC","PingFang TC",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-list:is(.tpl-a2,.tpl-b2) .catalog-body .product-cta{display:flex;align-items:center;justify-content:center;align-self:stretch;gap:5px;margin:6px 0 0;padding:0 4px;min-height:34px;border:1px solid #1a1c1a;border-radius:10px;font:500 12.5px/1.4 "Noto Sans TC",sans-serif;letter-spacing:.02em;color:#1a1c1a;overflow-wrap:anywhere;text-align:center}
.product-list:is(.tpl-a2,.tpl-b2) .catalog-body .product-cta::after{content:none}
.product-list.tpl-b2 .catalog-body .product-cta{min-height:36px;border-radius:999px;margin-top:5px}

.product-list:is(.tpl-a2,.tpl-b2) .catalog-body .product-cta.is-disabled{color:#8a857a;border-color:#e3dfd4;background:none}
.product-list:is(.tpl-a2,.tpl-b2) .is-soldout .product-name,.product-list:is(.tpl-a2,.tpl-b2) .is-soldout .product-price{color:#6f6a60}
.product-list:is(.tpl-a2,.tpl-b2) .product-filters{display:flex;gap:8px;overflow-x:auto;padding:0}
/* 出血要跟 .list-body 的 16 一樣：a2.css 的首頁版是 -20／20，這裡只蓋 padding 的話第一顆會被推出畫面 4px（Kelly 2026-09-25）。 */
.product-list.tpl-a2 .product-filters{margin:0 -16px;padding:2px 16px}
.product-list.tpl-a2 .product-filter{min-height:34px;padding:0 13px;border-radius:999px;font-size:13px}
.product-list.tpl-b2 .product-filters{gap:18px;margin-top:20px;padding-bottom:11px;border-bottom:1px solid #1a1c1a}
.product-list.tpl-b2 .product-filter{min-height:34px;padding:0;border:0;border-radius:0;background:none;color:#6f6a60;font-size:13px}
.product-list.tpl-b2 .product-filter.on{color:#1a1c1a;background:none;font-weight:500}
.product-list.tpl-b2 .list-body>.site-return-button{margin-top:30px}

/* Compact mobile cards (photo 5:4 = the product crop, Kelly 2026-09-25); desktop keeps 3:2 photos and descriptions. */
.product-list:is(.tpl-a2,.tpl-b2) .catalog-body .product-desc{display:none}
@media(min-width:768px){
  .product-list:is(.tpl-a2,.tpl-b2) .list-body>.sec-products{gap:24px}
  .product-list:is(.tpl-a2,.tpl-b2) .catalog-photo,
  .product-list:is(.tpl-a2,.tpl-b2) .catalog-photo .product-photo{aspect-ratio:3/2}
  .product-list.tpl-a2 .catalog-body{padding:20px;gap:12px}
  .product-list.tpl-b2 .catalog-body{padding:14px 0 0;gap:14px}
  /* 剩餘數量貼著價格：桌機欄距 12／14 會讓它像獨立一列，往上收 8 */
  .product-list:is(.tpl-a2,.tpl-b2) .catalog-body .product-stock{margin-top:-8px}
  .product-list:is(.tpl-a2,.tpl-b2) .catalog-body .product-name{font-size:20px;font-weight:400}
  .product-list.tpl-b2 .catalog-body .product-name{font-size:25px}
  .product-list:is(.tpl-a2,.tpl-b2) .catalog-body .product-desc{display:block;margin:0;padding:0;color:#6f6a60;font-size:14px;line-height:1.85}
  .product-list:is(.tpl-a2,.tpl-b2) .catalog-body .product-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .product-list.tpl-a2 .catalog-body .product-desc{line-height:1.75}
  .product-list:is(.tpl-a2,.tpl-b2) .catalog-body .product-duration{font-size:14px;gap:6px}
  .product-list:is(.tpl-a2,.tpl-b2) .catalog-body .product-duration svg{width:15px;height:15px;margin-top:3.5px}
  .product-list:is(.tpl-a2,.tpl-b2) .catalog-body .product-price{font-size:18px}
  .product-list.tpl-b2 .catalog-body .product-price{font-size:21px}
  .product-list:is(.tpl-a2,.tpl-b2) .catalog-body .product-cta{min-height:48px;font-size:14px}
}

/* Shared product navigation: cart remains available when empty. */
.list-nav .brand{flex:1;min-width:0}
.list-nav .header-cart{position:relative;display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;color:#262521;text-decoration:none}
.header-cart svg{width:25px;height:25px}
.list-nav .header-member{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;margin-right:-6px;color:#262521;text-decoration:none}
.header-member svg{width:23px;height:23px}
.header-cart .cart-count{position:absolute;right:0;top:0;display:grid;place-items:center;box-sizing:border-box;min-width:18px;height:18px;padding:0 4px;border-radius:20px;background:#292722;color:#fff;text-align:center;letter-spacing:0;font:600 11px/1 sans-serif}
.header-cart .cart-count[hidden]{display:none}

/* Latest news: supplied design, shared by A2/B2; one 44px line below the header. */
:is(.tpl-a2,.tpl-b2,.ps-buy) .news-bar{box-sizing:border-box;width:100%;height:44px;padding:0 20px;display:flex;align-items:center;gap:10px;cursor:pointer;border:0;border-bottom:1px solid #e3dfd4;border-radius:0;background:#f4f1ea;color:#1a1c1a;text-align:left;font-family:"Noto Sans TC",sans-serif}
:is(.tpl-a2,.tpl-b2,.ps-buy) .news-bar>svg{width:18px;height:18px;flex-shrink:0}
:is(.tpl-a2,.tpl-b2) .news-bar>svg.news-arrow{width:16px;height:16px;opacity:.45}
/* Static variant (site-closed notice on member/order pages): same look, no dialog. */
.news-bar.news-bar-static{margin:0;cursor:default}
:is(.tpl-a2,.tpl-b2) .news-window{flex:1;min-width:0;height:44px;overflow:hidden}
:is(.tpl-a2,.tpl-b2) .news-track{display:block;transition:transform .5s cubic-bezier(.4,0,.2,1)}
:is(.tpl-a2,.tpl-b2,.ps-buy) .news-line{display:block;font-size:14px;line-height:44px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400;letter-spacing:normal}
:is(.tpl-a2,.tpl-b2) .news-dialog{box-sizing:border-box;position:fixed;inset:0;z-index:100;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:104px 24px 24px;border:0;background:transparent;overflow-y:auto;color:#1a1c1a;font-family:"Noto Sans TC",sans-serif}
:is(.tpl-a2,.tpl-b2) .news-dialog[open]{display:flex;align-items:flex-start;justify-content:center}
:is(.tpl-a2,.tpl-b2) .news-dialog::backdrop{background:rgba(26,28,26,.42)}
:is(.tpl-a2,.tpl-b2) .news-card{box-sizing:border-box;position:relative;width:100%;max-width:382px;max-height:78vh;overflow-y:auto;overscroll-behavior:contain;background:#faf9f6;border-radius:16px;padding:28px 24px 24px;box-shadow:0 16px 48px rgba(26,28,26,.2)}
:is(.tpl-a2,.tpl-b2) .news-close{position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;border-radius:0;background:transparent;color:inherit;font:400 18px/44px sans-serif;cursor:pointer;padding:0}
:is(.tpl-a2,.tpl-b2) .news-article{padding-right:32px;overflow-wrap:anywhere}
:is(.tpl-a2,.tpl-b2) .news-article[hidden]{display:none}
:is(.tpl-a2,.tpl-b2) .news-article time{display:block;font-size:12px;letter-spacing:.08em;color:#6b6d68;line-height:1.5}
:is(.tpl-a2,.tpl-b2) .news-article h2{margin:12px 0;font:700 19px/1.5 "Noto Sans TC",sans-serif;text-wrap:pretty;letter-spacing:normal}
:is(.tpl-a2,.tpl-b2) .news-body{font-size:15px;line-height:1.85;color:#3a3c39;text-wrap:pretty}
:is(.tpl-a2,.tpl-b2) .news-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #e3dfd4;margin-top:24px;padding-top:16px}
:is(.tpl-a2,.tpl-b2) .news-nav button{min-height:44px;padding:0;border:0;background:transparent;color:inherit;font:400 14px/1.5 "Noto Sans TC",sans-serif;cursor:pointer}
:is(.tpl-a2,.tpl-b2) .news-nav span{font-size:13px;color:#6b6d68;white-space:nowrap}
:is(.tpl-a2,.tpl-b2) .news-bar:focus-visible,:is(.tpl-a2,.tpl-b2) .news-dialog button:focus-visible{outline:2px solid currentColor;outline-offset:-2px}
@media(prefers-reduced-motion:reduce){:is(.tpl-a2,.tpl-b2) .news-track{transition:none}}

/* Initial dialog focus belongs to the reading container, not the close control. */
:is(.tpl-a2,.tpl-b2) .news-card:focus{outline:none}

/* 商品總覽 `/p` 全部黑體、字重整體降一階（標題／店名／價格 400、商品名 500；Kelly 2026-10-06「優雅一點」）：字型寫在上面各條 `.product-list` 規則，頁尾見下一段。 */
/* 買頁＋商品總覽＋首頁的頁尾：靠左、緊湊、黑體小字（Kelly 2026-10-06 給的參考圖；2026-10-07 首頁也改成跟商品總覽一樣）。商品單頁與購物車不輸出頁尾。
   店名 → 電話等 → 一列連結 → 版權，不畫分隔線。`.tpl-a2/.tpl-b2` 同時涵蓋首頁與商品總覽（`/p` 的 body 也帶版型 class），兩頁吃同一組規則。
   ⚠️ 連結視覺是小字，但每顆仍保留 44 高的點擊範圍（列高靠 min-height，不靠字級）。 */
:is(.ps-buy,.tpl-a2,.tpl-b2) .site-footer{display:flex;flex-direction:column;padding:28px 24px 32px;gap:0;text-align:left}
.ps-buy .site-footer{background:white}  /* 不畫上框線：底下就是 sticky 動作條的線，兩條疊在一起太多（Kelly 2026-10-07） */
:is(.ps-buy,.tpl-a2,.tpl-b2) .store-profile{text-align:left;display:flex;flex-direction:column;gap:2px}
:is(.ps-buy,.tpl-a2,.tpl-b2) .store-profile-name{margin:0 0 4px;font:500 16px/1.5 "Noto Sans TC","PingFang TC",sans-serif;letter-spacing:.02em;color:#1a1c1a}
:is(.ps-buy,.tpl-a2,.tpl-b2) .store-profile p{margin:0;font:400 12px/1.6 "Noto Sans TC","PingFang TC",sans-serif;letter-spacing:.02em;color:#6f6a60;overflow-wrap:anywhere}
:is(.ps-buy,.tpl-a2,.tpl-b2) .site-footer .shopping-info-links{justify-content:flex-start;gap:0 18px;max-width:none;margin:6px 0 0}
:is(.ps-buy,.tpl-a2,.tpl-b2) .site-footer :is(.shopping-info-links>a,.shopping-info-links>button){display:inline-flex;align-items:center;margin:0;min-height:44px;text-align:left;color:#4a463f;font:400 12px/1.6 "Noto Sans TC","PingFang TC",sans-serif;letter-spacing:.02em;text-decoration:none}
:is(.ps-buy,.tpl-a2,.tpl-b2) .copyright{margin:0;padding-top:4px;border-top:0;text-align:left;font:400 11px/1.7 "Noto Sans TC","PingFang TC",sans-serif;letter-spacing:.02em;color:#93918b}
:is(.ps-buy,.tpl-a2,.tpl-b2) .shopping-info-head h2{font-family:"Noto Sans TC","PingFang TC",sans-serif}
/* 首頁商品卡的品名與價格改黑體（Kelly 2026-10-06，跟商品總覽／商品頁一致）。區塊標題等其他首頁字仍跟版型走。 */
:is(.tpl-a2,.tpl-b2) .product-card :is(.product-name,.product-price){font-family:"Noto Sans TC","PingFang TC",sans-serif}
/* 買頁與購物車的頂列（`storeNav`）：返回 ＋ 店名 ＋ 會員 ＋ 購物車，跟 `/p` 同一條（Kelly 2026-09-25；購物車 10-08）。
   ⚠️ 住在 site.css 而不是 buy.css：購物車頁只載 cart.css＋site.css，三頁都載的是這一份。幾何照 a2.css 的 `.list-nav`；
   店名預設黑體 500（A2 首頁 header 那一組）；B2 由 body 的 `.brand-serif` 換宋體（下方）。
   ⚠️ 買頁其他部分仍不分版型——那個 class 只管店名。
   ⚠️ 視覺 22、命中區 44：把 44 寫成視覺會把整條列撐高。 */
.ps-buy .list-nav, .customer-cart .list-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 54px;
  padding: 0 16px 0 8px;
  background: #fff;
  border-bottom: 1px solid #e3dfd4;
}
.ps-buy .list-back, .customer-cart .list-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  color: #1a1c1a;
}
.ps-buy .list-nav .brand, .customer-cart .list-nav .brand {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 500 17px/1.3 "Noto Sans TC", sans-serif;
  letter-spacing: .02em;
}
/* 雜誌型（B2）：店名跟首頁 header、`/p` 同一組——宋體 400、18（Kelly 2026-10-07）。 */
.ps-buy.brand-serif .list-nav .brand, .customer-cart.brand-serif .list-nav .brand { font: 400 18px/1.3 "Noto Serif TC", serif; letter-spacing: .06em; }
/* 從綠界按上一頁回來、正要導回訂單頁的那一下：蓋住頁面、只留轉圈（`ECPAY_RETURN_GUARD`，Kelly 2026-10-09）。
   ⚠️ 中性墨黑，不放 PocketSite 品牌動畫：客人看的是店家的網站。 */
html.ps-leaving body{visibility:hidden}
html.ps-leaving::after{content:"";position:fixed;inset:0;margin:auto;width:28px;height:28px;border:2.5px solid #e3dfd4;border-top-color:#1a1c1a;border-radius:50%;animation:ps-leaving-spin .8s linear infinite}
@keyframes ps-leaving-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){html.ps-leaving::after{animation-duration:2.4s}}