/* ==========================================================================
   ACERO SHOP V1 - Responsive Design Styles
   Mobile-first responsive rules for all screen sizes
   Version: 1.0.0
   ========================================================================== */

/* --- 320px - Small Mobile Phones --- */
@media (max-width: 359px) {
    .header-logo {
        font-size: var(--font-size-base);
    }

    .header-logo img {
        height: 24px;
    }

    .header-search input {
        font-size: var(--font-size-xs);
        padding: var(--space-1) var(--space-3);
        padding-right: var(--space-8);
    }

    .header-search button {
        padding: var(--space-1) var(--space-2);
        font-size: var(--font-size-xs);
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2);
        padding: var(--space-2);
    }

    .product-card-name {
        font-size: var(--font-size-xs);
    }

    .product-card-price-current {
        font-size: var(--font-size-base);
    }

    .btn {
        padding: var(--space-1) var(--space-4);
        font-size: var(--font-size-xs);
    }

    .form-input,
    .form-select,
    .form-textarea {
        padding: var(--space-2) var(--space-3);
        font-size: var(--font-size-sm);
    }

    .toast {
        min-width: auto;
        left: var(--space-2);
        right: var(--space-2);
        transform: translateY(100px);
    }

    .toast-show {
        transform: translateY(0);
    }

    .bottom-nav-item {
        font-size: 10px;
    }

    .bottom-nav-item svg,
    .bottom-nav-item .nav-icon {
        width: 20px;
        height: 20px;
    }
}

/* --- 360px - 374px --- */
@media (min-width: 360px) and (max-width: 374px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }
}

/* --- 375px - 413px (iPhone 6/7/8, iPhone X) --- */
@media (min-width: 375px) and (max-width: 413px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
        padding: var(--space-3);
    }

    .product-card-body {
        padding: var(--space-2);
    }
}

/* --- 414px - 479px (iPhone 11, Large Phones) --- */
@media (min-width: 414px) and (max-width: 479px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }

    .product-card-name {
        font-size: var(--font-size-sm);
    }
}

/* --- 480px - 767px (Large Phones / Small Tablets) --- */
@media (min-width: 480px) and (max-width: 767px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
        padding: var(--space-4);
    }

    .header-inner {
        padding: 0 var(--space-6);
    }

    .header-search {
        max-width: 400px;
    }

    .container {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .dialog-confirm {
        max-width: 360px;
    }
}

/* --- 768px - 1023px (Tablets) --- */
@media (min-width: 768px) and (max-width: 1023px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-4);
        padding: var(--space-4);
    }

    .header {
        height: var(--header-height-desktop);
    }

    .header-inner {
        padding: 0 var(--space-6);
    }

    .header-search {
        max-width: 500px;
    }

    .header-actions {
        gap: var(--space-4);
    }

    .header-action-btn span {
        display: inline;
    }

    .bottom-nav {
        display: none;
    }

    body {
        padding-bottom: 0;
    }

    .container {
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }

    .card-body {
        padding: var(--space-6);
    }

    .form-group {
        margin-bottom: var(--space-5);
    }

    .dialog-confirm {
        max-width: 420px;
    }

    .order-timeline {
        gap: 0;
    }

    .timeline-step {
        min-width: 100px;
        font-size: var(--font-size-sm);
    }
}

/* --- 1024px - 1365px (Small Desktops / Landscape Tablets) --- */
@media (min-width: 1024px) and (max-width: 1365px) {
    .product-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-5);
        padding: var(--space-6);
    }

    .header-inner {
        padding: 0 var(--space-8);
    }

    .header-search {
        max-width: 600px;
    }

    .header-actions {
        gap: var(--space-4);
    }

    .header-action-btn {
        font-size: var(--font-size-sm);
    }

    .header-action-btn span {
        display: inline;
    }

    .container {
        max-width: 960px;
        padding-left: var(--space-8);
        padding-right: var(--space-8);
    }

    .card-body {
        padding: var(--space-6);
    }

    .product-card-name {
        font-size: var(--font-size-sm);
    }

    .product-card-price-current {
        font-size: var(--font-size-lg);
    }
}

/* --- 1366px - 1439px (Standard Laptops) --- */
@media (min-width: 1366px) and (max-width: 1439px) {
    .product-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: var(--space-5);
    }

    .container {
        max-width: 1200px;
    }
}

/* --- 1440px - 1919px (Large Desktops) --- */
@media (min-width: 1440px) and (max-width: 1919px) {
    .product-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: var(--space-6);
    }

    .container {
        max-width: 1320px;
    }

    .header-inner {
        padding: 0 var(--space-10);
    }

    .header-search {
        max-width: 700px;
    }
}

/* --- 1920px+ (Ultra-wide / 4K) --- */
@media (min-width: 1920px) {
    .product-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: var(--space-6);
    }

    .container {
        max-width: 1600px;
    }

    .header-inner {
        max-width: 1600px;
        padding: 0 var(--space-12);
    }

    .header-search {
        max-width: 800px;
    }

    .product-card-name {
        font-size: var(--font-size-base);
    }

    .product-card-price-current {
        font-size: var(--font-size-xl);
    }

    html {
        font-size: 17px;
    }
}

/* --- Mobile-Specific: Bottom Navigation Spacing --- */
@media (max-width: 767px) {
    body {
        padding-bottom: var(--bottom-nav-height);
    }

    .toast {
        bottom: calc(var(--bottom-nav-height) + var(--space-4));
    }

    .page-content {
        padding-bottom: var(--space-4);
    }

    .header-search {
        margin: 0 var(--space-2);
    }

    .header-action-btn span {
        display: none;
    }

    .header-action-btn {
        padding: var(--space-2);
    }

    .header-actions {
        gap: var(--space-1);
    }

    .hide-mobile {
        display: none !important;
    }
}

/* --- Desktop-Specific --- */
@media (min-width: 768px) {
    .hide-desktop {
        display: none !important;
    }

    .show-desktop {
        display: flex !important;
    }

    .page-content {
        min-height: calc(100vh - var(--header-height-desktop));
        padding-top: var(--space-4);
        padding-bottom: var(--space-8);
    }
}

/* --- Tablet-Specific --- */
@media (min-width: 768px) and (max-width: 1023px) {
    .hide-tablet {
        display: none !important;
    }
}

/* --- Touch Device Optimizations --- */
@media (hover: none) and (pointer: coarse) {
    .product-card:hover {
        transform: none;
    }

    .product-card:active {
        transform: scale(0.98);
    }

    .btn:hover {
        transform: none;
    }

    .btn:active {
        transform: scale(0.97);
    }
}

/* --- High-DPI Screens --- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .product-card-image img {
        image-rendering: auto;
    }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- Dark Mode Support (Optional) --- */
@media (prefers-color-scheme: dark) {
    /* Dark mode styles can be added here if desired */
    /* Keeping light mode as primary for commercial deployment */
}

/* --- Landscape Mobile --- */
@media (max-width: 767px) and (orientation: landscape) {
    .header {
        height: 48px;
    }

    .bottom-nav {
        height: 48px;
    }

    .bottom-nav-item {
        padding: var(--space-1);
    }

    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- Safe Area Insets (Notch Devices) --- */
@supports (padding: env(safe-area-inset-top)) {
    .header {
        padding-top: env(safe-area-inset-top);
    }

    .bottom-nav {
        padding-bottom: env(safe-area-inset-bottom);
    }
}