/* ==========================================================================
   BUYNTAKE CUSTOMER PORTAL - DEDICATED CATEGORIES PAGE CSS
   ========================================================================== */

/* HIDE ALL SCROLLBARS GLOBALLY WHILE PRESERVING SCROLLING FUNCTIONALITY */
*,
*::before,
*::after,
body,
html,
.scroll-x-row,
.subcategory-cards-container,
.category-cards-grid,
.content-container {
  -ms-overflow-style: none !important;  /* IE & Edge */
  scrollbar-width: none !important;     /* Firefox */
}

::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* Anchor Scroll Offsets */
#subcategory-section,
#category-products-section {
  scroll-margin-top: 90px !important;
}

/* Widescreen Container Scaling */
@media (min-width: 1600px) {
  .content-container {
    max-width: 1760px !important;
    padding: 36px 48px !important;
  }
  .app-topbar {
    padding: 0 48px !important;
  }
}

/* --------------------------------------------------------------------------
   1. CATEGORY CARDS GRID (DESKTOP & WIDESCREEN RESPONSIVE)
   -------------------------------------------------------------------------- */
.category-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 18px !important;
  margin-bottom: 28px !important;
}

/* 1800px+ 4K & Ultra-Wide Desktops: 6 Columns */
@media (min-width: 1800px) {
  .category-cards-grid {
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 20px !important;
  }
  .products-grid {
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 20px !important;
  }
}

/* 1440px - 1799px Large Desktops: 5 Columns */
@media (min-width: 1440px) and (max-width: 1799px) {
  .category-cards-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 18px !important;
  }
  .products-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 18px !important;
  }
}

/* 1024px - 1439px Standard Desktops: 4 Columns */
@media (min-width: 1024px) and (max-width: 1439px) {
  .category-cards-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
  }
  .products-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
  }
}

/* 768px - 1023px Tablets: 3 Columns */
@media (min-width: 768px) and (max-width: 1023px) {
  .category-cards-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
  }
  .products-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
  }
}

/* Below 768px Mobile Screens: 2 Columns */
@media (max-width: 767px) {
  .category-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

/* CATEGORY GRID CARD STYLES & UNIFORM ROW HEIGHT */
.category-grid-card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-xl) !important;
  padding: 20px !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: all var(--transition-smooth) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

@media (min-width: 1400px) {
  .category-grid-card {
    padding: 24px 22px !important;
  }
  .cat-card-icon-box {
    width: 52px !important;
    height: 52px !important;
  }
}

.category-grid-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 5px !important;
  background: var(--card-gradient, linear-gradient(135deg, var(--primary), var(--accent-purple))) !important;
  opacity: 0.9 !important;
  transition: height 0.2s ease !important;
}

.category-grid-card:hover {
  border-color: var(--primary) !important;
  box-shadow: 0 16px 36px rgba(79, 70, 229, 0.18) !important;
  transform: translateY(-4px) !important;
}

.category-grid-card:hover::before {
  height: 7px !important;
}

.category-grid-card.active {
  border-color: var(--primary) !important;
  background: var(--primary-light) !important;
  box-shadow: 0 0 0 2px var(--primary), 0 8px 24px var(--primary-glow) !important;
}

.cat-card-icon-box {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  background: var(--icon-bg, var(--primary-light));
  color: var(--icon-color, var(--primary));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  flex-shrink: 0;
}

.cat-card-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cat-card-subtags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.cat-card-subchip {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  background: var(--bg-app);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
  transition: all var(--transition-fast);
}
.cat-card-subchip:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* --------------------------------------------------------------------------
   2. FLUID RESPONSIVE SUBCATEGORY CARDS (ALL SCREEN SIZES)
   -------------------------------------------------------------------------- */
.subcategory-cards-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding: 10px 2px 18px 2px !important;
  margin-bottom: 24px !important;
}

.subcat-visual-card {
  flex: 1 1 calc(20% - 12px) !important; /* 5 columns on standard desktop */
  min-width: 150px !important;
  max-width: 260px !important;
  padding: 12px 18px !important;
  border-radius: var(--radius-lg) !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
  cursor: pointer !important;
  transition: all var(--transition-fast) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  box-shadow: var(--shadow-xs) !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

@media (min-width: 1600px) {
  .subcat-visual-card {
    flex: 1 1 calc(16.666% - 14px) !important; /* 6 columns on widescreen desktop */
  }
}

@media (max-width: 991px) {
  .subcat-visual-card {
    flex: 1 1 calc(33.333% - 10px) !important; /* 3 columns on tablet */
    min-width: 140px !important;
  }
}

@media (max-width: 576px) {
  .subcategory-cards-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .subcat-visual-card {
    flex: 0 0 auto !important;
    min-width: 140px !important;
  }
}

.subcat-visual-card:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
}
.subcat-visual-card.active {
  background: var(--primary) !important;
  color: white !important;
  border-color: var(--primary) !important;
  box-shadow: 0 6px 18px var(--primary-glow) !important;
}
.subcat-visual-card .subcat-badge {
  font-size: 0.7rem !important;
  padding: 3px 10px !important;
  border-radius: var(--radius-full) !important;
  background: var(--bg-app) !important;
  color: var(--text-muted) !important;
  font-weight: 800 !important;
  flex-shrink: 0 !important;
}
.subcat-visual-card.active .subcat-badge {
  background: rgba(255, 255, 255, 0.25) !important;
  color: white !important;
}

/* --------------------------------------------------------------------------
   3. WISHLIST & SUGGESTED PRODUCTS: DISPLAY FLEX SCROLL-X ACROSS ALL SCREENS
   -------------------------------------------------------------------------- */
.scroll-x-row {
  display: flex !important;
  flex-direction: row !important;
  overflow-x: auto !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  padding: 6px 4px 18px 4px !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  width: 100% !important;
}

.compact-scroll-card {
  min-width: 145px !important;
  max-width: 160px !important;
  flex-shrink: 0 !important;
  scroll-snap-align: start !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  padding: 10px !important;
  position: relative !important;
  transition: all var(--transition-fast) !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}
.compact-scroll-card:hover {
  border-color: var(--primary) !important;
  box-shadow: var(--shadow-sm) !important;
  transform: translateY(-2px) !important;
}
.compact-card-img-wrapper {
  height: 95px !important;
  width: 100% !important;
  border-radius: var(--radius-sm) !important;
  background: var(--bg-app) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 8px !important;
  overflow: hidden !important;
  position: relative !important;
}
.compact-card-img-wrapper img {
  max-height: 80px !important;
  width: auto !important;
  object-fit: contain !important;
  transition: transform var(--transition-fast) !important;
}
.compact-scroll-card:hover .compact-card-img-wrapper img {
  transform: scale(1.06) !important;
}
.compact-card-title {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
  margin-bottom: 4px !important;
  line-height: 1.25 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  height: 2rem !important;
}
/* --------------------------------------------------------------------------
   5. PRODUCT DETAILS PAGE ENHANCEMENTS (SWATCHES, VARIANTS, STICKY MOBILE BAR)
   -------------------------------------------------------------------------- */
.color-swatch-chip {
  padding: 8px 14px !important;
  border-radius: var(--radius-full) !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all var(--transition-fast) !important;
}
.color-swatch-chip .swatch-dot {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
}
.color-swatch-chip:hover {
  border-color: var(--primary) !important;
}
.color-swatch-chip.active {
  border-color: var(--primary) !important;
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  box-shadow: 0 0 0 2px var(--primary) !important;
}

.variant-chip {
  padding: 8px 16px !important;
  border-radius: var(--radius-md) !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
  cursor: pointer !important;
  transition: all var(--transition-fast) !important;
}
.variant-chip:hover {
  border-color: var(--primary) !important;
}
.variant-chip.active {
  background: var(--primary) !important;
  color: white !important;
  border-color: var(--primary) !important;
  box-shadow: 0 4px 14px var(--primary-glow) !important;
}

.sticky-mobile-purchase-bar {
  display: none !important;
}

@media (max-width: 767px) {
  .sticky-mobile-purchase-bar {
    display: flex !important;
    position: fixed !important;
    bottom: 60px !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--bg-surface) !important;
    border-top: 1px solid var(--border-subtle) !important;
    padding: 10px 14px !important;
    gap: 10px !important;
    z-index: 8500 !important;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.1) !important;
  }
}
.category-sort-dots-btn {
  display: none !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-subtle) !important;
  background: var(--bg-surface) !important;
  cursor: pointer !important;
  transition: all var(--transition-fast) !important;
}
.category-sort-dots-btn:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  background: var(--bg-app) !important;
}

@media (max-width: 399px) {
  .category-sort-select-wrapper {
    display: none !important;
  }
  .category-sort-dots-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
}