/*
 * SimpleTools Motor Cautare Produse
 * v1.1.0 - WoodMart desktop + mobile UI
 * All interactive controls are explicitly reset so WoodMart button rules
 * cannot change their dimensions, background or positioning.
 */

.stss-mount {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    position: relative !important;
}

/* Keep the search above the remaining header elements/dropdowns. */
.whb-header .stss-mount,
.wd-header-row .stss-mount,
.wd-header-html .stss-mount {
    position: relative !important;
    z-index: 390 !important;
}

.stss {
    --stss-accent: #007032;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: inherit !important;
    color: #18231c;
    line-height: normal;
}

.stss,
.stss * {
    box-sizing: border-box !important;
}

/* WoodMart has strong generic button rules. Reset only our controls. */
.stss button.stss__submit,
.stss button.stss__clear,
.stss button.stss__history-clear,
.stss button.stss__recent {
    all: unset;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    cursor: pointer !important;
}

.stss__form {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid #d8dfda !important;
    border-radius: 11px !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(18, 32, 24, .045) !important;
    transition: border-color .16s ease, box-shadow .16s ease !important;
}

.stss__form:focus-within {
    border-color: var(--stss-accent) !important;
    box-shadow: 0 0 0 2px rgba(0,112,50,.10), 0 3px 12px rgba(18,32,24,.06) !important;
}

.stss__icon {
    position: absolute !important;
    z-index: 2 !important;
    left: 15px !important;
    top: 50% !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    color: #536159 !important;
    pointer-events: none !important;
}

.stss__icon svg,
.stss__submit svg,
.stss__recent svg {
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.stss__icon svg {
    width: 18px !important;
    height: 18px !important;
}

.stss input.stss__input,
.stss input.stss__input[type="search"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    margin: 0 !important;
    padding: 0 102px 0 43px !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #18231c !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 46px !important;
    letter-spacing: 0 !important;
}

.stss input.stss__input:focus {
    outline: 0 !important;
    box-shadow: none !important;
}

.stss__input::-webkit-search-decoration,
.stss__input::-webkit-search-cancel-button,
.stss__input::-webkit-search-results-button,
.stss__input::-webkit-search-results-decoration {
    display: none !important;
    -webkit-appearance: none !important;
}

.stss__input::placeholder {
    color: #7a857e !important;
    opacity: 1 !important;
}

/* Clear X - small, circular, inside the field. */
.stss button.stss__clear {
    position: absolute !important;
    z-index: 4 !important;
    right: 52px !important;
    top: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #68736c !important;
    font-size: 19px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-align: center !important;
}

.stss button.stss__clear[hidden] {
    display: none !important;
}

.stss button.stss__clear:hover,
.stss button.stss__clear:focus-visible {
    background: #eef2ef !important;
    color: #172019 !important;
    outline: 0 !important;
}

.stss button.stss__clear span {
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: -1px 0 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* Green SimpleTools search action. Full height, flush with the right edge. */
.stss button.stss__submit {
    position: absolute !important;
    z-index: 3 !important;
    right: -1px !important;
    top: -1px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 11px 11px 0 !important;
    background: var(--stss-accent) !important;
    box-shadow: none !important;
    color: #fff !important;
    line-height: 1 !important;
    transition: background-color .15s ease, filter .15s ease !important;
}

.stss button.stss__submit:hover,
.stss button.stss__submit:focus-visible {
    background: #005d2a !important;
    color: #fff !important;
    filter: none !important;
    outline: 0 !important;
}

.stss button.stss__submit:active {
    transform: none !important;
    filter: brightness(.93) !important;
}

.stss button.stss__submit svg {
    width: 19px !important;
    height: 19px !important;
    margin: 0 !important;
    color: #fff !important;
    stroke: #fff !important;
    stroke-width: 2 !important;
}

/* Dropdown always follows the exact search-bar width on desktop. */
.stss__panel {
    position: absolute !important;
    z-index: 999999 !important;
    left: 0 !important;
    right: auto !important;
    top: calc(100% + 7px) !important;
    display: block;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    max-height: min(620px,72vh) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid #dfe5e1 !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 18px 45px rgba(18,32,24,.15), 0 2px 8px rgba(18,32,24,.06) !important;
}

.stss__panel[hidden] {
    display: none !important;
}

.stss__status {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 14px !important;
    color: #59665e !important;
    font-size: 11px !important;
    background: #fff !important;
}

.stss__status:not(:empty) {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-height: 45px !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    border-bottom: 1px solid #edf0ee !important;
}

.stss__status > span:first-child {
    text-transform: uppercase !important;
    letter-spacing: .055em !important;
    font-weight: 700 !important;
    color: #425148 !important;
}

.stss__status small {
    font-size: 10px !important;
    color: #8b948e !important;
}

.stss__section-head {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

.stss__section-head strong {
    color: #45544b !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .055em !important;
}

/* This used to inherit WoodMart's large gray button. */
.stss button.stss__history-clear {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    margin: 0 !important;
    padding: 0 9px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: #f3f5f4 !important;
    box-shadow: none !important;
    color: #56645c !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 28px !important;
    text-transform: uppercase !important;
    letter-spacing: .03em !important;
}

.stss button.stss__history-clear:hover,
.stss button.stss__history-clear:focus-visible {
    background: #e9efeb !important;
    color: var(--stss-accent) !important;
    outline: 0 !important;
}

.stss__loading {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
}

.stss__loading i {
    display: block !important;
    width: 12px !important;
    height: 12px !important;
    border: 2px solid #dbe3de !important;
    border-top-color: var(--stss-accent) !important;
    border-radius: 50% !important;
    animation: stss-spin .6s linear infinite !important;
}

.stss__results {
    display: block !important;
    width: 100% !important;
    max-height: 500px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    background: #fff !important;
}

/* Search history row: neutral white row, not a WoodMart CTA button. */
.stss button.stss__recent {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 44px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid #f0f2f1 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    color: #2b382f !important;
    text-align: left !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.stss button.stss__recent:hover,
.stss button.stss__recent:focus-visible {
    background: #f5f9f6 !important;
    color: #172019 !important;
    outline: 0 !important;
}

.stss button.stss__recent svg {
    flex: 0 0 17px !important;
    width: 17px !important;
    height: 17px !important;
    color: #6e7c73 !important;
}

.stss button.stss__recent span {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.stss__result {
    display: grid !important;
    grid-template-columns: 58px minmax(0,1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 76px !important;
    margin: 0 !important;
    padding: 9px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid #f0f2f1 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    color: inherit !important;
    text-decoration: none !important;
    transition: background .12s ease !important;
}

.stss__result:hover,
.stss__result.is-active {
    background: #f5faf7 !important;
    color: inherit !important;
}

.stss__thumb {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 58px !important;
    height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid #edf0ee !important;
    border-radius: 9px !important;
    background: #fff !important;
}

.stss__thumb img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    object-fit: contain !important;
}

.stss__thumb.is-empty { background: #f5f7f6 !important; }
.stss__product { min-width: 0 !important; }
.stss__product > strong {
    display: block !important;
    margin: 0 0 6px !important;
    color: #18231c !important;
    font-size: 13.5px !important;
    line-height: 1.35 !important;
    font-weight: 650 !important;
    white-space: normal !important;
}
.stss__meta {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
.stss__sku { font-size: 10.5px !important; color: #738078 !important; }
.stss__stock {
    display: inline-flex !important;
    align-items: center !important;
    padding: 3px 7px !important;
    border-radius: 999px !important;
    background: #edf8f1 !important;
    color: #08753b !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}
.stss__price {
    max-width: 150px !important;
    text-align: right !important;
    color: #111b15 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    white-space: nowrap !important;
}
.stss__price del {
    display: block !important;
    color: #89928c !important;
    font-size: 10px !important;
    font-weight: 400 !important;
}
.stss__price ins { text-decoration: none !important; }

.stss__all {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 11px 14px !important;
    border: 0 !important;
    border-top: 1px solid #e9ecea !important;
    border-radius: 0 !important;
    background: #fbfcfb !important;
    box-shadow: none !important;
    color: var(--stss-accent) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    text-transform: none !important;
}

.stss__all:hover {
    background: #f3f7f4 !important;
    color: #005d2a !important;
}

.stss__all span {
    font-size: 18px !important;
    line-height: 1 !important;
}

.stss__message,
.stss__empty {
    padding: 22px 16px !important;
    text-align: center !important;
    color: #67736c !important;
    font-size: 12px !important;
}
.stss__message.is-error { color: #a13333 !important; }
.stss__empty {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
}
.stss__empty-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: #f1f4f2 !important;
    color: #627168 !important;
    font-size: 23px !important;
}
.stss__empty strong { color: #26342c !important; font-size: 13px !important; }
.stss__empty small { color: #7d8881 !important; }

@keyframes stss-spin { to { transform: rotate(360deg); } }

@media (max-width: 767px) {
    .whb-header .stss-mount,
    .wd-header-row .stss-mount,
    .wd-header-html .stss-mount {
        z-index: 99999 !important;
    }

    .stss__form {
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
    }

    .stss input.stss__input,
    .stss input.stss__input[type="search"] {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        line-height: 44px !important;
        padding-right: 98px !important;
    }

    .stss button.stss__submit {
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
    }

    .stss button.stss__clear { right: 50px !important; }

    .stss__panel {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        top: var(--stss-mobile-top,70px) !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: calc(100vh - var(--stss-mobile-top,70px) - 12px) !important;
        border-radius: 12px !important;
    }

    .stss__results {
        max-height: calc(100vh - var(--stss-mobile-top,70px) - 110px) !important;
    }

    .stss__result {
        grid-template-columns: 50px minmax(0,1fr) auto !important;
        gap: 9px !important;
        min-height: 68px !important;
        padding: 8px 10px !important;
    }

    .stss__thumb {
        width: 50px !important;
        height: 50px !important;
    }

    .stss__product > strong { font-size: 12.5px !important; }
    .stss__price { max-width: 100px !important; font-size: 12px !important; }
}

@media (max-width: 440px) {
    .stss__result { grid-template-columns: 48px minmax(0,1fr) !important; }
    .stss__price {
        grid-column: 2 !important;
        margin-top: -4px !important;
        text-align: left !important;
    }
    .stss__stock { display: none !important; }
}


/* Search term highlight */
.stss__mark {
    display: inline !important;
    margin: 0 !important;
    padding: 0 2px !important;
    border: 0 !important;
    border-radius: 3px !important;
    background: rgba(0, 112, 50, .11) !important;
    color: #0a5d2e !important;
    font: inherit !important;
    line-height: inherit !important;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Premium two-column desktop results. */
@media (min-width: 1025px) {
    .stss__results.is-products {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        max-height: 520px !important;
    }

    .stss__results.is-products .stss__result {
        min-width: 0 !important;
        min-height: 88px !important;
        grid-template-columns: 54px minmax(0, 1fr) auto !important;
        gap: 10px !important;
        padding: 10px 12px !important;
    }

    .stss__results.is-products .stss__result:nth-child(odd) {
        border-right: 1px solid #edf0ee !important;
    }

    .stss__results.is-products .stss__thumb {
        width: 54px !important;
        height: 54px !important;
    }

    .stss__results.is-products .stss__product > strong {
        font-size: 12.5px !important;
        line-height: 1.32 !important;
    }

    .stss__results.is-products .stss__price {
        max-width: 105px !important;
        font-size: 12px !important;
    }
}

/* WoodMart mobile-menu integration. The native WoodMart form stays as an anchor only. */
.mobile-nav .stss-native-search-hidden {
    display: none !important;
}

.stss-mount--mobile-menu {
    display: none !important;
}

@media (max-width: 1024px) {
    .mobile-nav .stss-mount--mobile-menu {
        display: block !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 14px 14px 12px !important;
        position: relative !important;
        z-index: 30 !important;
        background: #fff !important;
        border-bottom: 1px solid #edf0ee !important;
    }

    .mobile-nav .stss-mount--mobile-menu .stss__form {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        border-radius: 9px !important;
        background: #fff !important;
        box-shadow: 0 1px 4px rgba(18, 32, 24, .04) !important;
    }

    .mobile-nav .stss-mount--mobile-menu input.stss__input,
    .mobile-nav .stss-mount--mobile-menu input.stss__input[type="search"] {
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        line-height: 42px !important;
        padding-right: 92px !important;
        font-size: 13px !important;
    }

    .mobile-nav .stss-mount--mobile-menu button.stss__submit {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        border-radius: 0 9px 9px 0 !important;
    }

    .mobile-nav .stss-mount--mobile-menu button.stss__clear {
        right: 47px !important;
    }

    .mobile-nav .stss-mount--mobile-menu .stss__panel {
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        max-height: min(62vh, 540px) !important;
        margin: 8px 0 0 !important;
        border-radius: 10px !important;
        box-shadow: 0 10px 28px rgba(18, 32, 24, .12) !important;
    }

    .mobile-nav .stss-mount--mobile-menu .stss__results {
        display: block !important;
        max-height: min(48vh, 420px) !important;
    }

    .mobile-nav .stss-mount--mobile-menu .stss__result {
        grid-template-columns: 48px minmax(0, 1fr) !important;
        gap: 9px !important;
        min-height: 68px !important;
        padding: 8px 10px !important;
    }

    .mobile-nav .stss-mount--mobile-menu .stss__thumb {
        width: 48px !important;
        height: 48px !important;
    }

    .mobile-nav .stss-mount--mobile-menu .stss__price {
        grid-column: 2 !important;
        max-width: none !important;
        margin-top: -3px !important;
        text-align: left !important;
        font-size: 12px !important;
    }

    .mobile-nav .stss-mount--mobile-menu .stss__product > strong {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    .mobile-nav .stss-mount--mobile-menu .stss__stock {
        display: none !important;
    }
}