.btn {
    border-radius: 4px !important;
    /* Little rounds on the edges */
    font-weight: 500;
}

.btn-custom-outline {
    background-color: transparent;
    color: white !important;
    padding: 12px 35px;
    border-radius: 4px;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all 0.3s;
    border: 2px solid white;
    display: inline-block;
    text-decoration: none;
}

.btn-custom-outline:hover {
    background-color: white;
    color: black !important;
    transform: translateY(-2px);
}

/* Titles */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-weight: 300 !important;
}

/* Global Anchor Tags */
a {
    color: #6c757d;
    text-decoration: none;
}

a:hover {
    color: #495057;
}

/* Ensure Navbar links stay white or as defined */
.navbar-nav .nav-link {
    color: rgba(255, 255, 255, .55);
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:hover {
    color: #fff;
}

.text-white {
    color: #fff !important;
}

/* Hover effects for brand cards */
.brand-card {
    transition: transform 0.2s;
}

.brand-card:hover {
    transform: translateY(-5px);
    /* box-shadow: 0 4px 8px rgba(0,0,0,0.1); already in header style */
}

/* Product Tile Styles */
.card-title,
.card-text {
    color: #6c757d !important;
    /* Muted color for product name and price */
    font-weight: 300;
}

/* Browse Categories: Center arrows */
/* Assuming usage of owl-carousel or similar or custom arrows. 
   "Please make the scrolling arrows centered to the tile and outside of the tiles." 
   I need to check the HTML for this, but I'll add a placeholder class.
*/

/* Review Section */
.review-section {
    padding-bottom: 30px;
    /* "Tiles need some padding on bottom" */
}

/* Contact Us Button */
.btn-send {
    background-color: #000 !important;
    color: #fff !important;
    border: 1px solid #000 !important;
}

.btn-send:hover {
    background-color: #333 !important;
}

/* WhatsApp Button */
.whatsapp-btn {
    animation: none !important;
    /* "keep the whatsapp button not popping/jumping" */
}

/* FAQs */
.accordion-item {
    border: 1px solid #eee !important;
    margin-bottom: 10px;
    border-radius: 8px !important;
    overflow: hidden;
}

.accordion-button {
    background-color: #000 !important;
    color: #fff !important;
    padding: 1.25rem 1.5rem;
    font-weight: 300 !important;
    display: flex;
    align-items: center;
    box-shadow: none !important;
}

.accordion-button::after {
    filter: brightness(0) invert(1);
    margin-left: auto;
}

.accordion-button:not(.collapsed) {
    color: #fff !important;
    background-color: #000 !important;
    border-bottom: 1px solid #333;
}

.accordion-body {
    background-color: #fff !important;
    color: #333 !important;
    padding: 1.5rem;
    font-weight: 300;
    line-height: 1.6;
}

/* Vertical centering for accordion text */
.accordion-button span,
.accordion-button {
    line-height: 1.2;
}

/* Mobile Fixes for Nokia Lumia 520 (320px) and valid small screens */
/* Mobile Fixes for Nokia Lumia 520 (320px) and valid small screens */
@media (max-width: 350px) {

    /* Fix Header Logo Alignment and Size */
    .navbar-brand img {
        max-width: 110px !important;
        /* Prevent logo from squashing other icons */
        height: auto;
    }

    /* Adjust Header Icons spacing if needed */
    .header-icon {
        font-size: 1.1rem !important;
    }
}

/* Fix Cart Page Layout for mobile devices (iPhone SE, Samsung S8+, etc.) */
@media (max-width: 575px) {

    /* Fix Cart Page Layout */
    /* Reduce padding in card body */
    #cartList .card-body {
        padding: 0.5rem !important;
    }

    /* Allow Cart Action Row to Wrap */
    #cartList .card-body .d-flex.justify-content-between.align-items-center {
        flex-wrap: wrap;
        gap: 0.5rem !important;
    }

    /* Ensure Quantity alignment when wrapped */
    #cartList .card-body .d-flex.justify-content-between.align-items-center>div:first-child {
        margin-bottom: 5px;
    }

    /* Force Delete Button Visibility and spacing */
    #cartList .d-flex.align-items-center.gap-3 {
        gap: 0.5rem !important;
        /* Reduce gap between price and delete button */
        width: 100%;
        justify-content: space-between;
        /* Spread price and delete button */
    }

    /* Adjust Column Widths to give more space to content */
    #cartList .row.g-0>.col-4 {
        width: 30% !important;
    }

}

/* Global Button Overrides - Force Black */
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-dark,
.btn-light,
.btn-outline-dark,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-warning:hover,
.btn-info:hover,
.btn-dark:hover,
.btn-light:hover,
.btn-outline-dark:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-success:hover,
.btn-outline-danger:hover {
    background-color: #333333 !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

/* Ensure Product Card Buttons are Black */
.product-card .btn {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}

.product-card .btn:hover {
    background-color: #333333 !important;
    border-color: #333333 !important;
}