/**
 * AI Product Recommender
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Commercial License
 * you can't distribute, modify or sell this code
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file
 * If you need help please contact leo@prestachamps.com
 *
 * @author    PrestaChamps
 * @copyright PrestaChamps
 * @license   commercial
 */

/* ==========================================================================
   psairec-explorer: Insights > Explorer (sections/insights_explorer.tpl,
   psairec-insights.js) on top of the UI kit psairec-ui.css and its tokens
   (--psairec-*). One product search, "More options", then one row per
   strategy in three groups: name, tagline, "Used by" on the left, a strip of
   product thumbnails with the reason of the one pointed at on the right.
   Every rule is scoped to the admin page.
   ========================================================================== */

/* ---- "More options" (customer, number of products) ---------------------- */

:is(.psairec-ui, #psairec-ui) details.psairec-explorer-more {
    border: 1px solid var(--psairec-line);
    border-radius: var(--psairec-radius);
    background: var(--psairec-foot);
}

:is(.psairec-ui, #psairec-ui) .psairec-explorer-more-summary,
:is(.psairec-ui, #psairec-ui) .psairec-explorer-look-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 10px 14px;
    color: var(--psairec-ink);
    font-weight: 700;
    cursor: pointer;
}

:is(.psairec-ui, #psairec-ui) .psairec-explorer-more-summary .psairec-hint,
:is(.psairec-ui, #psairec-ui) .psairec-explorer-look-summary .psairec-hint {
    font-weight: 400;
}

:is(.psairec-ui, #psairec-ui) .psairec-explorer-more-summary:focus-visible,
:is(.psairec-ui, #psairec-ui) .psairec-explorer-look-summary:focus-visible {
    outline: 2px solid var(--psairec-brand);
    outline-offset: 2px;
}

:is(.psairec-ui, #psairec-ui) .psairec-explorer-more-body {
    padding: 4px 14px 14px;
    border-top: 1px solid var(--psairec-line);
}

/* ---- The groups and their rows ------------------------------------------ */

:is(.psairec-ui, #psairec-ui) .psairec-card-body.psairec-explorer-out {
    padding-top: 6px;
}

:is(.psairec-ui, #psairec-ui) .psairec-explorer-tip {
    margin: 0;
    font-size: 12.5px;
}

:is(.psairec-ui, #psairec-ui) .psairec-explorer-out .psairec-xgroup + .psairec-xgroup {
    margin-top: 24px;
}

:is(.psairec-ui, #psairec-ui) .psairec-xgroup-head {
    margin: 0 0 8px;
}

:is(.psairec-ui, #psairec-ui):is(.psairec-ui, #psairec-ui) .psairec-xgroup h3.psairec-xgroup-title {
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--psairec-ink);
}

:is(.psairec-ui, #psairec-ui) .psairec-xgroup-hint {
    margin: 2px 0 0;
    font-size: 12.5px;
}

:is(.psairec-ui, #psairec-ui) ul.psairec-xrows {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--psairec-line);
    border-radius: var(--psairec-radius);
    background: #fff;
}

:is(.psairec-ui, #psairec-ui) .psairec-xrows > .psairec-xrow {
    display: grid;
    grid-template-columns: minmax(200px, 270px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    margin: 0;
    padding: 12px 14px;
}

:is(.psairec-ui, #psairec-ui) .psairec-xrows > .psairec-xrow + .psairec-xrow {
    border-top: 1px solid var(--psairec-line);
}

/* The (i) stays beside the name: a long name wraps inside its own box, the button keeps its first line. */
:is(.psairec-ui, #psairec-ui):is(.psairec-ui, #psairec-ui) .psairec-xrow h4.psairec-xrow-name {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--psairec-ink);
}

:is(.psairec-ui, #psairec-ui) .psairec-xrow h4.psairec-xrow-name > span {
    flex: 0 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
}

:is(.psairec-ui, #psairec-ui) .psairec-xrow h4.psairec-xrow-name > .psairec-info-btn {
    flex: 0 0 auto;
    margin: 0;
}

:is(.psairec-ui, #psairec-ui) .psairec-xrow-tagline {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--psairec-ink-2);
}

:is(.psairec-ui, #psairec-ui) .psairec-xrow-used {
    margin: 6px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--psairec-brand-dark);
}

:is(.psairec-ui, #psairec-ui) .psairec-xrow-used.is-unused {
    font-weight: 400;
    color: var(--psairec-muted);
}

:is(.psairec-ui, #psairec-ui) .psairec-xrow-products {
    min-width: 0;
}

:is(.psairec-ui, #psairec-ui) .psairec-xrow-note,
:is(.psairec-ui, #psairec-ui) .psairec-xrow-why {
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.4;
}

:is(.psairec-ui, #psairec-ui) .psairec-xrow-note {
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--psairec-warning-tint);
    color: var(--psairec-warning);
}

:is(.psairec-ui, #psairec-ui) .psairec-xrow-strip:empty + .psairec-xrow-note {
    margin-top: 0;
}

:is(.psairec-ui, #psairec-ui) .psairec-xrow-why {
    color: var(--psairec-ink-2);
}

/* ---- The thumbnails: one scrolling strip per strategy ------------------- */

:is(.psairec-ui, #psairec-ui) ul.psairec-xthumbs {
    position: relative;
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 2px 2px 6px;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

:is(.psairec-ui, #psairec-ui) .psairec-xthumbs > .psairec-xthumbs-item {
    flex: none;
    margin: 0;
    scroll-snap-align: start;
}

/* Positioned: its visually hidden reason (.psairec-sr) stays inside the scrolling strip. */
:is(.psairec-ui, #psairec-ui) button.psairec-xthumb {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 96px;
    height: 100%;
    margin: 0;
    padding: 6px;
    border: 1px solid var(--psairec-line);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    text-align: left;
    color: var(--psairec-ink);
    cursor: pointer;
}

:is(.psairec-ui, #psairec-ui) button.psairec-xthumb:hover,
:is(.psairec-ui, #psairec-ui) button.psairec-xthumb.is-active {
    border-color: var(--psairec-brand-line);
    box-shadow: 0 0 0 3px var(--psairec-brand-ring);
}

:is(.psairec-ui, #psairec-ui) button.psairec-xthumb:focus-visible {
    outline: 2px solid var(--psairec-brand);
    outline-offset: 1px;
}

:is(.psairec-ui, #psairec-ui) button.psairec-xthumb.is-unavailable .psairec-xthumb-img {
    opacity: .55;
}

:is(.psairec-ui, #psairec-ui) .psairec-xthumb-img {
    display: block;
    width: 82px;
    height: 82px;
    border-radius: 6px;
    background: var(--psairec-soft);
    object-fit: contain;
}

:is(.psairec-ui, #psairec-ui) .psairec-xthumb-name {
    display: -webkit-box;
    margin-top: 6px;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.3;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

:is(.psairec-ui, #psairec-ui) .psairec-xthumb-price {
    margin-top: auto;
    padding-top: 3px;
    font-size: 12px;
    font-weight: 700;
}

:is(.psairec-ui, #psairec-ui) .psairec-xthumb-stock {
    font-size: 11px;
    color: var(--psairec-danger);
}

/* ---- While every strategy is asked -------------------------------------- */

:is(.psairec-ui, #psairec-ui) .psairec-explorer-out.is-loading .psairec-xrow-products {
    opacity: .45;
    transition: opacity .15s;
}

:is(.psairec-ui, #psairec-ui) .psairec-explorer-out.is-loading .psairec-xrow-strip:empty::before {
    content: "";
    display: block;
    height: 124px;
    border-radius: 8px;
    background: repeating-linear-gradient(90deg, var(--psairec-soft) 0 96px, transparent 96px 106px);
}

/* ---- "See a block in your theme" ---------------------------------------- */

:is(.psairec-ui, #psairec-ui) .psairec-explorer-look-title {
    font-size: 15px;
}

:is(.psairec-ui, #psairec-ui) .psairec-explorer-look-details[open] > .psairec-explorer-look-summary {
    border-bottom: 1px solid var(--psairec-line);
}

:is(.psairec-ui, #psairec-ui) .psairec-explorer-look .psairec-frame {
    margin-top: 12px;
}

/* ---- Narrow screens: the strip under the name --------------------------- */

@media (max-width: 900px) {
    :is(.psairec-ui, #psairec-ui) .psairec-xrows > .psairec-xrow {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
}

@media (max-width: 600px) {
    :is(.psairec-ui, #psairec-ui) .psairec-xrows > .psairec-xrow {
        padding: 10px;
    }

    :is(.psairec-ui, #psairec-ui) button.psairec-xthumb {
        width: 88px;
    }

    :is(.psairec-ui, #psairec-ui) .psairec-xthumb-img {
        width: 74px;
        height: 74px;
    }
}