/**
 * TransferJet — Amasty Finder.
 *
 * S = SpeedTheme web/css/source/_am-jet-extend.less
 *
 *   inactive ring   #cc2532                                    S
 *   submit          #007b0f, hover #00bd17, radius 6px         S
 *   panel           @amtheme__background-secondary__color      S
 *
 * .am-finder-inactive-warning is applied by Alpine from isShowActions, never
 * server-rendered. SpeedTheme derived it from Block\Form::isButtonsVisible(),
 * which reads session state inside a full-page-cached block, so one visitor's
 * state was served to everyone.
 */

.amfinder-common-wrapper {
    background: var(--color-bg-alt);
    border: 3px solid transparent;
    border-radius: 10px;
    /* The 3px border is transparent until the warning ring colours it, so it
       cannot also carry the resting line. background-clip is border-box, so
       the panel's visible edge is that band's outer edge — where a non-inset
       1px shadow lands. An inset one sits 3px in and reads as a stray
       outline. */
    box-shadow: 0 0 0 1px var(--color-border);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

/* A grey hairline outside 3px of red reads as an artefact, not an edge. */
.amfinder-common-wrapper.am-finder-inactive-warning {
    border-color: #cc2532;
    box-shadow: none;
}

/*
 * The dropdowns are native <select>: amfinder/advanced/is_chosen_enable is 0
 * (manual-db-changes/finder-chosen.md), so amfinder.phtml takes its second
 * branch rather than the Alpine dropdown.
 *
 * Deliberate. The lists are ~35, ~20 and ~5 options; native brings type-ahead
 * and the OS picker for free and avoids the custom panel clipping inside this
 * wrapper's radius. The cost is the search field, and the handoff's styled
 * option rows, which are not reachable on this path.
 */
.amfinder-common-wrapper .amfinder-dropdown {
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    /* Own chevron, since appearance:none removes the platform one. Grey, not
       brand red: red is what the inactive ring means, and this control is
       merely available. #6b6866 matches the filter panel's chevrons. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%236b6866' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-position: right 14px center;
    background-repeat: no-repeat;
    background-size: 13px 13px;
    border-radius: 10px;
    /* Up from 14.5px; the finder was reading smaller than the filters beside
       it. Height comes from padding so the type sits where it did. */
    font-size: 1rem;
    padding: 14px 40px 14px 14px;
}

/*
 * Bold and full-strength in every state: an empty finder reads as an
 * instruction and a filled one as a statement, and neither wants to recede.
 * The dependent dropdowns carry Amasty's disabled:opacity-70, which is the
 * only recessive state this control needs.
 *
 * Set on the option as well as the select — some engines render the closed
 * trigger from the selected option's computed style rather than the select's.
 */
.amfinder-common-wrapper .amfinder-dropdown,
.amfinder-common-wrapper .amfinder-dropdown option {
    color: #1f1a16;
    font-weight: 700;
}

/*
 * A <select> defaults to cursor: default and preflight does not change it.
 * Scoped to :enabled rather than set flat and undone: this sheet loads after
 * styles.css, so at equal specificity a flat rule would beat the template's
 * disabled:cursor-default and give dead controls a pointer.
 */
.amfinder-common-wrapper .amfinder-dropdown:enabled {
    cursor: pointer;
}

/*
 * The dependent dropdowns before their parent is chosen. WebKit applies its
 * own -webkit-text-fill-color to disabled controls, which overrides `color`
 * regardless of specificity — the rule appears to win in DevTools while never
 * painting. Faded text also reads lighter in weight than it is, which is why
 * these looked unbold at 700. A solid mid grey at full opacity instead.
 */
.amfinder-common-wrapper .amfinder-dropdown:disabled,
.amfinder-common-wrapper .amfinder-dropdown:disabled option {
    -webkit-text-fill-color: #6b6866;
    color: #6b6866;
    opacity: 1;
}

/* A step lighter again than the enabled chevron, so "not yet available" still
   reads now that both are grey rather than grey against red. */
.amfinder-common-wrapper .amfinder-dropdown:disabled {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23a8a5a3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* The handoff shows a red border on the open dropdown. A native select has no
   open state, so it lands on focus — the nearest equivalent. */
.amfinder-common-wrapper .amfinder-dropdown:focus {
    border-color: var(--color-primary);
    box-shadow: none;
    outline: none;
}

.amfinder-common-wrapper .amfinder-dropdown:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* Smaller than the component's text-lg and set wider: at heading size these
   competed with the category title above them. */
.amfinder-common-wrapper .dropdown-title {
    font-size: 0.875rem;
    letter-spacing: 0.05em;
}

/* Was a width attribute on the element, from getDropdownWidth(): 32% on a
   desktop User-Agent, 100% on a mobile one — decided by a UA sniff inside a
   full-page-cached block, so whichever browser warmed the cache set the
   desktop layout for everyone, and a phone warming it stacked the row.

   100% here instead, with md:flex-nowrap on the list. Below the breakpoint
   the items stack at full width; above it they cannot wrap, so three items
   each asking for the full row shrink to even thirds either side of the
   gap-4 columns. No count in the CSS and no UA in the cache. */
.amfinder-common-wrapper .amfinder-toggle > .am-item {
    width: 100%;
}

/* S set font-weight normal; the tracking carries the emphasis instead. Note
   Roboto has no 600 — 400, 500 and 700 only. */
.amfinder-buttons .btn {
    border-radius: 6px;
    color: #fff;
    font-size: 1.1rem;
    letter-spacing: 0.08em;
}

/* S: .amfinder-buttons .button.action.primary */
.amfinder-buttons .btn-primary,
.amfinder-buttons .btn-primary:hover,
.amfinder-buttons .btn-primary:focus {
    color: #fff;
}

.amfinder-buttons .btn-primary {
    background: #007b0f;
    border-color: #007b0f;
}

.amfinder-buttons .btn-primary:hover,
.amfinder-buttons .btn-primary:focus {
    background: #00bd17;
    border-color: #00bd17;
}

/* Reset, in secondary blue with a white label */
.amfinder-buttons .btn-secondary,
.amfinder-buttons .btn-secondary:hover,
.amfinder-buttons .btn-secondary:focus {
    color: #fff;
}

.amfinder-buttons .btn-secondary {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
}

.amfinder-buttons .btn-secondary:hover,
.amfinder-buttons .btn-secondary:focus {
    background: var(--color-secondary-darker);
    border-color: var(--color-secondary-darker);
}
/* ---------------------------------------------------------------------------
   A vehicle is set: the dropdowns give way to a verification panel.

   Red cannot mean "selected" here — on this component it already means the
   opposite, and the inactive ring is 3px of it. Presence is carried by
   artwork, weight and structure, and the marque colour lands only on the
   brand word, never on the ground and never on anything actionable.
   --------------------------------------------------------------------------- */

/* 124 tall: 3px band + 11 + the 96 well + 11 + 3px band. Beats the template's
   p-5 on specificity, not order. Scoped so the mobile rule need not outrank
   it. */
@media (min-width: 768px) {
    .amfinder-common-wrapper.tj-fp {
        padding: 11px 17px;
    }

    /* The marque and the model are one unit and leading alone held them too
       tightly. The open panel on mobile sets its own spacing. */
    .tj-fp__model {
        margin-top: 1px;
    }
}

/* isShowActions is computed from the dropdowns, and there are none here, so
   the ring's value depends on whether partial search happens to be on. A
   vehicle IS selected, so it is wrong either way. */
.amfinder-common-wrapper.tj-fp.am-finder-inactive-warning {
    border-color: transparent;
    box-shadow: 0 0 0 1px var(--color-border);
}

/* The summary row belongs to the mobile disclosure. */
.tj-fp__summary {
    display: none;
}

/* Both wrappers leave the layout above the breakpoint, so every desktop rule
   still addresses the body and the dropdown list directly. */
.tj-fp__collapse,
.tj-fp__collapse-inner {
    display: contents;
}

.tj-fp__body {
    align-items: center;
    display: flex;
    gap: 18px;
}

/* White with a hairline, not marque-tinted: a red ring around an orange bike
   frames it as a red one, and the --tj-ms-bd alphas are tuned for a 1px card
   border. The well exists so a white or silver vehicle separates from the
   grey panel. */
.tj-fp__well {
    align-items: center;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 9999px;
    box-sizing: border-box;
    display: flex;
    flex-shrink: 0;
    height: 96px;
    justify-content: center;
    overflow: hidden;
    width: 96px;
}

/* 76, not 84, in the same 96 well. The clip radius is 47 and a Suzuki TSX 50
   reached 45.5 of it — 1.5px of clearance, so a wider subject would have been
   cut. At 76 it reaches 41.2. It also puts both wells on one ratio: 76/96
   against the mobile roundel's 160/200. Move it with the template's sizes. */
.tj-fp__img {
    display: block;
    height: 76px;
    object-fit: contain;
    width: 76px;
}

.tj-fp__placeholder {
    color: #b9b6b3;
    display: block;
    height: 67px;
    width: 67px;
}

.tj-fp__text {
    min-width: 0;
}

.tj-fp__label {
    color: var(--color-ink-muted);
    display: block;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Desktop only — the mobile open panel zeroes this. Unspaced, the four lines
   measured 11 / 9.5 / 8.5 between ink and the eyebrow read as a fourth item
   in a list rather than a label above a group. Enough to separate it, and it
   leaves room under the 96 well, which is what holds the panel at 124. */
.tj-fp__name {
    display: block;
    line-height: 1.25;
    margin-top: 10px;
}

/* The one marque-coloured thing on the page. -brandfg, not -acc: it is the
   tone corrected for 4.5:1 as small text, which is why it exists. The
   fallback covers a slug with no block in marques.css. */
.tj-fp__brand {
    color: var(--tj-ms-brandfg, var(--color-ink-muted));
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tj-fp__model {
    display: block;
    font-size: 20px;
    font-weight: 700;
}

.tj-fp__years {
    color: var(--color-ink-muted);
    display: block;
    font-size: 14px;
    line-height: 1.3;
    margin-top: 1px;
}

/* Outlined, not filled. The inherited green Find and blue Reset are the
   loudest things in the panel and say the least; clearing a filter is a quiet
   action. */
.tj-fp__reset {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-fg);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    height: 44px;
    justify-content: center;
    letter-spacing: 0.04em;
    margin-inline-start: auto;
    padding: 0 24px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* The red frame is the product card's hover, which is where red already means
   "this responds". The fill was --color-bg-alt, the panel's own background, so
   hovering dissolved the button into it; a 10% wash of the frame colour comes
   out #f2e0e2 over the panel, which reads as tinted rather than as the
   inactive ring — red on this component already means something is wrong, and
   a stronger wash starts to borrow that meaning. No token for it: the theme's
   --color-primary-lighter is a brighter red, not a paler one. A browser
   without color-mix drops this line and keeps the white rest fill. */
.tj-fp__reset:hover {
    background: color-mix(in srgb, var(--color-primary) 10%, #0000);
    border-color: var(--color-primary);
}

/* Split from the hover: a 1px border recolour is the whole indicator for a
   keyboard user, and thin for WCAG 2.2 focus appearance. The outline is the
   same one the dropdowns use, offset out so the border still reads. */
.tj-fp__reset:focus-visible {
    background: color-mix(in srgb, var(--color-primary) 10%, #0000);
    border-color: var(--color-primary);
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Below 768: the panel is a disclosure.

   One component, one collapsed height. The summary row is 40px in every state
   — set by the toggle, not the text — so the panel does not jump when a
   vehicle is chosen. 375 is the floor.
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
    /* 16 in every state, empty or filled, so the two agree. */
    .amfinder-common-wrapper,
    .amfinder-common-wrapper.tj-fp {
        padding: 16px;
    }

    .tj-fp__summary {
        align-items: center;
        display: flex;
        gap: 10px;
    }

    .tj-fp__summary-vehicle {
        flex-grow: 1;
        /* Without this the flex item will not shrink below its content and the
           ellipsis below never engages. */
        min-width: 0;
    }

    .tj-fp__summary-brand {
        color: var(--tj-ms-brandfg, var(--color-ink-muted));
        display: block;
        font-size: 14px;
        /* Pinned, with the one below. At the inherited 1.5 the pair outgrows
           the 44px button and the filled header stops matching the empty one. */
        line-height: 1.2;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    /* The marque sits on its own line above so this one gets the full width.
       On one line, "Quattronove 49x (2008-2015)" wants ~210px of the ~251
       available, and with the marque in front there is not room. */
    .tj-fp__summary-name {
        display: block;
        font-size: 17px;
        line-height: 1.25;
        margin-top: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tj-fp__summary-model {
        font-weight: 700;
    }

    .tj-fp__summary-years {
        color: var(--color-ink-muted);
    }

    /* Swaps with the vehicle summary once open: the name is repeated in full
       inside the body, so the header becomes a plain label. */
    .tj-fp__summary-label {
        color: var(--color-ink-muted);
        display: none;
        flex-grow: 1;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.11em;
        text-transform: uppercase;
    }

    .tj-fp--open .tj-fp__summary-vehicle {
        display: none;
    }

    .tj-fp--open .tj-fp__summary-label {
        display: block;
    }

    /* Also the empty state's title, so both headers are the same height. */
    .tj-fp__summary-title {
        flex-grow: 1;
        font-size: 18px;
        font-weight: 700;
    }

    /* 44 square, and what sets the collapsed row in every state — every text
       block here is shorter, so empty and filled agree at 82px. #a8a69f, not
       --color-border: at the panel's own hairline value the button shared an
       edge with it and stopped reading as a control. Chevron only; a label
       costs ~52px of a 375 row, which is what lets the marque have its own
       line. */
    .tj-fp__toggle {
        align-items: center;
        background: #fff;
        border: 1px solid #a8a69f;
        border-radius: 6px;
        cursor: pointer;
        display: inline-flex;
        flex-shrink: 0;
        height: 44px;
        justify-content: center;
        padding: 0;
        width: 44px;
    }

    .tj-fp__chevron {
        transition: transform 0.3s ease-in-out;
    }

    /* grid-template-rows 0fr -> 1fr, the technique the Laravel panel uses. No
       height to measure and no max-height to guess wrong, which matters with
       two collapsibles as unalike as a 430px vehicle panel and three
       dropdowns. The inner element's min-height and overflow are load-bearing:
       without them a grid item will not shrink below its content. */
    .tj-fp__collapse {
        display: grid;
        grid-template-rows: 0fr;
        opacity: 0;
        transition: grid-template-rows 0.2s ease-out, opacity 0.2s ease-out;
    }

    /* Bound on the collapsible itself in the empty state and on the panel in
       the filled one, so both forms are matched. */
    .tj-fp__collapse.tj-fp--open,
    .tj-fp--open .tj-fp__collapse {
        grid-template-rows: 1fr;
        opacity: 1;
    }

    /* The clipping element must carry no box of its own: the track collapses
       but an item's own margin, border and padding are not in it and stay on
       screen — the body's 14 margin, 16 padding and 1px rule leaked 31px of
       open panel into the closed state until they moved inside this wrapper.
       display:block is equally load-bearing, undoing the display:contents
       above the breakpoint: an element with no box cannot clip. */
    .tj-fp__collapse-inner {
        display: block;
        min-height: 0;
        overflow: hidden;
    }

    @media (prefers-reduced-motion: reduce) {
        .tj-fp__collapse {
            transition: none;
        }
    }

    .tj-fp__body {
        border-top: 1px solid var(--color-border);
        display: block;
        margin-top: 14px;
        padding-top: 18px;
    }

    /* 200 well, 160 of artwork. 160 at 2x asks for exactly the 320 variant. */
    .tj-fp__well {
        height: 200px;
        margin: 0 auto;
        width: 200px;
    }

    .tj-fp__img {
        height: 160px;
        width: 160px;
    }

    /* 140 measures 64.8% painted ink of the 200 well, the proportion 67 gives
       in the 96 one. The glyph's own viewBox margin is why neither number is
       the photograph's. */
    .tj-fp__placeholder {
        height: 140px;
        width: 140px;
    }

    .tj-fp__text {
        /* It is a <span>, blockified by the body's flex on desktop. Here the
           body is a block, so it stays inline and margin-top is dropped. */
        display: block;
        margin-top: 20px;
        text-align: center;
    }

    /* The header carries it while open; repeating it here says it twice. */
    .tj-fp__label {
        display: none;
    }

    .tj-fp__name {
        line-height: 1.3;
        margin-top: 0;
    }

    .tj-fp__brand {
        font-size: 15px;
        letter-spacing: 0.07em;
    }

    .tj-fp__model {
        font-size: 22px;
    }

    .tj-fp__years {
        font-size: 15px;
        margin-top: 6px;
    }

    /* The chevron's edge, not the panel's hairline, for the reason above. */
    .tj-fp__reset {
        border-color: #a8a69f;
        height: 46px;
        margin-inline-start: 0;
        margin-top: 20px;
        width: 100%;
    }

    /* Scoped to the breakpoint because the board sets these for the phone and
       .dropdown-title above is unscoped. */
    .amfinder-common-wrapper .dropdown-title {
        font-size: 15px;
        margin-bottom: 7px;
    }

    /* The list owns both its offsets and row-gap owns the spacing between the
       items, so the items own nothing. m53 zeroed the item margins without
       replacing the bottom one and took 16px out of the foot. */
    .amfinder-common-wrapper .amfinder-toggle {
        margin-bottom: 16px;
        margin-top: 16px;
        row-gap: 14px;
    }

    .amfinder-common-wrapper .amfinder-toggle > .am-item {
        margin-bottom: 0;
    }
}