/* ============================================
   BLACKHAWK OUTFITTERS - RESPONSIVE STYLES v4.0
   ============================================ */

/* TABLET: 1024px and below */
@media (max-width: 1024px) {
    .categories-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
    .products-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
    .nav-menu { gap: 2rem; }
    .secondary-nav-content { gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
    .woo-shop-layout { grid-template-columns: 220px 1fr; gap: 1.5rem; }
    .subcategories-grid { grid-template-columns: repeat(3, 1fr); }
}

/* SMALL TABLET: 768px and below */
@media (max-width: 768px) {
    .header-content { flex-wrap: wrap; justify-content: center; gap: 1rem; }
    .nav-main { order: 3; width: 100%; justify-content: center; }
    .nav-menu { gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
    .logo-img { height: 100px; }
    
    .hero { min-height: 400px; }
    .hero-title { font-size: clamp(2rem, 6vw, 3.5rem); }
    
    .categories-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .category-card { padding: 2rem 1rem; }
    .category-icon { width: 100px; height: 100px; }
    
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    
    .section-title { font-size: 1.8rem; margin-bottom: 2rem; }
    
    .footer-content { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
    
    /* WooCommerce: stack sidebar below */
    .woo-shop-layout { grid-template-columns: 1fr; }
    .woo-sidebar { order: 2; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .woo-products-area { order: 1; }
    .subcategories-grid { grid-template-columns: repeat(2, 1fr); }
    
    .secondary-nav { display: none; }
}

/* MOBILE: 480px and below */
@media (max-width: 480px) {
    .container { padding: 0 1rem; }
    
    .categories-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
    .category-card { padding: 1.5rem 0.75rem; }
    .category-card h3 { font-size: 1rem; }
    .category-icon { width: 70px; height: 70px; }
    
    .products-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
    .product-card-info { padding: 10px; }
    .product-card-title { font-size: 0.8rem !important; }
    .product-card-brand { font-size: 0.65rem; }
    .product-card-price { font-size: 1rem; }
    
    .hero-content { padding: 2rem 0; }
    .btn { padding: 0.75rem 1.5rem; font-size: 0.85rem; }
    
    .footer-content { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; text-align: center; gap: 1rem; }
    .footer-links { flex-direction: column; gap: 0.5rem; }
    
    .woo-sidebar { grid-template-columns: 1fr; }
    .woo-breadcrumb { font-size: 0.8rem; }
    .woo-shop-header h1 { font-size: 1.8rem; }
    .subcategories-grid { grid-template-columns: 1fr; }
}