/* Cut & Glow public app - premium UI. Tokens live in theme.css (dark graphite / light porcelain). */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.5;font-size:16px;-webkit-font-smoothing:antialiased;font-feature-settings:"tnum"}
body{min-height:100vh;padding-bottom:calc(92px + env(safe-area-inset-bottom))}
[dir=rtl] body{font-family:"Segoe UI",Tahoma,"Noto Naskh Arabic",system-ui,sans-serif}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
a{color:inherit}
.boot{text-align:center;padding:30vh 0;font-size:40px}
.wrap{max-width:760px;margin:0 auto;padding:0 20px}
.serif,h1,h2,h3{font-family:var(--serif);font-weight:400}

/* ---- header */
.top{position:sticky;top:0;z-index:20;background:var(--topbg);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:8px;height:68px}
.logo{font-size:24px;color:var(--ink);flex:1;min-width:0}
.logo span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill{height:46px;min-width:46px;padding:0 14px;border:1px solid var(--line);background:transparent;border-radius:var(--r);font-size:16px;font-weight:500;display:inline-grid;place-items:center;color:var(--ink)}
.pill.theme{font-size:19px}
.searchbar{border-bottom:1px solid var(--line);background:var(--bg)}
.searchbar .wrap{padding-top:12px;padding-bottom:12px}
.searchbar input{height:52px}

/* ---- buttons (sharp, 56px) */
.btns{display:flex;gap:10px;flex-wrap:wrap}
.btn{min-height:56px;padding:0 20px;border-radius:var(--r);font-weight:600;font-size:16px;letter-spacing:.2px;display:inline-flex;align-items:center;justify-content:center;gap:10px;background:transparent;color:var(--ink);border:1px solid var(--line);text-align:center;text-decoration:none;flex:1;line-height:1.2}
.btn.gold,.btn.wa{background:var(--btn);color:var(--btnx);border-color:var(--btn)}
.btn:active{opacity:.85}
.btn[disabled]{opacity:.45}
.btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.btn.big{min-height:62px;font-size:17px}

/* ---- shop hero */
.hero{position:relative;margin:0 -20px;min-height:370px;padding:28px 20px 22px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;color:#F2EFE9;background:radial-gradient(ellipse at 78% 30%,var(--hero1) 0%,#202124 46%,var(--hero2) 100%)}
.hero .art{position:absolute;right:10px;top:16px;opacity:.9;filter:drop-shadow(0 0 28px rgba(220,190,120,.35))}
.hero .art svg{width:116px;height:116px}
.hero h1{font-size:34px;line-height:1.12;margin:0;max-width:330px;position:relative}
.hero p{font-size:15.5px;line-height:1.5;color:#C9C6BE;margin:10px 0 20px;max-width:330px;position:relative}
.hero .btns{position:relative}
.hero .btn{background:#F2EFE9;color:#15171A;border-color:#F2EFE9}
.hero .btn.ln{background:transparent;color:#F2EFE9;border-color:rgba(242,239,233,.55)}
.sec{font-size:23px;margin:30px 0 14px;display:flex;align-items:baseline;gap:10px}
.sec small{margin-inline-start:auto;font:500 14px var(--sans);color:var(--goldtx)}
.hl{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:2px 20px 4px}
.hl::-webkit-scrollbar{display:none}
.hl button{flex:none;width:128px;height:160px;border:1px solid var(--line);background:var(--card);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;text-align:start;font-family:var(--serif);font-size:17px;line-height:1.15;color:var(--ink)}
.hl button.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.hl .ring{width:auto;height:auto;padding:0;background:none;box-shadow:none;border-radius:0;max-width:none}
.hl .ring i{display:block;width:auto;height:auto;background:none;border:0;color:var(--gold);font-style:normal;overflow:visible}
.hl .ring i svg{width:42px;height:42px;stroke-width:2}
.hl .ring i .cgemo{font-size:34px}
.hl span{max-width:100%;overflow-wrap:anywhere}
.allpill{display:inline-flex;align-items:center;height:46px;padding:0 16px;border:1px solid var(--line);background:transparent;border-radius:var(--r);font-weight:500;color:var(--ink)}
.empty{text-align:center;color:var(--mute);padding:48px 12px}
.empty b{display:block;font-size:40px;font-weight:400}

/* ---- products */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px 14px;padding:4px 0}
.pcard{cursor:pointer;min-width:0}
.pcard .im{aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;position:relative;background:var(--bg2);border:1px solid var(--line)}
.pcard img{width:100%;height:100%;object-fit:cover;display:block}
.pcard .nm{font:400 17px/1.25 var(--serif);margin:10px 0 3px;color:var(--ink)}
.sb{position:absolute;left:10px;top:10px;background:var(--btn);color:var(--btnx);font:600 12px var(--sans);padding:4px 9px;border-radius:2px;z-index:2}
.st{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.6);color:#fff;font:500 11.5px var(--sans);padding:3px 8px;border-radius:2px}
.pr{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;font-size:14.5px;color:var(--mute)}
.pr b{font-weight:600;color:var(--ink);font-size:16px}.pr .sale{color:#E5484D;font-size:17px}
.pr s{color:var(--mute);font-size:13.5px}.pr em{font-style:normal;color:#E5484D;font-size:12.5px;font-weight:600}
.pr.big{margin:6px 0}.pr.big b{font-size:28px}.pr.big .sale{font-size:30px}.pr.big s{font-size:17px}.pr.big em{background:#E5484D;color:#fff;padding:3px 9px;border-radius:2px;font-size:13px}
.pt{font:400 28px/1.2 var(--serif);margin:16px 0 4px}
.savetx{color:#E5484D;font-size:13.5px;margin:0 0 8px}
.lab{font-size:13.5px;color:var(--mute);font-weight:500;margin:16px 0 8px}
.sizes{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.sz{flex:1 1 30%;min-width:96px;min-height:64px;border:1px solid var(--line);background:var(--card);border-radius:var(--r);padding:10px 6px;text-align:center;font-size:12.5px;color:var(--mute);display:flex;flex-direction:column;gap:2px;align-items:center;justify-content:center}
.sz b{font-size:16px;color:var(--ink)}.sz s{color:var(--mute);font-size:12.5px}
.sz.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.muted2{color:var(--mute);font-size:13.5px;margin:0 0 8px}
.catbar{margin:16px 0 10px}
.cover{height:170px;border-radius:var(--r);overflow:hidden;position:relative;background:var(--bg2)}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,var(--bg) 100%)}
.chead{display:flex;align-items:flex-end;gap:14px;margin:-44px 4px 10px;position:relative;z-index:2}
.chead .ring{width:84px;height:84px;flex:none;display:grid;place-items:center;background:var(--card);border:1px solid var(--gold);border-radius:var(--r);padding:0}
.chead .ring i{display:block;color:var(--gold);width:auto;height:auto;background:none;border:0;font-style:normal}
.chead .ring i svg{width:46px;height:46px;stroke-width:2}
.chead h2{margin:0 0 4px;font-size:28px;color:var(--ink)}
.chead p{margin:0;color:var(--mute);font-size:14px}
.pic{position:relative;border-radius:var(--r);overflow:hidden;background:var(--card);aspect-ratio:1;border:1px solid var(--line)}
.pic img{width:100%;height:100%;object-fit:cover}
.dots{position:absolute;bottom:10px;left:0;right:0;display:flex;gap:6px;justify-content:center}
.dots i{width:7px;height:7px;border-radius:50%;background:#fff6}.dots i.on{background:#fff}
.nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.55);border:0;color:#fff;width:44px;height:44px;border-radius:var(--r);font-size:22px}
.nav.p{left:8px}.nav.n{right:8px}
.post{border-bottom:1px solid var(--line);padding:16px 0}
.ph{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ph small{color:var(--mute);display:block}
.act{display:flex;gap:14px;padding:10px 2px 4px;align-items:center}
.act button{background:none;border:0;font-size:26px;padding:0;min-width:44px;min-height:44px}
.act .grow{flex:1}
.act .order{font-size:14px;font-weight:600;color:var(--goldtx);border:1px solid var(--gold);border-radius:var(--r);padding:0 14px;min-height:44px;font-size:14px}
.cap{margin:4px 2px;font-size:15.5px;white-space:pre-line}
.quote{margin:10px 2px 0;padding:10px 14px;border-inline-start:2px solid var(--gold);font-family:var(--serif);color:var(--goldtx);background:var(--bg2)}

/* ---- page layout blocks */
.h1{font:400 32px/1.15 var(--serif);margin:28px 0 8px}
.lead{font-size:15.5px;color:var(--mute);margin:0 0 4px}
.steps{display:flex;margin:18px 0 4px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.steps div{flex:1;padding:12px 0;font-size:13.5px;font-weight:500;color:var(--mute)}
.steps div{padding-inline-end:8px}.steps b{display:block;font:600 17px var(--sans);color:var(--goldtx);margin-bottom:2px}
.presets{display:grid;grid-template-columns:repeat(4,1fr);margin:20px 0 0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.presets button{height:58px;border:0;border-inline-end:1px solid var(--line);background:transparent;font-weight:500;font-size:16px;color:var(--ink)}
.presets button:last-child{border-inline-end:0}
.presets button.on{background:var(--btn);color:var(--btnx);font-weight:600}
.list{margin:6px 0 0}
.li{display:flex;align-items:center;gap:16px;min-height:84px;padding:10px 0;border-bottom:1px solid var(--line);background:none;border-left:0;border-right:0;border-top:0;width:100%;text-align:start;color:var(--ink);text-decoration:none}
.list>.li:first-child{border-top:1px solid var(--line)}
.li svg{width:32px;height:32px;stroke:var(--gold);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.li b{font:400 19px var(--serif);display:block}.li small{font-size:13.5px;color:var(--mute)}
.li .go{margin-inline-start:auto;color:var(--mute);font-size:26px;font-weight:300}
[dir=rtl] .li .go{transform:scaleX(-1)}

/* ---- cards and forms */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin:18px 0}
.card h2{font-size:23px;margin:0 0 10px;color:var(--ink)}
label{display:block;font-size:13.5px;color:var(--mute);margin:14px 0 6px;font-weight:500}
input,select,textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:0 14px;min-height:56px;font-size:17px}
textarea{padding:14px;min-height:110px;line-height:1.45}
input[type=checkbox],input[type=radio]{width:22px;min-height:22px;height:22px;accent-color:var(--gold)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:0;border-color:transparent}
.row{display:flex;gap:12px}.row>*{flex:1;min-width:0}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.chip{min-height:46px;border:1px solid var(--line);background:transparent;border-radius:var(--r);padding:0 16px;font-size:15px;font-weight:500;color:var(--ink)}
.chip.on{background:var(--btn);color:var(--btnx);border-color:var(--btn)}
.res{text-align:center;padding:18px;border-radius:var(--r);background:var(--bg);border:1px solid var(--gold);margin-top:16px}
.res .big{font:400 44px var(--serif);color:var(--ink)}
.res small{color:var(--mute);display:block}
.preview{display:block;margin:14px auto 0;max-height:120px}
.chat{display:flex;flex-direction:column;gap:10px;min-height:240px}
.msg{max-width:86%;padding:12px 15px;border-radius:var(--r);white-space:pre-line;font-size:15.5px}
.msg.bot{background:var(--bg);border:1px solid var(--line);align-self:flex-start}
.msg.me{background:var(--btn);color:var(--btnx);align-self:flex-end}
.ai{font-size:13px;color:var(--mute);text-align:center;margin:8px 0}
.send{display:flex;gap:10px;margin-top:12px}.send input{flex:1}.send button{width:58px;border:0;border-radius:var(--r);background:var(--btn);color:var(--btnx);font-size:22px}

/* ---- bottom tab bar: 5 big labelled tabs */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(5,1fr);background:var(--topbg);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabs button{position:relative;min-height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:none;border:0;color:var(--mute);font-size:12.5px;font-weight:500;padding:0}
.tabs button svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tabs button.on{color:var(--ink)}
.tabs button.on svg{stroke:var(--gold)}
.tabs button.on:before{content:"";position:absolute;top:-1px;left:24%;right:24%;height:2px;background:var(--gold)}
@media(min-width:900px){.wrap{max-width:1040px}.pgrid{grid-template-columns:repeat(4,1fr)}.tabs{left:50%;right:auto;transform:translateX(-50%);width:640px;border:1px solid var(--line);border-bottom:0}.hero{margin:0;border-radius:var(--r)}.hl{margin:0;padding:2px 0 4px}}

/* ---- Pictures page */
.utabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);margin:0 0 4px}
.utabs button{height:54px;background:none;border:0;font-size:16px;font-weight:500;color:var(--mute)}
.utabs button.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--gold)}
.gpics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 0}
.gpics button{aspect-ratio:1;border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:6px}
.gpics button.sel{outline:2px solid var(--gold);outline-offset:2px}
.gpics img{width:100%;height:100%;object-fit:contain}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:150px;border:1.5px dashed var(--line);border-radius:var(--r);color:var(--mute);font-weight:500;background:var(--card);text-align:center;padding:16px;cursor:pointer}
.drop svg{width:34px;height:34px;stroke:var(--gold);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.drop img{max-height:180px;border-radius:2px}
.gnote{font-size:13.5px;color:var(--mute);margin:10px 0 0}

/* ---- modals */
.modal{position:fixed;inset:0;z-index:120;background:rgba(10,11,13,.72);display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--bg);border:1px solid var(--line);border-radius:6px 6px 0 0;width:100%;max-width:580px;max-height:92vh;overflow:auto;padding:20px 20px calc(22px + env(safe-area-inset-bottom))}
.sheet h2{font-size:26px;margin:0 0 6px;color:var(--ink)}
.x{float:inline-end;background:transparent;border:1px solid var(--line);border-radius:var(--r);width:46px;height:46px;font-size:20px;line-height:1}
.ok{color:var(--ok);text-align:center}
.foot{text-align:center;color:var(--mute);font-size:12.5px;padding:34px 0 10px}
.toast{position:fixed;left:50%;bottom:112px;transform:translateX(-50%);background:var(--btn);color:var(--btnx);padding:13px 20px;border-radius:var(--r);z-index:130;font-size:15px;font-weight:500}
@media(min-width:720px){.sheet{border-radius:6px;margin-bottom:5vh}.modal{align-items:center}}
@media (min-width:700px),(max-height:700px){
  .modal{align-items:center;padding:14px}
  .modal .sheet{border-radius:6px;max-height:calc(100vh - 100px);max-height:calc(100dvh - 100px)}
}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
[dir=rtl] .hero .art{right:auto;left:10px}

.top .wrap{gap:6px;padding:0 14px}.logo{font-size:20px}.pill{height:44px;min-width:44px;padding:0 10px}.logo svg,.logo .cgmark{flex:none}