/*
Theme Name: Maoduo Metalwork（貓朵金工）
Theme URI: https://github.com/maoduo/maoduo-theme
Author: 貓朵金工 Chat d'Or
Description: 貓朵金工 CHAT D'OR 官方網站佈景主題。以貓與花為靈感的手作銀飾品牌設計：炭黑／米白／黃銅金暖色系、大留白與大圖敘事版面。區塊主題（Full Site Editing），內建 WooCommerce 商店、系列創作與體驗課程樣板。
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 2.19.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: maoduo
Tags: full-site-editing, block-patterns, e-commerce, portfolio, blog, one-column, wide-blocks, custom-colors, custom-logo, custom-menu, editor-style, featured-images, translation-ready
*/

/* ============================================================
   0. 基礎
   ============================================================ */
:root{
  --md-ease: cubic-bezier(.22,.61,.36,1);
  --md-pad:  clamp(20px, 5vw, 76px);
  --md-gap:  clamp(16px, 2.4vw, 34px);

  /* 頁首高度：hero 要靠這個值往上收到頁首底下，兩處必須一致 */
  --md-header-h: 74px;

  /* 圓角：對應 theme.json 的 settings.custom.radius，
     在網站編輯器改 theme.json 值即可全站連動 */
  --md-r-sm:   var(--wp--custom--radius--sm, 10px);
  --md-r-md:   var(--wp--custom--radius--md, 18px);
  --md-r-lg:   var(--wp--custom--radius--lg, 26px);
  --md-r-pill: var(--wp--custom--radius--pill, 999px);

  /* 貓咪選單圖示（取自品牌標誌的貓頭剪影） */
  --md-cat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M5.55 9.15 5.02 3.8c-.05-.52.52-.87.95-.58l3.9 2.6a8.9 8.9 0 0 1 4.26 0l3.9-2.6c.43-.29 1 .06.95.58l-.53 5.35A7.35 7.35 0 0 1 20.1 13.6c0 4.2-3.7 7.05-8.1 7.05S3.9 17.8 3.9 13.6c0-1.68.62-3.23 1.65-4.45Z'/%3E%3C/svg%3E");
}

/* 英文與數字：微草寫的斜體 Cormorant。
   中文維持現代纖細黑體，兩者的對比就是這個網站的個性。 */
.md-kicker,
.md-attr,
.md-card .wc-block-components-product-price,
.md-card .price,
.woocommerce ul.products li.product .price,
.woocommerce div.product .price,
.md-step .md-no,
.md-work-meta dt,
.md-footer .md-bottom,
.md-cart-count{
  font-style:italic;
  /* 關掉合成斜體：中文字體沒有真正的義大利體，
     瀏覽器硬斜會很難看；關掉之後中文自動維持正體，只有英數字真的斜。 */
  font-synthesis-style:none;
  -webkit-font-synthesis:style;
}
.md-kicker{ font-family:var(--wp--preset--font-family--en); }
/* 保險：kicker 裡的中文一律正體 */
.md-kicker .zh,
:lang(zh) .md-kicker:not(:has(*)){ font-style:normal; }
.md-kicker .zh{ font-family:var(--wp--preset--font-family--sans); font-style:normal; }
html{ scroll-behavior:smooth; }
body{ -webkit-font-smoothing:antialiased; }
img{ max-width:100%; height:auto; }

/* 全站圓潤：影像、面板與互動元件一律導圓角 */
.wp-block-image img,
.wp-block-post-featured-image img,
.wp-block-cover:not(.md-hero),
.md-card .wp-block-post-featured-image,
.md-card .wc-block-components-product-image,
.md-card .wc-block-components-product-image img,
.woocommerce ul.products li.product a img,
.woocommerce div.product .woocommerce-product-gallery__image img,
.md-ig-cell,
.md-dropzone,
.md-note,
.md-variance,
.md-acc-body img{
  border-radius:var(--md-r-md);
}
.md-card .wp-block-post-featured-image img,
.wp-block-post-featured-image{ border-radius:var(--md-r-md); overflow:hidden; }
.md-badge{ border-radius:var(--md-r-pill); }
.woocommerce div.product form.cart .variations select,
.woocommerce .quantity .qty,
.wc-block-components-product-badge{ border-radius:var(--md-r-pill); }
.woocommerce div.product form.cart .variations select{ padding:.6em 1.1em; }
.md-note,.md-variance{ border-radius:var(--md-r-sm); }
a{ text-decoration:none; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

.screen-reader-text{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); clip-path:inset(50%); white-space:nowrap;
}
.skip-link:focus{
  position:fixed; top:12px; left:12px; z-index:999; background:var(--wp--preset--color--ink);
  color:var(--wp--preset--color--paper); padding:.8em 1.4em; clip:auto; clip-path:none; width:auto; height:auto;
}

/* ============================================================
   1. 排版元件
   ============================================================ */
.md-kicker{
  font-family:var(--wp--preset--font-family--en);
  font-size:.72rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--wp--preset--color--muted); font-weight:400; line-height:1.6; margin:0;
}
.md-kicker .zh{ font-family:var(--wp--preset--font-family--sans); letter-spacing:.24em; font-size:.7rem; }

.md-display{ line-height:1.24 !important; letter-spacing:.04em !important; }
.md-lead{ font-size:clamp(.94rem,1.15vw,1.06rem); color:var(--wp--preset--color--ink-2); line-height:2.15; }
.md-small{ font-size:.8rem; font-weight:400; color:var(--wp--preset--color--muted); letter-spacing:.08em; }
.md-attr{ font-size:.76rem; font-weight:400; color:var(--wp--preset--color--muted); letter-spacing:.08em; }
.md-spec td,.md-spec th,.md-slots td,.md-slots th,
.md-acc summary,.md-acc-body,.md-field label,.md-chip{ font-weight:400; }

.md-link{
  display:inline-block; font-size:.8rem; letter-spacing:.18em; padding-bottom:.35em;
  border-bottom:1px solid var(--wp--preset--color--line);
  transition:border-color .4s var(--md-ease), color .4s var(--md-ease); white-space:nowrap;
}
.md-link:hover{ border-color:var(--wp--preset--color--brass); color:var(--wp--preset--color--brass); }

.md-rule{ border:0; border-top:1px solid var(--wp--preset--color--line); margin:0; opacity:1; }

/* 區塊標頭：左標題右連結 */
.md-sec-head{ align-items:flex-end !important; }

/* 深色區塊
   顏色一律用不透明色碼，不用 rgba()：半透明白字疊在炭黑底上，
   在部分螢幕與行動裝置會被當成極淡的灰，看起來像「字不見了」。
   內文另外加一級字重（200 太細，深底上細筆畫會被背景吃掉）。 */
.md-band{ background:var(--wp--preset--color--ink); color:#EFE8DA; }
.md-band :where(h1,h2,h3,h4){ color:#FBF8F2; }
.md-band :where(p,li,dd,dt,td,th){ color:#E3DBCB; font-weight:300; }
.md-band .md-lead{ color:#E7DFCF; font-weight:300; }
.md-band .md-attr,
.md-band .md-small{ color:#C9BFAD; }
.md-band .md-kicker{ color:#C2B79F; }
/* 深底上的按鈕：權重要壓過 .wp-block-button.is-style-outline .wp-block-button__link
   （0,3,0）——否則外框按鈕會套到炭黑文字，整顆按鈕在深色帶上看不見。 */
.md-band .wp-block-button__link,
.md-band .wp-block-button.is-style-outline .wp-block-button__link,
.md-band .wp-block-button__link.is-style-outline{
  background:transparent; border:1px solid #A79B86; color:#F4EFE5;
}
.md-band .wp-block-button__link:hover,
.md-band .wp-block-button.is-style-outline .wp-block-button__link:hover,
.md-band .wp-block-button__link.is-style-outline:hover{
  background:#F4EFE5; border-color:#F4EFE5; color:var(--wp--preset--color--ink);
}

/* 按鈕外框樣式 */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button__link.is-style-outline{
  background:transparent; color:var(--wp--preset--color--ink); border:1px solid var(--wp--preset--color--ink);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{
  background:var(--wp--preset--color--ink); color:var(--wp--preset--color--paper);
}
.wp-block-button__link,
.md-submit,
.wp-block-search__input{ border-radius:var(--md-r-pill); }
.wp-block-button__link{
  transition:background .45s var(--md-ease), color .45s var(--md-ease),
             border-color .45s var(--md-ease), transform .45s var(--md-ease);
}
.wp-block-button__link:hover{ transform:translateY(-1px); }
.md-submit{ transition:.45s var(--md-ease); }
.md-submit:hover{ transform:translateY(-1px); }

/* ============================================================
   2. 頁首（一般文件流・不疊在 hero 上）
   ============================================================

   刻意不用 position:fixed 疊在主視覺上。固定頁首在 WordPress 區塊主題裡
   要同時對付三件事：alignfull 的負邊界、管理列的 32px 位移、以及透明態
   在首次繪製時的閃爍。改成單純的 sticky 之後，這三個問題全部消失，
   頁首與 hero 的交界永遠是一條乾淨的線。
   ============================================================ */
.md-header{
  background:var(--wp--preset--color--paper);
  border-bottom:1px solid #EFE9DE;
  /* 邊框永遠存在、只換顏色：切換實心／透明時高度才不會跳 1px */
  transition:background .4s var(--md-ease), border-color .4s var(--md-ease), color .4s var(--md-ease);
}

/*
 * 黏頂要下在「樣板組件的外框」上，不能下在 <header> 本身。
 *
 * WordPress 會把頁首包在 <div class="wp-block-template-part"> 裡，
 * 那個外框的高度就等於頁首高度。sticky 只能在自己的容器範圍內移動，
 * 所以寫在 <header> 上的 position:sticky 一捲就跟著離開畫面，等於沒有黏頂。
 * 讓外框本身黏頂，它的容器才是整個 .wp-site-blocks。
 *
 * .md-header-slot 由主題樣板加上；:has() 那條是給資料庫裡舊樣板的備援。
 */
.wp-block-template-part.md-header-slot,
.wp-block-template-part:has( > .md-header),
.wp-site-blocks > .md-header{
  position:sticky; top:0; z-index:100;
  transition:transform .45s var(--md-ease);
  will-change:transform;
}
/* 下滑隱藏、上滑顯現（由 assets/js/maoduo-header.js 切換 .md-header 的 class） */
.wp-block-template-part.md-header-slot:has(.md-header.is-hidden),
.wp-block-template-part:has( > .md-header.is-hidden),
.wp-site-blocks > .md-header.is-hidden{
  transform:translateY( calc( -100% - var(--wp-admin--admin-bar--height, 0px) - 2px ) );
}

@media (prefers-reduced-motion: reduce){
  .wp-block-template-part.md-header-slot,
  .wp-block-template-part:has( > .md-header),
  .wp-site-blocks > .md-header{ transition:none; }
}
/* 登入後 WordPress 管理列固定在畫面最上方，黏頂要往下讓開 */
body.admin-bar .wp-block-template-part.md-header-slot,
body.admin-bar .wp-block-template-part:has( > .md-header),
body.admin-bar .wp-site-blocks > .md-header{ top:var(--wp-admin--admin-bar--height,32px); }


.md-header .md-bar{ min-height:var(--md-header-h); }
.md-header .wp-block-site-title a{ white-space:nowrap; }

/* 品牌標誌：設定了網站標誌就不再重複顯示文字站名 */
.md-brand{ gap:0 !important; }
.md-brand .wp-block-site-logo{ line-height:0; }
.md-brand .wp-block-site-logo img{
  /* 用 !important 是必要的：WordPress 會把 site-logo 區塊的 width 屬性寫成
     inline style，GoDaddy 的 DesignSetGo 也另外注入 max-width/max-height。 */
  height:42px !important; width:auto !important; max-height:none !important; max-width:none !important;
  display:block;
}
/* 已設定標誌圖檔時，文字站名不重複顯示，但也不用 display:none——
   那會讓搜尋引擎與螢幕閱讀器讀不到站名。改成視覺隱藏。 */
body.md-has-logo .md-brand .wp-block-site-title{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); clip-path:inset(50%); white-space:nowrap;
}
@media(max-width:900px){ .md-brand .wp-block-site-logo img{ height:34px !important; } }

.md-nav .wp-block-navigation-item__content{
  font-size:.8rem; letter-spacing:.16em; color:var(--wp--preset--color--ink-2);
  padding-block:.4em; position:relative;
}
.md-nav .wp-block-navigation-item__content::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--wp--preset--color--brass); transition:right .4s var(--md-ease);
}
.md-nav .wp-block-navigation-item__content:hover::after,
.md-nav .current-menu-item > .wp-block-navigation-item__content::after{ right:0; }

.md-header .md-tools{ font-size:.78rem; letter-spacing:.14em; color:var(--wp--preset--color--ink-2); }

/* 搜尋：只留圖示，不要繼承主題按鈕的黑底大方塊 */
.md-header .wp-block-search{ margin:0; }
.md-header .wp-block-search .wp-block-search__button,
.md-header .wp-block-search__button.has-icon{
  background:transparent !important; border:0 !important; color:inherit !important;
  padding:.35em !important; min-width:0; box-shadow:none;
}
.md-header .wp-block-search__button svg{ width:19px; height:19px; fill:var(--wp--preset--color--ink-2); }
.md-header .wp-block-search__button:hover svg{ fill:var(--wp--preset--color--brass); }
.md-header .wp-block-search__input{
  border:0; border-bottom:1px solid var(--wp--preset--color--line); background:transparent;
  border-radius:var(--md-r-pill); font-size:.85rem; padding:.4em .9em;
}

/* 購物袋：圖示 + 數字，空車時不顯示數字泡泡 */
.md-cart{
  display:inline-flex; align-items:center; gap:.15em; padding:.35em .2em .35em .35em;
  color:var(--wp--preset--color--ink-2); position:relative;
}
.md-cart-icon{ width:21px; height:21px; display:block; }
.md-cart:hover{ color:var(--wp--preset--color--brass); }
.md-cart-count{
  display:inline-grid; place-items:center; min-width:1.45em; height:1.45em; border-radius:99px;
  background:var(--wp--preset--color--brass); color:#fff; font-size:.62rem; letter-spacing:0;
  font-family:var(--wp--preset--font-family--en); line-height:1; transform:translate(-6px,-8px);
}
.md-cart-count.is-empty{ display:none; }

/* 手機版選單開關：品牌貓頭外框（想換回兩條線就刪掉這組 mask 規則）

   display 一定要包在 max-width 查詢裡：WordPress 核心是用
   @media (min-width:600px){ ...-open{ display:none } } 隱藏這顆按鈕，
   在外面無條件寫 display 會讓漢堡鈕在桌機也跑出來。 */
.md-nav .wp-block-navigation__responsive-container-open,
.md-nav .wp-block-navigation__responsive-container-close{ color:currentColor; }
.md-nav .wp-block-navigation__responsive-container-open{ position:relative; }
.md-nav .wp-block-navigation__responsive-container-open svg{ opacity:0; }
.md-nav .wp-block-navigation__responsive-container-open::before{
  content:""; position:absolute; inset:0; margin:auto; width:28px; height:28px;
  background:currentColor;
  -webkit-mask:var(--md-cat) center/contain no-repeat;
          mask:var(--md-cat) center/contain no-repeat;
}
@media(max-width:599.98px){
  .md-nav .wp-block-navigation__responsive-container-open{
    width:44px; height:44px; display:grid; place-items:center;
  }
}
@media(min-width:600px) and (max-width:900px){
  .md-nav .wp-block-navigation__container{ gap:14px !important; }
  .md-nav .wp-block-navigation-item__content{ font-size:.72rem; letter-spacing:.06em; }
}
.md-nav .wp-block-navigation__responsive-container.is-menu-open{
  background:var(--wp--preset--color--ink); color:#F4EFE5;
  padding:clamp(28px,7vw,60px) var(--md-pad);
}
.md-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  font-size:1.35rem; font-weight:200; letter-spacing:.18em; color:#F4EFE5; padding-block:.55em;
}
@media(max-width:900px){ :root{ --md-header-h:62px; } }

/* ------------------------------------------------------------
   有 hero 的頁面：頁首疊在主視覺上、停在頂端時透明
   ------------------------------------------------------------

   不用 position:fixed。改成把 hero 往上收 var(--md-header-h)，
   讓它自己滑到頁首底下——頁首維持在文件流內、維持 sticky，
   先前那些負邊界、管理列位移、首次繪製閃爍的問題就都不會回來。

   順帶修掉 WordPress 的 :where(.wp-site-blocks) > * 區塊間距
   在頁首與 hero 之間留下的 16–34px 縫隙。
   ------------------------------------------------------------ */
body:has(.md-hero) .wp-block-template-part.md-header-slot,
body:has(.md-hero) .wp-block-template-part:has( > .md-header){
  margin-bottom:calc(-1 * var(--md-header-h));
}
body:has(.md-hero) .md-hero{
  margin-block-start:0 !important;
  padding-top:calc(var(--wp--preset--spacing--50) + var(--md-header-h)) !important;
}
/* 內頁的 hero 包在 <main>（甚至再包一層 post-content）裡，
   首頁的則直接掛在 .wp-site-blocks 下。區塊間距是加在最外層那一格上的，
   所以整條祖先鏈都要歸零，否則頁首與 hero 之間會露出一條米色的縫。 */
body:has(.md-hero) :where(.wp-site-blocks) > *:has(.md-hero),
body:has(.md-hero) main,
body:has(.md-hero) .wp-block-post-content,
body:has(.md-hero) .wp-block-post-content > .md-hero:first-child{
  margin-block-start:0 !important;
}
body:has(.md-hero) .md-header:not(.is-solid){
  background:transparent;
  border-bottom-color:transparent;
}
body:has(.md-hero) .md-header:not(.is-solid),
body:has(.md-hero) .md-header:not(.is-solid) a,
body:has(.md-hero) .md-header:not(.is-solid) .md-tools,
body:has(.md-hero) .md-header:not(.is-solid) .wp-block-site-title a,
body:has(.md-hero) .md-header:not(.is-solid) .wp-block-navigation-item__content{
  color:#F7F3EC;
}
body:has(.md-hero) .md-header:not(.is-solid) .wp-block-search__button svg{ fill:#F7F3EC; }
body:has(.md-hero) .md-header:not(.is-solid) .md-brand .wp-block-site-logo img{
  filter:brightness(0) invert(1);
}
body:has(.md-hero) .md-header:not(.is-solid) a:hover,
body:has(.md-hero) .md-header:not(.is-solid) .wp-block-navigation-item__content:hover{
  color:var(--wp--preset--color--brass-soft);
}
body:has(.md-hero) .md-header:not(.is-solid) .wp-block-navigation-item__content::after{
  background:var(--wp--preset--color--brass-soft);
}

/* 使用者停用 JavaScript 時一律實心：
   否則白字會一直壓在下方的淺色內容上，完全讀不到 */
@media (scripting: none){
  body:has(.md-hero) .md-header{
    background:var(--wp--preset--color--paper) !important;
    border-bottom-color:#EFE9DE !important;
    color:var(--wp--preset--color--ink-2) !important;
  }
  body:has(.md-hero) .md-header a,
  body:has(.md-hero) .md-header .wp-block-navigation-item__content{
    color:var(--wp--preset--color--ink-2) !important;
  }
  body:has(.md-hero) .md-header .wp-block-search__button svg{ fill:var(--wp--preset--color--ink-2) !important; }
  body:has(.md-hero) .md-brand .wp-block-site-logo img{ filter:none !important; }
}

/* ============================================================
   3. Hero（靜態・無動畫）
   ============================================================ */
/* 主視覺的遮罩層必須是不透明的。

   WordPress 核心的封面樣式有一條容易踩到的預設：

     .wp-block-cover .wp-block-cover__background { opacity: .5 }

   只有帶了 has-background-dim-{N} 類別才會把它調回去。純漸層的封面
   如果只寫 has-background-gradient、沒有 dim 類別，漸層就會以 50%
   疊在米白頁面上——深炭黑被洗成灰色，這正是先前主視覺「變灰」的原因。

   正解是在區塊標記補上 dimRatio 與 dim 類別（已經做了）；
   下面這條是保險，讓資料庫裡還沒更新的舊內容也能正確顯示。
   刻意不用 :has()：換上背景照片時 WordPress 會寫入真正的
   has-background-dim-{N}，這條規則就自動讓開。 */
.md-hero{
  position:relative; overflow:hidden;
  background-color:#14110F;
  background-image:radial-gradient(115% 88% at 50% 30%,#2C241C 0%,#1B1714 54%,#100E0C 100%);
}
.md-hero > .wp-block-cover__background:not([class*="has-background-dim-"]){
  opacity:1 !important;
}
.md-hero > .wp-block-cover__inner-container{ position:relative; z-index:2; width:100%; }
/* 透明頁首下方的保險：日後換成淺色照片時白字仍讀得到 */
.md-hero::before{
  content:""; position:absolute; left:0; right:0; top:0;
  height:clamp(110px,16vh,200px); z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(10,8,7,.45) 0%, rgba(10,8,7,.18) 50%, transparent 100%);
}

.md-hero .wp-block-cover__inner-container :is(h1,h2){
  color:#FBF8F2 !important;
  font-weight:200;
  font-size:clamp(1.85rem,4.2vw,3.4rem) !important;
  line-height:1.34; letter-spacing:.05em; margin:0;
  text-wrap:balance;
}
.md-hero .wp-block-cover__inner-container :is(p,li){ color:#EDE6D8 !important; }
.md-hero .wp-block-cover__inner-container p.md-kicker{
  color:#DCD3C2 !important; font-size:.78rem; letter-spacing:.3em;
  margin:0 0 1.5em; text-wrap:balance;
}
.md-hero .wp-block-cover__inner-container p.md-hero-sub{
  font-size:clamp(.95rem,1.2vw,1.05rem); line-height:2.1;
  max-width:31em; margin:1.5em auto 0; text-wrap:pretty;
  color:#EDE6D8 !important;
}
/* 內頁 hero 的副標靠左，不要被 margin:auto 推到中間 */
.md-hero .wp-block-cover__inner-container p.md-hero-sub:not(.has-text-align-center){
  margin-left:0; margin-right:0;
}
.md-hero .wp-block-buttons{ margin-top:clamp(30px,3.4vw,46px) !important; }
/* 深底上的主要按鈕必須是淺色：炭黑底的按鈕壓在炭黑 hero 上會消失 */
.md-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link{
  background:#F7F3EC; border-color:#F7F3EC; color:var(--wp--preset--color--ink);
}
.md-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover{
  background:var(--wp--preset--color--brass-soft); border-color:var(--wp--preset--color--brass-soft);
}
.md-hero .wp-block-button__link.is-style-outline{
  border-color:rgba(247,243,236,.5); color:#F7F3EC; background:transparent;
}
.md-hero .wp-block-button__link.is-style-outline:hover{ background:#F7F3EC; color:var(--wp--preset--color--ink); }

@media(max-width:760px){
  .md-hero .wp-block-cover__inner-container p.md-kicker{ font-size:.68rem; letter-spacing:.26em; }
  .md-hero .wp-block-cover__inner-container :is(h1,h2){ line-height:1.42; }
}

/* ============================================================
   4. 卡片與格線（商品／創作／文章共用）
   ============================================================ */
.md-grid{ --md-cols:4; }
.md-grid.is-cols-3{ --md-cols:3; }
.md-grid.wp-block-post-template,
.md-grid.wp-block-product-template,
ul.md-grid{
  display:grid !important;
  grid-template-columns:repeat(var(--md-cols),minmax(0,1fr)) !important;
  gap:var(--md-gap) clamp(14px,1.8vw,26px) !important;
  list-style:none; margin:0; padding:0;
}
@media(max-width:1080px){ .md-grid{ --md-cols:3; } }
@media(max-width:760px){ .md-grid{ --md-cols:2; } }

.md-card{ position:relative; }
.md-card .wp-block-post-featured-image,
.md-card .wc-block-components-product-image{
  margin-bottom:1.05em; overflow:hidden; border-radius:var(--md-r-md);
}
.md-card .wp-block-post-featured-image img,
.md-card .wc-block-components-product-image img{
  transition:transform 1.1s var(--md-ease); width:100%; aspect-ratio:4/5; object-fit:cover;
}
.md-card:hover .wp-block-post-featured-image img,
.md-card:hover .wc-block-components-product-image img{ transform:scale(1.045); }

/* 商品名稱在上、價格在下 —— 貓朵的中文品名很長，兩端對齊會斷行錯位 */
.md-card .wp-block-post-title,
.md-card .wc-block-components-product-title{
  font-family:var(--wp--preset--font-family--sans) !important;
  font-size:1.04rem !important; font-weight:300 !important; letter-spacing:.08em;
  line-height:1.7; margin:0 0 .4em;
}
.md-card .wp-block-post-title a:hover{ color:var(--wp--preset--color--brass); }
.md-card .wc-block-components-product-price,
.md-card .price{
  display:block; font-family:var(--wp--preset--font-family--en); font-size:1rem;
  letter-spacing:.06em; color:var(--wp--preset--color--ink-2); white-space:nowrap; margin-top:.4em;
}
.md-card .wc-block-components-product-price del{ opacity:.45; margin-right:.5em; }

/* 商品／作品標籤 */
.md-badge{
  position:absolute; top:12px; left:12px; z-index:3;
  font-size:.66rem; letter-spacing:.16em; padding:.42em .85em; line-height:1.6;
  background:rgba(250,247,241,.94); color:var(--wp--preset--color--ink);
  border:1px solid rgba(26,23,20,.1);
}
.md-badge.is-made{ background:rgba(26,23,20,.86); color:#F4EFE5; border-color:transparent; }
.md-badge.is-sold{ background:rgba(26,23,20,.5); color:#fff; border-color:transparent; }

/* 橫向捲動列：限制在版面最大寬度內，不可溢出頁面 */
.md-strip{
  display:flex; gap:var(--md-gap); overflow-x:auto; padding-bottom:1.4em;
  scroll-snap-type:x mandatory; max-width:100%;
}
.md-strip::-webkit-scrollbar{ height:2px; }
.md-strip::-webkit-scrollbar-thumb{ background:var(--wp--preset--color--line); }
.md-strip > *{ flex:0 0 clamp(240px,26vw,400px); scroll-snap-align:start; }

/* ============================================================
   5. 篩選列
   ============================================================ */
.md-filters{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  padding-block:1.2em; border-block:1px solid var(--wp--preset--color--line);
  margin-bottom:clamp(30px,4vw,54px);
}
.md-filters .md-group-label{
  font-size:.72rem; letter-spacing:.2em; color:var(--wp--preset--color--muted);
  margin-right:.4em; white-space:nowrap; flex:0 0 auto;
}
.md-chip{
  font-size:.76rem; letter-spacing:.12em; padding:.55em 1.15em; border-radius:99px;
  border:1px solid var(--wp--preset--color--line); color:var(--wp--preset--color--ink-2);
  transition:.35s var(--md-ease); background:none; cursor:pointer;
}
.md-chip:hover{ border-color:var(--wp--preset--color--ink); }
.md-chip.is-active,.md-chip[aria-pressed="true"]{
  background:var(--wp--preset--color--ink); border-color:var(--wp--preset--color--ink); color:var(--wp--preset--color--paper);
}

/* ============================================================
   6. 商品單頁
   ============================================================ */
.md-spec{ width:100%; border-collapse:collapse; margin-top:2.2em; font-size:.84rem; }
.md-spec th,.md-spec td{ text-align:left; padding:.95em 0; border-bottom:1px solid #EFE9DE; vertical-align:top; }
.md-spec th{ width:8em; font-weight:400; color:var(--wp--preset--color--muted); letter-spacing:.14em; }
.md-spec td{ color:var(--wp--preset--color--ink-2); letter-spacing:.04em; }

.md-stock-line{ display:flex; gap:.7em; align-items:center; font-size:.8rem; letter-spacing:.1em;
  color:var(--wp--preset--color--patina); margin-top:1em; }
.md-stock-line::before{ content:""; width:7px; height:7px; border-radius:99px; background:currentColor; }
.md-variance{ margin-top:1.2em; font-size:.8rem; color:var(--wp--preset--color--muted); line-height:2;
  border-left:2px solid var(--wp--preset--color--brass-soft); padding-left:1em; }

.md-acc{ border-top:1px solid #EFE9DE; margin-top:2.6em; }
.md-acc details{ border-bottom:1px solid #EFE9DE; }
.md-acc summary{
  list-style:none; cursor:pointer; padding:1.2em 0; font-size:.86rem; letter-spacing:.12em;
  display:flex; justify-content:space-between; align-items:center;
}
.md-acc summary::-webkit-details-marker{ display:none; }
.md-acc summary::after{ content:"＋"; color:var(--wp--preset--color--muted); font-size:.9rem; }
.md-acc details[open] summary::after{ content:"－"; }
.md-acc .md-acc-body{ padding-bottom:1.5em; font-size:.84rem; color:var(--wp--preset--color--muted); line-height:2.1; }

.woocommerce div.product .price,
.wp-block-woocommerce-product-price .woocommerce-Price-amount{
  font-family:var(--wp--preset--font-family--en); font-size:1.9rem; letter-spacing:.04em; color:var(--wp--preset--color--ink);
}
.woocommerce span.onsale{ background:var(--wp--preset--color--brass); border-radius:var(--md-r-pill); }
.woocommerce ul.products li.product .button,
.woocommerce div.product form.cart .button{
  background:var(--wp--preset--color--ink); color:var(--wp--preset--color--paper);
  border-radius:var(--md-r-pill);
  letter-spacing:.2em; font-size:.82rem; font-weight:300; padding:1.05em 2.2em;
}
.woocommerce div.product form.cart .button:hover{ background:var(--wp--preset--color--brass); }

/* ============================================================
   7. 系列創作
   ============================================================ */
.md-work-meta{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--md-gap);
  padding-block:clamp(28px,4vw,52px); border-bottom:1px solid var(--wp--preset--color--line); margin:0; }
.md-work-meta dt{ font-size:.7rem; letter-spacing:.2em; color:var(--wp--preset--color--muted); margin-bottom:.6em; }
.md-work-meta dd{ margin:0; font-size:1rem; font-weight:300; letter-spacing:.08em; }
@media(max-width:760px){ .md-work-meta{ grid-template-columns:repeat(2,1fr); gap:26px; } }

/* ============================================================
   8. 文章
   ============================================================ */
.md-prose p{ font-size:.95rem; line-height:2.3; color:var(--wp--preset--color--ink-2); margin:0 0 1.9em; }
.md-prose h3{ margin:2.6em 0 1em; font-weight:300; }
.md-note{
  background:var(--wp--preset--color--paper-2); border-left:2px solid var(--wp--preset--color--brass);
  padding:1.2em 1.5em; font-size:.84rem; color:var(--wp--preset--color--ink-2); line-height:2;
}
.md-jr-row{
  display:grid; grid-template-columns:200px 1fr auto; gap:clamp(20px,3vw,48px); align-items:center;
  padding-block:clamp(22px,3vw,40px); border-bottom:1px solid #EFE9DE;
}
@media(max-width:760px){ .md-jr-row{ grid-template-columns:1fr; gap:14px; } }

/* ============================================================
   9. 步驟區塊
   ============================================================ */
.md-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--md-gap); }
@media(max-width:860px){ .md-steps{ grid-template-columns:repeat(2,1fr); gap:32px; } }
.md-step .md-no{ font-family:var(--wp--preset--font-family--en); font-size:2.2rem;
  color:var(--wp--preset--color--brass-soft); line-height:1; display:block; margin-bottom:.5rem; }
.md-step h4{ font-weight:300; font-size:1.02rem; letter-spacing:.08em; margin:0 0 .6em; }
.md-step p{ margin:0; font-size:.83rem; color:var(--wp--preset--color--muted); line-height:2; }

/* ============================================================
   10. 表單（訂製諮詢／聯絡）
   ============================================================ */
.md-form{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,28px); }
.md-form .md-full{ grid-column:1/-1; }
@media(max-width:700px){ .md-form{ grid-template-columns:1fr; } }
.md-field label{ display:block; font-size:.74rem; letter-spacing:.18em; color:var(--wp--preset--color--muted); margin-bottom:.7em; }
.md-field input,.md-field select,.md-field textarea{
  width:100%; background:var(--wp--preset--color--paper-2); border:1px solid transparent;
  padding:.9em 1.1em; font:inherit; font-size:.9rem; color:var(--wp--preset--color--ink);
  letter-spacing:.04em; border-radius:var(--md-r-sm);
  transition:border-color .35s var(--md-ease), background .35s var(--md-ease);
}
.md-field input:focus,.md-field select:focus,.md-field textarea:focus{
  outline:none; border-color:var(--wp--preset--color--brass); background:#fff;
}
.md-field textarea{ resize:vertical; min-height:130px; border-radius:var(--md-r-md); }
.md-field .md-hint{ font-size:.72rem; color:var(--wp--preset--color--muted); margin-top:.6em; letter-spacing:.06em; }
.md-dropzone{ border:1px dashed var(--wp--preset--color--line); padding:2.2em; text-align:center;
  color:var(--wp--preset--color--muted); font-size:.83rem; border-radius:var(--md-r-md); }
.md-submit{
  background:var(--wp--preset--color--ink); color:var(--wp--preset--color--paper); border:1px solid var(--wp--preset--color--ink);
  padding:1.05em 2.2em; font-size:.82rem; letter-spacing:.2em; cursor:pointer;
  border-radius:var(--md-r-pill);
}
.md-submit:hover{ background:var(--wp--preset--color--brass); border-color:var(--wp--preset--color--brass); color:#fff; }
.md-form-message{ padding:1.2em 1.5em; margin-bottom:2em; font-size:.86rem; line-height:2;
  border-radius:var(--md-r-sm); }
.md-form-message.is-ok{ background:var(--wp--preset--color--paper-2); border-left:2px solid var(--wp--preset--color--patina); }
.md-form-message.is-error{ background:#FBEFE9; border-left:2px solid #A6462A; color:#7A3320; }

/* ============================================================
   11. 課程時段
   ============================================================ */
.md-slots{ width:100%; border-collapse:collapse; font-size:.86rem; }
.md-slots th,.md-slots td{ text-align:left; padding:1em 0; border-bottom:1px solid #EFE9DE; }
.md-slots .is-full{ color:var(--wp--preset--color--muted); text-decoration:line-through; }
.md-slots .md-seats{ color:var(--wp--preset--color--brass); letter-spacing:.1em; }

/* ============================================================
   12. 頁尾
   ============================================================ */
.md-footer{ background:var(--wp--preset--color--ink); color:rgba(244,239,229,.78); }
.md-footer :where(h1,h2,h3,h4,h5){ color:#FBF8F2; }
.md-footer a:hover{ color:var(--wp--preset--color--brass-soft); }
.md-footer h5,.md-footer .md-col-title{
  font-size:.72rem; letter-spacing:.24em; color:rgba(244,239,229,.5); margin:0 0 1.4em; font-weight:400;
}
.md-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.9em; font-size:.83rem; }
.md-footer .md-bottom{
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding-top:26px; border-top:1px solid rgba(244,239,229,.14);
  font-size:.72rem; letter-spacing:.1em; color:rgba(244,239,229,.45);
}

/* ============================================================
   13. WooCommerce 商品列表（[products] 短代碼與商店頁共用）
   ============================================================ */
.woocommerce ul.products{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--md-gap) clamp(14px,1.8vw,26px);
  margin:0; padding:0; list-style:none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{ content:none !important; }
@media(max-width:1080px){ .woocommerce ul.products{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:760px){ .woocommerce ul.products{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.woocommerce ul.products li.product{
  width:auto !important; margin:0 !important; float:none !important; position:relative; text-align:left;
}
.woocommerce ul.products li.product a img{
  margin:0 0 1.05em; width:100%; aspect-ratio:4/5; object-fit:cover;
  transition:transform 1.1s var(--md-ease); border-radius:var(--md-r-md);
}
.woocommerce ul.products li.product:hover a img{ transform:scale(1.045); }
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--wp--preset--font-family--sans); font-size:1.04rem !important; font-weight:300;
  letter-spacing:.08em; line-height:1.7; padding:0 !important; margin:0 0 .4em;
  color:var(--wp--preset--color--ink);
}
.woocommerce ul.products li.product .price{
  display:block; font-family:var(--wp--preset--font-family--en); font-size:1rem !important;
  letter-spacing:.06em; color:var(--wp--preset--color--ink-2) !important; margin:.4em 0 0;
}
.woocommerce ul.products li.product .price del{ opacity:.45; }
.woocommerce ul.products li.product .md-attr{ margin-top:.55em; }
.woocommerce ul.products li.product .button{
  margin-top:1em; display:inline-block; background:transparent; color:var(--wp--preset--color--ink-2);
  border:1px solid var(--wp--preset--color--line); padding:.7em 1.4em; font-size:.76rem;
  border-radius:var(--md-r-pill);
}
.woocommerce ul.products li.product .button:hover{
  background:var(--wp--preset--color--ink); color:var(--wp--preset--color--paper); border-color:var(--wp--preset--color--ink);
}
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{ display:none; }

/* 商品單頁版面 */
.woocommerce div.product{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,4.5vw,84px); align-items:start; }
.woocommerce div.product .woocommerce-product-gallery{ width:100% !important; float:none !important; margin:0 !important; }
.woocommerce div.product .summary{ width:100% !important; float:none !important; margin:0 !important; }
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .up-sells{ grid-column:1/-1; }
@media(max-width:960px){ .woocommerce div.product{ grid-template-columns:1fr; } }
.woocommerce div.product .product_title{ font-size:clamp(1.6rem,3vw,2.3rem); margin-bottom:0; }
.woocommerce div.product .woocommerce-product-details__short-description{
  font-size:.9rem; color:var(--wp--preset--color--ink-2); line-height:2.15; margin-top:1.8em;
}
.woocommerce div.product form.cart{ margin-top:2.2em; }
.woocommerce div.product .related > h2,
.woocommerce div.product .up-sells > h2{
  font-size:clamp(1.5rem,2.9vw,2.5rem); margin-bottom:clamp(28px,4vw,60px);
}

/* ============================================================
   14. Instagram 追蹤導流
   ============================================================ */
.md-social{ background:var(--wp--preset--color--paper-2); }
.md-ig-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(8px,1vw,14px);
}
.md-ig-cell{ aspect-ratio:1; min-height:0 !important; }
.md-ig-cell .wp-block-cover__inner-container{ display:grid; place-items:center; width:100%; }
.md-ig-note{
  font-size:.68rem; letter-spacing:.22em; color:rgba(26,23,20,.35); margin:0;
  text-transform:uppercase;
}
.md-ig-cell:nth-child(3) .md-ig-note{ color:rgba(250,247,241,.4); }
@media(max-width:600px){ .md-ig-grid{ gap:6px; } }

/* ============================================================
   15. RWD 收尾
   ============================================================ */
/* 觸控目標：手機上所有可點元素至少 44px 高 */
@media(max-width:900px){
  .md-header .md-tools a,
  .md-header .md-tools button,
  .md-chip,
  .md-link{ min-height:44px; display:inline-flex; align-items:center; }
  .md-chip{ padding-inline:1.1em; }
  .md-filters{ gap:8px; overflow-x:auto; flex-wrap:nowrap; padding-inline:0; scrollbar-width:none; }
  .md-filters::-webkit-scrollbar{ display:none; }
  .md-chip{ white-space:nowrap; }
}
@media(max-width:600px){
  .md-spec th{ width:6em; }
  .md-spec th,.md-spec td{ font-size:.8rem; padding:.8em 0; }
  .md-slots th,.md-slots td{ font-size:.8rem; }
  .md-work-meta dd{ font-size:.92rem; }
  .woocommerce ul.products{ gap:clamp(20px,5vw,28px) 10px; }
  .md-card .wp-block-post-title,
  .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-size:.97rem !important; }
}
/* 橫向捲動列在手機上留出邊界提示 */
@media(max-width:760px){
  .md-strip > *{ flex-basis:min(72vw,300px); }
}
/* 表格在極窄畫面可橫捲，不撐破版面 */
.md-spec,.md-slots{ display:block; overflow-x:auto; }
.md-spec tbody,.md-slots tbody{ display:table; width:100%; }

/* 長中文標題不斷字醜 */
:where(h1,h2,h3,.md-display){ overflow-wrap:break-word; line-break:strict; }

/* 列印 */
@media print{
  .md-header,.md-footer,.md-filters{ display:none !important; }
  body{ background:#fff; }
}

/* ============================================================
   16. 分類封面與 Instagram 四格（實照版）
   ============================================================ */
.md-cat-cover{ border-radius:var(--md-r-md); overflow:hidden; }
.md-cat-cover .wp-block-cover__image-background{
  object-fit:cover; transition:transform 1.2s var(--md-ease);
}
.md-cat-cover:hover .wp-block-cover__image-background{ transform:scale(1.04); }

/* 封面標籤：不加底板、不做偵測，一律用網站背景的米白 #FAF7F1。
   整排封面的標籤顏色一致，照片維持原樣不被壓暗。

   這裡刻意寫死色碼，不用 var(--wp--preset--color--paper)：
   自訂屬性只要在該頁沒被定義（外掛蓋掉全域樣式、快取吐出舊的
   global-styles、或使用者在網站編輯器改過調色盤），var() 會在
   計算階段失效，color 就退回繼承——繼承來的正是內文的炭黑，
   於是標籤整排變成黑字。寫死色碼就不會有這條失敗路徑。

   第二條選擇器是保險：萬一封面因為資料庫樣板覆寫而少了
   md-cat-cover 這個 class，標籤仍然是米白，不會掉回 .md-kicker
   預設的 muted 灰。主視覺有自己的規則，這裡明確排除。 */
.md-cat-cover > .wp-block-cover__inner-container{ position:relative; z-index:2; }
.md-cat-cover .md-kicker,
.wp-block-cover:not(.md-hero):not(.md-ph) .wp-block-cover__inner-container p.md-kicker{
  color:#FAF7F1 !important;
}

.md-ig-grid a.md-ig-cell{
  display:block; aspect-ratio:1; border-radius:var(--md-r-md);
  background-color:var(--wp--preset--color--paper-2);
  background-size:cover; background-position:center; overflow:hidden;
  transition:transform .6s var(--md-ease), filter .6s var(--md-ease);
}
.md-ig-grid a.md-ig-cell:hover{ transform:translateY(-3px); filter:brightness(1.05); }

/* ============================================================
   17. 外掛衝突防護
   ============================================================

   GoDaddy 主機預裝的 DesignSetGo（Site Designer）會做兩件事，
   兩件都會把這個主題的版面弄壞：

   1. 接管頁首，套上自己的 sticky／捲動縮小／陰影，並改寫定位
   2. 注入一段 !important 的「對比度備援」樣式，把所有封面區塊裡
      沒有明確指定顏色的標題與段落，強制設成 --wp--preset--color--contrast-3
      ——那個變數在本主題不存在，於是文字會退回炭黑，壓在深色 hero 上看不見

   最乾淨的解法是停用該外掛（你並沒有在用它的版面工具）。
   若必須保留，下面這段會把它對本主題頁首與 hero 的影響擋掉。
   ============================================================ */
body.dsgo-sticky-header-enabled .md-header{
  height:auto !important;
  min-height:0 !important;
  padding-block:0 !important;
  box-shadow:none !important;
  position:static !important;
}
body.dsgo-sticky-header-enabled .wp-block-template-part.md-header-slot,
body.dsgo-sticky-header-enabled .wp-block-template-part:has( > .md-header){
  position:sticky !important; top:0 !important;
}
/* 收合仍由本主題控制，權重要蓋過外掛可能寫入的 transform */
body.dsgo-sticky-header-enabled .wp-block-template-part:has(.md-header:not(.is-hidden)){ transform:none !important; }
body.dsgo-sticky-header-enabled .wp-block-template-part:has(.md-header.is-hidden){
  transform:translateY( calc( -100% - var(--wp-admin--admin-bar--height, 0px) - 2px ) ) !important;
}
body.admin-bar.dsgo-sticky-header-enabled .md-header{
  top:var(--wp-admin--admin-bar--height,32px) !important;
}


/* hero 內的文字顏色：權重要壓過 DesignSetGo 的 contrast fallback */
body .wp-site-blocks .md-hero .wp-block-cover__inner-container :is(h1,h2,h3){
  color:#FBF8F2 !important;
}
body .wp-site-blocks .md-hero .wp-block-cover__inner-container :is(p,li,a:not(.wp-element-button)){
  color:#EDE6D8 !important;
}
body .wp-site-blocks .md-hero .wp-block-cover__inner-container p.md-kicker{
  color:#DCD3C2 !important;
}
body .wp-site-blocks .md-hero .wp-block-cover__inner-container p.md-hero-sub{
  color:#EDE6D8 !important;
}
/* 深色敘事帶同理 */
body .wp-site-blocks .md-band :is(h1,h2,h3,h4){ color:#FBF8F2 !important; }
body .wp-site-blocks .md-band :is(p,li,dd,dt){ color:#E3DBCB !important; }
body .wp-site-blocks .md-band .md-lead{ color:#E7DFCF !important; }
body .wp-site-blocks .md-band .md-kicker{ color:#C2B79F !important; }
body .wp-site-blocks .md-cat-cover .md-kicker,
body .wp-site-blocks .wp-block-cover:not(.md-hero):not(.md-ph) .wp-block-cover__inner-container p.md-kicker{
  color:#FAF7F1 !important;
}

/* DesignSetGo 會把 is-style-outline 換成 2px 外框，統一回主題的 1px */
body .wp-site-blocks .wp-block-button[class*="is-style-outline"] .wp-block-button__link{
  border-width:1px !important;
}

/* ============================================================
   18. 導覽列：英文為主、滑鼠移入換中文
   ============================================================

   中文標籤留在 HTML 裡（可及性名稱與 SEO 都讀它），
   英文那層是 aria-hidden 的裝飾，由 render_block 過濾器插入。
   兩層用 grid 疊在同一格：容器寬度會取兩者較寬的那個，
   切換時不會有位移或裁切。
   ============================================================ */
@media(min-width:901px){
  .md-nav .wp-block-navigation-item__content{
    display:grid; align-items:center; justify-items:center;
  }
  .md-nav .md-nav-en,
  .md-nav .wp-block-navigation-item__label{
    grid-area:1 / 1; white-space:nowrap;
    transition:opacity .32s var(--md-ease);
  }
  .md-nav .md-nav-en{
    font-family:var(--wp--preset--font-family--en);
    font-style:italic; font-size:.9rem; letter-spacing:.2em;
    text-transform:uppercase; opacity:1;
  }
  .md-nav .wp-block-navigation-item__label{ opacity:0; }

  .md-nav .wp-block-navigation-item__content:hover .md-nav-en,
  .md-nav .wp-block-navigation-item__content:focus-visible .md-nav-en{ opacity:0; }

  .md-nav .wp-block-navigation-item__content:hover .wp-block-navigation-item__label,
  .md-nav .wp-block-navigation-item__content:focus-visible .wp-block-navigation-item__label{ opacity:1; }
}

/* 900px 以下沒有滑鼠可以停留，直接顯示中文 */
@media(max-width:900px){
  .md-nav .md-nav-en{ display:none; }
}
/* 手機展開選單一律中文 */
.md-nav .wp-block-navigation__responsive-container.is-menu-open .md-nav-en{ display:none; }
.md-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label{ opacity:1; }


/* ============================================================
   19. 內頁版面元件（關於／課程／聯絡／常見問題）
   ============================================================ */

/* 佔位圖磚：尚未放照片的位置。使用者在編輯器裡選取這個封面區塊、
   直接替換背景圖即可，不必動版面。 */
.md-ph{
  border:1px dashed #DED6C8;
  border-radius:var(--md-r-md);
}
.md-ph .md-kicker{
  color:#6E655A !important;
  font-size:.66rem; letter-spacing:.24em;
}
.md-ph .wp-block-cover__image-background + .wp-block-cover__inner-container .md-kicker{
  color:#F7F3EC !important;
}
/* 一旦換上真照片，虛線框就不需要了 */
.md-ph:has(.wp-block-cover__image-background){ border-style:none; }

/* 規格／聯絡資訊表：第一欄當標籤欄。
   不用 <th> 是為了讓表格區塊的存檔標記維持最單純的形狀。 */
.md-spec tbody td:first-child{
  width:8em; color:var(--wp--preset--color--muted); letter-spacing:.14em;
}

/* 圖說 */
.md-figcaption{
  font-size:.8rem; color:var(--wp--preset--color--muted);
  line-height:2; margin:1em 0 0; text-align:center;
}

/* 獲獎紀錄 */
.md-award{
  border-top:1px solid var(--wp--preset--color--line);
  padding-top:1.4em;
}
.md-award .md-year{
  font-family:var(--wp--preset--font-family--en); font-style:italic;
  font-synthesis-style:none;
  font-size:1.9rem; line-height:1; color:var(--wp--preset--color--brass);
  margin:0 0 .5em;
}
.md-award h3{ font-size:1.02rem; font-weight:300; letter-spacing:.08em; margin:0 0 .4em; }
.md-award p:not(.md-year){ font-size:.83rem; color:var(--wp--preset--color--muted); margin:0; }

/* 課程方案卡：卡片上方是標題與一句話，卡片內是照片、說明、時間人數、價格與按鈕 */
.md-plan-lead{ font-size:1.06rem; font-weight:400; letter-spacing:.06em; margin:0 0 .6em; }
.md-plan-tease{ font-size:.86rem; line-height:2; color:var(--wp--preset--color--muted); margin:0 0 1.6em; }

.md-plan{
  border:1px solid var(--wp--preset--color--line);
  border-radius:var(--md-r-md);
  background:var(--wp--preset--color--paper);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:box-shadow .45s var(--md-ease), transform .45s var(--md-ease);
}
.md-plan:hover{ transform:translateY(-3px); box-shadow:0 18px 44px rgba(26,23,20,.08); }
/* 照片貼齊卡片上緣：抵銷內距，並只留下方兩角的圓角 */
.md-plan > .md-ph{
  border-radius:0; border-style:none; margin:0;
}
.md-plan > .md-ph{ margin:0 0 clamp(18px,2vw,24px); }
/* 內距做在子元素的左右外距上，照片才能貼齊卡片上緣。
   下面幾條一律用 margin 的長寫法——用 margin 簡寫會把這裡的左右值洗掉。 */
.md-plan > :not(.md-ph){ margin-left:clamp(20px,2.2vw,28px); margin-right:clamp(20px,2.2vw,28px); }
.md-plan > h3{ margin-top:0; margin-bottom:.8em; font-size:1.06rem; font-weight:400; letter-spacing:.06em; }
.md-plan .md-plan-desc{ font-size:.86rem; line-height:2.1; color:var(--wp--preset--color--ink-2); margin-top:0; margin-bottom:1.4em; }

.md-plan .md-plan-meta{
  display:flex; gap:1.8em; flex-wrap:wrap;
  font-size:.78rem; letter-spacing:.08em; color:var(--wp--preset--color--muted);
  border-top:1px solid var(--wp--preset--color--line);
  padding:1.1em 0 0; margin-top:0; margin-bottom:1.2em;
}
.md-plan .md-plan-meta > span{ display:inline-flex; align-items:center; gap:.55em; }
.md-plan .md-plan-meta > span::before{
  content:""; width:15px; height:15px; flex:0 0 15px;
  background-repeat:no-repeat; background-position:center; background-size:contain;
  opacity:.85;
}
.md-m-time::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E655A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.2 1.9'/%3E%3C/svg%3E");
}
.md-m-people::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E655A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M2.8 19.5c0-3.3 2.8-5.4 6.2-5.4s6.2 2.1 6.2 5.4'/%3E%3Cpath d='M16.4 6.2a3 3 0 0 1 0 5.8'/%3E%3Cpath d='M18.2 14.6c2 .7 3.3 2.4 3.3 4.9'/%3E%3C/svg%3E");
}

.md-plan .md-plan-foot{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-bottom:clamp(20px,2.2vw,28px);
}
.md-plan .md-plan-price{
  font-family:var(--wp--preset--font-family--en); font-size:1.5rem; letter-spacing:.03em;
  color:var(--wp--preset--color--ink); margin:0;
}
.md-plan .wp-block-buttons{ margin:0; }
.md-plan .wp-block-button__link{ font-size:.78rem; padding:.85em 1.6em; }

/* 條列：關於／課程用的細節清單 */
.md-list li{
  font-size:.88rem; line-height:2.2; color:var(--wp--preset--color--ink-2);
  margin-bottom:.4em;
}

/* 內頁區段的預設節奏 */
.md-sec{ padding-block:var(--wp--preset--spacing--50); }
@media(max-width:760px){
  .md-award .md-year{ font-size:1.6rem; }
}


/* ============================================================
   20. 引言、署名與聯絡資訊列
   ============================================================ */

/* 創作者的話那一句 */
.md-quote{
  font-size:1.02rem; line-height:2; letter-spacing:.04em;
  color:var(--wp--preset--color--brass);
  border-left:2px solid var(--wp--preset--color--brass-soft);
  padding-left:1.2em; margin:0 0 1.8em;
}
.md-sign{
  font-size:.8rem; letter-spacing:.1em; color:var(--wp--preset--color--muted);
  margin-top:2.2em;
}

/* 聯絡資訊：圖示 + 標籤 + 內容 + 附註 */
.md-contact-list{ margin-top:2.2em; }
.md-contact-row{
  position:relative;
  padding-left:62px;
  margin-bottom:2.1em;
}
.md-contact-row::before{
  content:""; position:absolute; left:0; top:2px;
  width:42px; height:42px; border-radius:50%;
  background-color:var(--wp--preset--color--paper-2);
  background-repeat:no-repeat; background-position:center; background-size:18px 18px;
}
.md-contact-row .md-c-label{
  font-size:.74rem; letter-spacing:.16em; color:var(--wp--preset--color--muted); margin:0 0 .5em;
}
.md-contact-row .md-c-value{
  font-size:.95rem; letter-spacing:.04em; color:var(--wp--preset--color--ink); margin:0;
}
.md-contact-row .md-c-value a{ color:inherit; border-bottom:1px solid var(--wp--preset--color--line); }
.md-contact-row .md-c-value a:hover{ color:var(--wp--preset--color--brass); border-color:var(--wp--preset--color--brass); }
.md-contact-row .md-c-note{
  font-size:.78rem; color:var(--wp--preset--color--muted); margin:.5em 0 0; line-height:1.9;
}
.md-contact-row.is-pin::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B342B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
}
.md-contact-row.is-phone::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B342B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.2 3.5h3l1.5 3.8-2 1.4a12.5 12.5 0 0 0 6.6 6.6l1.4-2 3.8 1.5v3a2 2 0 0 1-2.2 2A17.4 17.4 0 0 1 4.2 5.7a2 2 0 0 1 2-2.2Z'/%3E%3C/svg%3E");
}
.md-contact-row.is-mail::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B342B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='m3.6 7 8.4 6 8.4-6'/%3E%3C/svg%3E");
}
.md-contact-row.is-clock::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B342B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.2 1.9'/%3E%3C/svg%3E");
}
.md-contact-row.is-ig::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B342B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17' cy='7' r='1'/%3E%3C/svg%3E");
}

/* 聯絡表單：滿寬送出鈕、必填星號、蜜罐 */
.md-submit-full{ width:100%; }
.md-req{ color:#B4552F; }
.md-hp{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); clip-path:inset(50%); white-space:nowrap;
}

/* 置中的區段標頭：標題與引言都置中，引言限寬 */
.md-lead.has-text-align-center{ margin-inline:auto; max-width:42em; }

@media(max-width:760px){
  .md-contact-row{ padding-left:54px; }
  .md-contact-row::before{ width:36px; height:36px; background-size:16px 16px; }
}

/* ============================================================
   21. 內頁的量測基準：與首頁完全一致
   ============================================================

   先前內頁的結構是 <main>（constrained）→ post-content（constrained）→ 內容。
   WordPress 的版面規則在這種巢狀下會做兩件事：

   1. main 是 constrained，會把沒有對齊設定的子元素壓到 contentSize（860px），
      於是整個 post-content 只有 860px 寬。
   2. useRootPaddingAwareAlignments 開啟時，每個 constrained 容器都會拿到
      has-global-padding；巢狀的第二層除了內距被歸零，連
      「has-global-padding > .alignfull」的負邊界也一起被歸零
      ——所以 post-content 裡的 alignfull 撐不滿，主視覺被鎖在 860px。

   解法不是加 !important 去蓋，而是把 <main> 改成一般文件流（is-layout-flow）。
   這樣 post-content 就成為最外層的 constrained 容器，角色與首頁的
   .wp-site-blocks 完全相同：內距、alignfull 的負邊界、alignwide 的量尺
   全部回到 WordPress 原本的規則，內頁與首頁的寬度自然一致。

   剩下要補的只有一件事：改成文件流之後，直接掛在 <main> 底下的區塊
   （課程頁的時段列表、訂製頁的表單）沒有容器幫它們決定寬度。
   ============================================================ */
main.wp-block-group.is-layout-flow > .alignwide{
  max-width:calc(var(--wp--style--global--wide-size, 1560px)
    + var(--wp--style--root--padding-left, clamp(20px,5vw,76px))
    + var(--wp--style--root--padding-right, clamp(20px,5vw,76px)));
  margin-left:auto; margin-right:auto;
  padding-left:var(--wp--style--root--padding-left, clamp(20px,5vw,76px));
  padding-right:var(--wp--style--root--padding-right, clamp(20px,5vw,76px));
  box-sizing:border-box;
}
main.wp-block-group.is-layout-flow > .alignfull{
  max-width:none; width:auto; margin-left:0; margin-right:0;
}
main.wp-block-group.is-layout-flow > :not(.alignfull):not(.alignwide):not(.wp-block-post-content){
  max-width:calc(var(--wp--style--global--content-size, 860px)
    + var(--wp--style--root--padding-left, clamp(20px,5vw,76px))
    + var(--wp--style--root--padding-right, clamp(20px,5vw,76px)));
  margin-left:auto; margin-right:auto;
  padding-left:var(--wp--style--root--padding-left, clamp(20px,5vw,76px));
  padding-right:var(--wp--style--root--padding-right, clamp(20px,5vw,76px));
  box-sizing:border-box;
}