/* index.css: the clothing-rail page only */
html,body{height:auto;min-height:100%}
body{overflow-x:hidden;overflow-y:auto}
.rl{position:relative;top:auto;bottom:auto;left:auto;right:auto;margin-top:92px;height:calc(100svh - 136px);min-height:440px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.tk{position:relative;bottom:auto;flex:none}
.rw{position:relative;width:100%;height:calc(var(--gh) + 30px)}
.bar{position:absolute;top:14px;left:3%;right:3%;height:14px;border-radius:7px;background:linear-gradient(#fff 0,#dfe2e7 22%,#8c90a0 55%,#4d5163 78%,#e9ebef 100%);box-shadow:0 10px 14px -6px rgba(43,51,96,.35)}
.bar::before,.bar::after{content:"";position:absolute;top:-10px;width:12px;height:34px;border-radius:3px;background:linear-gradient(90deg,#fff,#a3a7b3 60%,#6a6e7e)}
.bar::before{left:-6px}.bar::after{right:-6px}
.row{position:absolute;left:0;right:0;top:calc(21px - var(--gh)*.08);height:calc(var(--gh) + 10px);display:flex;justify-content:center}
.s{position:relative;flex:none;width:calc(var(--gh)*.17);height:var(--gh);background:none;border:0;padding:0;cursor:pointer;transition:width .7s var(--e)}
.s.on{width:var(--gw)}
.s:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;border-radius:6px}
.g{position:absolute;left:50%;top:0;width:var(--gw);height:100%;margin-left:calc(var(--gw)/-2);transform-origin:50% 8%;animation:drop 1.1s calc(var(--i)*70ms) both}
@keyframes drop{0%{opacity:0;transform:translateY(-28px) rotate(7deg)}35%{opacity:1;transform:translateY(0) rotate(-3deg)}70%{transform:rotate(1.2deg)}100%{opacity:1;transform:rotate(1.2deg)}}
.sw{width:100%;height:100%;perspective:2000px;transform-origin:50% 8%}
.sw.sg{animation:swing 1s}
@keyframes swing{0%{transform:rotate(2.4deg)}30%{transform:rotate(-1.4deg)}60%{transform:rotate(.6deg)}100%{transform:rotate(0)}}
.box{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateY(180deg);transition:transform 850ms var(--e)}
.on .box{transform:rotateY(0deg)}
.f,.sd{position:absolute;inset:0;backface-visibility:hidden}
.f{transform:translateZ(calc(var(--gw)/2))}
.sd{transform:rotateY(180deg) translateZ(calc(var(--gw)/2))}
.f svg,.sd svg,.pg svg{width:100%;height:100%;display:block}
#cap{text-align:center;min-height:62px;margin-top:6px;padding:0 20px}
#cap .nm{font-style:italic;font-weight:500;font-size:16px}
#cap .dots{display:flex;gap:6px;justify-content:center;align-items:center;margin-top:6px;color:var(--mut);font-size:12px}
#cap u{width:11px;height:11px;border-radius:50%;border:1px solid rgba(43,51,96,.35)}
#cap .hint{color:var(--mut)}
@media(max-width:700px){
:root{--gh:min(44vh,84vw)}
.row{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:calc(50vw - var(--gw)*.2);scrollbar-width:none;height:calc(var(--gh) + 30px)}
.s,.s.on{width:calc(var(--gw)*.4);scroll-snap-align:center}
}
@media(prefers-reduced-motion:reduce){.g{opacity:1}}

.f img,
.sd img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.no-image {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #888;
  font-size: 12px;
  background: #eee;
}