* {

    font-family: "Outfit", sans-serif;
    font-style: normal;
}

button:focus {
    outline: none !important;
}

.st-limegreen {
    color: limegreen !important;
}

.st-orange {
    color: orange !important;
}

.st-crimson {
    color: crimson !important;
}

table#ordersTable {
    margin-bottom: 30px;
}

:root {
    --body-bg: #ffffff;
    --theme-color: #64b745;
    --secondary-color: #1d71b8;
    --body-color: #555555;
    --title-color: #000000;
    --smoke-color: #f1f5f4;
    --light-color: #f8f9fa;
    --black-color: #000000;
    --white-color: #ffffff;
    --blue-color: #1d71b8;
    --yellow-color: #fec624;
    --success-color: #28a745;
    --error-color: #dc3545;
    --border-color: #bfbfbf;
    --title-font: "Lato", sans-serif;
    --body-font: "DM Sans", sans-serif;
    --icon-font: "Font Awesome 5 Pro";
    --main-container: 1290px;
    --container-gutters: 30px;
    --section-space: 120px;
    --section-space-mobile: 80px;
    --section-title-space: 60px;
    --ripple-ani-duration: 5s;
    --primary-green: #2E7D32;
    /* Deep Agricultural Green */
    --light-green: #4CAF50;
    --primary-blue: #0277BD;
    /* Irrigation Blue */
    --dark-text: #333333;
    --light-bg: #f4f6f8;
    --white: #ffffff;
    --danger: #d32f2f;
    --text-dark: #1a1a1a;
    --text-light: #f5f5f5;
    --light-gray: #f4f7f6;
    --shadow-soft: 0 5px 20px rgba(0, 0, 0, 0.05);
    --another-color: #0c7735;
    /* Deep Green */
    --dark-bg: #031f0d;
    /* Very Dark Green/Black for depth */
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-bg: rgba(12, 119, 53, 0.15);
        --f-bg: #0b0d10;
    /* Almost Black */
    --f-card: rgba(255, 255, 255, 0.03);
    --f-border: rgba(255, 255, 255, 0.1);
    --f-accent: #ccff00;
    /* Acid Green */
    --f-text: #ffffff;
    --f-gray: #9ca3af;
    /* Tinted with secondary color */
}




.nouveaute-wrapper .product-item,
.promotion-wrapper .product-item,
.results-wrapper .product-item {
    margin-bottom: 30px;
}


.product-img-container {
    height: 175px;
    object-fit: cover;
}

.mt-6 {
    padding-top: 80px;
}

.product-item-body a {
    text-decoration: none;
}

.total-wrapper-cart {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    margin-top: 10px;
}


/* =========================================
   Toolbar & Logout Styling
   ========================================= */

/* 1. Container Flexbox Tweaks */
.toolbar-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    /* Consistent spacing between all icons */
    padding-left: 15px;
}

/* 2. General Icon Styling (Base) */
.toolbar-container > div {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toolbar-container button,
.toolbar-container a {
    background: none;
    border: none;
    color: var(--text-dark);
    /* Dark Grey #1a1a1a */
    font-size: 20px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    padding: 5px;
    display: block;
}

/* 3. Standard Icons Hover (Green) */
.accountWrapper a:hover,
.bookmarkWrapper button:hover,
.cartWrapper button:hover {
    color: var(--theme-color);
    /* Bright Green */
    transform: translateY(-2px);
}



.logoutWrapper a {
    color: #888;
    /* Slightly lighter grey initially */
}

/* Logout Hover Effect (Red & Slide) */
.logoutWrapper a:hover {
    color: #ff4b2b;
    /* Warning Red */
    transform: translateX(3px);
    /* Slide icon to the right (Exit motion) */
    text-shadow: 0 0 15px rgba(255, 75, 43, 0.3);
    /* Red Glow */
}

/* =========================================
   Responsive Tweak
   ========================================= */
@media (max-width: 991px) {
    .toolbar-container {
        justify-content: center;
        margin-top: 15px;
        gap: 25px;
        /* More space on mobile for touch targets */
    }

    .logoutWrapper {
        border-left: none;
        /* Remove divider on mobile if stacked/tight */
        padding-left: 0;
        margin-left: 0;
    }
}




/* =========================================
   Modern Pagination (Unimagri Theme)
   ========================================= */

.pagination {
    display: flex;
    flex-direction: column;
    /* Stack buttons and result text */
    align-items: center;
    justify-content: center;
    padding: 40px 0 60px;
    /* Space above and below */
    gap: 15px;
}

/* 2. The Link List (UL) */
.nav-links {
    display: flex;
    gap: 8px;
    /* Space between buttons */
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    justify-content: center;
}

/* 3. Individual Buttons (Base Style) */
.nav-links li a,
.nav-links li span {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 40px;
    /* Fixed square size */
    height: 40px;

    background: #fff;
    color: var(--secondary-color);
    /* Deep Green Text */
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;

    border: 1px solid #eef2f0;
    border-radius: 10px;
    /* Soft modern curve */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);

    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
}

/* 4. Hover Effect */
.nav-links li a:hover {
    background: #fff;
    color: var(--theme-color);
    /* Bright Green */
    border-color: var(--theme-color);
    transform: translateY(-3px);
    /* Lift up */
    box-shadow: 0 8px 15px rgba(100, 183, 69, 0.2);
}

/* 5. Active Page (Current) */
.nav-links li.active a,
.nav-links li.active span {
    background: var(--theme-color);
    color: #fff;
    border-color: var(--theme-color);
    box-shadow: 0 5px 15px rgba(100, 183, 69, 0.4);
    /* Glowing Shadow */
    transform: scale(1.05);
    pointer-events: none;
    /* Prevent clicking active page */
}

/* 6. Disabled State (Arrows) */
.nav-links li.disabled span,
.nav-links li .disabled {
    background: #f9f9f9;
    color: #ccc;
    border-color: #f0f0f0;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* 7. Previous/Next Arrow Icons */
.nav-links li i {
    font-size: 12px;
}

/* 8. "Showing X of Y Results" Text */
.show-resuilt {
    font-size: 13px;
    color: #888;
    font-weight: 500;
    background: #f4f7f6;
    padding: 5px 15px;
    border-radius: 20px;
}

/* =========================================
   Mobile Responsiveness
   ========================================= */
@media (max-width: 480px) {
    .nav-links {
        gap: 5px;
    }

    .nav-links li a,
    .nav-links li span {
        width: 35px;
        height: 35px;
        font-size: 13px;
    }
}


/* =========================================
   Cart Content Area 
   ========================================= */


.cart-content::-webkit-scrollbar {
    width: 6px;
}

.cart-content::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.cart-content::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
    border-radius: 10px;
}

/* Empty State Message */
.cart-content p {
    text-align: center;
    margin-top: 40px;
    color: #999;
    font-size: 15px;
    font-weight: 500;
}


/* =========================================
   Cart Item Card
   ========================================= */
/* =========================================
   Cart Item - Fixed Alignment Layout
   ========================================= */
.cart-item {
    display: flex;
    /* Horizontal Layout */
    align-items: center;
    /* Vertically center image and text */
    position: relative;
    padding: 15px 10px;
    border-bottom: 1px solid #f1f1f1;
    background: #fff;
    min-height: 90px;
    /* Ensure consistent height */
    transition: background-color 0.2s;
    width: 100%;
}

.cart-item:hover {
    background-color: #fafafa;
}

/* 1. Image Wrapper (Fixed Size) */
.cart-item a {
    flex-shrink: 0;
    /* Prevents image from shrinking */
    width: 65px;
    /* Fixed width */
    height: 65px;
    /* Fixed height */
    margin-right: 15px;
    /* Space between image and text */
    display: block;
}

.cart-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background: #fff;
    padding: 4px;
    transition: border-color 0.3s;
}

.cart-item:hover img {
    border-color: var(--theme-color);
}

/* 2. Middle Section (Title & Quantity) */
.cart-item-details {
    flex: 1;
    /* Takes all available space between image and price */
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    /* Crucial: Prevents text from forcing container wider */
    margin-right: 10px;
    /* Space before the price */
}

.cart-item-details h4 {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin: 0 0 6px 0;
    line-height: 1.3;
    /* Truncate text with ... if it's too long */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-item-details p {
    font-size: 11px;
    color: #666;
    background: #f0f2f5;
    padding: 3px 8px;
    border-radius: 4px;
    margin: 0;
    /* Fix: Prevent "Quantity: 100" from breaking into 2 lines */
    white-space: nowrap;
    width: fit-content;
    display: inline-block;
}

/* 3. Price Section (Right Aligned) */
.cart-item-price {
    flex-shrink: 0;
    /* Prevents price from wrapping */
    font-size: 14px;
    font-weight: 500;
    color: var(--theme-color);
    /* Bright Green */
    text-align: right;
    white-space: nowrap;
    margin-top: 15px;
    /* Pushes price down slightly to avoid X button */
}

/* 4. The "X" Button (Top Right Absolute) */
.remove-item {
    position: absolute;
    top: 8px;
    right: 8px;

    width: 20px;
    height: 20px;
    padding: 0;

    background: transparent;
    border: none;
    color: #bbb;

    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.remove-item i {
    font-size: 14px;
    /* Icon size */
}

.remove-item:hover {
    color: #ff4b2b;
}

/* =========================================
   4. Cart Sidebar (Slide-in)
   ========================================= */
.cart-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 350px;
    height: 100vh;
    background: #fff;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transform: translateX(105%);
    /* Hidden by default */
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    display: flex;
    flex-direction: column;
}

/* Class to add via JS to open cart: .cart-sidebar.open */
.cart-sidebar.active,
.cart-sidebar.open {
    transform: translateX(0);
}

.cart-header {
    padding: 20px;
    background: var(--secondary-color);
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 16px;
}

.cart-header #closeCart {
    background: none;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
}

.cart-content {
    flex-grow: 1;
    padding: 10px;
    overflow-y: auto;
    /* Empty state styling if needed */
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #888;
    /* Custom Scrollbar Styling */
    scrollbar-width: thin;
    scrollbar-color: var(--secondary-color) #f1f1f1;
}

.cart-footer {
    padding: 20px;
    background: #f9f9f9;
    border-top: 1px solid #eee;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.cart-footer .total {
    font-size: 18px;
    font-weight: 700;
    color: var(--secondary-color);
    align-self: flex-end;
}

.cart-footer a {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--theme-color);
    color: #fff;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
    text-transform: uppercase;
}

.cart-footer a:hover {
    background: var(--secondary-color);
    box-shadow: 0 5px 15px rgba(12, 119, 53, 0.2);
}


/*************************************************************/


header {
    width: 100%;
    font-family: 'Poppins', sans-serif;
    position: relative;
    z-index: 100;
    box-shadow: var(--shadow-soft);
    background: #fff;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
    transition: all 0.3s ease;
}

.input-group i {
    color: white;
}

header a {
    text-decoration: none !important;
}

.logo-wrapper img {
    width: 100% !important;
}

.search-container form {
    margin-left: 60px;
}

.cartWrapper button {
    cursor: pointer !important;
}

.bottomHeader nav {
    display: flex !important;
    justify-content: center;
}

/* =========================================
   1. Top Header (Dark Bar)
   ========================================= */
.topHeader {
    background-color: var(--dark-bg);
    color: rgba(255, 255, 255, 0.8);
    padding: 8px 0;
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.topHeader .row {
    align-items: center;
}

/* Welcome Message */
.welcomeWrapper {
    display: flex;
    gap: 10px;
    align-items: center;
}

.welcome-user {
    color: var(--theme-color);
    font-weight: 600;
    text-transform: uppercase;
}

.user-name {
    color: #fff;
    font-weight: 300;
}

/* Social Media Icons */
.socialMediaWrapper {
    display: flex;
    justify-content: flex-end;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.social-links a:hover {
    background: var(--theme-color);
    color: #fff;
    transform: translateY(-2px);
}


/* =========================================
   2. Middle Header (Logo & Search)
   ========================================= */
.middleHeader {
    padding: 25px 0;
    background: #fff;
}

.middleHeader .row {
    align-items: center;
}

/* Logo */
.logo-wrapper img {
    max-height: 55px;
    width: auto;
    display: block;
}

/* Search Bar - The Centerpiece */
.search-wrapper {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.search-wrapper .input-group {
    position: relative;
    border-radius: 50px;
    background: var(--light-gray);
    border: 2px solid transparent;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

/* Focus State for Search Wrapper */
.search-wrapper .input-group:focus-within {
    border-color: var(--theme-color);
    background: #fff;
    box-shadow: 0 0 15px rgba(100, 183, 69, 0.15);
}

.search-header.form-control {
    background: transparent;
    border: none;
    height: 50px;
    padding-left: 25px;
    font-size: 14px;
    color: var(--text-dark);
    box-shadow: none !important;
    /* Override Bootstrap */
    width: auto;
    flex-grow: 1;
}

.search-header:focus {
    background: transparent;
    outline: none;
}

.search-wrapper button.btn-primary {
    background: var(--theme-color);
    border: none;
    height: 40px;
    /* Smaller than input for bubble effect */
    width: 40px;
    border-radius: 50%;
    margin-right: 5px;
    /* Spacing from right edge */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: transform 0.3s ease;
}

.search-wrapper button.btn-primary:hover {
    background: var(--secondary-color);
    transform: rotate(15deg);
}

/* Toolbar (User, Wishlist, Cart) */
.toolbar-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 25px;
}

.toolbar-container > div {
    display: flex;
    position: relative;
    cursor: pointer !important;
    background: #f4f7f6;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
}

.toolbar-container button,
.toolbar-container a {
    background: none;
    border: none;
    color: var(--text-dark);
    font-size: 20px;
    transition: color 0.3s;
    padding: 5px;
    display: block;
}

.toolbar-container button:hover,
.toolbar-container a:hover {
    color: var(--theme-color);
}

/* Notification Badges */
.bookmarkItemNumber,
.cartItemNumber {
    position: absolute;
    top: -5px;
    right: -8px;
    background: var(--theme-color);
    color: white;
    font-size: 10px;
    font-weight: 700;
    height: 18px;
    width: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid #fff;
    pointer-events: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* =========================================
   3. Bottom Header (Navigation)
   ========================================= */
.bottomHeader {
    background: var(--secondary-color);
    /* Deep Green Background */
    /* Optional: Add a subtle gradient */
    background: linear-gradient(90deg, var(--secondary-color) 0%, #0f5c2d 100%);
    padding: 0;
}

.bottomHeader nav ul {
    display: flex;
    gap: 0;
    /* Remove gap, handle padding in links */
}

.bottomHeader nav ul li {
    position: relative;
}

.bottomHeader nav ul li a {
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 18px 25px;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

/* Nav Hover Effect: Slide up Green */
.bottomHeader nav ul li a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--theme-color);
    /* Bright Green Line */
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bottomHeader nav ul li a:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--theme-color);
}

.bottomHeader nav ul li a:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}


/* =========================================
   Responsive Adjustments
   ========================================= */
@media (max-width: 991px) {


    .toolbar-container {
        justify-content: center;
        margin-top: 10px;
    }

    .bottomHeader nav ul {
        flex-wrap: wrap;
        justify-content: center;
    }

    .logo-container {
        text-align: center;
    }

    .logo-wrapper img {
        margin: 0 auto;
    }
}


/* =========================================
   Section: Nos Cartes (5 Columns, Non-White Cards)
   ========================================= */

/* 1. Main Section - Clean White Background */
.allCartes {
    padding: 60px 0;
    background: #ffffff;
}

/* 2. Heading */
.allCartes h3 {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    color: var(--secondary-color);
    text-transform: uppercase;
    margin-bottom: 50px;
    letter-spacing: 0.5px;
    position: relative;
}

.allCartes h3::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--theme-color);
    margin: 15px auto 0;
}

/* 3. The Grid Container - 5 Items Per Row */
.carteContainer {
    display: grid;
    /* Force 5 columns */
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    padding: 10px;
}

/* 4. The Card Item - SOFT GREY BACKGROUND (Not White) */
.carteItem {
    /* A very subtle, premium grey-green tint */
    background: #f7f9f8;
    border-radius: 12px;
    height: 200px;
    /* Compact height */

    display: flex;
    align-items: center;
    justify-content: center;

    /* No visible border initially for a cleaner look */
    border: 1px solid transparent;

    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.carteItem a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* 5. The Image - Blending Trick */
.carteItem img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.4s ease;

    /* MAGIC TRICK: 
       If your images have white backgrounds, this makes the white 
       transparent so they blend into the grey card background! */
    mix-blend-mode: multiply;
}

/* 6. Hover Effects */
.carteItem:hover {
    transform: translateY(-5px);
    /* White background on hover makes it "pop" out */
    background: #ffffff;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    border-color: #eee;
}

.carteItem:hover img {
    transform: scale(1.1);
    /* Reset blend mode on hover so colors pop vividly */
    mix-blend-mode: normal;
}

/* =========================================
   Responsiveness
   ========================================= */

/* Laptops */
@media (max-width: 1200px) {
    .carteItem {
        height: 180px;
    }
}

/* Tablets (3 per row) */
@media (max-width: 992px) {
    .carteContainer {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile (2 per row) */
@media (max-width: 576px) {
    .carteContainer {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .carteItem {
        height: 140px;
        padding: 10px;
    }
}

/**************************** checkout ********************************/

h3.commande-num {
    margin-bottom: 40px;
}

.action-buttons-row i {
    color: white;
}

h1.panier-title {
    text-align: center;
    margin: 70px 0px;
    display: block;
    font-size: 40px;
    color: var(--theme-color);
}

/* --- EXTRA ACTIONS & VALIDATION FORM --- */
.cart-actions-section {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px solid #eee;
}

/* Top Buttons Row (Corbeille / Restaurer) */
.action-buttons-row {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
}

.btn-action {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    color: white;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 14px;
    transition: opacity 0.3s;
}

.btn-action:hover {
    opacity: 0.9;
}

.btn-trash {
    background-color: #a91e2c;
    /* Dark Red from image */
}

.btn-restore {
    background-color: #1b5e20;
    /* Dark Green from image */
}

/* Form Inputs Grid */
.form-grid-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 8px;
    color: var(--dark-text);
}

.form-select-2 {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f9f9f9;
    font-family: inherit;
    color: #555;
    outline: none;
}

.form-select:focus {
    border-color: var(--primary-green);
    background-color: #fff;
}

/* Comment Area */
.comment-section {
    margin-bottom: 25px;
}

.comment-label {
    display: block;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 8px;
    color: var(--dark-text);
}

.comment-box {
    width: 100%;
    height: 100px;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f9f9f9;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
    /* Important for padding */
}

.comment-box:focus {
    border-color: var(--primary-green);
    background-color: #fff;
    outline: none;
}

.char-count {
    font-size: 12px;
    color: #888;
    margin-top: 5px;
    text-align: right;
}

/* Validate Button */
.btn-validate-wide {
    width: 100%;
    padding: 15px;
    background-color: #222;
    /* Dark/Black button from image */
    color: white;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: background 0.3s;
}

.btn-validate-wide:hover {
    background-color: var(--primary-green);
    /* Turns green on hover */
}

/* Mobile Responsive for this section */
@media (max-width: 768px) {
    .form-grid-row {
        flex-direction: column;
        gap: 15px;
    }

    .action-buttons-row {
        flex-direction: column;
        gap: 10px;
    }
}


/* Cart Layout */
.cart-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
    margin-bottom: 50px;
}

.cart-items {
    flex: 3;
    background: var(--white);
    border-radius: 8px;
    padding: 20px;
    box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;

}

.cart-summary {
    flex: 1;
    background: var(--white);
    border-radius: 8px;
    padding: 20px;
    box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
    height: fit-content;
    min-width: 280px;
}


.product-info-2 {
    display: flex;
    align-items: center;
    gap: 15px;
}

.product-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    background: #fff;
    border: 1px solid #eee;
    padding: 5px;
    border-radius: 4px;
}

.product-name {
    font-weight: 600;
    margin-bottom: 5px;
    display: block;
}

.product-cat {
    font-size: 12px;
    color: #888;
}

/* Quantity Input */
.qty-box {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: fit-content;
}

.qty-btn {
    background: #f9f9f9;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    color: var(--dark-text);
}

.qty-btn:hover {
    background: #eee;
}

.qty-input {
    width: 40px;
    text-align: center;
    border: none;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding: 5px;
    font-weight: bold;
}

/* Remove Button */
.remove-btn {
    color: #999;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
}

.remove-btn:hover {
    color: var(--danger);
}

/* Summary Box */
.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 14px;
}

.total-row {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 2px solid var(--light-bg);
    font-weight: bold;
    font-size: 18px;
    color: var(--primary-green);
}

.btn-checkout {
    display: block;
    width: 100%;
    padding: 15px;
    background-color: var(--theme-color);
    color: white;
    text-align: center;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
    margin-top: 20px;
}

.btn-checkout:hover {
    background-color: #1b5e20;
}

.btn-continue {
    display: block;
    text-align: center;
    margin-top: 15px;
    color: var(--primary-blue);
    text-decoration: none;
    font-size: 14px;
}

.btn-continue:hover {
    text-decoration: underline;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .cart-wrapper {
        flex-direction: column;
    }

/*
    table thead {
        display: none;
    }

     Hide headers on mobile 
    table,
    tbody,
    tr,
    td {
        display: block;
        width: 100%;
    }

    tr {
        margin-bottom: 15px;
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 10px;
    }

    td {
        text-align: right;
        padding: 10px;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    td::before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        color: #555;
    }
*/

    .product-info {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/********************* login page *************************/


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

/* --- Main Layout & Animated Background --- */
.loginWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* Deep Organic Dark Gradient */
    background: radial-gradient(circle at top right, var(--another-color), var(--dark-bg));
    position: relative;
    overflow: hidden;
}

/* Floating "Eco-Orbs" for visual interest */
.loginWrapper::before,
.loginWrapper::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    z-index: 0;
    opacity: 0.5;
    animation: pulseMove 10s infinite alternate;
}

/* Bright orb representing growth/sunlight */
.loginWrapper::before {
    width: 400px;
    height: 400px;
    background: var(--theme-color);
    top: -50px;
    left: -50px;
}

/* Deep orb for depth */
.loginWrapper::after {
    width: 300px;
    height: 300px;
    background: var(--another-color);
    bottom: -50px;
    right: -50px;
    animation-delay: -5s;
}

/* --- The Glass Card --- */
.wrapper {
    position: relative;
    width: 400px;
    padding: 50px 35px;
    z-index: 10;

    /* Modern Glassmorphism */
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    /* Top highlight */

    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

/* --- Logos Area --- */
.title-text {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 45px;
}

.title img {
    height: 60px;
    width: auto;
    object-fit: contain;
    /* Slight glow to make logos pop on dark bg */
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.1));
    transition: transform 0.3s ease;
}

.title img:hover {
    transform: scale(1.05);
}

/* --- Form Elements --- */
.form-container {
    width: 100%;
}

.field {
    height: 60px;
    width: 100%;
    margin-bottom: 25px;
    position: relative;
}

.field input {
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 0 20px;
    font-size: 15px;
    color: #fff;
    outline: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.field input::placeholder {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 300;
}

/* Focus State: The "Agri-Tech" Glow */
.field input:focus {
    background: rgba(12, 119, 53, 0.1);
    border-color: var(--theme-color);
    box-shadow: 0 0 0 4px rgba(100, 183, 69, 0.15);
}

/* --- Forgot Password --- */
.pass-link {
    margin-top: -10px;
    margin-bottom: 35px;
    text-align: right;
}

.pass-link a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    transition: color 0.3s;
}

.pass-link a:hover {
    color: var(--theme-color);
    text-decoration: underline;
}

.field.btn {
    height: 55px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    margin-top: 10px;
    border: none;
    padding: 0px !important;
    /* The Unimagri Gradient */
    background: linear-gradient(115deg, var(--another-color), var(--theme-color), var(--another-color));
    background-size: 200% auto;
    transition: background-position 0.4s ease, transform 0.2s;
    box-shadow: 0 5px 15px rgba(12, 119, 53, 0.3);
}

.field.btn:hover {
    background-position: right center;
    /* Animate gradient on hover */
    transform: translateY(-2px);
}

.field.btn:active {
    transform: scale(0.98);
}


.field.btn input[type="submit"] {
    height: 100%;
    width: 100%;
    background: transparent;
    /* Transparent so gradient shows */
    border: none;
    /* Removes border */
    outline: none;
    /* Removes blue focus outline */
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    letter-spacing: 1px;
}


.field input:required:invalid {
    box-shadow: none;
    outline: none;
}


.field input:focus:invalid {
    border-color: var(--theme-color);
    box-shadow: 0 0 0 4px rgba(100, 183, 69, 0.15);
}


.field.btn:hover .btn-layer {
    left: 0;
}


/* --- Animation Keyframes --- */
@keyframes pulseMove {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(30px, 40px) scale(1.1);
    }
}

/* --- Mobile Responsiveness --- */
@media (max-width: 450px) {
    .wrapper {
        width: 90%;
        padding: 40px 20px;
    }

    .title img {
        height: 45px;
    }
}

/************************************************************************/
.product-item img {
    width: 100%;
}

.nouveaute-wrapper,
.promotion-wrapper,
.results-wrapper {
    background: #fbfbfb;
}


/* =========================================
   Category Grid Section - Unimagri Theme
   ========================================= */

/* 1. Section Wrapper */
.category-wrapper {
    padding: 80px 0;
    background: #f8f9fa;
    /* Light clean background */
    position: relative;
}

/* 2. Section Title */
.category-title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: var(--secondary-color);
    /* Deep Green */
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 60px;
    position: relative;
}

/* The Green Underline */
.category-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: var(--theme-color);
    /* Bright Green */
    margin: 15px auto 0;
    border-radius: 2px;
    box-shadow: 0 4px 10px rgba(100, 183, 69, 0.3);
}

/* 3. The Category Card */
.category-item {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 30px;
    /* Spacing between rows */
    border: 1px solid #eef2f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    /* Soft shadow */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.category-item a {
    text-decoration: none;
    display: block;
    height: 100%;
}

/* 4. Hover Effects (Card Lift) */
.category-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(12, 119, 53, 0.15);
    /* Green-tinted shadow */
    border-color: var(--theme-color);
}

/* 5. Image Container */
.category-item-image {
    height: 220px;
    /* Fixed height for consistency */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: radial-gradient(circle at center, #ffffff 0%, #f4f7f5 100%);
    /* Subtle depth */
    position: relative;
    overflow: hidden;
}

.category-item-image img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.5s ease;
    mix-blend-mode: multiply;
    /* Blends white bg images nicely */
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.05));
}

/* Image Zoom on Hover */
.category-item:hover .category-item-image img {
    transform: scale(1.15);
}

/* 6. Title Area */
.category-item-title {
    padding: 20px 15px;
    text-align: center;
    background: var(--secondary-color);
    background: linear-gradient(90deg, var(--secondary-color) 0%, #0f5c2d 100%);
    border-top: 1px solid #f5f5f5;
    position: relative;
    z-index: 2;

}

.category-item-title span {
    font-size: 16px;
    font-weight: 700;
    color: white;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

/* Title turns green on hover */
.category-item:hover .category-item-title span {
    color: var(--theme-color);
}

/* Optional: Animated Arrow on Hover */
.category-item-title::after {
    content: '\f061';
    /* FontAwesome Arrow Right */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    bottom: 20px;
    right: 20px;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    color: var(--theme-color);
}

.category-item:hover .category-item-title::after {
    opacity: 1;
    transform: translateX(0);
}

/* =========================================
   Mobile Responsiveness
   ========================================= */
@media (max-width: 992px) {
    .category-item-image {
        height: 180px;
    }
}

@media (max-width: 576px) {
    .category-title {
        font-size: 24px;
        margin-bottom: 40px;
    }

    .category-item-image {
        height: 160px;
    }

    /* On mobile, maybe center the image more compactly */
    .category-item img {
        max-width: 70%;
        max-height: 70%;
    }
}


.nouveaute-title,
.promotion-page-title,
.results-title {
    text-align: center;
    color: black;
    margin-bottom: 70px;
    text-align: center;
    color: #272d3b;
    text-transform: uppercase;
    font-size: 35px;
    font-weight: 600;
}

/************************************************************************/



/************************************************************************/
.product-item-footer-2 .quantity input {
    width: 90%;
}

.product-item-footer-2 {
    margin-top: 30px;
    padding: 0px !important;
}

.product-other-info {
    margin-top: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.product-stock-val {
    background: #64b745;
    display: flex;
    align-items: center;
    gap: 5px;
}


.product-remise-val {
    background: crimson;
    display: flex;
    align-items: center;
    gap: 5px;
}

.product-stock-val span,
.product-stock-val i,
.product-remise-val span,
.product-remise-val i {
    color: white;
}



.product-other-info div {
    border-radius: 5px;
    padding: 3px 5px;
}


.product-ref span:first-child {
    color: #64b745;
    font-size: 15px;
    font-weight: 600;
}

.product-val span {
    color: black;
}

.product-val {
    font-size: 20px;
    margin-top: 20px;
    font-weight: 600;
}

.product-val del {
    color: #d0d0d0;
}

.product-desi {
    width: 70%;
    margin-top: 10px;
    margin-bottom: 50px;
}

.product-desi span {
    font-size: 30px;
    color: black;
    text-transform: capitalize;
    font-weight: 600;
}

.product-descr {
    line-height: 30px;
}

.product-info {
    padding: 0px 70px;
}

.product-ref {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-image img {
    width: 100%;
    padding: 50px;
}

.product-image {
    border: 1px solid #ececec;
    border-radius: 10px;
    background: white;
}

/* Modern touch */
.nav-tabs .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
    font-weight: 500;
    color: #555;
    transition: all 0.3s ease;
}

.nav-tabs .nav-link.active {
    border-color: #a7ff86;
    color: white;
    font-weight: 600;
    background: #64b745;
}

.tab-content {
    border: 1px solid #eee;
    border-top: none;
    padding: 20px;
    background: #fff;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.product-tabs {
    margin: 100px 0px;
}

.product-tabs .table thead th {
    color: white;
}

.paragraph h5 {
    color: #1d71b8;
}


.product-page {
    margin-bottom: 100px;
    margin-top: 50px;
}

/**************************************************/

.scrollToTop.show {
    bottom: 60px;
    opacity: 1;
    visibility: visible;
}

.scrollToTop {
    position: fixed;
    right: 60px;
    bottom: 500px;
    opacity: 0;
    visibility: hidden;
    transition: all ease 0.4s;
    z-index: 96;
}

.scroll-btn:before {
    content: "";
    position: absolute;
    left: var(--extra-shape, -6px);
    top: var(--extra-shape, -6px);
    right: var(--extra-shape, -6px);
    bottom: var(--extra-shape, -6px);
    background-color: var(--body-bg);
    border-radius: inherit;
    z-index: 1;
    transition: all ease 0.4s;
}

.scroll-btn i {
    display: inline-block;
    background-color: var(--theme-color);
    color: var(--white-color);
    text-align: center;
    font-size: 16px;
    width: var(--btn-size, 50px);
    height: var(--btn-size, 50px);
    line-height: var(--btn-size, 50px);
    z-index: 2;
    border-radius: inherit;
    position: relative;
    transition: all ease 0.8s;
}

/*------------------- 4.3. Footer  -------------------*/
/* --- Variables --- */


/* --- Main Layout --- */
.footer-section {
        background-color: var(--dark-bg);
    color: var(--f-text);
    position: relative;
    padding-top: 10px;
    /* Minimal padding top initially */
    padding-bottom: 30px;
    font-family: system-ui, -apple-system, sans-serif;
}

/* Background Blob Effect */
.footer-blob {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background: radial-gradient(circle at 90% 10%, rgba(204, 255, 0, 0.05), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

/* --- THE GLASS GRID SYSTEM (Responsive Core) --- */
.glass-grid-wrapper {
    display: grid;
    /* Default: 3 Columns for Desktop */
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    position: relative;
    z-index: 10;
    margin-bottom: 60px;

    /* THE TRICK: Negative margin pulls it up on Desktop only */
    transform: translateY(-50px);
}

/* --- The Card Design --- */
.glass-card {
    background: rgba(23, 23, 23, 0.7);
    /* Dark semi-transparent */
    backdrop-filter: blur(12px);
    /* The Blur Effect */
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--f-border);
    border-radius: 16px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.glass-card:hover {
    border-color: var(--f-accent);
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(204, 255, 0, 0.1);
}

/* Icon & Text Styling */
.card-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--f-accent);
    flex-shrink: 0;
    /* Prevents icon squishing */
}

.card-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Prevents long emails from breaking layout */
}

.sub-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--f-gray);
    margin-bottom: 4px;
}

.main-link,
.main-text {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.main-link:hover {
    color: var(--f-accent);
}

/* --- Footer Body Styling --- */
.footer-content {
    position: relative;
    z-index: 1;
}

/* Logo */
.logo-link img {
    height: 45px;
    margin-bottom: 20px;
}

.brand-text {
    color: var(--f-gray);
    line-height: 1.6;
    margin-bottom: 25px;
}

/* Social Buttons */
.social-buttons {
    display: flex;
    gap: 10px;
}

.social-buttons a {
    width: 40px;
    height: 40px;
    border: 1px solid var(--f-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: 0.3s;
}

.social-buttons a:hover {
    background: var(--f-accent);
    color: #000;
    border-color: var(--f-accent);
}

/* Lists */
.footer-heading {
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: 700;
    color: #fff;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: var(--f-gray);
    text-decoration: none;
    transition: 0.2s;
    display: inline-block;
}

.footer-links a:hover {
    color: var(--f-accent);
    padding-left: 5px;
}

/* Newsletter Input */
.newsletter-box p {
    color: var(--f-gray);
    font-size: 14px;
    margin-bottom: 20px;
}

.input-wrapper {
    position: relative;
    border-bottom: 2px solid var(--f-border);
}

.input-wrapper input {
    width: 100%;
    background: #000000;
    border: none;
    padding: 15px 50px 15px 10px;
    color: #fff;
    outline: none;
}

.input-wrapper button {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--f-accent);
    font-size: 18px;
    cursor: pointer;
}

.input-wrapper:focus-within {
    border-color: var(--f-accent);
}

/* Copyright */
.copyright-area {
    border-top: 1px solid var(--f-border);
    margin-top: 50px;
    padding-top: 25px;
    text-align: center;
    font-size: 14px;
    color: var(--f-gray);
}


/* =========================================
   RESPONSIVE MAGIC (The Fix)
   ========================================= */

/* 1. Tablet View (Between 768px and 991px) */
@media (max-width: 991px) {
    .glass-grid-wrapper {
        /* Switch to 2 columns */
        grid-template-columns: repeat(2, 1fr);
        transform: translateY(0);
        /* Remove the overlap effect */
        margin-top: 40px;
        /* Add normal spacing inside */
    }

    /* Make the 3rd card span full width on tablet so it looks neat */
    .glass-card:nth-child(3) {
        grid-column: span 2;
    }
}

/* 2. Mobile View (Below 768px) */
@media (max-width: 767px) {
    .glass-grid-wrapper {
        /* Switch to 1 column */
        grid-template-columns: 1fr;
        transform: translateY(0);
        /* No overlap */
        margin-top: 30px;
        gap: 15px;
    }

    .glass-card {
        padding: 20px;
    }

    .glass-card:nth-child(3) {
        grid-column: span 1;
        /* Reset span */
    }

    /* Fix Social Icons alignment */
    footer .social-buttons {
        justify-content: center;
        margin-bottom: 30px;
    }

    .footer-heading {
        margin-top: 10px;
    }
}

/**************************************************/

/* =========================================
   Section: Categories (Feature Cards)
   ========================================= */

/* 1. Section Setup */
.categories {
    padding: 70px 0;
    background: #fff;
}

/* 2. Heading (Consistent with other sections) */
.categories-title {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    color: var(--secondary-color);
    text-transform: uppercase;
    margin-bottom: 50px;
    position: relative;
    letter-spacing: 1px;
}

.categories-title::after {
    content: '';
    display: block;
    width: 70px;
    height: 3px;
    background: var(--theme-color);
    margin: 15px auto 0;
    border-radius: 2px;
}

/* 3. The Row/Grid Spacing */
.catego-row .row {
    row-gap: 30px;
    /* Vertical space between rows */
}

/* 4. The Category Card Wrapper */
.catego-wrapper {
    display: flex;
    align-items: center;
    /* Vertically center content */
    justify-content: space-between;
    /* Text Left, Image Right */

    background: #f8fcf9;
    /* Very light organic green tint */
    border: 1px solid #eef2f0;
    border-radius: 20px;

    padding: 0 40px;
    /* Side padding */
    height: 180px;
    /* Fixed height for uniformity */

    position: relative;
    overflow: hidden;
    /* Keeps zoom effects inside */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
}

/* Decorative Background Circle (The "Tech" Blob) */
.catego-wrapper::before {
    content: '';
    position: absolute;
    right: -20px;
    top: -50%;
    width: 250px;
    height: 250px;
    background: rgba(100, 183, 69, 0.05);
    /* Very faint theme color */
    border-radius: 50%;
    transition: transform 0.5s ease;
    z-index: 0;
}

/* 5. Hover Effects on Card */
.catego-wrapper:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(12, 119, 53, 0.1);
    border-color: rgba(100, 183, 69, 0.3);
    background: #fff;
    /* Light up on hover */
}

.catego-wrapper:hover::before {
    transform: scale(1.2);
    /* Expand the background blob */
}

/* 6. Typography (Title) */
.catego-wrapper h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--secondary-color);
    margin: 0;
    z-index: 1;
    /* Above background blob */
    position: relative;
    transition: transform 0.3s ease;
    max-width: 60%;
    /* Ensure text doesn't hit image */
}

/* Add a visual "Arrow" indicator on hover */
.catego-wrapper h3::after {
    content: '\f178';
    /* FontAwesome Right Arrow */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;

    display: inline-block;
    opacity: 0;
    margin-left: 10px;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    color: var(--theme-color);
    font-size: 18px;
}

.catego-wrapper:hover h3 {
    color: var(--theme-color);
    /* Title turns green */
}

.catego-wrapper:hover h3::after {
    opacity: 1;
    transform: translateX(0);
}

/* 7. Image Styling */
.catego-wrapper img {
    height: 140px;
    /* Constrained height */
    width: auto;
    max-width: 40%;

    object-fit: contain;
    z-index: 1;
    transition: transform 0.5s ease;

    /* Mix Blend Mode: Makes white backgrounds transparent */
    mix-blend-mode: multiply;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.05));
}

.catego-wrapper:hover img {
    transform: scale(1.15) rotate(-3deg);
    /* Dynamic zoom and tilt */
}

/* =========================================
   Mobile Responsiveness
   ========================================= */
@media (max-width: 768px) {
    .catego-wrapper {
        padding: 0 25px;
        height: 140px;
        /* Smaller height */
    }

    .catego-wrapper h3 {
        font-size: 18px;
    }

    .catego-wrapper img {
        height: 100px;
    }
}

@media (max-width: 480px) {
    .catego-wrapper {
        flex-direction: column-reverse;
        /* Stack Text below Image */
        justify-content: center;
        text-align: center;
        height: auto;
        padding: 30px 20px;
        gap: 15px;
    }

    .catego-wrapper h3 {
        max-width: 100%;
    }

    .catego-wrapper img {
        height: 120px;
        max-width: 80%;
    }

    /* Move the blob to center for mobile */
    .catego-wrapper::before {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        top: 10px;
    }
}


.catego-row a {
    text-decoration: none;
}



/*

.categories {
    padding-bottom: 30px;
}


.catego-wrapper h3 {
    font-weight: 700;
    color: #adadad;
    font-size: 25px;
}

.catego-wrapper h3 {
    text-transform: capitalize;
}

.catego-wrapper img {
    width: 40%;
}

.catego-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: whitesmoke;
    border-radius: 15px;
    height: 230px;
    padding: 0px 30px;
    margin-bottom: 25px;
}

.catego-wrapper-big img {
    width: 60% !important;
}

.catego-row a {
    text-decoration: none;
}
*/

/**************/
.wave-container {
    height: 17vh;
    background-color: #f5f5f5;
    position: relative;
}

.wave-container::before {
    content: "";
    width: 100%;
    height: 168px;
    position: absolute;
    bottom: -0.3%;
    left: 0;
    background-size: auto;
    background-repeat: repeat no-repeat;
    background-position: 26vw bottom;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 80' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 13L33 11C82 8 133 8 200 17C267 26 333 40 400 42C467 44 533 35 600 24C667 13 733 0 800 0C867 0 933 13 1000 17C1067 22 1133 17 1167 15L1200 13V80H1167C1133 80 1067 80 1000 80C933 80 867 80 800 80C733 80 667 80 600 80C533 80 467 80 400 80C333 80 267 80 200 80C133 80 67 80 33 80H0V22.332Z' fill='%23ffffff'/></svg>");
}

@media(max-width:850px) {
    .wave-container::before {
        height: 84px
    }
}

/******/
.wave-container-2 {
    height: 17vh;
    background-color: #ffffff;
    position: relative;
}

.wave-container-2::before {
    content: "";
    width: 100%;
    height: 168px;
    position: absolute;
    bottom: -0.3%;
    left: 0;
    background-size: auto;
    background-repeat: repeat no-repeat;
    background-position: 26vw bottom;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 80' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 13L33 11C82 8 133 8 200 17C267 26 333 40 400 42C467 44 533 35 600 24C667 13 733 0 800 0C867 0 933 13 1000 17C1067 22 1133 17 1167 15L1200 13V80H1167C1133 80 1067 80 1000 80C933 80 867 80 800 80C733 80 667 80 600 80C533 80 467 80 400 80C333 80 267 80 200 80C133 80 67 80 33 80H0V22.332Z' fill='%23f5f5f5'/></svg>");
}

@media(max-width:850px) {
    .wave-container-2::before {
        height: 84px
    }
}

/**********************************************************/
/*
.depotWrapper {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 10px;
}

.stockNumber_wrapper {
    font-size: 13px;
    color: grey;
    background: whitesmoke;
    width: 50%;
    text-align: center;
    padding: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 5px;
    margin-bottom: 20px;
}

.stockNumber_red_02 {
    color: crimson !important;
    padding: 0px 5px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
}

.stockNumber_orange_02 {
    color: darkorange !important;
    padding: 0px 5px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
}

.stockLocation div,
.stockNumber_orange_02,
.stockNumber_red_02,
.stockNumber_02 {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.stockNumber_02 {
    color: limegreen !important;
    padding: 0px 5px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
}

.product-item-tag {
    color: white;
}

.product-item-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-radius: 15px 15px 0px 0px;
}

.product-item {
    border-radius: 15px;
    background: white;
    display: flex;
    flex-direction: column;
    box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.03) 0px 10px 10px -5px, rgba(42, 51, 70, 0.03) 0px 24px 24px -8px;
    margin-bottom: 20px;
}

.product-item-footer {
    background: white;
    padding: 0px 15px;
    color: black;
    border-radius: 0px 0px 15px 15px;
}

.product-item-body {
    padding: 15px 15px 0px 15px;
    background: white;
}

span.price {
    color: black;
    display: block;
    font-size: 18px;
}

.product-item-header img {
    padding: 5px 30px 15px 30px;
}

span.reference {
    color: #88c13d;
    margin-bottom: 10px;
    display: block;
    font-weight: 600;
}

.product-item-header img {
    border-radius: 15px 15px 0px 0px;
}

h3.product-item-name {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    text-overflow: ellipsis !important;
    height: 40px !important;
    overflow: hidden !important;
    font-size: 17px;
    color: #424242;
    margin-bottom: 20px;
    text-transform: lowercase;
}

.quantity {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.quantity button {
    width: 45px;
    background: whitesmoke;
    border: none;
    cursor: pointer;
    color: black;
    height: 37px;
}

button.decrease {
    border-radius: 5px 0px 0px 5px;
}

button.increase {
    border-radius: 0px 5px 5px 0px;
}

.quantity input {
    width: 80%;
    text-align: center;
    border: none;
    height: 37px;
    color: black;
    background: whitesmoke;
}

button.add-to-cart {
    border: none;
    color: white;
    width: 100%;
    border-radius: 7px;
    height: 40px;
    margin-bottom: 10px;
    background: #1d71b8;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-purchase button.add-to-cart {
    margin-bottom: 10px;
}

button.add-to-cart i {
    color: white;
}

.favoris button {
    border: none;
    background: transparent;
}

.favoris i {
    color: crimson;
    font-size: 20px;
    cursor: pointer;
}

.product-item-footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
}

.product-item-tag-nouveaute {
    color: white;
    background: linear-gradient(270deg, crimson, #ff4d6d, #b22222, crimson);
    background-size: 400% 400%;
    animation: gradientShift 3s ease infinite;
    box-shadow: 0 0 10px rgba(220, 20, 60, 0.5);
    padding: 3px 6px;
    border-radius: 7px;
}

.product-item-tag-promotion {
    color: white;
    background: linear-gradient(270deg, crimson, #ff4d6d, #b22222, crimson);
    background-size: 400% 400%;
    animation: gradientShift 3s ease infinite;
    box-shadow: 0 0 10px rgba(220, 20, 60, 0.5);
    padding: 3px 6px;
    border-radius: 7px;
}

.stock {
    background: #88c13d;
    color: white;
    padding: 2px 6px;
    border-radius: 7px;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

*/

/* =========================================
   Product Card Redesign - Unimagri Theme
   ========================================= */

/* 1. Main Card Container */
.product-item {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    padding: 0;
    position: relative;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Ensures badges don't overflow corners */
}

/* Hover Effect: Lift & Green Border */
.product-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    border-color: var(--theme-color);
}

/* =========================================
   Product Card - Centered Tags Layout
   ========================================= */

/* 1. Header Container */
.product-item-header {
    display: flex;
    flex-direction: column;
    /* Stack Tags then Image */
    padding: 15px 10px;
    background: #fff;
    min-height: 250px;
    position: relative;
}


.product-item-header-top {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between !important;
    align-items: center;
    gap: 8px;
    /* Space between the badges */

    margin-bottom: 20px;
    /* Push image down */
    z-index: 2;
}

/* --- Common Badge Styling --- */
.product-item-tag-nouveaute,
.remise,
.product-item-header-top span,
.product-item-tag-promotion {

    font-weight: 700;

    border-radius: 20px;
    /* Pill shape for modern look */
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    font-size: 10px !important;
    /* Smaller text */
    padding: 3px 8px !important;
    /* Tighter padding */
    height: 22px;
    /* Fixed height for alignment */
    line-height: 1;
    /* Center text vertically */
}

/* Specific Colors */

/* Nouveaute (Red/Pink Gradient) */
.product-item-tag-nouveaute,
.product-item-tag-promotion {
    background: linear-gradient(135deg, #ff416c, #ff4b2b);
    color: #fff;
    font-weight: 800;
    /* Extra bold */
    letter-spacing: 0.5px;
    box-shadow: 0 2px 5px rgba(255, 65, 108, 0.4);
    /* Glow effect */
    text-transform: uppercase;
}

/* Top Bar Container */
.product-item-header-top {
    gap: 5px;
    /* Reduce gap slightly */
}



/* Remise / Discount (White with Red Border) */
.remise {
    background: #fff;
    color: #ff4b2b;
    border: 1px solid #ff4b2b;
}

/* Stock Badges (Dynamic Classes) */
.stock {
    background: #e8f5e9;
    /* Light Green Bg */
    color: var(--another-color);
    /* Deep Green Text */
    border: 1px solid var(--theme-color);
}

.stock_red {
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ef9a9a;
}

.stock_warning {
    background: #fff3e0;
    color: #ef6c00;
    border: 1px solid #ffcc80;
}

/* 3. The Image - Centered Below Tags */
.product-item-header img {
    display: block;
    margin: 0 auto;

    /* Define fixed box for image */
    height: 150px;
    width: auto;
    max-width: 100%;

    object-fit: contain;
    mix-blend-mode: multiply;
    /* Blends white bg */
    transition: transform 0.4s ease;
}

.product-item:hover .product-item-header img {
    transform: scale(1.1);
}

/* =========================================
   3. Body (Name & Ref)
   ========================================= */
.product-item-body {
    padding: 0 20px;
    text-align: left;
    margin-bottom: 15px;
}

/* Reference Code */
.reference a {
    color: #999;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    display: block;
    margin-bottom: 5px;
}

.reference a:hover {
    color: var(--theme-color);
}

/* Product Name */
.product-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
    line-height: 1.4;
    height: 40px;
    /* Limits to roughly 2 lines */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* =========================================
   4. Footer (Price, Inputs, Actions)
   ========================================= */
.product-item-footer {
    padding: 0 20px 15px 20px;
    margin-top: auto;
    /* Pushes footer to bottom */
}

/* Price & Heart Row */
.product-item-footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 15px;
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: 10px;
}

.price {
    font-size: 18px;
    font-weight: 700;
    color: var(--secondary-color);
    display: flex;
    flex-direction: column;
    /* Stacks new price on top of old */
    line-height: 1;
}

/* Old Price (strikethrough) */
.price del {
    font-size: 12px;
    color: #aaa;
    font-weight: 400;
    margin-top: 4px;
}

/* Favorite Heart */
.favoris button {
    background: none;
    border: none;
    font-size: 18px;
    color: #ccc;
    cursor: pointer;
    transition: all 0.3s;
}

.favoris button:hover {
    color: #ff416c;
    transform: scale(1.1);
}

/* Action Row: Quantity + Add to Cart */
/* We will align them side-by-side using Grid */
/*
.product-item-footer .quantity,
.product-item-footer .buyBtn {
    display: inline-block;
}
*/

/* Wrapper hack: You can't change HTML, so let's float/flex them via their parents 
   OR since they are block divs, we style them to look good stacked or flexed. 
   Here, I will separate them for clarity. */

/* Quantity Selector Styling */
.quantity {
    display: flex;
    align-items: center;
    background: #f7f9f8;
    border-radius: 8px;
    padding: 4px;
    margin-bottom: 10px;
    border: 1px solid #eee;
}

.quantity button {
    width: 30px;
    height: 30px;
    background: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    color: var(--secondary-color);
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: background 0.2s;
}

.quantity button:hover {
    background: var(--theme-color);
    color: #fff;
}

.quantity input {
    width: 100%;
    text-align: center;
    border: none;
    background: transparent;
    font-weight: 600;
    color: #333;
    outline: none;
    -moz-appearance: textfield;
    /* Remove spinner arrows */
}

/* Buy Button - Full Width Green */
.buyBtn {
    width: 100%;
}

.add-to-cart {
    width: 100%;
    height: 40px;
    background: var(--theme-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Space if you add text later */
}

.add-to-cart:hover {
    background: var(--secondary-color);
    box-shadow: 0 5px 15px rgba(100, 183, 69, 0.4);
    transform: translateY(-2px);
}

/* =========================================
   5. Depot Info (Bottom Dashboard)
   ========================================= */
.depotWrapper {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px dashed #e0e0e0;
    display: flex;
    justify-content: space-between;
    font-size: 11px;
}

.stockNumber_wrapper {
    color: #777;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 48%;
    background: #fafafa;
    padding: 5px;
    border-radius: 6px;
    text-align: center;
}

/* The actual numbers inside the depot */
.stockNumber_02 {
    display: block;
    color: var(--theme-color);
    font-weight: 700;
    font-size: 12px;
    margin-top: 2px;
}


/* =========================================
   Owl Carousel Clipping Fix 
   (Applied to everything EXCEPT .owlHeader)
   ========================================= */

.owl-carousel:not(.owlHeader) .owl-item {
    /* Space for the card to move UP without getting cut off */
    padding-top: 20px;

    /* Space for the shadow to appear at the bottom */
    padding-bottom: 40px;

    /* Space for side shadows */
    padding-left: 10px;
    padding-right: 10px;
}

/* Optional: Offset the container margin so the gap isn't visible in the layout */
.owl-carousel:not(.owlHeader) {
    margin-top: -20px;
    margin-bottom: -30px;
}

/*****************************************************************/


/* Make carousel container relative for absolute positioning */
.owlHeader {
    position: relative;
}

/* Position dots inside the slider */
.owlHeader .owl-dots {
    position: absolute;
    bottom: 15px;
    /* distance from bottom of slide */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    z-index: 10;
    /* above slide images */
    margin: 0;
    padding: 0;
}

/* Style thumbnail images */
.owl-dots img {
    width: 60px;
    height: auto;
    border-radius: 6px;
    margin: 0 5px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border 0.3s, transform 0.3s;
}

/* Highlight active thumbnail */
.owl-dots .active img {
    border-color: #1D71B8;
    transform: scale(1.1);
    /* slightly enlarge active thumbnail */
}


.headerSlider .owl-stage-outer {
    box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
}

/*

.headerSlider .owl-nav,
.nouveaute .owl-nav,
.promotion .owl-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
}

button.owl-prev {
    position: relative;
    left: -9rem;
}

button.owl-next {
    position: relative;
    right: -9rem;
}

.headerSlider .owl-carousel .owl-nav button.owl-prev,
.headerSlider .owl-carousel .owl-nav button.owl-next,
.nouveaute .owl-carousel .owl-nav button.owl-prev,
.nouveaute .owl-carousel .owl-nav button.owl-next,
.promotion .owl-carousel .owl-nav button.owl-prev,
.promotion .owl-carousel .owl-nav button.owl-next {
    background: #1D71B8;
    padding: 26px 16px !important;
    border-radius: 6px;
    font-size: 20px;
}

.nouveaute .owl-carousel .owl-nav button.owl-prev,
.nouveaute .owl-carousel .owl-nav button.owl-next {
    background: #8cc63f !important;
}

.headerSlider .owl-carousel .owl-nav button.owl-prev i,
.headerSlider .owl-carousel .owl-nav button.owl-next i,
.nouveaute .owl-carousel .owl-nav button.owl-prev i,
.nouveaute .owl-carousel .owl-nav button.owl-next i,
.promotion .owl-carousel .owl-nav button.owl-prev i,
.promotion .owl-carousel .owl-nav button.owl-next i {
    color: white !important;
}
*/



/* =========================================
   Modern Carousel Navigation (Arrows)
   ========================================= */

/* Remove default background and styling */
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    background: #fff !important;
    /* White circle */
    border-radius: 50% !important;
    /* Perfect circle */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15) !important;
    /* Soft shadow */
    color: var(--theme-color) !important;
    /* Green Arrow Icon */
    font-size: 20px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    opacity: 0.8;
    z-index: 10;
}

/* Position them partially outside the container */
.owl-carousel .owl-nav button.owl-prev {
    left: -10%;
}

.owl-carousel .owl-nav button.owl-next {
    right: -10%;
}

/* Hover Effect: Turns Green */
.owl-carousel .owl-nav button.owl-prev:hover,
.owl-carousel .owl-nav button.owl-next:hover {
    background: var(--theme-color) !important;
    color: #fff !important;
    transform: translateY(-50%) scale(1.1);
    /* Slight zoom */
    opacity: 1;
    box-shadow: 0 10px 20px rgba(100, 183, 69, 0.3) !important;
}

/* Adjust span size inside button if needed */
.owl-carousel .owl-nav button span {
    font-size: 28px;
    line-height: 0;
    margin-top: -4px;
    /* Center alignment fix */
}








/*
.allCartes {
    background: white;
    padding: 40px 0px 60px 0px;
    position: relative;
}
*/

.removeCarteMargin img {
    margin-bottom: 0px !important;
}

/**.allCartes h3,**/
.nouveaute-title,
.categories-title,
.promotion-title {
    text-align: center;
    color: #272d3b;
    text-transform: uppercase;
    font-size: 35px;
    font-weight: 600;
    padding-bottom: 70px;
    line-height: 25px;
}

del.old-price {
    color: lightgrey;
    display: block;
    font-size: 18px;
}

.categories-title {
    padding-top: 30px;
}

.nouveaute-title,
.promotion-title {
    color: #272d3b;
}

.nouveaute,
.promotion {
    padding: 40px 0px;
    background: whitesmoke;
}

/*
.carteContainer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
*/

/*
.carteItem img {
    width: 75%;
    margin-bottom: 48px;
    box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
    border-radius: 10px;
}

.carteItem {
    flex: 0 0 calc(15% - 16px);
    margin-right: 6px;
    display: flex;
    justify-content: center;
}
*/

@media (min-width: 1200px) {
    .container {
        max-width: 1400px !important;
    }
}

.headerSlider {
    padding: 50px 0px;
    background: whitesmoke;
}

.headerSlider .item,
.headerSlider .item img {
    border-radius: 10px;
}

/*

.bottomHeader nav li:hover {
    background: #1D71B8;
    color: white;
}

.bottomHeader nav ul li:first-child {
    background: #8cc63f;
}

.bottomHeader nav a {
    color: white;
    text-decoration: none;
}

.bottomHeader {
    background: #272d3b;
    color: white;
    text-align: center;
}

.bottomHeader nav ul li:first-child {
    background: #8cc63f;
}

.bottomHeader nav ul li {
    color: white;
    padding: 15px 20px;
    cursor: pointer
}

button:focus,
input:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

button.btn.btn-primary:focus {
    background: transparent !important;
}
*/

/*
.topHeader {
    border-bottom: 1px solid #eaeaea;
}

ul li {
    display: inline-block;
}

ul {
    margin: 0px;
    padding: 0px;
}

.col-lg-6.topHeader-left {
    display: flex;
    align-items: center;
}

.socialMediaWrapper {
    display: flex;
    justify-content: end;
}


.socialMediaWrapper,
.welcomeWrapper {
    padding: 10px 0px;
}

ul.social-links li {
    padding: 0px 10px;
}

ul.social-links li:last-child {
    padding-right: 0px !important;
}
*/


/***********************************************/
/*
.logo-wrapper img {
    width: 100%;
}
*/

select.form-select {
    border: none;
    border-right: 1px solid white !important;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    outline: none;
    padding: 0px 10px;
    background: #f2f2f2;
}

/*
input.form-control.search-header {
    border: none;
    outline: none;
    background: #f2f2f2;
    border-right: 1px solid white;
}

.search-wrapper button.btn.btn-primary {
    background: #f2f2f2;
    border: none;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
*/
}

.remise {
    background: crimson;
    color: white;
    padding: 2px 6px;
    border-radius: 6px;
}

/*
.search-wrapper .input-group {
    border-radius: 20px;
    width: 44rem;
    margin-left: auto;
    margin-right: 25px;
}

.middleHeader {
    padding: 20px;
}

.search-wrapper button.btn.btn-primary i {
    color: #3a3a3a;
}

.col-lg-2.logo-container {
    align-content: center;
}

.accountWrapper button,
.bookmarkWrapper button,
.cartWrapper button {
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    width: 36px;
    cursor: pointer;
    position: relative;
}

.toolbar-container {
    display: flex;
    gap: 10px;
    justify-content: end;
}

span.user-name {
    color: #8cc63f;
    font-weight: 600;
}

span.cartItemNumber,
span.bookmarkItemNumber {
    position: absolute;
    z-index: 1;
    background: #8cc63f;
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 11px;
    top: -10px;
    right: 4px;
    font-weight: 600;
    width: 12%;
    height: 20px;
}

.accountWrapper button,
.bookmarkWrapper button,
.cartWrapper button {}
*/

/********************** Media Query Start **************************/

/* --- Social Media List Structure --- */
.social-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    /* Makes icons sit side-by-side */
    gap: 15px;
    /* Space between icons */
}

/* --- Desktop Layout (Default) --- */
/* Align Left side content to the left */
.topHeader-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* Align Right side content to the right */
.topHeader-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.socialMediaWrapper {
    display: inline-block;
}

/* --- Mobile / Responsive Layout --- */
/* Applies to screens smaller than 768px (Tablets and Phones) */
@media (max-width: 767px) {

    /* Center the Left Column (Greeting) */
    .topHeader-left {
        justify-content: center;
        margin-bottom: 5px;
        /* Add small space between text and icons */
        text-align: center;
    }

    /* Center the Right Column (Icons) */
    .topHeader-right {
        justify-content: center;
    }

    /* Ensure the social links list is centered */
    .social-links {
        justify-content: center;
    }

    /* Optional: Reduce font size slightly on mobile if names are long */
    .user-name,
    .welcome-user {
        font-size: 14px;
    }
}

/***********************************************************************************************/
/* --- Responsive Ordering Logic --- */
@media (max-width: 991px) {

    /* Turn the row into a Flexbox container to allow reordering */
    .header-flex-row {
        display: flex;
        flex-wrap: wrap;
    }

    /* 1. Logo: Top Left */
    .mobile-order-1 {
        order: 1;
        display: flex;
        align-items: center;
    }

    /* 2. Toolbar: Top Right */
    .mobile-order-2 {
        order: 2;
        justify-content: flex-end;
        /* Ensure icons stay right */
    }

    /* 3. Search: Bottom (Full Width) */
    .mobile-order-3 {
        order: 3;
        margin-top: 15px;
        /* Add space between logo/icons and search bar */
    }

    /* Optional: Ensure image fits nicely on mobile */
    .logo-wrapper img {
        max-width: 100%;
        height: auto;
        max-height: 50px;
        /* Adjust based on your preference */
    }

    .search-container form {
        margin-top: 15px;
        margin-left: 0px;

    }

}

@media (max-width: 575px) {
    .mobile-order-2 {
        justify-content: center;
        margin-top: 20px;
    }

    .logo-wrapper {
        margin: 0px auto;
    }

}


/* --- Desktop / General Styles --- */
.navigation-wrapper {
    position: relative;
}

/* Hide Mobile Elements on Desktop */
.mobile-toggle-btn,
.menu-overlay,
.close-btn-wrapper {
    display: none;
}

/* Desktop Menu Layout */
.menu-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 30px;
    /* Space between links */
}

.menu-list li a {
    text-decoration: none;
    display: block;
    padding: 10px 0;
    font-weight: 600;
    color: inherit;
}

/* --- Mobile Styles (Sidebar Logic) --- */
@media (max-width: 991px) {
    /* Adjust to 767px if you only want it on phones */

    .footer-section {

        overflow-x: hidden;
        /* Prevents side scroll on mobile */
    }

    .bottomHeader nav ul li a {
        color: black;
    }

    /* 1. Show the Hamburger Button */
    .mobile-toggle-btn {
        display: inline-block;
        background: transparent;
        border: none;
        padding: 8px 15px;
        font-size: 16px;
        cursor: pointer;
        width: 100%;
        text-align: left;
        border-radius: 4px;
        color: white;
    }

    /* 2. The Sidebar Styling */
    .menu-list {
        display: block;
        /* Override flex */
        position: fixed;
        /* Fix to the screen */
        top: 0;
        left: 0;
        height: 100vh;
        /* Full Height */
        width: 280px;
        /* Width of sidebar */
        background-color: #ffffff;
        /* Must have a background color */
        z-index: 9999;
        /* On top of everything */
        padding: 20px;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);

        /* Animation Logic */
        transform: translateX(-100%);
        /* Hide off-screen to the left */
        transition: transform 0.3s ease-in-out;
    }

    /* 3. The Active State (Slide In) */
    .menu-list.active {
        transform: translateX(0);
        /* Bring it on screen */
    }

    /* 4. Overlay (Dim the background) */
    .menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        /* Semi-transparent black */
        z-index: 9998;
        /* Just behind the menu */
        display: none;
        /* Hidden by default */
    }

    .menu-overlay.active {
        display: block;
    }

    /* 5. List Items inside Sidebar */
    .menu-list li {
        display: block;
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
    }

    .menu-list li a {
        padding: 15px 5px;
        font-size: 16px;
    }

    /* 6. Close Button Area */
    .close-btn-wrapper {
        display: block;
        /* Show on mobile */
        text-align: right;
        margin-bottom: 20px;
        border-bottom: none !important;
    }

    .close-menu-btn {
        background: none;
        border: none;
        font-size: 14px;
        cursor: pointer;
        color: #999;
    }



}



@media (min-width: 1201px) {}

@media (min-width: 991px) and (max-width: 1200px) {}

@media (min-width: 769px) and (max-width: 991px) {}

@media (min-width: 481px) and (max-width: 768px) {}

@media (min-width: 320px) and (max-width: 480px) {}