/* ==================================================================
   brand.css — 每個品牌站唯一需要修改的樣式檔
   ------------------------------------------------------------------
   規則：只在這裡改「值」，不要在這裡加新的選擇器。
   需要新的版面規則時寫進 shared.css（所有品牌共用）。
   ================================================================== */

:root {
  /* --- 品牌色 ------------------------------------------------ */
  --brand-primary:        #FF9422;
  --brand-primary-dark:   #D87914;
  --brand-secondary:      #000000;
  --brand-accent:         #000000;

  /* 主色上面的文字顏色。淺色主色（黃、橘、亮綠）務必設 #000000，
     否則白字對比不足會看不清楚，也過不了無障礙標準。 */
  --brand-on-primary:     #000000;
  --brand-on-secondary:   #FFFFFF;

  /* --- 中性色（多數品牌不用改） ------------------------------ */
  --brand-text:           #1f2328;
  --brand-text-muted:     #6b7280;
  --brand-border:         #e5e7eb;
  --brand-bg:             #ffffff;
  --brand-bg-alt:         #f7f8fa;

  /* --- 狀態色 ------------------------------------------------ */
  --brand-success:        #1a8754;
  --brand-danger:         #d13438;
  --brand-sale:           #000000;
  --brand-on-sale:        #FFFFFF;

  /* --- 連結 --------------------------------------------------- */
  /* 預設用內文色，主色只在 hover 出現 —— 主色是「點綴」不是「底色」。
     商品標題、分類清單、側欄全都是 <a>，一旦上主色整頁就會被染滿。
     想讓連結一眼可見的品牌，把 --brand-link 改成 var(--brand-primary-dark)。 */
  --brand-link:           var(--brand-text);
  --brand-link-hover:     var(--brand-primary-dark);

  /* --- 價格 --------------------------------------------------- */
  /* 一般價、特價、被劃掉的原價，三種都吃這兩個變數。
     想讓價格跳出來的品牌可以把 --brand-price 換成 var(--brand-primary-dark)；
     想讓原價退到背景，把 --brand-price-old 換成 var(--brand-text-muted)。 */
  --brand-price:          var(--brand-text);
  --brand-price-old:      var(--brand-text);

  /* --- 字型 -------------------------------------------------- */
  --brand-font-body:      'Noto Sans TC', -apple-system, sans-serif;
  --brand-font-heading:   'Noto Sans TC', -apple-system, sans-serif;

  /* --- 圓角與間距（控制整體調性：0 = 硬派，8px+ = 親和） ----- */
  --brand-radius:         2px;
  --brand-radius-lg:      calc(var(--brand-radius) * 2);
  --brand-section-gap:    60px;
}

/* ------------------------------------------------------------------
   以下是把上面的變數接到 Flatsome / WooCommerce 元件上。
   複製到新品牌時「不要動」這一段 — 改上面的變數就好。
   注意：Header/主色也請同步在 Flatsome → Theme Options 設一次，
   因為 Flatsome 會把主色寫進 inline <style>，兩邊一致才不會打架。
   ------------------------------------------------------------------ */

body,
.nav > li > a,
.woocommerce-checkout {
  font-family: var(--brand-font-body);
  color: var(--brand-text);
}

h1, h2, h3, h4, h5, h6,
.heading-font,
.section-title {
  font-family: var(--brand-font-heading);
}

a { color: var(--brand-link); }
a:hover { color: var(--brand-link-hover); }

/* 按鈕 */
.button.primary:not(.is-outline),
button.primary:not(.is-outline),
input[type="submit"].primary,
.woocommerce .button.alt,
.single_add_to_cart_button {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-on-primary);
  border-radius: var(--brand-radius);
}

.button.primary:hover,
button.primary:hover,
.woocommerce .button.alt:hover,
.single_add_to_cart_button:hover {
  background-color: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
  color: var(--brand-on-primary);
}

.button.secondary,
button.secondary {
  background-color: var(--brand-secondary);
  border-color: var(--brand-secondary);
  color: var(--brand-on-secondary);
  border-radius: var(--brand-radius);
}

.button.is-outline {
  border-radius: var(--brand-radius);
}

/* 外框按鈕
   ------------------------------------------------------------------
   Flatsome 用 .is-outline 表示「透明底 + 主色外框」，是次要按鈕。
   但 .button.is-outline{background:transparent} 和上面那條 .button.primary
   權重相同 (0,2,0)，而子主題載入在後 —— 平手時後者贏，外框按鈕就被填成實心，
   跟主要按鈕搶主從關係。所以主要按鈕那條要排除 .is-outline，這裡再補回外框樣式。

   文字用 inherit：深色區塊裡父層是白字就跟著白，淺色區塊就跟著深色，
   不必為每種底色各寫一條。 */
.button.primary.is-outline,
button.primary.is-outline {
  background-color: transparent;
  border-color: var(--brand-primary);
  color: inherit;
}

/* 價格
   ------------------------------------------------------------------
   Flatsome 在 flatsome-shop.css 寫了 span.amount{color:#111}，權重是 (0,1,1)。
   一般商品的金額是 .price 的直接子層，被 .price > .amount (0,2,0) 蓋掉；
   特價商品多包了一層 <ins>/<del>，那條就選不到，於是只剩 #111 生效 ——
   同一頁上就會出現「一般商品橘色、特價商品黑色」兩種價格。
   所以這裡一律用 .price span.amount (0,2,1) 把三種情況一次收齊。 */
.price,
.price ins,
.price .amount,
.price span.amount,
.product_list_widget .amount,
.woocommerce-Price-amount {
  color: var(--brand-price);
}

.price del,
.price del .amount,
.price del span.amount,
.product_list_widget del .amount {
  color: var(--brand-price-old);
}

/* 深色區塊裡的價格
   ------------------------------------------------------------------
   價格改成內文色（近黑）之後，首頁那些黑底區塊上的價格會變成
   #1f2328 疊在 #000 上 —— 對比約 1.5:1，等於看不見。
   Flatsome 會給深色區塊加上 .dark，這裡讓價格回去繼承父層的文字色，
   白底就是深色字、黑底就是白字，不用為每個區塊各寫一條。
   權重要壓過上面的 .price span.amount (0,2,1)，所以是 (0,3,1)。 */
.dark .price,
.dark .price ins,
.dark .price del,
.dark .price .amount,
.dark .price span.amount,
.dark .price del .amount,
.dark .price del span.amount,
.dark .product_list_widget .amount {
  color: inherit;
}

/* 商品標籤顏色（尺寸與排列在 shared.css）
   ------------------------------------------------------------------
   NEW 用主色、折扣用 accent，兩者刻意不同色，一眼分得出誰是誰。 */
.badge-container .badge.callout .badge-inner.on-sale,
span.onsale {
  background-color: var(--brand-sale);
  color: var(--brand-on-sale);
}

.badge-container .badge.callout .badge-inner.new-bubble-auto,
.badge-container .badge.callout .badge-inner.new-bubble {
  background-color: var(--brand-primary);
  color: var(--brand-on-primary);
}

/* 表單 */
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="search"], input[type="number"],
select, textarea {
  border-radius: var(--brand-radius);
  border-color: var(--brand-border);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 20%, transparent);
}

/* 卡片 / 區塊 */
.box-image img,
.col-inner > .img,
.product-small .box-image {
  border-radius: var(--brand-radius);
}

.section-alt,
.row-bg-alt {
  background-color: var(--brand-bg-alt);
}

/* 結帳流程強調色 */
.woocommerce-info,
.woocommerce-message {
  border-top-color: var(--brand-primary);
}

/* 行動版 */
@media only screen and (max-width: 48em) {
  :root { --brand-section-gap: 36px; }
}

.button.primary.is-outline:hover,
button.primary.is-outline:hover {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-on-primary);
}

/* === 字級節奏（自 brand-kit brand.css 同步）=== */
:root {
  /* 字級節奏 ------------------------------------------------------
     h1 大而粗、h2 中等字重（斯文的關鍵）、h3 小而粗、內文 400、
     小標籤靠 11–12px + 700 做層次。中文筆畫密，內文手機不低於 14。 */
  --brand-fs-h1:      48px;
  --brand-fs-h1-sm:   32px;
  --brand-fs-h2:      22px;
  --brand-fs-h3:      15px;
  --brand-fs-body:    15px;
  --brand-fs-body-sm: 14px;
  --brand-fs-label:   11px;
  --brand-fw-h1:      700;
  --brand-fw-h2:      500;
  --brand-fw-h3:      700;
  --brand-fw-body:    400;
  --brand-fw-label:   700;
}

/* 字級節奏 —— 套用
   ------------------------------------------------------------------
   Flatsome 的 h1–h3 用 em 相對 body（h2 約 1.6em 粗體），和「h2 中等字重」
   的節奏衝突，所以這裡用 html 前綴同樣把權重拉到 (0,0,2) 直接指定 px。
   .section-title 是 Flatsome [title] 簡碼、.product-title 是商品卡標題。 */
html body { font-size: var(--brand-fs-body); font-weight: var(--brand-fw-body); line-height: 1.7; }

html h1 { font-size: var(--brand-fs-h1); font-weight: var(--brand-fw-h1); line-height: 1.15; letter-spacing: -.01em; }
html h2,
html .section-title span { font-size: var(--brand-fs-h2); font-weight: var(--brand-fw-h2); line-height: 1.35; }
html h3,
html .product-small .product-title,
html .product-small .product-title a { font-size: var(--brand-fs-h3); font-weight: var(--brand-fw-h3); line-height: 1.4; }
html h4, html h5, html h6 { font-weight: var(--brand-fw-h3); }

/* 小標籤：商品徽章、eyebrow、分類 chip */
html .badge-inner,
html .bk-eyebrow,
html .product-small .category { font-size: var(--brand-fs-label); font-weight: var(--brand-fw-label); letter-spacing: .06em; }

@media only screen and (max-width: 48em) {
  html body { font-size: var(--brand-fs-body-sm); }
  html h1 { font-size: var(--brand-fs-h1-sm); }
}

a { color: var(--brand-link); }
a:hover { color: var(--brand-link-hover); }