/*this css for the search-product-slider in mobile-view*/
.card_section_search{
    width: 109px !important; height: 169px; position: relative; background: white; border-radius: 12px; border: 1px solid var(--natural-border);
}
.card_image_div_search{
    width: 108px; height: 169px; left: 0px; top: 0px; position: absolute; border-radius: 12px; overflow: hidden; flex-direction: column; justify-content: flex-start; align-items: center; display: inline-flex;
}
.card_section_search:hover{
    border: 1px solid var(--materialcolororange-300);
    cursor: pointer;
    /* box-shadow: 0px 12px 16px -4px rgba(239, 108, 0, 0.10), 0px 4px 6px -2px rgba(239, 108, 0, 0.05); */
    box-shadow: var(--shadow-orange-lg-orange);
}
.card_image_search{
    width: 109px; height: 109px;
}
.card_description_container_search{
    align-self: stretch; height: 72px;
    padding: 12px 8px;
    justify-content: flex-start; align-items: center; display: inline-flex;
}
.card_description_search{
    margin-top:-9px;align-self: stretch; max-height: 50px; color: #1C1C14; font-size: 16px; font-weight: 500; line-height: 24px; word-wrap: break-word ;overflow: hidden; 
}

@media (max-width: 480px) {
  .card_description_search #card_text {
    font-size: 12px;      /* slightly larger for readability */
    word-spacing: 2px;    /* fixed spacing */
    line-height: 1.4;     /* better line spacing */
  }
}

/* Chrome, Edge, and Safari */
@media screen and (min-width:768px) {
    #product-slider-container{
        height: 290px !important;
    }
    .card_section_search{
    width: 208px !important; height: 280px; position: relative; background: white; border-radius: 12px; border: 1px solid var(--natural-border);
    }
    .card_image_div_search{
    width: 208px; height: 280px; left: 0px; top: 0px; position: absolute; border-radius: 12px; overflow: hidden; flex-direction: column; justify-content: flex-start; align-items: center; display: inline-flex;
    }
    .card_section_search:hover{
    border: 1px solid var(--materialcolororange-300);
    cursor: pointer;
    /* box-shadow: 0px 12px 16px -4px rgba(239, 108, 0, 0.10), 0px 4px 6px -2px rgba(239, 108, 0, 0.05); */
    box-shadow: var(--shadow-orange-lg-orange);
    }
    .card_image_search{
    width: 208px; height: 208px;
    }
    .card_description_container_search{
    align-self: stretch; height: 72px;
    padding: 12px 8px;
    justify-content: flex-start; align-items: center; display: inline-flex;
    }
    .card_description_search{
    align-self: stretch; height: 45px; color: #1C1C14; font-size: 16px; font-weight: 500; line-height: 24px; word-wrap: break-word ;overflow: hidden; 
    }
    /* Gutters for the arrows. Without them the buttons sat on top of the first
       and last cards -- at left/right: 1vw the prev circle covered the leading
       card's image. The row is clipped by the swiper's own overflow:hidden, so
       cards scroll behind the gutters instead of under the buttons. */
    #product-slider-container {
        padding-left: 64px;
        padding-right: 64px;
    }
}

/* ---- Enter-key search results: slider arrows ----
   These rules used to live inside the >=768px block above, which left the two
   buttons unstyled and in normal document flow on phones -- bare SVGs dropped
   below the cards. They are styled here for every width and hidden on phones,
   where the row is swiped rather than paged. */
#product-slider-container {
    position: relative; /* arrows position against this container */
}

.swiper-button-search-result-prev,
.swiper-button-search-result-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: whitesmoke;
    border-radius: 50%; /* circular */
    box-shadow: 0 2px 6px rgba(0,0,0,0.2); /* subtle shadow */
    transition: background-color .15s ease;
}

.swiper-button-search-result-prev:hover,
.swiper-button-search-result-next:hover {
    background-color: #fff;
}

/* Centred in the 64px gutter the container reserves above. */
.swiper-button-search-result-prev {
    left: 12px;
}

.swiper-button-search-result-next {
    right: 12px;
}

/* Swiper adds .swiper-button-lock to the nav elements when every slide already
   fits, i.e. there is nothing to page through. Its own display:none loses to
   the display:flex above because header.css is loaded after swiper-bundle.min.css,
   which is why a single-product result still showed both arrows -- the left one
   greyed out by .swiper-button-disabled and covering the only card. Re-state it
   here, alongside the .is-hidden class the search handler toggles. */
.swiper-button-search-result-prev.swiper-button-lock,
.swiper-button-search-result-next.swiper-button-lock,
.swiper-button-search-result-prev.is-hidden,
.swiper-button-search-result-next.is-hidden {
    display: none;
}

@media screen and (max-width: 767px) {
    .swiper-button-search-result-prev,
    .swiper-button-search-result-next {
        display: none;
    }
}