:root { --ink: #213027; --sage: #899c82; --paper: #f7f2e8; --cream: #fffaf1; --orange: #df6a3e; }
* { box-sizing: border-box; }
html,body { overflow-x: hidden; }
html,body { scrollbar-width: none; }
::-webkit-scrollbar { display: none; }
body { margin: 0; background: #e9e5dc; color: var(--ink); font-family: Inter,-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; }
.phone-shell { width: min(100%,520px); min-height: 100vh; margin: auto; padding-bottom: 88px; background: var(--cream); }
button,a { color: inherit; }
.topbar { position: sticky; z-index: 8; top: 0; display: flex; align-items: center; justify-content: space-between; height: 70px; padding: 0 18px; background: var(--cream); }
.brand { text-align: center; text-decoration: none; }
.brand span { display: block; font-family: Georgia,serif; font-size: 20px; font-weight: 800; letter-spacing: .22em; }
.brand small { display: block; margin-top: -2px; color: #7c857c; font-size: 9px; letter-spacing: .35em; }
.icon-btn { position: relative; width: 38px; height: 38px; border: 1px solid #d9d4c9; border-radius: 50%; background: transparent; font-size: 18px; }
.bag-btn b { position: absolute; right: -3px; top: -4px; display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; background: var(--orange); color: #fff; font-size: 9px; }
.editorial-hero { position: relative; min-height: 382px; margin: 0 14px; overflow: hidden; border-radius: 4px 4px 52px 4px; background: #b7c2ac; }
.hero-copy { position: relative; z-index: 2; padding: 52px 0 0 28px; }
.kicker { font-size: 10px; font-weight: 700; letter-spacing: .22em; }
.hero-copy h1 { margin: 17px 0 13px; font-family: Georgia,"Songti SC",serif; font-size: 35px; line-height: 1.16; }
.hero-copy p { font-size: 12px; }
.hero-copy button { margin-top: 18px; padding: 11px 16px; border: 0; background: var(--ink); color: #fff; font-size: 12px; }
.hero-object { position: absolute; right: -28px; bottom: -10px; width: 210px; height: 255px; }
.vase { position: absolute; right: 24px; bottom: 0; display: grid; width: 126px; height: 168px; place-items: center; border-radius: 62px 62px 24px 24px; background: #e9d7bd; color: #b98e68; font: 44px Georgia; }
.leaf { position: absolute; z-index: 1; width: 72px; height: 148px; border-radius: 100% 0 100% 0; background: #667b62; transform-origin: bottom; }
.leaf-a { right: 104px; top: -28px; transform: rotate(-23deg); }
.leaf-b { right: 27px; top: -45px; transform: rotate(30deg); background: #7f9577; }
.issue { position: absolute; right: 14px; top: 14px; writing-mode: vertical-rl; font-size: 9px; letter-spacing: .2em; }
.story-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; padding: 23px 14px 8px; }
.story { min-width: 0; border: 0; background: transparent; font-size: 10px; }
.story i { display: grid; width: 52px; height: 52px; margin: 0 auto 7px; place-items: center; border: 1px solid #ded8cd; border-radius: 50%; background: #fff; font-size: 20px; }
.story.active i { background: var(--ink); color: #fff; }
.section-block { padding: 27px 14px; }
.section-title { display: flex; align-items: end; justify-content: space-between; margin-bottom: 16px; }
.section-title small { color: var(--orange); font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.section-title h2 { margin: 4px 0 0; font: 26px Georgia,"Songti SC",serif; }
.section-title a { color: #7d817c; font-size: 11px; }
.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.product-card { position: relative; padding: 8px 8px 12px; background: #fff; }
.product-art { display: grid; height: 152px; place-items: center; margin-bottom: 12px; font-size: 54px; }
.art-bag { background: #e8d7c6; }
.art-scent { background: #dfe8da; }
.art-cup { background: #e7e1d9; }
.art-lamp { background: #d9e0e0; }
.wish { position: absolute; z-index: 2; right: 14px; top: 14px; border: 0; background: transparent; }
.product-card h3 { margin: 0 5px 4px; font-size: 13px; }
.product-card p { margin: 0 5px 12px; color: #8b8b82; font-size: 10px; }
.product-card>div:last-child { display: flex; align-items: center; justify-content: space-between; margin: 0 5px; }
.product-card strong { font-size: 13px; }
.add { display: grid; width: 27px; height: 27px; place-items: center; border: 0; border-radius: 50%; background: var(--ink); color: #fff; }
.bottom-nav { position: fixed; z-index: 9; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(4,1fr); width: min(100%,520px); margin: auto; padding: 10px 8px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid #ebe6dc; background: #fffaf1; }
.bottom-nav button { border: 0; background: transparent; color: #96988f; font-size: 10px; }
.bottom-nav i { display: block; margin-bottom: 2px; font-size: 19px; }
.bottom-nav .active { color: var(--orange); }
.app-toast { position: fixed; z-index: 20; bottom: 85px; left: 50%; padding: 9px 16px; border-radius: 3px; background: #213027; color: #fff; font-size: 11px; opacity: 0; transform: translate(-50%,12px); transition: .2s; }
.app-toast.show { opacity: 1; transform: translate(-50%,0); }
@media (min-width:600px) {
  body { padding: 28px; }
  .phone-shell { box-shadow: 0 24px 70px #29382d33; }
}
/*独立预览(桌面直接打开 ≥600px): 与首页一致的自适应手机外框, 仅本模板使用(原共享 ../frame.css 合并而来, 级联顺序保持最后)*/
@media (min-width: 600px) {
  html { min-height: 100%; }
  body { display: grid; min-height: 100dvh; place-items: center; margin: 0; padding: 0 1.5rem; }
  .phone-shell { width: min(100%, 26rem); height: 100dvh; min-height: 0; overflow-x: hidden; overflow-y: auto; border: .625rem solid #151b26; border-radius: 2.2rem; box-shadow: 0 1.8rem 3.5rem rgba(24, 39, 68, .3); scrollbar-width: none; }
  .phone-shell::-webkit-scrollbar { display: none; }
  .bottom-nav { width: min(calc(100% - 3.75rem), 24.75rem); bottom: .625rem; border-radius: 0 0 1.5rem 1.5rem; }
  .app-toast { bottom: 5.9rem; }
  .retail-app { background: radial-gradient(circle at 50% 15%, #fffdf8 0, transparent 38%), #e9e5dc; }
}
.editorial-hero { background-image: linear-gradient(90deg,#1e2514bf 0%,#1e251455 45%,#1e251412 100%),url("assets/hero-lifestyle-v1.webp"); background-position: center; background-size: cover; box-shadow: inset 0 -70px 90px #12170a88; }
.hero-copy { color: #fff; text-shadow: 0 2px 16px #18200a66; }
.hero-object { display: none; }
.hero-copy p { color: #f2eee5; }
.product-card { transition: transform .28s ease,box-shadow .28s ease; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 18px 35px #34301818; }
.product-art { box-shadow: inset 0 0 0 1px #ffffff44; }
.product-art.art-bag,.product-art.art-scent,.product-art.art-cup,.product-art.art-lamp { position: relative; background-position: center; background-size: cover; }
.product-art.art-bag { background-image: linear-gradient(#21302714,#21302722),url("assets/product-bag-v1.png"); }
.product-art.art-scent { background-image: linear-gradient(#21302710,#21302722),url("assets/product-candle-v1.png"); }
.product-art.art-cup { background-image: linear-gradient(#21302710,#21302722),url("assets/product-cup-v1.png"); }
.product-art.art-lamp { background-image: linear-gradient(#21302708,#21302718),url("assets/product-lamp-v1.png"); }
.product-art.art-bag i,.product-art.art-scent i,.product-art.art-cup i,.product-art.art-lamp i { display: none; }
.product-card { overflow: hidden; }

/* Improve tab-bar readability and tap targets in the mini-app preview. */
.bottom-nav { min-height: 4.4rem; padding: .55rem .5rem max(.65rem,env(safe-area-inset-bottom)); }
.bottom-nav button { min-height: 2.9rem; font-size: .69rem; font-weight: 600; line-height: 1.2; }
.bottom-nav i { margin-bottom: .08rem; font-size: 1.35rem; }