/**
 * 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 對齊 Blocksy .ct-container 的 1290px,讓麵包屑文字跟 sidebar / 內容區
       共用同一個容器左緣,不再因為自己的 1200px max-width 而比內容區更靠中。 */
    max-width: 1290px;
    margin-left: auto;
    margin-right: auto;
    /* TODO: 未來 Spacing Design Token 完成後，改用 token variable */
    /* 左右 padding 設 0 — 對齊 .ct-container(無 horizontal padding)。 */
    padding: 1.5rem 0 0.5rem;
}

/* Mobile: 麵包屑左右對齊 mobile 版 .ct-container 的 12px margin(woocommerce-tokens
   下方 @media 區段定義) */
@media (max-width: 767px) {
    .wc-hz-breadcrumbs {
        max-width: none;
        padding-left: 12px;
        padding-right: 12px;
    }
}

.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);
}
*/

/* Shop 整頁底色 / sidebar::after 已移到 page-bg.css(全站基底) */

/* ===========================
   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);
}

/* ===========================
   Product Cards — Mobile compaction (≤767px)
   ===========================
   桌機沿用 Blocksy + Hauzii 既有間距;手機 2-col 時這些值對 ~190px 卡片過鬆,
   專為手機壓縮 grid gap、page container margin、card 內 padding、figure↔title 間距。
   @third-party:Blocksy(.ct-container width fix 必要 — Blocksy 給 fixed width 而非 auto) */
@media (max-width: 767px) {
    /* Page container — Blocksy fixed width 在 mobile 會卡死 grid;強制 auto 讓 margin 對稱 */
    .woocommerce-page .ct-container {
        width: auto !important;
        max-width: none !important;
        margin-left: 12px !important;
        margin-right: 12px !important;
    }

    /* Grid gap — Blocksy 預設 30px,壓到 10px 讓兩欄卡片各佔更寬 */
    .woocommerce ul.products { gap: 10px !important; }

    /* Card content 左右 padding — 1rem → 0.375rem (6px) */
    .woocommerce ul.products li.product > *:not(figure):not(.ct-media-container):not(.onsale):not(img) {
        padding-left: 0.375rem !important;
        padding-right: 0.375rem !important;
    }

    /* Card 下緣 padding — 1.5rem → 0.75rem */
    .woocommerce ul.products li.product { padding-bottom: 0.75rem !important; }

    /* Figure → 標題縱向距離 — Blocksy 給的 25 + 20 = 45px,壓到 10 + 0 = 10px */
    .woocommerce ul.products li.product figure { margin-bottom: 10px !important; }
    .woocommerce ul.products li.product .woocommerce-loop-product__title,
    .woocommerce ul.products li.product h2 {
        margin-top: 0 !important;
        margin-bottom: 6px !important;
    }
}

/* ===========================
   Related Products / Up-sells — section spacing
   ===========================
   WC 原生 `.related.products` 與 `.up-sells` 出現在單一商品頁底部,WC 不給任何
   bottom spacing → 在 Hauzii footer 上方直接擠成 0px gap。給 section 級別的下緣
   留白(hz-block-py-sm = 4rem),讓相關商品區跟 footer 自然分開。 */
.woocommerce .related.products,
.woocommerce .up-sells {
    padding-bottom: var(--hz-block-py-sm);
}

/* ===========================
   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
   恢復原 4 selector 高 specificity 寫法(2.2.3 簡化版被 Blocksy 同 specificity 規則蓋過)。
   .woocommerce-{page} body class 是 WP 設的,Blocksy 不會用,確保我們獨佔。 */
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) !important;   /* Blocksy 用 --color-text-secondary !important 蓋過,必須打回去 */
    background-color: var(--hz-color-02);
}

/* Idle hover — Blocksy 用 `li:hover a` 同時蓋 color + bg(藍),必須兩個都覆蓋:
   bg 維持 idle 的 color.02 米色,只改 text color.14 */
.woocommerce-account .woocommerce-MyAccount-navigation ul li:not(.is-active) a:hover {
    background-color: var(--hz-color-02) !important;
    color: var(--hz-color-14) !important;
}

/* 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;
}

/* Active hover — UX 慣例:active item 已選中不該有 hover 反饋(點了也去不到別頁),
   cursor: default + bg/color 維持 active 狀態,擋 Blocksy `li:hover a` 把背景變藍 */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a:hover {
    background-color: var(--hz-color-04) !important;
    color: var(--hz-color-11) !important;
    cursor: default;
}

/* ===========================
   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);
}

/* ===========================
   WC Info / Message Box
   .woocommerce-info 是 WC 標準資訊框(空 cart/orders/subscriptions/downloads 都用這個)。
   WC/Blocksy 預設灰白 #F0F1F3,改用 color.02 跟 hauzii palette 對齊。
   =========================== */
.woocommerce-info {
    background-color: var(--hz-color-02) !important;
    color: var(--hz-color-09);
    font-family: var(--hz-typo-typo-06-ff);
    font-size: var(--hz-typo-typo-06-fs);
}

/* ===========================
   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
   ============================================================================= */