/*
 * Meridian — PLP Enhancements
 *
 * - Product card image flip on hover (desktop)
 * - Touch swipe between images (handled by JS, styles here)
 * - AJAX Load More button + progress bar
 * - Category SEO top / bottom description areas
 */

/* =========================================================================
 * Image flip — desktop hover
 * ====================================================================== */

.meridian-card-image-flip {
        position: relative;
        overflow: hidden;
}

/* Primary image */
.meridian-card-image-flip img.wp-post-image,
.meridian-card-image-flip .woocommerce-product-gallery__image img {
        display: block;
        width: 100%;
        transition: opacity var(--wp--custom--transition--enter, 0.35s ease);
}

/* Secondary image — absolutely positioned, fades in on hover */
.meridian-card-image-flip__secondary {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--wp--custom--transition--enter, 0.35s ease);
}

@media (hover: hover) {
        .meridian-card-image-flip:hover .meridian-card-image-flip__secondary {
                opacity: 1;
        }

        .meridian-card-image-flip:hover img.wp-post-image,
        .meridian-card-image-flip:hover .woocommerce-product-gallery__image img:first-child {
                opacity: 0;
        }
}

/* Mobile swipe indicator dots */
.meridian-card-image-dots {
        position: absolute;
        bottom: var(--wp--preset--spacing--8, 6px);
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 4px;
        pointer-events: none;
}

.meridian-card-image-dots__dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: var(--wp--preset--color--surface, #FAFAF9);
        opacity: 0.6;
        transition: opacity 0.2s;
}

.meridian-card-image-dots__dot--active {
        opacity: 1;
}

/* =========================================================================
 * Load More
 * ====================================================================== */

.meridian-load-more-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--wp--preset--spacing--16, 1rem);
        padding: var(--wp--preset--spacing--32, 2rem) 0 var(--wp--preset--spacing--48, 3rem);
}

.meridian-load-more-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 44px;
        padding: 0 var(--wp--preset--spacing--32, 2rem);
        border: 1px solid var(--wp--preset--color--ink, #0F0F0F);
        background-color: transparent;
        color: var(--wp--preset--color--ink, #0F0F0F);
        font-family: var(--wp--preset--font-family--body, sans-serif);
        font-size: var(--wp--preset--font-size--sm, 0.875rem);
        font-weight: 500;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        cursor: pointer;
        transition:
                background-color var(--wp--custom--transition--base, 0.2s ease),
                color var(--wp--custom--transition--base, 0.2s ease);
}

.meridian-load-more-btn:hover:not(:disabled) {
        background-color: var(--wp--preset--color--ink, #0F0F0F);
        color: var(--wp--preset--color--surface, #FAFAF9);
}

.meridian-load-more-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
}

/* Progress bar */
.meridian-load-more-progress {
        width: 180px;
        height: 2px;
        background-color: var(--wp--preset--color--neutral-100, #E8E7E4);
        overflow: hidden;
        display: none;
}

.meridian-load-more-progress--active {
        display: block;
}

.meridian-load-more-progress__bar {
        height: 100%;
        width: 0;
        background-color: var(--wp--preset--color--ink, #0F0F0F);
        transition: width 0.3s ease;
}

/* =========================================================================
 * Category SEO descriptions
 * ====================================================================== */

.meridian-category-seo-top {
        margin-block-end: var(--wp--preset--spacing--32, 2rem);
}

.meridian-category-seo-top__image {
        margin-block-end: var(--wp--preset--spacing--24, 1.5rem);
}

.meridian-category-seo-top__image img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 4px;
}

.meridian-category-seo-top__heading {
        font-size: var(--wp--preset--font-size--xl, 1.25rem);
        font-weight: 400;
        font-family: var(--wp--preset--font-family--heading, serif);
        margin-block-end: var(--wp--preset--spacing--16, 1rem);
}

.meridian-category-seo-top__intro {
        padding: var(--wp--preset--spacing--24, 1.5rem);
        border-left: 3px solid var(--wp--preset--color--accent, #C4A882);
        background-color: var(--wp--preset--color--neutral-50, #F5F4EF);
        font-size: var(--wp--preset--font-size--sm, 0.875rem);
        line-height: 1.7;
        color: var(--wp--preset--color--neutral-700, #3D3D3D);
}

.meridian-category-seo-top__intro p:last-child {
        margin-bottom: 0;
}

.meridian-category-bottom-desc {
        margin-block-start: var(--wp--preset--spacing--48, 3rem);
        padding-block-start: var(--wp--preset--spacing--32, 2rem);
        border-top: 1px solid var(--wp--preset--color--neutral-100, #E8E7E4);
        font-size: var(--wp--preset--font-size--sm, 0.875rem);
        line-height: 1.8;
        color: var(--wp--preset--color--neutral-600, #5A5A5A);
        max-width: 72ch;
}

.meridian-category-bottom-desc p:last-child {
        margin-bottom: 0;
}