/* ============================================
   DIYA PHARMA — Products Page Styles
   ============================================ */

/* Products Hero Banner */
.products-hero {
  background: linear-gradient(135deg, var(--primary-900), var(--primary-700));
  padding: var(--space-10) 0;
  color: var(--white);
}

/* ---------- Division Tabs ---------- */
.divisions-scroll {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding: var(--space-2) 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.divisions-scroll::-webkit-scrollbar { display: none; }
.division-chip {
  flex-shrink: 0;
  padding: 8px 20px;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.5px;
  border: 2px solid var(--neutral-200);
  color: var(--neutral-600);
  background: var(--white);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
}
.division-chip:hover,
.division-chip.active {
  background: var(--primary-600);
  color: var(--white);
  border-color: var(--primary-600);
  transform: translateY(-2px);
  box-shadow: var(--shadow-green);
}

/* ---------- Search Bar ---------- */
.search-bar {
  position: relative;
  margin-bottom: var(--space-5);
}
.search-bar input {
  width: 100%;
  padding: 14px 20px 14px 48px;
  border: 2px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  transition: all var(--transition-fast);
}
.search-bar input:focus {
  border-color: var(--primary-400);
  box-shadow: 0 0 0 3px rgba(3,3,88,0.12);
  outline: none;
}
.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--neutral-400);
}

/* ---------- Products Toolbar ---------- */
.products-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--neutral-50);
  border-radius: var(--radius-lg);
  border: 1px solid var(--neutral-100);
}
.toolbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.filter-dropdowns {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.filter-select {
  padding: 8px 32px 8px 12px;
  border: 2px solid var(--neutral-200);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--neutral-700);
  background: var(--white);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%235A5A7A'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
  transition: all var(--transition-fast);
  min-width: 140px;
}
.filter-select:focus {
  border-color: var(--primary-400);
  outline: none;
  box-shadow: 0 0 0 3px rgba(3,3,88,0.10);
}
.products-count {
  font-size: var(--text-sm);
  color: var(--neutral-500);
}
.products-count strong {
  color: var(--neutral-800);
  font-weight: 700;
}
.products-sort {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.products-sort label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--neutral-600);
}
.sort-select {
  padding: 8px 32px 8px 12px;
  border: 2px solid var(--neutral-200);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  background: var(--white);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%235A5A7A'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}
.wholesale-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--neutral-600);
}
.toggle-switch {
  position: relative;
  width: 40px;
  height: 22px;
  background: var(--neutral-200);
  border-radius: 11px;
  cursor: pointer;
  transition: background var(--transition-base);
}
.toggle-switch.active { background: var(--primary-500); }
.toggle-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: var(--white);
  border-radius: 50%;
  transition: transform var(--transition-base);
  box-shadow: var(--shadow-sm);
}
.toggle-switch.active::after { transform: translateX(18px); }

/* ---------- Product Grid — Full Width ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

/* ---------- Pagination ---------- */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-10);
}
.page-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 600;
  border: 2px solid var(--neutral-200);
  color: var(--neutral-600);
  background: var(--white);
  cursor: pointer;
  transition: all var(--transition-base);
}
.page-btn:hover, .page-btn.active {
  background: var(--primary-600);
  color: var(--white);
  border-color: var(--primary-600);
}
.page-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* No Results */
.no-results {
  text-align: center;
  padding: var(--space-16) var(--space-8);
  color: var(--neutral-500);
}
.no-results h3 { margin-bottom: var(--space-4); color: var(--neutral-700); }

/* ============================================
   RESPONSIVE — Products Page
   ============================================ */

@media (max-width: 1024px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .filter-select { min-width: 120px; font-size: 11px; }
}

@media (max-width: 768px) {
  .products-hero { padding: var(--space-6) 0; }
  .products-hero h1 { font-size: var(--text-xl); }

  .divisions-scroll { gap: var(--space-2); padding: var(--space-1) 0; }
  .division-chip { padding: 6px 14px; font-size: 10px; letter-spacing: 0.3px; }

  .search-bar input { font-size: 12px; padding: 10px 14px 10px 40px; }
  .search-icon { left: 12px; font-size: 15px; }

  .products-toolbar { 
    flex-direction: column; 
    align-items: stretch;
    padding: var(--space-3);
    gap: var(--space-3);
  }
  .toolbar-left { flex-direction: column; align-items: stretch; }
  .toolbar-right { justify-content: space-between; }
  .filter-dropdowns { flex-direction: column; }
  .filter-select { width: 100%; min-width: auto; font-size: 12px; }
  .sort-select { font-size: 12px; }
  .wholesale-toggle span { font-size: 11px; }

  .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .product-card .card-body { padding: var(--space-3); }
  .product-card .card-title { font-size: var(--text-sm); }
  .product-card .card-composition { font-size: 11px; }
  .product-card .card-packing { font-size: 10px; }
  .product-card .card-pricing { gap: var(--space-1) var(--space-2); }
  .price-item { font-size: 11px; }
  .product-card .card-img { height: 140px; }
  .page-btn { width: 32px; height: 32px; font-size: 12px; }
}

@media (max-width: 480px) {
  .product-grid { grid-template-columns: 1fr; }
  .division-chip { padding: 5px 12px; font-size: 9px; }
  .search-bar input { font-size: 11px; padding: 10px 12px 10px 36px; }
  .product-card .card-img { height: 160px; }
  .toolbar-right { flex-direction: column; align-items: stretch; }
}