/* Shared desktop/mobile search. The field overlays the header without changing its height. */
body:not(:has(.nrh-chat__panel:not([hidden]))) .header-wrapper:has(.product-search.is-open) { z-index: 1100 !important; }

.product-search {
    --search-green: #315f2f;
    --search-width: clamp(340px, 39vw, 620px);
    position: relative;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin-right: 12px;
    color: #283c2b;
    z-index: 3;
}

.product-search [hidden] { display: none !important; }

.product-search__toggle {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    transition: background-color 180ms, color 180ms;
}

.product-search__toggle:hover,
.product-search.is-open .product-search__toggle { background: #edf3e9; color: var(--search-green); }

.product-search__lens,
.product-search__handle,
.product-search__cross { transform-origin: 12px 12px; transition: transform 260ms ease, opacity 160ms ease; }
.product-search__cross { opacity: 0; transform: rotate(-90deg) scale(.6); }
.product-search.is-open .product-search__lens { opacity: 0; transform: scale(.45); }
.product-search.is-open .product-search__handle { opacity: 0; transform: scale(.6); }
.product-search.is-open .product-search__cross { opacity: 1; transform: none; }

.product-search__form {
    position: absolute;
    top: -2px;
    right: -2px;
    display: flex;
    align-items: center;
    gap: 10px;
    width: var(--search-width);
    height: 48px;
    padding: 0 50px 0 16px;
    margin: 0;
    border: 1px solid #cfdcc9;
    border-radius: 26px;
    background: #f7f9f5;
    box-shadow: 0 0 0 4px #fff;
    clip-path: inset(0 0 0 calc(100% - 48px) round 26px);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: clip-path 320ms cubic-bezier(.22, 1, .36, 1), opacity 160ms, visibility 0s 320ms;
}

.product-search.is-open .product-search__form {
    clip-path: inset(0 0 0 0 round 26px);
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
}

.product-search__form:focus-within { border-color: #6b9160; }
.product-search__field-icon { flex-shrink: 0; color: #78916e; }
.product-search__input {
    flex: 1;
    min-width: 0;
    width: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #253927;
    font: inherit;
    font-size: 16px;
    line-height: 46px;
}
.product-search__input::placeholder { color: #74806f; opacity: 1; }
.product-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.product-search__clear { display: grid; place-items: center; width: 32px; height: 36px; flex-shrink: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #6b7667; }
.product-search__clear:hover { background: #e8eee3; }
.product-search button:focus-visible,
.product-search a:focus-visible { outline: 2px solid #557c42; outline-offset: 3px; }

.product-search__panel {
    position: absolute;
    top: calc(100% + 18px);
    right: -2px;
    width: var(--search-width);
    max-height: min(640px, calc(100dvh - 170px));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #c8d5c1 transparent;
    border: 1px solid #e0e7dc;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 16px 45px #1d361c26, 0 2px 6px #1d361c08;
    animation: search-panel-in 180ms ease-out;
}
.product-search__heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 19px 22px 0; font-size: 17px; font-weight: 500; }
.product-search__escape { padding: 2px 6px; border: 1px solid #e1e6dd; border-radius: 5px; background: #fafbf8; color: #7d8778; font: inherit; font-size: 11px; }
.product-search__status { margin: 0; padding: 5px 22px 17px; color: #778070; font-size: 13px; line-height: 1.5; }
.product-search.is-loading .product-search__status::before { content: ''; display: inline-block; width: 11px; height: 11px; margin-right: 8px; border: 1.5px solid #d6e1ce; border-top-color: var(--search-green); border-radius: 50%; vertical-align: -1px; animation: search-spin 700ms linear infinite; }
.product-search__results { padding: 0 10px; }
.product-search__result { display: flex; align-items: center; gap: 15px; min-height: 88px; padding: 10px 12px; border-radius: 11px; color: #263b28; text-decoration: none; transition: background-color 150ms; }
.product-search__result + .product-search__result { border-top: 1px solid #f0f3ed; }
.product-search__result:hover,
.product-search__result[aria-selected="true"] { background: #f1f6ed; color: #263b28; }
.product-search__image { width: 62px; height: 68px; flex-shrink: 0; object-fit: contain; border-radius: 7px; background: #fafbf8; padding: 5px; }
.product-search__copy { display: flex; flex: 1; flex-direction: column; min-width: 0; gap: 3px; }
.product-search__name { font-size: 16px; line-height: 1.3; font-weight: 500; overflow-wrap: anywhere; }
.product-search__category { color: #76806f; font-size: 12px; line-height: 1.4; }
.product-search__meta { color: #76806f; font-size: 12px; line-height: 1.4; }
.product-search__footer { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 15px 22px; margin-top: 10px; border-top: 1px solid #e8eee3; background: #fafcf8; }
.product-search__more { padding: 6px 12px; border: 1px solid #d4e0cb; border-radius: 8px; background: #fff; color: var(--search-green); font: inherit; font-size: 13px; }
.product-search__more:hover { background: #edf3e9; }
.product-search__more:disabled { opacity: .6; }
.product-search__all { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--search-green); font-size: 13px; font-weight: 500; text-decoration: none; }
.product-search__all:hover { color: #204d1e; text-decoration: underline; }

.header-desk > .navigation { transition: opacity 160ms, visibility 160ms; }
.header-desk.search-is-open > .navigation { opacity: 0; visibility: hidden; pointer-events: none; }
.header-desk > .header-tools { flex-shrink: 0; }

@media (max-width: 1199px) and (min-width: 992px) {
    .product-search { --search-width: 370px; margin-right: 4px; }
    .header-desk_type_1 .logo { margin-right: 15px; }
}

@media (max-width: 991px) {
    .header-mobile__wrapper { position: relative; gap: 8px; }
    .header-mobile__wrapper > .logo { transition: opacity 160ms, visibility 160ms; }
    .header-mobile__wrapper.search-is-open > .logo { visibility: hidden; opacity: 0; pointer-events: none; }
    .product-search--mobile { --search-width: min(440px, calc(100vw - 80px)); margin-right: 0; }
    .header-mobile__wrapper:has(> .header-tools__cart) .product-search--mobile { --search-width: min(440px, calc(100vw - 120px)); }
    .product-search__form { padding-left: 13px; gap: 7px; }
    .product-search__field-icon { display: none; }
    .product-search__input { font-size: 16px; }
    /* header-wrapper's transform makes it the fixed containing block. Keep
       results full width even when account/cart controls narrow the field. */
    .product-search__panel { position: fixed; top: 100%; left: 12px; right: 12px; width: auto; max-height: min(620px, calc(100dvh - 210px)); border-radius: 14px; }
    .product-search__heading { padding: 16px 16px 0; }
    .product-search__status { padding: 5px 16px 14px; }
    .product-search__escape { display: none; }
    .product-search__results { padding: 0 6px; }
    .product-search__result { gap: 10px; padding: 10px; min-height: 82px; }
    .product-search__image { width: 48px; height: 60px; }
    .product-search__name { font-size: 15px; }
    .product-search__footer { padding: 12px 16px max(12px, env(safe-area-inset-bottom)); }
}

@keyframes search-panel-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes search-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .product-search *, .header-desk > .navigation, .header-mobile__wrapper > .logo { animation: none !important; transition: none !important; }
}