quick-add-compact{display:block}quick-add-compact[hidden]{display:none}.quick-add__panel{--quick-add-gap: 1.6rem;color:rgb(var(--color-foreground));background-color:rgb(var(--color-background));text-align:start;outline:none}.quick-add__header{display:flex;align-items:flex-start;gap:1.2rem}.quick-add__media{flex:none;width:6rem;aspect-ratio:3 / 4;overflow:hidden;border-radius:var(--small-blocks-radius, .4rem);background-color:rgba(var(--color-foreground),.08)}.quick-add__image{display:block;width:100%;height:100%;object-fit:cover}.quick-add__heading{flex:1 1 auto;min-width:0}.quick-add__title{--line-clamp: 2;margin:0;font-size:1.6rem;font-weight:600;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--line-clamp);-webkit-box-orient:vertical}.quick-add__price{margin:.6rem 0 0;font-size:1.5rem;line-height:1.3}.quick-add__price-sale,.quick-add__price-compare{unicode-bidi:isolate}.quick-add__price-sale{color:rgb(var(--color-product-price-sale))}.quick-add__price-compare{margin-inline-start:.4rem;opacity:.6}.quick-add__close{flex:none;display:flex;align-items:center;justify-content:center;width:4rem;height:4rem;margin-block-start:-.8rem;margin-inline-end:-.8rem;padding:0;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer}.quick-add__option{margin-block-start:var(--quick-add-gap)}.quick-add__label{margin:0 0 .8rem;font-size:1.4rem;font-weight:600;line-height:1.4}.quick-add__label-hint{font-size:1.2rem;font-weight:400;color:rgba(var(--color-foreground),.6)}.quick-add__values{display:flex;flex-wrap:wrap;gap:.8rem}.quick-add__sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--quick-add-size-min, 4.4rem),1fr));gap:.8rem}.quick-add__sizes--wide{--quick-add-size-min: 9rem}.quick-add__value,.quick-add__size{position:relative;display:inline-flex;align-items:center;justify-content:center;height:auto;margin:0;font:inherit;font-size:1.4rem;line-height:1.2;letter-spacing:normal;text-transform:none;white-space:normal;color:rgb(var(--color-foreground));background-color:transparent;border:1px solid rgba(var(--color-foreground),.6);opacity:1;cursor:pointer;transition:border-color var(--duration-default, .2s),background-color var(--duration-default, .2s),color var(--duration-default, .2s);-webkit-tap-highlight-color:transparent}.quick-add__value{min-height:4rem;padding:.4rem 1.8rem;border-radius:999px}.quick-add__value[aria-pressed=true]{color:rgb(var(--color-background));background-color:rgb(var(--color-foreground));border-color:rgb(var(--color-foreground));font-weight:600}.quick-add__value.is-unavailable:not([aria-pressed=true]){color:rgba(var(--color-foreground),.5);border-color:rgba(var(--color-foreground),.3)}.quick-add__size{min-height:4.4rem;padding:.4rem;font-weight:600;text-align:center;border-radius:var(--small-blocks-radius, .4rem)}.quick-add__size:disabled{color:rgba(var(--color-foreground),.35);border-color:rgba(var(--color-foreground),.25);cursor:not-allowed}.quick-add__size:disabled:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:linear-gradient(to bottom left,transparent calc(50% - .05rem),rgba(var(--color-foreground),.35) 50%,transparent calc(50% + .05rem))}.quick-add__size.btn--loading .quick-add__size-text{opacity:0}.quick-add__size.btn--loading:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;width:1.8rem;height:1.8rem;margin:auto;border:.2rem solid currentColor;border-inline-end-color:transparent;border-radius:50%;animation:spin .8s linear infinite}.quick-add__size.is-added{color:rgb(var(--color-button-text));background-color:rgb(var(--color-button));border-color:rgb(var(--color-button))}@media(hover:hover){.quick-add__value:not([aria-pressed=true]):hover,.quick-add__size:not(:disabled):hover{border-color:rgb(var(--color-foreground))}.quick-add__close:hover svg{transform:rotate(180deg)}.quick-add__details:hover{text-decoration:underline}}.quick-add__close svg{transition:transform .3s}.quick-add__value:focus-visible,.quick-add__size:focus-visible,.quick-add__close:focus-visible,.quick-add__details:focus-visible{outline:2px solid rgb(var(--color-foreground));outline-offset:2px}.quick-add__status{margin:1.2rem 0 0;font-size:1.4rem;font-weight:600;line-height:1.4}.quick-add__status:empty{display:block;margin:0}.quick-add__status.is-error{font-weight:400;color:rgb(var(--color-product-price-sale))}quick-add-compact.is-added .quick-add__status:before{content:"";display:inline-block;width:.8rem;height:1.4rem;margin-inline-end:.8rem;border:solid rgb(var(--color-button));border-width:0 .25rem .25rem 0;transform:translateY(-.2rem) rotate(45deg)}.quick-add__details{display:inline-flex;align-items:center;gap:.2rem;margin-block-start:1.6rem;font-size:1.4rem;font-weight:600;color:rgb(var(--color-button));text-decoration:none}quick-add-compact[data-mode=sheet]{position:fixed;top:0;right:0;bottom:0;left:0;z-index:999;display:flex;flex-direction:column;justify-content:flex-end}quick-add-compact[data-mode=sheet][hidden]{display:none}quick-add-compact[data-mode=sheet] .quick-add__overlay{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#00000080;opacity:0;transition:opacity .3s ease;cursor:pointer}quick-add-compact[data-mode=sheet][active] .quick-add__overlay{opacity:1}quick-add-compact[data-mode=sheet] .quick-add__panel{position:relative;width:100%;max-height:85vh;max-height:85dvh;overflow-y:auto;overscroll-behavior:contain;padding:2.4rem 1.6rem calc(2rem + env(safe-area-inset-bottom) + var(--quick-add-bottom-inset, 0px));border-radius:1.6rem 1.6rem 0 0;transform:translateY(100%);transition:transform .4s cubic-bezier(.3,1,.3,1)}quick-add-compact[data-mode=sheet][active] .quick-add__panel{transform:none}quick-add-compact[data-mode=sheet] .quick-add__panel:before{content:"";position:absolute;top:.8rem;left:50%;width:4rem;height:.4rem;margin-left:-2rem;border-radius:.2rem;background-color:rgba(var(--color-foreground),.3)}quick-add-compact[data-mode=popover]{position:fixed;top:var(--quick-add-top, 50%);left:var(--quick-add-left, 50%);z-index:999;width:min(32rem,calc(100vw - 1.6rem))}quick-add-compact[data-mode=popover] .quick-add__overlay{display:none}quick-add-compact[data-mode=popover] .quick-add__panel{--quick-add-gap: 1.2rem;--quick-add-size-min: 4rem;max-height:calc(100vh - 1.6rem);overflow-y:auto;overscroll-behavior:contain;padding:1.6rem;border:1px solid rgba(var(--color-foreground),.25);border-radius:var(--small-blocks-radius, .4rem);box-shadow:0 .8rem 2.4rem #00000040;opacity:0;transform:translateY(.8rem);transition:transform .25s ease,opacity .25s ease}quick-add-compact[data-mode=popover][active] .quick-add__panel{opacity:1;transform:none}quick-add-compact[data-mode=popover] .quick-add__media{width:4.8rem}quick-add-compact[data-mode=popover] .quick-add__title{font-size:1.4rem}quick-add-compact[data-mode=popover] .quick-add__price{margin-top:.4rem;font-size:1.4rem}quick-add-compact[data-mode=popover] .quick-add__close{width:3.2rem;height:3.2rem;margin:-.6rem}quick-add-compact[data-mode=popover] .quick-add__label{font-size:1.3rem}quick-add-compact[data-mode=popover] .quick-add__size{min-height:4rem;font-size:1.3rem}quick-add-compact[data-mode=popover] .quick-add__value{min-height:3.6rem;padding:.4rem 1.4rem;font-size:1.3rem}quick-add-compact[data-mode=popover] .quick-add__details{margin-block-start:1.2rem;font-size:1.3rem}@media(prefers-reduced-motion:reduce){quick-add-compact .quick-add__panel,quick-add-compact .quick-add__overlay{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/64/assets/component-quick-add-compact.css.map */