/* Patshahi · the piece: a column of plates beside a still buy panel, then the story band, then more from the drop */
.pdp{padding-block:clamp(34px,4vw,56px) clamp(80px,9vw,130px)}
.crumb{color:var(--mute);margin-bottom:30px;display:flex;gap:10px}
.crumb a:hover{color:var(--ink)}
.pwrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(30px,5vw,90px);align-items:start}
.pwrap>*{min-width:0}
.stack{display:grid;gap:14px;min-width:0}
.stack>.dplate{aspect-ratio:1/1;max-width:100%}
.stack:not(:has(.phgrid)) .dplate{aspect-ratio:4/5}
.phgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.phgrid .dplate.sm{aspect-ratio:4/5}
.phgrid .dplate.sm .hzart{max-width:70%;max-height:70%}
/* Anandgarh: the plate sits flat in the photographed maroon, like the print on the garment (no shading, no cast shadow) */
.dplate.plate-anandgarh::before{display:none}
.dplate.plate-anandgarh .hzart{filter:none!important}
.hzplate{position:relative;background:var(--c);display:grid;place-items:center;overflow:hidden;isolation:isolate}
.hzplate::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 42%,rgba(255,255,255,.10),transparent 70%),linear-gradient(rgba(0,0,0,0) 60%,rgba(0,0,0,.18));z-index:0}
.hzart{position:relative;z-index:1;max-height:84%;max-width:78%;width:auto;height:auto;object-fit:contain;transition:transform 1.4s var(--ease)}
.a-patshahi{max-width:70%}
.dplate .hzart{max-width:74%;max-height:80%}
.dplate .a-patshahi{max-width:66%}
.hzside{position:absolute;left:22px;bottom:18px;z-index:2;color:rgba(242,235,221,.7)}
.stack>.hzplate.dplate:not(.pshot){background:var(--studio)}
.stack>.hzplate.dplate:not(.pshot)::before{display:none}
.stack>.hzplate.dplate:not(.pshot) .hzside{color:rgba(11,18,34,.55)}
.pshot{background:var(--studio)}
.pshot::before{display:none}
.pshot img{position:relative;z-index:1;max-width:84%;max-height:86%;width:auto;height:auto}
.pshot .hzside{color:rgba(11,18,34,.55)}
.pshot,#stack .phgrid>*{cursor:zoom-in}
.ph.phot .lb span:first-child{display:none}
.ph.phot .lb{justify-content:flex-end}

.buy{display:grid;gap:26px;min-width:0;max-width:100%;position:sticky;top:104px;align-self:start}
.buy .top{display:flex;justify-content:space-between;align-items:baseline;color:var(--mute)}
.buy .top .num{font-size:28px!important;line-height:1;color:var(--royal);font-family:var(--f-gur)!important;letter-spacing:0!important}
.buy .gn{font-family:var(--f-gur);font-size:clamp(52px,5.4vw,84px);line-height:1.15;color:var(--ink)}
.buy h1{font-family:var(--f-disp);font-size:clamp(30px,2.8vw,42px);line-height:1.08;margin-top:-6px}
.buy .price{font-family:var(--f-ui);font-size:15px;letter-spacing:.04em;font-variant-numeric:lining-nums}
.buy .line{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:22px 0}
.buy .line .g{font-family:var(--f-gur);font-size:22px;line-height:1.5;color:var(--royal)}
.buy .line .t{font-family:var(--f-disp);font-style:italic;font-size:21px;color:var(--ink2);line-height:1.35;margin-top:4px}
.opt-l{display:flex;justify-content:space-between;color:var(--mute);margin-bottom:12px}
.opt-l a,.opt-l button{background:none;border:0;padding:0;cursor:pointer;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.swatch{display:flex;align-items:center;gap:12px;font-size:18px} /* block-level: the prototype relies on the quirks-mode line-height quirk here */
.swatch i{display:block;width:26px;height:26px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px var(--paper),0 0 0 2px var(--ink)}
.swatch .gur,.swatch .ce{color:var(--mute);font-size:16px}
.sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:8px}
.sizes button{height:50px;border:1px solid var(--rule2);background:transparent;cursor:pointer;font-family:var(--f-ui);font-size:12px;letter-spacing:.1em;font-variant-numeric:lining-nums;transition:border-color .2s,background .2s,color .2s}
.sizes button:hover{border-color:var(--ink)}
.sizes button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.sizes button:disabled{color:var(--mute);border-color:var(--rule);text-decoration:line-through;cursor:not-allowed;background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(11,18,34,.04) 6px 7px)}
.sizes button:disabled:hover{border-color:var(--rule)}
.buy .add{width:100%}
.hint{min-height:1.4em;color:#8E2B2B;font-style:italic;margin-top:-14px}
.assure{display:grid;gap:6px;color:var(--ink2);font-size:15px}
.assure div{display:flex;gap:12px}.assure div::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ink);margin-top:.62em;flex:none;opacity:.5}
.info{display:grid;gap:30px;padding-top:8px}
.info section{display:grid;gap:10px;border-top:1px solid var(--rule);padding-top:18px}
.info h2{color:var(--mute)}
.info p{color:var(--ink2);font-size:17px;line-height:1.6}
.spec{width:100%;border-collapse:collapse;font-size:16px;font-family:var(--f-body)}
.spec td{padding:9px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.spec td:first-child{color:var(--mute);width:34%;padding-right:12px}
.more{padding-block:clamp(90px,10vw,150px)}
.more .hd{display:flex;justify-content:space-between;align-items:baseline;gap:20px;border-bottom:1px solid var(--rule2);padding-bottom:20px}
.more h2{font-family:var(--f-disp);font-size:clamp(34px,4vw,56px);line-height:1}
.more .grid3{margin-top:40px}
.sbar{position:fixed;left:0;right:0;bottom:0;z-index:45;background:rgba(246,246,243,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--rule);display:none;align-items:center;justify-content:space-between;gap:12px;padding:12px max(16px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));transform:translateY(110%);transition:transform .5s var(--ease)}
.sbar.on{transform:none}
.sbar .nm{font-family:var(--f-disp);font-size:19px;line-height:1.2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sbar .btn{height:46px;padding:0 22px;flex:none}
@media(max-width:900px){
 body.on-piece .sbar{display:flex}
 .pwrap{grid-template-columns:minmax(0,1fr)}.buy{position:static;width:100%}
 #pdp{overflow-x:clip}
 .stack{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;margin-inline:-16px;padding-inline:16px;scrollbar-width:none}
 .stack::-webkit-scrollbar{display:none}
 .stack>.dplate{flex:none;width:84%;aspect-ratio:4/5;scroll-snap-align:center}
 .phgrid{display:contents}
 .phgrid>.ph,.phgrid>.dplate{flex:none;width:84%;scroll-snap-align:center}
 .pdp{padding-top:20px}.crumb{margin-bottom:16px}}

/* ---------- stories (one band per piece, in the garment's own colour) ---------- */
.story{position:relative;overflow:hidden;background:var(--sb);color:var(--sf);padding-block:clamp(100px,13vw,190px)}
.story .sk,.paint .sk{display:flex;align-items:center;gap:16px;margin-bottom:clamp(50px,7vw,90px);color:var(--sm)}
.story .sk::after,.paint .sk .rule{content:"";flex:1;height:1px;background:currentColor;opacity:.35;display:block}
.story .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,3vw,44px);align-items:center}
.story .art{grid-column:1/span 6;min-width:0}
.story .txt{grid-column:8/span 5;min-width:0;display:grid;gap:22px}
.story .txt .k{color:var(--sm)}
.story h2{font-family:var(--f-disp);font-size:clamp(42px,5vw,80px);line-height:1}
.story p{color:var(--sm);max-width:42ch}
.story .gl{font-family:var(--f-gur);font-size:clamp(22px,2.2vw,30px);line-height:1.5}
.story .tr{font-family:var(--f-disp);font-style:italic;font-size:clamp(20px,1.8vw,26px);color:var(--sm);line-height:1.35}
@media(max-width:900px){.story .art,.story .txt{grid-column:1/-1}}
/* patshahi */
.st-pz svg{width:100%;height:auto;overflow:visible}
.st-pz .ol{fill:none;stroke:#96A1A8;stroke-width:5;stroke-linejoin:round}
.st-pz .word{fill:#F4EFE6;opacity:0;transition:opacity 1.8s ease .2s}
.st-pz.go .word{opacity:1}
.wrists{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--sr);border-bottom:1px solid var(--sr)}
.wrists div{padding:22px 0;display:grid;gap:4px}
.wrists div + div{border-left:1px solid var(--sr);padding-left:22px}
.wrists .g{font-family:var(--f-gur);font-size:clamp(24px,2.4vw,32px);line-height:1.3}
.wrists .w{color:var(--sm)}
/* dilli */
.st-dl .art{display:grid;justify-items:center;gap:14px}
.st-dl .art img{width:min(100%,470px);clip-path:inset(100% 0 0 0);transition:clip-path 2.6s cubic-bezier(.6,.05,.25,1);box-shadow:0 50px 90px -40px rgba(0,0,0,.8)}
.st-dl.go .art img{clip-path:inset(0)}
.st-dl .art small{color:var(--sm)}
.st-dl .yr{font-family:var(--f-disp);font-size:clamp(90px,11vw,170px);line-height:.8;font-variant-numeric:lining-nums;color:transparent;-webkit-text-stroke:1px var(--sf)}
.st-dl .names{display:flex;gap:10px 28px;flex-wrap:wrap;padding-top:18px;border-top:1px solid var(--sr);color:var(--sm)}
/* anandgarh */
.paint{background:var(--night);padding-top:clamp(56px,6vw,84px);color:var(--bone)}
.paint .sk{color:var(--bmute);margin-bottom:clamp(40px,5vw,70px)}
.paint figure{margin:0;height:min(84vh,64vw);overflow:hidden;position:relative}
.paint img{width:100%;height:120%;object-fit:cover;object-position:50% 40%;transform:translate3d(0,calc(var(--py,0)*-14%),0) scale(1.05);will-change:transform}
.paint figure::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,#5A1A25);pointer-events:none}
.st-an{text-align:center;padding-top:clamp(50px,6vw,90px)}
.st-an img.line{width:min(100%,1180px);height:auto;margin:0 auto;filter:drop-shadow(0 6px 30px rgba(0,0,0,.25))}
.st-an .trn{margin-top:clamp(26px,3.6vw,46px);font-family:var(--f-caps);font-size:clamp(11px,1.15vw,15px);letter-spacing:.42em;margin-right:-.42em}
.st-an .lock{display:inline-grid;margin-top:clamp(60px,8vw,110px);padding-top:28px;border-top:1px solid var(--sr);gap:10px;font-family:var(--f-caps);font-variant-numeric:lining-nums}
.st-an .lock .a{font-size:clamp(20px,2.4vw,30px);letter-spacing:.34em;margin-right:-.34em}
.st-an .lock .b{display:flex;justify-content:center;gap:1em;align-items:center;font-size:clamp(10px,1vw,13px);letter-spacing:.3em;color:var(--sm)}
.st-an .lock .b u{display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor}
.st-an p{margin:clamp(40px,6vw,70px) auto 0;font-family:var(--f-disp);font-style:italic;font-size:clamp(19px,1.9vw,24px)}
/* bagh */
.st-bg canvas{width:100%;aspect-ratio:10/5;height:auto;box-shadow:0 40px 70px -40px rgba(40,28,10,.5)}
.threads{display:grid;border-top:1px solid var(--sr)}
.thr{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--sr)}
.thr i{display:block;width:18px;height:3px}
.thr .c{color:var(--sm);font-variant-numeric:lining-nums}
.replay{justify-self:start;background:none;border:0;padding:0 0 3px;border-bottom:1px solid currentColor;cursor:pointer;color:var(--sf)}
/* sangeet */
.taal{width:100%;max-width:520px;margin:0 auto;overflow:visible}
.taal .ring{fill:none;stroke:var(--sr);stroke-width:1.2}
.taal .ring2{fill:none;stroke:var(--sr);stroke-width:1;stroke-dasharray:2 6}
.taal .bt circle{fill:var(--sb);stroke:rgba(242,235,221,.35);stroke-width:1;transition:fill .15s,stroke .15s}
.taal .bt text{font-family:var(--f-gur);font-size:22px;fill:rgba(242,235,221,.85);text-anchor:middle;dominant-baseline:central;transition:fill .15s}
.taal .bt.khali text{fill:#E58BAA}
.taal .bt.on circle{fill:var(--bone);stroke:var(--bone)}
.taal .bt.on text{fill:var(--sb)}
.taal .mk{font-family:var(--f-body);font-size:15px;fill:var(--powder);text-anchor:middle;dominant-baseline:central}
.taal .c1{font-family:var(--f-gur);font-size:40px;fill:var(--bone);text-anchor:middle}
.taal .c2{font-family:var(--f-body);font-size:13px;letter-spacing:3px;fill:rgba(242,235,221,.6);text-anchor:middle}
.instr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 18px;padding-top:22px;border-top:1px solid var(--sr);grid-auto-flow:column;grid-template-rows:repeat(4,auto)}
@media(max-width:520px){.instr{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(6,auto)}}
.instr div{display:flex;flex-direction:column}
.instr .g{font-family:var(--f-gur);font-size:19px}
.instr .t{font-family:var(--f-disp);font-style:italic;color:var(--sm);font-size:16px;line-height:1.2}
/* fallback band */
.st-mn{text-align:center}
.st-mn .g{font-family:var(--f-gur);font-size:clamp(46px,8vw,124px);line-height:1.2}
.st-mn .tr{margin-top:12px}
.st-mn p{margin:30px auto 0}

/* ---------- look closely: every image on a piece page opens full screen, sharp, and zooms where you point ---------- */
.lbx{position:fixed;inset:0;z-index:300;display:none;background:rgba(246,246,243,.985);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lbx.on{display:block;animation:lbxIn .35s ease}
@keyframes lbxIn{from{opacity:0}to{opacity:1}}
.lbx-st{position:absolute;inset:72px max(72px,6vw) 64px;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:zoom-in;background-color:#E9EBEE;touch-action:none}
.lbx-st>img{display:block;flex:none;max-width:92%;max-height:92%;width:auto;height:auto;object-fit:contain;transition:transform .5s cubic-bezier(.2,.7,.2,1);will-change:transform;filter:drop-shadow(0 30px 40px rgba(20,22,30,.18))}
.lbx-st>img.art{max-width:70%;max-height:84%;filter:none}
.lbx.z .lbx-st{cursor:zoom-out}.lbx.z .lbx-st>img{transform:scale(var(--zs,2.6))}
.lbx button{position:absolute;background:none;border:0;padding:12px;cursor:pointer;font-family:var(--f-ui);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
.lbx-x{top:18px;right:max(24px,3vw)}
.lbx button:focus:not(:focus-visible){outline:none}
.lbx-p,.lbx-n{top:50%;transform:translateY(-50%);font-size:22px!important;letter-spacing:0!important;font-family:var(--f-disp)!important}
.lbx-p{left:max(14px,1.6vw)}.lbx-n{right:max(14px,1.6vw)}
.lbx-c{position:absolute;left:0;right:0;bottom:22px;text-align:center;font-family:var(--f-ui);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.lbx-h{position:absolute;left:max(24px,3vw);top:26px;font-family:var(--f-ui);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
@media(max-width:700px){.lbx-st{inset:60px 0 56px}.lbx-p,.lbx-n{top:auto;bottom:6px;transform:none}}