.searchBar-root-xCG {
    /* composes: max-w-site from global; */

    /* TODO @TW: review (B6) */
    /* composes: hidden from global; */
    display: none;
}

.searchBar-root_open-gYA {

    /* TODO @TW: review (B6) */
    /* composes: grid from global; */
    display: grid;
}

.searchBar-form-Q8N {
}

.searchBar-container-Dbn {
    /* composes: inline-flex from global;
    composes: items-center from global;
    composes: justify-center from global;
    composes: max-w-[24rem] from global;
    composes: pb-xs from global;
    composes: relative from global; */
    padding: 0 60px 0 12px;
    position: relative;
}

.searchBar-search-Hc5 {
    z-index: 0;
    grid-template-columns: 1fr auto;
    align-items: center;
    background: #fff;
    border-radius: 2rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    padding: 2px 2px 2px 16px;
}

.searchBar-searchButton-u9J {
  cursor: pointer;
  background: #000 url(/us/s_search_ai.png) no-repeat 10px 50%;
  background-size: auto 24px;
  border: 1px solid rgba(255, 255, 255, 0.60);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.10), 0px 0px 30px 0px rgba(0, 0, 0, 0.10);
  -webkit-backdrop-filter: blur(25px);
          backdrop-filter: blur(25px);
  border-radius: 24px;
  padding: 8px 24px 8px 48px; color: #fff;
}

.searchBar-searchButton-u9J:hover {
    opacity: 0.8;
}

.searchBar-autocomplete-jHv {
    /* composes: relative from global; */
}
.searchBar-searchField-iRg {
    width: 100%;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent;
}

.searchBar-searchField-iRg:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}
.searchBar-imgButton-sfU{
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.60);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.10), 0px 0px 30px 0px rgba(0, 0, 0, 0.10);
    -webkit-backdrop-filter: blur(25px);
            backdrop-filter: blur(25px);
    background:#fff url(/us/s_search_pic.svg) no-repeat center;
    background-size: 24px auto;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}
.searchBar-imgButton-sfU:hover {
    opacity: 0.8;
}
@media screen and (max-width: 960px) {
    .searchBar-search-Hc5{
        padding-left: 2px;
    }
    .searchBar-searchButton-u9J{
        text-indent: -9999px; overflow: hidden; width: 44px; box-sizing: border-box; padding: 0; height: 44px;
    }
    .searchBar-root_open-gYA{
        padding: 0;
    }
}
.field-root-HJ- {
}

.field-label-ZLF {
    min-height: 2.125rem;
}

.field-input-CUm {
    padding: calc(0.375rem - 1px) calc(0.625rem - 1px); /* TODO @TW: review */

    /* composes: focus_outline-none from global;
    composes: focus_shadow-inputFocus from global; */
}

.field-input-CUm:disabled {
    background: rgb(var(--venia-global-color-gray-100));
    border-color: rgb(var(--venia-global-color-gray-400));
    color: rgb(var(--venia-global-color-gray-darker));
}

.field-optional-j24 {
}


.field-input-new-y-X {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    /* padding-left: calc(1.875rem * var(--iconsBefore) + 18px);
    padding-right: calc(1.875rem * var(--iconsAfter) +17px); */
    padding:0 10px;
    line-height: 16px;
    font-size:14px;
    color: #000;
}

.textInput-input-Jz0 {
    outline:none; 
    height: 72px;
    border-radius: 16px;
    font-size: 22px;
    padding-left: 32px;
}

.textInput-input_error-9x2 {
    outline:none;
}

.textInput-input_shimmer-Eo6 {
    font-size: 1rem;
    padding: calc(0.375rem - 1px) calc(0.625rem - 1px);
}


.textInput-inputnew-r4g {
    /* outline-color:#000; */
    outline:none;
}

.textInput-inputnone-BpN {
    /* composes: input from '../Field/field.module.css';
    composes: disabled_text-subtle from global; */
    font-size: 50px;
    height: 80px;
    width: 100%;
    padding: 20px 20px 30px 0;
    outline: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.textInput-inputnew_error-X3q {
    border: 1px solid rgba(229, 53, 53, 1);
    outline:none;
}

@media (max-width: 960px) {
    .textInput-inputnone-BpN {
        font-size: 16px;
        height: 60px; padding: 0;
    }
}
.fieldIcons-root-ecG {
    grid-template-areas: 'before input after';
    grid-template-columns: auto 1fr auto;
}

.fieldIcons-input-Ced {
    grid-column: before-start / after-end;
    grid-row: input-start / input-end;
}

/* TODO @TW: cannot compose */
.fieldIcons-input-Ced > input {
    padding-left: calc(1.875rem * var(--iconsBefore) + 0.625rem);
    padding-right: calc(1.875rem * var(--iconsAfter) + 0.625rem);
}

.fieldIcons-before-G3M,
.fieldIcons-after-xwp {
    /* padding-top: 8px; */
}

/* TODO @TW: cannot compose */
.fieldIcons-before-G3M:empty,
.fieldIcons-after-xwp:empty {
    display: none;
}

.fieldIcons-before-G3M {
    grid-area: before;
}

.fieldIcons-after-xwp {
    grid-area: after;
}

/* TODO @TW: cannot compose */
.fieldIcons-before-G3M svg {
    /* composes: stroke-gray-600 from global; */
    stroke: rgb(var(--venia-global-color-gray-600));
}


/* 新样式 2023-9 */

.fieldIcons-root-new-PzW,
.fieldIcons-root-new_error-lEy,
.fieldIcons-root-none-Psw,
.fieldIcons-root-none_error-nGQ {
    grid-template-areas: 'before input after';
    grid-template-columns: auto 1fr auto;
}

.fieldIcons-input-new-9zR,
.fieldIcons-input-new_error-LGY,
.fieldIcons-input-none-uvl,
.fieldIcons-input-none_error-omQ  {
    grid-column: before-start / after-end;
    grid-row: input-start / input-end;
}

/* TODO @TW: cannot compose */
.fieldIcons-input-new-9zR > input,
.fieldIcons-input-new_error-LGY > input,
.fieldIcons-input-none-uvl > input,
.fieldIcons-input-none_error-omQ > input {
    /* padding-left: calc(1.875rem * var(--iconsBefore) + 18px);
    padding-right: calc(1.875rem * var(--iconsAfter) +17px); */
    padding:0 10px;
}

.fieldIcons-before-new-1Lp,
.fieldIcons-after-new-7V0,
.fieldIcons-before-none--yZ,
.fieldIcons-after-none-Lno {
    color: #000;
}
.fieldIcons-before-new_error-aVE,
.fieldIcons-after-new_error-rZ7,
.fieldIcons-before-none_error--H3,
.fieldIcons-after-none_error-HzQ {
    color: rgba(185, 28, 28, 1);
}
/* TODO @TW: cannot compose */
.fieldIcons-before-new-1Lp:empty,
.fieldIcons-before-new_error-aVE:empty,
.fieldIcons-after-new-7V0:empty,
.fieldIcons-after-new_error-rZ7:empty,
.fieldIcons-before-none--yZ:empty,
.fieldIcons-before-none_error--H3:empty,
.fieldIcons-after-none-Lno:empty,
.fieldIcons-after-none_error-HzQ:empty  {
    display: none;
}

.fieldIcons-before-new-1Lp,
.fieldIcons-before-new_error-aVE,
.fieldIcons-before-none--yZ,
.fieldIcons-before-none_error--H3 {
    grid-area: before;
}

.fieldIcons-after-new-7V0,
.fieldIcons-after-new_error-rZ7,
.fieldIcons-after-none-Lno,
.fieldIcons-after-none_error-HzQ {
    grid-area: after;
}

/* TODO @TW: cannot compose */
.fieldIcons-before-new-1Lp svg,
.fieldIcons-before-none--yZ svg  {
    /* composes: stroke-gray-600 from global; */
    stroke: rgb(var(--venia-global-color-gray-600));
}
.message-root-B-9 {
}

/* TODO @TW: cannot compose */
.message-root-B-9:empty {
    display: none;
}

.message-root_error-sDd {
    font-size: 12px;
}

.autocomplete-root-jMt {
    /* composes: border-2 from global; */
    /* composes: border-input from global; */
    /* composes: border-solid from global; */
    /* composes: border-t-0 from global; */
    /* composes: gap-3 from global; */
    transition-property: opacity, transform, visibility;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.autocomplete-root_hidden--Et {
    transform: translate3d(0, -2rem, 0);
    transition-duration: 192ms;
    transition-timing-function: var(--venia-global-anim-out);
}

.autocomplete-root_visible--p4 {
    transform: translate3d(0, 0, 0);
    transition-duration: 224ms;
    transition-timing-function: var(--venia-global-anim-in);
}
.autocomplete-seeMore-4aC:hover{
    text-decoration: underline;   
}
.autocomplete-message-2Gf {
}

/* TODO @TW: cannot compose */
.autocomplete-message-2Gf:empty {
    padding: 0;
}

.autocomplete-suggestions-X0R {
}

/* TODO @TW: cannot compose */
.autocomplete-suggestions-X0R:empty {
    display: none;
}

.autocomplete-advertise-Gly {
    margin-bottom: 8px;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 4px;
}
/* 想要隐藏advertise在水平方向的局部滚动条 */
.autocomplete-advertise-Gly::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}
.autocomplete-advertise-Gly::-webkit-scrollbar-thumb {
    background: transparent; /* Chrome, Safari and Opera */
}
.autocomplete-advertise-Gly::-webkit-scrollbar-track {
    background: transparent; /* Chrome, Safari and Opera */
}

.autocomplete-advertiseList-rJw {
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding-bottom: 2px;
}

.autocomplete-advertiseItem-bCV {
    display: inline-block;
    background: #f5f5f5;
    color: #333;
    border-radius: 12px;
    padding: 4px 14px;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}

.autocomplete-advertiseItem-bCV:hover {
    background: #222;
    color: #fff;
}
.autocomplete-searchText-WJb {
    height: 40px;
    box-sizing: border-box;
    cursor: pointer;
    padding: 6px 24px 6px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background:rgba(0, 0, 0, 0.01) url(/us/i_search_black.svg) no-repeat 10px 50%;
    background-size: auto 16px;
    border-radius: 4px;
    font-size: 18px;
}

.autocomplete-active-7g- {
    padding: 6px 24px 6px 32px;
    background:#000 url(/us/s_search_ai.png) no-repeat 10px 50%;
    background-size: auto 16px;
    color: #fff;
}

.autocomplete-suggestionItem-IdM {
    height: 40px;
    box-sizing: border-box;
    cursor: pointer;
    padding: 6px 24px 6px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.autocomplete-tag-Afa {
    border-radius: 8px;
    background: var(--Black-Black-5, rgba(0, 0, 0, 0.05));
    display: flex;
    height: 32px;
    padding: 0 8px;
    justify-content: center;
    align-items: center;
}
@media screen and (max-width: 960px) {
    .autocomplete-root_visible--p4 {
        width: calc(100% + 60px);
    }
    .autocomplete-searchText-WJb{
        padding-right: 0;
    }
    .autocomplete-tag-Afa{
        font-size: 12px; height: 24px;
    }
}
.suggestions-heading-QIb {
}
.suggestions-count-sn8{
}

.suggestedProducts-products-Sv3 {
}

/* TODO @TW: cannot compose */
.suggestedProducts-products-Sv3:empty {
    display: none;
}

/* PC 一行2列布局,Mobile一行一列 */
.suggestedProducts-root-cFI {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px; 
    row-gap: 0;
    text-align: left;
}
@media screen and (max-width: 960px) {
    .suggestedProducts-root-cFI {
        grid-template-columns: 1fr;
    }
}
.suggestedProduct-root-yeV {
    grid-template-columns: 90px 1fr;
    /* background-color: #f5f5f5; */
    /* border-bottom: 1px solid #f5f5f5; */
}
.suggestedProduct-root-yeV:hover{
    background-color: #f5f5f5;
}
.suggestedProduct-image-DYM {
    height: 72px;
    border-radius: 4px;
    background-color: var(--color-bg-secondary);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}

.suggestedProduct-thumbnail-wOZ {
    width: 99%;
    max-width: 99%;
    max-height: 99%;
    -o-object-fit: contain;
       object-fit: contain;
    margin-left: 8px;
}
/* name保持一行显示,多余的话用省略号 */
.suggestedProduct-name-Z1x {
    line-height: 1; height: 30px;
    word-break: break-all;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

