.wrapper{width:100%;height:100vh;display:grid;grid-template-rows:clamp(50px,10vh,75px) clamp(35px,3vh,65px) 1fr}nav{font-size:.9rem}nav ul{width:100%;max-width:980px;height:100%;display:flex;align-items:center;gap:20px;padding:0 1rem;margin:auto;justify-content:space-between;flex-wrap:wrap}.topNav{background:#fff}.topNav a{display:block}.topNav svg{width:175px}.search-container{width:400px;position:relative;display:flex;align-items:center}.search-container input[type=search]{width:100%;height:25px;border:solid 1px gainsboro;border-radius:25px;padding:5px 0 5px 25px}.search-container input[type=search]::placeholder{color:#dcdcdc}.search-container span{position:absolute;font-size:16px;left:2%;color:#dcdcdc}nav .search-items-list{position:absolute;background:#fff;border:solid 1px gainsboro;border-top:none;top:100%;display:flex;flex-direction:column;height:fit-content;max-height:250px;gap:10px;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap;padding:14px 20px;z-index:100;overflow-y:scroll}.cart{color:#0f2d5e}.nextNav{background:#297aff}.nextNav a{text-transform:uppercase;font-weight:800;letter-spacing:1px;color:#fff}.nextNav a:hover{text-decoration:underline;color:#fff}main{height:100%;width:100%;padding:2rem 1rem;max-width:980px;margin:auto;position:relative}@media (max-width: 800px){main{padding:2rem}}@media (max-width: 600px){.wrapper{height:100%;grid-template-rows:clamp(50px,12vh,100px) 1fr}.topNav .outer-ul{display:grid;grid-template-rows:1fr 1fr;grid-template-columns:1fr 40px 48px;padding:5px 0;gap:0}.topNav .outer-ul li:first-child{padding-left:1rem}.topNav .outer-ul li:last-child{padding-right:1rem}.cart-li{grid-column:2;grid-row:1}.search-container{grid-column:1/4;width:100%;background:#297aff;padding:10px 1rem}.search-container span{left:6.5%}.hamburger-li{grid-column:3;grid-row:1}.hamburger{display:flex;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer}.hamburger .bar{width:23px;height:3px;background-color:#0f2d5e;border-radius:2px;transition:all .3s ease}.topNav .mobile-menu{background:#297aff;position:absolute;left:0;flex-direction:column;height:unset;gap:15px;padding:15px;top:6vh;z-index:100}.topNav .mobile-menu a{text-transform:uppercase;font-weight:800;letter-spacing:1px;color:#fff}.topNav .mobile-menu a:hover{text-decoration:underline;color:#fff}.open{display:flex}.hide{display:none}}.products-ul{display:flex;flex-wrap:wrap;gap:20px}.products{width:23%;padding:1rem;background:#e6ebf1}.products:hover{background:#c2ccd8}.products div:first-child{background:#fff;margin-bottom:10px}.products img{width:100%;aspect-ratio:1/1;object-fit:contain}.products h4,.products p{margin:0}.products h4{font-size:1rem}.products,.products:visited{color:#0f2d5e}@media (max-width: 600px){.products{width:100%}}.product-container{display:flex;gap:4rem;padding:2rem;background:#e6ebf1}.product-img{width:100%;background:#fff;padding:2rem;aspect-ratio:1/1}.product-img img{width:100%}.product-info{display:flex;flex-direction:column;align-items:flex-start;position:relative}.product-info h1{font-size:1.5rem;color:#0f2d5e}.product-info p{font-size:1rem}.product-info .product-price{font-size:1.5rem;color:#0f2d5e;font-weight:700}.qty-container{display:flex;gap:10px}.qty-container p{font-weight:700;margin:0}.qty-container input{background:none;outline:none;border:none;font-size:1rem;width:85px}.product-info button{background:#0f2d5e;color:#fff;font-weight:700;border:none;padding:10px;margin-top:2rem;cursor:pointer}.clicked:after{content:"Item Added!";background:#b6fdb6;border:green solid 1px;color:green;padding:10px;position:absolute;bottom:0;left:105px}@media (max-width: 600px){.product-container{flex-wrap:wrap;gap:2rem}}.products-in-cart{width:100%;display:flex;gap:15px;margin-bottom:10px;background:#e6ebf1;padding:10px}.products-in-cart h4,.products-in-cart p{margin:0}.quantity-container{display:flex}.quantity-container button,.delete{border:none;cursor:pointer;color:#297aff}.products-in-cart .price{font-weight:700;color:#0f2d5e;margin-left:auto}.total{display:flex;justify-content:flex-end;font-weight:700;padding-right:10px}.total span{font-weight:700;color:#297aff;margin-left:10px}.check-out-btn{background:#0f2d5e;border:none;margin-top:2rem;cursor:pointer}.check-out-btn a,.check-out-btn a:visited{color:#fff;font-weight:700;padding:10px;display:block}.pop-up{position:absolute;border:black 1px solid;padding:2rem;background:#fff;top:40%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;justify-content:center}.pop-up div{display:flex;gap:10px;justify-content:center}.confirm,.cancel{border:none;cursor:pointer;font-weight:700;padding:10px 15px;color:#fff}.confirm{background:#0f2d5e}.cancel{background:gray}.overlay{position:fixed;width:100%;height:100%;background:#000000a3;top:0;left:0}.pop-up p{margin-top:0}@media (max-width: 500px){.products-in-cart{flex-wrap:wrap}.products-in-cart h4{text-align:center}}form{display:grid;grid-template-columns:1fr 1fr}form .inputs{display:flex;gap:10px;margin-bottom:10px}form .inputs label{min-width:150px}form button{border:none;cursor:pointer;font-weight:700;padding:10px 15px;color:#fff;background:gray;margin-right:10px;margin-top:4rem}form button[type=submit]{background:#0f2d5e}@media (max-width: 800px){form{grid-template-columns:1fr}}@media (max-width: 600px){.total{padding:0}form .inputs{flex-wrap:wrap}form .inputs label,form .inputs input{width:100%}form button{margin-top:1.5rem}}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{font-size:14pt;padding:0;margin:0}a{text-decoration:none}ul{margin:0;padding:0;list-style-type:none}button{outline:unset;background:unset}