/*
Theme Name: STAR988 星再發
Theme URI: https://star988.setdomains.work/
Description: 星再發 STAR988 中古無人自助設備電子商城子主題。配色與尺度依交付包 design-tokens.json。
Author: 台灣星科技
Template: astra
Version: 1.0
Text Domain: star988
*/

/* ============================================================================
   設計變數 —— 全部來自交付包 design-tokens.json（B01–B09）
   換品牌色只改這一區。
   ========================================================================= */
:root {
  --s9-forest:  #1C6B50;   /* B01 主色／按鈕／鏈接 */
  --s9-sage:    #A6DCBB;   /* B02 輔色／角色／標籤背景 */
  --s9-cream:   #F4F0E6;   /* B03 頁面與英雄背景 */
  --s9-ink:     #17382B;   /* B04 主要文字 */
  --s9-muted:   #52665B;   /* B05 次要文字 */
  --s9-white:   #FFFFFF;   /* B06 卡片／表單底 */
  --s9-line:    #D8E4DC;   /* B07 1px 分線 */
  --s9-danger:  #B23B32;   /* B08 錯誤與停止 */
  --s9-pending: #805815;   /* B09 待補件／保留中 */

  /* 森林綠的深／淺變體：hover 與焦點環用，避免每處各自調色 */
  --s9-forest-dark: #15523D;
  --s9-sage-soft:   #E4F2EA;

  --s9-radius-card:   20px;
  --s9-radius-button: 12px;
  --s9-radius-input:  12px;

  --s9-sp-1: 8px;  --s9-sp-2: 16px; --s9-sp-3: 24px;
  --s9-sp-4: 32px; --s9-sp-5: 48px; --s9-sp-6: 64px;

  --s9-max:   1200px;
  --s9-touch: 44px;        /* A18 最小點擊區域 */

  --s9-font: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --s9-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ============================================================================
   基礎
   ========================================================================= */
body { font-family: var(--s9-font); color: var(--s9-ink); background: var(--s9-white); }
body, p, li, td { font-size: 16px; line-height: 1.75; }
h1, h2, h3, h4 { color: var(--s9-ink); font-weight: 700; line-height: 1.3; }

a { color: var(--s9-forest); text-underline-offset: 3px; }
a:hover, a:focus { color: var(--s9-forest-dark); text-decoration: underline; }

/* A18：焦點必須清楚。Astra 會把 outline 拿掉，這裡補回來。 */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--s9-forest);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 容器：不可重用 Astra 的 .ast-container——它用那個 class 做
   「主欄＋側欄並排 display:flex」，自家區塊套上去會被同一條規則命中變成左右排列。 */
.s9-container { width: 100%; max-width: var(--s9-max); margin-inline: auto; padding-inline: 16px; }
@media (min-width: 768px) { .s9-container { padding-inline: 24px; } }

.s9-section { padding-block: var(--s9-sp-5); }
.s9-section--cream { background: var(--s9-cream); }
.s9-section__title { font-size: clamp(22px, 3vw, 30px); margin: 0 0 var(--s9-sp-2); }
.s9-section__lead  { color: var(--s9-muted); max-width: 62ch; margin: 0 0 var(--s9-sp-3); }

/* ============================================================================
   按鈕
   A19：綠底一律白字；禁止白字放淺綠（鼠尾草只能配深色字）。
   ========================================================================= */
.s9-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--s9-touch); padding: 10px 22px;
  border-radius: var(--s9-radius-button);
  font-weight: 700; text-decoration: none; border: 2px solid transparent;
  cursor: pointer;
}
.s9-btn--primary { background: var(--s9-forest); color: var(--s9-white); }
.s9-btn--primary:hover, .s9-btn--primary:focus { background: var(--s9-forest-dark); color: var(--s9-white); text-decoration: none; }
.s9-btn--secondary { background: transparent; color: var(--s9-forest); border-color: var(--s9-forest); }
.s9-btn--secondary:hover, .s9-btn--secondary:focus { background: var(--s9-sage-soft); color: var(--s9-forest-dark); text-decoration: none; }
.s9-btn[aria-disabled="true"], .s9-btn:disabled {
  background: var(--s9-line); color: var(--s9-muted); border-color: transparent; cursor: not-allowed;
}
.s9-btn-row { display: flex; flex-wrap: wrap; gap: var(--s9-sp-2); align-items: center; }

/* ============================================================================
   狀態標籤
   A19：狀態一律「顏色＋文字」，不可只靠顏色分辨。
   ========================================================================= */
.s9-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 700; line-height: 1.6;
  background: var(--s9-sage); color: var(--s9-ink);
}
.s9-tag--ok      { background: var(--s9-sage);   color: var(--s9-ink); }
.s9-tag--hold    { background: #F6E7C4;          color: var(--s9-pending); }
.s9-tag--stop    { background: #F6DCDA;          color: var(--s9-danger); }
.s9-tag--neutral { background: var(--s9-line);   color: var(--s9-muted); }
.s9-tag-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* ============================================================================
   首頁
   ========================================================================= */
.s9-hero { background: var(--s9-cream); padding-block: var(--s9-sp-5); }
.s9-hero__grid { display: grid; gap: var(--s9-sp-3); align-items: center; }
@media (min-width: 1024px) { .s9-hero__grid { grid-template-columns: 1fr 1fr; gap: var(--s9-sp-5); } }
.s9-hero__title { font-size: clamp(28px, 4.4vw, 46px); margin: 0 0 var(--s9-sp-2); }
.s9-hero__lead  { font-size: 17px; color: var(--s9-muted); margin: 0 0 var(--s9-sp-3); }
.s9-hero__points { display: flex; flex-wrap: wrap; gap: var(--s9-sp-1) var(--s9-sp-2); margin: 0 0 var(--s9-sp-3); padding: 0; list-style: none; }
.s9-hero__points li { font-weight: 700; color: var(--s9-forest); }
/* 兩版主視覺都不得裁掉臉、星芽與設備（A02）→ 一律 contain，不用 cover。 */
.s9-hero .s9-hero__art img { width: 100%; height: auto; display: block; border-radius: var(--s9-radius-card); object-fit: contain; }
.s9-hero__art--mobile  { display: block; }
.s9-hero__art--desktop { display: none; }
@media (min-width: 1024px) {
  .s9-hero__art--mobile  { display: none; }
  .s9-hero__art--desktop { display: block; }
}

.s9-search { display: flex; gap: var(--s9-sp-1); max-width: 560px; }
.s9-search input[type="search"] {
  flex: 1; min-height: var(--s9-touch);
  border: 1px solid var(--s9-line); border-radius: var(--s9-radius-input);
  padding: 8px 14px; background: var(--s9-white); color: var(--s9-ink); font-size: 16px;
}

/* 卡片 */
.s9-cards { display: grid; gap: var(--s9-sp-3); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .s9-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .s9-cards--3 { grid-template-columns: repeat(3, 1fr); } }
.s9-card {
  background: var(--s9-white); border: 1px solid var(--s9-line);
  border-radius: var(--s9-radius-card); padding: var(--s9-sp-3);
  display: flex; flex-direction: column; gap: var(--s9-sp-1);
}
.s9-card h3 { margin: 0; font-size: 19px; }
.s9-card p  { margin: 0; color: var(--s9-muted); }
.s9-card__foot { margin-top: auto; padding-top: var(--s9-sp-2); }

/* 說明用的雙欄區塊（檢驗、接手、賣方） */
.s9-split { display: grid; gap: var(--s9-sp-3); align-items: center; }
@media (min-width: 768px) { .s9-split { grid-template-columns: 1fr 260px; gap: var(--s9-sp-5); } }
@media (min-width: 768px) { .s9-split--left { grid-template-columns: 260px 1fr; } }
/* Astra 的 .woocommerce-page img{max-width:100%} 權重 (0,1,1) 會壓過單一 class，
   自訂圖樣式一律寫兩層選擇器。 */
.s9-split .s9-split__art img,
.s9-section .s9-split__art img { width: 100%; max-width: 240px; height: auto; display: block; margin-inline: auto; }

/* ============================================================================
   設備列表篩選器
   ========================================================================= */
.s9-filters { margin-block: var(--s9-sp-2) var(--s9-sp-3); }

.s9-filters__active { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s9-sp-1); margin-bottom: var(--s9-sp-2); }
.s9-filters__active-label { font-weight: 700; font-size: 14px; color: var(--s9-muted); }

/* 已選條件的膠囊。整顆就是「移除這個條件」的按鈕，所以要有完整點擊區。 */
.s9-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 4px 12px;
  border-radius: 999px; background: var(--s9-sage); color: var(--s9-ink);
  font-size: 14px; font-weight: 700; text-decoration: none;
}
.s9-chip:hover, .s9-chip:focus { background: var(--s9-forest); color: var(--s9-white); text-decoration: none; }
.s9-filters__clear { font-size: 14px; font-weight: 700; }

.s9-filters__drawer {
  border: 1px solid var(--s9-line); border-radius: var(--s9-radius-card);
  padding: 0 var(--s9-sp-2) var(--s9-sp-2);
}
.s9-filters__drawer > summary {
  min-height: var(--s9-touch); display: flex; align-items: center;
  font-weight: 700; cursor: pointer; padding-block: var(--s9-sp-1);
  list-style: revert;
}
.s9-filters__grid { display: grid; gap: var(--s9-sp-3); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .s9-filters__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .s9-filters__grid { grid-template-columns: repeat(4, 1fr); } }

.s9-filters__group h3 { font-size: 15px; margin: 0 0 var(--s9-sp-1); color: var(--s9-muted); }
.s9-filters__group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.s9-filters__group a {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  min-height: var(--s9-touch);          /* A18：44px 點擊區 */
  padding: 4px 10px; border-radius: var(--s9-radius-input);
  text-decoration: none; color: var(--s9-ink); font-size: 15px;
}
.s9-filters__group a:hover, .s9-filters__group a:focus { background: var(--s9-sage-soft); text-decoration: none; }
/* 已選中：綠底白字。不可反過來用白字放淺綠（A19）。 */
.s9-filters__group a.is-on { background: var(--s9-forest); color: var(--s9-white); font-weight: 700; }
.s9-filters__group a.is-on .s9-filters__count { color: var(--s9-white); }
.s9-filters__count { font-size: 13px; color: var(--s9-muted); font-variant-numeric: tabular-nums; }

.s9-filters__price { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.s9-filters__price input[type="number"] {
  width: 96px; min-height: var(--s9-touch);
  border: 1px solid var(--s9-line); border-radius: var(--s9-radius-input);
  padding: 6px 10px; font-size: 16px;   /* 16px 以下 iOS 會自動放大整頁 */
}
.s9-filters__price .s9-btn { padding-inline: 16px; }

/* ============================================================================
   規格表（商品詳情）
   ========================================================================= */
.s9-specs { width: 100%; border-collapse: collapse; margin-block: var(--s9-sp-2); }
.s9-specs th, .s9-specs td { border-bottom: 1px solid var(--s9-line); padding: 10px 12px; text-align: left; vertical-align: top; }
.s9-specs th { width: 34%; color: var(--s9-muted); font-weight: 700; background: var(--s9-cream); }
.s9-specs td.is-unknown { color: var(--s9-muted); }
.s9-specs .s9-mono { font-family: var(--s9-mono); }
.s9-specs caption { text-align: left; font-weight: 700; padding-block: var(--s9-sp-1); }
@media (max-width: 620px) {
  .s9-specs, .s9-specs tbody, .s9-specs tr, .s9-specs th, .s9-specs td { display: block; width: auto; }
  .s9-specs th { border-bottom: 0; padding-bottom: 0; background: transparent; }
  .s9-specs td { padding-top: 2px; }
}

/* 關鍵限制必須放在購買按鈕之前（W029） */
.s9-notice {
  border: 1px solid var(--s9-line); border-left: 4px solid var(--s9-forest);
  border-radius: var(--s9-radius-input); padding: var(--s9-sp-2);
  background: var(--s9-sage-soft); margin-block: var(--s9-sp-2);
}
.s9-notice--stop    { border-left-color: var(--s9-danger);  background: #FBF0EF; }
.s9-notice--pending { border-left-color: var(--s9-pending); background: #FBF4E6; }
.s9-notice p:last-child { margin-bottom: 0; }
.s9-notice__title { font-weight: 700; margin: 0 0 4px; }

/* 證據入口（報告／影片／照片） */
.s9-evidence { display: flex; flex-wrap: wrap; gap: var(--s9-sp-1); margin-block: var(--s9-sp-2); }

/* ============================================================================
   表單（出售送件／海外詢價／聯絡）
   ========================================================================= */
.s9-form { display: grid; gap: var(--s9-sp-2); max-width: 720px; }
.s9-field { display: grid; gap: 6px; }
.s9-field label { font-weight: 700; }
.s9-field .s9-hint { color: var(--s9-muted); font-size: 14px; }
.s9-form input[type="text"], .s9-form input[type="email"], .s9-form input[type="tel"],
.s9-form input[type="number"], .s9-form input[type="url"], .s9-form select, .s9-form textarea {
  min-height: var(--s9-touch); width: 100%;
  border: 1px solid var(--s9-line); border-radius: var(--s9-radius-input);
  padding: 10px 14px; background: var(--s9-white); color: var(--s9-ink); font-family: inherit; font-size: 16px;
}
.s9-form textarea { min-height: 120px; resize: vertical; }
.s9-field--error input, .s9-field--error select, .s9-field--error textarea { border-color: var(--s9-danger); }
.s9-field__error { color: var(--s9-danger); font-weight: 700; font-size: 14px; }
.s9-form__required { color: var(--s9-danger); }
/* 蜜罐：給機器人看的欄位。不能用 display:none（有些機器人會跳過不可見欄位），用離屏。 */
.s9-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================================
   頁尾品牌列
   ========================================================================= */
.s9-footer-brand { background: var(--s9-cream); padding-block: var(--s9-sp-3); }
.s9-footer-brand__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s9-sp-2); }
.s9-footer-brand img.s9-footer-logo   { width: 210px; height: auto; display: block; }
.s9-footer-brand img.s9-footer-mascot { width: 92px;  height: auto; display: block; }
.s9-footer-brand__copy { color: var(--s9-muted); font-size: 14px; }
@media (max-width: 480px) { .s9-footer-brand img.s9-footer-logo { width: 170px; } }

/* ============================================================================
   A18：任何斷點都不得出現橫向溢出
   ========================================================================= */
html, body { overflow-x: hidden; }
img, video, table { max-width: 100%; }