.quick-add{--quick-add-background: var(--scheme-background, var(--color-background, #ffffff));--quick-add-foreground: var(--scheme-text, var(--color-text, #1a1a1a));--quick-add-primary: var(--scheme-primary-button, var(--quick-add-foreground));--quick-add-on-primary: var(--scheme-on-primary-button, var(--quick-add-background));--quick-add-shadow: var(--scheme-shadow, var(--quick-add-foreground));position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-modal, 400);display:grid;place-items:center;padding:clamp(var(--space-3),1.5vw,var(--space-6));color:var(--quick-add-foreground);overflow:hidden}.quick-add[hidden]{display:none}.quick-add__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:color-mix(in srgb,var(--quick-add-foreground) 42%,transparent);backdrop-filter:blur(12px) saturate(.88);-webkit-backdrop-filter:blur(12px) saturate(.88);opacity:0;transition:opacity var(--motion-base) var(--ease-standard)}.quick-add__dialog{position:relative;z-index:1;width:min(94vw,clamp(66rem,38vw,86rem));max-height:min(88svh,48rem);overflow:hidden;border:var(--border-width) solid color-mix(in srgb,var(--quick-add-foreground) 12%,transparent);border-radius:clamp(1rem,.82rem + .35vw,1.35rem);background:color-mix(in srgb,var(--quick-add-background) 97%,var(--quick-add-foreground));color:var(--quick-add-foreground);box-shadow:0 1.5rem 5rem color-mix(in srgb,var(--quick-add-shadow) 18%,transparent);opacity:0;transform:translateY(.8rem) scale(.985);transition:opacity var(--motion-base) var(--ease-expressive),transform var(--motion-base) var(--ease-expressive);outline:none}.quick-add.is-open .quick-add__overlay{opacity:1}.quick-add.is-open .quick-add__dialog{opacity:1;transform:translateY(0) scale(1)}.quick-add.is-closing .quick-add__overlay{opacity:0}.quick-add.is-closing .quick-add__dialog{opacity:0;transform:translateY(.8rem) scale(.985)}.quick-add__close{position:absolute;inset-block-start:clamp(.65rem,.55rem + .2vw,.85rem);inset-inline-end:clamp(.65rem,.55rem + .2vw,.85rem);z-index:5;display:grid;place-items:center;--quick-add-close-size: clamp(2.75rem, calc(var(--icon-size-sm) * 2.15), 3.65rem);width:var(--quick-add-close-size);min-width:var(--quick-add-close-size);height:var(--quick-add-close-size);padding:0;border:var(--border-width) solid color-mix(in srgb,var(--quick-add-foreground) 14%,transparent);border-radius:var(--radius-round, 999px);background:color-mix(in srgb,var(--quick-add-background) 90%,transparent);color:var(--quick-add-foreground);font-family:var(--font-body);font-size:clamp(1.3rem,var(--icon-size-lg),1.9rem);font-weight:400;line-height:1;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;transition:transform var(--motion-fast) var(--ease-expressive),background-color var(--motion-fast) var(--ease-standard),border-color var(--motion-fast) var(--ease-standard)}.quick-add__content{min-width:0;height:100%}.quick-add__layout{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);min-width:0;max-height:min(88svh,48rem)}.quick-add__media,.quick-add__purchase{min-width:0}.quick-add__media{position:relative;display:flex;align-items:flex-start;justify-content:center;min-width:0;min-height:0;padding:clamp(.65rem,.5rem + .4vw,1rem);background:color-mix(in srgb,var(--quick-add-foreground) 3.5%,var(--quick-add-background))}.quick-add__media-link{position:relative;display:grid;place-items:center;width:100%;height:auto;min-height:0;aspect-ratio:4 / 5;overflow:hidden;border-radius:clamp(.8rem,.7rem + .2vw,1rem);background:color-mix(in srgb,var(--quick-add-foreground) 4%,var(--quick-add-background));color:inherit;text-decoration:none}.quick-add__image{display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;object-position:center;transition:opacity var(--motion-fast) var(--ease-standard)}.quick-add__image-placeholder{display:grid;place-items:center;width:100%;height:100%;min-height:28rem;color:color-mix(in srgb,var(--quick-add-foreground) 38%,transparent);font-family:var(--font-display);font-size:var(--type-heading-lg)}.quick-add__purchase{display:flex;flex-direction:column;max-height:min(88svh,48rem);overflow-y:auto;overscroll-behavior:contain;padding:clamp(1.5rem,1.1rem + 1vw,2.6rem);scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--quick-add-foreground) 22%,transparent) transparent}.quick-add__header{padding-inline-end:clamp(3rem,calc(var(--quick-add-close-size) + .75rem),4.5rem);margin-block-end:clamp(var(--space-5),2vw,var(--space-7))}.quick-add__context{margin:0 0 .45rem;color:color-mix(in srgb,var(--quick-add-foreground) 60%,transparent);font-family:var(--font-body);font-style:var(--font-body-style);font-weight:620;font-size:var(--type-caption);line-height:1.2}.quick-add__title{max-width:20ch;margin:0;color:inherit;font-family:var(--font-display);font-style:var(--font-display-style);font-weight:var(--font-display-weight);font-size:var(--type-heading-md);line-height:1.08;letter-spacing:var(--tracking-heading);text-wrap:balance}.quick-add__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:.55rem;margin-block-start:.7rem;font-family:var(--font-body);font-size:var(--type-body);font-weight:650;line-height:1.2}.quick-add__price-compare{color:color-mix(in srgb,var(--quick-add-foreground) 48%,transparent);font-size:var(--type-body-sm);font-weight:var(--font-body-weight)}.quick-add__options{display:grid;gap:clamp(var(--space-4),1.2vw,var(--space-5))}.quick-add__option{min-width:0;margin:0;padding:0;border:0}.quick-add__option-title{margin:0 0 .55rem;color:inherit;font-family:var(--font-body);font-style:var(--font-body-style);font-weight:650;font-size:var(--type-body-sm);line-height:1.25}.quick-add__values{display:flex;flex-wrap:wrap;gap:.45rem}.quick-add__value{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.42rem;min-width:clamp(2.8rem,calc(var(--type-body-sm) * 2.35),4.25rem);min-height:clamp(2.75rem,calc(var(--type-body-sm) * 2.25),3.75rem);padding:clamp(.55rem,calc(var(--type-body-sm) * .45),.8rem) clamp(.8rem,calc(var(--type-body-sm) * .68),1.15rem);border:var(--border-width) solid color-mix(in srgb,var(--quick-add-foreground) 20%,transparent);border-radius:.55rem;background:color-mix(in srgb,var(--quick-add-background) 96%,var(--quick-add-foreground));color:var(--quick-add-foreground);font-family:var(--font-body);font-style:var(--font-body-style);font-weight:620;font-size:var(--type-body-sm);line-height:1;cursor:pointer;transition:transform var(--motion-fast) var(--ease-expressive),border-color var(--motion-fast) var(--ease-standard),background-color var(--motion-fast) var(--ease-standard),color var(--motion-fast) var(--ease-standard),opacity var(--motion-fast) var(--ease-standard)}.quick-add__value.is-selected{border-color:var(--quick-add-primary);background:var(--quick-add-primary);color:var(--quick-add-on-primary)}.quick-add__value.is-unavailable{color:color-mix(in srgb,var(--quick-add-foreground) 42%,transparent);border-color:color-mix(in srgb,var(--quick-add-foreground) 12%,transparent);background:color-mix(in srgb,var(--quick-add-background) 98%,var(--quick-add-foreground));text-decoration:line-through;text-decoration-thickness:var(--border-width);opacity:.72;cursor:not-allowed}.quick-add__value--color{min-width:0;padding-inline:.7rem}.quick-add__swatch{display:block;width:clamp(1rem,var(--icon-size-sm),1.5rem);height:clamp(1rem,var(--icon-size-sm),1.5rem);flex:0 0 auto;border:var(--border-width) solid color-mix(in srgb,var(--quick-add-foreground) 36%,transparent);border-radius:var(--radius-round, 999px);background:var(--quick-add-swatch, currentColor);box-shadow:0 0 0 2px color-mix(in srgb,var(--quick-add-background) 94%,transparent)}.quick-add__value.is-selected .quick-add__swatch{border-color:color-mix(in srgb,var(--quick-add-on-primary) 58%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--quick-add-on-primary) 20%,transparent)}.quick-add__status{min-height:1.35em;margin-block-start:clamp(var(--space-3),1vw,var(--space-4));color:color-mix(in srgb,var(--quick-add-foreground) 70%,transparent);font-family:var(--font-body);font-size:var(--type-caption);line-height:1.4}.quick-add__form{margin-block-start:auto;padding-block-start:clamp(var(--space-4),1.6vw,var(--space-6))}.quick-add__submit{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:clamp(3rem,var(--control-height),4.5rem);padding:0 var(--space-5);border:var(--border-width) solid var(--quick-add-primary);border-radius:.65rem;background:var(--quick-add-primary);color:var(--quick-add-on-primary);font-family:var(--font-body);font-style:var(--font-body-style);font-weight:680;font-size:var(--type-body-sm);line-height:1;cursor:pointer;transition:transform var(--motion-fast) var(--ease-expressive),opacity var(--motion-fast) var(--ease-standard),background-color var(--motion-fast) var(--ease-standard)}.quick-add__submit:disabled{opacity:.4;cursor:not-allowed}.quick-add__submit.is-loading{opacity:.62;cursor:wait}.quick-add__details-link{display:inline-flex;align-items:center;gap:.45rem;width:fit-content;margin-block-start:.9rem;color:color-mix(in srgb,var(--quick-add-foreground) 72%,transparent);font-family:var(--font-body);font-size:var(--type-label);font-weight:620;line-height:1.2;text-decoration:none}.quick-add__details-link>span:last-child{display:inline-grid;place-items:center;width:var(--icon-size-sm);height:var(--icon-size-sm);font-size:var(--icon-size-sm);line-height:1;transition:transform var(--motion-fast) var(--ease-expressive)}@media(hover:hover)and (pointer:fine){.quick-add__close:hover{transform:rotate(4deg);border-color:color-mix(in srgb,var(--quick-add-foreground) 24%,transparent)}.quick-add__value:hover:not(.is-unavailable){transform:translateY(-1px);border-color:color-mix(in srgb,var(--quick-add-foreground) 36%,transparent)}.quick-add__submit:hover:not(:disabled){transform:translateY(-1px)}.quick-add__details-link:hover{color:var(--quick-add-foreground)}.quick-add__details-link:hover>span:last-child{transform:translate(.15rem)}}@media(min-width:750px)and (max-width:1099px){.quick-add{padding:var(--space-4)}.quick-add__dialog{width:min(95vw,54rem);max-height:86svh}.quick-add__layout{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);max-height:86svh}.quick-add__media-link{max-height:calc(86svh - 2rem)}.quick-add__purchase{max-height:86svh;padding:clamp(1.25rem,2.4vw,1.8rem)}.quick-add__title{font-size:var(--type-heading-sm)}}@media(min-width:1100px){.quick-add__media-link{max-height:min(46rem,calc(88svh - 2rem))}.quick-add__dialog{width:min(90vw,clamp(64rem,56vw,72rem))}}@media(min-width:1800px){.quick-add__dialog{width:min(82vw,clamp(68rem,42vw,82rem))}.quick-add__layout{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}}@media(min-width:2600px){.quick-add__dialog{width:min(80vw,clamp(76rem,34vw,86rem));max-height:min(86svh,58rem)}.quick-add__layout,.quick-add__purchase{max-height:min(86svh,58rem)}}@media(max-width:749px){.quick-add{align-items:end;padding:0}.quick-add__overlay{backdrop-filter:blur(8px) saturate(.9);-webkit-backdrop-filter:blur(8px) saturate(.9)}.quick-add__dialog{width:100%;max-height:92svh;border-inline:0;border-block-end:0;border-radius:1.15rem 1.15rem 0 0;transform:translateY(1.25rem)}.quick-add.is-open .quick-add__dialog{transform:translateY(0)}.quick-add.is-closing .quick-add__dialog{transform:translateY(1.25rem)}.quick-add__layout{display:grid;grid-template-columns:minmax(6.75rem,31vw) minmax(0,1fr);align-items:start;max-height:92svh;overflow-y:auto;overscroll-behavior:contain;padding-block-start:3.65rem}.quick-add__media{position:sticky;top:3.65rem;align-self:start;padding:0 0 var(--space-4) var(--space-4);background:transparent}.quick-add__media-link{display:block;width:100%;min-height:0;max-height:none;aspect-ratio:4 / 5;overflow:hidden;border:var(--border-width) solid color-mix(in srgb,var(--quick-add-foreground) 10%,transparent);border-radius:.8rem;background:color-mix(in srgb,var(--quick-add-foreground) 4%,var(--quick-add-background))}.quick-add__image,.quick-add__image-placeholder{width:100%;height:100%;min-height:0;aspect-ratio:4 / 5;border-radius:0;object-fit:contain}.quick-add__image-placeholder{display:grid;place-items:center}.quick-add__purchase{max-height:none;overflow:visible;padding:0 var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom)) var(--space-3)}.quick-add__header{min-height:0;margin:0 0 var(--space-4);padding-inline-end:2.6rem}.quick-add__context{margin-block-end:.3rem;font-size:var(--type-caption)}.quick-add__title{max-width:none;font-size:var(--type-body-lg);line-height:1.15}.quick-add__price{margin-block-start:.42rem;font-size:var(--type-body-sm)}.quick-add__options{gap:var(--space-4)}.quick-add__option-title{margin-block-end:.45rem;font-size:var(--type-caption)}.quick-add__values{gap:.35rem}.quick-add__value{min-width:2.35rem;min-height:2.5rem;padding:.45rem .58rem;font-size:var(--type-caption)}.quick-add__value--color{padding-inline:.55rem}.quick-add__swatch{width:clamp(.88rem,var(--icon-size-xs),1.1rem);height:clamp(.88rem,var(--icon-size-xs),1.1rem)}.quick-add__status{min-height:1.1rem;margin-block-start:var(--space-3)}.quick-add__form{position:static;margin:0;padding-block-start:var(--space-4)}.quick-add__submit{min-height:var(--control-height-sm);padding-inline:var(--space-3);font-size:var(--type-label)}.quick-add__details-link{margin-block-start:.65rem;font-size:var(--type-caption)}}@media(max-width:389px){.quick-add__layout{grid-template-columns:minmax(5.75rem,30vw) minmax(0,1fr)}.quick-add__media{padding-inline-start:var(--space-3)}.quick-add__purchase{padding-inline:var(--space-3) var(--space-3)}.quick-add__header{padding-inline-end:2.4rem}.quick-add__value{min-width:2.15rem;padding-inline:.48rem}.quick-add__value-label{max-width:7rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}body.quick-add-open{overflow:hidden}.quick-add__close:focus-visible,.quick-add__media-link:focus-visible,.quick-add__value:focus-visible,.quick-add__submit:focus-visible,.quick-add__details-link:focus-visible{outline:var(--focus-ring-width, 2px) solid currentColor;outline-offset:var(--focus-ring-offset, 3px)}@media(prefers-reduced-motion:reduce){.quick-add__overlay,.quick-add__dialog,.quick-add__close,.quick-add__image,.quick-add__value,.quick-add__submit,.quick-add__details-link>span:last-child{transition:none}.quick-add__close:hover,.quick-add__value:hover,.quick-add__submit:hover,.quick-add__details-link:hover>span:last-child{transform:none}}@media(forced-colors:active){.quick-add__dialog,.quick-add__close,.quick-add__value,.quick-add__submit,.quick-add__swatch{border-color:CanvasText}}
/*# sourceMappingURL=/cdn/shop/t/4/assets/quick-add.css.map */