/* نوا — porcelain pink, plum ink, mauve. Markazi (Persian serif) display, Instrument Serif wordmark, Vazirmatn UI. */
:root{--bg:#F7EEF2;--card:#FFFFFF;--ink:#3B1730;--ink2:#7A5A6E;--mauve:#9D4E7C;--sage:#8FA98B;--line:#EAD7E0;--r:22px}
body{background:var(--bg);color:var(--ink);font:400 16px/1.85 "Vazirmatn",system-ui,sans-serif}
h1,h2,h3{font-family:"Markazi","Vazirmatn",serif;font-weight:700;margin:0;line-height:1.2}
.nbtn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.75rem 1.4rem;border-radius:999px;border:0;background:var(--ink);color:#fff;font-weight:800}
.nbtn:disabled{opacity:.4;cursor:not-allowed}
.nbtn--block{width:100%}
.nlink{border:0;background:none;color:var(--ink2);font-weight:700;text-decoration:underline;text-underline-offset:4px}

.nh{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1.5rem;padding:.8rem max(1.2rem,calc(50% - 590px));background:rgb(247 238 242/.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nh__logo{display:grid;text-decoration:none;color:var(--ink);line-height:1}
.nh__logo span{font:italic 2rem/1 "Instrument Serif",serif}
.nh__logo small{font-size:.7rem;color:var(--ink2);margin-top:.15rem}
.nh__nav{display:flex;gap:1.1rem;margin-inline-start:1rem}
.nh__nav a{text-decoration:none;color:var(--ink2);font-weight:700}
.nh__cart{margin-inline-start:auto;position:relative;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;display:grid;place-items:center}
.nh__cart svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linejoin:round}
.nh__cart b{position:absolute;top:-4px;inset-inline-end:-4px;min-width:22px;height:22px;border-radius:999px;background:var(--mauve);color:#fff;font-size:.75rem;display:grid;place-items:center;padding:0 5px}
.nh__cart.bump{animation:bump .45s cubic-bezier(.3,1.7,.5,1)}
@keyframes bump{40%{transform:scale(1.18)}}
@media (max-width:700px){.nh__nav{display:none}}

main{max-width:1180px;margin:auto;padding:0 1.2rem}
.nhero{display:grid;grid-template-columns:.9fr 1.1fr;gap:2rem;align-items:center;padding:2.5rem 0}
.nhero__k{display:inline-block;margin:0 0 .8rem;padding:.2rem .8rem;border-radius:999px;background:var(--sage);color:#fff;font-weight:800;font-size:.8rem}
.nhero h1{font-size:clamp(2.8rem,1.6rem + 4.2vw,5rem)}
.nhero h1 span{display:block;font-size:.55em;color:var(--mauve);font-weight:500}
.nhero__p{color:var(--ink2);max-width:30rem;font-size:1.05rem}
.swatches{display:flex;gap:.6rem;margin:1.2rem 0}
.swatches button{width:34px;height:34px;border-radius:50%;border:3px solid #fff;background:var(--c);box-shadow:0 0 0 1.5px var(--line)}
.swatches button[aria-checked="true"]{box-shadow:0 0 0 2.5px var(--ink)}
.nhero__buy{display:flex;align-items:center;gap:1.2rem}
.nhero__buy b{font:700 2.2rem/1 "Markazi",serif}
.nhero__buy small{font:500 .9rem "Vazirmatn",sans-serif;color:var(--ink2)}
.stage{position:relative;aspect-ratio:1/1.05;border-radius:50% 50% var(--r) var(--r)/40% 40% var(--r) var(--r);background:radial-gradient(circle at 50% 38%,#fff,#F0DCE5 60%,#E7CCD8);overflow:hidden;touch-action:pan-y;cursor:grab}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s}
.stage.is-3d canvas{opacity:1}
.stage__poster{position:absolute;inset:12% 18% 8%;transition:opacity .5s}
.stage.is-3d .stage__poster{opacity:0}
.stage__hint{position:absolute;bottom:1rem;inset-inline:0;text-align:center;margin:0;font-size:.8rem;font-weight:700;color:var(--ink2);transition:opacity .4s}
.stage__hint.is-gone{opacity:0}
@media (max-width:820px){.nhero{grid-template-columns:1fr}.stage{max-width:460px;width:100%;justify-self:center;order:-1}}

.shop{padding:2rem 0 3rem}
.shop__head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.shop__head h2{font-size:2.6rem}
.nsearch input{padding:.65rem 1.1rem;border-radius:999px;border:1.5px solid var(--line);background:#fff;min-width:min(300px,80vw)}
.filters{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:flex-end;margin:1.2rem 0 .6rem;padding:1rem;border-radius:var(--r);background:#fff;border:1px solid var(--line)}
.cats{display:flex;gap:.3rem;margin-inline-end:auto}
.cats button{border:0;padding:.5rem 1rem;border-radius:999px;background:transparent;font-weight:800;color:var(--ink2)}
.cats button[aria-selected="true"]{background:var(--ink);color:#fff}
.fsel{display:grid;gap:.15rem;font-size:.78rem;font-weight:700;color:var(--ink2)}
.fsel select{padding:.45rem .7rem;border-radius:12px;border:1.5px solid var(--line);background:#fff}
.fsel input[type=range]{accent-color:var(--mauve);width:180px}
.count{color:var(--ink2);font-size:.9rem;margin:.6rem 0}
.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.card{background:var(--card);border-radius:var(--r);overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column}
.card__art{border:0;padding:0;aspect-ratio:1;background:radial-gradient(circle at 50% 40%,#fff,color-mix(in srgb,var(--t) 22%,#F7EEF2));display:grid;place-items:center;cursor:zoom-in}
.card__art svg{width:78%;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.card:hover .card__art svg{transform:translateY(-6px) rotate(-3deg)}
.card__b{padding:.9rem 1rem 1rem;display:flex;flex-direction:column;gap:.15rem;flex:1}
.card__c{font-size:.72rem;font-weight:800;color:var(--mauve)}
.card h3{font-size:1.35rem}
.card__r{margin:0;font-size:.8rem;color:#B07A2A;font-weight:700}
.card__r span{color:var(--ink2);font-weight:500}
.card__f{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:.4rem}
.card__f b{font-size:1rem}
.add{width:38px;height:38px;border-radius:50%;border:0;background:var(--ink);color:#fff;font-size:1.3rem;line-height:1}
@media (max-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.grid{grid-template-columns:repeat(2,1fr);gap:.6rem}.card h3{font-size:1.1rem}}
::view-transition-group(*){animation-duration:.35s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}

.promise{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding:1rem 0 4rem}
.promise div{display:grid;padding:1.2rem;border-radius:var(--r);background:#fff;border:1px solid var(--line)}
.promise span{color:var(--ink2);font-size:.9rem}
@media (max-width:700px){.promise{grid-template-columns:1fr}}
.nf{text-align:center;color:var(--ink2);padding:1.5rem 1rem 6rem;border-top:1px solid var(--line);font-size:.9rem}
.nf span{font:italic 1.3rem "Instrument Serif",serif;color:var(--ink)}

.qv{border:0;padding:0;border-radius:28px;max-width:min(860px,94vw);width:100%;background:var(--card);color:var(--ink)}
.qv::backdrop{background:rgb(59 23 48/.45);backdrop-filter:blur(4px)}
.qv__in{display:grid;grid-template-columns:1fr 1fr}
.qv__art{background:radial-gradient(circle at 50% 40%,#fff,color-mix(in srgb,var(--t) 26%,#F7EEF2));display:grid;place-items:center;min-height:360px}
.qv__art svg{width:80%}
.qv__body{padding:1.6rem;display:flex;flex-direction:column;gap:.5rem}
.qv__cat{margin:0;color:var(--mauve);font-weight:800;font-size:.8rem}
.qv h3{font-size:2rem}
.qv__rate{margin:0;color:#B07A2A;font-weight:700;font-size:.9rem}
.qv__body p{margin:0;color:var(--ink2)}
.qv__sizes{display:flex;gap:.4rem;margin:.4rem 0}
.qv__sizes label{position:relative}.qv__sizes input{position:absolute;opacity:0;inset:0}
.qv__sizes span{display:inline-block;padding:.35rem .8rem;border-radius:12px;border:1.5px solid var(--line);font-weight:700;font-size:.85rem;cursor:pointer}
.qv__sizes input:checked+span{border-color:var(--ink);background:var(--ink);color:#fff}
.qv__row{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:1rem}
.qv__row b{font:700 1.6rem "Markazi",serif}
@media (max-width:700px){.qv__in{grid-template-columns:1fr}.qv__art{min-height:220px}}

.drawer{position:fixed;inset-block:0;inset-inline-end:0;z-index:50;width:min(420px,100vw);background:var(--card);box-shadow:0 0 60px rgb(59 23 48/.25);transform:translateX(-105%);transition:transform .4s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column}
.drawer.is-open{transform:none}
.drawer__h{display:flex;justify-content:space-between;align-items:center;padding:1.1rem 1.2rem;border-bottom:1px solid var(--line)}
.drawer__h h3{font-size:1.8rem}
.ship{padding:.9rem 1.2rem}
.ship p{margin:0 0 .4rem;font-size:.85rem;font-weight:700;color:var(--ink2)}
.ship__bar{height:6px;border-radius:9px;background:var(--line);overflow:hidden}
.ship__bar i{display:block;height:100%;background:var(--sage);transition:width .4s}
.lines{list-style:none;margin:0;padding:0 1.2rem;overflow:auto;flex:1}
.lines li{display:grid;grid-template-columns:64px 1fr auto;gap:.8rem;align-items:center;padding:.8rem 0;border-bottom:1px solid var(--line)}
.lines__art{display:grid;place-items:center;width:64px;height:64px;border-radius:16px;background:color-mix(in srgb,var(--t) 22%,#F7EEF2)}
.lines li small{display:block;color:var(--ink2);font-size:.75rem}
.qty{display:inline-flex;align-items:center;gap:.4rem;margin-top:.3rem}
.qty button{width:26px;height:26px;border-radius:8px;border:1.5px solid var(--line);background:#fff;line-height:1}
.empty{padding:2rem 1.2rem;color:var(--ink2);text-align:center}
.drawer__f{padding:1rem 1.2rem 5rem;border-top:1px solid var(--line);display:grid;gap:.8rem}
.sum{display:flex;justify-content:space-between;font-size:1.05rem}
.scrim{position:fixed;inset:0;z-index:45;background:rgb(59 23 48/.35)}

.co{border:0;border-radius:24px;padding:0;max-width:min(520px,94vw);width:100%;color:var(--ink)}
.co::backdrop{background:rgb(59 23 48/.45)}
.co__in,.co__done{padding:1.5rem;display:grid;gap:.8rem}
.co h3{font-size:2rem}
.co__steps{list-style:none;display:flex;gap:.3rem;padding:0;margin:0}
.co__steps li{flex:1;padding-top:.4rem;border-top:4px solid var(--line);font-size:.8rem;font-weight:800;color:var(--ink2)}
.co__steps li.on{border-color:var(--mauve);color:var(--ink)}
.co fieldset{border:0;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.co label:not(.ship-opt){display:grid;gap:.15rem;font-size:.82rem;font-weight:700;color:var(--ink2)}
.co label.wide{grid-column:span 2}
.co input,.co textarea{padding:.6rem .8rem;border-radius:12px;border:1.5px solid var(--line);font-size:1rem;color:var(--ink)}
.ship-opt{grid-column:span 2;display:flex;align-items:center;gap:.7rem;padding:.8rem;border-radius:14px;border:1.5px solid var(--line);cursor:pointer}
.ship-opt span{flex:1;display:grid}.ship-opt small{color:var(--ink2)}.ship-opt em{font-style:normal;font-weight:800}
.pay{grid-column:span 2;padding:1rem;border-radius:14px;background:var(--bg)}
.pay p{margin:.3rem 0 0;color:var(--ink2);font-size:.9rem}
.co__nav{display:flex;justify-content:space-between}.co__nav .nbtn{margin-inline-start:auto}
.co__err{margin:0;color:#B42318;font-weight:700;min-height:1.4em}
.toast{position:fixed;top:1rem;left:50%;z-index:70;transform:translate(-50%,calc(-100% - 2rem));padding:.7rem 1.2rem;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;transition:transform .35s cubic-bezier(.2,.8,.2,1);max-width:92vw}
.toast.is-on{transform:translate(-50%,0)}