:root {
    --search-ink: #111111;
    --search-paper: #ffffff;
    --search-line: #d8d8d8;
    --search-muted: #656565;
}

.storefront-search,
.storefront-search *,
.search-page,
.search-page * { font-family: sans-serif !important; }
[dir="rtl"] .storefront-search,
[dir="rtl"] .storefront-search *,
[dir="rtl"] .search-page,
[dir="rtl"] .search-page * { font-family: 'Tajawal', sans-serif !important; }

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

.storefront-search[hidden] { display: none !important; }
.storefront-search {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    overflow: auto;
    color: var(--search-ink);
    background: var(--search-paper);
    box-shadow: none;
}
.storefront-search__canvas {
    width: min(1180px, calc(100% - 64px));
    min-height: 100%;
    margin: 0 auto;
    padding: 28px 0 64px;
}
.storefront-search__header,
.storefront-search__input-row,
.storefront-search__result,
.storefront-search__all,
.search-page__form,
.search-page__result { display: flex; align-items: center; }
.storefront-search__header { justify-content: space-between; margin-bottom: clamp(46px, 9vh, 104px); }
.storefront-search__eyebrow,
.search-page__eyebrow {
    margin: 0;
    color: var(--search-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.storefront-search__close {
    -webkit-appearance: none;
    appearance: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--search-line) !important;
    border-radius: 50%;
    color: var(--search-ink) !important;
    background: var(--search-paper) !important;
    background-image: none !important;
    cursor: pointer;
    box-shadow: none !important;
}
.storefront-search__close svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.storefront-search__close:hover,
.storefront-search__close:focus-visible { border-color: var(--search-ink) !important; color: var(--search-ink) !important; background: #f4f4f2 !important; background-image: none !important; outline: 2px solid transparent; }
.storefront-search__input-row {
    gap: 18px;
    border-bottom: 2px solid var(--search-ink);
}
.storefront-search__magnifier,
.search-page__form svg { width: 27px; flex: 0 0 27px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.storefront-search__input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    padding: 14px 0 18px;
    color: inherit;
    background: transparent;
    font: inherit;
    font-size: clamp(30px, 5vw, 68px);
    font-weight: 500;
    letter-spacing: -.04em;
    box-shadow: none;
}
.storefront-search__input::-webkit-search-cancel-button,
.search-page__form input::-webkit-search-cancel-button { display: none !important; -webkit-appearance: none !important; appearance: none !important; }
.storefront-search__input::placeholder { color: #a1a1a1; opacity: 1; }
.storefront-search__clear,
.search-page__clear {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50%;
    color: var(--search-ink) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    cursor: pointer;
    box-shadow: none !important;
    filter: none !important;
}
.storefront-search__clear[hidden],
.search-page__clear[hidden] { display: none !important; }
.storefront-search__clear svg,
.search-page__clear svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.storefront-search__clear:hover,
.storefront-search__clear:focus-visible,
.search-page__clear:hover,
.search-page__clear:focus-visible { color: var(--search-ink) !important; background: #f4f4f2 !important; background-color: #f4f4f2 !important; background-image: none !important; box-shadow: none !important; filter: none !important; outline: 0; }
.storefront-search__hint,
.storefront-search__status { color: var(--search-muted); font-size: 14px; }
.storefront-search__hint { margin: 14px 0 0; }
.storefront-search__status { min-height: 22px; margin: 34px 0 10px; }
.storefront-search__group { border-top: 1px solid var(--search-line); padding: 24px 0 14px; }
.storefront-search__group-title { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.storefront-search__result,
.search-page__result {
    position: relative;
    gap: 18px;
    padding: 16px 14px;
    border-bottom: 1px solid #eeeeee;
    color: inherit;
    text-decoration: none;
    box-shadow: none;
}
.storefront-search__result.is-active,
.storefront-search__result:hover,
.search-page__result:hover { background: #f7f7f5; }
.storefront-search__group .storefront-search__result:last-child,
.search-page__group .search-page__result:last-child { border-bottom: 0; }
.storefront-search__thumb,
.search-page__thumb {
    width: 70px;
    height: 70px;
    flex: 0 0 70px;
    border: 1px solid #e4e4e4;
    background: #f3f3f1;
    object-fit: cover;
}
.storefront-search__thumb[src$="placeHolder.svg"],
.search-page__thumb[src$="placeHolder.svg"] { padding: 10px; object-fit: contain; }
.storefront-search__copy,
.search-page__copy { min-width: 0; flex: 1; }
.storefront-search__name,
.search-page__name { display: block; margin-bottom: 5px; font-size: 17px; font-weight: 700; }
.storefront-search__description,
.search-page__description { display: block; overflow: hidden; color: var(--search-muted); font-size: 14px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.storefront-search__meta,
.search-page__meta { flex: 0 0 auto; font-size: 14px; font-weight: 700; }
.storefront-search__stock,
.search-page__stock { display: block; color: #9c2d24; font-size: 12px; font-weight: 700; }
.storefront-search__all { justify-content: space-between; margin-top: 26px; border-bottom: 1px solid var(--search-ink); padding: 14px 0; color: inherit; font-weight: 700; text-decoration: none; }

.search-page { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: clamp(34px, 10vw, 80px) 0 100px; color: var(--search-ink); }
.search-page__heading h1 { margin: 9px 0 42px; font-size: clamp(40px, 7vw, 86px); line-height: .98; letter-spacing: -.05em; }
.search-page__form { gap: 14px; border-bottom: 2px solid var(--search-ink); }
.search-page__form input { min-width: 0; width: 100%; border: 0; outline: 0; padding: 14px 0; background: transparent; font: inherit; font-size: clamp(22px, 3vw, 38px); box-shadow: none; }
.search-page__form button { border: 1px solid var(--search-ink); padding: 10px 18px; color: inherit; background: transparent; font: inherit; font-weight: 700; cursor: pointer; box-shadow: none; }
.search-page__filters { display: flex; gap: 26px; overflow-x: auto; padding: 30px 0 8px; }
.search-page__filter { border: 0; border-bottom: 1px solid transparent; padding: 5px 0; color: var(--search-muted); background: transparent; white-space: nowrap; cursor: pointer; }
.search-page__filter.is-active { border-color: var(--search-ink); color: var(--search-ink); font-weight: 700; }
.search-page__summary { min-height: 50px; padding: 20px 0 10px; color: var(--search-muted); }
.search-page__group { margin-top: 32px; }
.search-page__group h2 { border-bottom: 1px solid var(--search-line); padding-bottom: 12px; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; }
.search-page__thumb { width: 92px; height: 92px; flex-basis: 92px; }
.search-page__more { display: block; margin: 42px auto 0; border: 1px solid var(--search-ink); padding: 13px 22px; color: inherit; background: transparent; font: inherit; font-weight: 700; cursor: pointer; box-shadow: none; }
.search-page__more[hidden] { display: none; }

[dir="rtl"] .storefront-search__all span { transform: rotate(180deg); }
[dir="rtl"] .storefront-search,
[dir="rtl"] .storefront-search__canvas,
[dir="rtl"] .storefront-search__input,
[dir="rtl"] .storefront-search__hint,
[dir="rtl"] .storefront-search__status,
[dir="rtl"] .storefront-search__results,
[dir="rtl"] .storefront-search__group,
[dir="rtl"] .storefront-search__group-title,
[dir="rtl"] .storefront-search__copy,
[dir="rtl"] .search-page,
[dir="rtl"] .search-page__form input,
[dir="rtl"] .search-page__summary,
[dir="rtl"] .search-page__results,
[dir="rtl"] .search-page__copy { direction: rtl; text-align: right; }

@media (max-width: 640px) {
    .storefront-search__canvas { width: calc(100% - 32px); padding-top: 16px; }
    .storefront-search__header { position: sticky; top: 0; z-index: 2; margin-bottom: 36px; padding: 4px 0 14px; background: var(--search-paper); }
    .storefront-search__input { font-size: 30px; }
    .storefront-search__hint { line-height: 1.5; }
    .storefront-search__result,
    .search-page__result { gap: 12px; padding-inline: 10px; }
    .storefront-search__thumb { width: 58px; height: 58px; flex-basis: 58px; }
    .storefront-search__description { display: none; }
    .storefront-search__meta { align-self: flex-start; font-size: 12px; }
    .search-page { width: calc(100% - 32px); padding-top: 54px; }
    .search-page__form button { padding-inline: 12px; }
    .search-page__thumb { width: 68px; height: 68px; flex-basis: 68px; }
    .search-page__description { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

@media (prefers-reduced-motion: reduce) {
    .storefront-search *, .search-page * { scroll-behavior: auto !important; }
}