:root{color:#232821;background:#f6f3eb;font-family:"Instrument Sans","Microsoft YaHei",sans-serif;line-height:1.6}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}
.top,footer{display:flex;align-items:center;justify-content:space-between;padding:16px 6vw;gap:20px}
.brand{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:800;letter-spacing:.14em}
.brand img{width:35px;height:35px;object-fit:contain}nav{display:flex;gap:clamp(12px,4vw,48px);font-size:14px}
.hero{min-height:clamp(480px,75vh,840px);display:flex;align-items:center;padding:70px 8vw;color:white;background:linear-gradient(90deg,#151b14df,#151b1430),url(assets/tea.webp) center/cover}
.hero p{letter-spacing:.16em}.hero h1{font-family:"Instrument Serif","Songti SC",SimSun,serif;font-size:clamp(48px,8vw,108px);line-height:1.12;font-weight:500;margin:20px 0 32px}
.button,button{display:inline-flex;gap:20px;align-items:center;border:1px solid #3b4933;padding:11px 18px;color:#fff;background:#35462c}.button:hover,button:hover{background:#4c6141}
.section{padding:clamp(48px,8vw,102px) 6vw}.heading{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px 25px}
h2{font-size:clamp(30px,5vw,54px);font-weight:500;line-height:1.15;margin:0 0 20px}h3{font-size:22px;margin:0}p{margin:0 0 16px}
.cards,.process ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.cards article{background:#fffdf7}.cards img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}.cards article div{padding:22px}.cards p{margin:10px 0 18px}
.process{background:#e7eadf}.process ol{padding-left:1.4em}.process li{padding:12px 18px 0 0}.process strong{font-size:20px}
footer{background:#212a1e;color:white}footer span{font-size:13px}
dialog{position:fixed;width:min(90vw,500px);border:0;padding:32px;background:#fffdf7;color:#232821}dialog::backdrop{background:#182315b0}.close{position:absolute;right:12px;top:12px;padding:0 10px}.note{color:#4e6143;font-size:14px}#order-state{min-height:104px}
:focus-visible{outline:3px solid #b56926;outline-offset:4px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 24px}
.filters button,.secondary{background:transparent;color:#35462c}.filters button[aria-pressed=true],.filters button:hover,.secondary:hover{background:#35462c;color:white}
.cards article div{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.cards article div :is(p,h3){width:100%}.cards article div .category{margin:0;color:#52644b;font-size:14px}
.product-intro,.cinema{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:center;background:#e7eadf}
.product-intro>img{width:100%;height:100%;min-height:360px;object-fit:cover}.product-intro>div{padding:clamp(30px,5vw,76px)}.product-intro h1{font-size:clamp(42px,6vw,84px);line-height:1.1;margin:0 0 25px;font-weight:500}
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}figure{margin:0}figure img{display:block;width:100%;background:white}.gallery img{aspect-ratio:4/3;object-fit:cover}figcaption{padding:10px 0;font-size:14px}
.technical{background:#fffdf7}.technical figure{max-width:1000px}.spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:850px}.spec div{padding:12px 16px;background:#e7eadf}.spec dd{margin:0;font-size:22px}
.cinema{gap:clamp(20px,6vw,80px);background:#232d21;color:#fffdf7}.cinema video{width:100%;height:min(68vh,590px);background:#131a12}.options{display:flex;flex-wrap:wrap;gap:12px 28px;padding-left:20px;margin:22px 0}
@media(max-width:680px){.product-intro,.cinema,.gallery{grid-template-columns:1fr}.product-intro>img{min-height:0;aspect-ratio:4/3}.top nav{flex-wrap:wrap;justify-content:flex-end}.cinema video{height: min(65vh,520px)}}
@media(max-width:680px){.cards,.process ol{grid-template-columns:1fr}.top{padding-inline:4vw}.brand{font-size:17px;gap:6px}.brand img{width:26px;height:26px}nav{font-size:13px}.hero{background-position:60% center}}
