@import"https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap";*{margin:0;padding:0;border:0;font-size:inherit;text-decoration:none;font:inherit;color:inherit}article,figure,footer,header,menu,nav,section{display:block}body{line-height:1}body *{max-width:100%}ol,ul{list-style:none}input:focus{outline:none}:root{font-size:16px;font-family:Kumbh Sans,sans-serif;font-weight:400}body{color:#1d2025;background-color:#fff}#app{margin-inline:clamp(1rem,12%,10rem)}@media (max-width: 80em){#app{margin-inline:clamp(1rem,8%,9.6rem)}}@media (max-width: 50em){#app{margin-inline:0}}.button{background-color:#ff7d1a;font-weight:700;color:#fff;border-radius:.75rem;transition:all .3s;padding:1.25rem .5rem;display:flex;align-items:center;justify-content:center;gap:1rem;cursor:pointer}.button .icon{filter:saturate(0%) brightness(0%) invert(100%) opacity(75%);filter:url('data:image/svg+xml;utf8,      <svg xmlns="http://www.w3.org/2000/svg">        <filter id="recolor" color-interpolation-filters="sRGB">          <feColorMatrix type="matrix" values="            0 0 0 0 1            0 0 0 0 1            0 0 0 0 1            0 0 0 1 0          "/>        </filter>      </svg>      #recolor');max-width:20px;height:20px}.button:hover{background-color:#ffa866}.collapsing-col,.even-cols{display:flex;align-items:center;gap:0}.even-cols *{flex:1}@media (max-width: 50rem){.collapsing-col,.even-cols{flex-direction:column}}.card{background-color:#f7f8fd;border-radius:.75rem}.title{font-weight:700;font-size:clamp(2rem,3vw,3rem);line-height:1.2}.subtitle{color:#68707d;line-height:1.5}.faded{color:#b6bcc8}.xs{font-size:.615rem}.sm{font-size:.75rem}.md{font-size:1rem}.lg{font-size:1.125rem}.xl{font-size:1.5rem}.xxl{font-size:clamp(2rem,3vw,3rem)}.bold{font-weight:700}.primary{color:#ff7d1a;filter:saturate(0%) brightness(0%) invert(55%) opacity(75%);filter:url('data:image/svg+xml;utf8,      <svg xmlns="http://www.w3.org/2000/svg">        <filter id="recolor" color-interpolation-filters="sRGB">          <feColorMatrix type="matrix" values="            0 0 0 0 1            0 0 0 0 0.4901960784            0 0 0 0 0.1019607843            0 0 0 1 0          "/>        </filter>      </svg>      #recolor')}.strike{text-decoration:line-through}a{color:#68707d;transition:all .3s}a:hover{color:#1d2025}p{max-width:50ch}span{vertical-align:middle}.label{color:#ff7d1a;background-color:#ffede0;padding:.0875rem .325rem;border-radius:5px;font-weight:700;margin-inline:1rem}.topbar{display:flex;align-items:center;gap:0;position:relative;gap:2.5rem;border-bottom:2px solid #f7f8fd}.topbar .menu{display:none;cursor:pointer}.topbar .logo{cursor:pointer}@media (max-width: 70rem){.topbar{gap:1rem}}@media (max-width: 50rem){.topbar{gap:1rem;padding:.5rem 1.5rem;border-bottom:none}.topbar .menu{display:inline-flex}.topbar .spacer{flex-grow:1}}.topbar nav{flex-grow:1;margin-left:2rem}.topbar nav ul{display:flex;gap:1.5rem}.topbar nav ul li{padding-block:3rem 2.5rem}@media (max-width: 70em){.topbar nav ul li{padding-block:2rem 1.5rem}}.topbar nav ul li:hover{border-bottom:solid #ff4500 5px;margin-bottom:-5px}@media (max-width: 70rem){.topbar nav{margin-left:0}.topbar nav ul{gap:1rem}}@media (max-width: 50rem){.topbar nav{display:none}}.topbar .cart{position:relative;min-width:1.5rem}.topbar .cart .cart-icon{width:1.5rem;height:1.5rem;margin:.125rem .25rem}.topbar .cart .counter{position:absolute;right:0;top:0;background-color:#ff7d1a;color:#fff;font-size:.615rem;font-weight:700;padding:2px 8px;border-radius:100vmax}.topbar .cart:hover{cursor:pointer}.topbar .cart:hover .cart-icon{filter:saturate(0%) brightness(0%) invert(13%) opacity(75%);filter:url('data:image/svg+xml;utf8,      <svg xmlns="http://www.w3.org/2000/svg">        <filter id="recolor" color-interpolation-filters="sRGB">          <feColorMatrix type="matrix" values="            0 0 0 0 0.1137254902            0 0 0 0 0.1254901961            0 0 0 0 0.1450980392            0 0 0 1 0          "/>        </filter>      </svg>      #recolor')}.topbar .cart-view{position:absolute;z-index:2;top:100%;right:-2.5rem;margin:.5rem;display:flex;flex-direction:column;align-items:stretch;min-width:20rem;max-width:30rem;min-height:15rem;background-color:#fff;border-radius:.5rem;box-shadow:#ffffff1a 0 1px 1px inset,#32325d40 0 50px 100px -20px,#0000004d 0 30px 60px -30px}@media (max-width: 50rem){.topbar .cart-view{right:0}}@media (max-width: 30rem){.topbar .cart-view{left:0}}.topbar .cart-view>*{padding:1.25rem}.topbar .cart-view h3{font-weight:700;border-bottom:2px solid #f7f8fd}.topbar .cart-view .cart-list{display:flex;flex-direction:column;align-items:center;gap:0;flex-grow:1;align-items:stretch;justify-content:center}.topbar .cart-view .cart-list>p{text-align:center}.topbar .cart-view .cart-list .cart-item{display:flex;align-items:center;gap:1rem;padding-bottom:1rem}.topbar .cart-view .cart-list .cart-item .image{width:3.5rem;border-radius:.5rem;background-color:#000}.topbar .cart-view .cart-list .cart-item .details{display:flex;flex-direction:column;align-items:center;gap:.5rem;align-items:flex-start;flex-grow:1}.topbar .cart-view .cart-list .cart-item .details p{color:#68707d}.topbar .cart-view .cart-list .cart-item .details .total{color:#1d2025;font-weight:700}.topbar .cart-view .cart-list .cart-item .remove{cursor:pointer}.topbar .avatar{width:3.5rem;border-radius:100vmax;border:2px rgba(0,0,0,0) solid;transition:.3s}@media (max-width: 70rem){.topbar .avatar{width:3rem}}@media (max-width: 50rem){.topbar .avatar{width:2.5rem}}.topbar .avatar:hover{border:2px #ff7d1a solid;cursor:pointer}.navbar{position:fixed;display:none;z-index:3;left:0;top:0;bottom:0;min-width:20rem;background-color:#fff;flex-direction:column;gap:1rem;align-items:flex-start}@media (max-width: 50rem){.navbar{display:flex}}.navbar>*{margin:1.5rem}.navbar img{cursor:pointer}.navbar ul{display:flex;flex-direction:column;align-items:center;gap:2rem;align-items:flex-start}.navbar ul a{font-size:1.5rem;font-weight:700;color:#1d2025}.navbar:before{position:fixed;content:"";background-color:#000000bf;left:20rem;right:0;height:100vh}.product{gap:3rem;margin-block:5rem}.product>*{margin-inline:3rem}@media (max-width: 70rem){.product{gap:2rem;margin-block:3rem}.product>*{margin-inline:0}}@media (max-width: 50rem){.product{gap:1.5rem;margin:0;margin-bottom:2rem}.product>*{margin:0}}.product .images{display:flex;flex-direction:column;gap:2.5rem}.product .images .image-carousel{position:relative}.product .images .image-carousel .next,.product .images .image-carousel .previous{position:absolute;display:none;background-color:#fff;padding:.75rem .625rem .75rem .875rem;border-radius:100vmax;height:1.25rem;width:1.25rem;top:50%;cursor:pointer}@media (max-width: 50em){.product .images .image-carousel .next,.product .images .image-carousel .previous{display:inline}}.product .images .image-carousel .next:hover img,.product .images .image-carousel .previous:hover img{filter:saturate(0%) brightness(0%) invert(55%) opacity(75%);filter:url('data:image/svg+xml;utf8,      <svg xmlns="http://www.w3.org/2000/svg">        <filter id="recolor" color-interpolation-filters="sRGB">          <feColorMatrix type="matrix" values="            0 0 0 0 1            0 0 0 0 0.4901960784            0 0 0 0 0.1019607843            0 0 0 1 0          "/>        </filter>      </svg>      #recolor')}.product .images .image-carousel .next{right:1rem;transform:translateY(-50%)}.product .images .image-carousel .previous{left:1rem;transform:translateY(-50%)}.product .images .cover{border-radius:1rem;cursor:pointer}@media (max-width: 50rem){.product .images .cover{border-radius:0}}.product .images .thumbnails{display:grid;gap:2rem;grid-template-columns:repeat(4,1fr)}.product .images .thumbnails .thumbnail{border-radius:.5rem;border:2px rgba(0,0,0,0) solid}.product .images .thumbnails .thumbnail:hover{opacity:50%;cursor:pointer}.product .images .thumbnails .thumbnail.active{border:3px #ff7d1a solid}@media (max-width: 50rem){.product .images .thumbnails{display:none}}.product .details{display:flex;flex-direction:column;gap:1.5rem}.product .details .collapsing-col{gap:1rem}.product .details .title{margin-bottom:.75rem}.product .details .price-tag{display:flex;flex-direction:column;gap:1rem;margin-block:.5rem}.product .details .item-counter{flex:1;display:flex;padding:1.25rem 1.5rem;align-items:center;justify-content:space-between;font-weight:700}.product .details .item-counter img{max-width:14px;margin-block:3px;transition:.3s}.product .details .item-counter img:first-child{padding:10px 0}.product .details .item-counter img:hover{filter:saturate(0%) brightness(0%) invert(70%) opacity(75%);filter:url('data:image/svg+xml;utf8,      <svg xmlns="http://www.w3.org/2000/svg">        <filter id="recolor" color-interpolation-filters="sRGB">          <feColorMatrix type="matrix" values="            0 0 0 0 1            0 0 0 0 0.6588235294            0 0 0 0 0.4            0 0 0 1 0          "/>        </filter>      </svg>      #recolor');cursor:pointer}.product .details .item-counter p{text-align:center}.product .details .button{flex:2}@media (max-width: 50rem){.product .details{gap:.75rem;padding-inline:1.5rem}.product .details .item-counter,.product .details .button{align-self:stretch}}.image-view{position:fixed;z-index:5;display:flex;flex-direction:column;align-items:center;gap:1rem;top:50%;left:50%;width:fit-content;transform:translate(-50%,-50%)}@media (max-width: 50rem){.image-view{display:none}}.image-view .close{align-self:flex-end;cursor:pointer;filter:saturate(0%) brightness(0%) invert(100%) opacity(75%);filter:url('data:image/svg+xml;utf8,      <svg xmlns="http://www.w3.org/2000/svg">        <filter id="recolor" color-interpolation-filters="sRGB">          <feColorMatrix type="matrix" values="            0 0 0 0 1            0 0 0 0 1            0 0 0 0 1            0 0 0 1 0          "/>        </filter>      </svg>      #recolor')}.image-view .close:hover{filter:saturate(0%) brightness(0%) invert(55%) opacity(75%);filter:url('data:image/svg+xml;utf8,      <svg xmlns="http://www.w3.org/2000/svg">        <filter id="recolor" color-interpolation-filters="sRGB">          <feColorMatrix type="matrix" values="            0 0 0 0 1            0 0 0 0 0.4901960784            0 0 0 0 0.1019607843            0 0 0 1 0          "/>        </filter>      </svg>      #recolor')}.image-view .image-carousel{position:relative}.image-view .image-carousel .image{margin:1rem 0;max-height:60vh;border-radius:1rem}.image-view .image-carousel .next,.image-view .image-carousel .previous{position:absolute;background-color:#fff;padding:.75rem .625rem .75rem .875rem;border-radius:100vmax;height:1.25rem;width:1.25rem;top:50%;cursor:pointer}.image-view .image-carousel .next:hover img,.image-view .image-carousel .previous:hover img{filter:saturate(0%) brightness(0%) invert(55%) opacity(75%);filter:url('data:image/svg+xml;utf8,      <svg xmlns="http://www.w3.org/2000/svg">        <filter id="recolor" color-interpolation-filters="sRGB">          <feColorMatrix type="matrix" values="            0 0 0 0 1            0 0 0 0 0.4901960784            0 0 0 0 0.1019607843            0 0 0 1 0          "/>        </filter>      </svg>      #recolor')}.image-view .image-carousel .next{right:0;transform:translate(50%,-50%)}.image-view .image-carousel .previous{left:0;transform:translate(-50%,-50%)}.image-view .thumbnails{display:flex;gap:1rem;justify-content:center}.image-view .thumbnails .thumbnail{width:5rem;border-radius:.5rem;cursor:pointer}.image-view:before{position:fixed;z-index:-1;content:"";background-color:#000000bf;inset:-100rem}
