/* O!Snack redesign. Reference: Daily Harvest, read 2026-09-11.
   Photography-led masthead, linen/ink palette, clear merchandise hierarchy. */
:root{--ink:#1f1f1f;--paper:#fdf6f3;--white:#fff;--yellow:#f6d833;--line:#1f1f1f30;--body:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;--display:Arial,var(--body)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:1.5rem}body{margin:0;background:var(--paper);color:var(--ink);font:1rem/1.8 var(--body);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}img{display:block;max-width:100%;object-fit:cover}h1,h2,h3,p,figure{margin:0}h1,h2,h3{text-wrap:balance;overflow-wrap:anywhere}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid #ae5d20;outline-offset:5px}[hidden]{display:none!important}section{scroll-margin-top:1.5rem}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip-link{position:fixed;top:1rem;left:1rem;z-index:50;transform:translateY(-200%);padding:.7rem 1rem;background:var(--ink);color:white}.skip-link:focus{transform:none}
.utility{min-height:36px;background:var(--ink);color:var(--paper);padding:.35rem 3rem;display:flex;align-items:center;justify-content:center;font-size:.8125rem;line-height:1.5;letter-spacing:.06em}.utility>span:first-child,.utility>a{display:none}.nav-wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:106px;padding:1.2rem clamp(24px,4vw,64px);gap:2rem;background:var(--paper);position:relative}.logo{display:flex;flex-direction:column;align-items:center;flex-shrink:0}.nav-wrap>.logo{grid-column:2;grid-row:1}.logo-cn{font-size:2.05rem;font-weight:900;line-height:1.15;letter-spacing:.035em}.logo-en{font:800 .8rem/1.3 Arial,sans-serif;letter-spacing:.14em;margin-top:.35rem}.nav-wrap nav{display:flex;grid-column:1;grid-row:1;gap:1.25rem;align-items:center;font-size:.875rem;white-space:nowrap}.nav-wrap nav a{padding:.6rem 0}.nav-wrap nav a:hover{text-decoration:underline;text-underline-offset:6px}.nav-shop{grid-column:3;justify-self:end;background:var(--ink);color:var(--paper);padding:.65rem 1.3rem;border-radius:999px;font-size:.875rem;white-space:nowrap}.menu-toggle{display:none}
.hero{position:relative;isolation:isolate;min-height:660px;display:flex;align-items:center;padding:5rem clamp(28px,7vw,112px);overflow:hidden;background:#6d4b2c;color:white}.hero-media{position:absolute;inset:0;z-index:-2}.hero-media img{width:100%;height:100%;object-position:center 58%}.hero:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(26,22,18,.78) 0%,rgba(26,22,18,.55) 32%,rgba(26,22,18,.08) 63%,rgba(26,22,18,.03) 100%)}.hero-copy{max-width:620px;min-width:0}.eyebrow{font-size:.75rem;font-weight:600;line-height:1.6;letter-spacing:.1em;margin-bottom:1.2rem}.hero .eyebrow{font-family:Arial,sans-serif;color:#fff9f0}.hero h1{font:600 clamp(2.8rem,5.3vw,5rem)/1.25 var(--display);letter-spacing:-.035em}.hero-lede{margin:1.5rem 0 2.2rem;font-size:1.05rem;line-height:1.9;color:#fff9f0}.button{display:inline-flex;align-items:center;justify-content:center;gap:2.5rem;min-height:50px;padding:.85rem 1.5rem;border-radius:999px;font-size:.875rem;font-weight:600;transition:background .18s,transform .18s}.button:hover{transform:translateY(-2px)}.button-light{background:var(--paper);color:var(--ink)}.button-light:hover{background:white}.button-dark{background:var(--ink);color:var(--paper)}.hero-caption{position:absolute;bottom:1.4rem;right:2rem;font-size:.75rem;letter-spacing:.04em;color:white;text-shadow:0 1px 5px #000}.quiet-link{display:inline-block;border-bottom:1px solid currentColor;font-size:.875rem;font-weight:600;padding:.35rem 0}
.collections,.category-explorer{padding:5.5rem clamp(24px,5vw,80px);max-width:1600px;margin:auto}.section-heading{text-align:center;margin:0 auto 2.8rem}.section-heading h2,.explorer-heading h2,.intro h2,.feature h2,.shops h2{font:500 clamp(2rem,3.3vw,3.25rem)/1.35 var(--display);letter-spacing:-.025em}.section-heading .eyebrow{margin-bottom:.8rem}.section-heading>p{margin-top:1rem;color:#555;font-size:1rem}.collection-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}.collection-card{position:relative;min-width:0}.collection-card figure{overflow:hidden;aspect-ratio:1/1;background:#e9dfd4;border-radius:50%}.collection-card img{width:100%;height:100%;transition:transform .4s}.collection-card:hover img{transform:scale(1.04)}.collection-card div{padding:1.2rem .5rem 0;text-align:center}.collection-card p{font:500 .75rem/1.6 Arial,sans-serif;letter-spacing:.08em;color:#5b5956}.collection-card h3{margin:.3rem 0;font-size:1.55rem;font-weight:500;line-height:1.5}.collection-card span{font-size:.875rem;color:#555}.collection-card button{position:absolute;top:0;left:0;width:100%;height:100%;border:0;background:transparent;border-radius:0;font-size:0}.collection-card button:after{content:"→";position:absolute;top:1rem;right:1rem;display:grid;place-items:center;width:42px;height:42px;border:1px solid #1f1f1f30;border-radius:50%;font-size:1.3rem;background:var(--paper)}.collection-card button:hover:after{background:var(--ink);color:var(--paper)}
.feature{display:grid;grid-template-columns:1fr 1fr;min-height:620px;background:#f7ebc6}.feature-image{position:relative;min-width:0;min-height:620px}.feature-image img{position:absolute;inset:0;width:100%;height:100%;object-position:52% center}.feature-copy{padding:5rem clamp(28px,6vw,96px);align-self:center;min-width:0}.feature h2{font-size:clamp(2.25rem,4vw,4rem)}.feature-lede{margin:1.5rem 0;font-size:1rem;line-height:1.9}.feature dl{margin:1.8rem 0 2rem;border-top:1px solid var(--line)}.feature dl div{display:grid;grid-template-columns:5rem minmax(0,1fr);gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line);font-size:.875rem}.feature dt{color:#555}.feature dd{margin:0}.feature .button{background:var(--ink);color:var(--paper)}.disclaimer,.wall-note{margin-top:1.4rem;font-size:.8125rem;line-height:1.8;color:#555}.marquee{padding:1rem 1.5rem;border-bottom:1px solid var(--line);background:var(--paper)}.marquee div{display:flex;align-items:center;justify-content:space-evenly;gap:1rem;flex-wrap:wrap;max-width:1440px;margin:auto;font-size:.875rem}.marquee i{font-style:normal;font-size:1rem;color:#a18d59}.explorer-heading{text-align:center}.explorer-heading .eyebrow{margin-bottom:.8rem}.filter-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:2.5rem 0 2rem;border-bottom:1px solid var(--line)}.category-tabs{display:flex;gap:1.5rem;flex-wrap:wrap}.category-tabs button{position:relative;min-height:48px;padding:.75rem .25rem;border:0;border-bottom:2px solid transparent;background:transparent;font-size:.875rem}.category-tabs button[aria-pressed="true"]{border-bottom-color:var(--ink);font-weight:700}.filter-status{font-size:.8125rem;color:#555}.product-wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.5rem 1.25rem;align-items:start}.wall-card{min-width:0}.wall-card img{width:100%;aspect-ratio:4/5;height:auto;background:#efe8df;border-radius:0}.wall-card div{padding:1rem .1rem 0}.wall-card span{font-size:.75rem;color:#65605c}.wall-card h3{font-size:1rem;font-weight:500;line-height:1.6;margin-top:.25rem;text-wrap:initial}.wall-note{text-align:center;margin-top:2.5rem}
.intro{display:grid;grid-template-columns:1fr 1fr;gap:7%;padding:5.5rem clamp(24px,9vw,145px);background:#e7ecdf;align-items:center}.intro h2{font-size:clamp(2.2rem,3.7vw,3.6rem)}.intro-text p{margin-bottom:1.2rem;line-height:1.9}.intro-text .quiet-link{margin-top:.7rem}.principles{padding:4rem clamp(24px,5vw,80px);background:var(--paper)}.principles>.eyebrow{text-align:center;margin-bottom:2.3rem}.principle-grid{max-width:1440px;margin:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.principle-grid article{padding:0 2.5rem;text-align:center;border-right:1px solid var(--line)}.principle-grid article:last-child{border-right:0}.principle-grid span{font-size:.75rem;color:#666}.principle-grid h3{font-size:1.3rem;font-weight:500;margin:.7rem 0;line-height:1.5}.principle-grid p{font-size:.875rem;line-height:1.85;max-width:330px;margin:auto;color:#555}
.shops{background:#ede5dc;display:grid;grid-template-columns:.9fr 1.1fr;gap:8%;padding:5.5rem clamp(24px,7vw,110px)}.shops h2 em{font-style:normal}.shops-heading>p:not(.eyebrow){margin-top:1.5rem;font-size:1rem}.shop-list{border-top:1px solid var(--line);min-width:0}.shop-row{display:grid;grid-template-columns:1.5rem minmax(0,1fr) auto;gap:1rem;align-items:center;padding:1.5rem 0;border-bottom:1px solid var(--line)}.shop-number{font-size:.75rem;color:#666}.shop-row h3{font-size:1.25rem;font-weight:500}.shop-row p{font-size:.875rem;margin-top:.3rem;overflow-wrap:anywhere}.account-id{user-select:all;color:#555}.copy-button{background:transparent;border:1px solid #1f1f1f70;border-radius:999px;padding:.5rem .85rem;min-height:44px;font-size:.875rem;white-space:nowrap}.copy-button:hover{background:var(--ink);color:var(--paper)}.copy-button:disabled{opacity:.6;cursor:wait}.offline-label{font-size:.875rem;color:#555}.copy-status{min-height:3.5rem;font-size:.875rem;margin-top:1rem;overflow-wrap:anywhere}
footer{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;background:var(--ink);color:var(--paper);padding:3rem clamp(24px,5vw,80px) 1rem}footer p{font-size:.8125rem;line-height:1.8}footer>.back-top{font-size:.875rem;text-decoration:underline;text-underline-offset:5px}.footer-wordmark{flex:0 0 100%;text-align:center;font:800 clamp(3rem,16.5vw,17rem)/1.1 Arial,sans-serif;letter-spacing:-.055em;overflow-wrap:anywhere;margin-top:1.5rem}.footer-icp{order:5;flex:0 0 100%;padding-top:.25rem;text-align:center;color:#fdf6f3b3;font-size:.75rem;line-height:1.6;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px}.footer-icp:hover{color:var(--paper);text-decoration-color:currentColor}
@media(min-width:1600px){.hero{min-height:760px}.hero-copy{margin-left:calc((100vw - 1500px)/2)}.intro,.shops{padding-left:max(7vw,calc((100vw - 1320px)/2));padding-right:max(7vw,calc((100vw - 1320px)/2))}}
@media(max-width:1100px){.nav-wrap nav{gap:.8rem;font-size:.8125rem}.nav-wrap{gap:1rem;padding-left:24px;padding-right:24px}.hero{min-height:610px}.collection-grid{gap:1rem}.collection-card h3{font-size:1.35rem}.feature-copy{padding:4rem 32px}.feature-image{min-height:560px}.shops{gap:4%;padding-left:5%;padding-right:5%}.shop-row{gap:.6rem}.principle-grid article{padding:0 1.5rem}}
@media(max-width:760px){.utility{font-size:.8125rem;padding:.4rem 20px}.nav-wrap{min-height:82px;padding:1rem 20px;grid-template-columns:1fr auto 1fr}.nav-wrap>.logo{grid-column:2}.logo-cn{font-size:1.65rem}.logo-en{font-size:.75rem}.menu-toggle{display:block;grid-row:1;grid-column:1;justify-self:start;width:44px;height:44px;background:transparent;border:0;padding:.4rem}.menu-toggle span:not(.sr-only){display:block;width:24px;height:2px;background:var(--ink);margin:6px auto}.nav-wrap nav{position:absolute;top:100%;left:0;right:0;z-index:20;display:flex;flex-direction:column;align-items:stretch;visibility:hidden;opacity:0;padding:1rem 24px 1.5rem;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 12px 18px #0001;white-space:normal}.nav-wrap nav.open{visibility:visible;opacity:1}.nav-wrap nav a{font-size:1rem;padding:.7rem 0}.nav-shop{font-size:.8125rem;padding:.4rem .7rem;min-height:40px;display:flex;align-items:center}.hero{min-height:640px;padding:3rem 24px;align-items:flex-end}.hero-media img{object-position:64% center}.hero:before{background:linear-gradient(0deg,rgba(26,22,18,.88),rgba(26,22,18,.56) 40%,rgba(26,22,18,0) 78%)}.hero h1{font-size:clamp(2.4rem,9vw,3.8rem);line-height:1.23}.hero .eyebrow{font-size:.75rem;margin-bottom:.8rem}.hero-lede{font-size:1rem;margin:1rem 0 1.4rem}.hero-caption{display:none}.hero-copy{max-width:100%}.hero .button{min-width:190px}.collections,.category-explorer{padding:3.5rem 20px}.section-heading h2,.explorer-heading h2,.intro h2,.shops h2{font-size:clamp(1.85rem,6.5vw,2.8rem)}.section-heading>p{font-size:.9375rem;max-width:320px;margin:1rem auto 0}.section-heading{margin-bottom:2rem}.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1rem}.collection-card div{padding:.9rem 0 0}.collection-card h3{font-size:1.3rem}.collection-card span{font-size:.8125rem}.collection-card button:after{top:0;right:0;width:36px;height:36px;font-size:1.2rem}.collection-card p{font-size:.75rem;letter-spacing:.025em}.feature{display:block;min-height:0}.feature-image{min-height:0;aspect-ratio:4/3}.feature-copy{padding:3rem 24px}.feature h2{font-size:clamp(2.2rem,8vw,3rem)}.feature dl{margin:1.5rem 0}.marquee{padding:1rem 20px}.marquee div{font-size:.8125rem;gap:.6rem 1rem}.marquee i{display:none}.filter-row{margin:1.8rem 0;gap:.5rem}.category-tabs{gap:.8rem}.category-tabs button{font-size:.875rem;min-height:44px;padding:.6rem .15rem}.filter-status{width:100%;padding-bottom:.6rem}.product-wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.8rem .9rem}.wall-card div{padding:.75rem 0 0}.wall-card h3{font-size:1rem}.intro{display:block;padding:3.5rem 24px}.intro-text{margin-top:1.8rem}.principles{padding:3rem 24px}.principle-grid{display:block}.principle-grid article{padding:1.5rem 0;border-right:0;border-bottom:1px solid var(--line);text-align:left}.principle-grid article:last-child{border:0}.principle-grid p{margin:0;max-width:none;font-size:1rem}.principles>.eyebrow{text-align:left;margin-bottom:0}.shops{display:block;padding:3.5rem 24px 2rem}.shop-list{margin-top:2rem}.shop-row{gap:.6rem}.shop-row h3{font-size:1.2rem}.shop-row p{font-size:.8125rem}footer{padding:2rem 24px 1rem;gap:1.5rem}footer p{order:3;flex:0 0 100%}.footer-wordmark{order:4;margin-top:0;font-size:16vw}footer>.logo{align-items:flex-start}}
@media(max-width:380px){.nav-shop{font-size:.75rem;padding:.4rem .55rem}.hero{min-height:590px;padding:2.5rem 20px}.hero h1{font-size:2.2rem}.shop-row{grid-template-columns:1rem minmax(0,1fr)}.copy-button,.offline-label{grid-column:2;justify-self:start}.category-tabs{gap:.6rem}.category-tabs button{font-size:.8125rem}.collection-card p{letter-spacing:0}.collection-grid{column-gap:.7rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{.menu-toggle,.nav-shop,.copy-button,.category-tabs,.skip-link{display:none}.hero{min-height:450px}.nav-wrap nav{position:static;visibility:visible;opacity:1}.wall-card[hidden]{display:block!important}.collections,.category-explorer,.intro,.shops{padding:2rem}.footer-wordmark{font-size:6rem}}

/* AI extends only the visible margins; the original photograph covers every product and label. */
.feature-image.feature-mixed{min-height:0;aspect-ratio:auto;align-self:center}
.feature-extended-frame{position:relative;aspect-ratio:4/5;overflow:hidden;isolation:isolate;background:#bd773e}
.feature-extended-frame img.feature-extension{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:0}
.feature-extended-frame img.feature-original{position:absolute;inset:10% 0 auto;width:100%;height:80%;object-fit:fill;z-index:1;mask-image:linear-gradient(to bottom,transparent 0%,#000 4%,#000 96%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 4%,#000 96%,transparent 100%)}


/* Footer: Chinese brand signature and original official-account QR. */
.footer-brand-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2rem;width:100%;max-width:1200px;margin:0 auto 1.5rem;text-align:left}
.footer-brand-cn{font:700 clamp(2.8rem,9.8vw,8rem)/1.15 var(--body);letter-spacing:.06em;white-space:nowrap}
.footer-wechat{width:148px;text-align:center;font:400 .875rem/1.6 var(--body);letter-spacing:normal;overflow-wrap:normal}
.footer-wechat a{display:block;background:#fff;padding:6px}
.footer-wechat img{position:static;display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.footer-wechat figcaption{margin-top:.65rem}
.footer-wechat figcaption span{display:block;margin-top:.1rem;color:#fdf6f3b3;font-size:.75rem}
.footer-brand-en{white-space:nowrap}
@media(max-width:760px){.footer-brand-row{gap:1rem;margin:.5rem 0 1.25rem}.footer-wechat{width:112px}.footer-wechat a{padding:4px}.footer-brand-cn{letter-spacing:.02em}}
