:root { --bg:#FCF0DA; --accent:#F2C46A; --sage:#AEAC78; --text:#4C4541; --btn-text:#FCF9EA; --title:#4D2A00; --card:#FFF9EC; --shadow:0 2px 10px rgba(76,69,65,.08); }
* { box-sizing: border-box; }
html { scroll-behavior:smooth; scroll-padding-top:72px; }
body { margin:0; background:var(--bg); color:var(--text); font-family:-apple-system,"PingFang TC","Noto Sans TC",sans-serif; line-height:1.6; }
a { color:inherit; }
.wrap { max-width:1000px; width:100%; margin:0 auto; padding:0 16px 48px; box-sizing:border-box; }

/* top bar */
.topbar { position:sticky; top:0; z-index:10; background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:blur(8px); }
.topbar .in { max-width:1000px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { font-weight:800; color:var(--title); font-size:24px; letter-spacing:.06em; text-decoration:none; white-space:nowrap; }
.brand small { font-size:13px; font-weight:500; margin-left:8px; letter-spacing:.04em; }
.topbar nav { display:flex; gap:28px; margin-left:auto; }
.topbar nav a { position:relative; text-decoration:none; font-size:14px; padding:4px 0; }
.topbar nav a::after { content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:center; transition:transform .25s ease; }
@media (hover:hover) { .topbar nav a:hover::after { transform:scaleX(1); } }

/* hero */
.hero { display:grid; grid-template-columns:1.1fr 1fr; background:var(--card); border-radius:20px; overflow:hidden; box-shadow:var(--shadow); margin-top:8px; }
.hero .visual { min-height:300px; }
.hero .visual img { width:100%; height:100%; object-fit:cover; display:block; }
.hero .ph { height:100%; display:flex; align-items:center; justify-content:center; font-size:96px; background:linear-gradient(135deg,var(--sage),var(--accent)); }
.hero .txt { padding:40px 36px; display:flex; flex-direction:column; justify-content:center; gap:10px; }
.hero h1 { margin:0; color:var(--title); font-size:30px; letter-spacing:.06em; }
.tagline { margin:0; font-size:17px; letter-spacing:.08em; opacity:.8; }
.desc { margin:6px 0 0; opacity:.75; }
.cta { align-self:flex-start; margin-top:10px; background:var(--sage); color:var(--btn-text); border-radius:999px; padding:10px 24px; font-weight:600; text-decoration:none; transition:transform .15s; }
.cta:hover { transform:translateY(-2px); }

/* sections */
.section { margin:36px 0; }
.section > h2, .strip > h2 { margin:0 0 16px; color:var(--title); font-size:21px; letter-spacing:.06em; }

/* cards: thumbnail left, text right (like the product cards in the reference) */
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (min-width:861px) { .cards:has(.card:nth-child(4):last-child) { grid-template-columns:repeat(2,1fr); } }
.block.card { position:relative; display:flex; align-items:center; gap:14px; min-height:132px; background:var(--card); border-radius:18px; padding:12px; text-decoration:none; box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s; }
.block.card:hover { transform:translateY(-3px); box-shadow:0 8px 20px rgba(76,69,65,.14); }
.block.card img, .block.card .thumb { width:104px; height:104px; border-radius:14px; object-fit:cover; flex:none; }
.block.card .thumb { display:flex; align-items:center; justify-content:center; font-size:38px; font-weight:700; background:linear-gradient(135deg,var(--sage),var(--accent)); }
.block.card .t { flex:1; min-width:0; padding-right:34px; }
.block.card .t b { display:block; font-size:17px; }
.block.card .t small { display:block; opacity:.65; margin-top:2px; }
.block.card .go { position:absolute; right:12px; bottom:12px; width:30px; height:30px; border-radius:50%; background:var(--sage); color:var(--btn-text); display:flex; align-items:center; justify-content:center; font-size:14px; }

/* news strip */
.strip { display:flex; align-items:center; gap:24px; background:var(--card); border-left:6px solid var(--accent); border-radius:16px; padding:18px 24px; box-shadow:var(--shadow); margin:36px 0; }
.strip > h2 { margin:0; color:var(--title); font-size:19px; white-space:nowrap; }
.strip .items { flex:1; display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.block.news { position:relative; display:flex; flex-direction:column; padding:2px 28px 2px 22px; text-decoration:none; border-left:1px solid rgba(76,69,65,.15); }
.block.news small { font-size:12px; opacity:.6; }
.block.news b { font-size:14px; font-weight:600; }
.block.news .go { position:absolute; right:6px; bottom:2px; opacity:.5; }
a.block.news:hover b { text-decoration:underline; }

/* links */
.links { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.block.link { display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--sage); color:var(--btn-text); border-radius:999px; padding:14px 20px; text-decoration:none; text-align:center; box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s; }
.block.link:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(76,69,65,.15); }
.block.link small { opacity:.7; }
.links .block.link:last-child:nth-child(odd) { grid-column:1 / -1; }

/* footer */
#app { min-height:100vh; display:flex; flex-direction:column; }
.footer { margin-top:auto; background:var(--sage); color:var(--title); }
.footer .in { max-width:1000px; margin:0 auto; padding:28px 16px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; }
.fb { font-size:22px; font-weight:700; letter-spacing:.06em; }
.fb small { display:block; font-size:12px; font-weight:400; }
.footer .socials { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.footer .socials a { width:36px; height:36px; border-radius:50%; background:#fff; color:var(--text); display:flex; align-items:center; justify-content:center; text-decoration:none; transition:transform .15s; }
.footer .socials svg { width:18px; height:18px; display:block; }
.footer .socials a:hover { transform:translateY(-2px); }
.footer .note { text-align:right; font-size:14px; }

.loading { text-align:center; opacity:.5; padding:80px 0; }

.menu-btn { display:none; width:40px; height:40px; padding:0; margin-left:auto; border:0; background:none; cursor:pointer; flex-direction:column; justify-content:center; align-items:center; gap:5px; }
.menu-btn span { display:block; width:22px; height:2px; background:var(--title); border-radius:2px; transition:transform .25s, opacity .2s; }
.topbar.open .menu-btn span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.topbar.open .menu-btn span:nth-child(2) { opacity:0; }
.topbar.open .menu-btn span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
@media (max-width:760px) {
  .menu-btn { display:flex; }
  .topbar .in { flex-wrap:wrap; gap:0 16px; }
  .topbar nav { display:none; flex-direction:column; gap:0; width:100%; margin:0; padding:4px 0 8px; border-top:1px solid rgba(76,69,65,.12); }
  .topbar.open nav { display:flex; }
  .topbar nav a { font-size:16px; padding:12px 4px; }
  .topbar nav a::after { display:none; }
  .topbar nav a.active { color:var(--accent); font-weight:700; }
}
@media (max-width:860px) {
  .cards { grid-template-columns:1fr 1fr; }
  .strip { flex-direction:column; align-items:stretch; gap:12px; }
  .strip .items { grid-template-columns:1fr; gap:10px; }
  .block.news { border-left:none; border-top:1px solid rgba(76,69,65,.12); padding:10px 28px 0 0; }
}
@media (max-width:640px) {
  .topbar nav { gap:20px; }
  .brand { font-size:20px; }
  .hero { grid-template-columns:1fr; }
  .hero .visual { min-height:200px; }
  .hero .txt { padding:24px 20px 28px; text-align:center; align-items:center; }
  .cards, .links { grid-template-columns:1fr; }
  .footer .in { grid-template-columns:1fr; text-align:center; }
  .footer .note { text-align:center; }
}

/* brands page */
.page-head { margin:24px 0 8px; text-align:center; }
.page-head h1 { margin:0 0 6px; font-size:30px; letter-spacing:.06em; color:var(--title); }
.page-head .tagline { margin:0; }
.banners { display:flex; flex-direction:column; gap:16px; }
.banner { position:relative; display:block; height:200px; border-radius:20px; overflow:hidden; box-shadow:var(--shadow); color:inherit; text-decoration:none; }
.banner .pic, .banner .ph2 { position:absolute; inset:0; width:100%; height:100%; }
.banner img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.banner:hover img { transform:scale(1.04); }
.banner .ph2 { display:flex; align-items:center; justify-content:center; font-size:80px; font-weight:700; color:var(--title); background:linear-gradient(135deg,var(--sage),var(--accent)); }
.banner::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(77,42,0,.72),rgba(77,42,0,.05) 70%); }
.banner .t { position:absolute; left:32px; top:50%; transform:translateY(-50%); z-index:1; color:var(--bg); }
.banner .t b { display:block; font-size:26px; letter-spacing:.08em; }
.banner .t small { opacity:.85; font-size:14px; }
.banner .arrow { position:absolute; right:24px; top:50%; transform:translateY(-50%); z-index:1; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:var(--bg); color:var(--title); font-size:18px; }
@media (max-width:760px) {
  .banner { height:150px; }
  .banner .t { left:20px; }
  .banner .t b { font-size:20px; }
}

/* brand detail page */
.panel { background:var(--card); border-radius:20px; box-shadow:var(--shadow); }
.tag { display:inline-block; font-size:12px; font-weight:700; background:var(--accent); color:var(--title); border-radius:999px; padding:3px 12px; }
.chip { display:inline-block; font-size:13px; background:var(--bg); border-radius:999px; padding:4px 12px; color:var(--title); margin:0 4px 6px 0; }
.btn { display:inline-block; background:var(--sage); color:var(--btn-text); border-radius:999px; padding:10px 24px; font-weight:600; text-decoration:none; border:0; font:inherit; font-weight:600; cursor:pointer; }
.bd { text-align:left; max-width:1000px; }
.bd-back { display:inline-block; margin:4px 0 14px; text-decoration:none; font-size:14px; color:var(--title); opacity:.75; }
.bd-back:hover { opacity:1; }
.bd-hero { position:relative; height:380px; border-radius:20px; overflow:hidden; box-shadow:var(--shadow); background:linear-gradient(135deg,var(--sage),var(--accent)); }
.bd-hero img { display:block; width:100%; height:100%; object-fit:cover; }
.bd-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(77,42,0,.75),rgba(77,42,0,0) 60%); }
.bd-hero .t { position:absolute; left:36px; right:36px; bottom:30px; z-index:1; color:var(--bg); }
.bd-hero h1 { margin:8px 0 0; font-size:34px; letter-spacing:.06em; color:var(--bg); }
.bd-hero p { margin:4px 0 0; opacity:.85; }
.bd-cols { margin-top:28px; }
.bd-body { font-size:17px; line-height:2; }
.bd-body h2 { margin:32px 0 12px; font-size:22px; letter-spacing:.06em; color:var(--title); }
.bd-body > :first-child { margin-top:0; }
.bd-text, .poem { font-size:17px; line-height:2; text-align:left; }
.bd-text p, .poem p { margin:0 0 6px; padding:0; text-indent:0; }
.bd-text p:last-child, .poem p:last-child { margin-bottom:0; }
.bd-text b { color:var(--title); margin-right:10px; }
.bd-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.work { all:unset; box-sizing:border-box; position:relative; display:block; background:var(--card); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); cursor:pointer; transition:transform .15s; line-height:1.4; }
.work:hover { transform:translateY(-2px); }
.work .im { display:block; aspect-ratio:1; overflow:hidden; background:var(--sage); }
.work img { display:block; width:100%; height:100%; object-fit:cover; }
.work .meta { display:block; padding:8px 12px 12px; font-size:14px; color:var(--title); font-weight:600; }
.work .meta small { display:block; font-weight:400; opacity:.65; }
.work .sold { position:absolute; top:10px; left:10px; z-index:1; background:rgba(77,42,0,.82); color:var(--bg); font-size:12px; border-radius:999px; padding:2px 10px; }
.work.is-sold img { filter:saturate(.55) brightness(.92); }
.lb { position:fixed; inset:0; z-index:50; background:rgba(77,42,0,.7); display:flex; align-items:center; justify-content:center; padding:20px; }
.lb .in { position:relative; display:grid; grid-template-columns:1fr 1fr; max-width:760px; width:100%; overflow:hidden; text-align:left; }
.lb .gal { background:var(--bg); }
.lb .im { aspect-ratio:1; background:var(--bg); }
.lb .im img { display:block; width:100%; height:100%; object-fit:contain; }
.lb .thumbs { display:flex; gap:8px; padding:10px; }
.lb .th { all:unset; box-sizing:border-box; cursor:pointer; width:64px; height:64px; border-radius:8px; overflow:hidden; border:2px solid transparent; opacity:.7; }
.lb .th.on { border-color:var(--sage); opacity:1; }
.lb .th img { display:block; width:100%; height:100%; object-fit:cover; }
.lb .price { margin:0; font-size:20px; font-weight:700; color:var(--title); }
.lb .tx { padding:56px 28px 28px; display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:10px; }
.lb .desc-list { font-size:14px; line-height:1.7; color:var(--text, #4c4541); max-height:240px; overflow-y:auto; }
.lb .desc-list p { margin:0 0 4px; }
.lb .lb-x { position:absolute; top:10px; right:10px; z-index:2; width:36px; height:36px; border:0; border-radius:50%; background:rgba(255,255,255,.85); color:var(--title); font-size:24px; line-height:1; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.2); }
.lb .lb-x:hover { background:#fff; }
.lb h3 { margin:0; font-size:22px; color:var(--title); }
@media (max-width:760px) {
  .lb .in { grid-template-columns:1fr; }
  .lb .tx { padding-top:16px; }
    .bd-hero { height:260px; }
  .bd-hero h1 { font-size:26px; }
  .bd-grid { grid-template-columns:repeat(2,1fr); }
}

/* contact page */
.hours { margin:0; }
.hours div { display:flex; justify-content:space-between; gap:16px; padding:8px 0; border-bottom:1px dashed rgba(76,69,65,.2); }
.hours dt { opacity:.7; } .hours dd { margin:0; font-weight:600; color:var(--title); }
.vinfo h2 { margin:0 0 8px; font-size:18px; color:var(--title); letter-spacing:.06em; }
.vinfo h2:not(:first-child) { margin-top:22px; }
.vinfo { padding:26px; } .vinfo p { margin:0; }
.msg-btn { margin-top:22px; }
.visit { display:grid; grid-template-columns:1.2fr 1fr; overflow:hidden; margin-top:20px; }
.mapbox { position:relative; min-height:300px; background:linear-gradient(135deg,color-mix(in srgb,var(--sage) 55%,var(--card)),color-mix(in srgb,var(--accent) 45%,var(--card))); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.mapbox.photo { justify-content:flex-end; padding-bottom:16px; box-sizing:border-box; }
.mapph { display:flex; flex-direction:column; align-items:center; color:var(--title); } .mapph span { font-size:44px; } .mapph small { opacity:.7; }
.faq { display:flex; flex-direction:column; gap:10px; }
.faq details { padding:14px 20px; } .faq summary { cursor:pointer; font-weight:600; color:var(--title); }
.faq p { margin:8px 0 2px; opacity:.8; }
@media (max-width:760px) { .visit { grid-template-columns:1fr; } .mapbox { min-height:220px; } }

.more-link { display:inline-block; margin-top:14px; font-size:14px; color:var(--title); text-decoration:none; border-bottom:2px solid var(--accent); padding-bottom:2px; }