/* Mask and popup keyframes from yui540/css-animations (MIT):
   2025-02-25/index.html and 2026-04-17/tips-1.html.
   License retained in /assets/motions/yui540/LICENSE. */
.header-actions { display: flex; align-items: center; gap: 9px; grid-column: 3; grid-row: 1; justify-self: end; }
.search-toggle { width: 36px; height: 36px; border: 1px solid #e4edf2; border-radius: 11px; color: #234556; background: white; display: grid; place-items: center; transition: background .25s; }.search-toggle svg { width: 17px; height: 17px; stroke-width: 1.7; }.search-toggle:hover { background: #fafcfd; }.search-toggle:hover svg { animation: yui_2026_04_17_tips_1_popup .65s ease-in-out; }
.product-search { position: fixed; inset: 11vh 0 auto; width: min(660px,calc(100vw - 32px)); margin: 0 auto; padding: 0; max-height: 80dvh; border: 1px solid #e4edf2; border-radius: 23px; overflow: auto; color: #234556; background: white; box-shadow: 0 24px 80px #153b4d18; }
.product-search::backdrop { background: #193b4e45; backdrop-filter: blur(5px); animation: search-backdrop .3s ease both; }
.product-search[open] { animation: search-arrive .5s cubic-bezier(.22,.61,.36,1) both; }.product-search[open]:not(.closing) .search-field { --skew-x: 24px; animation: yui_2025_02_25_index_maskIn .55s .08s cubic-bezier(.22,.61,.36,1) both; }
.product-search.closing { animation: search-leave .2s ease both; pointer-events: none; }.product-search.closing::backdrop { animation: search-backdrop .2s ease reverse both; }
@keyframes search-arrive { from { opacity: 0; transform: translateY(22px) scale(.96); } 75% { opacity: 1; transform: translateY(-2px) scale(1.005); } to { opacity: 1; transform: translateY(0) scale(1); } }@keyframes search-leave { to { opacity: 0; transform: translateY(8px); } }@keyframes search-backdrop { from { opacity: 0; } to { opacity: 1; } }
.search-content { padding: 27px; }.search-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }.search-heading h2 { font-size: 24px; font-weight: 400; margin-top: 0; }.search-close { width: 32px; height: 32px; border: 1px solid #e8eef2; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }.search-close svg { width: 16px; height: 16px; }
.search-field { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid #dce8ef; border-radius: 13px; background: #fcfdfd; }.search-field:focus-within { border-color: #8daebf; }.search-field > svg { width: 19px; height: 19px; color: #809caa; flex-shrink: 0; }.search-field input { min-width: 0; flex: 1; font-size: 12px; color: #476a7e; background: transparent; outline: none; border: 0; }.search-field input::placeholder { color: #a4b5bf; }.search-field input::-webkit-search-cancel-button { appearance: none; }.search-field button { display: grid; place-items: center; flex-shrink: 0; }.search-field button svg { width: 15px; height: 15px; color: #97adb9; }
.search-suggestions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }.search-suggestions button { color: #95aab6; border: 1px solid #edf1f3; border-radius: 8px; padding: 6px 10px; font-size: 9px; transition: background .2s; }.search-suggestions button:hover { background: #f7fafb; }.search-status { color: #9dafba; font-size: 10px; margin: 22px 0 10px; }
.search-results { max-height: min(350px,42dvh); overflow-y: auto; overscroll-behavior: contain; }.search-result { display: flex; align-items: center; gap: 13px; border-bottom: 1px solid #f0f3f5; padding: 12px 3px; border-radius: 9px; transition: background .25s; }.search-result:hover { background: #fafbfc; }.search-result > img { width: 56px; height: 56px; object-fit: contain; border-radius: 10px; background: #fafafa; flex-shrink: 0; }.search-result-copy { min-width: 0; flex: 1; }.search-result-copy strong { display: block; font-size: 12px; font-weight: 400; color: #43667a; }.search-result-copy small { display: block; color: #a0b2bd; font-size: 9px; line-height: 1.8; margin-top: 4px; }.search-result-price { flex-shrink: 0; text-align: right; }.search-result-price strong { display: block; font-size: 11px; font-weight: 400; color: #557a8f; }.search-result-price small { display: block; color: #a7b7c0; font-size: 8px; margin-top: 4px; }.search-result-arrow { width: 6px; height: 6px; border-top: 1px solid #a9bdc9; border-right: 1px solid #a9bdc9; transform: rotate(45deg); flex-shrink: 0; margin: 0 7px; }
.search-empty { text-align: center; padding: 30px 10px; }.search-empty > svg { width: 29px; height: 29px; margin: 0 auto 15px; color: #afc4d0; }.search-empty h3 { font-size: 15px; font-weight: 400; }.search-empty p { font-size: 10px; color: #9fb1bc; margin: 9px 0 17px; }.search-empty a { display: inline-flex; gap: 8px; align-items: center; font-size: 11px; color: #6c92a8; }.search-empty a svg { width: 13px; height: 13px; }.search-footer { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid #edf2f4; padding-top: 15px; margin-top: 15px; font-size: 8px; color: #b0bfc8; }
.search-field button[hidden], .search-empty[hidden] { display: none; }
@media (max-width:767px) { .header-actions { gap: 8px; }.product-search { inset: 76px 0 auto; width: calc(100vw - 24px); max-height: calc(100dvh - 100px); border-radius: 19px; }.search-content { padding: 21px 17px; }.search-heading h2 { font-size: 21px; }.search-field { padding: 13px 11px; gap: 8px; }.search-field input { font-size: 16px; }.search-field input::placeholder { font-size: 11px; }.search-result { gap: 9px; }.search-result > img { width: 45px; height: 45px; }.search-result-copy strong { font-size: 11px; }.search-result-copy small { font-size: 8px; }.search-result-price strong { font-size: 10px; }.search-result-price small { font-size: 7px; }.search-result-arrow { display: none; }.search-results { max-height: min(350px,40dvh); }.search-footer > span:last-child { display: none; } }
@media (prefers-reduced-motion:reduce) { .product-search[open], .product-search[open] .search-content, .product-search.closing, .product-search::backdrop, .search-toggle:hover svg { animation: none !important; } }

/* Staged search UI entrance; the field mask and chip popup use yui540 keyframes. */
.product-search[open]:not(.closing) .search-heading { animation: search-ui-rise .45s .05s both; }
.product-search[open]:not(.closing) .search-suggestions button { animation: yui_2026_04_17_tips_1_popup .55s ease-in-out both; }
.search-suggestions button:nth-child(1) { animation-delay: .14s; }.search-suggestions button:nth-child(2) { animation-delay: .21s; }.search-suggestions button:nth-child(3) { animation-delay: .28s; }
.product-search[open]:not(.closing) .search-results, .product-search[open]:not(.closing) .search-status { animation: search-ui-rise .5s .2s both; }
.product-search[open]:not(.closing) .search-footer { animation: search-ui-rise .45s .28s both; }
@keyframes search-ui-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion:reduce) { .product-search[open] .search-field, .product-search[open] .search-heading, .product-search[open] .search-suggestions button, .product-search[open] .search-results, .product-search[open] .search-status, .product-search[open] .search-footer { animation: none !important; } }