hat-mix-builder{display:block;position:relative}.hat-mix__intro{margin-block-end:2.4rem}.hat-mix__empty{padding-block:6rem}.hat-mix [hidden]{display:none!important}.hat-mix__tray{position:fixed;inset-inline:0;bottom:0;z-index:20;background-color:rgb(var(--color-background));border-top:.1rem solid rgb(var(--color-border));padding:1.2rem 1.6rem calc(1.2rem + env(safe-area-inset-bottom,0px));box-shadow:0 -.4rem 2.4rem #00000014;transition:transform var(--animation-fast);border-radius:0}hat-mix-builder.hat-mix--drawer-open .hat-mix__tray{transform:translateY(115%)}.hat-mix__tray.is-flashing{animation:hat-mix-nudge .4s ease}@keyframes hat-mix-nudge{0%,to{transform:translate(0)}25%{transform:translate(-.6rem)}75%{transform:translate(.6rem)}}.hat-mix__tray-inner{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"slots summary" "action action";gap:1rem 1.2rem;align-items:center}.hat-mix__slots{grid-area:slots}.hat-mix__summary{grid-area:summary}.hat-mix__action{grid-area:action}.hat-mix__slots{display:flex;gap:.8rem;margin:0;padding:0;list-style:none}.hat-mix__slot{position:relative;width:4.8rem;height:4.8rem;flex:0 0 auto;border:.1rem dashed rgb(var(--color-border));border-radius:var(--medium-blocks-radius);background-color:rgb(var(--color-secondary-background));display:flex;align-items:center;justify-content:center}.hat-mix__slot.is-filled{border-style:solid;border-color:rgb(var(--color-foreground));background-color:rgb(var(--color-background))}.hat-mix__slot.just-filled{animation:hat-mix-pop .35s cubic-bezier(.3,1.4,.5,1)}@keyframes hat-mix-pop{0%{transform:scale(.82)}to{transform:scale(1)}}.hat-mix__slot-index{font-family:var(--font-heading-family);font-size:1.4rem;color:var(--color-foreground-lighten-60);line-height:1}.hat-mix__slot.is-filled .hat-mix__slot-index{display:none}.hat-mix__slot-image{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}.hat-mix__slot-remove{position:absolute;top:-.7rem;inset-inline-end:-.7rem;width:2.2rem;height:2.2rem;display:flex;align-items:center;justify-content:center;border:.1rem solid rgb(var(--color-border));border-radius:50%;background-color:rgb(var(--color-background));color:rgb(var(--color-foreground));cursor:pointer;padding:0;z-index:2}.hat-mix__slot-remove:after{content:"";position:absolute;top:-1.1rem;right:-1.1rem;bottom:-1.1rem;left:-1.1rem;border-radius:50%}.hat-mix__slot-remove svg{width:1rem;height:1rem}.hat-mix__summary{display:flex;flex-direction:column;gap:.2rem;min-width:0}.hat-mix__nudge{margin:0;font-size:1.3rem;line-height:1.3;color:rgb(var(--color-foreground));text-wrap:balance}.hat-mix__totals{margin:0;display:flex;align-items:baseline;gap:.8rem;font-variant-numeric:tabular-nums}.hat-mix__was{color:var(--color-foreground-lighten-60);font-size:1.3rem}.hat-mix__total{font-family:var(--font-heading-family);font-weight:var(--font-heading-weight);font-size:1.8rem;line-height:1.2}.hat-mix__total:empty{display:none}.hat-mix__add{width:100%}.hat-mix__error{margin-block-start:1rem;padding:1rem 1.2rem;font-size:1.4rem}.hat-mix__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 1.2rem;padding-block-end:calc(var(--hat-tray-height, 15rem) + 2rem)}.hat-mix-card{display:flex;flex-direction:column;gap:.8rem;min-width:0}.hat-mix-card__media{position:relative;overflow:hidden;background-color:rgb(var(--color-secondary-background))}.hat-mix-card__media img{width:100%;height:100%;object-fit:cover;display:block}.hat-mix-card--inactive .hat-mix-card__media{opacity:.55}.hat-mix-card__badge{position:absolute;top:.8rem;inset-inline-start:.8rem;z-index:1;font-size:1.1rem;line-height:1;padding:.5rem .7rem;border-radius:var(--badges-radius);letter-spacing:.02em}.hat-mix-card__badge--out{background-color:var(--color-badge-soldout);color:var(--color-badge-soldout-text)}.hat-mix-card__badge--soon{background-color:var(--color-badge-new);color:var(--color-badge-new-text)}.hat-mix-card__badge--low{background-color:var(--color-badge-hot);color:var(--color-badge-hot-text)}.hat-mix-card__body{display:flex;flex-direction:column;gap:.4rem}.hat-mix-card__title{margin:0;font-family:var(--font-pcard-title-family);font-weight:var(--font-pcard-title-weight);font-size:var(--font-pcard-title-size);text-transform:var(--font-pcard-title-transform);line-height:1.3}.hat-mix-card__price{margin:0;font-size:1.4rem;color:var(--color-foreground-lighten-19);font-variant-numeric:tabular-nums}.hat-mix-card__note{margin:0;font-size:1.3rem;color:var(--color-foreground-lighten-60)}.hat-mix-card__swatches{display:flex;flex-wrap:wrap;gap:1rem;margin-block-start:.4rem}.hat-mix-card__swatches .hat-mix-swatch{position:relative;width:3.2rem;height:3.2rem;flex:0 0 auto;padding:0;border:.1rem solid rgb(var(--color-border));border-radius:50%;cursor:pointer;background-color:var(--swatch-background, rgb(var(--color-secondary-background)));background-size:cover;background-position:center;background-repeat:no-repeat;transition:transform var(--duration-default) ease,box-shadow var(--duration-default) ease}.hat-mix-card__swatches .hat-mix-swatch:after{content:"";position:absolute;top:-.6rem;right:-.6rem;bottom:-.6rem;left:-.6rem;border-radius:50%}@media(hover:hover){.hat-mix-card__swatches .hat-mix-swatch:not(:disabled):hover{transform:scale(1.12);box-shadow:0 0 0 .2rem rgb(var(--color-background)),0 0 0 .3rem rgb(var(--color-foreground))}}.hat-mix-card__swatches .hat-mix-swatch:not(:disabled):active{transform:scale(.94)}.hat-mix-card__swatches .hat-mix-swatch--disabled{cursor:not-allowed;opacity:.3;filter:grayscale(1)}.hat-mix-card__single{display:inline-flex;align-items:center;gap:.5rem;min-height:3.4rem;padding:0 1.2rem;border:.1rem solid rgb(var(--color-border));border-radius:var(--buttons-radius, .5rem);background-color:transparent;color:rgb(var(--color-foreground));font-family:var(--font-button-family);font-weight:var(--font-button-weight);font-size:1.3rem;cursor:pointer;transition:background-color var(--duration-default) ease,color var(--duration-default) ease}.hat-mix-card__single:hover{background-color:rgb(var(--color-foreground));color:rgb(var(--color-background))}.hat-mix-card__single svg{width:1.2rem;height:1.2rem}.hat-mix__footnote{margin-block-start:2.4rem;font-size:1.4rem;color:var(--color-foreground-lighten-19)}.hat-mix-swatch:focus-visible,.hat-mix-card__single:focus-visible,.hat-mix__slot-remove:focus-visible,.hat-mix__add:focus-visible{outline:.2rem solid rgb(var(--color-keyboard-focus));outline-offset:.3rem}@media(prefers-reduced-motion:reduce){.hat-mix__tray,.hat-mix__slot,.hat-mix-swatch{transition:none;animation:none}}@media(min-width:750px){.hat-mix__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:2.4rem 2rem}}@media(min-width:768px){.hat-mix__tray{position:sticky;top:1.6rem;bottom:auto;z-index:5;margin-block-end:2.4rem;padding:1.6rem 2rem;border:.1rem solid rgb(var(--color-border));border-radius:var(--blocks-radius);box-shadow:0 .4rem 2rem #0000000f}hat-mix-builder.hat-mix--drawer-open .hat-mix__tray{transform:none}.hat-mix__tray-inner{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"slots summary action";gap:2.4rem}.hat-mix__slot{width:7rem;height:7rem}.hat-mix__nudge{font-size:1.6rem}.hat-mix__was{font-size:1.4rem}.hat-mix__total{font-size:2.4rem}.hat-mix__add{width:auto;min-width:20rem}.hat-mix__grid{padding-block-end:0}}@media(min-width:1100px){.hat-mix__grid{grid-template-columns:repeat(4,minmax(0,1fr))}.hat-mix-card__swatches .hat-mix-swatch{width:2.8rem;height:2.8rem}}@media(max-width:767px){body.hat-pack shopify-chat{display:none!important}}
/*# sourceMappingURL=/cdn/shop/t/23/assets/section-hat-mix-builder.css.map */