/* ==========================================================================
   A2Z AI Tools - Modern Product Item Card Styles (1:1 Ratio + Buy Now)
   ========================================================================== */

.single-product-item {
    background: #ffffff !important;
    border-radius: 18px !important;
    border: 1px solid rgba(226, 232, 240, 0.85) !important;
    padding: 10px 10px 14px 10px !important;
    box-shadow: 0 4px 18px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.03) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.35s ease !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    position: relative !important;
}

.single-product-item:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(255, 84, 99, 0.35) !important;
    box-shadow: 0 18px 30px -8px rgba(255, 84, 99, 0.16), 0 8px 16px -4px rgba(15, 23, 42, 0.06) !important;
}

/* 1:1 Aspect Ratio Thumbnail */
.single-product-item .product-thumb {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.single-product-item .product-thumb a.thumb-link,
.single-product-item .product-thumb > a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
}

.single-product-item .product-thumb img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 14px !important;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.single-product-item:hover .product-thumb img {
    transform: scale(1.05) !important;
}

/* Floating Elements Inside Thumbnail */
.thumb-floating-top {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    z-index: 4 !important;
    pointer-events: none !important;
}

.thumb-floating-top .modern-badge,
.thumb-floating-top .wishlist-btn {
    pointer-events: auto !important;
}

.modern-badge.trending-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px 8px !important;
    border-radius: 9999px !important;
    background: linear-gradient(135deg, #ff4d5e 0%, #ff758c 100%) !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 10px rgba(255, 77, 94, 0.35) !important;
}

.thumb-floating-top .wishlist-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #64748b !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08) !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-left: auto !important;
}

.thumb-floating-top .wishlist-btn:hover {
    transform: scale(1.1) !important;
    color: #ff4d5e !important;
    background: #ffffff !important;
    box-shadow: 0 6px 14px rgba(255, 77, 94, 0.25) !important;
}

.thumb-floating-top .wishlist-btn.stroked,
.thumb-floating-top .wishlist-btn.stroked svg {
    color: #ff4d5e !important;
    fill: #ff4d5e !important;
}

.thumb-floating-bottom {
    position: absolute !important;
    bottom: 8px !important;
    left: 8px !important;
    z-index: 4 !important;
    pointer-events: none !important;
}

.stock-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    background: rgba(15, 23, 42, 0.75) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) !important;
}

.stock-pill .dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #22c55e !important;
    box-shadow: 0 0 6px #22c55e !important;
}

.stock-pill.out-of-stock .dot {
    background: #ef4444 !important;
    box-shadow: 0 0 6px #ef4444 !important;
}

/* Card Content Section */
.single-product-item .content-wrap {
    padding: 12px 2px 0 2px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

/* Category & Rating Row */
.card-meta-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
}

.card-category-link {
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    color: #64748b !important;
    background: #f1f5f9 !important;
    padding: 3px 8px !important;
    border-radius: 5px !important;
    text-decoration: none !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
    display: inline-block !important;
    line-height: 1.35 !important;
    transition: all 0.2s ease !important;
}

.card-category-link:hover {
    color: #ff5463 !important;
    background: rgba(255, 84, 99, 0.1) !important;
}

.card-rating {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    background: rgba(245, 158, 11, 0.1) !important;
    padding: 2px 6px !important;
    border-radius: 5px !important;
    flex-shrink: 0 !important;
}

.card-rating .rating-count {
    font-weight: 500 !important;
    color: #94a3b8 !important;
    font-size: 10px !important;
}

/* Product Title */
.single-product-item .product-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin-bottom: 5px !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: flex-start !important;
}

.single-product-item .product-title a {
    color: #0f172a !important;
    text-decoration: none !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transition: color 0.2s ease !important;
}

.single-product-item .product-title a:hover {
    color: #ff5463 !important;
}

/* Seller Info */
.product-seller-row {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 12px !important;
    color: #94a3b8 !important;
    margin-bottom: 10px !important;
}

.product-seller-row .seller-name {
    color: #475569 !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 170px !important;
}

.product-seller-row .seller-name:hover {
    color: #ff5463 !important;
}

/* Footer: Price + Buy Now Button */
.card-footer-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding-top: 10px !important;
    margin-top: auto !important;
    border-top: 1px dashed rgba(226, 232, 240, 0.9) !important;
}

.price-container {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}

.price-label {
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #94a3b8 !important;
    line-height: 1 !important;
    margin-bottom: 3px !important;
}

.price-values {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

.price-values .main-price {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #ff5463 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    letter-spacing: -0.3px !important;
}

.price-values .strike-price {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
    text-decoration: line-through !important;
    white-space: nowrap !important;
}

/* BUY NOW BUTTON */
.buy-now-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    background: linear-gradient(135deg, #ff5463 0%, #ee384a 100%) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 14px !important;
    border-radius: 9px !important;
    border: none !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 12px rgba(255, 84, 99, 0.28) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

.buy-now-cta svg {
    transition: transform 0.25s ease !important;
    flex-shrink: 0 !important;
}

.buy-now-cta:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(255, 84, 99, 0.42) !important;
    color: #ffffff !important;
    filter: brightness(1.04) !important;
}

.buy-now-cta:hover svg {
    transform: scale(1.1) rotate(-4deg) !important;
}

.buy-now-cta:active {
    transform: translateY(0) !important;
}

.buy-now-cta.disabled {
    background: #cbd5e1 !important;
    color: #64748b !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

/* ==========================================================================
   Hero Section Vertical Spacing & Position Adjustment
   ========================================================================== */
.hero-area {
    padding-top: 85px !important;
    padding-bottom: 90px !important;
}

.hero-area .hero-left {
    padding-top: 28px !important;
}

@media (max-width: 991px) {
    .hero-area {
        padding-top: 55px !important;
        padding-bottom: 75px !important;
    }
    .hero-area .hero-left {
        padding-top: 15px !important;
    }
}

/* ==========================================================================
   Hero Feature & Trust Cards (Compact value cards under stats)
   ========================================================================== */
.hero-features-wrap {
    display: flex !important;
    align-items: stretch !important;
    gap: 14px !important;
    margin-top: 60px !important;
    flex-wrap: wrap !important;
}

.hero-feature-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 122px !important;
    min-height: 94px !important;
    padding: 13px 10px 11px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 8px 22px -5px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
    text-decoration: none !important;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.hero-feature-card:hover {
    transform: translateY(-4px) !important;
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.32) !important;
    box-shadow: 0 14px 28px -6px rgba(0, 0, 0, 0.3), 0 0 16px rgba(255, 255, 255, 0.1) !important;
}

.feature-icon-box {
    width: 36px !important;
    height: 36px !important;
    border-radius: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    color: #ffffff !important;
    margin-bottom: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.25s ease !important;
}

.hero-feature-card:hover .feature-icon-box {
    transform: scale(1.1) rotate(-3deg) !important;
}

.feature-icon-box.icon-cyan {
    background: linear-gradient(135deg, #06b6d4 0%, #0284c7 100%) !important;
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.45) !important;
}

.feature-icon-box.icon-emerald {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45) !important;
}

.feature-icon-box.icon-rose {
    background: linear-gradient(135deg, #ff5463 0%, #e11d48 100%) !important;
    box-shadow: 0 4px 14px rgba(255, 84, 99, 0.45) !important;
}

.feature-title {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

@media (max-width: 575px) {
    .hero-features-wrap {
        gap: 8px !important;
        margin-top: 20px !important;
    }
    .hero-feature-card {
        width: calc(33.333% - 6px) !important;
        min-width: 92px !important;
        min-height: 84px !important;
        padding: 10px 6px 8px !important;
        border-radius: 12px !important;
    }
    .feature-icon-box {
        width: 32px !important;
        height: 32px !important;
        border-radius: 9px !important;
        margin-bottom: 6px !important;
    }
    .feature-icon-box svg {
        width: 17px !important;
        height: 17px !important;
    }
    .feature-title {
        font-size: 11px !important;
    }
}

/* ==========================================================================
   Best Selling Category Cards (1:1 Aspect Ratio - Exactly 4 Columns / 3 Rows)
   ========================================================================== */
.best-selling-product-wrapper {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
}

@media (max-width: 1199px) {
    .best-selling-product-wrapper {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 767px) {
    .best-selling-product-wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 480px) {
    .best-selling-product-wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

/* ==========================================================================
   Universal Button Design System & Signature Sliding Hover Effect
   Matches all website buttons (.primary-button) with #d43a48 slide-in hover
   ========================================================================== */

.primary-button,
.site-btn.primary-btn,
.view-all-category-btn,
a.view-all-category-btn {
    position: relative !important;
    display: inline-flex !important;
    height: 40px !important;
    padding: 10px 22px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    border: none !important;
    border-radius: 40px !important;
    overflow: hidden !important;
    font-family: var(--td-heading-font, "Exo 2", sans-serif) !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: normal !important;
    color: #ffffff !important;
    background: var(--td-primary, #ff5463) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(255, 84, 99, 0.28) !important;
    transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, transform 0.25s ease !important;
    z-index: 1 !important;
}

/* Sliding hover fill background (matches the website's signature effect) */
.primary-button::before,
.site-btn.primary-btn::before,
.view-all-category-btn::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    inset-inline-start: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: #d43a48 !important; /* Signature website hover fill color */
    transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                inset-inline-start 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.primary-button:hover::before,
.site-btn.primary-btn:hover::before,
.view-all-category-btn:hover::before {
    left: 0 !important;
    inset-inline-start: 0 !important;
}

.primary-button:not(:hover)::before,
.site-btn.primary-btn:not(:hover)::before,
.view-all-category-btn:not(:hover)::before {
    left: -100% !important;
    inset-inline-start: -100% !important;
}

/* Inner text and icon positioning */
.primary-button span,
.primary-button i,
.primary-button svg,
.site-btn.primary-btn span,
.site-btn.primary-btn i,
.site-btn.primary-btn svg,
.view-all-category-btn span,
.view-all-category-btn i,
.view-all-category-btn svg {
    position: relative !important;
    z-index: 1 !important;
    color: #ffffff !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.primary-button:hover,
.site-btn.primary-btn:hover,
.view-all-category-btn:hover {
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(212, 58, 72, 0.4) !important;
}

.primary-button:hover i,
.site-btn.primary-btn:hover i,
.view-all-category-btn:hover i {
    transform: translateX(4px) !important;
}

.primary-button:active,
.site-btn.primary-btn:active,
.view-all-category-btn:active {
    transform: scale(0.98) !important;
}

.best-selling-product .product-card,
.best-selling-product-wrapper .product-card {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.16) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease !important;
}

.best-selling-product .product-card:hover,
.best-selling-product-wrapper .product-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 32px -6px rgba(0, 0, 0, 0.28) !important;
}

.best-selling-product .product-card .image-box,
.best-selling-product-wrapper .product-card .image-box {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    position: relative !important;
}

.best-selling-product .product-card .image-box img,
.best-selling-product-wrapper .product-card .image-box img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.best-selling-product .product-card:hover .image-box img,
.best-selling-product-wrapper .product-card:hover .image-box img {
    transform: scale(1.08) !important;
}

.best-selling-product .product-card::after,
.best-selling-product-wrapper .product-card::after {
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.85) 100%) !important;
}

/* Redesigned Pinkish Luminous Offer Badge */
.product-card .offers,
.best-selling-product .product-card .offers,
.best-selling-product-wrapper .product-card .offers {
    position: absolute !important;
    top: 10px !important;
    inset-inline-end: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 11px 4px 9px !important;
    border-radius: 9999px !important;
    background: linear-gradient(135deg, #ff4157 0%, #ff5d72 50%, #ff3366 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 4px 14px rgba(255, 65, 87, 0.42), 0 2px 4px rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 3 !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.25s ease !important;
}

.product-card .offers .offer-dot,
.best-selling-product .product-card .offers .offer-dot,
.best-selling-product-wrapper .product-card .offers .offer-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.95) !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    animation: offerDotPulse 2s infinite ease-in-out !important;
}

@keyframes offerDotPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.35);
        opacity: 0.75;
    }
}

.product-card .offers h6,
.best-selling-product .product-card .offers h6,
.best-selling-product-wrapper .product-card .offers h6 {
    font-family: var(--td-heading-font, "Exo 2", sans-serif) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.35px !important;
    text-transform: capitalize !important;
    color: #ffffff !important;
    margin: 0 !important;
    line-height: 1 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.product-card:hover .offers,
.best-selling-product .product-card:hover .offers,
.best-selling-product-wrapper .product-card:hover .offers {
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 6px 18px rgba(255, 65, 87, 0.58), 0 2px 6px rgba(0, 0, 0, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
}

.best-selling-product .product-card .game-name,
.best-selling-product-wrapper .product-card .game-name {
    bottom: 20px !important;
    padding: 0 16px !important;
}

.best-selling-product .product-card .game-name h4,
.best-selling-product-wrapper .product-card .game-name h4 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
    margin: 0 !important;
}

/* ==========================================================================
   Trending Product Cards - Modern Redesign with Original Colors & Animations
   ========================================================================== */

.trending-product {
    position: relative !important;
    overflow: visible !important;
}

.trending-product .section-header.title_mb {
    margin-bottom: 24px !important;
    position: relative !important;
    z-index: 1 !important;
}

.trending-product .section-header .section-title {
    font-size: 26px !important;
    font-weight: 700 !important;
    letter-spacing: -0.3px !important;
}

.trending-product .view-all-header-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    padding: 7px 18px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.trending-product .view-all-header-link:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    transform: translateX(3px) !important;
    text-decoration: none !important;
}

/* Outer Cards Wrapper - Crucial: overflow visible so cards don't get clipped on hover */
.trending-product-cards {
    position: relative !important;
    z-index: 2 !important;
    overflow: visible !important;
    margin-top: 10px !important;
}

.trending-product-cards .trending-product-cards-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    overflow: visible !important;
    padding-top: 16px !important; /* Headroom so card lift translateY(-8px) never touches or clips under header */
}

.trending-product-cards .trending-product-cards-row .trending-product-cards-col {
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    padding-top: 4px !important;
}

/* Card Body Base */
.trending-product-cards .trending-product-cards-row .trending-product-cards-col .trending-product-card {
    mix-blend-mode: normal !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 18px !important;
    padding: 22px 18px 20px 18px !important;
    box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.25) !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s ease !important;
}

/* Snake Shape Overlay Inside Card */
.trending-product-cards .trending-product-cards-row .trending-product-cards-col .trending-product-card::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    inset-inline-start: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
    opacity: 0.7 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    transition: opacity 0.35s ease, transform 0.35s ease !important;
}

/* ==========================================================================
   Original Card Color Variants
   ========================================================================== */

/* Variant 1: Original #45abfd (Sky Blue) */
.trending-product-cards .trending-product-cards-row .trending-product-cards-col:nth-child(1) .trending-product-card,
.trending-product-card.card-variant-1 {
    background: #45abfd !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}
.trending-product-cards .trending-product-cards-row .trending-product-cards-col:nth-child(1) .trending-product-card::before,
.trending-product-card.card-variant-1::before {
    background-image: url(../images/shapes/snake-shape-01.png) !important;
}
.trending-product-cards .trending-product-cards-row .trending-product-cards-col:nth-child(1) .trending-product-card .title-icon .icon,
.trending-product-card.card-variant-1 .title-icon .icon {
    background: #3690d9 !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

/* Variant 2: Original #a766ff (Vibrant Purple) */
.trending-product-cards .trending-product-cards-row .trending-product-cards-col:nth-child(2) .trending-product-card,
.trending-product-card.card-variant-2 {
    background: #a766ff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}
.trending-product-cards .trending-product-cards-row .trending-product-cards-col:nth-child(2) .trending-product-card::before,
.trending-product-card.card-variant-2::before {
    background-image: url(../images/shapes/snake-shape-02.png) !important;
}
.trending-product-cards .trending-product-cards-row .trending-product-cards-col:nth-child(2) .trending-product-card .title-icon .icon,
.trending-product-card.card-variant-2 .title-icon .icon {
    background: #9455e9 !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

/* Variant 3: Original #4e61d3 (Royal Indigo) */
.trending-product-cards .trending-product-cards-row .trending-product-cards-col:nth-child(3) .trending-product-card,
.trending-product-card.card-variant-3 {
    background: #4e61d3 !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}
.trending-product-cards .trending-product-cards-row .trending-product-cards-col:nth-child(3) .trending-product-card::before,
.trending-product-card.card-variant-3::before {
    background-image: url(../images/shapes/snake-shape-03.png) !important;
}
.trending-product-cards .trending-product-cards-row .trending-product-cards-col:nth-child(3) .trending-product-card .title-icon .icon,
.trending-product-card.card-variant-3 .title-icon .icon {
    background: #3448c4 !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

/* Variant 4: Original #54b2a9 (Emerald Teal) */
.trending-product-cards .trending-product-cards-row .trending-product-cards-col:nth-child(4) .trending-product-card,
.trending-product-card.card-variant-4 {
    background: #54b2a9 !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}
.trending-product-cards .trending-product-cards-row .trending-product-cards-col:nth-child(4) .trending-product-card::before,
.trending-product-card.card-variant-4::before {
    background-image: url(../images/shapes/snake-shape-04.png) !important;
}
.trending-product-cards .trending-product-cards-row .trending-product-cards-col:nth-child(4) .trending-product-card .title-icon .icon,
.trending-product-card.card-variant-4 .title-icon .icon {
    background: #3f9d94 !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

/* Card Hover Animation - Smooth Lift without Clipping */
.trending-product-cards .trending-product-cards-row .trending-product-cards-col .trending-product-card:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 20px 42px -6px rgba(0, 0, 0, 0.38),
                0 0 22px rgba(255, 255, 255, 0.22) !important;
    z-index: 10 !important;
}

.trending-product-cards .trending-product-cards-row .trending-product-cards-col .trending-product-card:hover::before {
    opacity: 0.9 !important;
    transform: scale(1.03) !important;
}

/* Top Meta Bar */
.trending-product-card .card-meta-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 15px !important;
    position: relative !important;
    z-index: 1 !important;
}

.trending-badge-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.trending-badge-pill i {
    color: #ffd166 !important;
    font-size: 11px !important;
}

.items-count-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
}

.items-count-pill i {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Category Header */
.trending-product-card .title-icon {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding-bottom: 16px !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    position: relative !important;
    z-index: 1 !important;
}

.trending-product-cards .trending-product-cards-row .trending-product-cards-col .trending-product-card .title-icon .icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease !important;
}

.trending-product-cards .trending-product-cards-row .trending-product-cards-col .trending-product-card:hover .title-icon .icon {
    transform: scale(1.08) translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25) !important;
}

.trending-product-card .title-icon .icon i {
    color: #ffffff !important;
    font-size: 22px !important;
}

.trending-product-card .title-icon .icon img {
    width: 26px !important;
    height: 26px !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important;
}

.trending-product-card .title-icon .category-meta-info {
    min-width: 0 !important;
    flex: 1 !important;
}

.trending-product-card .title-icon .category-meta-info h6 {
    color: #ffffff !important;
    font-size: 17.5px !important;
    font-weight: 700 !important;
    margin: 0 0 3px 0 !important;
    line-height: 1.3 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    letter-spacing: -0.2px !important;
}

.trending-product-card .title-icon .category-meta-info .sub-label {
    display: block !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.2px !important;
}

/* Products / Subcategories List */
.trending-product-card .products-lists {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
    flex-grow: 1 !important;
    position: relative !important;
    z-index: 1 !important;
}

.trending-product-card .products-lists .product-list .product-list-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    background: rgba(0, 0, 0, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.trending-product-card .products-lists .product-list .product-list-card:hover {
    background: rgba(0, 0, 0, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    transform: translateX(4px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    text-decoration: none !important;
}

.trending-product-card .item-name-group {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    flex: 1 !important;
}

.trending-product-card .item-bullet-icon {
    width: 26px !important;
    height: 26px !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s ease !important;
}

.trending-product-card .products-lists .product-list .product-list-card:hover .item-bullet-icon {
    transform: scale(1.1) !important;
}

.trending-product-card .item-name-group h5 {
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: normal !important;
}

.trending-product-card .item-badge-group {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

.trending-product-card .qty-badge {
    background: rgba(0, 0, 0, 0.2) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.trending-product-card .item-arrow-icon {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 11px !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
}

.trending-product-card .products-lists .product-list .product-list-card:hover .item-arrow-icon {
    transform: translateX(3px) !important;
    color: #ffffff !important;
}

/* Empty State */
.trending-product-card .empty-state-wrap {
    padding: 24px 12px !important;
    border-radius: 10px !important;
    background: rgba(0, 0, 0, 0.1) !important;
    border: 1px dashed rgba(255, 255, 255, 0.25) !important;
}

/* ==========================================================================
   View All Items Button - Identical to Website Sign Up/Sign In Button
   NO Underline in Any State
   ========================================================================== */
.trending-product-card .view-all-btn {
    margin-top: auto !important;
    position: relative !important;
    z-index: 1 !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
}

.trending-product-card .view-all-btn,
.trending-product-card .view-all-btn:hover,
.trending-product-card .view-all-btn:focus,
.trending-product-card .view-all-btn:active,
.trending-product-card .view-all-btn * {
    text-decoration: none !important;
    text-decoration-line: none !important;
}

.trending-product-card .view-all-btn a,
.trending-product-card .view-all-btn .primary-button,
.trending-product-card .trending-card-btn {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    height: 42px !important;
    padding: 0 20px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    border: none !important;
    border-radius: 40px !important;
    overflow: hidden !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: normal !important;
    color: #ffffff !important;
    background: var(--td-primary, #ff5463) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(255, 84, 99, 0.3) !important;
    transition: color 0.3s ease-in-out, box-shadow 0.35s ease, transform 0.35s ease !important;
}

/* Strict removal of text underline in all states */
.trending-product-card .view-all-btn a,
.trending-product-card .view-all-btn a:hover,
.trending-product-card .view-all-btn a:focus,
.trending-product-card .view-all-btn a:active,
.trending-product-card .view-all-btn a:visited,
.trending-product-card .view-all-btn a span,
.trending-product-card .view-all-btn a:hover span,
.trending-product-card .view-all-btn a:focus span,
.trending-product-card .view-all-btn .primary-button,
.trending-product-card .view-all-btn .primary-button:hover,
.trending-product-card .view-all-btn .primary-button:focus,
.trending-product-card .view-all-btn .primary-button:active,
.trending-product-card .view-all-btn .primary-button span,
.trending-product-card .view-all-btn .primary-button:hover span,
.trending-product-card .view-all-btn .primary-button:focus span,
.trending-product-card .trending-card-btn,
.trending-product-card .trending-card-btn:hover,
.trending-product-card .trending-card-btn:focus,
.trending-product-card .trending-card-btn:active,
.trending-product-card .trending-card-btn span,
.trending-product-card .trending-card-btn:hover span,
.trending-product-card .trending-card-btn:focus span {
    text-decoration: none !important;
    text-decoration-line: none !important;
    outline: none !important;
}

/* Sliding hover effect matching header Sign Up / Sign In button */
.trending-product-card .view-all-btn .primary-button::before,
.trending-product-card .trending-card-btn::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    inset-inline-start: -100% !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: #d43a48 !important;
    transition: inset-inline-start 0.45s cubic-bezier(0.16, 1, 0.3, 1), left 0.45s ease-in-out !important;
    z-index: 0 !important;
}

.trending-product-card .view-all-btn .primary-button:hover::before,
.trending-product-card .trending-card-btn:hover::before {
    inset-inline-start: 0 !important;
    left: 0 !important;
}

.trending-product-card .view-all-btn .primary-button:not(:hover)::before,
.trending-product-card .trending-card-btn:not(:hover)::before {
    inset-inline-start: -100% !important;
    left: -100% !important;
}

.trending-product-card .view-all-btn .primary-button:hover,
.trending-product-card .trending-card-btn:hover {
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(255, 84, 99, 0.5) !important;
    text-decoration: none !important;
}

.trending-product-card .view-all-btn .primary-button span,
.trending-product-card .view-all-btn .primary-button i,
.trending-product-card .trending-card-btn span,
.trending-product-card .trending-card-btn i {
    position: relative !important;
    z-index: 1 !important;
    color: #ffffff !important;
    transition: transform 0.25s ease !important;
}

.trending-product-card .view-all-btn .primary-button:hover i,
.trending-product-card .trending-card-btn:hover i {
    transform: translateX(4px) !important;
}