.hp__slots{display:grid;gap:2px}.hp__slot{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 10px;margin:0 -10px;border-left:2px solid transparent;cursor:pointer;transition:background .15s,border-color .15s}.hp__slot.is-fixed{cursor:default}.hp__slot.is-active{background:#ffffff14;border-left-color:#fff}.hp__slot img{width:44px;height:44px;object-fit:cover;background:#f5f4f1;display:block}.hp__slot-txt{display:flex;flex-direction:column;min-width:0;line-height:1.3}.hp__slot-txt b{font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.65;font-weight:600}.hp__slot-txt span{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hp__slot-fixed{font-size:12px;opacity:.8;white-space:nowrap}.hp__slot .hp__piece-sel{max-width:180px}.hp__mix{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}.hp__mix-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;font-size:11px;letter-spacing:.1em;text-transform:uppercase}.hp__mix-head b{font-weight:700}.hp__mix-nav{display:flex;gap:6px}.hp__mix-nav button{width:28px;height:28px;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font-size:18px;line-height:1;cursor:pointer;padding:0}.hp__mix-nav button:hover{border-color:#fff}.hp__mix-track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:2px 0}.hp__mix-track::-webkit-scrollbar{display:none}.hp__mc{flex:0 0 96px;width:96px;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer;scroll-snap-align:start;font:inherit}.hp__mc-img{position:relative;display:block;width:96px;height:118px;background:#f5f4f1;overflow:hidden;outline:2px solid transparent;outline-offset:-2px;transition:outline-color .15s}.hp__mc-img img{width:100%;height:100%;object-fit:cover;display:block}.hp__mc-img em{position:absolute;left:0;bottom:0;background:#141414;color:#fff;font-style:normal;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px}.hp__mc:hover:not(.is-off) .hp__mc-img{outline-color:#ffffff80}.hp__mc.is-on .hp__mc-img{outline-color:#fff}.hp__mc.is-on .hp__mc-img:after{content:"\2713";position:absolute;right:4px;top:4px;width:20px;height:20px;border-radius:50%;background:#fff;color:#141414;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}.hp__mc-t{margin-top:6px;font-size:11px;line-height:1.3;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.hp__mc-p{display:block;font-size:11px;opacity:.75;margin-top:2px}.hp__mc.is-off{opacity:.35;cursor:not-allowed}@media(max-width:749px){.hp__mix-nav{display:none}.hp__mc{flex-basis:86px;width:86px}.hp__mc-img{width:86px;height:106px}.hp__slot{grid-template-columns:40px minmax(0,1fr);row-gap:6px}.hp__slot img{width:40px;height:40px}.hp__slot .hp__piece-sel,.hp__slot .hp__slot-fixed{grid-column:2}}.hp__card-sub{flex-basis:100%;margin-top:2px;font-family:var(--font-body-family,sans-serif);font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--hp-mute,#66655f)}.hp__mix-intro{margin:0 0 12px;padding:10px 12px;background:#ffffff14;border-left:2px solid #fff;font-size:13px;line-height:1.45;color:#e9e8e3}.hp__mix-intro b{display:block;color:#fff;font-size:11px;letter-spacing:.12em;text-transform:uppercase}.hp__mix-key{display:inline-block;padding:0 6px;border:1px solid rgba(255,255,255,.55);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;white-space:nowrap}.hp__slot{grid-template-columns:44px minmax(0,1fr) auto auto}.hp__slot.is-fixed{grid-template-columns:44px minmax(0,1fr) auto}.hp__swap{height:34px;padding:0 12px;border:1px solid rgba(255,255,255,.55);background:transparent;color:#fff;font:inherit;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}.hp__swap:hover,.hp__swap.is-on{background:#fff;color:#141414;border-color:#fff}.hp__slot--flash{animation:hp-flash 1s ease}@keyframes hp-flash{0%{background:#fff6}to{background:#ffffff14}}.hp__mc-cta{display:block;margin-top:6px;padding:5px 0;border:1px solid rgba(255,255,255,.4);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-align:center;white-space:nowrap}.hp__mc:hover:not(.is-off) .hp__mc-cta{border-color:#fff}.hp__mc.is-on .hp__mc-cta{background:#fff;color:#141414;border-color:#fff}@media(max-width:749px){.hp__slot,.hp__slot.is-fixed{grid-template-columns:40px minmax(0,1fr) auto}.hp__slot .hp__swap{grid-column:3;grid-row:1}.hp__slot .hp__piece-sel,.hp__slot .hp__slot-fixed{grid-column:2 / 4;grid-row:2}.hp__slot.is-fixed .hp__slot-fixed{grid-column:3;grid-row:1}.hp__mc-cta{font-size:9px}}
/*# sourceMappingURL=/cdn/shop/t/11/assets/hog-mix.css.map */