:root{
  --green:#0f3b32; --green-2:#165446; --cream:#fbf7ef; --paper:#ffffff;
  --ink:#1d2421; --muted:#5d6a65; --line:#e6e0d3;
  --accent:#e2513a; --accent-2:#c8402b; --gold:#f3b938; --pink:#e85a9b;
  --radius:16px; --shadow:0 6px 24px rgba(15,59,50,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:72px}
body{margin:0; background:var(--cream); color:var(--ink);
  font-family:"Noto Sans TC",system-ui,-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif;
  line-height:1.7; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:var(--green-2)}
.wrap{max-width:1120px; margin:0 auto; padding:0 16px}

/* top bar */
.topbar{position:sticky; top:0; z-index:10; background:rgba(15,59,50,.97); color:#fff; backdrop-filter:blur(6px)}
.topbar-in{display:flex; align-items:center; justify-content:space-between; height:60px}
.brand{display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-weight:700}
.logo{width:38px; height:38px; border-radius:50%; background:#fff; color:var(--green);
  display:grid; place-items:center; font-weight:900; font-size:14px; letter-spacing:-.5px}
.brand-name{font-size:18px}
.nav{display:flex; gap:4px}
.nav a{color:#e3efe9; text-decoration:none; padding:8px 10px; border-radius:8px; font-size:15px}
.nav a:hover{background:rgba(255,255,255,.1)}

/* hero */
.hero{background:radial-gradient(1200px 400px at 85% -10%, #1f6b59 0%, transparent 60%), var(--green); color:#fff; padding:56px 0 64px}
.eyebrow{display:inline-block; margin:0 0 12px; padding:4px 12px; border-radius:99px; background:var(--gold); color:var(--green); font-weight:700; font-size:14px}
.hero h1{font-size:clamp(30px,6vw,52px); line-height:1.25; margin:0 0 16px; font-weight:900; letter-spacing:.5px}
.lead{max-width:640px; color:#d6e7e0; font-size:17px; margin:0 0 24px}
.lead strong{color:#fff}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:36px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:12px 22px; border-radius:12px;
  font-weight:700; text-decoration:none; font-size:16px; border:0; cursor:pointer; transition:transform .1s, background .2s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:hover{background:var(--accent-2)}
.btn-ghost{background:transparent; color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.trust{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; max-width:560px}
.trust li{background:rgba(255,255,255,.08); border-radius:12px; padding:12px; display:flex; flex-direction:column}
.trust b{font-size:24px; color:var(--gold); line-height:1.2}
.trust span{font-size:13px; color:#cfe1d9; line-height:1.4; margin-top:4px}

/* sections */
.section{padding:56px 0}
.section.alt{background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
h2{font-size:clamp(24px,4vw,32px); margin:0 0 6px; color:var(--green)}
.sub{color:var(--muted); margin:0 0 20px}

/* chips */
.chips{display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:20px; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto; padding:8px 16px; border-radius:99px; border:1px solid var(--line); background:var(--paper);
  color:var(--ink); font:inherit; font-size:15px; cursor:pointer}
.chip[aria-selected="true"]{background:var(--green); color:#fff; border-color:var(--green)}

/* product grid */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px}
.card{background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;
  display:flex; flex-direction:column; border:1px solid var(--line); scroll-margin-top:80px}
/* 商品圖上下有白邊，裁成橫幅只留中間的綠色主視覺 */
.card .media{position:relative; aspect-ratio:1.55/1; background:var(--green); overflow:hidden}
.card .media img{width:100%; height:100%; object-fit:cover}
.badge{position:absolute; top:10px; left:10px; padding:3px 10px; border-radius:99px; font-size:13px; font-weight:700}
.badge.hot{background:var(--accent); color:#fff}
.badge.out{background:#333; color:#fff}
.card.is-out .media img{filter:grayscale(.85); opacity:.7}
.card .body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; flex:1}
.card h3{margin:0; font-size:18px; line-height:1.4}
.card .note{margin:0; color:var(--muted); font-size:14px}
.price{font-size:22px; font-weight:900; color:var(--accent-2)}
.price small{font-size:13px; font-weight:500; color:var(--muted); margin-left:2px}
.vids{display:flex; flex-wrap:wrap; gap:6px}
.vid{display:inline-flex; align-items:center; gap:4px; font-size:13px; padding:4px 10px; border-radius:8px;
  background:#fdecea; color:#b42318; text-decoration:none; font-weight:500}
.vid:hover{background:#fbd9d4}
.vid::before{content:"▶"; font-size:10px}
.actions{margin-top:auto; display:flex; flex-direction:column; gap:6px; padding-top:6px}
.actions .btn{width:100%; padding:11px 14px; font-size:15px}
.btn-disabled{background:#d9d6cf; color:#6b6760; cursor:not-allowed}
.alt-link{font-size:13px; color:var(--muted); text-align:center}
.alt-link a{color:var(--muted)}

/* steps */
.steps{list-style:none; padding:0; margin:20px 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px}
.steps li{display:flex; gap:12px; background:var(--cream); border-radius:var(--radius); padding:16px}
.steps .n{flex:0 0 34px; height:34px; border-radius:50%; background:var(--green); color:#fff; display:grid; place-items:center; font-weight:900}
.steps h3{margin:2px 0 4px; font-size:17px}
.steps p{margin:0; color:var(--muted); font-size:15px}
.small{font-size:14px; color:var(--muted)}

/* about */
.about{display:grid; grid-template-columns:1.3fr 1fr; gap:32px; align-items:start}
.about p{color:#3b4642}
.links{display:grid; gap:12px}
.link-card{display:flex; align-items:center; gap:14px; padding:14px 16px; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); text-decoration:none; color:var(--ink); box-shadow:var(--shadow)}
.link-card .ico{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:#fff; font-weight:900; font-size:18px}
.link-card.yt .ico{background:#e62117}
.link-card.fb .ico{background:#1877f2}
.link-card.sp .ico{background:#e2513a}
.link-card b{display:block}
.link-card small{color:var(--muted)}

.footer{background:var(--green); color:#cfe1d9; text-align:center; padding:24px 0; font-size:14px}
.footer p{margin:0}

@media (max-width:760px){
  .about{grid-template-columns:1fr}
  .nav a{padding:8px 7px; font-size:14px}
  .hero{padding:40px 0 48px}
  .trust b{font-size:20px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
  .card .body{padding:10px 12px 12px}
  .card h3{font-size:15px}
  .price{font-size:19px}
  .card .note{font-size:13px}
}
@media (max-width:360px){
  .grid{grid-template-columns:1fr}
  .brand-name{display:none}
}