/* Motion responds to browsing; the visitor can pause every decorative effect. */
:root{--fx-shadow:rgba(29,68,59,.16);--fx-clear:rgba(255,255,255,.75);--fx-blush:rgba(248,222,212,.75)}
.reading-progress{position:fixed;inset:0 auto auto 0;height:3px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left;z-index:90;pointer-events:none}
.hero{overflow:hidden}.hero>div{position:relative;z-index:2}.hero:before{content:'';position:absolute;right:-85px;top:-95px;width:290px;height:290px;border:35px solid var(--fx-clear);border-radius:50%;pointer-events:none;animation:orbit-breathe 9s ease-in-out infinite}.hero:after{width:250px;height:250px;right:19%;bottom:-140px;border:25px solid var(--fx-blush);animation:orbit-breathe 11s ease-in-out infinite reverse}.hero-images figure{animation:gentle-float 7s ease-in-out infinite;transform-origin:center}.hero-images figure:nth-child(2){animation-delay:-2s;animation-duration:8s}.hero-images figure:nth-child(3){animation-delay:-4s;animation-duration:9s}.hero-images figure:nth-child(4){animation-delay:-1s;animation-duration:7.5s}.hero-images:hover figure{animation-play-state:paused}.hero .eyebrow{animation:hello-in .7s ease-out both}.hero h1{animation:hello-in .85s .08s ease-out both}.hero .intro,.hero .actions{animation:hello-in .8s .16s ease-out both}
@keyframes gentle-float{0%,100%{translate:0 0}50%{translate:0 -9px}}@keyframes orbit-breathe{0%,100%{scale:1;translate:0 0}50%{scale:1.07;translate:-12px 8px}}@keyframes hello-in{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
.section.fx-enter{opacity:0;translate:0 23px;transition:opacity .65s ease,translate .65s cubic-bezier(.2,.7,.2,1)}.section.fx-enter.is-visible{opacity:1;translate:0 0}.product{position:relative;min-width:0}.product-visual{display:block;width:100%;font:inherit;color:inherit;text-align:left;cursor:zoom-in;border:0;transition:box-shadow .3s,transform .3s;background:var(--peach)}.product-visual:after{content:'ดูภาพใหญ่ +';position:absolute;bottom:12px;right:12px;border-radius:30px;background:var(--paper);padding:5px 12px;font-size:11px;opacity:0;translate:0 5px;transition:opacity .2s,translate .2s}.product-visual:hover:after,.product-visual:focus-visible:after{opacity:1;translate:0 0}.product-visual:hover{box-shadow:0 16px 26px -15px var(--fx-shadow)}.product-visual img{pointer-events:none}.product-visual:focus-visible{outline:3px solid var(--ring);outline-offset:4px}.price-row a,.btn,.phone{transition:translate .2s,box-shadow .2s,background .2s}.price-row a:hover,.btn:hover,.phone:hover{translate:0 -3px}.price-row a:active,.btn:active,.phone:active{translate:0 0}.articles article{transition:translate .25s,box-shadow .25s}.articles article:hover{translate:0 -5px;box-shadow:0 15px 25px -20px var(--fx-shadow)}.photo-credits[open]{animation:hello-in .25s ease-out}
.floating-tools{position:fixed;right:22px;bottom:24px;z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:9px}.floating-tools button,.floating-tools a{font-family:var(--font);font-size:12px;border:1px solid var(--line);border-radius:100px;min-height:44px;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;cursor:pointer;background:var(--paper);color:var(--ink);box-shadow:0 5px 15px var(--shade)}.floating-tools .chat-shop{background:var(--ink);color:var(--white);border-color:var(--ink)}.floating-tools svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}.floating-tools .back-top{width:44px;padding:10px;opacity:0;visibility:hidden;translate:0 8px;transition:opacity .2s,translate .2s}.floating-tools .back-top.show{opacity:1;visibility:visible;translate:0 0}
.photo-dialog{padding:0;border:0;border-radius:20px;width:min(720px,calc(100% - 32px));max-height:90dvh;background:var(--paper);color:var(--ink);overflow:auto;box-shadow:0 20px 90px var(--fx-shadow)}.photo-dialog::backdrop{background:rgba(19,41,33,.66);backdrop-filter:blur(5px)}.photo-dialog[open]{animation:dialog-in .22s ease-out}.dialog-top{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 24px;background:var(--paper);z-index:2;border-bottom:1px solid var(--line)}.dialog-top h2{margin:0;font-size:23px;letter-spacing:0}.dialog-close{min-width:44px;min-height:44px;cursor:pointer;border:1px solid var(--line);border-radius:50%;background:var(--white);color:var(--ink);font-size:25px}.dialog-photo{display:block;width:100%;height:min(52dvh,460px);object-fit:contain;background:var(--white);padding:20px}.dialog-info{padding:20px 24px 26px}.dialog-info p{margin:0 0 15px;font-size:13px;color:var(--muted)}.dialog-info strong{display:block;font-size:25px;margin-bottom:15px;font-weight:600}.dialog-info .btn{font-size:13px}@keyframes dialog-in{from{opacity:0;scale:.97;translate:0 8px}to{opacity:1;scale:1;translate:0 0}}
html.motion-paused *,html.motion-paused *:before,html.motion-paused *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}html.motion-paused .fx-enter{opacity:1;translate:none}.photo-dialog:focus{outline:none}
@media(hover:hover) and (pointer:fine){.product-visual{transform:perspective(800px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}.product-visual:hover img{transform:scale(1.06)}}
@media(max-width:600px){.floating-tools{right:12px;bottom:max(12px,env(safe-area-inset-bottom));gap:7px}.floating-tools button,.floating-tools a{font-size:10px;padding:10px 12px}.floating-tools .chat-shop{font-size:11px}.product-visual:after{content:'+';opacity:1;translate:none;padding:0;display:grid;place-items:center;width:25px;height:25px;bottom:8px;right:8px;font-size:17px}.hero:before{width:170px;height:170px;border-width:20px;right:-75px;top:-50px}.dialog-top{padding:14px 17px}.dialog-top h2{font-size:19px}.dialog-info{padding:18px}.dialog-photo{height:40dvh}footer{padding-bottom:90px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.section.fx-enter{opacity:1;translate:none}.product-visual{transform:none!important}}