/* ════════════════════════════════════════════════════════════════════════
   Theme token bridge — PSB semantic colors resolve through a chain,
   first defined wins:
     1. --psb-theme-*            generic hook — ANY theme can define these
                                 (e.g. :root { --psb-theme-primary: #fff })
     2. --jt-*                   Jetting theme tokens (jetting.ba)
     3. --e-global-color-*       Elementor global colors (megasystems.ba …)
     4. built-in default         every other site stays unchanged
   Selector is :root, body — Elementor defines --e-global-color-* on the
   body-scoped .elementor-kit-* selector, so the chain must also resolve
   at body scope to pick up Elementor global colors.
   The whole surface system follows the theme too (text, page bg, cards,
   inputs, borders, hover), so on dark themes the entire UI adapts.
   ════════════════════════════════════════════════════════════════════════ */
:root, body {
	--psb-primary:        var(--psb-theme-primary,        var(--jt-gold, var(--e-global-color-primary,   #2E6DA4)));
	--psb-accent:         var(--psb-theme-accent,         var(--jt-cyan, var(--e-global-color-accent,    #f39c12)));
	--psb-secondary:      var(--psb-theme-secondary,      var(--jt-muted, var(--e-global-color-secondary, #6b7280)));
	--psb-text:           var(--psb-theme-text,           var(--jt-text, var(--e-global-color-text, #1f2937)));
	--psb-on-primary:     var(--psb-theme-on-primary,     var(--jt-on-gold, #ffffff));
	--psb-on-accent:      var(--psb-theme-on-accent,      var(--jt-on-cyan, #ffffff));
	--psb-inverse:        var(--psb-theme-inverse,        var(--jt-border-strong, #1f2937));
	--psb-on-inverse:     var(--psb-theme-on-inverse,     var(--jt-text, #ffffff));
	--psb-bg:             var(--psb-theme-bg,             var(--jt-bg, #ffffff));
	--psb-surface:        var(--psb-theme-surface,        var(--jt-card, #ffffff));
	--psb-surface-alt:    var(--psb-theme-surface-alt,    var(--jt-bg, #f5f6f7));
	--psb-input:          var(--psb-theme-input,          var(--jt-input-bg, #ffffff));
	--psb-hover:          var(--psb-theme-hover,          var(--jt-hover, #f0f4ff));
	--psb-border:         var(--psb-theme-border,         var(--jt-border, #e5e7eb));
	--psb-border-strong:  var(--psb-theme-border-strong,  var(--jt-border-strong, #cbd5e0));
}

/* Catalog-scoped layout tokens; brand colors come from the :root bridge. */
.psb-catalog {
	--psb-radius: 6px;
	--psb-gap: 20px;

	font-family: inherit;
	color: var(--psb-text);
}

/* ── Search row ──────────────────────────────────────────────────────── */

.psb-catalog__search-row {
	margin-bottom: 10px;
}

.psb-catalog__search-row .psb-catalog__search {
	width: 100%;
	box-sizing: border-box;
}

/* ── Filters ─────────────────────────────────────────────────────────── */

.psb-catalog__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
}

.psb-catalog__filter-group {
	flex: 1 1 160px;
}

.psb-catalog__search,
.psb-catalog__condition,
.psb-catalog__category-filter,
.psb-catalog__sector-filter,
.psb-catalog__manufacturer,
.psb-catalog__model,
.psb-catalog__sort {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--psb-border);
	border-radius: var(--psb-radius);
	background: var(--psb-input);
	color: var(--psb-text);
	font-size: 14px;
	box-sizing: border-box;
}

/* ── Select-only: custom caret positioned inside the element ── */
.psb-catalog__condition,
.psb-catalog__category-filter,
.psb-catalog__sector-filter,
.psb-catalog__manufacturer,
.psb-catalog__model,
.psb-catalog__sort {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555555' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 36px;
}

.psb-catalog__search:focus,
.psb-catalog__condition:focus,
.psb-catalog__category-filter:focus,
.psb-catalog__sector-filter:focus,
.psb-catalog__manufacturer:focus,
.psb-catalog__model:focus,
.psb-catalog__sort:focus {
	outline: 2px solid var(--psb-primary);
	outline-offset: 1px;
}

.psb-tax-archive .psb-catalog__reset {
	width: 100%;
	padding: 6px 0;
	border: 0;
	border-radius: 30px;
	background: var(--psb-inverse);
	color: var(--psb-on-inverse);
	font-size: 14px;
	font-family: inherit;
	cursor: pointer;
	transition: filter 0.15s;
}

.psb-tax-archive .psb-catalog__reset:hover,
.psb-tax-archive .psb-catalog__reset:focus {
	filter: brightness(1.15);
	background: var(--psb-inverse);
	color: var(--psb-on-inverse);
}

/* ── Bar (count) ─────────────────────────────────────────────────────── */

.psb-catalog__bar {
	margin-bottom: 12px;
	min-height: 20px;
}

.psb-catalog__count {
	font-size: 13px;
	color: var(--psb-secondary);
}

/* ── Grid ────────────────────────────────────────────────────────────── */

.psb-catalog__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--psb-gap);
	min-height: 200px;
}

/* ── Product card ────────────────────────────────────────────────────── */

.psb-catalog__card {
	border: 1px solid var(--psb-border);
	border-top: 0;
	border-radius: 0;
	background: var(--psb-surface);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.2s;
}

.psb-catalog__card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}

.psb-catalog__card-image {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	position: relative;
	background: var(--psb-surface-alt);
	background-size: cover;
	background-position: center;
}

.psb-catalog__card-image::before {
	content: '';
	position: absolute;
	inset: -15px;
	background: inherit;
	background-size: cover;
	background-position: center;
	filter: blur(12px);
	z-index: 0;
	pointer-events: none;
}

.psb-catalog__card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	position: relative;
	z-index: 1;
}

.psb-catalog__card-body {
	padding: 14px;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 6px;
}

.psb-catalog__card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.psb-catalog__card-mfr,
.psb-catalog__card-cat {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--psb-secondary);
}

.psb-catalog__card-mfr::after {
	content: " ·";
}

.psb-catalog__card-title {
	font-size: 15px;
	font-weight: 600;
	margin: 0;
	line-height: 1.3;
}

.psb-catalog__card-title a {
	color: var(--psb-text);
	text-decoration: none;
}

.psb-catalog__card-title a:visited {
	color: var(--psb-text);
	text-decoration: none;
}

.psb-catalog__card-title a:hover {
	color: var(--psb-primary);
	text-decoration: underline;
}

.psb-catalog__card-desc {
	font-size: 13px;
	color: var(--psb-secondary);
	margin: 0;
	line-height: 1.45;
	flex: 1;
}

.psb-catalog__card-footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-top: auto;
	padding-top: 10px;
	border-top: 1px solid var(--psb-border);
}


.psb-catalog__cta {
	display: inline-block;
	padding: 6px 14px;
	background: var(--psb-primary);
	color: var(--psb-on-primary);
	font-size: 13px;
	font-weight: 600;
	border-radius: 30px;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 0.15s;
	width: 100%;
	text-align: center;
}

.psb-catalog .psb-catalog__cta:hover {
	opacity: 0.88;
	color: var(--psb-on-inverse);
	background-color: var(--psb-inverse);
	text-decoration: underline;
}

/* ── Condition badge ─────────────────────────────────────────────────── */

.psb-catalog__badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 30px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	align-self: flex-start;
}

.psb-catalog__badge--new {
	background: #e6f4ea;
	color: #2e7d32;
}

.psb-catalog__badge--used {
	background: #fff3e0;
	color: #e65100;
}

/* ── Skeleton ────────────────────────────────────────────────────────── */

.psb-catalog__skeleton {
	border: 1px solid var(--psb-border);
	border-radius: var(--psb-radius);
	background: var(--psb-surface);
	overflow: hidden;
}

.psb-catalog__skeleton-img {
	aspect-ratio: 4 / 3;
	background: linear-gradient(90deg, var(--psb-surface-alt) 25%, var(--psb-border) 50%, var(--psb-surface-alt) 75%);
	background-size: 200% 100%;
	animation: psb-shimmer 1.4s infinite;
}

.psb-catalog__skeleton-body {
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.psb-catalog__skeleton-line {
	height: 12px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--psb-surface-alt) 25%, var(--psb-border) 50%, var(--psb-surface-alt) 75%);
	background-size: 200% 100%;
	animation: psb-shimmer 1.4s infinite;
}

.psb-catalog__skeleton-line--title {
	height: 16px;
	width: 80%;
}

.psb-catalog__skeleton-line--short {
	width: 50%;
}

.psb-catalog__skeleton-line--desc {
	width: 95%;
}

.psb-catalog__skeleton-line--desc2 {
	width: 70%;
}

@keyframes psb-shimmer {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}

/* ── Empty state ─────────────────────────────────────────────────────── */

.psb-catalog__empty {
	grid-column: 1 / -1;
	padding: 48px 24px;
	text-align: center;
	color: var(--psb-secondary);
	font-size: 15px;
}

/* ── Pagination ──────────────────────────────────────────────────────── */

.psb-catalog__pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: 28px;
}

.psb-catalog__page-btn {
	min-width: 36px;
	height: 36px;
	padding: 0 10px !important;
	border: 1px solid var(--psb-text) !important;
	border-radius: var(--psb-radius) !important;
	background: var(--psb-surface);
	color: var(--psb-text) !important;
	font-size: 14px !important;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s !important;
	line-height: 1;
}

.psb-catalog__page-btn:hover:not(:disabled) {
	background-color: var(--psb-primary);
	border-color: var(--psb-primary) !important;
	color: var(--psb-on-primary) !important;
}

.psb-catalog__page-btn:hover {
	background-color: var(--psb-surface-alt);
}

.psb-catalog__page-btn--active {
	background-color: var(--psb-primary) !important;
	border-color: var(--psb-primary) !important;
	color: var(--psb-on-primary) !important;
	font-weight: 600 !important;
}

.psb-catalog__page-btn:disabled {
	opacity: 0.4;
	cursor: default;
}

.psb-catalog__page-btn:disabled:hover {
	background-color: var(--psb-surface-alt);
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 600px) {
	.psb-catalog__filters {
		flex-direction: column;
	}

	.psb-catalog__filter-group {
		flex: none;
	}

	.psb-catalog__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 400px) {
	.psb-catalog__grid {
		grid-template-columns: 1fr;
	}
}

/* ── Taxonomy archive page ───────────────────────────────────────────── */

/* Shared container styles — mirrors .psb-pd rules in frontend.css so taxonomy
   archive pages get the same boxed-width + padding treatment as single product
   pages without pulling in all of the product-detail CSS.                    */

.psb-pd {
	--display: flex;
	--flex-direction: row;
	--container-widget-width: calc((1 - var(--container-widget-flex-grow) 11) * 100%);
	--container-widget-height: 100%;
	--container-widget-flex-grow: 1;
	--container-widget-align-self: stretch;
	--flex-wrap-mobile: wrap;
	background-color: var(--psb-bg);
}

.psb-pd * {
	box-sizing: border-box;
}

.psb-pd.psb-pd-info-section {
	padding: 0 6% !important;
	background-color: inherit;
}

/* Elementor style isolation for taxonomy archive — keep Elementor global
   link/button styles from bleeding into psb areas.                          */

.psb-pd a:not(.psb-btn),
.psb-pd a:not(.psb-btn):hover,
.psb-pd a:not(.psb-btn):visited {
	border: none;
	box-shadow: none;
}

.psb-pd .psb-btn,
.psb-pd .psb-btn:visited {
	box-shadow: none;
	border: 2px solid transparent;
	outline: none;
	text-decoration: none;
	font-family: var(--e-global-typography-primary-font-family);
}

.psb-tax-archive {
	padding: 48px 0 64px;
}

.psb-tax-archive__hero {
	margin-bottom: 36px;
}

.psb-tax-archive__title {
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	font-weight: 700;
	margin: 0 0 10px;
	line-height: 1.2;
}

.psb-tax-archive__desc {
	font-size: 1rem;
	color: var(--psb-secondary);
	max-width: 680px;
	margin: 0;
	line-height: 1.65;
}

/* ── Elementor style isolation for catalog / taxonomy archive ─────────── */
/* .psb-catalog overrides must beat .psb-pd a:not(.psb-btn) rules that    */
/* leak into the taxonomy archive (0,2,2). Doubled-class selectors        */
/* ensure sufficient specificity in :visited / :hover states.             */

.psb-catalog a,
.psb-catalog a:hover,
.psb-catalog a:visited {
	border: none;
	box-shadow: none;
}

.psb-catalog a:hover,
.psb-catalog a:visited {
	text-decoration: underline;
}

/* Card title links — clean (no underline) in normal/visited, underline on hover */
.psb-catalog .psb-catalog__card-title a,
.psb-catalog .psb-catalog__card-title a:visited {
	color: var(--psb-text);
	text-decoration: none;
}

.psb-catalog .psb-catalog__card-title a:hover {
	color: var(--psb-primary);
	text-decoration: underline;
}

.psb-catalog button {
	font-family: inherit;
}