/**
 * Zaban Product Category Tabs Widget
 * Layout: RTL sidebar (heading + tabs) on the right, 2×3 product grid on the left
 */

/* ── Outer wrapper ──────────────────────────────────────────────────────── */
.zpct-wrapper {
	display: flex;
	flex-direction: row;      /* sidebar right, grid left (RTL) */
	align-items: flex-start;
	gap: 40px;                /* overridable via Elementor control */
}

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.zpct-sidebar {
	flex: 0 0 200px;
	width: 200px;
	text-align: right;
	position: sticky;
	top: 24px;          /* distance from viewport top while sticking */
	align-self: flex-start; /* required for sticky inside a flex row */
}

/* Heading */
.zpct-heading {
	font-size: 1.6em;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 24px;
	padding: 0;
}

/* Tab list — left-aligned column (RTL: text flows from right, list starts from left) */
.zpct-tabs-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Individual tab — width = text width so underline matches text */
.zpct-tab {
	position: relative;
	display: inline-block; /* shrink-wraps to text width */
	cursor: pointer;
	padding: 0;
	margin-bottom: 12px;
	font-size: 1em;
	line-height: 1.4;
	text-align: right;
	user-select: none;
	color: inherit;
	transition: color 0.2s ease;
}

.zpct-tab:last-child {
	margin-bottom: 0;
}

/* Active tab = bold */
.zpct-tab.is-active {
	font-weight: 700;
}

/*
 * Hover underline — same mechanic as the site's primary nav links:
 * a ::after pseudo-element scales from 0 → 1 on hover/active,
 * anchored to the right edge (RTL origin).
 * Because .zpct-tab is inline-block, width = text width.
 */
.zpct-tab::after {
	content: '';
	display: block;
	height: 1px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: right center;   /* RTL: grows from right */
	transition: transform 0.25s ease;
	margin-top: 3px;
}

.zpct-tab:hover::after,
.zpct-tab.is-active::after {
	transform: scaleX(1);
}

/* ── Panels area ────────────────────────────────────────────────────────── */
.zpct-panels {
	flex: 1 1 0;
	min-width: 0;
}

/* Hide inactive panels; show active */
.zpct-panel {
	display: none;
}

.zpct-panel.is-active {
	display: block;
}

/* ── Product grid ───────────────────────────────────────────────────────── */
.zpct-products.products {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	column-gap: 20px;
	row-gap: 30px;
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Suppress the WooCommerce float / width rules that override grid */
.zpct-products.products li.product {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

/* ── Product title – centered ───────────────────────────────────────────── */
.zpct-wrapper .product .woocommerce-loop-product__title,
.zpct-wrapper .product h2.woocommerce-loop-product__title,
.zpct-wrapper .product .pls-product-title {
	text-align: center !important;
}

/* ── Suppress pre-selected swatch ring ──────────────────────────────────── */
/*
 * Two swatch systems are used site-wide:
 *   1. .pls-swatches .swatch  (parent theme, set in theme-rtl.css + style.css)
 *   2. .alukas-color-swatches-plp .alukas-swatch  (child theme custom)
 * Both apply visible rings on .swatch-selected. We override both inside
 * this widget so no swatch appears "selected" by default on page load.
 */
.zpct-wrapper .products .pls-swatches .swatch.swatch-selected,
body .zpct-wrapper .pls-swatches .swatch.swatch-selected {
	border-color: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
}


/* ── Elementor editor placeholder cards ─────────────────────────────────── */
.zpct-placeholder-card {
	background: #f5f5f5;
	border-radius: 6px;
	overflow: hidden;
}

.zpct-placeholder-image {
	background: #e0e0e0;
	height: 200px;
}

.zpct-placeholder-text {
	height: 18px;
	background: #d4d4d4;
	margin: 12px;
	border-radius: 3px;
}

/* ── No products message ────────────────────────────────────────────────── */
.zpct-no-products {
	color: #999;
	padding: 20px 0;
	text-align: center;
}

/* ── Panel footer: "view all" button ────────────────────────────────────── */
.zpct-panel-footer {
	display: flex;
	justify-content: center;
	margin-top: 28px;
}

.zpct-view-all-btn {
	display: inline-block;
}

a.btn.zpct-view-all-btn {
    text-align: center;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.zpct-products.products {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 767px) {
	.zpct-wrapper {
		flex-direction: column;
		gap: 24px;
	}

	.zpct-sidebar {
		flex: none;
		width: 100%;
		position: static; /* no sticky on mobile — layout is vertical */
	}

	/* Tabs wrap to multiple rows on mobile — no horizontal scroll */
	.zpct-tabs-list {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 10px 14px;
		overflow-x: visible;
	}

	.zpct-tab {
		flex-shrink: 0;
		margin-bottom: 0;
		white-space: nowrap;
	}

	.zpct-tab::after {
		transform-origin: left center; /* LTR-like for horizontal row */
	}

	.zpct-products.products {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}