:root {
  --bg:       #0d0d0d;
  --surface:  #141414;
  --card:     #1a1a1a;
  --border:   rgba(255,255,255,0.07);
  --card-glass: rgba(255,255,255,0.07);
  --accent:   #c8f04a;
  --accent2:  #4af0a0;
  --text:     #f0ede6;
  --muted:    #888;
  --serif:    'DM Serif Display', Georgia, serif;
  --sans:     'DM Sans', system-ui, sans-serif;
  --radius:   12px;
  --radius-lg:20px;
  --header-h: 70px;
  --transition: 0.35s cubic-bezier(0.4,0,0.2,1);
}

/*categories*/
.category_container {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 2rem;
    padding: 1rem;
    max-width: 1400px;
    margin: 0 auto;
  }
  
  .search-container {
    margin-bottom: 1rem;
  }
  
  #categorySearch {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.9rem;
    background: none;
  }
  
  .category-list {
    background: var(--card-glass);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    height: fit-content;
  }
  
  .category-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.2rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none; /* Prevents text selection when clicking */
    cursor: pointer;
  }
  
  .category-item * {
    /* Make sure all children elements inherit the pointer cursor */
    cursor: pointer;
    pointer-events: none; /* This ensures the click event always bubbles to the parent */
  }
  
  .category-item:hover {
    background: var(--muted);
  }
  
  .category-item.selected {
    background: rgba(200,240,74,0.06);
    border: 1px solid rgba(200,240,74,0.2) !important;
    color: var(--accent);
  }
  
  .category-item i {
    font-size: 1.2rem;
  }
  
  .category-details{
    padding: 1rem;
    background-color: var(--card);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  
  .subcategory-grid,
  .brand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
  }
  
  .divider-line {
    position: relative;
    height: 2px;
    width: 98%;  /* Adjust as needed */
    margin: 20px auto;  /* Centers the line and adds vertical space */
    background: linear-gradient(
      to right,
      transparent 0%,
      transparent 10%,
      #000 10%,
      #000 90%,
      transparent 90%,
      transparent 100%
    );
    overflow: hidden;
  }
  
  .divider-line::before,
  .divider-line::after {
    content: '';
    position: absolute;
    height: 100%;
    width: 15%;  /* Adjust to change the length of the dotted sections */
    top: 0;
    background-image: linear-gradient(
      to right,
      #000 50%,
      transparent 50%
    );
    background-size: 10px 100%;  /* Adjust to change dot size and spacing */
    background-repeat: repeat-x;
  }
  
  .divider-line::before {
    left: 0;
  }
  
  .divider-line::after {
    right: 0;
  }
  
  .subcategory-grid li,
  .brand-grid li {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: transform 0.2s ease;
  }
  
  .subcategory-grid li:hover,
  .brand-grid li:hover {
    transform: translateY(-2px);
  }
  
  
  .brand-list {
    transition: opacity 0.3s ease, height 0.3s ease;
  }
  
  .brand-list[style*="display: none"] {
    height: 0;
    margin: 0;
    padding: 0;
  }
  
  .see-all-item {
    grid-column: 1 / -1; /* Makes the item span full width */
    background: white !important;
    margin-bottom: 1rem;
  }
  
  .see-all-item a {
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 500;
    text-decoration: none;
  }
  
  .see-all-item:hover {
    opacity: 0.9;
  }
  
  .see-all-item i {
    font-size: 1.2rem;
  }
  
  /* Responsive adjustments */
  @media (max-width: 968px) {
    .category_container {
        grid-template-columns: 1fr;
    }
    
    .category-list {
        margin-bottom: 2rem;
    }
  }
  
  @media (max-width: 480px) {
    .category_container {
        padding: 0.5rem;
    }
    
    .subcategory-grid,
    .brand-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
  }
  .move-to-top {
    position: fixed;
    bottom: 80px;
    left: 20px;
    background-color: rgba(66, 37, 37, 0.7);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s, background-color 0.3s;
    z-index: 1001;
  }
  
  .move-to-top:hover {
    background-color: rgb(66, 37, 37);
  }
  
  .move-to-top.show {
    opacity: 1;
  }
  
  .arrow-up {
    border: solid white;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
  }