.cart-and-wishlist-wrapper {padding:40px 0px 40px 0px;display:flex;flex-direction:column;gap:20px;view-transition-name:wishlist-switcher;}
.cart-to-wishlist-navigation {display:grid;grid-template-columns:1fr 25%;font-size:20px;font-weight:500;border:1px solid var(--black);transition:grid-template-columns .5s ease;background-color:var(--white);}
.cart-to-wishlist-navigation a {text-decoration:none;color:inherit;}
.cart-to-wishlist-navigation .nav-item {display:flex;flex-direction:row;gap:10px;height:100%;align-items:center;padding:10px 20px;}
.cart-to-wishlist-navigation .nav-item.active {background-color:var(--black);color:var(--blackText);}
.cart-to-wishlist-navigation .nav-item::before {content:'';height:20px;width:20px;display:block;background-repeat:no-repeat;background-size:contain;background-position:center;}
.cart-to-wishlist-navigation .nav-item.cart::before {background-image:url('../../icons/bag.svg');}
.cart-to-wishlist-navigation .nav-item.cart:not(.active)::before {filter:invert(1);}
.cart-to-wishlist-navigation .nav-item.wishlist::before {background-image:url('../../icons/heart.svg');}
.cart-to-wishlist-navigation .nav-item.wishlist.active::before {filter:invert(1);}
.cart-to-wishlist-navigation:has(.nav-item.wishlist:not(.active):hover) {grid-template-columns:1fr 30%;}
.cart-to-wishlist-navigation:has(.nav-item.cart:not(.active):hover) {grid-template-columns:1fr 20%;}

@media (max-width:1000px)
{
    .cart-to-wishlist-navigation {grid-template-columns:1fr 40%;}
    .cart-to-wishlist-navigation:has(.nav-item.cart:not(.active):hover) {grid-template-columns:1fr 30%;}
    .cart-to-wishlist-navigation:has(.nav-item.wishlist:not(.active):hover) {grid-template-columns:1fr 50%;}
}

@media (max-width:550px)
{
    .cart-to-wishlist-navigation {grid-template-columns:repeat(2, 1fr);}
    .cart-to-wishlist-navigation:has(.nav-item.cart:not(.active):hover) {grid-template-columns:repeat(2, 1fr);}
    .cart-to-wishlist-navigation:has(.nav-item.wishlist:not(.active):hover) {grid-template-columns:repeat(2, 1fr);}
}

@media (max-width:480px)
{
    .cart-to-wishlist-navigation .nav-item {font-size:16px;}
}

@media (max-width:380px)
{
    .cart-to-wishlist-navigation .nav-item {padding:10px 10px;font-size:15px;}
}