/* 黃彥翔醫師個人品牌站 — 元件樣式（移植自 04_設計稿/assets/site.css）。
   設計 token（配色/字型/字級/間距）由 theme.json 提供；此檔僅放元件專屬 class。
   字型 @font-face 由 theme.json fontFamilies 註冊，不在此重複。 */

:root{
  --bg:#FAF8F5; --blush:#F3EAE2; --card:#FBF8F4; --card-2:#FFFFFF;
  /* 卡片暖色對角漸層（參考 zen.dentist）；hover 再加深一階 */
  --card-grad:linear-gradient(to bottom right,#FCF8F1,#F6EFE2);
  --card-grad-hover:linear-gradient(to bottom right,#F6EFE2,#EDE1CC);
  --ink:#1C1C1A; --ink-2:#6B6B67; --accent:#8B7355; --accent-strong:#6E5A41;
  --clay:#D9CFC2; --line:rgba(28,28,26,.12);
  --h-serif:"Fraunces","Noto Serif TC",Georgia,Cambria,"PMingLiU","新細明體","Songti TC",serif;
  --body:"Source Sans 3","Noto Sans TC","Segoe UI","Microsoft JhengHei","微軟正黑體","PingFang TC",sans-serif;
}

/* ---- 通用排版輔助 ---- */
.hd-eyebrow{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-strong);display:inline-flex;align-items:center;gap:14px;font-family:var(--body);}
.hd-eyebrow::before{content:"";width:30px;height:1px;background:var(--accent);}
.hd-lead{color:#3a3a36;font-size:clamp(16px,2vw,18.5px);max-width:40em;line-height:1.7;}
/* 在受限版面(page 內容)中，WP 以 margin-inline:auto !important 把有 max-width 的子元素置中；
   覆蓋為靠左以對齊設計稿。 */
.is-layout-constrained > .hd-lead,.is-layout-constrained > .hd-eyebrow{margin-left:0 !important;margin-right:auto !important;}
.hd-muted{color:var(--ink-2);}
.hd-serif{font-family:var(--h-serif);}

/* ---- 頁首 / 導覽 ---- */
.wp-site-blocks .hd-header{position:sticky;top:0;z-index:20;background:rgba(250,248,245,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:0;}
.hd-brand-sub{font-family:var(--body);font-weight:400;color:var(--ink-2);font-size:12px;letter-spacing:.1em;}
/* ---- 自製導覽（CSS checkbox 開關，不依賴 WP Interactivity；靜態站穩定）---- */
.hd-header-inner{max-width:1088px;margin:0 auto;padding:12px clamp(20px,5vw,56px);display:flex;align-items:center;justify-content:space-between;position:relative;gap:12px;}
.hd-brand{font-family:var(--h-serif);font-weight:600;font-size:20px;color:var(--ink);text-decoration:none;line-height:1.1;display:flex;flex-direction:row;align-items:center;gap:11px;}
.hd-logo{width:46px;height:46px;display:block;flex:none;}
.hd-brand-tx{display:flex;flex-direction:column;line-height:1.1;}
.hd-brand small{font-family:var(--body);font-weight:400;color:var(--ink-2);font-size:12px;letter-spacing:.1em;margin-top:3px;}
.hd-nav{display:flex;align-items:center;gap:24px;}
.hd-nav a{color:var(--ink);text-decoration:none;font-size:15px;}
.hd-nav a:hover{color:var(--accent-strong);}
.hd-nav-cta{background:var(--accent-strong);color:#fff !important;border-radius:999px;padding:9px 20px;font-size:14.5px;}
.hd-nav-cta:hover{background:#5d4c37;}
.hd-navtoggle{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;}
.hd-burger{display:none;cursor:pointer;width:44px;height:40px;position:relative;}
.hd-burger span,.hd-burger span::before,.hd-burger span::after{content:"";position:absolute;left:10px;width:24px;height:2px;background:var(--ink);transition:.2s;}
.hd-burger span{top:19px;} .hd-burger span::before{top:-7px;} .hd-burger span::after{top:7px;}
.hd-navtoggle:checked ~ .hd-burger span{background:transparent;}
.hd-navtoggle:checked ~ .hd-burger span::before{top:0;transform:rotate(45deg);}
.hd-navtoggle:checked ~ .hd-burger span::after{top:0;transform:rotate(-45deg);}
.hd-navtoggle:focus-visible ~ .hd-burger{outline:2px solid var(--accent-strong);outline-offset:2px;}
@media(max-width:860px){
  .hd-burger{display:block;}
  .hd-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-top:1px solid var(--line);box-shadow:0 24px 44px -22px rgba(110,90,65,.45);padding:6px 0;}
  .hd-navtoggle:checked ~ .hd-nav{display:flex;}
  .hd-nav a{padding:15px clamp(20px,5vw,56px);border-bottom:1px solid var(--line);font-size:16px;}
  .hd-nav a:last-child{border-bottom:none;}
  .hd-nav-cta{background:none;color:var(--accent-strong) !important;border-radius:0;font-weight:600;}
}

/* ---- 首頁 Hero ---- */
.hd-hero h1{font-family:var(--h-serif);font-weight:700;line-height:1.22;word-break:keep-all;overflow-wrap:normal;}
/* H1 兩行式（B3 定案 2026-07-03）：第一行＝關鍵字小標（陶色），第二行＝情感主標。膠囊「專注於微創治療」保留。 */
.hd-hero h1 .l1,.hd-hero h1 .l2{display:block;font-family:var(--h-serif);word-break:keep-all;}
.hd-hero h1 .l1{font-size:clamp(17px,2.4vw,25px);font-weight:600;color:var(--accent-strong);letter-spacing:.5px;line-height:1.3;}
.hd-hero h1 .l2{font-size:clamp(28px,4.6vw,48px);font-weight:700;color:var(--ink);line-height:1.24;margin-top:6px;}
.hd-portrait{aspect-ratio:4/5;border-radius:20px;overflow:hidden;background:linear-gradient(160deg,#E7DFD4,var(--clay));box-shadow:0 30px 60px -30px rgba(110,90,65,.45);}
.hd-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 10%;display:block;}
/* 桌機並排時把醫師照縮到約 75%、置中，與文字欄高度相稱、減少垂直置中造成的上方留白 */
@media(min-width:782px){.hd-hero .hd-portrait{max-width:75%;margin-inline:auto;}}
/* 縮小 header 下方到首頁內容的空隙（約現有一半）：main 上邊距 20→10、hero 上內距桌機 8/手機 19（覆寫 pattern inline，用 !important） */
.wp-site-blocks > main{margin-block-start:10px;}
.hd-hero{padding-top:8px !important;}
@media(max-width:781px){.hd-hero{padding-top:19px !important;}}
/* 手機：區段間距的 clamp 最小值在窄螢幕偏大（區段間隔40px＋區段上下56px疊加≈96px），縮小讓區塊更緊湊 */
@media(max-width:781px){:root{--wp--preset--spacing--60:1.5rem;--wp--preset--spacing--70:2.5rem;--wp--preset--spacing--80:3rem;}}
/* 手機：h1 原 word-break:keep-all 讓標題成不可斷整塊，撐大 flex 文字欄的 min-content 導致整欄超出視窗；
   解法＝欄位 min-width:0 可縮 ＋ h1 允許 CJK 逐字換行 */
@media(max-width:781px){
  .hd-hero .wp-block-column{min-width:0;}
  .hd-hero h1,.hd-hero h1 .l1,.hd-hero h1 .l2{word-break:normal;overflow-wrap:anywhere;}
}
/* 手機首頁 hero 重排（2026-07-05，B 加強版）：標題→小字療程→完整照片→CTA→據點；長導言隱藏。
   用 display:contents 把兩欄的子元素攤平成同層 flex item，再以 order 排序——不改 HTML、不重複 H1、電腦版不動。 */
@media(max-width:781px){
  .hd-hero .wp-block-columns{display:flex;flex-direction:column;gap:0;}
  .hd-hero .wp-block-columns > .wp-block-column{display:contents;}
  .hd-hero h1{order:1;}
  .hd-hero .hd-lead{display:none;}
  .hd-hero .hd-tx-dot{order:2;margin-top:14px !important;font-size:12px;line-height:1.7;flex-wrap:wrap;color:var(--accent-strong);}
  .hd-hero .hd-tx-dot::before{display:none;}
  .hd-hero .hd-portrait{order:3;margin-top:16px;aspect-ratio:1/1;}
  .hd-hero .wp-block-buttons{order:4;margin-top:18px !important;}
  .hd-hero .hd-note{order:5;margin-top:16px !important;}
}
.hd-note{color:var(--ink-2);font-size:14.5px;}
.hd-note a{color:var(--accent-strong);border-bottom:1px solid var(--accent);text-decoration:none;}
.hd-pill{display:inline-block;font-family:var(--body);font-weight:600;font-size:16.5px;color:var(--accent-strong);background:var(--blush);border-radius:999px;padding:10px 22px;line-height:1.25;}
.hd-tx-dot{font-size:16px;color:var(--accent-strong);font-weight:600;display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;line-height:1.6;}
.hd-tx-dot::before{content:"";width:26px;height:1px;background:var(--accent);flex:none;}
.is-layout-constrained > .hd-tx-dot,.is-layout-constrained > .hd-pill{margin-left:0 !important;margin-right:auto !important;}

/* ---- 子頁 hero ---- */
.hd-t-hero{padding:18px 0 38px;border-bottom:1px solid var(--line);}
.hd-t-hero h1{font-family:var(--h-serif);font-weight:700;font-size:clamp(32px,5.4vw,52px);line-height:1.2;word-break:keep-all;}

/* ---- 理念交錯卡片 ---- */
.hd-card{background:var(--card-grad);border:1px solid rgba(28,28,26,.05);border-radius:18px;padding:26px 24px;box-shadow:0 18px 40px -28px rgba(110,90,65,.4);transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;}
.hd-card:hover{transform:translateY(-6px);background:var(--card-grad-hover);border-color:rgba(139,115,85,.4);box-shadow:0 30px 60px -28px rgba(51,35,31,.32);}
.hd-card .ico{width:30px;height:30px;color:var(--accent);margin-bottom:16px;transition:color .22s ease;}
.hd-card:hover .ico{color:var(--accent-strong);}
.hd-card h3{font-family:var(--h-serif);font-weight:500;font-size:20px;line-height:1.3;margin:0 0 10px;}
.hd-card p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.7;}
.hd-stagger > .wp-block-column:nth-child(2){margin-top:48px;}

/* ---- 編號手風琴（療程 / FAQ）---- */
.hd-acc{border-top:1px solid var(--line);}
.hd-acc details{border-bottom:1px solid var(--line);}
.hd-acc summary{list-style:none;cursor:pointer;padding:24px 4px;font-family:var(--h-serif);font-weight:500;font-size:clamp(18px,2.3vw,22px);line-height:1.3;color:var(--ink);position:relative;padding-right:36px;}
.hd-acc summary::-webkit-details-marker{display:none;}
.hd-acc .hd-num{font-family:var(--body);font-size:13px;color:var(--accent);letter-spacing:.1em;margin-right:16px;font-weight:400;}
.hd-acc summary::after{content:"▾";position:absolute;right:6px;top:24px;color:var(--accent-strong);transition:transform .2s;font-size:16px;}
.hd-acc details[open] summary::after{transform:rotate(180deg);}
.hd-acc .hd-sub{display:block;font-family:var(--h-serif);font-style:italic;color:var(--accent-strong);font-size:15px;margin-top:4px;font-weight:400;}
.hd-acc .hd-answer{padding:0 4px 26px 4px;color:var(--ink-2);font-size:16px;line-height:1.8;max-width:64ch;}
.hd-acc .hd-answer p{margin:0 0 10px;}
.hd-acc .hd-answer ul{margin:6px 0 10px;padding-left:1.3em;}
.hd-acc .hd-answer li{margin:5px 0;}
.hd-tx-pills{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px;}
.hd-tx-pills a{font-family:var(--body);font-weight:600;font-size:14.5px;color:var(--accent-strong);background:var(--blush);border-radius:999px;padding:8px 16px;text-decoration:none;transition:.15s;}
.hd-tx-pills a:hover{background:var(--accent-strong);color:#fff;}
.hd-acc details{scroll-margin-top:88px;}
.hd-more{display:inline-block;margin-top:6px;color:var(--accent-strong) !important;font-weight:600;border-bottom:1px solid var(--accent);text-decoration:none;}
.hd-more:hover{color:#5d4c37 !important;}
.hd-eqgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px;}
.hd-eqgrid-2{grid-template-columns:repeat(2,1fr);gap:18px;}
@media(max-width:820px){.hd-eqgrid,.hd-eqgrid-2{grid-template-columns:1fr;}}
.hd-eq{background:var(--card-grad);border:1px solid rgba(28,28,26,.06);border-radius:14px;padding:20px;box-shadow:0 18px 40px -32px rgba(110,90,65,.4);transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;}
.hd-eq:hover{transform:translateY(-6px);background:var(--card-grad-hover);border-color:rgba(139,115,85,.4);box-shadow:0 30px 60px -28px rgba(51,35,31,.32);}
.hd-eq h4,.hd-eq h3,.hd-eq h2{font-family:var(--h-serif);font-weight:600;font-size:16.5px;margin:0 0 4px;line-height:1.3;}
.hd-eq p{color:var(--ink-2);font-size:13.5px;line-height:1.65;margin:0;}
.hd-eq-more{display:inline-block;color:var(--accent-strong);font-weight:600;border-bottom:1px solid var(--accent);text-decoration:none;}

/* ---- FAQ 左標題＋右手風琴 ---- */
.hd-split{align-items:start;}
@media(min-width:782px){ .hd-split .hd-split-head{position:sticky;top:96px;} }

/* ---- 看診據點 ---- */
.hd-loc{background:var(--card-2);border:1px solid rgba(28,28,26,.06);border-radius:16px;padding:24px;height:100%;}
.hd-loc img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;margin-bottom:14px;display:block;}
.hd-loc .role{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-strong);}
.hd-loc h3,.hd-loc h2{font-family:var(--h-serif);font-weight:600;font-size:20px;margin:8px 0 12px;}
.hd-loc p{margin:5px 0;color:var(--ink-2);font-size:14.5px;}
.hd-loc a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);}
.hd-loc .hd-loc-time{color:var(--accent-strong);font-weight:600;margin-top:10px;}

/* ---- 比較表 ---- */
table.hd-cmp{width:100%;border-collapse:collapse;margin-top:16px;font-size:15.5px;}
table.hd-cmp th,table.hd-cmp td{border-bottom:1px solid var(--line);padding:12px 10px;text-align:left;vertical-align:top;}
table.hd-cmp th{color:var(--accent-strong);font-weight:600;font-family:var(--body);}

/* ---- callout ---- */
.hd-callout{background:var(--card);border-left:3px solid var(--accent);border-radius:8px;padding:16px 18px;color:#3a3a36;margin:14px 0;}
.hd-byline{color:var(--ink-2);font-size:14.5px;}

/* ---- 療程時間軸 ---- */
.hd-tl{background:var(--card);border:1px solid rgba(28,28,26,.06);border-radius:16px;padding:20px 20px 24px;box-shadow:0 18px 40px -30px rgba(110,90,65,.4);margin-top:18px;}
.hd-tl.opt{background:linear-gradient(180deg,#fff,#F3EAE2);border-color:#e3d6c5;}
.hd-tl .tl-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.hd-tl .tag{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);}
.hd-tl .tag.s{color:var(--accent-strong);font-weight:600;}
.hd-track{display:flex;align-items:flex-start;gap:6px;overflow-x:auto;padding-bottom:6px;}
.hd-step{flex:1;min-width:96px;text-align:center;position:relative;}
.hd-step::before{content:"";position:absolute;top:13px;left:50%;width:100%;height:2px;background:var(--line);}
.hd-step:last-child::before{display:none;}
.hd-dot{width:28px;height:28px;border-radius:50%;background:#fff;border:2px solid var(--accent);margin:0 auto 10px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--accent-strong);font-weight:600;position:relative;z-index:1;}
.hd-tl.opt .hd-dot{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff;}
.hd-step .lbl{font-size:14px;line-height:1.4;} .hd-step .mo{font-size:12px;color:var(--ink-2);margin-top:3px;}
.hd-tl .punch{margin-top:14px;font-family:var(--h-serif);font-weight:600;font-size:clamp(19px,3vw,26px);color:var(--accent-strong);}
.hd-tl .punch small{font-family:var(--body);font-weight:400;font-size:13.5px;color:var(--ink-2);margin-left:8px;}

/* ---- 文章卡 ---- */
.hd-post{background:var(--card-2);border:1px solid rgba(28,28,26,.06);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;transition:.15s;height:100%;}
.hd-post:hover{transform:translateY(-2px);box-shadow:0 24px 50px -34px rgba(110,90,65,.5);}
.hd-post .thumb{aspect-ratio:16/10;background:linear-gradient(160deg,#E7DFD4,var(--clay));display:flex;align-items:center;justify-content:center;color:#8a785f;font-size:13px;}
.hd-post .body{padding:18px 20px 22px;}
.hd-post .cat{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-strong);}
.hd-post h3,.hd-post h2{font-family:var(--h-serif);margin:8px 0;font-size:18px;line-height:1.35;font-weight:600;}
.hd-post p{margin:0;color:var(--ink-2);font-size:14px;}

/* ---- 微笑見證 ---- */
.hd-story{background:var(--card-2);border:1px solid rgba(28,28,26,.06);border-radius:16px;padding:24px;height:100%;}
.hd-story .who{font-size:13px;color:var(--ink-2);letter-spacing:.05em;}
.hd-story .body{font-family:var(--h-serif);font-size:18px;line-height:1.7;color:#2c2c28;margin:10px 0 14px;}
.hd-story .disc{font-size:13px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:12px;}

/* ---- 頁尾 ---- */
.hd-footer{background:var(--footer,#211d18);color:#d7cfc4;font-size:14px;}
.hd-footer h4,.hd-footer .ft-h{font-family:var(--h-serif);color:#fff;font-weight:500;margin:0 0 14px;}
.hd-footer a{color:#d7cfc4;text-decoration:none;} .hd-footer a:hover{color:#fff;}
.hd-footer .bn{font-family:var(--h-serif);font-size:20px;color:#fff;}
.hd-footer p{margin:6px 0;}

/* ---- 麵包屑 / 草稿提示 ---- */
.hd-crumbs{font-size:13.5px;color:var(--ink-2);}
.hd-crumbs a{color:var(--ink-2);text-decoration:none;}
.hd-draftbar{background:#fff6e9;border:1px solid #e7d3ad;border-radius:10px;padding:10px 14px;font-size:13.5px;color:#7a5a1e;margin:18px 0;}

/* ---- 診療項目 hub 列表 ---- */
.hd-tx-list{border-top:1px solid var(--line);margin-top:8px;}
.hd-tx-row{display:flex;align-items:baseline;gap:18px;padding:22px 2px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);}
.hd-tx-row:hover .hd-tx-name{color:var(--accent-strong);}
.hd-tx-name{font-family:var(--h-serif);font-weight:500;font-size:clamp(19px,2.4vw,23px);}
.hd-tx-sub{color:var(--ink-2);font-size:15px;}
.hd-tx-arrow{margin-left:auto;color:var(--accent-strong);}

/* ---- 預約據點三欄 ---- */
.hd-loc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px;}
@media(max-width:880px){ .hd-loc-grid{grid-template-columns:1fr;} }

/* ---- 區段底色 ---- */
.hd-blush{background:var(--blush);}

/* ---- 診所照片相簿（2026-07-05；純 CSS scroll-snap 可滑動＋箭頭/圓點，JS 在 functions.php 全域）---- */
.hd-gallery{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 24px 50px -34px rgba(110,90,65,.5);}
.hd-gallery-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.hd-gallery-track::-webkit-scrollbar{display:none;}
.hd-gallery-track figure{flex:0 0 100%;margin:0;scroll-snap-align:center;background:#1a1714;}
.hd-gallery-track img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;}
.hd-gallery-prev,.hd-gallery-next{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.82);color:var(--ink);font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.2);transition:background .15s,transform .15s;}
.hd-gallery-prev:hover,.hd-gallery-next:hover{background:#fff;transform:translateY(-50%) scale(1.06);}
.hd-gallery-prev:focus-visible,.hd-gallery-next:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px;}
.hd-gallery-prev{left:10px;} .hd-gallery-next{right:10px;}
.hd-gallery-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:7px;z-index:2;}
.hd-gallery-dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;background:rgba(255,255,255,.5);box-shadow:0 0 3px rgba(0,0,0,.35);transition:background .15s,transform .15s;}
.hd-gallery-dots button[aria-current="true"]{background:#fff;transform:scale(1.25);}
@media(max-width:600px){ .hd-gallery-prev,.hd-gallery-next{width:34px;height:34px;font-size:19px;} }

/* ---- 微笑見證影片帶（2026-07-05；兩支自架 mp4，preload=none 按播放才載入）---- */
.hd-smile-band{padding-block:20px 48px;text-align:center;margin-top:-30px;}
.hd-smile-title{font-family:var(--h-serif);font-size:clamp(24px,2.6vw,30px);font-weight:600;letter-spacing:.02em;color:var(--ink);margin:0 0 8px;line-height:1.25;}
.hd-smile-sub{font-size:16px;color:var(--ink-2);margin:0 0 26px;}
.hd-smile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:560px;margin-inline:auto;}
.hd-vcard{position:relative;margin:0;background:var(--card-2);border:.5px solid var(--clay);border-radius:12px;overflow:hidden;box-shadow:0 2px 10px rgba(139,115,85,.06);}
.hd-vframe{position:relative;aspect-ratio:9/16;background:#111;}
.hd-vframe video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.hd-vtag{position:absolute;top:10px;left:10px;z-index:3;background:rgba(255,255,255,.92);color:var(--accent);font-size:12px;padding:3px 10px;border-radius:999px;letter-spacing:.06em;}
.hd-vplay{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;background:transparent;border:0;cursor:pointer;padding:0;}
.hd-vplay span{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;box-shadow:0 3px 14px rgba(0,0,0,.28);transition:transform .15s ease;}
.hd-vplay:hover span,.hd-vplay:focus-visible span{transform:scale(1.06);}
.hd-vplay:focus-visible{outline:2px solid var(--accent-strong);outline-offset:-4px;}
.hd-vplay svg{margin-left:4px;}
.hd-vcap{display:block;padding:10px 12px;font-size:14px;color:var(--ink);text-decoration:none;background:var(--card-2);}
.hd-vcap:hover{color:var(--accent);}
.hd-smile-more{margin:24px 0 0;font-size:14px;}
.hd-smile-more a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--clay);padding-bottom:2px;}
.hd-smile-more a:hover{border-color:var(--accent);}
@media(max-width:640px){ .hd-smile-grid{grid-template-columns:1fr;max-width:300px;} }

/* ---- 動態（尊重 reduced-motion）---- */
@media (prefers-reduced-motion:no-preference){
  .hd-reveal{opacity:0;transform:translateY(16px);animation:hd-rise .8s cubic-bezier(.2,.7,.2,1) forwards;}
  @keyframes hd-rise{to{opacity:1;transform:none;}}
}

@media(max-width:880px){
  .hd-stagger > .wp-block-column:nth-child(2){margin-top:0;}
}

/* ---- 右下角浮動快速選單（2026-07-06 仿耀美圓形展開；桌機＋手機皆顯示）----
   點主鈕(+)後三顆按鈕沿左上弧線彈出：預約諮詢／FB／IG；配色沿用站內暖棕 token。 */
.hd-fabmenu{position:fixed;right:24px;bottom:24px;z-index:60;
  --fab-r:104px; /* 展開半徑 */}
.hd-fabmenu-toggle{position:relative;z-index:2;width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-strong);color:#fff;
  box-shadow:0 10px 26px -8px rgba(110,90,65,.65);
  transition:background .2s,transform .5s cubic-bezier(.2,.7,.2,1);}
.hd-fabmenu-toggle svg{width:22px;height:22px;flex:none;}
.hd-fabmenu-toggle:hover,.hd-fabmenu-toggle:focus-visible{background:#5D4C37;}
.hd-fabmenu-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.hd-fabmenu.open .hd-fabmenu-toggle{transform:rotate(135deg);background:#5D4C37;}
.hd-fabmenu-item{position:absolute;right:6px;bottom:6px;z-index:1;width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  background:#fff;color:var(--accent-strong);border:1px solid var(--clay);
  box-shadow:0 8px 20px -8px rgba(110,90,65,.5);
  opacity:0;pointer-events:none;transform:translate(0,0) scale(.35);
  transition:transform .5s cubic-bezier(.2,.7,.25,1.2),opacity .3s ease,background .2s,color .2s;
  transition-delay:calc(var(--i)*45ms);}
.hd-fabmenu-item svg{width:20px;height:20px;flex:none;}
.hd-fabmenu-item:hover,.hd-fabmenu-item:focus-visible{background:var(--accent-strong);color:#fff;border-color:var(--accent-strong);}
.hd-fabmenu-item:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px;}
.hd-fabmenu.open .hd-fabmenu-item{opacity:1;pointer-events:auto;}
/* 弧線位置：0=正上、1=左上 45°、2=正左 */
.hd-fabmenu.open .hd-fabmenu-item[style*="--i:0"]{transform:translate(0,calc(var(--fab-r)*-1)) scale(1);}
.hd-fabmenu.open .hd-fabmenu-item[style*="--i:1"]{transform:translate(calc(var(--fab-r)*-.707),calc(var(--fab-r)*-.707)) scale(1);}
.hd-fabmenu.open .hd-fabmenu-item[style*="--i:2"]{transform:translate(calc(var(--fab-r)*-1),0) scale(1);}
@media(max-width:860px){
  .hd-fabmenu{right:16px;bottom:18px;--fab-r:84px;}
  .hd-fabmenu-toggle{width:48px;height:48px;}
  .hd-fabmenu-item{width:38px;height:38px;right:5px;bottom:5px;}
  .hd-fabmenu-item svg{width:18px;height:18px;}
}
@media (prefers-reduced-motion:reduce){
  .hd-fabmenu-toggle,.hd-fabmenu-item{transition:none;}
}