.variant-picker--playmat{--picker-row-padding: 1.6rem;--picker-row-gap: 2.4rem;--picker-header-media-size: 5.6rem;--picker-chevron-size: 1.2rem;--picker-swatch-gap: 1.2rem;--picker-swatch-columns: 6;--picker-pill-height: 3.2rem;--picker-pill-padding-inline: 2.4rem;margin:2.4rem 0 3.2rem}.picker-row{border-top:1px solid var(--black-tint-10);scroll-margin-top:calc(var(--header-height) + var(--announcement-bar-height) + 1.6rem)}.picker-row:last-child{border-bottom:1px solid var(--black-tint-10)}.picker-row__summary{display:flex;align-items:center;gap:var(--picker-row-gap);padding-block:var(--picker-row-padding);cursor:pointer;list-style:none}.picker-row__summary::-webkit-details-marker{display:none}.picker-row__text{display:flex;flex-direction:column;gap:.4rem;flex:1}.picker-row__label{color:var(--charcoal);font-size:1.4rem;letter-spacing:.01em}.picker-row__value{display:flex;align-items:center;gap:.8rem;font-family:var(--font-body-family);font-size:1.4rem;line-height:1.3;letter-spacing:.01em;color:var(--black-tint-66);text-box-trim:trim-both;text-box-edge:cap alphabetic}.picker-row__details{display:flex;flex-direction:column;margin-block-start:.4rem;font-family:var(--font-body-family);font-size:1.4rem;line-height:1.35;letter-spacing:.01em;color:var(--black-tint-66)}.picker-row__divider{color:var(--black-tint-30)}.picker-row__media{display:flex;align-items:center;justify-content:center;width:var(--picker-header-media-size);height:var(--picker-header-media-size);color:var(--charcoal);background:var(--cream)}.picker-row__media .design-swatch{width:100%;height:100%;object-fit:cover}.picker-row__chevron{display:flex;align-items:center}.picker-row__summary .picker-row__chevron .icon{position:static;width:var(--picker-chevron-size);height:auto;transition:transform var(--duration-default, .2s) ease}.picker-row[open] .picker-row__chevron .icon{transform:rotate(180deg)}.picker-row__content{padding-bottom:var(--picker-row-padding)}.picker-row__content .option__fieldset{margin-bottom:0}@media screen and (max-width:989px){.variant-picker--playmat{--picker-swatch-columns: 4}}@media(hover:hover)and (pointer:fine){.design-picker__item input[type=radio]:not(:checked)+.design-picker__label:hover:after{border:1px solid var(--black-tint-50, rgba(0, 0, 0, .5))}.design-picker__pill:not(.is-active):hover{border-color:var(--black-tint-50, rgba(0, 0, 0, .5))}}.design-picker{display:block}.design-picker__modes{display:flex;justify-content:flex-end;align-items:center;gap:.8rem;margin-bottom:1.6rem;font-size:1.4rem}.design-picker__mode{background:none;border:0;padding:0;color:var(--black-tint-50);cursor:pointer}.design-picker__mode.is-active{color:var(--charcoal);text-decoration:underline}.design-picker__pills-wrapper{--pills-fade-width: 8rem;position:relative;margin-bottom:1.6rem}.design-picker__pills-wrapper[hidden]{display:none}.design-picker__pills-wrapper:before,.design-picker__pills-wrapper:after{content:"";position:absolute;top:0;bottom:0;width:var(--pills-fade-width);pointer-events:none;transition:opacity var(--duration-default, .2s) ease}.design-picker__pills-wrapper:before{left:0;background:linear-gradient(90deg,var(--cream) 0%,transparent 100%)}.design-picker__pills-wrapper:after{right:0;background:linear-gradient(90deg,transparent 0%,var(--cream) 100%)}.design-picker__pills-wrapper.is-scroll-start:before,.design-picker__pills-wrapper.is-scroll-end:after{opacity:0}.design-picker__pills{display:flex;gap:.8rem;overflow-x:auto;scrollbar-width:none;cursor:grab}.design-picker__pills.is-dragging,.design-picker__pills.is-dragging .design-picker__pill{cursor:grabbing;-webkit-user-select:none;user-select:none}.design-picker__pills::-webkit-scrollbar{display:none}.design-picker__pill{flex-shrink:0;height:var(--picker-pill-height);padding:0 var(--picker-pill-padding-inline);font-size:1.4rem;letter-spacing:.01em;color:var(--charcoal);background:var(--cream);border:1px solid var(--black-tint-20);border-radius:9999px;cursor:pointer;transition:border-color var(--duration-default, .2s) ease}.design-picker__pill.is-active{border-color:var(--black-tint-50);box-shadow:inset 0 0 0 1px var(--black-tint-50)}.design-picker__personalization-filter{--filter-checkbox-size: 1.6rem;display:flex;align-items:center;gap:.8rem;margin-bottom:1.6rem;color:var(--charcoal);cursor:pointer}.design-picker__personalization-filter[hidden]{display:none}.design-picker__personalization-filter input[type=checkbox]{-webkit-appearance:none;appearance:none;flex-shrink:0;display:grid;place-content:center;width:var(--filter-checkbox-size);height:var(--filter-checkbox-size);margin:0;background:var(--cream);border:1px solid var(--charcoal);border-radius:0;cursor:pointer}.design-picker__personalization-filter input[type=checkbox]:after{content:"";width:1rem;height:.9rem;background:var(--cream);-webkit-mask:url(icon-check.svg) center / contain no-repeat;mask:url(icon-check.svg) center / contain no-repeat;opacity:0}.design-picker__personalization-filter input[type=checkbox]:checked{background:var(--charcoal)}.design-picker__personalization-filter input[type=checkbox]:checked:after{opacity:1}.design-picker__personalization-filter input[type=checkbox]:focus-visible{outline:2px solid var(--charcoal);outline-offset:2px}.variant-picker--personalizable-only .design-picker__item:has(input[data-personalizable=false]){display:none}.design-picker__item.is-overflow{display:none}.design-picker__show-all{margin:0 0 1.2rem;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:.3rem;background:none;border:0;cursor:pointer}.design-picker__show-all[hidden]{display:none}.design-picker__grid{display:grid;grid-template-columns:repeat(var(--picker-swatch-columns),minmax(0,1fr));gap:var(--picker-swatch-gap);margin:0;padding:0 0 1.2rem;border:0}.design-picker__item input[type=radio]{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}.design-picker__label{position:relative;display:block;aspect-ratio:1;cursor:pointer}.design-picker__label .design-swatch{display:block;width:100%;height:100%;object-fit:cover}.design-picker__label:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid transparent;transition:border-color var(--duration-default, .2s) ease}.design-picker__item input[type=radio]:checked+.design-picker__label:after{border:2px solid var(--charcoal)}.design-picker__item input[type=radio]:focus-visible+.design-picker__label:after{outline:2px solid var(--charcoal);outline-offset:-6px}.design-picker__item--unavailable .design-picker__label:before{--strike-color: #000;--strike-length: 141.42%;content:"";position:absolute;top:50%;left:50%;width:var(--strike-length);z-index:1;border-top:1px solid var(--strike-color);transform:translate(-50%,-50%) rotate(-45deg)}.size-select{--size-select-icon-size: 2.8rem;--size-select-option-icon-size: 4rem;--size-select-check-size: 1rem;--size-select-menu-offset: .4rem;display:flex;flex-direction:column;gap:.8rem;padding-block:var(--picker-row-padding)}.size-select__field{position:relative}.size-select__trigger{display:flex;align-items:center;gap:1.2rem;width:100%;min-height:4.8rem;padding:0 1.4rem 0 1rem;font-family:var(--font-body-family);font-size:1.4rem;letter-spacing:.01em;text-align:left;color:var(--charcoal);background:var(--cream);border:1px solid var(--black-tint-20);cursor:pointer;transition:border-color var(--duration-default, .2s) ease}.size-select__trigger[aria-expanded=true]{border-color:var(--charcoal)}.size-select__trigger:focus-visible,.size-select__option:focus-visible{outline:2px solid var(--charcoal);outline-offset:-2px}.size-select__icon,.size-select__option-icon{display:flex;flex-shrink:0;width:var(--size-select-icon-size);height:var(--size-select-icon-size)}.size-select__icon:empty,.size-select__option-icon:empty,.size-select__note:empty,.size-select__divider:has(+.size-select__note:empty){display:none}.size-select__icon svg,.size-select__option-icon svg{width:100%;height:100%}.size-select__divider{color:var(--black-tint-30)}.size-select__note,.size-select__option-note{font-size:1.3rem;letter-spacing:.01em;color:var(--black-tint-66)}.size-select__trigger .picker-row__chevron{margin-inline-start:auto}.size-select__trigger .picker-row__chevron .icon{position:static;width:var(--picker-chevron-size);height:auto;transition:transform var(--duration-default, .2s) ease}.size-select__trigger[aria-expanded=true] .picker-row__chevron .icon{transform:rotate(180deg)}.size-select__menu{position:absolute;inset-inline:0;top:calc(100% + var(--size-select-menu-offset));z-index:3;background:var(--cream);border:1px solid var(--black-tint-20);box-shadow:0 .8rem 2.4rem #0000001f}.size-select__menu[hidden]{display:none}.size-select__option{display:flex;align-items:center;gap:1.2rem;width:100%;padding:1rem 1.4rem;font-family:var(--font-body-family);font-size:1.4rem;letter-spacing:.01em;text-align:left;color:var(--charcoal);background:none;border:0;cursor:pointer}.size-select__option+.size-select__option{border-top:1px solid var(--black-tint-10)}.size-select__option[aria-selected=true]{background:var(--cream-dark)}@media(hover:hover)and (pointer:fine){.size-select__option:hover{background:var(--cream-dark)}}.size-select__option-icon{width:var(--size-select-option-icon-size);height:var(--size-select-option-icon-size)}.size-select__menu:has(.size-select__option-icon:not(:empty)) .size-select__option-icon:empty{display:flex}.size-select__option-text{display:flex;flex:1;flex-direction:column;gap:.3rem;min-width:0}.size-select__option-note{font-size:1.2rem}.size-select__option-check{display:flex;flex-shrink:0;width:var(--size-select-check-size);visibility:hidden}.size-select__option-check svg{width:100%;height:auto}.size-select__option[aria-selected=true] .size-select__option-check{visibility:visible}.size-select__buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.size-select__button{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"icon label price" "icon note note";align-items:center;column-gap:1.2rem;row-gap:.3rem;padding:1rem 1.2rem;font-family:var(--font-body-family);font-size:1.4rem;letter-spacing:.01em;color:var(--charcoal);background:var(--cream);border:1px solid var(--black-tint-20);cursor:pointer;transition:border-color var(--duration-default, .2s) ease}.size-select__button:has(.size-select__option-icon:empty){grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label price" "note note"}.size-select__button .size-select__option-icon{grid-area:icon}.size-select__button .size-select__option-text{display:contents}.size-select__button .size-select__option-label{grid-area:label}.size-select__button .size-select__option-note{grid-area:note}.size-select__button :is(.size-select__option-price,.size-select__option-status){grid-area:price;text-align:end}.size-select[data-row-key=type] .size-select__button{display:flex;flex-direction:column;align-items:flex-start}.size-select[data-row-key=type] .size-select__button :is(.size-select__option-price,.size-select__option-status){margin-top:auto;text-align:start}.size-select__button--unavailable :is(.size-select__option-icon,.size-select__option-label,.size-select__option-note){opacity:.3}.size-select__button:has(:checked){border-color:var(--charcoal)}.size-select__button:has(:focus-visible){outline:2px solid var(--charcoal);outline-offset:2px}@media(max-width:360px){.size-select__button{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"icon icon" "label price" "note note"}}@media(hover:hover)and (pointer:fine){.size-select__button:not(:has(:checked)):hover{border-color:var(--black-tint-50, rgba(0, 0, 0, .5))}}.picker-row__summary--static{cursor:default}.picker-row--addon .picker-row__media{margin-inline-end:calc(var(--picker-chevron-size) + var(--picker-row-gap))}.picker-addon{--picker-addon-checkbox-size: 1.6rem;display:flex;align-items:flex-start;gap:1.2rem;cursor:pointer}.picker-addon__checkbox[type=checkbox]{position:relative;flex-shrink:0;width:var(--picker-addon-checkbox-size);height:var(--picker-addon-checkbox-size);margin:.2rem 0 0;border:1px solid var(--charcoal);border-radius:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}.picker-addon__checkbox[type=checkbox]:checked:after{content:url(icon-check.svg);position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}.picker-addon__checkbox[type=checkbox]:focus-visible{outline:2px solid var(--charcoal);outline-offset:2px}.picker-addon__text{display:flex;flex-direction:column;gap:.4rem}.picker-addon__name{font-size:1.4rem;line-height:1.3;letter-spacing:.01em;color:var(--charcoal)}.picker-addon__price{color:var(--black-tint-66)}.picker-row__media[hidden]{display:none}.pdp-addons{--addon-image-size: 7.2rem;display:flex;flex-direction:column;gap:1.6rem}.pdp-addons__heading{margin:0;font-size:1.6rem;letter-spacing:.01em;color:var(--charcoal)}.pdp-addons__card{display:flex;align-items:center;gap:1.6rem;padding-inline-end:1.2rem;background:var(--white)}.pdp-addons__image{display:block;flex-shrink:0;width:var(--addon-image-size);height:var(--addon-image-size)}.pdp-addons__image img{display:block;width:100%;height:100%;object-fit:cover}.pdp-addons__text{display:flex;flex:1;flex-direction:column;gap:.8rem;min-width:0}.pdp-addons__title{font-size:1.4rem;letter-spacing:.01em;color:var(--charcoal)}.pdp-addons__variant{font-size:1.2rem;letter-spacing:.01em;color:var(--black-tint-66)}.pdp-addons__button{display:inline-flex;align-items:center;gap:1.2rem;flex-shrink:0;height:4rem;padding:0 1.6rem;font-size:1.3rem;letter-spacing:.02em;text-transform:uppercase;color:var(--cream);background:var(--charcoal);border:1px solid var(--charcoal);cursor:pointer}.pdp-addons__button[aria-pressed=true]{color:var(--charcoal);background:var(--cream)}.pdp-addons__button:focus-visible{outline:2px solid var(--charcoal);outline-offset:3px}.pdp-cover-banner{container:cover-banner / inline-size;background:var(--cream-dark)}.pdp-cover-banner__inner{--cover-banner-size: 13.6rem;display:flex;align-items:stretch;height:var(--cover-banner-size)}.pdp-cover-banner__text{display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:center;padding-block:1.6rem;padding-inline:3.2rem 1.6rem}@container cover-banner (width < 32rem){.pdp-cover-banner__inner{flex-direction:column-reverse;height:auto}.pdp-cover-banner__text{padding:1.6rem}.pdp-cover-banner__image{width:100%;height:auto}}.pdp-cover-banner__heading,.pdp-cover-banner__copy,.pdp-cover-banner__link{margin:0;font-size:1.4rem;line-height:1.3;letter-spacing:.01em;color:var(--charcoal)}.pdp-cover-banner__link{margin-block-start:1.2rem;text-decoration:underline;text-underline-offset:.3em}.pdp-cover-banner__image{flex-shrink:0;height:100%;aspect-ratio:1}.pdp-cover-banner__image img{display:block;width:100%;height:100%;object-fit:cover}
/*# sourceMappingURL=/cdn/shop/t/680/assets/component-playmat-picker.css.map */