/* Enhanced product grid mobile optimizations, border boxes - Large and Small Screens */
/* mobile-optimized.css - CLEANED AND ORGANIZED VERSION */

/* ===== TABLET AND SMALL DESKTOP (769px - 1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
    }

    .image-frame {
        height: 200px !important;
    }
}

/* ===== MOBILE LANDSCAPE (768px and below, landscape orientation) ===== */
@media (max-width: 768px) and (orientation: landscape) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .image-frame {
        height: 120px !important;
    }

    .product-title {
        font-size: 12px !important;
        -webkit-line-clamp: 1 !important; /* Single line in landscape */
    }
}

/* ===== MOBILE PORTRAIT - MAIN BREAKPOINT (768px and below) ===== */
@media (max-width: 768px) {
    /* CONTAINER AND GRID */
    .products-container {
        padding: 8px !important;
    }

    .product-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px !important;
    }

    /* PRODUCT CARDS */
    .product-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        height: auto;
    }

    /* IMAGE CONTAINER - PREVENT CROPPING AND CENTER */
    .product-image-container {
        width: 100% !important;
        position: relative !important;
        margin-bottom: 8px !important;
        flex-shrink: 0 !important;
        padding: 8px !important; /* ADD PADDING TO CONTAINER */
        box-sizing: border-box !important;
    }

    .product-image-container a {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .image-frame {
        width: 100% !important; /* FULL width */
        height: 180px !important;
        padding: 6px !important;
        margin: 0 !important; /* REMOVE margin - use container padding instead */
        border: none; /* 2px solid #0d3b66 !important; */
        border-radius: 6px !important;
        overflow: hidden !important;
        background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%) !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    }

    .product-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
        background: white !important;
        box-sizing: border-box !important;
        display: block !important;
        max-width: 100% !important;
        max-height: 100% !important;
    }

    /* Alternative image mode if needed */
    .product-image.cover-mode {
        object-fit: cover !important;
        object-position: center top !important;
    }

    /* PRODUCT INFO SECTION */
    .product-info {
        flex-grow: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        min-height: 0;
    }

    .product-title {
        font-size: 13px !important;
        line-height: 1.2 !important;
        margin: 4px 0 !important;
        font-weight: 600 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .product-title a {
        color: inherit;
        text-decoration: none;
    }

    .product-price {
        font-size: 15px !important;
        font-weight: bold !important;
        margin: 4px 0 6px 0 !important;
        color: #2d3748 !important;
    }

    .price-from {
        font-size: 11px !important;
        font-weight: normal;
    }

    .product-description {
        font-size: 11px !important;
        line-height: 1.3 !important;
        color: #666 !important;
        margin: 4px 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* PRODUCT FEATURES */
    .product-features-mini {
        margin: 4px 0 6px 0 !important;
        gap: 2px !important;
        display: flex;
        flex-wrap: wrap;
    }

    .feature-tag {
        font-size: 8px !important;
        padding: 1px 3px !important;
        border-radius: 8px;
        background: #e2e8f0;
        color: #4a5568;
    }

    .feature-tag.size-guide-tag {
        background: #009D94;
        color: white;
    }

    /* SIZE GUIDE BADGE */
    .size-guide-badge {
        width: 18px !important;
        height: 18px !important;
        font-size: 9px !important;
        top: 4px !important;
        right: 4px !important;
    }

    /* PRODUCT ACTIONS - BUTTONS */
    .product-actions {
        margin-top: auto !important;
        padding-top: 8px !important;
    }

    .btn-full {
        width: 100% !important;
        padding: 10px 8px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        text-decoration: none !important;
        border: none !important;
        cursor: pointer !important;
    }

    .btn-choose-options {
        background: #009D94 !important;
        color: white !important;
    }

    .btn-view-product {
        background: #4a5568 !important;
        color: white !important;
    }

    .btn-icon {
        width: 14px !important;
        height: 14px !important;
        flex-shrink: 0;
    }

    /* HIDE UNUSED ELEMENTS */
    .quick-actions {
        display: none !important;
    }

    /* PROMOTIONAL BLOCK */
    .promotional-block {
        grid-column: 1 / -1 !important;
        margin: 16px 0 !important;
        padding: 16px !important;
        border-radius: 12px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

    .promo-content {
        text-align: center;
    }

    .promo-content h3 {
        font-size: 16px !important;
        margin-bottom: 8px !important;
        font-weight: bold;
    }

    .promo-content p {
        font-size: 13px !important;
        margin-bottom: 12px !important;
        opacity: 0.9;
    }

    .promo-features {
        display: flex;
        justify-content: center;
        gap: 16px !important;
        flex-wrap: wrap;
        margin-bottom: 12px;
    }

    .feature {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px !important;
    }

    .feature-icon {
        font-size: 16px !important;
    }

    .feature span:last-child {
        font-size: 10px !important;
        font-weight: 500;
    }

    .security-badges {
        justify-content: center !important;
        gap: 6px !important;
    }

    .security-badge {
        font-size: 8px !important;
        padding: 3px 6px !important;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 8px;
    }
}

/* ===== SMALL MOBILE PHONES (480px and below) ===== */
@media (max-width: 480px) {
    /* GRID ADJUSTMENTS */
    .product-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        padding: 4px !important;
    }

    .product-card {
        padding: 6px !important;
    }

    .product-image-container {
        padding: 6px !important; /* Reduce container padding */
    }

    /* IMAGE ADJUSTMENTS */
    .image-frame {
        height: 160px !important;
        padding: 4px !important;
        margin: 0 !important; /* Keep margin at 0 */
        border: none; /* 2px solid #0d3b66 !important; */
        border-radius: 6px !important;
        background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%) !important;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05) !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .product-image {
        object-fit: contain !important;
        box-sizing: border-box !important;
        display: block !important;
    }
    /* ... rest of your 480px styles ... */

    /* TEXT ADJUSTMENTS */
    .product-title {
        font-size: 12px !important;
        -webkit-line-clamp: 2 !important;
    }

    .product-price {
        font-size: 14px !important;
    }

    .product-description {
        display: none !important; /* Hide description on very small screens */
    }

    /* BUTTON ADJUSTMENTS */
    .btn-full {
        font-size: 10px !important;
        padding: 7px 4px !important;
    }

    .btn-icon {
        width: 12px !important;
        height: 12px !important;
    }

    /* PROMOTIONAL BLOCK ADJUSTMENTS */
    .promotional-block {
        padding: 12px !important;
        margin: 12px 0 !important;
    }

    .promo-content h3 {
        font-size: 14px !important;
    }

    .promo-features {
        gap: 12px !important;
    }

    /* SIZE GUIDE BADGE */
    .size-guide-badge {
        width: 16px !important;
        height: 16px !important;
        font-size: 8px !important;
    }
}

/* ===== ACCESSIBILITY AND PERFORMANCE ===== */
@media (prefers-reduced-motion: reduce) {
    .product-card,
    .promotional-block,
    .product-image {
        transition: none !important;
        animation: none !important;
    }

    .product-card:hover {
        transform: none !important;
    }
}

/* ===== DARK MODE SUPPORT (if needed) ===== */
@media (prefers-color-scheme: dark) {
    .product-card {
        background: #1a202c !important;
        color: white !important;
    }

    .image-frame {
        background: #2d3748 !important;
        border-color: #4a5568 !important;
    }

    .product-image {
        background: #2d3748 !important;
    }
}

/* ===== PRINT STYLES (hide unnecessary elements when printing) ===== */
@media print {
    .promotional-block,
    .product-actions,
    .size-guide-badge {
        display: none !important;
    }

    .product-card {
        break-inside: avoid !important;
    }
}