/* ----- Nav refinements ----- */
.nav-link {
    transition: color var(--t-fast) var(--ease-out-soft);
}

.navbar-nav li:last-child a:hover {
    border: none !important;
}

a.nav-link.cart-countwrap {
    border: none !important;
}

.navbar-nav:last-child a:focus-visible {
    outline: none;
    border: none;
}

/* ----- Image hover effects ----- */
.grayscale {
    position: relative;
    z-index: 1;
    transition: filter var(--t-base) var(--ease-out-soft);
}

.grayscale:hover {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

/* ----- Category cards ----- */
.prodcatwrap .prod-info {
    transition:
        transform var(--t-base) var(--ease-out-spring),
        box-shadow var(--t-base) var(--ease-out-soft),
        border-color var(--t-base) var(--ease-out-soft);
}

.prodcatwrap .prod-info:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-secondary);
}

.prodcatwrap .prod-info .img-fluid {
    transition: transform var(--t-slow) var(--ease-out-soft);
}

.prodcatwrap .prod-info:hover .img-fluid {
    transform: scale(1.04);
}

/* ----- Featured product cards ----- */
.featuredproductswrap .fea-prod-info {
    transition:
        transform var(--t-base) var(--ease-out-spring),
        box-shadow var(--t-base) var(--ease-out-soft);
}

.featuredproductswrap .fea-prod-info:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.featuredproductswrap .fea-prod-info .img-fluid {
    transition: transform var(--t-slow) var(--ease-out-soft);
}

.featuredproductswrap .fea-prod-info:hover .img-fluid {
    transform: scale(1.05);
}

/* ----- Footer ----- */
footer .footernav ul li a {
    transition: color var(--t-fast) var(--ease-out-soft);
    position: relative;
}

footer .footernav ul li a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background-color: var(--color-secondary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--t-base) var(--ease-out-soft);
}

footer .footernav ul li a:hover {
    color: var(--color-secondary);
}

footer .footernav ul li a:hover::after {
    transform: scaleX(1);
}

footer .copyright a {
    transition: color var(--t-fast) var(--ease-out-soft);
}

footer .copyright a:hover {
    color: var(--color-secondary);
}