:root{
  --ink:#111111;
  --ink-2:#3A3A3A;
  --bg:#F4F4F2;
  --card:#FFFFFF;
  --surface:#E9E9E6;
  --line:#DADAD6;
  --muted:#77777A;
  --invert-ink:#FFFFFF;
  --invert-bg:#111111;
  --radius:18px;
  color-scheme:light;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;}
html{scroll-padding-top:136px;}
[hidden]{display:none !important;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter','Noto Sans TC',system-ui,sans-serif; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; letter-spacing:-.02em;}

/* ---------- Site header（頂部選單列） ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
/* 第一層：三欄，Logo 永遠在正中間 */
.nav-top{
  max-width:1100px; height:76px; margin:0 auto; padding:0 20px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
}
.nav-left{justify-self:start; display:flex; align-items:center;}
.nav-actions{justify-self:end; display:flex; align-items:center; gap:10px;}
.nav-divider{width:1px; height:26px; background:var(--line);}
.brand{display:flex; align-items:center; gap:14px; color:var(--ink); text-decoration:none;}
.brand-logo{display:block; width:auto; height:46px;}
/* Logo 下半部有 Jawen 字，視覺重心偏下，文字往下移一點才會看起來對齊 */
.brand-text{position:relative; top:5px;}
.brand-text strong{display:block; font-size:19px; font-weight:900; line-height:1.15; letter-spacing:.06em;}
.brand-text small{display:block; margin-top:1px; font-size:10.5px; font-weight:600; letter-spacing:.2em; color:var(--muted);}
/* 第二層：分類選單置中 */
.main-nav{display:flex; justify-content:center; padding:0 20px 10px;}
.nav-list{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:4px 6px;}
.nav-link{
  display:block; padding:6px 14px; border-radius:999px; white-space:nowrap;
  font-size:15px; font-weight:600; color:var(--ink-2); text-decoration:none;
  transition:background-color .15s ease, color .15s ease;
}
.nav-link:hover, .nav-link.is-open{background:var(--surface); color:var(--ink);}
.nav-link.active{background:var(--ink); color:var(--invert-ink);}
.icon-btn{
  position:relative; flex:0 0 auto; width:44px; height:44px; padding:0; border:0; border-radius:12px;
  display:grid; place-items:center; background:none; color:var(--ink); cursor:pointer;
}
@media (hover:hover){ .icon-btn:hover{background:var(--surface);} }
.icon-btn svg{width:24px; height:24px;}
.nav-toggle{display:none;}
.cart-count{
  position:absolute; top:3px; right:1px; min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  display:grid; place-items:center; background:#D9472B; color:#fff; font-size:11px; font-weight:800;
}

/* 搜尋面板 */
.search-panel{
  position:absolute; left:0; right:0; top:100%; z-index:2; padding:16px 20px 20px;
  background:var(--card); border-bottom:1px solid var(--line);
  box-shadow:0 24px 40px -28px rgba(0,0,0,.35);
  animation:megaIn .18s ease;
}
.search-form{
  max-width:720px; margin:0 auto; display:flex; align-items:center; gap:10px;
  padding:0 6px 0 16px; border:1.5px solid var(--ink); border-radius:999px; background:var(--card);
}
.search-form svg{width:22px; height:22px; flex:0 0 auto; color:var(--muted);}
.search-form input{
  flex:1; min-width:0; height:48px; border:0; outline:none; background:none;
  color:var(--ink); font:inherit; font-size:16px;
}
.search-form input::-webkit-search-cancel-button{cursor:pointer;}
.search-cancel{
  flex:0 0 auto; padding:8px 14px; border:0; border-radius:999px; cursor:pointer;
  background:var(--surface); color:var(--ink-2); font:inherit; font-size:14px; font-weight:700;
}
.search-results{max-width:720px; margin:8px auto 0; max-height:min(60vh,480px); overflow-y:auto;}
.search-results:empty{display:none;}
.sr-item{
  display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:12px;
  color:var(--ink); text-decoration:none;
}
.sr-item:hover, .sr-item:focus-visible{background:var(--surface); outline:none;}
.sr-thumb{
  width:48px; height:48px; flex:0 0 auto; overflow:hidden; border-radius:10px; display:grid; place-items:center;
  background:#fff; box-shadow:0 0 0 1px var(--line); font-size:9px; font-weight:800; color:#8A8A8A; text-align:center;
}
.sr-thumb img{width:100%; height:100%; object-fit:contain; padding:3px;}
.sr-name{display:block; font-size:15px; font-weight:700;}
.sr-meta{display:block; font-size:12.5px; color:var(--muted);}
.sr-name mark{background:#FDE8B5; color:inherit; border-radius:3px;}
.sr-all{display:block; margin-top:4px; padding:12px 10px; border-top:1px solid var(--line); color:var(--ink); font-weight:800; text-decoration:none;}
.sr-all:hover{text-decoration:underline;}
.sr-note{padding:14px 10px; color:var(--muted); font-size:14px;}
.crumb-clear{
  align-self:center; margin-left:4px; padding:4px 12px; border:1.5px solid var(--line); border-radius:999px; cursor:pointer;
  background:var(--card); color:var(--ink-2); font:inherit; font-size:13px; font-weight:700; letter-spacing:0;
}
.crumb-clear:hover{border-color:var(--ink); color:var(--ink);}

/* 滑鼠移到大類時出現的下拉面板 */
.mega{position:absolute; left:0; right:0; top:100%; padding:0 20px;}
.mega-inner{
  max-width:760px; margin:10px auto 0; padding:24px 28px;
  display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:28px; align-items:start;
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  box-shadow:0 28px 56px -28px rgba(0,0,0,.4);
  animation:megaIn .18s ease;
}
@keyframes megaIn{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;}}
.mega-title{display:inline-flex; align-items:baseline; gap:10px; color:var(--ink); text-decoration:none; font-size:22px; font-weight:900;}
.mega-title span{font-size:13px; font-weight:700; color:var(--muted);}
.mega-title:hover span{color:var(--ink);}
.mega-subs{list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 12px;}
.mega-subs a{
  display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-radius:10px;
  color:var(--ink-2); text-decoration:none; font-size:15px; font-weight:700;
}
.mega-subs a:hover, .mega-subs a:focus-visible{background:var(--surface); color:var(--ink);}
.mega-subs a.is-empty{opacity:.5;}
.mega-subs small{font-size:12px; font-weight:600; color:var(--muted);}
.mega-note{margin:14px 0 0; font-size:14px; color:var(--muted);}
.mega-media{display:block; aspect-ratio:1/1; overflow:hidden; border-radius:16px; background:#fff;}
.mega-media img{display:block; width:100%; height:100%; object-fit:cover;}

/* 手機、平板：左側滑出的分類選單 */
.drawer-backdrop{position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.42);}
.drawer{
  position:fixed; top:0; left:0; bottom:0; z-index:80; width:min(320px,86vw);
  display:flex; flex-direction:column; background:var(--card);
  padding-top:env(safe-area-inset-top,0px);
  box-shadow:12px 0 40px -12px rgba(0,0,0,.35);
  transform:translateX(-105%); visibility:hidden;
  transition:transform .28s cubic-bezier(.2,.7,.2,1), visibility 0s linear .28s;
}
.drawer.open{transform:none; visibility:visible; transition:transform .28s cubic-bezier(.2,.7,.2,1);}
.drawer-head{display:flex; align-items:center; justify-content:space-between; padding:10px 10px 10px 20px; border-bottom:1px solid var(--line);}
.drawer-head strong{font-size:17px;}
.drawer-list{list-style:none; flex:1; margin:0; padding:8px 0 32px; overflow-y:auto;}
.drw-row{display:flex; align-items:center;}
.drw-link{
  flex:1; min-height:60px; display:flex; align-items:center; gap:14px; padding:8px 12px 8px 20px;
  color:var(--ink); text-decoration:none; font-size:16px; font-weight:700;
}
.drw-link.active{background:var(--surface);}
.drw-link img, .drw-thumb{width:44px; height:44px; flex:0 0 auto; border-radius:10px; object-fit:cover; background:var(--surface); box-shadow:0 0 0 1px var(--line);}
.drw-expand{margin-right:8px;}
.drw-expand svg{transition:transform .2s ease;}
.drw-expand[aria-expanded="true"] svg{transform:rotate(180deg);}
.drw-subs{list-style:none; margin:0; padding:0 0 8px 78px;}
.drw-subs a{display:block; padding:10px 0; color:var(--ink-2); text-decoration:none; font-size:15px; font-weight:600;}
.drw-subs a.active{color:var(--ink); font-weight:800;}

@media (max-width:1000px){
  html{scroll-padding-top:76px;}
  .nav-top{height:60px; padding:0 8px;}
  .nav-actions{gap:0;}
  .nav-divider{display:none;}
  .brand-logo{height:40px;}
  .brand{gap:11px;}
  .brand-text{top:4px;}
  .brand-text strong{font-size:17px;}
  .brand-text small{font-size:9.5px;}
  .main-nav, .mega{display:none !important;}
  .nav-toggle{display:grid;}
  .search-panel{padding:12px 12px 16px;}
  .toast{top:72px;}
}

/* ---------- 詢價車面板（右側滑出） ---------- */
.cart-panel{
  left:auto; right:0; width:min(440px,100vw);
  transform:translateX(105%); box-shadow:-12px 0 40px -12px rgba(0,0,0,.35);
}
.cart-head-count{font-size:14px; font-weight:600; color:var(--muted);}
.cart-scroll{flex:1; overflow-y:auto; padding:16px 20px 40px; overscroll-behavior:contain;}
.cart-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.cart-item{
  display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:12px; align-items:start;
  padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--card);
}
.cart-thumb{
  width:64px; height:64px; overflow:hidden; border-radius:10px; display:grid; place-items:center;
  background:#fff; box-shadow:0 0 0 1px var(--line);
  font-size:10px; font-weight:800; color:#8A8A8A; text-align:center; word-break:break-all;
}
.cart-thumb img{width:100%; height:100%; object-fit:contain; padding:4px;}
.cart-name{font-size:14.5px; font-weight:700; line-height:1.4;}
.cart-meta{margin-top:2px; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums;}
.cart-qty{grid-column:2 / -1; display:flex; align-items:center; gap:8px; margin-top:-4px;}
.cart-qty span{flex:0 0 auto; font-size:13px; font-weight:700; color:var(--ink-2);}
.cart-remove{width:36px; height:36px; color:var(--muted);}
.cart-remove svg{width:18px; height:18px;}
.cart-empty{padding:28px 8px; text-align:center; color:var(--muted);}
.cart-empty p{margin:0 0 4px; font-weight:800; color:var(--ink);}

.inq-form{display:flex; flex-direction:column; gap:12px; margin-top:24px; padding-top:20px; border-top:1px solid var(--line);}
.inq-form h3{font-size:18px; font-weight:900;}
.form-hint{margin:-8px 0 0; font-size:13px; color:var(--muted);}
.field{display:flex; flex-direction:column; gap:6px;}
.field > span, .field-group legend{font-size:13.5px; font-weight:700; color:var(--ink-2);}
.inq-form em{font-style:normal; color:#D9472B;}
.inq-form small{font-size:12px; font-weight:500; color:var(--muted);}
.inq-form input, .inq-form textarea, .cart-qty input{
  width:100%; min-width:0; padding:10px 12px; border:1.5px solid var(--line); border-radius:10px;
  background:var(--card); color:var(--ink); font:inherit; font-size:16px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.inq-form textarea{resize:vertical;}
.inq-form input:focus, .inq-form textarea:focus, .cart-qty input:focus{
  outline:none; border-color:var(--ink); box-shadow:0 0 0 3px color-mix(in srgb, var(--ink) 12%, transparent);
}
.inq-form ::placeholder, .cart-qty input::placeholder{color:var(--muted); opacity:1;}
.cart-qty input{padding:8px 10px; font-size:15px;}
.field-group{display:flex; flex-direction:column; gap:10px; margin:0; padding:10px 12px 12px; border:1px dashed var(--line); border-radius:12px;}
.field-group legend{padding:0 6px;}
/* 欄位錯誤：紅框＋下方紅字 */
.inq-form input.invalid, .inq-form textarea.invalid{border-color:#D92D20; box-shadow:0 0 0 3px rgba(217,45,32,.14);}
.inq-form input.invalid:focus{border-color:#D92D20; box-shadow:0 0 0 3px rgba(217,45,32,.22);}
.field-group.invalid{border:1.5px solid #D92D20; background:rgba(217,45,32,.04);}
.field-msg{font-size:12.5px !important; font-weight:600 !important; line-height:1.5; color:#B42318 !important;}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}
.form-error{margin:0; padding:10px 12px; border-radius:10px; background:#FDECEA; color:#B42318; font-size:13.5px; font-weight:600;}
.btn-submit{justify-content:center; width:100%; padding:14px; font-size:16px; background:var(--ink); color:var(--invert-ink); border-color:var(--ink);}
.btn-submit:disabled{opacity:.6; cursor:wait; transform:none;}
.privacy{margin:0; font-size:12px; color:var(--muted); text-align:center;}
.alt-actions{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 18px;
  padding-top:16px; border-top:1px solid var(--line); font-size:15px; color:var(--muted);
}
.alt-actions button, .alt-actions a{
  padding:6px 0; font-size:16px !important; border:0; background:none; cursor:pointer;
  font:inherit; font-weight:700; color:var(--ink); text-decoration:underline; text-underline-offset:3px;
}
/* 確認頁 */
.cart-confirm h3{font-size:20px; font-weight:900; outline:none;}
.cart-confirm .form-hint{margin:6px 0 0;}
.confirm-sub{margin:22px 0 8px; font-size:14px; font-weight:800; color:var(--ink-2);}
.confirm-sub span{font-weight:600; color:var(--muted);}
.confirm-info{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 16px; margin:0;
  padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:var(--card); font-size:15px;
}
.confirm-info dt{color:var(--muted); font-weight:600; white-space:nowrap;}
.confirm-info dd{margin:0; font-weight:700; word-break:break-word;}
.confirm-info .muted{color:var(--muted); font-weight:500;}
.confirm-items{margin:0; padding:0 0 0 22px; display:flex; flex-direction:column; gap:8px;}
.confirm-items li{padding-left:2px; font-size:14.5px;}
.confirm-items li strong{display:block; font-weight:700;}
.confirm-items li span{font-size:12.5px; color:var(--muted);}
.cart-confirm .form-error{margin-top:16px;}
.confirm-actions{display:flex; gap:10px; margin-top:24px;}
.confirm-actions .btn{flex:1; justify-content:center; padding:14px; font-size:16px;}
.cart-done{padding:48px 8px; text-align:center;}
.done-icon{
  width:64px; height:64px; margin:0 auto 16px; border-radius:50%; display:grid; place-items:center;
  background:#06C755; color:#fff; font-size:32px; font-weight:900;
}
.cart-done h3{font-size:22px; font-weight:900;}
.cart-done p{margin:8px 0;}
.cart-done strong{font-variant-numeric:tabular-nums; letter-spacing:.04em;}
.done-note{margin:16px 0 24px !important; font-size:14px; color:var(--muted);}
.done-note a{color:var(--ink); font-weight:700; text-decoration:underline; text-underline-offset:3px;}

/* ---------- Floating contact buttons ---------- */
.fab{
  position:fixed; z-index:60; right:calc(20px + env(safe-area-inset-right,0px));
  bottom:calc(20px + env(safe-area-inset-bottom,0px));
  display:flex; flex-direction:column; gap:12px;
}
.fab-btn{
  width:68px; height:68px; border-radius:32%; overflow:hidden; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.45);
  transition:transform .2s ease, box-shadow .2s ease;
}
.fab-btn:hover{transform:scale(1.08); box-shadow:0 14px 30px -8px rgba(0,0,0,.5);}
.fab-line{background:#06C755;}
.fab-line img{width:100%; height:100%; display:block;}
.fab-tel{background:#111; color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 10px 24px -8px rgba(0,0,0,.45);}
.fab-tel svg{width:32px; height:32px;}
.fab-label{display:none;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  border-radius:999px; padding:9px 18px; font-size:14px; font-weight:700;
  text-decoration:none; border:1.5px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .15s ease, background-color .15s ease, color .15s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-line{background:#06C755; color:#fff; border-color:#06C755;}
.btn-line:hover{background:#05B04B; border-color:#05B04B;}
.btn-tel{background:transparent; color:var(--ink); border-color:var(--ink);}
@media (hover:hover){ .btn-tel:hover{background:var(--ink); color:var(--invert-ink);} }
.btn-lg{padding:15px 28px; font-size:16px;}
.btn-icon{width:18px; height:18px; flex:0 0 auto;}
.btn-lg.btn-line::after{content:"→"; font-weight:400;}

/* ---------- Featured carousel (熱門禮贈品) ---------- */
.featured{max-width:1100px; margin:0 auto; padding:24px 20px 8px;}
.carousel{position:relative; border-radius:20px; overflow:hidden; background:var(--surface);}
.car-track{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  overscroll-behavior-x:contain; scrollbar-width:none;
}
.car-track::-webkit-scrollbar{display:none;}
.slide{flex:0 0 100%; position:relative; aspect-ratio:5/2; overflow:hidden; scroll-snap-align:start; display:block;}
/* 圖片完整顯示（不裁切標題），空白處用同一張圖的模糊版補滿 */
.slide-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:blur(28px) brightness(.92); transform:scale(1.2);
}
.slide-img{position:relative; display:block; width:100%; height:100%; object-fit:contain;}
.car-btn{
  position:absolute; top:50%; z-index:2; width:44px; height:44px; margin-top:-22px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; background:rgba(255,255,255,.88); color:#111; cursor:pointer;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.4);
  opacity:0; transition:opacity .2s ease, transform .2s ease;
}
.car-btn svg{width:22px; height:22px;}
.car-btn:hover{transform:scale(1.08);}
.carousel:hover .car-btn, .car-btn:focus-visible{opacity:1;}
.car-prev{left:14px;} .car-next{right:14px;}
.car-dots{position:absolute; left:0; right:0; bottom:8px; z-index:2; display:flex; justify-content:center; gap:2px;}
.car-dot{width:24px; height:24px; padding:0; border:0; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.car-dot::after{
  content:""; width:8px; height:8px; border-radius:999px;
  background:rgba(255,255,255,.65); box-shadow:0 0 0 1px rgba(0,0,0,.18);
  transition:width .3s ease, background-color .3s ease;
}
.car-dot.active::after{width:22px; background:#fff;}
@media (hover:none){ .car-btn{display:none;} }
@media (prefers-reduced-motion:reduce){ .car-track{scroll-behavior:auto;} }

/* ---------- Hero banner ---------- */
.hero-banner{max-width:1100px; margin:0 auto; padding:0 20px 72px;}
.hero-banner img{display:block; width:100%; height:auto; border-radius:20px;}
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

/* ---------- Hero ---------- */
.hero{max-width:1100px; margin:0 auto; padding:40px 20px 32px;}
.hero-title{padding-bottom:16px;}
.hero-intro{padding-top:28px;}
.hero.hero-intro p{margin-top:0; max-width:none; font-size:18px;}
.hero.hero-intro .intro-lead{font-size:clamp(20px,2.6vw,28px); font-weight:800; color:var(--ink); line-height:1.4; letter-spacing:-.01em; margin-bottom:8px;}
.hero .eyebrow{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:6px 12px; border:1px solid var(--line); border-radius:999px; color:var(--ink-2); background:var(--card);
}
.hero h1{
  font-size:clamp(22px,6vw,76px); line-height:1.1; white-space:nowrap; font-weight:900; margin-top:20px;
  letter-spacing:-.035em;
}
.hero h1 .dim{color:var(--muted);}
.hero p{color:var(--ink-2); font-size:17px; max-width:560px; margin:22px 0 32px;}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap;}

/* ---------- Catalog filters（商品區上方的篩選） ---------- */
.catalog{max-width:1100px; margin:36px auto 0; padding:0 20px;}
/* 工具列：標題＋件數在左，價格下拉選單在右，同一行 */
.catalog-head{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 20px;
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.catalog-title{display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px; min-width:0;}
.crumbs{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; font-size:clamp(20px,2.4vw,24px); font-weight:900; letter-spacing:-.02em;}
.crumbs a{color:var(--muted); text-decoration:none;}
.crumbs a:hover{color:var(--ink);}
.crumbs .sep{color:var(--line); font-weight:400;}
.crumbs .current{color:var(--ink);}
.result-count{font-size:14px; font-weight:600; color:var(--muted);}
.sub-row{margin-top:14px;}
.price-filter{display:flex; align-items:flex-start; gap:10px 14px; margin-top:14px;}
.filter-label{flex:none; padding-top:8px; font-size:14px; font-weight:800; color:var(--ink); white-space:nowrap;}
.filter-label small{display:block; font-size:11.5px; font-weight:600; color:var(--muted);}
.chip-row{display:flex; flex-wrap:wrap; gap:8px;}
.chip{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:8px;
  border:1.5px solid var(--line); background:var(--card); color:var(--ink-2);
  border-radius:999px; padding:8px 16px; font-size:14.5px; font-weight:700; cursor:pointer;
  font-family:inherit; font-variant-numeric:tabular-nums;
  transition:border-color .15s ease, background-color .15s ease, color .15s ease;
}
@media (hover:hover){ .chip:hover{border-color:var(--ink); color:var(--ink);} }
.chip.active{background:var(--ink); border-color:var(--ink); color:var(--invert-ink);}
.chip.is-empty{opacity:.45;}
.chip .count{
  min-width:22px; padding:1px 7px; border-radius:999px; text-align:center;
  font-size:12px; font-weight:700; background:var(--surface); color:var(--muted);
}
.chip.active .count{background:color-mix(in srgb, var(--invert-ink) 20%, transparent); color:inherit;}

/* ---------- Grid & cards ---------- */
.grid{
  max-width:1100px; margin:20px auto 56px; padding:0 20px;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px;
}
@media (max-width:1000px){ .grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
.card{
  background:var(--card); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column; border:1px solid var(--line);
  transition:transform .2s ease, box-shadow .2s ease;
}
@media (hover:hover){ .card:hover{transform:translateY(-4px); box-shadow:0 14px 30px -18px rgba(0,0,0,.35);} }
.swatch{
  position:relative; overflow:hidden;
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  background:var(--surface); color:var(--muted);
  font-weight:800; font-size:22px; letter-spacing:.04em;
  padding:12px; text-align:center; word-break:break-all;
}
.swatch img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; background:#fff; padding:14px;}
.card-body{padding:16px 18px 18px; display:flex; flex-direction:column; gap:4px; flex:1;}
.card-cat{
  align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:.08em;
  color:var(--ink-2); background:var(--surface); padding:3px 9px; border-radius:999px; margin-bottom:6px;
}
.card-name{font-size:15.5px; font-weight:700; line-height:1.4;}
.card-sku{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums;}
.card-foot{margin-top:auto; padding-top:10px; display:flex; flex-direction:column; gap:10px;}
.card-band{font-size:14px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums;}
.card-band small{display:block; font-size:11px; font-weight:600; letter-spacing:.06em; color:var(--muted);}
/* 滑鼠移上去的效果只在有滑鼠的裝置生效，手機點過之後才不會一直卡在黑底 */
.inq-btn{
  align-self:flex-end; padding:7px 12px; border:1.5px solid var(--ink); border-radius:999px; cursor:pointer;
  background:var(--card); color:var(--ink); font-family:inherit; font-size:13px; font-weight:800; white-space:nowrap;
  transition:background-color .15s ease, color .15s ease;
}
@media (hover:hover){ .inq-btn:hover{background:var(--ink); color:var(--invert-ink);} }
.inq-btn.added{background:var(--ink); color:var(--invert-ink);}
.toast{
  position:fixed; left:50%; top:132px; z-index:90; transform:translateX(-50%);
  max-width:calc(100vw - 32px); padding:10px 18px; border-radius:999px;
  background:var(--ink); color:var(--invert-ink); font-size:14px; font-weight:700; text-align:center;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.5);
}
.empty{text-align:center; color:var(--muted); padding:48px 20px; display:none;}

/* ---------- 商品詳細頁 ---------- */
.product-view{max-width:1100px; margin:0 auto; padding:24px 20px 72px;}
.pd-crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin-bottom:20px; font-size:14px; font-weight:700;}
.pd-crumbs a{color:var(--muted); text-decoration:none;}
.pd-crumbs a:last-child{color:var(--ink);}
@media (hover:hover){ .pd-crumbs a:hover{color:var(--ink); text-decoration:underline;} }
.pd-crumbs .sep{color:var(--line);}
.pd-main{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:44px; align-items:start;}
.pd-media{
  aspect-ratio:1/1; overflow:hidden; display:grid; place-items:center;
  background:#fff; border:1px solid var(--line); border-radius:24px;
  font-size:30px; font-weight:800; letter-spacing:.04em; color:#9A9A9A;
}
.pd-media img{width:100%; height:100%; object-fit:contain; padding:32px;}
/* 多張圖：大圖可以左右滑，下面是縮圖列 */
.pd-gallery{position:relative; min-width:0;}
.pd-track{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; overscroll-behavior-x:contain;}
.pd-track::-webkit-scrollbar{display:none;}
.pd-slide{flex:0 0 100%; height:100%; display:grid; place-items:center; scroll-snap-align:start;}
.pd-counter{
  position:absolute; top:14px; right:14px; padding:3px 10px; border-radius:999px;
  background:rgba(17,17,17,.6); color:#fff; font-size:12px; font-weight:700; font-variant-numeric:tabular-nums;
}
.pd-thumbs{display:flex; gap:10px; margin-top:12px; overflow-x:auto; scrollbar-width:none;}
.pd-thumb{
  flex:none; width:76px; height:76px; padding:4px; cursor:pointer;
  border:1.5px solid var(--line); border-radius:12px; background:#fff;
}
.pd-thumb img{width:100%; height:100%; object-fit:contain;}
.pd-thumb.active{border:2px solid var(--ink);}
.pd-codes{margin:2px 0 0; font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums;}
.pd-codes .sep{margin:0 8px; color:var(--line);}
.pd-info{display:flex; flex-direction:column; gap:16px; padding-top:6px;}
.pd-info .card-cat{margin:0;}
.pd-name{font-size:clamp(24px,3vw,32px); font-weight:900; line-height:1.3; letter-spacing:-.01em;}
.pd-meta{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px 20px; margin:0; padding:16px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:15px;
}
.pd-meta dt{color:var(--muted); font-weight:600;}
.pd-meta dd{margin:0; font-weight:800; font-variant-numeric:tabular-nums;}
/* 商品介紹區：主要資訊下方，佔整個寬度 */
.pd-about{margin-top:48px; padding:28px 32px; border:1px solid var(--line); border-radius:20px; background:var(--card);}
.pd-about h3{margin-bottom:14px; font-size:20px; font-weight:900;}
.pd-about > h4{margin:24px 0 10px; font-size:15px; font-weight:800;}
.pd-desc{margin:0; max-width:760px; color:var(--ink-2); font-size:15.5px; line-height:1.9;}
.pd-desc-empty{color:var(--muted); font-size:14.5px;}
.pd-desc p{margin:0 0 14px;}
.pd-desc h4{margin:26px 0 10px; font-size:16px; font-weight:800; color:var(--ink);}
.pd-desc > :first-child{margin-top:0;}
.pd-list{margin:0 0 14px; padding-left:20px; color:var(--ink-2); line-height:1.9;}
/* 規格表：「名稱：內容」自動排成兩欄 */
.pd-spec{
  display:grid; grid-template-columns:auto minmax(0,1fr); margin:0 0 14px;
  border:1px solid var(--line); border-radius:12px; overflow:hidden; font-size:15px;
}
.pd-spec dt, .pd-spec dd{margin:0; padding:10px 16px; border-bottom:1px solid var(--line);}
.pd-spec dt{background:#FAFAF8; color:var(--muted); font-weight:700; white-space:nowrap;}
.pd-spec dd{color:var(--ink);}
.pd-spec dt:nth-last-of-type(1), .pd-spec dd:last-of-type{border-bottom:0;}
.pd-note{margin:0; font-size:13.5px; color:var(--muted);}
.pd-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:4px;}
.inq-btn.inq-lg{align-self:auto; padding:14px 26px; font-size:16px;}
.pd-section{margin-top:64px;}
.pd-section h3{margin-bottom:16px; font-size:20px; font-weight:900;}
.pd-grid{max-width:none; margin:0 !important; padding:0 !important;}
.pd-back{margin-top:48px; text-align:center;}
.pd-missing{padding:80px 0; text-align:center;}
.pd-missing h2{font-size:24px; font-weight:900;}
.pd-missing p{margin:8px 0 24px; color:var(--muted);}
/* 沒有圖片時的佔位圖：淡淡的火焰 Logo ＋「圖片準備中」 */
.ph{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; width:100%; height:100%;}
.ph img{position:static !important; width:34% !important; height:auto !important; padding:0 !important; background:none !important; opacity:.28; filter:grayscale(1);}
.ph small{font-size:12px; font-weight:600; letter-spacing:.08em; color:#A0A0A0;}
.sr-thumb .ph small, .cart-thumb .ph small{display:none;}
.sr-thumb .ph img, .cart-thumb .ph img{width:60% !important;}
.pd-empty .ph img{width:26% !important;}
.pd-empty .ph small{font-size:14px;}
/* 商品卡片：圖片和品名可以點 */
a.swatch{text-decoration:none;}
.card-name{color:inherit; text-decoration:none;}
@media (hover:hover){ .card-name:hover{text-decoration:underline; text-underline-offset:3px;} }

/* ---------- Footer ---------- */
footer{background:#0B0B0B; color:#EDEDED; padding:72px 20px 40px;}
.foot-inner{max-width:1100px; margin:0 auto;}
footer h2{color:#fff; font-size:clamp(28px,5vw,48px); font-weight:900; line-height:1.15; margin-bottom:14px; letter-spacing:-.03em;}
footer p{color:#A8A8A8; font-size:15px; margin:0 0 28px;}
.foot-ctas{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:48px;}
footer .btn-tel{color:#fff; border-color:#555;}
@media (hover:hover){ footer .btn-tel:hover{background:#fff; color:#111; border-color:#fff;} }
.foot-meta{font-size:13px; color:#7D7D7D; line-height:2; padding-top:24px; border-top:1px solid #262626;}
.foot-meta a{color:inherit; text-decoration:none;}
@media (hover:hover){ .foot-meta a:hover{color:#fff; text-decoration:underline;} }

@media (max-width:600px){
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px));}
  .fab{
    left:0; right:0; bottom:0; flex-direction:row; gap:10px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
    background:color-mix(in srgb, var(--bg) 92%, transparent);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
  }
  .fab-btn{
    flex:1; width:auto; height:48px; gap:8px; border-radius:14px; box-shadow:none;
    color:#fff; text-decoration:none; font-size:15px; font-weight:800;
  }
  .fab-btn:hover{transform:none; box-shadow:none;}
  .fab-line img{width:30px; height:30px;}
  .fab-tel{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28);}
  .fab-tel svg{width:22px; height:22px;}
  .fab-label{display:inline;}
  .btn{padding:7px 13px; font-size:13px;}
  .btn-lg{padding:13px 22px; font-size:15px;}
  .btn-submit, .confirm-actions .btn{padding:14px; font-size:16px;}
  footer p{font-size:14px;}
  .hero{padding-top:40px;}
  .hero-banner{padding:0 16px 48px;}
  .hero-banner img{border-radius:14px;}
  .featured{padding:16px 16px 4px;}
  .carousel{border-radius:14px;}
  .catalog{margin-top:24px; padding:0 16px;}
  .chip{padding:7px 13px; font-size:13.5px;}
  .price-filter{flex-direction:column; gap:8px;}
  .filter-label{padding-top:0;}
  .filter-label small{display:inline; margin-left:6px;}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:0 16px;}
  .card-body{padding:12px 12px 14px;}
  .card-name{font-size:14px;}
  .card-band{font-size:13px;}
  .swatch{font-size:15px;}
  .product-view{padding:16px 16px 48px;}
  .pd-main{grid-template-columns:1fr; gap:20px;}
  .pd-media{border-radius:18px;}
  .pd-media img{padding:20px;}
  .pd-thumb{width:60px; height:60px;}
  .pd-actions .btn, .pd-actions .inq-btn{flex:1 1 100%; justify-content:center;}
  .pd-section{margin-top:44px;}
  .pd-about{margin-top:32px; padding:20px 18px; border-radius:16px;}
  .inq-btn{padding:6px 10px; font-size:12.5px;}
  .toast{top:72px; font-size:13px; border-radius:16px;}
  }