/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 03 2026 | 12:05:23 */
/* ================================================= */
/* ANIMATED LIVE GAMING BACKGROUND & PRODUCTS        */
/* ================================================= */
body, html, #page, .site, .woocommerce, .site-content, .content-area, .ast-container, .entry-content {
    background: linear-gradient(-45deg, #050814, #0f172a, #1e1b4b, #090d16) !important;
    background-size: 400% 400% !important;
    animation: liveGamingBG 12s ease infinite !important;
    color: #ffffff !important;
}

@keyframes liveGamingBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.woocommerce-products-header__title.page-title, 
.page-title, 
.elementor-heading-title,
h1.entry-title {
    font-size: 38px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    background: linear-gradient(135deg, #00ffcc, #ff007f, #00ff87) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 0 25px rgba(0, 255, 204, 0.5), 0 5px 15px rgba(0, 0, 0, 0.8) !important;
    letter-spacing: 2px !important;
    margin-bottom: 25px !important;
}

ul.products, .woocommerce ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 1.5% !important;
}

/* Desktop Card Size */
.product-category, ul.products li.product {
    position: relative !important;
    background: linear-gradient(145deg, #1a1a2e, #16213e) !important;
    border-radius: 18px !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6) !important;
    border: 2px solid rgba(0, 255, 204, 0.4) !important;
    transition: all 0.35s ease-in-out !important;
    flex: 0 0 19.5% !important;
    max-width: 19.5% !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
}

/* Card Lighting Shine Animation (Changed shine color to Cyan/Neon Blue instead of white) */
.product-category::before, ul.products li.product::before {
    content: '' !important;
    position: absolute !important;
    top: -100% !important;
    left: -150% !important;
    width: 300% !important;
    height: 300% !important;
    background: linear-gradient(135deg, transparent 40%, rgba(0, 255, 204, 0.7) 50%, transparent 60%) !important;
    animation: luxuryShine 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

@keyframes luxuryShine {
    0% { transform: translate(-30%, -30%) rotate(25deg); }
    100% { transform: translate(60%, 60%) rotate(25deg); }
}

/* Desktop Image Height */
.product-category img, 
ul.products li.product img,
ul.products li.product .woocommerce-placeholder {
    width: 100% !important;
    height: 215px !important;
    min-height: 215px !important;
    max-height: 215px !important;
    object-fit: contain !important;
    background-color: #0b0f19 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 204, 0.1) !important;
    display: block !important;
    margin-bottom: 8px !important;
}

/* ================================================= */
/* ZERO SPACE & TOUCHING YELLOW PATTIES WITH SHINE   */
/* ================================================= */

/* Common styles for Yellow Patties with Moving Light Effect */
.product-category h2, 
.product-category .woocommerce-loop-category__title, 
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .price,
ul.products li.product .button {
    position: relative !important;
    background: linear-gradient(180deg, #ffe033 0%, #ffcc00 100%) !important;
    color: #000000 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    z-index: 5 !important;
}

/* Moving Light Shine inside Yellow Patties */
.product-category h2::after, 
.product-category .woocommerce-loop-category__title::after, 
ul.products li.product .woocommerce-loop-product__title::after,
ul.products li.product .price::after,
ul.products li.product .button::after {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -150% !important;
    width: 200% !important;
    height: 200% !important;
    background: linear-gradient(135deg, transparent 40%, rgba(255, 0, 127, 0.6) 50%, transparent 60%) !important;
    animation: pattiShine 3s linear infinite !important;
    pointer-events: none !important;
}

@keyframes pattiShine {
    0% { transform: translateX(-100%) rotate(25deg); }
    100% { transform: translateX(150%) rotate(25deg); }
}

/* 1. Title Patti */
.product-category h2, 
.product-category .woocommerce-loop-category__title, 
ul.products li.product .woocommerce-loop-product__title {
    font-size: 13px !important;
    border-radius: 0 !important;
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

.product-category mark.count {
    background: transparent !important;
    color: #000000 !important;
    font-weight: bold !important;
}

/* 2. Price Patti */
ul.products li.product .price {
    font-size: 14px !important;
    border-radius: 0 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.2) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

ul.products li.product .price ins {
    background: transparent !important;
    color: #000000 !important;
    text-decoration: none !important;
}

ul.products li.product .price del {
    color: #333333 !important;
    opacity: 0.8 !important;
    margin-right: 5px !important;
}

/* Hide extra ratings */
ul.products li.product .star-rating {
    display: none !important;
}

/* 3. Button Patti */
ul.products li.product .button {
    font-size: 13px !important;
    border-radius: 0 !important;
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.2) !important;
    text-decoration: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    transition: background 0.2s ease !important;
}

ul.products li.product .button:hover {
    background: linear-gradient(180deg, #ffea66 0%, #ffdb1a) !important;
}

.product-category:hover, ul.products li.product:hover {
    transform: translateY(-6px) scale(1.02) !important;
    border-color: #00ffcc !important;
    background: linear-gradient(145deg, #1f1f3a, #1b2a4e) !important;
    box-shadow: 0 0 35px rgba(0, 255, 204, 0.8), 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

/* ================================================= */
/* MOBILE RESPONSIVE FIX (Compact & Perfect Size)     */
/* ================================================= */
@media screen and (max-width: 768px) {
    .product-category, ul.products li.product {
        flex: 0 0 48% !important;
        max-width: 48% !important;
        padding: 6px !important;
        border-radius: 12px !important;
        margin-bottom: 12px !important;
    }
    
    .product-category img, 
    ul.products li.product img,
    ul.products li.product .woocommerce-placeholder {
        height: 140px !important;
        min-height: 140px !important;
        max-height: 140px !important;
        border-radius: 8px !important;
        margin-bottom: 6px !important;
    }

    .product-category h2, 
    .product-category .woocommerce-loop-category__title, 
    ul.products li.product .woocommerce-loop-product__title {
        font-size: 11px !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
    }

    ul.products li.product .price {
        font-size: 12px !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
    }

    ul.products li.product .button {
        font-size: 11px !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
    }
}