@import url('design-tokens.css');

/* ============================================
   fp PDP — fixed-product detail page styles.
   Gated entirely by body.fp-detail-mode (set by initFixedMode in
   product-detail.html). Pairs with:
     - JS init       : product-detail.html::initFixedMode()
     - Backend SSR   : backend/api/main.py::_build_sticky_controls_block
     - SoT metadata  : backend.shared.fixed_products_meta
   Shared product-detail styles (gallery / breadcrumb / size-btn base /
   custom-mosaic sticky) live in product-page.css. Custom mode pages
   load product-page.css only; fp pages load both.

   Extracted 2026-05-27 from inline <style> (L0). Phase L4 2026-05-28
   reverts the L2 hero-as-configurator design — sticky bar is now the
   always-visible configurator hub per owner intent ("size addon qty
   都在 sticky 內,調整馬上看到"). See docs/fp-pdp-redesign-tmpplan.md
   § L4.
   ============================================ */

/* Fp-mode cascades — suppress custom-mosaic UI ──────────────────── */
body.fp-detail-mode .pd-size-selector { display: none !important; }
body.fp-detail-mode .pd-cta { display: none !important; }
body.fp-detail-mode .pd-sticky-cta { display: none !important; }
/* hero「NT$ X,XXX 起」(min-across-sizes)只留給瀏覽面卡片(owner
   2026-08-07):PDP 面板常駐即時總價(預設 40cm 單價),再掛一個更低
   的「起」價互搶(1,300 起 vs 2,500)。全視口隱藏 — 手機 sheet 常駐
   總價同理不缺價格;custom 頁不受影響。 */
body.fp-detail-mode .pd-price { display: none !important; }

/* 主圖動態上限(owner 2026-08-07)— sheet 模式(<1024)限定:
   讓整張圖塞得進「header 下緣 ↔ sheet 頂」可視帶,搭配 size-pill 的
   置中捲動(product-detail.html)。容器是 aspect-square,收窄 width
   即等比縮高、不裁圖;只在短機身真的塞不下時才縮(844/915 機型
   算出的上限 > 100%,原尺寸不動)。
   140px ≈ fixed header(64)+ topbar 麵包屑列 + 上下呼吸;260px 下限
   防郵票化(SE 級寧可露 9 成也不縮到失真)。--bottom-content-offset
   = ResizeObserver 活測 sheet 高的既有 SoT(桌機 0 → 本 block 不生效
   之外亦有 media gate 雙保險)。100vh/100dvh fallback 對照 mobile
   safe-area 規範。 */
@media (max-width: 1023px) {
    body.fp-detail-mode .pd-main-image {
        width: max(260px, min(100%, calc(100vh - var(--bottom-content-offset, 200px) - 140px)));
        width: max(260px, min(100%, calc(100dvh - var(--bottom-content-offset, 200px) - 140px)));
        margin-left: auto;
        margin-right: auto;
    }
}

/* Reserve bottom space so sticky never covers last section content.
   Sticky height: 2 rows × ~40px + 2 × --space-sm padding ≈ 100-110px
   + safe-bottom. Use 130px as comfortable upper bound. */
body.fp-detail-mode { padding-bottom: calc(130px + var(--safe-bottom, 0px)); }

/* FAB lift — sticky always visible on fp pages. Default value below is
   a FOUC fallback before initFixedMode's ResizeObserver fires; once JS
   runs it overrides body.style with sticky.offsetHeight live (locale
   wrap can grow sticky from 197→237 between zh-TW and en/ja, so static
   value would leave FAB inside sticky on long-text locales). */
body.fp-detail-mode { --bottom-content-offset: 200px; }

/* fp STICKY configurator — Phase L4 2026-05-28 ─────────────────── */
/* Always visible on fp pages (replaces L2 scroll-mirror). Auto-hidden
   when overlay (cart sidebar / modal) opens via body.overlay-open.
   Mobile = full-width bottom bar; desktop = centered max-w 600 card. */
.pd-fp-sticky { display: none; }
body.fp-detail-mode .pd-fp-sticky {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
    /* Owner 2026-06-04 vertical-stacked redesign: outer padding 0;每個
       `__row` / `__section` 自帶 padding,row 間靠 hairline divider 切節奏. */
    padding: 0;
    padding-bottom: var(--safe-bottom, 0px);
}
@media (min-width: 768px) {
    body.fp-detail-mode .pd-fp-sticky {
        left: 50%; right: auto;
        transform: translateX(-50%);
        width: min(600px, calc(100vw - 2 * var(--space-lg)));
        border: 1px solid var(--gray-200);
        border-bottom: 0;
        border-radius: 14px 14px 0 0;
    }
}
/* Cart sidebar / modal overlay covers screen → hide sticky to avoid
   tap-target overlap with overlay CTAs. */
body.fp-detail-mode.overlay-open .pd-fp-sticky { display: none; }

/* Desktop ≥1024 兩欄化(2026-08-06,art-ecommerce skill §2)──────────
   9 站 survey 鐵律:桌機購買欄 = 右欄 in-flow card,無 bottom-sheet。
   面板由 product-detail.html placeSticky() reparent 進 .pd-info;
   此 block 蓋掉 768 的置中浮條樣式(cascade 後出者勝)。 */
@media (min-width: 1024px) {
    body.fp-detail-mode { padding-bottom: 0; }
    body.fp-detail-mode .pd-fp-sticky {
        position: sticky;
        top: calc(72px + var(--space-lg)); /* header 72px + 呼吸 */
        left: auto; right: auto; bottom: auto;
        transform: none;
        width: 100%;
        margin-top: var(--space-lg);
        /* 去卡片化(owner 2026-08-07):survey 更支持無框右欄內容
           (TATE/JUNIQE/Displate,row 靠 hairline)。卡片三件套
           (border/radius/shadow)拿掉;僅留 border-top 一條 hairline
           接手「info 文字與面板的分界」(原卡片邊框職責)。 */
        border: 0;
        border-top: 1px solid var(--gray-200);
        border-radius: 0;
        box-shadow: none;
        padding-bottom: 0;
    }
    /* anchor row 縮圖是 bottom-sheet 語境產物 — 桌機緊鄰大圖顯冗餘
       (尺寸切換時大圖本身就會換),隱藏之。總價/規格文字保留。 */
    body.fp-detail-mode .pd-fp-sticky__thumb { display: none; }
    /* 價格單一舞台(owner 2026-08-07):hero「NT$X 起」移除後,面板
       即時總價是 PDP 唯一價格 — 從 sheet 的 meta 級(font-md regular)
       升為主角級。24px semibold 落在 H1 標題(32px)之下、內容之上,
       仍用 gray-900 不用 accent(orange = CTA only)。 */
    body.fp-detail-mode .pd-fp-sticky__amount {
        font-size: var(--font-h2);
        font-weight: var(--weight-semibold);
    }
    /* anchor 列重排(owner 2026-08-10「價格與提示太窄」):sheet 語境是
       「大數字壓小字」(amount 上、variant 下、2px 貼身)。桌機面板整行
       寬可用 → 閱讀序改「你配置的 → 它的價格」:variant(畫名 · 尺寸)
       在上、24px 總價在下(TATE/JUNIQE 買欄同型)。DOM 順序不動
       (amount 先,螢幕閱讀器仍先報價格),column-reverse 純視覺翻轉。 */
    body.fp-detail-mode .pd-fp-sticky__meta {
        flex-direction: column-reverse;
        gap: var(--space-xs);
    }
    /* variant 行(畫名 · 尺寸)桌機拿掉(owner 2026-08-10 v3):H1 大標
       與尺寸 pill 就在旁邊,資訊重複;面板 anchor 列只留 24px 總價。
       手機 sheet 保留 — sheet 浮在頁面上,標題常不在視口內。 */
    body.fp-detail-mode .pd-fp-sticky__variant { display: none; }
    /* in-flow 面板不隨 overlay 隱藏(sidebar/modal 自身在更高層) */
    body.fp-detail-mode.overlay-open .pd-fp-sticky { display: block; }
    /* drag handle = bottom-sheet 專屬 affordance */
    body.fp-detail-mode .pd-fp-sticky .sheet-handle { display: none; }
    /* 右欄拉伸至 gallery 同高,sticky 才有行程 */
    body.fp-detail-mode .pd-hero-inner { align-items: stretch; }
}

.pd-fp-sticky__inner {
    display: flex; flex-direction: column;
    gap: 0;
}

/* Hairline divider between every row/section — Shopee single-sheet rhythm.
   Applied to direct children except the first to avoid a top hairline on
   Row 1 (which already has the aside's own `border-top: gray-200`). */
.pd-fp-sticky__inner > * + * {
    border-top: 1px solid var(--gray-100);
}

/* Per-row + per-section padding(vertical --space-xs, horizontal --space-md).
   Single SoT — every row inherits same rhythm, no per-row override needed.
   Owner 2026-06-04: vertical 12 → 8 壓縮整 sticky 約 −40px(5 row × 8). */
.pd-fp-sticky__row,
.pd-fp-sticky__section {
    padding: var(--space-xs) var(--space-md);
}

/* SECTION — label stacked above options row (size pills / addon chips). */
.pd-fp-sticky__section {
    display: flex; flex-direction: column;
    gap: var(--space-xs);
}
.pd-fp-sticky__section-label {
    /* Shopee-aligned: regular gray-600 13px(not bold / not big).
       Hierarchy comes from padding + position, NOT font weight/size. */
    font-size: var(--font-sm); font-weight: var(--weight-regular);
    color: var(--gray-600);
    line-height: 1;
}

/* ROW 1 — anchor: thumb + variant meta + total price.
   Close affordance lives on `.sheet-handle`(shared component in layout.css)
   above Row 1,outside `__inner`. */
.pd-fp-sticky__row--anchor {
    display: flex; align-items: center;
    gap: var(--space-sm);
}
.pd-fp-sticky__thumb {
    width: 40px; height: 40px;
    object-fit: cover;
    border-radius: 4px;
    background: var(--gray-100);
    flex: 0 0 auto;
}
.pd-fp-sticky__meta {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    gap: 2px;
}
.pd-fp-sticky__variant {
    font-size: var(--font-sm);
    font-weight: var(--weight-regular);
    color: var(--gray-600);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ROW 4 — qty: label left, stepper right. */
.pd-fp-sticky__row--qty {
    display: flex; align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

/* ROW 5 — dual CTA: 加入購物車 (secondary) + 立即購買 (primary), equal width. */
.pd-fp-sticky__row--cta {
    display: flex;
    gap: var(--space-xs);
}
.pd-fp-sticky__row--cta .pd-fp-sticky__cta {
    flex: 1 1 0;
    width: auto;
}

/* Collapsed state (owner 2026-06-04 collapsible redesign).
   Body class set by sheet-handle tap → only Row 5 dual CTA stays visible.
   Sheet handle 也隱藏(State A only affordance — State B 由 CTA tap re-open). */
body.fp-sticky-collapsed .pd-fp-sticky .sheet-handle,
body.fp-sticky-collapsed .pd-fp-sticky__row--anchor,
body.fp-sticky-collapsed .pd-fp-sticky__section,
body.fp-sticky-collapsed .pd-fp-sticky__row--qty {
    display: none;
}
body.fp-sticky-collapsed .pd-fp-sticky__row--cta {
    border-top: 0;  /* no hairline above when CTA row is the only visible row */
}

/* Size pills inside sticky — re-uses .pd-size-btn base from
   product-page.css but tighter for sticky context. Spec sub-label
   hidden in sticky (size name alone is enough). */
.pd-fp-sticky__sizes {
    /* Chip-to-chip gap 4 → 8(R3 寬鬆). */
    /* tech-debt #53(2026-07-30 resolved): flex-wrap → grid auto-fit 等寬。
       4+ 尺寸 / 長 label(50×75cm)自動排整齊多行,不會左右不均;
       96px = 最長 label「120×80cm」@ font-sm + 兩側 padding 的下限。 */
    display: grid; gap: var(--space-xs);
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}
.pd-fp-sticky__sizes .pd-size-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 var(--space-sm);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-button);
    background: var(--white);
    font-size: var(--font-sm); font-weight: var(--weight-regular);
    color: var(--gray-700);
    min-height: 32px;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.pd-fp-sticky__sizes .pd-size-btn:hover { border-color: var(--gray-400); }
.pd-fp-sticky__sizes .pd-size-btn.active {
    /* Owner 2026-06-03 R2:橘字跳 + 淡橘底,跟 landing page selected 一致;
       無 font-weight 變化(owner「字都不要粗體」)。 */
    border-color: var(--primary);
    background: rgba(227, 103, 12, 0.06);
    color: var(--primary);
}
.pd-fp-sticky__sizes .pd-size-btn .size-spec { display: none; }
/* product-page.css:74 `.pd-size-btn .size-name { font-weight: 600 }` 是 custom-mosaic
   (`/products/40cm`)的設定。Sticky context 必須 override 否則「25cm」永遠粗體
   — owner 2026-06-03 R3「25cm 為何還是粗體」根因. */
.pd-fp-sticky__sizes .pd-size-btn .size-name {
    font-weight: var(--weight-regular);
    font-size: inherit;
    /* WxH label(50×75cm)的 × 與數字擠在一起難讀 — 微量字距即可,
       不切 font-family(CJK/Latin baseline 規則)。 */
    letter-spacing: 0.02em;
}

/* Addon chips — toggle via :has(input:checked). Native checkbox
   invisible-overlay (stretched across chip) so a click anywhere hits
   the input directly. iOS Safari 15.4+ supports :has(). */
.pd-fp-sticky__addons {
    /* Chip-to-chip gap 4 → 8(R3 寬鬆). */
    display: flex; gap: var(--space-xs);
    flex-wrap: wrap;
}
.pd-fp-sticky__addon-chip {
    position: relative;
    display: inline-flex; align-items: center;
    gap: var(--space-xxs);
    padding: 0 var(--space-sm);
    min-height: 32px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-button);
    background: var(--white);
    font-size: var(--font-sm);
    color: var(--gray-700);
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s, background 0.15s;
}
.pd-fp-sticky__addon-chip:hover { border-color: var(--gray-400); }
.pd-fp-sticky__addon-chip input {
    /* Invisible overlay: input stretches to cover the whole chip so
       a click anywhere on the chip area hits the input directly.
       Visual styling lives on the <label> via :has(input:checked).
       Pattern: a11y-friendly (keyboard + screen reader still see a
       checkbox); Playwright .check() targets a real hittable element
       (sibling spans no longer intercept). */
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.pd-fp-sticky__addon-chip:has(input:checked) {
    /* Owner 2026-06-03 R2:橘字跳 + 淡橘底,跟 size pill active 一致;
       無 font-weight 變化(owner「字都不要粗體」)。 */
    border-color: var(--primary);
    background: rgba(227, 103, 12, 0.06);
    color: var(--primary);
}
.pd-fp-sticky__addon-price {
    /* 同 chip text 大小 + color inherit → 「木框」跟「+800」永遠同 baseline + 同色。 */
    font-size: var(--font-sm);
    color: inherit;
    font-variant-numeric: tabular-nums;
}

/* Qty stepper inside sticky: 32×32 buttons (hover/active state alignment
   with chip family lives on `.qty-stepper--rect` in layout.css). */
.pd-fp-sticky .qty-stepper__btn { width: 32px; height: 32px; }
.pd-fp-sticky .qty-stepper__btn svg { width: 14px; height: 14px; }

/* Total amount — lives in Row 1 meta (next to thumb). 小計 label dropped
   per Shopee pattern (thumb + variant already implies「the total of what
   you've configured」). */
.pd-fp-sticky__amount {
    font-size: var(--font-md);
    font-weight: var(--weight-regular);
    color: var(--gray-900);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    line-height: 1.2;
}

/* CTA base — shared by Row 5 dual CTA + collapsed-state CTA.
   Owner 2026-06-04:height 對齊 chip / qty(min-height 32 + 1px border → 34
   outer)。Touch-target HIG 44 軟性 → 32 仍 OK,2 CTA equal-width 寬度 +
   橘底 + 白字承擔視覺權重,不靠額外高度.  Width 由 parent flex 控制
   (`.pd-fp-sticky__row--cta .pd-fp-sticky__cta { flex: 1 1 0 }`). */
.pd-fp-sticky__cta {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
    background: var(--primary); color: var(--white);
    border: 1px solid var(--primary); border-radius: var(--radius-button);
    font-size: var(--font-base);
    font-weight: var(--weight-regular);
    min-height: 32px;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s;
}
/* hover gated to real-hover devices(mouse / trackpad)。iOS Safari 觸控
   tap 後 :hover state 會 sticky 到下次 interaction → 在 collapsed-state
   re-open 後 button 「還亮著」 — @media (hover: hover) 把 hover 規則限縮
   到非觸控,完全規避 issue. */
@media (hover: hover) {
    .pd-fp-sticky__cta:hover { background: var(--primary-dark, #C95906); }
}
.pd-fp-sticky__cta:focus-visible {
    outline: 2px solid var(--gray-900); outline-offset: 2px;
}

/* Secondary variant (加入購物車) — twin-orange outline pattern.
   Per design-system.md § Twin-CTA purchase surfaces:purchase decision
   surface 的 secondary CTA 用 brand outline(白底 + 橘邊 + 橘字)而非
   gray ghost,Shopee / Lazada / 91APP 業界共識的衝動消費 pattern。
   Hover 用 `rgba(227,103,12,0.06)` 跟 chip selected state 同 alpha,
   整 sticky 都是 orange-family interaction。Reference:
   `docs/research/twin-cta-impulse-purchase.md`. */
.pd-fp-sticky__cta--secondary {
    background: var(--white);
    color: var(--primary);
    border-color: var(--primary);
}
@media (hover: hover) {
    .pd-fp-sticky__cta--secondary:hover {
        background: rgba(227, 103, 12, 0.06);
        color: var(--primary);
        border-color: var(--primary);
    }
}

/* Multi-size specs cards (3-card grid) ─────────────────────────────── */
/* Replaces the single-row specs-glance when painting has JSON.
   Desktop: 3 cards in a row. Mobile: 1 column stack. */
.specs-glance__multi {
    display: grid; grid-template-columns: 1fr;
    gap: var(--space-md);
}
@media (min-width: 768px) {
    .specs-glance__multi { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
}
.specs-glance__card {
    background: var(--white);
    border-radius: var(--radius);
    padding: var(--space-md);
    border: 1px solid var(--gray-200);
}
.specs-glance__card .specs-glance__number {
    font-size: 2.5rem; line-height: 1;
}
@media (min-width: 768px) {
    .specs-glance__card .specs-glance__number { font-size: 3rem; }
}
.specs-glance__card .palette-grid {
    max-width: 100%; margin-top: var(--space-sm);
}
.specs-glance__card-header {
    font-size: var(--font-base); font-weight: var(--weight-semibold);
    color: var(--gray-900);
    margin-bottom: var(--space-xs);
}
.specs-glance__card-header .specs-glance__size-active {
    display: inline-block; margin-left: var(--space-xs);
    padding: 2px 8px; font-size: var(--font-xs);
    background: var(--primary); color: var(--white);
    border-radius: 999px; font-weight: var(--weight-semibold);
    letter-spacing: 0.04em; text-transform: uppercase;
}

/* Social share (fp-only) ──────────────────────────────────────────── */
/* A10: gated to fixed product pages only. body.fp-detail-mode is set
   by initFixedMode() once the slug is recognized; custom-mosaic pages
   never see these. Mobile uses navigator.share via #pd-share-native;
   desktop / unsupported browsers fall back to <details>-driven popover. */
.pd-share { display: none; }
body.fp-detail-mode .pd-share {
    display: inline-flex; align-items: center; gap: var(--space-sm);
    margin-bottom: var(--space-md);
}
/* `display:inline-flex` below would defeat the `hidden` attribute (author
   display beats the UA [hidden] rule) — that rendered native + fallback
   side-by-side as two identical「分享」pills, and tapping the fallback one
   opened the icon menu instead of the system share sheet(owner 真機
   2026-07-31)。Re-assert hidden with priority. */
.pd-share__primary[hidden],
.pd-share__details[hidden] { display: none !important; }
.pd-share__primary,
.pd-share__summary {
    display: inline-flex; align-items: center; gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    border: 1px solid var(--gray-300); border-radius: 999px;
    background: var(--white); color: var(--gray-700);
    font-size: var(--font-sm); font-weight: var(--weight-medium);
    cursor: pointer; user-select: none; list-style: none;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    min-height: 36px;
}
.pd-share__summary::-webkit-details-marker { display: none; }
.pd-share__summary::marker { display: none; }
.pd-share__primary:hover, .pd-share__summary:hover,
.pd-share__primary:focus-visible, .pd-share__summary:focus-visible {
    border-color: var(--accent); color: var(--accent); outline: none;
}
.pd-share__details { position: relative; }
.pd-share__menu {
    position: absolute; top: calc(100% + var(--space-xs)); left: 0;
    display: flex; gap: var(--space-xxs);
    padding: var(--space-xs);
    background: var(--white); border: 1px solid var(--gray-200);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    z-index: 10;
}
.pd-share__btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border: none; background: transparent; border-radius: var(--radius-sm);
    color: var(--gray-600); cursor: pointer; text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.pd-share__btn:hover, .pd-share__btn:focus-visible {
    background: var(--gray-100); color: var(--accent); outline: none;
}
.pd-share__copied {
    position: absolute; top: calc(100% + var(--space-xs)); left: 0;
    padding: var(--space-xxs) var(--space-sm);
    background: var(--gray-900); color: var(--white);
    font-size: var(--font-xs); border-radius: var(--radius-sm);
    white-space: nowrap; pointer-events: none;
    opacity: 0; transition: opacity 0.2s;
}
.pd-share__copied[data-show="1"] { opacity: 1; }

/* Fp-mode price + topbar overrides ─────────────────────────────────── */

body.fp-detail-mode .pd-price-note { display: none; }
body.fp-detail-mode .pd-price { color: var(--gray-900) !important; }

body.fp-detail-mode .pd-fp-topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-md); margin-bottom: var(--space-md);
}
body.fp-detail-mode .pd-fp-topbar .pd-breadcrumb { margin-bottom: 0; }
body.fp-detail-mode .pd-fp-topbar .pd-share { margin-bottom: 0; }

/* fp 公版 trust badges ↔ 寫死評價行互換(owner 2026-07-31:每幅畫
   顯示相同的「5.0(200+ 則評價)」不誠實;badges 出自 FAQ 既有承諾)。 */
.pd-trust-badges { display: none; }
body.fp-detail-mode .pd-trust-badges {
    display: flex; flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
    margin-bottom: var(--space-md);
}
body.fp-detail-mode .pd-rating { display: none; }
.pd-trust-badge {
    display: inline-flex; align-items: center; gap: var(--space-xxs);
    font-size: var(--font-sm); color: var(--gray-600);
    white-space: nowrap;
}
.pd-trust-badge svg { color: var(--accent); flex: none; }

/* fp 情境圖註記(owner 2026-08-03:主圖 v3 情境合成「遐想無妨、
   註記清楚」)— custom 頁隱藏,fp 頁 hero 圖下小字。 */
.pd-scene-note { display: none; }
body.fp-detail-mode .pd-scene-note {
    display: block;
    font-size: var(--font-xs); color: var(--gray-400);
    /* 2026-08-10 owner:註記從 hero 移到規格表下 — 與表同寬置中對齊 */
    max-width: 800px; /* 同 .pd-specs-table */
    margin: var(--space-sm) auto 0;
}

/* Hide upload-flavored sections on fp pages (bio + specs-glance +
   reviews + related cover the equivalent ground). */
body.fp-detail-mode .pd-features-mini,
body.fp-detail-mode .pd-highlights { display: none; }

/* 縮圖列 v2(owner 2026-08-10)— 10 格會把 72px 縮圖 flex-shrink 壓到
   45px(標籤放不下、圖也糊)。fp 頁改橫滑列:格子固定尺寸、超出捲動
   (Shopee/Amazon 同型);custom 頁 ≤5 格不受影響。 */
body.fp-detail-mode #pd-thumbs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: var(--space-xxs); /* 給桌機捲軸呼吸 */
}
body.fp-detail-mode #pd-thumbs .pd-thumb {
    flex: 0 0 auto;
    scroll-snap-align: start;
}
/* 手機:不橫滑,直接 2 排 × 5 格攤開(owner 2026-08-10;10 格 = 尺寸
   模擬 5 + 實拍 4 + 掛牆情境,一眼全覽)。格寬由 grid 均分。 */
@media (max-width: 767px) {
    body.fp-detail-mode #pd-thumbs {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        overflow-x: visible;
        gap: var(--space-xs);
    }
    body.fp-detail-mode #pd-thumbs .pd-thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }
}

/* 縮圖列尺寸標籤(owner 2026-08-10 v2)— 各尺寸模擬格右上角的
   半透白底灰字小 pill(質感向,不壓圖)。fp 頁限定。 */
body.fp-detail-mode .pd-thumb { position: relative; }
body.fp-detail-mode .pd-thumb__badge {
    position: absolute;
    top: 3px; right: 3px;
    padding: 1px 5px;
    background: rgba(255, 255, 255, 0.85);
    color: var(--gray-700);
    font-size: var(--font-2xs);
    line-height: 1.4;
    border-radius: 999px;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* 「框與包裝」六格 block(owner 2026-08-10 v2,取代 pd-box-notes 文字
   清單 + 縮圖列 spec 插槽)— 盒裝內容 section 下方:上列三種尺寸的框、
   下列三種包裝;每格圖 + 尺寸標籤 + 一句說明。50cm 盒格附紙箱 icon
   註記(代拼且加框改出貨紙箱)。fp 頁限定,客製頁不顯示。 */
.pd-frame-pack { display: none; }
body.fp-detail-mode .pd-frame-pack { display: block; }
.pd-frame-pack-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    max-width: 1000px;
    margin: 0 auto;
}
.pd-frame-pack-cell figure { margin: 0; }
.pd-frame-pack-cell img {
    width: 100%;
    /* height 屬性(400)是 presentational hint,會蓋掉 aspect-ratio →
       手機被拉成 139×400(2026-08-10 owner 抓到)。height:auto 歸還控制權 */
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--gray-100);
    display: block;
}
.pd-frame-pack-cell figcaption {
    margin-top: var(--space-xs);
}
.pd-frame-pack-cell .pack-label {
    display: block;
    font-size: var(--font-base);
    font-weight: var(--weight-semibold);
    color: var(--gray-900);
}
.pd-frame-pack-cell .pack-desc {
    display: block;
    margin-top: 2px;
    font-size: var(--font-sm);
    line-height: 1.6;
    color: var(--gray-500);
}
.pd-frame-pack-cell .pack-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xxs);
    margin-top: var(--space-xxs);
    font-size: var(--font-sm);
    line-height: 1.6;
    color: var(--gray-500);
}
.pd-frame-pack-cell .pack-note svg {
    flex: 0 0 auto;
    width: 16px; height: 16px;
    margin-top: 3px;
    color: var(--gray-400);
}
/* 手機:2 欄網格(六格 = 3 列,room-grid 的橫滑在說明文字場景可讀性差) */
@media (max-width: 767px) {
    .pd-frame-pack-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }
}

/* fp 規格表精簡(owner 2026-08-10 v3):尺寸/積木數量在 specs-glance
   五卡已完整呈現(且本表值不隨 pill 連動,會脫節)→ fp 隱藏,只留
   通用列(顏色/組裝時間/材質/出貨/運費/適合場合)。custom 頁不變。 */
body.fp-detail-mode #spec-row-size,
body.fp-detail-mode #spec-row-count { display: none; }

/* 適合場合 fp/custom 雙文案切換(owner 2026-08-10 v4 review C):
   名畫頁不該出現「寵物肖像/家庭照」— fp 換藝術收藏導向。 */
.spec-val-fp { display: none; }
body.fp-detail-mode .spec-val-custom { display: none; }
body.fp-detail-mode .spec-val-fp { display: inline; }

/* 情境圖 fp 減量 6→3(review B):通用圖非本畫作,中段占整屏太重;
   custom 頁維持 6。 */
body.fp-detail-mode .pd-room-grid .pd-room-item:nth-child(n+4) { display: none; }

/* specs-glance 手機 2 欄(review D):五卡直疊 ~5 屏太長。 */
@media (max-width: 767px) {
    body.fp-detail-mode .specs-glance__multi {
        grid-template-columns: repeat(2, 1fr); /* 蓋 405 行單欄基準(同檔後出者勝) */
        gap: var(--space-sm);
    }
    /* 2 欄卡寬 ~165px:2.5rem 大數字(15,000)會貼邊 — 縮到 h1 級仍夠主角 */
    body.fp-detail-mode .specs-glance__card .specs-glance__number {
        font-size: var(--font-h1);
    }
}

/* 色票獨立行(owner 2026-08-10 v6 定案:不留卡片內,整個抽出)—
   specs-glance 網格下方一行:label + 20 色塊 + /colors hint。
   色票 = default size 的 dominant_palette(各尺寸高度相似)。 */
.specs-glance__palette--standalone {
    max-width: 1000px;
    margin: var(--space-lg) auto 0;
}
/* 標題列:label(主標級)左、hint 右,同一行(owner v8:原兩行
   小灰字太弱)。窄視口 hint 折下行自然換行。 */
.specs-glance__palette-head {
    /* label 與 hint 緊接同行(owner:不要左右撐開)— gap 一個字距 */
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-xxs) var(--space-sm);
    margin-bottom: var(--space-xs);
}
.specs-glance__palette-title {
    font-size: var(--font-base);
    font-weight: var(--weight-semibold);
    color: var(--gray-900);
}
.specs-glance__palette-head .specs-glance__palette-hint {
    margin-top: 0; /* 蓋 inline SSR 的 block+margin-top */
    font-size: var(--font-sm);
    color: var(--gray-500);
}
/* inline SSR 樣式給的是卡片語境(5 欄 × 240px 高塊)— 獨立行改
   28px 小色塊一列排開(auto-fill,窄視口自動折 2 列),不動 display
   (swatch 的 width:100% + aspect-ratio 依賴 grid cell)。 */
.specs-glance__palette--standalone .palette-grid {
    grid-template-columns: repeat(auto-fill, 36px); /* owner 2026-08-10:獨立行色票放大 */
    max-width: none;
    gap: var(--space-xxs);
    margin-top: var(--space-xs);
}

/* 面板內容與左欄齊(owner 2026-08-10:「選購版面偏右」)— row 的
   16px 水平 padding 是 bottom-sheet 卡片殘留;桌機 in-flow 面板
   內容應與 H1/麵包屑同一左緣(量測:H1 664 vs 內容 680)。
   <1024 sheet 原樣。 */
@media (min-width: 1024px) {
    body.fp-detail-mode .pd-fp-sticky__row,
    body.fp-detail-mode .pd-fp-sticky__section {
        padding-left: 0;
        padding-right: 0;
    }
}

/* 畫作背景四段 — 手機字太擠(owner 2026-08-10):行高 1.85 + 段距
   放寬;桌機 leading-relaxed 原樣。 */
@media (max-width: 767px) {
    body.fp-detail-mode .pd-bio p {
        line-height: 1.85;
        margin-bottom: var(--space-xl);
    }
    body.fp-detail-mode .pd-bio h2 {
        margin-top: var(--space-lg);
    }
}

/* 區塊副標拿掉(owner 2026-08-10 v8:「所需一切,開箱即用」這類小標
   在 fp 頁是噪音)— 標題本身已足夠;custom 頁不動。 */
body.fp-detail-mode .pd-box-contents .section-header p,
body.fp-detail-mode .pd-room-gallery .section-header p,
body.fp-detail-mode .pd-services .section-header p { display: none; }