/**
 * Product Category — .espt-block-pd-category
 *
 * Designs: is-design-plain | pills | outline | badge | soft | hash |
 * underline | breadcrumb.
 * Vars: --gap --size --weight --pad-y --pad-x --icon-size --pre-gap
 *       --color --hover-color --chip-bg --chip-hover-bg --chip-border
 *       --accent --pre-color --ico-color --ico-bg
 *       --box-bg --box-bw --box-line --box-radius --box-pad
 * Mobile-first; everything wraps, nothing overflows 320px.
 */

.espt-block-pd-category .esptc {
	align-items: center;
	background: var(--box-bg, transparent);
	border: var(--box-bw, 0) solid var(--box-line, var(--bd-line));
	border-radius: var(--box-radius, 0);
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap, 8px);
	justify-content: flex-start;
	margin: 0;
	max-width: 100%;
	min-width: 0;
	padding: var(--box-pad, 0);
	text-align: left;
}

.espt-block-pd-category .esptc-list {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap, 8px);
	justify-content: inherit;
	max-width: 100%;
	min-width: 0;
}

/* The reveal uses the hidden attribute — beat the .esptc-item display rule. */
.espt-block-pd-category .esptc [hidden] {
	display: none;
}

/* --- alignment (flex containers need justify-content too) --- */
.espt-block-pd-category.is-text-align-center .esptc,
.espt-block-pd-category.is-text-align-center .esptc-list {
	justify-content: center;
	text-align: center;
}

.espt-block-pd-category.is-text-align-right .esptc,
.espt-block-pd-category.is-text-align-right .esptc-list {
	justify-content: flex-end;
	text-align: right;
}

/* --------------------------------------------------------- the items */
.espt-block-pd-category .esptc-item {
	align-items: center;
	color: var(--color, var(--bd-body));
	display: inline-flex;
	font-size: var(--size, 14px);
	font-weight: var(--weight, 600);
	gap: 4px;
	line-height: 1.35;
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, filter 0.18s ease, transform 0.18s ease;
	word-break: break-word;
}

.espt-block-pd-category a.esptc-item:hover,
.espt-block-pd-category a.esptc-item:focus-visible {
	color: var(--hover-color, var(--bd-primary));
}

.espt-block-pd-category a.esptc-item:focus-visible {
	outline: 2px solid var(--accent, var(--bd-primary));
	outline-offset: 2px;
}

.espt-block-pd-category.is-uppercase .esptc-item {
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.espt-block-pd-category .esptc-count {
	font-size: 0.85em;
	font-weight: 600;
	opacity: 0.65;
}

.espt-block-pd-category .esptc-count::before { content: "("; }
.espt-block-pd-category .esptc-count::after { content: ")"; }

.espt-block-pd-category .esptc-sep {
	color: var(--accent, var(--bd-muted));
	font-size: var(--size, 14px);
	line-height: 1.35;
	opacity: 0.6;
	-webkit-user-select: none;
	user-select: none;
}

/* ------------------------------------------------------ prefix + icon */
.espt-block-pd-category .esptc-pre {
	color: var(--pre-color, var(--bd-muted));
	font-size: var(--size, 14px);
	font-weight: 600;
	line-height: 1.35;
	margin-inline-end: var(--pre-gap, 0);
	min-width: 0;
	overflow-wrap: anywhere;
}

.espt-block-pd-category .esptc-ico {
	align-items: center;
	background: var(--ico-bg, var(--bd-soft));
	border-radius: 8px;
	color: var(--ico-color, var(--bd-primary));
	display: inline-flex;
	flex: none;
	height: var(--icon-size, 26px);
	justify-content: center;
	line-height: 0;
	width: var(--icon-size, 26px);
}

.espt-block-pd-category .esptc-ico svg {
	height: 56%;
	width: 56%;
}

/* The default bubble — the base .esptc-ico rule above already draws it; the
   class is spelled out so every emitted root class has a home here. */
.espt-block-pd-category.is-icon-style-chip .esptc-ico {
	border-radius: 8px;
}

.espt-block-pd-category.is-icon-style-round .esptc-ico {
	border-radius: 999px;
}

.espt-block-pd-category.is-icon-style-plain .esptc-ico {
	background: none;
	border-radius: 0;
	height: auto;
	width: auto;
}

.espt-block-pd-category.is-icon-style-plain .esptc-ico svg {
	height: calc(var(--icon-size, 26px) * 0.7);
	width: calc(var(--icon-size, 26px) * 0.7);
}

/* ============================ designs ============================== */

/* --- plain text (the WooCommerce look) --- */
/* Reads as a sentence, so the separators sit tighter than the chip gap. */
.espt-block-pd-category.is-design-plain .esptc-list {
	gap: calc(var(--gap, 8px) * 0.5);
}

.espt-block-pd-category.is-design-plain .esptc-item {
	font-weight: var(--weight, 500);
}

.espt-block-pd-category.is-design-plain a.esptc-item {
	color: var(--color, var(--bd-primary-dark));
}

.espt-block-pd-category.is-design-plain a.esptc-item:hover {
	color: var(--hover-color, var(--bd-primary));
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- pill chips --- */
.espt-block-pd-category.is-design-pills .esptc-item {
	background: var(--chip-bg, #f1f5f9);
	border-radius: 999px;
	color: var(--color, #334155);
	padding: var(--pad-y, 6px) var(--pad-x, 14px);
}

.espt-block-pd-category.is-design-pills a.esptc-item:hover,
.espt-block-pd-category.is-design-pills a.esptc-item:focus-visible {
	background: var(--chip-hover-bg, var(--bd-primary));
	color: var(--hover-color, #fff);
	transform: translateY(-1px);
}

/* --- outlined chips --- */
.espt-block-pd-category.is-design-outline .esptc-item {
	background: var(--chip-bg, transparent);
	border: 1.5px solid var(--chip-border, var(--bd-line));
	border-radius: 999px;
	color: var(--color, #334155);
	padding: calc(var(--pad-y, 6px) - 1px) calc(var(--pad-x, 14px) - 1px);
}

.espt-block-pd-category.is-design-outline a.esptc-item:hover,
.espt-block-pd-category.is-design-outline a.esptc-item:focus-visible {
	background: var(--chip-hover-bg, transparent);
	border-color: var(--bd-primary);
	color: var(--hover-color, var(--bd-primary));
}

/* --- solid badges --- */
.espt-block-pd-category.is-design-badge .esptc-item {
	background: var(--chip-bg, var(--bd-primary));
	border-radius: 8px;
	color: var(--color, #fff);
	font-weight: var(--weight, 700);
	letter-spacing: 0.02em;
	padding: var(--pad-y, 6px) var(--pad-x, 14px);
}

.espt-block-pd-category.is-design-badge a.esptc-item:hover,
.espt-block-pd-category.is-design-badge a.esptc-item:focus-visible {
	background: var(--chip-hover-bg, var(--bd-primary-dark));
	color: var(--hover-color, #fff);
	filter: brightness(1.06);
	transform: translateY(-1px);
}

/* --- soft tinted chips --- */
.espt-block-pd-category.is-design-soft .esptc-item {
	background: var(--chip-bg, var(--bd-soft));
	border: 1px solid var(--chip-border, var(--bd-soft-line));
	border-radius: 999px;
	color: var(--color, var(--bd-primary-dark));
	padding: calc(var(--pad-y, 6px) - 1px) calc(var(--pad-x, 14px) - 1px);
}

.espt-block-pd-category.is-design-soft a.esptc-item:hover,
.espt-block-pd-category.is-design-soft a.esptc-item:focus-visible {
	background: var(--chip-hover-bg, var(--bd-primary));
	border-color: var(--chip-hover-bg, var(--bd-primary));
	color: var(--hover-color, #fff);
}

/* --- hashtags --- */
.espt-block-pd-category.is-design-hash .esptc-item {
	color: var(--color, var(--bd-primary));
}

.espt-block-pd-category.is-design-hash .esptc-item::before {
	color: var(--accent, currentColor);
	content: "#";
	margin-inline-end: 1px;
	opacity: 0.75;
}

.espt-block-pd-category.is-design-hash a.esptc-item:hover {
	color: var(--hover-color, var(--bd-primary-dark));
	transform: translateY(-1px);
}

/* --- underline --- */
.espt-block-pd-category.is-design-underline .esptc-item {
	border-bottom: 2px solid var(--accent, var(--bd-primary));
	color: var(--color, #334155);
	padding-bottom: 1px;
}

.espt-block-pd-category.is-design-underline a.esptc-item:hover {
	border-bottom-color: var(--hover-color, var(--bd-primary-dark));
	color: var(--hover-color, var(--bd-primary));
}

/* --- breadcrumb --- */
.espt-block-pd-category.is-design-breadcrumb .esptc-item {
	color: var(--color, var(--bd-body));
}

.espt-block-pd-category.is-design-breadcrumb .esptc-item + .esptc-item::before {
	color: var(--accent, var(--bd-muted));
	content: "›";
	font-weight: 700;
	margin-inline-end: var(--gap, 8px);
	opacity: 0.7;
}

/* The current step: PHP marks the last *visible* item, and the JS moves the
   class when the "+N" reveal opens — :last-child would land on a hidden item
   or on the "+N" button instead. */
.espt-block-pd-category.is-design-breadcrumb .esptc-item.esptc-last {
	color: var(--accent, var(--bd-ink));
	font-weight: 800;
}

.espt-block-pd-category.is-design-breadcrumb a.esptc-item:hover {
	color: var(--hover-color, var(--bd-primary));
}

/* ------------------------------------------------------- chip shapes */
.espt-block-pd-category.is-chip-shape-pill .esptc-item,
.espt-block-pd-category.is-chip-shape-pill .esptc-more { border-radius: 999px; }
.espt-block-pd-category.is-chip-shape-round .esptc-item,
.espt-block-pd-category.is-chip-shape-round .esptc-more { border-radius: 10px; }
.espt-block-pd-category.is-chip-shape-square .esptc-item,
.espt-block-pd-category.is-chip-shape-square .esptc-more { border-radius: 0; }

/* ------------------------------------------------- the "+N" reveal */
/* Deliberately NOT wired to --chip-bg / --color: the chip colours are chosen
   for the category items (white on a solid badge, say) and would make this
   ghost button unreadable. It stays a neutral affordance in every design. */
.espt-block-pd-category .esptc-more {
	font: inherit;
	align-items: center;
	background: var(--bd-soft);
	border: 1px dashed var(--bd-soft-line, var(--bd-line));
	border-radius: 999px;
	color: var(--bd-primary-dark);
	cursor: pointer;
	display: inline-flex;
	font-size: calc(var(--size, 14px) * 0.92);
	font-weight: 700;
	line-height: 1.35;
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
	padding: calc(var(--pad-y, 6px) * 0.85 + 1px) calc(var(--pad-x, 14px) * 0.8);
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.espt-block-pd-category .esptc-more:hover,
.espt-block-pd-category .esptc-more:focus-visible {
	background: var(--bd-soft);
	border-color: var(--bd-primary);
	border-style: solid;
	color: var(--bd-primary-dark);
}

.espt-block-pd-category .esptc-more:focus-visible {
	outline: 2px solid var(--bd-primary);
	outline-offset: 2px;
}

.espt-block-pd-category.is-design-plain .esptc-more,
.espt-block-pd-category.is-design-hash .esptc-more,
.espt-block-pd-category.is-design-underline .esptc-more,
.espt-block-pd-category.is-design-breadcrumb .esptc-more {
	background: none;
	border: 0;
	padding: 0 2px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* "backwards", never "both": a forwards-filling animation would keep
   transform:none applied for good and kill the hover lift on revealed chips. */
.espt-block-pd-category .esptc-item.is-revealed {
	animation: esptc-pop 0.26s ease backwards;
}

@keyframes esptc-pop {
	from { opacity: 0; transform: translateY(4px) scale(0.96); }
	to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------- editor placeholder */
.espt-block-pd-category .espt-block-note {
	border: 1px dashed var(--bd-line);
	border-radius: 10px;
	color: var(--bd-muted);
	font-size: 13.5px;
	margin: 0;
	padding: 18px;
	text-align: center;
}

/* -------------------------------------------------------- breakpoints */
/* Tablet and up: a touch more air between breadcrumb steps — the text sizes
   themselves come from the --size variable. */
@media (min-width: 768px) {
	.espt-block-pd-category.is-design-breadcrumb .esptc-list {
		gap: calc(var(--gap, 8px) * 1.15);
	}
}

@media (min-width: 1024px) {
	.espt-block-pd-category.is-design-badge .esptc-item {
		letter-spacing: 0.03em;
	}
}

/* Lift/scale only where a real pointer can trigger it. */
@media (hover: none) {
	.espt-block-pd-category .esptc-item:hover {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.espt-block-pd-category .esptc-item,
	.espt-block-pd-category .esptc-more {
		transition: none;
	}

	.espt-block-pd-category .esptc-item.is-revealed {
		animation: none;
	}

	.espt-block-pd-category .esptc-item:hover {
		transform: none;
	}
}