@import"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap";@import"https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,600;1,600&display=swap";:root{--bg-primary: #fff;--bg-secondary: #f3f5f9;--bg-tertiary: #f6f9fc;--bg-card: #f5f5f5;--c-dark: #2b3445;--c-darker: #222935;--c-white: #fff;--c-light: var(--bg-secondary);--c-gray: #7c828d;--c-gray-ligth: #d3d3d4;--c-primary: #4bb4b4;--c-primary-dark: #257181;--c-red: #b44b4b;--c-green: #4bb45d;--c-yellow: #ebc90c}:root{--main-padding-left: 3.5rem;--main-padding-right: 3.5rem;--notification-index: 25;--cart-index: 20;--shadow-index: 15;--top-index: 10;--mid-index: 5;--b-radius: 7px}:root{font-size:16px;font-weight:500;color:var(--c-dark);background-color:var(--bg-primary);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}*{font-family:Open Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;box-sizing:border-box;margin:0;scroll-behavior:smooth}body{background-color:var(--bg-tertiary)}.stop-scroll{overflow-y:hidden}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}a{color:var(--c-dark);text-decoration:none}button{font-weight:700;padding:0;background-color:transparent;border:none;cursor:pointer}input{border:none;outline:none;padding:0}.icon{font-size:1.5rem}main{padding:2rem;padding-left:var(--main-padding-left);padding-right:var(--main-padding-right)}@media only screen and (max-width: 425px){main{padding:1.5rem}}.shadow-block{position:fixed;top:0;width:100%;height:100%;background-color:#2b3445a9;z-index:var(--shadow-index)}aside.cart-container{position:fixed;display:flex;flex-direction:column;top:0;height:100vh;background-color:var(--c-white);z-index:var(--cart-index);width:30%;padding:2rem;transition:all .7s ease}.scroll-control{width:109%;padding-right:1rem;overflow-y:auto;height:100%}.cart-invisible{right:-50%}.cart-visible{right:0}.cart-header{font-size:2rem;display:flex;justify-content:space-between;padding-bottom:2rem;border-bottom:1px solid var(--c-gray-ligth)}.cart-amount{display:flex;align-items:center}.cart-amount>p{font-size:1rem;font-weight:400}.cart-close{font-size:2rem}.cart-body{height:75%}.cart-product-card{width:100%;display:flex;padding-top:1rem;padding-bottom:1rem;gap:1rem;border-bottom:1px solid var(--c-gray-ligth)}.product-cart-image>img{max-width:100%;height:auto}.product-cart-details{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1rem;overflow:hidden;position:relative}.product-cart-details>h4{width:100vw}.dots{background-color:var(--c-white);right:0;position:absolute}.product-cart-price{color:var(--c-primary);font-weight:700;align-self:center}.delete-icon{display:grid;place-items:center;font-size:1.5rem;color:var(--c-red)}.delete-icon>svg{cursor:pointer}.cart-body .message-empty-cart{place-items:center;height:100%}.message-content{text-align:center}.message-content>svg{font-size:5rem}.cart-footer{flex-direction:column;gap:1rem}.btn-cart-footer{border:1px solid var(--c-primary);border-radius:var(--b-radius);font-size:.9rem;width:100%;padding:.6rem;transition:all .2s ease-out}.btn-cart-footer.checkout{text-align:center;font-weight:700;color:var(--c-white);background-color:var(--c-primary)}.btn-cart-footer.checkout:hover{background-color:var(--c-primary-dark);border-color:var(--c-primary-dark)}.btn-cart-footer.buy{color:var(--c-primary)}.btn-cart-footer.buy:hover{outline:.2px solid var(--c-primary)}@media only screen and (max-width: 768px){aside.cart-container{width:45%}}@media only screen and (max-width: 425px){aside.cart-container{width:90%}.cart-invisible{right:-100%}.product-cart-image{width:50%}.product-cart-details>h4{width:120vw}}.categories{display:flex;gap:1.5rem}.menu-categories{display:flex;flex-direction:column;width:25%;gap:1rem;padding:1rem;background-color:var(--bg-card)}.menu-box{display:flex;flex-direction:column;gap:.5rem}.box-title{padding-bottom:.5rem;border-bottom:2px dashed var(--c-primary)}.box-body{display:flex;flex-direction:column;padding-top:.5rem;gap:.5rem}.box-body>.box-body__item{display:flex;gap:.5rem;align-items:center}a.box-body__item:hover{color:var(--c-primary)}.top-categories{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr);gap:1.5rem;width:75%}.top-categories__card{overflow:hidden;cursor:pointer;position:relative}.top-categories__card:hover .category-image{background-blend-mode:darken;transform:scale(1.1)}.top-categories__card:hover .category-name{width:80%;left:10%;letter-spacing:1.1px}.top-categories__card:hover .category-image:before{display:block}.category-name{letter-spacing:normal;text-align:center;color:var(--c-white);border-bottom:2px solid var(--c-white);width:50%;padding:1rem;position:absolute;left:25%;bottom:1rem;transition:all .3s ease-in-out}.category-image:before{content:"";display:none;width:100%;height:100%;position:absolute;top:0;left:0;background-color:#323a3a63;transition:all .5s ease}.item-three{grid-row-end:span 3}.item-five{grid-column-start:2}.category-image{width:100%;height:100%;background-color:var(--bg-card);background-position:center;background-size:cover;background-repeat:no-repeat;background-blend-mode:multiply;transition:all .3s ease-in-out}.bg-one{background-image:url(/assets/notebooks-048aef2f.jpg)}.bg-two{background-image:url(/assets/smartphones-b5996e39.jpg)}.bg-three{background-image:url(/assets/printers-52e70dad.jpg);grid-row-end:span 3}.bg-four{background-image:url(/assets/storage-f59a59ce.jpg)}.bg-five{background-image:url(/assets/peripherals-3da1f07e.jpg);grid-column-start:2}@media only screen and (max-width: 768px){.menu-categories{display:none}.top-categories{width:100%}.top-categories__card{height:250px}.item-three{height:auto}}@media only screen and (max-width: 425px){.top-categories{display:flex;flex-direction:column;width:100%}.item-three{height:250px}}.products-container__title{font-size:2rem;text-align:center;padding-top:5rem;padding-bottom:2rem}.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}.product-card{display:flex;flex-direction:column;gap:1.5rem;padding:.5rem 1.5rem 1.5rem;background-color:var(--bg-card);position:relative;box-shadow:none;transition:all .5s ease}.product-card:hover{box-shadow:0 2px 14px 4px #e5ddce}.card-header{border-bottom:2px solid #7c828d2a}.loader{display:flex;justify-content:center;align-items:center;max-width:100%;height:300px}.card-header>img{position:relative;max-width:100%;mix-blend-mode:multiply}.card-body{padding-top:1rem}.card-footer .price{color:var(--c-primary);font-weight:700}.add-icon{cursor:pointer;background-color:transparent;padding:.3rem;padding-bottom:0;border:2px solid var(--c-primary);border-radius:var(--b-radius);color:var(--c-primary);bottom:1.5rem;right:1.5rem;position:absolute;transition:all .2s ease}.add-icon:hover{background-color:var(--c-primary);color:var(--c-white)}.product-card-icon{transition:all .3s ease}.page-controller{width:100%;display:flex;justify-content:center;align-items:center;padding-top:3rem;gap:1rem}.arrow-container{padding:.8rem .8rem .5rem;background-color:var(--bg-card);border-radius:5px;box-shadow:0 2px 5px 4px #e5ddce;position:relative;cursor:pointer}.arrow-disabled{padding:.8rem .8rem .5rem;background-color:var(--bg-card);border-radius:5px;box-shadow:0 2px 5px 4px #e5ddce;position:relative;cursor:not-allowed}.arrow-container:hover{background-color:#aeecec}.arrow-container:hover>.page-message{visibility:visible;opacity:1;transition:all .2s ease-in}.arrow-disabled:hover>.page-message{visibility:visible;opacity:1;transition:all .2s ease-in}.page-controller .icon{font-size:2rem;color:var(--c-primary)}.page-message{text-align:center;opacity:0;visibility:hidden;position:absolute;width:100%;top:-2rem;left:0;color:var(--c-gray-ligth);pointer-events:none;transition:all .2s ease-out}.arrow-disabled .icon{color:var(--c-gray)}@media only screen and (max-width: 768px){.products-grid{grid-template-columns:1fr 1fr}}@media only screen and (max-width: 425px){.products-container__title>h2{font-size:2.5rem}.products-grid{grid-template-columns:1fr}}.header-container{min-height:5rem}.header-container nav{display:flex;justify-content:space-between;padding:1rem;padding-left:var(--main-padding-left);padding-right:var(--main-padding-right);background-color:var(--c-white);box-shadow:0 2px 5px -1px #c9c3c4;width:100%;position:fixed;z-index:var(--top-index)}.form-container{width:50%}.search-container{display:flex;border:1px solid var(--c-gray-ligth);width:100%;position:relative;justify-content:center;align-items:center;border-radius:25px;overflow:hidden;transition:border .2s ease}.search-container:hover{border:1px solid var(--c-primary)}.search-container:hover>.btn-submit{border-left:1px solid var(--c-primary)}.search-icon{color:var(--c-dark);font-size:1.4rem;position:absolute;left:.8rem;top:.7rem;transition:color .2s ease}.search-input{width:75%}.search-input>input{width:100%;padding:.8rem .8rem .8rem 2.5rem}.search-input:has(input:focus)>.search-icon{color:var(--c-primary)}.search-container:has(input:focus){outline:1.5px solid var(--c-primary)}.btn-submit{border-left:1px solid var(--c-gray-ligth);background-color:var(--c-light);width:25%;padding:.8rem;transition:border .2s ease}.cart-logo-container{display:grid;place-items:center}.cart-icon{font-size:1.5rem;width:50px;height:50px;display:grid;place-items:center;background-color:var(--bg-card);box-shadow:0 2px 4px 3px #e5ddce;color:var(--c-primary);border-radius:50%;cursor:pointer;position:relative}.cart-icon:before{color:var(--c-white);content:attr(total-products);font-size:.9rem;background-color:var(--c-red);padding-left:5px;padding-right:5px;border-radius:50%;position:absolute;right:-2px;top:-5px}.cart-icon>svg{font-size:2rem}.active-home-icon{display:block}.deactive-home-icon{display:none}.search-icon-mobile>svg{font-size:1.7rem}.form-mobile{display:none;width:4%;transition:all .4s ease}.search-icon-mobile{color:var(--c-primary);height:100%;display:grid;place-items:center}.active-icon{position:absolute;z-index:var(--top-index);left:.7rem}.active-form{position:relative;display:flex;margin:auto;width:70%}.deactive-input{display:none}@media only screen and (max-width: 768px){.form-mobile{display:inherit}.header-container nav{justify-content:flex-end}.header-container nav .home-icon-container{position:absolute;right:50%}.header-container nav .home-icon-container:before{bottom:-6px}.form-container{display:none}.cart-logo-container{align-self:flex-end}.cart-icon{width:45px;height:45px;box-shadow:none;background-color:transparent}.cart-icon:before{top:0;right:0}.cart-icon>svg{font-size:2rem}}@media only screen and (max-width: 425px){.form-container{display:none}.header-container nav{justify-content:flex-end;gap:.7rem;padding:1rem}}@media only screen and (max-width: 375px){.active-form{width:80%}}@media only screen and (max-width: 320px){.search-input{width:70%}.btn-submit{width:30%}}.home-icon-container{border:2px solid var(--c-dark);border-radius:.8rem;padding:.3rem .3rem .6rem;position:relative}.home-icon-container:before{font-family:Josefin Sans,sans-serif;font-style:italic;content:"Info Shop";font-size:.8rem;color:var(--c-white);position:absolute;width:59px;padding:.3rem;border-radius:12px;background-color:var(--c-dark);bottom:-10px;right:-20px}.home-icon{font-size:1.5rem}@media only screen and (max-width: 425px){.home-icon-container:before{font-size:.7rem;width:50px;bottom:-5px;right:-15px}}footer{background-color:var(--c-darker);color:var(--c-gray);border-radius:10px 10px 0 0;padding:5rem;display:flex;justify-content:center;align-items:center}.info-container{text-align:center;width:50%}.footer-icon-container{border:2px solid var(--c-white);width:100px;margin:auto;margin-bottom:1rem;animation:float 6s ease-in-out infinite}.footer-icon-container:before{animation:float 5.8s ease-in-out infinite}@keyframes float{0%{box-shadow:0 5px 15px #0009;transform:translatey(0)}50%{box-shadow:0 25px 15px #0003;transform:translatey(-20px)}to{box-shadow:0 5px 15px #0009;transform:translatey(0)}}.footer-icon{color:var(--c-white);font-size:3rem}.heart{color:var(--c-red)}.project-description{font-style:italic}.project-description>a{color:var(--c-white)}.project-repo{padding:2rem;color:var(--c-white);display:flex;align-items:center;justify-content:center;gap:5px}.about-author{background-color:var(--c-dark);padding:1rem;display:flex;flex-direction:column;gap:1rem;justify-content:center;align-items:center;border-radius:var(--b-radius)}.author-name-container{display:flex;justify-content:center;align-items:center;gap:5px}.socials>ul{display:flex;justify-content:center;align-items:center;list-style:none;gap:.5rem}.socials>ul>li{padding:.5rem;width:50px;height:50px;border-radius:50%;background-color:var(--c-darker)}.social-icon{font-size:2rem;color:var(--c-white)}@media only screen and (max-width: 768px){.info-container{width:70%}}@media only screen and (max-width: 425px){footer{padding-left:2rem;padding-right:2rem;padding-bottom:7rem}.info-container{width:100%}.project-repo{padding:1rem}}@media only screen and (max-width: 375px){footer{padding-left:1rem;padding-right:1rem;padding-bottom:7rem}.project-repo{padding:2rem;padding-left:0;padding-right:0}}@media only screen and (max-width: 320px){.project-repo{font-size:.8rem}}.container{position:fixed;bottom:2rem;right:2rem;overflow:hidden;max-height:200px;transition:max-height .3s ease-out;z-index:var(--notification-index)}.container:not(:last-child){margin-bottom:1rem}.container.shrink{max-height:0}.notification{display:flex;align-items:center;gap:1rem;background-color:var(--c-white);border-radius:var(--b-radius);color:var(--c-gray);padding:1rem;position:relative;transition:transform .3s ease-out}.notification .close-button{font-size:1.2rem;color:var(--c-white);font-weight:500;position:absolute;top:.5rem;right:.5rem}.notification.slide-out{transform:translate(150%);flex:0}.notification.slide-in{animation-name:slideIn;animation-duration:.3s;animation-timing-function:ease-in-out}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}.notification.info{color:var(--c-primary);border:1px solid var(--c-primary)}.notification.success{color:var(--c-green);border:1px solid var(--c-green)}.notification.warning{color:var(--c-yellow);border:1px solid var(--c-yellow)}.notification.error{color:var(--c-red);border:1px solid var(--c-red)}