.hat-upsell-progress{padding:14px 16px 12px;background:var(--color-secondary, #fff);border-bottom:1px solid rgba(0,0,0,.08);flex-shrink:0}.hat-upsell-progress__message{font-size:12px;font-weight:600;margin:0 0 10px;text-align:center;color:var(--color-primary);letter-spacing:.02em;min-height:16px}.hat-upsell-progress__track-wrap{position:relative;padding-bottom:26px}.hat-upsell-progress__track{position:relative;height:6px;background:#0000001a;border-radius:3px}.hat-upsell-progress__fill{position:absolute;left:0;top:0;height:100%;background:var(--element-button-color-primary);border-radius:3px;transition:width .5s cubic-bezier(.4,0,.2,1);max-width:100%}.hat-upsell-progress__dot{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:#ccc;border:2px solid var(--color-secondary, #fff);transform:translate(-50%,-50%);transition:background .3s;z-index:1}.hat-upsell-progress__dot.is-unlocked{background:var(--element-button-color-primary)}.hat-upsell-progress__milestones{position:absolute;top:14px;left:0;right:0}.hat-upsell-progress__milestone-label{position:absolute;font-size:10px;line-height:1.3;text-align:center;color:var(--color-primary);opacity:.55;white-space:nowrap;transform:translate(-50%);transition:opacity .3s,font-weight .3s}.hat-upsell-progress__milestone-label:last-child{transform:translate(-100%)}.hat-upsell-progress__milestone-label.is-unlocked{opacity:1;font-weight:700}.hat-picker-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;align-items:flex-end;justify-content:center}.hat-picker-overlay.is-open{display:flex}@media screen and (min-width:750px){.hat-picker-overlay.is-open{align-items:center}}.hat-picker-overlay__backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#0000008c;cursor:pointer;animation:hatBackdropIn .2s ease}@keyframes hatBackdropIn{0%{opacity:0}to{opacity:1}}.hat-picker-modal{position:relative;z-index:1;background:var(--color-secondary, #fff);color:var(--color-primary, #1a1a1a);width:100%;max-width:700px;max-height:92dvh;border-radius:16px 16px 0 0;display:flex;flex-direction:column;box-shadow:0 -4px 32px #0000002e;animation:hatModalIn .28s cubic-bezier(.32,.72,0,1);overflow:hidden}@media screen and (min-width:750px){.hat-picker-modal{border-radius:16px;max-height:82dvh;box-shadow:0 8px 48px #00000038}}@keyframes hatModalIn{0%{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}.hat-picker-modal__head{padding:20px 20px 14px;border-bottom:1px solid rgba(0,0,0,.08);display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-shrink:0}.hat-picker-modal__title{font-size:clamp(16px,4vw,20px);font-weight:700;margin:0 0 4px;line-height:1.2;color:var(--color-primary)}.hat-picker-modal__subtitle{font-size:13px;margin:0;opacity:.65}.hat-picker-modal__badge{display:inline-block;background:var(--element-button-color-primary);color:var(--element-button-color-secondary, #fff);font-size:11px;font-weight:700;padding:3px 8px;border-radius:20px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px}.hat-picker-modal__close{background:#0000000f;border:none;cursor:pointer;padding:8px;border-radius:50%;flex-shrink:0;color:var(--color-primary);display:flex;align-items:center;justify-content:center;transition:background .2s;margin-top:2px}.hat-picker-modal__close:hover{background:#0000001f}.hat-picker-modal__close svg{display:block;width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}.hat-picker-modal__body{overflow-y:auto;padding:16px;flex:1;-webkit-overflow-scrolling:touch}.hat-picker-modal__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}@media screen and (min-width:500px){.hat-picker-modal__grid{grid-template-columns:repeat(3,1fr)}}.hat-picker-modal__card{border:2px solid rgba(0,0,0,.08);border-radius:10px;overflow:hidden;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s;background:#00000005}.hat-picker-modal__card:hover{border-color:var(--element-button-color-primary);box-shadow:0 4px 16px #0000001a;transform:translateY(-2px)}.hat-picker-modal__card-img-wrap{aspect-ratio:1 / 1;overflow:hidden;background:#f0f0f0}.hat-picker-modal__card-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}.hat-picker-modal__card:hover .hat-picker-modal__card-img{transform:scale(1.04)}.hat-picker-modal__card-body{padding:8px 10px 10px}.hat-picker-modal__card-name{font-size:11px;font-weight:600;margin:0 0 8px;line-height:1.35;color:var(--color-primary)}.hat-picker-modal__card-free{font-size:10px;font-weight:700;color:var(--element-button-color-primary);text-transform:uppercase;letter-spacing:.06em;margin:0 0 4px}.hat-picker-modal__card-btn{width:100%;padding:8px 10px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;border:none;cursor:pointer;border-radius:var(--element-button-radius, 0);background:var(--element-button-color-primary);color:var(--element-button-color-secondary, #fff);transition:opacity .2s;line-height:1}.hat-picker-modal__card-btn:hover:not(:disabled){opacity:.85}.hat-picker-modal__card-btn:disabled,.hat-picker-modal__card-btn.is-loading{opacity:.5;cursor:not-allowed}
/*# sourceMappingURL=/cdn/shop/t/50/assets/hookster-hat-upsell.css.map */