/* SUUQ typography: Inter for interface copy, Poppins for headings. */
:root {
    --suuq-font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --suuq-font-heading: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Ensure the body and html take full height */
html, body {
    height: 100%;
    margin: 0;
    font-family: var(--suuq-font-body);
    box-sizing: border-box; /* Ensure padding and borders are included in total width and height */
}

button,
input,
select,
textarea {
    font-family: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
.sidebar-heading {
    font-family: var(--suuq-font-heading);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}


.container-fluid {
    width: 100%;
    padding: 0;
    margin: 0;
    overflow-x: hidden; /* Prevent horizontal overflow */
}


.row.flex-nowrap {
    flex: 1;
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    margin: 0;
}
/* Ensure the custom main-container fits within the main-content */

/* Sidebar styling */
#sidebarMenu {
    position: fixed;
    top: 71px; /* Height of the navbar */
    bottom: 0;
    left: 0;
    height: calc(100vh - 71px); /* Adjust for navbar height */
    width: 210px; /* Adjust this value to set the width of the sidebar */
    padding: 0;
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
    z-index: 100; /* Ensure sidebar is on top */
    background-color: #f8f9fa;
}



.sidebar-sticky {
    position: relative;
    height: 100%;
    padding-top: 0.5rem;
    overflow-x: hidden;
    overflow-y: auto; /* Scroll when content overflows */
}



/* HEADINGS: Center only the headings, not the nav links */
.sidebar-heading {
    font-size: 0.9rem;
    text-transform: uppercase;
    padding-top: 0.01rem;
    margin-bottom: 1rem;
    
}


/* Optional: Customize scrollbar for sidebar */
.-sticky::-webkit-scrollbar {
    width: 8px;
}

.sidebar-sticky::-webkit-scrollbar-track {
    background: #f0f0f0; /* Light grey track */
}

.sidebar-sticky::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

/* Make category names slightly bold */
.category-name {
    font-weight: 500;
}

/* The nav area */
.nav.flex-column {
    width: 100%;
    padding: 0;
    margin: 0;
}

.nav-item {
    width: 100%;
    margin-bottom: 2px;
}

/* Base styles for nav links */
.nav-link {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Left aligned */
    /* width: 100%;   <-- Remove this */
    margin: 0 8px;   /* Add horizontal margins so background doesn't touch sidebar edges */
    padding: 8px 15px;
    color: #333333; /* 2025ish black (modern dark shade) */
    font-family: var(--suuq-font-body) !important;
    border-radius: 4px;
    margin-bottom: 1px;
    transition: background-color 0.3s ease, color 0.3s ease;
    

}

/* Hover state: subtle highlight */
.nav-link:hover {
    background-color: #f1f1f1; /* Light grey hover background for a modern feel */
    color: #28a745;            /* Green accent color on hover */
    font-weight: 500;          /* Keep text bold on hover */
    text-decoration: none;     /* Remove underline on hover */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Soft shadow effect */
}

/* Active link styling */
.nav-link.active {
    background-color: #ced4da;
    color: #333333;
    font-weight: 600;
}


/* The small icon container to keep icons consistent */
.icon-container {
    width: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -8px;   /* Shift the icon to the left */
    margin-right: 12px;
}

/* Icon styling */
.icon-container .fa-solid {
    font-size: 1.3rem;     /* Keep the icon size consistent */
}

.nav-link .bi {
    font-size: 1.2rem; /* Adjust as needed */
}

.nav-link .fa-solid {
    font-size: 1.7rem;  /* Adjust this value to increase or decrease the size */
}

/* LOGOUT: remove rectangle & make it look like other nav-links */
.nav-logout-form {
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Button as a link */
.btn-logout.nav-link {
    background: none;
    border: none;
    color: #333333;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-logout.nav-link:hover {
    background-color: #e9ecef;
    color: #242424;
    font-weight: bold;
    text-decoration: none;
}

.btn-logout.nav-link:focus {
    outline: none;
}
.btn-logout.nav-link:focus-visible {
    outline: none;
}

/*Nav bar code*/
.site-nav {
    position: fixed; /* Add this line */
    background-color: #f8f9fa;
    padding: 8px 6px;
    border-bottom: 1px solid #ddd;
    width: 100%;
    margin: 0 auto;
    top: 0; /* Add this line */
    z-index: 1000; /* Add this line to ensure the navbar is on top */
  }
  
    /* By default, hide the .mobile-nav on large screens */
    /* by default: */
.desktop-nav { display: block; }
.mobile-nav { display: none; }


    
    .nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  /* On large screens, nav-left + nav-right side by side. */
    }
    
        /* ============= Left Section (Logo + Search) ============= */
    .nav-left {
        display: flex;
        align-items: center;
    }
    
    
        /* The search form next to the logo (on large screens) */
    /* ===== Search (keep width & spacing) ===== */
.nav-search{
  margin-left:60px;              /* spacing between logo and search */
  width:800px;                   /* keep search from going huge */
  font-family:var(--suuq-font-body);
}

/* Outer pill */
.nav-search .search-container{
  display:flex; align-items:center;
  background:#fff;
  border:1px solid #ddd;         /* subtle shell */
  padding:3px;
  border-radius:1000px;          /* full pill */
}

/* Input: no inner borders ever */
.nav-search .search-input{
  flex:1; width:100%;
  padding:4px 8px;
  border:0; outline:0;
  border-radius:1000px;
  font-size:1rem;
  
}
.nav-search .search-input:focus{
  outline:none !important;
  border:0 !important;           /* removes the green inner border */
  box-shadow:none !important;
}

/* Optional: tiny outer highlight on focus (match Alibaba feel).
   If you want zero highlight, delete this rule. */
.nav-search .search-container:focus-within{
  border-color:#ff6a2f;
  box-shadow:0 0 0 3px rgba(255,106,47,.12);
}

/* Right search button */
.nav-search .search-submit{
  border:0; cursor:pointer;
  padding:4px 8px;
  border-radius:1000px;
  display:inline-grid; grid-auto-flow:column; gap:8px; align-items:center;
  background:linear-gradient(90deg,#ffb347,#ff5f2e);
  color:#fff; font-weight:500;
}
.nav-search .search-submit:active{ transform:translateY(1px); }

/* We’re not using a left icon anymore */
.nav-search .search-icon{ display:none; }


    
/* ============= Right Section (Top & Bottom Items) ============= */
    .nav-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        /* on large screens => 2 small 'rows': nav-item-top & nav-item-bottom */
    }
      
    /* "Become a supplier", "Speak to CEO" row */
    .nav-item-top {
        display: flex;
        gap: 15px;
        margin-bottom: 2px;
    }
      
        /* "Profile/Login", date, cart row */
    .nav-item-bottom {
        display: flex;
        align-items: center;
        gap: 15px;
    }

     
    .nav-link-item {
        text-decoration: none !important;
        color: #333 !important;
        margin-left: 20px;  /* spacing between items */
        align-items: center;
        gap: 3px;
    }

     /* Default styles for the cart button */
     .custom-cart-btn {
        background-color: white; /* Black background */
        color: black; /* White text */
        border: 1.6px solid #000000; 
        transition: all 0.3 ease; /* Smooth transition for hover effects */
        text-decoration: none; /* Remove underline */
    }

    /* Default styles for the cart badge */
    .cart-badge {
        background-color: #4caf50 !important;
        color: white; /* White badge text */
        font-weight: bold; /* Bold text */
        transition: all 0.3s ease; /* Smooth transition */
        padding: 0.5em 0.7em; /* Adjust the padding to make it circular */
        border-radius: 50%; /* Ensure it's circular */
    }

    /* Hover effects for the cart button */
    .custom-cart-btn:hover {
        background-color: #ff9900; /* Orange background on hover */
        color: white; /* White text on hover */
        
    }

    /* Hover effects for the cart icon */
    .custom-cart-btn:hover .cart-icon {
        color: white; /* Ensure icon stays white on hover */
    }

    /* Hover effects for the cart badge */
    .custom-cart-btn .cart-badge:hover {
        background-color: rgb(32, 216, 39) !important; /* Light blue background on hover */
        color: #ffffff; /* Change text to black on hover */
        transform: scale(1.1); /* Slightly increase the size of the badge */
    }

    .product-description,
    .product-warning,
    .product-return-policy {
      margin-top: 20px;
    }

    .product-description h3,
    .product-warning h4,
    .product-return-policy h4 {
      color: #4caf50;
    }

    .product-description p,
    .product-warning p,
    .product-return-policy p {
      font-size: 1rem;
      line-height: 1.5;
    }

    /* Profile/Login link styling */
    .profile-link {
        text-decoration: none;
        color: #333;
    }
    .profile-link:hover {
        text-decoration: none;
        color: #000;
    }
    .current-date-link{
      text-decoration: none;
      color: #333;
    }
      

        /* Location and Calendar icons - green */
    .nav-right .nav-item-bottom .fa-map-marker-alt,
    .nav-right .nav-item-bottom .fa-calendar-alt {
        color: #000000!important; /* Green with high specificity */
    }

    /* Supplier and CEO icons - orange */
    
    .nav-right .nav-item-top .fa-headphones {
        color: #ff9900 !important; /* Orange with high specificity */

    }
    .nav-right .nav-item-top .fa-store{
        color: #28a745 !important; /* Green with high specificity */

    }


    
      
    .nav-link-item span {
        font-family: var(--suuq-font-body) !important;
        line-height: 1.5; /* Adjust spacing for a calmer look */
        
        font-weight: 600;
        color: #000000;
        transition: background-color 0.2s ease, color 0.2s ease; /* Smooth transitions */
        padding: 2px 4px; /* Add this to match hover state */
        border-radius: 5px; /* Add this to match hover state */
    }
    .nav-right .nav-link-item span, 
    .nav-right #current-date {
        font-family: var(--suuq-font-body) !important;
        font-size: 16px; /* Slightly smaller font for elegance */
        color: #000000; 
        font-weight: 500; /* Regular weight for readability */
        line-height: 1.5; /* Adjust spacing for a calmer look */
    }

   

    /* 5. Ensure the link text style remains your usual black text, no underline, etc. */
    .nav-link-item .current-date-link span#current-date {
      font-family: var(--suuq-font-body) !important;
      font-size: 16px;
      color: #000;
      font-weight: 500;
      line-height: 1.5;
    }

      
      .nav-link-item span:hover {
        background-color: #f4d6912a;
        padding: 4px 4px;
        border-radius: 3px;
        color: #333;
        cursor: pointer;
        transform: none;
      }
      
      
      .nav-item-top .nav-link-item span {
        margin-left: 2px;
      }
      
      .nav-item-bottom .nav-link-item span {
        margin-left: 2px;
      }
      
      #current-date {
        font-family: var(--suuq-font-body) !important;
      }
     
      
      .nav-right .nav-item-bottom .fa-user {
        color: #000000 !important; /* Orange with high specificity */

      }  


      .badge-perishables {
        background-color: #c8e6c9; /* Pale green background */
        color: #388e3c; /* Dark green text color */
        padding: 0.25em 0.75em; /* Adjust padding if necessary */
        font-size: 0.8rem; /* Adjust font size if necessary */
        border-radius: 0.2rem; /* Rounded corners */
        font-weight: bold; /* Make text bold */
    }

    /* Space after the badge */
    .badge-perishables + .card-body a {
        margin-top: 10px; /* Increase the space after the badge */
    }

    /* You were missing this closing brace on the red icons block */
.nav-right .nav-link-item .fa-wand-magic-sparkles,
.nav-right .nav-link-item .fa-inbox,
.mobile-actions .fa-wand-magic-sparkles,
.mobile-actions .fa-inbox{
  color:#dc3545 !important; /* Bootstrap danger */
} /* <-- close */

/* Desktop: nudge the right cluster slightly away from the edge */
@media (min-width: 992px){
  .nav-right{
    padding-inline-end: 14px;  /* ~14px cushion from right edge */
  }
  .nav-right .nav-link-item:last-child{
    margin-inline-end: 2px;    /* tiny balance so last item doesn't look flush */
  }
}

    
.mobile-nav {
    background-color: #f8f9fa;
    border-bottom: 1px solid #ddd;
    width: 100%;
    padding: 2px 4px;
    position: fixed;
    top: 0;
    z-index: 1105; /* slightly above the desktop nav */
  }
  
  .mobile-nav-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  /* Row 1 => logo left, profile/cart right */
  .mobile-nav-row1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  

  /* Row1 right => user/cart */
  .mobile-nav-right {
    display: flex;
    align-items: center;
    gap: 15px;
  }

      
  /* Stack icons vertically in the container */
  .user-meal-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5px; /* maintain minimal spacing between icons */
    height: 35px;  /* set fixed height to match the Cart's height */
    justify-content: center;  /* center the icons vertically */
  }


  /* Ensure all icons have a consistent size */
  .user-meal-container i {
    font-size: 1rem; /* Tweak this to control icon size */
  }

    /* Tooltip styling for the meal planning link */
  .tooltip-link {
    position: relative;
  }

  /* Remove the hover rule if present */
  /* .tooltip-link:hover::after {
    opacity: 1;
  } */

  .tooltip-link::after {
    content: "Schedule a Meal!";
    position: absolute;
    top: 80%;  /* Position the tooltip relative to the icon */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0; /* Start hidden */
    animation: tooltipCycle 5s infinite;
  }

  /* Keyframes to make the tooltip appear briefly every cycle */
  @keyframes tooltipCycle {
    0%, 50%, 100% { opacity: 0; }
    55%, 70% { opacity: 1; }
  }
  .nav-link-item,
  .meal-planning-link {
      margin: 0;
      padding: 0;
  }


  /* Hide mobile-only elements on larger screens */
  @media (min-width: 769px) {
    .mobile-only-link {
        display: none !important;
    }
  }



      



            /* Location and Calendar items - green */
                /* Location and Calendar icons - green */
       
    /* =================== RESPONSIVE BREAKPOINTS =================== */

    /* 1) Up to 992px => maybe shrink the logo & search more */
    @media (max-width: 992px) {
        
        .custom-cart-btn {
            font-size: 0.9rem;
            padding: 5px 5px;
            border-width: 1.2px;
        }
    }
    
    .mobile-nav-right .nav-link-item .fa-user {
        color: #000000 !important; /* Orange with high specificity */
        font-size: 0.8rem;  /* or adjust to a smaller size, e.g., 0.9rem */
    }  

    
   
        
       
    /* Logo, search, and cart scaling on smaller screens */
@media (max-width: 992px) {
    /* Hide top row items (CEO, supplier) */
    .nav-item-top {
        display: none !important;
    }
    /* Show the .mobile-nav below 768px */

    .desktop-nav { display: none !important; }
    .mobile-nav { display: block !important; }
    /* Scale down the logo */
    
    
    .custom-cart-btn {
        font-size: 0.8rem;
        padding: 5px 5px;
        border-width: 1px;
    }
    .mobile-nav-row2 form.nav-search-mobile {
        width: 100%;             /* row is full width */
        display: flex;
        justify-content: center; /* center the search container horizontally */
      }
    .mobile-nav-row2 .search-container {
        width: 95%;              /* or 95%, etc. */
        margin: 0 auto;          /* horizontally center */
        background: #fff;
        display: flex;
        align-items: center;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 1px;
      }
      
      .mobile-nav-right .nav-link-item .fa-user {
        color: #000000 !important; /* Orange with high specificity */
        font-size: 0.8rem;  /* or adjust to a smaller size, e.g., 0.9rem */
      }
      .current-date-link{
        text-decoration: none;
        color: #333;
      }  


}


@media (max-width:576px){
  .toast{ font-size:.85rem; }
}


/* 3) Up to 576px => possibly shrink more */
@media (max-width: 576px) {
    
    .mobile-nav {
        display: block; /* or flex, whichever you prefer */
      }
      .site-nav {
          display: none !important;
      }
      
      .custom-cart-btn {
        font-size: 0.7rem;
        padding: 2px 2px;
        border-width: 1px;
    }

   
      
      .mobile-nav-right .nav-link-item .fa-user {
        color: #000000 !important; /* Orange with high specificity */
        font-size: 0.8rem;  /* or adjust to a smaller size, e.g., 0.9rem */
      }
      .nav-right .nav-item-bottom .fa-calendar-alt {
        color: #000000!important; /* Green with high specificity */
      } 
      .current-date-link{
      text-decoration: none;
      color: #333;
    } 
    
}

/* ========== 3-Column Footer ========== */
.site-footer {
  background-color: #f8f9fa;
  border-top: 1px solid #ddd;
  /* Shift the footer right to avoid the 210px sidebar on large screens */
  margin-left: 210px; 
  width: calc(100% - 210px);
  padding: 20px;
  font-family: var(--suuq-font-body);
  margin-top: 30px; /* optional spacing above the footer */
}

.footer-container {
  max-width: 1200px; /* center columns on wide screens if you like */
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

  
  .footer-col {
    flex: 1; /* each column takes up 1 part of the space */
   

  }

  
  
  .footer-col h5 {
    margin-bottom: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
  }
  
  /* Unordered lists for links */
  .footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .footer-col ul li {
    margin-bottom: 8px;
  }
  
  .footer-col ul li a {
    color: #333;
    text-decoration: none;
    transition: color 0.2s ease;
  }
  
  .footer-col ul li a:hover {
    color: #28a745; /* a green hover or your brand color */
  }
  .mobile-only-link a{
    text-decoration: none;
  }
  
  /* Store badge icons */
  .store-badges a img {
    height: 40px;
    margin-right: 20px;
    margin-top: 5px;
  }

  .floating-ad-container {
  position: fixed;
  top: 100px;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  pointer-events: none; /* So it doesn’t block clicks below, card restores pointer-events */
  }
  .floating-ad-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    padding: 24px 20px 18px 20px;
    max-width: 340px;
    width: 92vw;
    text-align: left;
    position: relative;
    pointer-events: auto;
    animation: fadeIn 0.8s;
  }

  .ad-close-btn {
  position: absolute;
  top: 10px;
  right: 16px;
  width: 36px;
  height: 36px;
  background: #fff;
  border: 1.5px solid #eee;
  border-radius: 50%;
  font-size: 1.5rem;
  color: #363636;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 1.5px 6px rgba(44,90,80,0.08);
  transition: background 0.2s, color 0.2s;
  padding: 0;
  line-height: 1;
  }
  .ad-close-btn:hover {
    background: #ffeaea;
    color: #d33;
    border-color: #ffbdbd;
  }

  @keyframes fadeIn {
    0%   { transform: translateY(-30px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
  }

  
  /* ========== Responsive: stack columns on small screens ========== */
  @media (max-width: 992px) {
    .footer-container {
      flex-direction: column;
      align-items: flex-start;
    }
    .site-footer {
      margin-left: 0 !important; 
      width: 100% !important;
    }

    .footer-col {
      width: 100%;
      margin-bottom: 20px;
    }
    
  }
  @media (min-width: 769px) {
    .mobile-only-link {
      display: none !important;
    }
  }
  
  
  /* ========== Hide Footer on Mobile EXCEPT on product_list page ========== */
  /* We'll use a body class or a block override called "product-list-page" 
     so only that page shows the footer on small screens. 
     For all other pages, the footer is hidden below 768px. 
  */
  @media (max-width: 992px) {
    .site-footer:not(.product-list-page) {
      display: none !important;
    }

    #sidebarMenu {
      display: none; 
    }
  
  }
  
/* ---- Brand sizing (desktop/mobile) ---- */
:root{
  --brand-h: 34px;        /* desktop logo height (matches your shot) */
  --brand-h-mobile: 28px; /* mobile logo height */
}

/* Anchor is the “frame”; kill the old 80px/55px heights */
.nav-logo{
  display:inline-flex;
  align-items:center;
  height:var(--brand-h);
  line-height:0;          /* removes stray baseline space */
  overflow:hidden;        /* trims any accidental overflow */
  padding:4px 0;          /* optional: more touch area without growing the logo */
}

/* Make BOTH <img> and inline <svg> obey the frame */
.nav-logo img,
.nav-logo svg{
  height:100%;
  width:auto;
  display:block;
}

/* Mobile override */
@media (max-width: 992px){
  .mobile-nav-left .nav-logo{ height:var(--brand-h-mobile); }
}

/* (Optional) gentle spacing before the search */
.nav-search{ margin-left:12px; }

/* (Optional) keep the right cluster off the edge a touch */
.nav-right{ padding-right:10px; }

/* ===== Brand sizing ===== */
:root{
  --brand-h: 40px;      /* desktop brand height (you already set this) */
  --brand-h-m: 28px;    /* mobile brand height (tweak 26–32px if needed) */
}

/* Shared logo container */
.nav-logo{
  display:inline-flex; align-items:center;
  height:var(--brand-h); line-height:0;
  overflow:visible;
}
.nav-logo img, .nav-logo svg{
  height:100%; width:auto; display:block;
}



/* ===== MOBILE ONLY ===== */
@media (max-width: 992px){
  .mobile-nav-left .nav-logo{
    height: var(--brand-h-m);          /* bigger, but won’t distort row */
  }
  .mobile-nav-left .nav-logo img,
  .mobile-nav-left .nav-logo svg{
    height:100%; width:auto; display:block;
  }
  
}



 /* ===== Mobile Search (≤ 992px) ===== */
@media (max-width: 992px){
  :root{ --search-h-m: 42px; } /* tweak 40–46px if you want */

  .mobile-nav-row2 form.nav-search-mobile{
    width:100%;
    display:flex;
    justify-content:center;
  }

  .mobile-nav-row2 .search-container{
    position:relative;
    width:95%;
    height:var(--search-h-m);
    margin:0 auto;
    background:#fff;
    display:flex; align-items:center;
    border:1.6px solid #ff7a00;              /* orange ring like desktop */
    border-radius:999px;
    padding:0 44px 0 14px;                    /* room for right icon */
    transition:border-color .15s, box-shadow .15s;
  }

  /* one icon only – hide the left span */
  .mobile-nav-row2 .search-icon{ display:none !important; }

  .mobile-nav-row2 .search-input{
    width:100%; height:100%;
    border:0; outline:0; background:transparent;
    font-size:15px;
    padding:0; margin:0;
  }

  /* No green focus. Subtle outer glow on focus-within */
  .mobile-nav-row2 .search-container:focus-within{
    border-color:#ff7a00;
    box-shadow:0 0 0 2px rgba(255,122,0,.12);
  }

  /* right circular button */
  .mobile-nav-row2 .search-go{
    position:absolute; right:4px; top:50%; transform:translateY(-50%);
    width:36px; height:36px; border-radius:999px;
    display:inline-flex; align-items:center; justify-content:center;
    border:0;
    background:linear-gradient(90deg,#ffb347,#ff5f1f);
    color:#fff; cursor:pointer;
    box-shadow:0 1px 2px rgba(0,0,0,.06);
  }
  .mobile-nav-row2 .search-go i{ font-size:16px; line-height:1; }
  .mobile-nav-row2 .search-go:active{ transform:translateY(-50%) scale(.97); }
  .mobile-nav-row2 .search-go:focus{
    outline:none; box-shadow:0 0 0 3px rgba(255,122,0,.20);
  }


}
@media (max-width: 992px){
  /* small space under the search container */
  .mobile-nav-row2 { margin-bottom: 2px !important; }   /* try 4–8px */
  /* if you prefer the gap on the pill itself: */
  .mobile-nav-row2 .search-container { margin-bottom: 6px !important; }
}

/* ===== Desktop navbar: prevent wrap on small laptops ===== */
@media (min-width: 992px){
  .nav-search{
    width: 100% !important;
    max-width: 720px !important;  /* was forcing 800px */
    margin-left: 0 !important;    /* grid gap handles spacing */
    min-width: 240px;
  }

  /* stop extra spacing that can force wrapping */
  .nav-link-item{ margin-left: 0 !important; }
  .nav-item-top, .nav-item-bottom{ gap: 14px; flex-wrap: nowrap; }
}



/* ===== Desktop navbar stability (small laptops 992px–1400px) ===== */
@media (min-width: 992px) and (max-width: 1400px){

  /* Give the right-side actions enough room, let search shrink instead */
  .site-nav.desktop-nav .nav-container{
    grid-template-columns: 210px minmax(240px, 1fr) minmax(320px, auto) !important;
    gap: 12px !important;
  }

  /* IMPORTANT for grid shrink: allow items to shrink (prevents overflow) */
  .site-nav.desktop-nav .nav-container > *{ min-width: 0; }

  /* Search should be flexible (not hard 800px) */
  .nav-search{
    width: 100% !important;
    max-width: clamp(320px, 44vw, 640px) !important;
    margin-left: 0 !important;
    min-width: 220px;
  }

  /* Stop forced extra spacing that causes wrapping */
  .nav-right .nav-link-item{ margin-left: 0 !important; }

  /* Keep both right rows in one line */
  .nav-item-top, .nav-item-bottom{
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }

  /* Prevent “Login / Sign Up” breaking into multiple lines */
  .nav-item-bottom .profile-link #user-profile{
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
    vertical-align: bottom;
  }

  /* Also keep other action labels from wrapping */
  .nav-item-top a.nav-link-item span,
  .nav-item-bottom a.nav-link-item span{
    white-space: nowrap;
  }
}


/* ===== Compact desktop mode (icons-only where needed) ===== */
/* For 13" / small laptops: 992px–1280px */
@media (min-width: 992px) and (max-width: 1280px){

  /* tighten gaps on the right cluster */
  .site-nav.desktop-nav .nav-item-top,
  .site-nav.desktop-nav .nav-item-bottom{
    gap: 10px !important;
  }

  /* hide long vendor name + verified pill – keep just the green shop icon */
  .site-nav.desktop-nav .nav-subtext.vendor-name,
  .site-nav.desktop-nav .verified-chip{
    display: none !important;
  }

  /* icon-only for Inbox & Explore (keep badges / icon) */
  .site-nav.desktop-nav a.nav-inbox-link span:last-child,
  .site-nav.desktop-nav .nav-item-bottom a.nav-link-item span:last-child{
    display: none;
  }

  /* but keep text for Login / Profile */
  .site-nav.desktop-nav .nav-item-bottom .profile-link #user-profile{
    display: inline-block !important;
    font-size: .9rem;
    max-width: 120px;
    white-space: nowrap;
  }
}

/* ===============================
   SUUQ LOGO — stable (no scaling)
   =============================== */

/* ===========================
   SUUQ LOGO (trace.svg) – final fix
   Put this at the VERY BOTTOM of styles.css
   =========================== */
/* ===============================
   SUUQ LOGO — final (NO scaling)
   =============================== */
:root{
  --brand-h: 44px;          /* desktop: try 40–48px */
  --brand-h-mobile: 40px;   /* mobile: 30–38px */
}

.nav-logo{
  display:inline-flex;
  align-items:center;
  height:var(--brand-h);
  line-height:0;
  overflow:visible;          /* safety */
}

.nav-logo img,
.nav-logo svg{
  height:100%;
  width:auto;
  display:block;
  transform:none !important; /* kill any earlier transforms */
}

@media (max-width: 992px){
  .mobile-nav-left .nav-logo{
    height:var(--brand-h-mobile);
  }
}
/* =========================================================
   MOBILE NAV: make Row1 (logo + icons) align with search pill
   ========================================================= */
@media (max-width: 992px){

  /* the “same margin” used by the search bar */
  :root{ --m-nav-pad: clamp(10px, 2.5vw, 16px); }

  /* remove the old tiny left/right padding on the whole bar */
  .mobile-nav{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* give BOTH row1 + row2 the same horizontal padding */
  .mobile-nav-container{
    padding-left: var(--m-nav-pad) !important;
    padding-right: var(--m-nav-pad) !important;
  }

  /* make the search pill fill the padded area (no extra centering margins) */
  .mobile-nav-row2 .search-container{
    width: 100% !important;
    margin: 0 !important;
  }

  /* (optional) if you still see extra gap, tighten it a bit */
  .mobile-nav-container{ gap: 8px !important; }
}
/* Desktop: nudge logo slightly away from the left edge */
@media (min-width: 992px){
  .site-nav.desktop-nav .nav-logo{
    margin-left: 10px;   /* tweak: 6px–14px */
  }
}
/* Mobile: add a slight space above Row 1 (logo + icons) */
@media (max-width: 992px){
  .mobile-nav{ padding-top: 8px; }          /* tweak 4–8px */
  .mobile-nav-row1{ padding-top: 2px; }     /* optional micro-gap */
}

/* =========================================================
   SUUQ PREMIUM NAVIGATION — 2026
   Keeps the desktop category rail and condenses account tools.
   ========================================================= */
@media (min-width: 993px){
  .site-nav.desktop-nav{
    height:76px;
    padding:10px 18px;
    background:rgba(255,255,255,.97);
    border-bottom:1px solid #e8eee9;
    box-shadow:0 7px 24px rgba(7,60,46,.075);

    -webkit-backdrop-filter: blur(15px);
    backdrop-filter:blur(15px);
  }


  .site-nav.desktop-nav .nav-container{
    grid-template-columns:190px minmax(320px,1fr) auto !important;
    gap:clamp(14px,2vw,28px) !important;
    max-width:1800px;
    margin:0 auto;
  }
  .site-nav.desktop-nav .nav-search{max-width:none !important;margin:0 !important}
  .site-nav.desktop-nav .search-container{
    min-height:48px;
    border:1px solid #dbe6df;
    box-shadow:0 4px 15px rgba(7,60,46,.05);
  }
  .site-nav.desktop-nav .search-submit{padding:9px 18px;background:linear-gradient(135deg,#f6a13c,#ef7f1a)}
  .suuq-premium-actions{display:block;min-width:0;padding:0 !important}
  .suuq-premium-row{display:flex !important;align-items:center;gap:14px !important;margin:0 !important}
  .suuq-premium-row > .nav-link-item,
  .suuq-premium-row > .nav-link-item > .nav-link-item{
    min-height:42px;margin:0 !important;padding:8px 10px;border-radius:13px;white-space:nowrap;color:#183229 !important;
  }
  .suuq-premium-row > .nav-link-item:hover,
  .suuq-premium-row > .nav-link-item > .nav-link-item:hover{background:#f0f8f4}
  .suuq-premium-row > .nav-link-item > .nav-link-item{padding:0}
  .suuq-premium-row .nav-inbox-icon-wrap{display:inline-flex}
  .suuq-premium-row .nav-link-item span{font-size:13px !important;font-weight:800 !important}

  /* Compact top actions: clean icon + label, with no pill or animated hover. */
  .suuq-premium-row > .suuq-top-action{
    display:inline-flex;
    align-items:center;
    gap:5px !important;
    min-height:42px;
    margin:0 !important;
    padding:0 1px !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#17211d !important;
    text-decoration:none;
    transition:color .18s ease;
  }
  .suuq-premium-row > .suuq-top-action:hover,
  .suuq-premium-row > .suuq-top-action:focus-visible{
    background:transparent !important;
    color:#075f46 !important;
    transform:none !important;
  }
  .suuq-premium-row > .suuq-top-action > span{
    margin:0 !important;
    padding:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:inherit !important;
  }
  .suuq-premium-row > .suuq-top-action > span:hover{
    padding:0 !important;
    background:transparent !important;
    color:inherit !important;
    transform:none !important;
  }
  .suuq-top-action-icon{
    display:block;
    width:21px;
    height:21px;
    flex:0 0 21px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.15;
    stroke-linecap:round;
    stroke-linejoin:round;
    color:#ff6600;
  }
  .suuq-top-action:hover .suuq-top-action-icon,
  .suuq-top-action:focus-visible .suuq-top-action-icon{
    color:#ff6600;
  }
  .suuq-top-action--reels .ico-explore{
    margin:0;
    background-color:#ff6600;
  }
  .suuq-compact-action span:last-child{color:inherit !important}
  .suuq-shop-cta{background:#eaf7f1 !important;color:#075f46 !important}
  .suuq-login-cta{border:1px solid #dce6e0}

  .suuq-account-menu{position:relative;margin-left:2px}
  .suuq-account-menu summary{list-style:none;display:flex;align-items:center;gap:9px;min-width:178px;max-width:220px;height:48px;padding:5px 10px 5px 6px;border:1px solid #dce8e1;border-radius:15px;background:#fff;cursor:pointer;box-shadow:0 5px 15px rgba(7,60,46,.055)}
  .suuq-account-menu summary::-webkit-details-marker{display:none}
  .suuq-account-avatar{width:36px;height:36px;display:grid;place-items:center;flex:0 0 36px;border-radius:12px;background:linear-gradient(145deg,#075f46,#0a7b59);color:#fff}
  .suuq-account-copy{display:flex;flex-direction:column;min-width:0;line-height:1.1;flex:1}
  .suuq-account-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:#14231e}
  .suuq-account-copy small{margin-top:4px;font-size:10px;color:#718078}
  .suuq-account-chevron{font-size:9px;color:#7a8a82;transition:transform .2s}
  .suuq-account-menu[open] .suuq-account-chevron{transform:rotate(180deg)}
  .suuq-account-dropdown{position:absolute;z-index:3000;top:calc(100% + 10px);right:0;width:270px;padding:9px;border:1px solid #e1eae5;border-radius:18px;background:#fff;box-shadow:0 22px 60px rgba(7,47,36,.19)}
  .suuq-account-heading{display:flex;align-items:center;gap:10px;padding:10px;margin-bottom:5px;border-radius:13px;background:linear-gradient(135deg,#edf8f3,#fff8ea)}
  .suuq-account-heading > span:last-child{display:flex;flex-direction:column;min-width:0}
  .suuq-account-heading strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .suuq-account-heading small{margin-top:3px;font-size:10px;color:#6b7b74}
  .suuq-account-shop-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:#075f46;color:#fff}
  .suuq-account-dropdown a,.suuq-account-dropdown button{width:100%;display:flex;align-items:center;gap:11px;padding:10px 11px;border:0;border-radius:11px;background:transparent;color:#20342d;text-decoration:none;font:700 12px/1.2 var(--suuq-font-body);text-align:left;cursor:pointer}
  .suuq-account-dropdown a:hover,.suuq-account-dropdown button:hover{background:#f0f7f3;color:#075f46}
  .suuq-account-dropdown a i,.suuq-account-dropdown button i{width:18px;color:#0a7153;text-align:center}
  .suuq-account-dropdown .suuq-dropdown-live-icon{
    width:18px;
    height:18px;
    flex:0 0 18px;
    fill:none;
    stroke:#0a7153;
    stroke-width:2.15;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .suuq-account-dropdown form{margin:4px 0 0;padding-top:4px;border-top:1px solid #edf1ef}
  #sidebarMenu{top:76px;height:calc(100vh - 76px);background:#fbfcfb !important;border-right:1px solid #e8eee9;box-shadow:none}
}

@media (min-width:993px) and (max-width:1180px){
  .site-nav.desktop-nav .nav-container{grid-template-columns:150px minmax(260px,1fr) auto !important;gap:10px !important}
  .suuq-premium-row .nav-link-item span:last-child{display:none}
  .suuq-premium-row > .nav-link-item{padding-inline:9px}
  .suuq-account-menu summary{min-width:150px;max-width:170px}
}

.mobile-actions .action-btn-live{color:#e83e48 !important;background:#fff0f0 !important}



/* ===== AKEDI HEADER BRAND ===== */
.akedi-nav-brand{
  display:inline-flex !important;
  align-items:center !important;
  gap:7px;
  height:44px !important;
  overflow:visible !important;
  text-decoration:none !important;
  white-space:nowrap;
}

.akedi-nav-brand .akedi-nav-brand-icon{
  width:38px !important;
  height:38px !important;
  object-fit:contain;
  flex:0 0 38px;
  display:block;
}

.akedi-nav-brand-name{
  font-family:"Poppins","Inter",system-ui,sans-serif;
  font-size:27px;
  line-height:1;
  font-weight:800;
  letter-spacing:-0.04em;
  color:#12C25B;
}

.akedi-nav-brand:hover .akedi-nav-brand-name{
  color:#0fa94d;
}

@media (max-width:992px){
  .akedi-nav-brand{
    height:40px !important;
    gap:6px;
  }

  .akedi-nav-brand .akedi-nav-brand-icon{
    width:34px !important;
    height:34px !important;
    flex-basis:34px;
  }

  .akedi-nav-brand-name{
    font-size:24px;
  }
}