/* Outsole Lace Matcher — category-archive embed.
   Builds on lace-matcher.css; that file defines the .olm- CSS variables and
   shared styles. The matcher widget is the upload box + (after upload) the
   uploaded photo and the extracted-colour swatches. Tapping a swatch hands
   the hex to FacetWP via archive.js; the WC archive grid handles the rest. */

.olm-archive,
.olm-archive *,
.olm-archive *::before,
.olm-archive *::after { box-sizing: border-box; }

.olm-archive[hidden] { display: none; }

.olm-archive {
    margin: 0 0 1.5rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* neutralise the shortcode .olm-app page sizing for the embed */
.olm-archive .olm-app {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* --- SEO text + compact upload widget, side by side --- */

.olm-seo-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
}

.olm-seo-row .term-description {
    flex: 2 1 320px;
    min-width: 0;
    margin: 0;
}

/* Upload widget container: label + drop-zone + (after upload) shoe + swatches */
.olm-compact {
    flex: 1 1 240px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.olm-compact-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--olm-primary);
}

.olm-compact .olm-drop-zone { padding: 1.5rem 1rem; }
.olm-compact .olm-drop-content svg { width: 28px; height: 28px; }
.olm-compact .olm-drop-primary { font-size: 0.85rem; }
.olm-compact .olm-drop-secondary { font-size: 0.72rem; }

/* --- shoe preview + swatches (rendered into #olm-top-box after upload) --- */

/* Hidden until the matcher has rendered an image. lace-matcher.js adds
   `olm-state-results` to #olm-archive after a successful upload. */
.olm-archive .olm-top-box { display: none; }
.olm-archive.olm-state-results .olm-top-box {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem;
    align-items: start;
    background: #fff;
    border: 1px solid var(--olm-border);
    border-radius: 12px;
    padding: 0.85rem;
}

.olm-archive .olm-shoe-area { display: block; min-width: 0; }

.olm-archive .olm-shoe-image-wrap {
    width: fit-content;
    max-width: 100%;
}

.olm-archive .olm-shoe-image-wrap img {
    width: auto;
    max-width: 220px;
    display: block;
}

.olm-archive .olm-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-content: flex-start;
}

/* --- Hide the standard FacetWP Color (Kleuren) facet while a hex is active.
       The active hex is the matcher's "filter" so the standard colour picker
       would be redundant and confusing. Restored when hex is cleared. --- */

body.olm-hex-active .facetwp-facet[data-name="colors"],
body.olm-hex-active .facetwp-facet-colors {
    display: none !important;
}

/* --- Background refresh after a swatch click: the client-side rerank
       already showed the correct order, so suppress FacetWP's loading dim
       and spinner. The DOM swap when the response arrives is essentially
       identical content and the user shouldn't notice it. --- */

body.olm-bg-refresh .facetwp-template.facetwp-loading,
body.olm-bg-refresh .facetwp-template.is-loading,
body.olm-bg-refresh .facetwp-loading,
body.olm-bg-refresh .facetwp-template[data-loaded="false"] {
    opacity: 1 !important;
    pointer-events: auto !important;
}
body.olm-bg-refresh .facetwp-overlay,
body.olm-bg-refresh .facetwp-loading-overlay,
body.olm-bg-refresh .facetwp-spinner {
    display: none !important;
}

/* --- Responsive --- */

@media (max-width: 749px) {
    .olm-seo-row { gap: 1rem; }
    .olm-seo-row .term-description,
    .olm-compact { flex-basis: 100%; }
    .olm-archive.olm-state-results .olm-top-box {
        grid-template-columns: 1fr;
    }
    .olm-archive .olm-shoe-image-wrap,
    .olm-archive .olm-shoe-image-wrap img { max-width: 100%; }
    .olm-archive .olm-palette { justify-content: center; }
}