/* Only essential styles that can't be achieved with Bootstrap */
.hover-shadow-lg {
    transition: all 0.3s ease-in-out;
}

.hover-shadow-lg:hover {
    transform: translateY(-5px);
}

.card {
    min-height: 300px;
}

.feature-card-image {
    height: 160px;
    object-fit: cover;
}

.homepage-video-badge {
    top: -32px;
}

@media (max-width: 991.98px) {
    .homepage-video-badge {
        top: -16px;
    }
}

/* Cart button styles */
.homepage-cart .cart-btn {
    transition: all 0.25s ease-in-out;
    border: 2px solid transparent;
}

.homepage-cart .cart-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2) !important;
    border-color: var(--bs-success-border-subtle);
}

.homepage-cart .cart-btn:active {
    transform: translateY(1px);
}

.homepage-cart .cart-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.homepage-cart .cart-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 1.8em;
    height: 1.8em;
    border-radius: 50%;
    font-size: 1.1em;
    animation: icon-pulse 10s infinite;
}

@keyframes icon-pulse {
    0% {
        transform: scale(1);
        background-color: var(--bs-warning);
    }

    50% {
        transform: scale(1.1);
        background-color: var(--bs-warning-bg-subtle);
    }

    100% {
        transform: scale(1);
        background-color: var(--bs-warning);
    }
}

@media (max-width: 576px) {
    .homepage-cart .cart-btn {
        padding: 0.75rem !important;
    }

    .homepage-cart .cart-icon {
        font-size: 1.2rem;
    }
}

/* Homepage override to keep the navbar cart icon consistent with global sizing. */
.main-nav .cart-icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0;
    background: transparent;
    animation: none;
}