/* =========================================================================
   wr.css — 商店模組（楓庵 YUAN·AN ONSEN 佈景 / demo_D 階段 6）
   設計稿：參考資料/demo_D/design/YuanAn Shop.dc.html
   載入條件：theme.tpl 的 <{if $xoops_dirname == 'wr'}>

   ⚠ 前綴一律 `.ya-wr-`，刻意避開 news 的 .ya-nw-／.ya-art-、cadch 的 .ya-cd-、
     liaise 的 .ya-lia-，也避開 c_c 遺留的 `.wr-`（那是舊佈景的，兩者不可混用）。
   ⚠ 本檔載入在 style.css 之後，(0,1,0) 的規則蓋得過全站基底。

   🔴 階段 6A 涵蓋 wr_index.html 的**兩個設計稿畫板**：
        商品首頁  `isIndexA`（:197-337，畫板名「商品首頁」）
        分類列表  `isCategory`（:408-510）
      ⚠ 設計稿還有一個 `isIndexB`「首頁 B・參考」——**那是參考稿，不是要做的版型**。
        （2026-09-03 第一版誤照它做，已整支改掉。）
      商品內頁、購物車、訂單查詢分別是 6B／6C 的範圍，屆時往下加節。

   🔴 使用者裁示：商品首頁的**四個區段不做**（滿版形象帶、置中引言、限時專案大卡、
      熱銷排行）—— 模組沒有任何對應資料，做了只能是寫死的假資料。
   ========================================================================= */

/* ── 0. 本模組的區域變數 ─────────────────────────────────────────────
   （寫法比照 news.css 檔頭那組 `--ya-nw-*`：只在本模組用到的微調不進全站 palette）

   🔴 `--ya-wr-soft` 存在的理由（2026-09-04 使用者回報「有舊佈景殘留的藍色背景」）：
      設計稿商品內頁的柔色區塊是 **#F7FAFB**（`YuanAn Shop.dc.html:662` 的
      「關於這盒入浴劑」整段、:757 的「詢問商品」卡），那是**偏冷的灰藍**。
      設計稿成立是因為它的頁面底色是**純白 #fff**，冷灰壓在純白上幾乎看不出色相。
      但本佈景的內頁底色是 **暖白 `--ya-paper-warm` #FDFCFB**（`style.css:203`），
      冷灰壓在暖白上，色相差被放大 → 看起來就是一塊藍。
      👉 改用**同明度的暖中性色**，維持設計稿要的「比底色深一階」的分層，
         但不帶藍。⚠ 這不是舊佈景殘留，是照抄設計稿字面值造成的，
         別再「順手」改回 var(--ya-paper)。
   🔴 **2026-09-08 更正：上面這條「看不出色偏」的判斷是錯的。**
      原文寫「`.ya-wr-tile:hover`／`.ya-wr-card__media` 等仍用 `--ya-paper`，
      那些是小面積或短暫的 hover 底，看不出色偏」——
      使用者當天就回報分類磚 hover「看起來髒髒的」。
      分類磚的 hover 另外還疊了一層**暖玫瑰** wash，冷底＋暖疊會互相抵銷成濁色，
      所以它不但看得出來，還是全站最明顯的一處。
      → `.ya-wr-tile:hover` 已改成 `--ya-paper-warm`（設計稿本來就是 #FDFCFB，
        見第 4 節該規則上方的說明）。
      → 同日使用者裁示，左區塊分類清單的 `.ya-wr-cat:hover` 與 `.ya-wr-cat.is-on`
        **也一起換成 `--ya-paper-warm`**（見第 9 節該兩條上方的說明）。
      ⬜ **目前仍用 `--ya-paper` 的只剩兩處**：`.ya-wr-card__media`（商品圖底，
        多半被圖蓋住）與 `.ya-wr-card__noimg`（無圖降級才看得到）。
        兩者都不疊暖色、面積也小，暫時保留；要動再說。
   👉 **通則：只要是壓在暖白頁面上、或會疊暖色的底，就不要用 `--ya-paper`。** */
:root {
	--ya-wr-soft: #FBF9F7;   /* 商品內頁柔色區塊（暖中性，取代設計稿的冷色 #F7FAFB） */
}

/* ── 1. 外框 ─────────────────────────────────────────────────────────
   ⚠ 不抵銷 .ya-inner-wrap 的版心（news／cadch 那招 :has() 是因為它們有滿版
     形象帶；wr 列表頁沒有滿版元素，直接用版心即可）。 */
.ya-wr { position: relative; }
.ya-wr-wrap {
	max-width: var(--ya-wrap);
	margin: 0 auto;
	padding: clamp(1.4rem, 3vw, 2.2rem) 0 clamp(3rem, 6vw, 4.4rem);
}

/* ── 2. 麵包屑（只有分類頁有）───────────────────────────────────── */
.ya-wr-crumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 1.4rem;
	font-size: .78rem;
	letter-spacing: .06em;
	color: var(--ya-muted);
}
.ya-wr-crumb a { color: var(--ya-ocean); transition: color var(--ya-t-col) var(--ya-ease); }
.ya-wr-crumb a:hover { color: var(--ya-ac); }
.ya-wr-crumb__sep { color: var(--ya-muted-2); }
.ya-wr-crumb__now { color: var(--ya-ink); }

/* ── 3. 區段抬頭（設計稿 :253-259 / :270-276）────────────────────
   菱形 ＋ 漸層線 ＋ 英中各一行，與 liaise 表單抬頭同一款。
   `--row` 變體是「本月選物」那種左標題右連結的排法。 */
.ya-wr-sec { margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.ya-wr-sec:first-child { margin-top: 0; }
.ya-wr-sechead {
	position: relative;
	padding-top: 1.3rem;
	margin-bottom: 2.2rem;
}
.ya-wr-sechead--row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}
.ya-wr-sechead::before {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 1px;
	background: linear-gradient(90deg, rgba(190,133,116,.6) 0%, rgba(31,78,107,.1) 55%, transparent 100%);
}
.ya-wr-sechead::after {
	content: '';
	position: absolute;
	top: -.24rem; left: 0;
	width: .44rem; height: .44rem;
	background: var(--ya-ac);
	transform: rotate(45deg);
}
.ya-wr-sechead__en {
	display: block;
	margin: 0;
	font-family: var(--ya-en);
	font-style: italic;
	letter-spacing: .28em;
	font-size: .72rem;
	text-transform: uppercase;
	color: var(--ya-ac);
}
.ya-wr-sechead__zh {
	display: block;
	margin: .2rem 0 0;
	font-family: var(--ya-serif);
	font-weight: 400;
	font-size: clamp(1.3rem, 2.2vw, 1.7rem);
	letter-spacing: .1em;
	line-height: 1.5;
	color: var(--ya-ink);
}
/* 分類敘述（2026-09-09 新增）。只有分類頁在用 —— 抬頭改版後，敘述從工具列的
   `.ya-wr-toolbar__desc` 搬過來，並於同日再改成**與分類名同一列、靠右**
   （使用者裁示甲案：連文字本身也右對齊，短敘述時左右兩端才對稱）。

   ⚠ 它一定是 `.ya-wr-sechead--row` 的第二個子元素。`--row` 是
     `align-items:flex-end`，所以敘述會**與中文標題的底線切齊**，不是靠上。
   ⚠ 限寬 38ch：與左半的標題保持間距，不讓長敘述一路頂到標題旁邊。
   ⚠ 內容來自後台分類的「敘述」欄，可能含使用者自己打的換行 → 用 pre-line 保留。
   ⚠ 窄螢幕由 `--row` 的 flex-wrap 換行到第二列，此時右對齊會變得難讀
     → 見第 7 節的行動版覆寫（≤760px 回到整行左對齊）。 */
.ya-wr-sechead__desc {
	display: block;
	max-width: 38ch;
	margin: 0;
	font-size: .9rem;
	line-height: 1.9;
	letter-spacing: .04em;
	text-align: right;
	white-space: pre-line;
	color: var(--ya-body-2);
}
/* 「依分類選購 →」那顆文字連結，hover 時箭頭拉開（設計稿 gap .7→1.1rem）*/
.ya-wr-more {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	font-size: .82rem;
	letter-spacing: .16em;
	color: var(--ya-ocean);
	transition: gap .4s var(--ya-ease), color .4s var(--ya-ease);
}
.ya-wr-more:hover { gap: 1.1rem; color: var(--ya-ac); }

/* ── 4. 分類磚格（設計稿 :260-267）──────────────────────────────
   格線同樣用 `gap:1px` ＋ 容器底色透出來。
   每一磚的 hover 有四件事同時發生：底部水洗漸層升起、頂端玫瑰金線由左展開、
   序號淡入上移、圖示與文字上移、箭頭淡入右移。全部用 CSS 後代選擇器做。 */
.ya-wr-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1px;
	background: rgba(31,78,107,.12);
	border: 1px solid rgba(31,78,107,.12);
}
.ya-wr-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 1.6rem 1.3rem;
	overflow: hidden;
	background: var(--ya-white);
	color: var(--ya-ink);
	transition: transform .55s var(--ya-ease), box-shadow .55s var(--ya-ease),
	            background .45s var(--ya-ease);
}
/* 🔴 hover 底色是 `--ya-paper-warm`（暖白 #FDFCFB），**不是** `--ya-paper`
      （冷灰藍 #F7FAFB）。2026-09-08 使用者回報「看起來髒髒的」，實查是移植時
      拿錯 token —— 設計稿寫的就是暖白（`YuanAn Shop.dc.html:2000`：
      `tileBg: s.tileHover === i ? '#FDFCFB' : '#fff'`）。

      為什麼冷灰會「髒」：底下 `.ya-wr-tile__wash` 同時升起一層**暖玫瑰**
      （`rgba(230,192,178,.16)`）。暖色疊在冷灰上互相抵銷 →
      磚底 #F7FAFB + 玫瑰 16% ＝ **#F4F1EF**，一塊發灰的濁色；
      換成暖白後 #FDFCFB + 玫瑰 16% ＝ **#F9F2EF**，乾淨的暖膚色。
      ⚠ 檔頭那段註解原本寫「`.ya-wr-tile:hover` 是短暫的 hover 底，看不出色偏」，
        **那個判斷是錯的**，已一併更正。 */
.ya-wr-tile:hover {
	transform: translateY(-.35rem);
	box-shadow: 0 22px 40px -26px rgba(18,48,63,.5);
	background: var(--ya-paper-warm);
	z-index: 2;
}
.ya-wr-tile__wash {
	position: absolute;
	left: 0; bottom: 0;
	width: 100%; height: 100%;
	background: linear-gradient(180deg, rgba(247,250,251,0) 30%, rgba(230,192,178,.16) 100%);
	transform-origin: bottom;
	transform: scaleY(0);
	transition: transform .6s var(--ya-ease);
	pointer-events: none;
}
.ya-wr-tile:hover .ya-wr-tile__wash { transform: scaleY(1); }
.ya-wr-tile__rule {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 1px;
	background: var(--ya-ac);
	transform-origin: left;
	transform: scaleX(0);
	transition: transform .6s var(--ya-ease);
}
.ya-wr-tile:hover .ya-wr-tile__rule { transform: scaleX(1); }
.ya-wr-tile__no {
	position: absolute;
	top: 1.1rem; right: 1.1rem;
	font-family: var(--ya-en);
	font-style: italic;
	font-size: .72rem;
	letter-spacing: .14em;
	color: var(--ya-ac);
	opacity: 0;
	transform: translateY(.3rem);
	transition: opacity .5s var(--ya-ease), transform .55s var(--ya-ease);
}
.ya-wr-tile:hover .ya-wr-tile__no { opacity: 1; transform: none; }
.ya-wr-tile__ico {
	position: relative;
	font-size: 1.3rem;
	line-height: 1;
	color: var(--ya-ac);
	transition: transform .55s var(--ya-ease);
}
.ya-wr-tile:hover .ya-wr-tile__ico { transform: translateY(-.2rem); }
.ya-wr-tile__label {
	position: relative;
	margin-top: .3rem;
	font-family: var(--ya-serif);
	font-size: 1rem;
	letter-spacing: .08em;
	color: var(--ya-ink);
	transition: transform .5s var(--ya-ease), color .4s var(--ya-ease);
}
.ya-wr-tile:hover .ya-wr-tile__label { transform: translateY(-.15rem); color: var(--ya-ac); }
.ya-wr-tile__en {
	position: relative;
	font-family: var(--ya-en);
	font-style: italic;
	font-size: .72rem;
	letter-spacing: .16em;
	color: var(--ya-muted);
	transition: transform .55s var(--ya-ease);
}
.ya-wr-tile:hover .ya-wr-tile__en { transform: translateY(-.1rem); }
.ya-wr-tile__foot {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: .74rem;
	letter-spacing: .1em;
	color: #b6c1cb;
}
.ya-wr-tile__arrow {
	font-size: .7rem;
	color: var(--ya-ac);
	opacity: 0;
	transform: translateX(-.3rem);
	transition: opacity .45s var(--ya-ease), transform .55s var(--ya-ease);
}
.ya-wr-tile:hover .ya-wr-tile__arrow { opacity: 1; transform: none; }

/* ── 4A. 分類磚的原地編輯（只有「管理分類」權 `$wr_checkperm` 看得到）───
   2026-09-04 新增。做法比照 cadch 的 `.ya-cd-edit`（css/cadch.css:122）。

   🔴 為什麼要多包一層 `.ya-wr-tilebox`：`.ya-wr-tile` 本身就是 `<a>`，
      編輯鈕塞進去會變**巢狀 `<a>`** —— 無效 HTML，瀏覽器會自己把內層拆出去
      （2026-09-04 才在 news 列表頁修掉同一個 bug）。
   ⚠ 這層只在有權限時才輸出，**訪客端的 DOM 與加功能前完全一樣**，
     所以第 4 節那些 `.ya-wr-tiles > .ya-wr-tile` 的排版不受影響。
   ⚠ 磚 hover 時會 `translateY(-.35rem)` 往上浮，磚與編輯列之間會露出
     .35rem 的縫 —— 外框底色同樣是白的，所以看不出來，不必另外補償。 */
.ya-wr-tilebox {
	display: flex;
	flex-direction: column;
	background: var(--ya-white);
}
.ya-wr-tilebox > .ya-wr-tile { flex: 1 1 auto; }

.ya-wr-tile__edit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	padding: .5rem .7rem;
	border-top: 1px dashed var(--ya-line);
	background: var(--ya-white);
	font-size: .74rem;
	letter-spacing: .1em;
	color: var(--ya-ocean);
	transition: background var(--ya-t-col), color var(--ya-t-col), gap .4s var(--ya-ease);
}
.ya-wr-tile__edit i { font-size: .78rem; line-height: 1; }
.ya-wr-tile__edit:hover {
	background: var(--ya-ac);
	border-top-color: var(--ya-ac);
	color: var(--ya-white);
	gap: .7rem;
}

/* 「＋ 新增分類」虛線磚：與一般磚同寬同高，但用虛線框與淡底區隔。
   ⚠ 它仍是 `.ya-wr-tile`，所以 hover 的位移與陰影自動沿用第 4 節；
     只把「不該有的」蓋掉（序號、水洗漸層、頂線都不會輸出，不必處理）。 */
.ya-wr-tile--add {
	align-items: center;
	justify-content: center;
	gap: .35rem;
	border: 1px dashed var(--ya-line);
	background: var(--ya-paper-warm);
	color: var(--ya-ocean);
	text-align: center;
}
.ya-wr-tile--add .ya-wr-tile__ico { font-size: 1.5rem; }
.ya-wr-tile--add .ya-wr-tile__label { margin-top: 0; }
.ya-wr-tile--add:hover {
	border-color: var(--ya-ac);
	background: var(--ya-white);
}

/* ── 4B.（已移除）分類列表頁的矮形象帶 ─────────────────────────────
   🔴 2026-09-09 使用者裁示：分類頁上方的深色矮形象帶整組移除，
      改用與商品首頁完全相同的第 3 節 `.ya-wr-sechead`（字級也一樣，不放大）。

   原本這裡有 9 條 `.ya-wr-band*` 規則：滿版矮帶（clamp(200px,26vh,280px)）、
   鋪滿的分類圖、深藍遮罩，以及白字的英文名／中文名／麵包屑三行。

   搬家後的去處：
     · 英文分類名 → `.ya-wr-sechead__en`（第 3 節，現成）
     · 中文分類名 → `.ya-wr-sechead__zh`（第 3 節，現成；仍是本頁唯一的原生 h1）
     · 分類敘述　 → `.ya-wr-sechead__desc`（第 3 節，2026-09-09 新增）
     · 麵包屑　　 → `.ya-wr-crumb`（**第 8-1 節**，與商品內頁共用的淺色款）

   ⚠ 分類圖（`uploads/wr/<cid>/<picture>`）在整個佈景已無任何選擇器與樣板在用。
   ⚠ 第 7 節響應式原本就沒有 band 的規則，不必連動。
   ♻ 原始碼在 `css/wr.css.cathead.bak`。 */

/* ── 4C.（已移除）分類列表的兩欄骨架 ＋ 左側篩選欄 ────────────────
   🔴 2026-09-04 使用者裁示：佈景自己的左側欄整組移除。
      原本這裡有 `.ya-wr-shell`（兩欄 grid）與 `.ya-wr-side*` 共 12 個 class
      （商品分類／價格區間／商品類型三組篩選）。

   改成：分類清單走 XOOPS 的 `canvas_left` 版位 ＋ wr 模組的「商品分類」區塊，
   欄寬由 style.css 的 `.ya-zones.has-left`（260px | 1fr）決定，
   區塊外觀見**本檔第 9 節**。分類頁本身因此變成單欄滿版。

   ♻ 這一節的原始碼完整保留在 `css/wr.css.side.bak`（含價格區間的核取方塊樣式），
     日後要恢復篩選欄時直接抄回來即可。
   ⚠ 響應式（第 7 節）裡對應的兩行也一併移除了。 */

/* ── 4C-2. 路徑列：麵包屑（左）＋ 件數（右）──────────────────────
   2026-09-09 新增。件數原本在下面的工具列裡，使用者裁示搬到路徑列右端。

   🔴 靠右用 `margin-left:auto`，**不是** `justify-content:space-between` ——
      麵包屑那半邊是有條件輸出的（`$breadcrumb` 不是陣列就整個不印），
      space-between 在只剩一個子元素時會把件數推到左邊。auto 邊距沒這問題。
   ⚠ `.ya-wr-crumb` 自己帶 `margin-bottom`（第 8-1 節，商品內頁也在吃那條規則）——
      **不要去改它**，改成在本列裡歸零，邊距由本列負責，商品內頁才不會被波及。 */
.ya-wr-crumbrow {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .6rem 1.5rem;
	margin-bottom: clamp(1.2rem, 2.5vw, 1.8rem);
}
.ya-wr-crumbrow > .ya-wr-crumb { margin-bottom: 0; }
/* 與麵包屑同字級同色，兩端才對得齊（工具列時代是 .82rem，那是另一條規則的字級）*/
.ya-wr-crumbrow__count {
	margin-left: auto;
	font-size: .78rem;
	letter-spacing: .1em;
	white-space: nowrap;
	color: var(--ya-muted);
}

/* ── 4D. 主欄工具列（設計稿 :465-467）─────────────────────────────
   ⚠ 設計稿右側是四種排序，但 index.php **沒有排序參數**（固定 weight DESC），
     做了會是點不動的假按鈕，故不做。
   ⬜ 2026-09-09：這條工具列**只剩「＋ 新增商品」一顆權限鈕**，
      原有的兩個內容都搬走了 —— 分類敘述 → 第 3 節 `.ya-wr-sechead__desc`、
      件數 → 上面的 `.ya-wr-crumbrow__count`（連同 `.ya-wr-toolbar__count` 一起移除）。
   🔴 **底線與 padding-bottom 同時移除**（使用者裁示）——
      只拿掉 border 會留下 1.1rem 的空隙，看起來像沒對齊。
   ⚠ 樣板端已把整條工具列包進 `<{if $sid_add_checkperm}>`，訪客不會拿到空 div。 */
.ya-wr-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-bottom: 2rem;
	font-size: .82rem;
	letter-spacing: .1em;
	color: var(--ya-muted);
}

/* 「＋ 新增商品」（只有 wr_perm itemid 6 的人看得到，2026-09-08 新增）。
   視覺語言沿用第 4A 節的 .ya-wr-tile__edit：虛線框、ocean 字、hover 反白成主色。

   🔴 靠右是靠 margin-left:auto，不是改 .ya-wr-toolbar 的 justify-content ——
      工具列本身是 space-between，沒權限時只有「件數 + 分類說明」兩個子元素，
      分居左右兩端；那是既有版型，不能為了這顆按鈕動它。
      auto 邊距會把剩餘空間全吃掉，於是有權限時變成「件數 說明 …… [按鈕]」，
      而沒權限時這條規則根本不存在 → 訪客端一像素都沒變。
   ⚠ 全站無圓角，這裡不要補 border-radius。 */
.ya-wr-toolbar__add {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin-left: auto;
	padding: .42rem .9rem;
	border: 1px dashed var(--ya-line);
	background: var(--ya-white);
	font-size: .76rem;
	letter-spacing: .1em;
	color: var(--ya-ocean);
	white-space: nowrap;
	transition: background var(--ya-t-col), color var(--ya-t-col),
	            border-color var(--ya-t-col), gap .4s var(--ya-ease);
}
.ya-wr-toolbar__add i { font-size: .8rem; line-height: 1; }
.ya-wr-toolbar__add:hover {
	border-color: var(--ya-ac);
	background: var(--ya-ac);
	color: var(--ya-white);
	gap: .7rem;
}

/* ── 5. 商品格（設計稿 379–398 行）──────────────────────────────────
   🔴 格線的做法：格線**不是 border**，是 `gap:1px` 加上容器底色透出來。
      這樣每一格之間永遠只有 1px，不會在相鄰邊框處變成 2px。
   ⚠ 桌機固定 4 欄（設計稿 :1891 `repeat(4,minmax(0,1fr))`），
     行動版才改 auto-fit。minmax(0,1fr) 的 0 不能省 —— 省了長標題會把欄撐開。 */
/* 🔴 這一版的商品格與「首頁 B・參考」那版不同：
     · 卡片**各自有邊框**、彼此有間距（不是 gap:1px 的連續格線）
     · hover 時整張卡浮起（設計稿 cardT ＋ shadow ＋ border-color）
     · 卡片內多了描述與一顆按鈕
   設計稿 :278-299（本月選物）與 :475-500（分類列表），兩處相同。 */
.ya-wr-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.2rem, 2.5vw, 2rem);
}
.ya-wr-card {
	display: flex;
	flex-direction: column;
	background: var(--ya-white);
	border: 1px solid rgba(31,78,107,.12);
	min-width: 0;
	transition: transform .6s var(--ya-ease), box-shadow .6s var(--ya-ease),
	            border-color .5s var(--ya-ease);
}
.ya-wr-card:hover {
	transform: translateY(-.4rem);
	box-shadow: 0 26px 46px -28px rgba(18,48,63,.45);
	border-color: rgba(190,133,116,.5);
}
.ya-wr-card.is-off { opacity: .55; }

/* 圖片框：正方形裁切 ＋ hover 放大 ＋ 掃光 */
.ya-wr-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	/* 設計稿用固定高度 cardImgH（非 1:1）。用 aspect-ratio 讓它隨欄寬伸縮，
	   4/3 與設計稿在 1180px 版心下的實際比例最接近。 */
	aspect-ratio: 4 / 3;
	background: var(--ya-paper);
}
/* 🔴 height:100% 一定要寫在 img 上並用較高特異性 ——
   style.css 的 `body.ya-body img { height:auto }` 是 (0,1,2)，
   `.ya-wr-card__img` 只有 (0,1,0) 會被壓過去，照片就不會撐滿裁切框。
   （階段 2B 第 11 輪踩過同一個坑，見陷阱備忘。） */
.ya-wr-card .ya-wr-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 1.1s var(--ya-ease);
}
.ya-wr-card__media:hover .ya-wr-card__img { transform: scale(1.07); }

/* 掃光：一條斜切的亮帶，hover 時從左掃到右（設計稿 shineX 0%→560%）*/
.ya-wr-card__shine {
	position: absolute;
	top: 0; left: -40%;
	width: 28%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
	transform: skewX(-22deg) translateX(0%);
	opacity: 0;
	pointer-events: none;
	transition: opacity .18s;
}
.ya-wr-card__media:hover .ya-wr-card__shine {
	opacity: 1;
	transform: skewX(-22deg) translateX(560%);
	transition: transform 1s cubic-bezier(.25,.6,.2,1), opacity .18s;
}

/* 左上角標籤（設計稿 p.tag）——本佈景拿「類型」來當它 */
.ya-wr-card__tag {
	position: absolute;
	top: .7rem; left: .7rem;
	display: inline-flex;
	align-items: center;
	padding: .24rem .55rem;
	background: var(--ya-ac);
	color: var(--ya-white);
	font-size: .66rem;
	letter-spacing: .14em;
}
.ya-wr-card__tag--off { background: var(--ya-muted); }

/* 無圖時的替代方塊（sid 7 那種商品）*/
.ya-wr-card__noimg {
	position: absolute; inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ya-paper);
	color: var(--ya-muted-2);
	font-family: var(--ya-en);
	font-style: italic;
	letter-spacing: .2em;
	font-size: .8rem;
}

.ya-wr-card__body {
	display: flex;
	flex-direction: column;
	gap: .55rem;
	padding: 1.2rem 1.2rem 1.4rem;
}
.ya-wr-card__cat {
	font-family: var(--ya-en);
	font-style: italic;
	font-size: .7rem;
	letter-spacing: .16em;
	color: var(--ya-muted);
}
.ya-wr-card__title {
	font-family: var(--ya-serif);
	font-size: 1rem;
	line-height: 1.7;
	letter-spacing: .04em;
	color: var(--ya-ink);
	text-wrap: pretty;
	transition: color .4s var(--ya-ease);
}
.ya-wr-card__desc {
	margin: 0;
	font-size: .82rem;
	line-height: 1.9;
	color: var(--ya-muted);
	text-wrap: pretty;
}
/* 🔴 hover 由**整張卡**驅動，不是只有標題自己 —— 設計稿的 cardHover 是掛在
   整張卡上的（onMouseEnter），滑到圖片時標題也要跟著換色。
   （階段 2A 第 6／11 輪的教訓：hover 應由整個項目驅動。） */
.ya-wr-card:hover .ya-wr-card__title { color: var(--ya-ac); }

.ya-wr-card__price {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	margin-top: .2rem;
}
.ya-wr-card__now {
	font-family: var(--ya-en);
	font-size: 1.35rem;
	letter-spacing: .04em;
	color: var(--ya-ink);
}
/* 卡片底部那顆鈕。⚠ 它是 <span> 不是 <a> —— 整張卡已經有連結（圖與標題），
   再包一層 <a> 會變成連結套連結（HTML 不合法）。hover 由整張卡驅動。 */
.ya-wr-card__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	margin-top: .6rem;
	padding: .7rem 1rem;
	border: 1px solid rgba(31,78,107,.18);
	background: transparent;
	font-size: .8rem;
	letter-spacing: .14em;
	color: var(--ya-ocean);
	transition: background .45s var(--ya-ease), border-color .45s var(--ya-ease),
	            color .45s var(--ya-ease);
}
.ya-wr-card:hover .ya-wr-card__btn {
	background: var(--ya-deep);
	border-color: var(--ya-deep);
	color: var(--ya-white);
}
.ya-wr-card__was {
	font-size: .74rem;
	color: #b6c1cb;
	text-decoration: line-through;
}

/* 空狀態 */
.ya-wr-empty {
	grid-column: 1 / -1;
	padding: clamp(3rem, 8vw, 5rem) 1rem;
	background: var(--ya-white);
	text-align: center;
	font-size: .9rem;
	color: var(--ya-muted);
}

/* ── 6. 分頁（設計稿 400–404 行）────────────────────────────────────
   ⚠ `$bar` 是模組用 getPageBar() 產生的 Bootstrap 分頁，HTML 不是我們寫的，
     只能從外面蓋（與 news 的 $pagenav 同一套處理）。 */
.ya-wr-pager {
	display: flex;
	justify-content: center;
	margin-top: 2.6rem;
}
.ya-wr-pager :where(ul, .pagination) {
	display: flex;
	justify-content: center;
	gap: .5rem;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ya-wr-pager :where(a, span, .page-link) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 .6rem;
	border: 1px solid rgba(31,78,107,.16);
	border-radius: 0;
	background: var(--ya-white);
	font-family: var(--ya-en);
	font-size: 1rem;
	color: var(--ya-ocean);
	transition: background .35s var(--ya-ease), border-color .35s var(--ya-ease),
	            color .35s var(--ya-ease);
}
.ya-wr-pager :where(a:hover, .page-link:hover) {
	border-color: var(--ya-ac);
	color: var(--ya-ac);
	background: var(--ya-white);
}
.ya-wr-pager :where(.active, .current) :where(a, span, .page-link),
.ya-wr-pager :where(a, span).current {
	background: var(--ya-deep);
	border-color: var(--ya-deep);
	color: var(--ya-white);
}

/* 🔴 圓角要另外壓一條，不能只靠上面那些規則裡的 `border-radius: 0`
   （2026-09-09 由 6C-3a 的 CDP 抓出來，這是本節從一開始就有的漏洞）。

   原因：`:where()` 的**特異性是 0**。`.ya-wr-pager :where(a, span, .page-link)`
   整條算下來只有 `.ya-wr-pager` 的 (0,1,0)，
   而 Bootstrap 的 `.page-item:first-child .page-link` 是 (0,2,0) → **Bootstrap 贏**，
   首尾兩顆分頁鈕於是留著 6px 圓角，違反全站無圓角。

   下面這條用實打實的後代選擇器 (0,3,0) 蓋過去。
   ⚠ 不要把上面那些 `:where()` 改寫成一般選擇器 —— 那會連帶提高特異性，
     反而蓋掉本佈景後續想微調的機會；只針對圓角補一條就好。
   ⚠ 6A 商品列表頁也用同一個 `.ya-wr-pager`，只是模組把它的 getPageBar 註解掉了
     （`index.php:1853-1857`）所以一直沒顯示，這條修正對它同樣有效。 */
.ya-wr-pager .page-item .page-link,
.ya-wr-pager .pagination .page-link,
.ya-wr-pager .pagination a,
.ya-wr-pager .pagination span { border-radius: 0; }

/* ── 7. 響應式 ──────────────────────────────────────────────────────
   設計稿 :1891 行動版是 `repeat(auto-fit,minmax(200px,1fr))`。 */
@media (max-width: 1100px) {
	.ya-wr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* ⬜ 原本這裡有 `.ya-wr-shell` 與 `.ya-wr-side` 的行動版處理，
	   隨第 4C 節一起移除（2026-09-04）。左欄改走 XOOPS 版位，
	   `.ya-zones` 的行動版單欄化由 style.css:1969 負責。 */
}
/* 分類敘述（`--row` 的右半）在窄螢幕已被 flex-wrap 換到第二列，
   此時右對齊只會讓中文段落更難讀 → 回到整行左對齊。
   ⚠ 這條**只影響換行後的情形**；≥761px 仍是第 3 節的靠右版。
   ⚠ 760px 是本節自己的斷點，與全站的 MOBILE_MQ（1100px）無關 ——
     抬頭是兩欄文字，撐得比商品格久，1100px 就放掉會太早。 */
@media (max-width: 760px) {
	.ya-wr-sechead__desc {
		max-width: none;
		margin-top: .8rem;
		text-align: left;
	}
}
@media (max-width: 560px) {
	.ya-wr-grid { grid-template-columns: 1fr; }
	.ya-wr-card__body { padding: 1rem 1rem 1.2rem; }
	.ya-wr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* =========================================================================
   ── 8. 商品內頁（階段 6B）────────────────────────────────────────────
   設計稿：YuanAn Shop.dc.html 的 `isItem`（:511-791，畫板名「商品內頁」）
   樣板：modules/wr/wr_product.html　行為：js/wr.js

   🔴 設計稿這一段**沒有用 var()，全是字面色**。依 F 段那條準則：
      純 rgba()／#hex ＝ 設計稿真正要的顏色，照抄。
      其中與 palette 完全相同的（#23303A #12303F #1F4E6B #BE8574 #E6C0B2
      #8496a3 #b6c1cb #5b6875 #3c4b58 #F7FAFB、rgba(31,78,107,.12)／.08）
      已換成 --ya- 變數；**其餘一律照字面抄**，不要「順手」映射成別的變數。

   ⚠ 第 7 節是 6A 的響應式；本節的響應式獨立寫在 8-9，兩者不互相覆蓋。
   ========================================================================= */

/* ── 8-1. 麵包屑（設計稿 :514）───────────────────────────────────── */
.ya-wr-crumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: clamp(1.2rem, 2.5vw, 1.8rem);
	font-size: .78rem;
	letter-spacing: .1em;
	color: var(--ya-muted);
}
.ya-wr-crumb a { color: var(--ya-muted); transition: color var(--ya-t-col); }
.ya-wr-crumb a:hover { color: var(--ya-ac); }
.ya-wr-crumb__now { color: var(--ya-ink); }

/* ── 8-2. 主區骨架（設計稿 :548-550）──────────────────────────────
   設計稿 itemCols 桌機是兩欄等寬。 */
.ya-wr-d {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.8rem, 4vw, 3.4rem);
	align-items: start;
}

/* ── 8-3. 左側：主圖 ＋ 縮圖格（設計稿 :551-570）────────────────── */
.ya-wr-d__media { display: flex; flex-direction: column; gap: .8rem; }

.ya-wr-shot {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--ya-line);
	background: var(--ya-mist);
	transition: border-color .45s;
}
.ya-wr-shot[data-ya-lightbox] { cursor: zoom-in; }
.ya-wr-shot[data-ya-lightbox]:hover { border-color: var(--ya-ac); }

/* 🔴 所有主圖都疊在同一格，只有 .is-on 顯示 —— 換圖不重新下載，
   也不會在切換時出現空白一瞬間。 */
.ya-wr-shot__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	visibility: hidden;
	transition: opacity .45s, transform var(--ya-t-img) var(--ya-ease);
}
.ya-wr-shot__img.is-on { opacity: 1; visibility: visible; }
.ya-wr-shot[data-ya-lightbox]:hover .ya-wr-shot__img.is-on { transform: scale(1.05); }

.ya-wr-shot__veil {
	position: absolute;
	inset: 0;
	background: rgba(18, 48, 63, .18);
	opacity: 0;
	transition: opacity .5s;
	pointer-events: none;
}
.ya-wr-shot[data-ya-lightbox]:hover .ya-wr-shot__veil { opacity: 1; }

.ya-wr-shot__cue {
	position: absolute;
	bottom: 1rem; right: 1rem;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem .9rem;
	background: rgba(255, 255, 255, .94);
	color: var(--ya-deep);
	font-size: .76rem;
	letter-spacing: .14em;
	opacity: 0;
	transform: translateY(.4rem);
	transition: opacity .5s, transform .55s var(--ya-ease);
	pointer-events: none;
}
.ya-wr-shot__cue i { font-size: .72rem; color: var(--ya-ac); }
.ya-wr-shot[data-ya-lightbox]:hover .ya-wr-shot__cue { opacity: 1; transform: translateY(0); }

/* 無主圖降級（與 6A 商品卡的 .ya-wr-card__noimg 同一種處理） */
.ya-wr-shot--none {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ya-en);
	font-style: italic;
	letter-spacing: .2em;
	color: var(--ya-muted-2);
}

.ya-wr-thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: .6rem;
}
.ya-wr-thumb {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	padding: 0;
	border: 1px solid var(--ya-line);
	background: none;
	opacity: .62;
	cursor: pointer;
	transition: opacity .4s, border-color .4s;
}
.ya-wr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ya-wr-thumb:hover { opacity: 1; }
.ya-wr-thumb.is-on { opacity: 1; border-color: var(--ya-ac); }

/* ── 8-4. 右側：商品資訊（設計稿 :572-660）───────────────────────── */
.ya-wr-d__info { display: flex; flex-direction: column; gap: 1.1rem; }

.ya-wr-d__head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.ya-wr-d__tag {
	display: inline-flex;
	align-items: center;
	padding: .28rem .6rem;
	background: var(--ya-ac);
	color: var(--ya-white);
	font-size: .68rem;
	letter-spacing: .14em;
}
.ya-wr-d__eyebrow {
	font-family: var(--ya-en);
	font-style: italic;
	font-size: .75rem;
	letter-spacing: .18em;
	color: var(--ya-muted);
}

/* ⚠ 這是全頁唯一的原生 <h1>；大小由本規則決定，不吃 style.css 的 .h1。 */
.ya-wr-d__title {
	margin: 0;
	font-family: var(--ya-serif);
	font-weight: 400;
	font-size: clamp(1.5rem, 2.8vw, 2.1rem);
	line-height: 1.6;
	letter-spacing: .05em;
	color: var(--ya-ink);
	text-wrap: pretty;
}
.ya-wr-d__desc {
	margin: 0;
	font-size: .92rem;
	line-height: 2;
	color: var(--ya-body-2);
	text-wrap: pretty;
}

.ya-wr-d__price {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 1rem 0;
	border-top: 1px solid rgba(31, 78, 107, .1);
	border-bottom: 1px solid rgba(31, 78, 107, .1);
}
.ya-wr-d__now {
	font-family: var(--ya-en);
	font-size: 2.4rem;
	line-height: 1;
	letter-spacing: .03em;
	color: var(--ya-ac);
}
/* 沒有售價時的替代字樣（模組允許 price=0）—— 用內文字級，不要沿用 2.4rem */
.ya-wr-d__now--ask {
	font-family: var(--ya-sans);
	font-size: 1rem;
	letter-spacing: .1em;
	color: var(--ya-muted);
}
.ya-wr-d__was {
	font-size: .85rem;
	color: var(--ya-muted-2);
	text-decoration: line-through;
}

.ya-wr-d__optlabel {
	font-size: .8rem;
	letter-spacing: .14em;
	color: var(--ya-muted);
}
.ya-wr-d__opts { display: flex; flex-direction: column; gap: .6rem; }
.ya-wr-d__optrow { display: flex; gap: .6rem; flex-wrap: wrap; }

/* 規格膠囊。用 <label> 包 radio：不用 JS 也能選，JS 只負責算小計。
   ⚠ radio 用 clip 隱藏而不是 display:none —— display:none 會讓鍵盤選不到。 */
.ya-wr-opt {
	display: inline-flex;
	flex-direction: column;
	gap: .15rem;
	padding: .6rem 1.1rem;
	border: 1px solid rgba(31, 78, 107, .14);
	background: var(--ya-white);
	color: var(--ya-body);
	cursor: pointer;
	transition: background .35s, border-color .35s, color .35s;
}
.ya-wr-opt input {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px;
	clip-path: inset(50%);
	overflow: hidden;
}
.ya-wr-opt__name { font-size: .85rem; letter-spacing: .1em; }
.ya-wr-opt__sub {
	font-family: var(--ya-en);
	font-size: .78rem;
	color: var(--ya-muted);
	transition: color .35s;
}
.ya-wr-opt:hover { border-color: var(--ya-ac); }
/* 🔴 :has() 驅動選取狀態 —— 不必等 JS，也不必在 label 上掛 class。
   本站已在 news.css 用過同一招（分類膠囊），瀏覽器支援度已確認過。 */
.ya-wr-opt:has(input:checked) {
	background: var(--ya-deep);
	border-color: var(--ya-deep);
	color: var(--ya-white);
}
.ya-wr-opt:has(input:checked) .ya-wr-opt__sub { color: rgba(255, 255, 255, .6); }
.ya-wr-opt:has(input:focus-visible) { outline: 2px solid var(--ya-ac); outline-offset: 2px; }
/* 售完：庫存 rid=0 */
.ya-wr-opt.is-out { opacity: .45; cursor: not-allowed; }
.ya-wr-opt.is-out:hover { border-color: rgba(31, 78, 107, .14); }

/* 數量 ＋ 加入購物車（設計稿 :634-641；「直接購買」依 Q3 移除，鈕拉滿寬） */
.ya-wr-d__buy {
	display: flex;
	gap: .8rem;
	align-items: stretch;
	flex-wrap: wrap;
	margin-top: .6rem;
}
.ya-wr-qty {
	display: flex;
	align-items: center;
	border: 1px solid rgba(31, 78, 107, .18);
}
.ya-wr-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.8rem; height: 3.1rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ya-ocean);
	cursor: pointer;
	transition: background .3s;
}
.ya-wr-qty__btn:hover { background: #F2F5F8; }
.ya-wr-qty__btn i { font-size: 1rem; }
.ya-wr-qty__n {
	width: 2.6rem;
	height: 3.1rem;
	border: 0;
	background: none;
	text-align: center;
	font-family: var(--ya-en);
	font-size: 1.15rem;
	color: var(--ya-ink);
}
.ya-wr-qty__n:focus-visible { outline: 2px solid var(--ya-ac); outline-offset: -2px; }

.ya-wr-add {
	flex: 1 1 12rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .7rem;
	padding: 0 1.6rem;
	height: 3.1rem;
	border: 0;
	background: var(--ya-deep);
	color: var(--ya-white);
	font-family: inherit;
	font-size: .88rem;
	letter-spacing: .16em;
	cursor: pointer;
	transition: background .4s, gap .4s var(--ya-ease);
}
.ya-wr-add:hover { background: var(--ya-ac); gap: 1rem; color: var(--ya-white); }
.ya-wr-add i { font-size: .95rem; }
/* 加入成功後的短暫狀態（js/wr.js 加 .is-done，1.8 秒後移除） */
.ya-wr-add.is-done { background: var(--ya-ocean); }
.ya-wr-add.is-busy { opacity: .6; pointer-events: none; }

.ya-wr-d__sum {
	margin: 0;
	padding-top: 1rem;
	border-top: 1px solid rgba(31, 78, 107, .1);
	font-size: .82rem;
	color: var(--ya-muted);
}
.ya-wr-d__sum span {
	font-family: var(--ya-en);
	font-size: 1.1rem;
	color: var(--ya-ink);
}

/* 檔案下載／分享／編輯（Q9，設計稿沒畫，沿用全站語彙） */
.ya-wr-d__files,
.ya-wr-d__share { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.ya-wr-file {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .5rem .9rem;
	border: 1px solid var(--ya-line);
	font-size: .82rem;
	letter-spacing: .06em;
	color: var(--ya-ocean);
	transition: border-color .4s, color .4s, gap .4s var(--ya-ease);
}
.ya-wr-file:hover { border-color: var(--ya-ac); color: var(--ya-ac); gap: .7rem; }
.ya-wr-share {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.2rem; height: 2.2rem;
	border: 1px solid var(--ya-line);
	color: var(--ya-ocean);
	font-size: .9rem;
	transition: border-color .4s, color .4s, transform .4s var(--ya-ease);
}
.ya-wr-share:hover { border-color: var(--ya-ac); color: var(--ya-ac); transform: translateY(-2px); }
.ya-wr-edit {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-top: .2rem;
	padding: .5rem .9rem;
	border: 1px dashed var(--ya-ac);
	font-size: .8rem;
	letter-spacing: .1em;
	color: var(--ya-ac);
	transition: background .4s;
}
.ya-wr-edit:hover { background: rgba(190, 133, 116, .08); color: var(--ya-ac); }

/* ── 8-5. 關於這件商品 ＋ 規格表 ＋ 配送（設計稿 :662-737）──────────
   ⚠ 這一段是滿版底色，所以自己脫出版心：.ya-wr-wrap 只包住主區與後段。 */
.ya-wr-story {
	background: var(--ya-wr-soft);
	padding: clamp(3rem, 6vw, 4.6rem) var(--ya-pad-x);
	margin-top: clamp(2rem, 4vw, 3rem);
}
.ya-wr-story__in { max-width: var(--ya-read); margin: 0 auto; }
.ya-wr-story__body {
	font-family: var(--ya-serif);
	font-size: 1.02rem;
	line-height: 2.2;
	color: var(--ya-body);
	text-wrap: pretty;
}
/* 後台編輯器吐出來的 <p>／圖片／清單（不受工作規則 3 約束，見 news.css 8-5 同一套） */
.ya-wr-story__body p { margin: 0 0 1.6rem; }
.ya-wr-story__body p:last-child { margin-bottom: 0; }
.ya-wr-story__body img { max-width: 100%; height: auto; margin: 1.4rem 0; }
.ya-wr-story__body :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--ya-serif);
	font-weight: 400;
	letter-spacing: .08em;
	color: var(--ya-ink);
	margin: 2rem 0 .8rem;
}

.ya-wr-spec {
	margin-top: 2.4rem;
	border: 1px solid var(--ya-line);
	background: var(--ya-white);
	padding: clamp(1.4rem, 3vw, 2rem);
}
.ya-wr-spec__title,
.ya-wr-ship__title {
	margin: 0 0 1.2rem;
	font-family: var(--ya-serif);
	font-weight: 400;
	font-size: 1.1rem;
	letter-spacing: .1em;
	color: var(--ya-ink);
}
.ya-wr-spec__row {
	display: grid;
	grid-template-columns: 8rem minmax(0, 1fr);
	gap: 1rem;
	padding: .75rem 0;
	border-bottom: 1px solid var(--ya-line-soft);
	font-size: .88rem;
}
.ya-wr-spec__row:last-child { border-bottom: 0; }
.ya-wr-spec__row > span:first-child { letter-spacing: .1em; color: var(--ya-muted); }
.ya-wr-spec__row > span:last-child { color: var(--ya-ink); text-wrap: pretty; }

/* 配送與注意事項（Q6：吃「其他說明」欄） */
.ya-wr-ship {
	margin-top: 1.4rem;
	border: 1px solid var(--ya-line);
	background: var(--ya-white);
	padding: clamp(1.4rem, 3vw, 2rem);
}
.ya-wr-ship__title { display: flex; align-items: center; gap: .6rem; }
.ya-wr-ship__title i { font-size: 1rem; color: var(--ya-ac); }
.ya-wr-ship__body { font-size: .85rem; line-height: 1.95; color: var(--ya-body-2); }
.ya-wr-ship__body p { margin: 0 0 .6rem; }
.ya-wr-ship__body p:last-child { margin-bottom: 0; }

/* 後段（詢問＋推薦）自己的版心 */
.ya-wr-wrap--tail { padding-top: clamp(2.4rem, 5vw, 3.6rem); }

/* ── 8-6. 區段抬頭的導言（6A 的 .ya-wr-sechead 直接沿用，只補這一行）─ */
.ya-wr-sechead__lead {
	margin: .7rem 0 0;
	max-width: 52ch;
	font-size: .84rem;
	line-height: 1.9;
	color: var(--ya-muted);
	text-wrap: pretty;
}

/* ── 8-7. 發信詢問（設計稿 :739-776）──────────────────────────────
   🔴 這一節是**替模組 render 好的表單套皮**（使用者裁示 Q1-B）。
      $action_form 由 XoopsFormRendererBootstrap5 產出，實際結構是：
        .wrp-form > div > form#addfeedback
            h3（模組自己的抬頭）
            .row.mb-3 × 6
                .col-12.col-sm-2.col-form-label.text-sm-end   ← 標籤
                .col-12.col-sm-10                              ← 欄位
            .col-12.mb-2（「* = 必填」說明）
            input[name=XOOPS_TOKEN_REQUEST]（隱藏）
   ⚠ **不要改樣板去拆這串 HTML** —— 裡面有 CSRF token 與 onsubmit 核心驗證。
   ⚠ 選擇器一律限定在 .ya-wr-enq 之內，避免波及後台或其他頁的 Bootstrap 表單。 */
.ya-wr-enq__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 20rem;
	gap: clamp(1.6rem, 4vw, 3rem);
	align-items: start;
	border: 1px solid var(--ya-line);
	background: var(--ya-white);
	padding: clamp(1.4rem, 3vw, 2.2rem);
}
.ya-wr-enq__form { min-width: 0; }

/* 模組自己的 <h3> 抬頭：本樣板已另外畫了區段抬頭，這裡隱藏避免重複 */
.ya-wr-enq__form :where(h3) { display: none; }

/* 每一列改成「標籤在上、欄位在下」的單欄式（設計稿的表單是這樣） */
.ya-wr-enq__form .row {
	display: flex;
	flex-direction: column;
	gap: .45rem;
	margin: 0 0 1.1rem;
}
.ya-wr-enq__form :where(.col-12, [class*="col-sm-"]) {
	width: 100%;
	max-width: none;
	flex: none;
	padding: 0;
	text-align: left;
}
.ya-wr-enq__form :where(.col-form-label, label) {
	display: flex;
	align-items: baseline;
	gap: .35rem;
	font-size: .82rem;
	letter-spacing: .1em;
	color: var(--ya-ink);
	font-weight: 400;
}
.ya-wr-enq__form .xo-caption-required { color: var(--ya-ac); }

/* 欄位本體：框線款，與 liaise 表單同一款（css/liaise.css 第 4 節） */
.ya-wr-enq__form :where(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], textarea, select) {
	width: 100%;
	padding: .75rem .9rem;
	border: 1px solid var(--ya-line);
	border-radius: 0;
	outline: 0;
	background: var(--ya-white);
	font-family: inherit;
	font-size: .9rem;
	color: var(--ya-ink);
	transition: border-color .35s, box-shadow .35s;
}
.ya-wr-enq__form textarea { line-height: 1.9; resize: vertical; min-height: 8rem; }
.ya-wr-enq__form :where(input, textarea, select):focus {
	border-color: var(--ya-ac);
	box-shadow: 0 0 0 3px rgba(190, 133, 116, .12);
}
/* 驗證碼那一列：圖片與輸入框並排 */
.ya-wr-enq__form img { vertical-align: middle; margin-right: .5rem; }

/* 送出／清除（模組吐的是 <button>，所以可以塞圖示 —— 見 F 段那條坑） */
.ya-wr-enq__form :where(.btn) {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	padding: .9rem 2rem;
	border: 0;
	border-radius: 0;
	font-family: inherit;
	font-size: .86rem;
	letter-spacing: .18em;
	cursor: pointer;
	transition: background .4s, gap .4s var(--ya-ease), border-color .4s, color .4s;
}
.ya-wr-enq__form button[type="submit"] {
	background: var(--ya-deep);
	color: var(--ya-white);
}
.ya-wr-enq__form button[type="submit"]::before {
	content: "\F6B9"; /* bi-send */
	font-family: "bootstrap-icons";
	font-size: .85rem;
}
.ya-wr-enq__form button[type="submit"]:hover { background: var(--ya-ac); gap: 1.1rem; }
.ya-wr-enq__form button[type="reset"] {
	background: none;
	border: 1px solid rgba(31, 78, 107, .2);
	color: var(--ya-ocean);
	padding: .9rem 1.7rem;
}
.ya-wr-enq__form button[type="reset"]::before {
	content: "\F5DE"; /* bi-eraser */
	font-family: "bootstrap-icons";
	font-size: .85rem;
}
.ya-wr-enq__form button[type="reset"]:hover { border-color: var(--ya-ac); color: var(--ya-ac); gap: 1.1rem; }
/* 「* = 必填」那一列 */
.ya-wr-enq__form .col-12.mb-2 {
	margin-top: .4rem;
	font-size: .76rem;
	letter-spacing: .06em;
	color: var(--ya-muted);
}

/* 右側「詢問商品」卡（設計稿 :757-775） */
.ya-wr-enq__card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.3rem 1.4rem;
	background: var(--ya-wr-soft);
	border: 1px solid rgba(31, 78, 107, .1);
}
.ya-wr-enq__cardtitle {
	margin: 0;
	font-family: var(--ya-serif);
	font-size: .95rem;
	letter-spacing: .1em;
	color: var(--ya-ink);
}
.ya-wr-enq__item { display: flex; gap: .9rem; align-items: center; }
.ya-wr-enq__thumb {
	display: block;
	width: 4.2rem;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 1px solid var(--ya-line);
	flex: 0 0 auto;
}
.ya-wr-enq__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ya-wr-enq__meta { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.ya-wr-enq__name {
	font-family: var(--ya-serif);
	font-size: .9rem;
	line-height: 1.7;
	color: var(--ya-ink);
	text-wrap: pretty;
}
.ya-wr-enq__cat {
	font-family: var(--ya-en);
	font-style: italic;
	font-size: .72rem;
	letter-spacing: .16em;
	color: var(--ya-muted);
}
.ya-wr-enq__rule { height: 1px; background: rgba(31, 78, 107, .1); }
.ya-wr-enq__note {
	position: relative;
	display: block;
	padding-left: 1rem;
	font-size: .8rem;
	line-height: 1.9;
	color: var(--ya-body-2);
	text-wrap: pretty;
}
.ya-wr-enq__note::before {
	content: '';
	position: absolute;
	left: 0; top: .7rem;
	width: .28rem; height: .28rem;
	background: var(--ya-ac);
	transform: rotate(45deg);
}

/* ── 8-8. 燈箱（設計稿 :516-546）──────────────────────────────────
   ⚠ z-index 用全站的 --ya-z-light（150），與設計稿第 516 行一致。
   ⚠ 預設 visibility:hidden ＋ [hidden] 兩層保險：沒有 JS 時完全不擋畫面。 */
.ya-wr-lb {
	position: fixed;
	inset: 0;
	z-index: var(--ya-z-light);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(1rem, 2.5vh, 1.6rem);
	padding: clamp(1.5rem, 4vw, 3rem);
	background: rgba(10, 26, 35, .92);
	backdrop-filter: blur(8px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .55s var(--ya-ease), visibility .55s, backdrop-filter .6s;
}
.ya-wr-lb.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
/* 🔴 上面的 display:flex 會蓋掉 hidden 屬性來自 UA 樣式的 display:none，
   所以要自己補這一條。少了它，燈箱雖然因為 visibility/pointer-events 還是
   看不見也點不到，但它仍然是個佔滿視窗的 fixed 元素，語意與可及性都不對。 */
.ya-wr-lb[hidden] { display: none; }
.ya-wr-lb__scrim { position: absolute; inset: 0; cursor: zoom-out; }

.ya-wr-lb__top {
	position: relative;
	display: flex;
	align-items: center;
	gap: .7rem;
	width: 100%;
	max-width: var(--ya-wrap);
	color: rgba(255, 255, 255, .7);
	opacity: 0;
	transform: translateY(-.6rem);
	transition: opacity .6s .1s, transform .6s .1s var(--ya-ease);
}
.ya-wr-lb.is-open .ya-wr-lb__top { opacity: 1; transform: translateY(0); }
.ya-wr-lb__label {
	font-family: var(--ya-en);
	font-style: italic;
	font-size: .72rem;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--ya-ac-soft);
}
.ya-wr-lb__count {
	font-family: var(--ya-en);
	font-size: 1.05rem;
	letter-spacing: .1em;
	color: var(--ya-white);
}
.ya-wr-lb__x {
	position: relative;
	margin-left: auto;
	width: 22px; height: 22px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	opacity: .8;
	transition: opacity .45s, transform .45s;
}
.ya-wr-lb__x:hover { opacity: 1; transform: rotate(90deg); }
.ya-wr-lb__x span {
	position: absolute;
	top: 10px; left: 0;
	width: 22px; height: 1.5px;
	background: var(--ya-white);
}
.ya-wr-lb__x span:first-child { transform: rotate(45deg); }
.ya-wr-lb__x span:last-child { transform: rotate(-45deg); }

.ya-wr-lb__stage {
	position: relative;
	display: flex;
	align-items: center;
	gap: clamp(.6rem, 2vw, 1.6rem);
	width: 100%;
	max-width: var(--ya-wrap);
	min-height: 0;
	flex: 1 1 auto;
}
.ya-wr-lb__nav {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(2.4rem, 4vw, 3.2rem);
	height: clamp(2.4rem, 4vw, 3.2rem);
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .22);
	background: none;
	color: var(--ya-white);
	cursor: pointer;
	opacity: 0;
	transition: background .45s, border-color .45s, transform .45s, opacity .6s .1s;
}
.ya-wr-lb.is-open .ya-wr-lb__nav { opacity: 1; }
.ya-wr-lb__nav i { font-size: .9rem; }
.ya-wr-lb__nav:hover { background: rgba(255, 255, 255, .1); border-color: var(--ya-ac-soft); }
.ya-wr-lb__nav[data-ya-lb-go="-1"]:hover { transform: translateX(-.3rem); }
.ya-wr-lb__nav[data-ya-lb-go="1"]:hover { transform: translateX(.3rem); }

.ya-wr-lb__frame {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ya-wr-lb__frame img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .8);
	opacity: 0;
	transform: scale(.98);
	transition: opacity .5s, transform .7s var(--ya-ease);
}
.ya-wr-lb.is-ready .ya-wr-lb__frame img { opacity: 1; transform: scale(1); }

.ya-wr-lb__thumbs {
	position: relative;
	display: flex;
	gap: .6rem;
	flex-wrap: wrap;
	justify-content: center;
	opacity: 0;
	transform: translateY(.6rem);
	transition: opacity .6s .16s, transform .65s .16s var(--ya-ease);
}
.ya-wr-lb.is-open .ya-wr-lb__thumbs { opacity: 1; transform: translateY(0); }
.ya-wr-lb__thumb {
	display: block;
	width: clamp(56px, 6vw, 74px);
	aspect-ratio: 1 / 1;
	overflow: hidden;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .2);
	background: none;
	opacity: .5;
	cursor: pointer;
	transition: opacity .4s, border-color .4s, transform .5s var(--ya-ease);
}
.ya-wr-lb__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ya-wr-lb__thumb.is-on {
	opacity: 1;
	border-color: var(--ya-ac-soft);
	transform: translateY(-.3rem);
}

/* ── 8-9. 商品內頁的響應式 ───────────────────────────────────────── */
@media (max-width: 1100px) {
	/* 設計稿行動版 itemCols／enqCols 都退成單欄 */
	.ya-wr-d { grid-template-columns: 1fr; }
	.ya-wr-enq__grid { grid-template-columns: 1fr; }
	/* 推薦格沿用 6A 的兩欄（第 7 節已處理 .ya-wr-grid） */
}
@media (max-width: 560px) {
	.ya-wr-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ya-wr-d__now { font-size: 2rem; }
	.ya-wr-add { flex: 1 1 100%; }
	.ya-wr-spec__row { grid-template-columns: 1fr; gap: .2rem; }
	.ya-wr-lb__thumbs { display: none; } /* 小螢幕改用左右鈕，縮圖列太擠 */
}


/* =========================================================================
   ── 9. 左側「商品分類」區塊（2026-09-04）──────────────────────────────
   來源：wr 模組自己的區塊（後台「商品分類」，本機 bid 25、side=0＝canvas_left）
   樣板：modules/wr/blocks/wr_block.html（佈景覆寫）

   🔴 這一節取代了原本的第 4C 節（佈景自己畫的 `.ya-wr-side` 篩選欄）。
      使用者裁示：分類清單改由後台的左區塊提供，**後台沒開就整欄不出現**。

   版位鏈：theme.tpl:276 `.ya-zones.has-left` → tpl/leftBlock.tpl
           `<aside class="xoops-side-blocks ya-zone-side">` → tpl/theme_block.tpl
           `.ya-block` > `.ya-block__title` ＋ `.ya-block__body` > 本節的 `.ya-wr-cats`
   ⚠ 欄寬（260px）與行動版單欄化都由 **style.css** 的 `.ya-zones` 負責，本節不碰。
   ⚠ 區塊標題（「商品分類」四個字）是 `theme_block.tpl` 吐的 `.ya-block__title`，
     要改文字請到**後台改區塊標題**，不要在這裡加 ::before。
   ========================================================================= */

/* 區塊外框：把全站 .ya-block 的預設內距收掉，讓每一列可以拉到滿寬做 hover 底色 */
.ya-zone-side .ya-block:has(.ya-wr-cats) .ya-block__body { padding: 0; }

.ya-wr-cats {
	display: flex;
	flex-direction: column;
}

.ya-wr-cat {
	position: relative;
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .8rem .9rem;
	border-bottom: 1px solid var(--ya-line-soft);
	color: var(--ya-ink);
	/* 🔴 padding 也要進 transition —— hover 時整列右移是靠 padding-left 變大做的，
	   只寫 background 的話會變成瞬間跳位。 */
	transition: padding var(--ya-t-move) var(--ya-ease),
	            background var(--ya-t-col),
	            color var(--ya-t-col);
}
.ya-wr-cat:last-child { border-bottom: 0; }

/* 🔴 底色用 `--ya-paper-warm`（暖白 #FDFCFB），**不是** `--ya-paper`（冷灰藍 #F7FAFB）。
      2026-09-08 使用者裁示，與 `.ya-wr-tile:hover` 同一批改。

      ⚠ 設計稿這裡寫的其實是 `rgba(247,250,251,.9)`（`YuanAn Shop.dc.html:2016`
        的 `sBg`）＝ 冷灰 9 成透明度 —— **但不能照抄**。
        設計稿的頁面底色是純白 #fff，冷灰壓在純白上幾乎看不出色相；
        本佈景的內頁底色是暖白 `--ya-paper-warm`（`style.css:203`），
        冷灰壓在暖白上色相差被放大，就是一塊藍。
        這與檔頭 `--ya-wr-soft` 那條是同一個根因。
      ⚠ 這兩條連 `.is-on` 一起換 —— 選取態是**常駐**的，比 hover 更該乾淨。 */
.ya-wr-cat:hover {
	padding-left: 1.4rem;
	background: var(--ya-paper-warm);
	color: var(--ya-ac);
}

/* 目前所在分類。樣板用 $xoops_requesturi 比對 cid 得出（區塊拿不到頁面變數）。 */
.ya-wr-cat.is-on {
	background: var(--ya-paper-warm);
	color: var(--ya-ac);
}
.ya-wr-cat.is-on::before {
	content: '';
	position: absolute;
	left: 0; top: 0;
	width: 2px; height: 100%;
	background: var(--ya-ac);
}

.ya-wr-cat__ico {
	flex: 0 0 auto;
	font-size: .9rem;
	line-height: 1;
	color: var(--ya-ac);
}
.ya-wr-cat__text {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	min-width: 0;
}
.ya-wr-cat__zh {
	font-family: var(--ya-serif);
	font-size: .95rem;
	letter-spacing: .06em;
}
.ya-wr-cat__en {
	font-family: var(--ya-en);
	font-style: italic;
	font-size: .7rem;
	letter-spacing: .16em;
	color: var(--ya-muted);
}
.ya-wr-cat__arrow {
	margin-left: auto;
	flex: 0 0 auto;
	font-size: .7rem;
	color: var(--ya-ac);
	opacity: 0;
	transform: translateX(-.3rem);
	transition: opacity .45s var(--ya-ease), transform .55s var(--ya-ease);
}
.ya-wr-cat:hover .ya-wr-cat__arrow,
.ya-wr-cat.is-on .ya-wr-cat__arrow { opacity: 1; transform: none; }

/* 下架分類：只有具「管理分類」權的人看得到（wr_block.php:24 的 status_code 過濾） */
.ya-wr-cat.is-off { opacity: .55; }
.ya-wr-cat__off {
	margin-left: auto;
	padding: .1rem .4rem;
	background: var(--ya-muted-2);
	color: var(--ya-white);
	font-size: .66rem;
	letter-spacing: .1em;
}
/* 有「下架」標籤時箭頭就不要再搶 margin-left:auto */
.ya-wr-cat.is-off .ya-wr-cat__arrow { margin-left: .4rem; }

/* 第 2 層（樣板刻意只做兩層，見 wr_block.html 檔頭） */
.ya-wr-cats__sub {
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid var(--ya-line-soft);
	background: rgba(237, 242, 245, .45);
}
.ya-wr-cat--sub {
	padding-left: 2rem;
	border-bottom: 0;
}
.ya-wr-cat--sub:hover { padding-left: 2.5rem; }
.ya-wr-cat--sub .ya-wr-cat__zh { font-size: .88rem; }

/* ══════════════════════════════════════════════════════════════════════
   ── 9B. 左側「商品搜索」區塊（2026-09-08）─────────────────────────────
   樣板：modules/wr/blocks/wr_block_search.html（覆寫）
   行為：js/wr.js 第 5 區
   後台：區塊「商品搜索」（本機 bid 27、side=0、module_id=7）

   🔴 為什麼要整組重寫：模組原樣板是 Bootstrap `row` ＋
      `col-12 col-md-6 col-xl-4 col-xxl-2` 的**滿版四欄**版型。
      Bootstrap 的 col 吃視窗寬度、不吃容器寬度 → 塞進 260px 左欄直接溢位。
      模組自帶的修正鎖 `.col-md-3`（別的佈景的側欄），本佈景對不上 → 落空。
      本節改成**單欄直式堆疊**，不依賴任何 Bootstrap class。

   ⚠ 與第 9 節（商品分類）的關係：兩個區塊同在 canvas_left，
     外框 `.ya-block` 由 theme.tpl／theme_block.tpl 提供，本節只管框內。
     ⚠ 第 9 節有一條 `:has(.ya-wr-cats)` 把 `.ya-block__body` 的 padding 清成 0
       （分類列要滿版貼邊）；**本區塊不能吃到那條** —— 它的判斷式是
       `:has(.ya-wr-cats)`，本區塊沒有 `.ya-wr-cats`，天然不會命中，不必另外擋。
   ══════════════════════════════════════════════════════════════════════ */
.ya-wr-search {
	display: flex;
	flex-direction: column;
	gap: 1.05rem;
}

/* 每一組：標籤在上、控制項在下（260px 放不下左右並排，這是破版的主因）。 */
.ya-wr-search__grp {
	display: flex;
	flex-direction: column;
	gap: .4rem;
}
.ya-wr-search__lab {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .76rem;
	letter-spacing: .12em;
	color: var(--ya-muted);
}
/* 「必選」小標。⚠ 不是紅色 —— 全站沒有警示紅，用主色的淡底比較不打架。 */
.ya-wr-search__req {
	padding: .1rem .35rem;
	background: rgba(190, 133, 116, .12);
	font-size: .66rem;
	letter-spacing: .08em;
	color: var(--ya-ac);
}

/* 下拉。🔴 `appearance:none` ＋ 自繪箭頭 —— 系統原生的箭頭在各家瀏覽器
   長得都不一樣，且無法配合本佈景的無圓角與細線。
   箭頭用 background-image 的 SVG data URI（外部檔會多一次請求）。
   ⚠ `background` 用簡寫會把 image 一起清掉（F 段 2026-09-03 那條），
     所以底色與箭頭都寫在同一條 background 裡，改的時候整條一起改。 */
.ya-wr-search__sel,
.ya-wr-search__num {
	width: 100%;
	min-width: 0;
	padding: .55rem .7rem;
	border: 1px solid var(--ya-line);
	background: var(--ya-white);
	font-family: inherit;
	font-size: .84rem;
	letter-spacing: .04em;
	color: var(--ya-ink);
	transition: border-color var(--ya-t-col), background var(--ya-t-col);
}
.ya-wr-search__sel {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2rem;
	background:
		url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231F4E6B' stroke-width='1.4' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E")
		no-repeat right .75rem center / 10px 7px,
		var(--ya-white);
	cursor: pointer;
}
.ya-wr-search__sel:hover,
.ya-wr-search__num:hover { border-color: rgba(31, 78, 107, .3); }
.ya-wr-search__sel:focus,
.ya-wr-search__num:focus {
	outline: none;
	border-color: var(--ya-ac);
}

/* 停用態 ＝ 還沒選分類。
   🔴 這不是裝飾 —— `index.php:1615-1621` 的 tid/mid 篩選只寫在有 cid 的分支裡，
      沒選分類就送出的話屬性會被整個忽略（實測 `?tid=1` 吐 8 件＝全部）。 */
.ya-wr-search__sel:disabled {
	background:
		url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23b6c1cb' stroke-width='1.4' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E")
		no-repeat right .75rem center / 10px 7px,
		var(--ya-paper-warm);
	border-style: dashed;
	color: var(--ya-muted-2);
	cursor: not-allowed;
}

/* 數值區間：兩個欄位夾一個 ~。後台把該組打開才會輸出。 */
.ya-wr-search__range {
	display: flex;
	align-items: center;
	gap: .4rem;
}
.ya-wr-search__num {
	flex: 1 1 0;
	padding-right: .4rem;
	text-align: center;
}
.ya-wr-search__tilde {
	flex: 0 0 auto;
	font-family: var(--ya-en);
	font-size: .9rem;
	color: var(--ya-muted-2);
}

/* 送出／重設。送出是實心主色款（與 liaise 的送出鈕同一套語言）。 */
.ya-wr-search__act {
	display: flex;
	gap: .5rem;
	margin-top: .2rem;
}
.ya-wr-search__go,
.ya-wr-search__reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	padding: .6rem .8rem;
	border: 1px solid var(--ya-ac);
	font-family: inherit;
	font-size: .8rem;
	letter-spacing: .12em;
	cursor: pointer;
	transition: background var(--ya-t-col), color var(--ya-t-col),
	            border-color var(--ya-t-col), gap .4s var(--ya-ease);
}
.ya-wr-search__go {
	flex: 1 1 auto;
	background: var(--ya-ac);
	color: var(--ya-white);
}
.ya-wr-search__go i { font-size: .82rem; line-height: 1; }
.ya-wr-search__go:hover {
	background: var(--ya-ocean);
	border-color: var(--ya-ocean);
	gap: .7rem;
}
.ya-wr-search__reset {
	flex: 0 0 auto;
	border-color: var(--ya-line);
	background: var(--ya-white);
	color: var(--ya-muted);
}
.ya-wr-search__reset:hover {
	border-color: var(--ya-ocean);
	color: var(--ya-ocean);
}

/* 行動版：左區塊會落到主內容下方、寬度變成整頁，此時兩欄排比較不浪費。
   ⚠ 斷點與第 8-9 節、第 7 節一致（900px）。 */
@media (max-width: 900px) {
	.ya-wr-search {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 1rem 1.1rem;
		align-items: end;
	}
	.ya-wr-search__act { grid-column: 1 / -1; }
}


/* =========================================================================
   ── 10. 購物車 ＋ 訂購資料（階段 6C-1）────────────────────────────────
   設計稿：`isCart`（:880-970，畫板「購物車」）
           ＋ `isCheckout`（:971-1081）的訂購人／配送／備註／發票四段
   樣板：modules/wr/wr_cart.html　行為：js/wr.js 第 6 節

   🔴 設計稿這一段與第 8 節一樣**全是字面色**。與 palette 相同的
      （#23303A #12303F #1F4E6B #BE8574 #8496a3 #b6c1cb #5b6875、
      rgba(31,78,107,.12)／.08／.16／.14）已換成 --ya- 變數，其餘照字面抄。

   ⚠ 本節的響應式獨立寫在 10-9，不與第 7 節（6A）互相覆蓋。
   ⚠ 全站無圓角，這一整節不要出現 border-radius。
   ========================================================================= */

/* ── 10-1. 步驟條（設計稿 :884-895）───────────────────────────────────
   四步平均分配，每一步底下一條 2px 線；已完成／進行中用玫瑰金，未到用淡線。
   ⚠ 是 ol 但不要編號記號 —— 序號是設計稿自己的 01/02 字樣。 */
.ya-wr-steps {
	display: flex;
	align-items: center;
	gap: 1.6rem;
	flex-wrap: wrap;
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	padding: 0;
	list-style: none;
}
.ya-wr-steps__i {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	flex: 1 1 8rem;
	min-width: 7rem;
	color: var(--ya-muted-2);
}
.ya-wr-steps__i::after {
	content: '';
	display: block;
	height: 2px;
	background: rgba(31,78,107,.14);
}
.ya-wr-steps__i.is-on { color: var(--ya-ink); }
.ya-wr-steps__i.is-on::after { background: var(--ya-ac); }
.ya-wr-steps__no {
	font-family: var(--ya-en);
	font-style: italic;
	font-size: .78rem;
	margin-right: .5rem;
}
.ya-wr-steps__label {
	font-family: var(--ya-serif);
	font-size: .92rem;
	letter-spacing: .1em;
}

/* ── 10-2. 兩欄骨架（設計稿 :905 的 cartCols）─────────────────────────
   左＝清單＋訂購資料，右＝訂單摘要（sticky）。
   ⚠ sticky 的 top 用全站量測出來的頁首高 `--ya-head-h`（style.css 由
     ResizeObserver 維護）＋ 一點呼吸，不要寫死像素。 */
.ya-wr-cart {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(280px, 28vw, 360px);
	gap: clamp(2rem, 4vw, 3rem);
	align-items: start;
}
.ya-wr-cart__main { min-width: 0; }
.ya-wr-cart__side {
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
	position: sticky;
	top: calc(var(--ya-head-h) + 1.2rem);
}

/* ── 10-3. 商品清單卡（設計稿 :906-937）───────────────────────────── */
.ya-wr-cart__list {
	border: 1px solid var(--ya-line);
	background: var(--ya-white);
	min-width: 0;
}
.ya-wr-cart__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.4rem;
	border-bottom: 1px solid var(--ya-line);
	font-size: .8rem;
	letter-spacing: .12em;
	color: var(--ya-muted);
}

/* 一列商品：左縮圖 88px、右內容。
   🔴 列裡有兩個 form 元素（更新／刪除），它們**不是 grid 項目** ——
      grid 只分「縮圖 | 內容」兩格，兩個 form 各自待在內容格裡當一般容器。 */
.ya-wr-cart__row {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: 1.2rem;
	padding: 1.3rem 1.4rem;
	border-bottom: 1px solid var(--ya-line-soft);
}
.ya-wr-cart__thumb {
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border: 1px solid rgba(31,78,107,.1);
	background: var(--ya-paper-warm);
}
.ya-wr-cart__thumb img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--ya-t-img) var(--ya-ease);
}
.ya-wr-cart__row:hover .ya-wr-cart__thumb img { transform: scale(1.06); }
/* 無圖降級（與 6A 商品卡的 .ya-wr-card__noimg 同一種處理） */
.ya-wr-cart__noimg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%; height: 100%;
	color: var(--ya-muted-2);
	font-size: 1.4rem;
}

.ya-wr-cart__body {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	min-width: 0;
}
.ya-wr-cart__titlerow {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}
.ya-wr-cart__title {
	flex: 1 1 auto;
	font-family: var(--ya-serif);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--ya-ink);
	text-wrap: pretty;
	transition: color var(--ya-t-col) var(--ya-ease);
}
.ya-wr-cart__title:hover { color: var(--ya-ac); }
.ya-wr-cart__spec {
	margin: 0;
	font-size: .8rem;
	letter-spacing: .08em;
	color: var(--ya-muted);
}

/* 刪除鈕：設計稿是一個 × 圖示，hover 轉玫瑰金。
   ⚠ 它包在自己的 form 裡，那個 form 不能佔位 → flex:0 0 auto、無邊距。 */
.ya-wr-cart__del { flex: 0 0 auto; }
.ya-wr-cart__delbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .2rem;
	border: 0;
	background: none;
	color: var(--ya-muted-2);
	font-size: .85rem;
	line-height: 1;
	cursor: pointer;
	transition: color var(--ya-t-col) var(--ya-ease);
}
.ya-wr-cart__delbtn:hover { color: var(--ya-ac); }

/* 數量列：stepper ／ 更新鈕 ／ 單價 ／ 小計（小計靠右） */
.ya-wr-cart__ctrl {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	flex-wrap: wrap;
	margin-top: .3rem;
}
.ya-wr-cart__upd {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
}
.ya-wr-cart__unit {
	font-size: .82rem;
	color: var(--ya-muted);
}
.ya-wr-cart__sum {
	margin-left: auto;
	font-family: var(--ya-en);
	font-size: 1.2rem;
	color: var(--ya-ink);
	white-space: nowrap;
}

/* stepper（設計稿 :922-926）。
   ⚠ 數字輸入框拿掉瀏覽器自己的上下箭頭 —— 設計稿的加減是左右兩顆。
   ⚠ 沒有 JS 時兩顆按鈕沒作用，但輸入框仍可直接打字（刻意不加 readonly）。 */
.ya-wr-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid rgba(31,78,107,.16);
}
.ya-wr-qty__b {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.2rem; height: 2.2rem;
	border: 0;
	background: none;
	color: var(--ya-ocean);
	font-size: .9rem;
	cursor: pointer;
	transition: background var(--ya-t-col), color var(--ya-t-col);
}
.ya-wr-qty__b:hover { background: var(--ya-paper-warm); color: var(--ya-ac); }
.ya-wr-qty__n {
	width: 2.6rem;
	height: 2.2rem;
	border: 0;
	background: none;
	text-align: center;
	font-family: var(--ya-en);
	font-size: 1rem;
	color: var(--ya-ink);
	outline: 0;
	-moz-appearance: textfield;
	appearance: textfield;
}
.ya-wr-qty__n::-webkit-outer-spin-button,
.ya-wr-qty__n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ya-wr-cart__updbtn {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .42rem .8rem;
	border: 1px solid var(--ya-line);
	background: var(--ya-white);
	font-size: .78rem;
	letter-spacing: .08em;
	color: var(--ya-ocean);
	white-space: nowrap;
	cursor: pointer;
	transition: border-color var(--ya-t-col), background var(--ya-t-col), color var(--ya-t-col);
}
.ya-wr-cart__updbtn:hover {
	border-color: var(--ya-ac);
	background: var(--ya-ac);
	color: var(--ya-white);
}

/* 清單底部：只剩「繼續選購」（裁示 1：整車更新鈕不做） */
.ya-wr-cart__foot {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 1.2rem 1.4rem;
}
.ya-wr-cart__back {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	font-size: .84rem;
	letter-spacing: .12em;
	color: var(--ya-ocean);
	transition: gap .4s var(--ya-ease), color var(--ya-t-col) var(--ya-ease);
}
.ya-wr-cart__back:hover { gap: 1rem; color: var(--ya-ac); }

/* ── 10-4. 空車 ───────────────────────────────────────────────────── */
.ya-wr-cart__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.1rem;
	padding: clamp(3rem, 8vw, 5rem) 1.5rem;
	border: 1px solid var(--ya-line);
	background: var(--ya-white);
	text-align: center;
}
.ya-wr-cart__emptyico { font-size: 2rem; color: var(--ya-muted-2); }
.ya-wr-cart__emptytx {
	margin: 0;
	font-family: var(--ya-serif);
	font-size: 1.05rem;
	letter-spacing: .1em;
	color: var(--ya-body-2);
}

/* ── 10-5. 訂單摘要（設計稿 :940-956）─────────────────────────────── */
.ya-wr-sum {
	border: 1px solid var(--ya-line);
	background: var(--ya-white);
	padding: 1.4rem;
}
.ya-wr-sum__t {
	margin: 0 0 1.2rem;
	font-family: var(--ya-serif);
	font-weight: 400;
	font-size: 1.05rem;
	letter-spacing: .1em;
	color: var(--ya-ink);
}
.ya-wr-sum__r {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .55rem 0;
	font-size: .88rem;
	color: var(--ya-body-2);
}
.ya-wr-sum__v {
	font-family: var(--ya-en);
	font-size: 1rem;
	color: var(--ya-ink);
	white-space: nowrap;
}
/* 「選擇配送方式後計算」那句提示：不是金額，所以不用英文數字體、字級降一階 */
.ya-wr-sum__v--hint {
	font-family: var(--ya-sans);
	font-size: .8rem;
	color: var(--ya-muted);
	white-space: normal;
	text-align: right;
}
.ya-wr-sum__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 1rem 0 0;
	margin-top: .8rem;
	border-top: 1px solid var(--ya-line);
	font-family: var(--ya-serif);
	font-size: 1rem;
	letter-spacing: .1em;
	color: var(--ya-ink);
}
.ya-wr-sum__big {
	font-family: var(--ya-en);
	font-size: 1.8rem;
	color: var(--ya-ac);
	white-space: nowrap;
}

/* 主要按鈕（設計稿 :954 的「前往結帳」）—— 深藍底、hover 轉玫瑰金。
   `--full` 是摘要卡裡那顆滿寬版；空車頁的「前往選購」用一般寬。 */
.ya-wr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .7rem;
	padding: .95rem 1.6rem;
	border: 0;
	background: var(--ya-deep);
	color: var(--ya-white);
	font-family: var(--ya-sans);
	font-size: .88rem;
	letter-spacing: .16em;
	cursor: pointer;
	transition: background var(--ya-t-col) var(--ya-ease), gap .4s var(--ya-ease);
}
.ya-wr-btn:hover { background: var(--ya-ac); color: var(--ya-white); gap: 1rem; }
.ya-wr-btn--full { display: flex; width: 100%; margin-top: 1.3rem; }

/* ── 10-6. 優惠代碼（設計稿 :957-964）──────────────────────────────
   ⚠ 本站後台 order_coupon=0，這張卡目前不會輸出。 */
.ya-wr-cpn {
	border: 1px solid var(--ya-line);
	background: var(--ya-white);
	padding: 1.4rem;
}
.ya-wr-cpn__t {
	margin: 0 0 .8rem;
	font-size: .86rem;
	letter-spacing: .1em;
	color: var(--ya-ink);
}
.ya-wr-cpn__row { display: flex; gap: .5rem; }
.ya-wr-cpn__row .ya-wr-fld__in { flex: 1 1 auto; min-width: 0; }
.ya-wr-cpn__go {
	display: inline-flex;
	align-items: center;
	padding: 0 1.1rem;
	border: 1px solid rgba(31,78,107,.2);
	background: none;
	font-size: .82rem;
	letter-spacing: .12em;
	color: var(--ya-ocean);
	cursor: pointer;
	transition: border-color var(--ya-t-col), color var(--ya-t-col);
}
.ya-wr-cpn__go:hover { border-color: var(--ya-ac); color: var(--ya-ac); }

/* ── 10-7. 訂購資料表單（設計稿結帳畫板的左半）──────────────────────
   欄位外觀沿用 liaise 表單那套「框線款」的語彙（liaise.css 第 4 節），
   但**不共用 class** —— 兩個模組的表單結構不同，共用會互相牽制。 */
.ya-wr-form { margin-top: clamp(2rem, 4vw, 2.8rem); }
.ya-wr-form__sec {
	border: 1px solid var(--ya-line);
	background: var(--ya-white);
	padding: 1.4rem;
	margin-bottom: 1.4rem;
}
.ya-wr-form__legend {
	margin: 0 0 1.2rem;
	font-family: var(--ya-serif);
	font-weight: 400;
	font-size: 1.05rem;
	letter-spacing: .1em;
	color: var(--ya-ink);
}
.ya-wr-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.1rem 1.2rem;
}
.ya-wr-fld--wide { grid-column: 1 / -1; }
.ya-wr-form__note {
	margin: 1rem 0 0;
	font-size: .82rem;
	line-height: 1.8;
	color: var(--ya-muted);
}

.ya-wr-fld { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.ya-wr-fld__lb {
	font-size: .8rem;
	letter-spacing: .1em;
	color: var(--ya-body-2);
}
.ya-wr-fld__req {
	margin-left: .3rem;
	font-style: normal;
	color: var(--ya-ac);
}
.ya-wr-fld__in {
	width: 100%;
	padding: .7rem .9rem;
	border: 1px solid rgba(31,78,107,.16);
	background: var(--ya-white);
	outline: 0;
	font-family: var(--ya-sans);
	font-size: .85rem;
	color: var(--ya-ink);
	transition: border-color var(--ya-t-col) var(--ya-ease);
}
.ya-wr-fld__in:focus { border-color: var(--ya-ac); }
.ya-wr-fld__in::placeholder { color: var(--ya-muted-2); }

/* 配送方式：整塊可點的選項卡（label 包 radio，與 6B 的規格膠囊同一套做法）。
   🔴 選取態用 :has() 驅動，不必等 JS —— 與 wr.css 第 8-4 節同一個理由。 */
.ya-wr-ships {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: .8rem;
}
.ya-wr-ship { display: block; cursor: pointer; }
.ya-wr-ship input {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.ya-wr-ship__box {
	display: flex;
	align-items: center;
	gap: .8rem;
	height: 100%;
	padding: .9rem 1rem;
	border: 1px solid rgba(31,78,107,.16);
	background: var(--ya-white);
	transition: border-color var(--ya-t-col), background var(--ya-t-col);
}
.ya-wr-ship:hover .ya-wr-ship__box { border-color: var(--ya-ac); }
.ya-wr-ship:has(input:checked) .ya-wr-ship__box {
	border-color: var(--ya-ac);
	background: var(--ya-paper-warm);
}
/* 鍵盤操作也要看得見焦點（radio 被視覺隱藏了，焦點環要自己畫） */
.ya-wr-ship:has(input:focus-visible) .ya-wr-ship__box { outline: 2px solid var(--ya-ac); outline-offset: 2px; }
/* 超過超商材積上限時由 JS 停用該選項 */
.ya-wr-ship:has(input:disabled) { cursor: not-allowed; opacity: .45; }
.ya-wr-ship__ico { font-size: 1.05rem; color: var(--ya-ac); flex: 0 0 auto; }
.ya-wr-ship__tx { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.ya-wr-ship__t { font-size: .88rem; letter-spacing: .06em; color: var(--ya-ink); }
.ya-wr-ship__n { font-size: .76rem; color: var(--ya-muted); }

/* 發票：勾了才顯示抬頭／統編。
   🔴 **純 CSS，不寫 JS** —— 模組原樣板是 JS 改 style.display。
   ⚠ 預設藏起來用 display:none，不是 visibility —— 藏起來時不要佔位。
   ⚠ :has() 是從整個區段往下找勾選框，所以勾選框必須與欄位同在
     .ya-wr-form__sec--inv 底下（樣板已如此）。 */
.ya-wr-form__grid--inv { display: none; margin-top: 1.1rem; }
.ya-wr-form__sec--inv:has(#ya-inv:checked) .ya-wr-form__grid--inv { display: grid; }

.ya-wr-check {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	cursor: pointer;
	font-size: .85rem;
	color: var(--ya-body-2);
}
.ya-wr-check input {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.ya-wr-check__box {
	display: inline-block;
	width: 1rem; height: 1rem;
	border: 1px solid rgba(31,78,107,.3);
	background: var(--ya-white);
	position: relative;
	transition: border-color var(--ya-t-col), background var(--ya-t-col);
}
.ya-wr-check:has(input:checked) .ya-wr-check__box {
	border-color: var(--ya-ac);
	background: var(--ya-ac);
}
/* 勾勾用兩條邊框轉 45 度畫出來，不引圖也不用字型 */
.ya-wr-check:has(input:checked) .ya-wr-check__box::after {
	content: '';
	position: absolute;
	left: .3rem; top: .08rem;
	width: .28rem; height: .55rem;
	border: solid var(--ya-white);
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
}
.ya-wr-check:has(input:focus-visible) .ya-wr-check__box { outline: 2px solid var(--ya-ac); outline-offset: 2px; }

/* ── 10-9. 響應式 ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
	/* 右欄摘要落到下面，sticky 取消（黏在底下會擋住表單） */
	.ya-wr-cart { grid-template-columns: 1fr; }
	.ya-wr-cart__side { position: static; }
}
@media (max-width: 560px) {
	.ya-wr-steps { gap: .8rem; }
	.ya-wr-steps__i { flex: 1 1 5rem; min-width: 5rem; }
	.ya-wr-steps__label { font-size: .82rem; letter-spacing: .04em; }
	.ya-wr-cart__row { grid-template-columns: 64px minmax(0, 1fr); gap: .9rem; padding: 1.1rem; }
	.ya-wr-cart__ctrl { gap: .8rem; }
	/* 小計換到第二行仍靠右 */
	.ya-wr-cart__sum { flex: 1 0 100%; text-align: right; margin-left: 0; }
	.ya-wr-form__grid { grid-template-columns: 1fr; }
}


/* =========================================================================
   ── 11. 訂單確認頁（階段 6C-2）────────────────────────────────────────
   設計稿：`isCheckout`（:971-1081）的付款方式段 ＋ 右欄「訂單確認」卡（:1057-1074）
   樣板：modules/wr/wr_cart_confirm.html　行為：js/wr.js 第 7 節

   🔴 這一節**很短，因為絕大部分沿用第 10 節** ——
      兩欄骨架 `.ya-wr-cart` / `__main` / `__side`、步驟條 `.ya-wr-steps`、
      摘要卡 `.ya-wr-sum*`、主要按鈕 `.ya-wr-btn*`、表單區段 `.ya-wr-form__sec`、
      選項卡 `.ya-wr-ship*`（付款方式與配送方式是同一個元件）全部共用。
      新的只有「訂購資料回顧」與「商品縮圖列」兩組。
   ⚠ 因此 `.ya-wr--confirm` 這個修飾 class 目前沒有任何規則掛在上面 ——
     它是留給日後只想動確認頁時的掛點，不要因為「沒人用」就把它從樣板拿掉。
   ========================================================================= */

/* ── 11-1. 訂購資料回顧（設計稿沒有這一段，見樣板檔頭）─────────────
   左標籤右內容的定義清單。標籤固定寬，內容可換行。 */
.ya-wr-rev { margin: 0; }
.ya-wr-rev__r {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr);
	gap: .8rem;
	padding: .55rem 0;
	border-bottom: 1px solid var(--ya-line-soft);
}
.ya-wr-rev__r:last-child { border-bottom: 0; }
.ya-wr-rev dt {
	font-size: .8rem;
	letter-spacing: .1em;
	line-height: 1.9;
	color: var(--ya-muted);
}
.ya-wr-rev dd {
	margin: 0;
	font-size: .88rem;
	line-height: 1.9;
	color: var(--ya-ink);
	overflow-wrap: anywhere;
}

/* ── 11-2. 訂單確認卡的商品縮圖列（設計稿 :1060-1069）───────────────
   48px 方圖 ＋ 品名／規格×數量 ＋ 小計（靠右）。 */
.ya-wr-mini {
	display: flex;
	gap: .9rem;
	padding: .7rem 0;
	border-bottom: 1px solid var(--ya-line-soft);
}
.ya-wr-mini__pic {
	display: block;
	width: 48px; height: 48px;
	flex: 0 0 auto;
	overflow: hidden;
	background: var(--ya-paper-warm);
}
.ya-wr-mini__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ya-wr-mini__tx { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.ya-wr-mini__t {
	font-size: .86rem;
	line-height: 1.6;
	color: var(--ya-ink);
	text-wrap: pretty;
}
.ya-wr-mini__s { font-size: .76rem; color: var(--ya-muted); }
.ya-wr-mini__v {
	margin-left: auto;
	flex: 0 0 auto;
	font-family: var(--ya-en);
	font-size: .98rem;
	color: var(--ya-ink);
	white-space: nowrap;
}

/* ── 11-3. 費用明細：縮圖列與費用列之間的分隔 ────────────────────── */
.ya-wr-sum__rules {
	padding-top: .6rem;
	margin-top: .4rem;
}
/* 費用列後面那句小字說明（免運門檻、折價券訊息）——
   放在標籤那一側、換行顯示，不要跟金額擠在一起。 */
.ya-wr-sum__note {
	display: block;
	margin-top: .15rem;
	font-size: .74rem;
	line-height: 1.7;
	color: var(--ya-muted-2);
}
/* 折扣是負數，用重點色與其他金額區隔 */
.ya-wr-sum__v--minus { color: var(--ya-ac); }

/* ── 11-4. 只有 hidden 欄位的送出表單 ──────────────────────────────
   ⚠ 不能用 display:none —— 那會讓某些瀏覽器在還原表單狀態時出怪事，
     而且它本來就沒有可見內容。用零尺寸就夠了。 */
.ya-wr-hiddenform { margin: 0; padding: 0; border: 0; }


/* =========================================================================
   ── 12. 左側「購物車」區塊（階段 6C 追加 / 2026-09-09）──────────────────
   來源：wr 模組自己的區塊（後台「購物車」，本機 bid 28、side=0＝canvas_left、
         module_id=7＝只在 wr 模組頁出現）
   樣板：modules/wr/blocks/wr_block_cart.html（佈景覆寫）
   行為：js/wr.js 第 8 節

   ⚠ **設計稿沒有這個區塊的版型**（見樣板檔頭）。這裡是依全站語彙自訂的：
     框線、無圓角、玫瑰金重點色、英文數字用 Cormorant。
   ⚠ 欄寬（260px）與行動版單欄化由 **style.css** 的 `.ya-zones` 負責，本節不碰。
   ⚠ 區塊標題（「購物車」三個字）是 `theme_block.tpl` 吐的 `.ya-block__title`，
     要改文字請到後台改區塊標題，不要在這裡加 ::before。
   🔴 260px 是很窄的欄 —— 這一節所有橫向排列都要能換行或截斷，
      任何 `white-space: nowrap` 都只准用在金額那種短字串上。
   ========================================================================= */

/* 把全站 .ya-block 的預設內距收掉，讓每一列可以拉到滿寬做 hover 底色
   （做法與第 9 節的商品分類區塊一致）*/
.ya-zone-side .ya-block:has(.ya-wr-mc) .ya-block__body { padding: 0; }

.ya-wr-mc { display: flex; flex-direction: column; }

/* ── 12-1. 商品列 ───────────────────────────────────────────────────
   44px 縮圖 ／ 文字 ／ 刪除鈕。
   🔴 中間欄一定要 `minmax(0, 1fr)` —— 只寫 `1fr` 的話長品名會把整個 grid
      撐爆，在 260px 的欄裡會直接溢出到主內容區。 */
.ya-wr-mc__row {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	gap: .7rem;
	align-items: start;
	padding: .8rem 1rem;
	border-bottom: 1px solid var(--ya-line-soft);
	transition: background var(--ya-t-col) var(--ya-ease);
}
.ya-wr-mc__row:hover { background: var(--ya-paper-warm); }

.ya-wr-mc__pic {
	display: block;
	width: 44px; height: 44px;
	overflow: hidden;
	background: var(--ya-paper-warm);
	border: 1px solid rgba(31,78,107,.1);
}
.ya-wr-mc__pic img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--ya-t-img) var(--ya-ease);
}
.ya-wr-mc__row:hover .ya-wr-mc__pic img { transform: scale(1.08); }
.ya-wr-mc__noimg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%; height: 100%;
	color: var(--ya-muted-2);
	font-size: .9rem;
}

.ya-wr-mc__tx { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
/* 品名限兩行，超出以省略號收尾 —— 260px 欄裡長品名會把區塊撐得很高 */
.ya-wr-mc__t {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: .82rem;
	line-height: 1.6;
	color: var(--ya-ink);
	transition: color var(--ya-t-col) var(--ya-ease);
}
.ya-wr-mc__t:hover { color: var(--ya-ac); }
.ya-wr-mc__s {
	font-size: .72rem;
	color: var(--ya-muted);
	overflow-wrap: anywhere;
}
.ya-wr-mc__v {
	font-family: var(--ya-en);
	font-size: .95rem;
	color: var(--ya-ink);
	white-space: nowrap;
}

/* 刪除鈕。form 只是容器，不佔版面。 */
.ya-wr-mc__del { display: block; }
.ya-wr-mc__delbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .15rem;
	border: 0;
	background: none;
	color: var(--ya-muted-2);
	font-size: .72rem;
	line-height: 1;
	cursor: pointer;
	transition: color var(--ya-t-col) var(--ya-ease);
}
.ya-wr-mc__delbtn:hover { color: var(--ya-ac); }
/* JS 送出中：避免連點兩次送出兩個請求 */
.ya-wr-mc__row.is-busy { opacity: .45; pointer-events: none; }

/* ── 12-2. 空車 ─────────────────────────────────────────────────── */
.ya-wr-mc__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .6rem;
	padding: 1.8rem 1rem;
	text-align: center;
}
.ya-wr-mc__emptyico { font-size: 1.3rem; color: var(--ya-muted-2); }
.ya-wr-mc__emptytx {
	margin: 0;
	font-size: .82rem;
	letter-spacing: .06em;
	color: var(--ya-muted);
}

/* ── 12-3. 合計 ＋ 前往結帳 ─────────────────────────────────────── */
.ya-wr-mc__foot { padding: 1rem; }
.ya-wr-mc__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .6rem;
	padding-bottom: .9rem;
	margin-bottom: .9rem;
	border-top: 1px solid var(--ya-line);
	padding-top: .9rem;
}
.ya-wr-mc__cnt {
	font-size: .78rem;
	letter-spacing: .1em;
	color: var(--ya-muted);
}
.ya-wr-mc__big {
	font-family: var(--ya-en);
	font-size: 1.3rem;
	color: var(--ya-ac);
	white-space: nowrap;
}

/* 前往結帳：深藍實心滿寬，與購物車頁的主要按鈕同一款，只是小一號。
   ⚠ 不共用 `.ya-wr-btn` —— 那顆的內距與字級是為主內容區訂的，
     塞進 260px 的側欄會太胖。 */
.ya-wr-mc__go {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	padding: .75rem 1rem;
	background: var(--ya-deep);
	color: var(--ya-white);
	font-size: .82rem;
	letter-spacing: .12em;
	transition: background var(--ya-t-col) var(--ya-ease), gap .4s var(--ya-ease);
}
.ya-wr-mc__go:hover { background: var(--ya-ac); color: var(--ya-white); gap: .85rem; }
.ya-wr-mc__go i { font-size: .78rem; }


/* =========================================================================
   ── 13. 訂單頁：查詢表單 ＋ 訂單清單（階段 6C-3a）─────────────────────
   設計稿：`isOrders`（:1082-，畫板「訂單查詢」）
   樣板：modules/wr/wr_order.html（佈景覆寫）　行為：無（全部 CSS）

   ⚠ 這一節只涵蓋**清單與查詢表單**。訂單明細與留言是 6C-3b／6C-3c，
     樣板那一段目前仍是模組原樣板照抄，**沒有任何樣式掛在它上面**。
   ⚠ 抬頭 `.ya-wr-sechead*`、空狀態 `.ya-wr-cart__empty*`、主要按鈕 `.ya-wr-btn`、
     分頁 `.ya-wr-pager` 都沿用既有節，不重複定義。

   ⬜ 使用者裁示（2026-09-09）：出貨進度時間軸不做、列印訂購單不做。
   ========================================================================= */

/* ── 13-1. 訂單清單 ─────────────────────────────────────────────────
   🔴 表格有七欄，窄螢幕一定會擠 —— 用**橫向捲動**處理，不做「每列變卡片」。
      七個欄位攤成卡片反而更難掃視，而且訂單編號與金額需要對齊比較。
   ⚠ 捲動容器要有自己的 overflow-x，別讓整頁出現橫向捲軸。 */
.ya-wr-ord {
	border: 1px solid var(--ya-line);
	background: var(--ya-white);
}
.ya-wr-ord__scroll { overflow-x: auto; }
.ya-wr-ord__tb {
	width: 100%;
	min-width: 720px;          /* 低於這個寬度就讓它捲，欄位不再互相擠壓 */
	border-collapse: collapse;
	font-size: .84rem;
}
.ya-wr-ord__tb th {
	padding: .9rem 1rem;
	border-bottom: 1px solid var(--ya-line);
	font-family: var(--ya-sans);
	font-weight: 400;
	font-size: .78rem;
	letter-spacing: .12em;
	color: var(--ya-muted);
	text-align: left;
	white-space: nowrap;
}
.ya-wr-ord__tb td {
	padding: .95rem 1rem;
	border-bottom: 1px solid var(--ya-line-soft);
	color: var(--ya-body-2);
	vertical-align: middle;
}
.ya-wr-ord__tb tbody tr:last-child td { border-bottom: 0; }
.ya-wr-ord__tb tbody tr { transition: background var(--ya-t-col) var(--ya-ease); }
.ya-wr-ord__tb tbody tr:hover { background: var(--ya-paper-warm); }

/* 訂單編號與金額用英文數字體，並且不換行 */
.ya-wr-ord__no {
	font-family: var(--ya-en);
	font-size: .98rem;
	letter-spacing: .04em;
	color: var(--ya-ink);
	white-space: nowrap;
}
.ya-wr-ord__sum {
	font-family: var(--ya-en);
	font-size: 1rem;
	color: var(--ya-ink);
	white-space: nowrap;
}
.ya-wr-ord__date { white-space: nowrap; font-size: .8rem; color: var(--ya-muted); }
.ya-wr-ord__pay  { white-space: nowrap; }
.ya-wr-ord__pst  { font-size: .8rem; }
.ya-wr-ord__pst a { color: var(--ya-ac); text-decoration: underline; text-underline-offset: .2em; }
.ya-wr-ord__pst a:hover { color: var(--ya-deep); }
/* 「動作」那一欄的表頭：留著給螢幕報讀，視覺上不必強調 */
.ya-wr-ord__thact { color: var(--ya-muted-2); }

/* 檢視鈕。⚠ 它包在自己的 <form> 裡（`?oid=N` 對非本人會被模組轉走，
   所以只能用 POST 帶四個欄位走 op=search），form 不佔版面。 */
.ya-wr-ord__act { display: inline-block; }
.ya-wr-ord__view {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .42rem .9rem;
	border: 1px solid var(--ya-line);
	background: var(--ya-white);
	font-family: var(--ya-sans);
	font-size: .78rem;
	letter-spacing: .1em;
	color: var(--ya-ocean);
	white-space: nowrap;
	cursor: pointer;
	transition: border-color var(--ya-t-col), background var(--ya-t-col),
	            color var(--ya-t-col), gap .4s var(--ya-ease);
}
.ya-wr-ord__view:hover {
	border-color: var(--ya-ac);
	background: var(--ya-ac);
	color: var(--ya-white);
	gap: .7rem;
}
.ya-wr-ord__view i { font-size: .72rem; }

/* ── 13-2. 訂單狀態標 ───────────────────────────────────────────────
   配色照設計稿的三段（:2203-2204）：
     已完成 → ocean　處理中 → 玫瑰金　其他 → 灰
   模組的六種狀態（language/tchinese_utf8/main.php:65-70）對應：
     2 已出貨 ＝ 已完成；0 訂單處理中／1 出貨準備中 ＝ 處理中；
     3 申請取消／4 等待運回／5 已退款 ＝ 其他。
   ⚠ 全站無圓角，膠囊也是方的。 */
.ya-wr-tag {
	display: inline-block;
	padding: .3rem .7rem;
	background: rgba(35,48,58,.05);
	font-size: .76rem;
	letter-spacing: .08em;
	color: var(--ya-muted);
	white-space: nowrap;
}
.ya-wr-tag--done  { background: rgba(31,78,107,.07); color: var(--ya-ocean); }
.ya-wr-tag--doing { background: rgba(190,133,116,.1); color: var(--ya-ac); }

/* ── 13-3. 查詢表單 ＋ `.ya-wr-xform`（XOOPS 表單接管層）──────────────
   🔴 `$action_form` 是模組 render 好的整串 XoopsThemeForm（Bootstrap5 renderer）
      —— **結構改不到，只能從外面蓋**。
      做法與階段 5 的 liaise、6B 的詢問表單相同：用 `.ya-wr-xform`
      當作用域，把 BS5 吐出來的 class 逐一接管。

   🔴 **`.ya-wr-xform` 是共用的**（2026-09-09 由 6C-3c 改名而來，原本叫
      `.ya-wr-find__form`，只服務查詢表單）。目前有兩個使用者：
        · 訂單查詢表單 `$action_form`（13 節）
        · 訂單留言表單 `$feedback_form`（15 節）
      日後 6D 還會有幾支模組 render 的表單，**一律掛這個 class，不要再複製一份**。
      個別頁面的差異寫在各自那一節（例如 15 節的留言表單只留一個欄位）。

   ⚠ 本站後台把 CAPTCHA 關了，`XoopsFormCaptcha` render 成空字串 ——
     所以這兩張表單裡都**沒有** captcha 欄位（也因此 op=search／op=feedback
     實際上不驗 captcha）。這是後台設定，不是漏做。
   ⚠ 不要去改 style.css 的 BS 相容層 —— 那是全站的，動了會波及別的模組。 */
.ya-wr-find {
	margin-top: clamp(2rem, 4vw, 2.8rem);
	border: 1px solid var(--ya-line);
	background: var(--ya-white);
	padding: clamp(1.4rem, 3vw, 2rem);
}
.ya-wr-find__t {
	margin: 0 0 .7rem;
	font-family: var(--ya-serif);
	font-weight: 400;
	font-size: 1.05rem;
	letter-spacing: .1em;
	color: var(--ya-ink);
}
.ya-wr-find__note {
	margin: 0 0 1.4rem;
	max-width: 62ch;
	font-size: .84rem;
	line-height: 1.9;
	color: var(--ya-body-2);
}
.ya-wr-find__note strong { color: var(--ya-ink); font-weight: 400; }

/* 模組表單的外觀接管（BS5 → 本佈景語彙）。
   ⚠ 選擇器一律限定在 .ya-wr-xform 底下，不外溢。 */
.ya-wr-xform table,
.ya-wr-xform .table { width: 100%; border-collapse: collapse; }
.ya-wr-xform legend,
.ya-wr-xform caption {
	padding: 0 0 1rem;
	font-family: var(--ya-serif);
	font-size: .95rem;
	letter-spacing: .1em;
	color: var(--ya-ink);
	text-align: left;
}
.ya-wr-xform .row { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-bottom: 1.1rem; }
.ya-wr-xform label,
.ya-wr-xform .col-form-label,
.ya-wr-xform .form-label {
	flex: 0 0 auto;
	min-width: 6rem;
	font-size: .8rem;
	letter-spacing: .1em;
	color: var(--ya-body-2);
	padding: 0;
}
.ya-wr-xform input[type="text"],
.ya-wr-xform input[type="email"],
.ya-wr-xform input[type="tel"],
.ya-wr-xform .form-control {
	flex: 1 1 14rem;
	width: auto;
	min-width: 0;
	padding: .7rem .9rem;
	border: 1px solid rgba(31,78,107,.16);
	border-radius: 0;
	background: var(--ya-white);
	outline: 0;
	box-shadow: none;
	font-family: var(--ya-sans);
	font-size: .85rem;
	color: var(--ya-ink);
	transition: border-color var(--ya-t-col) var(--ya-ease);
}
.ya-wr-xform input:focus,
.ya-wr-xform .form-control:focus { border-color: var(--ya-ac); box-shadow: none; }

/* CAPTCHA 那一段：圖與輸入框排成一列，圖不要被拉伸 */
.ya-wr-xform img { vertical-align: middle; max-width: 100%; }

/* 送出／清除。BS5 的 .btn 一律接管成本佈景的兩款鈕。 */
.ya-wr-xform .btn,
.ya-wr-xform button[type="submit"],
.ya-wr-xform input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	padding: .8rem 1.6rem;
	border: 0;
	border-radius: 0;
	background: var(--ya-deep);
	color: var(--ya-white);
	font-family: var(--ya-sans);
	font-size: .84rem;
	letter-spacing: .14em;
	cursor: pointer;
	transition: background var(--ya-t-col) var(--ya-ease);
}
.ya-wr-xform .btn:hover,
.ya-wr-xform button[type="submit"]:hover,
.ya-wr-xform input[type="submit"]:hover { background: var(--ya-ac); color: var(--ya-white); }
/* 「清除」是次要動作 → 框線款 */
.ya-wr-xform button[type="reset"],
.ya-wr-xform input[type="reset"] {
	display: inline-flex;
	align-items: center;
	padding: .8rem 1.4rem;
	border: 1px solid var(--ya-line);
	border-radius: 0;
	background: var(--ya-white);
	font-family: var(--ya-sans);
	font-size: .84rem;
	letter-spacing: .14em;
	color: var(--ya-ocean);
	cursor: pointer;
	transition: border-color var(--ya-t-col), color var(--ya-t-col);
}
.ya-wr-xform button[type="reset"]:hover,
.ya-wr-xform input[type="reset"]:hover { border-color: var(--ya-ac); color: var(--ya-ac); }

/* ── 13-9. 響應式 ─────────────────────────────────────────────────── */
@media (max-width: 700px) {
	/* 表單改成標籤在上、欄位在下（一列排不下時強制換行）*/
	.ya-wr-xform .row { flex-direction: column; align-items: stretch; }
	.ya-wr-xform input[type="text"],
	.ya-wr-xform input[type="email"],
	.ya-wr-xform input[type="tel"],
	.ya-wr-xform .form-control { flex: 1 1 auto; width: 100%; }
}


/* =========================================================================
   ── 14. 訂單明細（階段 6C-3b）──────────────────────────────────────────
   設計稿：`isOrders`（:1082-）右欄的「YA-… 訂單明細」卡
   樣板：modules/wr/wr_order.html 的 `<{if $oid}>` 分支　行為：無（全部 CSS）

   🔴 這一節同樣**很短，因為絕大部分沿用既有節**：
      兩欄骨架 `.ya-wr-cart*`（第 10 節）、摘要卡 `.ya-wr-sum*`（第 10 節）、
      商品縮圖列 `.ya-wr-mini*` 與唯讀清單 `.ya-wr-rev*`（第 11 節）、
      表單區段與欄位 `.ya-wr-form__sec`／`.ya-wr-fld*`（第 10 節）、
      狀態標 `.ya-wr-tag*`（第 13 節）。
      新的只有「訂單抬頭列」與管理模式的幾個小東西。

   ⬜ 使用者裁示（2026-09-09）：出貨進度時間軸不做、列印訂購單不做。
   ⚠ 訂單留言（6C-3c）尚未做，樣板那一段包在 `.ya-wr-od__todo` 裡維持模組原樣。
   ========================================================================= */

/* ── 14-1. 訂單抬頭列：編號 ／ 狀態標 ／ 兩個時間 ────────────────────
   ⚠ 裁示：不做出貨進度時間軸（模組只有 create_date／update_date 兩個時間戳）。 */
.ya-wr-od__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 2rem;
	flex-wrap: wrap;
	padding-bottom: 1.2rem;
	margin-bottom: clamp(1.6rem, 3vw, 2.2rem);
	border-bottom: 1px solid var(--ya-line);
}
.ya-wr-od__idbox { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.ya-wr-od__id {
	font-family: var(--ya-en);
	font-size: clamp(1.2rem, 2.2vw, 1.5rem);
	letter-spacing: .06em;
	color: var(--ya-ink);
	white-space: nowrap;
}

/* 兩個時間：橫排的小定義清單，靠右 */
.ya-wr-od__time {
	display: flex;
	gap: 1.4rem;
	flex-wrap: wrap;
	margin: 0;
	margin-left: auto;
}
.ya-wr-od__time > div { display: flex; align-items: baseline; gap: .5rem; }
.ya-wr-od__time dt {
	font-size: .74rem;
	letter-spacing: .1em;
	color: var(--ya-muted-2);
	white-space: nowrap;
}
.ya-wr-od__time dd {
	margin: 0;
	font-family: var(--ya-en);
	font-size: .88rem;
	color: var(--ya-muted);
	white-space: nowrap;
}

/* ── 14-2. 管理模式（只有 wr_perm itemid 2 看得到）────────────────────
   ⚠ 一般顧客拿到的是唯讀定義清單，連 <form> 都不輸出 ——
     模組原樣板是印 `<input disabled>`，那對顧客沒有意義（看起來像能填、其實送不出）。 */
.ya-wr-od__adm {
	display: inline-block;
	margin-left: .7rem;
	padding: .2rem .55rem;
	background: rgba(190,133,116,.1);
	font-family: var(--ya-sans);
	font-size: .7rem;
	letter-spacing: .1em;
	color: var(--ya-ac);
	vertical-align: middle;
}
.ya-wr-od__save { margin-top: 1.4rem; }

/* 下拉：與文字欄位同一款外觀（全站無圓角，箭頭用 background-image 畫，不引圖檔）*/
.ya-wr-fld__sel {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.2rem;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--ya-ocean) 50%),
		linear-gradient(135deg, var(--ya-ocean) 50%, transparent 50%);
	background-position:
		calc(100% - 1.1rem) calc(50% + 1px),
		calc(100% - .75rem) calc(50% + 1px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	cursor: pointer;
}

/* 不可編輯欄位（Email）：長得像欄位但沒有框，避免誤以為可以打字 */
.ya-wr-fld__ro {
	margin: 0;
	padding: .7rem 0;
	font-size: .88rem;
	line-height: 1.7;
	color: var(--ya-body-2);
	overflow-wrap: anywhere;
}

/* ── 14-3. 沒有商品明細時 ──────────────────────────────────────────
   舊訂單的 detal 可能是空的或壞的 JSON，模組不會擋，這裡至少不要留一片空白。 */
.ya-wr-od__nodata {
	margin: 0 0 .6rem;
	padding: 1rem 0;
	font-size: .84rem;
	line-height: 1.8;
	color: var(--ya-muted);
}

/* ── 14-4.（已移除）尚未套版的收納框 ────────────────────────────────
   ⬜ 這裡原本有 `.ya-wr-od__todo` —— 6C-3b 期間把模組原樣板的留言表格
      圈起來的**臨時**框，讓它看起來像「還沒做」而不是「做壞了」。
      2026-09-09 完成 6C-3c 後，樣板那一段已整段重寫成 `.ya-wr-fb`，
      本小節連同 class 一起移除，不留死碼。**見第 15 節。** */

/* ── 14-9. 響應式 ─────────────────────────────────────────────────── */
@media (max-width: 700px) {
	/* 抬頭列的兩個時間換到下一行、靠左 */
	.ya-wr-od__time { margin-left: 0; gap: .2rem 1.2rem; }
}


/* =========================================================================
   ── 15. 訂單留言（階段 6C-3c）──────────────────────────────────────────
   樣板：modules/wr/wr_order.html 的 `<{if $oid}>` 分支尾段　行為：無（全部 CSS）

   ⚠ **設計稿完全沒有這一區** —— 模組多出來的功能。版型依全站語彙自訂。
   ⚠ 留言表單本體掛 `.ya-wr-xform`（第 13-3 節的 XOOPS 表單接管層），
     本節只補這一頁的差異：它只有一個欄位，標籤與輸入框不必左右分欄。
   ⬜ 這一節取代了 6C-3b 時期的 `.ya-wr-od__todo`（那是暫時的收納框），
     該小節已從第 14 節移除。
   ========================================================================= */

.ya-wr-fb {
	margin-top: clamp(2.4rem, 5vw, 3.4rem);
	padding-top: clamp(1.6rem, 3vw, 2.2rem);
	border-top: 1px solid var(--ya-line);
}
.ya-wr-fb__t {
	margin: 0 0 .6rem;
	font-family: var(--ya-serif);
	font-weight: 400;
	font-size: 1.05rem;
	letter-spacing: .1em;
	color: var(--ya-ink);
}
.ya-wr-fb__note {
	margin: 0 0 1.4rem;
	max-width: 62ch;
	font-size: .84rem;
	line-height: 1.9;
	color: var(--ya-body-2);
}

/* 留言表單：只有一個欄位，所以標籤不要再佔掉左邊 6rem
   （第 13-3 節那組是為四欄的查詢表單訂的）。 */
.ya-wr-fb__form {
	border: 1px solid var(--ya-line);
	background: var(--ya-white);
	padding: clamp(1.2rem, 2.5vw, 1.6rem);
	margin-bottom: clamp(1.6rem, 3vw, 2.2rem);
}
.ya-wr-fb__form .row { align-items: center; }
.ya-wr-fb__form label,
.ya-wr-fb__form .col-form-label,
.ya-wr-fb__form .form-label { min-width: 4rem; }
/* 內容欄吃滿剩下的寬度 */
.ya-wr-fb__form input[type="text"] { flex: 1 1 20rem; }

/* ── 15-1. 留言列表 ─────────────────────────────────────────────────
   ⚠ 名字**刻意不做強調** —— 模組撈錯人（`order.php:653` 用的是觀看者的 uid，
     不是留言者的），做成醒目的「作者」只會把錯誤放大。見樣板檔頭。 */
.ya-wr-fb__list { display: flex; flex-direction: column; }
.ya-wr-fb__i {
	padding: 1rem 0;
	border-bottom: 1px solid var(--ya-line-soft);
}
.ya-wr-fb__i:first-child { padding-top: 0; }
.ya-wr-fb__i:last-child { border-bottom: 0; }
.ya-wr-fb__meta {
	display: flex;
	align-items: baseline;
	gap: .8rem;
	flex-wrap: wrap;
	margin-bottom: .4rem;
	font-size: .76rem;
	letter-spacing: .06em;
	color: var(--ya-muted);
}
.ya-wr-fb__who { color: var(--ya-body-2); }
.ya-wr-fb__when { font-family: var(--ya-en); font-size: .84rem; }
/* IP 只有管理者看得到，靠右、弱化 */
.ya-wr-fb__ip {
	margin-left: auto;
	font-family: var(--ya-en);
	font-size: .78rem;
	color: var(--ya-muted-2);
}
.ya-wr-fb__tx {
	margin: 0;
	font-size: .9rem;
	line-height: 1.9;
	color: var(--ya-ink);
	white-space: pre-line;
	overflow-wrap: anywhere;
}
.ya-wr-fb__none {
	margin: 0;
	padding: 1rem 0;
	font-size: .84rem;
	color: var(--ya-muted);
}


/* =========================================================================
   ── 16. 管理表單頁（階段 6D：wr_form／wr_product_form／wr_coupon）─────────
   樣板：modules/wr/wr_form.html　　　　　（管理分類）
         modules/wr/wr_product_form.html　（新增／編輯商品）
         modules/wr/wr_coupon.html　　　　（折價券）
   行為：三支都用模組原生的 <script>（逐字保留），本節不配任何 JS

   🔴 **使用者裁示（2026-09-09）：這一批走「輕量接管」。**
      設計稿的 13 張畫板全是前台顧客動線，管理介面**沒有對應版型**，
      所以不自創一套版面，只做三件事：
        ① `$action_form` 外面包 `.ya-wr-xform`（第 13-3 節那層共用接管）
        ② 補一個與 6C 同款的頁面抬頭 `.ya-wr-sechead`
        ③ 模組樣板的內嵌 <style> 搬進來（就是下面這一節）
      **XoopsThemeForm render 出來的欄位結構一個都沒動。**

   🔴 這一節的規則有一半是在**接管別人產的 HTML**，改之前先知道來源：
        `#icons`         內容由 `modules/wr/images/icons1.html`（或 icons.html）
                         整份 innerHTML 進來 —— 裡面是 **Bootstrap 3 格線**
                         （`.col-lg-2 .col-md-3 .col-sm-4`）＋ `.fa-hover` 包住
                         每一顆圖示。本佈景沒有那套格線 → 下面自己補一組 grid。
        `#showicons-remove`  同上，是 icons1.html 第一個元素（關閉鈕）。
        `#wr-directory`  內容由 `modules/wr/directory.php` 產生（BS5 標記）。
      ⚠ **不要去改那兩個來源**：icons1.html 是模組資產且 fa／bi 兩份都要改，
        directory.php 是模組 PHP。一律從外面蓋。
      ⚠ 圖示字型兩套都有：`bi` 來自佈景的 `css/bootstrap-icons.css`（theme.tpl 載），
        `fa` 來自 **XOOPS 核心**（`include/functions.php:269-272`，全站每頁都載，
        含 `v4-shims` 所以 FA4 舊 class 名也吃得到）。→ `ICONBRAND` 設 0 或 1 都出得來。

   ⚠ 開關 class 是模組 JS 在切的，名字不能改：
        `#icons.showicons`        圖示面板打開
        `#wr-directory.wr-show`   既有圖片面板打開
   ⚠ 本節不重複定義表單欄位的外觀 —— 那些全在第 13-3 節的 `.ya-wr-xform`。
     這裡只補「模組內嵌 <style> 原本在做的事」＋ 抬頭與外框。
   ========================================================================= */

/* ── 16-1. 外框與頁尾列 ────────────────────────────────────────────── */
.ya-wr--adm .ya-wr-wrap { max-width: 62rem; }   /* 表單頁不必用到全版心寬 */

.ya-wr-adm {
	border: 1px solid var(--ya-line);
	background: var(--ya-white);
	padding: clamp(1.4rem, 3vw, 2.2rem);
}

/* 資訊傾印（$wr_catalog_info／$wr_info）。內容是後台設定的純文字，
   可能很長也可能含長網址 → 允許換行，並給捲軸保底。 */
.ya-wr-adm__info {
	margin: 1.6rem 0 0;
	padding: 1rem 1.1rem;
	max-height: 22rem;
	overflow: auto;
	border: 1px solid var(--ya-line-soft);
	background: var(--ya-paper-warm);
	font-family: var(--ya-sans);
	font-size: .8rem;
	line-height: 1.9;
	color: var(--ya-body-2);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.ya-wr-adm__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin: 1.8rem 0 0;
	padding-top: 1.3rem;
	border-top: 1px solid var(--ya-line-soft);
}
/* 只有一顆返回連結時不要被 space-between 推到左邊看起來像孤兒 —— 沒差，靠左即可 */

.ya-wr-adm__noperm {
	margin: 0 0 1.6rem;
	padding: 1.2rem 1.3rem;
	border: 1px solid var(--ya-line);
	background: var(--ya-paper-warm);
	font-size: .86rem;
	line-height: 1.9;
	color: var(--ya-body-2);
}

/* ── 16-2. 目前圖示的預覽方塊 ───────────────────────────────────────
   🔴 `#icon-img` **不能再加 class** —— 模組 JS 用 `classList.item(1)`
      當作「目前的圖示名」去移除／替換（見兩支樣板的檔頭）。
      所以樣式只能掛在外層的 `.ya-wr-adm__iconbox`，或直接用 `#icon-img` 這個 ID。
   ⚠ 用 ID 選擇器是刻意的（特異性 1,0,0），這是唯一能套到它的方式。 */
.ya-wr-adm__iconbox {
	display: flex;
	align-items: center;
	gap: .8rem;
	margin-bottom: 1.4rem;
	padding-bottom: 1.2rem;
	border-bottom: 1px solid var(--ya-line-soft);
}
.ya-wr-adm__iconlab {
	font-size: .78rem;
	letter-spacing: .12em;
	color: var(--ya-muted);
}
#icon-img {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	border: 1px solid var(--ya-line);
	background: var(--ya-paper-warm);
	font-size: 1.2rem;
	line-height: 1;
	color: var(--ya-ocean);
}

/* ── 16-3. 圖示挑選面板 `#icons` ────────────────────────────────────
   模組原本的內嵌 <style> 是：
     #icons{position:absolute;top:-6500em;left:0;background:#F6F6F6;z-index:99;
            transition:all 1.0s;}
     .showicons{top:0em !important;}
     #showicons-remove{border-radius:50%;background:#FFF;float:right;
                       box-shadow:0 1px 0 white;}
   🔴 `top:-6500em` ＋ `transition: all 1s` 是「移到畫面外」而不是隱藏 ——
      面板其實一直在 DOM 裡而且**可被 Tab 聚焦**，還會讓頁面長出一段空白。
      改成 `visibility:hidden` ＋ `opacity:0` ＋ `pointer-events:none`，
      打開才反過來。⚠ 開關 class 名 `.showicons` 是模組 JS 在切的，不能改。
   🔴 `position:absolute` 的定位基準是最近的 positioned 祖先 —— 這個 <div>
      掛在樣板最外層（`.ya-wr` 之外），基準會是 `<body>`，
      在本佈景固定頁首之下會被蓋住。改成 `position:fixed` 蓋滿視窗，
      與 `#wr-directory` 那個面板一致（模組自己後來寫的那支就是 fixed）。
   ⚠ z-index：本佈景的固定頁首是 900、FAB 是 950（style.css 第 11 節）→ 這裡用 1080，
     與 `#wr-directory` 同層。 */
.ya-wr-icons {
	position: fixed;
	inset: 0;
	z-index: 1080;
	overflow-y: auto;
	padding: clamp(1rem, 3vw, 2rem);
	background: var(--ya-paper-warm);
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity .32s var(--ya-ease), visibility 0s linear .32s;
}
.ya-wr-icons.showicons {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transition: opacity .32s var(--ya-ease), visibility 0s;
}

/* 關閉鈕（icons1.html 的第一個元素，我們產不了它，只能從外面蓋）*/
.ya-wr-icons #showicons-remove {
	position: sticky;
	top: 0;
	float: right;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border: 1px solid var(--ya-line);
	background: var(--ya-white);
	color: var(--ya-ocean);
	cursor: pointer;
	transition: border-color var(--ya-t-col), color var(--ya-t-col);
}
.ya-wr-icons #showicons-remove:hover { border-color: var(--ya-ac); color: var(--ya-ac); }

/* 面板內容：icons1.html 用的是 Bootstrap 3 的 `.col-lg-2` 等，本佈景沒有那套。
   👉 直接把它的列容器改成自動排版的 grid，欄寬由內容決定。
   ⚠ 選擇器限定在 .ya-wr-icons 底下，不會外溢到別的地方的 .row／.col-*。 */
.ya-wr-icons .row,
.ya-wr-icons .fontawesome-icon-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: .4rem;
	margin: 0;
	padding: 0;
}
.ya-wr-icons [class*="col-"] {
	width: auto;
	max-width: none;
	float: none;
	padding: 0;
}
.ya-wr-icons .fa-hover {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .5rem .7rem;
	border: 1px solid transparent;
	font-size: .78rem;
	color: var(--ya-body-2);
	cursor: pointer;
	overflow-wrap: anywhere;
	transition: border-color var(--ya-t-col), background var(--ya-t-col);
}
.ya-wr-icons .fa-hover:hover { border-color: var(--ya-ac); background: var(--ya-white); }
/* 模組 JS 選中時是加 `.mark` 到 icon 的 parentNode */
.ya-wr-icons .mark { border-color: var(--ya-ac); background: var(--ya-white); }
.ya-wr-icons .fa-hover i,
.ya-wr-icons .fa-hover .bi { font-size: 1rem; color: var(--ya-ocean); }
.ya-wr-icons h2 {
	margin: 1.4rem 0 .8rem;
	font-family: var(--ya-serif);
	font-weight: 400;
	font-size: 1rem;
	letter-spacing: .1em;
	color: var(--ya-ink);
}

/* ── 16-4. 既有圖片選擇面板 `#wr-directory`（只有 $featured_enable 才出）──
   模組原本的內嵌 <style>（wr_product_form.html:415-422）搬進來，
   顏色換成本佈景語彙。⚠ 開關 class `.wr-show` 是模組 JS 在切的，不能改。 */
.ya-wr-adm #wr-directory,
#wr-directory {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1080;
	overflow-y: auto;
	padding: clamp(1rem, 3vw, 2rem);
	background: var(--ya-paper-warm);
}
#wr-directory.wr-show { display: block; }
#wr-directory .wr-image-thumbnail {
	cursor: pointer;
	border: 2px solid transparent;
	transition: border-color var(--ya-t-col) var(--ya-ease);
}
#wr-directory .wr-image-thumbnail:hover { border-color: var(--ya-ac); }
#wr-featured-img {
	max-width: 240px;
	display: block;
	margin-bottom: .5rem;
	border: 1px solid var(--ya-line);
}
#wr-featured-box a { cursor: pointer; color: var(--ya-ocean); }
#wr-featured-box a:hover { color: var(--ya-ac); }

/* ── 16-5. XOOPS 表單裡的 radio ─────────────────────────────────────
   模組兩支樣板都有 `input[type=radio]{display:block;}` —— 那是為了讓
   XoopsFormRadio 的選項一行一個（BS5 renderer 會把它們排成一列）。
   ⚠ 限定在 .ya-wr-xform 底下，不要像模組那樣寫成全域選擇器
     （那會波及同頁其他區塊的 radio）。 */
.ya-wr-xform input[type="radio"] { display: block; }

/* ── 16-6. 折價券清單 ───────────────────────────────────────────────
   表格骨架沿用第 13-1 節的 `.ya-wr-ord`／`.ya-wr-ord__scroll`／`.ya-wr-ord__tb`，
   這裡只補欄位多（12 欄）造成的差異。
   ⚠ `.ya-wr-cpn*`（不帶 a）是**購物車的優惠代碼輸入框**（第 10-6 節），
     不是這裡。這一節一律用 `.ya-wr-cpna*`（coupon admin）。 */
.ya-wr-cpna__tb { min-width: 1000px; }        /* 12 欄，比訂單清單的 720px 更寬 */
.ya-wr-cpna__code {
	font-family: var(--ya-en);
	font-size: .92rem;
	letter-spacing: .06em;
	color: var(--ya-ac);
	white-space: nowrap;
}
.ya-wr-cpna__none {
	padding: 2.2rem 1rem;
	text-align: center;
	color: var(--ya-muted);
}
/* 停用的折價券（status_code=0）整列壓灰，與分類清單的 .is-off 同一個語彙 */
.ya-wr-cpna__tb tr.is-off td { color: var(--ya-muted-2); }

/* ── 16-9. 響應式 ─────────────────────────────────────────────────── */
@media (max-width: 700px) {
	.ya-wr-adm { padding: 1.1rem; }
	.ya-wr-adm__foot { flex-direction: column; align-items: stretch; }
	.ya-wr-icons .row,
	.ya-wr-icons .fontawesome-icon-list { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
}


/* =========================================================================
   ── 17.（已刪除）「最新商品」區塊的舊樣式 ────────────────────────────────
   原本這裡是 `.ya-wr-new-*`（側欄直式清單版，階段 6D-4 / 2026-09-09），
   共 19 條規則、約 137 行。

   🔴 **2026-09-10 依使用者裁示整節刪除。**
      當天 `modules/wr/blocks/wr_block_new.html` 整支改寫成「服務設施」的
      `.ya-facil-*` 版型（家在 `css/home.css` 第 5 節），這一節從此**沒有任何
      樣板在用**（實查：樣板端 `.ya-wr-new` 命中 0 支）。

   ♻ 要撿回來的話：`css/wr.css.sec17.bak`（本次刪除前的完整檔），
     舊樣板則在 `modules/wr/blocks/wr_block_new.html.facil.bak`。
     **兩個要一起還原**，只還原樣板會變成沒有樣式的裸清單。
   ========================================================================= */