.cs-sbp{--cs-bg: var(--cs-bg-set, #F7F4EF);--cs-ink: var(--cs-ink-set, #2D2D2D);--cs-accent: var(--cs-accent-set, #9F785A);--cs-green: var(--cs-green-set, #314528);--cs-card: #ffffff;--cs-ease: cubic-bezier(.22,.8,.24,1);--cs-spring: cubic-bezier(.34,1.56,.64,1);--cs-size: clamp(230px, 23vw, 290px);position:relative;background:var(--cs-bg);color:var(--cs-ink);padding:var(--cs-pt, 52px) 20px var(--cs-pb, 52px);font-family:var(--body-font, sans-serif);overflow:hidden}.cs-sbp *,.cs-sbp *:before,.cs-sbp *:after{box-sizing:border-box}.cs-sbp .cs__head{text-align:center;max-width:620px;margin:0 auto}.cs-sbp .cs__eyebrow{margin:0 0 8px;font-family:var(--body-font, sans-serif);font-weight:800;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cs-accent)}.cs-sbp .cs__title{margin:0;font-family:var(--heading-font, serif);font-weight:600;letter-spacing:-.01em;font-size:clamp(26px,3vw,36px);line-height:1.15;color:var(--cs-ink)}.cs-sbp .cs__switch{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;margin:20px auto 0;padding:5px;border-radius:999px;background:var(--cs-card);box-shadow:0 1px #2d2d2d0a,0 8px 24px #2d2d2d14}.cs-sbp .cs__thumb{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;background:var(--cs-accent);box-shadow:0 6px 14px var(--cs-accent-55);transition:transform .55s var(--cs-spring)}.cs-sbp[data-pet=dog] .cs__thumb{transform:translate(100%)}.cs-sbp .cs__opt{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:108px;padding:10px 20px;border:0;background:none;cursor:pointer;border-radius:999px;font-family:var(--body-font, sans-serif);font-weight:800;font-size:15px;letter-spacing:.02em;color:var(--cs-ink);transition:color .35s ease;-webkit-tap-highlight-color:transparent}.cs-sbp .cs__opt svg{width:20px;height:20px;transition:transform .5s var(--cs-spring)}.cs-sbp .cs__opt[aria-checked=true]{color:#fff}.cs-sbp .cs__opt[aria-checked=true] svg{transform:rotate(-10deg) scale(1.12)}.cs-sbp .cs__opt:focus-visible{outline:2px solid var(--cs-ink);outline-offset:3px}.cs-sbp .cs__stage{display:grid;grid-template-columns:1fr var(--cs-size) 1fr;align-items:center;gap:clamp(20px,3.4vw,52px);max-width:1060px;margin:28px auto 0}.cs-sbp .cs__col{display:flex;flex-direction:column;gap:18px}.cs-sbp .cs__col--left{align-items:flex-end}.cs-sbp .cs__col--right{align-items:flex-start}.cs-sbp .cs__portal{position:relative;width:var(--cs-size);aspect-ratio:1}.cs-sbp .cs__ring{position:absolute;top:-12px;right:-12px;bottom:-12px;left:-12px;border-radius:50%;border:1.5px dashed var(--cs-accent-66);animation:cs-spin 50s linear infinite}.cs-sbp .cs__ring:after{content:"";position:absolute;top:50%;left:-5px;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--cs-accent)}.cs-sbp .cs__window{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 50% 38%,#fff 0%,#fff 46%,var(--cs-accent-1f) 100%);box-shadow:inset 0 -14px 30px var(--cs-accent-22),0 18px 40px #2d2d2d14;-webkit-mask-image:-webkit-radial-gradient(white,black)}.cs-sbp .cs__pet{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:end center;transform:translateY(105%);opacity:0}.cs-sbp .cs__pet.is-current{transform:none;opacity:1}.cs-sbp .cs__pet.is-entering{animation:cs-in .75s var(--cs-spring) both}.cs-sbp .cs__pet.is-leaving{animation:cs-out .36s cubic-bezier(.5,0,.75,0) both}.cs-sbp .cs__pet svg,.cs-sbp .cs__pet img{width:100%;height:100%;display:block}.cs-sbp .cs__pet img{object-fit:cover;object-position:center bottom}.cs-sbp .cs__bob{width:100%;height:100%;transform-origin:50% 100%;animation:cs-breathe 4.2s ease-in-out infinite}.cs-sbp .cs__tilt{width:100%;height:100%;transform-origin:50% 80%;transform:rotate(var(--cs-tilt, 0deg));transition:transform .6s var(--cs-spring)}.cs-sbp .cs-svg .head{transform-box:fill-box;transform-origin:50% 90%}.cs-sbp .cs-svg .eye{transform-box:fill-box;transform-origin:center;animation:cs-blink 5.2s infinite}.cs-sbp .cs-svg .eyes{transform:translate(var(--cs-lx, 0px),var(--cs-ly, 0px));transition:transform .25s ease-out}.cs-sbp .cs-svg .ear{transform-box:fill-box}.cs-sbp .cs-svg .ear--l{transform-origin:80% 100%;animation:cs-earl 7s ease-in-out infinite}.cs-sbp .cs-svg .ear--r{transform-origin:20% 100%;animation:cs-earr 7s ease-in-out 1.3s infinite}.cs-sbp .cs-svg .tongue{transform-box:fill-box;transform-origin:50% 0;animation:cs-pant .9s ease-in-out infinite}.cs-sbp .is-happy .cs-svg .ear--l,.cs-sbp .is-happy .cs-svg .ear--r{animation-duration:.9s}.cs-sbp .cs__item{position:relative;display:flex;align-items:center;gap:14px;width:100%;max-width:300px;padding:10px 14px 10px 10px;border-radius:999px;color:inherit;text-decoration:none;background:transparent;transition:background .35s ease,box-shadow .35s ease,transform .45s var(--cs-spring);opacity:0;transform:translateY(12px);-webkit-tap-highlight-color:transparent}.cs-sbp .cs__col--left .cs__item{flex-direction:row-reverse;text-align:right;padding:10px 10px 10px 14px}.cs-sbp.is-visible .cs__item{opacity:1;transform:none;transition:opacity .6s ease,transform .6s var(--cs-ease),background .35s ease,box-shadow .35s ease}.cs-sbp.is-visible .cs__item[data-i="1"]{transition-delay:.2s,.2s,0ms,0ms}.cs-sbp.is-visible .cs__item[data-i="2"]{transition-delay:.28s,.28s,0ms,0ms}.cs-sbp.is-visible .cs__item[data-i="3"]{transition-delay:.36s,.36s,0ms,0ms}.cs-sbp.is-visible .cs__item[data-i="4"]{transition-delay:.44s,.44s,0ms,0ms}.cs-sbp.is-visible .cs__item[data-i="5"]{transition-delay:.52s,.52s,0ms,0ms}.cs-sbp.is-visible .cs__item[data-i="6"]{transition-delay:.6s,.6s,0ms,0ms}.cs-sbp .cs__icon{position:relative;flex:0 0 auto;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--cs-card);color:var(--cs-accent);box-shadow:0 6px 18px #2d2d2d12;transition:background .35s ease,color .35s ease,transform .5s var(--cs-spring),box-shadow .35s ease}.cs-sbp .cs__icon svg{width:26px;height:26px}.cs-sbp .cs__icon .for-dog,.cs-sbp[data-pet=dog] .cs__icon .for-cat{display:none}.cs-sbp[data-pet=dog] .cs__icon .for-dog{display:block}.cs-sbp .cs__txt{min-width:0}.cs-sbp .cs__label{display:block;font-family:var(--body-font, sans-serif);font-weight:800;font-size:15.5px;line-height:1.25}.cs-sbp .cs__meta{display:inline-flex;align-items:center;gap:6px;margin-top:3px;font-size:13px;font-weight:600;color:var(--cs-accent);opacity:.9}.cs-sbp .cs__col--left .cs__meta{flex-direction:row-reverse}.cs-sbp .cs__arrow{width:14px;height:14px;transition:transform .4s var(--cs-spring)}.cs-sbp .cs__col--left .cs__arrow{transform:scaleX(-1)}.cs-sbp .cs__soon{display:none}.cs-sbp .cs__item.is-empty{cursor:default}.cs-sbp .cs__item.is-empty .cs__go{display:none}.cs-sbp .cs__item.is-empty .cs__soon{display:inline}.cs-sbp .cs__item.is-empty .cs__arrow{display:none}.cs-sbp .cs__item.is-empty .cs__icon{opacity:.55}.cs-sbp .cs__item.is-swap .cs__txt{animation:cs-swap .5s var(--cs-ease)}.cs-sbp .cs__item.is-swap .cs__icon{animation:cs-pop .55s var(--cs-spring)}.cs-sbp .cs__item.is-active:not(.is-empty),.cs-sbp .cs__item:focus-visible{background:var(--cs-card);box-shadow:0 10px 28px #2d2d2d14}.cs-sbp .cs__item.is-active:not(.is-empty) .cs__icon,.cs-sbp .cs__item:focus-visible .cs__icon{background:var(--cs-accent);color:#fff;transform:rotate(-8deg) scale(1.06);box-shadow:none}.cs-sbp .cs__col--right .cs__item.is-active .cs__arrow{transform:translate(4px)}.cs-sbp .cs__col--left .cs__item.is-active .cs__arrow{transform:scaleX(-1) translate(4px)}.cs-sbp .cs__item:focus-visible{outline:2px solid var(--cs-accent);outline-offset:2px}.cs-sbp .cs__cta{text-align:center;margin-top:26px}.cs-sbp .cs__btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:999px;background:var(--cs-ink);color:var(--cs-bg);text-decoration:none;font-family:var(--body-font, sans-serif);font-weight:800;font-size:14px;letter-spacing:.02em;transition:background .3s ease,transform .4s var(--cs-spring)}.cs-sbp .cs__btn:hover{background:var(--cs-green);transform:translateY(-2px)}.cs-sbp .cs__btn svg{width:14px;height:14px}@keyframes cs-in{0%{transform:translateY(105%);opacity:1}to{transform:none;opacity:1}}@keyframes cs-out{0%{transform:none;opacity:1}to{transform:translateY(105%);opacity:1}}@keyframes cs-breathe{0%,to{transform:scale(1)}50%{transform:scale(1.012,.992)}}@keyframes cs-blink{0%,93%,to{transform:scaleY(1)}95.5%{transform:scaleY(.08)}}@keyframes cs-earl{0%,84%,to{transform:rotate(0)}88%{transform:rotate(-7deg)}92%{transform:rotate(2deg)}}@keyframes cs-earr{0%,84%,to{transform:rotate(0)}88%{transform:rotate(7deg)}92%{transform:rotate(-2deg)}}@keyframes cs-pant{0%,to{transform:scaleY(1)}50%{transform:scaleY(1.12)}}@keyframes cs-spin{to{transform:rotate(360deg)}}@keyframes cs-swap{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes cs-pop{0%{transform:scale(.6) rotate(-20deg)}to{transform:none}}@media(max-width:849px){.cs-sbp{--cs-size: min(54vw, 210px)}.cs-sbp .cs__eyebrow{margin-bottom:6px}.cs-sbp .cs__switch{margin-top:16px}.cs-sbp .cs__opt{min-width:96px;padding:9px 16px;font-size:14px}.cs-sbp .cs__stage{grid-template-columns:1fr 1fr;gap:10px;margin-top:24px;align-items:stretch}.cs-sbp .cs__portal{grid-column:1 / -1;grid-row:1;margin:0 auto 20px}.cs-sbp .cs__col{display:contents}.cs-sbp .cs__item,.cs-sbp .cs__col--left .cs__item{flex-direction:row;text-align:left;gap:10px;max-width:none;padding:10px;border-radius:18px;background:var(--cs-card);box-shadow:0 4px 16px #2d2d2d0d}.cs-sbp .cs__col--left .cs__meta{flex-direction:row}.cs-sbp .cs__col--left .cs__arrow{transform:none}.cs-sbp .cs__icon{width:40px;height:40px;box-shadow:none;background:var(--cs-accent-17)}.cs-sbp .cs__icon svg{width:21px;height:21px}.cs-sbp .cs__label{font-size:13.5px}.cs-sbp .cs__meta{font-size:12px;margin-top:1px}.cs-sbp .cs__item.is-active:not(.is-empty) .cs__icon{transform:none}}@media(prefers-reduced-motion:reduce){.cs--calm .cs__ring,.cs--calm .cs__bob,.cs--calm .cs-svg .eye,.cs--calm .cs-svg .ear,.cs--calm .cs-svg .tongue{animation:none!important}}.cs-sbp:not(.is-live) .cs__ring,.cs-sbp:not(.is-live) .cs__bob,.cs-sbp:not(.is-live) .cs-svg .eye,.cs-sbp:not(.is-live) .cs-svg .ear,.cs-sbp:not(.is-live) .cs-svg .tongue{animation:none}
/*# sourceMappingURL=/cdn/shop/t/34/assets/cottle-shop-by-pet.css.map */