@import"https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@100..900&display=swap";*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{font-size:1rem;font-family:Kumbh Sans,sans-serif;font-weight:400;color:var(--black-75)}:root{--orange: hsl(26, 100%, 55%);--pale-orange: hsl(25, 100%, 94%);--very-dark-blue: hsl(220, 13%, 13%);--dark-grayish-blue: hsl(219, 9%, 45%);--grayish-blue: hsl(220, 14%, 75%);--light-grayish-blue: hsl(223, 64%, 98%);--white: hsl(0, 0%, 100%);--black: hsl(0, 0%, 0%);--black-75: hsla(0, 0%, 0%, .75);--radius: .75rem }button,li,a{font-size:1rem}button{cursor:pointer;border:none;background-color:transparent}li{list-style-type:none}a{color:inherit;text-decoration:none}p{color:var(--dark-grayish-blue);line-height:1.6rem}img{display:block;max-width:100%}.container{max-width:1440px;width:100%;margin:0 auto}main{padding:4rem}main .product{display:grid;grid-template-columns:1fr 1fr}main .product .product__image{margin:0 auto}main .product .product__image .main-image{width:520px;height:500px;cursor:pointer}main .product .product__image .main-image img{width:100%;height:100%;border-radius:var(--radius);object-fit:cover}main .product .product__image .main-image button{display:none}main .product .product__image .small-images{display:flex;justify-content:space-between;margin-top:1.5rem}main .product .product__image .small-images .small-image{position:relative;border:2px solid transparent;width:110px;height:110px;border-radius:var(--radius)}main .product .product__image .small-images .small-image img{border-radius:var(--radius);object-fit:cover;cursor:pointer}main .product .product__image .small-images .small-image.active{border-color:var(--orange)}main .product .product__image .small-images .small-image.active:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--pale-orange);border-radius:var(--radius);opacity:.7}main .product .product__content{padding:3rem 4rem}main .product .product__content .brand{font-size:1.125rem;font-weight:700}main .product .product__content .title{font-size:2.5rem;text-transform:capitalize;color:var(--black);margin:1rem 0 2rem}main .product .product__content .price-section{margin:2rem 0}main .product .product__content .price-section .price-section__top{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}main .product .product__content .price-section .price-section__top .product__price{color:var(--black);font-size:1.825rem;font-weight:700}main .product .product__content .price-section .price-section__top .discount{padding:.1rem .625rem;background-color:var(--black);border-radius:.25rem;color:var(--white)}main .product .product__buttons{display:flex;align-items:center;gap:2rem}main .product .product__buttons .product__quantity{display:flex;align-items:center;gap:1.5rem}main .product .product__buttons .product__quantity button{padding:.5rem}main .product .product__buttons .product__quantity button img{width:.75rem;height:auto}main .product .product__buttons .product__quantity .quantity{color:var(--black);font-weight:700;width:1rem;text-align:center}main .product .product__buttons .add{display:flex;align-items:center;justify-content:center;gap:.75rem;flex:1;background-color:var(--orange);border-radius:var(--radius);padding:1rem;color:var(--black);font-weight:700;opacity:1;transition:all .2s ease}main .product .product__buttons .add:hover{opacity:.9}main .product .product__buttons .add:active{transform:scale(.95)}main .product .product__buttons .add:before{content:"";display:inline-block;background-image:url("data:image/svg+xml,%3csvg%20width='22'%20height='20'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M20.925%203.641H3.863L3.61.816A.896.896%200%200%200%202.717%200H.897a.896.896%200%201%200%200%201.792h1l1.031%2011.483c.073.828.52%201.726%201.291%202.336C2.83%2017.385%204.099%2020%206.359%2020c1.875%200%203.197-1.87%202.554-3.642h4.905c-.642%201.77.677%203.642%202.555%203.642a2.72%202.72%200%200%200%202.717-2.717%202.72%202.72%200%200%200-2.717-2.717H6.365c-.681%200-1.274-.41-1.53-1.009l14.321-.842a.896.896%200%200%200%20.817-.677l1.821-7.283a.897.897%200%200%200-.87-1.114ZM6.358%2018.208a.926.926%200%200%201%200-1.85.926.926%200%200%201%200%201.85Zm10.015%200a.926.926%200%200%201%200-1.85.926.926%200%200%201%200%201.85Zm2.021-7.243-13.8.81-.57-6.341h15.753l-1.383%205.53Z'%20fill='%2369707D'%20fill-rule='nonzero'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:center;background-size:cover;width:1rem;height:1rem;filter:brightness(0)}@media (max-width: 768px){main{padding:0}main .product{grid-template-columns:1fr}main .product .product__image{width:100%}main .product .product__image .main-image{pointer-events:none;width:100%;height:300px;position:relative}main .product .product__image .main-image img{border-radius:0;object-fit:cover}main .product .product__image .main-image button{display:block;pointer-events:all}main .product .product__image .main-image .prev-button,main .product .product__image .main-image .next-button{position:absolute;padding:.75rem;border-radius:50%;background-color:var(--white);top:50%;transform:translateY(-50%)}main .product .product__image .main-image .prev-button img,main .product .product__image .main-image .next-button img{width:.75rem;height:.75rem;transition:all .3s ease;filter:grayscale(100%);object-fit:cover}main .product .product__image .main-image .prev-button:hover img,main .product .product__image .main-image .next-button:hover img{filter:brightness(0) saturate(100%) invert(61%) sepia(89%) saturate(4874%) hue-rotate(350deg) brightness(96%) contrast(87%)}main .product .product__image .main-image .prev-button{left:.5rem}main .product .product__image .main-image .next-button{right:.5rem}main .product .product__image .small-images{display:none}main .product .product__content{padding:1rem}main .product .product__content .price-section{display:flex;align-items:center;justify-content:space-between}main .product .product__content .price-section .price-section__top{margin:0}main .product .product__buttons{display:block}main .product .product__buttons .product__quantity{justify-content:space-between}main .product .product__buttons .add{width:100%;margin-top:1rem}}nav{display:flex;align-items:center;justify-content:space-between;gap:3rem;padding:2rem 0;position:relative;border-bottom:1px solid var(--grayish-blue)}nav .nav-logo button{display:none}nav .nav-logo h1{font-size:2.2rem;color:var(--black)}nav .nav-menu{flex:1}nav .nav-menu .nav-menu__list{display:flex;align-items:center;gap:2rem}nav .nav-menu .nav-menu__list>li{font-size:1.125rem;position:relative;transition:all 3s linear}nav .nav-menu .nav-menu__list>li:hover:after{transform:scale(1)}nav .nav-menu .nav-menu__list>li:after{content:"";position:absolute;bottom:-2rem;left:0;width:100%;height:3px;border-radius:.25rem;background-color:var(--orange);transform:scale(0);transition:all .2s linear;transform-origin:left}nav .nav-menu button{display:none}nav .nav-my-section{display:flex;align-items:center;gap:2.5rem}nav .nav-my-section .my-cart{position:relative}nav .nav-my-section .my-cart img{width:1.5rem;height:1.5rem}nav .nav-my-section .my-cart .product-count{position:absolute;top:-40%;right:-.6rem;padding:.2rem .45rem;background-color:var(--orange);border-radius:50%;font-size:.75rem;font-weight:700;color:var(--white)}nav .nav-my-section .my-profile img{border:2px solid var(--orange);border-radius:50%;width:3.5rem;height:3.5rem}nav .mini-cart{position:absolute;top:80%;right:6%;z-index:999;padding:1rem;box-shadow:#00000059 0 5px 15px;border-radius:var(--radius);background-color:var(--white);min-width:350px;transform:scale(.75);visibility:hidden;opacity:0;transition:all .2s ease;transform-origin:right}nav .mini-cart.show{transform:scale(1);visibility:visible;opacity:1}nav .mini-cart h3{padding-bottom:1rem;border-bottom:1px solid var(--dark-grayish-blue);margin-bottom:1rem}nav .mini-cart .mini-cart__products .product{display:flex;align-items:center;gap:1rem}nav .mini-cart .mini-cart__products .product>img{width:4rem;height:4rem;border-radius:var(--radius)}nav .mini-cart .mini-cart__products .product .product-body{flex:1}nav .mini-cart .mini-cart__products .product .product-body h4{font-size:1rem;text-transform:capitalize;margin-bottom:1rem}nav .mini-cart .mini-cart__products .product button img{width:1rem;height:1rem}nav .mini-cart .mini-cart__products .checkout{width:100%;padding:1.2rem;font-weight:700;background-color:var(--orange);border-radius:var(--radius);margin-top:2rem}nav .mini-cart .empty-cart{text-align:center}@media (max-width: 768px){nav{padding:1rem}nav .nav-logo{display:flex;align-items:center;gap:.5rem}nav .nav-logo button{display:block}nav .nav-logo h1{font-size:1.5rem;padding-bottom:.2rem}nav .nav-menu{position:fixed;inset:0 40% 0 0;background-color:var(--white);z-index:99;transform:translate(-100%);transition:all .3s ease}nav .nav-menu.show{transform:translate(0)}nav .nav-menu button{display:block;padding:2rem 1rem}nav .nav-menu .nav-menu__list{display:block;padding:1rem}nav .nav-menu .nav-menu__list>li{margin-bottom:1rem;font-weight:700}nav .nav-my-section{gap:1.5rem}nav .nav-my-section .my-cart img{width:1.25rem;height:1.25rem}nav .nav-my-section .my-profile img{border:2px solid var(--orange);border-radius:50%;width:2rem;height:2rem}nav .mini-cart{top:105%;right:4%;transform-origin:top}}.fixed-img{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;z-index:-1;transition:all .2s linear;background-color:transparent}.fixed-img.show{background-color:#000000b3;z-index:99;opacity:1;pointer-events:auto}.fixed-img.show .fixed-img__body{visibility:visible;opacity:1}.fixed-img .fixed-img__body{visibility:hidden;opacity:0;transition:all .2s linear}.fixed-img .fixed-img__body .main-image{position:relative;width:520px;height:500px}.fixed-img .fixed-img__body .main-image img{width:100%;height:100%;border-radius:var(--radius);object-fit:cover}.fixed-img .fixed-img__body .main-image .prev-button,.fixed-img .fixed-img__body .main-image .next-button{position:absolute;padding:1rem;border-radius:50%;background-color:var(--white);top:50%;transform:translateY(-50%)}.fixed-img .fixed-img__body .main-image .prev-button img,.fixed-img .fixed-img__body .main-image .next-button img{width:1rem;height:1rem;transition:all .3s ease;filter:grayscale(100%)}.fixed-img .fixed-img__body .main-image .prev-button:hover img,.fixed-img .fixed-img__body .main-image .next-button:hover img{filter:brightness(0) saturate(100%) invert(61%) sepia(89%) saturate(4874%) hue-rotate(350deg) brightness(96%) contrast(87%)}.fixed-img .fixed-img__body .main-image .prev-button{left:-1.5rem}.fixed-img .fixed-img__body .main-image .next-button{right:-1.5rem}.fixed-img .fixed-img__body .main-image .close-button{position:absolute;top:-2.5rem;right:-2.5rem}.fixed-img .fixed-img__body .main-image .close-button img{height:1.5rem;width:1.5rem;filter:brightness(0) invert(1)}.fixed-img .fixed-img__body .main-image .close-button:hover img{filter:brightness(0) saturate(100%) invert(61%) sepia(89%) saturate(4874%) hue-rotate(350deg) brightness(96%) contrast(87%)}.fixed-img .fixed-img__body .small-images{display:flex;justify-content:space-between;margin-top:1.5rem}.fixed-img .fixed-img__body .small-images .small-image{position:relative;border:2px solid transparent;width:110px;height:110px;border-radius:var(--radius)}.fixed-img .fixed-img__body .small-images .small-image img{border-radius:var(--radius);object-fit:cover;cursor:pointer}.fixed-img .fixed-img__body .small-images .small-image.active{border-color:var(--orange)}.fixed-img .fixed-img__body .small-images .small-image.active:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--pale-orange);border-radius:var(--radius);opacity:.7}@media (max-width: 768px){.fixed-img{display:none}}