/**
 * Hello Middleton - Single Classified Listing
 * High-end product detail page styling.
 *
 * @package BuddyX_Child
 * @since 3.3.0
 */

@layer components {

    .hm-single-listing {
        background: var(--hm-bg);
        padding-bottom: var(--space-12);
    }

    .hm-single-listing__container {
        max-width: var(--content-width);
        margin: 0 auto;
        padding: 0 var(--space-4);
    }

    /* Breadcrumb */
    .hm-single-listing__breadcrumb {
        padding: var(--space-4) 0;
        font-size: var(--text-sm);
        color: var(--hm-text-muted);
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    .hm-single-listing__breadcrumb a {
        color: var(--hm-text-secondary);
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .hm-single-listing__breadcrumb a:hover {
        color: var(--hm-primary);
    }

    /* Main Layout */
    .hm-single-listing__content {
        display: grid;
        grid-template-columns: 1fr 340px;
        gap: var(--space-8);
        margin-top: var(--space-6);
    }

    /* Gallery */
    .hm-listing-gallery {
        background: var(--hm-bg-elevated);
        border-radius: var(--radius-xl);
        overflow: hidden;
        border: 1px solid var(--hm-border);
        margin-bottom: var(--space-6);
    }

    .hm-listing-gallery__main {
        aspect-ratio: 16 / 9;
        background: var(--hm-bg-subtle);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hm-listing-gallery__main img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* Title & Price Hero */
    .hm-single-listing__title {
        font-family: var(--font-display);
        font-size: var(--text-3xl);
        color: var(--hm-text);
        margin: 0 0 var(--space-4);
        line-height: 1.2;
    }

    .hm-price-hero {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-4) var(--space-6);
        background: var(--hm-bg-elevated);
        border: 1px solid var(--hm-border);
        border-radius: var(--radius-lg);
        margin-bottom: var(--space-6);
    }

    .hm-price-hero__amount {
        font-family: var(--font-mono);
        font-size: var(--text-2xl);
        font-weight: 700;
        color: var(--hm-success);
    }

    .hm-price-hero__amount--free {
        color: var(--hm-pop);
    }

    /* Description */
    .hm-single-listing__description {
        font-family: var(--font-body);
        font-size: var(--text-base);
        line-height: 1.6;
        color: var(--hm-text-secondary);
        background: var(--hm-bg-elevated);
        padding: var(--space-6);
        border-radius: var(--radius-lg);
        border: 1px solid var(--hm-border);
        margin-bottom: var(--space-6);
    }

    /* Sidebar - Seller Card */
    .hm-seller-card {
        background: var(--hm-bg-elevated);
        border: 1px solid var(--hm-border);
        border-radius: var(--radius-lg);
        padding: var(--space-6);
        text-align: center;
        position: sticky;
        top: 100px;
    }

    .hm-seller-card__avatar img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin-bottom: var(--space-3);
        border: 3px solid var(--hm-bg-subtle);
    }

    .hm-seller-card__name {
        font-size: var(--text-lg);
        font-weight: 700;
        margin: 0 0 var(--space-1);
    }

    .hm-seller-card__contact-btn {
        display: block;
        width: 100%;
        padding: var(--space-3);
        background: var(--hm-primary);
        color: white;
        font-weight: 700;
        text-decoration: none;
        border-radius: var(--radius-full);
        margin-top: var(--space-4);
        transition: background 0.2s ease;
    }

    .hm-seller-card__contact-btn:hover {
        background: var(--hm-primary-hover);
        color: white;
    }

    @media (max-width: 992px) {
        .hm-single-listing__content {
            grid-template-columns: 1fr;
        }
        
        .hm-seller-card {
            position: static;
            margin-top: var(--space-6);
        }
    }
}