/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */

.wp-block-product-cat__main {
	.wp-block-product-cat__container {
		display: grid;
		grid-template-columns: auto;
		gap: 20px;
		box-sizing: border-box;

		&.pcb-flex {
			display: flex;
			flex-wrap: wrap;

			.wp-block-product-cat__inner {
				width: 100%;
			}

			&.has-columns-2 .wp-block-product-cat__inner {
				width: calc((100% - 20px) / 2);
			}

			&.has-columns-3 .wp-block-product-cat__inner {
				width: calc((100% - 40px) / 3);
			}

			&.has-columns-4 .wp-block-product-cat__inner {
				width: calc((100% - 60px) / 4);
			}

			&.has-columns-5 .wp-block-product-cat__inner {
				width: calc((100% - 80px) / 5);
			}

			&.has-columns-6 .wp-block-product-cat__inner {
				width: calc((100% - 100px) / 6);
			}

			&.has-columns-7 .wp-block-product-cat__inner {
				width: calc((100% - 120px) / 7);
			}

			&.has-columns-8 .wp-block-product-cat__inner {
				width: calc((100% - 140px) / 8);
			}
		}

		&.has-columns-2 {
			grid-template-columns: 1fr 1fr;
		}

		&.has-columns-3 {
			grid-template-columns: 1fr 1fr 1fr;
		}

		&.has-columns-4 {
			grid-template-columns: 1fr 1fr 1fr 1fr;
		}

		&.has-columns-5 {
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
		}

		&.has-columns-6 {
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
		}

		&.has-columns-7 {
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
		}

		&.has-columns-8 {
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
		}

		.wp-block-product-cat__inner {
			padding: 20px;
			box-sizing: border-box;
			box-shadow: 0px 10px 40px #6F89A333;

			.cat-info {
				.cat_name {
					text-decoration: none !important;
					word-break: break-all;
				}
			}
		}

		.cat-img {
			img {
				width: 100%;
				max-width: 100%;
				height: auto;
				object-fit: cover;
			}
		}

		&.equal-height {
			.cat-img {
				img {
					height: 150px;
					object-fit: cover;
					width: 100%;
					box-sizing: border-box;
				}
			}
		}

		@media only screen and (max-width: 1024px) {

			&.has-columns-4,
			&.has-columns-5,
			&.has-columns-6,
			&.has-columns-7,
			&.has-columns-8 {
				grid-template-columns: 1fr 1fr 1fr !important;
			}

			&.pcb-flex.has-columns-4 .wp-block-product-cat__inner,
			&.pcb-flex.has-columns-5 .wp-block-product-cat__inner,
			&.pcb-flex.has-columns-6 .wp-block-product-cat__inner,
			&.pcb-flex.has-columns-7 .wp-block-product-cat__inner,
			&.pcb-flex.has-columns-8 .wp-block-product-cat__inner {
				width: calc((100% - 40px) / 3);
			}
		}

		@media only screen and (max-width: 567px) {

			&.has-columns-3,
			&.has-columns-4,
			&.has-columns-5,
			&.has-columns-6,
			&.has-columns-7,
			&.has-columns-8 {
				grid-template-columns: 1fr 1fr !important;
			}

			&.pcb-flex.has-columns-3 .wp-block-product-cat__inner,
			&.pcb-flex.has-columns-4 .wp-block-product-cat__inner,
			&.pcb-flex.has-columns-5 .wp-block-product-cat__inner,
			&.pcb-flex.has-columns-6 .wp-block-product-cat__inner,
			&.pcb-flex.has-columns-7 .wp-block-product-cat__inner,
			&.pcb-flex.has-columns-8 .wp-block-product-cat__inner {
				width: calc((100% - 20px) / 2);
			}
		}

		@media only screen and (max-width: 480px) {

			&.has-columns-1,
			&.has-columns-2,
			&.has-columns-3,
			&.has-columns-4,
			&.has-columns-5,
			&.has-columns-6,
			&.has-columns-7,
			&.has-columns-8 {
				grid-template-columns: 1fr !important;
			}

			&.pcb-flex.has-columns-1 .wp-block-product-cat__inner,
			&.pcb-flex.has-columns-2 .wp-block-product-cat__inner,
			&.pcb-flex.has-columns-3 .wp-block-product-cat__inner,
			&.pcb-flex.has-columns-4 .wp-block-product-cat__inner,
			&.pcb-flex.has-columns-5 .wp-block-product-cat__inner,
			&.pcb-flex.has-columns-6 .wp-block-product-cat__inner,
			&.pcb-flex.has-columns-7 .wp-block-product-cat__inner,
			&.pcb-flex.has-columns-8 .wp-block-product-cat__inner {
				width: 100%;
			}
		}
	}
}