.idef-search-page {
    padding-block: clamp(28px, 5vw, 56px) clamp(40px, 6vw, 72px);
}

.idef-search-heading h1 {
    margin: 0 0 24px;
    overflow-wrap: anywhere;
}

.idef-search-heading .ct-search-form {
    max-width: 640px;
}

.idef-search-heading .ct-search-form-inner {
    min-height: 44px;
}

.idef-search-section,
.idef-search-empty,
.idef-search-page .pagination {
    margin-block-start: clamp(28px, 4vw, 48px);
}

.idef-search-section > h2 {
    margin: 0 0 20px;
}

.idef-search-category-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.idef-search-category {
    align-items: center;
    background: var(--theme-palette-color-7, transparent);
    border: 1px solid var(--theme-border-color, currentColor);
    border-radius: 10px;
    display: flex;
    gap: 12px;
    min-height: 64px;
    overflow-wrap: anywhere;
    padding: 10px 14px;
}

.idef-search-category:hover,
.idef-search-category:focus-visible {
    border-color: var(--theme-palette-color-1, currentColor);
}

.idef-search-category img {
    background: #fff;
    border-radius: 6px;
    height: 44px;
    object-fit: contain;
    width: 44px;
}

.idef-search-information-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: clamp(12px, 2vw, 24px);
    list-style: none;
    margin: 0;
    padding: 0;
}

.idef-search-information-grid li {
    min-width: 0;
}

.idef-search-content-card,
.idef-search-empty {
    border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
    border-radius: var(--theme-border-radius, 12px);
}

.idef-search-content-card {
    color: var(--theme-text-color, inherit);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 140px;
    overflow: hidden;
}

.idef-search-content-card:hover {
    border-color: var(--theme-palette-color-1, currentColor);
}

.idef-search-content-card:focus-visible {
    outline: 2px solid var(--theme-palette-color-1, currentColor);
    outline-offset: 3px;
}

.idef-search-content-image {
    aspect-ratio: 4 / 3;
    object-fit: contain;
    width: 100%;
}

.idef-search-content-body,
.idef-search-empty {
    padding: clamp(18px, 3vw, 28px);
}

.idef-search-content-body h3 {
    font-size: clamp(18px, 2vw, 22px);
    margin: 8px 0 0;
    overflow-wrap: anywhere;
}

.idef-search-caption {
    color: var(--theme-palette-color-1, currentColor);
    font-size: 0.8em;
    font-weight: 600;
}

.idef-search-empty {
    max-width: 640px;
}

#header [data-device="mobile"] .ct-header-search,
#header [data-device="mobile"] .ct-header-search + .ct-header-trigger {
    justify-content: center;
    min-block-size: 44px;
    min-inline-size: 44px;
}

#header [data-device="mobile"] .ct-header-search {
    --theme-icon-size: 20px;
}

#search-modal {
    background: color-mix(in srgb, var(--theme-palette-color-8, #101419) 90%, transparent);
    backdrop-filter: blur(10px);
}

#search-modal .ct-panel-content {
    justify-content: flex-start;
    overflow-y: auto;
    padding: clamp(64px, 11vh, 128px) clamp(12px, 3vw, 24px) 32px;
}

#search-modal .ct-search-form {
    --theme-form-max-width: 760px;
    --theme-form-font-size: 16px;
    background: var(--theme-palette-color-7, #181e26);
    border: 1px solid var(--theme-border-color, #303640);
    border-radius: 14px;
    box-shadow: 0 16px 40px #0004;
    max-width: 760px;
    padding: clamp(10px, 2vw, 14px);
    width: 100%;
}

#search-modal .ct-search-form-inner {
    background: var(--theme-palette-color-8, #101419);
    border: 1px solid var(--theme-border-color, #303640);
    border-radius: 9px;
    box-shadow: none;
    margin: 0;
    min-height: 54px;
    padding: 4px;
}

:is(#search-modal, #offcanvas .idef-mobile-search, .idef-search-heading) .ct-search-form-inner:focus-within {
    border-color: var(--theme-palette-color-1, currentColor);
    outline: none;
}

:is(#search-modal, #offcanvas .idef-mobile-search, .idef-search-heading) .ct-search-form-inner input[type="search"] {
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none;
    color: var(--theme-text-color, inherit);
    font-size: 16px;
    min-width: 0;
    outline: none;
}

#search-modal .ct-search-form-inner button[type="submit"] {
    --theme-button-border-radius: 6px;
    --theme-icon-color: currentColor;
    border-radius: 6px;
    color: var(--theme-button-text-initial-color, #101419);
    flex: 0 0 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    width: 44px;
}

:is(#search-modal, #offcanvas .idef-mobile-search, .idef-search-heading) .ct-search-form-inner button[type="submit"]:focus-visible {
    outline: 2px solid var(--theme-text-color, currentColor);
    outline-offset: -3px;
}

#search-modal .ct-search-results {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-block-start: 10px;
    padding: 0;
}

#search-modal .ct-search-results:not(:has(.ct-search-item)) {
    grid-template-columns: minmax(0, 1fr);
}

#search-modal .ct-search-results .ct-search-item {
    background: var(--theme-palette-color-8, #101419);
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--theme-text-color, inherit);
    gap: 12px;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 10px;
}

#search-modal .ct-search-results .ct-search-item:hover,
#search-modal .ct-search-results .ct-search-item:focus-visible,
#search-modal .ct-search-results .ct-search-item[aria-selected="true"] {
    border-color: var(--theme-palette-color-1, currentColor);
}

#search-modal .ct-search-item .ct-media-container {
    --search-image-size: clamp(56px, 10vw, 76px);
    --search-image-radius: 8px;
}

#search-modal .ct-search-item .ct-media-container img {
    aspect-ratio: 1;
    object-fit: contain;
}

#search-modal .ct-search-results .ct-search-more {
    background: var(--theme-palette-color-8, #101419);
    border-radius: 10px;
    grid-column: 1 / -1;
    padding: 12px;
    text-align: center;
}

:is(#search-modal, #offcanvas .idef-mobile-search) .ct-search-form:not(.ct-searching, .ct-has-dropdown):has(input[type="search"]:focus:not(:placeholder-shown)) > [role="status"] {
    animation: idef-search-status-in 150ms 450ms both;
    clip: auto;
    clip-path: none;
    color: var(--theme-text-color, inherit);
    font-size: 14px;
    height: auto;
    margin: 0;
    padding: 10px 6px 2px;
    position: static !important;
    white-space: normal;
    width: auto;
}

@keyframes idef-search-status-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    :is(#search-modal, #offcanvas .idef-mobile-search) .ct-search-form > [role="status"] {
        animation-timing-function: step-end;
    }
}

#offcanvas .idef-mobile-search {
    width: 100%;
}

#offcanvas .idef-mobile-search .ct-search-results {
    --search-dropdown-position: static;
    --search-dropdown-background: var(--theme-palette-color-7, #151a21);
    --search-dropdown-box-shadow: none;
    --items-divider: 1px solid var(--theme-border-color, #303640);
    margin-block-start: 10px;
    padding: 0;
}

#offcanvas .idef-mobile-search .ct-search-item {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 689px) {
    #search-modal .ct-search-form {
        --theme-form-font-size: 16px;
    }

    #search-modal .ct-search-results {
        grid-template-columns: minmax(0, 1fr);
    }
}
