/* ==========================================================================
   良品開飯 — Shopee-Style DaisyUI Theme (kfan)
   Primary: deep navy #0E3D69 | Accent: warm gold #C5914A | Error/Price: #A5041A
   ========================================================================== */

/* ---------- 品牌 CSS 變數（供 product.php 等頁面 inline style 使用）---------- */
:root {
  --color-primary:       #0e3d69;
  --color-primary-dark:  #0a3762;
  --color-primary-light: #1a5491;
  --color-gold:          #C5914A;
  --color-gold-light:    #dba96a;
  --color-gold-muted:    #e8c99a;
  --color-bg-base:       #faf7f2;
  --color-bg-section:    #f3ede3;
  --color-card:          #fffdf9;
  --color-card-hover:    #fff8ee;
  --color-text-dark:     #1a1208;
  --color-text-body:     #2d2416;
  --color-text-muted:    #6b5f52;
  --color-text-light:    #ffffff;
  --color-border:        #e2d9cc;
  --color-border-light:  #ede7de;
  --color-promo:         #e8b103;
  --color-danger:        #a5041a;
  --color-success:       #2d6a3f;
  --color-warning:       #C5914A;
}

/* ---------- DaisyUI kfan theme tokens (plain CSS override) ---------- */
[data-theme="kfan"] {
  color-scheme: light;
  --p:  27.78% 0.062 244.12;
  --pc: 100%   0     0;
  --s:  64.32% 0.106 78.21;
  --sc: 100%   0     0;
  --a:  64.32% 0.106 78.21;
  --ac: 100%   0     0;
  --n:  17.34% 0.020 70.96;
  --nc: 96.05% 0.011 78.21;
  --b1: 99.16% 0.005 78.21;
  --b2: 96.05% 0.011 78.21;
  --b3: 92.85% 0.018 78.21;
  --bc: 22.05% 0.018 70.96;
  --in: 36.29% 0.080 252.07;
  --inc:100%   0     0;
  --su: 41.40% 0.060 148.85;
  --suc:100%   0     0;
  --wa: 73.10% 0.135 81.34;
  --wac:17.34% 0.020 70.96;
  --er: 38.20% 0.180 25.14;
  --erc:100%   0     0;
  --rounded-box:    6px;
  --rounded-btn:    4px;
  --rounded-badge:  2px;
  --animation-btn:  .18s;
  --animation-input:.2s;
  --btn-text-case:  none;
  --btn-focus-scale:.97;
  --border-btn:     1px;
  --tab-border:     1px;
  --tab-radius:     4px;
}

/* ---------- Base ---------- */
html, body {
  font-family: "Noto Sans TC", -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-size: 14px;
  background: #FAF7F2;
  color: #2D2416;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 768px) {
  html, body { font-size: 15px; }
}

/* ---------- Price (heritage red) ---------- */
.price-sale, .price {
  color: #A5041A;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.price .sym, .price-sale .sym {
  font-size: 0.65em;
  vertical-align: 0.25em;
  margin-right: 1px;
}
.price-strike {
  color: #A99E8E;
  text-decoration: line-through;
  font-size: 11px;
  font-weight: 400;
}

/* ---------- Sidebar menu active state ---------- */
/* DaisyUI 預設 .menu .active 用 --n（深暖黑），這裡改回品牌深藍 --color-primary */
[data-theme="kfan"] .menu :where(li > *:not(ul):not(.menu-title):not(details).active),
[data-theme="kfan"] .menu :where(li > *:not(ul):not(.menu-title):not(details)):active,
[data-theme="kfan"] .menu :where(li > details > summary.active) {
  background-color: #0E3D69;
  color: #ffffff;
}

/* ---------- Form input warm-white background ---------- */
/* DESIGN.md card 底色 #fffdf9；DaisyUI input 預設純白略冷，這裡改用暖白 */
[data-theme="kfan"] .input-bordered,
[data-theme="kfan"] .textarea-bordered,
[data-theme="kfan"] .select-bordered {
  background-color: #fffdf9;
}

/* ---------- Temperature badges (C2) ---------- */
[data-theme="kfan"] .badge-frozen  { background:#E1EAF6; color:#1F4A8A; border-color:#1F4A8A; }
[data-theme="kfan"] .badge-chilled { background:#E1EFF1; color:#2F7C82; border-color:#2F7C82; }
[data-theme="kfan"] .badge-ambient { background:#F5EAD6; color:#8A5A1F; border-color:#8A5A1F; }

/* ---------- Sticky CTA bar (PDP P2, Cart) — mobile only ---------- */
@media (min-width: 768px) {
  .cta-bar { display: none !important; }
}
@media (max-width: 767px) {
  .cta-bar {
    display: flex !important;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    overflow: hidden;
    align-items: stretch;
    height: 56px;
    background: #FFFDF9;
    border-top: 1px solid #E2D9CC;
    box-shadow: 0 -2px 8px rgba(14,61,105,.06);
    z-index: 60;
  }
}

/* Freshchat 客服浮窗 z-index 為天文數字，會蓋住結帳頁 CTA bar 的
   「確認下單」按鈕並攔截點擊。結帳流程頁面（DOM 內含 .cta-bar）
   mobile 隱藏 Freshchat，與隱藏 LINE 浮鈕、返回頂部按鈕一致。 */
@media (max-width: 767px) {
  body:has(.cta-bar) #fc_frame { display: none !important; }
}

/* ---------- Bottom sheet modal ---------- */
[data-theme="kfan"] .modal-bottom .modal-box {
  border-radius: 16px 16px 0 0;
  padding-bottom: 32px;
  max-height: 85vh;
}

/* ---------- App bar (mobile top nav) ---------- */
/* fixed 而非 sticky，避開 main.css 的 html { overflow-x:hidden } 切斷 sticky context */
.kfan-appbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: #0E3D69;
  color: #fff;
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 8px;
}
/* appbar fixed 不佔流，補 body padding-top（mobile only） */
@media (max-width: 767px) {
  body { padding-top: 48px; }
}
.kfan-appbar.scrolled {
  backdrop-filter: blur(8px);
  background: rgba(14,61,105,.92);
}

/* Sticky footer：body 變 flex column；main 撐滿剩餘高度推 footer 到底
   覆蓋 main.css 的 html/body { height: 100% }（會讓 footer 浮在頁面中間） */
html { height: auto; min-height: 100%; }
body {
  height: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* width:100% 必要 —— body 是 flex column，main 帶 mx-auto 時
   cross 軸 auto margin 會取消 align-items:stretch，導致 main 收縮包覆內容寬度。
   補 width:100% 後配合各頁 max-w-[...] 才能正常置中且撐滿。 */
body > main { flex: 1 0 auto; width: 100%; }

/* [已棄用] kfan-mm-chips / kfan-mm-chips-spacer：
   mobile nav tabs 已併入 kfan-appbar 內，不再需要獨立 chip 列 */
.kfan-mm-chips        { display: none !important; }
.kfan-mm-chips-spacer { display: none !important; }

/* product_list.php / provider_list.php L1 Top bar：
   mobile 改 fixed 黏在 appbar (48px) 之下（chips 列已併入 appbar，不再另佔高度）；
   PC 仍是 sticky top:0（fallback 用 css 內定義避免 Tailwind sticky 失效） */
.kfan-l1-topbar {
  position: fixed;
  top: 48px;
  left: 0;
  right: 0;
}
.kfan-l1-topbar-spacer          { height: 37px; } /* mobile 只剩 sort tabs h-9 + border-bottom */
.kfan-l1-topbar-spacer--compact { height: 37px; } /* provider_list 只有單行 cat-tabs */

/* PC sidebar 兩層 main_menu */
.kfan-mm-li > .kfan-mm-children      { display: none; }
.kfan-mm-li.is-expanded > .kfan-mm-children { display: block; }
.kfan-mm-toggle-arrow                { transition: transform 0.18s ease; }
.kfan-mm-li.is-expanded .kfan-mm-toggle-arrow { transform: rotate(90deg); }

/* Mobile 首頁分類手風琴 */
.kfan-mm-mobile-li > .kfan-mm-mobile-children { display: none; }
.kfan-mm-mobile-li.is-expanded > .kfan-mm-mobile-children { display: block; }
.kfan-mm-mobile-li.is-expanded > .kfan-mm-mobile-toggle {
  color: var(--color-primary, #0e3d69);
  background-color: #ddeaf6;
  font-weight: 600;
}
.kfan-mm-mobile-li .kfan-mm-toggle-arrow { transition: transform 0.18s ease; }
.kfan-mm-mobile-li.is-expanded .kfan-mm-toggle-arrow { transform: rotate(90deg); }
@media (min-width: 768px) {
  .kfan-l1-topbar {
    position: sticky;
    top: 0;
    left: auto;
    right: auto;
  }
  .kfan-l1-topbar-spacer { display: none; }
}
/* logo img 在深色 header 上強制顯示為白色（SVG 未內嵌 fill 色） */
.kfan-appbar img,
.kfan-pc-header img {
  filter: brightness(0) invert(1);
}

/* ---------- Bottom tab bar (mobile) ---------- */
.kfan-tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 50;
  height: 56px;
  background: #FFFDF9;
  border-top: 1px solid #E2D9CC;
  display: flex;
  align-items: stretch;
}
.kfan-tabbar a,
.kfan-tabbar button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 10px;
  color: #6B5F52;
  text-decoration: none;
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.kfan-tabbar a.active,
.kfan-tabbar button.active {
  color: #0E3D69;
}
.kfan-tabbar a.active::before,
.kfan-tabbar button.active::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 24px; height: 3px;
  border-radius: 0 0 3px 3px;
  background: #0E3D69;
}

/* ---------- PC Header ---------- */
.kfan-pc-header {
  background: #0E3D69;
  color: #fff;
  display: none;
}
@media (min-width: 768px) {
  .kfan-pc-header { display: block; }
  .kfan-appbar { display: none; }
  .kfan-tabbar { display: none; }
  body { padding-bottom: 0; }
}
@media (max-width: 767px) {
  body { padding-bottom: 56px; } /* room for tab bar */
}

/* ---------- Product card (2-col grid) ---------- */
.product-card {
  background: #FFFDF9;
  display: flex;
  flex-direction: column;
}
.product-card figure {
  aspect-ratio: 1/1;
  overflow: hidden;
  position: relative;
}
.product-card figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-card .card-body {
  padding: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.product-card .card-title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 36px;
}
.product-card .card-meta {
  font-size: 10px;
  color: #6B5F52;
  display: flex;
  justify-content: space-between;
  margin-top: auto;
}

/* ---------- DaisyUI steps → navy ---------- */
[data-theme="kfan"] .steps .step-primary + .step-primary::before,
[data-theme="kfan"] .steps .step-primary::after {
  background-color: #0E3D69;
  color: #fff;
}

/* ---------- VIP gradient ---------- */
.vip-gold {
  background: linear-gradient(135deg,#C5914A 0%,#E8C99A 50%,#C5914A 100%);
}

/* ---------- Announcement bar（跑馬燈）---------- */
#announcement_bg_and_padding {
  padding: 6px 0;
  overflow: hidden;
  white-space: nowrap;
}
#announcement_content {
  display: inline-block;
  font-size: 12px;
  padding-left: 100%;          /* 起始位置從容器右側進入 */
  animation: kfan-marquee 20s linear infinite;
  will-change: transform;
}
#announcement_bg_and_padding:hover #announcement_content {
  animation-play-state: paused; /* 滑鼠移上暫停 */
}
@keyframes kfan-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* ---------- Prose 內嵌媒體（DB 輸出的 HTML，含 YouTube iframe）響應式 ---------- */
/* CMS 圖片常帶 inline height，強制覆蓋讓高度依寬度等比縮放 */
.prose img {
  height: auto !important;
  max-width: 100%;
}

.prose iframe {
  max-width: 100%;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* ---------- Swiper image carousel ---------- */
.product-swiper .swiper-pagination-bullet-active {
  background: #0E3D69;
}

/* ---------- PC Nav strip ---------- */
.kfan-pc-nav {
  background: #0E3D69;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 0;
}
.kfan-pc-nav a {
  color: rgba(255,255,255,.85);
  font-size: 13px;
  padding: 0 14px;
  height: 100%;
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: background 120ms;
}
.kfan-pc-nav a:hover,
.kfan-pc-nav a.active {
  background: rgba(255,255,255,.12);
  color: #fff;
}

/* ---------- Section heading ---------- */
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 12px 8px;
}
.section-heading h2 {
  font-size: 15px;
  font-weight: 600;
  color: #1A1208;
}
.section-heading a {
  font-size: 12px;
  color: #6B5F52;
  text-decoration: none;
}

/* ---------- Design-system semantic helpers ---------- */
/* ds-price: 售價（紅+tabular numerals）; ds-price--hero / lg / md / sm 調大小 */
.ds-price {
  font-family: var(--font-tabular);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold);
  color: var(--color-danger);
  letter-spacing: var(--tracking-tight);
}
.ds-price--hero  { font-size: var(--fs-5xl); font-weight: var(--fw-black); line-height: var(--lh-tight); }
.ds-price--lg    { font-size: var(--fs-3xl); font-weight: var(--fw-bold); }
.ds-price--md    { font-size: var(--fs-xl);  font-weight: var(--fw-bold); }
.ds-price--sm    { font-size: var(--fs-lg);  font-weight: var(--fw-bold); }
.ds-price__strike {
  font-size: 0.85em;
  color: var(--color-text-muted);
  text-decoration: line-through;
  font-weight: var(--fw-regular);
  margin-left: var(--space-2);
}
.ds-price__symbol { font-size: 0.7em; margin-right: 1px; vertical-align: 0.15em; font-weight: var(--fw-bold); }

/* ds-meta: caption / 次要 meta 文字 */
.ds-meta { font-size: var(--fs-xs); color: var(--color-text-muted); letter-spacing: var(--tracking-wide); }

/* ds-badge-temp: 溫層徽章 */
.ds-badge-frozen  { background: var(--color-temp-frozen-bg);  color: var(--color-temp-frozen);  border: 1px solid var(--color-temp-frozen);  }
.ds-badge-chilled { background: var(--color-temp-chilled-bg); color: var(--color-temp-chilled); border: 1px solid var(--color-temp-chilled); }
.ds-badge-ambient { background: var(--color-temp-ambient-bg); color: var(--color-temp-ambient); border: 1px solid var(--color-temp-ambient); }

/* ---------- Product card hover lift ---------- */
.product-card,
.idx-card {
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.product-card:hover,
.idx-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
@media (max-width: 767px) {
  .product-card:active,
  .idx-card:active { transform: scale(.98); }
}

/* ---------- Product badge row (v2) ---------- */
/* 舊版 corner badges 已棄用，徽章統一移到圖片下方 .badge-row 資訊列 */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.4;
}
/* TOP N 漸層（紅→金） */
.pill-top {
  background: linear-gradient(90deg, #A5041A 0%, #E8B103 100%);
  color: #fff;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
}
/* 折扣（紅底） */
.pill-disc {
  background: #A5041A;
  color: #fff;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
}
/* 剩餘庫存（黃底） */
.pill-low {
  background: #E8B103;
  color: #1A1208;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
}
/* 新上架（紅邊框） */
.pill-new {
  color: #A5041A;
  font-weight: 600;
  border: 1px solid #A5041A;
  padding: 0 5px;
  border-radius: 3px;
}
/* 溫層 */
.pill-temp {
  padding: 1px 7px;
  border-radius: 3px;
  font-weight: 500;
  border: 1px solid;
}
.pill-temp.frozen { background: #E1EAF6; color: #1A5491; border-color: #7BA0C8; }
.pill-temp.chill  { background: #E1EFF1; color: #1D6D7A; border-color: #7BBCC2; }
.pill-temp.amb    { background: #F5EAD6; color: #8A5A1F; border-color: #D6B97A; }
/* 已售出（灰字，推到最右） */
.pill-sold {
  color: #A99E8E;
  margin-left: auto;
  white-space: nowrap;
}

/* ---------- Section heading gold bar (v2) ---------- */
/* ::before 取代 v1 的 inline <span>，h2 需 display:flex */
.idx-section__title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.idx-section__title::before {
  content: "";
  display: block;
  width: 3px;
  height: 16px;
  background: #C5914A;
  border-radius: 2px;
  flex-shrink: 0;
}

/* ---------- Utility ---------- */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- 隱藏 OmniChat widget ---------- */
[id*="omnichat"],
[id*="omnihchat"],
[class*="omnichat"],
[class*="omnihchat"],
iframe[src*="omniscientai"] {
  display: none !important;
}

#fc_widget{
  display: none !important;
}

/* 任選數量輸入框數字置中 */
.pc-combine-qty,
.combine-qty {
  text-align: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  -moz-appearance: textfield;
}

/* ---------- PC：Tailwind text-* 整體往上大一號（不影響 h5） ----------
   說明：
   - 只覆寫 font-size，不動 line-height，避免影響 leading-* 工具類。
   - 同時覆寫 md:/lg:/xl: 變體，讓顯式寫 md:text-base 等的也跟著放大一階。
   - 用 html 前綴提升特異度（0,0,1,1）以蓋過 Tailwind CDN JIT 注入的 .text-*。
   - 不影響 .text-[11px] 等任意值、行內 style、或 kfan-shopee 內自訂類別（如 .price）。
*/
@media (min-width: 768px) {
  html .text-xs   { font-size: 0.875rem; }   /* 12 → 14 */
  html .text-sm   { font-size: 1rem; }       /* 14 → 16 */
  html .text-base { font-size: 1.125rem; }   /* 16 → 18 */
  html .text-lg   { font-size: 1.25rem; }    /* 18 → 20 */
  html .text-xl   { font-size: 1.5rem; }     /* 20 → 24 */
  html .text-2xl  { font-size: 1.875rem; }   /* 24 → 30 */
  html .text-3xl  { font-size: 2.25rem; }    /* 30 → 36 */
  html .text-4xl  { font-size: 3rem; }       /* 36 → 48 */

  html .md\:text-xs   { font-size: 0.875rem; }
  html .md\:text-sm   { font-size: 1rem; }
  html .md\:text-base { font-size: 1.125rem; }
  html .md\:text-lg   { font-size: 1.25rem; }
  html .md\:text-xl   { font-size: 1.5rem; }
  html .md\:text-2xl  { font-size: 1.875rem; }
  html .md\:text-3xl  { font-size: 2.25rem; }
  html .md\:text-4xl  { font-size: 3rem; }

  html .lg\:text-xs   { font-size: 0.875rem; }
  html .lg\:text-sm   { font-size: 1rem; }
  html .lg\:text-base { font-size: 1.125rem; }
  html .lg\:text-lg   { font-size: 1.25rem; }
  html .lg\:text-xl   { font-size: 1.5rem; }
  html .lg\:text-2xl  { font-size: 1.875rem; }
  html .lg\:text-3xl  { font-size: 2.25rem; }
  html .lg\:text-4xl  { font-size: 3rem; }

  html .xl\:text-xs   { font-size: 0.875rem; }
  html .xl\:text-sm   { font-size: 1rem; }
  html .xl\:text-base { font-size: 1.125rem; }
  html .xl\:text-lg   { font-size: 1.25rem; }
  html .xl\:text-xl   { font-size: 1.5rem; }
  html .xl\:text-2xl  { font-size: 1.875rem; }
  html .xl\:text-3xl  { font-size: 2.25rem; }
  html .xl\:text-4xl  { font-size: 3rem; }
}