:root { --ink:#20211e; --muted:#70736c; --line:#e6e7e1; --paper:#f7f7f3; --white:#fff; --green:#315b46; --orange:#e36c3d; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
button,input,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
body.locked { overflow:hidden; }
.site-header { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; min-height:74px; border-bottom:1px solid rgba(230,231,225,.9); background:rgba(255,255,255,.94); padding:10px clamp(18px,5vw,70px); backdrop-filter:blur(12px); }
.brand { display:flex; align-items:center; gap:11px; }
.brand-mark { display:grid; width:42px; height:42px; place-items:center; border-radius:13px; color:white; background:var(--green); font-family:serif; font-size:21px; }
.brand strong,.brand small { display:block; }
.brand strong { font-size:17px; letter-spacing:2px; }
.brand small { margin-top:2px; color:var(--muted); font-size:10px; letter-spacing:1px; }
.cart-button { border:0; border-radius:999px; color:white; background:var(--ink); padding:10px 15px; cursor:pointer; }
.cart-button span { display:inline-grid; min-width:22px; height:22px; margin-left:5px; place-items:center; border-radius:50%; color:var(--ink); background:white; font-size:12px; }
.hero { display:grid; min-height:480px; align-items:center; grid-template-columns:1.35fr .65fr; gap:60px; padding:70px clamp(18px,8vw,130px); background:#e9ede4; }
.hero p,.section-header p { margin:0 0 13px; color:var(--orange); font-size:12px; font-weight:800; letter-spacing:2px; }
.hero h1 { margin:0; font-family:Georgia,"Noto Serif SC",serif; font-size:clamp(40px,6vw,70px); line-height:1.14; font-weight:600; }
.hero > div > span { display:block; max-width:540px; margin-top:20px; color:#63675f; line-height:1.8; }
.hero a { display:inline-flex; min-height:46px; align-items:center; margin-top:30px; border-radius:6px; color:white; background:var(--green); padding:0 24px; font-weight:700; }
.hero-card { position:relative; display:flex; min-height:280px; flex-direction:column; justify-content:flex-end; overflow:hidden; border-radius:34px 34px 8px 34px; color:white; background:linear-gradient(145deg,#d67b54,#9d4930); padding:32px; box-shadow:0 24px 60px rgba(81,58,41,.22); }
.hero-card::before { position:absolute; top:-35px; right:-20px; width:180px; height:180px; border:34px solid rgba(255,255,255,.13); border-radius:50%; content:""; }
.hero-card span { font-size:12px; opacity:.78; }
.hero-card b { margin-top:8px; font-size:23px; }
.hero-card strong { margin-top:18px; font-size:32px; }
.hero-card i { position:absolute; top:22px; left:24px; border-radius:99px; color:#9d4930; background:#fff2d3; padding:6px 11px; font-size:11px; font-style:normal; }
.benefits { display:grid; max-width:1120px; margin:-24px auto 0; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:10px; background:white; box-shadow:0 12px 34px rgba(40,46,38,.08); }
.benefits div { padding:22px 28px; }
.benefits div+div { border-left:1px solid var(--line); }
.benefits b,.benefits span { display:block; }
.benefits b { font-size:15px; }
.benefits span { margin-top:5px; color:var(--muted); font-size:12px; }
.products-section,.service-section { max-width:1120px; margin:0 auto; padding:86px 0; }
.section-header { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:26px; }
.section-header h2,.service-section h2 { margin:0; font-family:Georgia,"Noto Serif SC",serif; font-size:36px; }
.filters { display:flex; gap:8px; }
.filters button { border:1px solid var(--line); border-radius:999px; color:var(--muted); background:white; padding:8px 15px; cursor:pointer; }
.filters button.active { border-color:var(--green); color:white; background:var(--green); }
.product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.product-card { overflow:hidden; border:1px solid var(--line); border-radius:10px; background:white; transition:transform .2s,box-shadow .2s; }
.product-card:hover { transform:translateY(-3px); box-shadow:0 14px 32px rgba(38,47,40,.08); }
.product-visual { position:relative; display:grid; height:210px; overflow:hidden; place-items:center; }
.product-visual > img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.product-visual small { position:absolute; top:14px; left:14px; z-index:1; border-radius:99px; background:rgba(255,255,255,.78); padding:5px 9px; }
.peach{background:#f3d6c7}.blue{background:#d9e4ed}.green{background:#dbe7da}.yellow{background:#f2e5b8}.lilac{background:#e6ddeb}.sand{background:#e8dfd0}
.product-info { padding:20px; }
.product-info p { margin:0; color:var(--muted); font-size:12px; }
.product-info h3 { margin:7px 0 20px; font-size:18px; }
.product-link { display:block; }
.product-actions { display:flex; align-items:center; justify-content:space-between; padding:0 20px 20px; }
.product-actions strong { color:var(--orange); font-size:20px; }
.product-actions > div { display:flex; align-items:center; gap:10px; }
.product-actions a { color:var(--muted); font-size:12px; }
.product-actions a:hover { color:var(--green); }
.product-info button { border:1px solid var(--green); border-radius:6px; color:var(--green); background:white; padding:8px 12px; font-weight:700; cursor:pointer; }
.product-info button:hover { color:white; background:var(--green); }
.product-actions button { border:1px solid var(--green); border-radius:6px; color:var(--green); background:white; padding:8px 12px; font-weight:700; cursor:pointer; }
.product-actions button:hover { color:white; background:var(--green); }
.service-section { display:grid; grid-template-columns:.7fr 1.3fr; gap:70px; border-top:1px solid var(--line); }
.service-section p { color:var(--orange); font-size:12px; font-weight:800; letter-spacing:2px; }
.service-section dl { margin:0; }
.service-section dl div { display:grid; grid-template-columns:100px 1fr; gap:24px; border-bottom:1px solid var(--line); padding:17px 0; }
.service-section dt { font-weight:700; }
.service-section dd { margin:0; color:var(--muted); font-size:14px; line-height:1.7; }
footer { display:flex; justify-content:space-between; gap:20px; color:#cad0c9; background:#252a26; padding:30px clamp(18px,5vw,70px); font-size:12px; }
footer strong { color:white; font-size:15px; letter-spacing:2px; }
.cart-drawer[hidden],.checkout-modal[hidden] { display:none; }
.cart-drawer,.checkout-modal { position:fixed; inset:0; z-index:30; }
.drawer-mask { position:absolute; inset:0; background:rgba(24,28,24,.55); }
.drawer-panel { position:absolute; top:0; right:0; display:flex; width:min(440px,100%); height:100%; flex-direction:column; background:white; box-shadow:-20px 0 60px rgba(0,0,0,.14); }
.drawer-panel header,.checkout-panel header { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); padding:22px 24px; }
.drawer-panel header small,.checkout-panel header small { color:var(--orange); font-weight:800; letter-spacing:2px; }
.drawer-panel h2,.checkout-panel h2 { margin:3px 0 0; }
.drawer-panel header button,.checkout-panel header button { width:38px; height:38px; border:1px solid var(--line); border-radius:50%; background:white; font-size:24px; cursor:pointer; }
.cart-list { flex:1; overflow:auto; padding:8px 24px; }
.cart-item { position:relative; display:grid; grid-template-columns:76px 1fr; gap:14px; border-bottom:1px solid var(--line); padding:18px 0; }
.cart-thumb { display:grid; height:76px; place-items:center; border-radius:8px; font-size:32px; }
.cart-thumb img { width:100%; height:100%; border-radius:8px; object-fit:cover; }
.cart-item h3 { margin:2px 0 7px; padding-right:42px; font-size:15px; }
.cart-item strong { color:var(--orange); font-size:14px; }
.quantity { display:flex; width:max-content; align-items:center; margin-top:10px; border:1px solid var(--line); border-radius:5px; }
.quantity button { width:30px; height:28px; border:0; background:white; cursor:pointer; }
.quantity span { min-width:26px; text-align:center; font-size:12px; }
.remove { position:absolute; top:20px; right:0; border:0; color:#9b9e98; background:none; font-size:12px; cursor:pointer; }
.empty-cart { padding-top:100px; color:var(--muted); text-align:center; }
.empty-cart span { font-size:60px; }
.empty-cart h3 { margin-bottom:6px; color:var(--ink); }
.empty-cart p { margin:0; }
.cart-summary { border-top:1px solid var(--line); padding:20px 24px 28px; }
.cart-summary p,.order-preview p,.order-total { display:flex; justify-content:space-between; margin:8px 0; color:var(--muted); font-size:13px; }
.cart-summary b { color:var(--ink); }
.cart-summary .total { align-items:center; margin-top:16px; color:var(--ink); }
.cart-summary .total strong,.order-total strong { color:var(--orange); font-size:25px; }
.cart-summary > button,.pay-button { width:100%; min-height:48px; margin-top:12px; border:0; border-radius:7px; color:white; background:var(--green); font-weight:700; cursor:pointer; }
.cart-summary > button:disabled { color:#999; background:#e4e6e2; cursor:not-allowed; }
.checkout-modal { display:grid; place-items:center; padding:18px; }
.checkout-panel { position:relative; width:min(520px,100%); max-height:calc(100vh - 36px); overflow:auto; border-radius:12px; background:white; box-shadow:0 25px 70px rgba(0,0,0,.2); }
.order-preview { margin:18px 24px; border-radius:7px; background:var(--paper); padding:10px 14px; }
.order-preview b { color:var(--ink); }
#checkoutForm { padding:0 24px 24px; }
#checkoutForm label { display:block; margin-top:14px; font-size:13px; font-weight:700; }
#checkoutForm input,#checkoutForm textarea { width:100%; margin-top:7px; border:1px solid #d9ddd7; border-radius:6px; padding:11px 12px; outline:none; }
#checkoutForm input:focus,#checkoutForm textarea:focus { border-color:var(--green); }
#checkoutForm textarea { min-height:76px; resize:vertical; }
.order-total { align-items:center; margin:20px 0 0; color:var(--ink); }
.safe-tip { display:block; margin-top:10px; color:#8a8e86; line-height:1.5; text-align:center; }
.toast { position:fixed; bottom:32px; left:50%; z-index:50; transform:translate(-50%,20px); border-radius:99px; color:white; background:rgba(29,33,29,.92); padding:11px 18px; opacity:0; pointer-events:none; transition:.2s; }
.toast.show { transform:translate(-50%,0); opacity:1; }
@media(max-width:900px){.products-section,.service-section{margin:0 20px}.hero{grid-template-columns:1fr}.hero-card{display:none}.benefits{margin:-24px 20px 0}.product-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.site-header{min-height:66px}.brand small{display:none}.hero{min-height:420px;padding:55px 20px 70px}.hero h1{font-size:42px}.benefits{grid-template-columns:1fr}.benefits div{padding:15px 20px}.benefits div+div{border-top:1px solid var(--line);border-left:0}.products-section{padding:62px 0}.section-header{align-items:flex-start;flex-direction:column}.filters{width:100%;overflow:auto}.filters button{flex:0 0 auto}.product-grid{grid-template-columns:1fr 1fr;gap:10px}.product-visual{height:145px}.product-info{padding:14px}.product-info h3{font-size:15px}.product-info p{height:34px;line-height:1.5}.product-actions{align-items:flex-start;flex-direction:column;padding:0 14px 14px}.product-actions>div{width:100%;justify-content:space-between}.product-actions button{padding:7px 9px}.service-section{grid-template-columns:1fr;gap:24px;padding:58px 0}.service-section dl div{grid-template-columns:78px 1fr;gap:14px}footer{align-items:flex-start;flex-direction:column}.checkout-panel{max-height:calc(100vh - 20px)}}

/* 商品详情 */
.detail-header { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; min-height:70px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.95); padding:10px clamp(18px,5vw,70px); }
.back-link { color:var(--muted); font-size:14px; }
.detail-cart { border:0; border-radius:999px; color:white; background:var(--ink); padding:10px 16px; }
.detail-main { max-width:1120px; margin:0 auto; padding:52px 20px 90px; }
.detail-product { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.detail-gallery { position:sticky; top:105px; }
.detail-visual { display:grid; min-height:500px; place-items:center; border-radius:18px; }
.detail-visual img { width:100%; height:500px; border-radius:18px; object-fit:cover; }
.detail-badges { display:flex; gap:10px; margin-top:14px; }
.detail-badges span { border:1px solid var(--line); border-radius:99px; background:white; padding:7px 12px; color:var(--muted); font-size:12px; }
.detail-info .crumb { margin:0 0 24px; color:var(--muted); font-size:12px; }
.detail-info h1 { margin:0; font-family:Georgia,"Noto Serif SC",serif; font-size:42px; }
.detail-desc { margin:13px 0 0; color:var(--muted); line-height:1.8; }
.detail-price { margin:26px 0; color:var(--orange); font-size:34px; font-weight:800; }
.detail-choice { border-top:1px solid var(--line); padding:22px 0; }
.detail-choice > span { display:block; margin-bottom:12px; font-size:13px; font-weight:700; }
.spec-options { display:flex; flex-wrap:wrap; gap:9px; }
.spec-options button { border:1px solid var(--line); border-radius:6px; background:white; padding:9px 14px; cursor:pointer; }
.spec-options button.active { border-color:var(--green); color:var(--green); background:#eef4f0; }
.detail-buy-row { display:grid; grid-template-columns:120px 1fr; gap:12px; margin-top:10px; }
.detail-quantity { display:grid; grid-template-columns:36px 1fr 36px; border:1px solid var(--line); border-radius:7px; background:white; }
.detail-quantity button { border:0; background:none; font-size:20px; cursor:pointer; }
.detail-quantity span { display:grid; place-items:center; }
.detail-add { min-height:50px; border:0; border-radius:7px; color:white; background:var(--green); font-weight:800; cursor:pointer; }
.detail-service { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:22px 0; }
.detail-service div { border-radius:7px; background:#ecefe9; padding:13px; }
.detail-service b,.detail-service span { display:block; }
.detail-service b { font-size:13px; }
.detail-service span { margin-top:4px; color:var(--muted); font-size:11px; }
.detail-copy { margin-top:28px; border-top:1px solid var(--line); }
.detail-copy section { border-bottom:1px solid var(--line); padding:22px 0; }
.detail-copy h2 { margin:0 0 12px; font-size:18px; }
.detail-copy p,.detail-copy li { color:var(--muted); font-size:14px; line-height:1.85; }
.detail-copy ul { margin:0; padding-left:20px; }
.detail-toast { position:fixed; bottom:28px; left:50%; z-index:20; transform:translate(-50%,20px); border-radius:99px; color:white; background:rgba(29,33,29,.92); padding:11px 18px; opacity:0; transition:.2s; }
.detail-toast.show { transform:translate(-50%,0); opacity:1; }
@media(max-width:760px){.detail-main{padding-top:24px}.detail-product{grid-template-columns:1fr;gap:30px}.detail-gallery{position:static}.detail-visual{min-height:330px}.detail-visual img{height:330px}.detail-info h1{font-size:32px}.detail-service{grid-template-columns:1fr}.detail-buy-row{position:sticky;bottom:0;z-index:5;margin:20px -20px -20px;background:white;padding:12px 20px;box-shadow:0 -8px 24px rgba(0,0,0,.08)}}