:root{--font-body: Arial, Helvetica, sans-serif;--font-headline: Haettenschweiler, "Arial Narrow Bold", sans-serif;--primary-color: #f0a868;--secondary-color: #525b0f;--tertiary-color: #a4b8c4;--light-grey: #d0d0d0;--dark-grey: #303030;--font-base: 18px;--small-font: .8em;--large-font: 1.2em}*{box-sizing:border-box}body{margin:0;font-family:var(--font-body);font-size:var(--font-base);color:var(--dark-grey);background-color:#fff}img{max-width:100%}header{display:flex;justify-content:space-between;padding:0 10px}.logo{line-height:60px;width:245px;overflow:hidden;display:flex;font-size:30px;text-align:right;font-family:var(--font-headline)}.logo img{width:60px;height:60px}.logo a{text-decoration:none;color:var(--font-body)}.inputContener{display:flex;flex-direction:row;flex-wrap:wrap;border:1px solid var(--primary-color);border-radius:20px;overflow:hidden;justify-content:space-between;padding:2px 10px}#searchbar{border:none;outline:none}.inputContener,.checkout{align-self:center}.inputContener i{font-size:22px;color:#000}.inputContener a{display:block;cursor:pointer;text-decoration:none}.hero{position:relative}.hero .logo{position:absolute;left:calc(50% - 60px);bottom:-10px;background-color:#fff}.logo--square{font-size:var(--small-font);width:110px;height:80px;flex-direction:column;align-items:flex-end;box-shadow:1px 1px 4px var(--light-grey);justify-content:center;align-items:center;line-height:1}.logo--square img{width:90px;height:90px;margin-top:-1.3em}.logo--square>div{margin-top:-1.7em}.highlight{color:var(--tertiary-color)}button{padding:.5em 2em;background-color:var(--secondary-color);color:#fff;margin:auto;display:block;border:0;font-size:var(--large-font);cursor:pointer}.divider{border-bottom:2px solid var(--primary-color)}.cart{padding-top:1em;position:relative;text-align:center}.cart svg{width:25px}.cart:hover svg{fill:gray}.cart .cart-count{position:absolute;top:7px;right:-5px;background-color:var(--primary-color);color:#fff;border-radius:50%;width:20px;height:20px;line-height:20px;font-size:.8em}.cart-animation{animation:cart-animation 1s ease}.mission{padding:0 .5em;line-height:1.3;max-width:600px;margin:auto}.products{padding:.5em}.product-list{display:flex;flex-flow:row wrap;justify-content:space-between;list-style-type:none;padding:0}.product-list a{text-decoration:none;color:var(--dark-grey)}.category-icons{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}.category-icons img{border:1px solid black;padding:1rem;border-radius:.5rem;transition:.5ms ease}.category-icons img:hover{scale:1.01;box-shadow:0 0 10px var(--primary-color)}.product-card{flex:1 1 45%;margin:.25em;padding:.5em;border:1px solid var(--light-grey);max-width:250px}.product-card h2,.product-card h3,.product-card p{margin:.5em 0}.card__brand{font-size:var(--small-font)}.card__name{font-size:1em}.product-detail{padding:1em;max-width:500px;margin:auto}.product-detail img{width:100%}.cart-card{display:grid;grid-template-columns:25% auto 15%;font-size:var(--small-font);align-items:center}.cart-card__icon{position:absolute;top:10px;left:10px;width:20px;height:20px;fill:currentColor;opacity:0;transition:opacity .2s}.cart-card:hover .cart-card__icon{opacity:1}.cart-card__image{grid-row:1/3;grid-column:1}.cart-card p{margin-top:0}.cart-card .card__name{grid-row:1;grid-column:2}.cart-card__color{grid-row:2;grid-column:2}.cart-card__quantity{grid-row:1;grid-column:3}.cart-card__price{grid-row:2;grid-column:3}.hide{display:none}@media screen and (min-width: 500px){body{max-width:1080px;margin:auto}.mission{font-size:1.2em}.cart-card{font-size:inherit;grid-template-columns:150px auto 15%}}footer{font-size:var(--small-font);padding:1em}@keyframes cart-animation{0%{transform:scale(1)}50%{transform:scale(1.1);opacity:.9}to{transform:scale(1)}}.newsletter-signup{background-color:#f9f9f9;padding:20px;margin:20px 0;border:1px solid #ddd;border-radius:5px;text-align:center}.newsletter-signup h2{margin-bottom:10px}.newsletter-signup form{display:flex;flex-direction:column;align-items:center}.newsletter-signup label{margin-bottom:5px}.newsletter-signup input[type=email]{padding:10px;margin-bottom:10px;border:1px solid #ccc;border-radius:5px;width:100%;max-width:300px}.newsletter-signup button{padding:10px 20px;background-color:var(--primary-color);color:#fff;border:none;border-radius:5px;cursor:pointer}.newsletter-signup button:hover{background-color:var(--secondary-color)}