.hc{position:relative;display:block;border-radius:22px;background:#fff;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.hc:hover,.hc:focus-within{transform:translateY(-6px);box-shadow:0 24px 46px -20px rgba(30,30,60,.28)}
.hc__img{position:relative;display:block;aspect-ratio:2/3;overflow:hidden;border-radius:22px;background:#fff}
.hc__lnk{position:absolute;inset:0;z-index:1;display:block}
.hm{position:absolute;inset:0;transition:opacity .5s}
.hm--a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.07);transition:transform .6s}
.hc:hover .hm--a img{transform:scale(1.11)}
.hm--b,.hm--c{opacity:0}
.hm--b img.hm__room{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hm__sheet{position:absolute;left:32.5%;top:17%;width:33%;height:33%;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.05),0 6px 12px -4px rgba(40,30,20,.35)}
.hm__sheet img{position:absolute;left:1.667%;top:1.111%;width:96.667%;height:97.778%;object-fit:cover}
.hm--c{background:#fff}
.hm--c img{position:absolute;left:9%;top:9%;width:100%;height:100%;object-fit:cover;transform:scale(2.1);transform-origin:0 0}
.hm--c:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.22),transparent 38%,rgba(0,0,0,.10));pointer-events:none}
.hc:hover .hm--a{animation:hmA 6s infinite}
.hc:hover .hm--b{animation:hmB 6s infinite}
.hc:hover .hm--c{animation:hmC 6s infinite}
@keyframes hmA{0%,30%{opacity:1}34%,96%{opacity:0}100%{opacity:1}}
@keyframes hmB{0%,30%{opacity:0}34%,63%{opacity:1}67%,100%{opacity:0}}
@keyframes hmC{0%,63%{opacity:0}67%,96%{opacity:1}100%{opacity:0}}
.hc__dots{position:absolute;left:0;right:0;top:.7rem;z-index:2;display:flex;justify-content:center;gap:.3rem;pointer-events:none;opacity:0;transition:opacity .3s}
.hc:hover .hc__dots{opacity:1}
.hc__dots i{width:.4rem;height:.4rem;border-radius:50%;background:#111;opacity:.2;box-shadow:0 0 0 1px rgba(255,255,255,.6)}
.hc:hover .hc__dots i:nth-child(1){animation:hdA 6s infinite}
.hc:hover .hc__dots i:nth-child(2){animation:hdB 6s infinite}
.hc:hover .hc__dots i:nth-child(3){animation:hdC 6s infinite}
@keyframes hdA{0%,32%{opacity:1}34%,96%{opacity:.2}100%{opacity:1}}
@keyframes hdB{0%,32%{opacity:.2}34%,65%{opacity:1}67%,100%{opacity:.2}}
@keyframes hdC{0%,65%{opacity:.2}67%,96%{opacity:1}100%{opacity:.2}}
.hc__tag{position:absolute;top:.65rem;left:.65rem;z-index:2;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);color:#111;font-size:.6rem;font-weight:700;line-height:1;letter-spacing:.08em;text-transform:uppercase;padding:.42rem .65rem;border-radius:999px;pointer-events:none}
.hc__price{position:absolute;top:.65rem;right:.65rem;z-index:2;background:#111;color:#fff;font-size:.74rem;font-weight:700;line-height:1;padding:.42rem .7rem;border-radius:999px;pointer-events:none}
.hc__q{display:grid;gap:.45rem;position:relative;z-index:3}
.hq__sz{display:flex;flex-wrap:wrap;gap:.3rem}
.hq__sz label{position:relative;flex:1 1 auto}
.hq__sz input{position:absolute;opacity:0;pointer-events:none}
.hq__sz span{display:block;text-align:center;padding:.42rem .45rem;border:1px solid #dcdce3;border-radius:999px;font-size:.68rem;font-weight:600;line-height:1.1;cursor:pointer;color:#111;background:#fff;white-space:nowrap}
.hq__sz input:checked+span{background:#111;color:#fff;border-color:#111}
.hq__sz input:focus-visible+span{outline:2px solid #111;outline-offset:2px}
.hq__add{width:100%;padding:.68rem .5rem;border:0;border-radius:999px;background:#111;color:#fff;font-size:.74rem;font-weight:700;line-height:1;letter-spacing:.04em;cursor:pointer;transition:background .15s}
.hq__add:hover,.hq__add.is-added{background:#1f7a3d}
.hq__add[disabled]{opacity:.6}
.hc__qw{padding:.55rem .1rem 0}
@media(hover:hover){
  .hc__qw{position:absolute;left:.55rem;right:.55rem;bottom:.55rem;z-index:3;padding:.55rem;border-radius:18px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);transform:translateY(calc(100% + 1rem));opacity:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s;box-shadow:0 10px 24px -12px rgba(30,30,60,.35)}
  .hc:hover .hc__qw,.hc:focus-within .hc__qw{transform:none;opacity:1}
}
@media(hover:none){.hc__dots{display:none}}
@media(prefers-reduced-motion:reduce){.hc:hover .hm{animation:none!important}}