/* Jett Widgets — Product Categories accordion.
 * Pure CSS toggle visuals (+ becomes − when .is-open).
 * Direction-agnostic via logical properties — text and icon flip in RTL.
 */

.jett-pc {
	--jett-pc-text: #1f2937;
	--jett-pc-text-muted: #6b7280;
	--jett-pc-border: #e5e7eb;
	--jett-pc-bg: transparent;
	--jett-pc-bg-open: #f9fafb;
	--jett-pc-row-padding-y: 16px;
	--jett-pc-row-padding-x: 18px;
	--jett-pc-indent: 18px;
	--jett-pc-icon-size: 14px;
	--jett-pc-font-size: 15px;
	--jett-pc-font-weight: 400;

	color: var(--jett-pc-text);
	font-size: var(--jett-pc-font-size);
	line-height: 1.45;
}

.jett-pc--empty {
	padding: 16px;
	color: var(--jett-pc-text-muted);
	border: 1px dashed var(--jett-pc-border);
	border-radius: 8px;
}

.jett-pc__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.jett-pc__item {
	margin: 0;
	border-block-end: 1px solid var(--jett-pc-border);
}

.jett-pc__list--root > .jett-pc__item:first-child {
	border-block-start: 1px solid var(--jett-pc-border);
}

/* ---------- Row ---------- */

.jett-pc__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: var(--jett-pc-row-padding-y) var(--jett-pc-row-padding-x);
	background: transparent;
	border: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: var(--jett-pc-font-weight);
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	text-align: start;
	transition: background-color 160ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.jett-pc__row:hover,
.jett-pc__row:focus { background: var(--jett-pc-bg-open); color: inherit; }
.jett-pc__row:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }

.jett-pc__row--link {
	color: inherit;
}

.jett-pc__label {
	flex: 1 1 auto;
	min-width: 0;
}

.jett-pc__count {
	color: var(--jett-pc-text-muted);
	font-size: 0.9em;
	margin-inline-start: 4px;
}

/* ---------- Icon (+ / −) ---------- */

.jett-pc__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: var(--jett-pc-text);
}

.jett-pc__icon-v {
	transform-origin: center;
	transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), opacity 220ms ease;
}

.jett-pc__item.is-open > .jett-pc__row .jett-pc__icon-v {
	transform: scaleY(0);
	opacity: 0;
}

/* ---------- Sub-list ---------- */

.jett-pc__sub {
	background: var(--jett-pc-bg-open);
}

.jett-pc__sub .jett-pc__item {
	border-block-end-color: rgba(0, 0, 0, 0.05);
}
.jett-pc__sub .jett-pc__item:last-child {
	border-block-end: 0;
}

.jett-pc__sub .jett-pc__row {
	padding-inline-start: calc( var(--jett-pc-row-padding-x) + var(--jett-pc-indent) );
	padding-block: calc( var(--jett-pc-row-padding-y) - 4px );
	font-size: 0.95em;
}

/* Nested deeper */
.jett-pc__sub .jett-pc__sub .jett-pc__row {
	padding-inline-start: calc( var(--jett-pc-row-padding-x) + var(--jett-pc-indent) * 2 );
}
.jett-pc__sub .jett-pc__sub .jett-pc__sub .jett-pc__row {
	padding-inline-start: calc( var(--jett-pc-row-padding-x) + var(--jett-pc-indent) * 3 );
}
.jett-pc__sub .jett-pc__sub .jett-pc__sub .jett-pc__sub .jett-pc__row {
	padding-inline-start: calc( var(--jett-pc-row-padding-x) + var(--jett-pc-indent) * 4 );
}

/* The "View all in {name}" parent link gets a subtle different weight */
.jett-pc__item--parent-link > .jett-pc__row {
	font-weight: 600;
}

/* ---------- Current category highlight ---------- */

.jett-pc {
	--jett-pc-current: #1e293b;
	--jett-pc-current-bg: rgba(15, 23, 42, 0.06);
	--jett-pc-current-accent: #1e293b;
}

/* Direct currently-viewed item */
.jett-pc__item.is-current > .jett-pc__row {
	background: var(--jett-pc-current-bg);
	color: var(--jett-pc-current);
	font-weight: 600;
	position: relative;
}

.jett-pc__item.is-current > .jett-pc__row::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 3px;
	background: var(--jett-pc-current-accent);
}

/* Trail: parents along the path to the current item */
.jett-pc__item.is-on-current-path:not(.is-current) > .jett-pc__row .jett-pc__label {
	color: var(--jett-pc-current);
	font-weight: 600;
}

/* ============================================================
   TEMPLATE VARIANTS
   - default — current full-size with dividers (no extra rules)
   - compact — smaller padding + font, dividers kept
   - clean   — default size, no dividers, transparent sub-list bg
   - minimal — compact + no dividers
   ============================================================ */

/* Compact: tighter rhythm, smaller text */
.jett-pc--style-compact {
	--jett-pc-row-padding-y: 10px;
	--jett-pc-row-padding-x: 14px;
	--jett-pc-font-size: 13.5px;
	--jett-pc-indent: 14px;
}
.jett-pc--style-compact .jett-pc__icon { width: 20px; height: 20px; }
.jett-pc--style-compact .jett-pc__sub .jett-pc__row { padding-block: 8px; font-size: 0.95em; }

/* Clean: no row dividers, lighter ambient surface */
.jett-pc--style-clean .jett-pc__item,
.jett-pc--style-clean .jett-pc__list--root > .jett-pc__item:first-child {
	border: 0;
}
.jett-pc--style-clean .jett-pc__sub {
	background: transparent;
}
.jett-pc--style-clean .jett-pc__sub .jett-pc__item {
	border: 0;
}
.jett-pc--style-clean .jett-pc__row:hover,
.jett-pc--style-clean .jett-pc__row:focus {
	background: rgba(0, 0, 0, 0.035);
	border-radius: 8px;
}

/* Minimal: compact + clean combined */
.jett-pc--style-minimal {
	--jett-pc-row-padding-y: 8px;
	--jett-pc-row-padding-x: 12px;
	--jett-pc-font-size: 13.5px;
	--jett-pc-indent: 12px;
}
.jett-pc--style-minimal .jett-pc__icon { width: 18px; height: 18px; }
.jett-pc--style-minimal .jett-pc__sub .jett-pc__row { padding-block: 6px; font-size: 0.95em; }
.jett-pc--style-minimal .jett-pc__item,
.jett-pc--style-minimal .jett-pc__list--root > .jett-pc__item:first-child,
.jett-pc--style-minimal .jett-pc__sub .jett-pc__item {
	border: 0;
}
.jett-pc--style-minimal .jett-pc__sub {
	background: transparent;
}
.jett-pc--style-minimal .jett-pc__row:hover,
.jett-pc--style-minimal .jett-pc__row:focus {
	background: rgba(0, 0, 0, 0.035);
	border-radius: 6px;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.jett-pc__icon-v,
	.jett-pc__row {
		transition: none;
	}
}

/* ============================================================
   GRID VARIANT — [jett_product_categories_grid]
   Each grid cell = one parent category (linked, styled as title)
   followed by its children as a vertical list of links.
   All values driven by CSS variables set inline on the wrapper.
   Mobile-first; desktop bumps via media query.
   ============================================================ */

.jett-pcg {
	font-family: inherit;
	line-height: 1.5;
}

.jett-pcg--empty {
	padding: 14px;
	color: #6b7280;
	border: 1px dashed #e5e7eb;
	border-radius: 8px;
}

.jett-pcg__heading {
	margin: 0 0 16px;
	color: var(--jpcg-title-color, #0f172a);
	font-weight: var(--jpcg-title-weight, 700);
	font-size: var(--jpcg-title-size-m, 16px);
	line-height: 1.3;
}

/* Grid container */
.jett-pcg__grid {
	display: grid;
	grid-template-columns: repeat(var(--jpcg-cols-m, 2), minmax(0, 1fr));
	gap: var(--jpcg-gap-m, 12px);
}

/* One cell per parent category */
.jett-pcg__cell {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Parent category title inside cell */
.jett-pcg__cell-title {
	display: block;
	color: var(--jpcg-title-color, #0f172a);
	font-weight: var(--jpcg-title-weight, 700);
	font-size: var(--jpcg-title-size-m, 16px);
	line-height: 1.3;
	text-decoration: none;
	word-break: break-word;
}

.jett-pcg__cell-title:hover,
.jett-pcg__cell-title:focus {
	text-decoration: underline;
	color: var(--jpcg-title-color, #0f172a);
}

.jett-pcg__cell-title.is-current {
	text-decoration: underline;
}

/* Children list inside cell */
.jett-pcg__cell-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.jett-pcg__subitem { margin: 0; min-width: 0; }

.jett-pcg__sublink {
	display: block;
	color: var(--jpcg-link-color, inherit);
	font-size: var(--jpcg-link-size-m, 14px);
	text-decoration: none;
	line-height: 1.45;
	word-break: break-word;
}

.jett-pcg__sublink:hover,
.jett-pcg__sublink:focus {
	text-decoration: underline;
}

.jett-pcg__subitem.is-current > .jett-pcg__sublink {
	font-weight: 600;
}

.jett-pcg__count {
	color: #6b7280;
	font-size: 0.9em;
	margin-inline-start: 4px;
}

@media (min-width: 769px) {
	.jett-pcg__heading,
	.jett-pcg__cell-title {
		font-size: var(--jpcg-title-size-d, 18px);
	}
	.jett-pcg__grid {
		grid-template-columns: repeat(var(--jpcg-cols-d, 4), minmax(0, 1fr));
		gap: var(--jpcg-gap-d, 16px);
	}
	.jett-pcg__sublink {
		font-size: var(--jpcg-link-size-d, 15px);
	}
}