/* breadcrumb */
.breadcrumb {padding-block: 15px; background: #F8F8FA;}
.breadcrumb ul {margin: 0; padding: 0;}
.breadcrumb li {list-style-type: none; display: inline;}
.breadcrumb li:not(:first-child):before {content: "/";}
.breadcrumb li :where(a, span) {text-decoration: none; line-height: 1.2; color: #343a40;}
.breadcrumb li a:hover {color: var(--clr-red-dk); transition: var(--transition);}
.product {float: left; width: 100%; background-color: #f0f1f4; margin-bottom: 20px; border: 1px solid #f0f1f4; position: relative;}

/* product-detail */
.product-detail .related-products {text-align: center;}
.product-detail .related-products h1 {color: var(--clr-red); margin-bottom: 20px;}
.product-detail .related-products .products-grid {display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-bottom: 20px;}
.product-item {position: relative; background: no-repeat center/365px url('https://www.emenacpackaging.co.uk/wp-content/themes/Epukup/assets/images/products/product-bg.webp'); transition: .4s;}
.product-item img {padding: 30px 30px 0; object-fit: contain; transition: var(--transition);}
.product-item h2 {font-size: var(--fs-16); font-weight: var(--fw-400); padding: 10px; background-color: #f0f1f4; color: var(--clr-red); margin: 0; font-size: var(--fs-18); font-weight: var(--fw-500); transition: var(--transition);}
.product-item .detail {align-content:center; opacity: 0; position: absolute; inset: 0; margin: auto; height: 50px; width: 160px;  background-color: var(--clr-red-dk); color: #fff; border-radius: 50px; font-size: var(--fs-18); transition: .4s;}
.product-item:hover img {border: 1px solid #203d71;}
.product-item:hover .detail {opacity: 1;}
.product-item:hover h2 {background-color: #203d71; color: #fff;}
.product-detail .pagination .page-numbers  {display: inline-flex; align-items: center; margin: 10px 10px 10px 0px}
.product-detail .pagination .page-numbers{background-color: var(--clr-bg-light); padding: 15.5px 16px;}
.product-detail .pagination .current{background-color: var(--clr-red); color: #fff;}
.product-detail .pagination .page-numbers:hover{background-color: var(--clr-red); color: #fff;}

/* Top Content */
.top-content {padding-block: 30px; text-align: center;background-color: white; transition: var(--transition);}
.top-content :where(.container, .noresultsfound) :first-child {font-weight: var(--fw-700);font-size: var(--fs-28); line-height: 140%; margin-bottom: 12px;color: #343a40; transition: var(--transition);}
.top-content .detail {color: #0077FF;font-size: var(--fs-15);font-weight: 600;}

/*.product-detait */
.product-detail .related-products .products-grid { grid-template-columns: repeat(4, 1fr);}

/* Media Query */
@media only screen and (width <= 1200px) {:root {--fs-28: 26px;} .product-detail .related-products .products-grid { grid-template-columns: repeat(4, 1fr);}}
@media only screen and (width <= 991px) {.product-detail .related-products .products-grid { grid-template-columns: repeat(3, 1fr);}}
@media only screen and (width <= 767px) {:root {--fs-28: 24px;} .product-item h2 {font-size: var(--fs-16);} .product-item img {padding: 20px 20px 0;}}
@media only screen and (width <= 575px) {.product-detail .related-products .products-grid { grid-template-columns: repeat(2, 1fr);}}
@media only screen and (width <= 475px) {:root {--fs-28: 22px;} .product-detail .related-products .products-grid { grid-template-columns: 1fr;}}