/**
 * Responsive Styles for Ketsatphugiaan Theme
 * 
 * @package Ketsatphugiaan
 * @since 1.0.0
 */

/* Mobile First Approach */

/* Extra Small devices (phones, 320px and up) */
@media (max-width: 474px) {
  .container-custom {
    @apply px-3;
  }
  
  .hero-section {
    @apply py-12;
  }
  
  .hero-section h1 {
    @apply text-2xl;
  }
  
  .hero-section p {
    @apply text-base;
  }
  
  .product-grid {
    @apply grid-cols-1 gap-4;
  }
  
  .shop-toolbar {
    @apply flex-col space-y-4;
  }
  
  .shop-layout {
    @apply grid-cols-1;
  }
  
  .cart-table-wrapper {
    @apply text-sm;
  }
  
  .cart-table-wrapper th,
  .cart-table-wrapper td {
    @apply px-2 py-2;
  }
  
  .mobile-menu {
    @apply block;
  }
  
  .desktop-menu {
    @apply hidden;
  }
}

/* Small devices (landscape phones, 475px and up) */
@media (min-width: 475px) and (max-width: 639px) {
  .product-grid {
    @apply grid-cols-2 gap-4;
  }
  
  .hero-section h1 {
    @apply text-3xl;
  }
  
  .features-section .grid {
    @apply grid-cols-1 gap-6;
  }
  
  .categories-section .grid {
    @apply grid-cols-3;
  }
}

/* Medium devices (tablets, 640px and up) */
@media (min-width: 640px) and (max-width: 767px) {
  .product-grid {
    @apply grid-cols-2 gap-6;
  }
  
  .hero-section {
    @apply py-16;
  }
  
  .hero-section h1 {
    @apply text-4xl;
  }
  
  .features-section .grid {
    @apply grid-cols-3;
  }
  
  .categories-section .grid {
    @apply grid-cols-4;
  }
  
  .shop-layout {
    @apply grid-cols-1;
  }
  
  .shop-sidebar {
    @apply order-2;
  }
  
  .products-grid {
    @apply order-1;
  }
}

/* Large devices (desktops, 768px and up) */
@media (min-width: 768px) and (max-width: 1023px) {
  .product-grid {
    @apply grid-cols-3 gap-6;
  }
  
  .hero-section {
    @apply py-20;
  }
  
  .hero-section h1 {
    @apply text-5xl;
  }
  
  .shop-layout {
    @apply grid-cols-4;
  }
  
  .shop-sidebar {
    @apply col-span-1;
  }
  
  .products-grid {
    @apply col-span-3;
  }
  
  .mobile-menu {
    @apply hidden;
  }
  
  .desktop-menu {
    @apply block;
  }
}

/* Extra large devices (large desktops, 1024px and up) */
@media (min-width: 1024px) {
  .product-grid {
    @apply grid-cols-4 gap-6;
  }
  
  .hero-section {
    @apply py-24;
  }
  
  .hero-section h1 {
    @apply text-6xl;
  }
  
  .categories-section .grid {
    @apply grid-cols-6;
  }
}

/* 2XL devices (larger desktops, 1536px and up) */
@media (min-width: 1536px) {
  .product-grid {
    @apply grid-cols-5 gap-8;
  }
  
  .container-custom {
    @apply max-w-8xl;
  }
}

/* Responsive Navigation */
@media (max-width: 1023px) {
  .main-navigation {
    @apply hidden;
  }
  
  .mobile-menu-toggle {
    @apply block;
  }
  
  .header-actions {
    @apply space-x-2;
  }
  
  .header-actions .search-toggle {
    @apply hidden;
  }
}

@media (min-width: 1024px) {
  .main-navigation {
    @apply block;
  }
  
  .mobile-menu-toggle {
    @apply hidden;
  }
  
  .mobile-menu {
    @apply hidden !important;
  }
}

/* Responsive Typography */
@media (max-width: 639px) {
  h1 {
    @apply text-2xl;
  }
  
  h2 {
    @apply text-xl;
  }
  
  h3 {
    @apply text-lg;
  }
  
  .text-3xl {
    @apply text-2xl;
  }
  
  .text-4xl {
    @apply text-3xl;
  }
  
  .text-5xl {
    @apply text-4xl;
  }
  
  .text-6xl {
    @apply text-5xl;
  }
}

/* Responsive Spacing */
@media (max-width: 639px) {
  .py-16 {
    @apply py-8;
  }
  
  .py-20 {
    @apply py-12;
  }
  
  .py-24 {
    @apply py-16;
  }
  
  .mb-12 {
    @apply mb-8;
  }
  
  .mt-12 {
    @apply mt-8;
  }
}

/* Responsive Product Cards */
@media (max-width: 639px) {
  .product-card .product-info {
    @apply p-3;
  }
  
  .product-card .product-title {
    @apply text-base;
  }
  
  .quick-actions {
    @apply opacity-100;
  }
  
  .quick-actions .flex {
    @apply flex-row space-x-2 space-y-0;
  }
}

/* Responsive Tables */
@media (max-width: 767px) {
  .shop_table {
    @apply text-sm;
  }
  
  .shop_table th,
  .shop_table td {
    @apply px-2 py-3;
  }
  
  .shop_table .product-thumbnail {
    @apply hidden;
  }
  
  .shop_table .product-remove {
    @apply w-8;
  }
}

/* Responsive Forms */
@media (max-width: 639px) {
  .form-row {
    @apply flex-col;
  }
  
  .form-row .form-group {
    @apply w-full mb-4;
  }
  
  .newsletter-form .flex {
    @apply flex-col space-y-2;
  }
  
  .newsletter-form input {
    @apply rounded-lg;
  }
  
  .newsletter-form button {
    @apply rounded-lg;
  }
}

/* Responsive Buttons */
@media (max-width: 639px) {
  .btn {
    @apply w-full justify-center;
  }
  
  .btn-group {
    @apply flex-col space-y-2 space-x-0;
  }
  
  .hero-section .flex {
    @apply flex-col space-y-4 space-x-0;
  }
}

/* Responsive Images */
@media (max-width: 639px) {
  .hero-image {
    @apply order-first mb-8;
  }
  
  .product-image img {
    @apply h-48;
  }
}

/* Responsive Footer */
@media (max-width: 767px) {
  .footer-widgets .grid {
    @apply grid-cols-1 gap-8;
  }
  
  .footer-bottom .flex {
    @apply flex-col space-y-4;
  }
  
  .payment-methods {
    @apply justify-center;
  }
}

/* Responsive Sidebar */
@media (max-width: 1023px) {
  .shop-sidebar {
    @apply mb-8;
  }
  
  .sidebar-content {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
  }
}

@media (min-width: 1024px) {
  .sidebar-content {
    @apply block space-y-6;
  }
}

/* Touch Optimizations */
@media (hover: none) and (pointer: coarse) {
  .hover\:shadow-lg:hover {
    @apply shadow-lg;
  }
  
  .group:hover .group-hover\:opacity-100 {
    @apply opacity-100;
  }
  
  .quick-actions {
    @apply opacity-100;
  }
  
  button,
  .btn,
  a {
    @apply min-h-[44px] min-w-[44px];
  }
}

/* Print Styles */
@media print {
  .no-print,
  .header-actions,
  .mobile-menu-toggle,
  .back-to-top,
  .quick-actions,
  .newsletter-section,
  .footer-widgets {
    @apply hidden !important;
  }
  
  .container-custom {
    @apply max-w-none px-0;
  }
  
  .product-grid {
    @apply grid-cols-2;
  }
  
  .text-blue-600,
  .text-blue-700 {
    @apply text-black;
  }
  
  .bg-blue-600,
  .bg-blue-700 {
    @apply bg-gray-800;
  }
}