AspireExplorer/assets/css/_archive.scss

.archive-plugin-card,
.archive-theme-card {
	max-width: 1200px !important;
	margin: 12px auto 0 auto;

	.plugin-results-count,
	.theme-results-count {
		font-size: 16px;
		line-height: 1.5;
		color: #555;
		margin-bottom: 16px;
	}

	.plugin-results,
	.theme-results {
		display: flex;
		flex-wrap: wrap;
		gap: 32px;
		font-size: 16px;
		line-height: 20px;
		color: #333;
		margin: 0;
		padding: 0;

		.plugin-card,
		.theme-card {
			background: #fff;
			border: 1.5px solid #e3e6ea;
			border-radius: 12px;
			box-shadow: 0 2px 12px rgba(110, 185, 227, 0.08);
			transition:
				box-shadow 0.2s,
				border-color 0.2s;
			padding: 32px 24px 18px 24px;
			margin-bottom: 0;
			width: calc(50% - 16px);
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			position: relative;
			border-top: 4px solid #6eb9e3;
			box-sizing: border-box;

			&:hover {
				box-shadow: 0 8px 32px rgba(110, 185, 227, 0.18);
				border-color: #6eb9e3;
				border-top: 4px solid #005177;
			}

			.theme-banner {
				margin: -32px -24px 10px -24px;
				background: #f8f9fa;
				border-top-left-radius: 9px;
				border-top-right-radius: 9px;
				overflow: hidden;

				img {
					width: 100%;
					height: auto;
					border-radius: 8px;
					box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
					object-fit: cover;
					aspect-ratio: 1.33 / 1;
				}
			}

			header {
				display: flex;
				gap: 24px;

				.entry-thumbnail {
					width: 96px;
					height: 96px;
					border-radius: 8px;
					background: #e9ecef;
					display: flex;
					align-items: center;
					justify-content: center;

					.plugin-icon,
					.theme-icon {
						width: 96px;
						height: 96px;
						border-radius: 8px;
						box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
						text-align: center;
						align-content: space-around;
					}
				}

				.entry-title {
					flex: 1;

					.plugin-title,
					.theme-title {
						font-size: 1.35em;
						font-weight: 700;
						color: #182b49;
						margin: 0 0 5px;

						a {
							color: #192b48;
							text-decoration: none;
							transition: color 0.2s;

							&:hover {
								text-decoration: underline;
							}
						}
					}

					.plugin-author,
					.plugin-version,
					.theme-author,
					.theme-version {
						font-size: 1em;
						color: #666;
						margin: 0 0 4px 0;
					}
				}
			}

			.entry-excerpt {
				margin: 18px 0 14px 0;
				font-size: 1.12em;
				line-height: 1.7;
				color: #222;

				p {
					margin: 0;
				}
			}

			footer {
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-end;
				align-items: center;
				gap: 18px;
				margin-top: 5px;
				padding-top: 14px;
				border-top: 1.5px solid #e3e6ea;

				.active-installs {
					color: #192b48;
					font-weight: 700;
					background: none;
					margin: 0 auto 0 0;
					letter-spacing: 0.01em;
					transition: background 0.2s;
					display: flex;
					box-shadow: none;
					padding: 0px;
					align-items: center;

					span {
						display: flex;
						align-items: center;
					}
				}

				.entry-preview,
				.entry-download,
				.entry-add-to-cart {
					margin: 0;

					a.button {
						display: inline-flex;
						align-items: center;
						gap: 6px;
						background: #192b48;
						color: #fff;
						border: none;
						border-radius: 4px;
						padding: 8px 18px;
						font-size: 1em;
						font-weight: 600;
						box-shadow: 0 1px 4px rgba(110, 185, 227, 0.1);
						transition: background 0.2s;
						text-decoration: none;
						line-height: 1.2;

						.dashicons {
							font-size: 1.2em;
							margin-right: 4px;
						}

						&:hover {
							background: #005177;
							color: #fff;
						}
					}

					&.entry-preview {
						a.button {
							background-color: #6eb9e3;
							&:hover {
								background-color: #4fa3d1;
							}
						}
					}
				}

				.entry-add-to-cart {
					button {
						background: #6eb9e3;
						color: #000;
						border: none;
						border-radius: 4px;
						padding: 8px 18px;
						font-size: 1em;
						font-weight: 600;
						box-shadow: 0 1px 4px rgba(110, 185, 227, 0.1);
						transition: background 0.2s;
						cursor: pointer;

						&:hover {
							background: #005177;
							color: #fff;
						}

						.dashicons {
							font-size: 1.2em;
							margin-right: 4px;
						}
					}
				}

				.entry-tags {
					flex-basis: 100%;
					margin: 8px 0 0 0;

					ul.plugin-tags,
					ul.theme-tags {
						display: flex;
						gap: 8px;
						margin: 0;
						padding: 0;
						list-style: none;
						flex-wrap: wrap;

						.plugin-tag,
						.theme-tag {
							font-size: 0.85em;
							padding: 3px 9px 4px;
							border-radius: 4px;
							font-weight: 600;
							letter-spacing: 0.01em;
							box-shadow: 0 1px 4px rgba(110, 185, 227, 0.1);
							border: 1.5px solid #e3e6ea;
							transition:
								background 0.2s,
								color 0.2s,
								border 0.2s;

							/*&:hover {
								background: #6eb9e3;
								color: #fff;
								border-color: #6eb9e3;
							}*/
						}
					}
				}
			}

			&.theme-card {
				footer {
					justify-content: right;
				}
			}

			&.fair {
				border-top: 4px solid #4caf50;

				&:hover {
					border-color: #4caf50;
					border-top: 4px solid #388e3c;
				}

				.fair-badge {
					text-align: right;

					p {
						background: #4caf50;
						color: white;
						padding: 2px 10px;
						font-size: 10px;
						font-weight: 600;
						white-space: nowrap;
						margin: 0 -15px -10px 0;
						letter-spacing: 1px;
					}
				}
			}
		}
	}

	.pagination-wrapper {
		background: none;
		box-shadow: none;
		margin-top: 32px;

		ul {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			gap: 0.5em;

			li {
				display: inline-block;
				margin: 0 0.25em;

				a,
				span {
					display: inline-block;
					border-radius: 6px;
					font-size: 1em;
					padding: 0.5em 1em;
					transition:
						background 0.2s,
						color 0.2s;
					border: 1px solid #ccc;
					color: #333;
					background: #f9f9f9;

					&.current {
						background: #6eb9e3;
						color: #000000;
						border-color: #6eb9e3;
					}

					&:hover:not(.current):not(.dots) {
						background: #e9ecef;
						color: #000000;
					}

					&.dots {
						background: none;
						border: none;
					}
				}
			}
		}
	}

	@media (max-width: 1200px) {
		.plugin-results,
		.theme-results {
			gap: 18px;
		}
	}

	@media (max-width: 992px) {
		.plugin-results,
		.theme-results {
			gap: 20px;

			.plugin-card,
			.theme-card {
				width: 100%;
				padding: 22px 12px 10px;
			}
		}
	}

	@media (max-width: 768px) {
		padding: 16px 2vw 8px 2vw;

		.plugin-results,
		.theme-results {
			gap: 10px;

			.plugin-card,
			.theme-card {
				width: 100%;
				padding: 12px 6px 6px;

				.entry-excerpt {
					font-size: 15px;
					line-height: 22px;
				}

				footer {
					align-items: center;

					.active-installs {
						font-size: 13px;
						line-height: 16px;
					}

					.plugin-tags,
					.theme-tags {
						gap: 4px;

						.plugin-tag,
						.theme-tag {
							font-size: 11px;
							padding: 2px 7px 3px;
						}
					}
				}
			}
		}
	}

	@media (max-width: 576px) {
		padding: 0 1vw;

		.plugin-results,
		.theme-results {
			gap: 4px;

			.plugin-card,
			.theme-card {
				padding: 7px 2px 4px;

				.entry-excerpt {
					font-size: 14px;
					line-height: 20px;
				}

				footer {
					.active-installs {
						font-size: 12px;
						line-height: 14px;
					}

					.plugin-tags,
					.theme-tags {
						gap: 2px;

						.plugin-tag,
						.theme-tag {
							font-size: 10px;
							padding: 1px 5px 2px;
						}
					}
				}
			}
		}
	}
}