/*
 Theme Name: Blocksy Child - CHENXIN SPA
 Theme URI: https://chenxinspa.com
 Description: Child theme for Blocksy, customized blog archive with SPA cards + filter/search/load more.
 Author: Rex
 Version: 1.0.0
 Template: blocksy
 Text Domain: blocksy-child-spa
*/

/* =========================
   設計變數（整站共用）
   ========================= */
:root{
  --spa-bg:           #FAF8F6;
  --spa-text:         #2B2B2B;
  --spa-muted:        #6e767a;
  --spa-primary:      #6BA293;
  --spa-primary-ink:  #13443B;
  --spa-secondary:    #EEDBD3;
  --spa-accent:       #C6A982;
  --spa-card:         #FFFFFF;
  --spa-radius:       16px;
  --spa-shadow:       0 8px 24px rgba(0,0,0,.08);

  /* 統一徽章色系：淡金黃 + 深棕 */
  --badge-ink:   #4B3B28;
  --badge-g1:    #F7D189;
  --badge-g2:    #F1BD58;
  --badge-glow:  rgba(241,189,88,.36);
}

/* =========================
   工具：容器與按鈕
   ========================= */
.spa-container{ max-width:1200px; margin:0 auto; padding:0 20px; }

/* Hero/CTA 共用按鈕 */
.spa-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 18px; border-radius:999px; text-decoration:none; font-weight:700;
  border:1px solid transparent; line-height:1; transition:.25s ease;
}
.spa-btn--primary{ background:var(--spa-primary); color:#fff; }
.spa-btn--primary:hover{ filter:brightness(.95); transform:translateY(-1px); }
.spa-btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.spa-btn--ghost:hover{ background:rgba(255,255,255,.12); }

/* =========================
   Blog 列表：卡片與網格
   ========================= */

/* 可選：讓 Blocksy 原生分頁隱藏（我們用載入更多） */
/* .navigation.pagination { display:none; } */

/* 只限我們的清單容器下調整 */
#postGrid article { margin:0; }
#postGrid .entry-meta,
#postGrid .ct-read-more,
#postGrid .ct-post-meta { display:none; }

/* 讓卡片看起來一致 */
#postGrid .spa-card { display:flex; flex-direction:column; height:100%; }

/* 卡片基礎 */
#postGrid .spa-card{
  background:var(--spa-card);
  border-radius:var(--spa-radius);
  box-shadow:var(--spa-shadow);
  overflow:hidden;
  border:1px solid rgba(0,0,0,.04);
}

/* 圖片 */
#postGrid .spa-card__img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
  display:block;
}

/* 內文與貼底動作列 */
#postGrid .spa-card__body{ padding:16px; display:flex; flex-direction:column; gap:8px; height:100%; }
#postGrid .spa-card__actions{ margin-top:auto; display:flex; gap:10px; flex-wrap:wrap; }

/* Grid 4 欄（已有全域 .spa-grid，但再加保險） */
#postGrid.spa-grid{ display:grid; gap:18px; grid-template-columns:repeat(1,minmax(0,1fr)); }
@media (min-width:576px){ #postGrid.spa-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:992px){ #postGrid.spa-grid{ grid-template-columns:repeat(4,1fr); } }

/* 移除 Blocksy 在列表內的多餘元素（只在我們容器內生效） */
#postGrid article .entry-meta,
#postGrid article .ct-post-meta,
#postGrid article .ct-read-more,
#postGrid article .entry-excerpt { display:none !important; }

/* 卡片標題視覺微調 */
#postGrid .spa-card__title{ font-size:18px; margin:0; font-weight:700; }

/* 篩選列的小圓角標籤一致（用在最低價/標籤） */
.spa-offer__tag{ background:var(--spa-primary); color:#fff; border-radius:999px; padding:3px 10px; font-size:13px; }

/* === Blog 篩選 chips（分類按鈕） === */
.chx-filterbar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.js-chx-filter{
  padding:6px 12px; border-radius:999px;
  font-size:14px; font-weight:600; line-height:1;
  border:1px solid rgba(0,0,0,.12);
  background:#fff; color:var(--spa-primary-ink);
  box-shadow:0 1px 0 rgba(0,0,0,.03);
  transition:background .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease, border-color .2s ease;
}
.js-chx-filter:hover{
  background:rgba(107,162,147,.10);
  border-color:rgba(107,162,147,.35);
  transform:translateY(-1px);
  box-shadow:var(--spa-shadow);
}
.js-chx-filter:focus-visible{
  outline:3px solid rgba(107,162,147,.35);
  outline-offset:2px;
}
.js-chx-filter.is-active{
  background:var(--spa-primary);
  color:#fff;
  border-color:var(--spa-primary);
  box-shadow:0 0 0 1px rgba(255,255,255,.6) inset, var(--spa-shadow);
  transform:none;
}
/* 取消分類（Uncategorized）可做弱化處理（可選） */
.js-chx-filter[data-cat="Uncategorized"]{
  color:var(--spa-muted);
  border-color:rgba(0,0,0,.08);
}
.js-chx-filter[data-cat="Uncategorized"]:hover{ background:#f4f6f6; }

/* 手機橫向超出時允許橫向滾動（可選） */
@media (max-width: 420px){
  .chx-filterbar{ overflow:auto; padding-bottom:4px; }
  .chx-filterbar::-webkit-scrollbar{ height:6px; }
  .chx-filterbar::-webkit-scrollbar-thumb{ background:#0002; border-radius:999px; }
}

/* === chips 外框：置中 === */
.chx-filterbar-wrapper {
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:12px; margin-bottom:20px; text-align:center;
}

/* === Blog 卡片舞台置中 & 視覺細節 === */
#postGrid.spa-grid{
  display:grid;
  gap:18px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  justify-content:center;
}
#postGrid .spa-card{ max-width: 360px; margin-left:auto; margin-right:auto; }
#postGrid .spa-card__media{ display:block; overflow:hidden; }
#postGrid .spa-card__img{
  width:100%; aspect-ratio:3/2; object-fit:cover; object-position:center center;
  transition: transform .35s ease;
}
#postGrid .spa-card:hover .spa-card__img{ transform: scale(1.03); }

#postGrid .spa-card__body{ padding:16px; display:flex; flex-direction:column; gap:8px; height:100%; }
#postGrid .spa-card__actions{ margin-top:auto; display:flex; gap:10px; flex-wrap:wrap; }

/* === 載入更多：hover / active 動效 === */
#chxLoadMore{
  position:relative;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, filter .2s ease;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
}
#chxLoadMore:hover{
  background:var(--spa-secondary);
  border-color:rgba(0,0,0,.08);
  transform:translateY(-1px);
  box-shadow:var(--spa-shadow);
}
#chxLoadMore:active{ transform:translateY(0); filter:brightness(.98); }

/* =========================
   服務清單：卡片（服務頁 / 分類頁用）
   ========================= */
.ch-spa-grid{
  justify-content:center;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:18px;
}
.ch-spa-body{ padding:14px; }
.ch-spa-card .spa-card__title{ font-size:18px; line-height:1.35; }
.ch-spa-card .spa-card__text{
  font-size:14px; line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.ch-spa-card .spa-card__actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.ch-spa-card .spa-offer__meta { display:flex; align-items:baseline; gap:8px; }
.ch-spa-card .spa-offer__meta strong { font-weight:700; }
.ch-spa-card .spa-offer__tag {
  display:inline-block; padding:2px 8px; border-radius:9999px; font-size:12px; line-height:1;
  background:#EEDBD3; color:inherit;
}
.ch-spa-card .spa-offer__meta,
.ch-spa-card .spa-offer__meta * { visibility:visible !important; opacity:1 !important; }

/* =========================
   Header 主 CTA：線上預約
   ========================= */
.header-cta a, .menu .book-now a{
  background:#6BA293; color:#fff !important; padding:10px 14px;
  border-radius:999px; font-weight:700; border:1px solid transparent;
}
.header-cta a:hover{ filter:brightness(.95); }
@media (max-width: 768px){
  .mobile-nav .menu-item.book-now{ order:-1; }
}

/* =========================
   SPA 分類頁 HERO（與首頁一致）
   ========================= */
.chspa-term-hero { position:relative; min-height: clamp(38vh, 52vh, 62vh); isolation:isolate; }
.chspa-term-hero__bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform: scale(1.02);
}
.chspa-term-hero__overlay {
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.45) 40%, rgba(0,0,0,.35) 100%);
  mix-blend:multiply;
}
.chspa-term-hero__content {
  position:relative; z-index:1;
  display:flex; flex-direction:column; gap:14px;
  justify-content:center; align-items:flex-start;
  height:100%; padding: clamp(32px, 8vw, 72px) 0;
  color:#fff;
}
.chspa-term-hero__kicker { letter-spacing:.12em; text-transform:uppercase; font-weight:600; opacity:.9; }
.chspa-term-hero__title { margin:0; font-weight:700; line-height:1.15; font-size: clamp(28px, 4.2vw, 52px); text-shadow:0 2px 20px rgba(0,0,0,.2); }
.chspa-term-hero__subtitle { margin:0; opacity:.95; font-size: clamp(15px, 2.1vw, 20px); max-width: 760px; }
.chspa-term-hero__ctas { display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; }

/* === Mobile HERO：玻璃卡片（不動 HTML） === */
@media (max-width: 768px){
  .chspa-hero { position: relative; }
  .chspa-hero__bg { background-position: center 20% !important; }
  .chspa-hero__overlay{
    z-index: 0 !important;
    background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.40) 55%, rgba(0,0,0,.45) 100%) !important;
  }
  .chspa-hero__content{
    position:relative; z-index:2; padding:56px 20px 44px;
    align-items:flex-start;
  }
  .chspa-hero__content::after{
    content:"";
    position:absolute;
    top:32px; left:16px; right:16px;
    min-height: 170px;
    border-radius:16px;
    background: rgba(15,25,23,.42);
    border:1px solid rgba(255,255,255,.14);
    backdrop-filter: saturate(120%) blur(6px);
    -webkit-backdrop-filter: saturate(120%) blur(6px);
    z-index:1;
    pointer-events:none;
  }
  .chspa-hero__kicker,
  .chspa-hero__title,
  .chspa-hero__subtitle,
  .chspa-hero__ctas{ position:relative; z-index:2; }
  .chspa-hero__kicker,
  .chspa-hero__title,
  .chspa-hero__subtitle{
    color:#fff !important;
    background:transparent !important;
    text-shadow:0 3px 12px rgba(0,0,0,.55);
  }
}

/* === 首頁 / 分類頁 HERO 圓角化（桌機 & 手機）=== */
.chspa-hero,
.chspa-term-hero {
  border-radius: 16px;
  overflow: hidden;
}
.chspa-hero__bg, .chspa-hero__overlay,
.chspa-term-hero__bg, .chspa-term-hero__overlay {
  border-radius: 16px;
}

/* =========================
   首頁「本月主打」卡片 — 強化 + 徽章固定右上
   ========================= */
.grid--offers { gap: 26px; }

.offer{
  position: relative;
  border: 1.5px solid rgba(0,0,0,.08);
  border-radius: 16px;
  background: #fff;
  padding: 22px 22px 20px 22px; /* 右上有徽章，多留一點邊距 */
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.offer:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  border-color: rgba(0,0,0,.12);
}

.offer__title{ font-size: 1.15rem; font-weight: 800; margin: 2px 0 8px; color:#16333A; }
.offer__desc{ font-size:.96rem; color: var(--spa-muted); margin: 0 0 14px; }

/* 徽章容器固定右上角 */
.offer__meta{
  position: absolute;
  top: 12px;
  right: 12px;
  pointer-events: none; /* 不阻擋右上角互動 */
}

/* ===== 徽章：統一「淡金黃 + 深棕」色系（整合重複定義，避免覆寫） ===== */
.tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px;
  border-radius:999px;
  font-size:.78rem; font-weight:700; line-height:1;
  color: var(--badge-ink);
  background: linear-gradient(180deg, var(--badge-g1), var(--badge-g2));
  box-shadow:
    0 6px 14px var(--badge-glow),
    inset 0 0 0 1px rgba(255,255,255,.45);
}
.tag::before{
  content:""; width:6px; height:6px; border-radius:999px; background:var(--badge-ink); opacity:.9;
}
/* 舊類別名稱仍可用，視覺一致 */
.tag--hot,
.tag--limited,
.tag--instore{
  color: var(--badge-ink) !important;
  background: linear-gradient(180deg, var(--badge-g1), var(--badge-g2)) !important;
  box-shadow:
    0 6px 14px var(--badge-glow),
    inset 0 0 0 1px rgba(255,255,255,.45) !important;
}
.tag--limited::before,
.tag--hot::before,
.tag--instore::before{
  background: var(--badge-ink) !important;
}

/* 行動裝置：卡片陰影稍弱、間距更緊湊（桌機不變） */
@media (max-width: 768px){
  .grid--offers { gap: 16px; }
  .offer{ padding: 18px 18px 16px; box-shadow: 0 4px 12px rgba(0,0,0,.06); }
  .offer__title{ font-size: 1.08rem; }
}

/* ===== Reviews Grid (CHX) ===== */
.chx-reviews { --gap: 14px; --radius:16px; }
.chx-reviews__grid{
  display:grid; gap:var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .chx-reviews__grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

.rv{
  background:#fff; border:1px solid #eef0ef; border-radius:16px;
  padding:16px; box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.rv__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.rv__author{ font-weight:700; color:#16333A; }
.rv__rate{ color:#F5A524; letter-spacing:1px; margin-bottom:8px; font-size:18px; }
.rv__content{ color:#4d575a; line-height:1.7; }
.rv__foot{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:10px; }
.rv__date{ color:#8a9497; font-size:13px; }
.rv__link{
  font-size:13px; color:#13443B; text-decoration:none; border-bottom:1px dashed rgba(19,68,59,.35);
}
.rv__link:hover{ opacity:.9; }

/* =========================================================
   ★ 終極覆蓋：行動裝置顯示為「一行一欄」
   —— 提高權重、全面 !important、同時強制 display:grid
   —— 同時涵蓋 reviews 的兩種容器類名
   ========================================================= */
@media (max-width: 992px){

  /* 本月主打（Offers）*/
  .grid.grid--offers,
  .container .grid.grid--offers,
  .chspa-home .grid.grid--offers,
  .grid--offers{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .grid--offers > *,
  .grid.grid--offers > *{
    max-width: none !important;
    width: 100% !important;
  }

  /* 顧客怎麼說（Reviews）*/
  .chx-reviews__grid,
  .chspa-home .chx-reviews__grid,
  .container .chx-reviews__grid,
  .reviews-grid, /* 早期版本容器名 */
  .chspa-home .reviews-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .chx-reviews__grid > *,
  .reviews-grid > *{
    max-width: none !important;
    width: 100% !important;
  }
}

/* =========================================================
   ★ SPA 單篇（single-spa_service）行動版單欄修正
   目標：移除 Blocksy 兩欄網格造成的「左側空白」
   只影響單篇服務頁，不影響其他頁面
   ========================================================= */

/* 放寬容器並消除任何左右位移 */
body.single-spa_service #primary.chspa-single,
body.single-spa_service #primary.chspa-single .spa-section,
body.single-spa_service #primary.chspa-single .spa-section .spa-container{
  max-width:100% !important;
  margin:0 !important;
  padding-left:16px !important;
  padding-right:16px !important;
}

/* —— 把主題外層網格統一改成單欄 —— */
@media (max-width: 1200px){
  /* Blocksy 常見結構名稱 */
  body.single-spa_service .site-main,
  body.single-spa_service .content-area,
  body.single-spa_service .ct-main,
  body.single-spa_service .ct-container,
  body.single-spa_service .ct-grid,
  body.single-spa_service .ct-columns,
  body.single-spa_service .entry-content-wrap{
    display:block !important;
    grid-template-columns:1fr !important;
  }

  /* 內容區避免被指派到第 2 欄（造成左側空白） */
  body.single-spa_service .ct-content,
  body.single-spa_service .ct-main > .ct-container > .ct-content,
  body.single-spa_service .site-main .ct-content{
    grid-column:1 / -1 !important;
    width:100% !important;
    margin:0 !important;
    float:none !important;
  }

  /* 側欄改為顯示在內容之後（占滿全寬） */
  body.single-spa_service .ct-sidebar,
  body.single-spa_service .sidebar,
  body.single-spa_service [class*="sidebar"]{
    grid-column:1 / -1 !important;
    width:100% !important;
    max-width:none !important;
    float:none !important;
    order:2 !important;
    margin:16px 0 0 !important;
  }
}

/* 超小螢幕：若不需要側欄，直接隱藏（可按需移除這段） */
@media (max-width: 640px){
  body.single-spa_service .ct-sidebar,
  body.single-spa_service [class*="sidebar"]{
    display:none !important;
  }
}

/* —— 我們頁面內部：Hero 與內容/側欄一律單欄 —— */
@media (max-width: 1024px){
  body.single-spa_service .spa-serv__hero,
  body.single-spa_service .spa-serv__grid{
    display:block !important;
  }
  body.single-spa_service .spa-serv__hero > *,
  body.single-spa_service .spa-serv__grid > *{
    width:100% !important;
  }
  body.single-spa_service .spa-serv__sidebar{ margin-top:16px !important; }
  body.single-spa_service .spa-serv__sidecard{ position:static !important; }
}

/* 內容圖片滿寬、防爆版 */
body.single-spa_service .spa-serv__cover,
body.single-spa_service .spa-serv__content img{
  width:100% !important;
  height:auto !important;
  display:block !important;
}

/* Gutenberg Columns 相容：手機強制單欄 */
@media (max-width: 1024px){
  body.single-spa_service .entry-content .wp-block-columns{ display:flex !important; flex-wrap:wrap !important; }
  body.single-spa_service .entry-content .wp-block-column{ flex-basis:100% !important; max-width:100% !important; margin:0 0 14px !important; }
}

/* 服務：隱藏主題預設的 Page Title/任何 blog 篩選列（雙保險） */
body.page-template-page-services .ct-page-title,
body.post-type-archive-spa_service .ct-page-title,
body.page-template-page-services .page-title,
body.post-type-archive-spa_service .page-title,
body.page-template-page-services .page-header,
body.post-type-archive-spa_service .page-header,
body.page-template-page-services .entry-header,
body.post-type-archive-spa_service .entry-header,
body.page-template-page-services .chx-filterbar-wrapper,
body.page-template-page-services .chx-filterbar,
body.post-type-archive-spa_service .chx-filterbar-wrapper,
body.post-type-archive-spa_service .chx-filterbar { display: none !important; }

/* === Services 頁清單樣式對齊部落格卡片 === */

/* 容器寬度與間距 */
.chspa-services .spa-section .spa-container { max-width: 1160px; }

/* 讓 [spa_services] 的清單（.ch-spa-grid）= 部落格的 .spa-grid 規格 */
.chspa-services .ch-spa-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:24px;
  align-items:stretch;
}
@media (max-width: 1024px){
  .chspa-services .ch-spa-grid{ grid-template-columns: repeat(2,1fr); gap:20px; }
}
@media (max-width: 640px){
  .chspa-services .ch-spa-grid{ grid-template-columns: 1fr; gap:16px; }
}

/* 卡片結構與陰影半徑（與部落格一致） */
.chspa-services .ch-spa-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.04);
  border-radius:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  height:100%;
  display:flex; flex-direction:column;
}
.chspa-services .ch-spa-card .spa-card__body{
  display:flex; flex-direction:column; gap:8px; height:100%;
}
.chspa-services .ch-spa-card .spa-card__actions{ margin-top:auto; }

/* 文字尺寸對齊 */
.chspa-services .spa-card__title{ font-size:20px; line-height:1.35; margin-top:2px; }
.chspa-services .spa-card__text{ font-size:14px; color:#394247; }

/* Reviews — 「瀏覽評論」白字幽靈按鈕（全站通用） */
.chspa-review-card .chspa-review-more,
.rv .chspa-review-more{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 14px; border-radius:10px; margin-top:12px;
  background:transparent; border:1.5px solid rgba(255,255,255,.55);
  color:#fff; font-size:14px; font-weight:600; letter-spacing:.02em;
  text-decoration:none;
  transition:background .2s ease, border-color .2s ease, color .2s ease, transform .06s ease;
}
.chspa-review-card .chspa-review-more:hover,
.rv .chspa-review-more:hover{
  background:rgba(255,255,255,.14);
  border-color:#fff; color:#fff;
  transform:translateY(-1px);
}

/* =========================
   價目表頁（spa_price_list）v1
   ========================= */

.chspa-price{
  max-width: 1200px;
  margin: 0 auto 60px;
  padding: 32px 20px;
}

/* 頁首 */
.chspa-price__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:32px;
}

.chspa-price__page-title{
  margin:0;
  font-size:clamp(26px,3vw,36px);
  font-weight:800;
  letter-spacing:.04em;
}

/* 分類區塊 */
.chspa-section{
  margin-bottom:48px;
}

.chspa-title{
  font-size:22px;
  font-weight:800;
  margin:0 0 12px;
}

/* 表格卡片化 */
.chspa-price table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  overflow:hidden;
}

.chspa-price th{
  background:#f6f7f8;
  font-weight:700;
}

.chspa-price th,
.chspa-price td{
  padding:14px 16px;
  border-bottom:1px solid #eee;
}

.chspa-price tr:last-child td{
  border-bottom:none;
}

/* 價格 */
.chspa-price td:nth-child(3){
  font-weight:800;
  white-space:nowrap;
}

/* 子方案（— 1小時） */
.chspa-plan-name{
  padding-left:32px;
  color:#6e767a;
}

/* 行動版 */
@media (max-width: 768px){
  .chspa-price__head{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* =========================
   價目表 Mobile Card Layout v2
   ========================= */

@media (max-width: 820px){
  .chspa-price table,
  .chspa-price thead,
  .chspa-price tbody,
  .chspa-price th,
  .chspa-price td,
  .chspa-price tr{
    display:block;
  }

  .chspa-price thead{ display:none; }

  .chspa-price table{
    box-shadow:none;
    background:transparent;
    border-radius:0;
    border:none;
  }

  .chspa-price tr{
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:16px;
    box-shadow:0 10px 22px rgba(0,0,0,.06);
    padding:14px 14px 10px;
    margin:0 0 14px;
  }

  .chspa-price td{
    padding:8px 0;
    border:none;
  }

  /* 服務項目 / 時間 / 價格 的標籤 */
  .chspa-price td:nth-child(1)::before{
    content:"服務項目";
    display:block;
    font-weight:800;
    color:#6e767a;
    margin-bottom:4px;
    letter-spacing:.04em;
  }
  .chspa-price td:nth-child(2)::before{
    content:"時間";
    display:block;
    font-weight:800;
    color:#6e767a;
    margin-bottom:4px;
    letter-spacing:.04em;
  }
  .chspa-price td:nth-child(3)::before{
    content:"價格";
    display:block;
    font-weight:800;
    color:#6e767a;
    margin-bottom:4px;
    letter-spacing:.04em;
  }

  .chspa-price td:nth-child(3){
    font-size:18px;
    font-weight:900;
  }

  /* 子方案列（— 1小時）在手機上縮排不要擠 */
  .chspa-plan-name{
    padding-left:18px;
  }

  /* 預約按鈕群：改成可換行、不要擠在一起 */
  .chspa-book-row,
  .chspa-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:10px;
  }

  .chspa-price a.chspa-btn,
  .chspa-price .chspa-btn{
    padding:10px 14px;
    border-radius:999px;
    font-weight:800;
    white-space:nowrap;
  }
}

/* =========================
   價目表 Mobile Card Layout
   ========================= */

@media (max-width: 820px){

  /* table → block */
  .chspa-price table,
  .chspa-price thead,
  .chspa-price tbody,
  .chspa-price tr,
  .chspa-price th,
  .chspa-price td{
    display:block;
  }

  .chspa-price thead{ display:none; }

  .chspa-price table{
    background:transparent;
    box-shadow:none;
    border:none;
  }

  /* 每一列變成一張卡 */
  .chspa-price tr{
    background:#fff;
    border-radius:16px;
    padding:14px 16px;
    margin:0 0 16px;
    box-shadow:0 10px 22px rgba(0,0,0,.06);
  }

  .chspa-price td{
    padding:6px 0;
    border:none;
  }

  /* 欄位標籤 */
  .chspa-price td:nth-child(1)::before{
    content:"服務項目";
    display:block;
    font-weight:800;
    color:#6e767a;
    margin-bottom:2px;
  }

  .chspa-price td:nth-child(2)::before{
    content:"時間";
    display:block;
    font-weight:800;
    color:#6e767a;
    margin-bottom:2px;
  }

  .chspa-price td:nth-child(3)::before{
    content:"價格";
    display:block;
    font-weight:800;
    color:#6e767a;
    margin-bottom:2px;
  }

  .chspa-price td:nth-child(3){
    font-size:18px;
    font-weight:900;
  }

  /* 子方案（— 1小時） */
  .chspa-plan-name{
    padding-left:16px;
    color:#6e767a;
  }

  /* 預約按鈕區 */
  .chspa-price a,
  .chspa-price .chspa-btn{
    display:inline-block;
    margin-top:10px;
    padding:10px 16px;
    border-radius:999px;
    font-weight:800;
    white-space:nowrap;
  }
}

/* =========================
   價目表標題：主標 / 副標 分行顯示（Mobile）
   ========================= */
@media (max-width: 820px){

  /* 服務項目標題 */
  .chspa-price td:first-child a,
  .chspa-price td:first-child{
    line-height:1.5;
    word-break:break-word;
  }

  /* 用 | 或 ｜ 當斷行點 */
  .chspa-price td:first-child a{
    display:block;
  }

  .chspa-price td:first-child a::after{
    content:"";
    display:block;
  }

  /* 把 | 換成真正換行的視覺效果 */
  .chspa-price td:first-child a{
    white-space:pre-line;
  }
}