.personalized-dog-picker{--dog-picker-accent: #c5821f;--dog-picker-border: rgba(var(--color-foreground), .16);--dog-picker-subtle: rgba(var(--color-foreground), .62);container:personalized-dog-picker / inline-size;display:block;margin:2rem 0}.personalized-dog-picker__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1.6rem;margin-bottom:1.2rem}.personalized-dog-picker__title{margin-bottom:.3rem}.personalized-dog-picker__help,.personalized-dog-picker__count,.personalized-dog-picker__result-count,.personalized-dog-picker__message,.personalized-dog-picker__empty,.personalized-dog-picker__setup{margin:0;color:var(--dog-picker-subtle);font-size:1.3rem;line-height:1.4}.personalized-dog-picker__count{flex:0 0 auto;margin-top:.2rem}.personalized-dog-picker__slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:0 0 1.4rem;padding:0;border:0}@container personalized-dog-picker (min-width: 84rem){.personalized-dog-picker__slots{grid-template-columns:repeat(4,minmax(0,1fr))}}.personalized-dog-picker__slot{position:relative;min-width:0}.personalized-dog-picker__slot-number{margin-bottom:.4rem;text-align:center;font-size:1.2rem}.personalized-dog-picker__slot-main{display:grid;align-content:start;justify-items:center;width:100%;min-height:12.8rem;padding:1rem .8rem 1.2rem;border:.1rem solid var(--dog-picker-border);border-radius:.8rem;background:rgb(var(--color-background));color:rgb(var(--color-foreground));cursor:pointer;text-align:center}.personalized-dog-picker__slot[data-empty=false] .personalized-dog-picker__slot-main{border-bottom-right-radius:0;border-bottom-left-radius:0}.personalized-dog-picker__slot-main:hover,.personalized-dog-picker__slot.is-active .personalized-dog-picker__slot-main{border-color:var(--dog-picker-accent)}.personalized-dog-picker__slot:has(.personalized-dog-picker__slot-main:hover) .personalized-dog-picker__slot-actions,.personalized-dog-picker__slot.is-active .personalized-dog-picker__slot-actions{border-color:var(--dog-picker-accent)}.personalized-dog-picker__slot[data-empty=true] .personalized-dog-picker__slot-main{border-style:dashed}.personalized-dog-picker__slot-content{display:grid;justify-items:center;min-width:0}.personalized-dog-picker__slot-image{display:grid;place-items:center;width:6.4rem;height:5.8rem;margin-bottom:.8rem}.personalized-dog-picker__slot-image img{width:100%;height:100%;object-fit:contain}.personalized-dog-picker__slot-plus{color:rgba(var(--color-foreground),.52);font-size:3rem;line-height:1}.personalized-dog-picker__slot-label,.personalized-dog-picker__option-title{display:block;max-width:100%;color:rgb(var(--color-foreground));font-size:1.25rem;line-height:1.25;overflow-wrap:anywhere}.personalized-dog-picker__slot-detail,.personalized-dog-picker__option-detail{display:block;margin-top:.2rem;color:var(--dog-picker-subtle);font-size:1.15rem;line-height:1.25;overflow-wrap:anywhere}.personalized-dog-picker__slot-actions{display:none;grid-template-columns:minmax(3.8rem,1fr) minmax(3.8rem,1fr) minmax(6.8rem,1.35fr);gap:.6rem;padding:.8rem;border:.1rem solid var(--dog-picker-border);border-top:0;border-bottom-right-radius:.8rem;border-bottom-left-radius:.8rem;background:rgba(var(--color-foreground),.025)}.personalized-dog-picker__slot-action,.personalized-dog-picker__slot-remove{display:grid;min-width:0;min-height:3.8rem;padding:0;border:.1rem solid var(--dog-picker-border);border-radius:.6rem;background:rgb(var(--color-background));color:rgb(var(--color-foreground));cursor:pointer;place-items:center}.personalized-dog-picker__slot-remove{grid-auto-flow:column;grid-auto-columns:max-content;justify-content:center;gap:.3rem;padding:0 .7rem;color:var(--dog-picker-accent);font-size:1.1rem;line-height:1}.personalized-dog-picker__slot[data-empty=false] .personalized-dog-picker__slot-actions{display:grid}.personalized-dog-picker__slot-action[disabled]{opacity:.35;cursor:not-allowed}.personalized-dog-picker__slot-action svg,.personalized-dog-picker__slot-remove svg{width:1.2rem;height:1.2rem}.personalized-dog-picker__slot-remove span{overflow:hidden;text-overflow:ellipsis}.personalized-dog-picker__slot-action[data-dog-slot-move=left] svg{transform:rotate(90deg)}.personalized-dog-picker__slot-action[data-dog-slot-move=right] svg{transform:rotate(-90deg)}.personalized-dog-picker__controls{display:grid;gap:.8rem;margin-bottom:1rem;padding:.8rem 0;background:rgb(var(--color-background))}.personalized-dog-picker__search{display:flex;align-items:center;gap:.8rem;min-height:4.4rem;padding:0 1.2rem;border:.1rem solid var(--dog-picker-border);border-radius:.8rem}.personalized-dog-picker__search .svg-wrapper{width:1.8rem;height:1.8rem;color:var(--dog-picker-subtle)}.personalized-dog-picker__search input{width:100%;min-width:0;border:0;background:transparent;color:rgb(var(--color-foreground));font:inherit}.personalized-dog-picker__search input:focus{outline:0}.personalized-dog-picker__letters{display:flex;flex-wrap:wrap;gap:.4rem}.personalized-dog-picker__filter{min-width:3.2rem;min-height:3.2rem;padding:.5rem .8rem;border:.1rem solid var(--dog-picker-border);border-radius:.6rem;background:rgb(var(--color-background));color:rgb(var(--color-foreground));cursor:pointer;font-size:1.2rem;line-height:1}.personalized-dog-picker__filter.is-active{border-color:rgb(var(--color-foreground));background:rgb(var(--color-foreground));color:rgb(var(--color-background))}.personalized-dog-picker__result-count{text-align:right}.personalized-dog-picker__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem;max-height:clamp(28rem,50vh,46rem);overflow:auto;padding:.2rem .2rem .4rem}.personalized-dog-picker__option[hidden]{display:none}.personalized-dog-picker__option-button{position:relative;display:grid;justify-items:center;width:100%;min-height:14rem;padding:1rem .8rem;border:.1rem solid var(--dog-picker-border);border-radius:.8rem;background:rgb(var(--color-background));color:rgb(var(--color-foreground));cursor:pointer;text-align:center}.personalized-dog-picker__option-button:hover,.personalized-dog-picker__option.is-selected .personalized-dog-picker__option-button{border-color:var(--dog-picker-accent)}.personalized-dog-picker__option-media{display:grid;place-items:center;width:7.2rem;height:6.4rem;margin-bottom:.8rem}.personalized-dog-picker__option-media img{width:100%;height:100%;object-fit:contain}.personalized-dog-picker__option-placeholder{display:grid;place-items:center;width:5.2rem;height:5.2rem;border-radius:50%;background:rgba(var(--color-foreground),.07);color:var(--dog-picker-subtle);font-family:var(--font-heading-family);font-size:2rem}.personalized-dog-picker__option-add{position:absolute;top:.8rem;right:.8rem;display:grid;place-items:center;width:2.8rem;height:2.8rem;padding:0;border:.1rem solid var(--dog-picker-border);border-radius:50%;font-size:2rem;line-height:1}.personalized-dog-picker__option.is-selected .personalized-dog-picker__option-add{border-color:var(--dog-picker-accent);background:var(--dog-picker-accent);color:#fff}.personalized-dog-picker__toast{position:fixed;left:50%;bottom:max(2rem,env(safe-area-inset-bottom));z-index:1000;width:min(36rem,calc(100vw - 3.2rem));padding:1.4rem;border:.1rem solid rgba(17,17,17,.16);border-radius:.8rem;background:#fff;box-shadow:0 1.2rem 3.4rem #1111112e;opacity:0;pointer-events:none;transform:translate(-50%,.8rem);transition:opacity .16s ease,transform .16s ease}.personalized-dog-picker__toast[hidden]{display:none}.personalized-dog-picker__toast.is-visible{opacity:1;transform:translate(-50%)}.personalized-dog-picker__toast-heading{margin-bottom:1rem;padding-bottom:.9rem;border-bottom:.1rem solid rgba(17,17,17,.12);color:#111;font-size:1.8rem;font-weight:700;line-height:1.15}.personalized-dog-picker__toast-list{display:grid;gap:.6rem;margin:0;padding:0;list-style:none}.personalized-dog-picker__toast-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7rem;align-items:center;color:#11111194;font-size:1.25rem;line-height:1.25}.personalized-dog-picker__toast-number{display:grid;place-items:center;width:2.1rem;height:2.1rem;padding:0;border-radius:50%;background:#11111114;color:#11111194;font-size:1.1rem;font-weight:700;line-height:0}.personalized-dog-picker__toast-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.personalized-dog-picker__toast-item[data-empty=false]{color:#111}.personalized-dog-picker__toast-item[data-empty=false] .personalized-dog-picker__toast-number{background:#d68a18;color:#fff}.personalized-dog-picker__empty,.personalized-dog-picker__setup,.personalized-dog-picker__message{margin-top:1rem}.personalized-dog-picker__message:not(:empty){color:rgb(var(--color-foreground))}@media screen and (max-width:989px){.personalized-dog-picker__slots,.personalized-dog-picker__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media screen and (max-width:749px){.personalized-dog-picker__header{display:block}.personalized-dog-picker__count{margin-top:.6rem}.personalized-dog-picker__slot-main,.personalized-dog-picker__option-button{min-height:12rem}.personalized-dog-picker__controls{gap:.6rem}.personalized-dog-picker__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;max-height:clamp(28rem,58vh,52rem)}.personalized-dog-picker__option-button{min-height:10.2rem;padding:.8rem .4rem}.personalized-dog-picker__option-media{width:5.2rem;height:4.8rem;margin-bottom:.5rem}.personalized-dog-picker__option-title{font-size:1.05rem;line-height:1.15}.personalized-dog-picker__option-add{top:.5rem;right:.5rem;width:2.4rem;height:2.4rem;font-size:1.7rem}.personalized-dog-picker__toast{bottom:max(10rem,calc(env(safe-area-inset-bottom) + 10rem));width:calc(100vw - 2rem)}.personalized-dog-picker__letters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.2rem}}
/*# sourceMappingURL=/cdn/shop/t/4/assets/component-personalized-dog-picker.css.map */