.banner-content {
    max-width: 450px;
}

.banner-title, .search-container {
    max-width: 290px;
}

.banner-content p {
    color: white;
    margin-bottom: 20px !important;
}

.product-badge {
    width: fit-content;
    margin-top: 15px;
}

/* override to use 4 columns instead of 3 */
@media (min-width: 1200px) {
    .all-products-joi-section .product-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

.btn-add-to-pack {
  display: block;
  padding: 12px;
  background-color: transparent;
  border: solid 1px #bbbbbb;
  cursor: pointer;
  border-radius: 100px;
  letter-spacing: 0.03em;
  font-size: 0.9rem;  
  width: 100%;
}

/*Mobile search result btn*/
@media (min-width: 320px) AND (max-width: 420px){
    .btn-add-to-pack {
        padding: 7px 7px 7px;
        font-size: .7rem;
    }
}

/* override from template-shop.css -- could just put this there is shop page will also use row of 4 */
/* .all-products-joi-section .product-card { */
    /* max-width: 300px !important;
    margin: 0 auto; */
/* } */

.custom-pack-search .search-results {
    flex-wrap: nowrap !important;
}

/* @media (min-width: 769px) {
    .all-products-joi-section .product-card-inner { */
        /* max-width: 300px !important;
        max-height: 300px !important; */
    /* }
} */


@media (min-width: 992px) {
    .search-modal.custom-pack-search .search-results.show {
        max-height: 470px;
        /* max-height: fit-content; */
    }

    .search-modal.custom-pack-search {
        height: 632px;
    }
}


/* there must be a better way to turn that x from blue to white  */
/* input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 18px;
  width: 18px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center;
  background-size: contain;
  cursor: pointer;
} */


@media (min-width: 1260px) {
	.all-products-joi-section .product-grid {
		max-width: 1254px !important;
	}
}