/**
 * WooCommerce — Design Token Override
 *
 * Loaded on is_product(), is_shop(), is_product_category(), is_product_tag() pages.
 * Uses CSS specificity (.single-product prefix) to override Blocksy/WC defaults.
 *
 * Typography uses --hz-size-size-text-XX for font-size and --hz-typo-XX-ff for font-family (per-role).
 * Font-weight / line-height / letter-spacing are set directly (matching the token definition).
 * Colors use --hz-color-XX variables.
 *
 * Token mapping:
 * - Product title:     typo.03 (Heading Large, size.text.24, 700) + color.07
 * - Price:             typo.04 (Heading Small, size.text.17, 600) + color.14
 * - Short description: typo.06 (Body, size.text.09, 400) + color.08
 * - Add to cart btn:   typo.09 (Button Large, size.text.09, 600) + color.04 bg + color.11 text
 * - Quantity input:    typo.19 (Form Input, size.text.09, 400) + color.20 border
 * - Stock:             typo.07 (Body Small, size.text.07, 400) + color.18/17
 * - SKU / Category:    typo.14 (Meta, size.text.06, 400) + color.10
 * - Tab links:         typo.12 (Tab, size.text.08, 500) + color.09/14
 * - Tab content:       typo.06 (Body) + color.09
 * - Related heading:   typo.03 (Heading Large) + color.07
 */

/* ===========================
   Breadcrumbs — typo.13
   Blocksy 把 Page Title Area 關掉時會連帶隱藏麵包屑
   (.ct-breadcrumbs { display: none } 來自 Blocksy 動態 inline style)
   這裡強制顯示並套用 Design Token 樣式
   如果未來改用 Blocksy 原生麵包屑，移除此區段即可
   =========================== */
.single-product .ct-breadcrumbs,
.post-type-archive-product .ct-breadcrumbs,
.tax-product_cat .ct-breadcrumbs,
.tax-product_tag .ct-breadcrumbs {
    display: flex !important;
    font-family: var(--hz-typo-typo-13-ff);
    font-size: var(--hz-typo-typo-13-fs);
    font-weight: var(--hz-typo-typo-13-fw);
    line-height: var(--hz-typo-typo-13-lh);
    color: var(--hz-color-10);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    /* TODO: 未來 Spacing Design Token 完成後，改用 token variable */
    padding: 2rem 3rem;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.single-product .ct-breadcrumbs a,
.post-type-archive-product .ct-breadcrumbs a,
.tax-product_cat .ct-breadcrumbs a,
.tax-product_tag .ct-breadcrumbs a {
    color: var(--hz-color-10);
    text-decoration: none;
}

.single-product .ct-breadcrumbs a:hover,
.post-type-archive-product .ct-breadcrumbs a:hover,
.tax-product_cat .ct-breadcrumbs a:hover,
.tax-product_tag .ct-breadcrumbs a:hover {
    color: var(--hz-color-14);
}

/* 最後一項（當前頁面）不可點 */
.single-product .ct-breadcrumbs span:last-child,
.post-type-archive-product .ct-breadcrumbs span:last-child,
.tax-product_cat .ct-breadcrumbs span:last-child,
.tax-product_tag .ct-breadcrumbs span:last-child {
    color: var(--hz-color-09);
}

/* ===========================
   Product Title — typo.03
   =========================== */
.single-product .product_title {
    font-family: var(--hz-typo-typo-03-ff);
    font-size: var(--hz-typo-typo-03-fs);
    font-weight: var(--hz-typo-typo-03-fw);
    line-height: var(--hz-typo-typo-03-lh);
    letter-spacing: var(--hz-typo-typo-03-ls);
    color: var(--hz-color-07);
}

/* ===========================
   Price — typo.04
   =========================== */
.single-product .summary .price {
    font-family: var(--hz-typo-typo-04-ff);
    font-size: var(--hz-typo-typo-04-fs);
    font-weight: var(--hz-typo-typo-04-fw);
    line-height: var(--hz-typo-typo-04-lh);
    color: var(--hz-color-14);
}

.single-product .summary .price del {
    color: var(--hz-color-10);
}

.single-product .summary .price ins {
    color: var(--hz-color-14);
    text-decoration: none;
}

/* ===========================
   Short Description — typo.06
   =========================== */
.single-product .woocommerce-product-details__short-description,
.single-product .woocommerce-product-details__short-description p {
    font-family: var(--hz-typo-typo-06-ff);
    font-size: var(--hz-typo-typo-06-fs);
    font-weight: var(--hz-typo-typo-06-fw);
    line-height: var(--hz-typo-typo-06-lh);
    color: var(--hz-color-08);
}

/* ===========================
   Add to Cart Button — typo.09
   =========================== */
.single-product .single_add_to_cart_button.button {
    font-family: var(--hz-typo-typo-09-ff);
    font-size: var(--hz-typo-typo-09-fs);
    font-weight: var(--hz-typo-typo-09-fw);
    line-height: var(--hz-typo-typo-09-lh);
    letter-spacing: var(--hz-typo-typo-09-ls);
    background-color: var(--hz-color-04);
    color: var(--hz-color-11);
    border-radius: var(--hz-button-01-radius) !important; /* Blocksy inline style 設 25px，需 !important 覆蓋 */
    padding: var(--hz-button-01-padding-y) var(--hz-button-01-padding-x);
    border: none;
    transition: opacity 0.2s;
}

.single-product .single_add_to_cart_button.button:hover {
    background-color: var(--hz-color-04);
    color: var(--hz-color-11);
    opacity: 0.85;
}

/* ===========================
   Quantity Input — typo.19
   =========================== */
.single-product div.quantity input[type="number"].qty {
    font-family: var(--hz-typo-typo-19-ff);
    font-size: var(--hz-typo-typo-19-fs);
    font-weight: var(--hz-typo-typo-19-fw);
    line-height: var(--hz-typo-typo-19-lh);
    color: var(--hz-color-09);
    border-color: var(--hz-surface-02-border) !important; /* Blocksy inline style 設 --color-primary，需 !important 覆蓋 */
    border-width: var(--hz-surface-02-border-width);
    border-style: solid;
    border-radius: var(--hz-surface-02-radius) !important; /* Blocksy woocommerce.min.css 設 3px，需 !important 覆蓋 */
}

/* ===========================
   Stock Status — typo.07
   =========================== */
.single-product .stock {
    font-family: var(--hz-typo-typo-07-ff);
    font-size: var(--hz-typo-typo-07-fs);
    font-weight: var(--hz-typo-typo-07-fw);
    line-height: var(--hz-typo-typo-07-lh);
    color: var(--hz-color-10);
}

.single-product .stock.in-stock {
    color: var(--hz-color-18);
}

.single-product .stock.out-of-stock {
    color: var(--hz-color-17);
}

/* ===========================
   SKU & Category Meta — typo.14
   =========================== */
.single-product .sku_wrapper,
.single-product .posted_in,
.single-product .tagged_as {
    font-family: var(--hz-typo-typo-14-ff);
    font-size: var(--hz-typo-typo-14-fs);
    font-weight: var(--hz-typo-typo-14-fw) !important; /* Blocksy 設 700，需 !important 覆蓋 */
    line-height: var(--hz-typo-typo-14-lh);
    color: var(--hz-color-10);
}

.single-product .sku_wrapper a,
.single-product .posted_in a,
.single-product .tagged_as a {
    color: var(--hz-color-14);
    text-decoration: none;
}

.single-product .sku_wrapper a:hover,
.single-product .posted_in a:hover,
.single-product .tagged_as a:hover {
    text-decoration: underline;
}

/* ===========================
   Tabs — typo.12
   =========================== */
.single-product .woocommerce-tabs .tabs li a {
    font-family: var(--hz-typo-typo-12-ff);
    font-size: var(--hz-typo-typo-12-fs);
    font-weight: var(--hz-typo-typo-12-fw);
    line-height: var(--hz-typo-typo-12-lh);
    color: var(--hz-color-09);
}

.single-product .woocommerce-tabs .tabs li.active a {
    color: var(--hz-color-14);
}

.single-product .woocommerce-tabs .tabs li a:hover {
    color: var(--hz-color-14);
}

/* Tab content — typo.06 */
.single-product .woocommerce-Tabs-panel {
    font-family: var(--hz-typo-typo-06-ff);
    font-size: var(--hz-typo-typo-06-fs);
    font-weight: var(--hz-typo-typo-06-fw);
    line-height: var(--hz-typo-typo-06-lh);
    color: var(--hz-color-09);
}

.single-product .woocommerce-Tabs-panel h2 {
    font-family: var(--hz-typo-typo-03-ff);
    font-size: var(--hz-typo-typo-03-fs);
    font-weight: var(--hz-typo-typo-03-fw);
    line-height: var(--hz-typo-typo-03-lh);
    letter-spacing: var(--hz-typo-typo-03-ls);
    color: var(--hz-color-07);
}

/* ===========================
   Related / Upsell Products — typo.03
   =========================== */
.single-product .related.products > h2,
.single-product .upsells > h2 {
    font-family: var(--hz-typo-typo-03-ff);
    font-size: var(--hz-typo-typo-03-fs);
    font-weight: var(--hz-typo-typo-03-fw);
    line-height: var(--hz-typo-typo-03-lh);
    letter-spacing: var(--hz-typo-typo-03-ls);
    color: var(--hz-color-07);
}


/* =============================================================================
   SHOP / ARCHIVE PAGES (.post-type-archive-product, .tax-product_cat, etc.)
   =============================================================================

   Token mapping:
   - Hero title:         typo.03 (Heading Large) + color.07
   - Hero background:    color.02 (Secondary Background)
   - Result count:       typo.14 (Meta) + color.10
   - Ordering select:    typo.19 (Form Input) + surface.02
   - Card container:     surface.02 (12px radius, border)
   - Card title:         typo.04 (Heading Small) + color.07
   - Card price:         typo.06 (Body) + color.14
   - Card button:        typo.10 (Button Small) + button.01 + color.04/11
   - Sale badge:         color.14 bg + color.11 text
   - Sidebar heading:    typo.28 (Panel Heading) + color.07
   - Sidebar text:       typo.06 (Body) + color.09
   - Sidebar search:     typo.19 (Form Input) + surface.02
   - Sidebar recent:     typo.07 (Body Small) + color.09, price typo.14 + color.10
   ============================================================================= */

/* ===========================
   Archive Breadcrumbs — typo.13
   由 Plugin.php render_wc_archive_breadcrumb() 輸出
   =========================== */
.wc-hz-breadcrumbs {
    font-family: var(--hz-typo-typo-13-ff);
    font-size: var(--hz-typo-typo-13-fs);
    font-weight: var(--hz-typo-typo-13-fw);
    line-height: var(--hz-typo-typo-13-lh);
    color: var(--hz-color-10);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    /* TODO: 未來 Spacing Design Token 完成後，改用 token variable */
    padding: 1.5rem 3rem 0.5rem;
}

.wc-hz-breadcrumbs a {
    color: var(--hz-color-10);
    text-decoration: none;
}

.wc-hz-breadcrumbs a:hover {
    color: var(--hz-color-14);
}

.wc-hz-breadcrumbs__sep {
    margin: 0 0.4rem;
    color: var(--hz-color-10);
}

/* ===========================
   Hero / Page Title Area
   Shop 頁面隱藏 Hero Banner（只用麵包屑即可，跟 hauzii.com 一致）
   如果未來需要顯示，移除 display:none 並取消下方註解
   =========================== */
.post-type-archive-product .hero-section,
.tax-product_cat .hero-section,
.tax-product_tag .hero-section {
    display: none;
}

/*
.post-type-archive-product .hero-section .page-title,
.tax-product_cat .hero-section .page-title,
.tax-product_tag .hero-section .page-title {
    font-family: var(--hz-typo-typo-13-ff);
    font-size: var(--hz-typo-typo-13-fs);
    font-weight: var(--hz-typo-typo-13-fw);
    line-height: var(--hz-typo-typo-13-lh);
    letter-spacing: var(--hz-typo-typo-13-ls);
    color: var(--hz-color-07);
}
*/

/* ===========================
   Content Area Background
   Blocksy sidebar layout 的 data-row="middle" 容器有灰色背景 rgb(253,253,253)
   改為白色統一
   =========================== */
/* 覆蓋 Blocksy sidebar layout 的所有背景層 */
.post-type-archive-product [data-row="middle"],
.tax-product_cat [data-row="middle"],
.tax-product_tag [data-row="middle"],
.post-type-archive-product #main-container,
.tax-product_cat #main-container,
.tax-product_tag #main-container,
.post-type-archive-product .site-main,
.tax-product_cat .site-main,
.tax-product_tag .site-main {
    background-color: var(--hz-color-01) !important;
}

/* Blocksy 用 --theme-content-background 設灰底 */
.post-type-archive-product,
.tax-product_cat,
.tax-product_tag {
    --theme-content-background: var(--hz-color-01) !important;
}

/* Blocksy 用 sidebar::after 做灰色背景裝飾，移除 */
.post-type-archive-product aside#sidebar::after,
.tax-product_cat aside#sidebar::after,
.tax-product_tag aside#sidebar::after {
    background-color: var(--hz-color-01) !important;
}

/* ===========================
   Sidebar Widget Title 裝飾線
   Blocksy 預設有豎線裝飾，移除以保持乾淨
   =========================== */
.woocommerce #sidebar .ct-widget .widget-title::before,
.woocommerce .ct-sidebar .ct-widget .widget-title::before,
.woocommerce #sidebar .ct-widget > h2::before,
.woocommerce .ct-sidebar .ct-widget > h2::before {
    display: none !important;
}

/* ===========================
   Result Count — typo.14
   =========================== */
.woocommerce .woocommerce-result-count {
    font-family: var(--hz-typo-typo-14-ff);
    font-size: var(--hz-typo-typo-14-fs) !important;
    font-weight: var(--hz-typo-typo-14-fw);
    line-height: var(--hz-typo-typo-14-lh);
    color: var(--hz-color-10) !important;
}

/* ===========================
   Ordering Select — typo.19 + surface.02
   =========================== */
.woocommerce .woocommerce-ordering select {
    font-family: var(--hz-typo-typo-19-ff);
    font-size: var(--hz-typo-typo-19-fs) !important;
    font-weight: var(--hz-typo-typo-19-fw);
    line-height: var(--hz-typo-typo-19-lh);
    color: var(--hz-color-09);
    border-color: var(--hz-surface-02-border) !important; /* Blocksy 設 --color-primary */
    border-radius: var(--hz-surface-02-radius) !important;
}

/* ===========================
   Product Cards — surface.02
   =========================== */
.woocommerce ul.products li.product {
    background-color: var(--hz-surface-02-bg);
    border: var(--hz-surface-02-border-width) solid var(--hz-surface-02-border);
    border-radius: var(--hz-surface-02-radius);
    overflow: hidden;
    padding-bottom: 1.5rem;
}

/* Card image — placeholder 圖片本身帶 Blocksy 主題色，用容器背景蓋住 */
.woocommerce ul.products li.product .ct-media-container {
    background-color: var(--hz-color-02);
}

.woocommerce ul.products li.product img {
    border-radius: 0; /* 卡片已有圓角，圖片不需要額外圓角 */
}

/* Card content padding — 圖片以下所有內容統一左右留白，figure（圖片容器）排除 */
.woocommerce ul.products li.product > *:not(figure):not(.ct-media-container):not(.onsale):not(img) {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Card title — typo.04 + color.07 */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
    font-family: var(--hz-typo-typo-04-ff);
    font-size: var(--hz-typo-typo-04-fs);
    font-weight: var(--hz-typo-typo-04-fw);
    line-height: var(--hz-typo-typo-04-lh);
    color: var(--hz-color-07);
}

/* Card price — typo.06 + color.14 */
.woocommerce ul.products li.product .price {
    font-family: var(--hz-typo-typo-06-ff);
    font-size: var(--hz-typo-typo-06-fs);
    font-weight: var(--hz-typo-typo-06-fw);
    line-height: var(--hz-typo-typo-06-lh);
    color: var(--hz-color-14);
}

.woocommerce ul.products li.product .price del {
    color: var(--hz-color-10);
}

.woocommerce ul.products li.product .price ins {
    color: var(--hz-color-14);
    text-decoration: none;
}

/* Card button — typo.10 + button.01 */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
    font-family: var(--hz-typo-typo-10-ff);
    font-size: var(--hz-typo-typo-10-fs);
    font-weight: var(--hz-typo-typo-10-fw);
    line-height: var(--hz-typo-typo-10-lh);
    letter-spacing: var(--hz-typo-typo-10-ls);
    background-color: var(--hz-color-04) !important; /* Blocksy inline style 設 white */
    color: var(--hz-color-11) !important; /* Blocksy inline style 設 --color-accent */
    border: none !important; /* Blocksy inline style 設 --theme-button-border */
    border-radius: var(--hz-button-01-radius) !important;
    padding: var(--hz-button-01-padding-y) var(--hz-button-01-padding-x);
    transition: opacity 0.2s;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
    background-color: var(--hz-color-04) !important;
    color: var(--hz-color-11) !important;
    opacity: 0.85;
}

/* Sale badge — color.14 bg + color.11 text */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
    background-color: var(--hz-color-14);
    color: var(--hz-color-11);
    font-family: var(--hz-typo-typo-17-ff);
    font-size: var(--hz-typo-typo-17-fs);
    font-weight: var(--hz-typo-typo-17-fw);
    border-radius: var(--hz-button-01-radius);
}

/* Card category label — typo.14 + color.10 */
.woocommerce ul.products li.product .product_cat_name,
.woocommerce ul.products li.product [data-product-type] {
    font-family: var(--hz-typo-typo-14-ff);
    font-size: var(--hz-typo-typo-14-fs);
    font-weight: var(--hz-typo-typo-14-fw);
    color: var(--hz-color-10);
}

/* ===========================
   Sidebar — Blocksy .ct-sidebar
   =========================== */

/* Widget title — typo.28 (Panel Heading) + color.07
   Blocksy widgets use .widget-title (h3) and WC Blocks use h5.wp-block-heading
   typo.28 專為 Sidebar/Footer/Dashboard 面板標題設計 */
.woocommerce aside#sidebar .ct-widget .widget-title,
.woocommerce aside#sidebar .ct-widget h2,
.woocommerce aside#sidebar .ct-widget h3,
.woocommerce aside#sidebar .ct-widget h5 {
    font-family: var(--hz-typo-typo-28-ff);
    font-size: var(--hz-typo-typo-28-fs) !important;
    font-weight: var(--hz-typo-typo-28-fw) !important;
    line-height: var(--hz-typo-typo-28-lh);
    color: var(--hz-color-07) !important;
    border-left: none !important; /* Blocksy 設 4px solid 綠色 border-left 裝飾 */
    padding-left: 0 !important;
}

/* Sidebar body text / links — typo.06 + color.09
   Blocksy widgets 繼承主題字型（可能是 Noto Serif），需強制覆蓋所有子元素 */
.woocommerce aside#sidebar,
.woocommerce aside#sidebar *:not(i):not(svg) {
    font-family: var(--hz-typo-typo-06-ff) !important;
}

.woocommerce aside#sidebar {
    font-size: var(--hz-typo-typo-06-fs);
    font-weight: var(--hz-typo-typo-06-fw);
    line-height: var(--hz-typo-typo-06-lh);
    color: var(--hz-color-09);
}

.woocommerce aside#sidebar a {
    color: var(--hz-color-09) !important;
    text-decoration: none;
}

.woocommerce aside#sidebar a:hover {
    color: var(--hz-color-14) !important;
}

/* Sidebar search input — typo.19 + surface.02 */
.woocommerce #sidebar input[type="search"],
.woocommerce .ct-sidebar input[type="search"],
.woocommerce #sidebar .wc-block-product-search__field,
.woocommerce .ct-sidebar .wc-block-product-search__field {
    font-family: var(--hz-typo-typo-19-ff);
    font-size: var(--hz-typo-typo-19-fs);
    font-weight: var(--hz-typo-typo-19-fw);
    color: var(--hz-color-09);
    border-color: var(--hz-surface-02-border);
    border-radius: var(--hz-surface-02-radius);
}

/* Sidebar recent products — typo.07 name + typo.14 price */
.woocommerce #sidebar .product_list_widget li a,
.woocommerce .ct-sidebar .product_list_widget li a {
    font-size: var(--hz-typo-typo-07-fs);
    color: var(--hz-color-09);
}

.woocommerce #sidebar .product_list_widget li .amount,
.woocommerce .ct-sidebar .product_list_widget li .amount {
    font-size: var(--hz-typo-typo-14-fs);
    color: var(--hz-color-10);
}

/* Sidebar category count — color.10 */
.woocommerce #sidebar .count,
.woocommerce .ct-sidebar .count {
    color: var(--hz-color-10);
}


/* =============================================================================
   CART & CHECKOUT PAGES
   =============================================================================

   Token mapping:
   - Table header:       typo.14 (Meta) + color.07
   - Product name:       typo.06 (Body) + color.07
   - Product price:      typo.06 (Body) + color.14
   - Quantity input:     typo.19 (Form Input) + surface.02
   - Section titles:     typo.04 (Heading Small) + color.07
   - Form labels:        typo.18 (Form Label) + color.09
   - Form inputs:        typo.19 (Form Input) + surface.02
   - Shipping labels:    typo.06 (Body) + color.09
   - Privacy text:       typo.07 (Body Small) + color.10
   - Pay button:         typo.09 (Button Large) + button.01 + color.04/11
   ============================================================================= */

/* ===========================
   Cart/Checkout Table Background
   Blocksy inline style 設 rgb(253,253,253) 灰底
   =========================== */
/* Blocksy inline style 用 .woocommerce-checkout .woocommerce-cart-form .shop_table + !important */
body.woocommerce-checkout .woocommerce-cart-form .shop_table,
body.woocommerce-cart .woocommerce-cart-form .shop_table,
.woocommerce-checkout .shop_table,
.woocommerce-cart .shop_table {
    background-color: var(--hz-color-01) !important;
}

/* Blocksy 用 appearance:none 自繪 radio/checkbox，accent-color 不生效
   需要覆蓋 Blocksy 的 --color-primary 和 background-color */
.woocommerce-checkout input[type="radio"],
.woocommerce-checkout input[type="checkbox"],
.woocommerce-cart input[type="radio"],
.woocommerce-cart input[type="checkbox"] {
    accent-color: var(--hz-color-14) !important;
    --color-primary: var(--hz-color-14) !important;
}

/* Blocksy 的 radio/checkbox checked 用 background-color */
.woocommerce-checkout input[type="radio"]:checked,
.woocommerce-checkout input[type="checkbox"]:checked,
.woocommerce-cart input[type="radio"]:checked,
.woocommerce-cart input[type="checkbox"]:checked {
    background-color: var(--hz-color-14) !important;
    border-color: var(--hz-color-14) !important;
}

/* 表格 thead 灰底 — Blocksy inline style 用更具體 selector */
.woocommerce .shop_table thead,
body.woocommerce-checkout .woocommerce-cart-form .shop_table thead {
    background-color: var(--hz-color-01) !important;
}

/* ===========================
   Cart Table Header — typo.14
   =========================== */
.woocommerce .shop_table thead th {
    font-family: var(--hz-typo-typo-14-ff);
    font-size: var(--hz-typo-typo-14-fs);
    font-weight: var(--hz-typo-typo-14-fw);
    line-height: var(--hz-typo-typo-14-lh);
    color: var(--hz-color-07);
}

/* ===========================
   Cart Product Name — typo.06
   =========================== */
.woocommerce .shop_table .product-name,
.woocommerce .shop_table .product-name a {
    font-family: var(--hz-typo-typo-06-ff);
    font-size: var(--hz-typo-typo-06-fs);
    font-weight: var(--hz-typo-typo-06-fw);
    color: var(--hz-color-07);
    text-decoration: none;
}

.woocommerce .shop_table .product-name a:hover {
    color: var(--hz-color-14);
}

/* ===========================
   Cart Product Price — typo.06 + color.14
   =========================== */
.woocommerce .shop_table .product-price .amount,
.woocommerce .shop_table .product-subtotal .amount,
.woocommerce .shop_table .product-total .amount {
    font-family: var(--hz-typo-typo-06-ff);
    font-size: var(--hz-typo-typo-06-fs);
    color: var(--hz-color-14);
}

/* ===========================
   Cart Quantity Input — typo.19 + surface.02
   =========================== */
.woocommerce .shop_table .quantity .qty {
    font-family: var(--hz-typo-typo-19-ff);
    font-size: var(--hz-typo-typo-19-fs);
    color: var(--hz-color-09);
    border-color: var(--hz-surface-02-border) !important; /* Blocksy 設 --color-primary 綠色 */
    border-radius: var(--hz-surface-02-radius) !important;
}

/* ===========================
   Checkout Section Titles — typo.04
   (帳單資訊、運送、您的訂單)
   =========================== */
.woocommerce-checkout h3:not([id*="qm"]) {
    font-family: var(--hz-typo-typo-04-ff);
    font-size: var(--hz-typo-typo-04-fs);
    font-weight: var(--hz-typo-typo-04-fw);
    line-height: var(--hz-typo-typo-04-lh);
    color: var(--hz-color-07);
}

/* ===========================
   Checkout Form Labels — typo.18
   =========================== */
.woocommerce-checkout .form-row label {
    font-family: var(--hz-typo-typo-18-ff);
    font-size: var(--hz-typo-typo-18-fs);
    font-weight: var(--hz-typo-typo-18-fw);
    line-height: var(--hz-typo-typo-18-lh);
    color: var(--hz-color-09);
}

/* ===========================
   Checkout Form Inputs & Selects — typo.19 + surface.02
   =========================== */
.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
    font-family: var(--hz-typo-typo-19-ff);
    font-size: var(--hz-typo-typo-19-fs);
    font-weight: var(--hz-typo-typo-19-fw);
    line-height: var(--hz-typo-typo-19-lh);
    color: var(--hz-color-09);
    border-color: var(--hz-surface-02-border);
    border-radius: var(--hz-surface-02-radius);
}

.woocommerce-checkout .form-row textarea {
    border-radius: var(--hz-surface-02-radius);
}

/* ===========================
   Shipping Method Labels — typo.06
   =========================== */
.woocommerce-checkout .woocommerce-shipping-methods label {
    font-family: var(--hz-typo-typo-06-ff);
    font-size: var(--hz-typo-typo-06-fs);
    color: var(--hz-color-09);
}

/* ===========================
   Order Review Table — typo.06
   =========================== */
.woocommerce-checkout .order-total .amount {
    font-family: var(--hz-typo-typo-04-ff);
    font-size: var(--hz-typo-typo-04-fs);
    font-weight: var(--hz-typo-typo-04-fw);
    color: var(--hz-color-14);
}

/* ===========================
   Privacy Policy Text — typo.07 + color.10
   =========================== */
.woocommerce-checkout .woocommerce-privacy-policy-text p {
    font-family: var(--hz-typo-typo-07-ff);
    font-size: var(--hz-typo-typo-07-fs);
    font-weight: var(--hz-typo-typo-07-fw);
    line-height: var(--hz-typo-typo-07-lh);
    color: var(--hz-color-10);
}

.woocommerce-checkout .woocommerce-privacy-policy-text a {
    color: var(--hz-color-14);
}

/* ===========================
   Place Order Button — typo.09 + button.01
   =========================== */
/* 覆蓋 Blocksy 的 --color-primary，讓所有引用它的元素也跟著改 */
.woocommerce-checkout,
.woocommerce-cart {
    --color-primary: var(--hz-color-14);
    --theme-button-background-initial-color: var(--hz-color-04);
    --theme-button-text-initial-color: var(--hz-color-11);
}

.woocommerce-checkout #place_order {
    font-family: var(--hz-typo-typo-09-ff);
    font-size: var(--hz-typo-typo-09-fs);
    font-weight: var(--hz-typo-typo-09-fw);
    line-height: var(--hz-typo-typo-09-lh);
    letter-spacing: var(--hz-typo-typo-09-ls);
    background-color: var(--hz-color-04) !important; /* Blocksy 設 --color-primary 綠色 */
    color: var(--hz-color-11) !important;
    border: none;
    border-radius: var(--hz-button-01-radius) !important;
    padding: var(--hz-button-01-padding-y) var(--hz-button-01-padding-x);
    transition: opacity 0.2s;
}

.woocommerce-checkout #place_order:hover {
    background-color: var(--hz-color-04) !important;
    color: var(--hz-color-11) !important;
    opacity: 0.85;
}

/* ===========================
   WooCommerce Notices (加入購物車通知等)
   =========================== */
/* 通知訊息的 focus outline 移除（瀏覽器原生 focus 樣式） */
.woocommerce-message:focus {
    outline: none;
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-message .wc-forward,
.woocommerce-info .wc-forward {
    font-family: var(--hz-typo-typo-10-ff);
    font-size: var(--hz-typo-typo-10-fs);
    font-weight: var(--hz-typo-typo-10-fw);
    background-color: var(--hz-color-04) !important; /* Blocksy 設橘色 */
    color: var(--hz-color-11) !important;
    border: none;
    border-radius: var(--hz-button-01-radius) !important;
    padding: var(--hz-button-01-padding-y) var(--hz-button-01-padding-x);
}

.woocommerce-message .button:hover,
.woocommerce-message .wc-forward:hover {
    background-color: var(--hz-color-04) !important;
    color: var(--hz-color-11) !important;
    opacity: 0.85;
}

/* ===========================
   Empty Cart Page
   =========================== */
.woocommerce-cart .cart-empty {
    font-family: var(--hz-typo-typo-06-ff);
    font-size: var(--hz-typo-typo-06-fs);
    color: var(--hz-color-09);
}

.woocommerce-cart .return-to-shop .button {
    font-family: var(--hz-typo-typo-09-ff);
    font-size: var(--hz-typo-typo-09-fs);
    font-weight: var(--hz-typo-typo-09-fw);
    background-color: var(--hz-color-04) !important;
    color: var(--hz-color-11) !important;
    border: none;
    border-radius: var(--hz-button-01-radius) !important;
    padding: var(--hz-button-01-padding-y) var(--hz-button-01-padding-x);
}


/* =============================================================================
   ORDER RECEIVED / THANK YOU PAGE
   WC 條件：is_order_received_page()（is_checkout() 的子狀態）
   CSS 已隨 is_checkout() 載入，不需要額外條件

   Token mapping:
   - Thank you message:  typo.03 (Heading Large) + color.07
   - Order details:      typo.06 (Body) + color.09
   - Order table header: typo.14 (Meta) + color.07
   - Order total:        typo.04 (Heading Small) + color.14
   - Customer details:   typo.06 (Body) + color.09
   ============================================================================= */

/* ===========================
   Thank You Message
   =========================== */
.woocommerce-order-received .woocommerce-thankyou-order-received {
    font-family: var(--hz-typo-typo-03-ff);
    font-size: var(--hz-typo-typo-03-fs);
    font-weight: var(--hz-typo-typo-03-fw);
    line-height: var(--hz-typo-typo-03-lh);
    color: var(--hz-color-07);
}

/* ===========================
   Order Overview (訂單編號、日期、金額等)
   =========================== */
.woocommerce-order-received .woocommerce-order-overview {
    font-family: var(--hz-typo-typo-06-ff);
    font-size: var(--hz-typo-typo-06-fs);
    font-weight: var(--hz-typo-typo-06-fw);
    line-height: var(--hz-typo-typo-06-lh);
    color: var(--hz-color-09);
}

.woocommerce-order-received .woocommerce-order-overview strong {
    color: var(--hz-color-07);
}

/* ===========================
   Order Details Section Title
   =========================== */
.woocommerce-order-received h2 {
    font-family: var(--hz-typo-typo-04-ff);
    font-size: var(--hz-typo-typo-04-fs);
    font-weight: var(--hz-typo-typo-04-fw);
    line-height: var(--hz-typo-typo-04-lh);
    color: var(--hz-color-07);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

/* 區段之間的間距 */
.woocommerce-order-received .woocommerce-order-details,
.woocommerce-order-received .woocommerce-customer-details,
.woocommerce-order-received .woocommerce-bacs-bank-details {
    margin-top: 2rem;
}

/* ===========================
   Order Details Table
   =========================== */
.woocommerce-order-received .shop_table {
    background-color: var(--hz-color-01) !important;
    margin-bottom: 2rem;
}

.woocommerce-order-received .shop_table thead th {
    font-family: var(--hz-typo-typo-14-ff);
    font-size: var(--hz-typo-typo-14-fs);
    font-weight: var(--hz-typo-typo-14-fw);
    color: var(--hz-color-07);
}

.woocommerce-order-received .shop_table td {
    font-family: var(--hz-typo-typo-06-ff);
    font-size: var(--hz-typo-typo-06-fs);
    color: var(--hz-color-09);
}

.woocommerce-order-received .shop_table .amount {
    color: var(--hz-color-14);
}

.woocommerce-order-received .order-total .amount {
    font-family: var(--hz-typo-typo-04-ff);
    font-size: var(--hz-typo-typo-04-fs);
    font-weight: var(--hz-typo-typo-04-fw);
    color: var(--hz-color-14);
}

/* ===========================
   Customer Details
   =========================== */
.woocommerce-order-received .woocommerce-customer-details address {
    font-family: var(--hz-typo-typo-06-ff);
    font-size: var(--hz-typo-typo-06-fs);
    line-height: var(--hz-typo-typo-06-lh);
    color: var(--hz-color-09);
}

/* ===========================
   Bank Transfer Details (轉帳匯款資訊)
   =========================== */
.woocommerce-order-received .woocommerce-bacs-bank-details {
    font-family: var(--hz-typo-typo-06-ff);
    font-size: var(--hz-typo-typo-06-fs);
    color: var(--hz-color-09);
}


/* =============================================================================
   MY ACCOUNT PAGE
   WC 條件：is_account_page()

   Token mapping:
   - Nav items:           typo.06 (Body) + color.09
   - Nav active:          color.04 bg + color.11 text
   - Content text:        typo.06 (Body) + color.09
   - Content links:       color.14
   - Section titles:      typo.04 (Heading Small) + color.07
   - Form labels:         typo.18 (Form Label) + color.09
   - Form inputs:         typo.19 (Form Input) + surface.02
   - Buttons:             typo.09 (Button Large) + button.01 + color.04/11
   ============================================================================= */

/* 覆蓋 Blocksy --color-primary 在帳號頁 */
.woocommerce-account {
    --color-primary: var(--hz-color-14);
    --theme-button-background-initial-color: var(--hz-color-04);
    --theme-button-text-initial-color: var(--hz-color-11);
}

/* ===========================
   Account Navigation
   =========================== */
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    font-family: var(--hz-typo-typo-06-ff);
    font-size: var(--hz-typo-typo-06-fs);
    font-weight: var(--hz-typo-typo-06-fw);
    color: var(--hz-color-09);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    color: var(--hz-color-14);
}

/* Active nav item — Blocksy 用 --color-primary 做背景 */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: var(--hz-color-04) !important;
    color: var(--hz-color-11) !important;
}

/* ===========================
   Account Content
   =========================== */
.woocommerce-account .woocommerce-MyAccount-content {
    font-family: var(--hz-typo-typo-06-ff);
    font-size: var(--hz-typo-typo-06-fs);
    font-weight: var(--hz-typo-typo-06-fw);
    line-height: var(--hz-typo-typo-06-lh);
    color: var(--hz-color-09);
}

.woocommerce-account .woocommerce-MyAccount-content a {
    color: var(--hz-color-14);
}

.woocommerce-account .woocommerce-MyAccount-content a:hover {
    text-decoration: underline;
}

/* Section titles */
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
    font-family: var(--hz-typo-typo-04-ff);
    font-size: var(--hz-typo-typo-04-fs);
    font-weight: var(--hz-typo-typo-04-fw);
    line-height: var(--hz-typo-typo-04-lh);
    color: var(--hz-color-07);
}

/* ===========================
   Account Forms
   =========================== */
.woocommerce-account .woocommerce-MyAccount-content label {
    font-family: var(--hz-typo-typo-18-ff);
    font-size: var(--hz-typo-typo-18-fs);
    font-weight: var(--hz-typo-typo-18-fw);
    color: var(--hz-color-09);
}

.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content textarea {
    font-family: var(--hz-typo-typo-19-ff);
    font-size: var(--hz-typo-typo-19-fs);
    font-weight: var(--hz-typo-typo-19-fw);
    color: var(--hz-color-09);
    border-color: var(--hz-surface-02-border);
    border-radius: var(--hz-surface-02-radius);
}

/* Save / Submit buttons */
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"] {
    font-family: var(--hz-typo-typo-09-ff);
    font-size: var(--hz-typo-typo-09-fs);
    font-weight: var(--hz-typo-typo-09-fw);
    background-color: var(--hz-color-04) !important;
    color: var(--hz-color-11) !important;
    border: none;
    border-radius: var(--hz-button-01-radius) !important;
    padding: var(--hz-button-01-padding-y) var(--hz-button-01-padding-x);
}

.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover {
    opacity: 0.85;
}

/* ===========================
   Orders Table
   =========================== */
.woocommerce-account .woocommerce-orders-table {
    background-color: var(--hz-color-01) !important;
}

.woocommerce-account .woocommerce-orders-table thead th {
    font-family: var(--hz-typo-typo-14-ff);
    font-size: var(--hz-typo-typo-14-fs);
    font-weight: var(--hz-typo-typo-14-fw);
    color: var(--hz-color-07);
}

.woocommerce-account .woocommerce-orders-table td {
    font-family: var(--hz-typo-typo-06-ff);
    font-size: var(--hz-typo-typo-06-fs);
    color: var(--hz-color-09);
}

.woocommerce-account .woocommerce-orders-table .amount {
    color: var(--hz-color-14);
}

/* View order button */
.woocommerce-account .woocommerce-orders-table .woocommerce-button {
    font-family: var(--hz-typo-typo-10-ff);
    font-size: var(--hz-typo-typo-10-fs);
    font-weight: var(--hz-typo-typo-10-fw);
    background-color: var(--hz-color-04) !important;
    color: var(--hz-color-11) !important;
    border: none !important;
    border-radius: var(--hz-button-01-radius) !important;
}


/* =============================================================================
   MINI-CART DROPDOWN (Header Cart Slot)
   =============================================================================
   Mini-cart 出現在所有頁面的 header 中，樣式透過 WooCommerceIntegration.php
   的 wp_add_inline_style('hauzii-tailwind') 全站載入。
   Token mapping 詳見 docs/integration/int-02-woocommerce-design-tokens.md
   ============================================================================= */