* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /*background-color: #f6f6f6;*/
}

body:not(.loaded) .cart-sidebar,
body:not(.loaded) .region-sensitive {
    display: none;
}

/*body {
            background-color: #f4f4f4;
            color: #333;
            overflow: hidden;
        }*/

body::-webkit-scrollbar {
    display: none;
}

body {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}


header {
    background: #2c3e50;
    color: #fff;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#cart-toggle {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    position: relative;
}

#cart-count {
    background: red;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 0.75rem;
    position: absolute;
    top: -2px;
    right: -1px;
}

/* Responsive adjustments */
.product-group {
    padding: 1rem;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 30px 40px;
}

.product-card {
    /* Existing styles */
    flex: 0 0 auto;
    min-width: 235px;
    max-width: 235px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    padding: 1rem;
    text-align: center;
    transition: transform 0.2s;
    scroll-snap-align: start;
    box-sizing: border-box;
    /* --- NEW FLEXBOX PROPERTIES FOR ALIGNMENT --- */
    display: flex; /* Enable flexbox for vertical alignment */
    flex-direction: column; /* Stack children vertically */
    justify-content: space-between; /* Distribute space, pushing button to bottom */
}

.product-details-wrapper {
    flex-grow: 1; /* This element will take up available space, pushing the button down */
    display: flex; /* Make this a flex container too to align its children */
    flex-direction: column; /* Stack its children (h3, p, price) vertically */
    justify-content: flex-start; /* Align content to the top within the wrapper */
    margin-bottom: 10px; /* Add some space between details and the button */
}

.product-card img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    max-height: 120px;
    object-fit: contain;
    margin-bottom: 10px; /* Add margin below image for spacing */
}

.product-card h3 {
    margin-top: 0; /* Reset default h3 margin-top */
    font-size: 1.1rem;
    margin-bottom: 5px; /* Adjust spacing */
}

.product-card p {
    font-size: 0.9rem;
    margin: 0 0 8px 0; /* Adjust spacing */
    flex-grow: 1; /* Allow description to grow if needed */
}

/* General currency display update (ensure it looks good everywhere) */
.product-card .price {
    font-weight: bold;
    margin: 0 0 10px 0;
    text-align: center; /* Ensure product price is centered in its card */
}

/* Product Card Add to Cart Button */
.product-card button {
    background: #87CEEB; /* Light Sky Blue */
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    width: 100%; /* Ensure full width as set before */
}

    .product-card button:hover {
        background: #5CACEE; /* Slightly darker light blue on hover */
    }

/* Optional: Snap effect for scrolling */
#product-list {
    scroll-snap-type: x mandatory;
}

@media (max-width: 768px) {
    .product-card {
        flex: 1 1 45%;
        max-width: 100%;
        margin: 0.5rem;
    }
}

@media (max-width: 480px) {
    .product-card {
        flex: 1 1 90%;
        max-width: 95%;
        margin: 0.5rem auto;
    }
}

/*@media (max-width: 768px) {
            .product-card {
                width: calc(50% - 1rem);
            }*/

.product-card img {
    max-height: 100px;
}

@media (max-width: 480px) {
    .product-card {
        width: 75%;
    }

        .product-card img {
            max-height: 90px;
        }
}

.product-card h3 {
    margin-top: 10px;
    font-size: 1.1rem;
}

.product-card p {
    font-size: 0.9rem;
    margin: 8px 0;
}

.product-card .price {
    font-weight: bold;
    margin: 10px 0;
}

.product-card button {
    background: #2980b9;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

    .product-card button:hover {
        background: #3498db;
    }

/* ========================================================= */
/* --- CRITICAL: Ensure cart-sidebar width and padding --- */
/* You MUST have a cart-sidebar that is wide enough for the buttons. */
/* If your sidebar is currently 280px wide with 20px padding on each side, */
/* its inner content area is 240px. Two buttons + 15px gap is 240px. */
/* This means each button will be exactly (240 - 15) / 2 = 112.5px wide. */
/* If your sidebar is narrower, the buttons will overflow horizontally. */
/* --- POTENTIAL PARENT OVERFLOW FIX (If buttons are STILL cut off after above changes) --- */
/* Search your CSS for rules affecting these elements and apply if necessary */
/* For your .cart-sidebar or any container wrapping your cart-actions div */

/* --- Ensure Cart Sidebar has enough bottom padding --- */

.cart-sidebar {
    position: fixed;
    top: 85px;
    right: 0;
    min-width: 375px;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px 20px 60px 20px;
    box-sizing: border-box;
    z-index: 1000;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
}

    .cart-sidebar.open {
        transform: translateX(0);
    }

    /*.cart-sidebar {*/
    /* Ensure there's sufficient padding at the bottom for buttons */
    /*padding-bottom: 20px;*/ /* Added/adjusted if not already present */
    /*position: fixed;
            top: 85px;
            right: -100%;
            min-width: 375px;
            height: 100%;
            background: white;
            box-shadow: -3px 0 10px rgba(0,0,0,0.2);
            background-color: rgba(255, 255, 255, 0.9);*/ /* Light transparent */
    /*box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);*/
    /*backdrop-filter: blur(6px);*/
    /*padding: 20px;
            transition: right 0.3s ease-in-out;
            z-index: 1000;
            overflow-y: auto;
            overflow: visible !important;*/ /* Ensure content is not hidden by the sidebar itself */
    /* Also check for any max-height or fixed height on cart-sidebar that could be too restrictive */
    /* Example: max-height: unset !important; if you suspect it's interfering */
    /*box-sizing: border-box;*/ /* IMPORTANT: Ensures padding is included in the 280px width */
    /*transform: translateX(100%);*/

    /* other styles */
    /*}

            .cart-sidebar.open {
                right: 0;
                transform: translateX(0);*/ /* slides into view */
    /*}*/

    .cart-sidebar h2 {
        margin-bottom: 15px;
        font-size: 1.4rem;
        color: #1e88e5;
        margin: 1rem 0 0.5rem 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

.cart-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

    .cart-item img {
        width: 60px;
        height: 60px;
        object-fit: cover;
        margin-right: 10px;
        border-radius: 5px;
    }

.cart-item-info {
    flex: 1;
}

.cart-details {
    flex: 1;
}

.cart-item-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

    .cart-item-controls button {
        padding: 2px 8px;
        border: none;
        font-size: 1rem;
        cursor: pointer;
        background: #ccc;
    }

    .cart-item-controls .remove {
        background: none;
        border: none;
        font-size: 1.2rem;
        color: red;
        cursor: pointer;
    }

        /*}.cart-item-controls .remove::after {
                    content: '🗑️';
                    font-size: 1.2rem;
                    display: inline-block;
                }*/

        /*.cart-item-controls .remove::after {
                    font-family: "Font Awesome 6 Free";
                    content: "\f1f8";*/ /*Trash can icon */
        /*font-weight: 900;
                }*/

        .cart-item-controls .remove:hover {
            color: darkred;
        }

.cart-summary {
    margin-top: 20px;
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    border-top: 1px solid #ccc;
    padding-top: 10px;
    margin-top: 20px;
}

    .cart-summary label {
        display: block;
        margin-bottom: 8px;
        font-weight: bold;
    }

    .cart-summary select {
        padding: 5px;
        font-size: 1em;
    }

    .cart-summary p {
        margin: 5px 0;
    }

    .cart-summary span.value {
        font-weight: bold;
    }

button {
    padding: 8px 12px;
    background: #1e88e5;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

    button:hover {
        background: #1565c0;
    }


/* Adjust individual button styles within the flex container */
#checkout-button,
#clear-cart {
    flex: 1;
    min-width: 45px; /* Slightly increased min-width for better text breathing room */
    /*padding: 10px 18px;*/ /* Generous padding for a comfortable button size */
    font-size: 1.05rem; /* Ensure font size is readable */
    font-weight: 500; /* Medium boldness for good visibility */
    /*height: 30px;*/ /* <--- Re-introduced fixed height */
    height: auto; /* <--- Re-introduced fixed height */
    /*line-height: 30px;*/ /* <--- Crucial for vertical centering within fixed height */
    /* --- CRITICAL FOR TEXT DISPLAY --- */
    padding: 6px 18px; /* Significantly increased vertical padding to give text ample room */
    /*line-height: 1;*/ /* Set line-height to 1 for precise centering (text will not be squashed) */
    /* Ensure box-sizing is consistent */
    box-sizing: border-box;
    /* Core flex properties for perfect centering */
    display: flex;
    align-items: center; /* Vertically center the text within the increased padding */
    justify-content: center; /* Horizontally center the text */
    text-align: center; /* Fallback text alignment */
    /* Ensure text stays on one line and is visible */
    white-space: nowrap;
    /* REMOVING overflow: hidden; and text-overflow: ellipsis; FROM THE BUTTON ITSELF */
    /* If text is still cut, it MUST be a parent's overflow property */
    /* Visual styles */
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: none;
    transition: background-color 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}

/* Adjust individual button styles within the flex container */
/*#checkout-button,
        #clear-cart {*/
/* Removed: display: block; */ /* Flexbox handles display */
/*width: 48%;*/ /* Each button takes roughly half the width */
/* Adjusted padding and font-size slightly for a better fit if needed */
/*padding: 10px 12px;
            font-size: 0.95rem;
            margin-top: 0;*/ /* Reset margin-top from previous styles as flex handles spacing */
/*}*/

/*#checkout-button, #clear-cart {
            display: block;
            width: 100%;
            padding: 12px;
            margin-top: 10px;
            font-size: 1rem;
            border: none;
            cursor: pointer;
            border-radius: 5px;
            font-weight: bold;*/
/*  }*/

/* Checkout Button */
/* --- Confirm Button Alignment (already handled by block display) --- */
#checkout-button {
    background: #ADD8E6; /* Light Blue */
    color: #333; /* Darker text for better contrast on light background */
    /*display: block;
            width: 100%;*/
    padding: 12px;
    margin-top: 10px;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
}

    #checkout-button:hover {
        background: #87CEEB; /* Slightly darker light blue on hover */
        color: white; /* White text on hover for more pop */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

/* Clear Cart Button */
#clear-cart {
    background: #D3D3D3; /* Light Gray */
    color: #333; /* Darker text for better contrast on light background */
    display: block;
    width: 100%;
    padding: 12px;
    margin-top: 10px;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
}

    #clear-cart:hover {
        background: #A9A9A9; /* Darker gray on hover */
        color: white; /* White text on hover */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

#cart .close-btn {
    position: absolute;
    top: -10px; /* raised it above */
    right: 10px;
    background: transparent;
    border: none;
    font-size: 1.8rem;
    color: red;
    cursor: pointer;
}

.cart-header {
    /*background: linear-gradient(to right, #e3f2fd, #bbdefb);*/
    padding: 12px;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    position: relative;
}

    .cart-header h2 {
        color: #1e88e5;
        font-size: 1.4rem;
        margin: 0;
    }

    .cart-header .close-btn {
        position: relative;
        top: 2px;
        right: 0;
        font-size: 1.5rem;
        color: red;
        background: transparent;
        border: none;
        cursor: pointer;
    }

        .cart-header .close-btn:hover {
            color: darkred;
        }


/* ====== MODAL MESSAGE ===== */
/* Modal base styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
    background-color: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease-in-out;
}

/* Modal content box */
.modal-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 2rem;
    border: 1px solid #888;
    width: 90%;
    max-width: 400px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    animation: popIn 0.3s ease-out;
}

    /* Button in modal */
    .modal-content button {
        margin-top: 1rem;
        padding: 0.5rem 1rem;
        background-color: #1e88e5;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

        .modal-content button:hover {
            background-color: #1669bb;
        }


/*======= SCROLLn TOP ARROW BAR ===== */
/* ✅ Scroll to top */
#scrollTopBtn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: #1e88e5;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s, transform 0.3s;
}

#scrollTopBtn:hover {
    background-color: #1565c0;
    transform: scale(1.1);
}


/* ✅ Responsive tweaks */
@media (max-width: 600px) {
    .product-card img {
        max-height: 100px;
    }

    .image-popup img {
        max-width: 95%;
        max-height: 80%;
    }
}


/* ✅ Image Popup */
/* Changed from .image-popup to #image-popup for consistency with HTML ID */
#image-popup {
    display: none; /* hide by default */
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* .image-popup img {
                    max-width: 90%;
                    max-height: 90%;
                    border-radius: 12px;
                    box-shadow: 0 0 20px #fff;
                }*/

#image-popup img {
    width: auto;
    height: auto;
    max-width: 90vw;
    max-height: 80vh;
    border: none;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    display: block;
    object-fit: contain;
}


/* Changed from .popup-close to #popup-close for consistency with HTML ID */
#popup-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: white;
    cursor: pointer;
    z-index: 10000;
}


/*BEFORE SQUARE BOX BEHIND IMAGE*/
/*.image-popup img {
                max-width: 90%;
                max-height: 90%;
                border-radius: 8px;
                box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
            }*/

.image-popup .close-popup:hover {
    color: #ffffff;
}

.hero-title {
    text-align: center;
    padding: 2rem 1rem 1rem;
    /*background: linear-gradient(135deg, #e3f2fd, #fce4ec);*/
    color: #333;
    /*animation: fadeIn 1.2s ease-in-out;*/
    border-bottom: 0px solid #ccc;
    margin-top: 0; /* removes overlap if header has margin */
    padding-top: 250px;
}

    .hero-title h2 {
        font-size: 2rem;
        font-weight: bold;
        color: #1e88e5;
        margin-bottom: 0.5rem;
    }

    .hero-title p {
        font-size: 1rem;
        color: #666;
        max-width: 600px;
        margin: 0 auto;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

header {
    background-color: #1e88e5;
    color: white;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2;
}

.qty-control button {
    padding: 4px 8px;
    font-size: 18px;
    cursor: pointer;
}

.remove-item {
    background: none;
    border: none;
    font-size: 22px;
    color: red;
    cursor: pointer;
}


.popup-overlay {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    justify-content: center;
    align-items: center;
}

    .popup-overlay.show {
        display: flex;
    }

.popup-img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.9);
}

/*CERTIFICATES*/
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
}


.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

    .modal-overlay.hidden {
        display: none;
    }


/*.modal-content {
            background: #fff;
            margin: auto;
            padding: 20px;
            max-width: 500px;
            border-radius: 8px;
            position: relative;
            text-align: center;
        }*/


.modal-content {
    background: white;
    padding: 20px 30px;
    border-radius: 8px;
    text-align: center;
    max-width: 400px;
    box-shadow: 0 0 10px #000;
    position: relative;
}

.modal .close {
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-button {
    position: absolute;
    top: 6px;
    right: 12px;
    cursor: pointer;
    font-size: 24px;
    color: #444;
}

.modal-confirm {
    margin-top: 20px;
    padding: 10px 20px;
    background: #007BFF;
    border: none;
    color: white;
    border-radius: 6px;
    cursor: pointer;
}

.hidden {
    display: none;
}

/* Tooltip styling */
.tooltip-img {
    position: relative;
    display: inline-block;
    cursor: zoom-in;
}

.tooltip-img::after {
    content: "Click to view image";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
    font-size: 12px;
}

.tooltip-img:hover::after {
    opacity: 1;
}

/* Modal styling */
/* This CSS block for .image-modal is now unused as the solution consolidates to #image-popup */
.image-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.9);
}

    .image-modal img {
        margin: auto;
        display: block;
        max-width: 90%;
        max-height: 80vh;
        border-radius: 10px;
    }

    .image-modal .close {
        position: absolute;
        top: 20px;
        right: 30px;
        color: #fff;
        font-size: 40px;
        font-weight: bold;
        cursor: pointer;
    }

.tooltip-wrapper {
    position: relative;
    display: inline-block;
}

.tooltip-text {
    visibility: hidden;
    width: max-content;
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 4px 8px;
    border-radius: 6px;
    position: absolute;
    z-index: 10;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    white-space: nowrap;
    transition: opacity 0.3s;
    font-size: 12px;
}

.tooltip-wrapper:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}


/*Magnifier Effect with CSS*/
.tooltip-img {
    cursor: zoom-in;
    transition: transform 0.3s ease;
}

    .tooltip-img:hover {
        transform: scale(1.1);
    }


#taxState {
    padding: 6px 10px;
    font-size: 1rem;
    margin-bottom: 10px;
}



/*Cart Summary*/
/* New styles for tax input groups */
/*.tax-input-group {
                    margin-bottom: 15px;*/ /* Spacing between groups */
/*padding: 10px;
                    border: 1px solid #e0e0e0;
                    border-radius: 5px;
                    background-color: #f9f9f9;
                    transition: all 0.3s ease-in-out;*/ /* Smooth transition for showing/hiding */
/*overflow: hidden;*/ /* Prevent content overflow during transition */
/*}*/

.tax-input-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 1rem 0;
    text-align: center;
    margin-top: 1rem;
    font-size: 0.95rem;
}

    .tax-input-group label {
        display: block;
        margin-bottom: 0.25rem;
        font-weight: bold;
    }

    .tax-input-group select {
        width: 100%;
        padding: 0.5rem;
        font-size: 1rem;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

/* Class to hide elements with a smooth transition */
.hidden {
    display: none !important; /* Use !important to ensure it overrides other styles */
    opacity: 0;
    height: 0;
    padding: 0;
    margin: 0;
    border: none;
}

/* When visible, ensure proper display and opacity */
.tax-input-group:not(.hidden) {
    /*display: block;*/ /* Or flex, depending on internal layout */
    /*opacity: 1;
                    height: auto;
                    padding: 10px;
                    margin-bottom: 15px;
                    border: 1px solid #e0e0e0;*/

    display: flex;
    flex-direction: column;
    align-items: flex-start; /* aligns text to the left inside the box */
    margin: 1rem 0;
    width: 100%;
}

/* Ensure labels and selects inside these groups are styled correctly */
/*.tax-input-group label {
                    font-size: 0.9em;*/ /* Slightly smaller for cart sidebar */
/*margin-bottom: 5px;
                    color: #444;
                }*/

/*.tax-input-group label {
                    margin-bottom: 5px;
                    font-weight: 500;
                }*/

.tax-input-group label {
    margin-bottom: 4px;
    font-weight: bold;
}

/* --- Ensure tax input groups are responsive --- */
/* These styles should already help with responsiveness, but good to re-check */
.tax-input-group select,
.tax-input-group input[type="text"] {
    width: 220px;
    padding: 6px 10px;
    font-size: 1rem;
    margin: 0 auto; /* centers the select box itself */
    display: block;
    /*width: 100%;*/ /* Ensures they take full width, stacking nicely on small screens */
    /*padding: 8px;
                    font-size: 0.95em;
                    margin-bottom: 0;*/
}

/* Ensure existing cart item styles don't conflict */
.cart-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.coming-soon-btn {
    background-color: #cccccc;
    color: #666666;
    border: 1px solid #999999;
    cursor: not-allowed;
    pointer-events: auto;
    transition: background-color 0.3s ease, color 0.3s ease;
    user-select: none;
    outline: none;
}

    .coming-soon-btn:hover,
    .coming-soon-btn:focus,
    .coming-soon-btn:active {
        background-color: white !important;
        color: #d9534f !important;
        border-color: #d9534f !important;
    }



/* Styles for disabled "Coming Soon!" buttons */
/*.coming-soon-btn {
            background-color: #cccccc;*/ /* Grey background */
/*color: #666666;*/ /* Grey text */
/*cursor: not-allowed;*/ /* No-entry cursor */
/*border: 1px solid #999999;
        }*/

/* Optional: Style the entire product card for "Coming Soon!" items */
.coming-soon-card {
    /*make disabled buttons add to cart*/
    /*opacity: 0.7;*/ /* Slightly dim the card */
    /*pointer-events: none;*/ /* Prevent clicks on the card itself, except for the image popup if you want */
}

/* General disabled button style (important for "Coming Soon") */
button:disabled {
    background-color: #cccccc; /* Still a neutral grey for disabled */
    color: darkred;
    cursor: not-allowed;
    border: 1px solid #919191;
    /*background-color: #e0e0e0 !important;
                    color: #a0a0a0 !important;
                    cursor: not-allowed !important;
                    border: 1px solid #d0d0d0 !important;
                    box-shadow: none !important;*/
}

/* You can make the coming-soon-btn more specific if needed */
button.coming-soon-btn {
    /* Specific styles for coming soon button if different from general disabled */
}

/* Override for image popup in coming-soon-card (if you want the image to still be clickable) */
.coming-soon-card .tooltip-img {
    pointer-events: auto; /* Re-enable pointer events for the image */
    cursor: pointer;
}

/*#cart-items {
                    max-height: 40vh;*/ /* Adjust this value as needed, 'vh' means viewport height */
/*overflow-y: auto;*/ /* Adds a vertical scrollbar when content overflows */
/*padding-right: 10px;*/ /* Provides space for the scrollbar, preventing content overlap */
/*margin-bottom: 20px;*/ /* Space between items and summary */
/*}*/

/* --- Adjust Cart Items Scroll Area --- */
#cart-items {
    /* Previously: max-height: 40vh; */
    max-height: 200px; /* Reduced to a fixed pixel height for more consistent visibility */
    /* You can adjust 200px. This allows for roughly 3-4 items before scrolling */
    overflow-y: auto;
    padding-right: 10px;
    margin-bottom: 15px; /* Slightly reduced margin to save space */
}


/* NEW: Styling for the buttons container */
#cart-actions {
    display: flex; /* Enable flexbox */
    gap: 5px; /* Space between the buttons */
    margin-top: 25px; /* Space above the buttons */
    flex-wrap: wrap; /* Allow buttons to wrap to the next line on small screens */
    /*justify-content: center;*/ /* Center buttons if they wrap or there's extra space */
    justify-content: space-between; /* Optional: distributes buttons evenly */
    padding: 10px; /* Optional: Add horizontal padding if they stick to the edges */
    /* Removed: padding: 0 10px; if it was causing issues or isn't needed with gap */
}


/* --- NEW/UPDATED SUMMARY STYLES (GRID-BASED) --- */
.cart-summary {
    /* Existing cart-summary styles */
    margin-top: 20px;
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    border-top: 1px solid #ccc; /* Keep existing border-top */
    padding-top: 10px;
    margin-top: 20px;
}

/* Styles for each individual line (Subtotal, Tax, Shipping, Total) */
.summary-line {
    display: grid; /* Make each line a Grid container */
    grid-template-columns: 1fr auto; /* Two columns: 1st takes available space, 2nd is auto-width */
    gap: 15px; /* Space between the label and the value */
    align-items: baseline; /* Align text baselines for cleaner look */
    margin-bottom: 5px; /* Space between summary lines */
}

    .summary-line span:first-child {
        text-align: left; /* Ensure labels are left-aligned */
        /* No need for flex-shrink or margin-right here, Grid handles it */
    }

    .summary-line span:last-child {
        text-align: right; /* Crucial: Right-align the numbers */
        font-weight: bold; /* Keep values bold */
    }

    /* Specific styling for the total row */
    .summary-line.total-row {
        margin-top: 15px; /* More space above total */
        padding-top: 10px; /* Internal padding */
        border-top: 1px dashed #ccc; /* Subtle line */
        font-size: 1.1em; /* Slightly larger for the whole row */
        font-weight: bold; /* Make the entire total row bold */
    }

/* Style for the Total value itself */
#total {
    color: #1e88e5; /* Nice light blue for the total value */
    font-size: 1.0em; /* Make the total amount bigger */
    font-weight: bold; /* Make it even bolder */
    /* Grid's text-align: right on span:last-child ensures perfect alignment */
}

/* Adjust Sales Tax percentage display */
.summary-line span:first-child #stateRate {
    font-weight: normal; /* Keep the rate itself normal if parent is bold */
    /* No specific alignment needed here, as it's inline */
}






/* --- NEW/UPDATED SUMMARY STYLES --- */
/*.cart-summarytwo p {
                    display: flex;*/ /* Make each line a flex container */
/*justify-content: space-between;*/ /* Push label to left, value to right */
/*align-items: center;*/ /* Vertically center content if differing heights */
/*margin-bottom: 5px;*/ /* Space between summary lines */
/* Ensure padding for these is clean */
/*padding: 0;
                }

                    .cart-summarytwo p span:first-child {*/
/* Styles for "Subtotal:", "Sales Tax:", etc. */
/*flex-shrink: 0;*/ /* Prevent label from shrinking */
/*margin-right: 10px;*/ /* Space between label and value */
/*}

                    .cart-summarytwo p span:last-child {*/
/* Styles for the value (e.g., CAD35.00) */
/*text-align: right;*/ /* Ensure the text within the span is right-aligned */
/*flex-grow: 1;*/ /* Allow the value span to take up remaining space */
/*font-weight: bold;*/ /* Keep values bold */
/*}*/

/* Specific styling for the total row */
/*.cart-summarytwo p.total-row {
                        margin-top: 15px;*/ /* More space above total */
/*padding-top: 10px;*/ /* Internal padding */
/*border-top: 1px dashed #ccc;*/ /* Subtle line */
/*font-size: 1.1em;*/ /* Slightly larger for the whole row */
/*font-weight: bold;*/ /* Make the entire total row bold */
/*}*/

/* Style for the Total value itself */
/*#total {
                    color: #1e88e5;*/ /* Nice light blue for the total value */
/*font-size: 1.2em;*/ /* Make the total amount bigger */
/*font-weight: bolder;*/ /* Make it even bolder */
/* No need for text-align: right here due to parent flex setup */
/*}*/

.exchange-rate-note {
    font-size: 0.85em;
    color: #555;
    margin-top: 0.5rem;
    text-align: right;
}

/*.location-banner {
                    background-color: #e8f5e9;
                    color: #2e7d32;
                    padding: 0.75rem 1.5rem;
                    font-size: 1rem;
                    border-left: 5px solid #66bb6a;
                    margin-bottom: 1rem;
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;

                }*/

/*   .location-banner {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    background-color: #e8f5e9;
                    color: #2e7d32;
                    padding: 0.75rem 1.5rem;
                    font-size: 1rem;
                    border-bottom: 1px solid #c8e6c9;
                    z-index: 9999;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    opacity: 1;
                    transition: opacity 0.5s ease;
                }*/


#location-banner {
    height: 48px;
    font-size: 0.9rem;
    padding: 0 1rem;
    /*background-color: cornflowerblue;*/
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 15px;
    left: 0;
    right: 0;
    z-index: 9999;
    color: aliceblue;
}

#change-region {
    margin-left: 10px;
    color: #ff6b6b !important;
}

#banner-close {
    background-color: #87CEEB;
    color: rgba(0,0,0,0.8)
}

    #banner-close::after {
        /*content: "×";*/ /* or leave blank if you're not adding anything */
        transition: all 0.3s ease;
    }


    #banner-close:hover {
        background-color: #0733e0;
        color: #ffffff;
    }


/*NEW BANNER NAVBAR in CLASS*/
/* .location-banner {
                    background: #f8f9fa;
                    padding: 10px 14px;
                    border-radius: 6px;
                    display: flex;
                    justify-content: center;
                    font-size: 14px;
                    margin: 0 auto;
                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
                    max-width: 640px;
                }*/

.location-banner {
    background: transparent;
    padding: 10px 14px;
    border-radius: 0px;
    display: flex;
    justify-content: center;
    font-size: 14px;
    margin: 0 auto;
    margin-left: calc(50% - 270px);
    max-width: 640px;
    👇 Add this line to nudge the banner left transform: translateX(-50px);
    margin-left: 250px;
    Soft manual offset inside flex centering
}

.banner-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
}

.flag-icon {
    width: 24px;
    height: auto;
}

.banner-text {
    flex-grow: 1;
    line-height: 1.5;
}

.banner-action {
    background-color: #ffffff;
    border: 1px solid #ccc;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .banner-action:hover {
        background-color: #f0f0f0;
    }

.banner-close {
    background: transparent;
    border: none;
    font-size: 16px;
    color: #888;
    cursor: pointer;
    margin-left: auto;
}

    .banner-close:hover {
        color: red;
    }



.cart-item.shake {
    animation: shake 0.3s ease-in-out;
}

@keyframes shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    50% {
        transform: translateX(5px);
    }

    75% {
        transform: translateX(-5px);
    }

    100% {
        transform: translateX(0);
    }
}

.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: 6px;
    color: white;
    font-weight: bold;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, background-color 0.3s ease;
    z-index: 9999;
}

    .toast.show {
        opacity: 1;
    }

    .toast.added {
        background-color: #28a745; /* Green */
    }

    .toast.removed {
        background-color: #dc3545; /* Red */
    }

    .toast.updated {
        background-color: #007bff; /* Blue */
    }

.cart-item.remove-anim {
    animation: fadeOutShrink 0.3s ease-in-out forwards;
}

@keyframes fadeOutShrink {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.9);
    }
}

.region-modal {
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .region-modal.hidden {
        display: none;
    }

.region-modal-content {
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    min-width: 300px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    text-align: center;
}


.select-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem; /* spacing between fields */
}

    .select-wrapper select {
        width: 220px; /* adjust as needed */
        padding: 8px;
        font-size: 1rem;
    }




/*for "NOT CORRECT?" MODAL POPUP*/
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

    .modal.show {
        /*display: flex;*/
        display: block;
    }

.modal-content {
    background: #fff;
    padding: 1.5rem 2rem;
    border-radius: 10px;
    text-align: center;
    min-width: 300px;
    position: relative;
}

/*.close {
            position: absolute;
            top: 10px;
            right: 20px;
            font-size: 1.5rem;
            cursor: pointer;
        }*/

.close {
    float: right;
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    color: #999;
}

    .close:hover {
        color: #000;
    }


#region-select-container {
    margin-top: 1rem;
    font-size: 1rem;
}

    #region-select-container label {
        display: block;
        margin-bottom: 0.25rem;
        font-weight: bold;
    }

#region-type {
    width: 100%;
    padding: 0.5rem;
    font-size: 1rem;
    border-radius: 4px;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #333;
}



/*MODAL NOT CORRECT*/
/* Modal backdrop transitions */
/* Modal Backdrop */
#regionModal {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

    /* Show the modal */
    #regionModal.show {
        display: flex;
        opacity: 1;
        visibility: visible;
    }

    /* Modal Box */
    #regionModal .modal-content {
        background: #fff;
        padding: 2rem;
        border-radius: 8px;
        width: 90%;
        max-width: 400px;
        text-align: center;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        transform: translateY(-20px);
        opacity: 0;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    /* When modal is shown */
    #regionModal.show .modal-content {
        transform: translateY(0);
        opacity: 1;
    }


.modal-close-btn {
    position: absolute;
    top: -0.6rem; /* ⬆ Slightly lifted above modal box */
    right: -0.6rem;
    font-size: 1.6rem;
    font-weight: bold;
    background: #fff;
    color: #444;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    z-index: 10;
}

    .modal-close-btn:hover {
        background: crimson;
        color: #fff;
    }


@media (max-width: 480px) {
    html, body {
        overflow-y: auto !important;
        height: auto !important;
        max-height: none !important;
        width: 100% !important;
    }
}

/*.highlight-select {
            border: 2px solid #1e90ff;*/ /* DodgerBlue highlight */
/*box-shadow: 0 0 6px rgba(30, 144, 255, 0.5);
            transition: all 0.3s ease;
        }*/

.highlight-select {
    background-color: #ffe680 !important; /* bright yellow */
    transition: background-color 0.5s ease;
}


/*🔁 Animation Keyframes */

@keyframes bounceIn {
    0%

{
    transform: scale(0.8);
    opacity: 0;
}

60% {
    transform: scale(1.05);
    opacity: 1;
}

100% {
    transform: scale(1);
}

}

#taxWarningModal {
    display: none; /* hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#taxWarningModal > .modal-box {
    background: white;
    padding: 20px;
    border-radius: 8px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}


@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes popIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}


/*Bounce Animation to*/


@keyframes bounceIn {
    0%

{
    transform: scale(0.8);
    opacity: 0;
}

60% {
    transform: scale(1.05);
    opacity: 1;
}

100% {
    transform: scale(1);
}

}


 /*TAX WARNING MODAL -->*/

.taxwmodal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.taxwmodal-content {
    background-color: white;
    margin: 15% auto;
    padding: 20px 30px;
    border: 2px solid #e53935;
    width: 90%;
    max-width: 400px;
    border-radius: 10px;
    text-align: center;
    color: #444;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    position: relative;
}

.taxwmodal .close {
    position: absolute;
    top: 8px;
    right: 15px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    color: #e53935;
}


.nav__link.active-home {
    color: #00ace6 !important;
}

.nav__link.active-other {
    color: #4da6ff !important;
    font-weight: bold;
}


footer {
    background: #222;
    color: #ccc;
    text-align: center;
    padding: 15px 10px;
    font-size: 0.9rem;
}

@media (max-width: 480px) {
    footer {
        font-size: 0.8rem;
        padding: 12px 8px;
    }
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}


/*======= SCROLLn TOP ARROW BAR ===== */
/* ✅ Scroll to top */
#scrollTopBtn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: #1e88e5;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s, transform 0.3s;
}

#scrollTopBtn:hover {
    background-color: #1565c0;
    transform: scale(1.1);
}


/* ✅ Responsive tweaks */
@media (max-width: 600px) {
    .product-card img {
        max-height: 100px;
    }

    .image-popup img {
        max-width: 95%;
        max-height: 80%;
    }
}