* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body{
    background-color: #fcf8f4;
}

.heroSection {
    width: 95%;
    padding: 0 2rem;
    margin: auto;
}

.headings {
    margin: 30px 0px 15px;
}

.headings i {
    font-size: 17px;
    color: rgba(0, 0, 0, 0.700);
}

.headings .find {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.700);
    line-height: 1;
}

.navlinks {
    display: flex;
    gap: 30px;
    padding: 18px 0px 10px 0px;
}

.navlinks .browseNav,
.navlinks .uploadNav,
.navlinks .cartNav {
    padding: 8px 12px;
    display: flex;
    gap: 5px;
    align-items: center;
    border-radius: 8px;
    cursor: pointer;
}

.navlinks button {
    color: #666;
    cursor: pointer;
    background-color: transparent;
    font-size: 14px;
    border: none;
}

.navlinks i {
    font-size: 16px;
    color: #666;
}

.navlinks .active {
    background-color: #452b1fd2;
}

.navlinks .active button {
    color: white;
    font-weight: 400;
}

.navlinks .active i {
    color: white;
}

.heroSection .search {
    display: flex;
    gap: 10px;
    align-items: center;
    padding-top: 10px;   
    width: 100%;
}

.heroSection .input {  
    width: 400px;
    position: relative;
    display: flex;
    align-items: center;  
}

.heroSection .search .largeSearch {
    position: absolute;
    left: 12px;
    top: 13px;
    /* color: rgba(0, 0, 0, 0.400); */
    color: rgba(0, 0, 0, 0.600);
    font-size: 14px;
}

#clearSearch {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%); 
    color: #999;
    cursor: pointer;
    display: none;
    font-size: 18px;
    transition: color 0.2s;
}

#clearSearch:hover {
    color: #666;
}

.search .slide {
    cursor: pointer;
}

.heroSection .search .fa-sliders {
    color: rgba(0, 0, 0, 0.850);
}

.heroSection .search .fa-sliders:hover {
    color: rgba(0, 0, 0, 0.700);
}

.heroSection .search input {
    width: 100%;
    padding: 10px 35px;
    font-size: 15px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background-color: transparent;
}

.heroSection .search input:focus {
    outline: 1px solid #452b1f86;
}

.heroSection .search input:focus::placeholder {
    color: transparent;
}

.twoDiv {
    position: relative;
}

.dropdownFilter-div {
    display: none;
    position: absolute;
    top: 35px;
    right: 0;
    z-index: 100;
    background-color: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.308);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.281);
}

.dropdownFilter-div.active {
    display: block;
}

.dropdownFilter-title .head {
    font-weight: bold;
    font-size: 15px;
    padding: 0px 0px 15px 0px;
}

.custom-dropdown {
    position: relative;
    width: 230px;
    font-family: sans-serif;
    margin-bottom: 20px;
}

.label {
    margin-bottom: 5px;
    font-size: 14px;
}

.dropdown-selected {
    padding: 10px;
    border: 1px solid #ccc;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    background-color: transparent;
    transition: border 0.2s;
    font-size: 15px;
}

.dropdown-selected:hover {
    border-color: #888;
}

.chevron i {
    display: inline-block;
    transition: transform 0.3s ease;
}

.dropdown-selected.open .chevron i {
    transform: rotate(180deg);
}

.dropdown-options {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    list-style: none;
    padding: 0;
    margin: 5px 0 0 0;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    z-index: 10;
    border-radius: 5px;
    max-height: 0;
    transition: max-height 0.3s ease;
    /* display: none; */
}

.dropdown-options.open {
    max-height: 500px;
}

.dropdown-options li {
    padding: 10px;
    cursor: pointer;
}

.dropdown-options li:hover {
    background-color: #f0f0f0;
}

.filterButton .reset {
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 13px;
    background-color: transparent;
    border: 1px solid #452b1fd2;
    cursor: pointer;
    -webkit-appearance: none; 
    appearance: none;   
    color: black !important;
    /* -webkit-border-radius: 6px; */
}

.filterButton .reset:hover {
    border: 1px solid #452b1f86;
    background-color: transparent;
    color: black;
}

.filterButton .apply {
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 13px;
    background-color: #452b1fd2;
    border: none;
    cursor: pointer;
    color: white;
}

.filterButton .apply:hover {
    background-color: #452b1fe0;
}

.filters {
    position: relative;
    display: flex;
    gap: 8px;
    padding-top: 15px;
}

.filters button {
    cursor: pointer;
    background-color: transparent;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
    flex: 0 0 auto; 
    -webkit-appearance: none; 
    appearance: none;   
    color: black !important;  
    /* -webkit-border-radius: 6px; */
}

.filters button.active {
    border: none;
    background-color: #452b1fd2;
    color: white !important;
}

.filter-btn.js-hover {
    background-color: #452b1fd2 !important;
    color: white !important;
}

.listings {
    width: 90%;
    margin: auto;
}

.listings .total-listing {
    color: rgba(0, 0, 0, 0.719);
    padding: 30px 0px 10px 0px;
}

.product-container{
    width: 95%;
    margin: auto;
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(4, 1fr);
    color: black;
    padding: 0 2rem 50px 2rem;
}

.product-card {
    min-width: 0;
    width: 100%;
}

.image-container {
    position: relative;
    cursor: pointer;
}

.product-img {
    height: 50vh;
    width: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.image-container .overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.4) 100%);
    height: 50vh;
    border-radius: 8px;
}

.details {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 6px 0px 6px 0px;
    min-width: 0;
}

.details .shops, .details .locationText {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: rgba(82, 70, 70, 0.836);
    flex: 1; 
    min-width: 0; 
}

.details .shopName, .details .location {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.details .shops .user, .details .locationText .location-dot {
    color: rgba(0, 0, 0, 0.493);
    font-size: 12px;
    flex-shrink: 0;
}

.details .dot {
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.493);
    flex-shrink: 0; 
}

.price-cart {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.price-cart .product-price {
    color: rgba(0, 0, 0, 0.823);
    font-weight: bold;
    font-size: 16px;
}

.price-cart .ph-shopping-cart {
    font-size: 20px;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.900);
    border-radius: 15px;
    padding: 2px 8px;
}

.price-cart .naria {
    font-size: 12px;
}

.product-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(0, 0, 0, 0.900);
    font-size: 15px;
    padding-top: 6px;
}

.flexOverview {
    display: flex;
    gap: 20px;
    width: 90%;
    margin: auto;
}

.left-side {
    width: 65%;
}

.overview-container {
    padding: 10px 0px;
    position: sticky;
    top: 0;
    align-self: flex-start;
    width: 30%;
}

.title-container {
    width: 90%;
    margin: auto;
}

.product-title {
    font-size: 22px;
    padding-bottom: 10px;
    font-weight: 400;
}

.overview-img {
    height: 100vh;
    width: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.overview-price {
    font-weight: bold;
    padding-bottom: 8px;
}

.sSize, .sColor {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.747);
}

.color-box, .size-box {
  border: 1px solid #ccc;
  padding: 8px 12px;
  margin: 3px;
  display: inline-block;
  cursor: pointer;
  border-radius: 6px;
  font-size: 14px;
}

.color-box.active, .size-box.active {
  /* border: 2px solid black; */
  background: #452b1faf;
  color: white;
  border: none;
}

.size-options {
    padding-bottom: 5px;
}

.sapp {
    margin-right: 3px;
    color: rgba(3, 177, 3, 0.795);
    font-size: 15px;
    vertical-align: middle
}

#orderBtn {
    border: none;
    background-color: #452b1faf;
    padding: 9px 8px;
    width: 100%;
    border-radius: 5px;
    color: white;
    cursor: pointer;
    margin: 10px 0px;
}

#whatsappBtn {
    border: 1px solid #777;
    padding: 9px 8px;
    width: 100%;
    border-radius: 5px;
    color: white;
    cursor: pointer;
    background-color: transparent;
    color: black;
}

.detailed {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 5px 0px 15px 0px;
}

.detailed .shop-name, .detailed .location-overview, .detailed .available {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.836);
    /* width: 45%; */
}

.detailed .available {
    color: rgba(3, 177, 3, 0.795);
}

.detailed .fa-user, .detailed .fa-location-dot {
    padding: 0px 5px 0px 0px;
    color: rgba(0, 0, 0, 0.493);
}

.detailed .dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.493);
    margin: 0px 6px;
    vertical-align: middle;
}

.share button {
    border: 1px solid #777;
    padding: 2px 4px;
    border-radius: 2px;
    color: white;
    cursor: pointer;
    background-color: transparent;
    color: black;;
}

.share i {
    font-size: 15px;
}

.recommendedView {
    scrollbar-width: none;
    /* overflow-x: auto; */
    width: 90%;
    margin: auto;
}

.recommendedOverview {
    display: flex;
    gap: 20px;
}

.recommended {
    padding: 20px 0px 8px 0px;
    font-size: 18px;
}

.recommended-card {
    width: 100%;
}

.recommended-img {
    height: 50vh;
    width: 100%;
    object-fit: cover;
    border-radius: 5px;
}

#loading-spinner {
    display: none; 
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 30px 0;
    grid-column: 1 / -1; 
}

#loading-spinner img.feed-logo-pulse {
    width: 45px; 
    height: auto;
    display: block;
    animation: feedBlurPulse 1.2s ease-in-out infinite; 
}
.no-results-card {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
    width: 100%;
}

.no-results-card .error-icon {
    font-size: 3.5rem;
    color: #666;
    margin-bottom: 15px;
    opacity: 0.8;
}

.no-results-card h3 {
    font-size: 1.3rem;
    color: #452b1fd2;
    font-weight: 700;
    margin-bottom: 8px;
}

.no-results-card p {
    font-size: 0.95rem;
    color: rgba(82, 70, 70, 0.85);
    max-width: 400px;
    line-height: 1.5;
}

@keyframes feedBlurPulse {
    0%, 100% {
        transform: scale(0.9);
        filter: blur(0px);
        opacity: 0.4;
    }
    50% {
        transform: scale(1.1);
        filter: blur(1.5px); 
        opacity: 1;
    }
}

@media screen and (max-width: 1024px) {

    .product-container {
        grid-template-columns: repeat(3, 1fr);
    }

   .product-img {
        height: 23vh;
        /* box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.300); */
    }

    .image-container .overlay {
        height: 23vh;
    }

    .overview-img {
        height: 45vh;
        width: 100%;
        object-fit: cover;
        border-radius: 8px;
    }

    .detailed .shop-name, .location-overview, .available {
        font-size: 11.2px;
        color: rgba(0, 0, 0, 0.836);
        /* width: 45%; */
    }

    .available {
        color: rgba(3, 177, 3, 0.795);
    }

    .detailed .fa-user, .fa-location-dot {
        padding: 0px 5px 0px 0px;
        color: rgba(0, 0, 0, 0.493);
    }

    .detailed .dot {
        display: inline-block;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.493);
        margin: 0px 3px;
        vertical-align: middle;
    }

    .sSize, .sColor {
        font-size: 12px;
        color: rgba(0, 0, 0, 0.747);
    }

    .color-box, .size-box {
        border: 1px solid #ccc;
        padding: 8px 10px;
        margin: 3px;
        display: inline-block;
        cursor: pointer;
        border-radius: 6px;
        font-size: 12px;
    }

    #orderBtn {
        font-size: 12px;
    }

    #whatsappBtn {
        font-size: 12px;
    }

    .fa-whatsapp {
        margin-right: 3px;
        color: rgba(3, 177, 3, 0.795);
        font-size: 14px;
        vertical-align: middle
    }

    .recommendedOverview {
        display: flex;
        width: 80rem;
        gap: 20px;
    }

    .recommended-img {
        height: 25vh;
        width: 100%;
        object-fit: cover;
        border-radius: 5px;
    }
}

@media screen and (max-width: 768px) {

    .heroSection {
        padding: 0 1.5rem;
    }

    .filter .new {
        display: block;
    }

    .filterDesktop {
        display: none;
    }

    .filter .browse{
        position: sticky;
        /* width: 100%; */
        top: 0;
        left: 0;
        right: 0;
        z-index: 200;
        background-color: #452b1faf;
    }

    .filter .categories.active {
        display: block;
    }

   .product-container {
        padding: 0 1.5rem 50px 1.5rem;
        grid-template-columns: repeat(3, 1fr);
    }

    .headings .hubTitle {
        font-size: 26px;
    }

    .headings .descript {
        font-size: 15px;
    }

    .headings .view {
        font-size: 13.5px;
    }

    .productGrid .images .shopName {
        font-size: 20px;
    }
}

@media screen and (max-width: 540px) {

    .headings i {
        font-size: 16px;
    }

    .headings .find {
        font-size: 15px;
    }

    .nav-menu li {
        display: none;
    }

    .nav-btn {
        display: none;
    }

    .navbar .bars {
        display: block;
    }

    .filters {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .filters::-webkit-scrollbar {
        display: none;
    }

    .product-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 430px) {
    
    .heroSection {
        padding: 0 1rem;
    }
    
    .headings .hubTitle {
        font-size: 25px;
    }

    .headings .descript {
        font-size: 14px;
    }

    .headings .view {
        font-size: 13px;
    }

    .order {
        font-size: 13px;
    }

    .product-container {
        padding: 0 1rem 50px 1rem;
        grid-template-columns: repeat(2, 1fr);
    }

    .productImages .app {
        bottom: 18px;
        font-size: 24px;
    }

    .productGrid .text .price {
        font-size: 15px;
        font-weight: bold;
    }

    .productGrid .text .name {
        font-size: 16px;
    }

    .productGrid .images .shopName {
        font-size: 18px;
    }

    .productGrid .text .location {
        font-size: 14.5px;
    }

    .productGrid .text .btn {
        font-size: 13px;
    }

    .productGrid .text .btn1 {
        font-size: 13px;
    }

    .footer  .marix {
        color: rgba(255, 255, 255, 0.950);
        margin-bottom: 10px;
        font-size: 19px;
    } 

    .footer-container p {
        color: #ccccccb0;
        font-size: 13px;
        margin: 5px 0;
    }

    .copyright {
        margin-top: 20px;
        font-size: 11px;
        color: #777;
    }
}

@media screen and (max-width: 375px) {
   
}