/* ===== Tokens：色值逐字取自誠品 animeexpo style.css（#000 / #ea5535 / #00b2a9 / #feea57 / #fff）
   IT 初稿補 #eef1f6 / #31384a（store.js）作卡片內文與淺色面 ===== */
:root{
  --bg:#000000; --ink:#ffffff; --muted:#b8bcc6; --line:#00b2a9;
  --accent:#ea5535; --teal:#00b2a9; --yellow:#feea57;
  --card:#0b0b0b; --card-2:#121212; --paper:#eef1f6; --paper-ink:#31384a;
  --font:"Noto Sans TC","微軟正黑體","Microsoft JhengHei",sans-serif;
  --disp:"Orbitron","Noto Sans TC",sans-serif;
  --w:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:url("assets/images/eslite/bg.jpg") top 20px center repeat-y,var(--bg);scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);line-height:1.5;font-size:16px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul{list-style:none}
.wrap{width:min(var(--w),100%);margin:0 auto;padding:0 16px}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ===== 公告列（IT 初稿的防詐公告，跑馬燈） ===== */
.notice{background:var(--accent);color:#fff;font-size:13px;font-weight:500;height:32px;overflow:hidden;position:relative}
.notice .track{display:flex;gap:80px;white-space:nowrap;line-height:32px;animation:marq 60s linear infinite;width:max-content;padding-left:100vw}
@keyframes marq{to{transform:translateX(-50%)}}
.notice:hover .track{animation-play-state:paused}

/* ===== Header ===== */
.hdr{background:#000;border-bottom:2px solid var(--teal);position:sticky;top:0;z-index:50}
.hdr .row{display:flex;align-items:center;gap:20px;height:68px}
.logo{display:flex;align-items:baseline;gap:6px;font-weight:900;font-size:22px;letter-spacing:.02em}
.logo b{color:var(--accent)}
.logo small{font-family:var(--disp);font-size:11px;color:var(--teal);letter-spacing:.18em}
.search{flex:1;display:flex;max-width:520px;border:2px solid var(--teal);border-radius:40px;overflow:hidden;background:#0b0b0b}
.search input{flex:1;background:transparent;border:0;color:#fff;padding:0 18px;font:inherit;font-size:14px;min-width:0}
.search input::placeholder{color:#8a8f99}
.search button{background:var(--teal);color:#000;font-weight:700;padding:0 18px;height:40px}
.search button:hover{background:#00c9be;color:#000}
.hdr .util{display:flex;gap:6px;margin-left:auto}
.hdr .util a{padding:8px 12px;border-radius:40px;font-size:14px;color:#fff;border:1px solid transparent}
.hdr .util a:hover{border-color:var(--teal);color:#fff}
.hdr .util a.daigou{border:2px solid var(--accent);color:#fff;font-weight:700}
.hdr .util a.daigou:hover{background:var(--accent);color:#fff}
.mnav{border-top:1px solid #1f1f1f}
.mnav ul{display:flex;gap:4px;height:44px;align-items:center;overflow-x:auto;scrollbar-width:none}
.mnav ul::-webkit-scrollbar{display:none}
.mnav li a{padding:8px 14px;border-radius:40px;font-weight:700;font-size:15px;white-space:nowrap;color:#fff}
.mnav li a:hover{background:#fff;color:var(--accent)}
.mnav li a.on{color:var(--yellow)}

/* ===== KV：誠品 kv_pc 結構（底圖＋絕對定位元件），標題改 HTML 文字 ===== */
.kv{position:relative;max-width:1920px;margin:0 auto;overflow:hidden;background:#000}
.kv img.bg{width:100%;aspect-ratio:1920/750;object-fit:cover}
.kv .m{display:none}
.kv .t{position:absolute;left:34.8%;top:13.3%;width:45.5%;color:var(--accent)}
.kv .date{font-family:var(--disp);font-weight:800;font-size:clamp(14px,1.7vw,32px);letter-spacing:.12em;line-height:1.2}
.kv .date span{color:var(--teal)}
.kv h1{font-weight:900;font-size:clamp(28px,4.9vw,94px);line-height:1.05;letter-spacing:.02em;margin-top:.5em;text-shadow:0 0 0 #000}
.kv .sub{margin-top:.6em;color:#fff;font-weight:700;font-size:clamp(12px,1.25vw,24px);letter-spacing:.06em}
.kv .num{position:absolute;left:60.8%;top:58.6%;width:12.08%;animation:pulse .8s ease-in-out -2s infinite}
.kv .mnum{display:none}
.kv .cta{position:absolute;left:66%;top:11.5%;background:var(--accent);color:#fff;font-weight:900;font-size:clamp(13px,1.2vw,20px);padding:.5em 1.4em;border-radius:40px;letter-spacing:.06em}
.kv .cta:hover{background:#fff;color:var(--accent)}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* ===== 右側固定選單：誠品 .navstyle ===== */
.sidenav{position:fixed;right:10px;top:150px;z-index:40;width:120px;padding:18px 8px 22px;border-radius:10px 0 0 10px;background:var(--accent)}
.sidenav li{display:flex;justify-content:center}
.sidenav a{display:block;color:#fff;padding:5px 10px;margin:4px 0;border-radius:40px;font-size:14px;font-weight:700}
.sidenav a:hover,.sidenav a.active{background:#fff;color:var(--accent)}

/* ===== 區塊標題：誠品 .titleC（箭頭 gif 夾標題）===== */
.sec{padding:36px 0 10px}
.sec.first{max-width:1920px;margin:0 auto;background:url("assets/images/eslite/promotion_bg.jpg") top center no-repeat;background-size:contain}
.titleC{text-align:center}
.titleC h2{color:var(--accent);font-weight:900;font-size:clamp(30px,4.5vw,65px);margin:16px auto;display:flex;justify-content:center;align-items:center;gap:20px;line-height:1.2}
.titleC h2::before,.titleC h2::after{content:"";width:214px;height:45px;flex:none;background:url("assets/images/eslite/titleH2_arrow.gif") center/contain no-repeat}
.titleC h2::after{transform:scaleX(-1)}
.titleC h3{display:inline-block;max-width:100%;margin:0 auto 22px;color:#fff;font-weight:700;font-size:clamp(18px,2.6vw,30px);line-height:1.3;padding:12px 44px;border:2px solid var(--teal);border-radius:14px;background:url("assets/images/eslite/dot_pattern.png") #000;position:relative;overflow:hidden}
.titleC h3::before,.titleC h3::after{content:"";position:absolute;top:-10px;width:44px;height:44px;background:var(--accent);clip-path:polygon(0 0,100% 0,0 100%)}
.titleC h3::before{left:-10px}
.titleC h3::after{right:-10px;transform:scaleX(-1)}
.titleC p.lead{color:var(--muted);font-size:15px;margin:-8px 0 20px}

/* ===== 攻略卡：誠品 promotion_box 的四卡結構，內容換成比比昂服務保證 ===== */
.promo{display:flex;justify-content:space-evenly;flex-wrap:wrap;gap:20px;padding-top:10px}
.promo li{width:270px;background:#fff;color:var(--paper-ink);border:3px solid var(--teal);border-radius:6px;overflow:hidden;text-align:center}
.promo li .h{background:var(--teal);color:#fff;font-weight:900;font-size:28px;padding:6px}
.promo li .b{padding:14px 12px 16px}
.promo li .b strong{display:block;font-size:22px;font-weight:900;color:#000;line-height:1.2}
.promo li .b big{display:block;font-family:var(--disp);font-weight:800;font-size:56px;color:var(--accent);line-height:1}
.promo li .b span{display:block;font-size:13px;color:#555;margin-top:4px}

/* ===== 頁籤：誠品 .tab 藥丸 ===== */
.tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin:10px auto 24px}
.tabs button{padding:8px 22px;border-radius:40px;color:#fff;background:url("assets/images/eslite/dot_pattern.png");border:2px solid var(--teal);font-size:17px;font-weight:500}
.tabs button:hover{background:#fff;color:var(--teal);border-color:#fff}
.tabs button[aria-selected="true"]{background:var(--teal);color:#fff;border-color:var(--teal)}

/* ===== 商品格：IT 初稿卡片架構 × 誠品 recommend 配色 ===== */
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.card{background:var(--card);border:2px solid var(--teal);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;position:relative;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,178,169,.25)}
.card .ph{background:#fff;aspect-ratio:1;display:grid;place-items:center;padding:10px}
.card .ph img{width:100%;height:100%;object-fit:contain}
.card .badge{position:absolute;top:10px;left:10px;font-size:12px;font-weight:700;padding:3px 9px;border-radius:40px;background:var(--teal);color:#fff}
.card .badge.out{background:#555}
.card .badge.pre{background:var(--accent)}
.card .body{padding:12px 12px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.card .tag{font-size:12px;color:var(--teal);font-weight:700}
.card .ttl{font-size:14px;line-height:1.4;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
.card .price{margin-top:auto;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.card .price big{font-family:var(--disp);font-weight:800;font-size:22px;color:var(--yellow)}
.card .price small{font-size:12px;color:var(--muted)}
.card .stock{font-size:12px;color:var(--muted)}
.card .stock.low{color:var(--accent);font-weight:700}
.card .act{display:flex;gap:8px;margin-top:6px}
.card .act button{flex:1;border:2px solid var(--teal);color:#fff;border-radius:40px;padding:7px 0;font-size:14px;font-weight:700;background:#000}
.card .act button:hover{background:var(--teal);color:#fff}
.card .act button.fav{flex:0 0 40px;border-color:#444;color:#fff}
.card .act button.fav:hover{border-color:var(--accent);background:var(--accent);color:#fff}
.card .act button.fav.on{background:var(--accent);border-color:var(--accent)}
.more{text-align:center;margin:22px 0 8px}
.more button{border:2px solid var(--accent);color:#fff;padding:10px 32px;border-radius:40px;font-weight:700}
.more button:hover{background:var(--accent);color:#fff}

/* ===== 排行榜：橫向卷軸 ===== */
.rank{display:flex;gap:14px;overflow-x:auto;padding:6px 2px 16px;scroll-snap-type:x mandatory}
.rank li{flex:0 0 200px;scroll-snap-align:start;background:url("assets/images/eslite/dot_pattern.png");border:2px solid var(--teal);border-radius:8px;padding:12px;position:relative;display:flex;flex-direction:column;gap:6px}
.rank li:nth-child(odd){background:var(--accent);border-color:var(--accent)}
.rank .no{position:absolute;top:-2px;left:-2px;font-family:var(--disp);font-weight:800;font-size:22px;background:#000;color:var(--yellow);padding:4px 12px;border-radius:8px 0 8px 0;line-height:1;border:2px solid var(--teal)}
.rank .ph{background:#fff;border-radius:6px;aspect-ratio:1;display:grid;place-items:center;padding:8px}
.rank .ph img{width:100%;height:100%;object-fit:contain}
.rank .ttl{font-size:13px;font-weight:700;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.rank .price{font-family:var(--disp);font-weight:800;color:var(--yellow);font-size:18px}
.rank .views{font-size:12px;color:#fff;opacity:.9}

/* ===== 橫幅：誠品 .banner 區 ===== */
.bannerC{padding:28px 0}
.bannerC .bn{display:block;border:3px solid var(--teal);border-radius:10px;overflow:hidden;position:relative;background:#111}
.bannerC img{width:100%;aspect-ratio:1280/307;object-fit:cover}
.bannerC .cap{position:absolute;left:24px;bottom:20px;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);border:2px solid var(--yellow);padding:10px 18px;border-radius:8px;max-width:calc(100% - 48px)}
.bannerC .cap b{display:block;font-family:var(--disp);font-size:22px;color:var(--yellow);letter-spacing:.06em}
.bannerC .cap span{font-size:14px;color:#fff}

/* ===== 熱門作品關鍵字：誠品 keyword-bn .ten-word ===== */
.kw{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.kw li{border:2px solid var(--teal);background:var(--teal);border-radius:40px;text-align:center}
.kw li:nth-child(even){background:url("assets/images/eslite/dot_pattern.png")}
.kw a{display:block;padding:12px 8px;font-weight:700;font-size:17px;color:#fff}
.kw a:hover{background:#fff;color:var(--teal);border-radius:40px}

/* ===== 雙欄：誠品 .half（點陣底＋湖水綠框） ===== */
.half{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.half .box{background:url("assets/images/eslite/dot_pattern.png");border:2px solid var(--teal);border-radius:10px;padding:16px}
.half .box h3{font-weight:700;font-size:24px;text-align:center;padding:10px 0;margin-bottom:14px;background:url("assets/images/eslite/titleHalf.png") center/contain no-repeat}
.half .grid{grid-template-columns:repeat(3,1fr);gap:12px}

/* ===== 代購估價器：比比昂機能 ===== */
.est{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;background:#fff;color:var(--paper-ink);border:3px solid var(--accent);border-radius:12px;padding:26px}
.est h3{font-size:26px;font-weight:900;color:#000;margin-bottom:6px}
.est p{font-size:14px;color:#555}
.est form{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.est label{font-size:13px;font-weight:700;color:#000}
.est input,.est select{width:100%;border:2px solid #cfd6e0;border-radius:8px;padding:11px 12px;font:inherit;font-size:15px;color:#000;background:#fff}
.est input:focus,.est select:focus{border-color:var(--teal);outline:0}
.est .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.est .go{background:var(--accent);color:#fff;font-weight:900;padding:12px;border-radius:40px;font-size:16px;margin-top:4px}
.est .go:hover{background:#c8401f;color:#fff}
.est .out{background:var(--paper);border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:10px}
.est .out h4{font-size:15px;color:#000;font-weight:900}
.est .out dl{display:grid;grid-template-columns:1fr auto;gap:8px 12px;font-size:14px}
.est .out dt{color:#555}.est .out dd{font-family:var(--disp);font-weight:600;color:#000;text-align:right}
.est .out .tot{border-top:2px dashed #c9d0da;padding-top:10px;margin-top:4px}
.est .out .tot dd{font-size:24px;color:var(--accent);font-weight:800}
.est .out .note{font-size:12px;color:#777;line-height:1.5}
.est .steps{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.est .steps span{font-size:12px;background:#fff;border:1px solid #c9d0da;border-radius:40px;padding:3px 10px;color:#31384a}

/* ===== 服務帶 ＋ Footer（IT 初稿結構，誠品配色） ===== */
.svc{border-top:2px solid var(--teal);border-bottom:2px solid var(--teal);background:#000;margin-top:40px}
.svc ul{display:grid;grid-template-columns:repeat(4,1fr)}
.svc li{padding:22px 16px;border-right:1px solid #222;display:flex;gap:12px;align-items:center}
.svc li:last-child{border-right:0}
.svc .ic{width:44px;height:44px;border-radius:50%;background:var(--teal);color:#000;display:grid;place-items:center;font-weight:900;font-family:var(--disp);flex:none}
.svc b{display:block;font-size:16px}.svc span{font-size:13px;color:var(--muted)}
.ftr{padding:40px 0 30px;color:#cfd3db}
.ftr .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1.6fr;gap:28px}
.ftr h5{color:#fff;font-size:15px;margin-bottom:12px}
.ftr li{font-size:14px;margin:6px 0}
.ftr li a:hover{color:var(--yellow)}
.ftr .brand p{font-size:14px;margin:10px 0 14px;color:var(--muted)}
.ftr .soc{display:flex;gap:8px}
.ftr .soc a{width:36px;height:36px;border-radius:50%;border:2px solid var(--teal);display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff}
.ftr .soc a:hover{background:var(--teal);color:#fff}
.ftr .news{display:flex;border:2px solid var(--teal);border-radius:40px;overflow:hidden}
.ftr .news input{flex:1;background:#000;border:0;color:#fff;padding:0 14px;font:inherit;min-width:0}
.ftr .news button{background:var(--teal);color:#000;font-weight:700;padding:0 16px;height:40px}
.ftr .news button:hover{background:#00c9be;color:#000}
.ftr .note{font-size:12px;color:var(--muted);margin-top:8px}
.ftr .bot{border-top:1px solid #222;margin-top:28px;padding-top:16px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted)}

/* ===== 商品抽屜（模擬下單流程） ===== */
.drawer{position:fixed;inset:0;z-index:100;display:none}
.drawer.open{display:block}
.drawer .mask{position:absolute;inset:0;background:rgba(0,0,0,.7)}
.drawer .pane{position:absolute;top:0;right:0;height:100%;width:min(460px,100%);background:#fff;color:#000;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:14px;box-shadow:-10px 0 40px rgba(0,0,0,.5)}
.drawer .x{align-self:flex-end;width:40px;height:40px;border-radius:50%;border:2px solid #000;font-size:20px;font-weight:700;color:#000;background:#fff}
.drawer .x:hover{background:#000;color:#fff}
.drawer .ph{background:var(--paper);border-radius:10px;aspect-ratio:1;display:grid;place-items:center;padding:14px}
.drawer .ph img{max-height:100%;object-fit:contain}
.drawer h3{font-size:18px;line-height:1.4}
.drawer .meta{font-size:13px;color:#555;display:flex;gap:10px;flex-wrap:wrap}
.drawer .price{font-family:var(--disp);font-weight:800;font-size:30px;color:var(--accent)}
.drawer .price small{font-family:var(--font);font-size:13px;color:#555;font-weight:400;margin-left:8px}
.drawer .qty{display:flex;align-items:center;gap:10px}
.drawer .qty button{width:36px;height:36px;border:2px solid #000;border-radius:50%;font-weight:900;color:#000}
.drawer .qty button:hover{background:#000;color:#fff}
.drawer .qty output{font-family:var(--disp);font-weight:800;font-size:20px;min-width:30px;text-align:center}
.drawer .ship{background:var(--paper);border-radius:10px;padding:12px;font-size:13px;color:var(--paper-ink);line-height:1.6}
.drawer .buy{background:var(--accent);color:#fff;font-weight:900;padding:14px;border-radius:40px;font-size:16px}
.drawer .buy:hover{background:#c8401f;color:#fff}
.drawer .buy:disabled{background:#999;color:#eee;cursor:not-allowed}
.drawer .prog{font-size:14px;font-weight:700;color:var(--teal);min-height:1.5em}
.drawer .prog.done{color:#047857}

/* ===== 回頂 ===== */
#gotop{position:fixed;right:30px;bottom:30px;width:44px;height:44px;border-radius:50%;background:var(--teal);color:#000;font-weight:900;z-index:60;opacity:0;visibility:hidden;transition:.3s}
#gotop.show{opacity:1;visibility:visible}
#gotop:hover{background:#fff;color:var(--teal)}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);background:var(--yellow);color:#000;font-weight:700;padding:10px 20px;border-radius:40px;opacity:0;transition:.25s;z-index:70;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%)}

/* ===== RWD ===== */
@media (max-width:1240px){.sidenav{display:none}}
@media (max-width:991px){
  .hdr .row{height:60px;gap:10px}.logo{font-size:18px}.logo small{display:none}
  .hdr .util a:not(.daigou){display:none}
  .kv{display:flex;flex-direction:column}
  .kv img.bg{aspect-ratio:5/6;object-fit:cover;object-position:0 0;order:2}
  .kv .t{position:static;width:100%;padding:22px 20px 18px;background:url("assets/images/eslite/dot_pattern.png") #000;border-bottom:2px solid var(--teal);order:1}
  .kv .date{font-size:15px}.kv h1{font-size:44px}.kv .sub{font-size:14px}
  .kv .mnum{display:flex;align-items:center;gap:8px;margin-top:14px;font-weight:900;font-size:24px;color:#fff;border:2px solid var(--teal);border-radius:12px;padding:8px 14px;width:fit-content}
  .kv .mnum img{width:64px}
  .kv .num{display:none}
  .kv .cta{position:static;order:3;align-self:flex-start;margin:-58px 0 18px 20px;font-size:15px;padding:10px 22px}
  .titleC h2::before,.titleC h2::after{width:64px;height:21px;background-image:url("assets/images/eslite/titleH2_arrow_m.png")}
  .promo li{width:calc(50% - 10px)}
  .grid{grid-template-columns:repeat(3,1fr);gap:10px}
  .kw{grid-template-columns:repeat(3,1fr)}
  .half{grid-template-columns:1fr}
  .est{grid-template-columns:1fr;padding:18px}
  .svc ul{grid-template-columns:1fr 1fr}.svc li:nth-child(2){border-right:0}
  .ftr .cols{grid-template-columns:1fr 1fr}.ftr .brand{grid-column:1/-1}.ftr .sub{grid-column:1/-1}
}
@media (max-width:600px){
  .grid,.half .grid{grid-template-columns:repeat(2,1fr)}
  .kw{grid-template-columns:repeat(2,1fr)}.kw a{font-size:15px}
  .promo li{width:calc(50% - 6px)}.promo{gap:12px}.promo li .h{font-size:20px}.promo li .b big{font-size:40px}.promo li .b strong{font-size:17px}
  .bannerC .cap{left:10px;bottom:10px;padding:6px 10px}.bannerC .cap b{font-size:14px}.bannerC .cap span{font-size:12px}
  .mnav li a{font-size:14px;padding:6px 10px}
  .search button{padding:0 12px}
  #gotop{right:12px;bottom:12px}
}