/* Content View - tile */
.pt-cv-wrapper {
	.pt-cv-view {
		.pt-cv-page {
			display: flex;
			flex-wrap: wrap;

			@media (max-width: 1344px) {
				justify-content: center;
			}

			.pt-cv-content-item {
				padding-top: 15px;
				width: 250px;

				@media (max-width: 400px) {
					padding-top: 30px;
					width: 100%;
				}
				&.highlight-topsale {
					.pt-cv-ifield {
						box-shadow: 0 0 16px rgba(147, 3, 63, 0.9);
					}
				}
				.pt-cv-ifield {
					position: relative;
					height: 100%;
					box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
					border-radius: 8px;
					padding-bottom: 66px;

					&:hover {
						box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.4);
					}

					.pt-cv-href-thumbnail img {
						border-top-left-radius: 8px;
						border-top-right-radius: 8px;
						max-height: 126px;
						
						@media (max-width: 400px) {
							width: 100%;
						}
					}

					.best-seller-badge {
                        position: absolute;
                        top: -8px;
                        left: -10px;
                        height: 96px;
                        width: 96px;
					}
					.most-popular {
						display: table;
						margin: auto;
						color: white;
						font-size: 20px;
						font-weight: bold;
						text-transform: uppercase;
						padding: 5px 10px;
						border-radius: 20px;
						box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
						letter-spacing: 1px;
						background-color: rgba(147, 0, 63, 0.8);
                        margin-top: 16px;
                        margin-bottom: 18px;
					}
					.pt-cv-title {
						padding: 0 20px;
						margin-top: 8px !important;

						a {
							display: -webkit-box;
							-webkit-line-clamp: 3;
							-webkit-box-orient: vertical;
							overflow: hidden;
							color: var(--e-global-color-primary);
							font-family: var(--e-global-typography-primary-font-family), Sans-serif;
							font-weight: var(--e-global-typography-primary-font-weight);
							font-size: 20px;
							min-height: 66px;
						}
					}

					.pt-cv-content {
						padding: 0 20px;
						color: var(--e-global-color-text);
						font-family: var(--e-global-typography-text-font-family), Sans-serif;
						font-weight: var(--e-global-typography-text-font-weight);
						display: -webkit-box;
						-webkit-line-clamp: 5;
						-webkit-box-orient: vertical;
						overflow: hidden;
						min-height: 114px;

					}

					.pt-cv-rmwrap a {
						background-color: var(--e-global-color-primary);
						display: table;
						margin: auto;
						font-weight: 600;
						border: 2px solid var(--e-global-color-primary);
						position: absolute;
						bottom: 20px;
						left: 0;
						right: 0;

						&:hover {
							color: var(--e-global-color-text);
							background-color: white;
							border-radius: 4px;
						}
					}
				}
			}
		}
	}
}

/* No result */
.pt-cv-wrapper:has(.pt-cv-no-post) {
	.pt-cv-view {
		.pt-cv-page {
			.pt-cv-content-item {
				width: 100%;

				.pt-cv-ifield {
					box-shadow: unset;

					.pt-cv-no-post {
						display: block;
						text-align: center;
					}
				}
			}
		}
	}
}