.prods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));scroll-margin-top:calc(var(--hd) + 20px)}
.prods+.prods{margin-top:var(--sp-h)}
.prods .ty-h{grid-column:1/-1}
.prod{display:block;width:100%;padding:calc(var(--sp-h)*.6) 2% var(--sp-h);border:0;background:none;text-align:center;cursor:pointer}
.prod img{width:min(300px,100%);height:auto;aspect-ratio:1;margin:0 auto;object-fit:contain;transition:transform .5s var(--ease)}
.prod:hover img,.prod:focus-visible img{transform:translateY(-6px) scale(1.03)}
.prod__n{display:block;margin-top:.6em;font-weight:600;line-height:1.2}
.pp{width:min(1180px,calc(100% - 2*var(--g)));max-width:none;max-height:none;padding:0;border:0;background:none;overflow:visible;height:min(640px,calc(100dvh - 48px))}
.pp::backdrop{background:rgb(0 0 0/0);transition:background .25s}
.pp.is-in::backdrop{background:rgb(0 0 0/.6)}
.pp__in{position:relative;display:grid;grid-template-columns:1fr 1fr;max-height:none;background:var(--paper);border-radius:var(--rr);overflow:hidden;opacity:0;transform:translateY(40px);transition:opacity .25s,transform .45s var(--ease);height:100%;grid-template-rows:minmax(0,1fr)}
.pp.is-in .pp__in{opacity:1;transform:none}
.pp__img{display:grid;place-items:center;padding:var(--sp-h);background:#eaeaea;min-height:0}
.pp__img img{width:100%;max-width:440px;aspect-ratio:1;object-fit:contain;max-height:100%}
.pp__tx{display:flex;flex-direction:column;padding:var(--sp-h);overflow:hidden;min-height:0}
.pp__c{font-size:var(--t-s);opacity:.7}
.pp__t{margin:.3em 0 .6em;font:400 calc(var(--t2)*.68)/var(--lh-d) var(--disp);text-transform:lowercase;flex:none;overflow-wrap:break-word}
.pp__d p+p{margin-top:1em}
.pp__h{margin:var(--sp-h) 0 .6em}
.pp__d .chips li{padding:6px 12px;font-size:var(--t-s)}
.pp__nav{display:flex;align-items:center;gap:20px;margin-top:0;padding-top:16px;flex:none}
.pp button{border:0;border-radius:var(--rr);background:var(--cta);font-weight:600;cursor:pointer;transition:background .25s}
.pp button:hover{background:var(--cta-h)}
.pp__nav button{padding:.6em .8em;font-size:calc(var(--t-h)*.8);line-height:1.1}
.pp__nav [data-go="-1"]::before{content:"← "}
.pp__nav [data-go="1"]::after{content:" →"}
.pp__n{flex:1;text-align:center;opacity:.6}
.pp__x{position:absolute;top:12px;right:12px;width:56px;height:56px}
.reel{position:relative;height:calc(100svh + var(--n)*9svh);margin-top:var(--sp);margin-inline:calc(var(--g)*-1)}
.reel__stage{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--g);overflow:hidden;background:linear-gradient(90deg,transparent 2px,var(--flaeche) 0) 0 0/3px 3px,linear-gradient(transparent 2px,var(--flaeche) 0) 0 0/3px 3px,#efefed}
.reel__col{position:absolute;left:50%;top:50%;width:min(30svh,34vw);margin-left:calc(min(30svh,34vw)/-2);will-change:transform}
.reel__it{display:grid;place-items:center;width:100%;height:30svh;padding:0;border:0;background:none;cursor:pointer}
.reel__card{display:grid;place-items:center;width:84%;aspect-ratio:1;border-radius:calc(var(--rr)*3);transform:scale(.72);transition:transform .5s var(--ease),background .4s,box-shadow .4s}
.reel__card img{width:78%;height:78%;object-fit:contain}
.reel__it.is-on .reel__card{background:var(--paper);transform:none;box-shadow:0 20px 50px -24px rgb(0 0 0/.25)}
.reel__l,.reel__r{position:relative;z-index:2;display:flex;align-items:center;gap:.6em;font-weight:600;line-height:1.2}
.reel__l{grid-column:1}
.reel__l i{display:block;width:clamp(28px,4vw,72px);height:1.5px;background:var(--ink)}
.reel__r{grid-column:3;justify-self:end;flex-direction:column;align-items:flex-end;gap:.3em;text-align:right}
.reel__n{font-weight:400;font-size:var(--t-s);opacity:.6}
.reel__cat.is-in{animation:catIn .6s var(--ease)}
.reel__it .prod__n,.reel__it template{display:none}
@keyframes catIn{from{opacity:0;transform:translateY(14px);filter:blur(4px)}}
.pp__d{flex:1;min-height:0;overflow:auto}
@media (max-width:690px){
  .prods{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp{width:100%;max-height:92dvh;margin:auto 0 0;height:92dvh}
  .pp__in{grid-template-columns:1fr;grid-template-rows:34% minmax(0,1fr);transform:translateY(100%)}
  .pp__img{padding:20px}
  .pp__img img{max-width:200px}
  .pp__nav{gap:10px}
  .reel{height:calc(100svh + var(--n)*7svh)}
  .reel__col{width:46vw;margin-left:-23vw}
  .reel__it{height:24svh}
  .reel__l,.reel__r{align-self:start;padding-top:calc(var(--hd) + 28px);font-size:var(--t-s)}
  .reel__r{align-self:end;padding:0 0 32px}
  .reel__l i{width:20px}
  .reel__l>span:last-child{display:none}
  .pp__tx{padding:20px var(--g)}
}