/* breadcrums */
.breadcrumb {background-color: #f5f5f5; padding-block: 8px; --_c-grey-600: #626568;}
.breadcrumb ul{display: flex;}
.breadcrumb li {display: inline-flex; align-items: center;}
.breadcrumb li:first-child::after {margin-inline: 4px; content: '/';}
.breadcrumb li:first-of-type > :first-child {margin-right: 6px;}
.breadcrumb li svg{margin-top: 0;}
.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);}

/* top-content */
.top-content {padding-top: 25px; --_c-light-50: #eee; --_c-light-100: #dedbd3; --_c-light-200: #c9c9c9; --_c-light-500:  #697277;;}
.top-content {text-align: center;}
.top-content .head  {margin-bottom:36px;}
.top-content .head > :first-child {font-size: calc(var(--fs-md) + 2px); margin-bottom: 12px;}
.top-content .custom__scroll {max-height: 75px;}
.top-content p {color: var(--_c-light-500);}

/* Product Details */
.product-detail {padding-block: 20px;}
.product-detail .row {display: grid; grid-template-columns: 69.7% 1fr; gap: 32px; --_c-light-50: #F5F5F5; --_c-light-100: #0A489B;}
.product-detail .related-products {text-align: center;}
.product-detail .related-products .products-grid {display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 20px; row-gap: 30px;}
.product-item {position: relative; transition: .4s;}
.product-item img {width: 100%; height: 250px; object-fit: contain; border: 1px solid #fff;}
.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;}
.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);}

/* bottom-content */
.bottom-content {padding-block: 30px 16px; --_c-light-50: #eee; --_c-light-100: #dedbd3; --_c-light-200: #c9c9c9; --_c-light-500: #697277;;}
.bottom-content .head > :first-child {font-size: calc(var(--fs-md, 24px) + 2px); color: var(--c-primary);  margin-bottom: 20px;}
.bottom-content :where(h2, h3, h4) {font-size: calc(var(--fs-md, 24px) - 2px); font-weight: 700; color:var(--_c-light-500); margin-bottom: 10px;}
.bottom-content ul{max-width: 650px;}
.bottom-content li{margin-bottom: 10px; font-size: var(--fs-base); color: var(--_c-light-500); line-height: 22px; list-style: disc inside;}
.bottom-content p{margin-bottom: 10px;}
.bottom-content .head {max-height: 290px; margin-bottom: 20px;}

/* Media Quries */
@media only screen and (max-width: 1000px) {
    .top-content .head > :first-child {font-size: var(--fs-24);}
    .bottom-content h2 {font-size: var(--fs-24);}
    .product-detail .row {grid-template-columns: 1fr; gap: 40px;}
    .product-detail .row .right-details {width: 100%; max-width: 560px;margin: 0 auto;}
}

@media only screen and (max-width: 900px) {
    .product-detail .row .left-details .banner {height: 350px;background-size: cover;}
    .product-detail input[type='radio'] {width: 100px;height: 100px;}
}
@media only screen and (max-width: 767px) {
    .products-grid {grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}
    .top-content {padding: 15px;}
    .product-detail {height: auto}
    .product-detail .row .right-details {width: 100%;padding-left: 0px}
    .product-content-row {flex-direction: column;}
    .product-content-row .left-content {max-width: 100%;padding-right: 0}
    .product-content-row .right-content {max-width: 100%;padding-left: 0}
    .product-content-row .right-content ul {padding-left: 20px}
    .bottom-content {padding: 30px 15px;}
}
@media only screen and (max-width: 629px) {
    .top-content .head > :first-child {font-size: var(--fs-22);}
    .product-detail .related-products .products-grid {grid-template-columns: repeat(2, 1fr);}
    .product-item img {background-size: cover}
}

@media only screen and (max-width: 575px) {
    .bottom-content {padding: 30px 0;}
}
@media only screen and (max-width: 450px) {
    .top-content p {font-size: var(--fs-xs);}
    .product-detail .related-products .products-grid {grid-template-columns: 1fr; justify-items:center;}
    .product-detail input[type='radio'] {width: 80px; height: 80px;}
    .bottom-content h2 {font-size: var(--fs-20);}
    .bottom-content p {font-size: var(--fs-15);} 
}