/* =========================================================
   refined-plus.css — 前台 RWD 質感微調層（附加覆蓋，不改動任何原規則）
   建立：2026-08-07 · 由 AI 產生
   還原方式：從 frontend-header.php 移除本檔的 <link> 一行即可，
             原有 style/shop/refined.css 完全不受影響。
   原則：全程沿用既有設計 token（--ink/--gold/--cream/--stone/
         --radius/--ease/--t-*），維持 Spectral 襯線 × Inter 的
         克制編輯風，只做「更精緻、更好用」的細節調整。
   重點：整體前台響應式精修，並強化 /selection 商品分類頁 UX。
   ========================================================= */

/* ---------------------------------------------------------
   1) 全域無障礙：鍵盤操作可見焦點環（原本缺少 :focus-visible）
   --------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
.chip:focus-visible,
.card__btn:focus-visible,
.pagination__num:focus-visible,
.pagination__btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
/* 觸控裝置移除點擊藍色殘影 */
@media (hover: none) {
  .chip,
  .card__btn,
  .pagination__num,
  .pagination__btn,
  .search-form button { -webkit-tap-highlight-color: transparent; }
}

/* ---------------------------------------------------------
   2) 商品卡：影像圓角與價格層次的細節精修（延續靜態卡策略）
   --------------------------------------------------------- */
.card__media { border-radius: var(--radius-lg); }
.card__foot  { gap: 12px; }
.card__price { font-size: 1.15rem; letter-spacing: 0.01em; }

/* ---------------------------------------------------------
   3) /selection 篩選列
      桌機維持原樣（分類靠左、搜尋靠右同一列）；
      分類 chip 以 .filter-chips 群組包住（view 已加 wrapper）。
   --------------------------------------------------------- */
.filter-bar--list { row-gap: 12px; }
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* 讓搜尋表單維持靠右 */
.filter-bar--list .search-form { margin-left: auto; }

/* chip 觸控高度與細節（沿用 pill 造型） */
.chip {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}

/* ---------------------------------------------------------
   4) 商品網格：手機改 2 欄（原本 ≤480 掉成 1 欄，掃視效率差）
      涵蓋首頁精選 / collection / selection 共用的 .product-grid
   --------------------------------------------------------- */
@media (max-width: 520px) {
  .product-grid,
  .product-grid--list {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 12px;
  }
  /* 兩欄下縮小過大的標籤字級，畫面更清爽 */
  .card__media { margin-bottom: 14px; }
  .card__cat   { font-size: 12px; letter-spacing: 0.16em; margin-bottom: 6px; }
  .card__title { font-size: 1.02rem; }
  .card__desc  { font-size: 0.82rem; }
  .card__vol   { font-size: 12px; letter-spacing: 0.14em; }
  .card__btn   { font-size: 13px; letter-spacing: 0.2em; padding: 12px; }
}
/* 極窄機（<360px）才退回單欄 */
@media (max-width: 359px) {
  .product-grid,
  .product-grid--list { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   5) 手機篩選列：分類單列水平滑動，避免十幾個分類疊成一面牆
      搜尋 + 排序移到自己一整列、全寬好按。
   --------------------------------------------------------- */
@media (max-width: 768px) {
  .filter-bar--list {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .filter-chips {
    flex-wrap: nowrap;
    /* 明確鎖住寬度：align-items:stretch 在 column flex 下無法把
       含 nowrap 內容的子項收斂回父寬，需用 width/max-width 定住，
       再交給 overflow-x 做內部水平捲動（min-width:0 允許縮到父寬以下）。*/
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding-bottom: 4px;
    /* 右緣淡出，暗示可繼續滑動 */
    -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 90%, transparent 100%);
  }
  .filter-chips::-webkit-scrollbar { display: none; }
  .filter-chips .chip {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 15px;
    letter-spacing: 0.2em;
    padding: 9px 16px;
  }

  /* 搜尋 + 排序：整列全寬，觸控高度 46px */
  .filter-bar--list .search-form {
    margin-left: 0;
    width: 100%;
    max-width: 100%;
    height: 46px;
    box-sizing: border-box;
  }
  /* min-width:0 讓 input/select 能縮進搜尋列寬度內，避免 select 溢出到視窗外 */
  .search-form input[type=text] { flex: 1 1 auto; width: auto; min-width: 0; font-size: 16px; }
  .search-form select { flex: 0 1 auto; min-width: 0; font-size: 15px; }

  /* 結果數字與分頁在手機縮一級，重心更穩 */
  .result-count { font-size: 15px; margin: 18px 0 24px; }
}

/* ---------------------------------------------------------
   6) 分頁：手機加大可點面積（≥44px），維持置中
   --------------------------------------------------------- */
@media (max-width: 520px) {
  .pagination { flex-direction: row; flex-wrap: wrap; gap: 10px; }
  .pagination__num {
    min-width: 44px;
    height: 44px;
    font-size: 15px;
  }
  .pagination__btn { padding: 11px 14px; font-size: 14px; }
}

/* ---------------------------------------------------------
   7) 頁首標題區：手機收斂上下留白，減少過長的空白捲動
   --------------------------------------------------------- */
@media (max-width: 640px) {
  .page-hero { padding: 84px 0 44px; }
  .selection--list { padding-top: 20px; }
}

/* ---------------------------------------------------------
   8) 空狀態：更精緻的留白與描邊
   --------------------------------------------------------- */
.empty-state {
  border-radius: var(--radius-lg);
  padding: 56px 40px;
}

/* =========================================================
   9) 手機版 header 修正（關鍵 bug）
   原本 .site-header__inner 用 grid(1fr auto 1fr)，手機下
   brand(247px)+搜尋/願望/購物袋/漢堡 4 顆鈕塞不進 390px，
   導致漢堡選單被擠出畫面外、使用者按不到選單。
   改為 flex 兩端對齊，縮小 brand 與 icon，讓漢堡回到畫面內。
   ========================================================= */
@media (max-width: 900px) {
  .site-header__inner {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    height: 104px;
  }
  .site-header.is-scrolled .site-header__inner { height: 88px; }

  .brand { min-width: 0; gap: 8px; }
  .brand__mark { width: 82px; height: 82px; margin-top: -6px; }
  .site-header.is-scrolled .brand__mark { width: 70px; height: 70px; margin-top: -5px; }

  .nav--right { gap: 4px; flex: 0 0 auto; }
  .nav--right .icon-btn { width: 40px; height: 40px; }

  /* 漢堡鈕：擴大可點範圍到 ~48px（視覺線條不動） */
  .menu-toggle { position: relative; }
  .menu-toggle::after { content: ""; position: absolute; inset: -13px; }
}

/* 極窄機：隱藏品牌文字，只留字標，確保一切從容 */
@media (max-width: 430px) {
  .brand__word { display: none; }
}

/* ---------------------------------------------------------
   10) 手機聊天浮動鈕：固定在右下、收斂寬度，避免溢出畫面
   --------------------------------------------------------- */
@media (max-width: 600px) {
  .chatbot { position: fixed; right: 12px; bottom: 12px; left: auto; }
  .chatbot__panel { max-width: calc(100vw - 24px); }
}

/* ---------------------------------------------------------
   11) 手機觸控目標：輪播圓點加大可點範圍（視覺不變）
   --------------------------------------------------------- */
@media (hover: none), (max-width: 768px) {
  .hero-banner__dot { position: relative; }
  .hero-banner__dot::after { content: ""; position: absolute; inset: -12px; }
}

/* ---------------------------------------------------------
   12) 首頁「精選嚴選」即時切換標籤
      chip 由 <a> 改為 <button>（就地篩選、不跳頁）。
      這裡把 button 外觀對齊原本的 link chip，並加上低調的數量徽記。
   --------------------------------------------------------- */
.filter-bar--live .chip {
  font-family: inherit;
  background: transparent;
  cursor: pointer;
  line-height: 1;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.filter-bar--live .chip__count {
  margin-left: 8px;
  font-size: 0.68em;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--gold-ink);
  vertical-align: 1px;
}
.filter-bar--live .chip.is-active .chip__count { color: var(--champagne); }

/* 關鍵：.card 本身是 display:flex，會蓋過 HTML [hidden] 的 display:none，
   導致 JS 把卡片設為 hidden 卻仍顯示（篩選看似沒反應）。用足夠優先的規則修正。 */
#selection .product-grid .card[hidden] { display: none !important; }

/* 切換類別時，精選格輕微淡入，讓過場更順（JS 會短暫加上 is-swapping） */
#selection .product-grid { transition: opacity 200ms var(--ease); }
#selection .product-grid.is-swapping { opacity: 0; }

.featured-empty {
  padding: 40px 8px;
  color: var(--stone);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}
.featured-empty a { color: var(--gold-ink); border-bottom: 1px solid currentColor; }

/* ---------------------------------------------------------
   13) /selection 兩層分類選單
      主分類一列（有子類的加 ▾）；選到後下方展開該主分類的子分類。
   --------------------------------------------------------- */
.chip__caret {
  margin-left: 6px;
  font-size: 0.6em;
  color: var(--gold-ink);
  vertical-align: 2px;
}
.chip--has-sub.is-active .chip__caret { color: var(--champagne); }

.filter-subbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0 2px;
  padding: 12px 18px;
  background: var(--linen);
  border-radius: var(--radius-lg);
}
.filter-subbar__label {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--stone);
  white-space: nowrap;
}
.filter-subbar__label::after { content: "／"; margin-left: 12px; color: var(--sand); }

.filter-chips--sub { gap: 6px; }
.filter-chips--sub .chip {
  font-size: 14px;
  letter-spacing: 0.16em;
  padding: 6px 14px;
  min-height: 34px;
  opacity: 1;
}
.filter-chips--sub .chip.is-active {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

@media (max-width: 768px) {
  .filter-subbar { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 14px; }
  .filter-subbar__label::after { display: none; }
}

/* ---------------------------------------------------------
   14) /track 物流查詢頁：配送資訊卡 + 常見問題 + 客服信任區
   --------------------------------------------------------- */
.track-info, .track-faq, .track-support { max-width: 720px; margin-left: auto; margin-right: auto; }
.track-info { margin-top: 60px; }
.track-info__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 20px;
}
.track-info__card {
  background: var(--cream);
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: var(--radius-lg);
  padding: 22px 22px 24px;
}
.track-info__icon { font-size: 24px; display: block; margin-bottom: 10px; }
.track-info__card h3 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 1.05rem;
  margin: 0 0 8px;
  color: var(--ink);
}
.track-info__card p { margin: 0; font-size: 0.9rem; line-height: 1.75; color: var(--graphite); }

.track-faq { margin-top: 56px; }
.faq { margin: 20px 0 0; }
.faq dt {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--ink);
  padding: 18px 0 8px;
  border-top: 1px solid rgba(10,10,10,0.08);
}
.faq dt:first-of-type { border-top: 0; padding-top: 0; }
.faq dd { margin: 0 0 6px; font-size: 0.9rem; line-height: 1.85; color: var(--graphite); }

.track-support {
  margin-top: 48px;
  padding: 30px 28px;
  text-align: center;
  background: var(--linen);
  border-radius: var(--radius-lg);
}
.track-support__lead { margin: 0 0 16px; color: var(--espresso); font-size: 0.95rem; line-height: 1.85; }
.track-support__links {
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: center; margin: 0;
}
.track-support__links a {
  color: var(--gold-ink); letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(111,92,53,.35); padding-bottom: 2px;
}
.track-support__links a:hover { color: var(--ink); border-bottom-color: var(--ink); }

@media (max-width: 560px) {
  .track-info { margin-top: 44px; }
  .track-info__grid { grid-template-columns: 1fr; }
  .track-support__links { flex-direction: column; gap: 12px; }
}

/* ---------------------------------------------------------
   15) /brand 品牌頁：信任訊號帶（EEAT）+ 產業代表圖
   --------------------------------------------------------- */
.brand-signals__row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 44px;
  padding: 26px 0;
  border-top: 1px solid rgba(10,10,10,0.08);
  border-bottom: 1px solid rgba(10,10,10,0.08);
}
.brand-signal { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; }
.brand-signal b {
  font-family: var(--ff-display); font-weight: 500; font-size: 1.05rem;
  color: var(--ink); letter-spacing: 0.06em;
}
.brand-signal > span { font-size: 0.78rem; letter-spacing: 0.12em; color: var(--stone); }

.brand-figure { margin: 64px 0; }
.brand-figure__frame {
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 2 / 1;
}
.brand-figure--alt .brand-figure__frame {
  aspect-ratio: 4 / 3;
  max-width: 900px;
  margin: 0 auto;
}
.brand-figure__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-figure__cap {
  margin-top: 14px; text-align: center;
  font-family: var(--ff-display); font-style: italic;
  font-size: 1.05rem; color: var(--espresso); letter-spacing: 0.04em;
}

@media (max-width: 640px) {
  .brand-signals__row { gap: 14px 22px; padding: 18px 0; }
  .brand-signal b { font-size: 0.95rem; }
  .brand-signal > span { font-size: 0.72rem; }
  .brand-figure { margin: 40px 0; }
  .brand-figure__frame { aspect-ratio: 3 / 2; }
}

/* ---------------------------------------------------------
   16) 無障礙：關閉的手機側滑選單不應可聚焦
      （aria-hidden=true 卻含可 tab 的連結）。關閉時以 visibility
      移出 tab 序；用延遲讓滑出動畫仍完整播放，開啟即時可見。
   --------------------------------------------------------- */
.drawer { transition: transform var(--t-slow) var(--ease), visibility 0s linear var(--t-slow); }
.drawer:not(.is-open) { visibility: hidden; }
.drawer.is-open { visibility: visible; transition: transform var(--t-slow) var(--ease), visibility 0s; }

/* ---------------------------------------------------------
   17) header 品牌副標不換行（修「國際．髮品策展」掉行）
   --------------------------------------------------------- */
.brand__word-sub { white-space: nowrap; letter-spacing: 0.28em; }

/* ---------------------------------------------------------
   18) 手機側滑選單：精緻化 + 對齊修正 + 跨機穩定
      原本 inset:132px（舊桌機 header 高）在手機 header(104px) 會留縫；
      改為全螢幕面板、內容起於 header 下方，header 以更高 z-index 疊在上方，
      不論 header 高度變化都不留縫。用 100dvh + 安全區確保各款手機正常。
   --------------------------------------------------------- */
@media (max-width: 900px) {
  .drawer {
    inset: 0;
    width: 100%;
    height: 100dvh;
    padding: calc(150px + env(safe-area-inset-top, 0px)) clamp(24px, 7vw, 40px)
             calc(30px + env(safe-area-inset-bottom, 0px));
    background:
      radial-gradient(135% 55% at 100% 0%, rgba(184,153,104,0.09), transparent 55%),
      var(--cream);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
  }
  .drawer__nav { gap: 0; margin-top: 6px; }
  .drawer__nav a {
    position: relative;
    font-size: clamp(1.25rem, 5vw, 1.55rem);
    letter-spacing: 0.06em;
    padding: 15px 34px 15px 0;
    border-bottom: 1px solid rgba(10,10,10,0.09);
    opacity: 0;
    transform: translateX(20px);
    transition: color var(--t-fast) var(--ease);
  }
  .drawer__nav a::after {
    content: "→";
    position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
    font-size: 0.62em; color: var(--gold-ink);
    opacity: 0; transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  }
  .drawer__nav a:hover, .drawer__nav a:focus-visible { color: var(--gold-ink); }
  .drawer__nav a:hover::after, .drawer__nav a:focus-visible::after { opacity: 1; transform: translate(4px, -50%); }

  /* 開啟時逐項淡入（stagger）— 精緻的登場節奏 */
  .drawer.is-open .drawer__nav a { animation: jbkDrawerItem 0.55s var(--ease) both; }
  .drawer.is-open .drawer__nav a:nth-child(1) { animation-delay: 0.12s; }
  .drawer.is-open .drawer__nav a:nth-child(2) { animation-delay: 0.18s; }
  .drawer.is-open .drawer__nav a:nth-child(3) { animation-delay: 0.24s; }
  .drawer.is-open .drawer__nav a:nth-child(4) { animation-delay: 0.30s; }
  .drawer.is-open .drawer__nav a:nth-child(5) { animation-delay: 0.36s; }
  .drawer.is-open .drawer__nav a:nth-child(n+6) { animation-delay: 0.42s; }

  .drawer__foot {
    margin-top: auto;
    padding-top: 26px;
    font-size: 1.1rem;
    color: var(--gold-ink);
    opacity: 0;
  }
  .drawer__foot::before {
    content: "";
    display: block; width: 44px; height: 1px;
    background: linear-gradient(90deg, var(--gold), transparent);
    margin-bottom: 18px;
  }
  .drawer.is-open .drawer__foot { animation: jbkDrawerItem 0.6s var(--ease) 0.48s both; }
}
@keyframes jbkDrawerItem { to { opacity: 1; transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) {
  .drawer.is-open .drawer__nav a,
  .drawer.is-open .drawer__foot { animation: none; opacity: 1; transform: none; }
}

/* ---------------------------------------------------------
   19) 商品頁購買列：手機修正「加入購物袋」被壓成直排
      根因：.pd-info__form 缺 flex-wrap，導致 ≤560px 的
      .pd-wish{width:100%} 無法換行，qty+加入鈕+收藏擠在同一列。
   --------------------------------------------------------- */
@media (max-width: 560px) {
  .pd-info__form { flex-wrap: wrap; }
  .pd-info__form .btn--lg {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    padding: 0 18px;
    letter-spacing: 0.2em;
  }
  .pd-info__form .qty { flex: 0 0 auto; }
}

/* ---------------------------------------------------------
   20) 站內互相連結：文章↔商品
      文章頁「相關嚴選」商品區、商品頁「延伸閱讀」文章區。
      分散權重、增加停留，對 SEO/GEO 加分。
   --------------------------------------------------------- */
.article__products {
  margin-top: 56px;
  padding-top: 44px;
  border-top: 1px solid rgba(31, 26, 20, 0.10);
}
.article__products .section-head,
.pd-articles .section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 26px;
}
.article__products .section-title,
.pd-articles .section-title {
  margin: 4px 0 0;
  font-size: clamp(1.35rem, 3.4vw, 1.75rem);
}

/* 商品頁：延伸閱讀文章卡 */
.pd-articles {
  margin-top: 56px;
  padding-top: 44px;
  border-top: 1px solid rgba(31, 26, 20, 0.10);
}
.pd-articles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.pd-article {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(31, 26, 20, 0.08);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.pd-article:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px -22px rgba(31, 26, 20, 0.45);
  border-color: rgba(176, 141, 87, 0.55);
}
.pd-article__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: #efe9e0;
  overflow: hidden;
}
.pd-article__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.pd-article:hover .pd-article__media img { transform: scale(1.05); }
.pd-article__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: .35;
}
.pd-article__body {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pd-article__cat {
  font-size: .72rem;
  letter-spacing: .16em;
  color: #b08d57;
  text-transform: uppercase;
}
.pd-article__title {
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 900px) {
  .pd-articles__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 560px) {
  .pd-articles__grid { grid-template-columns: 1fr; }
  .article__products .section-head,
  .pd-articles .section-head { flex-wrap: wrap; gap: 8px; }
}

/* 深色開場/夜間：卡片底色微調（若站點有 dark 類別時生效） */

/* ---------------------------------------------------------
   21) Hero 打字機動畫 + 主標／副標／摘要排版微調（RWD 安全、SEO 安全）
      文字逐字包 .tw-c；僅在 data-tw=on（非 reduced-motion）時待機隱藏。
   --------------------------------------------------------- */
.hero-slide__title .tw-c { display: inline-block; }

/* 待機隱藏：只作用於「已啟用動畫且正在顯示」的那一張，避免非動畫情境影響內容 */
.hero-banner[data-tw="on"] .hero-slide.is-active .hero-slide__title .tw-c { opacity: 0; }
.hero-banner[data-tw="on"] .hero-slide.is-active .hero-slide__title .italic {
  opacity: 0; transform: translateY(0.14em);
}
.hero-banner[data-tw="on"] .hero-slide.is-active .hero-slide__sub,
.hero-banner[data-tw="on"] .hero-slide.is-active .hero-slide__cta {
  opacity: 0; transform: translateY(12px);
}

/* 逐一揭露（選擇器需 ≥ 隱藏規則的特異性，否則 opacity:0 會壓過 is-in）*/
.hero-banner[data-tw="on"] .hero-slide.is-active .hero-slide__title .tw-c.is-in {
  opacity: 1; transition: opacity .14s ease;
}
.hero-banner[data-tw="on"] .hero-slide.is-active .hero-slide__title .italic.is-in {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
.hero-banner[data-tw="on"] .hero-slide.is-active .hero-slide__sub.is-in,
.hero-banner[data-tw="on"] .hero-slide.is-active .hero-slide__cta.is-in {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1);
}

/* 打字游標：金色細條，隨打字閃爍，打完淡出 */
.tw-caret {
  display: inline-block; width: 0.055em; min-width: 2px; height: 0.92em;
  margin-left: 0.08em; vertical-align: -0.08em; border-radius: 2px;
  background: linear-gradient(180deg, #E7D3A6, #AA9772);
  opacity: 0; transition: opacity .3s ease;
}
.hero-banner[data-tw="on"] .hero-slide.is-active .tw-caret.is-on {
  opacity: 1; animation: twBlink 1s steps(1) infinite;
}
@keyframes twBlink { 50% { opacity: 0; } }

/* 排版微調：eyebrow 加一道細金線、層次更清楚；摘要行首字距收斂 */
.hero-slide__eyebrow { display: inline-flex; align-items: center; gap: 0.75em; }
.hero-slide__eyebrow::after {
  content: ""; width: 34px; height: 1px;
  background: linear-gradient(90deg, var(--champagne, #C7AE7E), transparent);
  opacity: 0.7;
}
.hero-slide__sub { letter-spacing: 0.01em; }

/* reduced-motion：一律完整顯示、不打字、不顯示游標 */
@media (prefers-reduced-motion: reduce) {
  .hero-banner .hero-slide .tw-c,
  .hero-banner .hero-slide .italic,
  .hero-banner .hero-slide__sub,
  .hero-banner .hero-slide__cta { opacity: 1 !important; transform: none !important; }
  .tw-caret { display: none !important; }
}

/* ---------------------------------------------------------
   22) 結帳流程：步驟指示器 + 免運進度條（購物車→填寫→完成）
   --------------------------------------------------------- */
.ck-steps-wrap{ margin: 26px auto 0; }
.ck-steps-wrap--top{ margin-top: 40px; }
.ck-steps{ display:flex; align-items:center; justify-content:center; list-style:none; padding:0; margin:0; }
.ck-step{ display:flex; align-items:center; gap:10px; color:#a89f90; font-size:.9rem; }
.ck-step:not(:last-child)::after{ content:""; width:44px; height:1px; background:rgba(31,26,20,.18); margin:0 14px; }
.ck-step__n{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:.85rem; font-weight:600; border:1px solid rgba(31,26,20,.22); background:#fff; color:#a89f90; }
.ck-step.is-active .ck-step__n{ background:#1f1a14; border-color:#1f1a14; color:#fff; }
.ck-step.is-active{ color:#1f1a14; font-weight:600; }
.ck-step.is-done .ck-step__n{ background:#b08d57; border-color:#b08d57; color:#fff; }
.ck-step.is-done{ color:#9a7a46; }
@media (max-width:560px){
  .ck-step__label{ display:none; }
  .ck-step:not(:last-child)::after{ width:26px; margin:0 8px; }
  .ck-steps-wrap{ margin-top:18px; }
}

.freeship-bar{ margin:12px 0 4px; }
.freeship-bar__track{ height:8px; border-radius:20px; background:#eee7dc; overflow:hidden; }
.freeship-bar__fill{ display:block; height:100%; background:linear-gradient(90deg,#c7ae7e,#b08d57); border-radius:20px; transition:width .5s; }
.freeship-bar.is-reached .freeship-bar__fill{ background:linear-gradient(90deg,#1aa86a,#12965c); }
.freeship-bar__text{ font-size:.82rem; color:#6b655c; margin:8px 0 0; text-align:center; }
.freeship-bar__text strong{ color:#9a7a46; }
.freeship-bar.is-reached .freeship-bar__text strong{ color:#12965c; }

/* ---------------------------------------------------------
   23) 行銷模組（前台）：公告條 / 限時倒數 / 首購彈窗
   --------------------------------------------------------- */
.mkt-announce{ background:linear-gradient(90deg,#1f1a14,#3a2f22); color:#f3ece0; font-size:.86rem; }
.mkt-announce__inner{ display:flex; align-items:center; justify-content:center; gap:14px; padding:9px 16px; position:relative; text-align:center; }
.mkt-announce__text a{ color:#e7d3a6; text-decoration:underline; }
.mkt-announce__close{ position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:0; color:#c7bfb0; font-size:1.2rem; line-height:1; cursor:pointer; padding:4px 8px; }
.mkt-announce__close:hover{ color:#fff; }

.mkt-cd{ background:linear-gradient(90deg,#2a2119,#4a3a28); color:#f3ece0; }
.mkt-cd__inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:18px 26px; padding:16px 20px; }
.mkt-cd__title{ font-size:1rem; letter-spacing:.06em; margin:0; color:#e7d3a6; font-weight:600; }
.mkt-cd__clock{ display:flex; gap:10px; }
.mkt-cd__unit{ display:flex; flex-direction:column; align-items:center; min-width:48px; background:rgba(255,255,255,.06); border:1px solid rgba(231,211,166,.25); border-radius:8px; padding:6px 8px; }
.mkt-cd__unit b{ font-size:1.35rem; font-weight:700; line-height:1; color:#fff; font-variant-numeric:tabular-nums; }
.mkt-cd__unit i{ font-size:.68rem; font-style:normal; color:#c7bfb0; margin-top:3px; }
.mkt-cd__cta{ background:#e7d3a6; color:#1f1a14; padding:9px 20px; border-radius:24px; font-weight:600; font-size:.88rem; text-decoration:none; white-space:nowrap; transition:.2s; }
.mkt-cd__cta:hover{ background:#fff; }

.mkt-pop{ position:fixed; inset:0; z-index:9000; display:grid; place-items:center; background:rgba(20,16,12,.6); padding:20px; opacity:0; transition:opacity .3s; }
.mkt-pop.is-in{ opacity:1; }
.mkt-pop__box{ position:relative; background:#fbf8f2; border-radius:16px; max-width:420px; width:100%; padding:38px 34px 32px; text-align:center; box-shadow:0 30px 80px -30px rgba(20,16,12,.6); transform:translateY(12px); transition:transform .35s cubic-bezier(.16,1,.3,1); }
.mkt-pop.is-in .mkt-pop__box{ transform:none; }
.mkt-pop__close{ position:absolute; right:14px; top:12px; background:none; border:0; font-size:1.5rem; color:#a89f90; cursor:pointer; line-height:1; }
.mkt-pop__close:hover{ color:#1f1a14; }
.mkt-pop__title{ font-family:var(--ff-display,serif); font-size:1.5rem; margin:0 0 10px; color:#1f1a14; }
.mkt-pop__text{ font-size:.92rem; color:#6b655c; line-height:1.7; margin:0 0 18px; }
.mkt-pop__code{ display:inline-flex; align-items:center; gap:10px; background:#f3ece0; border:1px dashed #c7ae7e; border-radius:10px; padding:10px 18px; margin:0 0 18px; }
.mkt-pop__code span{ font-size:.72rem; color:#9a7a46; letter-spacing:.1em; }
.mkt-pop__code code{ font-size:1.1rem; font-weight:700; color:#9a7a46; letter-spacing:.08em; }
.mkt-pop__cta{ display:inline-block; background:#1f1a14; color:#fff; padding:12px 30px; border-radius:26px; text-decoration:none; font-weight:600; letter-spacing:.04em; transition:.2s; }
.mkt-pop__cta:hover{ background:#b08d57; }

@media (max-width:560px){
  .mkt-cd__inner{ gap:12px 14px; padding:14px; }
  .mkt-cd__title{ width:100%; }
  .mkt-cd__unit{ min-width:42px; }
}

/* ---------------------------------------------------------
   24) 送出中的按鈕狀態（防重複送出視覺回饋）
   --------------------------------------------------------- */
.btn.is-loading,
button.is-loading { opacity: .72; cursor: progress; pointer-events: none; }

/* ---------------------------------------------------------
   25) 修手機版「版面被左右拖動」：根元素關閉水平溢出。
      根因：手機滑出選單 .drawer 為 position:fixed 且 translateX 停在畫面外，
      不受 body{overflow-x:hidden} 裁切；html 又是 visible → 真機可橫向拖動。
      頁首為 position:fixed（非 sticky），因此在 html 設 overflow-x 完全安全。
      用 clip 為主（不建立捲動容器），hidden 為舊瀏覽器後備。
   --------------------------------------------------------- */
html { overflow-x: hidden; }
@supports (overflow-x: clip) { html { overflow-x: clip; } }

/* ---------------------------------------------------------
   26) 社群登入按鈕（登入 / 註冊頁）
   --------------------------------------------------------- */
.auth__social { margin-top: 22px; }
.auth__divider { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; color: #8a8377; font-size: .82rem; white-space: nowrap; }
.auth__divider::before, .auth__divider::after { content: ""; flex: 1; height: 1px; background: rgba(31,26,20,.12); }
.social-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 13px; border-radius: 12px; font-weight: 600; font-size: .95rem; letter-spacing: .02em; text-decoration: none; margin-bottom: 10px; border: 1px solid transparent; transition: filter .2s, transform .2s; }
.social-btn:hover { filter: brightness(.94); transform: translateY(-1px); }
.social-btn svg { flex: 0 0 auto; }
.social-btn--line { background: #06C755; color: #fff; }
.social-btn--fb   { background: #1877F2; color: #fff; }
.social-note { font-size: .75rem; color: #8a8377; text-align: center; margin: 6px 0 0; line-height: 1.5; }

/* ---------------------------------------------------------
   27) 首頁「精選嚴選」手機篩選列：單列可橫滑的精緻膠囊
      原本 .filter-bar--live 在手機沿用 flex-wrap，chip 參差換行、
      「全部」pill 只剩數字，很不精緻。改為單列橫滑、統一膠囊外觀。
   --------------------------------------------------------- */
@media (max-width: 768px) {
  .filter-bar--live {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding: 2px 2px 10px;
    justify-content: flex-start;
    -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 90%, transparent 100%);
  }
  .filter-bar--live::-webkit-scrollbar { display: none; }
  .filter-bar--live .chip {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(31,26,20,0.16);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 14px;
    letter-spacing: 0.14em;
    color: var(--ink, #1f1a14);
    background: #fff;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
  }
  .filter-bar--live .chip.is-active {
    background: var(--ink, #1f1a14);
    border-color: var(--ink, #1f1a14);
    color: #fff;
  }
  .filter-bar--live .chip__count {
    margin-left: 7px;
    font-size: 0.72em;
    color: var(--gold-ink, #9a7a46);
    opacity: 0.85;
  }
  .filter-bar--live .chip.is-active .chip__count { color: #e7d3a6; opacity: 0.95; }
}

/* ---------------------------------------------------------
   28) 每日轉盤「活動說明」彈窗（精緻 RWD）
   --------------------------------------------------------- */
.wheelintro{ position:fixed; inset:0; z-index:9100; display:grid; place-items:center; padding:20px;
  /* 有設計感的遮罩：徑向暈影(中央亮、四周暗，聚焦彈窗) + 毛玻璃 */
  background:radial-gradient(130% 120% at 50% 38%, rgba(34,27,20,.52) 0%, rgba(12,9,7,.80) 100%);
  -webkit-backdrop-filter:blur(5px) saturate(.92);
          backdrop-filter:blur(5px) saturate(.92);
  opacity:0; transition:opacity .35s ease; }
.wheelintro.is-in{ opacity:1; }
.wheelintro__box{ position:relative; width:100%; max-width:440px; text-align:center;
  background:radial-gradient(120% 100% at 50% 0%, #2a2219 0%, #17130f 70%); color:#f3ece0;
  border:1px solid rgba(199,174,126,.4); border-radius:20px; padding:40px 32px 30px;
  box-shadow:0 34px 90px -28px rgba(0,0,0,.7); transform:translateY(16px) scale(.97);
  transition:transform .4s cubic-bezier(.16,1,.3,1); overflow:hidden; }
.wheelintro.is-in .wheelintro__box{ transform:none; }
.wheelintro__box::before{ content:""; position:absolute; left:32px; right:32px; top:0; height:2px;
  background:linear-gradient(90deg,transparent,rgba(231,211,166,.85),transparent); }
.wheelintro__mark{ display:inline-block; opacity:.9; margin-bottom:6px; }
.wheelintro__mark .jbk-mark{ filter:brightness(0) invert(1) sepia(.5) saturate(3) hue-rotate(3deg); opacity:.85; }
.wheelintro__close{ position:absolute; right:16px; top:12px; background:none; border:0; color:#c7b19a; font-size:1.6rem; line-height:1; cursor:pointer; }
.wheelintro__close:hover{ color:#fff; }
.wheelintro__eyebrow{ font-size:.72rem; letter-spacing:.34em; color:#c7ae7e; margin:4px 0 10px; }
.wheelintro__title{ font-family:'Spectral',Georgia,'Noto Serif TC',serif; font-size:1.7rem; font-weight:600; line-height:1.3; margin:0 0 12px; color:#fff; }
.wheelintro__sub{ font-size:.92rem; line-height:1.75; color:#d4c6b3; margin:0 0 22px; }
.wheelintro__steps{ display:flex; align-items:center; justify-content:center; gap:6px; list-style:none; padding:0; margin:0 0 18px; }
.wheelintro__steps li{ display:flex; flex-direction:column; align-items:center; gap:7px; font-size:.8rem; color:#e7dccb; }
.wheelintro__n{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:700;
  background:linear-gradient(180deg,#c7ae7e,#9a7a46); color:#17130f; }
.wheelintro__sep{ width:26px; height:1px; background:rgba(199,174,126,.4); margin:0 2px; align-self:flex-start; margin-top:17px; }
.wheelintro__rule{ font-size:.72rem; color:#a89275; letter-spacing:.02em; margin:0 0 22px; }
.wheelintro__cta{ display:block; background:linear-gradient(135deg,#e7d3a6,#c7ae7e); color:#17130f; font-weight:700; letter-spacing:.14em;
  padding:14px; border-radius:30px; text-decoration:none; transition:filter .2s, transform .2s; }
.wheelintro__cta:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.wheelintro__later{ display:block; width:100%; margin-top:12px; background:none; border:0; color:#9a8a72; font-size:.82rem; cursor:pointer; }
.wheelintro__later:hover{ color:#d4c6b3; }

@media (max-width:520px){
  /* 手機：改為底部上滑 sheet，貼合拇指 */
  .wheelintro{ place-items:end center; padding:0; }
  .wheelintro__box{ max-width:100%; border-radius:22px 22px 0 0; padding:34px 24px calc(26px + env(safe-area-inset-bottom));
    transform:translateY(100%); }
  .wheelintro.is-in .wheelintro__box{ transform:none; }
  .wheelintro__title{ font-size:1.5rem; }
  .wheelintro__steps li{ font-size:.75rem; }
  .wheelintro__n{ width:30px; height:30px; }
  .wheelintro__sep{ width:16px; margin-top:15px; }
}

/* ---------------------------------------------------------
   29) 【關鍵修正】彈窗 hidden 時要真的隱藏、且未開啟時不可攔截點擊
      根因：.wheelintro / .mkt-pop 的 display:grid 特異性高於 UA 的
      [hidden]{display:none}，導致隱藏時仍以 display:grid 全螢幕覆蓋、
      雖 opacity:0 隱形卻攔截整頁點擊（例如轉盤的「立即選購」按不到）。
   --------------------------------------------------------- */
.wheelintro[hidden], .mkt-pop[hidden] { display: none !important; }
.wheelintro:not(.is-in), .mkt-pop:not(.is-in) { pointer-events: none; }

/* ---------------------------------------------------------
   30) 轉盤精緻化：hub 呼吸環（邀請點擊）+ 獎項一覽 + 光暈
   --------------------------------------------------------- */
.wheel__hub{ position:absolute; }
.wheel__hub::before{ content:""; position:absolute; inset:-8%; border-radius:50%;
  border:1px solid rgba(199,174,126,.55); pointer-events:none;
  animation:wheelHubBreathe 2.6s ease-in-out infinite; }
@keyframes wheelHubBreathe{ 0%,100%{ transform:scale(1); opacity:.5 } 50%{ transform:scale(1.16); opacity:0 } }
.wheel.is-locked .wheel__hub::before,
.wheel__hub.is-spinning::before{ display:none; }
.wheel__hub-text{ text-shadow:0 0 10px rgba(231,211,166,.4); }

.wheel__legend{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; margin:16px auto 0; max-width:430px; }
.wheel__legend-k{ font-size:.72rem; letter-spacing:.16em; color:#9a8a72; }
.wheel__legend-chip{ font-size:.74rem; letter-spacing:.06em; color:#9a7a46;
  background:rgba(199,174,126,.12); border:1px solid rgba(199,174,126,.38); border-radius:20px; padding:3px 12px; }

/* 中獎瞬間：低調金粉微光（.is-won 由 JS 短暫加上，一次性播放） */
.wheel.is-won::after{ content:""; position:absolute; inset:-12%; border-radius:50%; pointer-events:none; z-index:5;
  background:radial-gradient(circle at 50% 50%, rgba(231,211,166,.42) 0%, rgba(231,211,166,0) 60%);
  animation:wheelWinBloom 1.5s ease-out forwards; }
@keyframes wheelWinBloom{ 0%{opacity:0; transform:scale(.85)} 22%{opacity:1; transform:scale(1)} 100%{opacity:0; transform:scale(1.16)} }
.wheel.is-won::before{ content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:6;
  background:
    radial-gradient(2px 2px at 20% 18%, #fbe9c0 42%, transparent 44%),
    radial-gradient(2px 2px at 82% 26%, #fbe9c0 42%, transparent 44%),
    radial-gradient(1.5px 1.5px at 30% 82%, #fbe9c0 42%, transparent 44%),
    radial-gradient(2px 2px at 74% 80%, #fbe9c0 42%, transparent 44%),
    radial-gradient(1.5px 1.5px at 50% 6%, #fbe9c0 42%, transparent 44%),
    radial-gradient(1.5px 1.5px at 10% 52%, #fbe9c0 42%, transparent 44%),
    radial-gradient(1.5px 1.5px at 92% 54%, #fbe9c0 42%, transparent 44%),
    radial-gradient(1.5px 1.5px at 62% 92%, #fbe9c0 42%, transparent 44%);
  animation:wheelWinDust 1.5s ease-out forwards; }
@keyframes wheelWinDust{ 0%{opacity:0; transform:scale(.92)} 18%{opacity:1} 100%{opacity:0; transform:scale(1.28)} }

/* 31 · 文章合規／提醒框（免責聲明）—— 低調但明顯，讓讀者確實看到 */
.article-callout{margin:1.6rem 0;padding:1rem 1.25rem;background:rgba(184,153,104,.07);border:1px solid rgba(184,153,104,.28);border-left:3px solid var(--gold,#B89968);border-radius:4px;}
.article-callout p{margin:0;font-size:.9rem;line-height:1.85;color:var(--ink-soft,#5a544c);}
.article-callout strong{color:var(--ink,#2b2620);}