.pg-slide{aspect-ratio:4/5;background:var(--card)}
.pg-slide img{object-fit:contain}
.hero picture{display:contents}

/* paper-sheet product cards */
.grid{counter-reset:pc}
.card{counter-increment:pc}
.card .img{position:relative;isolation:isolate;overflow:visible;background:none;aspect-ratio:4/5;margin:10px 8px 0;transition:transform .3s}
.card:hover .img{transform:translateY(-4px)}
.card .img:before,.card .img:after{content:"";position:absolute;inset:0;z-index:-1;box-shadow:0 1px 2px rgba(0,0,0,.14)}
.card .img:before{background:#ECE8DF;transform:rotate(-1.8deg) translate(-1.2%,1%)}
.card .img:after{background:#F3F0E8;transform:rotate(1.4deg) translate(1.2%,1.4%)}
.card .img .pp{position:absolute;inset:0;z-index:0;background:#FBFAF6;box-shadow:0 14px 26px -16px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.12)}
.card .imglink{inset:6% 6% 11%;z-index:1}
.card .img img{object-fit:contain;background:none;mix-blend-mode:multiply}
.card .clip{position:absolute;z-index:6;left:7%;top:-7%;width:30px;height:70px;transform:rotate(-14deg);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 70'%3E%3Cpath d='M9 22V54a6 6 0 0 0 12 0V14a8 8 0 0 0-16 0V50' fill='none' stroke='%239AA0A8' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;filter:drop-shadow(1px 3px 2px rgba(0,0,0,.28));pointer-events:none}
.card .mk{position:absolute;z-index:3;top:17%;right:10%;width:18px;height:18px;border-radius:5px;background:var(--acc);pointer-events:none}
.card .no{position:absolute;z-index:3;left:9%;bottom:6%;font:600 14px "Hanken Grotesk",sans-serif;letter-spacing:.08em;color:var(--acc);pointer-events:none}
.card .no:after{content:counter(pc,decimal-leading-zero)}
.card .wl{z-index:7}
.card .tag{top:auto;left:auto;right:9%;bottom:6%;z-index:3}
.card .quick{transform:none;opacity:0;pointer-events:none;transition:opacity .2s;z-index:8;left:7%;right:7%;bottom:4%;width:auto}
.card:hover .quick,.card:focus-within .quick{opacity:1;pointer-events:auto}
.card .meta{padding:14px 8px 0}
@media(hover:none){.card .quick{display:none}}

@media(max-width:700px){
.hero{min-height:62vh!important}
.hero .wrap{padding-bottom:36px}
.cat{min-height:200px}
.wl{width:34px;height:34px}
.card .clip{width:24px;height:56px}
.pdp2 h1,.pg-info h1{font-size:24px}
.pg-buy{gap:8px}
.pg-sec{grid-template-columns:1fr}
}