/**
 * Kuroda Design System (黑田媽)
 * by 卡卡東工作室 · 2026-05
 *
 * 7 色色票 + Noto Serif/Sans TC 字體
 * 映射到 Blocksy palette 變數、套用於整站
 */

:root {
  /* === 黑田媽 7 色色票 === */
  --kkd-paper:    #FAF8F3;
  --kkd-cream:    #F0E8DA;
  --kkd-ink:      #1A1A1A;
  --kkd-inkgray:  #6B6B6B;
  --kkd-sumi:     #5A4A3A;
  --kkd-matcha:   #3A4A3A;
  --kkd-rule:     #E5E0D5;

  /* === Map 到 Blocksy palette === */
  --theme-palette-color-1: var(--kkd-sumi);
  --theme-palette-color-2: var(--kkd-matcha);
  --theme-palette-color-3: var(--kkd-ink);
  --theme-palette-color-4: var(--kkd-inkgray);
  --theme-palette-color-5: var(--kkd-paper);
  --theme-palette-color-6: var(--kkd-cream);
  --theme-palette-color-7: var(--kkd-rule);
  --theme-palette-color-8: #FFFFFF;

  --theme-text-color:           var(--kkd-ink);
  --theme-headings-color:       var(--kkd-ink);
  --theme-link-initial-color:   var(--kkd-sumi);
  --theme-link-hover-color:     var(--kkd-matcha);
  --theme-border-color:         var(--kkd-rule);

  /* === 字體 === */
  --kkd-font-serif: "Noto Serif TC", "Source Han Serif TC", "Songti TC", serif;
  --kkd-font-sans:  "Noto Sans TC", -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif;

  --kkd-leading-tight:  1.4;
  --kkd-leading-loose:  1.7;
  --kkd-tracking-eyebrow: 0.25em;
}

/* === 全站文字基底 === */
body {
  font-family: var(--kkd-font-sans);
  font-weight: 400;
  color: var(--kkd-ink);
  background: var(--kkd-paper);
  line-height: var(--kkd-leading-loose);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--kkd-font-serif);
  font-weight: 400;
  line-height: var(--kkd-leading-tight);
  color: var(--kkd-ink);
}

/* === 連結通用過渡 (不指定 color，讓 Blocksy palette 變數負責) === */
a {
  transition: color .25s ease;
}

/* === 商品卡 hover === */
.woocommerce ul.products li.product img,
.products .product img {
  transition: transform .5s ease;
}
.woocommerce ul.products li.product:hover img,
.products .product:hover img {
  transform: scale(1.02);
}

/* === Entry meta pill (category badge) 修正 ====================
 * Blocksy 預設 pill background = palette-color-1 但 text color
 * 會繼承 link 顏色（也是 color-1）→ 改了 palette 後深底配深字看不見
 * 用 !important 強制白字
 * =================================================================== */
.entry-meta > li[data-type="pill"] a,
ul.entry-meta li.meta-categories a {
  color: var(--theme-palette-color-8) !important;
}

.entry-meta > li[data-type="pill"] a:hover,
ul.entry-meta li.meta-categories a:hover {
  color: var(--theme-palette-color-6) !important;
}

/* === Header site title（黑田媽文字 logo）=========================
 * Phase 3.13：客戶單獨追加 — header image logo 改成純文字「黑田媽」
 * Header 原本報價外。
 *
 * 樣式對齊設計稿 (Tailwind: font-serif text-[22px] tracking-wide text-ink)
 * selector 用 [data-id="logo"] 提高 specificity → 蓋 Blocksy 預設 13px
 *
 * 啟用條件：customizer 後台必須先「手動」把 logo 切成 site title 模式
 *   （見 MIGRATION_CHECKLIST H section）
 *   未切換前這條 CSS 不影響任何東西（.site-title 元素不會 render）。
 * =================================================================== */
.ct-header [data-id="logo"] .site-title,
.ct-header [data-id="logo"] .site-title a {
  font-family: "Noto Serif TC", serif;
  font-size: 22px;
  letter-spacing: 0.025em;
  line-height: 1.4;
  color: var(--kkd-ink);
}

/* === Single product page 修補 =====================================
 * 修兩個 palette 撞色問題：
 *   1. Quantity input + +/- 按鈕 border 預設用 palette-5（被我們重映成 paper）
 *      → 跟頁面背景同色看不見。改用 rule 色。
 *   2. Description / Reviews 兩個 accordion 背景 + border 統一
 * =================================================================== */

/* Quantity 數量區 — input 跟上下箭頭 border 改 rule 色，arrow 改 sumi */
.quantity[data-type="type-1"] {
	--theme-form-field-border-initial-color: var(--kkd-rule);
}
.quantity[data-type="type-1"] input[type="number"] {
	border-color: var(--kkd-rule);
}
/* 上下箭頭：Blocksy 預設沒給 border-width，用 shorthand 強制給 1px solid */
.quantity[data-type="type-1"] .ct-increase,
.quantity[data-type="type-1"] .ct-decrease {
	border: 1px solid var(--kkd-rule);
	color: var(--kkd-sumi);
}

/* Description / Reviews accordion — 統一背景 + border
 * 只在 background-color / background-image 用 !important，因為 Blocksy 把
 * linear-gradient 灌進元素的 inline style="" 屬性，是 cascade 最高層級，
 * selector specificity 再高都贏不了；其他屬性（color/border/padding）都靠
 * specificity 處理，不灑 !important。 */
.woocommerce-tabs .ct-accordion-tab {
	background-color: var(--kkd-paper);
	border-color: var(--kkd-rule);
}
.woocommerce-tabs button.ct-accordion-heading.ct-expandable-trigger {
	background: none !important;                  /* inline gradient 在這層 */
	background-color: var(--kkd-cream) !important;
	color: var(--kkd-ink);
	border-color: var(--kkd-rule);
	padding-left: 24px;
	padding-right: 24px;
}
/* 最後一個 accordion（通常是「評價」）的下框線拿掉
 * 三個位置都可能是兇手 — 用 .product ancestor 提 specificity 到 0,3,X 超越 Blocksy */
.product .woocommerce-tabs .ct-accordion-tab:last-of-type,
.product .woocommerce-tabs .ct-accordion-tab:last-of-type .ct-accordion-heading,
.product .woocommerce-tabs.wc-tabs-wrapper {
	border-bottom: 0;
}

/* === WooCommerce 分頁器 (Phase 3.15) =================================
 * 對齊設計稿（Tailwind classes 翻譯）：
 *   container: flex items-center justify-center gap-4 mt-16 text-[13px] text-ink
 *   arrow:     span.text-inkgray (color #6B6B6B, no border, no padding)
 *   current:   a.px-3.py-1.border.border-ink (padding 4 12, border 1px solid ink)
 *   non-current: a.px-3.py-1.lnk (padding 4 12, color sumi, no border)
 *
 * Blocksy 預設要蓋的：prev/next 是 SVG+中文（用 pseudo 換）、current 有 matcha 填色+白字
 * 套用範圍：shop / 所有 product_cat / search 全部 WC 列表頁
 * =================================================================== */
nav.ct-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	margin-top: 64px;
	margin-bottom: 32px;
	font-family: var(--kkd-font-sans);
	font-size: 13px;
	color: var(--kkd-ink);
}
nav.ct-pagination > .ct-hidden-sm {
	display: inline-flex;
	align-items: center;
	gap: 16px;
}

/* 基底（非當前頁碼）：sumi 色文字、無框、padding 4 12（對齊設計稿 .lnk） */
nav.ct-pagination a.page-numbers,
nav.ct-pagination span.page-numbers {
	font-size: 13px;
	font-weight: 400;
	color: var(--kkd-sumi);
	text-decoration: none;
	background: none;
	background-color: transparent;
	border: 0;
	padding: 4px 12px;
	min-width: auto;
	line-height: 1.5;
	letter-spacing: 0;
}
nav.ct-pagination a.page-numbers:hover {
	color: var(--kkd-matcha);
}

/* 當前頁碼：ink 色細框 + ink 色字（覆寫 sumi 基底）*/
nav.ct-pagination span.page-numbers.current,
nav.ct-pagination a.page-numbers.current {
	border: 1px solid var(--kkd-ink);
	background: none;
	background-color: transparent;
	color: var(--kkd-ink);
	padding: 4px 12px;
}

/* 省略號 dots：sumi 色維持 */
nav.ct-pagination .page-numbers.dots {
	color: var(--kkd-sumi);
}

/* prev / next：隱藏 Blocksy 原本的 SVG + 中文，pseudo 換 ← / →，inkgray 色 */
nav.ct-pagination a.prev,
nav.ct-pagination a.next {
	font-size: 0;
	line-height: 1;
	border: 0;
	background: none;
	background-color: transparent;
	padding: 0;
}
nav.ct-pagination a.prev svg,
nav.ct-pagination a.next svg {
	display: none;
}
nav.ct-pagination a.prev::before,
nav.ct-pagination a.next::after {
	font-size: 13px;
	color: var(--kkd-inkgray);
	line-height: 1;
}
nav.ct-pagination a.prev::before { content: "←"; }
nav.ct-pagination a.next::after  { content: "→"; }
nav.ct-pagination a.prev:hover::before,
nav.ct-pagination a.next:hover::after {
	color: var(--kkd-sumi);
}

/* 購物車格線 */
.woocommerce-cart-form__contents thead th {
    border-bottom: 1px solid var(--theme-palette-color-7);
    padding-bottom: 16px;
}

.woocommerce-cart-form__contents tbody tr.cart_item td {
    border-bottom: 1px solid var(--theme-palette-color-7);
    padding-top: 20px;
    padding-bottom: 20px;
}