/* ================== Product Page Layout ================== */
.product-page {
  display: flex;           /* Use flex layout for sidebar and main content */
  gap: 2rem;               /* Space between sidebar and main content */
  padding: 1rem;           /* Outer padding for the entire product page */
}

/* ================== Sidebar Styles ================== */
.sidebar {
  flex: 0 0 240px;         /* Sidebar has fixed width of 240px, doesn't grow or shrink */
  position: sticky;        /* Make sidebar sticky */
  top: 90px;               /* Stick below the fixed header (70px navbar + 20px buffer) */
  max-height: calc(100vh - 110px); /* Limit height to viewport minus header offset */
  overflow-y: auto;        /* Add scroll if content is too tall */
  z-index: 100;            /* Ensure it stays above main content when needed */
  scroll-behavior: smooth; /* Smooth scrolling within sidebar */
  transition: box-shadow 0.3s ease, transform 0.3s ease; /* Smooth transitions */
}

/* Add subtle shadow and slight elevation when sidebar is stuck */
.sidebar.is-stuck {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Elevated shadow */
  transform: translateY(-2px); /* Slight lift effect */
}

/* Custom scrollbar for sidebar */
.sidebar::-webkit-scrollbar {
  width: 6px;              /* Thin scrollbar */
}

.sidebar::-webkit-scrollbar-track {
  background: #f1f1f1;     /* Light track */
  border-radius: 3px;      /* Rounded track */
}

.sidebar::-webkit-scrollbar-thumb {
  background: #c1c1c1;     /* Light gray thumb */
  border-radius: 3px;      /* Rounded thumb */
  transition: background 0.3s ease; /* Smooth color transition */
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background: #a67c52;     /* Brand color on hover */
}

/* ================== Enhanced Filter Section Styles ================== */
.filter-section {
  background: #f9f9f9;     /* Light background for filter section */
  border: 1px solid #ddd;  /* Light border */
  margin-bottom: 1rem;     /* Space between filter sections */
  transition: all 0.3s ease; /* Smooth transition for interactions */
  border-radius: 6px;      /* Rounded corners */
  overflow: hidden;        /* Ensure rounded corners work */
}

.filter-section:hover {
  border-color: #a67c52;   /* Brand color border on hover */
  box-shadow: 0 2px 8px rgba(166, 124, 82, 0.1); /* Subtle shadow */
}

.filter-section.active {
  border-color: #a67c52;   /* Brand color border when active */
  background: #fff;        /* White background when active */
}

.filter-title {
  width: 100%;             /* Full width for clickable title */
  padding: .75rem 1rem;    /* Vertical and horizontal padding */
  background: none;        /* No background */
  border: none;            /* No border */
  font-weight: bold;       /* Bold title text */
  text-align: left;        /* Left aligned text */
  cursor: pointer;         /* Cursor changes to pointer on hover */
  position: relative;      /* Allow positioning of child elements */
  transition: all 0.2s ease; /* Smooth transitions */
  letter-spacing: 0.5px;   /* Slight letter spacing */
}

.filter-title:hover {
  background-color: rgba(166, 124, 82, 0.05); /* Light brand color background */
  color: #a67c52;          /* Brand color text */
}

.filter-title .toggle-icon {
  position: absolute;      /* Absolutely position the toggle icon */
  right: 1rem;             /* Position it 1rem from the right edge */
  transition: transform 0.3s ease; /* Smooth rotation */
  font-size: 1.2em;        /* Slightly larger icon */
}

.filter-section.active .filter-title .toggle-icon {
  transform: rotate(90deg); /* Rotate icon when section is active */
}

.filter-list {
  list-style: none;
  margin: 0;
  padding: .5rem 1rem;
  overflow: hidden;
  /* use ease-out and a slightly longer duration */
  transition: max-height 0.3s ease-out, padding 0.3s ease-out;
  /* start "open" if you don't add .collapsed immediately—otherwise you can default to collapsed */
  max-height: 1000px;
}

.filter-list.collapsed {
  max-height: 0;
  /* collapse the vertical padding too, for a smoother "slide up" */
  padding-top: 0;
  padding-bottom: 0;
}

.filter-list li {
  display: flex;           /* Align icon and label horizontally */
  align-items: center;     /* Vertically center icon and label */
  margin: .5rem 0;         /* Space above and below each filter option */
  cursor: pointer;         /* Pointer cursor on hover */
  padding: 0.5rem;         /* Add padding for better touch targets */
  border-radius: 4px;      /* Rounded corners */
  transition: background-color 0.2s ease; /* Smooth background transition */
}

.filter-list li:hover {
  background-color: #f0f0f0; /* Light background on hover */
}

.filter-list li.active {
  border-left: 3px solid #a67c52; /* Highlight active filter */
  padding-left: .5rem;            /* Indent active filter */
  background: #fff;               /* White background for active */
  font-weight: 600;               /* Slightly bolder font for active */
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Subtle shadow for active */
}

.filter-list img {
  width: 50px;             /* Fixed image width */
  height: 50px;            /* Fixed image height */
  object-fit: cover;       /* Crop image to fill area */
  margin-right: .5rem;     /* Space to right of image */
}

/* ================== Main Content Grid ================== */
.main-content {
  flex: 1;                 /* Main content fills remaining space */
  padding: 0 4rem 0 2rem;  /* Left and right padding (more on right) */
}

/* ================== Tag Bar Styles ================== */
.tag-bar {
  display: flex;           /* Arrange tags horizontally */
  justify-content: space-between; /* Space between filters and clear button */
  align-items: center;     /* Vertically center tags */
  gap: 1rem;               /* Space between tags */
  font-size: .85rem;       /* Slightly smaller font */
  margin-bottom: .5rem;    /* Space below the tag bar */
  min-height: 40px;        /* Ensure consistent height even when empty */
}

.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 1;                 /* Take up available space */
}

.tag-bar .tag {
  background: #a67c52;     /* Brand color background for tag */
  color: white;            /* White text */
  padding: .4rem .8rem;    /* Padding inside each tag */
  border-radius: 20px;     /* Rounded pill shape */
  display: inline-flex;    /* Inline and flex for icon/text */
  align-items: center;     /* Center tag content vertically */
  font-size: 0.8rem;       /* Slightly smaller font */
  animation: slideIn 0.3s ease; /* Slide in animation */
}

.tag-bar .tag .remove-filter {
  background: none;
  border: none;
  color: white;
  margin-left: 0.5rem;
  cursor: pointer;
  font-size: 1rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.tag-bar .tag .remove-filter:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.tag-bar .clear-all {
  background: none;        /* No background for clear-all button */
  border: 1px solid #a67c52; /* Border with brand color */
  color: #a67c52;          /* Brand color text */
  padding: 0.4rem 0.8rem;  /* Padding */
  border-radius: 4px;      /* Rounded corners */
  text-decoration: none;   /* No underline */
  cursor: pointer;         /* Pointer cursor on hover */
  transition: all 0.2s ease; /* Smooth transition */
  font-size: 0.8rem;       /* Match tag font size */
}

.tag-bar .clear-all:hover {
  background-color: #a67c52; /* Brand color background on hover */
  color: white;            /* White text on hover */
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ================== Product Info ================== */
.product-info {
  text-align: right;       /* Align info to right */
  font-size: .85rem;       /* Slightly smaller font */
  color: #333;             /* Dark gray text */
  margin-bottom: 1rem;     /* Space below info */
}

/* ================== Product Grid ================== */
.grid {
  display: grid;           /* Use grid layout for products */
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Responsive columns */
  gap: 5rem;               /* Large space between product cards */
  transition: all 0.3s ease; /* Smooth transitions for grid changes */
}

.product-item {
  position: relative;      /* Needed for overlay */
  text-align: center;      /* Center product name and image */
  transition: all 0.3s ease; /* Smooth transitions */
}

.product-item img {
  width: 100%;             /* Image fills the product card width */
}

.product-item .overlay {
  position: absolute;      /* Overlay sits above image */
  inset: 0;                /* Fill the entire product item */
  background: rgba(166,124,82,.9); /* Brown transparent overlay */
  color: #fff;             /* White overlay text */
  font-size: .7rem;        /* Small overlay text */
  text-transform: uppercase; /* Uppercase overlay text */
  padding: .4rem;          /* Padding for overlay content */
  opacity: 0;              /* Hidden by default */
  transition: opacity .2s; /* Smooth fade-in/out on hover */
}

.product-item:hover .overlay {
  opacity: 1;              /* Show overlay on hover */
}

.product-name {
  margin-top: .5rem;       /* Space above product name */
  font-size: .85rem;       /* Slightly smaller font */
  text-transform: uppercase; /* Uppercase product name */
  color: #333;             /* Dark gray color */
}

@media (max-width: 768px) {
  .product-page {
    flex-direction: column;
    gap: 1rem;
    padding: 0.5rem;
  }
  .sidebar {
    width: 100% !important;
    max-width: 100vw;
    flex: none;
    margin-bottom: 1rem;
    float: none;
    display: block;
    position: static !important;    /* Disable sticky on mobile */
    max-height: none !important;    /* Remove height restriction on mobile */
    overflow-y: visible !important; /* Remove scroll on mobile */
  }
  .filter-section {
    margin-bottom: 0.75rem;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  }
  .filter-title {
    padding: 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .filter-title:hover {
    background-color: rgba(166, 124, 82, 0.03);
  }
  .filter-title .toggle-icon {
    position: static;
    font-size: 1.2rem;
    color: #666;
  }
  .filter-list {
    padding: 0 0.5rem 0.5rem 0.5rem;
    max-height: 300px;
    overflow-y: auto;
  }
  .filter-list.collapsed {
    max-height: 0;
    padding: 0 0.5rem;
  }
  .filter-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    font-size: 0.95rem;
    white-space: normal;
    overflow-wrap: break-word;
    border-radius: 6px;
    margin: 0.25rem 0;
    background: #f8f8f8;
    border: 1px solid transparent;
    transition: all 0.2s ease;
  }
  .filter-list li:hover {
    background-color: #f0f0f0;
    border-color: #e0e0e0;
  }
  .filter-list li.active {
    background: #a67c52;
    color: white;
    border-color: #a67c52;
    font-weight: 500;
    padding-left: 0.75rem;
    box-shadow: 0 2px 4px rgba(166, 124, 82, 0.2);
  }
  .filter-list li.active:hover {
    background: #957049;
    border-color: #957049;
  }
  /* Color swatches for mobile */
  .filter-list li div[style*="border-radius: 50%"] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border: 2px solid #e0e0e0 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  }
  .filter-list li.active div[style*="border-radius: 50%"] {
    border: 2px solid white !important;
  }
  /* Icons for mobile */
  .filter-list li i {
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
  }
  .filter-list li.active i {
    color: white;
  }
  .filter-list img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
    margin-right: 0.5rem;
  }
  .main-content {
    width: 100%;
    padding: 0 0.5rem;
  }
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    column-gap: 0.75rem;
  }
  .product-item {
    width: 100%;
    max-width: 100%;
  }
  .product-item img {
    max-width: 100%;
    height: auto;
    width: 100%;
  }
  .product-name {
    font-size: 0.75rem;
    margin-top: 0.5rem;
    line-height: 1.2;
  }
  .tag-bar {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.5rem 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .active-filters {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    flex: 1;
  }
  .tag-bar .tag {
    white-space: nowrap;
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
  }
  .tag-bar .clear-all {
    white-space: nowrap;
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
    flex-shrink: 0;
  }
  .product-info {
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
    text-align: center;
  }
  .product-item .overlay {
    font-size: 0.6rem;
    padding: 0.3rem;
  }
}

.hero-title {
  color: #fff !important;
}

.filter-item {
  transition: all 0.2s ease;
}

.filter-item:hover {
  background-color: #f5f5f5;
  transform: translateX(2px);
}

/* ================== Product Animation ================== */
.product-fade-in {
  animation: productFadeIn 0.6s ease forwards;
}

@keyframes productFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Enhanced product grid transitions */
.product-link {
  transition: all 0.3s ease; /* Smooth transitions for product links */
}

.product-link:hover .product-item {
  transform: translateY(-5px); /* Lift effect on hover */
  box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Shadow on hover */
}

/* Loading state for products */
.products-loading {
  opacity: 0.6;
  pointer-events: none;
}

.products-loading .product-item {
  transform: scale(0.98);
}