/* .top-bar CSS can be removed if no longer used by any other element */
/* .top-bar {
    background-color: #f8f9fa;
    padding: 10px 0;
} */
.main-header {
    padding: 0px 0;
    background-color: #1f1f1f; /* Dark black */
    color: #fff; /* White text */
}
.main-header .user-actions a {
    color: #fff; /* White text for user action links */
    text-decoration: none;
    margin-left: 15px; /* Spacing between user action links */
}
.main-header .user-actions a:hover {
    color: #adb5bd; /* Lighter white/grey on hover */
}
.main-header .col-md-3 img[alt="Logo"] {
    height: 120px; /* Adjust height to make logo appear fuller in the bar */
    width: auto;  /* Maintain aspect ratio */
    object-fit: contain; /* Ensure image scales well within the dimensions */
}
.main-header .btn-outline-primary {
    color: #fff; /* White text for outline button */
    border-color: #fff; /* White border for outline button */
}
.main-header .btn-outline-primary:hover {
    background-color: #fff; /* White background on hover */
    color: #343a40; /* Dark text on hover */
}
.main-header .input-group .form-control {
    /* Optional: Adjust search input style for dark background if needed */
}
.main-header .input-group .btn-primary {
    background-color: #007bff; /* Standard primary blue */
    border-color: #007bff;
}
.main-header .input-group .btn-primary:hover {
    background-color: #0056b3; /* Darker blue on hover */
    border-color: #0056b3;
}
.search-form {
    max-width: 500px;
}
.nav-link {
    color: #333;
    font-weight: 500;
}
.nav-link:hover {
    color: #007bff;
}
/* Styles for Featured Categories - Banner/Carousel */
.featured-categories {
    position: relative; /* For positioning arrow controls */
}
.featured-categories-banner-wrapper {
    overflow: hidden; /* This will hide the parts of the item-wrapper that are outside */
    width: 100%;
}
.featured-categories-banner {
    display: flex;
    transition: transform 0.5s ease-in-out; /* Smooth transition for scrolling */
    padding: 10px 0; /* Some padding around the items */
}
.featured-categories .category-item {
    flex: 0 0 auto; /* Prevent items from shrinking/growing */
    width: 160px; /* Adjust width as needed to show desired number of items */
    margin-right: 15px;
    text-align: center;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    overflow: hidden;
}
.featured-categories .category-item a {
    text-decoration: none;
    color: #333;
    display: block;
    padding: 10px;
    transition: background-color 0.2s ease;
}
.featured-categories .category-item a:hover {
    background-color: #f0f0f0;
}
.featured-categories .category-image-container {
    width: 100%;
    height: 100px; /* Fixed height for image container */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    background-color: #f8f9fa; /* Light bg for image container */
}
.featured-categories .category-item img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}
.featured-categories .category-title {
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.2;
    height: 40px; /* Give some fixed height for title to align items */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.category-controls {
    text-align: center; /* Center the buttons below the banner */
    margin-top: 15px;
}
.category-controls .control-btn {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    margin: 0 5px;
    font-size: 1.2rem;
    transition: background-color 0.2s ease;
}
.category-controls .control-btn:hover {
    background-color: #0056b3;
}
.category-controls .control-btn:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}
/* Styles for Featured Products - Banner/Carousel */
.featured-products {
    position: relative; /* For positioning arrow controls */
    background-color: #e9ecef !important; /* Overriding Bootstrap's bg-light with a darker grey */
}
.featured-products-banner-wrapper {
    overflow: hidden;
    width: 100%;
}
.featured-products-banner {
    display: flex;
    transition: transform 0.5s ease-in-out;
    padding: 10px 0; /* Some padding around the items */
}
.featured-products .product-item-wrapper {
    flex: 0 0 auto; /* Prevent items from shrinking/growing */
    width: 260px; /* Adjust width as needed, e.g., for 4-5 visible items */
    margin-right: 15px;
    padding: 5px; /* Add a little padding so box-shadow on card isn't clipped */
}
.featured-products .product-item-wrapper .card {
    border: 1px solid #e9ecef;
    transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
    height: 100%; /* Ensures cards in a row are same height */
    display: flex; /* Make card a flex container */
    flex-direction: column; /* Stack card children vertically */
}
.featured-products .product-item-wrapper .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}
.featured-products .product-item-wrapper .card-img-top {
    width: 100%;
    height: 200px; /* Adjust as needed for product images */
    object-fit: cover;
}
.featured-products .product-item-wrapper .card-body {
    padding: 1rem;
    text-align: center; /* Center align content in card body */
    flex-grow: 1; /* Allow card body to grow to fill space */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes button to bottom if title/price are short */
}
.featured-products .product-item-wrapper .card-title {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}
.featured-products .product-item-wrapper .card-text {
    font-size: 1rem;
    color: #007bff; /* Price color */
    font-weight: bold;
    margin-bottom: 1rem;
}
.featured-products .product-item-wrapper .btn-primary {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    margin-top: auto; /* Push button to bottom of card-body if space allows */
}
.product-controls {
    text-align: center;
    margin-top: 15px;
}
.product-controls .control-btn {
    background-color: #007bff; /* Changed from #28a745 to match category controls */
    color: white;
    border: none;
    border-radius: 5px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    margin: 0 5px;
    font-size: 1.2rem;
    transition: background-color 0.2s ease;
}
.product-controls .control-btn:hover {
    background-color: #0056b3; /* Changed from #218838 to match category controls hover */
}
.product-controls .control-btn:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

/* Styles for Reseller CTA Section */
.reseller-cta-section {
    background-color: #0056b3; /* A darker shade of primary blue */
    color: #fff;
    padding: 60px 0;
    text-align: center;
}
.reseller-cta-section h2 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}
.reseller-cta-section p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}
.reseller-cta-section .btn-learn-more {
    background-color: #fd7e14; /* Orange color like esquire.co.za */
    border-color: #fd7e14;
    color: #fff;
    font-size: 1.1rem;
    font-weight: bold;
    padding: 0.75rem 2rem;
    text-transform: uppercase;
    border-radius: 5px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.reseller-cta-section .btn-learn-more:hover {
    background-color: #e66800; /* Darker orange on hover */
    border-color: #e66800;
    color: #fff;
}

/* Custom Container Widths for Wider Layout */
@media (min-width: 1200px) { /* Bootstrap XL breakpoint */
  .container {
    max-width: 1500px; /* Default is 1140px */
  }
}

@media (min-width: 1400px) { /* Bootstrap XXL breakpoint */
  .container {
    max-width: 1680px; /* Default is 1320px, this provides a significantly wider layout */
  }
}

/* --- Responsive Adjustments --- */

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    .main-header .col-md-3 img[alt="Logo"] {
        height: 100px; /* Slightly smaller logo for tablets */
    }
    .featured-categories .category-item {
        width: 140px; /* Adjust category item width for tablets */
    }
    .featured-products .product-item-wrapper {
        width: 220px; /* Adjust product item width for tablets */
    }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    .main-header .row > div { /* Target direct children columns of the row */
        text-align: center !important; /* Center all header content */
        margin-bottom: 15px;
    }
    .main-header .col-md-3 img[alt="Logo"] {
        height: 80px; /* Smaller logo for mobile */
        margin-bottom: 10px; /* Space below logo */
    }
    .main-header .search-form {
        max-width: 100%; /* Allow search form to take full width */
        margin-bottom: 15px; 
    }
    .main-header .user-actions {
        display: flex;
        flex-direction: column; /* Stack user action links */
        align-items: center; /* Center stacked links */
    }
    .main-header .user-actions a {
        margin-left: 0; /* Remove left margin for stacked links */
        margin-bottom: 10px; /* Space between stacked links */
        display: block; /* Make them block for easier tapping */
        width: 80%; /* Give some width */
    }
    .main-header .user-actions .btn-outline-primary {
        width: auto; /* Let button size naturally */
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
        margin-top: 5px; /* A little space above contact button */
    }

    .featured-categories .category-item {
        width: 120px; /* Further adjust category item width for mobile */
        height: auto; /* Allow height to adjust based on content */
    }
    .featured-categories .category-image-container {
        height: 80px; /* Smaller image container for categories on mobile */
    }
    .featured-categories .category-title {
        font-size: 0.75rem; /* Smaller title text for categories */
        height: 30px;
    }

    .featured-products .product-item-wrapper {
        width: 180px; /* Further adjust product item width for mobile */
    }
    .featured-products .product-item-wrapper .card-img-top {
        height: 150px; /* Smaller product images on mobile */
    }
    .featured-products .product-item-wrapper .card-title {
        font-size: 1rem;
    }
    .featured-products .product-item-wrapper .card-text {
        font-size: 0.9rem;
    }

    .category-controls .control-btn,
    .product-controls .control-btn {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }

    .reseller-cta-section h2 {
        font-size: 2rem; /* Smaller heading for reseller CTA */
    }
    .reseller-cta-section p {
        font-size: 1.1rem; /* Smaller text for reseller CTA */
    }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .main-header .col-md-3 img[alt="Logo"] {
        height: 60px; /* Even smaller logo */
    }
    .featured-categories .category-item {
        width: 100px; /* Smallest category item width */
        margin-right: 10px;
    }
    .featured-categories .category-image-container {
        height: 70px;
    }

    .featured-products .product-item-wrapper {
        width: 150px; /* Smallest product item width */
        margin-right:10px;
    }
     .featured-products .product-item-wrapper .card-img-top {
        height: 120px; 
    }

    .why-choose-us .fa-3x {
        font-size: 2em; /* Reduce icon size in why choose us */
    }
    .why-choose-us h4 {
        font-size: 1.1rem;
    }
}

/* Cart Modal Custom Styles */
#cartModal .modal-header {
    background: #1f1f1f;
    color: #fff;
    border-bottom: 1px solid #e9ecef;
}
#cartModal .modal-title {
    font-weight: 600;
}
#cartModal .table th, #cartModal .table td {
    vertical-align: middle;
}
#cartModal .btn-danger {
    font-size: 1.1rem;
    padding: 0.25rem 0.6rem;
}
#cartModal .btn-success {
    font-size: 1rem;
    padding: 0.5rem 1.5rem;
}
#cartModal img {
    border-radius: 6px;
    border: 1px solid #e9ecef;
}
#cartModal .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
}