/*
Theme Name: Star Equip
Theme URI: https://taiwan-star.com.tw/
Description: 星設備商城子主題。依需求確認表 V2 的視覺與手機版標準：白／深灰＋單一重點色、
             商品圖不裁切以完整保留機身、每頁一個主要動作、390px 不橫向溢出、按鈕至少 44px。
Author: 台灣星科技
Template: astra
Version: 1.0
Text Domain: star-equip
*/

/* ==========================================================================
   設計變數
   品牌定案後只需改 --se-accent 系列三個值，全站跟著換。
   ========================================================================== */
:root {
  --se-ink:        #1A1D21;
  --se-ink-2:      #5A626B;
  --se-ink-3:      #8A929B;
  --se-surface:    #FFFFFF;
  --se-surface-2:  #F4F6F8;
  --se-surface-3:  #E9EDF1;
  --se-border:     #D8DEE4;
  --se-border-2:   #EBEFF3;

  /* STAR178 品牌色。取自 STAR178 星寶品牌展示.png：
     漸層紫端 #9F41F5、藍端 #0154FD、文字標深色 #341B7D。
     --se-accent 取漸層中段，對白底對比 6.38（AA 需 4.5），適合按鈕與連結。 */
  --se-accent:      #4C46E3;
  --se-accent-2:    #3A34C9;
  --se-accent-wash: #EFEEFC;
  --se-brand-1:     #9F41F5;   /* 漸層紫端 */
  --se-brand-2:     #0154FD;   /* 漸層藍端 */
  --se-brand-ink:   #341B7D;   /* 文字標深色，用於標題 */
  --se-brand-grad:  linear-gradient(100deg, var(--se-brand-1), var(--se-brand-2));

  /* 語意色：規格四態與交易狀態共用，三處顏色必須一致 */
  --se-ok:         #1C7A3E;  --se-ok-wash:       #EAF5EE;
  --se-pending:    #8A5A00;  --se-pending-wash:  #FBF3E2;
  --se-optional:   #16477E;  --se-optional-wash: #EDF3FA;
  --se-na:         #6B737B;  --se-na-wash:       #F0F2F4;
  --se-danger:     #9B2C2C;  --se-danger-wash:   #FBEDED;

  --se-tech: "IBM Plex Sans", "Noto Sans TC", -apple-system, "Segoe UI", system-ui, sans-serif;
  --se-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --se-r: 4px;

  /* 字級階梯。B2B 採購看的是資訊密度，不是大字海報，
     所以內文定在 15.5px、行高放寬到 1.85，標題階差小而明確。
     只有首頁主標用 clamp 隨視窗縮放，其餘固定，避免同一頁出現兩套節奏。 */
  --se-fs-hero: clamp(27px, 3.6vw, 36px);
  --se-fs-h1:   clamp(23px, 2.6vw, 29px);
  --se-fs-h2:   20px;
  --se-fs-h3:   16.5px;
  --se-fs-h4:   15px;
  --se-fs-body: 15.5px;
  --se-fs-sm:   13.5px;
  --se-fs-xs:   12px;
  --se-lh-head: 1.38;
  --se-lh-body: 1.85;
  /* 內容欄寬：中文一行約 38 字，超過就不好讀 */
  --se-doc-w:   880px;
}

/* ==========================================================================
   基礎
   ========================================================================== */
body { color: var(--se-ink); background: var(--se-surface); }
.ast-container, .ast-container-fluid { max-width: 1240px; }

h1, h2, h3, h4 { text-wrap: balance; color: var(--se-ink); }
a { color: var(--se-accent); }
a:hover, a:focus { color: var(--se-accent-2); }

:where(a, button, input, select, summary):focus-visible {
  outline: 2px solid var(--se-accent);
  outline-offset: 2px;
}

/* 型號、SKU、規格數字用等寬 —— 型號是這個產業的語言 */
.se-sku, .sku, .woocommerce-product-details__short-description .se-sku {
  font-family: var(--se-mono);
  font-size: .88em;
  letter-spacing: .01em;
  color: var(--se-ink-3);
}
.woocommerce-Price-amount, .se-num {
  font-family: var(--se-tech);
  font-variant-numeric: tabular-nums;
}

/* 文件要求按鈕至少 44px 高 */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .se-btn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  padding: 0 1.25em;
  border-radius: var(--se-r);
  font-weight: 500;
  line-height: 1.2;
}
.woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce #respond input#submit.alt, .se-btn-primary {
  background: var(--se-accent);
  color: #fff;
  border: 1px solid var(--se-accent);
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.se-btn-primary:hover {
  background: var(--se-accent-2);
  border-color: var(--se-accent-2);
  color: #fff;
}
.se-btn-ghost {
  background: transparent;
  color: var(--se-ink);
  border: 1px solid var(--se-border);
}
.se-btn-ghost:hover { background: var(--se-surface-2); color: var(--se-ink); }

/* ==========================================================================
   狀態徽章（規格四態 + 交易狀態）
   ========================================================================== */
.se-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--se-tech);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 2px 8px;
  border-radius: 3px;
  white-space: nowrap;
}
.se-badge--ok       { background: var(--se-ok-wash);       color: var(--se-ok); }
.se-badge--pending  { background: var(--se-pending-wash);  color: var(--se-pending); }
.se-badge--optional { background: var(--se-optional-wash); color: var(--se-optional); }
.se-badge--na       { background: var(--se-na-wash);       color: var(--se-na); }

/* ==========================================================================
   商品圖框 —— 不裁切、比例統一、完整保留機身
   文件：「圖片比例統一，完整保留機器外形」
   WooCommerce 預設 1:1 裁切會把高瘦的販賣機切掉頭尾，所以改成置中縮放。
   ========================================================================== */
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
  aspect-ratio: 4 / 3;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  background: var(--se-surface-3);
  border-radius: 3px;
  padding: 10px;
  margin-bottom: .6em;
}
.woocommerce div.product div.images img {
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--se-surface-3);
  border-radius: 3px;
  padding: 16px;
}
.woocommerce div.product div.images .flex-control-thumbs img {
  aspect-ratio: 1;
  padding: 6px;
}
.se-shot-note {
  font-family: var(--se-tech);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--se-ink-3);
  text-align: center;
  margin-top: 6px;
}

/* ==========================================================================
   商品卡
   ========================================================================== */
.woocommerce ul.products li.product {
  border: 1px solid var(--se-border);
  border-radius: var(--se-r);
  background: var(--se-surface);
  padding: 12px;
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 15.5px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 .25em;
  color: var(--se-ink);
}
.woocommerce ul.products li.product .price {
  font-size: 16px;
  color: var(--se-ink);
  margin: 0;
}
.woocommerce ul.products li.product .button { margin-top: auto; }
.se-card-cat {
  font-family: var(--se-tech);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--se-ink-3);
  margin-bottom: 2px;
}
.se-card-flag { position: absolute; top: 20px; left: 20px; z-index: 2; }
.se-price-quote { color: var(--se-pending); font-weight: 600; font-size: 13.5px; }

/* 舊的角標（mu-plugin 內嵌樣式）交由本主題接管 */
.ts-badge-quote {
  position: absolute; top: 20px; left: 20px; z-index: 2;
  background: var(--se-pending-wash); color: var(--se-pending);
  font-family: var(--se-tech); font-size: 11.5px; font-weight: 600;
  padding: 2px 8px; border-radius: 3px;
}

/* ==========================================================================
   商品頁 —— 每頁一個主要動作
   文件：「每個頁面有一個主要動作；先用途與費用，再展開專業細節」
   ========================================================================== */
.woocommerce div.product .product_title {
  font-size: 26px;
  display: flex;
  align-items: baseline;
  gap: .45em;
  flex-wrap: wrap;
}
.woocommerce div.product form.cart { margin-bottom: 1em; }
.woocommerce div.product form.cart .button { width: 100%; }

/* 次要動作降為文字連結，不與主動作並列 */
.se-secondary-actions {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 1.4em;
  padding: 0;
  list-style: none;
}
.se-secondary-actions a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
}

/* 申請評估提示 */
.ts-trade-state, .se-notice {
  border-left: 3px solid var(--se-pending);
  background: var(--se-pending-wash);
  padding: 13px 15px;
  border-radius: 0 var(--se-r) var(--se-r) 0;
  font-size: 14px;
  line-height: 1.7;
  margin: 1.2em 0;
  color: var(--se-ink);
}
.ts-quote-note {
  border-left: 3px solid var(--se-accent);
  background: var(--se-accent-wash);
  padding: 13px 15px;
  border-radius: 0 var(--se-r) var(--se-r) 0;
}

/* 機台支付能力的警示 —— 文件點名的混淆點 */
.se-pay-warning {
  border-left: 3px solid var(--se-danger);
  background: var(--se-danger-wash);
  color: #5A1A1A;
  padding: 13px 15px;
  border-radius: 0 var(--se-r) var(--se-r) 0;
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 1em;
}

/* ==========================================================================
   費用結構 —— 一次性與每年分列
   ========================================================================== */
.ts-cost-breakdown, .se-cost {
  border: 1px solid var(--se-border);
  border-radius: var(--se-r);
  overflow: hidden;
  font-size: 14px;
}
.se-cost__head {
  padding: 9px 14px;
  background: var(--se-surface-2);
  border-bottom: 1px solid var(--se-border);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
/* ==========================================================================
   規格表 —— 桌面三欄，手機堆疊（文件：390px 不橫向溢出）
   ========================================================================== */
.se-spec-group { margin-top: 1.8em; }
.se-spec-group > h3 { font-size: 16px; margin-bottom: .2em; }
.se-spec-group > .se-spec-hint { font-size: 13px; color: var(--se-ink-3); margin-bottom: .7em; }

.se-spec {
  border: 1px solid var(--se-border);
  border-radius: var(--se-r);
  overflow: hidden;
}
.se-spec__row {
  display: grid;
  grid-template-columns: 190px 88px minmax(0, 1fr);
  border-bottom: 1px solid var(--se-border-2);
}
.se-spec__row:last-child { border-bottom: 0; }
.se-spec__row > * { padding: 9px 14px; min-width: 0; }
.se-spec__k { font-weight: 500; background: var(--se-surface-2); font-size: 14px; }
.se-spec__s { padding-left: 10px; }
.se-spec__v { font-size: 14px; color: var(--se-ink-2); overflow-wrap: anywhere; }

/* WooCommerce 原生屬性表也統一外觀 */
.woocommerce table.shop_attributes {
  border: 1px solid var(--se-border);
  border-radius: var(--se-r);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
  border-bottom: 1px solid var(--se-border-2);
  padding: 9px 14px;
  font-style: normal;
}
.woocommerce table.shop_attributes th { background: var(--se-surface-2); font-weight: 500; width: 190px; }

/* ==========================================================================
   首頁
   ========================================================================== */
/* Astra 的 .site-content .ast-container 是 display:flex（主欄＋側欄並排）。
   自家區塊若也用 ast-container，會被同一條規則命中而變成左右排列，
   所以用獨立的 .se-container，不重用 Astra 的 class。 */
.se-home { flex: 1 1 100%; width: 100%; min-width: 0; }
.se-container { width: 100%; max-width: 1240px; margin-inline: auto; min-width: 0; }

.se-home section { display: block; padding-block: 44px; border-top: 1px solid var(--se-border-2); }
.se-home section:first-child { border-top: 0; }
.se-eyebrow {
  font-family: var(--se-tech);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--se-ink-3);
  font-weight: 600;
  margin-bottom: .5em;
}
.se-sec-title { font-size: 22px; margin-bottom: .2em; }
.se-sec-desc { color: var(--se-ink-2); font-size: 14.5px; max-width: 62ch; margin-bottom: 1.3em; }

.se-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 40px;
  align-items: center;
  padding-block: 48px;
}
.se-hero h1 { font-size: 34px; letter-spacing: -.01em; }
.se-hero__desc { color: var(--se-ink-2); font-size: 16px; margin: .9em 0 1.5em; max-width: 46ch; }
.se-hero__cta { display: flex; gap: 10px; flex-wrap: wrap; }
.se-hero__meta {
  margin-top: 1.5em; padding-top: 1em;
  border-top: 1px solid var(--se-border-2);
  font-size: 13px; color: var(--se-ink-3);
  display: flex; gap: .5em; align-items: center; flex-wrap: wrap;
}
.se-hero__art {
  /* 插圖已經有填色與層次，再加灰底框會變成「圖中圖」，所以留白讓它直接浮在頁面上 */
  padding: 8px 0 0;
  display: grid;
  place-items: center;
}
.se-hero__art svg { max-width: 100%; height: auto; color: var(--se-ink); }

.se-uses { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.se-use {
  border: 1px solid var(--se-border);
  border-radius: var(--se-r);
  padding: 18px;
  display: flex; flex-direction: column; gap: .5em;
  background: var(--se-surface);
  color: var(--se-ink);
}
.se-use:hover { border-color: var(--se-accent); background: var(--se-accent-wash); color: var(--se-ink); }
.se-use__icon { width: 34px; height: 34px; color: var(--se-accent); }
.se-use__name { font-size: 15.5px; font-weight: 700; }
.se-use__desc { font-size: 13.5px; color: var(--se-ink-2); }
.se-use__models { font-family: var(--se-mono); font-size: 11.5px; color: var(--se-ink-3); }

.se-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border: 1px solid var(--se-border);
  border-radius: var(--se-r);
  overflow: hidden;
}
.se-step { padding: 18px; border-right: 1px solid var(--se-border-2); }
.se-step:last-child { border-right: 0; }
.se-step__n { font-family: var(--se-tech); font-size: 12px; font-weight: 600; color: var(--se-accent); letter-spacing: .08em; }
.se-step__t { font-size: 15px; font-weight: 700; margin: .35em 0 .25em; }
.se-step__d { font-size: 13.5px; color: var(--se-ink-2); }

.se-trust { background: var(--se-surface-2); border-top: 1px solid var(--se-border); }
.se-trust__grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  padding-block: 32px;
}
.se-trust__t { font-size: 14.5px; font-weight: 700; margin-bottom: .3em; }
.se-trust__d { font-size: 13.5px; color: var(--se-ink-2); }

/* 營運主體聲明 —— 文件「信任內容」要求 */
.se-operator {
  border-top: 1px solid var(--se-border-2);
  padding-block: 16px;
  font-size: 13px;
  color: var(--se-ink-2);
  display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap;
}
.se-operator b { color: var(--se-ink); }

/* ==========================================================================
   表單（和潤申請、海外報價）
   ========================================================================== */
.ts-app-form { max-width: 720px; }
.ts-app-form label { font-weight: 600; margin-bottom: .25em; display: block; }
.ts-app-form input[type="text"], .ts-app-form input[type="tel"],
.ts-app-form input[type="email"], .ts-app-form input[type="number"],
.ts-app-form select, .ts-app-form textarea {
  width: 100%;
  min-height: 46px;
  padding: .5em .7em;
  border: 1px solid var(--se-border);
  border-radius: var(--se-r);
  background: var(--se-surface);
  color: var(--se-ink);
  font-family: inherit;
  font-size: 15px;
}
.ts-app-form textarea { min-height: 90px; }
.ts-app-form button[type="submit"] { width: 100%; max-width: 320px; }
.ts-app-done {
  padding: 1.4em 1.6em;
  background: var(--se-ok-wash);
  border-left: 4px solid var(--se-ok);
  border-radius: 0 var(--se-r) var(--se-r) 0;
  line-height: 1.9;
}

/* ==========================================================================
   比較表
   ========================================================================== */
.ts-compare-wrap { overflow-x: auto; }
.ts-compare {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 14.5px;
}
.ts-compare th, .ts-compare td { text-align: left; padding: .5em .8em; vertical-align: top; }
.ts-compare thead th { border-bottom: 2px solid var(--se-border); }

/* ==========================================================================
   手機（文件：先測 390px，不橫向溢出）
   ========================================================================== */
@media (max-width: 921px) {
  .se-hero { grid-template-columns: 1fr; gap: 26px; padding-block: 32px; }
  .se-hero h1 { font-size: 27px; }
  .se-step { border-right: 0; border-bottom: 1px solid var(--se-border-2); }
  .se-step:last-child { border-bottom: 0; }
}
@media (max-width: 620px) {
  /* 規格表三欄 → 堆疊，避免橫向溢出 */
  .se-spec__row { grid-template-columns: 1fr; padding: 4px 0; }
  .se-spec__row > * { padding: 4px 14px; }
  .se-spec__k { background: transparent; font-weight: 700; font-size: 13.5px; padding-bottom: 0; }
  .se-spec__s { padding-left: 14px; padding-bottom: 0; }
  .se-spec__v { padding-top: 2px; }

  .woocommerce table.shop_attributes th { width: auto; display: block; border-bottom: 0; }
  .woocommerce table.shop_attributes td { display: block; }

  .woocommerce ul.products[class*="columns-"] li.product { width: 100%; margin-right: 0; }
}

/* ==========================================================================
   深色模式
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --se-ink: #E6EAEE; --se-ink-2: #A7B0B9; --se-ink-3: #7D868F;
    --se-surface: #15181C; --se-surface-2: #1B1F24; --se-surface-3: #232830;
    --se-border: #333A42; --se-border-2: #262C33;
    --se-accent: #A9A2F7; --se-accent-2: #C0BAFA; --se-accent-wash: #1E1C33;
    --se-brand-1: #C08BFA; --se-brand-2: #6E9BFF; --se-brand-ink: #CFC9F5;
    --se-ok: #6FD494; --se-ok-wash: #17291E;
    --se-pending: #E4B254; --se-pending-wash: #2C2416;
    --se-optional: #A9A2F7; --se-optional-wash: #1E1C33;
    --se-na: #99A1A9; --se-na-wash: #22272D;
    --se-danger: #C05252; --se-danger-wash: #2B1718;
    color-scheme: dark;
  }
  :root:not([data-theme="light"]) .se-pay-warning { color: #F0C8C8; }
  :root:not([data-theme="light"]) .woocommerce a.button.alt { color: #0E1116; }
  :root:not([data-theme="light"]) .se-btn-primary { color: #0E1116; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   STAR178 品牌元素
   漸層只用在少數幾處，避免整頁花俏；B2B 採購看的是規格與費用。
   ========================================================================== */
.se-hero h1 { color: var(--se-brand-ink); }
.se-eyebrow { color: var(--se-accent); }

/* hero 下緣一條品牌漸層細線 */
.se-hero { position: relative; }
.se-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--se-brand-grad);
  border-radius: 2px;
}

/* 網站標誌尺寸：橫式鎖定圖，手機自動縮小 */
.site-logo-img img, .custom-logo { max-height: 46px; width: auto; }
@media (max-width: 620px) {
  .site-logo-img img, .custom-logo { max-height: 36px; }
}

/* 頁尾品牌列：直接用品牌展示合成圖，置中 */
.se-footer-brand {
  display: flex;
  justify-content: center;
  padding-block: 26px 10px;
}
/* 合成圖本身已含標誌、星寶與名稱，置中即可，不再各自縮放對齊。
   選擇器一定要兩層：WooCommerce 的 .woocommerce-page img{max-width:100%}
   權重 (0,1,1) 會壓過單一 class 的 (0,1,0)，
   商店頁的頁尾圖就會被撐到整個容器寬。 */
.se-footer .se-footer-brand__lockup {
  height: auto;
  width: 100%;
  max-width: 420px;
}

@media (max-width: 620px) {
  .se-footer-brand { padding-block: 20px 6px; }
  .se-footer .se-footer-brand__lockup { max-width: 300px; }
}

/* 首頁副標與主視覺圖說 */
.se-hero__subtitle {
  font-size: 18px;
  color: var(--se-ink-2);
  margin: .6em 0 0;
  font-weight: 500;
}
.se-hero__art-note {
  font-size: 12px;
  color: var(--se-ink-3);
  text-align: center;
  margin: .8em 0 0;
  line-height: 1.6;
}

/* 廠商合作區（頁尾前） */
.se-supplier {
  background: var(--se-accent-wash);
  border-top: 1px solid var(--se-border-2);
}
.se-supplier__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding-block: 34px;
  flex-wrap: wrap;
}
.se-supplier__in .se-sec-desc { margin-bottom: 0; }
.se-supplier__in .se-btn { flex: 0 0 auto; }

/* 內容頁（關於／廠商合作／客服說明） */
.se-lead { font-size: 17px; color: var(--se-brand-ink); font-weight: 500; margin: .4em 0 .9em; }
.se-note {
  background: var(--se-accent-wash);
  border-left: 3px solid var(--se-accent);
  padding: 12px 15px;
  border-radius: 0 var(--se-r) var(--se-r) 0;
  font-size: 14.5px;
  line-height: 1.8;
}
.se-values { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 1em 0 1.6em; }
.se-value { border: 1px solid var(--se-border); border-radius: var(--se-r); padding: 16px 18px; }
.se-value__t { font-weight: 700; margin-bottom: .35em; color: var(--se-brand-ink); }
.se-value__d { font-size: 14px; color: var(--se-ink-2); line-height: 1.8; }

.se-faq { border: 1px solid var(--se-border); border-radius: var(--se-r); margin-bottom: 8px; }
.se-faq > summary {
  padding: 13px 16px; cursor: pointer; font-weight: 600; list-style: none;
  min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.se-faq > summary::-webkit-details-marker { display: none; }
.se-faq > summary::after { content: "＋"; color: var(--se-accent); font-weight: 400; }
.se-faq[open] > summary::after { content: "−"; }
.se-faq[open] > summary { border-bottom: 1px solid var(--se-border-2); }
.se-faq__a { padding: 13px 16px; font-size: 14.5px; color: var(--se-ink-2); line-height: 1.9; }

/* 頁尾整體置中：品牌圖 → 說明 → 營運主體 → 版權，由上而下一欄 */
.se-footer { text-align: center; padding-bottom: 28px; }
.se-footer-summary { font-size: 14px; color: var(--se-ink-2); margin: 0 auto .6em; line-height: 1.8; max-width: 46em; }
/* 營運主體與版權同一列，窄螢幕才換行 */
.se-footer .se-operator { justify-content: center; gap: 4px 18px; }
.se-footer-copy { color: var(--se-ink-3); white-space: nowrap; }

/* ==========================================================================
   排版系統
   在這之前的區塊各自寫死字級，這裡統一成一套階梯；
   放在檔案最後是為了壓過 Astra 的預設值（兩者權重相同時後者勝）。
   ========================================================================== */
body,
.entry-content,
.woocommerce div.product .woocommerce-tabs .panel {
  font-size: var(--se-fs-body);
  line-height: var(--se-lh-body);
}
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

h1, h2, h3, h4, h5, h6 { line-height: var(--se-lh-head); font-weight: 700; }
.entry-content h2 { font-size: var(--se-fs-h2); margin: 2em 0 .55em; letter-spacing: -.005em; }
.entry-content h3 { font-size: var(--se-fs-h3); margin: 1.7em 0 .45em; }
.entry-content h4 { font-size: var(--se-fs-h4); margin: 1.4em 0 .4em; }
.entry-content > :first-child { margin-top: 0; }
.entry-content p  { margin: 0 0 1.05em; }
.entry-content ul, .entry-content ol { margin: 0 0 1.15em; padding-left: 1.4em; }
.entry-content li { margin-bottom: .4em; }
.entry-content li::marker { color: var(--se-ink-3); }
.entry-content hr { border: 0; border-top: 1px solid var(--se-border-2); margin: 2.2em 0; }
.entry-content strong { font-weight: 700; color: var(--se-ink); }

.se-muted { color: var(--se-ink-2); font-size: var(--se-fs-sm); line-height: 1.85; }
.se-empty { color: var(--se-ink-3); }
.se-tbd   { color: var(--se-pending); font-weight: 600; }

/* ==========================================================================
   文件型頁面的骨架
   需求：整體資料置中，但區塊內的細標題仍靠左。
   作法是把「欄」置中（margin-inline:auto），欄內文字維持靠左，
   不是把文字 text-align:center —— 置中的長段中文很難讀。
   ========================================================================== */
.se-doc-page .entry-header,
.se-doc-page .entry-content {
  max-width: var(--se-doc-w);
  margin-inline: auto;
  width: 100%;
  min-width: 0;
}
.se-doc-page .ast-article-single { padding-block: 10px 56px; }

/* 頁首：標題置中，下方一道短的品牌漸層線當分隔 */
.se-doc-page .entry-header {
  text-align: center;
  padding-bottom: 26px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--se-border-2);
}
.se-doc-page .entry-title {
  font-size: var(--se-fs-h1);
  color: var(--se-brand-ink);
  margin: 0;
  letter-spacing: -.01em;
}
.se-doc-page .entry-header::after {
  content: "";
  display: block;
  width: 44px; height: 3px;
  margin: 16px auto 0;
  background: var(--se-brand-grad);
  border-radius: 2px;
}
/* 內容一律靠左，只有欄本身置中 */
.se-doc-page .entry-content { text-align: left; }

/* ==========================================================================
   提示框：三種語氣共用同一個骨架，只換顏色
   ========================================================================== */
.se-note, .se-note--warn, .se-note--danger {
  border-left: 3px solid var(--se-accent);
  background: var(--se-accent-wash);
  padding: 13px 16px;
  border-radius: 0 var(--se-r) var(--se-r) 0;
  font-size: var(--se-fs-sm);
  line-height: 1.85;
  margin: 1.3em 0;
  color: var(--se-ink);
}
.se-note--warn   { border-left-color: var(--se-pending); background: var(--se-pending-wash); }
.se-note--danger { border-left-color: var(--se-danger);  background: var(--se-danger-wash); }
.se-note p:last-child { margin-bottom: 0; }

/* ==========================================================================
   費用結構表（商品頁）
   ========================================================================== */
.se-cost {
  border: 1px solid var(--se-border);
  border-radius: var(--se-r);
  overflow: hidden;
  margin: 1.3em 0 1.6em;
}
.se-cost__head {
  margin: 0;
  padding: 10px 14px;
  background: var(--se-surface-2);
  border-bottom: 1px solid var(--se-border);
  font-size: var(--se-fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--se-ink-2);
}
.se-cost__head--recurring { border-top: 1px solid var(--se-border); }
.se-cost__table { width: 100%; border-collapse: collapse; margin: 0; font-size: var(--se-fs-sm); }
.se-cost__table th,
.se-cost__table td { padding: 9px 14px; border-bottom: 1px solid var(--se-border-2); }
.se-cost__table th { text-align: left; font-weight: 400; color: var(--se-ink-2); }
.se-cost__table td {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--se-ink);
}
.se-cost__table tr:last-child th,
.se-cost__table tr:last-child td { border-bottom: 0; }
.se-cost__total th,
.se-cost__total td {
  font-weight: 700;
  color: var(--se-ink);
  background: var(--se-surface-2);
  border-top: 1px solid var(--se-border);
}
.se-cost__note {
  margin: 0;
  padding: 11px 14px;
  background: var(--se-accent-wash);
  border-top: 1px solid var(--se-border-2);
  font-size: var(--se-fs-xs);
  line-height: 1.8;
  color: var(--se-ink-2);
}

/* ==========================================================================
   比較表
   ========================================================================== */
.ts-compare-wrap {
  overflow-x: auto;
  margin: 1.3em 0 1em;
  border: 1px solid var(--se-border);
  border-radius: var(--se-r);
}
.ts-compare {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  margin: 0;
  font-size: var(--se-fs-sm);
}
.ts-compare th,
.ts-compare td {
  text-align: left;
  vertical-align: top;
  padding: 11px 14px;
  border-bottom: 1px solid var(--se-border-2);
}
.ts-compare thead th {
  background: var(--se-surface-2);
  border-bottom: 1px solid var(--se-border);
}
.ts-compare__corner,
.ts-compare tbody th { width: 178px; }
.ts-compare tbody th {
  font-weight: 500;
  color: var(--se-ink);
  background: var(--se-surface-2);
}
.ts-compare tbody th small {
  display: block;
  margin-top: 3px;
  font-family: var(--se-tech);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .05em;
  color: var(--se-ink-3);
}
.ts-compare tr.is-recurring th { background: var(--se-optional-wash); }
.ts-compare tr.is-spec th      { background: var(--se-surface); }
.ts-compare__name {
  display: block;
  font-size: var(--se-fs-h4);
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--se-ink);
}
.ts-compare__name:hover { color: var(--se-accent); }
.ts-compare td { font-variant-numeric: tabular-nums; }
.ts-compare__v { display: block; margin-top: 5px; color: var(--se-ink-2); }
.ts-compare__v.is-empty { color: var(--se-ink-3); }
.ts-compare tbody tr:last-child th,
.ts-compare tbody tr:last-child td { border-bottom: 0; }
.ts-compare__cta { margin: 1.2em 0 0; }

/* ==========================================================================
   申請表單（和潤分期、海外報價）
   ========================================================================== */
.se-doc-page .ts-app-form { max-width: 100%; }
.ts-field { margin: 0 0 1.05em; }
.ts-field > label {
  display: block;
  font-size: var(--se-fs-sm);
  font-weight: 600;
  color: var(--se-ink);
  margin-bottom: .4em;
}
.ts-req { color: var(--se-danger); margin-left: .15em; }

.ts-field--check {
  margin: 1.5em 0 1.1em;
  padding: 13px 15px;
  border: 1px solid var(--se-border);
  border-radius: var(--se-r);
  background: var(--se-surface-2);
}
.ts-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--se-fs-sm);
  font-weight: 500;
  line-height: 1.75;
  cursor: pointer;
  margin: 0;
}
.ts-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  margin: .2em 0 0;
  accent-color: var(--se-accent);
}
/* 蜜罐欄位：對使用者與讀屏都不存在，但機器人會填 */
.ts-app-form .ts-hp { position: absolute; left: -9999px; }

.ts-app-form__errors {
  margin: 0 0 1.4em;
  padding: 13px 16px 13px 34px;
  background: var(--se-danger-wash);
  border-left: 3px solid var(--se-danger);
  border-radius: 0 var(--se-r) var(--se-r) 0;
  font-size: var(--se-fs-sm);
  line-height: 1.85;
}
.ts-app-form__errors li { margin-bottom: .25em; }
.ts-app-form__disclaimer {
  font-size: var(--se-fs-xs);
  color: var(--se-ink-3);
  line-height: 1.85;
  margin: 1.1em 0 1.5em;
}
.ts-app-done__t { margin: 0 0 .5em; font-size: var(--se-fs-h3); }
.ts-app-done p  { margin: .3em 0; font-size: var(--se-fs-sm); }

/* ==========================================================================
   規格分頁
   ========================================================================== */
.se-spec__group { font-size: var(--se-fs-h3); margin: 1.9em 0 .35em; }
.se-spec__group:first-of-type { margin-top: 1.2em; }
.woocommerce table.shop_attributes.se-spec-table { width: 100%; margin-bottom: 1em; }
.se-spec-table .se-spec__state { width: 92px; white-space: nowrap; }

/* ==========================================================================
   窄螢幕（文件：先測 390px，不橫向溢出）
   ========================================================================== */
@media (max-width: 782px) {
  :root { --se-fs-h2: 18.5px; --se-fs-h3: 16px; }
  .se-doc-page .ast-article-single { padding-block: 6px 40px; }
  .se-doc-page .entry-header { padding-bottom: 20px; margin-bottom: 24px; }
}
@media (max-width: 620px) {
  .se-cost__table th, .se-cost__table td { padding: 8px 12px; }
  .se-spec-table .se-spec__state { width: auto; }
}

/* ==========================================================================
   申請表單的導言、欄位提示與說明卡
   ========================================================================== */
.ts-app-intro { font-size: var(--se-fs-body); color: var(--se-ink-2); line-height: 1.9; margin: 0 0 1.1em; }
.ts-hint { display: block; font-size: var(--se-fs-xs); color: var(--se-ink-3); line-height: 1.6; margin: -.15em 0 .45em; }

.ts-app-notices { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin: 1.2em 0 1.6em; }
.ts-app-notice { border: 1px solid var(--se-border); border-radius: var(--se-r); padding: 14px 16px; }
.ts-app-notice__t { font-weight: 700; font-size: var(--se-fs-h4); margin-bottom: .35em; color: var(--se-brand-ink); }
.ts-app-notice__d { font-size: var(--se-fs-sm); color: var(--se-ink-2); line-height: 1.85; }

/* 比較表下方：台灣與海外兩個分開的入口並排 */
.ts-compare__cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.3em 0 0; }

/* 費用表列名下的小註（例如「標準配置必付；加購功能另計」） */
.se-cost__table th small {
  display: block; margin-top: 3px;
  font-size: 11px; font-weight: 400; line-height: 1.5;
  color: var(--se-ink-3);
}

/* 佔位圖：原本樣式寫在 PHP 的 inline style，移到這裡才吃得到設計變數與深色模式 */
.se-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--se-surface-3);
  border-radius: 3px;
  padding: 10px;
  color: var(--se-ink);
}

/* ==========================================================================
   型錄頁的搜尋、卡片動作、頁尾連結列
   ========================================================================== */
.se-catalog-search { display: flex; gap: 8px; margin: 0 0 18px; flex-wrap: wrap; }
.se-catalog-search input[type="search"] {
  flex: 1 1 240px; min-width: 0; min-height: 46px;
  padding: .5em .8em;
  border: 1px solid var(--se-border); border-radius: var(--se-r);
  background: var(--se-surface); color: var(--se-ink);
  font-family: inherit; font-size: var(--se-fs-sm);
}
.se-catalog-search .se-btn { flex: 0 0 auto; }

.se-card-cta { display: inline-flex; align-items: center; min-height: 40px; margin-top: auto; font-size: var(--se-fs-sm); font-weight: 500; }

.se-footer-links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px 0;
  padding-block: 4px 14px;
  font-size: var(--se-fs-sm);
}
.se-footer-links a { color: var(--se-ink-2); padding: 0 12px; line-height: 1.5; }
.se-footer-links a:hover { color: var(--se-accent); }
.se-footer-links a + a { border-left: 1px solid var(--se-border-2); }
@media (max-width: 620px) {
  .se-footer-links a { padding: 0 9px; }
}

/* ==========================================================================
   首屏主視覺：設備陣列 + 星寶
   ========================================================================== */
.se-hero__scene { position: relative; width: 100%; max-width: 440px; }
.se-hero__scene-svg { display: block; width: 100%; height: auto; }
/* 星寶站在前排右側，壓住冷凍櫃一角做出前後層次 */
.se-hero__mascot {
  position: absolute;
  right: 0;
  bottom: 1.5%;
  width: 27%;          /* 再大就會把後面的冷凍櫃整台擋掉 */
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(52, 27, 125, .18));
}
@media (max-width: 921px) {
  .se-hero__scene { max-width: 380px; margin-inline: auto; }
}
@media (max-width: 420px) {
  .se-hero__mascot { width: 32%; right: 0; }
}

/* ==========================================================================
   政策頁：草稿提示與待填標記
   ========================================================================== */
.se-draft-banner {
  border: 1px solid var(--se-pending);
  border-left-width: 4px;
  background: var(--se-pending-wash);
  color: var(--se-ink);
  padding: 14px 16px;
  border-radius: 0 var(--se-r) var(--se-r) 0;
  font-size: var(--se-fs-sm);
  line-height: 1.85;
  margin: 0 0 1.8em;
}
.se-todo {
  background: #FFF2B2;
  color: #5A4400;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
  font-size: .95em;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .se-todo { background: #4A3C00; color: #FFE89A; }
}
/* 政策頁的表格：左欄當標題欄 */
.se-doc-page .entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0 1.4em;
  font-size: var(--se-fs-sm);
}
.se-doc-page .entry-content table th,
.se-doc-page .entry-content table td {
  border: 1px solid var(--se-border-2);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  line-height: 1.85;
}
.se-doc-page .entry-content table th {
  background: var(--se-surface-2);
  font-weight: 600;
  width: 32%;
}
@media (max-width: 620px) {
  .se-doc-page .entry-content table th,
  .se-doc-page .entry-content table td { display: block; width: auto; border-bottom: 0; }
  .se-doc-page .entry-content table tr { display: block; border-bottom: 1px solid var(--se-border); }
}