/* FORCE HERO NAV TO THE FRONT */
.wp-block-template-part-header, 
header, 
.is-style-hero-nav {
    position: relative !important;
    z-index: 9999 !important;
}

/* THE ULTIMATE MOBILE 2-COLUMN OVERRIDE */
@media screen and (max-width: 767px) {
    /* Targets the specific Elementor widget container */
    .elementor-widget-container ul.products,
    .elementor-grid,
    .woocommerce ul.products.columns-1 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Prevents the card from trying to take up 100% width */
    .elementor-grid-item, 
    .product-grid-item, 
    ul.products li.product {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* TIGHTEN THE 2-COLUMN CARDS */
@media screen and (max-width: 480px) {


    /* 2. Tighten text gaps */
    .product-grid-item h2 {
        margin-bottom: 5px !important;
        font-size: 13px !important;
    }


    /* 4. Fix image alignment */
    .product-grid-item img {
        max-height: 140% !important;
        object-fit: contain !important;
    }
}

/* REMOVE TOP WHITE MARGIN */
html {
    margin-top: 0px !important;
}

body {
    padding-top: 0px !important;
    margin-top: 0px !important;
}

/* TARGET THE HEADER CONTAINER SPECIFICALLY */
.elementor-section-wrap > .elementor-element:first-child {
    margin-top: 0 !important;
}

/* KILL THE GHOST LINE AND HEADER GAP */
#header hr, 
header hr,
.site-header hr {
    display: none !important;
}

/* FORCE HEADER TO THE ABSOLUTE TOP */
#page {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#header {
    margin-bottom: 0 !important;
}

/* 1. COMPLETELY HIDE THE THEME'S NATIVE HEADER BOXES */
#header, 
#headerimg, 
.site-header, 
#masthead {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
}

/* 2. REMOVE THE HR GHOST LINE AGAIN JUST IN CASE */
hr {
    display: none !important;
}

/* 3. FORCE THE PAGE CONTENT TO START AT THE ABSOLUTE TOP */
#page, .site, .content-area {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 4. OVERRIDE WORDPRESS ADMIN BAR OFFSET */
html {
    margin-top: 0 !important;
}

/* STOP HEADER JITTER AND JUMPING */
.elementor-sticky--active {
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    transition: none !important; /* Disables the 'shaking' animation */
    margin-top: 0 !important;
}

/* LOCK THE HEIGHT TO PREVENT CONTENT JUMP */
.elementor-sticky-effects-active {
    padding-top: 80px !important; /* Set this to the exact height of your header */
}

/* Force all product items into the Card Style */
.products .product, .elementor-loop-container .elementor-grid-item {
    background: #ffffff !important; /* Pure white background */
    padding: 0px !important;
    border-radius: 8px !important;
    border: 1px solid #e0e0e0 !important; /* Light grey border */
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.05) !important; /* Soft shadow */
    transition: all 0.3s ease-in-out !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

/* Add a Copper glow when someone hovers over a competition */
.products .product:hover, .elementor-grid-item:hover {
    border-color: #b87333 !important; /* Copper Border */
    transform: translateY(-5px);
    box-shadow: 0px 8px 25px rgba(184, 115, 51, 0.2) !important;
}

/* 1. Remove padding from the card container so image touches the edges */
selector .shopengine-course-filter-card,
selector .elementor-widget-container {
    padding: 0 !important; /* Removes the white border around the image */
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    height: 100% !important;
    padding-bottom: 70px !important; /* Creates fixed space for the button */
    overflow: hidden !important; /* Ensures image corners don't poke out */
    border-radius: 12px !important; /* Optional: adds nice rounded corners to the whole card */
}

/* 2. Make the image fill the top width completely */
selector .shopengine-product-image,
selector .shopengine-product-image img {
    width: 100% !important;
    margin: 0 !important;
    padding:0 !important;
    display: block !important;
}

/* 3. Add padding back ONLY to the text area (Title & Price) */
selector .shopengine-product-title,
selector .shopengine-product-price {
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-top: 10px !important;
}

/* 4. Pin 'Enter Now' to the very bottom */
selector .shopengine-product-footer,
selector .elementor-button-wrapper {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 80% !important;
    margin: 0 !important;
}

/* 5. Make button square or rounded to match card bottom */
selector .elementor-button {
    width: 100% !important;
    border-radius: 0 0 12px 12px !important; /* Rounds only the bottom corners */
    padding: 15px !important;
}

/* 1. Hide every container inside the tabs content area by default */
selector .e-n-tabs-content > .e-con,
selector .e-n-tabs-content > .e-container {
    display: none !important;
}

/* 2. ONLY show the container that has the active class */
selector .e-n-tabs-content > .e-active {
    display: block !important;
}

/* 1. Push the button to the bottom of the card */
.elementor-loop-container .e-con, 
.products .product {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* This forces the button wrapper to take up all remaining space, 
   pushing the button to the very bottom */
.product-type-lottery .button.product_type_lottery,
.product-type-lottery .add_to_cart_button {
    margin-top: auto !important;
    
    /* 2. Style the rounded edges and theme colors */
    border-radius: 12px !important; /* Adjust this number for more/less roundness */
    background-color: #000000 !important;
    color: #b8965d !important;
    border: 2px solid #b8965d !important;
    padding: 12px 20px !important;
    font-weight: bold !important;
    text-align: center !important;
}

/* Target the wrapper holding the ticket count and progress bar */
.lty-lottery-progress-bar-loop {
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-bottom: 15px !important; /* Adds a bit of space below the bar before the button */
    box-sizing: border-box !important;
}

/* Optional: If the progress bar itself still looks too wide */
.lty-progress-bar {
}

/* Target the 'Enter Now' buttons in the shop grid */
.product-type-lottery .button.product_type_lottery,
.product-type-lottery .add_to_cart_button {
    /* 1. Make it thinner and force one row */
    height: 38px !important; 
    padding: 0 10px !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important; /* Slightly smaller to ensure it fits one line */
    text-transform: uppercase;
    
    /* 2. ADD 10PX PADDING FROM EDGES */
    /* We use margin to push the button away from the card walls */
    margin-left: 10px !important;
    margin-right: 10px !important;
    width: calc(100% - 20px) !important; /* Forces it to be card width minus the 10px each side */
    
    /* 3. Positioning and Style */
    margin-top: auto !important;
    margin-bottom: 12px !important;
    border-radius: 8px !important;
    background-color: #2575fc  !important;
    color: #000000 !important;
    border:0px solid #000000 !important;
    box-sizing: border-box !important;
}

/* Hide any duplicate text causing double rows */
.product-type-lottery .button.product_type_lottery br {
    display: none !important;
}

/* Create a gap between the product cards */
.products .product {
    margin-bottom: 40px !important; /* Adjust this number to increase/decrease the gap */
    position: relative;
}

/* Ensure the banner doesn't overlap the content above it */
.tfd-product-card-countdown {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    display: block; /* Forces it to take up its own line */
}