/* ==========================================================================
   Full-screen product search overlay

   Geometry follows the Triumph Shop V2 design (820px column, 62px 4:5 thumbs,
   13/17/13 type scale). Colour is entirely token-driven so a child theme can
   reskin it without touching a selector — see triumph-vip/css/triumph.css.

   z-index: WooCommerce injects .woocommerce-product-gallery__trigger at runtime
   with z-index 99, and the cart drawer sits at 100001. Search covers everything,
   so it sits above both.
   ========================================================================== */

.cs4-search {--cs4-search-bg: #fff; --cs4-search-text: var(--color-body); --cs4-search-muted: rgba(0,0,0,.55); --cs4-search-line: #e4e4e4; --cs4-search-row-line: #efefef; --cs4-search-btn: rgba(0,0,0,.06); --cs4-search-btn-hover: rgba(0,0,0,.12); --cs4-search-chev: rgba(0,0,0,.3); --cs4-search-tile: #f4f4f4;}

.cs4-search,
.cs4-search *,
.cs4-search *::before,
.cs4-search *::after {box-sizing: border-box;}

/* display:none cannot be transitioned, so closed state is opacity + visibility. */
.cs4-search {position: fixed; inset: 0; z-index: 100010; display: flex; flex-direction: column; background: var(--cs4-search-bg); color: var(--cs4-search-text); opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility 0s linear .22s;}
.cs4-search.is-open {opacity: 1; visibility: visible; transition: opacity .22s ease, visibility 0s;}

/* Head -------------------------------------------------------------------- */
.cs4-search__head {flex: 0 0 auto; border-bottom: 1px solid var(--cs4-search-line);}
.cs4-search__bar {display: flex; align-items: center; gap: 14px; max-width: 820px; margin: 0 auto; padding: clamp(18px,3vw,28px) clamp(18px,4vw,40px);}
.cs4-search__icon {flex: 0 0 auto; opacity: .5;}
.cs4-search__input {flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: none; color: var(--cs4-search-text); font-family: inherit; font-size: clamp(19px,2.6vw,24px); font-weight: 600;}
.cs4-search__input::placeholder {color: var(--cs4-search-muted); opacity: 1;}
.cs4-search__input::-webkit-search-cancel-button {display: none;}
.cs4-search__close {flex: 0 0 auto; height: 38px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--cs4-search-btn); color: var(--cs4-search-text); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;}
.cs4-search__close:hover {background: var(--cs4-search-btn-hover);}

/* Body -------------------------------------------------------------------- */
.cs4-search__body {flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;}
.cs4-search__inner {max-width: 820px; margin: 0 auto; padding: clamp(18px,3vw,26px) clamp(18px,4vw,40px) 60px;}
.cs4-search.is-busy .cs4-search__results {opacity: .45;}
.cs4-search__results {transition: opacity .15s ease;}

.cs4-search__status {margin: 0 0 14px; font-size: 13px; font-weight: 600; color: var(--cs4-search-muted);}
.cs4-search__status:empty {display: none;}

/* Rows -------------------------------------------------------------------- */
.cs4-search__row {display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--cs4-search-row-line); text-decoration: none; color: var(--cs4-search-text);}
.cs4-search__row:hover {color: var(--cs4-search-text); opacity: .82;}
.cs4-search__thumb {flex: 0 0 62px; width: 62px; aspect-ratio: 4 / 5; border-radius: 9px; overflow: hidden; background: var(--cs4-search-tile); display: block;}
.cs4-search__thumb img {width: 100%; height: 100%; object-fit: cover; display: block;}
.cs4-search__meta {flex: 1 1 auto; min-width: 0;}
.cs4-search__brand {display: block; font-size: 13px; font-weight: 600; color: var(--cs4-search-muted);}
.cs4-search__name {display: block; margin-top: 2px; font-size: 17px; font-weight: 600; line-height: 1.3;}
.cs4-search__chev {flex: 0 0 auto; font-size: 20px; color: var(--cs4-search-chev);}

/* Empty state ------------------------------------------------------------- */
.cs4-search__empty {padding: 40px 0; text-align: center;}
.cs4-search__empty-title {margin: 0; font-size: 17px; font-weight: 600;}
.cs4-search__empty-sub {margin: 6px 0 0; font-size: 15px; color: var(--cs4-search-muted);}
.cs4-search__reset {margin-top: 20px; height: 44px; padding: 0 20px; border: 1px solid var(--cs4-search-line); border-radius: 11px; background: transparent; color: var(--cs4-search-text); font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer;}
.cs4-search__reset:hover {background: var(--cs4-search-btn);}

/* Header trigger ---------------------------------------------------------- */
.header-search-icon {position: relative; list-style: none;}
.header-search-link {display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; background: none; color: var(--color-main); cursor: pointer;}
.header-search-link:hover {opacity: .7;}

body.cs4-search-open {overflow: hidden;}

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