:root{
  --ink:#0b1d20;
  --muted:#627173;
  --line:#dbe4e1;
  --paper:#f7faf8;
  --panel:#ffffff;
  --deep:#0d302f;
  --deep2:#123c43;
  --accent:#d9ff5b;
  --accent2:#73e0c4;
  --warm:#f3f7f4;
  --shadow:0 18px 50px rgba(13,48,47,.12);
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Noto Sans TC","PingFang TC","Microsoft JhengHei",Arial,sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto;background:#eef3ef}
button,input,textarea,select{font:inherit}
.container{width:min(1180px,calc(100% - 40px));margin:0 auto}
.topline{background:var(--deep);color:#e9fbf1;font-size:13px;letter-spacing:.04em}
.topline .container{display:flex;justify-content:space-between;gap:18px;padding:8px 0;align-items:center}
.topline a{text-decoration:underline;text-underline-offset:3px}
.site-header{position:sticky;top:0;z-index:50;background:rgba(247,250,248,.9);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.header-inner{display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;min-height:72px}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.02em}
.brand-mark{width:44px;height:44px;border:2px solid var(--ink);display:grid;place-items:center;background:var(--accent);box-shadow:5px 5px 0 var(--ink);font-size:18px}
.brand small{display:block;font-weight:500;color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-top:-3px}
.nav{display:flex;align-items:center;justify-content:center;gap:4px}
.nav a{padding:10px 14px;border:1px solid transparent;border-radius:999px;font-weight:700;font-size:14px;color:#1d3437}
.nav a:hover{border-color:var(--line);background:#fff}
.cart-pill{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;padding:10px 15px;border-radius:999px;font-weight:800;font-size:14px}
.cart-pill b{background:var(--accent);color:var(--ink);min-width:24px;height:24px;border-radius:99px;display:grid;place-items:center}
.menu-btn{display:none;border:1px solid var(--line);background:#fff;border-radius:12px;padding:9px 12px;font-weight:800}
.hero{background:linear-gradient(135deg,#e7f2ef 0%,#f7faf8 48%,#d8f0e8 100%);border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:34px;align-items:stretch;padding:58px 0 46px}
.hero-copy{padding:20px 0 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;color:var(--deep);font-weight:900;letter-spacing:.12em;text-transform:uppercase;font-size:12px}
.eyebrow:before{content:"";width:34px;height:2px;background:var(--accent2);display:inline-block}
h1{font-size:clamp(42px,7vw,96px);line-height:.94;margin:0 0 22px;letter-spacing:-.07em;font-weight:950;max-width:850px}
.hero-copy>p{font-size:18px;color:#405154;max-width:640px;margin:0 0 26px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0}
.btn-primary,.btn-secondary,.btn-mini{border:0;cursor:pointer;font-weight:900;display:inline-flex;align-items:center;justify-content:center;transition:.2s ease}
.btn-primary{background:var(--accent);color:var(--ink);padding:14px 20px;border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
.btn-primary:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.btn-secondary{background:#fff;color:var(--deep);padding:14px 20px;border:1px solid var(--line)}
.btn-secondary:hover{border-color:var(--deep)}
.wide{width:100%}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:650px;margin-top:26px}
.stat{border:1px solid var(--line);background:rgba(255,255,255,.65);padding:16px}
.stat b{display:block;font-size:28px;line-height:1;font-weight:950}.stat span{font-size:13px;color:var(--muted)}
.hero-panel{background:var(--deep);padding:18px;box-shadow:var(--shadow);position:relative;overflow:hidden;min-height:560px;display:grid;grid-template-rows:1fr auto}
.hero-panel:before{content:"";position:absolute;inset:22px 22px auto auto;width:110px;height:110px;border:18px solid var(--accent);opacity:.85}
.hero-photo{height:390px;overflow:hidden;background:#dbe8e3}
.hero-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.98) contrast(1.03)}
.hero-card{position:relative;background:#fff;margin:-52px 22px 0;padding:24px;box-shadow:0 20px 45px rgba(0,0,0,.18)}
.hero-card strong{display:block;font-size:28px;line-height:1.1;margin-bottom:8px}.hero-card p{margin:0;color:#5d6a6c}.hero-card .mini-line{height:1px;background:var(--line);margin:20px 0}.hero-card ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;color:#273c3f}.hero-card li:before{content:"✓";font-weight:900;margin-right:8px;color:#0b736a}
.section{padding:68px 0}.section.tight{padding:38px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}.section-head h2{font-size:clamp(30px,4vw,54px);line-height:1;margin:0;letter-spacing:-.05em}.section-head p{margin:0;color:var(--muted);max-width:520px}.text-link{font-weight:900;text-decoration:underline;text-underline-offset:5px;color:var(--deep)}
.category-strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:#fff}
.category-strip a{padding:22px;border-right:1px solid var(--line);display:grid;gap:5px;min-height:128px;align-content:end;transition:.2s ease}.category-strip a:last-child{border-right:0}.category-strip a:hover{background:var(--deep);color:#fff}.category-strip b{font-size:28px;letter-spacing:-.05em}.category-strip span{color:var(--muted);font-size:14px}.category-strip a:hover span{color:#cde5df}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.product-card{background:#fff;border:1px solid var(--line);transition:.2s ease;display:grid;grid-template-rows:auto 1fr;min-width:0}.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#b7c7c4}.product-media{position:relative;aspect-ratio:1.08/1;overflow:hidden;background:#e4ece8}.product-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.product-card:hover .product-media img{transform:scale(1.045)}.product-media span{position:absolute;left:12px;top:12px;background:#fff;color:var(--deep);font-weight:900;font-size:13px;padding:7px 10px;border:1px solid rgba(0,0,0,.08)}.product-body{padding:18px;display:grid;gap:16px}.product-unit{font-size:12px;font-weight:900;color:#0b736a;letter-spacing:.08em;margin:0 0 6px}.product-card h3{font-size:22px;line-height:1.18;margin:0 0 8px;letter-spacing:-.04em}.product-card p{color:var(--muted);margin:0}.product-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.product-row strong{font-size:24px;letter-spacing:-.04em}.btn-mini{background:var(--ink);color:#fff;padding:10px 14px;min-width:64px}.btn-mini:hover{background:var(--deep)}
.catalog-hero{background:var(--ink);color:#fff;padding:50px 0 36px}.catalog-hero h1{font-size:clamp(42px,6vw,80px);max-width:900px}.catalog-hero p{color:#c8d6d4;max-width:680px}.filter-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}.filters{display:flex;gap:8px;flex-wrap:wrap}.filter{border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:900;padding:10px 14px;cursor:pointer}.filter.active,.filter:hover{background:var(--deep);color:#fff;border-color:var(--deep)}.count{font-weight:900;color:var(--muted)}
.detail-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:34px;align-items:start}.detail-media{background:#fff;border:1px solid var(--line);padding:16px;position:sticky;top:104px}.detail-media img{width:100%;aspect-ratio:1/1;object-fit:cover}.detail-info{background:#fff;border:1px solid var(--line);padding:34px}.detail-info h1{font-size:clamp(36px,5vw,64px);letter-spacing:-.06em}.detail-spec{font-size:18px;color:var(--muted)}.detail-price{display:block;font-size:42px;margin:24px 0;letter-spacing:-.05em}.detail-desc{color:#495b5d}.detail-notes{padding:18px 0 0;margin:22px 0 0;border-top:1px solid var(--line);color:var(--muted)}.qty-box{display:inline-grid;grid-template-columns:42px 70px 42px;border:1px solid var(--line);margin:18px 0;background:#fff}.qty-box button{border:0;background:#edf4f1;cursor:pointer;font-weight:950;font-size:20px}.qty-box input{border:0;text-align:center;font-weight:900;background:#fff}.qty-box.small{grid-template-columns:34px 45px 34px;margin:0}.qty-box.small input{font-size:14px}.qty-box.small button{font-size:16px}
.cart-layout{display:grid;grid-template-columns:1fr 330px;gap:24px;align-items:start}.cart-line{display:grid;grid-template-columns:110px 1fr auto auto;gap:18px;align-items:center;background:#fff;border:1px solid var(--line);padding:14px;margin-bottom:12px}.cart-line img{width:110px;height:110px;object-fit:cover}.cart-line h3{margin:0 0 6px;font-size:20px}.cart-line p{margin:0 0 6px;color:var(--muted);font-size:14px}.remove{border:1px solid var(--line);background:#fff;color:#a33;padding:9px 12px;cursor:pointer;font-weight:800}.cart-summary{background:var(--deep);color:#fff;padding:22px;position:sticky;top:100px}.cart-summary p{display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:12px}.cart-summary .text-link{display:block;color:#fff;text-align:center;margin-top:14px}.empty{background:#fff;border:1px solid var(--line);padding:40px;text-align:center}.empty h2{font-size:30px;margin:0 0 10px}.empty p{color:var(--muted)}.success{border-color:#b7d7cc;background:#f1fbf7}
.checkout-layout{display:grid;grid-template-columns:1fr 370px;gap:24px;align-items:start}.form-panel,.order-panel{background:#fff;border:1px solid var(--line);padding:26px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:grid;gap:6px}.field.full{grid-column:1/-1}.field label{font-weight:900;font-size:14px}.field input,.field textarea{width:100%;border:1px solid var(--line);background:#fff;padding:12px;outline:none}.field input:focus,.field textarea:focus{border-color:var(--deep)}.order-panel p{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:10px}.checkout-total{font-size:22px;font-weight:950;color:var(--deep)}
.content-page{background:#fff;border:1px solid var(--line);padding:40px;max-width:900px}.content-page h1{font-size:clamp(38px,5vw,68px)}.content-page h2{font-size:28px;margin-top:34px}.content-page p,.content-page li{color:#4b5b5d}.contact-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:24px}.contact-card{background:var(--deep);color:#fff;padding:24px}.contact-card span{display:block;color:#b8d9d4;font-size:13px;font-weight:900;letter-spacing:.08em}.contact-card b{font-size:24px;word-break:break-word}
.footer-banner{background:#d9ff5b;color:var(--ink);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:18px 0;font-weight:950;overflow:hidden}.footer-banner .marquee{display:flex;gap:36px;white-space:nowrap;animation:marq 24s linear infinite}@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.site-footer{background:var(--ink);color:#e6f2ef;padding:42px 0}.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:30px}.site-footer h3,.site-footer h4{margin-top:0}.site-footer p,.site-footer a{color:#b7c9c6}.footer-links{display:grid;gap:8px}.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:18px;display:flex;justify-content:space-between;gap:18px;color:#9fb3b0;font-size:13px}.toast{position:fixed;right:20px;bottom:20px;background:var(--ink);color:#fff;padding:14px 18px;z-index:80;box-shadow:var(--shadow);opacity:0;pointer-events:none;transform:translateY(12px);transition:.2s}.toast.show{opacity:1;transform:none}
@media(max-width:920px){
  .topline .container{display:block;text-align:center}.topline span:last-child{display:none}.header-inner{grid-template-columns:1fr auto auto;min-height:66px}.menu-btn{display:inline-flex}.nav{position:absolute;left:20px;right:20px;top:76px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);display:none;flex-direction:column;align-items:stretch;padding:10px}.nav.open{display:flex}.nav a{border-radius:0;padding:13px 12px}.hero-grid,.detail-layout,.cart-layout,.checkout-layout{grid-template-columns:1fr}.hero-grid{padding:38px 0}.hero-panel{min-height:auto}.hero-photo{height:320px}.stat-row,.category-strip{grid-template-columns:1fr 1fr}.product-grid{grid-template-columns:repeat(2,1fr)}.detail-media{position:static}.cart-summary{position:static}.footer-grid{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr}.contact-cards{grid-template-columns:1fr}
}
@media(max-width:560px){
  .container{width:min(100% - 28px,1180px)}.brand small{display:none}.brand-mark{width:40px;height:40px;box-shadow:4px 4px 0 var(--ink)}.cart-pill{padding:9px 10px}.cart-pill span{display:none}h1{font-size:46px}.hero-copy>p{font-size:16px}.hero-actions{display:grid}.btn-primary,.btn-secondary{width:100%}.hero-panel{padding:10px}.hero-photo{height:250px}.hero-card{margin:-34px 12px 0;padding:18px}.stat-row,.category-strip,.product-grid{grid-template-columns:1fr}.section{padding:48px 0}.section-head{display:grid}.filter-wrap{display:grid}.product-card{grid-template-columns:112px 1fr;grid-template-rows:auto}.product-media{aspect-ratio:1/1}.product-media span{font-size:11px;padding:5px 7px}.product-body{padding:12px;gap:10px}.product-card h3{font-size:18px}.product-card p{font-size:13px}.product-row strong{font-size:20px}.btn-mini{padding:8px 10px;min-width:auto}.cart-line{grid-template-columns:86px 1fr;gap:12px}.cart-line img{width:86px;height:86px}.cart-line .qty-box,.cart-line .remove{grid-column:2}.content-page{padding:24px}.footer-grid,.footer-bottom{grid-template-columns:1fr;display:grid}
}