/**
 * Product Listing Styles - Mobile Only
 * Loaded only on screens ≤ 768px
 * Compact, touch-friendly design
 */

@media (max-width: 768px) {
    /* =================================
       Mobile Grid Container
       ================================= */
    .products.wrapper.list {
        padding: 0.75rem;
    }

    .products.list.items.product-items {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.25rem !important;
    }

    /* =================================
       Mobile Product Cards
       ================================= */
    .product-item {
        margin-bottom: 0;
        width: 100%;
    }

    .product-item-info.card {
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border: 1px solid #e5e5e5;
        background: white;
    }

    .product-item-details.card-body {
        padding: 1rem;
    }

    /* =================================
       Mobile Image
       ================================= */
    /* Container link */
    a.product-item-photo {
        position: relative;
        width: 100%;
        display: block;
        overflow: hidden;
    }

    /* Override Magento's inline styles - mobile with fixed height */
    a.product-item-photo > span[class*="product-image-container"] {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: 220px !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    a.product-item-photo > span[class*="product-image-container"] > span.product-image-wrapper {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
    }

    a.product-item-photo > span[class*="product-image-container"] > span.product-image-wrapper > img.product-image-photo {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
    }

    /* =================================
       Mobile Typography
       ================================= */
    .product-item-name {
        font-size: 1rem;
        line-height: 1.4;
        margin-bottom: 0.5rem;
        font-weight: 600;
        color: #1e3a5f;
    }

    .product-item-name .product-item-link {
        color: inherit;
        text-decoration: none;
    }

    .product-address {
        font-size: 0.875rem;
        margin-bottom: 0.75rem;
        color: #666;
        line-height: 1.4;
    }

    .product-item-description {
        font-size: 0.875rem;
        line-height: 1.5;
        color: #555;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 0.75rem;
    }

    /* =================================
       Mobile Features
       ================================= */
    .product-features {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        margin-bottom: 1rem;
        padding: 0;
        list-style: none;
    }

    .product-features li {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        font-size: 0.875rem;
        color: #555;
    }

    .product-features i {
        font-size: 1rem;
        color: var(--era-red, #e4002a);
    }

    .feature-value {
        font-weight: 600;
        color: #333;
    }

    .feature-label {
        font-size: 0.75rem;
        color: #666;
    }

    /* =================================
       Mobile Price (on image)
       ================================= */
    .product-item-photo .price-box {
        position: absolute;
        bottom: 12px;
        right: 12px;
        background: rgba(255, 255, 255, 0.95);
        padding: 0.5rem 0.75rem;
        border-radius: 6px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }

    .product-item-photo .price-box .price {
        font-size: 1.125rem !important;
        font-weight: 700 !important;
        color: var(--era-navy, #1e3a5f);
    }

    .product-item-photo .price-box .old-price {
        margin-right: 0.5rem;
    }

    .product-item-photo .price-box .old-price .price {
        font-size: 0.875rem !important;
        text-decoration: line-through;
        color: #999;
    }

    .product-item-photo .price-box .special-price .price {
        font-size: 1.125rem !important;
        color: var(--era-red, #e4002a);
    }

    /* =================================
       Mobile Badge
       ================================= */
    .product-badge {
        position: absolute;
        top: 12px;
        padding: 0.375rem 0.625rem;
        font-size: 0.6875rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-radius: 4px;
        z-index: 10;
    }

    .property-badge.status-badge {
        left: 12px;
    }

    .property-badge.type-badge {
        right: 12px;
    }

    /* =================================
       Mobile Actions
       ================================= */
    .product-item-actions .listing-link,
    .product-item-actions .action.primary {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 0.875rem;
        font-size: 0.9375rem;
        font-weight: 600;
        border-radius: 6px;
        min-height: 48px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: all 0.2s;
    }

    .product-item-actions {
        margin-top: 1rem;
    }

    /* =================================
       Mobile Touch Optimization
       ================================= */
    .product-item-link {
        -webkit-tap-highlight-color: rgba(228, 0, 42, 0.1);
    }

    /* Increase tap target size */
    .product-item-actions form {
        min-height: 48px;
    }

    /* =================================
       Mobile Empty State
       ================================= */
    .message.info.empty {
        padding: 2rem 1rem;
        font-size: 1rem;
        margin: 1rem 0;
        text-align: center;
        border-radius: 8px;
    }

    /* =================================
       Mobile: Remove desktop-specific styles
       ================================= */
    .product-item-info {
        display: block !important;
    }

    /* =================================
       Mobile: Card spacing
       ================================= */
    .listing-card {
        margin-bottom: 0 !important;
    }

    /* =================================
       Mobile: Bottom toolbar spacing
       ================================= */
    .toolbar-bottom {
        margin-top: 1.5rem !important;
    }
}