/* ==========================================================================
   1bit — Editorial-Origin Theme (產地咬一口)
   Primary: deep-forest #0B6B4F  |  Accent: clay #C44A24  |  Base: cream #FAF7F1
   設計命題:翻開像翻開一本農場合作社雜誌,不像逛 Shopee
   參考: Pekoe (refined curator) × 鮮乳坊 (origin-led illustration) × Mouth (editorial typography)
   ========================================================================== */

/* ---------- 品牌 CSS 變數 ---------- */
:root {
  --color-primary:       #0b6b4f;   /* 深森林:長出來的,不是螢光的 */
  --color-primary-dark:  #064e3b;   /* 更深森林 hover/active */
  --color-primary-light: #0e8f6a;   /* 中度森林 */
  --color-primary-soft:  #c8e0d1;   /* 苔蘚:border/badge 用 */
  --color-bg-base:       #f8f2e6;   /* 暖 cream 偏淡,溫度感不重 */
  --color-bg-section:    #f2eada;   /* 段落 cream */
  --color-card:          #fdfcf8;   /* warm off-white:略亮於頁底,不 stark */
  --color-card-hover:    #f5edd9;
  --color-text-dark:     #1f1a14;   /* 暖黑,略帶咖啡色 */
  --color-text-body:     #44362a;   /* 深可可 */
  --color-text-muted:    #8b7a66;   /* 灰褐 */
  --color-text-light:    #ffffff;
  --color-border:        #e8dfd0;   /* 米色邊 */
  --color-border-light:  #f0e8d8;
  --color-danger:        #c44a24;   /* 陶土紅:取代螢光紅標,不顯廉價 */
  --color-success:       #0b6b4f;   /* 跟 primary 對齊 */
  --color-warning:       #b47a1b;   /* 琥珀,不是檸檬黃 */
}

/* ---------- DaisyUI 1bit theme — Editorial-Origin ---------- */
[data-theme="1bit"] {
  color-scheme: light;
  /* primary = deep-forest #0B6B4F  (OKLCH) */
  --p:  42.00% 0.088 167.00;
  --pc: 100%   0     0;
  /* secondary = emerald-800 #065F46 (slightly cooler companion) */
  --s:  37.50% 0.080 167.00;
  --sc: 100%   0     0;
  /* accent = clay #C44A24 (陶土紅,取代螢光 teal) */
  --a:  54.20% 0.155 35.00;
  --ac: 100%   0     0;
  /* neutral = warm dark */
  --n:  22.00% 0.012 70.00;
  --nc: 96.00% 0     0;
  /* base = warm off-white card / 中度 cream page (~5% luminance 落差,都暖系) */
  --b1: 99.00% 0.004 80.00;   /* base-100 = warm off-white #fdfcf8 */
  --b2: 95.50% 0.014 80.00;   /* base-200 = 淺 cream */
  --b3: 90.00% 0.020 80.00;   /* base-300 = 中 cream border/divider */
  --bc: 22.00% 0.012 60.00;   /* warm black text */
  /* semantic */
  --in: 60.00% 0.130 250.00;
  --inc:100%   0     0;
  --su: 42.00% 0.088 167.00;
  --suc:100%   0     0;
  --wa: 65.00% 0.135  70.00;  /* warm amber */
  --wac:20.00% 0.020  70.00;
  --er: 54.20% 0.155 35.00;   /* clay */
  --erc:100%   0     0;
  --rounded-box:    8px;
  --rounded-btn:    6px;
  --rounded-badge:  4px;
  --animation-btn:  .18s;
  --animation-input:.2s;
  --btn-text-case:  none;
  --btn-focus-scale:.97;
  --border-btn:     1px;
  --tab-border:     1px;
  --tab-radius:     6px;
}

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

/* ---------- Price ---------- */
.price-sale, .price {
  color: var(--color-danger);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.price-strike {
  text-decoration: line-through;
  color: var(--color-text-muted);
  font-weight: 400;
}

/* ---------- 溫層 badge ---------- */
.badge-frozen   { background:#bfdbfe; color:#1e40af; font-size:10px; padding:1px 6px; border-radius:4px; }
.badge-chilled  { background:#cffafe; color:#155e75; font-size:10px; padding:1px 6px; border-radius:4px; }
.badge-ambient  { background:#d1fae5; color:#065f46; font-size:10px; padding:1px 6px; border-radius:4px; }

/* ---------- Swiper overrides ---------- */
.swiper-pagination-bullet-active { background: var(--color-primary) !important; }
.swiper-button-next, .swiper-button-prev { color: var(--color-primary) !important; }

/* ---------- SweetAlert2 overrides ---------- */
.swal2-confirm { background-color: var(--color-primary) !important; }

/* ---------- Step indicator (cart flow) ---------- */
.step-container  { display:flex; justify-content:center; padding:28px 0 16px; }
.step-circle     { width:40px; height:40px; border-radius:50%; background:var(--color-border-light); display:flex; align-items:center; justify-content:center; font-weight:600; color:var(--color-text-muted); }
.step.active .step-circle  { background:var(--color-primary); color:#fff; }
.step-label      { font-size:13px; color:var(--color-text-muted); margin-top:4px; text-align:center; }
.step.active .step-label   { color:var(--color-primary); font-weight:600; }

/* ==========================================================================
   bit- Header / Footer Layout
   ========================================================================== */

/* Sticky footer：body flex column；main 撐滿高度推 footer 到底 */
html { height: auto; min-height: 100%; overflow-x: hidden; }
body { height: auto; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }
body > main { flex: 1 0 auto; width: 100%; }

/* ---------- Mobile App Bar ---------- */
.bit-appbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: #065f46;
  color: #fff;
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 8px;
}
@media (max-width: 767px) {
  body { padding-top: 48px; }
}
.bit-appbar.scrolled {
  backdrop-filter: blur(8px);
  background: rgba(6,95,70,.92);
}
/* logo SVG 內已有橘色 #e99f0b (BIT BY BIT)，不再用 filter 染純白 */

/* ---------- Mobile Bottom Tab Bar ---------- */
.bit-tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 50;
  height: calc(56px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #fff;
  border-top: 1px solid #e8dfd0;
  display: flex;
  align-items: stretch;
  transform: translateZ(0);
}
.bit-tabbar a, .bit-tabbar button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 10px;
  color: #6b7280;
  text-decoration: none;
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.bit-tabbar a.active, .bit-tabbar button.active { color: #0b6b4f; }
.bit-tabbar a.active::before, .bit-tabbar button.active::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 28px; height: 2px;
  background: #0b6b4f;
  border-radius: 0 0 2px 2px;
}
@media (max-width: 767px) {
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- PC Header ---------- */
.bit-pc-header {
  background: #065f46;
  color: #fff;
  display: none;
}
/* logo SVG 內已有橘色 #e99f0b (BIT BY BIT)，不再用 filter 染純白 */
@media (min-width: 768px) {
  .bit-pc-header { display: block; }
  .bit-appbar    { display: none; }
  .bit-tabbar    { display: none; }
  body { padding-bottom: 0; }
}

/* ---------- PC Nav Strip ---------- */
.bit-pc-nav {
  background: #047857;
  height: 40px;
  display: flex;
  align-items: stretch;
}
.bit-pc-nav a {
  color: rgba(255,255,255,.85);
  font-size: 13px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background 120ms;
}
.bit-pc-nav a:hover, .bit-pc-nav a.active {
  background: rgba(255,255,255,.12);
  color: #fff;
}

/* ---------- Rich-text content 圖片/表格不超版面 ---------- */
.prose img,
.prose figure,
.prose table { max-width: 100% !important; height: auto; }
.prose table { display: block; overflow-x: auto; }
.prose pre   { white-space: pre-wrap; word-break: break-all; }

/* ==========================================================================
   Product Detail Page（PDP）
   ========================================================================== */

/* ---------- Swiper 商品主圖外層 ---------- */
.product-swiper {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
@media (min-width: 768px) {
  .product-swiper {
    position: sticky;
    top: 0;
    aspect-ratio: 1 / 1;
  }
}

/* ---------- CTA Bar（mobile 底部固定操作列） ---------- */
.cta-bar {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid var(--color-border-light);
  padding-top: 8px;
  padding-bottom: 8px;
  min-height: 56px;
  display: none;
}
@media (max-width: 767px) {
  .cta-bar { display: flex; }
}
@media (min-width: 768px) {
  .cta-bar { display: none !important; }
}

/* ---------- Spec Sheet（底部 modal 細部樣式） ---------- */
#spec-sheet .modal-box {
  border-radius: 16px 16px 0 0;
  max-height: 85vh;
  overflow: hidden;
}
.combine-row:hover { background: var(--color-bg-section); }

/* ==========================================================================
   隱藏 Omnichat 客服浮窗按鈕 (1bit 已不使用 Omnichat,但外部 JS 可能還塞 widget)
   用 !important 強制蓋過第三方 inline style
   ========================================================================== */
[id^="omni"],
[class^="omni"],
[class*=" omni"],
[id^="OMNI"],
iframe[src*="omnichat"],
iframe[src*="omnichat.co"],
iframe[id*="omnichat"],
#omni-chatbox,
#omni-launcher,
#OmniChat,
.omnichat-fab,
.omni-button,
.omni-widget,
.omni-fab,
#omni-fab {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ── Announcement bar marquee ── */
#announcement_bg_and_padding {
  width: 100%;
  line-height: 36px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 13px;
  padding: 0;
}
#announcement_content {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  padding-left: 100%;
  animation: bit-marquee 20s linear infinite;
  will-change: transform;
}
#announcement_bg_and_padding:hover #announcement_content {
  animation-play-state: paused;
}
@keyframes bit-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}