/* Patshahi · shop and the product cards (also used in "More from Drop 01") */
.shop{padding-block:clamp(60px,8vw,110px) clamp(110px,12vw,170px)}
.shop .hd{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px;padding-bottom:26px;border-bottom:1px solid var(--rule2)}
.shop h1{font-family:var(--f-disp);font-size:clamp(64px,10vw,170px);line-height:.84;letter-spacing:-.02em;white-space:nowrap}
.shop h1 small{display:block;font-family:var(--f-gur);font-size:clamp(17px,1.5vw,22px);color:var(--royal);letter-spacing:0;margin-top:1em;line-height:1.4;white-space:normal}
.filters{display:flex;gap:26px}
.filters button{background:none;border:0;padding:0 0 4px;cursor:pointer;color:var(--mute);border-bottom:1px solid transparent}
.filters button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--royal)}
@media(max-width:620px){.shop .hd{grid-template-columns:minmax(0,1fr)}.filters{gap:18px}}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,5vw,70px) clamp(16px,2vw,28px);margin-top:clamp(40px,5vw,64px)}
@media(max-width:900px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{display:block;min-width:0}
.card[hidden]{display:none}
.card .ci{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 14px;padding-top:16px;align-items:baseline}
.card .ci .num{grid-row:1/span 2;color:var(--royal);font-size:22px;line-height:1}
.card .ci .n{font-family:var(--f-disp);font-size:24px;line-height:1.15}
.card .ci .p{font-family:var(--f-ui);font-size:13px;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.card .ci .s{grid-column:2/-1;display:flex;justify-content:space-between;gap:10px;color:var(--mute);font-family:var(--f-ui);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.card .ci .s .g{font-family:var(--f-gur);text-transform:none;font-size:15px;letter-spacing:0}
.card .ci .s .c{display:flex;align-items:center;gap:8px}
.card .ci .s .c i{display:block;width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(11,18,34,.25)}
.empty-shop{margin-top:60px;font-family:var(--f-disp);font-size:26px}

/* photographs on the studio ground */
.ph{position:relative;overflow:hidden;background:var(--c,#d9d5cc);isolation:isolate;max-width:100%;aspect-ratio:4/5;container-type:inline-size}
.ph.phot{background:var(--studio)}
.ph .tg{position:absolute;left:clamp(16px,5cqi,28px);top:clamp(14px,4.4cqi,24px);z-index:3;color:rgba(11,18,34,.55);opacity:1}
.ph .lb{position:absolute;left:clamp(16px,5cqi,28px);bottom:clamp(14px,4.4cqi,24px);right:clamp(16px,5cqi,28px);z-index:3;display:flex;justify-content:space-between;gap:12px;color:rgba(11,18,34,.55);opacity:1}
.pimg{position:absolute;inset:7%;width:86%;height:86%;object-fit:contain;z-index:2;transition:opacity .6s ease,transform 1.2s var(--ease)}
.pimg.cov{inset:0;width:100%;height:100%;object-fit:cover;filter:none}
.pimg.alt{opacity:0}
.card .ph.phot .lb{display:none}
@media(hover:hover){.card:hover .pimg.alt{opacity:1}.card:hover .pimg:not(.alt){opacity:0}.card:hover .pimg{transform:scale(1.025)}}

/* the shop with five: three, then two given more room */
@media(min-width:901px){#shopgrid{grid-template-columns:repeat(6,minmax(0,1fr))}#shopgrid>.card{grid-column:span 2}#shopgrid>.card:nth-child(4),#shopgrid>.card:nth-child(5){grid-column:span 3}#shopgrid>.card:nth-child(n+4) .ph{aspect-ratio:16/12}}
@media(max-width:900px){#shopgrid>.card:nth-child(5){grid-column:1/-1}#shopgrid>.card:nth-child(5) .ph{aspect-ratio:16/12}}
/* phones: two across */
@media(max-width:480px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 12px}.card .ci{grid-template-columns:minmax(0,1fr) auto}.card .ci .num{display:none}.card .ci .n{font-size:19px}.card .ci .s{grid-column:1/-1}.card .ci .s .c{display:none}}