/* ============================================================
   Wama' House — style.css
   主檔的所有樣式皆抽離至此,結構與註解皆保留原樣
   ============================================================ */
/* ===== Reset:移除瀏覽器預設邊距、統一 box-sizing,避免跨瀏覽器差異 ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* 永遠保留 scrollbar 空間,避免 modal 開啟時內容相對 viewport 向左偏移 */
html{scrollbar-gutter:stable}

/* ===== 全域設計變數 (Design Tokens):整個網站只在這裡定義色票/圓角/陰影,
        修改主題只需改這一處,避免到處改 hex code ===== */
:root{
  /* gooddogshop 風格主色 */
  --primary:#D88166;          /* 溫暖橘紅/肉色 */
  --primary-dark:#B8634A;
  --primary-light:#F5DACE;
  --bg:#FAF8F5;               /* 暖米白背景 */
  --white:#FFFFFF;
  --text:#4A403A;             /* 深咖啡字 */
  --text-light:#7A706A;       /* 淺灰字 */
  --border:#EAE1D9;
  --accent-banner:#EEDCD3;    /* hero 米橘 */

  /* 功能色 */
  --sale:#D15656;             /* 紅—優惠/特價 */
  --gr:#5B8E3F;               /* 綠—成功/上架 */
  --gr-light:#EAF3DE;
  --pu:#7B72D6;               /* 紫—經銷 / VIP */
  --pu-dark:#5F56B6;
  --pu-light:#EEEDFE;
  --am:#BA7517;               /* 琥珀—加價購 */
  --am-light:#FAEEDA;
  --red:#A32D2D;
  --red-light:#FCEBEB;

  --radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-pill:999px;
  --shadow-sm:0 2px 8px rgba(74,64,58,0.05);
  --shadow-md:0 4px 16px rgba(74,64,58,0.08);
  --shadow-lg:0 8px 24px rgba(74,64,58,0.10);
}
body{
  font-family:'Noto Sans TC','微軟正黑體',sans-serif;
  background:var(--bg);color:var(--text);line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-bottom:90px;
}
@media(min-width:900px){body{padding-bottom:0}}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer}
img{max-width:100%;display:block}

/* SKIP LINK */
.skip-link{position:absolute;top:-48px;left:8px;background:var(--primary);color:#fff;padding:10px 18px;border-radius:8px;font-weight:700;z-index:9999;transition:top .2s}
.skip-link:focus{top:8px}

/* FOCUS VISIBLE */
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}

/* ============================
   ANNOUNCEMENT BAR
   ============================ */
.announcement-bar{
  background:var(--primary);color:#fff;text-align:center;
  padding:9px 15px;font-size:13px;letter-spacing:1.5px;font-weight:500;
}
.announcement-bar strong{font-weight:700}

/* ============================
   HEADER
   ============================ */
header{
  background:var(--white);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:100;
}
.header-container{
  max-width:1200px;margin:0 auto;padding:14px 20px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.logo{
  font-family:'Playfair Display',serif;font-size:24px;font-weight:700;
  color:var(--primary);letter-spacing:2px;display:flex;align-items:center;gap:6px;
  white-space:nowrap;
}
.logo .logo-emoji{font-size:22px}
.logo small{font-size:11px;color:var(--text-light);font-weight:500;letter-spacing:1px;font-family:'Noto Sans TC',sans-serif;display:none}
@media(min-width:1024px){.logo small{display:inline}}

.nav-links{display:none;gap:24px;align-items:center}
/* 768px 起顯示桌面導覽列（平板也看得到），底部 nav 在 900px 才消失 */
@media(min-width:768px){.nav-links{display:flex}}
.nav-links button{
  background:none;border:none;font-size:14px;font-weight:500;color:var(--text);
  padding:6px 0;position:relative;transition:color .25s;
}
.nav-links button::after{
  content:'';position:absolute;bottom:-2px;left:50%;width:0;height:2px;
  background:var(--primary);transition:all .25s;transform:translateX(-50%);
}
.nav-links button:hover{color:var(--primary)}
.nav-links button:hover::after,.nav-links button.active::after{width:100%}
.nav-links button.active{color:var(--primary);font-weight:700}
.nav-links button.dealer-only,.nav-links button.admin-only{display:none}
body.role-dealer .nav-links button.dealer-only,
body.role-admin .nav-links button.dealer-only,
body.role-admin .nav-links button.admin-only{display:inline-block}

/* ============================
   SHIPPING METHOD TOGGLE (checkout modal)
   ============================ */
.shipping-toggle{display:flex;gap:8px;margin-top:6px}
.ship-opt{
  flex:1;padding:10px 12px;border:1.5px solid var(--border);background:var(--white);
  color:var(--text);font-size:13px;font-weight:600;border-radius:8px;
  cursor:pointer;transition:all .2s;
}
.ship-opt:hover{border-color:var(--primary-light);background:var(--bg)}
.ship-opt.active{border-color:var(--primary);background:var(--primary-light);color:var(--primary-dark)}

/* PAYMENT METHOD TOGGLE (LINE Pay / 銀行轉帳) */
.payment-toggle{display:flex;gap:8px;margin-top:6px}
.pay-opt{
  flex:1;padding:12px 10px;border:1.5px solid var(--border);background:var(--white);
  color:var(--text);font-size:13px;font-weight:600;border-radius:8px;
  cursor:pointer;transition:all .2s;display:flex;flex-direction:column;
  align-items:center;gap:2px;line-height:1.3;
}
.pay-opt:hover{border-color:var(--primary-light);background:var(--bg)}
.pay-opt.active{border-color:var(--primary);background:var(--primary-light);color:var(--primary-dark)}
.pay-opt-icon{font-size:22px;line-height:1;margin-bottom:2px}
.pay-opt-label{font-size:13px;font-weight:700}
.pay-opt-sub{font-size:10px;color:var(--text-light);font-weight:500}
.pay-opt.active .pay-opt-sub{color:var(--primary-dark);opacity:.85}
.cvstore-display{
  padding:10px 12px;background:var(--bg);border-radius:8px;
  font-size:13px;color:var(--text);margin-bottom:8px;border:1px dashed var(--border);
}
.cvstore-display.selected{
  background:var(--gr-light);border-style:solid;border-color:var(--gr);color:var(--text);
}
.cvstore-pick-btn{width:100%;padding:10px;font-size:13px}

/* ============================
   SEARCH BAR + 搜尋模式
   ============================ */
.search-bar{display:none;align-items:center;gap:6px;flex:0 1 280px}
@media(min-width:900px){.search-bar{display:flex}}

/* 搜尋狀態列 — 預設隱藏,body.searching 才顯示 */
.search-status-bar{
  display:none;max-width:1200px;margin:24px auto 8px;padding:0 20px;
  justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
}
.search-status-bar h3{
  font-family:'Noto Sans TC',sans-serif;font-size:18px;font-weight:700;
  color:var(--text);margin:0;letter-spacing:0.5px;
}
.search-status-bar .btn-outline{padding:8px 16px;font-size:13px}

/* 搜尋模式:隱藏首頁裝飾區塊,只留商品/組合包列表 + filter chips */
body.searching .search-status-bar{display:flex}
body.searching #page-shop > .hero-banner,
body.searching #page-shop > .category-showcase,
body.searching #page-shop > .promise-band,
body.searching #page-shop > .view-all-wrap,
body.searching #page-shop > .section-title{display:none}
.search-input{width:100%;padding:8px 12px;border-radius:20px;border:1.5px solid var(--border);background:var(--white);font-size:13px;color:var(--text);font-family:inherit;outline:none;transition:all .2s}
.search-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(216,129,102,0.1)}
.search-input::placeholder{color:var(--text-light)}
.search-clear-btn{background:none;border:none;font-size:16px;color:var(--text-light);padding:4px 8px;cursor:pointer;transition:color .2s;flex-shrink:0}
.search-clear-btn:hover{color:var(--primary)}

.header-icons{display:flex;gap:14px;align-items:center;font-size:13px;font-weight:500}
.header-icons button{
  background:none;border:none;color:var(--text);font-size:13px;
  padding:6px 8px;border-radius:6px;transition:all .2s;display:flex;align-items:center;gap:5px;
}
.header-icons button:hover{color:var(--primary);background:var(--primary-light)}
.role-pill.dealer{color:var(--pu)}
.role-pill.admin{color:var(--am)}
.role-pill.customer{color:var(--primary-dark)}
.role-pill.customer.vip{
  color:#7A5400;
  background:linear-gradient(135deg, #FFF3D1 0%, #FFE5A0 100%);
  border-radius:999px;padding:4px 14px !important;
  box-shadow:inset 0 0 0 1px #E0B547;
}
.role-pill.customer.vip:hover{background:linear-gradient(135deg,#FFEEBF 0%, #FFDA82 100%) !important}

/* 會員下拉選單 (從 role-pill 下方彈出) */
.role-pill-wrap{position:relative;display:inline-block}
.account-menu{
  display:none;position:absolute;top:calc(100% + 6px);right:0;
  background:var(--white);border:1px solid var(--border);border-radius:8px;
  box-shadow:var(--shadow-md);min-width:160px;padding:6px;z-index:200;
}
.account-menu.open{display:block}
.acct-item{
  width:100%;text-align:left !important;padding:9px 12px !important;
  background:none;border:none;font-size:13px;font-weight:500;color:var(--text);
  border-radius:5px;cursor:pointer;transition:background .15s;display:block !important;
}
.acct-item:hover{background:var(--primary-light);color:var(--primary-dark)}
.cart-link{position:relative}
.cart-count{
  background:var(--primary);color:#fff;border-radius:999px;
  padding:1px 7px;font-size:11px;font-weight:700;min-width:20px;text-align:center;
}

/* ============================
   PAGE
   ============================ */
.page{display:none}
.page.active{display:block;animation:fadeIn .25s ease-out}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* ============================
   HERO BANNER
   ============================ */
.hero-banner{
  width:100%;min-height:420px;
  background:linear-gradient(135deg,#EEDCD3 0%,#F5DACE 60%,#FAEAD9 100%);
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  text-align:center;padding:60px 24px;position:relative;overflow:hidden;
}
.hero-banner-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 35%;
  opacity:0.7;
  filter:saturate(1.05) contrast(0.95);
  pointer-events:none;z-index:0;
}
/* 漸層遮罩:中央亮、上下與邊角自然融合,讓文字更突出 */
.hero-banner::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 60% at center,rgba(255,248,240,0.35) 0%,rgba(255,248,240,0.20) 50%,rgba(255,248,240,0) 80%),
    linear-gradient(180deg,rgba(238,220,211,0) 0%,rgba(238,220,211,0) 65%,rgba(238,220,211,0.85) 100%);
}
.hero-banner > h2,.hero-banner > p,.hero-banner > .btn-primary{position:relative;z-index:2}
.hero-banner h2{
  font-size:32px;margin-bottom:12px;color:var(--text);font-weight:700;
  line-height:1.3;letter-spacing:1px;
  text-shadow:0 2px 14px rgba(255,248,240,0.85),0 1px 3px rgba(74,64,58,0.12);
}
.hero-banner p{
  font-size:16px;margin-bottom:24px;color:var(--text);font-weight:500;
  text-shadow:0 1px 8px rgba(255,248,240,0.9);
}
@media(min-width:768px){
  .hero-banner{min-height:500px;padding:70px 24px}
  .hero-banner-bg{object-position:center 30%}
  .hero-banner h2{font-size:46px;margin-bottom:18px;letter-spacing:2px}
  .hero-banner p{font-size:18px;margin-bottom:30px}
}
.btn-primary{
  background:var(--primary);color:#fff;padding:13px 34px;border-radius:30px;
  font-size:15px;font-weight:500;border:none;letter-spacing:1px;
  transition:all .3s;display:inline-flex;align-items:center;gap:6px;
  position:relative;z-index:1;
}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-md)}

.btn-outline{
  display:inline-block;border:1.5px solid var(--primary);color:var(--primary);
  padding:9px 28px;border-radius:20px;font-size:14px;font-weight:500;
  background:transparent;transition:all .3s;letter-spacing:1px;
}
.btn-outline:hover{background:var(--primary);color:#fff}

/* ============================
   SECTION TITLE
   ============================ */
.section-title{text-align:center;margin:60px 0 32px;padding:0 20px}
.section-title h3{
  font-family:'Playfair Display',serif;font-size:28px;margin-bottom:8px;
  color:var(--text);font-weight:700;letter-spacing:1px;
}
.section-title h3 .zh{font-family:'Noto Sans TC',sans-serif;font-weight:700;font-size:22px;display:block;margin-top:4px;letter-spacing:2px}
.section-title p{color:var(--text-light);font-size:14px;letter-spacing:1px}
.section-title .vip-tag{display:inline-block;background:var(--pu);color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:8px;margin-left:8px;letter-spacing:1px;vertical-align:middle}

/* ============================
   CATEGORY SHOWCASE — 隔行交錯橫向 layout
   ============================ */
.category-showcase{
  max-width:1200px;margin:0 auto 50px;padding:0 20px;
  display:flex;flex-direction:column;gap:24px;
}
.cat-showcase-row{
  background:var(--white);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);
  display:grid;grid-template-columns:1fr;
}
@media(min-width:768px){
  .cat-showcase-row{grid-template-columns:1fr 1fr;min-height:340px}
  .cat-showcase-row.reverse .csr-img{order:2}
  .cat-showcase-row.reverse .csr-info{order:1}
}
.csr-img{
  background:linear-gradient(135deg,var(--accent-banner) 0%,var(--primary-light) 100%);
  display:flex;align-items:center;justify-content:center;
  min-height:240px;position:relative;overflow:hidden;
}
.csr-emoji{font-size:120px;line-height:1}
.csr-img img.csr-real-img{
  width:100%;height:100%;object-fit:cover;display:block;
  position:absolute;inset:0;
}
.csr-info{padding:40px 36px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.csr-eyebrow{
  font-family:'Playfair Display',serif;font-size:13px;
  letter-spacing:3px;color:var(--text-light);text-transform:uppercase;
}
.csr-title{
  font-family:'Noto Sans TC',sans-serif;font-size:28px;
  color:var(--text);font-weight:700;line-height:1.3;letter-spacing:1px;
}
.csr-desc{font-size:14px;color:var(--text-light);line-height:1.9}
.csr-cta{
  align-self:flex-start;background:var(--text);color:#fff;
  padding:14px 32px;border:none;border-radius:999px;
  font-size:14px;font-weight:700;letter-spacing:1px;cursor:pointer;
  transition:all .2s;margin-top:6px;
}
.csr-cta:hover{background:var(--primary-dark);transform:translateY(-2px)}

/* CATEGORY PAGE (per-type subpage) */
.cat-hero{
  max-width:1200px;margin:0 auto 30px;
  display:grid;grid-template-columns:1fr;
  background:var(--white);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);
}
@media(min-width:768px){.cat-hero{grid-template-columns:1fr 1fr;min-height:280px}}
.cat-hero-bg{
  background:linear-gradient(135deg,var(--accent-banner) 0%,var(--primary-light) 100%);
  display:flex;align-items:center;justify-content:center;min-height:200px;
  position:relative;overflow:hidden;
}
.cat-hero-emoji{font-size:120px;line-height:1}
.cat-hero-bg img.cat-hero-img{
  width:100%;height:100%;object-fit:cover;display:block;
  position:absolute;inset:0;
}

/* admin: 系列橫幅圖片設定 */
.cat-image-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:768px){.cat-image-grid{grid-template-columns:repeat(3,1fr)}}
.cat-image-row{
  border:1px solid var(--border);border-radius:var(--radius-md);
  background:var(--bg);overflow:hidden;display:flex;flex-direction:column;
}
.cat-image-preview{
  aspect-ratio:3/2;background:linear-gradient(135deg,var(--accent-banner) 0%,var(--primary-light) 100%);
  display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;
}
.cat-image-preview-img{width:100%;height:100%;object-fit:cover;display:block}
.cat-image-preview-fallback{
  font-size:14px;color:var(--text-light);font-weight:600;
  padding:10px;text-align:center;
}
.cat-image-form{padding:12px;display:flex;flex-direction:column;gap:8px}
.cat-image-label{font-size:13px;font-weight:700;color:var(--text)}
.cat-image-input{
  padding:8px 10px;border:1px solid var(--border);border-radius:6px;
  font:inherit;font-size:12px;background:var(--white);
}
.cat-image-input:focus{outline:none;border-color:var(--primary)}
.cat-image-actions{display:flex;gap:6px}
.cat-hero-info{padding:36px 32px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.cat-hero-info h2{
  font-family:'Noto Sans TC',sans-serif;font-size:26px;
  color:var(--text);font-weight:700;letter-spacing:1px;
}
.cat-hero-info p{font-size:14px;color:var(--text-light);line-height:1.8}
.cat-hero-back{font-size:13px;color:var(--primary);text-decoration:none;font-weight:700;margin-top:6px}
.cat-hero-back:hover{color:var(--primary-dark)}
.category-card{
  background:var(--white);padding:36px 30px;border-radius:var(--radius-lg);
  text-align:center;box-shadow:var(--shadow-sm);transition:all .3s;
  cursor:pointer;border:1px solid transparent;
}
.category-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--primary-light)}
.category-card .cat-emoji{font-size:48px;margin-bottom:14px;display:block;line-height:1}
.category-card h4{
  font-family:'Playfair Display',serif;font-size:22px;margin-bottom:14px;
  color:var(--primary);font-weight:700;letter-spacing:1px;
}
.category-card h4 .zh{font-family:'Noto Sans TC',sans-serif;font-size:16px;font-weight:700;display:block;margin-top:4px;color:var(--text);letter-spacing:2px}
.category-card p{
  font-size:14px;margin-bottom:22px;color:var(--text-light);
  text-align:left;line-height:1.8;
}

/* ============================
   PROMISE BAND
   ============================ */
.promise-band{
  max-width:1160px;width:calc(100% - 40px);
  margin:0 auto 50px;padding:30px 20px;
  background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  display:grid;grid-template-columns:repeat(2,1fr);gap:18px;
}
@media(min-width:768px){
  .promise-band{grid-template-columns:repeat(4,1fr);padding:36px 30px}
}
.promise-item{text-align:center;padding:8px 4px}
.promise-item .pi-icon{font-size:36px;margin-bottom:8px;display:block;line-height:1}
.promise-item h6{font-size:15px;font-weight:700;color:var(--text);margin-bottom:4px}
.promise-item small{font-size:12px;color:var(--text-light);font-weight:400;line-height:1.6;display:block}

/* ============================
   PRODUCT / BUNDLE GRID
   ============================ */
.product-grid{
  max-width:1200px;margin:0 auto 40px;padding:0 20px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
}
@media(min-width:768px){.product-grid{grid-template-columns:repeat(3,1fr);gap:24px}}
@media(min-width:1024px){.product-grid{grid-template-columns:repeat(4,1fr)}}

.product-card{
  background:var(--white);border-radius:var(--radius-md);overflow:hidden;
  box-shadow:var(--shadow-sm);position:relative;transition:all .3s;
  display:flex;flex-direction:column;
}
.product-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.product-badge{
  position:absolute;top:10px;left:10px;background:var(--sale);color:#fff;
  font-size:11px;font-weight:700;padding:3px 9px;border-radius:3px;letter-spacing:1px;z-index:2;
}
.product-badge.new{background:var(--gr)}
.product-badge.hot{background:#E8784A}

/* ====== COUNTDOWN TIMER (限時上架倒數) ====== */
.countdown-timer{
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(0,0,0,0.78);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.5px;
  padding:4px 8px;border-radius:4px;
  font-variant-numeric:tabular-nums;line-height:1;
}
/* 卡片右上 (相對於 .product-card) */
.product-card .countdown-timer.cd-sm{
  position:absolute;top:10px;right:10px;z-index:2;
}
/* bundle 已經有 .bundle-ribbon 在右上 → countdown 移到 ribbon 下方 */
.bundle-card .countdown-timer.cd-sm{
  top:38px;right:10px;
}
.countdown-timer.cd-lg{
  font-size:14px;padding:6px 12px;letter-spacing:1px;
}
.countdown-timer.urgent{
  background:#D04545;animation:cd-pulse 1.4s ease-in-out infinite;
}
.countdown-timer.expired{background:#888;animation:none}
@keyframes cd-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(208,69,69,0.5)}
  50%{box-shadow:0 0 0 6px rgba(208,69,69,0)}
}
/* 商品 modal 的限時優惠倒數區 */
.pmd-countdown-wrap{
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,#FFF1EB 0%,#FFE4D6 100%);
  border:1px solid #F0BFA5;
  padding:10px 14px;border-radius:var(--radius-md);
  margin:10px 0;
}
.pmd-countdown-label{
  font-size:12px;color:#9E5530;font-weight:600;letter-spacing:1px;
}
/* admin 列表中限時資訊 */
.bli-schedule{
  font-size:11px;color:var(--text-light);margin-top:4px;
  font-weight:500;
}
.bli-schedule.expired{color:#D04545;font-weight:700}
.bli-schedule code{
  background:var(--bg);padding:1px 5px;border-radius:3px;
  font-size:11px;color:var(--text);
}
.product-img{
  width:100%;aspect-ratio:1;background:var(--accent-banner);
  display:flex;align-items:center;justify-content:center;
  font-size:80px;line-height:1;
}
.product-info{padding:16px 14px;text-align:center;flex:1;display:flex;flex-direction:column}
.product-info h5{
  font-size:14px;margin-bottom:4px;font-weight:700;color:var(--text);
  min-height:40px;display:flex;align-items:center;justify-content:center;line-height:1.4;
}
.product-info .product-sub{font-size:11px;color:var(--text-light);margin-bottom:10px;font-weight:400}
.price-wrap{display:flex;justify-content:center;align-items:baseline;gap:8px;margin-top:auto}
.price-sale{color:var(--sale);font-weight:700;font-size:18px}
.price-regular{text-decoration:line-through;color:var(--text-light);font-size:13px}
.add-cart-btn{
  margin:12px 14px 14px;padding:9px;border-radius:6px;border:1.5px solid var(--primary);
  background:transparent;color:var(--primary);font-size:13px;font-weight:500;
  transition:all .25s;
}
.add-cart-btn:hover{background:var(--primary);color:#fff}

/* BUNDLE CARD（使用 product-card 為基礎，加 ribbon） */
.bundle-card{position:relative}
.bundle-ribbon{
  position:absolute;top:0;right:0;background:var(--primary);color:#fff;
  font-size:12px;font-weight:700;padding:5px 12px;border-radius:0 var(--radius-md) 0 var(--radius-md);
  letter-spacing:1px;z-index:2;
}
.bundle-card.dealer .bundle-ribbon{background:var(--pu)}
.bundle-vip-tag{
  position:absolute;top:10px;left:10px;background:var(--pu);color:#fff;
  font-size:10px;font-weight:700;padding:3px 8px;border-radius:3px;letter-spacing:1px;z-index:2;
}
.bundle-emojis-row{font-size:48px;letter-spacing:6px;line-height:1}
.bundle-items-list{font-size:11px;color:var(--text-light);line-height:1.6;min-height:42px;margin-bottom:8px}
.bundle-save{display:inline-block;background:var(--gr-light);color:var(--gr);font-size:11px;font-weight:700;padding:2px 8px;border-radius:8px;margin-top:6px}

/* FILTER */
.filter-row{
  max-width:1200px;margin:0 auto 24px;padding:0 20px;
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
}
.filter-btn{
  padding:7px 18px;border-radius:20px;border:1.5px solid var(--border);
  background:var(--white);font-size:13px;font-weight:500;color:var(--text);
  transition:all .25s;
}
.filter-btn:hover{border-color:var(--primary)}
.filter-btn.active{border-color:var(--primary);background:var(--primary);color:#fff}

.view-all-wrap{text-align:center;margin:0 0 70px}

/* ============================
   DEALER PAGE
   ============================ */
.dealer-banner{
  max-width:1200px;margin:30px auto 0;padding:18px 24px;
  background:linear-gradient(135deg,var(--pu-light) 0%,#F5E8FC 100%);
  border:1.5px solid rgba(123,114,214,0.25);border-radius:var(--radius-lg);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.db-info{display:flex;align-items:center;gap:12px}
.db-icon{font-size:28px}
.db-text{font-size:14px;font-weight:700;color:var(--pu-dark)}
.db-text small{display:block;font-size:12px;font-weight:500;color:var(--text-light);margin-top:2px}
.db-logout{
  padding:8px 18px;border-radius:6px;border:1.5px solid var(--pu);
  background:transparent;color:var(--pu);font-size:13px;font-weight:500;transition:all .2s;
}
.db-logout:hover{background:var(--pu);color:#fff}

.dealer-order-card{
  max-width:1160px;width:calc(100% - 40px);
  margin:0 auto 50px;padding:24px;
  background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
}
.dealer-banner{max-width:1160px;width:calc(100% - 40px)}
.dealer-order-card h3{font-size:18px;margin-bottom:6px;color:var(--pu-dark);font-weight:700}
.dealer-order-card .doc-sub{font-size:13px;color:var(--text-light);margin-bottom:18px}
.do-fields{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:600px){.do-fields{grid-template-columns:1fr 1fr}}
.do-fields .full{grid-column:1/-1}

/* ============================
   FORM CONTROLS
   ============================ */
label{font-size:12px;font-weight:700;color:var(--text-light);display:block;margin-bottom:6px}
input[type=text],input[type=number],input[type=password],input[type=tel],input[type=email],select,textarea{
  width:100%;padding:10px 12px;border-radius:6px;border:1.5px solid var(--border);
  background:var(--white);font-family:inherit;font-size:13px;font-weight:500;
  color:var(--text);outline:none;transition:all .2s;
}
textarea{min-height:70px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(216,129,102,0.1)}

/* ============================
   CART PAGE
   ============================ */
.cart-header{
  max-width:1200px;margin:30px auto 18px;padding:0 20px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
}
.cart-header h2{font-family:'Playfair Display',serif;font-size:26px;font-weight:700;color:var(--text)}
.clear-btn{background:none;border:none;font-size:13px;color:var(--text-light);font-weight:500;transition:color .2s}
.clear-btn:hover{color:var(--sale)}

#cart-content{max-width:1200px;margin:0 auto;padding:0 20px}
@media(min-width:900px){
  #cart-content{
    display:grid;grid-template-columns:1fr 360px;
    grid-auto-rows:min-content;gap:14px 28px;align-items:start;
  }
  .cart-item,.addon-section{grid-column:1}
  .cart-summary{
    grid-column:2;grid-row:1 / span 9999;
    position:sticky;top:90px;align-self:start;height:fit-content;
  }
  .cart-empty{grid-column:1/-1}
}

.cart-empty{text-align:center;padding:60px 20px;color:var(--text-light)}
.cart-empty-emoji{font-size:64px;margin-bottom:14px}
.cart-empty h3{font-size:20px;font-weight:700;margin-bottom:8px;color:var(--text)}
.cart-empty p{font-size:14px;margin-bottom:18px}

.cart-item{
  background:var(--white);border-radius:var(--radius-md);padding:14px 16px;
  border:1px solid var(--border);margin-bottom:10px;
  display:flex;gap:14px;align-items:center;box-shadow:var(--shadow-sm);
}
.cart-item.addon-item{border-color:var(--am-light);background:#FFFCF6}
.cart-item-emoji{font-size:36px;flex-shrink:0;width:60px;height:60px;background:var(--accent-banner);border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cart-item-emoji.bundle{font-size:20px;padding:4px}
.cart-emoji-grid{display:flex;flex-wrap:wrap;gap:2px;width:100%;height:100%;align-items:center;align-content:center;justify-content:center;line-height:1}
.cart-emoji-grid > span{font-size:inherit}
.cart-item.addon-item .cart-item-emoji{background:var(--am-light)}
.cart-item-info{flex:1;min-width:0}
.cart-item-name{font-size:14px;font-weight:700;margin-bottom:2px;color:var(--text)}
.cart-item-type{font-size:11px;color:var(--text-light);font-weight:500;margin-bottom:6px}
.cart-item-type.dealer{color:var(--pu)}
.cart-item-type.addon{color:var(--am)}
.cart-item-price{font-size:14px;color:var(--sale);font-weight:700}
.qty-control{display:flex;align-items:center;gap:8px;margin-top:8px}
.qty-btn{
  width:32px;height:32px;border-radius:6px;border:1.5px solid var(--border);
  background:var(--white);font-size:16px;font-weight:700;color:var(--text);
  display:flex;align-items:center;justify-content:center;transition:all .2s;
}
.qty-btn:hover{background:var(--primary);border-color:var(--primary);color:#fff}
.qty-num{font-size:14px;font-weight:700;min-width:22px;text-align:center}
.remove-btn{
  background:none;border:none;font-size:18px;color:#ccc;
  padding:6px;border-radius:6px;transition:all .2s;
}
.remove-btn:hover{color:var(--red);background:var(--red-light)}

.cart-summary{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow-sm);
  width:100%;margin-top:14px;
}
@media(min-width:900px){.cart-summary{margin-top:0}}
.summary-title{font-size:16px;font-weight:700;margin-bottom:14px;color:var(--text);padding-bottom:10px;border-bottom:1px solid var(--border)}
.summary-row{display:flex;justify-content:space-between;font-size:13px;margin-bottom:10px;color:var(--text-light)}
.summary-row span:last-child{font-weight:700;color:var(--text)}
.free-ship-hint{font-size:12px;color:var(--primary);font-weight:500;text-align:center;margin:10px 0;padding:8px;background:var(--primary-light);border-radius:6px}
.free-ship-ok{color:var(--gr);font-weight:700}
.summary-divider{border:none;border-top:1px dashed var(--border);margin:14px 0}
.summary-total{display:flex;justify-content:space-between;font-size:18px;font-weight:700;align-items:baseline}
.summary-total .total-price{color:var(--sale);font-size:22px;font-family:'Playfair Display',serif}
.checkout-btn{
  width:100%;margin-top:16px;padding:14px;border-radius:30px;border:none;
  background:var(--primary);color:#fff;font-size:15px;font-weight:700;
  transition:all .3s;letter-spacing:1px;
}
.checkout-btn:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}

/* 手機版:結帳按鈕 sticky 在底部導覽列上方,確保長購物車也能立即看到 CTA */
@media(max-width:899px){
  .cart-summary .checkout-btn{
    position:sticky;
    bottom:calc(60px + env(safe-area-inset-bottom, 0px) + 8px); /* 60px ≈ bottom-nav 高度 */
    z-index:30;
    box-shadow:0 4px 16px rgba(216,129,102,0.35), 0 -2px 12px rgba(0,0,0,0.08);
  }
}
.back-shop-btn{
  padding:11px 28px;border-radius:30px;border:none;background:var(--primary);color:#fff;
  font-size:14px;font-weight:500;transition:all .25s;
}
.back-shop-btn:hover{background:var(--primary-dark)}

/* ============================
   ADDON SECTION
   ============================ */
.addon-section{
  background:linear-gradient(135deg,#FFF5E6 0%,#FCEAD5 100%);
  border:1.5px dashed rgba(186,117,23,0.3);border-radius:var(--radius-lg);
  padding:18px;margin-top:6px;position:relative;overflow:hidden;
}
.addon-section::before{
  content:'🎁';position:absolute;font-size:120px;opacity:0.05;right:-20px;top:-20px;
  pointer-events:none;transform:rotate(15deg);
}
.addon-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;flex-wrap:wrap;gap:8px;position:relative;z-index:1}
.addon-title{font-size:17px;font-weight:700;color:var(--am);display:flex;align-items:center;gap:8px}
.addon-flag{background:var(--am);color:#fff;font-size:11px;font-weight:700;padding:3px 9px;border-radius:6px;letter-spacing:1px}
.addon-sub{font-size:12px;color:var(--text-light);margin-bottom:14px;position:relative;z-index:1}
.addon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;position:relative;z-index:1}
.addon-card{
  background:var(--white);border-radius:var(--radius-md);padding:12px 10px;
  border:1.5px solid rgba(186,117,23,0.18);text-align:center;
  display:flex;flex-direction:column;align-items:center;
  transition:all .25s;position:relative;
}
.addon-card:hover{transform:translateY(-2px);border-color:var(--am)}
.addon-card.added{border-color:var(--gr);background:var(--gr-light)}
.addon-card.added::after{
  content:'✓ 已加購';position:absolute;top:6px;right:6px;
  background:var(--gr);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:5px;
}
.addon-emoji{font-size:30px;margin-bottom:4px;line-height:1}
.addon-name{font-size:12px;font-weight:700;line-height:1.3;margin-bottom:4px;min-height:30px;display:flex;align-items:center;justify-content:center}
.addon-price-row{display:flex;align-items:baseline;justify-content:center;gap:4px;margin-bottom:8px;flex-wrap:wrap}
.addon-orig{font-size:11px;color:var(--text-light);text-decoration:line-through}
.addon-special{font-size:18px;font-weight:700;color:var(--sale);font-family:'Playfair Display',serif}
.addon-add-btn{
  width:100%;padding:6px;border-radius:5px;border:none;background:var(--am);color:#fff;
  font-size:12px;font-weight:500;transition:all .2s;
}
.addon-add-btn:hover{background:#8B5610}
.addon-add-btn:disabled{background:var(--gr);cursor:default}

/* ============================
   ADMIN PAGE
   ============================ */
.admin-stats{
  max-width:1200px;margin:30px auto 24px;padding:0 20px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
}
@media(min-width:600px){.admin-stats{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.admin-stats{grid-template-columns:repeat(5,1fr)}}
.stat-card{
  background:var(--white);border-radius:var(--radius-md);padding:18px 14px;
  border:1px solid var(--border);text-align:center;box-shadow:var(--shadow-sm);
}
.stat-emoji{font-size:24px;margin-bottom:6px;line-height:1}
.stat-value{font-family:'Playfair Display',serif;font-size:24px;font-weight:700;color:var(--primary)}
.stat-label{font-size:12px;color:var(--text-light);font-weight:500;margin-top:2px}

/* 可點擊的 dashboard 統計卡 */
.stat-card.stat-clickable{
  cursor:pointer;transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.stat-card.stat-clickable:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:var(--primary-light);
}
.stat-card.stat-clickable:focus-visible{
  outline:2px solid var(--primary);outline-offset:2px;
}
.stat-card.stat-clickable:active{transform:translateY(0)}

/* 跳轉時高亮目標區塊 1.2 秒,讓使用者看清楚 */
.dash-jump-flash{
  animation:dashFlash 1.2s ease;
}
@keyframes dashFlash{
  0%   { box-shadow:0 0 0 0 rgba(216,129,102,0.6); }
  50%  { box-shadow:0 0 0 6px rgba(216,129,102,0.15); }
  100% { box-shadow:var(--shadow-sm); }
}

.admin-card{
  max-width:1160px;width:calc(100% - 40px);
  margin:0 auto 22px;
  background:var(--white);border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--border);box-shadow:var(--shadow-sm);
}
.admin-card-hd{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.admin-card-hd h3{font-size:16px;font-weight:700;color:var(--text)}
.admin-hint{font-size:12px;color:var(--text-light);font-weight:500}

.form-grid{
  display:grid;grid-template-columns:1fr;gap:14px;padding:20px;border-bottom:1px solid var(--border);
}
@media(min-width:600px){.form-grid{grid-template-columns:1fr 1fr}}

.visibility-toggle{display:flex;gap:10px;padding:0 20px 20px;border-bottom:1px solid var(--border)}
.vis-opt{
  flex:1;padding:14px;border-radius:var(--radius-md);border:2px solid var(--border);
  background:var(--bg);text-align:center;transition:all .2s;cursor:pointer;
}
.vis-opt:hover{border-color:var(--primary)}
.vis-opt.active{border-color:var(--primary);background:var(--primary-light)}
.vis-opt[data-vis=dealer].active{border-color:var(--pu);background:var(--pu-light)}
.vis-opt-icon{font-size:22px;margin-bottom:4px;display:block;line-height:1}
.vis-opt-label{font-size:14px;font-weight:700;color:var(--text)}
.vis-opt-sub{font-size:11px;color:var(--text-light);margin-top:2px}

.selector-area,.discount-area{padding:20px;border-bottom:1px solid var(--border)}
.selector-label{font-size:12px;font-weight:700;color:var(--text-light);margin-bottom:10px}
.prod-selector{display:flex;flex-wrap:wrap;gap:8px}
.sel-chip{
  padding:7px 14px;border-radius:20px;border:1.5px solid var(--border);
  background:var(--bg);font-size:12px;font-weight:500;color:var(--text);
  display:flex;align-items:center;gap:5px;transition:all .2s;user-select:none;
}
.sel-chip:hover{border-color:var(--primary)}
.sel-chip.selected{background:var(--primary-light);border-color:var(--primary);color:var(--primary-dark)}
.discount-row{display:flex;align-items:center;gap:14px}
.discount-row input[type=range]{flex:1;accent-color:var(--primary)}
.disc-label{font-size:13px;font-weight:700;color:var(--text-light)}
.disc-val{font-size:20px;font-weight:700;color:var(--primary);min-width:90px;text-align:right;font-family:'Playfair Display',serif}

.preview-box{
  padding:16px 20px;background:var(--primary-light);
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:10px;min-height:72px;
}
.preview-hint{font-size:13px;color:var(--primary-dark);font-weight:500}
.preview-emojis{font-size:28px;letter-spacing:4px}
.preview-names{font-size:12px;color:var(--text);font-weight:500;margin-top:4px}
.preview-right{text-align:right}
.preview-orig{font-size:12px;color:var(--text-light);text-decoration:line-through}
.preview-final{font-size:22px;font-weight:700;color:var(--sale);font-family:'Playfair Display',serif}
.preview-save{background:var(--gr-light);color:var(--gr);font-size:11px;font-weight:700;padding:3px 9px;border-radius:6px;display:inline-block;margin-top:3px}

.form-actions{padding:16px 20px;display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.pill-btn{
  padding:9px 20px;border-radius:6px;border:none;background:var(--primary-light);
  color:var(--primary-dark);font-size:13px;font-weight:500;transition:all .2s;
}
.pill-btn:hover{background:var(--primary);color:#fff}
.pill-btn.green{background:var(--gr-light);color:var(--gr)}
.pill-btn.green:hover{background:var(--gr);color:#fff}
.pill-btn.gray{background:#F0EBE5;color:var(--text-light)}
.pill-btn.gray:hover{background:#D9D0C8;color:var(--text)}

/* BUNDLE / ADDON LIST IN ADMIN */
.bundle-list-item{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--border);transition:background .15s}
.bundle-list-item:last-child{border-bottom:none}
.bundle-list-item:hover{background:var(--bg)}
.status-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.dot-on{background:var(--gr)}
.dot-off{background:var(--sale)}
.bli-emojis{font-size:24px;width:60px;text-align:center;flex-shrink:0}
.bli-info{flex:1;min-width:0}
.bli-name{font-size:14px;font-weight:700;margin-bottom:2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bli-vis{font-size:10px;font-weight:700;padding:2px 7px;border-radius:5px}
.bli-vis.public{background:var(--gr-light);color:var(--gr)}
.bli-vis.dealer{background:var(--pu-light);color:var(--pu)}
.bli-vis.addon{background:var(--am-light);color:var(--am)}
.bli-sub{font-size:12px;color:var(--text-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bli-tag{font-size:11px;color:var(--text-light);font-weight:500}
.bli-price-col{text-align:right;flex-shrink:0;margin-right:6px}
.bli-final{font-size:15px;font-weight:700;color:var(--sale);font-family:'Playfair Display',serif}
.bli-orig{font-size:11px;color:var(--text-light);text-decoration:line-through}
.bli-disc-badge{display:inline-block;background:var(--gr-light);color:var(--gr);font-size:11px;font-weight:700;padding:2px 7px;border-radius:5px}
.row-actions{display:flex;flex-direction:column;gap:5px;flex-shrink:0}
.row-actions .pill-btn{font-size:11px;padding:5px 12px}
.bundle-admin-empty{padding:24px;text-align:center;color:var(--text-light);font-size:13px}

#addon-admin-list{margin-top:0}

/* ORDER TABLE */
.table-wrap{overflow-x:auto;padding:0 4px}
.order-table{width:100%;border-collapse:collapse;min-width:480px}
.order-table th{padding:11px 16px;text-align:left;font-size:12px;font-weight:700;color:var(--text-light);background:var(--bg);border-bottom:1px solid var(--border);white-space:nowrap}
.order-table td{padding:13px 16px;font-size:13px;border-bottom:1px solid var(--border)}
.order-table tr:last-child td{border-bottom:none}
.order-table tr:hover td{background:var(--bg)}
.order-status{display:inline-block;padding:3px 9px;border-radius:6px;font-size:11px;font-weight:700}
.s-paid{background:var(--gr-light);color:var(--gr)}
.s-ship{background:#E6F1FB;color:#185FA5}
.s-pend{background:var(--am-light);color:var(--am)}
.s-dealer{background:var(--pu-light);color:var(--pu)}

/* ============================
   FOOTER
   ============================ */
footer{background:var(--white);border-top:1px solid var(--border);padding:50px 20px 20px;margin-top:60px}
.footer-container{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1fr;gap:30px;margin-bottom:30px;
}
@media(min-width:600px){.footer-container{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.footer-container{grid-template-columns:repeat(4,1fr)}}
.footer-col h5{font-size:15px;margin-bottom:18px;color:var(--text);font-weight:700;letter-spacing:1px}
.footer-col ul{list-style:none}
.footer-col ul li{margin-bottom:10px;color:var(--text-light);font-size:13px;cursor:pointer;transition:color .2s}
.footer-col ul li:hover{color:var(--primary)}
.footer-col p{font-size:13px;color:var(--text-light);line-height:1.7;margin-bottom:14px}
.footer-pay{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.footer-pay span{background:var(--bg);border:1px solid var(--border);font-size:10px;font-weight:700;color:var(--text);padding:4px 8px;border-radius:5px;letter-spacing:1px}

/* 訂單查詢區塊 (footer 內) */
.footer-lookup{margin-top:14px}
.footer-lookup-row{display:flex;gap:6px;margin-top:6px}
.footer-lookup-row input{
  flex:1;min-width:0;padding:8px 10px;border:1px solid var(--border);
  border-radius:6px;font-size:12px;font-family:inherit;background:var(--white);
}
.footer-lookup-row input:focus{outline:none;border-color:var(--primary)}
.footer-lookup-btn{
  padding:8px 14px;border:none;border-radius:6px;
  background:var(--primary);color:#fff;font-size:12px;font-weight:700;
  cursor:pointer;transition:background .2s;white-space:nowrap;
}
.footer-lookup-btn:hover{background:var(--primary-dark)}
.footer-lookup-err{min-height:16px;font-size:11px;color:var(--red);margin-top:4px;font-weight:700}
.footer-bottom{
  max-width:1200px;margin:0 auto;text-align:center;padding-top:18px;
  border-top:1px solid var(--border);color:var(--text-light);font-size:12px;
}

/* ============================
   BOTTOM NAV (mobile)
   ============================ */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;background:var(--white);
  border-top:1px solid var(--border);display:flex;z-index:99;
  box-shadow:0 -4px 12px rgba(0,0,0,0.05);
}
@media(min-width:900px){.bottom-nav{display:none}}
.bnav-btn{
  flex:1;padding:9px 6px 12px;border:none;background:transparent;
  font-size:11px;font-weight:500;color:var(--text-light);
  display:flex;flex-direction:column;align-items:center;gap:3px;
}
.bnav-btn.active{color:var(--primary)}
.bnav-icon{font-size:22px;line-height:1}
.bnav-badge{background:var(--primary);color:#fff;border-radius:10px;padding:1px 6px;font-size:10px;font-weight:700;min-width:18px;text-align:center}
.bnav-btn.dealer-only,.bnav-btn.admin-only{display:none}
body.role-dealer .bnav-btn.dealer-only,
body.role-admin .bnav-btn.dealer-only,
body.role-admin .bnav-btn.admin-only{display:flex}

/* ============================
   TOAST
   ============================ */
/* mobile: 顯示在底部 nav 上方；desktop: 顯示在 header 下方 */
.toast{
  display:none;position:fixed;
  bottom:110px;left:50%;transform:translateX(-50%);
  color:#fff;font-size:14px;font-weight:700;padding:11px 24px;
  border-radius:30px;z-index:9999;white-space:nowrap;
  box-shadow:var(--shadow-lg);pointer-events:none;
}
@media(min-width:900px){
  /* header sticky 高度 ~64px，top:75px 讓 toast 緊貼 header 下方 */
  .toast{bottom:auto;top:75px}
}

/* ============================
   STOCK MANAGEMENT
   ============================ */
.stock-badge{
  display:inline-block;font-size:11px;font-weight:700;
  padding:3px 9px;border-radius:6px;letter-spacing:0.5px;
  margin-top:6px;
}
.stock-badge.ok{background:var(--gr-light);color:var(--gr)}
.stock-badge.low{background:#FFF3D6;color:#A86A00}
.stock-badge.out{background:var(--red-light);color:var(--red)}

/* 缺貨商品卡:置灰 + 禁用 button */
.product-card.is-out{opacity:0.65}
.product-card.is-out .product-img{filter:grayscale(0.7)}
.product-card.is-out .add-cart-btn{
  background:#ECECEC !important;color:#999 !important;
  border-color:#DCDCDC !important;cursor:not-allowed;
}
.addon-card.is-out{opacity:0.6}
.addon-card.is-out .addon-add-btn{
  background:#CCC !important;cursor:not-allowed;
}

/* Dashboard 低庫存警示卡 */
.stat-card.stat-warning{transition:all .25s}
.stat-card.stat-warning.alert{
  background:linear-gradient(135deg,#FFF3D6,#FFEAB8);
  border-color:#E8A52E;
  box-shadow:0 0 0 3px rgba(232,165,46,0.15);
  animation:warnPulse 2.5s ease-in-out infinite;
}
.stat-card.stat-warning.alert .stat-value{color:#9B6D0E}
@keyframes warnPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(232,165,46,0.15)}
  50%{box-shadow:0 0 0 6px rgba(232,165,46,0.25)}
}

/* Admin 庫存列表編輯 */
.stock-row.stock-warn{background:rgba(255,243,214,0.4)}
.stock-edit{display:flex;gap:6px;align-items:center;flex-shrink:0}
.stock-input{
  width:70px;padding:6px 10px;font-size:13px;font-weight:700;
  border:1.5px solid var(--border);border-radius:6px;
  text-align:center;background:var(--white);
  font-family:inherit;
}
.stock-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(216,129,102,0.1)}
@media(max-width:600px){
  .stock-edit{flex:1;justify-content:flex-end}
  .stock-input{width:60px}
}

/* ============================
   ORDER MANAGEMENT (admin)
   ============================ */
.order-toolbar{
  display:flex;gap:8px;padding:14px 20px;
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;align-items:center;background:var(--bg);
}
.order-toolbar input[type=search]{
  flex:1;min-width:200px;padding:8px 12px;
  border-radius:6px;border:1.5px solid var(--border);
  background:var(--white);font:inherit;font-size:13px;
}
.order-toolbar select{
  padding:8px 10px;border-radius:6px;border:1.5px solid var(--border);
  background:var(--white);font-size:13px;font-weight:500;cursor:pointer;
}
.order-toolbar input:focus,.order-toolbar select:focus{
  outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(216,129,102,0.1);
}
.order-status.s-cancel{background:var(--red-light);color:var(--red)}
.order-table tr[onclick]{cursor:pointer;transition:background .15s}
.order-table tr[onclick]:hover{background:var(--primary-light) !important}
.order-pagination{
  padding:14px 20px;display:flex;gap:10px;align-items:center;justify-content:center;
  border-top:1px solid var(--border);background:var(--bg);
}
.order-pagination .page-info{font-size:13px;color:var(--text-light);font-weight:500}

/* Order detail modal */
.order-modal{max-width:600px;max-height:85vh;overflow-y:auto}
.order-detail .od-section{
  padding:14px 0;border-bottom:1px solid var(--border);
}
.order-detail .od-section:last-child{border-bottom:none}
.order-detail .od-title{
  font-size:14px;font-weight:700;color:var(--primary);
  margin-bottom:10px;letter-spacing:1px;
}
.order-detail .od-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:5px 0;font-size:13px;gap:12px;flex-wrap:wrap;
}
.order-detail .od-row > span:first-child{color:var(--text-light);font-weight:500;min-width:80px}
.order-detail .od-row code{background:var(--bg);padding:3px 7px;border-radius:4px;font-size:12px}
.order-detail .od-items{
  list-style:none;margin:0 0 12px;padding:0;
  background:var(--bg);border-radius:8px;overflow:hidden;
}
.order-detail .od-items li{
  display:flex;justify-content:space-between;align-items:center;
  padding:9px 12px;border-bottom:1px solid var(--border);font-size:13px;gap:10px;
}
.order-detail .od-items li:last-child{border-bottom:none}
.order-detail .item-name{flex:1;font-weight:500}
.order-detail .item-qty{color:var(--text-light);min-width:30px;text-align:center}
.order-detail .item-price{font-weight:700;color:var(--sale);min-width:80px;text-align:right}
.order-detail .od-totals{
  background:var(--primary-light);border-radius:8px;padding:12px 14px;
}
.order-detail .od-totals > div{
  display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px;color:var(--text-light);
}
.order-detail .od-totals .od-grand{
  margin-top:8px;padding-top:8px;border-top:1px dashed rgba(216,129,102,0.3);
  font-size:16px;font-weight:700;color:var(--text);
}
.order-detail .od-form{
  display:flex;gap:8px;align-items:end;margin-top:8px;flex-wrap:wrap;
}
.order-detail .od-form input{flex:1;min-width:160px}
.order-detail .od-actions{
  display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;
  padding-top:14px;border-top:1px solid var(--border);
}

@media(max-width:600px){
  .order-toolbar input[type=search]{min-width:100%}
  .order-detail .od-row{flex-direction:column;align-items:flex-start;gap:4px}
  .order-detail .od-row > span:first-child{font-size:11px}
}

/* ============================
   LOADING OVERLAY & SKELETON
   ============================ */
.loading-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(250,248,245,0.88);z-index:5000;
  align-items:center;justify-content:center;flex-direction:column;gap:14px;
}
.loading-overlay.active{display:flex}
.loading-spinner{
  width:44px;height:44px;border-radius:50%;
  border:4px solid var(--border);border-top-color:var(--primary);
  animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{font-size:14px;color:var(--text-light);font-weight:500;letter-spacing:1px}

/* Shimmer skeleton for product grid */
.product-skeleton{
  background:var(--white);border-radius:var(--radius-md);
  overflow:hidden;box-shadow:var(--shadow-sm);
}
.skeleton-img{
  width:100%;aspect-ratio:1;
  background:linear-gradient(90deg,var(--border) 25%,var(--bg) 50%,var(--border) 75%);
  background-size:200% 100%;animation:shimmer 1.4s ease-in-out infinite;
}
.skeleton-line{
  height:13px;border-radius:4px;margin:10px 14px;
  background:linear-gradient(90deg,var(--border) 25%,var(--bg) 50%,var(--border) 75%);
  background-size:200% 100%;animation:shimmer 1.4s ease-in-out infinite;
}
.skeleton-line.short{width:55%;margin-left:auto;margin-right:auto}
.skeleton-line.price{height:18px;width:42%;margin-left:auto;margin-right:auto;margin-bottom:14px}
@keyframes shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

/* ============================
   CONFIRM MODAL
   ============================ */
.confirm-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(74,64,58,0.5);z-index:2000;
  align-items:center;justify-content:center;padding:20px;
}
.confirm-overlay.active{display:flex}
.confirm-modal{
  background:var(--white);border-radius:var(--radius-lg);
  padding:28px 24px;max-width:340px;width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,0.25);
  animation:modalIn .2s ease-out;text-align:center;
}
.confirm-icon{font-size:38px;margin-bottom:10px;line-height:1}
.confirm-msg{font-size:15px;color:var(--text);font-weight:500;margin-bottom:22px;line-height:1.5}
.confirm-actions{display:flex;gap:10px;justify-content:center}
.confirm-btn{
  padding:10px 28px;border-radius:6px;border:none;
  font-size:14px;font-weight:700;transition:all .2s;
  min-width:88px;cursor:pointer;
}
.confirm-btn.danger{background:var(--red);color:#fff}
.confirm-btn.danger:hover{background:#8B2020}
.confirm-btn.cancel-btn{
  background:var(--bg);color:var(--text);
  border:1.5px solid var(--border);
}
.confirm-btn.cancel-btn:hover{border-color:var(--text)}

/* ============================
   MODAL
   ============================ */
.modal-overlay{
  display:none;position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(74,64,58,0.5);z-index:1000;
  align-items:center;justify-content:center;padding:20px;
}
.modal-overlay.active{display:flex}
.modal{
  background:var(--white);border-radius:var(--radius-lg);padding:28px;
  max-width:380px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,0.25);
  position:relative;animation:modalIn .25s ease-out;
  /* 內容過長時可滾動 (結帳 modal 加了優惠券 + 摘要區之後容易超出視窗) */
  max-height:calc(100vh - 40px);overflow-y:auto;
}
/* 滾動條淡化處理,避免視覺干擾 */
.modal::-webkit-scrollbar{width:6px}
.modal::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.2);border-radius:3px}
.modal::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.35)}
@keyframes modalIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.modal-close{
  position:sticky;top:0;float:right;background:var(--white);border:none;
  font-size:24px;color:var(--text-light);width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  transition:all .2s;z-index:10;margin:-12px -8px 0 0;
}
.modal-close:hover{background:var(--bg);color:var(--text)}
.modal-icon{font-size:42px;text-align:center;margin-bottom:6px;line-height:1}
.modal h3{font-family:'Playfair Display',serif;font-size:24px;text-align:center;margin-bottom:6px;color:var(--text)}
.modal-sub{font-size:13px;color:var(--text-light);text-align:center;margin-bottom:18px}
.modal-field{margin-bottom:14px}
.modal-actions{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.modal-btn{
  width:100%;padding:12px;border-radius:6px;border:none;
  font-size:14px;font-weight:700;transition:all .2s;
}
.modal-btn.primary{background:var(--primary);color:#fff}
.modal-btn.primary:hover{background:var(--primary-dark)}
.modal-btn.outline{background:transparent;color:var(--text-light);border:1.5px solid var(--border)}
.modal-btn.outline:hover{border-color:var(--text);color:var(--text)}
/* 登入 / 註冊 分頁切換 */
.auth-tabs{
  display:flex;gap:6px;margin:-6px -2px 16px;
  border-bottom:1.5px solid var(--border);padding-bottom:0;
}
.auth-tab{
  flex:1;padding:10px 0;background:none;border:none;
  font-size:14px;font-weight:600;color:var(--text-light);
  cursor:pointer;border-bottom:2.5px solid transparent;
  margin-bottom:-1.5px;transition:all .2s;
}
.auth-tab:hover{color:var(--text)}
.auth-tab.active{color:var(--primary);border-bottom-color:var(--primary)}
.auth-pane{display:none}
.auth-pane.active{display:block}

/* 我的訂單卡片列表 */
.my-order-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:all .2s;
  box-shadow:var(--shadow-sm);
}
.my-order-card:hover{transform:translateY(-1px);border-color:var(--primary-light);box-shadow:var(--shadow-md)}
.moc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;gap:10px}
.moc-id{font-size:13px;font-weight:700;background:var(--bg);padding:3px 8px;border-radius:4px;color:var(--text)}
.moc-meta{font-size:12px;color:var(--text-light);margin-bottom:4px}
.moc-items{font-size:13px;color:var(--text);margin-bottom:8px;line-height:1.5}
.moc-foot{display:flex;justify-content:space-between;align-items:center;padding-top:8px;border-top:1px dashed var(--border)}
.moc-total{font-size:16px;font-weight:700;color:var(--sale);font-family:'Playfair Display',serif}
.moc-view{font-size:12px;color:var(--primary);font-weight:600}

/* ===== 會員等級徽章 ===== */
.tier-badge{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:1px;
  padding:3px 10px;border-radius:999px;margin-left:8px;vertical-align:middle;
}
.tier-badge.vip{background:linear-gradient(135deg,#FFE5A0 0%,#FFC966 100%);color:#7A5400;border:1px solid #D4A036}
.tier-badge.normal{background:var(--bg);color:var(--text-light);border:1px solid var(--border)}

.acct-stats{padding:12px 20px;background:var(--bg);border-bottom:1px solid var(--border);font-size:13px;line-height:1.7}
.acct-stat-line{color:var(--text)}
.acct-stat-line.hint{color:var(--primary-dark);font-size:12px;margin-top:6px}

/* ===== 結帳優惠券區 ===== */
.co-coupon-wrap{border-top:1px dashed var(--border);padding-top:12px;margin-top:6px}
.co-coupon-row{display:flex;gap:8px}
.co-coupon-row input{
  flex:1;padding:8px 10px;border:1px solid var(--border);border-radius:6px;
  font:inherit;font-size:13px;text-transform:uppercase;letter-spacing:1px;
}
.co-coupon-row input:focus{outline:none;border-color:var(--primary)}
.co-coupon-apply{padding:8px 16px !important;width:auto !important;margin:0 !important;font-size:13px !important}
.co-coupon-hint{font-size:11px;color:var(--text-light);margin:8px 0 4px}
.co-coupon-list{display:flex;flex-direction:column;gap:6px;margin-top:6px;max-height:180px;overflow-y:auto}
.co-coupon-chip{
  text-align:left !important;padding:8px 12px !important;border-radius:6px;
  border:1px solid var(--border);background:var(--white);cursor:pointer;
  display:grid !important;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;
  font-size:12px;width:100%;transition:all .15s;
}
.co-coupon-chip:hover{border-color:var(--primary);background:var(--primary-light)}
.cc-code{font-family:'Courier New',monospace;font-weight:700;color:var(--text);font-size:12px}
.cc-desc{color:var(--text-light)}
.cc-exp{color:var(--sale);font-size:11px;font-weight:600}
.co-coupon-status{min-height:18px;margin-top:6px;font-size:12px;font-weight:600}
.co-coupon-status.ok{color:var(--gr)}
.co-coupon-status.err{color:var(--red)}
.co-coupon-status.loading{color:var(--text-light)}

/* ===== 結帳金額摘要 ===== */
.co-summary{
  background:var(--bg);border-radius:6px;padding:12px 14px;margin:12px 0 8px;font-size:13px;
}
.cos-row{display:flex;justify-content:space-between;padding:4px 0;color:var(--text-light)}
.cos-row span:last-child{color:var(--text);font-weight:600}
.cos-row.discount{color:var(--gr)}
.cos-row.discount span:last-child{color:var(--gr);font-weight:700}
.cos-row.total{margin-top:6px;padding-top:8px;border-top:1px dashed var(--border)}
.cos-row.total span{color:var(--text);font-size:15px;font-weight:700}
.cos-total{color:var(--sale) !important;font-family:'Playfair Display',serif;font-size:18px !important}
.cos-free{color:var(--gr);font-weight:700}

/* ===== 我的優惠券卡片 (account page) ===== */
.my-coupon-card{
  border:1px dashed var(--border);border-radius:8px;padding:14px;margin-bottom:10px;
  background:var(--white);
}
.my-coupon-card.my-coupon-ok{border-color:var(--primary-light);background:linear-gradient(135deg,#FFF5EE 0%,#FFFFFF 60%)}
.my-coupon-card.my-coupon-used{opacity:.55;background:var(--bg)}
.my-coupon-card.my-coupon-expired{opacity:.5;background:var(--bg)}
.mcc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;gap:8px}
.mcc-code{font-size:13px;font-weight:700;background:var(--bg);padding:3px 8px;border-radius:4px;letter-spacing:1px}
.mcc-status{font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px;letter-spacing:1px}
.mcc-status.ok{background:#E6F4EA;color:#1E8449}
.mcc-status.used{background:var(--bg);color:var(--text-light)}
.mcc-status.expired{background:var(--red-light);color:var(--red)}
.mcc-desc{font-size:14px;color:var(--text);margin-bottom:8px}
.mcc-foot{display:flex;justify-content:space-between;font-size:11px;color:var(--text-light);padding-top:6px;border-top:1px dotted var(--border)}
.mcc-source{font-weight:600}

/* ============================
   PRODUCT IMAGE (real img)
   ============================ */
.prod-real-img{
  width:100%;height:100%;
  object-fit:cover;display:block;
}
/* 缺貨時灰階也套用到真實圖片 */
.product-card.is-out .prod-real-img{filter:grayscale(0.7)}

/* ============================
   PRODUCT DETAIL MODAL
   ============================ */
.product-detail-modal{
  max-width:560px;padding:0;overflow:hidden;
  backdrop-filter:none; /* container handles blur */
}
/* backdrop blur 套在 overlay */
#product-modal.active{backdrop-filter:blur(4px)}
#order-confirm-modal.active{backdrop-filter:blur(4px)}

.pmd-layout{display:flex;flex-direction:column}
@media(min-width:500px){.pmd-layout{flex-direction:row}}

.pmd-img-wrap{
  width:100%;aspect-ratio:1;
  background:var(--accent-banner);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;overflow:hidden;
}
@media(min-width:500px){
  .pmd-img-wrap{width:220px;aspect-ratio:auto;align-self:stretch}
}
.product-modal-emoji{font-size:80px;line-height:1;text-align:center}
.bundle-modal-emoji{
  font-size:40px;letter-spacing:4px;
  text-align:center;line-height:1.4;padding:10px;
}
.pmd-info{
  padding:22px 24px 24px;
  display:flex;flex-direction:column;gap:10px;
  flex:1;min-width:0;
}
.pmd-info h3{
  font-family:'Playfair Display',serif;font-size:20px;
  color:var(--text);font-weight:700;line-height:1.3;
  margin:0;text-align:left;
}
.pmd-sub{font-size:12px;color:var(--text-light);margin:0}
.pmd-price-wrap{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pmd-desc{font-size:13px;color:var(--text-light);line-height:1.7;margin:0}
.pmd-tags{display:flex;gap:6px;flex-wrap:wrap}
.pmd-tag{
  display:inline-block;padding:4px 10px;border-radius:20px;
  font-size:11px;font-weight:700;
  background:var(--primary-light);color:var(--primary-dark);
}
.pmd-tag.new{background:var(--gr-light);color:var(--gr)}
.pmd-tag.hot{background:#FFE8D6;color:#C0521E}
.pmd-tag.sale{background:var(--red-light);color:var(--red)}
.pmd-cart-btn{margin-top:auto;width:100%}
.pmd-bundle-items{
  background:var(--bg);border-radius:var(--radius-md);padding:10px 12px;
}
.pmd-items-label{
  font-size:11px;font-weight:700;color:var(--text-light);
  letter-spacing:1px;margin-bottom:8px;
}
.pmd-bundle-item{
  display:flex;align-items:center;gap:8px;
  padding:5px 0;border-bottom:1px solid var(--border);font-size:13px;
}
.pmd-bundle-item:last-child{border-bottom:none}
.pmd-item-emoji{font-size:18px;flex-shrink:0}
.pmd-item-name{flex:1;font-weight:500}
.pmd-item-price{color:var(--text-light);font-size:12px}
.bundle-ribbon-inline{
  background:var(--primary);color:#fff;
  font-size:12px;font-weight:700;padding:3px 10px;
  border-radius:20px;letter-spacing:1px;
}

/* ============================
   ORDER CONFIRM MODAL
   ============================ */
.order-confirm-modal{
  max-width:480px;max-height:85vh;overflow-y:auto;
}
.occ-header{text-align:center;margin-bottom:14px;padding-top:6px}
.occ-icon{font-size:48px;margin-bottom:8px;line-height:1}
.occ-header h3{
  font-family:'Playfair Display',serif;
  font-size:20px;margin:0 0 4px;color:var(--text);
}
.occ-order-no{
  background:var(--bg);border-radius:var(--radius-md);
  padding:10px 14px;font-size:13px;color:var(--text-light);margin-bottom:14px;
}
.occ-order-no code{
  color:var(--text);font-weight:700;
  background:var(--white);padding:2px 7px;
  border-radius:4px;font-size:12px;
}
.occ-section-label{
  font-size:11px;font-weight:700;color:var(--text-light);
  letter-spacing:1px;margin-bottom:8px;text-transform:uppercase;
}
.occ-items-section{margin-bottom:14px}
.occ-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 12px;background:var(--bg);border-radius:var(--radius-sm);
  margin-bottom:4px;font-size:13px;gap:10px;
}
.occ-item-name{flex:1;font-weight:500}
.occ-item-qty{color:var(--text-light);min-width:28px;text-align:center}
.occ-item-price{font-weight:700;color:var(--sale);min-width:70px;text-align:right}
.occ-totals{
  background:var(--primary-light);border-radius:var(--radius-md);
  padding:12px 14px;margin-bottom:14px;
}
.occ-total-row{
  display:flex;justify-content:space-between;
  font-size:13px;margin-bottom:6px;color:var(--text-light);
}
.occ-total-row:last-child{margin-bottom:0}
.occ-total-row.grand{
  font-size:16px;font-weight:700;color:var(--text);
  padding-top:8px;border-top:1px dashed rgba(216,129,102,0.3);
  margin-top:6px;
}
.occ-shipping{
  background:var(--bg);border-radius:var(--radius-md);
  padding:12px 14px;margin-bottom:12px;font-size:13px;
}
.occ-addr-row{color:var(--text);font-weight:500;margin-top:4px}

/* 預計到貨資訊 */
.occ-eta{
  background:linear-gradient(135deg, #FFF6F0 0%, #FFFCF6 100%);
  border:1px solid var(--am-light, #F0D9B5);
  border-radius:var(--radius-md);padding:10px 14px;
  font-size:13px;color:var(--text);font-weight:500;
  margin-bottom:14px;line-height:1.5;
}
/* 超商取貨資訊強調框 */
.occ-cvs-block{
  background:#F0F7F0;border:1px dashed #8FBC8F;
}
.occ-cvs-block .occ-section-label{color:#3a6b3a}
.occ-code{
  font-family:'Courier New',monospace;font-weight:700;
  background:var(--white);padding:2px 8px;border-radius:4px;
  font-size:13px;color:var(--text);letter-spacing:1px;
}
/* 訂單成功 CTA 雙按鈕 */
.occ-cta-row{
  display:flex;gap:10px;margin-top:6px;
}
.occ-cta-row .modal-btn{flex:1;margin-top:0}
@media(max-width:480px){
  .occ-cta-row{flex-direction:column;gap:8px}
}
.occ-help-line{
  text-align:center;font-size:11px;color:var(--text-light);
  margin-top:12px;line-height:1.6;
}

/* 銀行轉帳資訊框 */
.occ-bank-block{
  background:#FFF8E7;border:1px solid #F0D9B5;
  border-radius:var(--radius-md);padding:14px;margin-bottom:12px;
}
.occ-bank-block .occ-section-label{color:#8B6914}
.occ-bank-row{
  display:flex;justify-content:space-between;align-items:center;
  font-size:13px;padding:6px 0;border-bottom:1px dashed rgba(186,117,23,0.15);gap:10px;
}
.occ-bank-row:last-of-type{border-bottom:none}
.occ-bank-row span:first-child{color:var(--text-light);min-width:60px}
.occ-bank-acc{font-size:15px !important;letter-spacing:1.5px !important}
.occ-bank-copy{margin-top:10px;width:100%;padding:8px}
.occ-bank-tips{
  background:var(--bg);border-left:3px solid var(--am, #E8A95F);
  padding:10px 12px;font-size:12px;line-height:1.7;color:var(--text);
  border-radius:0 6px 6px 0;margin-bottom:12px;
}
/* 訂單查詢時的「尚未收款」警示 */
.occ-bank-pending{
  background:#FFF3E0;border:1.5px dashed #E8A95F;
  border-radius:var(--radius-md);padding:12px 14px;margin-bottom:12px;
  text-align:center;color:var(--text);
}
.occ-bank-pending strong{color:#B8650F;font-size:14px}

/* ============================
   ORDER LOOKUP (empty cart)
   ============================ */
.order-lookup-section{
  max-width:480px;margin:0 auto 20px;
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:20px 24px;
  box-shadow:var(--shadow-sm);text-align:center;
}
.order-lookup-section h4{
  font-size:15px;font-weight:700;color:var(--text);margin-bottom:4px;
}
.order-lookup-section p{
  font-size:12px;color:var(--text-light);margin-bottom:12px;
}
.order-lookup-row{
  display:flex;gap:8px;align-items:center;
  justify-content:center;flex-wrap:wrap;
}
.order-lookup-row input{
  flex:1;min-width:200px;max-width:300px;
}

/* ============================
   SEARCH OVERLAY (Mobile)
   ============================ */
.search-overlay{
  display:none;position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(74,64,58,0.8);z-index:2500;
  align-items:flex-start;justify-content:flex-start;padding-top:60px;
}
.search-overlay.active{display:flex}
.search-overlay-content{
  background:var(--white);width:100%;max-width:100%;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  max-height:80vh;overflow-y:auto;
  display:flex;flex-direction:column;
  box-shadow:0 -4px 24px rgba(0,0,0,0.15);
}
.search-overlay-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 20px;border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.search-overlay-header h2{font-size:18px;font-weight:700;color:var(--text);margin:0}
.search-overlay-close{
  background:none;border:none;font-size:24px;color:var(--text-light);
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:color .2s;
}
.search-overlay-close:hover{color:var(--primary)}
.search-overlay-input-wrap{
  display:flex;gap:8px;align-items:center;
  padding:12px 16px;border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.search-overlay-input{
  flex:1;padding:10px 14px;border-radius:20px;
  border:1.5px solid var(--border);background:var(--bg);
  font-size:14px;color:var(--text);font-family:inherit;
  outline:none;transition:all .2s;
}
.search-overlay-input:focus{
  border-color:var(--primary);box-shadow:0 0 0 3px rgba(216,129,102,0.1);
}
.search-overlay-clear{
  background:none;border:none;font-size:16px;color:var(--text-light);
  padding:6px;cursor:pointer;transition:color .2s;flex-shrink:0;
}
.search-overlay-clear:hover{color:var(--primary)}
.search-results-container{
  flex:1;overflow-y:auto;padding:12px 0;
}
.search-result-item{
  width:100%;padding:14px 16px;border:none;border-bottom:1px solid var(--border);
  background:transparent;font:inherit;text-align:left;
  display:flex;gap:12px;align-items:center;cursor:pointer;
  transition:background .2s;
}
.search-result-item:last-child{border-bottom:none}
.search-result-item:hover,
.search-result-item:focus-visible{background:var(--bg);outline:none}
.search-result-item:active{background:var(--primary-light)}
.search-result-tag{
  font-size:10px;font-weight:600;color:var(--primary);
  background:var(--primary-light);padding:2px 6px;border-radius:4px;
  margin-left:6px;letter-spacing:0.5px;vertical-align:middle;
}
.search-result-emoji{font-size:28px;flex-shrink:0}
.search-result-info{flex:1;min-width:0}
.search-result-name{font-size:14px;font-weight:700;color:var(--text);margin-bottom:2px}
.search-result-sub{font-size:12px;color:var(--text-light)}
.search-result-price{font-size:14px;font-weight:700;color:var(--sale);text-align:right;flex-shrink:0}
.search-result-empty{
  text-align:center;padding:40px 20px;color:var(--text-light);font-size:14px;
}