@media only screen and (max-width: 768px){
    html,
    body{
    width:100%;
    overflow-x:hidden;
    }
}

/* Force 6 thumbnails in a single row */
.woocommerce-product-gallery--with-images .flex-control-thumbs {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
}

.woocommerce-product-gallery--with-images .flex-control-thumbs li {
    width: 15% !important; /* Adjusts width to fit 6 images (100 / 6 is approx 16%) */
    margin-right: 5px !important; /* Small gap between images */
    float: none !important;
}

/* Remove margin from the last thumbnail */
.woocommerce-product-gallery--with-images .flex-control-thumbs li:last-child {
    margin-right: 0 !important;
}

/* Prevent WooCommerce stars from stacking and growing large on load */
.star-rating, 
.woocommerce .star-rating, 
.elementor-widget-wc-rating .star-rating {
    display: block !important;
    margin: 0 auto !important; /* Centers it if needed */
    overflow: hidden !important;
    position: relative !important;
    height: 1.2em !important;
    width: 5.4em !important; /* The exact width of 5 stars */
    line-height: 1 !important;
    font-size: 16px !important; /* Adjust this to your preferred star size */
    float: none !important;
}

.star-rating::before, 
.star-rating span::before {
    content: "\73\73\73\73\73" !important; /* Forces the star characters */
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* 1. Change Post Title Color */
.ast-archive-post .entry-title a {
    color: #ff5733 !important; /* Change to your hex code */
}

/* 2. Change "Read Post" Link Color */
.ast-blog-single-element .ast-read-more a {
    color: #3498db !important; /* Change to your hex code */
}

/* 3. Hover Colors (Optional) */
.ast-archive-post .entry-title a:hover, 
.ast-read-more a:hover {
    color: #000000 !important;
}


/* UNIFIED FIX: Color, Hidden Text, and 5th Star Cutoff */
.review-rating .star-rating {
    overflow: hidden !important;
    position: relative !important;
    height: 1.2em !important;
    line-height: 1 !important;
    font-size: 16px !important;
    width: 6.5em !important;          /* Increased width to stop the 10% cutoff */
    font-family: 'star' !important;
    display: inline-block !important;
    white-space: nowrap !important;   /* Prevents stars from jumping to a new line */
}

/* Background Stars (The "Empty" layer) */
.review-rating .star-rating::before {
    content: 'sssss' !important;
    color: #d3ced2 !important;        /* Light gray for the empty stars */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* Foreground Stars (The "Filled" layer) */
.review-rating .star-rating span {
    overflow: hidden !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;           /* Forces 5/5 stars to be full */
    padding-top: 1.5em !important;    /* Pushes the "5 out of 5" text out of view */
}

.review-rating .star-rating span::before {
    content: 'SSSSS' !important;      /* Uppercase 'S' is the SOLID star icon */
    color: #FFD700 !important;        /* Your Gold Color */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    -webkit-text-fill-color: #FFD700 !important;
}


/* Change the color of the reviewer's name */
.woocommerce-review__author {
    color: #000000 !important; /* Replace with your color (e.g., #000000 for black) */
    font-size: 16px !important;  /* Optional: change the size */
    font-weight: 700 !important; /* Ensures it stays bold */
}


/* 1. Target the (verified owner) text */
.woocommerce-review__verified {
    color: #000000 !important;   /* Pure Black */
    font-size: 16px !important;  /* Matches your reviewer name size */
    font-style: normal !important; /* Removes the default italics for a cleaner look */
    margin-left: 5px !important;  /* Adds a tiny bit of breathing room from the name */
}


.my-vertical-divider {
    border-left: 1px solid #09baef; /* Color and thickness */
    height: 100px;               /* Adjust the height as needed */
    margin: 0 20px;              /* Space on the left and right */
    display: inline-block;       /* Keeps it from taking a whole line */
    vertical-align: middle;
}




/* 1. Hide the Gift Card form itself */
#wc_gc_cart_redeem_form {
    display: none !important;
}

/* 2. Hide the "Have a gift card? Click here" notice wrapper */
.woocommerce-info:has(#wc_gc_cart_redeem_form),
.wc-block-checkout__gift-cards,
.wc-gc-checkout-redeem-container {
    display: none !important;
}

/* Removes the entire gift card container, including the header and form */
.add_gift_card_form {
    display: none !important;
}


/* 1. Force the image size and prevent "squishing" */
.checkout-image-container img {
    width: 80px !important;      /* Actual display width */
    height: 80px !important;     /* Actual display height */
    min-width: 80px !important;  /* Prevents browser from shrinking it */
    min-height: 80px !important; /* Prevents browser from shrinking it */
    object-fit: cover !important; 
    border-radius: 6px !important;
    flex-shrink: 0 !important;   /* Critical: tells flexbox not to compress this */
}

/* 2. Align name and image */
.checkout-item-details {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    width: 100% !important;
}

/* 3. Adjust Table Columns to close the "Large Gap" */
/* This gives the product name area more room and pulls the price in */
.woocommerce-checkout-review-order-table .product-name {
    width: 75% !important; 
    text-align: left !important;
}

.woocommerce-checkout-review-order-table .product-total {
    width: 25% !important;
    text-align: right !important;
}

/* 4. Fix vertical alignment for the whole row */
.cart_item td {
    vertical-align: middle !important;
    padding: 15px 0 !important;
}



/* Change "Name" to "First Name" using CSS content replacement */
.comment-form-author label {
    font-size: 0 !important; /* Hide the original "Name" text */
}

.comment-form-author label:before {
    content: "First Name "; /* Add the new text */
    font-size: 16px !important; /* Set back to your theme's font size */
}

.comment-form-author label .required {
    font-size: 16px !important; /* Ensure the red asterisk stays visible */
}


/* 1. Target the parent form to allow buttons to stack */
form.cart, 
.elementor-add-to-cart {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

/* 2. Force the Apple Pay container to occupy a full new row */
.wc-stripe-product-checkout-container {
    flex: 0 0 100% !important; /* This forces it to take up 100% width of the next 'row' */
    width: 100% !important;
    display: block !important;
    margin-top: 15px !important;
    clear: both !important;
}

/* 3. Keep the button size reasonable */
#wc-stripe-applepay-container {
    max-width: 200px !important; /* Adjust this to make it smaller/larger */
    margin-left: 0 !important;   /* Aligns it to the left */
}

/* 4. Ensure the Add to Cart button doesn't stretch weirdly */
.single_add_to_cart_button {
    flex: 0 1 auto !important;
}




/* 2. FIX LINK COLOR (Targeting .woobt-title per your inspect code) */
.woobt-title a {
    color: #044a60 !important; /* Forces title to Black */
    text-decoration: none !important;
    font-weight: 400 !important;
    font-size: 15px
!important;
}


/* 1. Remove borders/shadows from the main container */
#gallery-1.gallery {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 -5px !important; /* Adjusts for the 5px padding on items below */
}

/* 2. Strip shadows/borders from individual items and background boxes */
#gallery-1 .gallery-item,
#gallery-1 .gallery-icon,
#gallery-1 .gallery-icon a {
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    padding: 2px !important; /* This creates the 'gap' between images */
    margin: 0 !important;
}

/* 3. Force 2-Column Grid (Total width 50% per item) */
#gallery-1 .gallery-item {
    max-width: 50% !important;
    display: inline-block !important;
    vertical-align: top;
}

/* 4. Force Perfect Squares and remove image borders */
#gallery-1 .gallery-item img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important; /* This forces the square crop */
    object-fit: cover !important;   /* Ensures the image fills the square without stretching */
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;    /* Change to 8px if you want rounded corners */
}

/* 5. Hide the caption text if it's creating extra white space */
#gallery-1 .gallery-caption {
    display: none !important;
}


@media (max-width: 767px) {
    /* 1. Container: Flex row with hidden scrollbar */
    #gallery-1.gallery {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        gap: 15px !important; /* The gap between images */
        padding: 0 20px 20px 20px !important; /* Space on the sides and bottom */
        margin-left: -20px !important; /* Pulls container to screen edges */
        margin-right: -20px !important;
        scrollbar-width: none; /* Hide scrollbar for Firefox */
        -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */
    }

    /* Hide scrollbar for Chrome/Safari */
    #gallery-1.gallery::-webkit-scrollbar {
        display: none !important;
    }

    /* 2. Items: 80% width to allow 'Peeking' */
    #gallery-1 .gallery-item {
        flex: 0 0 80% !important; /* Each image takes 80% width, leaving 20% for the next image to peek */
        max-width: 80% !important;
        display: block !important;
        scroll-snap-align: start !important; /* Aligns to the left on swipe */
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 3. Image Styling */
    #gallery-1 .gallery-item img {
        aspect-ratio: 1 / 1 !important;
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        border-radius: 8px !important;
    }

    /* Remove standard WordPress gallery clearing that breaks Flexbox */
    #gallery-1.gallery br {
        display: none !important;
    }
}



/* 1. THE CONTAINER: White box, black outline, rounded edges */
.woobt-wrap {
    background-color: #ffffff !important;
    border: 1px solid #000000 !important; /* Clean black outline */
    border-radius: 8px !important;
    padding: 20px !important;
    margin: 20px 0 !important;
    width: 100% !important; /* Ensure it spans the full width on all devices */
}

/* 2. HIDE THE QUANTITY BOX */
/* This removes the '1x' and the input box entirely */
.woobt-qty, 
.woobt-qty-num,
.woobt-qty-input {
    display: none !important;
}

/* 3. MUTE THE CHECKBOXES */
/* Simplified black/white checkbox look */
.woobt-checkbox {
    accent-color: #000000 !important; /* Modern way to color checkboxes */
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* 4. LIST ITEM ALIGNMENT */
.woobt-product {
    border: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* 5. TOTAL PRICE: Small and tucked next to Add to Cart */
/* This styling makes the total look like a subtle 'Add-on Total' label */
.woobt-total {
    display: flex;
    justify-content: flex-end; /* Pushes total to the right */
    align-items: center;
    font-size: 13px !important;
    color: #666 !important;
    margin-top: 10px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.woobt-total-price {
    color: #000 !important;
    font-weight: 700 !important;
    margin-left: 6px;
}






@media (max-width: 767px) {
    /* 1. Force the product row to be a single horizontal line */
    .woobt-product {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 10px 0 !important;
    }

    /* 2. THE FIX: Target the container, the link, and the image */
    .woobt-thumb, 
    .woobt-thumb a, 
    .woobt-thumb .woobt-img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 60px !important;      /* Explicitly set width for all layers */
        min-width: 60px !important;
        height: 60px !important;     /* Explicitly set height */
        max-width: 60px !important;
        margin: 0 !important;
        overflow: visible !important; /* Prevents container from collapsing */
    }

    /* 3. Ensure the image fills the 60px square */
    .woobt-thumb img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 4px !important;
    }

    /* 4. Keep the Title and Price on the same line */
    .woobt-choose {
        flex: 0 0 20px !important;
    }

    .woobt-title {
        flex: 1 1 auto !important;
        font-size: 13px !important;
    }

    .woobt-price {
        flex: 0 0 auto !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    /* Remove any plugin-injected line breaks */
    .woobt-product br {
        display: none !important;
    }
}




/* 1. INJECT THE HEADER inside the outlined box */
.woobt-wrap::before {
    content: "EXCLUSIVE BUNDLE: ADD THE EBOOK FOR FREE" !important; 
    display: block !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    color: #000000 !important;
    text-transform: uppercase !important;
    margin-bottom: 15px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #eeeeee !important; /* Subtle separator line */
}


/* Force the button to be 100% wide */
.single_add_to_cart_button.button.alt {
    width: 100% !important;
    display: block !important;
    padding: 15px 0 !important; /* Makes the button taller/thicker */
    font-size: 16px !important;
    font-weight: 700 !important;
}

/* Ensure the container doesn't restrict the button size */
form.cart {
    display: flex !important;
    flex-wrap: wrap !important;
}

.elementor-add-to-cart .quantity {
    display: none !important; /* Optional: hides the 1,2,3 box to give button more room */
}





/* Targets the front and back containers and the image wrapper */
.eael-elements-flip-box-front-container, 
.eael-elements-flip-box-rear-container,
.eael-elements-flip-box-icon-image,
.eael-elements-flip-box-container {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
}

/* Targets the specific image tag you have in the HTML */
img.eael-flipbox-image-as-icon {
    box-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
}



/* Hide the review form by default */
#review_form #commentform {
    display: none;
    margin-top: 20px;
}

/* Make the "Add a review" title look clickable */
#review_form #reply-title {
    cursor: pointer;
    display: inline-block;
    padding: 10px 20px;
    background-color: #f9f9f9; /* Optional: light background */
    border: 1px solid #ddd;    /* Optional: border */
    border-radius: 5px;
    transition: all 0.3s ease;
}

#review_form #reply-title:hover {
    background-color: #eeeeee;
}

/* Add a small arrow indicator after the text */
#review_form #reply-title::after {
    content: ' +';
    font-weight: bold;
}

/* When the form is active, change the arrow to a minus */
#review_form #reply-title.form-open::after {
    content: ' −';
}





/* Remove the gap left by the missing reviewer avatar */
.woocommerce #reviews #comments ol.commentlist li .comment-text,
.cr-single-product-review .comment-text {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Ensure the container itself isn't adding weird spacing */
.comment_container {
    padding-left: 0 !important;
}

/* Hide the avatar container if it's still taking up space */
.comment_container img.avatar, 
.comment_container .avatar {
    display: none !important;
}

/* Align stars to the left */
.review-rating {
    display: block;
    float: none !important;
}


/* Target only the button inside the WPC bundle container */
.woobt-wrap .woobt-action .single_add_to_cart_button.button.alt {
    background-color: #09baef !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
    border-radius: 8px !important;
    padding: 20px 30px !important;
    width: 100% !important;
    display: block !important;
    
    /* FONT SETTINGS */
    font-family: "Lora", sans-serif !important; /* Replace Montserrat with your font name */
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    
    /* Reset theme shadows/animations */
    box-shadow: none !important;
    transition: all 0.3s ease-in-out !important;
}

/* Hover State */
.woobt-wrap .woobt-action .single_add_to_cart_button.button.alt:hover {
    background-color: #10e0ef !important;
    border-color: #10e0ef !important;
    transform: translateY(-2px);
}


/* 1. The Icon Styling */
.custom-tooltip {
    position: relative;
    cursor: help;
    color: #000000; /* Icon color - change this to your brand color if needed */
    font-weight: bold;
    margin-left: 5px;
    display: inline-block;
    font-style: normal;
}

/* 2. The Tooltip Box (The "Popup") */
.custom-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 150%; /* Distance above the icon */
    left: 50%;
    transform: translateX(-50%);
    
    /* Modern Styling */
    background-color: #ffffff;
    color: #000000;
    padding: 10px 15px;
    border-radius: 4px; /* Slight roundness for a modern look */
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
    
    /* Depth and Border */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border: 1px solid #e0e0e0;
    
    /* Visibility Logic */
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
    z-index: 9999;
}

/* 3. The Little Arrow at the Bottom */
.custom-tooltip::before {
    content: "";
    position: absolute;
    top: -10px; /* Aligns the arrow with the box */
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #ffffff transparent transparent transparent; /* Matches box bg */
    
    /* Shadow for the arrow */
    filter: drop-shadow(0 2px 1px rgba(0,0,0,0.05));
    
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
}

/* 4. Triggering the Hover Effect */
.custom-tooltip:hover::after,
.custom-tooltip:hover::before {
    opacity: 1;
    visibility: visible;
    bottom: 135%; /* Subtle "float up" animation */
}








/* NUCLEAR MOBILE FIX */
@media screen and (max-width: 767px) {
    /* Target the Inner Section Row specifically */
    .swipe-columns .elementor-container,
    .swipe-columns .elementor-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: scroll !important; /* Changed from auto to scroll */
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        gap: 20px !important;
    }

    .swipe-columns .elementor-column {
        flex: 0 0 80% !important;
        width: 80% !important; /* Added width for extra force */
        max-width: 80% !important;
        min-width: 80% !important;
        display: block !important; /* Prevents hidden columns */
        scroll-snap-align: center !important;
    }
}