/* Muajee 石墨配色 v3：只換顏色；另加底部浮島、商品縮圖列表顯示方式、按鈕特效。
   不改頁面版面。拿掉各頁的這行 <link> 與 js/muajee-island.js 就會回到原樣。 */
:root{
  --g-bg:#f5f5f3; --g-surface:#fff; --g-sunk:#ececea;
  --g-ink:#222428; --g-ink2:#4a4d53; --g-muted:#7a7d83;
  --g-line:#e4e4e1; --g-line2:#cdcecb; --g-accent:#5f646c; --g-on:#fff;
  --g-ok:#2f7a55; --g-err:#b5402e;
  --g-r-btn:8px; --g-r-island:16px; --g-r-img:12px; --g-r-trade:3px;
  --g-ease:cubic-bezier(.2,.75,.2,1); --g-spring:cubic-bezier(.34,1.5,.64,1);
  --g-shadow:0 1px 2px rgba(20,16,10,.04),0 8px 22px -14px rgba(20,16,10,.22);
  --g-shadow-up:0 2px 4px rgba(20,16,10,.05),0 22px 40px -22px rgba(20,16,10,.38);
  --font:"Manrope","Noto Sans TC","Microsoft JhengHei",-apple-system,BlinkMacSystemFont,"PingFang TC",sans-serif;
  --primary:#222428; --primary-dark:#3a3d43; --primary-light:#7a7d83;
  --bg-page:#f5f5f3; --bg-card:#fff; --border:#e4e4e1; --border-strong:#cdcecb;
  --text-main:#222428; --text-sub:#7a7d83; --text-placeholder:#a2a5aa; --link:#222428;
  --success-bg:#222428; --success-text:#fff; --danger-bg:#ececea; --danger-text:#7a7d83;
}

body.mj-has-dock{ padding-bottom:calc(96px + env(safe-area-inset-bottom,0px)); }
:focus-visible{ outline:2px solid var(--g-accent); outline-offset:3px; }

/* 商品卡 */
.sf-card{
  border:0; border-radius:var(--g-r-img); background:transparent; box-shadow:none; overflow:visible;
  transition:transform .3s var(--g-ease); gap:0; text-decoration:none; color:var(--g-ink);
}
.sf-card:hover{ transform:none; box-shadow:none; text-decoration:none; }
.sf-card-img{
  border:0; border-radius:var(--g-r-img); background:var(--g-sunk); overflow:hidden; margin-bottom:10px; isolation:isolate;
  transition:transform .45s var(--g-ease),box-shadow .45s var(--g-ease);
}
.sf-card:hover .sf-card-img{ transform:translateY(-4px); box-shadow:0 18px 30px -18px rgba(0,0,0,.45); }
.sf-card-img img{ transition:transform .8s var(--g-ease); }
.sf-card:hover .sf-card-img img{ transform:scale(1.06); }
.sf-card-body{ padding:0 2px; }
.sf-card-cat{ font-size:12px; color:var(--g-muted); }
.sf-card-name{ font-weight:600; font-size:14.5px; }
.sf-card-price{ font-weight:800; font-size:15.5px; }
.sf-tag{ border-radius:999px; background:var(--g-surface); color:var(--g-ink); box-shadow:0 2px 6px -2px rgba(0,0,0,.2); }
.sf-wishlist-btn{ background:var(--g-surface); box-shadow:0 2px 6px -2px rgba(0,0,0,.2); transition:transform .3s var(--g-spring),color .2s; }
.sf-wishlist-btn:hover{ transform:scale(1.12); color:var(--g-err); }
.sf-wishlist-btn.active,.sf-wishlist-btn.active svg{ color:var(--g-err); }
.sf-wishlist-btn.active svg{ fill:var(--g-err); stroke:var(--g-err); animation:mj-pop .45s var(--g-spring); }
@keyframes mj-pop{ 0%{ transform:scale(.3) } 60%{ transform:scale(1.3) } 100%{ transform:scale(1) } }
.mj-qa{
  position:absolute; left:8px; right:8px; bottom:8px; height:40px; border:0; border-radius:var(--g-r-btn);
  background:var(--g-ink); color:var(--g-on); font:700 13.5px/1 var(--font); cursor:pointer; z-index:3;
  display:flex; align-items:center; justify-content:center; gap:6px; transform:translateY(130%);
  transition:transform .4s var(--g-spring),background-color .2s;
}
.sf-card:hover .mj-qa,.mj-qa:focus-visible{ transform:none; }
.mj-qa:hover{ background:var(--g-accent); }
.mj-qa.ok{ background:var(--g-ok); }
@media (hover:none){ .mj-qa{ display:none; } }   /* 手機沒有滑過，不放快速加入，避免誤觸 */
.mj-burst{ position:absolute; left:50%; top:50%; width:5px; height:5px; margin:-2.5px; border-radius:50%; background:var(--g-err); pointer-events:none; opacity:0; animation:mj-burst .55s var(--g-ease) forwards; }
@keyframes mj-burst{ 0%{ opacity:1; transform:rotate(var(--a)) translateY(0) } 100%{ opacity:0; transform:rotate(var(--a)) translateY(-24px) scale(.3) } }

/* =====================================================================
   4. 底部浮島：搜尋／購物車／收藏／會員中心
   ===================================================================== */
.mj-dock{
  position:fixed; left:50%; bottom:max(18px,env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:900;
  display:flex; align-items:flex-end; gap:6px; padding:8px; background:var(--g-ink); color:var(--g-on);
  border-radius:20px; box-shadow:0 22px 44px -18px rgba(0,0,0,.6); max-width:calc(100% - 24px);
  animation:mj-dock-in .6s var(--g-spring) both;
}
@keyframes mj-dock-in{ from{ transform:translate(-50%,140%); opacity:0 } to{ transform:translate(-50%,0); opacity:1 } }
.mj-dock .di{
  all:unset; box-sizing:border-box; cursor:pointer; width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--g-on) 9%,transparent); color:var(--g-on); transform-origin:bottom center;
  transition:transform .2s var(--g-ease),background-color .2s; position:relative; flex:none;
}
.mj-dock .di:hover{ background:color-mix(in srgb,var(--g-on) 18%,transparent); }
.mj-dock .di:focus-visible{ outline:2px solid var(--g-on); outline-offset:2px; }
.mj-dock .di svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.mj-dock .di .tip{
  position:absolute; bottom:calc(100% + 10px); left:50%; transform:translate(-50%,4px); background:var(--g-surface); color:var(--g-ink);
  font-size:12px; font-weight:700; padding:5px 9px; border-radius:6px; opacity:0; pointer-events:none; white-space:nowrap;
  transition:opacity .2s,transform .25s var(--g-ease); box-shadow:var(--g-shadow);
}
.mj-dock .di:hover .tip,.mj-dock .di:focus-visible .tip{ opacity:1; transform:translate(-50%,0); }
.mj-dock .di .n{
  position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--g-on);
  color:var(--g-ink); font:800 10.5px/18px var(--font); text-align:center; display:none;
}
.mj-dock .di .n.show{ display:block; }
.mj-dock .di.bump{ animation:mj-bump .5s var(--g-spring); }
@keyframes mj-bump{ 40%{ transform:scale(1.3) } }
.mj-dock .dsr{
  display:flex; align-items:center; gap:0; height:46px; border-radius:13px; width:46px; overflow:hidden; flex:none; cursor:text;
  background:color-mix(in srgb,var(--g-on) 9%,transparent); transition:width .5s var(--g-spring),background-color .2s;
}
.mj-dock .dsr svg{ width:19px; height:19px; flex:none; margin:0 13.5px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.mj-dock .dsr input{ all:unset; flex:1; min-width:0; font-size:14px; color:var(--g-on); padding-right:14px; }
.mj-dock .dsr input::placeholder{ color:color-mix(in srgb,var(--g-on) 55%,transparent); }
.mj-dock .dsr:hover,.mj-dock .dsr:focus-within{ width:240px; background:color-mix(in srgb,var(--g-on) 16%,transparent); }
.mj-dock .sep{ width:1px; height:30px; background:color-mix(in srgb,var(--g-on) 20%,transparent); align-self:center; margin:0 2px; flex:none; }
/* 手機：搜尋點一下才展開成整排，避免 240px 把浮島撐出畫面 */
@media (max-width:520px){
  .mj-dock{ gap:4px; padding:7px; border-radius:18px; bottom:max(12px,env(safe-area-inset-bottom,0px)); }
  .mj-dock .di,.mj-dock .dsr{ width:44px; height:44px; }
  .mj-dock .dsr:hover{ width:44px; background:color-mix(in srgb,var(--g-on) 9%,transparent); }
  .mj-dock .dsr:focus-within{ width:min(220px,calc(100vw - 190px)); background:color-mix(in srgb,var(--g-on) 16%,transparent); }
  .mj-dock .di .tip{ display:none; }
}
.mj-flyer{
  position:fixed; left:0; top:0; width:34px; height:34px; border-radius:8px; pointer-events:none; z-index:2000;
  background:radial-gradient(60% 50% at 50% 45%,#fff 0,transparent 70%),linear-gradient(165deg,#ececea,#cfd0cd); box-shadow:0 8px 20px -6px rgba(0,0,0,.4);
}
.mj-flyer img{ width:100%; height:100%; object-fit:cover; border-radius:8px; display:block; }
@media print{ .mj-dock{ display:none; } }


/* =====================================================================
   7. 特效
   ===================================================================== */
/* 主按鈕：滑過由下往上填色 */
.hero-cta::before,.pd-btn-buy::before,.svc-confirm-btn::before,.st-btn:not(.ghost)::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--g-accent); transform:translateY(101%);
  transition:transform .45s var(--g-ease);
}
.hero-cta:hover::before,.pd-btn-buy:hover::before,.svc-confirm-btn:not(:disabled):hover::before,.st-btn:not(.ghost):hover::before{ transform:none; }
.st-btn:not(.ghost){ position:relative; isolation:isolate; overflow:hidden; background:var(--g-ink); border-radius:var(--g-r-btn); }
.st-btn:not(.ghost):hover{ background:var(--g-ink); }
.st-btn.ghost{ border-radius:var(--g-r-btn); }
.svc-confirm-btn{ position:relative; isolation:isolate; overflow:hidden; }
.hero-cta:active,.pd-btn-buy:active,.svc-confirm-btn:active{ transform:scale(.97); }
/* 波紋 */
.mj-ripple{ position:absolute; border-radius:50%; pointer-events:none; background:rgba(255,255,255,.35); transform:scale(0); animation:mj-ripple .6s var(--g-ease) forwards; z-index:0; }
.pd-btn-cart .mj-ripple{ background:rgba(34,36,40,.12); }
@keyframes mj-ripple{ to{ transform:scale(1); opacity:0; } }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .mj-dock{ animation:none; }
}
@media (max-width:900px){
  .hero{ padding:28px 22px; flex-direction:column; align-items:flex-start; }
  .hero-visual{ width:100%; font-size:56px; }
  .pd-layout{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .hero{ padding:26px 20px; gap:20px; }
  .hero-text h1{ font-size:23px; margin-bottom:10px; }
  .hero-text p{ font-size:13.5px; margin-bottom:18px; }
  .hero-eyebrow{ font-size:11px; margin-bottom:10px; }
  .hero-cta{ padding:0 22px; font-size:14.5px; height:46px; }
  .hero-visual{ width:100%; height:auto; font-size:56px; }
  .sf-page-wrap{ padding-left:14px; padding-right:14px; }
  .pd-layout{ padding:14px; }
  .pd-tab-panel{ padding:20px 16px; }
}


body.mj-has-dock .muajee-toast-box{ bottom:calc(92px + env(safe-area-inset-bottom,0px)); }
/* 特效按鈕必須自己當定位基準，填色與波紋才不會跑出按鈕外 */
.hero-cta,.pd-btn-buy,.pd-btn-cart,.svc-confirm-btn,.st-btn{ position:relative; isolation:isolate; overflow:hidden; }
.service-meta span + span{ margin-left:10px; }

/* =====================================================================
   首頁：只顯示後台「首頁橫幅」上傳的那一張圖（等比例縮放，電腦與手機相同）
   沒有上傳橫幅時不顯示舊的文字橫幅
   ===================================================================== */
.hero:not(.hero-banner){ display:none; }
.hero.hero-banner{ margin-top:24px; border-radius:var(--g-r-img,12px); overflow:hidden; background:transparent; box-shadow:none; }
.hero.hero-banner img,.hero-banner-link img{ width:100%; height:auto; display:block; }
@media (max-width:600px){ .hero.hero-banner{ margin-top:14px; border-radius:10px; } }

/* =====================================================================
   商品／預約頁資料表：一左一右兩欄，長的才獨占一行
   ===================================================================== */
.pd-info-table{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); }
.pd-info-table .pd-info-row{ background:#fff; border-top:0 !important; gap:10px; align-items:baseline; min-width:0; }
.pd-info-table .pd-info-row .k{ white-space:nowrap; flex:none; }
.pd-info-table .pd-info-row .v{ text-align:right; min-width:0; overflow-wrap:anywhere; }
.pd-info-table .pd-info-row.mj-full{ grid-column:1 / -1; }
@media (max-width:600px){ .pd-info-table .pd-info-row{ padding:12px 14px; font-size:14px; gap:6px; } }

/* =====================================================================
   2026-10-12 註冊第二步驟（條款＋信箱驗證）、登入頁「重新寄送驗證信」
   ===================================================================== */
.regp-card [hidden],.mj-verify [hidden]{ display:none !important; }
.regp-terms-title{ margin:0 0 12px; font-size:17px; font-weight:800; }
.regp-terms-box{
  max-height:340px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.85; font-size:14px;
  color:var(--g-ink); background:var(--g-bg); border:1px solid var(--border); border-radius:8px; padding:16px 18px;
}
.regp-terms-agree{ display:flex; align-items:center; gap:8px; margin:16px 0 4px; font-weight:700; cursor:pointer; }
.regp-terms-agree input{ width:18px; height:18px; accent-color:var(--g-ink); }
.regp-done{ text-align:center; padding:12px 4px 4px; }
.regp-done-ic{ width:64px; height:64px; margin:0 auto 14px; border-radius:50%; background:var(--g-sunk); color:var(--g-ink); display:grid; place-items:center; }
.regp-done h3{ margin:0 0 10px; font-size:19px; }
.regp-done p{ margin:0 0 8px; line-height:1.8; color:var(--g-ink); overflow-wrap:anywhere; }
.regp-done .regp-done-sub{ color:var(--g-muted); font-size:13.5px; }
.regp-done .regp-actions,.regp-terms .regp-actions{ margin-top:18px; }
.mj-verify-box{ margin-top:14px; padding:14px 16px; border-radius:8px; background:var(--g-bg); border:1px solid var(--border); line-height:1.7; font-size:14px; }
.mj-verify-box button{ margin-top:10px; }

/* 2026-10-12 全部商品：價格篩選 */
.mj-price-filter{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 20px; }
.mj-price-filter [hidden]{ display:none !important; }
.mj-pf-label{ font-weight:700; font-size:14px; color:var(--g-ink); margin-right:2px; }
.mj-price-filter input{
  width:110px; height:38px; padding:0 12px; border:1px solid var(--border); border-radius:8px; background:#fff;
  font:inherit; font-size:14px; color:var(--g-ink);
}
.mj-price-filter input:focus{ outline:none; border-color:var(--g-ink); }
.mj-pf-dash{ color:var(--g-muted); }
.mj-pf-btn,.mj-pf-clear{ height:38px; padding:0 16px; border-radius:8px; font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
.mj-pf-btn{ background:var(--g-ink); color:#fff; border:1px solid var(--g-ink); }
.mj-pf-btn:hover{ background:var(--g-accent); border-color:var(--g-accent); }
.mj-pf-clear{ background:#fff; color:var(--g-ink); border:1px solid var(--border); }
@media (max-width:600px){
  .mj-price-filter{ gap:6px; margin-bottom:16px; }
  .mj-pf-label{ width:100%; }
  .mj-price-filter input{ flex:1 1 0; width:auto; min-width:0; }
}

/* 2026-10-12 手機版預約服務：月曆原本限寬 280px 擠在中間 → 撐滿卡片寬度 */
@media (max-width:900px){
  .svc-avail-section{ padding:18px 14px; }
  .svc-cal-col{ max-width:none !important; margin:0; }
  .cal-grid-sm{ gap:6px; }
  .cal-grid-sm .cal-day{ min-height:52px; }
  .cal-weekdays-sm{ font-size:14px; }
}