/* ==========================================================================
   找風問幸福 × EasyStore（Aroma / Venice 主題）— theme-overrides.css
   --------------------------------------------------------------------------
   ▸ 用途：集中覆寫層。不要逐行改 base.css / component-*.css，全部蓋在這裡。
   ▸ 載入：layout/theme.liquid 的 </body> 前最後載入（晚於延遲載入的 component CSS）。
   ▸ 前提：主題設定（settings_data.json）已套換皮 diff。
   ▸ 本檔為 Design handoff 草稿的工程修正版（2026-06-12 對賬）：
     - [修正] 輸入框：Aroma 用 box-shadow 畫框線（border:0），改蓋 box-shadow 而非 border
     - [修正] 商品圖庫：實站是 slider-component/.product__media-item（無 splide、無縮圖列），
       縮圖規則無對應 DOM 已移除
     - [修正] 商品資訊卡：吃 wrapper_bg_color 的元素是 .product-wrapper_color（已有 radius 20）
   ▸ 完整視覺規格見 mockup：找風問幸福 × EasyStore 換皮定稿.dc.html
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 品牌 token（值來源：找風問幸福 design system tokens/）
   -------------------------------------------------------------------------- */
:root {
  /* 米色紙感 */
  --zf-rice-50: #FBF8F3;   /* 頁面底 */
  --zf-rice-100: #F6EFE6;  /* 沉底區／頁尾 */
  --zf-paper: #FFFDF8;     /* 卡片、輸入框 */
  --zf-hairline: #EEE4D6;  /* 分隔線 */
  --zf-border: #E2D4C1;    /* 輸入框邊線 */

  /* 乾燥玫瑰 */
  --zf-rose-300: #D2A099;  /* 外框按鈕邊線、hover 框 */
  --zf-rose-400: #C18C84;  /* 主色點綴：選中 chip、目前分頁、focus 框 */
  --zf-rose-500: #AC7167;  /* 按鈕填色（= colors_accent_1） */
  --zf-rose-600: #8F574E;  /* hover/press、玫瑰文字級、鏈結 */
  --zf-rose-tint: #F8EAE5; /* 標籤底、hover 染色 */

  /* 暖墨文字 */
  --zf-ink-900: #2E2823;
  --zf-ink-700: #4A4038;
  --zf-ink-500: #6E6359;
  --zf-ink-400: #948A7E;

  /* 功能色（保持溫和） */
  --zf-positive: #7A8866;
  --zf-caution: #A88C5C;
  --zf-critical: #B5675C;  /* 售完／錯誤／特價字。不用正紅 */

  /* 焦點光圈 */
  --zf-focus: rgba(193, 140, 132, 0.45);

  /* 圓角階 */
  --zf-radius-card: 20px;
  --zf-radius-input: 14px;
  --zf-radius-thumb: 12px;
  --zf-radius-pill: 999px;

  /* 暖陰影（禁灰黑硬陰影） */
  --zf-shadow-sm: 0 1px 2px rgba(70, 52, 40, 0.04), 0 2px 6px rgba(70, 52, 40, 0.05);
  --zf-shadow-md: 0 2px 6px rgba(70, 52, 40, 0.05), 0 8px 24px rgba(70, 52, 40, 0.07);

  /* 動態 */
  --zf-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --zf-dur-fast: 140ms;
  --zf-dur-base: 240ms;
}

/* --------------------------------------------------------------------------
   1. 字體節奏（base.css 範圍）
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5,
.h0, .h1, .h2, .h3, .h4 {
  font-weight: 500;            /* 標題一律 Medium，不用 700 */
  letter-spacing: 0.02em;
  line-height: 1.18;
}

/* [修正] 非 heading 標籤的 section 標題（div/span，h1–h5 規則蓋不到）也要襯線 500 */
.img-with-text-title,
.promotion-banner-title {
  font-family: var(--font-heading-family);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
/* image-with-text 眉標（問事件/查因果…）：無襯線小字 + 玫瑰，對齊 LIFF eyebrow 樣式 */
.img-with-text-subtitle {
  font-family: var(--font-body-family);
  font-weight: 500;
  color: var(--zf-rose-600);
}

/* 敘述內文（商品描述、政策頁）：襯線 + 1.85 行高 */
.rte,
.product__description {
  font-family: var(--font-heading-family); /* = Noto Serif TC */
  line-height: 1.85;
  letter-spacing: 0.015em;
  color: var(--zf-ink-700);
}
.rte h2, .rte h3, .rte h4 { color: var(--zf-ink-900); }
.rte li::marker { color: var(--zf-rose-400); }

/* --------------------------------------------------------------------------
   2. 按鈕 → 膠囊（base.css .button/.btn 範圍）
   Aroma 機制：底色 rgba(var(--color-button), var(--alpha-button-background))
   -------------------------------------------------------------------------- */
.button, .btn {
  border-radius: var(--zf-radius-pill);
  font-family: var(--font-heading-family); /* 按鈕文字用襯線 500 */
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: background-color var(--zf-dur-fast) var(--zf-ease),
              transform var(--zf-dur-fast) var(--zf-ease),
              box-shadow var(--zf-dur-fast) var(--zf-ease);
}

/* hover：主鈕 #AC7167 → #8F574E。Aroma 按鈕底色吃 rgb 三元組變數，直接蓋變數最穩 */
.button:not([disabled]):hover,
.btn:not([disabled]):hover {
  --color-button: 143, 87, 78; /* #8F574E */
}

/* press：下沉 1px */
.button:not([disabled]):active,
.btn:not([disabled]):active {
  transform: translateY(1px) scale(0.99);
}

/* 次要（外框）按鈕：框 #D2A099、字 #8F574E、hover 染玫瑰 tint
   （Aroma 外框是 box-shadow ring，改成實線框並關掉 ring） */
.button--secondary {
  border: 1px solid var(--zf-rose-300);
  box-shadow: none;
}
.button--secondary:not([disabled]):hover {
  background-color: var(--zf-rose-tint);
}

/* focus：藍框/黑框一律改玫瑰光圈 */
.button:focus-visible,
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--zf-focus);
}

/* --------------------------------------------------------------------------
   3. 輸入框與下拉（base.css .field__input/.select__select 範圍）
   [工程修正] Aroma 用 box-shadow 畫框線（border:0; box-shadow: 0 0 0 .1rem
   rgba(var(--color-foreground),1) + inset），colors_text 改墨黑後 ring 會變
   深黑硬框 → 直接重定義 box-shadow 為米杏色細框，hover/focus 轉玫瑰。
   -------------------------------------------------------------------------- */
.field__input,
.select__select,
.customer .field input,
.customer select {
  border-radius: var(--zf-radius-input);
  background-color: var(--zf-paper);
  box-shadow: 0 0 0 1px var(--zf-border);  /* 取代墨色 ring + 拿掉 inset 內陰影 */
  color: var(--zf-ink-900);
  font-family: var(--font-heading-family); /* 輸入文字襯線（定稿規格） */
  transition: box-shadow var(--zf-dur-fast) var(--zf-ease);
}
/* [修正] 主題用浮動 .field__label 當 placeholder（原生 placeholder 刻意 opacity:0），
   不可弄回 opacity:1 否則文字重疊 → 改為替浮動 label 上色 */
.field__label { color: var(--zf-ink-400); }

.field__input:hover,
.select__select:hover,
.customer .field input:hover,
.customer select:hover {
  box-shadow: 0 0 0 1px var(--zf-rose-300);
}
.field__input:focus,
.select__select:focus,
.customer .field input:focus,
.customer select:focus {
  outline: none;
  box-shadow: 0 0 0 1px var(--zf-rose-300), 0 0 0 4px var(--zf-focus);
}

/* 商品頁變體/自訂欄位的 label */
.product-form__input .form__label,
.form__label {
  font-family: var(--font-body-family);
  font-size: 14px;
  font-weight: 500;
  color: var(--zf-ink-700);
}

/* [修正] 分類牆排序 select：原主題是無框內聯樣式（padding 極小），
   套膠囊+襯線後文字會撞箭頭溢出 → 改無襯線 14px + 足夠左右 padding */
.collection-filters__sort {
  font-family: var(--font-body-family);
  font-size: 14px;
  height: 40px;
  padding: 0 32px 0 16px;
}

/* --------------------------------------------------------------------------
   4. 卡片（component-card.css 範圍；定稿 01 規格 5–6）
   -------------------------------------------------------------------------- */
.card {
  border-radius: var(--zf-radius-card);
  border: 1px solid var(--zf-hairline);
  background-color: var(--zf-paper);
  box-shadow: var(--zf-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--zf-dur-base) var(--zf-ease),
              transform var(--zf-dur-base) var(--zf-ease);
}
/* hover 上浮（桌機）。card-wrapper 是商品卡外層 */
@media (hover: hover) {
  .card-wrapper:hover .card {
    transform: translateY(-2px);
    box-shadow: var(--zf-shadow-md);
  }
}
/* 卡內商品名：襯線 16/1.55 500、兩行截斷由主題既有 clamp 處理 */
.card-information__text,
.card__text {
  font-family: var(--font-heading-family);
  font-weight: 500;
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   5. 價格數字（component-price.css 範圍；數字一律無襯線 600 tabular）
   -------------------------------------------------------------------------- */
.price,
.price * {
  font-family: var(--font-body-family);  /* = Noto Sans TC */
  font-variant-numeric: tabular-nums;
}
.price { font-weight: 600; color: var(--zf-ink-900); }
.price__compare,
.cart-item__old-price { color: var(--zf-ink-400); }       /* 原價刪除線 */
.price--on-sale .price__sale { color: var(--zf-critical); } /* 特價 = 暖鏽紅 */
.price .price__badge-sold-out { background: #F3E2DE; color: var(--zf-critical); border: none; border-radius: var(--zf-radius-pill); }
.price .price__badge-sale     { background: #F4ECD9; color: var(--zf-caution);  border: none; border-radius: var(--zf-radius-pill); }

/* --------------------------------------------------------------------------
   6. 分頁（component-pagination.css；定稿 01 規格 7）
   -------------------------------------------------------------------------- */
.pagination__item { color: var(--zf-ink-500); }
.pagination__item:hover { color: var(--zf-rose-600); }
.pagination__item--current {
  background-color: var(--zf-rose-400);
  color: #FFFDF8;
  border-radius: var(--zf-radius-pill);
}

/* --------------------------------------------------------------------------
   7. 商品頁（section-main-product.css；定稿 02）
   [工程修正] 吃 wrapper_bg_color 的資訊卡是 .product-wrapper_color
   （section 內已有 radius 20 + padding 30），補框線與陰影即可。
   -------------------------------------------------------------------------- */
.product-wrapper_color {
  border: 1px solid var(--zf-hairline);
  box-shadow: var(--zf-shadow-sm);
}
.product__title {
  font-family: var(--font-heading-family);
  font-weight: 500;
  font-size: 26px;          /* 手機 21px，見下方斷點 */
  line-height: 1.45;
  letter-spacing: 0.02em;
}
/* [工程修正] 圖庫實站 DOM：slider-component > .product__media-list > .product__media-item img
   無縮圖列（splide 規則無對應 DOM，已移除）。主圖白底 + 大圓角。 */
.product__media-item img {
  border-radius: var(--zf-radius-card);
  background: #FFFFFF;
}
/* 圖庫翻頁按鈕/計數沿用主題，箭頭染玫瑰 */
.slider-button { color: var(--zf-rose-600); }
.slider-counter { color: var(--zf-ink-400); }

@media screen and (max-width: 749px) {
  .product__title { font-size: 21px; line-height: 1.5; }

  /* 手機底部固定 CTA 列（定稿 02 手機差異）
     [上線驗證] 若祖先鏈有 overflow:hidden 令 sticky 失效 → 退回 static（仍可用） */
  .product-form__buttons {
    position: sticky;
    bottom: 0;
    z-index: 4;
    background: var(--zf-paper);
    border-top: 1px solid var(--zf-hairline);
    padding: 14px 22px 20px;
    margin: 0 -22px; /* 抵銷頁邊，撐滿 */
  }
}

/* --------------------------------------------------------------------------
   8. 購物車（component-cart-items.css 等；定稿 03）
   -------------------------------------------------------------------------- */
.cart-items th {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--zf-ink-400);
  border-bottom: 1px solid var(--zf-hairline);
}
.cart-items td { border-color: var(--zf-hairline); }
.cart-item__image { border-radius: var(--zf-radius-input); border: 1px solid var(--zf-hairline); background: #FFFFFF; }
.cart-item__name {
  font-family: var(--font-heading-family);
  font-weight: 500;
  line-height: 1.5;
}
/* 移除鈕（垃圾桶）hover 染玫瑰 */
.cart-action-icon .button:not([disabled]):hover { background: var(--zf-rose-tint); }

/* 合計區包成紙感卡（定稿 03 規格 4；DOM 順序不動） */
.cart__footer {
  background: var(--zf-paper);
  border: 1px solid var(--zf-hairline);
  border-radius: var(--zf-radius-card);
  box-shadow: var(--zf-shadow-sm);
  padding: 28px;
  max-width: 380px;
  margin-left: auto;
}
.totals { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   9. 分類牆 chips（新增物，搭配 sections/main-collection.liquid 注入）
   -------------------------------------------------------------------------- */
.zf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 6px;
}
.zf-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-family: var(--font-body-family);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--zf-ink-500);
  background: var(--zf-paper);
  border: 1px solid var(--zf-border);
  border-radius: var(--zf-radius-pill);
  text-decoration: none;
  transition: background-color var(--zf-dur-fast) var(--zf-ease),
              color var(--zf-dur-fast) var(--zf-ease);
}
.zf-chip:hover { background: var(--zf-rose-tint); color: var(--zf-rose-600); }
.zf-chip.is-active {
  background: var(--zf-rose-400);
  border-color: transparent;
  color: #FFFDF8;
}
@media screen and (max-width: 749px) {
  .zf-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -22px;
    margin-right: -22px;
    padding: 0 22px;
  }
  .zf-chips::-webkit-scrollbar { display: none; }
  .zf-chip { flex: none; }
}

/* --------------------------------------------------------------------------
   10. 鏈結、分隔線、雜項
   -------------------------------------------------------------------------- */
.link, .underlined-link, .link--text {
  color: var(--zf-rose-600);
  text-decoration-color: var(--zf-rose-300);
  text-underline-offset: 2px;
}
.link:hover, .underlined-link:hover { color: var(--zf-rose-500); }

hr { border: none; border-top: 1px solid var(--zf-hairline); }

/* 加入購物車通知抽屜：只能換色與圓角（結構平台鎖定） */
.cart-notification {
  border-radius: var(--zf-radius-card);
  border: 1px solid var(--zf-hairline);
  box-shadow: var(--zf-shadow-md);
  background: var(--zf-paper);
}

/* 全站 focus 殘留掃尾：任何藍色 outline 改玫瑰光圈 */
a:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--zf-focus);
}

/* ==========================================================================
   上線檢查清單（對照定稿 mockup）
   --------------------------------------------------------------------------
   □ 全站內文不再是粉色（colors_text 生效）
   □ 按鈕全部變膠囊、hover 變深玫瑰、無藍色 focus
   □ 分類牆 4 欄、方圖、卡片 radius 20 + 暖陰影、chips 列出現
   □ 商品頁資訊卡米白紙感（粉底消失）、價格為無襯線 600
   □ 輸入框米杏細框（無墨黑硬框）、focus 玫瑰光圈
   □ 購物車合計區成卡、縮圖 radius 14
   □ 手機商品頁底部 CTA sticky（若失效退 static 不擋上線）
   □ 結帳頁：只看 logo／按鈕色／鏈結色／字體繼承，版面不動
   ========================================================================== */