/* ================================================
   100% MOBILE RESPONSIVE STYLES
   ================================================ */

/* Base Mobile Styles (320px+) */
* {
    box-sizing: border-box;
}

body {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* Extra Small Devices (320px - 480px) */
@media (max-width: 480px) {
    /* Typography */
    h1 { font-size: 1.5rem !important; line-height: 1.3 !important; }
    h2 { font-size: 1.25rem !important; }
    h3 { font-size: 1.1rem !important; }
    h4 { font-size: 1rem !important; }
    p { font-size: 0.9rem !important; line-height: 1.5 !important; }
    
    /* Container */
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
        max-width: 100% !important;
    }
    
    /* Header */
    .main-header {
        padding: 10px 0 !important;
    }
    
    .logo img, .logo a img {
        height: 35px !important;
        max-width: 120px !important;
    }
    
    .header-cart-wrapper {
        padding: 5px 12px !important;
    }
    
    .header-cart-wrapper span {
        font-size: 14px !important;
    }
    
    /* Announcement Bar */
    .top-announcement {
        padding: 6px 0 !important;
    }
    
    .announcement-container {
        flex-direction: column !important;
        padding: 0 10px !important;
        gap: 5px !important;
    }
    
    .announcement-left {
        gap: 15px !important;
        justify-content: center !important;
        padding-right: 10px !important;
        border-right: none !important;
    }
    
    .announcement-left a {
        font-size: 11px !important;
    }
    
    .announcement-right {
        margin-left: 0 !important;
        padding-left: 0 !important;
        text-align: center !important;
    }
    
    /* Product Grid */
    .product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    
    /* Product Card */
    .p-card {
        border-radius: 8px !important;
        overflow: hidden !important;
    }
    
    .p-img-link {
        padding-top: 100% !important;
        border-radius: 8px 8px 0 0 !important;
    }
    
    .p-content {
        padding: 6px !important;
    }
    
    .p-title {
        font-size: 11px !important;
        line-height: 1.3 !important;
        height: auto !important;
        -webkit-line-clamp: 2 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        margin-bottom: 4px !important;
    }
    
    .p-price {
        font-size: 13px !important;
    }
    
    .p-old-price {
        font-size: 10px !important;
    }
    
    .p-discount {
        font-size: 9px !important;
        padding: 2px 4px !important;
    }
    
    .btn-add-cart {
        padding: 6px 8px !important;
        font-size: 10px !important;
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* Product Page */
    .pdt-container {
        padding-top: 8px !important;
        padding-bottom: 20px !important;
    }
    
    .breadcrumb {
        display: none !important;
    }
    
    .product-card {
        padding: 12px !important;
        border-radius: 10px !important;
        margin-bottom: 15px !important;
    }
    
    .main-image-wrap {
        border-radius: 8px !important;
    }
    
    .thumbnail-row {
        gap: 6px !important;
    }
    
    .thumb-item {
        min-width: 50px !important;
        height: 50px !important;
    }
    
    .product-main-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .product-title {
        font-size: 1.25rem !important;
    }
    
    .current-price {
        font-size: 1.5rem !important;
    }
    
    .regular-price {
        font-size: 0.9rem !important;
    }
    
    .action-btns {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    
    .btn-cart, .btn-order, .btn-whatsapp {
        padding: 12px !important;
        font-size: 0.9rem !important;
    }
    
    .trust-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .trust-item {
        background: #f8fafc;
        padding: 10px;
        border-radius: 8px;
    }
    
    .trust-checkmarks {
        gap: 10px !important;
    }
    
    .trust-checkmarks span {
        font-size: 0.7rem !important;
    }
    
    .thumb-item {
        min-width: 55px !important;
        height: 55px !important;
    }
    
    .product-desc-related {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .section-title {
        font-size: 1.1rem !important;
        margin-bottom: 12px !important;
        gap: 8px !important;
    }
    
    .title-bar {
        width: 3px !important;
        height: 18px !important;
    }
    
    .desc-content {
        padding: 15px !important;
        border-radius: 12px !important;
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
    }
    
    .related-list {
        gap: 10px !important;
    }
    
    .related-item {
        padding: 8px !important;
        gap: 10px !important;
    }
    
    .related-img {
        width: 65px !important;
        height: 65px !important;
    }
    
    .related-name {
        font-size: 0.85rem !important;
        margin-bottom: 3px !important;
    }
    
    .product-gallery {
        margin-bottom: 15px !important;
    }
    
    .main-image-container {
        border-radius: 12px !important;
        padding: 10px !important;
    }
    
    .product-info h1 {
        font-size: 1.25rem !important;
    }
    
    .product-info .p-new-price {
        font-size: 1.5rem !important;
    }
    
    .product-info .p-old-price {
        font-size: 1rem !important;
    }
    
    .variant-selector {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .variant-btn {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
    
    .product-grid-btn {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .product-grid-btn button {
        width: 100% !important;
    }
    
    /* Checkout Page */
    .checkout-container {
        padding: 15px 0 !important;
    }
    
    .checkout-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .checkout-form {
        padding: 15px !important;
        border-radius: 12px !important;
    }
    
    .checkout-items {
        max-height: 180px !important;
        overflow-y: auto !important;
    }
    
    /* Cart Page */
    .cart-container {
        padding: 15px 0 !important;
    }
    
    .cart-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .cart-items {
        border-radius: 12px !important;
        padding: 12px !important;
    }
    
    .cart-item {
        flex-direction: row !important;
        gap: 10px !important;
        padding: 10px 0 !important;
    }
    
    .cart-item img {
        width: 55px !important;
        height: 55px !important;
        flex-shrink: 0 !important;
    }
    
    .cart-item h4 {
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
    }
    
    .cart-summary {
        border-radius: 12px !important;
        padding: 15px !important;
        position: relative !important;
        top: 0 !important;
    }
    
    /* Category Page */
    .category-header {
        padding: 15px 0 !important;
    }
    
    .category-header h1 {
        font-size: 1.25rem !important;
    }
    
    /* Footer */
    .main-footer {
        padding: 30px 0 20px !important;
    }
    
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
        text-align: center !important;
    }
    
    .footer-logo {
        justify-content: center !important;
        margin-bottom: 15px !important;
    }
    
    .footer-title {
        font-size: 1rem !important;
        margin-bottom: 15px !important;
    }
    
    .footer-link-list li {
        margin-bottom: 8px !important;
    }
    
    .social-links {
        justify-content: center !important;
    }
    
    /* Chat Widget */
    .chat-widget {
        bottom: 15px !important;
        right: 15px !important;
    }
    
    .chat-toggle {
        width: 48px !important;
        height: 48px !important;
    }
    
    .chat-toggle i {
        font-size: 20px !important;
    }
    
    .chat-popup {
        max-width: 250px !important;
        padding: 15px !important;
        right: -5px !important;
    }
    
    .chat-popup h4 {
        font-size: 0.95rem !important;
    }
    
    .chat-popup p {
        font-size: 0.8rem !important;
    }
    
    .chat-popup-btn {
        padding: 10px 12px !important;
        font-size: 0.8rem !important;
    }
    
    /* Hero Slider */
    .hero-slider {
        height: 180px !important;
    }
    
    /* Trust Badges */
    .trust-badges {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    
    .trust-badge {
        padding: 8px 5px !important;
    }
    
    .trust-badge i {
        font-size: 16px !important;
        margin-bottom: 4px !important;
    }
    
    .trust-badge span {
        font-size: 9px !important;
    }
    
    /* Modal */
    .modal-content {
        width: 95% !important;
        max-height: 90vh !important;
        border-radius: 16px !important;
        margin: 10px auto !important;
    }
    
    .modal-body {
        padding: 15px !important;
    }
    
    .close-modal {
        right: 15px !important;
        top: 15px !important;
        font-size: 20px !important;
    }
    
    /* Toast */
    #toast-container {
        left: 10px !important;
        right: 10px !important;
    }
    
    /* Section Headers */
    .section-header-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        margin: 15px 0 !important;
    }
    
    .section-divider-title {
        font-size: 13px !important;
    }
    
    .view-all-link {
        font-size: 11px !important;
    }
    
    /* Category Bar */
    .category-bar {
        padding: 20px 15px;
        background: #fafafa;
    }
    
    .category-bar-grid {
        display: flex;
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
    }
    
    .category-bar-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        color: #333;
        transition: transform 0.2s ease;
    }
    
    .category-bar-item:hover {
        transform: translateY(-3px);
    }
    
    .category-bar-item span {
        font-size: 12px;
        font-weight: 600;
        color: #333;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .category-icon-square {
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 24px;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }
    
    .category-chip {
        flex-shrink: 0 !important;
        padding: 6px 14px !important;
        font-size: 12px !important;
    }
    
    /* Forms */
    input, select, textarea {
        font-size: 16px !important;
        padding: 12px !important;
    }
    
    label {
        font-size: 0.85rem !important;
    }
    
    /* Buttons */
    .btn {
        padding: 12px 20px !important;
        font-size: 0.9rem !important;
    }
    
    .btn-order-now {
        padding: 14px !important;
        font-size: 1rem !important;
    }
    
    /* Thumbnails */
    .thumbnail-strip {
        display: flex !important;
        gap: 8px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    
    .thumbnail-strip::-webkit-scrollbar {
        display: none !important;
    }
    
    .thumb-item {
        min-width: 50px !important;
        height: 50px !important;
    }
    
    /* Breadcrumb */
    .breadcrumb {
        font-size: 11px !important;
        padding: 8px 0 !important;
    }
    
    /* Zoom hint */
    .zoom-hint {
        display: none !important;
    }
}

/* Small Devices (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    .p-title {
        font-size: 12px !important;
    }
    
    .checkout-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .cart-layout {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .chat-popup {
        max-width: 280px !important;
    }
    
    .hero-slider {
        height: 220px !important;
    }
}

/* Tablet (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 15px !important;
    }
    
    .container {
        max-width: 95% !important;
    }
    
    .checkout-grid {
        grid-template-columns: 1fr 350px !important;
        gap: 25px !important;
    }
}

/* Desktop (1025px+) */
@media (min-width: 1025px) {
    .product-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 20px !important;
    }
}

/* Global Overrides */
@media (max-width: 768px) {
    /* Flex containers */
    .header-content,
    .product-info,
    .checkout-form,
    .cart-layout {
        flex-wrap: wrap !important;
    }
    
    /* Images */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Prevent horizontal scroll */
    html, body {
        overflow-x: hidden !important;
    }
    
    /* Product cards */
    .p-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    
    /* Mobile nav */
    .mobile-side-nav {
        width: 280px !important;
    }
    
    /* Badge sizes */
    .badge {
        font-size: 9px !important;
        padding: 3px 8px !important;
    }
    
    /* Price text */
    .p-new-price {
        font-size: 14px !important;
    }
    
    /* Hide elements on mobile if needed */
    .desktop-only {
        display: none !important;
    }
    
    /* Sticky elements */
    .sticky-top {
        position: relative !important;
    }
    
    /* Table responsive */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Hide scrollbar but allow scroll */
    .hide-scrollbar {
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
    }
    
    .hide-scrollbar::-webkit-scrollbar {
        display: none !important;
    }
    
    /* Touch device optimizations */
    @media (hover: none) and (pointer: coarse) {
        .p-card:hover .p-img {
            transform: none !important;
        }
        
        .btn-add-cart,
        .btn-cart-small,
        .variant-btn,
        .chat-toggle {
            min-height: 44px !important;
        }
        
        .p-card,
        .category-chip,
        .variant-btn {
            -webkit-user-select: none !important;
            user-select: none !important;
        }
        
        /* Larger tap targets */
        a, button {
            min-height: 44px !important;
        }
    }
}

/* iOS Specific */
@supports (-webkit-touch-callout: none) {
    .product-grid,
    .category-bar,
    .thumbnail-strip {
        -webkit-overflow-scrolling: touch !important;
    }
    
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* Safe Area for Notched Devices */
@supports (padding: env(safe-area-inset-bottom)) {
    .chat-widget {
        bottom: calc(15px + env(safe-area-inset-bottom)) !important;
        right: calc(15px + env(safe-area-inset-right)) !important;
    }
    
    .mobile-side-nav {
        padding-bottom: env(safe-area-inset-bottom) !important;
    }
    
    body {
        padding-bottom: env(safe-area-inset-bottom) !important;
    }
}

/* Print */
@media print {
    .chat-widget,
    .mobile-nav-toggle,
    .header-actions,
    .btn-add-cart,
    .mobile-side-nav,
    .mobile-overlay {
        display: none !important;
    }
}

/* Animations disabled on reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}