:root{--bg:#fbf7ef;--ink:#38291f;--muted:#867363;--accent:#ad4828;--line:#e8dccb}
body{background:radial-gradient(ellipse at 10% 5%,#f8eddb 0,transparent 38%),var(--bg)}
.masthead{height:96px;padding:0 40px}.brand{letter-spacing:1px}.seal{background:#a94b2c;color:#fff6e3;border-color:#a94b2c;border-radius:13px 4px 13px 4px;width:48px;height:49px}.contact-link{border:1px solid #dbc8b2;border-radius:30px;padding:13px 20px;background:#fffaf1}
.warm-hero{min-height:600px;padding:48px 40px 65px;gap:20px;grid-template-columns:1fr 1.1fr;overflow:hidden}
.hero-kicker{display:inline-block;border-top:1px solid #d3b287;padding-top:14px;font-size:12px;color:#896746;letter-spacing:2px}
.hero-copy h1{font-size:clamp(38px,4.8vw,64px);line-height:1.34;letter-spacing:1px;margin:18px 0 22px;font-weight:500}
.hero-copy h1 span{color:#ad4828}.intro{font-size:15px;line-height:2;color:#806a56}.hero-copy .eyebrow{font-size:10px;letter-spacing:1px;color:#9b7251;margin-bottom:24px}
.hero-actions{gap:12px;flex-wrap:wrap;margin:28px 0 24px}.primary,.outline{min-height:48px;border-radius:9px;font-size:13px;gap:20px}.primary{background:#ac4727;box-shadow:0 5px 14px #ac472717}.outline{background:#fffaf1;border-color:#d4bda2}.primary:hover{background:#913b20}.hero-notes{font-size:11px;color:#8a735b;gap:14px}
.warm-hero .hero-visual{min-height:465px;transform:none;isolation:isolate}.hero-halo{position:absolute;inset:7% 1% 5%;border-radius:48% 52% 54% 46%;background:radial-gradient(circle at 55% 40%,#f4d3a1,#f0e3ca 63%,#f7eedf);transform:rotate(-8deg);z-index:-1}
.warm-hero .hero-visual>img{width:100%;max-width:520px;height:auto;max-height:480px;object-fit:contain;border-radius:44% 46% 43% 45%;mix-blend-mode:multiply;transform:rotate(-6deg);filter:drop-shadow(0 16px 15px #8b5a251a);animation:soft-float 8s ease-in-out infinite}
.hero-caption{align-self:end;justify-self:stretch;position:relative;display:flex;flex-direction:column;gap:8px;border-left:2px solid #bc8550;padding:3px 0 3px 16px;margin:5px 0 0 30px}.hero-caption span{font-size:9px;letter-spacing:3px;color:#a57e50}.hero-caption strong{font-size:12px;letter-spacing:1px;font-weight:400;color:#72563c}
.grain-particles{position:absolute;inset:0;pointer-events:none;z-index:-1}.grain-particles i{position:absolute;background:#c99d58;width:5px;height:9px;border-radius:80% 30%;opacity:.3;animation:grain-drift 9s ease-in-out infinite}.grain-particles i:nth-child(1){top:10%;left:4%}.grain-particles i:nth-child(2){top:25%;right:5%;animation-delay:-3s}.grain-particles i:nth-child(3){bottom:20%;left:9%;animation-delay:-5s}.grain-particles i:nth-child(4){bottom:13%;right:8%;animation-delay:-2s}.grain-particles i:nth-child(5){top:5%;left:65%;animation-delay:-7s}
@keyframes soft-float{50%{transform:translateY(-9px) rotate(-4deg)}}@keyframes grain-drift{50%{transform:translate(5px,-12px) rotate(35deg);opacity:.5}}
.flavour-story{margin:0 40px 64px;display:grid;grid-template-columns:1fr 1fr;background:#efe4d2;border:1px solid #e8dac3;border-radius:18px;overflow:hidden;align-items:center}.flavour-story>div{padding:35px}.flavour-story .eyebrow{font-size:9px;letter-spacing:2px}.flavour-story h2{font-size:25px;margin:14px 0}.flavour-story p{font-size:13px;line-height:1.9;color:#7f6b55;max-width:340px}.flavour-story a{display:inline-block;font-size:12px;color:#9d482a;border-bottom:1px solid #bd9170;padding:10px 0 5px}.flavour-story img{width:100%;height:260px;object-fit:contain;mix-blend-mode:multiply;padding:18px}
.new-arrivals{padding:0 40px 55px}.new-arrivals h2,.catalog h2{font-size:30px}.small-dot{color:#c78c57}.text-link{background:none;color:#9e492c;padding:12px 0;font-size:12px;white-space:nowrap;min-height:44px}.section-intro{font-size:12px;color:#927b65;line-height:1.8;margin:12px 0 26px}.new-products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.arrival-card{min-width:0;text-align:left;background:#fffdf8;border:1px solid #e9dccb;border-radius:14px;overflow:hidden;padding:13px;color:var(--ink);transition:transform .2s,box-shadow .2s}.arrival-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px #6b3d1910}.arrival-labels{min-height:31px}.arrival-image{aspect-ratio:1;background:#f5efe4;border-radius:9px;overflow:hidden}.arrival-image img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.arrival-copy{padding:15px 3px 3px}.arrival-copy>span{font-size:9px;letter-spacing:1px;color:#9b7856}.arrival-copy h3{font-size:15px;font-weight:500;margin:10px 0}.arrival-copy p{font-size:11px;color:var(--muted);line-height:1.5;min-height:17px}.arrival-copy>div{display:flex;justify-content:space-between;align-items:center;gap:5px}.arrival-arrow{border-radius:50%;border:1px solid #e8d8c3;width:27px;height:27px;display:grid;place-items:center;color:#a65b32;flex-shrink:0}
.catalog{padding:45px 40px 65px}.catalog-mode{display:flex;align-items:center;gap:12px;margin-top:20px}.catalog-mode>button{border:1px solid #d9b888;background:#fffaf0;color:#95632c;padding:9px 16px;border-radius:30px;font-size:12px;min-height:42px}.catalog-mode>button[aria-pressed=true]{background:#ad4828;color:#fff;border-color:#ad4828}.catalog-mode>span{font-size:11px;color:#9d8874}.categories button{border-radius:30px;min-height:42px}.categories button.active{background:#a84a2a;border-color:#a84a2a}.search{border-radius:30px;background:#fffdf8;min-height:46px}.search input{font-size:13px}.products{gap:28px 20px}.product{padding:12px;background:#fffdf9;border:1px solid #eadecb;border-radius:13px;transition:box-shadow .2s}.product:hover{box-shadow:0 9px 20px #7041160e}.product-image{background:#f4eee3;border-radius:8px}.product h3{font-weight:500;font-size:15px}.product .taste{line-height:1.6}.product-badge{font-size:12px}.product-badges{padding-right:0}.price{color:#b14d2b}.spec{font-size:11px}.product:focus-visible,.arrival-card:focus-visible{outline-offset:2px}
.factory{margin:0 40px 30px;padding:45px;background:linear-gradient(110deg,#ecd8b8,#f3e6d2);border:1px solid #dfc5a3;border-radius:18px}.factory h2{font-size:30px}.factory-contact>span{color:#876a4d}.factory-contact>a{color:#9a4727}.factory-contact button{min-height:48px}.mobile-dock{z-index:5;background:#fffcf5f5}.mobile-dock button{background:#ad4828;border-radius:8px}.mobile-dock a{border-radius:8px}dialog{box-shadow:0 20px 70px #49301d26;border-radius:18px}#detail .detail-toolbar{background:#faf5ec}#detail .detail-copy .primary{max-width:100%;white-space:normal;min-height:48px}
@media(min-width:701px) and (max-width:950px){.warm-hero{padding-left:30px;padding-right:30px;min-height:540px}.warm-hero .hero-visual{min-height:360px}.hero-actions .primary,.hero-actions .outline{padding:13px 16px}.hero-copy h1{font-size:44px}.new-products{grid-template-columns:repeat(2,minmax(0,1fr))}.products{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){
 .masthead{height:78px;padding:0 22px}.brand{font-size:20px}.contact-link{padding:10px 13px;font-size:11px}.brand small{font-size:8px}
 .warm-hero{display:flex;flex-direction:column;padding:35px 24px 36px;gap:18px;min-height:0}.hero-copy{width:100%}.hero-copy .eyebrow{font-size:10px;margin-bottom:20px}.hero-kicker{font-size:11px;padding-top:12px}.hero-copy h1{font-size:clamp(39px,9vw,54px);line-height:1.3;white-space:normal;letter-spacing:0;margin:16px 0}.intro{font-size:13px;line-height:1.85}.hero-actions{margin:23px 0 20px;gap:10px}.hero-actions .primary,.hero-actions .outline{display:inline-flex;font-size:12px;padding:13px 18px;gap:12px;min-height:46px}.hero-notes{font-size:10px;gap:12px;white-space:normal}.warm-hero .hero-visual{width:100%;min-height:0;display:grid;transform:none;align-self:auto}.warm-hero .hero-visual>img{width:100%;max-width:400px;max-height:350px;height:auto}.hero-halo{inset:5% 4% 12%}.hero-caption{margin:8px 5px 0 20px}.hero-caption strong{font-size:11px}.hero-caption span{font-size:8px}
 .flavour-story{margin:0 20px 42px;grid-template-columns:1fr;border-radius:14px}.flavour-story>div{padding:25px 24px 0}.flavour-story h2{font-size:23px}.flavour-story p{font-size:12px;margin-bottom:8px;max-width:none}.flavour-story img{height:230px;padding:5px 20px 18px}.flavour-story .eyebrow{font-size:8px}
 .new-arrivals{padding:0 20px 38px}.new-arrivals .section-title{align-items:start;gap:8px;flex-wrap:wrap}.new-arrivals h2{font-size:24px;line-height:1.5}.new-arrivals .eyebrow{font-size:9px}.new-arrivals .text-link{font-size:11px;padding-top:0;min-height:30px}.new-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.section-intro{font-size:12px;margin:10px 0 20px}.arrival-card{padding:10px;border-radius:12px}.arrival-copy{padding:12px 1px 1px}.arrival-copy h3{font-size:14px;line-height:1.5;overflow-wrap:anywhere}.arrival-copy p{font-size:11px;min-height:34px}.arrival-copy>span{font-size:9px;letter-spacing:0}.arrival-copy .price{font-size:23px}.arrival-copy .price small{font-size:10px}.arrival-labels{min-height:32px}
 .catalog{padding:30px 20px 40px}.catalog h2{font-size:27px}.count{font-size:10px}.tools{display:block;margin-top:20px}.price-note{font-size:10px;margin-top:12px;line-height:1.5}.categories{margin-right:-20px;gap:7px}.categories button{font-size:12px;padding:9px 14px}.catalog-mode>span{font-size:10px}.catalog-mode{gap:9px;margin-top:16px}.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}.product{padding:10px;border-radius:12px}.product h3{font-size:14px;line-height:1.5;margin-top:13px}.product .taste{font-size:11px;min-height:34px}.product .price-line{flex-wrap:wrap;align-items:baseline}.product .spec{font-size:10px;text-align:left;max-width:none}.product-badge{font-size:11px;padding:4px 6px}.product-badges{gap:4px}.price{font-size:23px}.product-image .view{width:24px;height:24px;right:7px;bottom:7px}
 .factory{margin:0 20px 20px;padding:28px 24px}.factory h2{font-size:27px}.factory-contact{margin-top:24px;gap:10px}.factory-contact button{display:inline-flex;width:100%;margin-top:8px}.factory-contact>a{font-size:28px}.factory p:not(.eyebrow),address{font-size:12px}.mobile-dock{padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:10px}.mobile-dock button,.mobile-dock a{font-size:13px;min-height:46px}footer{padding:20px;font-size:9px;gap:12px}body{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
}
@media(max-width:360px){.warm-hero{padding-left:20px;padding-right:20px}.hero-actions .primary,.hero-actions .outline{padding:12px;font-size:11px}.hero-copy h1{font-size:39px}.brand{font-size:18px;gap:8px}.contact-link{padding:9px 10px}.products,.new-products{gap:10px}.product,.arrival-card{padding:8px}.product-badge{font-size:10px;padding:4px 5px}.catalog h2{font-size:23px}.arrival-copy .price{font-size:21px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.warm-hero .hero-visual>img,.grain-particles i{animation:none}.product,.arrival-card{transition:none}.reveal{opacity:1;transform:none!important}}

/* Uploaded covers remain intact, including wide and tall photographs. */
.warm-hero .hero-visual.custom-cover>img{border-radius:0;transform:none;animation:none;object-fit:contain;max-width:100%;width:auto;height:auto;max-height:480px}
@media(max-width:700px){.warm-hero .hero-visual.custom-cover>img{max-height:350px}}
/* Warm motion: transform/opacity only; decorative layers cannot cover controls. */
.hero-halo{animation:halo-breathe 11s ease-in-out infinite}
.grain-particles i,.grain-particles i:nth-child(n){left:var(--x);top:var(--y);right:auto;bottom:auto;width:4px;height:8px;opacity:.38;animation:grain-orbit var(--duration) ease-in-out var(--delay) infinite}
.grain-particles i:nth-child(3n){width:3px;height:3px;border-radius:50%;background:#dfbb79}
@keyframes grain-orbit{0%,100%{transform:translate(0,0) rotate(-20deg);opacity:.2}50%{transform:translate(9px,-20px) rotate(50deg);opacity:.52}}
@keyframes halo-breathe{0%,100%{transform:rotate(-8deg) scale(.98);opacity:.78}50%{transform:rotate(-3deg) scale(1.025);opacity:1}}
.primary{position:relative;overflow:hidden;isolation:isolate;transition:background .2s,transform .2s,box-shadow .2s}
.primary::after{content:'';position:absolute;inset:-20% auto -20% -45%;width:28%;background:linear-gradient(100deg,transparent,#ffffff20,transparent);transform:skewX(-18deg);pointer-events:none;animation:button-glint 9s ease-in-out infinite;z-index:-1}
@keyframes button-glint{0%,75%{transform:translateX(0) skewX(-18deg);opacity:0}80%{opacity:1}95%,100%{transform:translateX(650%) skewX(-18deg);opacity:0}}
.product:active,.arrival-card:active,.primary:active{transform:scale(.985)}
.motion-toggle{background:transparent;border:1px solid #dfcdb5;border-radius:20px;color:#85694e;padding:8px 12px;font-size:11px;min-height:36px;white-space:nowrap}
footer{align-items:center;gap:12px;flex-wrap:wrap}
@media(hover:hover) and (pointer:fine){.product:hover,.arrival-card:hover{transform:translateY(-4px);border-color:#cfac7c;box-shadow:0 12px 28px #85522214}.product-image img,.arrival-image img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}.product:hover .product-image img,.arrival-card:hover .arrival-image img{transform:scale(1.035)}.primary:hover{transform:translateY(-2px);box-shadow:0 7px 18px #ad482826}}
html[data-motion=paused] .hero-visual>img,html[data-motion=paused] .grain-particles i,html[data-motion=paused] .hero-halo,html[data-motion=paused] .primary::after,.warm-hero:not(.motion-visible) .hero-visual>img,.warm-hero:not(.motion-visible) .grain-particles i,.warm-hero:not(.motion-visible) .hero-halo{animation-play-state:paused}
html[data-motion=off] .hero-visual>img,html[data-motion=off] .grain-particles i,html[data-motion=off] .hero-halo,html[data-motion=off] .primary::after{animation:none!important}
html[data-motion=off] .product,html[data-motion=off] .arrival-card,html[data-motion=off] .primary,html[data-motion=off] img{transition:none!important}
html[data-motion=off] .product:hover,html[data-motion=off] .arrival-card:hover,html[data-motion=off] .primary:hover,html[data-motion=off] .product:active,html[data-motion=off] .arrival-card:active,html[data-motion=off] .primary:active{transform:none}
@media(max-width:700px){.grain-particles i:nth-child(n+9){display:none}.grain-particles i{opacity:.3}.motion-toggle{min-height:44px}}
@media(prefers-reduced-motion:reduce){.hero-halo,.grain-particles i,.primary::after,.warm-hero .hero-visual>img{animation:none!important}.product,.arrival-card,.primary,img{transition:none!important}.product:hover,.arrival-card:hover,.primary:hover,.product:active,.arrival-card:active,.primary:active{transform:none!important}}

html[data-motion=off] .product:hover img,html[data-motion=off] .arrival-card:hover img{transform:none!important}
/* A soft gold sweep stays behind the contact card content. */
.factory{position:relative;isolation:isolate;overflow:hidden}
.factory::before{content:'';position:absolute;top:-25%;bottom:-25%;left:-45%;width:30%;background:linear-gradient(100deg,transparent 0%,#fff0c42b 25%,#ffe4a160 50%,#fff5d634 75%,transparent 100%);transform:translateX(0) skewX(-18deg);pointer-events:none;z-index:0;animation:contact-gold-sweep 8s ease-in-out infinite}
.factory>div{position:relative;z-index:1}
@keyframes contact-gold-sweep{0%,60%{transform:translateX(0) skewX(-18deg);opacity:0}65%{opacity:1}88%,100%{transform:translateX(600%) skewX(-18deg);opacity:0}}
.factory:not(.motion-visible)::before,html[data-motion=paused] .factory::before{animation-play-state:paused}
html[data-motion=off] .factory::before{animation:none;opacity:0}
@media(prefers-reduced-motion:reduce){.factory::before{animation:none!important;opacity:0}}
.copyright{flex-basis:100%;text-align:center;margin:12px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:11px;line-height:1.8;color:#8a7867;overflow-wrap:anywhere}@media(max-width:540px){.copyright{font-size:10px}}

/* More legible mobile motion; background grains never intercept product input. */
.warm-hero .hero-visual>img{animation-duration:5.6s}
@keyframes soft-float{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-16px) rotate(-3deg)}}
.grain-particles i,.grain-particles i:nth-child(n){width:6px;height:12px;background:#bd8e40;animation-duration:6.8s}
.grain-particles i:nth-child(3n){width:4px;height:4px;border-radius:50%}
@keyframes grain-orbit{0%,100%{transform:translate(0,0) rotate(-20deg);opacity:.32}50%{transform:translate(28px,-46px) rotate(60deg);opacity:.7}}
@media(max-width:700px){.grain-particles i,.grain-particles i:nth-child(n){width:6px;height:11px}.grain-particles i:nth-child(3n){width:4px;height:4px}}
/* Optional retail prices retain the existing price numeral size. */
.dual-prices{display:grid;gap:10px;min-width:0;width:100%}
.price-item{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 10px;min-width:0}
.price-label{font:500 10px/1.5 "Microsoft YaHei",sans-serif;color:#8a705c;white-space:nowrap}
.dual-prices .price{white-space:normal;overflow-wrap:anywhere;min-width:0}
.price-line:has(.dual-prices){align-items:flex-end;flex-wrap:wrap;gap:10px}
.arrival-copy>div:has(.dual-prices){align-items:flex-end}
.detail-copy .dual-prices{margin:16px 0;gap:12px}
.detail-copy .price-item{gap:12px}
/* A custom cover floats gently without rotating, cropping or changing its shape. */
.warm-hero .hero-visual.custom-cover>img{animation:custom-cover-float 7s ease-in-out infinite;transform:translateY(0);filter:drop-shadow(0 12px 16px #88552118);will-change:auto}
@keyframes custom-cover-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media(max-width:700px){.price-item{gap:3px 7px}.price-label{font-size:9px}.dual-prices{gap:8px}.warm-hero .hero-visual.custom-cover{padding-top:14px;padding-bottom:2px}}
@media(prefers-reduced-motion:reduce){.warm-hero .hero-visual.custom-cover>img{animation:none!important;transform:none}}
.detail-copy .dual-prices .price{margin:0}
.single-price{display:block;min-width:0}
.single-price .price{white-space:normal;overflow-wrap:anywhere}
.detail-copy .single-price{margin:16px 0}
.detail-copy .single-price .price{margin:0}
/* Quiet motion: the light moves around the food; the photograph barely moves. */
.warm-hero .hero-visual>img{animation:food-breathe 10s cubic-bezier(.45,0,.55,1) infinite;transform-origin:50% 65%}
.warm-hero .hero-visual.custom-cover>img{animation:cover-breathe 10s cubic-bezier(.45,0,.55,1) infinite;transform:none;filter:drop-shadow(0 12px 16px #88552118)}
@keyframes food-breathe{0%,100%{transform:translateY(0) rotate(-4deg) scale(.99)}50%{transform:translateY(-5px) rotate(-3deg) scale(1)}}
@keyframes cover-breathe{0%,100%{transform:translateY(0) scale(.992)}50%{transform:translateY(-4px) scale(1)}}
.hero-halo{animation:halo-breathe 14s ease-in-out infinite}
.hero-halo::after{content:'';position:absolute;inset:8%;border:1px solid #bd93552b;border-radius:42% 58% 48% 52%;pointer-events:none;animation:grain-light-turn 26s linear infinite}
@keyframes grain-light-turn{to{transform:rotate(360deg)}}
.grain-particles i,.grain-particles i:nth-child(n){animation-duration:var(--duration);opacity:.35}
@keyframes grain-orbit{0%,100%{transform:translate(0,0) rotate(-15deg);opacity:.22}50%{transform:translate(16px,-26px) rotate(45deg);opacity:.52}}
.categories button{transition:background .28s,border-color .28s,color .28s,box-shadow .28s}
.categories button.active{animation:category-settle .4s ease-out}
@keyframes category-settle{0%{box-shadow:0 0 0 0 #c7904a30}100%{box-shadow:0 0 0 7px transparent}}
.arrival-arrow,.product-image .view,.hero-actions .primary span,.contact-link span{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
@media(hover:hover) and (pointer:fine){.arrival-card:hover .arrival-arrow,.product:hover .view,.contact-link:hover span{transform:translate(2px,-2px)}.hero-actions .primary:hover span{transform:translate(2px,2px)}}
.warm-hero:not(.motion-visible) .hero-halo::after,html[data-motion=paused] .hero-halo::after{animation-play-state:paused}
html[data-motion=off] .hero-halo::after,html[data-motion=off] .categories button.active{animation:none!important}
html[data-motion=off] .categories button,html[data-motion=off] .arrival-arrow,html[data-motion=off] .view,html[data-motion=off] .hero-actions .primary span,html[data-motion=off] .contact-link span{transition:none!important}
html[data-motion=off] .arrival-arrow,html[data-motion=off] .view,html[data-motion=off] .hero-actions .primary span,html[data-motion=off] .contact-link span{transform:none!important}
@media(prefers-reduced-motion:reduce){.hero-halo::after,.categories button.active{animation:none!important}.categories button,.arrival-arrow,.view,.hero-actions .primary span,.contact-link span{transition:none!important;transform:none!important}}
/* More expressive cover: a floating photograph with a slow, gentle rocking turn. */
.warm-hero .hero-visual>img{animation:food-orbit 9s ease-in-out infinite;transform-origin:50% 55%}
.warm-hero .hero-visual.custom-cover>img{animation:cover-orbit 9s ease-in-out infinite;transform-origin:50% 55%;max-width:94%}
@keyframes food-orbit{0%,100%{transform:translateY(7px) rotate(-6deg) scale(.98)}50%{transform:translateY(-17px) rotate(2deg) scale(1)}}
@keyframes cover-orbit{0%,100%{transform:translateY(7px) rotate(-3deg) scale(.97)}50%{transform:translateY(-17px) rotate(3deg) scale(.99)}}
.warm-hero .hero-visual{padding-top:24px;padding-bottom:14px}
.hero-halo{background:radial-gradient(ellipse at 35% 30%,#f8dca8 0%,#f0dfbd 44%,#f5eada 74%);animation:halo-breathe 14s ease-in-out infinite}
.hero-halo::after{inset:-3%;border:1px solid #c69b5266;border-top-color:#d8af7155;border-right-color:transparent;box-shadow:inset 0 0 30px #f7d9a929;animation:grain-light-turn 32s linear infinite}
.hero-halo::before{content:'';position:absolute;inset:10%;border-radius:54% 46% 43% 57%;border:1px dashed #bc8b4236;pointer-events:none;animation:grain-light-turn 45s linear infinite reverse}
.grain-particles{animation:particle-ring 38s linear infinite;transform-origin:50% 48%}
@keyframes particle-ring{to{transform:rotate(360deg)}}
.grain-particles i,.grain-particles i:nth-child(n){width:5px;height:10px;background:linear-gradient(140deg,#efd49a,#c2964f);box-shadow:0 0 7px #d8b16b28}
.grain-particles i:nth-child(3n){width:4px;height:4px;border-radius:50%;background:#d4a65b}
@media(max-width:700px){.warm-hero .hero-visual.custom-cover{padding-top:25px;padding-bottom:18px}.warm-hero .hero-visual.custom-cover>img{max-width:92%;max-height:325px}.hero-halo::after{inset:0 2%}.grain-particles i:nth-child(n+11){display:none}}
.warm-hero:not(.motion-visible) .grain-particles,.warm-hero:not(.motion-visible) .hero-halo::before,html[data-motion=paused] .grain-particles,html[data-motion=paused] .hero-halo::before{animation-play-state:paused}
html[data-motion=off] .grain-particles,html[data-motion=off] .hero-halo::before{animation:none!important}
@media(prefers-reduced-motion:reduce){.grain-particles,.hero-halo::before{animation:none!important}}
/* Rounded cover silhouette automatically applies to every uploaded homepage photo. */
.warm-hero .hero-visual>img,.warm-hero .hero-visual.custom-cover>img{border-radius:48% 52% 47% 53% / 46% 48% 52% 54%;clip-path:ellipse(49% 48% at 50% 50%)}
.hero-halo{inset:3% 0 7%;border-radius:48% 52% 47% 53% / 46% 48% 52% 54%}
@media(max-width:700px){.hero-halo{inset:3% 0 10%}}
/* Gold travels through the type; its dark base remains legible between sweeps. */
.brand-gold-title{display:inline-block;position:relative;color:#38291f}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
 html[data-motion=on] .brand-gold-title,html[data-motion=on] .hero-copy h1{background-image:linear-gradient(108deg,#38291f 0%,#38291f 37%,#916025 43%,#e4b65e 47%,#fff0ba 50%,#c28b38 54%,#38291f 62%,#38291f 100%);background-size:280% 100%;background-position:100% 50%;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:gold-type-sweep 7s ease-in-out infinite}
 html[data-motion=on] .hero-copy h1 span{background-image:linear-gradient(108deg,#ad4828 0%,#ad4828 37%,#b77b2c 43%,#e4b65e 47%,#fff0ba 50%,#c28b38 54%,#ad4828 62%,#ad4828 100%);background-size:280% 100%;background-position:100% 50%;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:gold-type-sweep 7s ease-in-out infinite}
}
@keyframes gold-type-sweep{0%,18%{background-position:100% 50%}74%,100%{background-position:0% 50%}}
.hero-copy h1{position:relative;padding-bottom:17px}
.hero-copy h1::after{content:'';display:block;position:absolute;left:0;bottom:0;width:min(230px,80%);height:9px;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='9' viewBox='0 0 96 9'%3E%3Cpath d='M0 4.5 Q12 .5 24 4.5 T48 4.5 T72 4.5 T96 4.5' fill='none' stroke='%23bf944d' stroke-width='1.3' opacity='.65'/%3E%3C/svg%3E");background-repeat:repeat-x;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 75%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 75%,transparent);opacity:.65}
html[data-motion=on] .hero-copy h1::after{animation:gold-wave-travel 5s linear infinite}
@keyframes gold-wave-travel{to{background-position:96px 0}}
html[data-motion=paused] .brand-gold-title,html[data-motion=paused] .hero-copy h1,html[data-motion=paused] .hero-copy h1 span,html[data-motion=paused] .hero-copy h1::after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.brand-gold-title,.hero-copy h1,.hero-copy h1 span,.hero-copy h1::after{animation:none!important;background-image:none!important;-webkit-text-fill-color:currentColor!important}.brand-gold-title,.hero-copy h1{color:#38291f!important}.hero-copy h1 span{color:#ad4828!important}}
/* Cool teal-blue highlights balance the warm cream and caramel palette. */
.ambient-heading{position:relative;color:#245768}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
 html[data-motion=on] .ambient-heading{background-image:linear-gradient(108deg,#245768 0%,#245768 36%,#478fa5 43%,#a4dde0 49%,#5aa9c2 54%,#245768 64%,#245768 100%);background-size:290% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:blue-type-sweep 9s ease-in-out infinite}
}
@keyframes blue-type-sweep{0%,15%{background-position:100% 50%}76%,100%{background-position:0% 50%}}
.ambient-heading::after{content:'';position:absolute;right:10%;top:-8px;width:3px;height:3px;border-radius:50%;background:#d9b66f;box-shadow:-22px 8px 0 #75aeb5,16px 10px 0 #d9b66f55;opacity:.55;pointer-events:none}
html[data-motion=on] .ambient-heading::after{animation:firefly-wander 7s ease-in-out infinite}
@keyframes firefly-wander{0%,100%{transform:translate(0,0);opacity:.25}38%{transform:translate(-9px,-6px);opacity:.8}70%{transform:translate(5px,-10px);opacity:.4}}
.playful-arrow,.hero-actions .primary span{display:inline-block;transform-origin:center}
html[data-motion=on] .playful-arrow{animation:arrow-wink 5.2s ease-in-out infinite}
html[data-motion=on] .hero-actions .primary span{animation:arrow-invite 4.8s ease-in-out infinite}
@keyframes arrow-invite{0%,65%,100%{transform:translate(0,0) rotate(0)}73%{transform:translate(4px,4px) rotate(10deg)}81%{transform:translate(0,0) rotate(-7deg)}89%{transform:translate(3px,3px) rotate(0)}}
@keyframes arrow-wink{0%,68%,100%{transform:translate(0,0)}76%{transform:translate(4px,-4px)}84%{transform:translate(0,0)}91%{transform:translate(2px,-2px)}}
html[data-motion=off] .ambient-heading::after{opacity:0}
@media(prefers-reduced-motion:reduce){.ambient-heading,.ambient-heading::after,.playful-arrow,.hero-actions .primary span{animation:none!important;transform:none!important}.ambient-heading{background-image:none!important;color:#245768!important;-webkit-text-fill-color:currentColor!important}.ambient-heading::after{opacity:0}}
/* Three hand-drawn butterflies: distinct paths, durations and quiet landing pauses. */
.ambient-heading::after{display:none!important}
html[data-motion=on] .ambient-heading{animation-duration:5.5s}
html[data-motion=on] .brand-gold-title,html[data-motion=on] .hero-copy h1,html[data-motion=on] .hero-copy h1 span{animation-duration:5.5s}
.heading-butterfly{display:none;position:absolute;right:8%;top:-25px;width:42px;height:34px;pointer-events:none;z-index:1;--wing:#bd784e;--wing-low:#d9a96b;--trip:17s;filter:drop-shadow(0 2px 2px #7757361a)}
.heading-butterfly svg{display:block;width:100%;height:100%;overflow:visible}
.butterfly-wing{fill:var(--wing);stroke:#fff4dc;stroke-width:.8;transform-box:fill-box}
.wing-left{transform-origin:100% 50%}.wing-right{transform-origin:0% 50%}
.butterfly-wing .lower-wing{fill:var(--wing-low)}
.butterfly-wing .wing-vein{fill:none;stroke:#fff6df;stroke-width:.8;opacity:.7}
.butterfly-wing .wing-spot{fill:#ffebbd;stroke:none;opacity:.8}
.butterfly-body{fill:none;stroke:#685342;stroke-width:1.5;stroke-linecap:round}
.butterfly-2{right:5%;--wing:#61959b;--wing-low:#9abbb1;--trip:21s}
.butterfly-3{right:12%;--wing:#b79b4f;--wing-low:#d9bd79;--trip:25s}
html[data-motion=on] .heading-butterfly{display:block;animation:butterfly-flight-one var(--trip) ease-in-out infinite}
html[data-motion=on] .butterfly-2{animation-name:butterfly-flight-two;animation-delay:-7s}
html[data-motion=on] .butterfly-3{animation-name:butterfly-flight-three;animation-delay:-15s}
html[data-motion=on] .butterfly-wing{animation:butterfly-wing-trip var(--trip) linear infinite}
html[data-motion=on] .butterfly-2 .butterfly-wing{animation-delay:-7s}
html[data-motion=on] .butterfly-3 .butterfly-wing{animation-delay:-15s}
@keyframes butterfly-flight-one{0%,8%{opacity:0;transform:translate(-60px,-28px) rotate(-16deg) scale(.8)}18%{opacity:1;transform:translate(-34px,-12px) rotate(12deg)}30%{transform:translate(12px,-20px) rotate(-8deg)}40%,60%{opacity:1;transform:translate(0,0) rotate(-8deg) scale(.9)}72%{opacity:1;transform:translate(26px,-22px) rotate(15deg)}86%,100%{opacity:0;transform:translate(52px,-38px) rotate(-12deg) scale(.8)}}
@keyframes butterfly-flight-two{0%,8%{opacity:0;transform:translate(12px,-45px) rotate(18deg) scale(.8)}18%{opacity:1;transform:translate(-38px,-24px) rotate(-14deg)}30%{transform:translate(-18px,-9px) rotate(8deg)}40%,60%{opacity:1;transform:translate(0,0) rotate(10deg) scale(.9)}72%{opacity:1;transform:translate(-28px,-16px) rotate(-18deg)}86%,100%{opacity:0;transform:translate(-60px,-38px) rotate(10deg) scale(.8)}}
@keyframes butterfly-flight-three{0%,8%{opacity:0;transform:translate(-45px,-38px) rotate(-10deg) scale(.8)}18%{opacity:1;transform:translate(12px,-22px) rotate(16deg)}30%{transform:translate(-16px,-12px) rotate(-12deg)}40%,60%{opacity:1;transform:translate(0,0) rotate(-4deg) scale(.9)}72%{opacity:1;transform:translate(-15px,-25px) rotate(16deg)}86%,100%{opacity:0;transform:translate(35px,-42px) rotate(-12deg) scale(.8)}}
@keyframes butterfly-wing-trip{0%,4%,8%,12%,16%,20%,24%,28%,32%,36%,68%,72%,76%,80%,84%,88%,92%,96%,100%{transform:scaleX(.96)}2%,6%,10%,14%,18%,22%,26%,30%,34%,38%,66%,70%,74%,78%,82%,86%,90%,94%,98%{transform:scaleX(.3)}40%,60%{transform:scaleX(.72)}63%{transform:scaleX(.95)}}
@media(max-width:540px){.heading-butterfly{width:35px;height:29px;top:-24px;right:8%}.butterfly-2{right:4%}.butterfly-3{right:10%}}
@media(prefers-reduced-motion:reduce){.heading-butterfly{display:none!important}.butterfly-wing{animation:none!important}}
.catalog-butterfly{position:fixed;left:0;top:0;width:52px;height:43px;z-index:6;pointer-events:none!important;user-select:none;contain:layout style;filter:drop-shadow(0 3px 3px #5f4b2b25)}
.catalog-butterfly[hidden]{display:none!important}
.catalog-butterfly svg{display:block;width:100%;height:100%;overflow:visible}
.visitor-wing{transform-box:fill-box;animation:visitor-flutter .36s ease-in-out infinite alternate}
.visitor-left{transform-origin:100% 50%}.visitor-right{transform-origin:0 50%}
@keyframes visitor-flutter{from{transform:scaleX(.32)}to{transform:scaleX(1)}}
.catalog-butterfly[data-state=perched] .visitor-wing{animation:visitor-rest 2s ease-in-out infinite alternate}
@keyframes visitor-rest{from{transform:scaleX(.7)}to{transform:scaleX(.85)}}
.visitor-veins{stroke:#f9e9bc;stroke-width:.7;fill:none;opacity:.65}.visitor-edge{stroke:#f1d99d;stroke-width:1.5;fill:none}
.visitor-jewel{fill:#f8edc4;stroke:#c19551;stroke-width:1}.visitor-dots{stroke:#ffefc5;stroke-width:2;stroke-linecap:round}.visitor-antenna{stroke:#6f624b;stroke-width:1.2;fill:none;stroke-linecap:round}
@media(max-width:540px){.catalog-butterfly{width:44px;height:37px}}
html:not([data-motion=on]) .catalog-butterfly{display:none!important}
@media(prefers-reduced-motion:reduce){.catalog-butterfly{display:none!important}.visitor-wing{animation:none!important}}
/* A consistent price tray and specification footer for every catalog card. */
.products .product{display:flex;flex-direction:column;text-align:left;background:linear-gradient(155deg,#fffefa,#fffaf3);border-color:#e8d8bf;box-shadow:0 3px 16px #91602e05;transition:transform .35s,border-color .35s,box-shadow .35s}
.products .product-media{width:100%}
.products .product h3{width:100%}
.products .product .price-line,.products .product .price-line:has(.dual-prices){display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:0;width:100%;margin-top:auto;padding-top:14px}
.products .product .single-price,.products .product .dual-prices{min-height:78px;display:grid;align-content:start;gap:8px;width:100%}
.products .product .price-item{min-height:30px;align-items:baseline}
.products .product .spec{grid-column:1;display:block;max-width:none;width:100%;min-height:29px;text-align:left;align-self:end;border-top:1px solid #ecdfcd;padding:9px 0 0;margin:0;color:#8c7863;font-size:11px;line-height:1.6}
.catalog{position:relative;isolation:isolate}
.catalog-gold-dust{position:absolute;top:15px;right:25px;width:min(240px,45%);height:180px;overflow:hidden;z-index:-1;pointer-events:none;contain:strict}
.catalog-gold-dust i{position:absolute;width:4px;height:4px;left:var(--dust-x,20%);top:var(--dust-y,30%);border-radius:50%;background:#d1aa64;box-shadow:0 0 9px #e8c47e77;opacity:.3}
.catalog-gold-dust i:nth-child(2){--dust-x:43%;--dust-y:68%;width:2px;height:2px}.catalog-gold-dust i:nth-child(3){--dust-x:65%;--dust-y:18%;width:3px;height:3px}.catalog-gold-dust i:nth-child(4){--dust-x:82%;--dust-y:52%;width:2px;height:2px}.catalog-gold-dust i:nth-child(5){--dust-x:12%;--dust-y:80%;width:2px;height:2px}.catalog-gold-dust i:nth-child(6){--dust-x:90%;--dust-y:88%;width:3px;height:3px}
html[data-motion=on] .catalog-gold-dust i{animation:catalog-dust-rise 9s ease-in-out infinite}
html[data-motion=on] .catalog-gold-dust i:nth-child(2n){animation-delay:-3s;animation-duration:12s}
html[data-motion=on] .catalog-gold-dust i:nth-child(3n){animation-delay:-6s;animation-duration:10s}
@keyframes catalog-dust-rise{0%,100%{transform:translate(0,0);opacity:.15}50%{transform:translate(-8px,-21px);opacity:.55}}
@media(hover:hover) and (pointer:fine){.products .product:hover{border-color:#c99b5c;box-shadow:0 10px 28px #98652f12,0 0 0 1px #efddb929}.products .product:hover .view{background:#b37a3a;color:#fff8e9;border-color:#b37a3a}}
@media(max-width:540px){.products .product .price-line,.products .product .price-line:has(.dual-prices){padding-top:10px}.products .product .single-price,.products .product .dual-prices{min-height:76px}.products .product .spec{font-size:10px}.catalog-gold-dust{right:10px;width:42%;height:155px}}
html[data-motion=off] .catalog-gold-dust{display:none}
@media(prefers-reduced-motion:reduce){.catalog-gold-dust{display:none}}
/* The header invitation gives a small playful nudge between quiet pauses. */
.contact-link span{display:inline-block;transform-origin:center}
html[data-motion=on] .contact-link span{animation:arrow-wink 5.6s ease-in-out infinite;animation-delay:-1.3s}
@media(prefers-reduced-motion:reduce){.contact-link span{animation:none!important;transform:none!important}}
/* A slow blue sheen unifies the contact number and its playful arrow. */
.factory-contact>a{color:#245768}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
 html[data-motion=on] .factory-contact>a{background-image:linear-gradient(108deg,#245768 0%,#245768 37%,#478fa5 44%,#b9e5e5 50%,#5aa9c2 55%,#245768 64%,#245768 100%);background-size:290% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:blue-type-sweep 9s ease-in-out infinite}
 html[data-motion=on] .factory-contact>a .playful-arrow{background-image:linear-gradient(108deg,#245768 0%,#245768 37%,#478fa5 44%,#b9e5e5 50%,#5aa9c2 55%,#245768 64%,#245768 100%);background-size:290% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:arrow-wink 5.2s ease-in-out infinite,blue-type-sweep 9s ease-in-out infinite}
}
@media(prefers-reduced-motion:reduce){.factory-contact>a,.factory-contact>a .playful-arrow{animation:none!important;background-image:none!important;color:#245768!important;-webkit-text-fill-color:currentColor!important}}
/* A few hand-drawn strokes, rather than an emoji, finish the headline. */
.hero-hand-smile{display:inline-block;width:.94em;height:.8em;margin-left:.05em;vertical-align:-.02em;overflow:visible;fill:none;stroke:#b97940;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;transform:rotate(-9deg)}
.hero-hand-smile .smile-eyes{stroke:#9c6136;stroke-width:2.1}.hero-hand-smile .smile-cheeks{stroke:#c99c64;stroke-width:1.8}
@media(max-width:360px){.hero-hand-smile{width:.78em;height:.7em;margin-left:0}}
/* The smile responds after the headline sweep, on the same 5.5 second clock. */
html[data-motion=on] .hero-hand-smile{animation:smile-happy-nod 5.5s ease-in-out infinite}
html[data-motion=on] .hero-hand-smile path{stroke:url(#smile-gold-sheen);animation:smile-gold-pass 5.5s linear infinite}
html[data-motion=on] .hero-hand-smile .smile-mouth{transform-box:fill-box;transform-origin:50% 0;animation:smile-gold-pass 5.5s linear infinite,smile-happy-mouth 5.5s ease-in-out infinite}
@keyframes smile-gold-pass{0%,65%,96%,100%{stroke:#b97940}71%{stroke:#c4913b}79%{stroke:#efd084}86%{stroke:#bd8736}}
@keyframes smile-happy-mouth{0%,66%,96%,100%{transform:scale(1)}78%,84%{transform:scale(1.13,1.16)}}
@keyframes smile-happy-nod{0%,66%,96%,100%{transform:rotate(-9deg) translateY(0)}79%,84%{transform:rotate(-3deg) translateY(-1px)}}
@media(prefers-reduced-motion:reduce){.hero-hand-smile,.hero-hand-smile path{animation:none!important}.hero-hand-smile .smile-mouth{transform:none!important}}
html[data-motion=on] .hero-hand-smile path{animation:none;stroke:url(#smile-gold-sheen)}
html[data-motion=on] .hero-hand-smile .smile-mouth{animation:smile-happy-mouth 5.5s ease-in-out infinite}
/* A still, quiet smile perched beside 味; only the two dimples hop. */
.hero-copy h1 .smile-word{position:relative;display:inline-block}
.hero-copy h1 .hero-hand-smile{position:absolute;width:.65em;height:.55em;left:.7em;top:-.34em;margin:0;vertical-align:baseline;transform:rotate(-8deg)}
html[data-motion=on] .hero-hand-smile{animation:none;transform:rotate(-8deg)}
html[data-motion=on] .hero-hand-smile .smile-mouth{animation:none;transform:none}
.hero-hand-smile .smile-dimple{fill:#c18a50;stroke:none}
html[data-motion=on] .hero-hand-smile .smile-dimple{animation:dimple-hop 5.5s ease-in-out infinite}
html[data-motion=on] .hero-hand-smile .dimple-right{animation-delay:.12s}
@keyframes dimple-hop{0%,69%,91%,100%{transform:translateY(0)}76%{transform:translateY(-2px)}82%{transform:translateY(0)}87%{transform:translateY(-1px)}}
@media(prefers-reduced-motion:reduce){.hero-hand-smile .smile-dimple{animation:none!important}}
/* Restore the warm oval composition with a quieter champagne backdrop. */
.hero-halo{background:radial-gradient(ellipse at 35% 30%,#f7e3bf 0%,#f2e5cf 44%,#f7eedf 74%)}
.hero-halo::after{border-color:#c69b5240;border-top-color:#d8af7138;border-right-color:transparent;box-shadow:inset 0 0 30px #f7d9a914}
.hero-halo::before{border-color:#bc8b4226}
/* Compact merchandising: give photographs more room, keep readable aligned price rows. */
.products{align-items:stretch}
.products .product{padding:8px}
.products .product h3{margin:10px 0 4px;line-height:1.45;overflow-wrap:anywhere}
.products .product .taste{min-height:18px;margin:0 0 6px;line-height:1.55}
.products .product .price-line,.products .product .price-line:has(.dual-prices){padding-top:4px}
.products .product .single-price,.products .product .dual-prices{min-height:58px;gap:3px}
.products .product .price-item{min-height:26px;flex-wrap:wrap;column-gap:3px}
.products .product .spec{min-height:24px;padding-top:6px;margin-top:4px}
.price-note p{margin:4px 0;line-height:1.8;max-width:560px}
#price-update:empty{display:none}
@media(max-width:540px){.catalog{padding-left:14px;padding-right:14px}.products{gap:12px 10px}.products .product{padding:7px;border-radius:13px}.products .product h3{font-size:14px}.products .product .taste{font-size:11px;min-height:18px}.products .product .price-line,.products .product .price-line:has(.dual-prices){padding-top:3px}.products .product .single-price,.products .product .dual-prices{min-height:57px}.products .product .price-label{font-size:10px}.products .product .price{font-size:23px}.products .product .price small{font-size:10px}.products .product .spec{font-size:10px}.products .product-badges{min-height:27px;padding-bottom:5px}.products .product-badge{font-size:10px;padding:3px 5px}}

/* Caramel frames with a quiet, staggered gold reflection confined to the border. */
.products .product,.arrival-card{position:relative;isolation:isolate;border-color:#c58c58;box-shadow:0 3px 5px #79431f06,0 10px 18px -10px #79431f36;--frame-delay:0s}
.products .product:nth-child(4n+2),.arrival-card:nth-child(4n+2){--frame-delay:-4s}
.products .product:nth-child(4n+3),.arrival-card:nth-child(4n+3){--frame-delay:-8s}
.products .product:nth-child(4n),.arrival-card:nth-child(4n){--frame-delay:-11s}
@supports ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
 .products .product::after,.arrival-card::after{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;background:linear-gradient(115deg,transparent 35%,#d7a45177 43%,#ffe6a7 49%,#e9bb60 53%,transparent 62%);background-size:360% 240%;background-position:120% 100%;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;z-index:2}
 html[data-motion=on] .products .product::after,html[data-motion=on] .arrival-card::after{opacity:.9;animation:caramel-frame-pass 15s ease-in-out infinite;animation-delay:var(--frame-delay)}
 html[data-motion=paused] .products .product::after,html[data-motion=paused] .arrival-card::after{animation-play-state:paused}
}
@keyframes caramel-frame-pass{0%,15%{background-position:120% 100%;opacity:0}24%{opacity:.9}65%{opacity:.9}80%,100%{background-position:-20% 0%;opacity:0}}
@media(hover:hover) and (pointer:fine){.products .product:hover,.arrival-card:hover{border-color:#ad6d37;box-shadow:0 4px 7px #79431f08,0 15px 24px -12px #79431f45}}
@media(prefers-reduced-motion:reduce){.products .product::after,.arrival-card::after{animation:none!important;opacity:0!important}}
/* A clearer caramel rim, warmer gold reflection, and visible grounded depth. */
.products .product,.arrival-card{border:2px solid #ba7c43;box-shadow:0 4px 7px #75411e0c,0 10px 15px -7px #75411e40,0 19px 28px -18px #75411e55}
.products .product::after,.arrival-card::after{padding:2.5px;background-image:linear-gradient(115deg,transparent 25%,#d29b4377 36%,#f3c460 43%,#fff4c9 49%,#ffdc7b 55%,#d9a34e99 63%,transparent 74%)}
html[data-motion=on] .products .product::after,html[data-motion=on] .arrival-card::after{animation-duration:13s}
@keyframes caramel-frame-pass{0%,8%{background-position:120% 100%;opacity:0}17%{opacity:1}76%{opacity:1}92%,100%{background-position:-20% 0%;opacity:0}}
@media(hover:hover) and (pointer:fine){.products .product:hover,.arrival-card:hover{border-color:#a36531;box-shadow:0 5px 9px #75411e12,0 14px 20px -8px #75411e50,0 24px 32px -19px #75411e55}}
/* Rich, distinct food-market labels with clear white lettering. */
.product-badge[data-tag]{color:#fff;font-weight:600;box-shadow:inset 0 1px 0 #ffffff22,0 1px 3px #65320c12}
.product-badge[data-tag="招牌"]{background:#a66b16;border-color:#925b0e;color:#fff8df}
.product-badge[data-tag="热卖"]{background:#bd4938;border-color:#a83c2c}
.product-badge[data-tag="新品"]{background:#3b8050;border-color:#2d6e41}
.product-badge[data-tag="特惠"]{background:#b65e22;border-color:#a34e17}
.product-badge[data-tag="限定"]{background:#80609b;border-color:#6e4d89}
/* A slimmer frame; one soft multicolour light travels around each visible card in turn. */
.products .product,.arrival-card{border-width:1px}
.products .product::after,.arrival-card::after{display:none!important}
.card-edge-light{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);overflow:visible;pointer-events:none;z-index:2;opacity:0}
.card-edge-light rect{fill:none;stroke-width:2.5px;stroke-dasharray:20 80;stroke-linecap:round;vector-effect:non-scaling-stroke}
html[data-motion=on] .product.frame-running .card-edge-light{opacity:1}
html[data-motion=on] .product.frame-running .card-edge-light rect{animation:card-lamp-lap 4s linear 1 both}
@keyframes card-lamp-lap{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
@media(prefers-reduced-motion:reduce){.card-edge-light{display:none!important}}
/* Slow champagne-gold light, with a gentle luminous pulse. */
.card-edge-light rect{stroke-width:2.5px;stroke-dasharray:26 74;filter:drop-shadow(0 0 2px #e9b54e80)}
html[data-motion=on] .product.frame-running .card-edge-light{animation:gold-edge-glimmer 8.5s ease-in-out 1 both}
html[data-motion=on] .product.frame-running .card-edge-light rect{animation:card-lamp-lap 8.5s linear 1 both}
@keyframes gold-edge-glimmer{0%{opacity:0}10%{opacity:.72}23%{opacity:1}36%{opacity:.62}50%{opacity:1}64%{opacity:.68}78%{opacity:1}91%{opacity:.78}100%{opacity:0}}
/* Pale champagne highlights, with restrained glow and a gentle shimmer. */
.products .product,.arrival-card{border-color:#c9a579}
.card-edge-light rect{stroke-width:2px;filter:drop-shadow(0 0 1px #decaa43d)}
@keyframes gold-edge-glimmer{0%{opacity:0}10%{opacity:.45}23%{opacity:.72}36%{opacity:.5}50%{opacity:.78}64%{opacity:.52}78%{opacity:.72}91%{opacity:.46}100%{opacity:0}}