/**
 * CATEGORY RESPONSIVE CSS - Media queries para el sistema de banners de categoría
 * 
 * CONTENIDO:
 * - Breakpoints para tablet y móvil
 * - Adaptaciones de layout responsive
 * - Tamaños de fuente adaptativos
 * - Espaciados y gaps responsive
 * 
 * BREAKPOINTS:
 * - Tablet: 769px - 1024px
 * - Móvil: ≤768px
 * 
 * NAMESPACE: .meloopets-shop
 */

/* ===================================================================
   RESPONSIVE TABLET - 769px a 1024px
   ================================================================= */

@media (min-width: 769px) and (max-width: 1024px) {
  .meloopets-shop .category-banner {
    width: 95%;
  }
  
  .meloopets-shop .category-title {
    font-size: 2.2rem;
  }
  
  .meloopets-shop .category-image {
    left: -15px;
  }
  
  .meloopets-shop .category-vector svg {
    width: 70px;
    height: 70px;
  }
  
  .meloopets-shop .category-navigation {
    gap: 12px;
  }
  
  .meloopets-shop .category-nav-item {
    padding: 8px 16px;
    font-size: 0.9rem;
  }
}

/* ===================================================================
   RESPONSIVE MÓVIL - ≤768px
   ================================================================= */

@media (max-width: 768px) {
  /* Banner principal */
  .meloopets-shop .category-banner {
    width: 95%;
    margin: 15px auto;
    min-height: 80px;
  }
  
  .meloopets-shop .category-content {
    padding: 0 15px;
    flex-direction: row;
    justify-content: center;
    top: -20%;
  }
  
  /* Imagen y vector */
  .meloopets-shop .category-image {
    position: static;
    transform: none;
    order: -1;
  }
  
  .meloopets-shop .category-vector svg {
    width: 60px;
    height: 60px;
  }
  
  /* Texto del banner */
  .meloopets-shop .category-text {
    padding-left: 0;
  }
  
  .meloopets-shop .category-title {
    font-size: 1.8rem;
  }
  
  .meloopets-shop .category-description {
    font-size: 1rem;
  }
  
  /* Navegación de categorías */
  .meloopets-shop .category-navigation {
    gap: 8px;
    margin: 20px auto;
  }
  
  .meloopets-shop .category-nav-item {
    padding: 6px 12px;
    font-size: 0.8rem;
  }
  
  /* Breadcrumbs */
  .meloopets-shop .custom-breadcrumbs {
    padding: 10px 0;
  }
  
  .meloopets-shop .breadcrumb-container {
    padding: 0 15px;
  }
}