/* lelo.tudio — site styles. Approved v2 look (10 Nov 2026): white, black type, lots of space.
   Reference: dalmoto.com/en/projects/sistermoon. One display face (Poppin), one UI stack. */

@font-face{font-family:"Poppin";src:url(../fonts/poppin.woff2) format("woff2"),url(../fonts/poppin.woff) format("woff");font-display:block}
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url(../fonts/inter-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-weight:500;font-display:swap;src:url(../fonts/inter-latin-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Sans Thai";font-weight:400;font-display:swap;src:url(../fonts/noto-sans-thai-400.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Noto Sans Thai";font-weight:500;font-display:swap;src:url(../fonts/noto-sans-thai-500.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}

:root{
  --bg:#fff;--fg:#0a0a0a;
  --dim:#767676;            /* was #8a8a8a in the prototype (3.4:1); #767676 = 4.5:1 on white */
  --hair:#e4e4e4;--soft:#f2f2f2;
  --ui:"Helvetica Neue",Helvetica,Inter,Arial,sans-serif;
  --ui-th:"Helvetica Neue",Helvetica,Inter,"Noto Sans Thai",Arial,sans-serif;
  --display:"Poppin",cursive;
  --ease:cubic-bezier(.7,0,.2,1);--out:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--fg);font-family:var(--ui);-webkit-font-smoothing:antialiased}
img{max-width:100%}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.skip{position:fixed;z-index:100;left:12px;top:-60px;background:var(--fg);color:#fff;padding:10px 14px;font-size:13px;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}

/* ---------- 3D mode: the page is a fixed stage ---------- */
html.gl,html.gl body{overflow:hidden;touch-action:none}
canvas.stage{position:fixed;inset:0;display:block;touch-action:none}
.ui{position:fixed;z-index:5}
.top{top:0;left:0;right:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:22px 32px;pointer-events:none}
.top .l,.top .r{font-size:12px;color:var(--dim)}.top .r{text-align:right}
.logo{line-height:0;color:var(--fg)}.lg{display:block;height:22px;width:auto}
.top .logo{pointer-events:auto}
#load .lg{height:34px}.sh-top .lg{height:20px}
.info{left:0;right:0;bottom:126px;text-align:center;pointer-events:none;padding:0 16px}
.bigname{position:fixed;z-index:4;left:0;top:0;text-align:center;font-family:var(--display);font-weight:400;line-height:.95;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35),0 4px 30px rgba(0,0,0,.45);pointer-events:none;will-change:transform;transform:translate(-50%,-50%)}
.bigname .in{display:block;transition:opacity .4s,transform .5s var(--out)}.bigname.out .in{opacity:0;transform:translateY(10px)}
.price{font-size:14px;font-weight:500;font-variant-numeric:tabular-nums}.price em{font-style:normal}.price span{color:var(--dim);margin-left:8px}
.meta{margin-top:4px;font-size:14px;font-weight:500;color:var(--dim)}
.idx{position:fixed;left:32px;top:50%;transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.idx b{color:var(--fg);font-weight:500}
.nav{width:34px;height:34px;border-radius:50%;border:0;background:var(--soft);color:var(--fg);font:400 15px/1 var(--ui);cursor:pointer;transition:background .2s,color .2s;-webkit-tap-highlight-color:transparent;position:relative}
.nav::after{content:"";position:absolute;inset:-5px}  /* 44px tap target, 34px visual */
.nav:hover,.nav:active{background:var(--fg);color:#fff}.nav:disabled{opacity:.3;pointer-events:none}
.swipe{display:none}
.swap{transition:opacity .4s,transform .5s var(--out)}.out{opacity:0;transform:translateY(8px)}
.doors{left:0;right:0;bottom:36px;display:flex;justify-content:center;padding:0 16px}
.seg{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px}
.cta{position:relative;overflow:hidden;z-index:0;width:300px;padding:17px 22px;border:1px solid var(--fg);background:#fff;color:#fff;font:500 14px/1 var(--ui);letter-spacing:.01em;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .45s var(--ease)}
.cta::before{content:"";position:absolute;inset:0;background:var(--fg);transform-origin:top;transition:transform .45s var(--ease);z-index:-1}
.cta:hover,.cta:focus-visible{color:var(--fg)}.cta:hover::before,.cta:focus-visible::before{transform:scaleY(0)}
.cta:focus-visible{outline-offset:4px}
.contact{border:0;background:none;padding:8px 10px;min-height:40px;font:500 13px var(--ui);color:var(--fg);text-decoration:underline;text-underline-offset:4px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.contact:hover{text-decoration-thickness:2px}
.chev{right:32px;top:50%;transform:translateY(-50%);width:34px;pointer-events:none;animation:bob 2.4s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(-5px)}}
@keyframes bob{50%{transform:translateY(calc(-50% + 6px))}}
#load{position:fixed;inset:0;z-index:20;background:#fff;display:flex;align-items:center;justify-content:center;transition:opacity .8s}
#load .bar{position:absolute;left:0;bottom:0;height:2px;background:var(--fg);width:0;transition:width .3s}
html:not(.gl) #load,html:not(.gl) .gl-only{display:none!important}

@media(max-width:760px){
  .top{padding:18px}.top .l,.top .r{font-size:11px}.top .lg{height:18px}
  .info{bottom:176px}.doors{bottom:10px}.seg{width:100%}.cta{width:100%}
  .idx{left:50%;right:auto;top:70px;transform:translateX(-50%);flex-direction:row;gap:16px}
  .swipe{display:block;left:0;right:0;top:118px;text-align:center;font-size:12px;color:var(--dim);pointer-events:none;transition:opacity .6s;animation:nudge 1.8s ease-in-out infinite}
  .swipe::before{content:"↑ "}
  .swipe.gone{opacity:0}.chev{display:none}
}

/* ---------- fallback list (no WebGL / no script / search engines) ---------- */
.list{display:none}
html:not(.gl) .list{display:block}
html:not(.gl) .top{position:sticky;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.list ol{list-style:none;max-width:560px;margin:0 auto;padding:24px 16px 40px}
.piece{padding:40px 0 56px;text-align:center}
.piece+.piece{border-top:1px solid var(--hair)}
.piece a.ph{position:relative;display:block;aspect-ratio:4/5;background:#f4f4f4;overflow:hidden;color:inherit}
.piece a.ph img{display:block;width:100%;height:100%;object-fit:cover}
.piece h2{position:absolute;left:9%;right:9%;top:50%;transform:translateY(-50%);font:400 clamp(44px,13vw,84px)/.95 var(--display);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35),0 4px 30px rgba(0,0,0,.45)}
.piece .n{display:block;margin:0 0 14px;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.piece .price{margin-top:14px}
.piece .more{display:inline-block;margin-top:18px;padding:15px 22px;width:100%;max-width:300px;background:var(--fg);color:#fff;font:500 14px/1 var(--ui);text-decoration:none}
.list .contact-links{max-width:560px;margin:0 auto;padding:8px 16px 64px;text-align:center;font-size:13px;color:var(--dim)}
.list .contact-links a{color:var(--fg);text-underline-offset:4px;margin:0 6px}

/* ---------- detail sheet ---------- */
.sheet{position:fixed;inset:0;z-index:30;background:#fff;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain;transform:translateY(100%);transition:transform .6s var(--ease),visibility 0s .6s;visibility:hidden}
.sheet.open{transform:none;visibility:visible;transition:transform .6s var(--ease),visibility 0s}
.sh-top{position:sticky;top:0;z-index:2;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px 32px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.back{justify-self:start;border:0;background:none;min-height:40px;font:400 12px var(--ui);color:var(--dim);cursor:pointer;letter-spacing:.02em}
.back:hover{color:var(--fg)}
.sh-r{justify-self:end;display:flex;align-items:center;gap:14px}
.x{width:40px;height:40px;border-radius:50%;border:0;background:var(--soft);font-size:18px;cursor:pointer;color:var(--fg);transition:background .2s,color .2s}
.x:hover{background:var(--fg);color:#fff}
.lang{display:flex;border:1px solid var(--fg)}
.lang button{border:0;background:#fff;color:var(--fg);font:500 12px/1 var(--ui-th);letter-spacing:.06em;padding:9px 11px;min-height:34px;cursor:pointer;transition:background .2s,color .2s;-webkit-tap-highlight-color:transparent}
.lang button[aria-pressed="true"]{background:var(--fg);color:#fff}
.sh{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;max-width:1180px;margin:0 auto;padding:24px 32px 80px}
.media{display:flex;flex-direction:column;gap:12px;position:sticky;top:84px;align-self:start}
.big{width:100%;max-width:420px;margin:0 auto;aspect-ratio:4/5;max-height:72vh;object-fit:cover;display:block;background:#f4f4f4}
.thumbs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;justify-content:center;padding:3px}
.thumbs::-webkit-scrollbar{display:none}
.thumbs button{flex:none;width:68px;height:84px;border:0;padding:0;background:#eee;cursor:pointer;opacity:.55;transition:opacity .2s;outline-offset:2px}
.thumbs button:hover{opacity:.85}
.thumbs button[aria-current="true"]{opacity:1;outline:1.5px solid var(--fg)}
.thumbs img{display:block;width:100%;height:100%;object-fit:cover}
.tclipa{position:relative;flex:none;width:68px;height:84px;display:block;overflow:hidden}
.tclipa img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.5)}
.tclipa span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#fff;font-size:16px}
.tclipa small{font-size:10px;letter-spacing:.04em}
.watch{display:flex;align-items:center;justify-content:center;gap:10px;align-self:center;padding:10px 4px;font-size:13px;color:var(--fg);text-decoration:underline;text-underline-offset:4px}
.watch .pl{width:28px;height:28px;border-radius:50%;background:var(--fg);color:#fff;display:grid;place-items:center;font-size:10px;padding-left:2px}
.info2 .cat{font-size:12px;color:var(--dim);letter-spacing:.04em}
.info2 .h1{font:400 clamp(44px,5.4vw,76px)/.95 var(--display);margin:10px 0 20px}
.desc p{font-size:15px;line-height:1.6;color:#2a2a2a;margin-bottom:8px;max-width:52ch}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;margin:22px 0 4px;font-size:13px}
.facts dt{color:var(--dim)}.facts dd{color:#1a1a1a}
.lbl{font-size:12px;color:var(--dim);margin:28px 0 10px;letter-spacing:.04em}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{border:1px solid var(--hair);background:#fff;padding:10px 14px;min-height:44px;font:400 13px var(--ui);cursor:pointer;color:var(--fg);transition:border-color .2s,background .2s,color .2s}
.chips button:hover{border-color:#bdbdbd}
.chips button[aria-pressed="true"]{background:var(--fg);color:#fff;border-color:var(--fg)}
.pick,.methods{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.methods{margin-top:12px}
.opt{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1px solid var(--hair);cursor:pointer;transition:border-color .2s;text-align:left;background:#fff;font:inherit;color:inherit}
.opt:hover{border-color:#bdbdbd}
.opt[aria-checked="true"]{border-color:var(--fg)}
.opt .box{flex:none;width:20px;height:20px;border:1.5px solid var(--fg);display:grid;place-items:center;margin-top:1px}
.opt[aria-checked="true"] .box{background:var(--fg)}
.opt[aria-checked="true"] .box::after{content:"";width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.opt b{display:block;font-size:14px;font-weight:500}
.opt small{display:block;margin-top:4px;font-size:12px;color:var(--dim)}
.methods .opt[disabled]{opacity:.4;cursor:not-allowed}
.panel{margin-top:22px}
.bigprice{font-size:26px;font-weight:500;font-variant-numeric:tabular-nums}
.bigprice em{font-style:normal}.bigprice small{font-size:inherit;font-weight:inherit;color:var(--dim);margin-left:10px}
.notes{list-style:none;margin:16px 0;font-size:13px;line-height:1.55;color:#3a3a3a}
.notes li{padding:9px 0;border-top:1px solid var(--hair)}
.notes li:last-child{border-bottom:1px solid var(--hair)}
.notes a,.note a{color:inherit;text-underline-offset:3px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:6px;flex:1;min-width:150px}
.field>span{font-size:12px;color:var(--dim)}
select,.qty{height:46px;border:1px solid var(--hair);background:#fff;font:400 14px var(--ui);color:var(--fg);padding:0 12px;border-radius:0;-webkit-appearance:none;appearance:none}
select{background-image:linear-gradient(45deg,transparent 50%,var(--fg) 50%),linear-gradient(135deg,var(--fg) 50%,transparent 50%);background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px}
select:focus-visible{outline:1px solid var(--fg);outline-offset:-2px;border-color:var(--fg)}
.qty{display:flex;align-items:center;padding:0;width:132px}
.qty button{width:44px;height:100%;border:0;background:none;font-size:18px;cursor:pointer;color:var(--fg)}
.qty output{flex:1;text-align:center;font-variant-numeric:tabular-nums}
.lines{list-style:none;margin:18px 0 0;font-size:14px}
.lines li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--hair);font-variant-numeric:tabular-nums}
.lines li.sub{border-top:0;padding-top:0;font-size:12px;color:var(--dim)}
.total{display:flex;justify-content:space-between;padding:14px 0;border-top:1.5px solid var(--fg);border-bottom:1px solid var(--hair);font-size:18px;font-weight:500;font-variant-numeric:tabular-nums}
.note{font-size:12px;line-height:1.55;color:var(--dim);margin-top:12px}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 20px;border:1px solid var(--fg);background:#fff;color:var(--fg);font:500 13px var(--ui);text-decoration:none;cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:var(--fg);color:#fff}
.btn.solid{background:var(--fg);color:#fff}.btn.solid:hover{background:#fff;color:var(--fg)}
.copied{font-size:12px;color:var(--dim);margin-top:8px;min-height:1em}
.sheet[lang="th"] :is(p,li,dd,dt,span,small,b,button,a,select,option,output,label,div):not(.lg *){font-family:var(--ui-th)}
.sheet[lang="th"] .desc p,.sheet[lang="th"] .notes,.sheet[lang="th"] .note{line-height:1.75}
@media(max-width:860px){
  .sh{grid-template-columns:1fr;gap:28px;padding:8px 16px 64px}
  .media{position:static}
  .sh-top{padding:14px 16px}
  .big{max-height:64vh}
  .pick,.methods{grid-template-columns:1fr}
  .btn{flex:1 1 100%}
}
@media(max-width:760px){.sh-r{gap:8px}.lang button{padding:8px 9px}.sh-top .lg{height:16px}}

/* ---------- contact pop-up ---------- */
.pop{position:fixed;inset:0;z-index:45;background:rgba(10,10,10,.35);display:flex;align-items:center;justify-content:center;padding:16px;touch-action:manipulation;animation:popbg .25s ease}
.pop-card{position:relative;width:100%;max-width:400px;background:#fff;padding:28px 24px 24px;animation:popin .35s var(--out)}
.pop-card h2{font:400 40px/1 var(--display);margin-bottom:10px}
.pop-card p{font-size:13px;line-height:1.5;color:var(--dim);margin-bottom:20px}
.pop-x{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:0;background:var(--soft);font-size:15px;cursor:pointer;color:var(--fg)}
.pop-x:hover{background:var(--fg);color:#fff}
.pop-o{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--fg);color:var(--fg);text-decoration:none;margin-top:10px;transition:background .2s,color .2s}
.pop-o:hover{background:var(--fg);color:#fff}
.pop-o .ic{flex:none;width:40px;height:40px;border-radius:50%;background:var(--fg);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:700;letter-spacing:.04em;transition:background .2s,color .2s}
.pop-o:hover .ic{background:#fff;color:var(--fg)}
.pop-o b{display:block;font-size:14px;font-weight:500}.pop-o small{display:block;font-size:12px;color:var(--dim);margin-top:2px}
.pop-o:hover small{color:#cfcfcf}
.pop-o>span:nth-child(2){flex:1}.pop-o .ar{font-size:15px}
@keyframes popin{from{opacity:0;transform:translateY(16px)}}@keyframes popbg{from{opacity:0}}
@media(max-width:760px){.pop{align-items:flex-end;padding:0}.pop-card{max-width:none;padding:26px 16px calc(20px + env(safe-area-inset-bottom,0px))}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}