[v-cloak] {
    display: none !important;
  }
  
  /* Category Carousel Styles */
  .category-banner-container {
      padding: 0;
      margin-bottom: 20px;
  }
  
  .category-banner-carousel {
      margin-bottom: 0;
      border-radius: 0;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
      margin-bottom: 15px;
  }
  .category-banner-carousel .carousel-inner {
      max-height: 320px;
      background-color: #1e1e2f;
      height: 320px; /* Fixed height for consistent aspect ratio */
  }
  .category-banner-carousel .carousel-item {
      height: 100%;
      background-color: #1e1e2f;
      position: relative;
      overflow: hidden;
  }
  .category-banner-carousel .carousel-item::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(to right, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 100%);
      z-index: 1;
  }
  .category-banner-carousel .carousel-item img {
      object-fit: cover;
      width: 100%;
      height: 100%;
      object-position: center;
      filter: brightness(0.9) contrast(1.05);
      image-rendering: -webkit-optimize-contrast;
      backface-visibility: hidden;
      transform: translateZ(0) scale(1.02); /* Slight scale to ensure full coverage */
      will-change: transform;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
  }
  .category-banner-carousel .carousel-caption {
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 8px;
      padding: 15px;
      max-width: 60%;
      margin: 0;
      left: 10%;
      right: auto;
      bottom: 50%;
      transform: translateY(50%);
      text-align: left;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      z-index: 2;
  }
  .category-banner-carousel .carousel-caption h3 {
      font-weight: 700;
      margin-bottom: 8px;
      font-size: 1.6rem;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }
  .category-banner-carousel .carousel-caption p {
      font-size: 1rem;
      margin-bottom: 10px;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
      max-width: 90%;
  }
  .category-banner-carousel .carousel-caption .btn {
      font-weight: 600;
      padding: 6px 18px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      transition: transform 0.3s, box-shadow 0.3s;
      border-radius: 50px;
  }
  .category-banner-carousel .carousel-caption .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  }
  .category-banner-carousel .carousel-indicators {
      bottom: 10px;
      margin-bottom: 5px;
  }
  .category-banner-carousel .carousel-indicators [data-bs-target] {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin: 0 4px;
  }
  .category-banner-carousel .carousel-control-prev,
  .category-banner-carousel .carousel-control-next {
      width: 5%;
      opacity: 0.7;
      z-index: 3;
  }
  .category-banner-carousel .carousel-control-prev:hover,
  .category-banner-carousel .carousel-control-next:hover {
      opacity: 1;
  }
  
  @media (max-width: 768px) {
      .category-banner-carousel {
          border-radius: 16px;
          margin: 15px;
          overflow: hidden;
      }
      .category-banner-carousel .carousel-inner {
          max-height: 250px;
          height: 250px; /* Fixed height for consistent aspect ratio */
          border-radius: 16px;
      }
      .category-banner-carousel .carousel-caption {
          max-width: 80%;
          bottom: 50%;
          transform: translateY(50%);
          padding: 10px 15px;
      }
      .category-banner-carousel .carousel-caption h3 {
          font-size: 1.3rem;
      }
      .category-banner-carousel .carousel-caption p {
          font-size: 0.9rem;
      }
      .category-banner-carousel .carousel-caption .btn {
          padding: 5px 15px;
          font-size: 0.9rem;
      }
  }
  
  @media (max-width: 576px) {
      .category-banner-carousel {
          border-radius: 20px;
          margin: 10px 15px 15px;
          overflow: hidden;
      }
      .category-banner-carousel .carousel-inner {
          max-height: 180px;
          height: 180px; /* Fixed height for consistent aspect ratio */
          border-radius: 20px;
          aspect-ratio: 1.3/1;
      }
      .category-banner-carousel .carousel-item::after {
          border-radius: 20px;
      }
      .category-banner-carousel .carousel-caption {
          max-width: 85%;
      }
  }
  
  .initial-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .initial-loading-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid var(--theme-primary, #007bff);
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  .filter-container {
      display: flex;
      gap: 20px;
  }
  
  .sidebar-container {
      width: 280px;
      flex-shrink: 0;
  }
  
  .results-container {
      flex-grow: 1;
  }
  
  /* Category header */
  .category-header {
      margin-bottom: 25px;
      background-color: transparent;
  }
  
  .category-header h1 {
      margin-bottom: 10px;
      font-size: clamp(1.5rem, 5vw, 2rem);
      text-align: center;
  }
  
  .category-header p {
      color: var(--theme-charcoal);
      max-width: 800px;
  }
  
  /* View type tabs */
  .view-type-tabs {
      display: flex;
      border-bottom: 1px solid #dee2e6;
      margin-bottom: 20px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none; /* Firefox */
  }
  
  .view-type-tabs::-webkit-scrollbar {
      display: none; /* Safari and Chrome */
  }
  
  .view-tab {
      padding: 10px 20px;
      cursor: pointer;
      position: relative;
      font-weight: 500;
      color: var(--theme-charcoal);
      transition: all 0.3s;
      white-space: nowrap;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
  }
  
  .view-tab.active {
      color: var(--theme-primary);
      font-weight: 600;
  }
  
  .view-tab.active:after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: var(--theme-primary);
  }
  
  .view-tab i {
      margin-right: 6px;
  }
  
  /* Mobile controls */
  .mobile-fab {
      position: fixed;
      bottom: 80px; /* Adjust for potential bottom nav */
      right: 20px;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background-color: var(--theme-primary) !important;
      color: white !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      z-index: 1000 !important; /* Ensure it's above content but below modals/offcanvas */
      display: none; /* Hidden by default, shown via media query */
      align-items: center;
      justify-content: center;
      font-size: 24px;
      cursor: pointer;
      transition: transform 0.3s, box-shadow 0.3s;
      border: none;
  }
  
  .mobile-fab i {
      color: white !important;
  }
  
  .mobile-fab:active {
      transform: scale(0.95);
  }
  
  
  /* Filter toggle and controls */
  .filter-toggle {
      display: none; /* Hidden by default, shown via media query */
      margin-bottom: 15px;
      position: sticky;
      top: 70px; /* Adjust based on your sticky header height */
      z-index: 10;
      background-color: rgba(255, 255, 255, 0.95);
      padding: 10px 0;
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
  }
  
  .filter-toggle .btn {
      border-radius: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-weight: 500;
      padding: 10px 20px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  
  .filter-count {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      color: var(--theme-primary);
      border: 1px solid var(--theme-primary);
      border-radius: 50%;
      width: 22px;
      height: 22px;
      font-size: 12px;
      font-weight: 600;
      margin-left: 5px;
  }
  
  /* Sidebar search (for mobile within sidebar) */
  .sidebar-search .input-group {
      border-radius: 24px; /* Match main search */
      overflow: hidden;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  }
  
  .sidebar-search .form-control {
      border-right: 0;
      height: 44px; /* Match main search */
      padding-left: 18px;
      border-radius: 24px 0 0 24px !important;
      border: 1px solid #dee2e6;
      border-right: none;
  }
  .sidebar-search .form-control:focus {
      box-shadow: none;
      border-color: var(--theme-primary-light);
  }
  
  .sidebar-search .btn {
      border-radius: 0 24px 24px 0 !important;
      padding-left: 15px;
      padding-right: 15px;
      border: 1px solid var(--theme-primary);
  }
  
  /* Branch card - unified styling */
  .branch-card {
      display: flex;
      flex-direction: column;
      background-color: #fff;
      border-radius: 12px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s, box-shadow 0.3s;
      overflow: hidden;
      height: 100%; /* Ensure cards in a row have same height */
      margin-bottom: 20px;
      position: relative; /* For absolute positioned badges */
  }
  
  .branch-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }
  
  /* Image container */
  .branch-image-container {
      width: 100%;
      height: 200px; /* Adjust as needed */
      position: relative;
      overflow: hidden;
      background-color: var(--theme-light); /* Placeholder bg color */
  }
  
  .branch-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease-out;
  }
  .branch-card:hover .branch-image {
      transform: scale(1.05);
  }
  
  /* Content section */
  .branch-details {
      flex-grow: 1; /* Allow details to fill remaining space */
      padding: 15px;
      display: flex;
      flex-direction: column;
  }
  
  .branch-header {
      margin-bottom: 8px; /* Reduced margin */
  }
  
  .workshop-name {
      font-size: 17px; /* Slightly smaller */
      font-weight: 600;
      margin-bottom: 2px; /* Reduced margin */
      color: var(--theme-dark);
      line-height: 1.3;
      /* Ellipsis for long names */
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }
  .workshop-name a { color: inherit; text-decoration: none; }
  .workshop-name a:hover { color: var(--theme-primary); }
  
  .branch-name {
      font-size: 13px; /* Smaller */
      color: var(--theme-charcoal);
      margin-bottom: 0;
  }
  
  /* Info section with location and rating */
  .branch-info {
      display: flex;
      justify-content: space-between;
      align-items: flex-start; /* Align items to top */
      margin-bottom: 10px;
      gap: 10px; /* Add gap between location and rating */
  }
  
  .location {
      display: flex;
      align-items: flex-start; /* Align icon with first line */
      flex-wrap: wrap; /* Allow wrapping */
      gap: 4px 6px; /* Row and column gap */
      font-size: 13px; /* Smaller */
      color: var(--theme-charcoal);
      line-height: 1.4;
      flex-grow: 1; /* Allow location to take available space */
      margin-right: 5px; /* Space before rating */
  }
  .location i {
      margin-top: 2px; /* Align icon better */
      flex-shrink: 0; /* Prevent icon from shrinking */
  }
  
  .distance-badge {
      background-color: var(--theme-light);
      padding: 1px 5px; /* Adjusted padding */
      border-radius: 4px;
      font-size: 11px; /* Smaller */
      color: var(--theme-charcoal);
      margin-left: 4px; /* Adjust spacing */
      white-space: nowrap; /* Prevent breaking */
  }
  
  .rating {
      display: flex;
      align-items: center;
      gap: 4px; /* Reduced gap */
      background-color: #FFF9C4; /* Light yellow */
      padding: 3px 6px; /* Adjusted padding */
      border-radius: 4px;
      font-size: 13px; /* Match location text size */
      font-weight: 500;
      flex-shrink: 0; /* Prevent rating from shrinking */
  }
  
  .rating .star {
      color: var(--theme-yellow); /* Gold star */
      font-size: 14px; /* Slightly larger icon */
  }
  
  /* Category and service tags */
  .branch-category-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-bottom: 8px; /* Reduced margin */
      min-height: 26px; /* Reserve space even if empty */
  }
  
  .branch-category-tag {
      background-color: rgba(var(--theme-primary-rgb), 0.1); /* Use primary color with alpha */
      color: var(--theme-primary); /* Use primary color */
      font-size: 10px; /* Smaller */
      font-weight: 500;
      padding: 2px 6px; /* Adjusted padding */
      border-radius: 10px; /* More rounded */
      display: inline-flex;
      align-items: center;
      gap: 3px;
      line-height: 1.2;
      white-space: nowrap;
  }
  .branch-category-tag i { font-size: 11px; } /* Icon size */
  
  .service-list {
      /* Keep max-height or use line-clamp */
      /* max-height: 40px; */ /* Limit height for 2 lines approx */
      overflow: hidden;
      margin-bottom: 12px;
      font-size: 12px; /* Smaller text */
      color: var(--theme-charcoal);
      line-height: 1.4;
  
      /* Using line-clamp for better control */
      display: -webkit-box;
      -webkit-line-clamp: 2; /* Show max 2 lines */
      -webkit-box-orient: vertical;
  }
  .service-list i {
      font-size: 13px; /* Icon size */
      vertical-align: middle;
  }
  
  
  /* Action buttons section */
  .branch-actions {
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding: 10px;
      border-top: 1px solid #eee;
      background-color: var(--bs-light);
  }
  
  .action-btn {
      display: block;
      text-align: center;
      margin-bottom: 5px;
      width: 100%;
  }
  
  .action-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
  
  .action-btn:active {
      transform: translateY(0);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  }
  
  .btn-success {
      background-color: #25D366; /* WhatsApp green */
      border-color: #25D366;
      color: white !important; /* Ensure white text */
  }
  .btn-success:hover {
      background-color: #1fbd59;
      border-color: #1fbd59;
  }
  /* Ensure icons inside buttons inherit color unless overridden */
  .action-btn i { vertical-align: middle; font-size: 15px; }
  .btn-success i { color: white !important; }
  .btn-outline-primary i { color: var(--theme-primary); }
  
  
  /* Badge styles */
  .verified-badge,
  .home-service-badge {
      position: absolute;
      top: 10px;
      padding: 3px 8px;
      border-radius: 50px;
      font-size: 11px; /* Smaller */
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 4px;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      z-index: 1; /* Above image */
      color: white;
      pointer-events: auto; /* Make badges clickable/hoverable if needed */
      box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Subtle shadow */
  }
  .verified-badge i, .home-service-badge i { font-size: 12px; } /* Icon size */
  
  .verified-badge {
      left: 10px;
      background-color: rgba(25, 135, 84, 0.8); /* Verified Green */
  }
  
  .home-service-badge {
      right: 10px;
      background-color: rgba(13, 110, 253, 0.8); /* Home Service Blue */
  }
  
  .offers { /* Discount banner */
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba(217, 0, 0, 0.85); /* Discount Red */
      color: white;
      padding: 4px 10px; /* Adjusted padding */
      text-align: center;
      font-size: 13px; /* Smaller */
      font-weight: 600;
      z-index: 1; /* Above image */
  }
  .offers h4 { display: none; } /* Hide h4 if not needed */
  
  .distance-approx-badge {
      font-size: 9px;
      margin-left: 3px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      padding: 1px 4px;
      background-color: var(--theme-yellow);
      color: var(--theme-dark);
      font-weight: 600;
  }
  
  /* Service/Product card styles */
  .item-card {
      display: flex;
      flex-direction: column;
      background-color: #fff;
      border-radius: 12px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s, box-shadow 0.3s;
      margin-bottom: 20px;
      overflow: hidden;
      height: 100%; /* Ensure cards in a row have same height */
      position: relative; /* For absolute positioned badges */
  }
  
  .item-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }
  
  .item-img {
      height: 200px; /* Consistent height with branch card */
      overflow: hidden;
      position: relative;
      background-color: var(--theme-light); /* Placeholder bg */
  }
  
  .item-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease-out;
  }
  .item-card:hover .item-img img {
      transform: scale(1.05);
  }
  /* Badge for home service on item card */
  .item-card .home-service-badge {
      top: 10px;
      right: 10px;
  }
  
  .item-content {
      padding: 15px;
      flex-grow: 1; /* Allow content to fill space */
      display: flex;
      flex-direction: column;
  }
  
  .item-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 4px;
      color: var(--theme-dark);
      line-height: 1.3;
      /* Ellipsis for long titles */
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2; /* Max 2 lines */
      -webkit-box-orient: vertical;
      min-height: 22px; /* Reserve height for 2 lines */
  }
  .item-title a { color: inherit; text-decoration: none; }
  .item-title a:hover { color: var(--theme-primary); }
  
  
  .item-category {
      color: var(--theme-charcoal);
      font-size: 12px; /* Smaller */
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 5px;
  }
  .item-category i { font-size: 14px; } /* Icon size */
  
  .item-description {
      color: var(--theme-charcoal);
      font-size: 13px; /* Smaller */
      margin-bottom: 0; /* REMOVED margin below description */
      line-height: 1.5;
      /* flex-grow: 1; */ /* REMOVED flex-grow, let branches list push down */
      /* Line clamp */
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 3; /* Max 3 lines */
      -webkit-box-orient: vertical;
      min-height: 19px; /* Reserve height for 3 lines */
  }
  .item-description.empty-placeholder {
      min-height: 58px; /* Ensure placeholder takes space */
  }
  
  
  .item-price {
      font-size: 17px; /* Slightly smaller */
      font-weight: 600;
      color: var(--theme-primary);
      margin-bottom: 5px;
  }
  .item-price.from-price::before { /* Add "Desde " if needed */
      content: "Desde ";
      font-size: 13px;
      font-weight: 400;
      color: var(--theme-charcoal);
  }
  
  .item-duration {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 12px;
      color: var(--theme-charcoal);
      margin-bottom: 10px;
  }
  .item-duration i { font-size: 14px; } /* Icon size */
  
  .item-footer {
      /* REMOVED - Footer no longer needed for services */
      /* display: flex; */
      /* justify-content: space-between; */
      /* align-items: center; */
      /* margin-top: auto; */ /* Push footer to bottom */
      /* padding-top: 10px; */
      /* border-top: 1px solid var(--theme-light); */
  }
  
  .item-branches {
      font-size: 12px;
      color: var(--theme-charcoal);
      display: flex;
      align-items: center;
      gap: 5px;
  }
  .item-branches i { font-size: 14px; } /* Icon size */
  .item-footer .theme-btn {
      font-size: 13px; /* Match button sizes */
      height: 36px;
      padding: 0 12px;
  }
  
  /* Filters bar */
  .filters-bar {
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
      padding: 10px 15px;
      margin-bottom: 20px;
      display: flex;
      flex-wrap: wrap; /* Allow wrapping on small screens */
      justify-content: space-between;
      align-items: center;
      gap: 10px 15px; /* Row and column gap */
      position: sticky;
      top: 120px; /* Adjust based on header + search height */
      z-index: 5; /* Below header/sidebar */
  }
  
  .active-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 6px; /* Gap between tags */
      align-items: center; /* Align tags and clear button */
      /* Allow shrinking/growing */
      flex-grow: 1;
      min-width: 0; /* Prevent overflow issues */
  }
  .active-filters span.text-muted { white-space: nowrap; } /* Prevent label from wrapping */
  
  .filter-tag {
      background-color: var(--theme-primary-light);
      color: var(--theme-primary);
      padding: 4px 8px 4px 10px; /* Adjusted padding */
      border-radius: 50px;
      font-size: 12px;
      font-weight: 500;
      display: inline-flex; /* Use inline-flex */
      align-items: center;
      gap: 4px;
      white-space: nowrap;
      cursor: pointer;
      transition: background-color 0.2s;
      border: 1px solid rgba(var(--theme-primary-rgb), 0.3);
  }
  .filter-tag:hover {
       background-color: rgba(var(--theme-primary-rgb), 0.2);
  }
  
  .filter-tag i {
      font-size: 14px;
      margin-left: 2px;
      opacity: 0.7;
  }
  .filter-tag:hover i { opacity: 1; }
  
  .active-filters .btn-link {
      text-decoration: none;
      font-size: 12px;
      white-space: nowrap;
  }
  .active-filters .btn-link:hover { text-decoration: underline; }
  
  .sort-options {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0; /* Prevent shrinking */
  }
  
  .sort-label {
      font-size: 13px;
      color: var(--theme-charcoal);
      white-space: nowrap;
  }
  .sort-options .form-select-sm {
      font-size: 13px;
      min-width: 160px; /* Give dropdown more space */
  }
  
  /* Empty results */
  .empty-results {
      text-align: center;
      padding: 40px 20px; /* Increased padding */
      background-color: #fff;
      border-radius: 12px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
      margin-top: 20px;
  }
  
  .empty-results img {
      max-width: 130px; /* Slightly smaller */
      margin-bottom: 25px;
      opacity: 0.5; /* Less opaque */
  }
  
  .empty-results h4 {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 10px;
  }
  
  .empty-results p {
      color: var(--theme-charcoal);
      margin-bottom: 25px;
      max-width: 400px;
      margin-left: auto;
      margin-right: auto;
      font-size: 14px; /* Smaller text */
  }
  .empty-results .theme-btn {
      font-size: 14px;
  }
  
  /* Category showcase (Top Swiper Section) */
  .categories-section {
      padding: 20px 0 30px; /* Adjusted padding */
      background-color: transparent; /* Changed from #f8f9fa to transparent */
      margin-bottom: 25px; /* Space below */
      border-radius: 8px;
  }
  .categories-section .title h2 {
      font-size: 18px; /* Smaller title */
      font-weight: 600;
      margin-bottom: 5px;
      color: var(--theme-dark); /* Ensure good contrast */
  }
  .categories-section .title h2 a { /* Back button */
      width: 26px; height: 26px; font-size: 16px;
  }
  .categories-section .sub-title p {
      font-size: 14px;
      color: var(--theme-charcoal);
      margin-bottom: 0;
  }
  
  .food-categories { /* Category/Subcategory Card in Swiper */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 15px 10px;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
      height: 130px; /* Reduced height */
      width: 100%;
      transition: transform 0.2s, box-shadow 0.2s;
      text-decoration: none;
      border: 1px solid #eee; /* Subtle border */
  }
  
  .food-categories:hover {
      transform: translateY(-3px);
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
  }
  
  .food-categories i {
      margin-bottom: 8px; /* Reduced margin */
      color: var(--theme-primary);
      font-size: 2rem; /* Reduced icon size */
      line-height: 1;
  }
  
  .food-categories h4 {
      font-size: 12px; /* Smaller text */
      font-weight: 600;
      color: var(--theme-dark);
      margin: 0;
      text-align: center;
      line-height: 1.3;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      min-height: 31px; /* Approx height for 2 lines */
  }
  
  /* Subcategories specific styles */
  .subcategories-slider .food-categories {
      /* Optional: Add visual distinction for subcategory cards */
       border-left: 3px solid var(--theme-primary);
  }
  
  /* Swiper overrides */
  .categories-style .swiper-slide {
      height: auto;
      width: 160px !important; /* Fixed width for consistent sizing */
      padding: 5px;
  }
  .categories-style .swiper-wrapper {
      align-items: stretch; /* Ensure slides stretch to container height if needed */
  }
  
  
  /* Search Section */
  .search-section {
      position: sticky;
      top: 70px; /* Adjust based on header */
      z-index: 10; /* Above filter bar, below header */
      background-color: rgba(255, 255, 255, 0.95);
      padding: 10px 0;
      margin-bottom: 20px;
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      transition: all 0.3s;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Subtle shadow */
  }
  .search-section form { margin-bottom: 0; } /* Remove default form margin */
  
  .search-form-control { /* Input field */
      height: 46px; /* Adjust height */
      border-radius: 23px !important; /* Fully rounded */
      padding-left: 20px;
      padding-right: 50px; /* Space for button */
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
      border: 1px solid #ced4da;
      font-size: 15px; /* Adjust font size */
  }
  .search-form-control:focus {
      border-color: var(--theme-primary);
      box-shadow: 0 0 0 0.2rem rgba(var(--theme-primary-rgb), 0.25);
  }
  .search-section .input-group { position: relative; }
  .search-section .btn { /* Search button */
      position: absolute;
      right: 5px;
      top: 5px;
      bottom: 5px;
      z-index: 4;
      width: 40px; /* Button width */
      height: 36px; /* Button height */
      border-radius: 18px !important; /* Rounded */
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px; /* Icon size */
  }
  
  /* Results count */
  .results-count {
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      color: var(--theme-charcoal);
      padding: 0 5px; /* Add slight horizontal padding */
  }
  
  /* Mobile scroll to top button */
  .scroll-top-btn {
      display: none; /* Hidden by default, shown via JS/CSS */
      position: fixed;
      bottom: 150px; /* Further up to avoid FAB */
      right: 20px;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.9); /* Slightly transparent */
      color: var(--theme-primary);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
      z-index: 990; /* Below sidebar/modals */
      align-items: center;
      justify-content: center;
      font-size: 22px;
      cursor: pointer;
      border: 1px solid rgba(0, 0, 0, 0.05);
      transition: opacity 0.3s, transform 0.3s;
      opacity: 0;
      pointer-events: none; /* Initially not interactive */
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
  }
  
  .scroll-top-btn.visible {
      opacity: 1;
      pointer-events: auto; /* Enable interaction when visible */
      display: flex; /* Ensure it's displayed when visible class is added */
  }
  
  .scroll-top-btn:active {
      transform: scale(0.95);
  }
  
  /* Skeleton loader */
  .skeleton-loader { display: none; }
  .skeleton-loader.active { display: block; }
  
  .skeleton-item {
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); /* Adjusted colors */
      background-size: 200% 100%;
      animation: loading 1.5s infinite linear; /* Added linear */
      border-radius: 6px; /* More rounded */
  }
  @keyframes loading {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
  }
  
  .skeleton-card {
      background-color: #fff;
      border-radius: 12px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); /* Lighter shadow */
      overflow: hidden;
      margin-bottom: 20px;
      height: 100%;
  }
  .skeleton-card .skeleton-item:not(:first-child) {
      height: 14px; /* Default height for text lines */
      margin-bottom: 8px;
  }
  .skeleton-card .skeleton-item:last-child { margin-bottom: 0; }
  
  
  /* --- Sidebar Specific Styles --- */
  .sidebar-filter {
      height: 100%;
      border-radius: 0;
      padding: 20px;
      position: relative;
      overflow-y: auto;
      background-color: transparent; /* Changed from white to transparent */
  }
  .sidebar-header { /* Mobile header */
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 15px;
      margin-bottom: 15px;
      border-bottom: 1px solid #eee;
  }
  .sidebar-header h4 { margin-bottom: 0; font-size: 18px; font-weight: 600; }
  .sidebar-close { font-size: 24px; cursor: pointer; color: #777; line-height: 1; }
  
  .sidebar-filter .sidebar-section {
      margin-bottom: 20px;
      padding-bottom: 18px; /* Increased padding */
      border-bottom: 1px solid #eee;
  }
  .sidebar-filter .sidebar-section:last-of-type { /* Last section before footer */
      border-bottom: none;
      padding-bottom: 0; /* Remove padding if no border needed */
      margin-bottom: 0; /* Remove margin if footer handles spacing */
  }
  .sidebar-filter .section-title {
      font-size: 15px; /* Slightly smaller */
      font-weight: 600;
      margin-bottom: 12px;
      color: var(--theme-dark);
  }
  .sidebar-filter .form-check-label { font-size: 14px; cursor: pointer; }
  .sidebar-filter .form-check-input { cursor: pointer; }
  .sidebar-filter .form-switch .form-check-label { padding-left: 0.5em; } /* Align switch label */
  
  .sidebar-filter .star-icon i {
      color: var(--theme-yellow);
      font-size: 16px;
      vertical-align: middle; /* Align stars better */
  }
  .sidebar-filter .rating-filter .form-check-label { display: flex; align-items: center; } /* Align stars and text */
  .sidebar-filter .rating-filter .ms-1 { margin-left: 6px !important; } /* Space after stars */
  
  
  .sidebar-filter .subcategory-list {
      max-height: 200px; /* Limit height */
      overflow-y: auto;
      padding-right: 5px; /* Space for scrollbar */
      margin-top: 10px;
  }
  .sidebar-filter .category-wrapper { margin-bottom: 8px; } /* Space between categories */
  .sidebar-filter .category-item {
      cursor: pointer;
      padding: 8px 5px; /* Add slight padding */
      font-weight: 500;
      border-radius: 4px;
      transition: background-color 0.2s;
  }
  .sidebar-filter .category-item:hover { background-color: #f8f9fa; }
  .sidebar-filter .category-item i.text-primary { font-size: 16px; } /* Icon size */
  
  
  .sidebar-filter .form-range { cursor: pointer; }
  .sidebar-filter .price-range label { font-size: 13px; } /* Smaller labels */
  .sidebar-filter .price-range strong { color: var(--theme-primary); }
  
  .sidebar-filter .sidebar-footer {
      position: sticky;
      bottom: 0;
      background-color: transparent; /* Changed from white to transparent */
      padding: 15px 0 10px; /* Adjust padding */
      margin-top: 20px; /* Space above footer */
      border-top: 1px solid #eee;
      z-index: 1; /* Ensure footer stays above scrolled content */
  }
  .sidebar-filter .sidebar-footer .btn { font-size: 14px; }
  
  /* Sidebar Overlay for Mobile */
  .sidebar-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1040; /* Below sidebar (1050), above content */
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      cursor: pointer;
      opacity: 0;
      transition: opacity 0.3s ease;
  }
  .sidebar-overlay.active { display: block; opacity: 1; }
  
  
  /* Responsive styles */
  @media (max-width: 991px) { /* Apply styles for screens smaller than lg */
      .filter-container {
          flex-direction: column;
      }
  
      .sidebar-container {
          width: 85%; /* Adjust width as needed */
          max-width: 320px; /* Max width */
          display: block;
          position: fixed;
          top: 0;
          left: 0;
          height: 100%; /* Full height */
          z-index: 1050; /* Ensure sidebar is on top */
          overflow-y: auto; /* Enable scrolling within sidebar */
          background-color: white;
          transform: translateX(-100%);
          transition: transform 0.3s ease;
          box-shadow: 2px 0 10px rgba(0,0,0,0.1);
      }
      .sidebar-container.active {
          transform: translateX(0); /* Slide in */
      }
  
      .filter-toggle { display: block; } /* Show top filter button */
      .mobile-fab { display: flex; } /* Show Floating Action Button */
      .scroll-top-btn { display: flex; } /* Show scroll-to-top, visibility controlled by JS */
  
      /* Hide desktop sidebar placeholder */
      .sidebar-container:not(.active) { display: none; }
       /* Ensure desktop view hides mobile toggles */
      .d-lg-none { display: flex !important; } /* Ensure sidebar header/close are visible */
  
      .filters-bar { top: 110px; /* Adjust sticky position */ }
      .results-container { padding-bottom: 70px; /* Space for FAB */ }
  
      .branch-image-container, .item-img { height: 180px; } /* Slightly smaller images */
  }
  
  @media (min-width: 992px) { /* Styles for lg screens and up */
      .sidebar-header.d-block.d-lg-none { display: none !important; } /* Hide mobile header */
      .sidebar-search.d-block.d-lg-none { display: none !important; } /* Hide mobile search */
      .sidebar-container {
          position: sticky; /* Make sidebar sticky on desktop */
          top: 140px; /* Adjust based on header + search + filter bar */
          height: calc(100vh - 160px); /* Adjust height calculation */
          overflow-y: auto;
          transform: none !important; /* Override mobile transform */
          box-shadow: none; /* Remove mobile shadow */
          border: none; /* Remove border */
          border-radius: 8px;
          padding: 15px; /* Add padding */
      }
      .sidebar-filter { padding: 0; } /* Remove inner padding if container has padding */
      .sidebar-footer {
          position: sticky; bottom: 0; /* Make footer sticky within sidebar */
          padding: 15px 0 0; /* Adjust padding */
          background-color: transparent; /* Ensure transparency */
      }
  }
  
  
  @media (max-width: 768px) { /* md and smaller */
      .search-section { top: 60px; } /* Adjust sticky search */
      .filter-toggle { top: 60px; } /* Match search */
      .filters-bar { top: 100px; /* Adjust filter bar sticky */ }
  
      /* Single column layout for cards */
      .results-container .col-md-6.col-12 {
          flex: 0 0 100%;
          max-width: 100%;
      }
  
      .item-card, .branch-card { margin-bottom: 15px; }
      .item-content, .branch-details { padding: 12px; }
      .workshop-name, .item-title { font-size: 16px; }
      .location, .item-category, .item-description, .service-list p { font-size: 12px; }
      .item-price { font-size: 16px; }
      .item-duration, .item-branches { font-size: 11px; }
      .action-btn { font-size: 12px; height: 34px; }
      .action-btn i { font-size: 14px; }
  
      /* Adjust badges for smaller cards */
      .verified-badge, .home-service-badge { font-size: 10px; padding: 2px 6px; gap: 3px; }
      .verified-badge i, .home-service-badge i { font-size: 11px; }
  
      .results-container { padding-bottom: 80px !important; } /* Ensure space below cards */
  }
  
  @media (max-width: 576px) { /* sm and smaller */
      .category-header h1 { font-size: 1.6rem; }
      .food-categories { height: 120px; padding: 10px; } /* Smaller category cards */
      .food-categories i { font-size: 1.8rem; }
      .food-categories h4 { font-size: 11px; min-height: 29px; }
  
      .search-form-control { height: 42px; font-size: 14px; border-radius: 21px !important; }
      .search-section .btn { height: 32px; width: 36px; border-radius: 16px !important; right: 4px; top: 5px; }
      .search-section { padding: 8px 0; top: 55px; } /* Adjust search sticky */
  
      .filter-toggle { top: 55px; padding: 8px 0; }
      .filter-toggle .btn { padding: 8px 15px; font-size: 14px; }
      .filters-bar { top: 95px; padding: 8px 12px; gap: 8px; } /* Adjust filter bar */
      .filter-tag { font-size: 11px; padding: 3px 7px 3px 8px; }
      .sort-options .form-select-sm { font-size: 12px; min-width: 140px; }
  
      .branch-image-container, .item-img { height: 160px; } /* Smaller images */
      .action-btn { height: 32px; font-size: 11px; gap: 4px; }
      .action-btn i { font-size: 13px; }
  
      .scroll-top-btn { bottom: 140px; width: 40px; height: 40px; font-size: 20px; } /* Adjust scroll top */
      .mobile-fab { bottom: 70px; } /* Adjust FAB */
  
      .sidebar-container { max-width: 280px; } /* Limit sidebar width */
  }
  
  @media (max-width: 380px) { /* Extra small screens */
      .branch-details, .item-content { padding: 10px; }
      .workshop-name, .item-title { font-size: 15px; }
      .branch-actions { padding: 8px 10px; gap: 6px; }
      .action-btn { height: 30px; font-size: 10px; }
      .action-btn i { font-size: 12px; }
      .branch-category-tag { padding: 1px 5px; font-size: 9px; }
      .item-price { font-size: 15px; }
      .location, .item-category { font-size: 11px; }
      .filter-tag { padding: 2px 6px 2px 7px; }
  }
  
  /* Ensure sidebar has focus styles */
  .sidebar-filter a:focus, .sidebar-filter button:focus, .sidebar-filter input:focus, .sidebar-filter label:focus-within {
      outline: 2px solid var(--theme-primary-light);
      outline-offset: 1px;
      border-radius: 2px;
  }
  .sidebar-filter input[type="checkbox"]:focus, .sidebar-filter input[type="radio"]:focus {
       box-shadow: 0 0 0 0.2rem rgba(var(--theme-primary-rgb), 0.25);
  }
  
  /* Add basic styles for the product row layout */
  .product-row-item {
      overflow: hidden; /* Prevent content overflow */
  }
  .product-row-img {
      width: 100%;
      height: 100%; /* Make image fill its column height */
      object-fit: cover; /* Cover the area, crop if needed */
  }
  .product-row-content .item-title {
      font-size: 0.9rem; /* Adjust title size */
      white-space: nowrap; /* Prevent title wrapping */
      overflow: hidden;
      text-overflow: ellipsis; /* Add ellipsis if title is too long */
  }
  /* Ensure consistent height for items in a row if needed */
  /* You might need more specific selectors if using nested rows */
  /* .row > [class^='col-'] {
      display: flex;
      align-items: stretch;
  }
  .product-row-item {
      height: 100%;
  } */
  
  /* Add basic styles for the product row layout */
  .product-row-item {
      display: flex;
      flex-direction: column;
      /* height: 280px; */ /* REMOVED fixed height */
      width: 100%;
      box-shadow: 0 2px 5px rgba(0,0,0,0.08);
      transition: transform 0.2s, box-shadow 0.2s;
      background-color: #fff; /* Added background */
      border-radius: 8px; /* Added border radius */
      padding: 15px; /* Added padding */
      margin-bottom: 15px; /* Ensure spacing */
  }
  
  .product-row-item:hover {
      transform: translateY(-3px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.12);
  }
  
  .product-img-container {
      height: 100px; /* Smaller height */
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      margin: 10px 0;
  }
  
  .product-img {
      max-height: 80px; /* Smaller image height */
      object-fit: contain;
      width: auto;
      max-width: 100%;
  }
  
  .item-title {
      height: 20px;
      font-size: 0.9rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 0;
  }
  
  .item-price {
      height: 25px;
      font-size: 1.1rem;
      text-align: center;
  }
  
  .item-branches {
      height: auto; /* Allow height to adjust */
      min-height: 20px; /* Keep minimum height */
      margin: 5px 0 15px 0;
  }
  
  /* Ensure consistent height for items in a row */
  .products-results > .row {
      display: flex;
      flex-wrap: wrap;
  }
  
  .products-results > .row > [class^='col-'] {
      display: flex;
      margin-bottom: 15px;
  }
  
  @media (max-width: 767px) {
      .product-row-item {
          /* height: 300px; */ /* REMOVED fixed height */
          padding: 10px !important; /* Smaller padding on mobile */
      }
      
      .product-header {
          height: 70px; /* More space for title on mobile */
      }
      
      .product-img-container {
          height: 80px;
      }
      
      .product-img {
          max-height: 60px;
      }
      
      .item-price {
          font-size: 1rem;
      }
      
      .action-btn {
          width: 100%;
      }
  }
  
  .product-header {
      height: 60px; /* Increased height for title and category combined */
      overflow: hidden;
      display: flex;
      flex-direction: column;
  }
  
  .product-img-container {
      height: 100px; /* Smaller height */
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      margin: 10px 0;
  }
  
  .product-img {
      max-height: 80px; /* Smaller image height */
      object-fit: contain;
      width: auto;
      max-width: 100%;
  }
  
  .item-title {
      height: auto;
      max-height: 40px; /* Allow two lines */
      font-size: 0.9rem;
      white-space: normal; /* Allow wrapping */
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 4px; /* Small gap before category */
      display: -webkit-box;
      -webkit-line-clamp: 2; /* Limit to two lines */
      -webkit-box-orient: vertical;
  }
  
  .item-category {
      height: 60px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 0.75rem;
  }
  
  .item-price {
      height: 25px;
      font-size: 1.1rem;
      text-align: center;
      margin: 5px 0;
  }
  
  .item-branches {
      height: auto; /* Allow height to adjust */
      min-height: 20px; /* Keep minimum height */
      margin: 5px 0 15px 0;
  }
  
  .button-container {
      height: 40px;
      margin-top: auto;
  }
  
  /* Style for the branch list within cards */
  .offering-branch-list {
      font-size: 0.8rem;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid #eee;
      max-height: 100px; /* Limit height */
      overflow-y: auto; /* Add scroll if needed */
  }
  
  .offering-branch-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 5px;
      padding: 3px 0;
  }
  
  .offering-branch-name {
      color: var(--theme-charcoal);
      flex-grow: 1;
      margin-right: 8px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  
  .offering-branch-item .btn-sm {
      font-size: 0.7rem;
      padding: 0.2rem 0.5rem;
      flex-shrink: 0; /* Prevent button shrinking */
  }
  
  /* Style for the branch list within cards (Used only for Services now) */
  .offering-branch-list {
      font-size: 0.8rem;
      /* margin-top: auto; */ /* REMOVED auto margin */
      margin-bottom: 0; /* REMOVED margin below list */
      padding-top: 0; /* Keep reduced padding */
      /* border-top: 1px solid #eee; */ /* Keep border removed */
      /* max-height: 120px; */ /* REMOVED max-height */
      /* overflow-y: auto; */ /* REMOVED overflow */
  }
  
  /* General style for the fallback message */
  .offering-branch-list-fallback {
      font-size: 0.8rem; /* Match list font-size */
      color: #6c757d; /* text-muted */
      margin-bottom: 0; /* REMOVED margin below */
      padding-top: 0; /* Keep reduced padding */
      border-top: none; /* REMOVED light separator */
  }
  
  /* ... other styles ... */
  
  /* Product Card Specific Adjustments - Image Top, Info Block Below */
  .product-row-item {
      display: flex; 
      flex-direction: column;
      width: 100%;
      box-shadow: 0 2px 5px rgba(0,0,0,0.08); /* Standard shadow */
      transition: transform 0.2s, box-shadow 0.2s;
      background-color: #fff; /* Standard background */
      border-radius: 8px;
      margin-bottom: 15px;
      position: relative; 
      overflow: hidden; 
      min-height: auto; 
      padding-top: 2px;
  }
  
  .product-img-container {
      height: 150px; /* Adjust height */
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      background-color: #f8f9fa; /* Light background for image area */
  }
  
  .product-img {
      max-height: 130px; /* Adjust image size */
      object-fit: contain;
      width: auto;
      max-width: 100%;
  }
  
  /* Category Style - Below Image */
  .product-row-item .item-category { 
      font-size: 0.75rem;
      color: var(--theme-charcoal); /* Default text color */
      opacity: 0.9;
      text-shadow: none; /* Remove shadow */
      white-space: normal; /* ALLOW wrapping */
      /* overflow: hidden; */ /* REMOVE */
      /* text-overflow: ellipsis; */ /* REMOVE */
      padding: 4px 15px 0 ; /* Padding top/horizontal */
      margin-bottom: 3px; /* Space below category */
      text-align: left;
      line-height: 1.4; /* Adjust line height for wrapping */
      min-height: 1.4rem; /* Reserve space for at least one line */
  }
  
  /* Info Footer Block - Below Category */
  .product-info-footer {
      background-color: transparent; /* No background */
      padding: 0 15px 15px; /* Bottom/horizontal padding */
      /* margin-top: auto; */ /* REMOVED - Flow normally */
      color: var(--theme-dark); /* Default text color */
      text-shadow: none; /* Remove shadow */
      display: flex;
      flex-direction: column;
      flex-grow: 1; /* Allow footer to push button down */
  }
  
  .product-info-footer .item-title {
      font-size: 0.9rem;
      font-weight: 600;
      margin-bottom: 8px; /* Space below name */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: var(--theme-dark); 
      min-height: 15px;
  }
  
  .product-info-footer .item-price {
      font-size: 1.1rem;
      font-weight: 600;
      margin-bottom: 10px;
      color: var(--theme-primary); /* Price color */
      text-align: left;
  }
  
  .product-info-footer .button-container {
      margin-top: auto; /* Push button to bottom of footer */
      text-align: center;
      padding-top: 5px; 
  }
  
  /* Revert Button style */
  .product-info-footer .btn {
      background-color: var(--theme-primary); 
      color: #fff; 
      border: none;
  }
  .product-info-footer .btn:hover {
      background-color: var(--theme-primary-dark);
      color: #fff;
  }
  
  .food-categories img.categories-img {
      width: 50px;
      height: 50px;
      object-fit: contain;
      margin-bottom: 10px;
  }
  
  .food-categories:hover {
      transform: translateY(-3px);
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
  }
  
  .food-categories {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 15px 10px;
      border-radius: 10px;
      background-color: #fff; /* Keep white background for cards for contrast */
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      text-decoration: none;
      height: 130px; /* Fixed height for consistency */
      width: 100%;
  }
  
  .food-categories h4 {
      font-size: 0.9rem;
      color: var(--theme-dark);
      margin: 0;
      line-height: 1.2;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      width: 100%;
      height: 2.4em; /* Fixed height for 2 lines of text */
  }
  
  .food-categories i {
      font-size: 2rem;
      margin-bottom: 10px;
      color: var(--theme-primary);
  }
  
  .swiper-slide {
      height: auto;
  }
  
  .categories-style .swiper-slide {
      height: auto;
      padding: 5px;
  }
  
  /* Category page specific styles */
  /* Main category card styles */
  .swiper-container {
      width: 100%;
      padding: 1rem 0;
  }
  
  /* Custom styles for swiper buttons */
  .categories-style .swiper-button-next,
  .categories-style .swiper-button-prev {
      color: var(--theme-primary);
      background-color: white;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
      opacity: 0.8;
  }
  
  .categories-style .swiper-button-next:after,
  .categories-style .swiper-button-prev:after {
      font-size: 16px;
      font-weight: bold;
  }
  
  .categories-style .swiper-button-next {
      right: 5px;
  }
  
  .categories-style .swiper-button-prev {
      left: 5px;
  }
  
  .categories-style .swiper-button-next:hover,
  .categories-style .swiper-button-prev:hover {
      opacity: 1;
  }
  
  /* Drag indicator styles */
  .swiper-drag-indicator {
      position: absolute;
      bottom: -15px;
      left: 0;
      right: 0;
      text-align: center;
      color: var(--theme-charcoal);
      font-size: 12px;
      opacity: 0.6;
      pointer-events: none;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 5px;
  }
  
  .swiper-drag-indicator .drag-left,
  .swiper-drag-indicator .drag-right {
      font-size: 16px;
      animation: slide-hint 1.5s infinite;
  }
  
  .swiper-drag-indicator .drag-left {
      animation-name: slide-left;
  }
  
  .swiper-drag-indicator .drag-right {
      animation-name: slide-right;
  }
  
  @keyframes slide-left {
      0%, 100% { transform: translateX(0); }
      50% { transform: translateX(-3px); }
  }
  
  @keyframes slide-right {
      0%, 100% { transform: translateX(0); }
      50% { transform: translateX(3px); }
  }
  
  /* Hide drag indicator on mobile */
  @media (max-width: 576px) {
      .swiper-drag-indicator {
          display: none;
      }
  }
  
  /* Bubble buttons styling */
  .branch-bubble-buttons {
      display: flex;
      position: relative;
      margin-bottom: 10px;
      gap: 8px;
      justify-content: center;
      z-index: 10;
  }
  
  .bubble-btn {
      width: auto;
      height: 40px;
      border-radius: 20px;
      padding: 0 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
      transition: all 0.2s ease;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      flex: 1;
  }
  
  .bubble-btn i {
      margin-right: 5px;
  }
  
  .travel-time-btn {
      background-color: #4CAF50;
      color: white;
  }
  
  .directions-btn {
      background-color: #2196F3;
      color: white;
  }
  
  .bubble-btn:hover {
      transform: scale(1.1);
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  }
  
  /* Travel time popup styling */
  .travel-time-popup {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.3);
      z-index: 1000;
      max-width: 90%;
      width: 350px;
      text-align: center;
  }
  
  .travel-time-popup h4 {
      margin-top: 0;
      color: #333;
  }
  
  .travel-time-popup .time {
      font-size: 24px;
      font-weight: bold;
      margin: 15px 0;
      color: #4CAF50;
  }
  
  .travel-time-popup .close-btn {
      background: #f44336;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
  }
  
  .travel-time-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.5);
      z-index: 999;
  }
  
  .category-card {
      position: relative;
      text-align: center;
      cursor: pointer;
      height: 100px;
      border-radius: 8px;
      overflow: hidden;
      transition: transform 0.2s;
      background-color: var(--bs-secondary-bg);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 0 4px;
  }
  
  /* Add this to the CSS section */
  .coordinates-approximate-badge {
      position: absolute;
      top: -5px;
      right: -5px;
      background-color: #FFA500;
      color: white;
      border-radius: 50%;
      width: 16px;
      height: 16px;
      font-size: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  }
  
  /* Add this to your CSS styles section */
  .bubble-btn.travel-time-btn.loading {
      background-color: #f1f3f5;
      color: #6c757d;
      position: relative;
      overflow: hidden;
  }
  
  .bubble-btn.travel-time-btn.loading::after {
      content: '';
      position: absolute;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
      animation: loading-shimmer 1.5s infinite;
  }
  
  @keyframes loading-shimmer {
      0% { left: -100%; }
      100% { left: 100%; }
  }
  
  /* Add this to your existing styles */
  .selected-category, .selected-subcategory {
      border: 2px solid var(--theme-primary) !important;
      box-shadow: 0 5px 15px rgba(var(--theme-primary-rgb), 0.3) !important;
      position: relative;
      transform: translateY(-5px);
  }
  
  .selected-category::after, .selected-subcategory::after {
      content: '\2713'; /* Checkmark symbol */
      position: absolute;
      top: -10px;
      right: -10px;
      background-color: var(--theme-primary);
      color: white;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: bold;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  }
  
  .all-subcategories-slider .food-categories {
      border-left: 3px solid var(--theme-primary);
      height: 130px;
  }
  
  /* Mobile Top Navigation Styles */
  .mobile-top-nav {
    display: none;
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: white;
    padding: 12px 15px 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  }
  
  .mobile-location-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }
  
  .mobile-location-header .back-button {
    margin-right: 8px;
    font-size: 22px;
    color: #333;
    line-height: 1;
  }
  
  .mobile-location-header .location-name {
    font-size: 15px;
    font-weight: 600;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .mobile-search-bar {
    position: relative;
    margin-bottom: 15px;
  }
  
  .mobile-search-bar input {
    width: 100%;
    padding: 10px 40px;
    border-radius: 50px;
    border: none;
    background-color: #f5f5f5;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  }
  
  .mobile-search-bar .search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #777;
    font-size: 16px;
  }
  
  .mobile-filter-options {
    display: flex;
    overflow-x: auto;
    margin: 0 -15px;
    padding: 0 15px 15px;
    gap: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  .mobile-filter-options::-webkit-scrollbar {
    display: none;
  }
  
  .filter-option {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    background-color: #f5f5f5;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    color: #333;
    border: 1px solid #eee;
  }
  
  .filter-option i {
    margin-right: 4px;
  }
  
  .filter-option.active {
    background-color: #0078ff;
    color: white;
    border-color: #0078ff;
  }
  
  .mobile-category-icons {
    display: flex;
    overflow-x: auto;
    padding: 15px 0;
    gap: 20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 5px 0 15px;
  }
  
  .mobile-category-icons::-webkit-scrollbar {
    display: none;
  }
  
  .category-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .category-icon-item .icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #effbf3;
    border-radius: 50%;
    margin-bottom: 5px;
    transition: transform 0.2s;
  }
  
  .category-icon-item:nth-child(2) .icon {
    background-color: #fef6e9;
  }
  
  .category-icon-item:nth-child(3) .icon {
    background-color: #fff1ee;
  }
  
  .category-icon-item:nth-child(4) .icon {
    background-color: #f1f6ff;
  }
  
  .category-icon-item .icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
  }
  
  .category-icon-item .name {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
  }
  
  .category-icon-item.active .icon {
    transform: scale(1.1);
  }
  
  .mobile-promo-banner {
    margin: 15px 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  }
  
  /* Update the mobile-specific styles */
  @media (max-width: 991px) {
    .mobile-top-nav {
      display: block;
    }
    
    .initial-loading {
      top: 180px; /* Account for new header */
    }
    
    /* Hide certain desktop-only elements on mobile */
    .category-header,
    .categories-section,
    .filter-toggle,
    .filter-container .sidebar-container:not(.active) {
      display: none;
    }
    
    .filter-container {
      margin-top: 10px;
    }
    
    .results-container {
      margin-top: 0;
    }
    
    .filters-bar {
      top: 180px; /* Adjust below the new header */
    }
    
    /* Adjust the sidebar to be higher in z-index */
    .sidebar-container.active {
      z-index: 1080;
    }
    
    .sidebar-overlay.active {
      z-index: 1070;
    }
  }
  
  .view-type-group {
      border-radius: 12px;
      overflow: hidden;
  }
  
  .view-type-group .btn {
      border-radius: 0;
      font-weight: 600;
      font-size: 15px;
      transition: all 0.3s ease;
  }
  
  .view-type-group .btn:first-child {
      border-top-left-radius: 12px;
      border-bottom-left-radius: 12px;
  }
  
  .view-type-group .btn:last-child {
      border-top-right-radius: 12px;
      border-bottom-right-radius: 12px;
  }
  
  .view-type-group .btn-primary {
      transform: scale(1.05);
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      z-index: 1;
  }
  
  @media (max-width: 576px) {
      .view-type-group .btn {
          padding: 0.4rem 0.75rem !important;
          font-size: 13px;
      }
      
      .view-type-group .btn i {
          margin-right: 0.25rem !important;
      }
  }
  
  /* Custom wider container styles */
  .container {
      max-width: 1600px !important;
      width: 95% !important;
  }
  
  @media (min-width: 1400px) {
      .container {
          max-width: 1800px !important;
      }
  }
  
  @media (min-width: 1800px) {
      .container {
          max-width: 2000px !important;
      }
  }
  
  /* Make cards more compact to fit more per row */
  @media (min-width: 1200px) {
      .results-container .row > [class*='col-'] {
          padding-left: 10px !important;
          padding-right: 10px !important;
      }
  }
  
  /* Adjust sidebar width for wider layout */
  @media (min-width: 992px) {
      .sidebar-container {
          width: 300px !important;
      }
      
      .filter-container {
          gap: 25px !important;
      }
      
      .results-container {
          flex-grow: 1 !important;
      }
  }
  
  /* Allow more slides in swipers */
  .categories-style .swiper-slide {
      height: auto;
      width: 160px !important; /* Fixed width for consistent sizing */
      padding: 5px;
  }
  
  @media (min-width: 1600px) {
      .swiper-container .swiper-wrapper {
          justify-content: center;
      }
      .swiper .swiper-wrapper {
          justify-content: center;
      }
  }
  
  /* Update breakpoints for showing more items per row */
  @media (min-width: 1400px) {
      .products-results .col-6.col-md-3 {
          flex: 0 0 20% !important;
          max-width: 20% !important;
      }
      
      /* Make service card text smaller in wider layouts */
      .services-results .item-card .item-title {
          font-size: 1rem;
      }
      
      .services-results .item-card .item-content {
          padding: 12px;
      }
      
      .services-results .item-card .item-description {
          max-height: 2.8em;
          overflow: hidden;
      }
  }
  
  @media (min-width: 1800px) {
      .products-results .col-6.col-md-3 {
          flex: 0 0 16.666% !important;
          max-width: 16.666% !important;
      }
  }
  
  .subcategories-slider .food-categories,
  .all-subcategories-slider .food-categories {
      height: 130px; /* Ensure consistent height */
  }
  
  .food-categories {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 15px 10px;
      border-radius: 10px;
      background-color: #fff;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      text-decoration: none;
      height: 130px; /* Fixed height */
      width: 100%;
  }
  
  @media (max-width: 576px) {
      .categories-style .swiper-slide {
          width: 130px !important; /* Smaller fixed width on mobile */
    }
  }