/* ==========================================================================
   洪瑞珍 SINCE 1947 — Shopee-Style DaisyUI Theme (hrj)
   Primary: 品牌紅 brand red #E32E35 | Accent: mustard gold #C4902A | Error/Price: #B03010
   ========================================================================== */

/* ---------- 品牌 CSS 變數（供 product.php 等頁面 inline style 使用）---------- */
:root {
  --color-primary:       #E32E35;
  --color-primary-dark:  #C61F26;
  --color-primary-light: #E85156;
  --color-primary-soft:  #FBE1E2;
  --color-gold:          #C4902A;
  --color-gold-light:    #D9B060;
  --color-gold-muted:    #E8C98A;
  --color-bg-base:       #FDF6EC;
  --color-bg-section:    #F5ECD8;
  --color-card:          #FFFFFF;
  --color-card-hover:    #FDF0DC;
  --color-text-dark:     #1E1209;
  --color-text-body:     #3D2214;
  --color-text-muted:    #8C6B50;
  --color-text-light:    #ffffff;
  --color-border:        #E5D5BE;
  --color-border-light:  #EDE0CC;
  --color-promo:         #C4902A;
  --color-danger:        #B03010;
  --color-success:       #2D6B3A;
  --color-warning:       #A07020;
}

/* ---------- DaisyUI hrj theme tokens (plain CSS override) ---------- */
[data-theme="hrj"] {
  color-scheme: light;
  --p:  58%   0.205 25;
  --pc: 100%  0     0;
  --s:  55%   0.100 75;
  --sc: 100%  0     0;
  --a:  55%   0.100 75;
  --ac: 100%  0     0;
  --n:  22%   0.020 60;
  --nc: 96%   0.010 80;
  --b1: 97%   0.025 80;
  --b2: 94%   0.030 80;
  --b3: 90%   0.030 78;
  --bc: 28%   0.025 50;
  --in: 36%   0.080 252;
  --inc:100%  0     0;
  --su: 42%   0.070 150;
  --suc:100%  0     0;
  --wa: 55%   0.090 75;
  --wac:17%   0.020 60;
  --er: 45%   0.130 25;
  --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: #FDF6EC;
  color: #3D2214;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 768px) {
  html, body { font-size: 15px; }
}

/* ---------- Price (danger red) ---------- */
.price-sale, .price {
  color: #B03010;
  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: #8C6B50;
  text-decoration: line-through;
  font-size: 11px;
  font-weight: 400;
}

/* ---------- Sidebar menu active state ---------- */
[data-theme="hrj"] .menu :where(li > *:not(ul):not(.menu-title):not(details).active),
[data-theme="hrj"] .menu :where(li > *:not(ul):not(.menu-title):not(details)):active,
[data-theme="hrj"] .menu :where(li > details > summary.active) {
  background-color: #E32E35;
  color: #ffffff;
}

/* ---------- Form input warm-white background ---------- */
[data-theme="hrj"] .input-bordered,
[data-theme="hrj"] .textarea-bordered,
[data-theme="hrj"] .select-bordered {
  background-color: #FFFFFF;
}

/* ---------- Temperature badges (display-only) ---------- */
/* 溫層僅為商品屬性顯示，sandwich 不分溫層 → 收斂成低彩暖中性，讓紅折扣 badge 成為唯一強調色 */
[data-theme="hrj"] .badge-frozen,
[data-theme="hrj"] .badge-chilled,
[data-theme="hrj"] .badge-ambient { background:#F1E8D8; color:#6B5638; border-color:#D9C7A6; }

/* ---------- Order detail card (暖色立體，避免米底糊成一片) ---------- */
.order-card {
  border-radius: 12px;
  border: 1px solid #e6dcc6;
  box-shadow: 0 2px 10px rgba(74,12,15,.07), 0 1px 3px rgba(74,12,15,.04);
}

/* ---------- Sticky CTA bar (PDP, 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: #FFFFFF;
    border-top: 1px solid #E5D5BE;
    box-shadow: 0 -2px 8px rgba(198,31,38,.06);
    z-index: 60;
  }
  /* 購物車 main 底距要清掉「cta-bar(56) + tabbar(56) + safe-area」兩條疊放的浮動列，否則底部內容被蓋住 */
  .cart-main { padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* 贈品框：去綠改暖金（與訂單頁 🎁 卡一致；🎯 未達門檻的橘色提示保留） */
.gift-box { background: #FBF4E4 !important; border-color: #E8D9B5 !important; border-left-color: #C4902A !important; }
.gift-box [class*="text-success"] { color: #8a5a1f !important; }

/* 購物車區塊卡：純白 + 暖褐邊 + 柔陰影，讓各區塊在暖米底(#FDF6EC)上明確分開，不再糊成一片 */
.cart-main .bg-base-100.rounded-lg {
  background: #ffffff !important;
  border-color: #E3D3B2 !important;
  box-shadow: 0 2px 12px rgba(74,12,15,.06), 0 1px 3px rgba(74,12,15,.05) !important;
}

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

/* ---------- App bar (mobile top nav) ---------- */
.hrj-appbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: #E32E35;
  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; }
}
.hrj-appbar.scrolled {
  backdrop-filter: blur(8px);
  background: rgba(198,31,38,.92);
}

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

/* ---------- Bottom tab bar (mobile) ---------- */
.hrj-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: #FFFFFF;
  border-top: 1px solid #E5D5BE;
  display: flex;
  align-items: stretch;
  transform: translateZ(0);
}
.hrj-tabbar a,
.hrj-tabbar button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 10px;
  color: #8C6B50;
  text-decoration: none;
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.hrj-tabbar a.active,
.hrj-tabbar button.active {
  color: #E32E35;
}
.hrj-tabbar a.active::before,
.hrj-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: #E32E35;
}

/* ---------- PC Header ---------- */
.hrj-pc-header {
  background: #E32E35;
  color: #fff;
  display: none;
}
@media (min-width: 768px) {
  .hrj-pc-header { display: block; }
  .hrj-appbar { display: none; }
  .hrj-tabbar { display: none; }
  body { padding-bottom: 0; }
}
@media (max-width: 767px) {
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}

/* logo img 在深色 header 上強制顯示為白色 */
.hrj-appbar img,
.hrj-pc-header img {
  filter: brightness(0) invert(1);
}

/* ---------- PC Nav strip ---------- */
.hrj-pc-nav {
  background: #C61F26;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 0;
}
.hrj-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;
}
.hrj-pc-nav a:hover,
.hrj-pc-nav a.active {
  background: rgba(255,255,255,.12);
  color: #fff;
}

/* ---------- Mobile More Drawer ---------- */
.hrj-more-sheet-bg {
  background: #E32E35;
}

/* ---------- Product card (2-col grid) ---------- */
.product-card {
  background: #FFFFFF;
  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: #8C6B50;
  display: flex;
  justify-content: space-between;
  margin-top: auto;
}

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

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

/* ---------- Announcement bar（跑馬燈）---------- */
body #announcement_bg_and_padding {
  height: auto;
  min-height: 36px;
  line-height: 36px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 13px;
}
body #announcement_content {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  padding-left: 100%;
  animation: hrj-marquee 25s linear infinite;
  will-change: transform;
}
body #announcement_bg_and_padding:hover #announcement_content {
  animation-play-state: paused;
}
@keyframes hrj-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* ---------- Prose 內嵌媒體響應式 ---------- */
.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: #E32E35;
}

/* 防止 banner slides 在 Swiper init 前上下堆疊 */
.slick-sliders > * + * { display: none; }

/* ---------- l1 topbar (product_list / provider_list) ---------- */
.hrj-l1-topbar {
  position: fixed;
  top: 48px;
  left: 0;
  right: 0;
}
.hrj-l1-topbar-spacer          { height: 37px; }
.hrj-l1-topbar-spacer--compact { height: 37px; }

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

/* Mobile 首頁分類手風琴 */
.hrj-mm-mobile-li > .hrj-mm-mobile-children { display: none; }
.hrj-mm-mobile-li.is-expanded > .hrj-mm-mobile-children { display: block; }
.hrj-mm-mobile-li.is-expanded > .hrj-mm-mobile-toggle {
  color: var(--color-primary, #E32E35);
  background-color: #FBE1E2;
  font-weight: 600;
}
.hrj-mm-mobile-li .hrj-mm-toggle-arrow { transition: transform 0.18s ease; }
.hrj-mm-mobile-li.is-expanded .hrj-mm-toggle-arrow { transform: rotate(90deg); }

@media (min-width: 768px) {
  .hrj-l1-topbar {
    position: sticky;
    top: 0;
    left: auto;
    right: auto;
  }
  .hrj-l1-topbar-spacer { display: none; }
}

/* ---------- 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: #1E1209;
}
.section-heading a {
  font-size: 12px;
  color: #8C6B50;
  text-decoration: none;
}

/* ---------- Design-system semantic helpers ---------- */
.ds-price {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--color-danger);
  letter-spacing: -0.01em;
}
.ds-price--hero  { font-size: 2rem;   font-weight: 900; line-height: 1.1; }
.ds-price--lg    { font-size: 1.5rem; font-weight: 700; }
.ds-price--md    { font-size: 1.25rem; font-weight: 700; }
.ds-price--sm    { font-size: 1.125rem; font-weight: 700; }
.ds-price__strike {
  font-size: 0.85em;
  color: var(--color-text-muted);
  text-decoration: line-through;
  font-weight: 400;
  margin-left: 4px;
}
.ds-price__symbol { font-size: 0.7em; margin-right: 1px; vertical-align: 0.15em; font-weight: 700; }

/* ds-meta: caption / 次要 meta 文字 */
.ds-meta { font-size: 12px; color: var(--color-text-muted); }

/* ---------- Product card hover lift ---------- */
.product-card,
.idx-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.product-card:hover,
.idx-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(198,31,38,.10);
}
@media (max-width: 767px) {
  .product-card:active,
  .idx-card:active { transform: scale(.98); }
}

/* ---------- Product badge row (v2) ---------- */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
}
/* TOP N 漸層（酒紅→金） */
.pill-top {
  background: linear-gradient(90deg, #E32E35 0%, #C4902A 100%);
  color: #fff;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
}
/* 折扣（深磚紅底） */
.pill-disc {
  background: #B03010;
  color: #fff;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 3px;
}
/* 剩餘庫存（芥末金底） */
.pill-low {
  background: #C4902A;
  color: #1E1209;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 3px;
}
/* 新上架（酒紅邊框） */
.pill-new {
  color: #E32E35;
  font-weight: 600;
  border: 1px solid #E32E35;
  padding: 1px 6px;
  border-radius: 3px;
}
/* 溫層 */
.pill-temp {
  padding: 2px 8px;
  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: #8C6B50;
  margin-left: auto;
  white-space: nowrap;
}

/* ---------- Section heading gold bar (v2) ---------- */
.idx-section__title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.idx-section__title::before {
  content: "";
  display: block;
  width: 3px;
  height: 18px;
  background: #C4902A;
  border-radius: 2px;
  flex-shrink: 0;
}

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

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

/* ---------- PC：Tailwind text-* 整體往上大一號 ---------- */
@media (min-width: 768px) {
  html .text-xs   { font-size: 0.875rem; }
  html .text-sm   { font-size: 1rem; }
  html .text-base { font-size: 1.125rem; }
  html .text-lg   { font-size: 1.25rem; }
  html .text-xl   { font-size: 1.5rem; }
  html .text-2xl  { font-size: 1.875rem; }
  html .text-3xl  { font-size: 2.25rem; }
  html .text-4xl  { font-size: 3rem; }

  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; }
}

/* ---------- Arbitrary-value class 補充（靜態 Tailwind dump 沒有 JIT arbitrary）---------- */
/* header_hrj.php 用到的 arbitrary-value class */
.max-w-\[1200px\]  { max-width: 1200px; }
.max-w-\[480px\]   { max-width: 480px; }
.max-w-\[460px\]   { max-width: 460px; }
.max-w-\[420px\]   { max-width: 420px; }
.max-w-\[180px\]   { max-width: 180px; }
.max-w-\[60px\]    { max-width: 60px; }
.w-\[1200px\]      { width: 1200px; }
.h-\[200px\]       { height: 200px; }
/* 固定 px 寬高（login 社群圖示、表單欄寬等；靜態 Tailwind 無 arbitrary） */
.w-\[15px\]   { width: 15px; }
.h-\[15px\]   { height: 15px; }
.h-\[40px\]   { height: 40px; }
.w-\[60px\]   { width: 60px; }
.w-\[180px\]  { width: 180px; }
.w-\[420px\]  { width: 420px; }
.w-\[460px\]  { width: 460px; }
.w-\[480px\]  { width: 480px; }
.text-\[11px\]     { font-size: 11px; }
.text-\[10px\]     { font-size: 10px; }
.text-\[13px\]     { font-size: 13px; }
.bottom-\[72px\]   { bottom: 72px; }
.top-\[48px\]      { top: 48px; }
/* z-index arbitrary */
.z-\[60\]  { z-index: 60; }
.z-\[50\]  { z-index: 50; }
.z-\[40\]  { z-index: 40; }
/* Mobile more drawer */
.translate-y-full  { transform: translateY(100%); }
.max-h-\[82vh\]    { max-height: 82vh; }
/* bg with opacity shorthand that TW static dump may miss */
.bg-black\/50      { background-color: rgba(0,0,0,.5); }
.bg-white\/10      { background-color: rgba(255,255,255,.10); }
.bg-white\/30      { background-color: rgba(255,255,255,.30); }
.border-white\/10  { border-color: rgba(255,255,255,.10); }

/* index.php hero grid（最重要：三欄 220px | 1fr | 256px） */
@media (min-width: 768px) {
  .md\:grid-cols-\[220px_1fr_256px\] { grid-template-columns: 220px 1fr 256px; }
  .md\:grid-cols-\[220px_1fr\]       { grid-template-columns: 220px 1fr; }
  /* products / providers / member 頁：左側分類 nav 220px + 主內容（minmax 防撐爆） */
  .md\:grid-cols-\[220px_minmax\(0\,1fr\)\] { grid-template-columns: 220px minmax(0, 1fr); }
  /* cart.php Twig：左欄商品列 + 右欄 sticky 訂單摘要 340px */
  .md\:grid-cols-\[1fr_340px\] { grid-template-columns: 1fr 340px; }
}
/* cart 樣板雜項 arbitrary（cart_recommend / cart_detail 等用） */
.grid-cols-\[auto_1fr\] { grid-template-columns: auto 1fr; }
.max-w-\[1220px\]       { max-width: 1220px; }
.max-w-\[200px\]        { max-width: 200px; }
.min-h-\[2\.5rem\]      { min-height: 2.5rem; }
.min-w-\[96px\]         { min-width: 96px; }
/* index.php misc arbitrary */
.min-h-\[200px\] { min-height: 200px; }
.min-h-\[160px\] { min-height: 160px; }
.min-h-\[120px\] { min-height: 120px; }
/* opacity/border arbitrary used across pages */
.bg-warning\/10  { background-color: rgba(160,112,32,.10); }
.bg-warning\/20  { background-color: rgba(160,112,32,.20); }
.bg-success\/10  { background-color: rgba(45,107,58,.10); }
.bg-success\/20  { background-color: rgba(45,107,58,.20); }
.border-warning\/30 { border-color: rgba(160,112,32,.30); }
.border-success\/30 { border-color: rgba(45,107,58,.30); }

#easychat-floating-button{display: none !important;}