.archive .subpage-hero {padding: 60px 0;}
.archive .subpage-hero .intro {row-gap: 35px; display: flex; flex-direction: column;}
.archive .subpage-hero .intro h1 {font-size: 40px; line-height: 1.1; font-weight: 700; margin: 0; padding: 0; text-align: center;}
.archive .subpage-hero .intro .container {row-gap: 35px; display: flex; flex-direction: column;}
.archive .subpage-hero .text {margin: 0; padding: 0; text-align: center; color: var(--four-light); display: flex; flex-direction: column; gap: 35px;}
.archive .subpage-hero .text p {margin: 0; padding: 0;}
.archive .subpage-hero .intro:after {height: 3px; content: ''; width: 70px; background-color: var(--two);  display: block; margin: auto; top: 100%; display: table; left: 0; right: 0;}
.archive .search {display: flex; justify-content: flex-end; padding-top: 35px;}
.archive .search form {display: flex; align-items: center; gap: 15px;}
.archive .search form .search-field {padding: 5px 10px; border: 1px solid var(--four-lighted);  color: var(--four-light); width: 100%; display: inline-flex; font-size: 14px;}
.archive .search form .search-field::placeholder {color: var(--four-light);}
.archive .search form .search-submit {display: inline-flex; width: fit-content; padding: 4px 10px; background-color: transparent; color: var(--three);  border: solid 1px var(--three); font-size: 14px;}
.archive .search form .search-submit:hover {border: solid 1px var(--two); color: var(--two); background-color: transparent;}

.archive .blogposts .container {display: flex; flex-direction: column; gap: 35px;}
.archive .blogposts .single-blogpost {display: flex; background: #FFFFFF; box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.05); }
.archive .blogposts .single-blogpost .featured-img {width: 400px; height: auto; object-fit: cover; }
.archive .blogposts .single-blogpost .post-details {padding: 20px; display: flex; flex-direction: column; gap: 20px; width: 100%;}
.archive .blogposts .single-blogpost .post-details .author-time {display: flex; flex-direction: column; gap: 20px;}
.archive .blogposts .single-blogpost .post-details .author {display: flex; font-size: 12px; align-items: center; gap: 10px;}
.archive .blogposts .single-blogpost .post-details .author a {line-height: 1.1; color: var(--four);}
.archive .blogposts .single-blogpost .post-details .author a:hover {opacity: 0.8;}
.archive .blogposts .single-blogpost .post-details .avatar-img {width: 37px; height: 37px; }
.archive .blogposts .single-blogpost .post-details .time {display: flex; gap: 20px; font-size: 12px;}
.archive .blogposts .single-blogpost .post-details .time .date {display: flex; gap: 15px; white-space: nowrap; line-height: 1; color: var(--four-lighter);}
.archive .blogposts .single-blogpost .post-details .time .date svg {min-width: 10px; min-height: 10px; width: 10px; height: 10px;}
.archive .blogposts .single-blogpost .post-details .time .date svg * {fill: var(--four-lighter);}
.archive .blogposts .single-blogpost .post-details .title {font-size: 24px; color: var(--four-light); font-weight: 700;}
.archive .blogposts .single-blogpost .post-details .title:hover {opacity: 0.8;}
.archive .blogposts .single-blogpost .post-details .excerpt {flex: 1;}
.archive .blogposts .single-blogpost .post-details .excerpt p {color: var(--four-light); margin: 0; padding: 0;}
.archive .blogposts .single-blogpost .post-details .read-more {padding: 8px 35px;  background-color: var(--two); color: var(--zero); font-weight: bold; width: fit-content; font-size: 14px;}
.archive .blogposts .single-blogpost .post-details .read-more:hover {background-color: var(--two-dark);}


.archive .pagination {padding: 60px 0;}
.archive .pagination a {display: flex; width: fit-content; padding: 15px 40px; background-color: transparent; color: var(--three);  border: solid 1px var(--three);}
.archive .pagination a:hover {border: solid 1px var(--two); color: var(--two); background-color: transparent;}

.archive .products .container {display: grid; grid-template-columns: repeat(2, minmax(300px, 1fr)); gap: 35px;}
.archive .products .single-product {display: flex; background-color: #fff; box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.05); flex-grow: 1; flex-shrink: 0; height: 100%;}
.archive .products .single-product .featured-img {min-width: 250px; max-width: 250px; height: auto; object-fit: contain; margin: 1rem;}
.archive .products .single-product .post-details {padding: 20px; display: flex; flex-direction: column; gap: 20px; width: 100%;}
.archive .products .single-product .post-details .title {font-size: 24px; color: var(--four-light); font-weight: 700; line-height: 1.1;}
.archive .products .single-product .post-details .title:hover {opacity: 0.8;}
.archive .products .single-product .post-details .read-more {padding: 8px 35px;  background-color: var(--two); color: var(--zero); font-weight: bold; width: fit-content; font-size: 14px; margin-top: auto;}

.archive .product-categories .container {display: grid; grid-template-columns: repeat(2, minmax(300px, 1fr)); gap: 35px; margin-bottom: 120px;}
.archive .product-categories .single-category {background-color: #fff; box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.05); flex-grow: 1; flex-shrink: 0; height: 100%;}
.archive .product-categories .single-category a {display: flex; width: 100%; height: 100%; padding: 20px; flex-direction: column; gap: 20px; justify-content: center; align-items: center; text-align: center;}
.archive .product-categories .single-category a:hover {opacity: 0.8;}
.archive .product-categories .single-category a .name {font-size: 24px; color: var(--four-light); font-weight: 700; line-height: 1.1;}

@media (max-width: 1199.98px) {
	.archive .products .container {grid-template-columns: repeat(1, minmax(300px, 1fr));}
}

@media (max-width: 991.98px) {
	.archive .blogposts .single-blogpost .featured-img {width: 200px;}
}

@media (max-width: 767.98px) {
	.archive .search {justify-content: center;}
	.archive .blogposts .single-blogpost {flex-direction: column;}
	.archive .blogposts .single-blogpost .featured-img {width: 100%; height: 100px; }
	.archive .pagination .row {flex-direction: column; gap: 10px;}
	.archive .pagination a {width: 100%; justify-content: center;}
}