header{position:sticky;top:0;display:flex;justify-content:space-between;padding:0 40px;align-items:center;height:60px;border-bottom:1px solid var( --color-border);background-color:var( --color-bg-dark);color:var(--color-text-primary)}header h2{margin:0;font-size:32px}header h2 a{text-decoration:none;color:var(--color-text-primary)}header ul{display:flex;gap:20px;list-style:none;padding:0;margin:0;text-align:center}header ul li{list-style:none;margin:0}header ul li a{background-color:var(--color-accent);text-decoration:none;height:60px;width:70px;display:flex;justify-content:center;align-items:center}header ul li a:hover{cursor:pointer;background-color:var(--color-accent-hover)}div.cartItemsNumber{display:none}div.cartItemsNumber.show{display:block;border:1px solid var(--color-border);border-radius:50%;position:absolute;transform:translate(60%,-70%);color:var(--color-text-primary);background-color:var(--color-bg-dark);width:20px;height:16px;font-size:12px;text-align:center}div.modal.show{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);border:3px solid var(--color-accent);background-color:var(--color-bg-dark);color:var( --color-text-primary);padding:16px 24px;border-radius:8px;z-index:9999}main{display:flex;justify-content:center;align-items:center;flex-direction:column;margin:100px 0}#HeroSection{border:3px solid var(--color-accent);max-width:900px;margin:0 auto;padding:20px}#HeroSection h3{margin-top:30px;justify-self:flex-end}#HeroSection h3 a{display:inline-flex;justify-content:center;align-items:center;width:170px;height:40px;text-decoration:none;background-color:var(--color-accent)}#HeroSection h3 a:hover{cursor:pointer;background-color:var( --color-accent-hover)}#CategoriesSection{margin-top:100px;display:flex;flex-direction:column;justify-content:center;align-items:center;width:900px}#CategoriesSection ul{display:flex;flex-wrap:wrap;justify-content:space-around;align-items:center;row-gap:40px;margin:0;padding:20px;list-style:none;width:600px}#CategoriesSection ul li{border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center}#CategoriesSection ul li a{border:2px solid black;border-radius:50%;width:160px;height:160px;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#000;text-decoration:none}#CategoriesSection ul li span{cursor:default;margin-top:20px}#CategoriesSection ul li a:hover+span{color:var(--color-accent);text-decoration:underline}main#shop{display:grid;grid-template-columns:repeat(auto-fill,300px);gap:40px;padding:40px;margin:20px 0 50px}.productDiv{box-sizing:border-box;border:2px solid var( --color-accent);display:flex;flex-direction:column;width:300px;height:400px;justify-content:space-between;align-items:center}input.productQuantity{width:70px;text-align:right;font-size:14px;border:1px solid var(--color-accent);padding:2px 4px}.productDiv button.increase,.productDiv button.decrease{margin-left:4px;margin-right:4px;font-size:14px;font-weight:700}.productDiv .addToCart{margin-top:10px;margin-bottom:20px;width:150px;padding:10px;font-size:16px;font-weight:700}.productImageContainer{width:200px;height:200px}.productImageContainer img{width:100%;height:100%}.productDiv p.productName{font-size:large;font-weight:700}.productDiv p.productDescription{text-align:justify;font-size:small}.linkFilter{margin-top:20px;border-bottom:2px solid var( --color-border)}.linkFilter ul{display:flex;margin:0;padding:0;list-style-type:none;gap:20px;justify-content:space-around}.linkFilter ul a{color:#000;text-decoration:none}.linkFilter ul a:hover{color:var(--color-accent);text-decoration:underline}.priceSort.container{margin-top:50px;display:flex;flex-direction:column;align-items:flex-start}.priceSort.container p{margin:0 0 0 10px;font-weight:700}.priceSort.container button{cursor:pointer;margin-left:10px;font-weight:700}.priceSort.container button:hover{color:var(--color-bg-dark)}main#shoppingCart{display:flex;flex-direction:column;gap:20px}h4{text-align:center;font-size:20px}.cartItemContainer{border:2px solid var(--color-accent);display:flex;width:800px;justify-content:space-between;align-items:center}.cartItemContainer .imageContainer{width:100px;height:100px}.cartItemContainer .imageContainer img{width:100%;height:100%}.cartItemContainer .inputContainer input{width:50px;text-align:center;border:1px solid var(--color-accent);margin:0 5px;padding:2px 4px}.cartItemContainer p{width:150px;font-size:14px}.cartItemContainer p.price{text-align:right;margin-right:20px}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;--color-bg-dark: #222831;--color-bg-medium: #393E46;--color-bg-light: #EEEEEE;--color-accent: #00ADB5;--color-accent-hover: #00f7ff;--color-accent-soft: #5FD3D7;--color-border: #2E333B;--color-text-primary: #EEEEEE;--color-text-secondary: #B0B3B8}body{box-sizing:border-box;margin:0;min-width:320px;min-height:100vh;background-color:var( --color-bg-light)}button{background-color:var(--color-accent);color:var(--color-text-primary);padding:.2rem 1.2rem;border:none;cursor:pointer}button:hover{background-color:var(--color-accent-hover);color:var(--color-bg-dark)}button:active{transform:scale(.9)}
