.search-page { color: var(--color-title); background: #f6f6f6; }
.search-hero { min-height: 690px; padding: 176px 0 70px; background: #fff; border-bottom: 1px solid rgba(21,21,21,.2); }
.search-hero-inner { position: relative; }
.search-heading-grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(300px,.5fr); gap: 64px; align-items: end; margin-top: 38px; }
.search-heading-grid h1 { margin: 0; font: 540 clamp(54px,6.2vw,94px)/.91 var(--font-title); letter-spacing: -.061em; }
.search-heading-grid h1 em { color: var(--color-primary); font-weight: 400; }
.search-heading-grid > p { max-width: 460px; padding-bottom: 7px; color: #555960; font-size: 18px; line-height: 1.6; }
.smart-search { position: relative; z-index: 20; margin-top: 66px; }
.smart-search-form { min-height: 94px; display: grid; grid-template-columns: 32px minmax(0,1fr) auto auto; align-items: center; gap: 18px; padding: 0 10px 0 28px; border: 1px solid rgba(21,21,21,.32); background: #fff; box-shadow: 0 20px 60px rgba(13,14,18,.07); transition: border-color .2s ease, box-shadow .2s ease; }
.smart-search-form:focus-within { border-color: var(--color-primary); box-shadow: inset 5px 0 0 var(--color-primary), 0 24px 70px rgba(13,14,18,.09); }
.smart-search-form > svg { color: var(--color-primary); }
.smart-search-form input { width: 100%; min-width: 0; font: 500 clamp(22px,2.25vw,34px)/1.1 var(--font-title); letter-spacing: -.025em; }
.smart-search-form input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.smart-search-form input::placeholder { color: #a1a3a8; font-weight: 400; }
.search-reset { padding: 10px; color: #767980; font-size: 13px; }
.search-submit { min-width: 152px; min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 24px; color: #fff; background: var(--color-primary); font-weight: 700; }
.search-submit:hover { background: var(--color-primary-hover); }
.search-submit i { font-style: normal; font-size: 20px; }
.search-submit:focus-visible, .search-reset:focus-visible { outline: 2px solid var(--color-title); outline-offset: 3px; }
.search-suggestions { position: absolute; top: calc(100% + 8px); left: 0; right: 0; padding: 18px 28px 20px; border: 1px solid rgba(21,21,21,.22); background: #fff; box-shadow: 0 30px 80px rgba(13,14,18,.14); }
.search-suggestions[hidden] { display: none; }
.suggestions-head { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 13px; color: #8b8e94; font: 500 11px/1.2 'Iosevka Charon Mono',monospace; letter-spacing: .07em; text-transform: uppercase; }
.suggestions-head small { font: inherit; letter-spacing: 0; text-transform: none; }
.suggestion-item { width: 100%; min-height: 57px; display: grid; grid-template-columns: minmax(0,1fr) auto 18px; align-items: center; gap: 18px; padding: 10px 8px; border-top: 1px solid rgba(21,21,21,.1); text-align: left; }
.suggestion-item strong { color: #292b30; font-size: 17px; font-weight: 600; }
.suggestion-item small { color: #8a8d93; font: 500 10px/1.3 'Iosevka Charon Mono',monospace; letter-spacing: .07em; text-transform: uppercase; }
.suggestion-item i { color: var(--color-primary); font-style: normal; opacity: 0; }
.suggestion-item:hover, .suggestion-item:focus-visible { padding-left: 14px; background: rgba(245,27,36,.05); outline: 0; }
.suggestion-item:hover strong, .suggestion-item:focus-visible strong { color: var(--color-primary); }
.suggestion-item:hover i, .suggestion-item:focus-visible i { opacity: 1; }
.suggestions-all { display: flex; justify-content: space-between; margin-top: 10px; padding: 14px 8px 0; border-top: 1px solid rgba(21,21,21,.22); font-size: 14px; font-weight: 700; }
.suggestions-all span { color: var(--color-primary); }
.suggestion-empty { padding: 24px 8px; border-top: 1px solid rgba(21,21,21,.1); color: #777a80; font-size: 14px; }
.search-hint { display: flex; justify-content: space-between; gap: 24px; margin-top: 14px; color: #8a8d93; font-size: 12px; }
.search-hint kbd { min-width: 25px; display: inline-grid; place-items: center; margin-right: 5px; border: 1px solid #d7d8dc; background: #f5f5f6; color: #4c4f55; font: 600 11px/22px 'Iosevka Charon Mono',monospace; }
.search-discovery { padding: 82px 0 120px; }
.search-results-block { margin-bottom: 70px; border-top: 1px solid rgba(21,21,21,.36); border-bottom: 1px solid rgba(21,21,21,.36); }
.search-results-block > header { display: grid; grid-template-columns: minmax(240px,25%) minmax(0,1fr) auto; gap: 34px; align-items: end; padding: 34px 0; }
.search-results-block h2 { margin: 0; font: 650 clamp(28px,2.5vw,40px)/1 var(--font-title); letter-spacing: -.045em; }
.search-results-block header > p { color: #777a80; font-size: 14px; }
.search-results-list { padding-bottom: 34px; }
.search-results-empty { min-height: 220px; display: grid; place-items: center; align-content: center; gap: 10px; border-top: 1px solid rgba(21,21,21,.12); text-align: center; }
.search-results-empty > span { color: var(--color-primary); font-size: 28px; }
.search-results-empty p { color: #777a80; }
.search-results-empty a { color: var(--color-primary); font-weight: 700; }
.search-tags-block { display: grid; grid-template-columns: minmax(240px,25%) minmax(0,1fr); padding-bottom: 70px; }
.search-tags-block h2, .popular-searches h2, .search-history h2 { margin-top: 14px; font: 650 clamp(28px,2.5vw,40px)/1 var(--font-title); letter-spacing: -.045em; }
.search-tags { display: flex; flex-wrap: wrap; gap: 9px; align-content: start; padding-left: 34px; }
.search-tags button { padding: 10px 14px; border: 1px solid rgba(21,21,21,.18); background: #fff; color: #565960; font-size: 14px; }
.search-tags button:hover, .search-tags button:focus-visible { color: #fff; background: var(--color-title); border-color: var(--color-title); outline: 0; }
.search-content-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(320px,.55fr); border-top: 1px solid rgba(21,21,21,.36); border-bottom: 1px solid rgba(21,21,21,.36); }
.popular-searches { padding: 34px 38px 36px 0; border-right: 1px solid rgba(21,21,21,.18); }
.popular-searches header, .search-history header { min-height: 102px; }
.popular-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.popular-list a { min-height: 65px; display: grid; grid-template-columns: minmax(0,1fr) auto 16px; align-items: center; gap: 12px; padding: 12px 14px 12px 0; border-top: 1px solid rgba(21,21,21,.12); text-align: left; }
.popular-list a:nth-child(odd) { margin-right: 28px; }
.popular-list span { color: #3f4248; font-size: 17px; font-weight: 600; }
.popular-list small { color: #8a8d93; font: 500 10px/1 'Iosevka Charon Mono',monospace; text-transform: uppercase; }
.popular-list i { color: var(--color-primary); font-style: normal; opacity: 0; }
.popular-list a:hover, .popular-list a:focus-visible { padding-left: 10px; background: rgba(245,27,36,.05); outline: 0; }
.popular-list a:hover span, .popular-list a:focus-visible span { color: var(--color-primary); }
.popular-list a:hover i, .popular-list a:focus-visible i { opacity: 1; }
.search-history { padding: 34px 0 36px 38px; }
.search-history header { display: flex; justify-content: space-between; gap: 20px; }
.history-clear { align-self: start; color: var(--color-primary); font-size: 12px; font-weight: 650; }
.history-item { width: 100%; min-height: 54px; display: grid; grid-template-columns: 20px minmax(0,1fr) 28px; align-items: center; gap: 12px; border-top: 1px solid rgba(21,21,21,.12); text-align: left; }
.history-item > span { color: #9a9ca1; }
.history-item strong { overflow: hidden; color: #4c4f55; font-size: 15px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.history-open { width: 100%; overflow: hidden; text-align: left; }
.history-item .history-open:hover strong { color: var(--color-primary); }
.history-remove { color: #9a9ca1; font-size: 18px; }
.history-remove:hover { color: var(--color-primary); }
.history-empty { min-height: 170px; display: grid; place-items: center; align-content: center; gap: 10px; border-top: 1px solid rgba(21,21,21,.12); color: #92949a; text-align: center; }
.history-empty[hidden] { display: none; }
.history-empty > span { color: var(--color-primary); font-size: 28px; }
.history-empty p { max-width: 230px; font-size: 14px; }
@media (max-width: 900px) {
  .search-heading-grid, .search-content-grid { grid-template-columns: 1fr; }
  .search-heading-grid { gap: 28px; }
  .search-heading-grid > p { max-width: 660px; }
  .popular-searches { padding-right: 0; border-right: 0; }
  .search-history { padding: 38px 0; border-top: 1px solid rgba(21,21,21,.36); }
  .search-results-block > header { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 680px) {
  .search-hero { min-height: auto; padding: 132px 0 48px; }
  .search-heading-grid h1 { font-size: clamp(46px,14vw,70px); }
  .smart-search { margin-top: 44px; }
  .smart-search-form { min-height: 72px; grid-template-columns: 24px minmax(0,1fr) auto; gap: 12px; padding-left: 16px; }
  .smart-search-form input { font-size: 19px; }
  .search-submit { min-width: 58px; min-height: 56px; padding: 0 18px; }
  .search-submit span, .search-reset, .search-hint span:last-child, .suggestions-head small { display: none; }
  .search-tags-block { grid-template-columns: 1fr; gap: 28px; }
  .search-tags { padding-left: 0; flex-wrap: nowrap; overflow-x: auto; }
  .search-content-grid, .popular-list { display: block; }
  .popular-list a:nth-child(odd) { margin-right: 0; }
  .search-suggestions { padding-inline: 16px; }
  .suggestion-item { grid-template-columns: minmax(0,1fr) auto; }
  .suggestion-item i { display: none; }
}
@media (prefers-reduced-motion: reduce) { .smart-search-form, .suggestion-item { transition: none; } }