/* BREADCRUMB */
.breadcrumb {background-color: #f5f5f5; padding-block: 8px; --_c-grey-600: #6c757d;}
.breadcrumb li {display: inline-flex; align-items: center;}
.breadcrumb li:not(:last-child)::after {margin-inline: 8px; content: '/';}
.breadcrumb li a {color: var(--c-tertiary);}
.breadcrumb li a:hover {color: var(--c-primary);}
.breadcrumb li a svg {margin-right: 3px;}
.breadcrumb li .active {color: var(--_c-grey-600);}
.breadcrumb * {transition: var(--transition);}

/* REVIEWS */
.search {padding-block: 20px 50px; --_c-light-100: #d6d6d6;}
.search .head {display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 35px;}
.search .head > * {width: 50%;}
.search .head > :first-child {font-size: var(--fs-xl, 36px);}
.search .head p a {display: inline-block; color: var(--c-tertiary);}
.search .head p a:hover {text-decoration: underline;}
.search .row { display: grid; grid-template-columns: 73.7% 1fr; gap: 22px; --_c-light-50: #F5F5F5; --_c-light-100: #0A489B;}
.search .related-products {text-align: center;}
.search .related-products .products-grid {display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 20px; row-gap: 30px;}
.search .products {height: fit-content; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.product-item {position: relative; transition: .4s;}
.product-item img {width: 100%; height: 282px; object-fit: cover; background-color: #F5F5F5; padding: 12px;}
.product-item strong {display: block; font-size: var(--fs-base); padding: 10px; color: #000; margin: 0; font-size: var(--fs-18); transition: .4s;}
.product-item span {display: flex; align-items: center; justify-content: center; opacity: 0; position: absolute; inset: 0; margin: auto; height: 40px; width: 120px;  background-color: rgba(255, 255, 255, 0.8); color: var(--c-secondary); font-weight: 600; border-radius: 8px; font-size: var(--fs-18); transition: .4s;}
.product-item:hover img {border: 1px solid #0A489B;}
.product-item:hover span {opacity: 1;}
.product-item:hover strong {background-color: var(--_c-light-100); color: #fff;}:where(.search, .search :where(.head, .head *, .wrapper, .products, .item, .item *)) {transition: var(--transition);}
.pagination {display: flex; align-items: center; justify-content: flex-end; margin-top: 30px; --_-c-light-100: #e9e9e9; grid-column: 1/3;}
.pagination :where(a, span) {display: block; background-color: #fff; color: var(--c-tertiary); padding: 8px 12px; border: 1px solid #dee2e6;}
.pagination a:hover {color: var(--c-secondary);}
.pagination a[aria-hidden="true"] {display: none;}
:where(.pagination, .pagination *) {transition: var(--transition);}
.search .wrapper .products-grid {height: fit-content;display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 20px; row-gap: 30px;}


/* Media Quries */

@media only screen and (max-width: 991px) {
.search .head {margin-bottom: 20px;}
.search .row {grid-template-columns: 1fr;}
.pagination{grid-column:1/3;}
}

@media only screen and (max-width: 767px) {
.search {padding-block: 20px;}
.search .head {flex-direction: column;}
.search .head > * {width: 100%;}
.search .products {grid-template-columns: repeat(2, 1fr);}
.search .related-products .products-grid  {grid-template-columns: repeat(2, 1fr);}
.pagination{grid-column:1/2;}


}

@media only screen and (max-width: 475px) {
.search .products {grid-template-columns: 1fr;}
.search .related-products .products-grid  {grid-template-columns: 1fr; place-items:center}
.search .item > img {display: block; margin-inline: auto;}

}