/**
 * IMS Catalog Browser Block Styles
 *
 * Card-grid drill-down catalogue picker. Mirrors the look of
 * `ims/category-blocks` in its no-products / parent-page layout
 * (image + name + cumulative counts) so the visitor sees the same
 * tile design whether they're at the root of the catalogue or one
 * level deep on an actual category archive.
 *
 * Levels stack vertically inside the wrapper but only the currently
 * active level is visible — the front-end JS toggles the `data-active`
 * attribute as the user drills in or backs out.
 *
 * @package IMS_by_Soul_Country
 */

/* ==========================================================================
   Container
   ========================================================================== */

.ims-cat-browser {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ==========================================================================
   Search
   ========================================================================== */

.ims-cat-browser__search {
    position: relative;
    max-width: 500px;
    margin-right: auto;
    width: 100%;
}

.ims-cat-browser__search-input {
    width: 100%;
    padding: 0.75rem 3rem 0.75rem 1rem;
    border: 1px solid var(--color-light-gray, #d1d5db);
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--color-dark, #111111);
    background: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ims-cat-browser__search-input:focus {
    outline: none;
    border-color: var(--color-cta, #FAB000);
    box-shadow: 0 0 0 3px rgba(250, 176, 0, 0.18);
}

.ims-cat-browser__search-clear {
    position: absolute;
    right: 2.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--color-gray, #6b7280);
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
}

.ims-cat-browser__search-clear:hover {
    color: var(--color-dark, #111111);
}

.ims-cat-browser__search-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gray, #6b7280);
    pointer-events: none;
    display: flex;
    align-items: center;
}

/* ==========================================================================
   Breadcrumb / drill bar
   ========================================================================== */

.ims-cat-browser__breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    background: #f8f9fa;
    border: 1px solid #e8eaed;
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--color-dark, #111111);
}

.ims-cat-browser__back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff;
    color: var(--color-dark, #111111);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Author rules above set an explicit `display:` value, which would
   normally beat the user-agent `[hidden] { display: none }` rule.
   Restore the expected behaviour so the JS-toggled `hidden` attribute
   actually hides the button at the top level (e.g. when the path is
   just "All"). Same applies to the search-clear "x" button. */
.ims-cat-browser__back[hidden],
.ims-cat-browser__search-clear[hidden] {
    display: none !important;
}

.ims-cat-browser__back:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.ims-cat-browser__crumbs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.ims-cat-browser__crumbs li {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.ims-cat-browser__crumbs li + li::before {
    content: "/";
    margin: 0 6px;
    color: #9ca3af;
}

.ims-cat-browser__crumb {
    background: none;
    border: none;
    padding: 2px 4px;
    margin: 0;
    color: #4b5563;
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.15s ease, color 0.15s ease;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ims-cat-browser__crumb:hover {
    background: #ffffff;
    color: var(--color-dark, #111111);
}

.ims-cat-browser__crumb.is-current {
    color: var(--color-dark, #111111);
    font-weight: 600;
    cursor: default;
}

.ims-cat-browser__crumb.is-current:hover {
    background: transparent;
}

/* ==========================================================================
   Levels
   Each level container holds one parent's children. Only the active
   level (and the search-results level when searching) is visible.
   ========================================================================== */

.ims-cat-browser__levels {
    position: relative;
}

.ims-cat-browser__level {
    display: none;
}

.ims-cat-browser__level[data-active] {
    display: block;
}

.ims-cat-browser__level[hidden] {
    display: none !important;
}

/* Search summary banner sits above the search-results card grid. */
.ims-cat-browser__search-summary {
    margin-bottom: 12px;
    padding: 8px 12px;
    background: #fef9e7;
    border: 1px solid #f5d66b;
    border-radius: 6px;
    font-size: 0.8125rem;
    color: #6b4f00;
}

.ims-cat-browser__search-summary strong {
    font-weight: 700;
    color: #1f2937;
}

/* ==========================================================================
   Card grid
   Visually matches `ims/category-blocks` in --no-products mode: an
   auto-fill grid of rounded tiles with image + name + cumulative meta.
   ========================================================================== */

.ims-cat-browser__row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.ims-cat-browser__card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px 8px 8px;
    border: 1.5px solid #e8eaed;
    border-radius: 10px;
    background: #ffffff;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    cursor: pointer;
}

.ims-cat-browser__card:hover,
.ims-cat-browser__card:focus-visible {
    background: var(--color-gold-pale, #FEE8A0);
    border-color: var(--color-cta, #FAB000);
    box-shadow: 0 4px 12px -8px rgba(0, 0, 0, 0.18);
    color: #1a1a1a;
    transform: translateY(-1px);
}

.ims-cat-browser__card-image {
    position: relative;
    flex-shrink: 0;
    width: 104px;
    height: 104px;
    border-radius: 8px;
    background: #f3f4f6;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ims-cat-browser__card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.ims-cat-browser__card-image-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64%;
    height: 64%;
    color: #9ca3af;
}

.ims-cat-browser__card-image-placeholder svg {
    width: 100%;
    height: 100%;
}

/* Mapped-image confirmation tick — same green pip used on
   `ims/category-blocks` so the visual signal is consistent. */
.ims-cat-browser__card-tick {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #16a34a;
    color: #ffffff;
    box-shadow: 0 0 0 2px #ffffff;
}

.ims-cat-browser__card-tick svg {
    width: 10px;
    height: 10px;
}

.ims-cat-browser__card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.ims-cat-browser__card-name {
    font-weight: 600;
    line-height: 1.3;
    color: #1a1a1a;
    white-space: normal;
}

.ims-cat-browser__card-path {
    font-size: 11px;
    font-weight: 400;
    color: #9ca3af;
    line-height: 1.3;
    /* Path text only appears for search results / breadcrumb hint —
       hidden by default to keep the standard cards uncluttered. */
    display: none;
}

.ims-cat-browser__card-meta {
    font-size: 11.5px;
    font-weight: 400;
    color: #6b7280;
    line-height: 1.3;
}

.ims-cat-browser__card-arrow {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #9ca3af;
    transition: transform 0.15s ease, color 0.15s ease;
}

.ims-cat-browser__card:hover .ims-cat-browser__card-arrow,
.ims-cat-browser__card:focus-visible .ims-cat-browser__card-arrow {
    color: var(--color-cta, #FAB000);
    transform: translateX(2px);
}

/* In search mode we surface the parent path inside each result so the
   user can disambiguate similarly-named leaves. */
.ims-cat-browser__row--search .ims-cat-browser__card-path {
    display: block;
}

/* "In this category" synthetic card.
   Sits at the start of any level whose parent term has products
   directly attached to it, so visitors can jump straight into the
   parent's archive instead of having to drill through subcategories.
   Subtly tinted (pale gold) so it reads as a related-but-different
   surface from the sibling subcategory cards. */
.ims-cat-browser__card--self {
    background: var(--color-gold-pale, #FEE8A0);
    border-color: color-mix(in srgb, var(--color-cta, #FAB000) 35%, #e8eaed);
}

.ims-cat-browser__card--self:hover,
.ims-cat-browser__card--self:focus-visible {
    background: color-mix(in srgb, var(--color-gold-pale, #FEE8A0) 70%, #ffffff);
    border-color: var(--color-cta, #FAB000);
}

.ims-cat-browser__card-self-eyebrow {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-cta, #FAB000) 70%, #1a1a1a);
    line-height: 1.3;
    margin-bottom: 1px;
}

/* Leaf-style arrow used by the self card. The standard chevron
   already has its own hover-translate rule; the leaf arrow gets the
   same forward-nudge so the affordance feels consistent. */
.ims-cat-browser__card--self .ims-cat-browser__card-arrow--leaf {
    color: color-mix(in srgb, var(--color-cta, #FAB000) 60%, #1a1a1a);
}

.ims-cat-browser__card--self:hover .ims-cat-browser__card-arrow--leaf,
.ims-cat-browser__card--self:focus-visible .ims-cat-browser__card-arrow--leaf {
    color: var(--color-cta, #FAB000);
    transform: translateX(2px);
}

/* Highlight any `<mark>` inside card names (used to underline the
   matched substring during search). */
.ims-cat-browser mark {
    background: var(--color-gold-pale, rgba(250, 176, 0, 0.25));
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}

/* ==========================================================================
   No results
   ========================================================================== */

.ims-cat-browser__no-results {
    text-align: center;
    padding: 2rem 1rem;
    color: #6b7280;
    font-style: italic;
    margin: 0;
}

/* ==========================================================================
   Editor preview
   The block in the editor is rendered via ServerSideRender — we only
   need to dial back any hover transforms that fight the editor's own
   selection chrome.
   ========================================================================== */

.ims-cat-accordion-editor .ims-cat-browser__card:hover,
.ims-cat-accordion-editor .ims-cat-browser__card:focus-visible {
    background: #ffffff;
    transform: none;
    box-shadow: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 700px) {
    .ims-cat-browser__row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .ims-cat-browser__card-image {
        width: 80px;
        height: 80px;
    }

    .ims-cat-browser__breadcrumb {
        font-size: 0.8125rem;
    }

    .ims-cat-browser__crumb {
        max-width: 160px;
    }
}