/**
 * Child Product Categories Elementor — front-end styles.
 *
 * Layout is controlled almost entirely through CSS custom properties
 * (--cpce-columns, --cpce-gap) that Elementor's responsive controls write
 * inline on .cpce-grid, so this file only needs to define fallbacks and
 * the base visual language of the widget.
 */

.cpce-wrapper {
	width: 100%;
}

.cpce-grid {
	--cpce-columns: 4;
	--cpce-column-gap: var(--cpce-gap, 20px);
	--cpce-row-gap: var(--cpce-gap, 20px);

	/* Grid variables */
	--cpce-display-grid: grid;
	--cpce-grid-columns-grid: repeat(var(--cpce-columns), 1fr);
	--cpce-flex-direction-grid: column;
	--cpce-card-direction-grid: column;
	--cpce-card-align-grid: stretch;
	--cpce-img-flex-grid: none;
	--cpce-img-width-grid: 100%;
	--cpce-img-height-grid: var(--cpce-image-height, 220px);
	--cpce-content-align-grid: inherit;
	--cpce-content-pad-grid: inherit;
	--cpce-btn-margin-grid: auto;
	--cpce-btn-align-grid: center;
	--cpce-divider-disp-grid: none;

	/* List variables */
	--cpce-display-list: flex;
	--cpce-grid-columns-list: none;
	--cpce-flex-direction-list: var(--cpce-list-direction-val, column);
	--cpce-card-direction-list: row;
	--cpce-card-align-list: center;
	--cpce-img-flex-list: 0 0 80px;
	--cpce-img-width-list: 80px;
	--cpce-img-height-list: 80px;
	--cpce-content-align-list: left;
	--cpce-content-pad-list: 12px 16px;
	--cpce-btn-margin-list: 8px;
	--cpce-btn-align-list: flex-start;
	--cpce-divider-disp-list: var(--cpce-divider-display, none);

	display: var(--cpce-display-grid);
	grid-template-columns: var(--cpce-grid-columns-grid);
	column-gap: var(--cpce-column-gap);
	row-gap: var(--cpce-row-gap);
	width: 100%;
}

.cpce-card {
	position: relative;
	background-color: #ffffff;
	border: 1px solid #e6e6e6;
	border-radius: 8px;
	overflow: hidden;
	transition: all 0.3s ease;
}

.cpce-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.cpce-card__image {
	width: 100%;
	height: 220px;
	overflow: hidden;
	background-color: #f5f5f5;
}

.cpce-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.cpce-card:hover .cpce-card__image img {
	transform: scale(1.05);
}

.cpce-card__content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	padding: 20px;
	text-align: center;
}

.cpce-card__title {
	margin: 0 0 8px;
	font-size: 18px;
	line-height: 1.3;
}

.cpce-card__description {
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.5;
	opacity: 0.8;
}

.cpce-card__count {
	margin: 0 0 12px;
	font-size: 13px;
	opacity: 0.65;
}

.cpce-card__button {
	display: inline-block;
	margin-top: auto;
	padding: 10px 24px;
	border: 1px solid currentColor;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	transition: all 0.3s ease;
	align-self: center;
}

/**
 * List layout — a text-first list instead of a card grid, with an
 * Icon-List-style set of controls: direction, wrap, alignment, gap,
 * and an optional divider between items.
 *
 * .cpce-grid--list-column = vertical (stacked) list
 * .cpce-grid--list-row    = horizontal (inline) list
 *
 * Every value below is a sane fallback; Elementor's controls override
 * these through inline `--cpce-*` custom properties and direct
 * declarations on the same selectors.
 */
.cpce-grid.cpce-grid--list {
	display: var(--cpce-display-list);
	grid-template-columns: var(--cpce-grid-columns-list);
	flex-direction: var(--cpce-flex-direction-list);
	gap: var(--cpce-gap, 16px);
}

.cpce-grid--list-column {
	--cpce-divider-top-width: var(--cpce-divider-weight, 1px);
	--cpce-divider-left-width: 0px;
	--cpce-divider-margin-bottom: var(--cpce-divider-gap, 8px);
	--cpce-divider-margin-right: 0px;
}

.cpce-grid--list-row {
	flex-direction: var(--cpce-flex-direction-list);
	flex-wrap: nowrap;
	--cpce-divider-top-width: 0px;
	--cpce-divider-left-width: var(--cpce-divider-weight, 1px);
	--cpce-divider-margin-bottom: 0px;
	--cpce-divider-margin-right: var(--cpce-divider-gap, 8px);
}

.cpce-card--list {
	position: relative;
	margin: 0;
}

.cpce-card--list .cpce-card__link {
	flex-direction: var(--cpce-card-direction-list);
	align-items: var(--cpce-card-align-list);
}

.cpce-card--list .cpce-card__image {
	flex: var(--cpce-img-flex-list);
	width: var(--cpce-img-width-list);
	height: var(--cpce-img-height-list);
}

.cpce-card--list .cpce-card__content {
	flex: 1 1 auto;
	text-align: var(--cpce-content-align-list);
	padding: var(--cpce-content-pad-list);
}

.cpce-card--list .cpce-card__button {
	margin-top: var(--cpce-btn-margin-list);
	align-self: var(--cpce-btn-align-list);
}

/* Divider between list items — hidden unless the "Divider" style control
   turns it on, which flips `display` from `none` to `block` inline. */
.cpce-card--list:not(:first-child)::before {
	content: '';
	display: none;
	flex-shrink: 0;
	align-self: stretch;
	border-top: var(--cpce-divider-top-width, 1px) var(--cpce-divider-style, solid) var(--cpce-divider-color, #e0e0e0);
	border-left: var(--cpce-divider-left-width, 0px) var(--cpce-divider-style, solid) var(--cpce-divider-color, #e0e0e0);
	margin-bottom: var(--cpce-divider-margin-bottom, 8px);
	margin-right: var(--cpce-divider-margin-right, 0px);
}

@media (max-width: 767px) {
	.cpce-card--list .cpce-card__image {
		flex-basis: 60px;
		width: 60px;
		height: 60px;
	}
}

.cpce-empty-notice {
	padding: 16px;
	border: 1px dashed #d0d0d0;
	border-radius: 4px;
	font-size: 13px;
	text-align: center;
	opacity: 0.75;
}

@media (max-width: 767px) {
	.cpce-card__image {
		height: 160px;
	}
}

/**
 * View All Card Styles
 */
.cpce-card--view-all {
	background-color: #f9f9f9;
	border-style: dashed;
	border-color: var(--cpce-divider-color, #d0d0d0);
}

.cpce-card--view-all:hover {
	background-color: #f1f1f1;
	border-color: currentColor;
}

.cpce-card__link--view-all {
	height: 100%;
}

.cpce-card__content--view-all {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.cpce-card__title--view-all {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
}

.cpce-card__arrow {
	font-size: 18px;
	transition: transform 0.3s ease;
}

.cpce-card--view-all:hover .cpce-card__arrow {
	transform: translateX(4px);
}