body {
    margin: 0;
    font-family: 'Segoe UI', sans-serif;
    background-color: #e3e0e0;
    overflow-x: hidden;

  }
  
.main-header {
    border-bottom: 1px solid #ccc;
    font-size: 10px;
    background-color: #463f3a;

}

.top-nav {
    display: flex;
    justify-content: space-between;
    padding: 10px 40px;
    background-color: #463f3a;
    color: white;
    font-size: 8px;
}

.top-nav .left-links span {
    font-weight: bold;
    margin-right: 30px;
}

.top-nav .right-links a {
    margin-left: 20px;
    text-decoration: none;
    color: white;
}
.bottom-nav {
  display: flex;
  align-items: center;
  padding: 10px 40px;
  background-color: white;
  gap: 10px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.sidebar-logo {
  height: 40px;
  width: auto;
}

.godrej-fixed-logo {
  height: 36px;
  width: auto;
}

/* Prevent menu from shrinking */
.menu {
  display: flex;
  flex: 1;
  justify-content: right;
  flex-wrap: nowrap;
  overflow: hidden;
}

.menu a {
  margin: 0 10px;
  text-decoration: none;
  color: #463f3a;
  font-weight: 400;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Ensure dropdown is positioned correctly */
.dropdown {
  position: relative;
}

/* Dropdown menu content */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  top: 100%;
  left: 0;
  min-width: 160px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  z-index: 999;
  border-radius: 5px;
  overflow: hidden;
}

/* Styled dropdown links */
.dropdown-content a {
  text-decoration: none;
  color: #463f3a;
  font-weight: 400;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 10px 15px;
  font-size: 10px;
  display: block;
  transition: background 0.2s;
}

/* Hover effect */
.dropdown-content a:hover {
  background-color: #f3f3f3;
  color: #8a817c;
}

/* Show dropdown on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Prevent clipping of dropdown */
.menu, .bottom-nav {
  overflow: visible;
}

/* Optional: Ensure bottom-nav is above other elements */
.bottom-nav {
  position: relative;
  z-index: 10;
}

.bottom-nav {
  position: relative;
  z-index: 10;
  overflow: visible;
}

.search-icons {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.search-icons input {
  padding: 5px 10px;
  border: none;
  border-bottom: 1px solid #888;
  font-size: 14px;
  outline: none;
}

.search-icons button {
  background: none;
  border: none;
  cursor: pointer;
}

.search-icons button i {
  font-size: 18px;
  color: #8a817c;
}

.carousel-container {
    padding: 20px;
    max-width: 100%;
    overflow-x: hidden;
    color: #463f3a;
    margin-bottom: 0; /* or reduce it */
    padding-bottom: 0;
  }
  
  .carousel-container h2 {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  
  .carousel {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;           /* Firefox */
    -ms-overflow-style: none;        /* Internet Explorer 10+ */
  }
  .carousel::-webkit-scrollbar {
    display: none;                   /* Chrome, Safari, Edge */
  }
  
  .card {
    flex: 0 0 auto;
    width: 250px;
    background-color: #463f3a;
    border-radius: 12px;
    overflow: hidden;
    text-align: center;
    scroll-snap-align: start;
    font-size: 16px;
    color: #333;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    cursor: pointer;
    text-decoration: none;
  }
  
  .card:hover {
    transform: scale(1.03);
  }
  
  .card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
  }
  
  .card p {
    padding: 10px 15px;   /* Reduced vertical padding */
    margin: 0;            /* Remove default margins */
    font-weight: 600;
    font-size: 14px;      /* Slightly smaller text */
    background-color: #8a817c;
    color: #f3f3f3; /* Keep background same as card, or set to transparent */
  }

  .main-heading {
    font-family: 'Roboto', sans-serif;
    font-size: 30px;
    color: #393E46;    
    padding: 10px 20px;
    margin: 0 0 10px 0;
    letter-spacing: 1px;
    font-weight: bold;
  }


.banner { margin: 30px 0; }

.slider-container {
  display: flex;
  background-color: #E1EACD;
  align-items: center;
  gap: 10px;
  border-radius: var(--border-radius-md);
  overflow: auto hidden;
  scroll-snap-type: inline mandatory;
  overscroll-behavior-inline: contain;
}

.slider-item {
  position: relative;
  min-width: 100%;
  max-height: 450px;
  aspect-ratio: 1 / 1;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  scroll-snap-align: start;
}

.slider-item .banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right;
}

.banner-content {
    position: absolute;
    font-size: 50px;
    color: #393E46;
    bottom: 25px;
    left: 70px;
    right: 70px;
    padding: 20px 25px;
    border-radius: var(--border-radius-md);

  }
  
  
.banner-subtitle {
  color: var(--salmon-pink);
  font-size: var(--fs-7);
  font-weight: var(--weight-500);
  text-transform: capitalize;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.banner-title {
  color: var(--eerie-black);
  font-size: var(--fs-1);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 10px;
}

.banner-text { display: none; }

.banner-btn {
  background: var(--salmon-pink);
  color: var(--white);
  width: max-content;
  font-size: var(--fs-11);
  font-weight: var(--weight-600);
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--border-radius-sm);
  transition: var(--transition-timing);
}

.banner-btn:hover { background: var(--eerie-black); }
.furn-carousel-wrapper {
  width: 100%;
  padding: 10px 0;
  overflow-x: hidden; /* Keep outer container clean */
}

.furn-carousel-track {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 20px;
  padding-left: 10px;
  scrollbar-width: none; /* Firefox */
}

.furn-carousel-track::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.furn-carousel-track > a.furn-carousel-card {
  flex: 0 0 auto;
  width: 300px;
  height: 4250px;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 0 2px #e0e0e0;
  border: 1px solid #ddd;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}

.furn-carousel-card-link {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.furn-carousel-card {
  flex: 0 0 400px;
  height: 425px;
  width: 300px;
  background-color: #F5F5F5;
  border-radius: 8px;
  box-shadow: 0 0 0 2px #e0e0e0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  position: relative;
  text-decoration: none;
  overflow: hidden;
  border: 1px solid #ddd;
}

.furn-image-frame {
  width: 100%;
  height: 300px;
  padding: 6px;
  background-color: #F5F5F5;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.furn-card-image {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: cover;
  border-radius: 4px;
}


/* Badge: Summer Deal */
.furn-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #463f3a;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 3px;
  z-index: 2;
}

/* Discount badge: -15% */
.furn-discount-badge {
  position: absolute;
  top: 40px;
  left: 10px;
  background-color: rgb(89, 188, 89);
  color: white;
  font-size: 20px;
  padding: 3px 8px;
  font-weight: 500;
  border-radius: 3px;
  z-index: 2;
}

/* Bottom content container */
.furn-card-details {
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex-grow: 0;
}

/* Product name and price */
.furn-card-title-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 4px;
  color: #463f3a;
}

.furn-card-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: #463f3a;
}

.furn-price {
  font-size: 20px;
  font-weight: bold;
  color: #463f3a;
}

/* Subtitle (e.g., 'Floral Print Blouse') */
.furn-card-subtitle {
  font-size: 14px;
  color: #888;
  margin: 4px 0 12px;
  font-weight: 400;
}

/* ✅ Wrapper centers grid content */
.furn-grid-wrapper {
  width: 100%;
  padding: 20px 10px;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* ✅ Grid layout for product cards */
.furn-grid-track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  max-width: 1500px;
  width: 100%;
  box-sizing: border-box;
}

/* ✅ Each product card */
.furn-grid-card {
  background-color: #fff;
  border-radius: 8px;
  width: 100%;
  max-width: none;
  border: 1px solid #ddd;
  box-shadow: 0 0 0 2px #e0e0e0;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: auto;
  transition: transform 0.2s ease;
}
.furn-grid-card:hover {
  transform: translateY(-4px);
}

/* ✅ Image section */
.furn-grid-image-frame {
  position: relative;
  width: 100%;
  height: 250px;
  padding: 6px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.furn-grid-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

/* ✅ Badges */
.furn-grid-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #463f3a;
  color: white;
  font-size: 13px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 3px;
  z-index: 2;
}
.furn-grid-discount-badge {
  position: absolute;
  top: 35px;
  left: 10px;
  background-color: rgb(89, 188, 89);
  color: white;
  font-size: 14px;
  padding: 2px 6px;
  font-weight: 500;
  border-radius: 3px;
  z-index: 2;
}

/* ✅ Text details section */
.furn-grid-card-details {
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  flex-grow: 1;
}

/* ✅ Title and price section */
.furn-grid-card-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: #463f3a;
}
.furn-grid-card-subtitle {
  font-size: 13px;
  color: #888;
  font-weight: 400;
  margin: 0;
}
.furn-grid-card-title-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.furn-grid-price {
  font-size: 16px;
  font-weight: bold;
  color: #463f3a;
}

.map-wrapper {
    width: 90%;              /* Adjust width to create side space */
    margin: 0 auto;          /* Center the map horizontally */
  }
  
  .banner-map {
    display: block;
    width: 100%; 
    height: 380px; 
    border: 0;
  }

  .custom-footer {
    border-top: 1px solid rgb(156, 155, 155);
    background-color: white;
    color: #463f3a;
    padding: 40px 20px;
    font-family: Arial, sans-serif;
  }
  
  .footer-container {
    display: flex ;
    flex-wrap: nowrap ;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1200px;
    margin: auto;
    gap: 30px;
  }
  
  .footer-section {
    flex: 1;
    min-width: 180px;
  }
  
  .footer-section h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
    border-bottom: none;
    padding-bottom: 5px;
  }
  
  .footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .footer-section ul li {
    font-size: 14px;
    margin-bottom: 6px;
  }
  
  .footer-section ul li a {
    color: #463f3a;
    text-decoration: none;
    transition: color 0.3s;
  }
  
  .footer-section ul li a:hover {
    color: #6d4c41;
  }
  
  .footer-section.logos {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
  
  .footer-section.logos img:first-child {
    width: 100px;
    height: auto;
  }
  
  .footer-section.logos img:last-child {
    width: 120px;
    height: auto;
  }
  .carousel-container,
.carousel-container h2,
.furn-carousel-wrapper,
.furn-carousel-heading {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Optional: zero out gap below category buttons */
.category-section {
  margin-bottom: 10px !important;
  padding-bottom: 10px!important;
}

.product-images-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 40px;
    gap: 50px; /* increase for balance */
    flex-wrap: wrap;
    margin-left: 30 px;
  } 

.thumbnail-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;      /* Vertical scrolling */
  overflow-x: hidden;    /* Prevent horizontal overflow */
  width: 100px;          /* Adjust as needed */
  max-height: 100%;     /* Fixed vertical space */
  flex-shrink: 0;
  scrollbar-width: thin;
}


.image-preview-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
  max-width: 100%;
  width: 100%;
}
.thumbnail-column img {
  width: 80%;               /* Prevent horizontal overflow */
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: border 0.2s;
}

.thumbnail-column img.active {
  border-color: #333;
}

.thumbnail-column::-webkit-scrollbar {
  display: none;               /* Chrome, Safari */
}

.thumbnail-column {
  overflow-y: auto;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE 10+ */
}


.main-image-preview {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 100%; /* Increased to give more vertical space */
  width: 400px; /* Ensure it takes full available width */
  overflow: hidden; /* Keep overflow hidden to avoid unwanted scrollbars */
}

.main-image-preview img {
  width: 400px; /* Ensure the image scales to fit the container width */
  height: auto; /* Maintain aspect ratio */
  max-height: 100%; /* Ensure the image doesn't exceed container height */
  object-fit: contain; /* Keep this to maintain aspect ratio */
  border-radius: 8px;
}

.product-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 40px;
  gap: 40px;
  flex-wrap: wrap;
}

/* Already defined carousel styles remain untouched */

.product-details-container {
  flex: 1;
  max-width: 45%;
  padding: 20px;
  border-radius: 8px;
  color: #393E46;
  font-family: 'Segoe UI', sans-serif;
}

.product-details-container h1 {
  font-size: 28px;
  margin-bottom: 10px;
}

.product-details-container .subtitle {
  font-size: 18px;
  color: #666;
  margin-bottom: 15px;
}

.price-block {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 15px;
}

.price {
  font-size: 24px;
  font-weight: bold;
  color: #222;
}

.original-price {
  font-size: 18px;
  text-decoration: line-through;
  color: #888;
}

.discount {
  font-size: 16px;
  color: green;
  font-weight: 500;
}

.color-circle-img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid #ccc;
  margin: 2px;
  display: inline-block;
  transition: transform 0.2s ease;
}

.color-circle-img:hover {
  transform: scale(1.1);
  cursor: pointer;
}

.color-label {
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 15px;
  color: #2b2b2b;
}

/* ✅ Container for colors: horizontal row */
.color-options {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
  margin-bottom: 20px;
}

/* ✅ Each color item: circle + name in column */
.color-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 13px;
  color: #444;
  text-align: center;
}

/* ✅ Name below the color */
.color-name {
  margin-top: 4px;
  font-weight: 500;
  font-size: 13px;
}

/* ✅ Circle */
.color-circle-img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid #ccc;
  display: block;
  transition: transform 0.2s ease;
}
.color-circle-img:hover {
  transform: scale(1.1);
  cursor: pointer;
}
.category-page-layout {
  display: flex;
  gap: 30px;
  padding: 20px;
}

.filter-sidebar {
  flex: 0 0 250px;
  background-color: #e3e0e0;
  padding: 15px;
}

.filter-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.filter-group label {
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
  color: #463f3a;
}

.filter-group select {
  width: 100%;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.filter-form button {
  padding: 10px;
  background-color: #463f3a;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.filter-form button:hover {
  background-color: #463f3a;
}

.mobile-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  background-color: white;
  border-bottom: 1px solid #ddd;
  z-index: 1001;
}

.hamburger {
  font-size: 26px;
  background: none;
  border: none;
  cursor: pointer;
  color: black;
}

.mobile-logos {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo {
  height: 30px;
}

.search-bar {
  flex: 1;
  margin-left: 10px;
  padding: 6px 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

.mobile-sidebar {
  position: fixed;
  top: 0;
  left: -100%;
  width: 75%;
  height: 100vh;
  background-color: white;
  padding: 20px;
  transition: left 0.3s ease-in-out;
  z-index: 1002;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.mobile-sidebar.open {
  left: 0;
}

.mobile-sidebar a {
  text-decoration: none;
  font-size: 18px;
  color: black;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1000;
  display: none;
}

.overlay.show {
  display: block;
}

/* Only on mobile */
@media (max-width: 768px) {
  .mobile-header {
    display: flex;
  }

  .desktop-header,
  .bottom-nav {
    display: none !important;
  }
}

/* Hide hamburger and sidebar on desktop */
@media (min-width: 769px) {
  .hamburger,
  .mobile-sidebar,
  .overlay {
    display: none !important;
  }
}
/* Sidebar container */
.mobile-sidebar {
  position: fixed;
  top: 0;
  left: -100%;
  width: 75%;
  height: 100vh;
  background-color: white;
  padding: 20px;
  transition: left 0.3s ease-in-out;
  z-index: 1002;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Sidebar open state */
.mobile-sidebar.open {
  left: 0;
}

/* Logos section at the top */
.sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.sidebar-logo {
  height: 30px;
  max-width: 70px;
  object-fit: contain;
}

/* Optional section headers */
.mobile-sidebar h3 {
  font-size: 14px;
  color: #8a817c;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #e0e0e0;
}

/* Sidebar links */
.mobile-sidebar a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  color: #463f3a;
  padding: 10px 0;
  display: block;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.2s;
}

/* Hover effect for links */
.mobile-sidebar a:hover {
  background-color: #f9f9f9;
  color: #8a817c;
}

/* Grouping wrapper */
.sidebar-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Optional icons inside links */
.mobile-sidebar a i {
  margin-right: 8px;
  font-size: 14px;
  color: #8a817c;
  vertical-align: middle;
}

/* Divider between sections */
.sidebar-divider {
  height: 1px;
  background-color: #eaeaea;
  margin: 20px 0;
}

.sidebar-logo {
  height: 30px;
  object-fit: contain;
  max-width: 70px;
}

.godrej-fixed-logo {
  height: 50px;
  width: 150px; /* Fixed width in pixels */
  object-fit: contain;
  flex-shrink: 0;
}


@media only screen and (max-width: 768px) {
  .menu-toggle {
      display: block;
      position: absolute;
      top: 15px;
      left: 10px;
      z-index: 10000;
    }
  
    .bottom-nav,
    .main-content {
      transition: transform 0.3s ease;
    }
  
    .shift-right {
      transform: translateX(75%);
    }
  
      .carousel-container {
        padding: 10px;
        overflow-x: auto;
        color: #8a817c;
      }
    
      .carousel-container h2 {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 12px;
      }
    
      .carousel {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 10px;
      }
    
      .carousel::-webkit-scrollbar {
        display: none;
      }
    
      .card {
        flex: 0 0 auto;
        width: 170px;              /* ✅ fixed width on mobile */
        height: 235px;             /* ✅ fixed height */
        background-color: #8a817c;
        border-radius: 12px;
        overflow: hidden;
        text-align: center;
        scroll-snap-align: start;
        color: #f3f3f3;
        font-size: 14px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
        cursor: pointer;
      }
    
      .card:hover {
        transform: scale(1.03);
      }
    
      .card img {
        width: 100%;
        height: 200px;             /* ✅ taller image */
        object-fit: cover;
        display: block;
      }
    
      .card p {
        margin: 0;
        padding: 10px;
        font-weight: 600;
        font-size: 14px;
        background-color: #8a817c;
      }
  .main-heading {
  font-size: 20px;
  padding: 8px 15px;
  letter-spacing: 0.5px;
  margin: 0 0 8px 0;
  }
  .banner {
  margin: 20px 0;
  }

  .slider-container {
  gap: 8px;
  border-radius: var(--border-radius-md);
  }

  .slider-item {
  max-height: 250px;
  aspect-ratio: 4 / 3;
  border-radius: var(--border-radius-md);
  }

  .slider-item .banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right;
  }

  .banner-content {
  position: absolute;
  font-size: 24px;
  color: #393E46;
  bottom: 15px;
  left: 20px;
  right: 20px;
  padding: 10px 15px;
  border-radius: var(--border-radius-md);
  }

  .banner-subtitle {
  color: var(--salmon-pink);
  font-size: var(--fs-8); /* Smaller than desktop */
  font-weight: var(--weight-500);
  text-transform: capitalize;
  letter-spacing: 1px;
  margin-bottom: 6px;
  }

  .banner-title {
  color: var(--eerie-black);
  font-size: var(--fs-2); /* Slightly smaller */
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 6px;
  }

  .banner-btn {
  background: var(--salmon-pink);
  color: var(--white);
  width: max-content;
  font-size: var(--fs-11);
  font-weight: var(--weight-600);
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--border-radius-sm);
  transition: var(--transition-timing);
  }

  .banner-btn:hover {
  background: var(--eerie-black);
  }
  
  
  .product-wrapper {
      display: flex;
      flex-direction: column;
      width: 100vw;
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
  
    .product-images-container {
      width: 100vw;
      display: flex;
      flex-direction: column;
      padding: 0;
      margin: 0;
      gap: 0;
      box-sizing: border-box;
    }
  
    .main-image-preview {
      width: 100vw;
      height: 300px;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      background-color: #f9f9f9;
      box-sizing: border-box;
    }
  
    .main-image-preview img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 0;
    }
  
    .thumbnail-column {
      order: 2;
      width: 100vw;
      display: flex;
      flex-direction: row;
      overflow-x: auto;
      overflow-y: hidden;
      gap: 10px;
      padding: 10px 12px;
      box-sizing: border-box;
    }
  
    .thumbnail-column img {
      width: 80px;
      height: 80px;
      object-fit: cover;
      border-radius: 6px;
      border: 2px solid transparent;
      flex-shrink: 0;
    }
  
    .thumbnail-column img.active {
      border-color: #333;
    }
    .product-details-container {
      max-width: 100%;
      width: 90%;
      padding: 20px;
    }
  
    .product-images-container {
      max-width: 100%;
      margin: 0;
    }
  
    .product-details-container h1 {
      font-size: 24px;
      margin-bottom: 8px;
    }
  
    .product-details-container .subtitle {
      font-size: 16px;
      margin-bottom: 10px;
    }
  
    .price-block {
      display: flex;
      align-items: baseline;
      gap: 10px;
      margin-bottom: 12px;
    }
  
    .price {
      font-size: 20px;
      font-weight: bold;
    }
  
    .original-price {
      font-size: 16px;
      text-decoration: line-through;
      color: #888;
    }
  
    .discount {
      font-size: 14px;
      color: green;
    }
  
    .color-circle-img {
      width: 28px;
      height: 28px;
      margin-right: 5px;
    }
  /* ✅ CATEGORY PAGE LAYOUT (Mobile) */
.category-page-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 20px;
  box-sizing: border-box;
  align-items: stretch;
}

/* ✅ FILTER SIDEBAR WRAPPER */
.filter-sidebar {
  width: 100%;
  background-color: #e3e0e0;
  padding: 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* ✅ RESET SPACING ON ALL CHILDREN */
.filter-sidebar * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ✅ FILTER FORM STYLES */
.filter-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}

/* ✅ FILTER GROUP STYLING */
.filter-group {
  width: 100%;
}

.filter-group label {
  font-size: 14px;
  font-weight: bold;
  color: #463f3a;
  margin-bottom: 5px;
  display: block;
  text-transform: capitalize;
}

.filter-group select {
  font-size: 14px;
  width: 100%;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

/* ✅ SUBMIT BUTTON */
.filter-form button {
  font-size: 15px;
  padding: 10px;
  width: 100%;
  background-color: #463f3a;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.filter-form button:hover {
  background-color: #5c5047;
}

/* ✅ ENSURE NO EXTRA MARGIN ON LAST FILTER ELEMENT */
.filter-form > *:last-child {
  margin-bottom: 0;
}

/* ✅ OPTIONAL: Spacing between groups */
.filter-group:not(:last-child) {
  margin-bottom: 10px;
}
    /* MOBILE-FRIENDLY SCROLLABLE CARDS */
.furn-carousel-track {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 16px;
  padding-left: 10px;
  scrollbar-width: none;
}

.furn-carousel-track::-webkit-scrollbar {
  display: none;
}

/* Each card as scrollable flex item */
.furn-carousel-track > a.furn-carousel-card {
  flex: 0 0 auto;
  width: 45vw;              /* Responsive: ~2 cards per row */
  max-width: 220px;         /* Prevent too wide on tablets */
  height: 320px;            /* Slightly reduced height */
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 0 2px #e0e0e0;
  border: 1px solid #ddd;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}

/* If using div.card as wrapper inside link */
.furn-carousel-card {
  flex: 0 0 auto;
  width: 45vw;
  max-width: 220px;
  height: 320px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 0 2px #e0e0e0;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  text-decoration: none;
  overflow: hidden;
  border: 1px solid #ddd;
  position: relative;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Image container */
.furn-image-frame {
  width: 100%;
  height: 190px;
  padding: 6px;
  background-color: #fff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Product image */
.furn-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

/* Badges */
.furn-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #463f3a;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 3px;
  z-index: 2;
}

.furn-discount-badge {
  position: absolute;
  top: 34px;
  left: 10px;
  background-color: rgb(89, 188, 89);
  color: white;
  font-size: 14px;
  padding: 2px 6px;
  font-weight: 500;
  border-radius: 3px;
  z-index: 2;
}

/* Bottom section */
.furn-card-details {
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex-grow: 0;
}

/* Text section */
.furn-card-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  color: #463f3a;
}

.furn-card-title-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 4px;
  color: #463f3a;
}

.furn-price {
  font-size: 16px;
  font-weight: bold;
  color: #463f3a;
}

.furn-card-subtitle {
  font-size: 12px;
  color: #888;
  margin: 4px 0 10px;
  font-weight: 400;
}

.furn-grid-track {
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
    .custom-footer {
  padding: 20px 15px;
  background-color: white;
  font-family: Arial, sans-serif;
  font-size: 20px;
  overflow-x: hidden;
}

.map-wrapper {
  width: 95%;
  margin: 0 auto;
  padding: 0 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.banner-map {
  width: 100%;
  height: 83%;
  border: 0;
  display: block;
}

.map-description {
  font-size: 14px;
  color: #333;
  text-align: center;
  margin-top: 10px;
  line-height: 1.4;
  display: block;
  width: 100%;
  text-decoration: none;
}

.map-description p {
  margin: 0;
  font-weight: 500;
}

.footer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 100%;
}

.footer-section {
  width: 100%;
  text-align: center;
}

.footer-section h3 {
  font-size: 20px;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: none
}

.footer-section ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
}

.footer-section ul li {
  font-size: 17px;
  white-space: nowrap;
}

.footer-section ul li:not(:last-child)::after {
  content: "●";
  margin-left: 6px;
  color: #888;
}

.footer-section.logos {
  display: flex;
  flex-direction: row; /* side by side */
  justify-content: center; /* center horizontally */
  align-items: center; /* align vertically */
  gap: 12px;
  margin-bottom: 16px;
}

.footer-section.logos img {
  max-height: 50px;
  width: auto;
  object-fit: contain;
  max-width: 100px;
  width: auto;
}
.footer-section.logos img:last-child {
  min-width: 120px;
  height: auto;
}
  }
@media (max-width: 768px) {
.hamburger {
  display: block;
}
}

@media (min-width: 769px) {
.mobile-sidebar,
.overlay {
  display: none ;
}
}

/* Sidebar container */
.filter-sidebar {
  width: 100%;
  padding: 15px;
  background-color: #e3e0e0;
  box-sizing: border-box;
  border-radius: 8px;
}

/* Filter title */
.filter-sidebar h3 {
  font-size: 18px;
  margin-bottom: 10px;
  font-weight: 600;
  color: #463f3a;
}

/* Each filter group */
.filter-group {
  margin-bottom: 20px;
  width: 100%;
}

/* Filter label */
.filter-group label {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #333;
  display: block;
}

/* Dropdowns */
.filter-group select {
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 14px;
}/* === Wrapper block === *//* Slider wrapper track */
/* --- Slider container --- *//* --- Price filter block --- */
.price-filter-block {
  margin-bottom: 20px;
  padding: 10px 0;
  font-family: 'Segoe UI', sans-serif;
  color: #393e46;
}

/* --- Label --- */
.price-filter-label {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 10px;
  display: block;
  color: #453f3f;
}

/* --- Main slider container --- */
#price-slider {
  margin: 12px 0;
  height: 6px;
}

/* --- Track background (unselected) --- */
#price-slider .noUi-target {
  background: #e2e2e2;
  border-radius: 3px;
  border: none;
  box-shadow: none;
  height: 6px;
}

/* --- Active range (highlighted part) --- */
#price-slider .noUi-connect {
  background: #453f3f;
  height: 6px;
  border-radius: 3px;
}

/* --- Handle (thumbs) --- */
#price-slider .noUi-handle {
  width: 10px;
  height: 10px;
  background: #453f3f;
  border-radius: 2px;
  top: -3px;            /* Aligns with 6px track */
  border: none;
  cursor: pointer;
  box-shadow: none;
  transform: translateX(-100%);
}

/* Remove extra bars on handle */
#price-slider .noUi-handle:before,
#price-slider .noUi-handle:after {
  display: none;
}

/* --- Min/max price row --- */
.price-display-row {
  font-size: 15px;
  color: #222;
  display: flex;
  justify-content: flex-start;
  gap: 0px;
  margin-top: 6px;
}

.price-value {
  min-width: 40px;
  display: inline-block;
}

.contactlogo {
    height: 50px;
    width: auto;
}


.instock {
  font-size: 25px;
  color: green;
  font-weight: 500;
}


.outstock {
  font-size: 25px;
  color: rgb(155, 12, 12);
  font-weight: 500;
}


.deliverylocations {
  font-size: 18px;
  color: #4d3636;
}