/* PSB Notion Products — single product page */

/* ════════════════════════════════════════════════════════════════════════
   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));
}

/* ── Base container ───────────────────────────────────────────────────────── */

.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;
}

/* ── 1. Hero swiper ───────────────────────────────────────────────────────── */

.psb-hero-swiper {
	width: 100%;
	aspect-ratio: 16 / 6;
	background: #0d1b2a;
	overflow: hidden;
	cursor: zoom-in;
	position: relative;
}

.psb-hero-swiper .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.psb-hero-swiper .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* When image is too small for the slider, JS adds this class for a
   blurred-backdrop + object-fit: contain fallback.                 */
.psb-hero-swiper .swiper-slide.psb-slide-contain {
	background-size: cover;
	background-position: center;
}

.psb-hero-swiper .swiper-slide.psb-slide-contain::before {
	content: '';
	position: absolute;
	inset: -20px;
	background: inherit;
	background-size: cover;
	background-position: center;
	filter: blur(20px);
	z-index: 0;
	pointer-events: none;
}

.psb-hero-swiper .swiper-slide.psb-slide-contain img {
	object-fit: contain;
	position: relative;
	z-index: 1;
}

/* Translucent contrast tint painted ABOVE the blurred backdrop but BELOW
   the crisp image: mutes the halo of the subject's own colors bleeding out
   of the blur, so the flat contrast color dominates and the silhouette
   stays readable. JS sets --psb-blur-tint on the slide. */
.psb-hero-swiper .swiper-slide.psb-slide-contain::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var(--psb-blur-tint, transparent);
	opacity: 0.55;
	pointer-events: none;
}

.psb-hero-swiper .swiper-button-prev,
.psb-hero-swiper .swiper-button-next {
	color: #fff;
}

/* Hero pagination dots — always a single row. Products with many images used
   to wrap the dots onto a second row; now the strip is a fixed-width clipped
   row: dots outside the visible area are hidden (overflow hidden, bullets
   cannot shrink), and frontend.js auto-centers the active dot inside the
   strip as the user slides (same idea as the thumbs strip below). */
.psb-hero-swiper .swiper-pagination {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	width: auto;
	max-width: min(540px, calc(100% - 140px));
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	overflow: hidden;
	text-align: left;
	scroll-behavior: smooth;
	z-index: 10;
}

.psb-hero-swiper .swiper-pagination-bullet {
	flex: 0 0 auto; /* never shrink — out-of-view dots must overflow + clip */
	background: rgba(255, 255, 255, .6);
}

.psb-hero-swiper .swiper-pagination-bullet-active {
	background: #fff;
}

.psb-hero-counter {
	position: absolute;
	bottom: 12px;
	right: 16px;
	z-index: 10;
	background: rgba(0, 0, 0, .45);
	color: #fff;
	font-size: .8rem;
	padding: 4px 10px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	gap: 6px;
	pointer-events: none;
}

/* No selection/drag ghosts from the hero slider — a micro-drag that starts
   on the nav buttons (or the image) otherwise paints a selection highlight
   over the slide image. Slides carry no text, so nothing legit is lost. */
.psb-hero-swiper,
.psb-hero-swiper .swiper-slide,
.psb-hero-swiper .swiper-button-prev,
.psb-hero-swiper .swiper-button-next,
.psb-hero-swiper .swiper-pagination {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.psb-hero-swiper img {
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
}

/* ── 2. Identity ──────────────────────────────────────────────────────────── */

.psb-pd-identity {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 28px 0 20px;
}

.psb-pd-brand-logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.psb-pd-brand-logo__img {
	max-height: 64px;
	max-width: 140px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.psb-pd-brand-logo__text {
	font-size: 1rem;
	font-weight: 700;
	color: var(--psb-text);
	white-space: nowrap;
	padding: 6px 14px;
	border: 1px solid var(--psb-border);
	border-radius: 6px;
}

.psb-pd-headings {
	flex: 1 1 auto;
	min-width: 0;
}

.psb-pd-title {
	margin: 0;
	font-family: var(--e-global-typography-primary-font-family, inherit);
	font-size: clamp(28px, 4vw, 45px);
	font-weight: 600;
	line-height: 1.1;
	color: var(--psb-text);
}

.psb-pd-status {
	flex: 0 0 auto;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: .8rem;
	font-weight: 600;
	background: #eef2ff;
	color: #3730a3;
	white-space: nowrap;
	align-self: flex-start;
	margin-top: 6px;
}

.psb-pd-status--available {
	background: #dcfce7;
	color: #166534;
}

.psb-pd-status--sold,
.psb-pd-status--discontinued {
	background: #fee2e2;
	color: #991b1b;
}

.psb-pd-status--on-request,
.psb-pd-status--incoming {
	background: #fef9c3;
	color: #854d0e;
}

/* ── 3. Thumbs strip ──────────────────────────────────────────────────────── */

.psb-thumbs-swiper {
	margin-bottom: 24px;
	margin-left: 0 !important;
	width: inherit !important;
}

.psb-thumbs-swiper .swiper-slide {
	width: 72px !important;
	height: 72px;
	border-radius: 8px;
	overflow: hidden;
	border: 2px solid var(--psb-border);
	cursor: pointer;
	opacity: .55;
	transition: opacity .15s, border-color .15s;
}

.psb-thumbs-swiper .swiper-slide-thumb-active {
	opacity: 1;
	border-color: var(--psb-primary);
}

.psb-thumbs-swiper .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Same no-selection treatment for the thumbs strip — clicking/hovering a
   thumb with a slight drag would otherwise highlight it or page text. */
.psb-thumbs-swiper,
.psb-thumbs-swiper .swiper-slide {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.psb-thumbs-swiper img {
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
}

/* ── 4. Hashtags ──────────────────────────────────────────────────────────── */

.psb-pd-hashtags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 28px;
}

.psb-pd-hashtag {
	display: inline-block;
	padding: 5px 12px;
	background: var(--psb-surface-alt);
	color: var(--psb-primary);
	border-radius: 999px;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: 0.2px;
	text-decoration: none;
	transition: background .15s;
}

.psb-pd-hashtag:hover {
	background: var(--psb-hover);
}

/* ── 4b. Offer type hashtag (Prodaja / Najam / Prodaja i najam) ───────────── */

.psb-pd-offer {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: -12px 0 28px;
}

.psb-pd-offer__tag {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: .84rem;
	font-weight: 700;
	letter-spacing: 0.2px;
	color: #ffffff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.psb-pd-offer__tag--sale {
	background: #16a34a;
}

.psb-pd-offer__tag--rent {
	background: #2563eb;
}

.psb-pd-offer__tag--both {
	background: linear-gradient(90deg, #16a34a, #2563eb);
}

/* ── 5. Short description card ────────────────────────────────────────────── */

.psb-pd-short-desc {
	background: var(--psb-surface-alt);
	border-left: 3px solid var(--psb-primary);
	border-radius: 0 8px 8px 0;
	padding: 16px 20px;
	margin-bottom: 32px;
}

.psb-pd-lead {
	margin: 0;
	font-size: 1.05rem;
	color: var(--psb-text);
	line-height: 1.6;
}

/* ── 6. Base specs & 7. Shared table/section styles ──────────────────────── */

.psb-pd-h2 {
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0 0 14px;
	color: var(--psb-text);
}

.psb-pd-base-specs,
.psb-pd-techspecs,
.psb-pd-docs {
	margin-bottom: 32px;
}

.psb-pd .psb-pd-base-specs {}

.psb-pd .psb-pd-specs__table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--psb-border);
	border-radius: 10px;
	overflow: hidden;
	background: var(--psb-surface);
}

.psb-pd .psb-pd-specs__table th,
.psb-pd .psb-pd-specs__table td {
	text-align: left;
	padding: 11px 16px;
	border: 1px solid var(--psb-border);
	font-size: .95rem;
	line-height: 1.45;
	vertical-align: top;
}

.psb-pd .psb-pd-specs__table th {
	color: var(--psb-text);
	font-weight: 600;
	width: 42%;
	white-space: nowrap;
	background: var(--psb-surface-alt);
	font-size: .875rem;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.psb-pd .psb-pd-specs__table td {
	color: var(--psb-text);
}

.psb-pd .psb-pd-specs__table tbody tr:nth-child(even) {
	background: var(--psb-surface-alt);
}

.psb-pd .psb-pd-specs__table tbody tr:hover {
	background: var(--psb-hover);
}

.psb-pd .psb-pd-specs__table a {
	color: var(--psb-primary);
	text-decoration: none;
	font-weight: 500;
}

.psb-pd .psb-pd-specs__table a:hover {
	text-decoration: underline;
}

/* ── 7. Technical specs (key specs icon strip) ────────────────────────────── */

.psb-pd-keyspecs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0;
	border-top: 1px solid var(--psb-border);
	border-bottom: 1px solid var(--psb-border);
}

.psb-pd-keyspec {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1 1 120px;
	min-width: 100px;
	gap: 4px;
	padding: 1.25rem 1rem;
	text-align: center;
	border-right: 1px solid var(--psb-border);
}

.psb-pd-keyspec:last-child {
	border-right: none;
}

.psb-pd-keyspec__icon {
	font-size: 1.375rem;
	color: var(--psb-primary);
	line-height: 1;
}

.psb-pd-keyspec__value {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--psb-text);
	line-height: 1.2;
}

.psb-pd-keyspec__unit {
	font-size: .8125rem;
	font-weight: 400;
	color: var(--psb-secondary);
}

.psb-pd-keyspec__label {
	font-size: .6875rem;
	font-weight: 500;
	color: var(--psb-secondary);
	text-transform: uppercase;
	letter-spacing: .06em;
}

/* ── Documents ────────────────────────────────────────────────────────────── */

.psb-pd-docs__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.psb-pd-doc {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border: 1px solid var(--psb-border);
	border-radius: 10px;
	margin-bottom: 8px;
	text-decoration: none;
	color: var(--psb-text);
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: 0.3px;
}

.psb-pd-doc:hover {
	border-color: var(--psb-primary);
	text-decoration: underline;
}

.psb-pd-doc__icon {
	color: var(--psb-primary);
}

/* ── Post content ─────────────────────────────────────────────────────────── */

.psb-pd-content {
	max-width: 100%;
	min-width: 0;
	overflow-wrap: break-word;
	margin-bottom: 32px;
	line-height: 1.7;
}

.psb-pd-content img {
	max-width: 100%;
	height: auto;
}

.psb-pd-content p:first-child {
	margin-top: 0;
}

.psb-pd-content pre {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.psb-pd-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 16px 0 20px;
	font-size: .925rem;
	border: 1px solid var(--psb-border);
	border-radius: 8px;
}

.psb-pd-content table th,
.psb-pd-content table td {
	padding: 10px 14px;
	border: 1px solid var(--psb-border);
	text-align: left;
	vertical-align: top;
}

.psb-pd-content table th {
	background: var(--psb-surface-alt);
	font-weight: 600;
	color: var(--psb-text);
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.psb-pd-content table tbody tr:nth-child(even) {
	background: var(--psb-surface-alt);
}

.psb-pd-content table tbody tr:hover {
	background: var(--psb-hover);
}

/* ── 8. Sections (formerly tabs) ─────────────────────────────────────────── */

.psb-pd-sections {
	max-width: 100%;
	min-width: 0;
	margin-bottom: 32px;
}

.psb-pd-section {
	max-width: 100%;
	min-width: 0;
	margin-bottom: 40px;
}

.psb-pd-section:last-child {
	margin-bottom: 0;
}

.psb-pd-section__title {
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--psb-border);
	color: var(--psb-text);
}

.psb-pd-section__body img {
	width: auto;
	height: 250px;
}

.psb-pd-section__body iframe {
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.psb-pd-section__body .ose-embedpress-responsive {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: none !important;
	display: block !important;
}

.psb-pd-section__body p:first-child {
	margin-top: 0;
}

.psb-pd-section__body p:last-child {
	margin-bottom: 0;
}

.psb-pd-section__body {
	max-width: 100%;
	min-width: 0;
	width: 100%;
	overflow-wrap: break-word;
	/* Wide tables scroll inside the section body; the tables themselves
	   stay real tables (see below) so they always fill the width. */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

.psb-pd-section__body pre {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Keep content-tab tables as REAL tables — never display: block. Block mode
   breaks the table layout model: thead/tbody get wrapped in shrink-to-fit
   anonymous tables, so they stop filling the table width and the border
   paints around empty space. Horizontal scrolling lives on
   .psb-pd-section__body above. */
.psb-pd-section__body table {
	display: table;
	width: 100%;
	border-collapse: collapse;
	margin: 16px 0 20px;
	font-size: .925rem;
	border: 1px solid var(--psb-border);
	border-radius: 8px;
}

.psb-pd-section__body table th,
.psb-pd-section__body table td {
	padding: 10px 14px;
	border: 1px solid var(--psb-border);
	text-align: left;
	vertical-align: middle;
	font-size: 12px;
	text-align: center;
}

.psb-pd-section__body table th {
	background: var(--psb-surface-alt);
	font-weight: 600;
	color: var(--psb-text);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .02px;
	text-align: center;
}

.psb-pd-section__body table tbody tr:nth-child(even) {
	background: var(--psb-surface-alt);
}

.psb-pd-section__body table tbody tr:hover {
	background: var(--psb-hover);
}

.psb-pd-section__body table a:hover {
	text-decoration: underline;
}

/* ── 9. Related products ──────────────────────────────────────────────────── */

.psb-pd-related {
	margin-bottom: 40px;
}

.psb-pd-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 16px;
}

.psb-pd-card {
	display: block;
	text-decoration: none;
	color: var(--psb-text);
	border: 1px solid var(--psb-border-strong) !important;
	overflow: hidden;
	transition: border-color .15s, box-shadow .15s;
	border-top: 0;
	position: relative;
	background-size: cover;
	background-position: center;
}

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

.psb-pd-card:hover {
	border-color: var(--psb-primary);
}

.psb-pd-card__img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	display: block;
	position: relative;
	z-index: 1;
}

/* Uniform title block: every related card reserves exactly two lines, so
   one-line names no longer leave ragged gaps (where the blurred backdrop
   peeks through and pushes cards out of alignment); longer names clamp
   with an ellipsis. */
.psb-pd-card__title {
	display: block;
	height: calc(2.6em + 20px); /* 2 × line-height 1.3 + 10px top/bottom padding */
	box-sizing: border-box;
	overflow: hidden;
	padding: 10px 12px;
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.3;
	position: relative;
	background-color: var(--psb-surface);
}

@supports (display: -webkit-box) {
	.psb-pd-card__title {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
}

/* ── 10. Order CTA ────────────────────────────────────────────────────────── */

.psb-pd-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 32px 0;
	border-top: 1px solid var(--psb-border);
}

.psb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 20px !important;
	border-radius: 30px !important;
	font-size: 1rem;
	font-weight: 600 !important;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s, color .15s, filter .15s;
	white-space: nowrap;
	line-height: 1;
	border: 0 !important;
}

.psb-btn--primary {
	background: var(--psb-primary);
	color: var(--psb-on-primary);
}

.psb-btn--primary:hover {
	opacity: 0.88;
	text-decoration: underline;
}

/* ── Lightbox ─────────────────────────────────────────────────────────────── */

.psb-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .88);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	padding: 24px;
}

.psb-lightbox__img {
	max-width: 88vw;
	max-height: 90vh;
	border-radius: 6px;
}

.psb-lightbox .psb-lightbox__close {
	position: absolute;
	top: 16px;
	right: 20px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #dc2626;
	border: 1px solid #ffffff31;
	color: #fff;
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.psb-lightbox .psb-lightbox__close:hover {
	background: #b91c1c;
	color: #fff;
}

.psb-lightbox .psb-lightbox__prev,
.psb-lightbox .psb-lightbox__next {
	line-height: 1em;
}

.psb-lightbox .psb-lightbox__prev,
.psb-lightbox .psb-lightbox__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .15);
	border: 0;
	color: #fff;
	font-size: 1.3rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s;
}

.psb-lightbox .psb-lightbox__prev {
	left: 16px;
}

.psb-lightbox .psb-lightbox__next {
	right: 16px;
}

.psb-lightbox .psb-lightbox__prev:hover,
.psb-lightbox .psb-lightbox__next:hover {
	background: rgba(255, 255, 255, .28);
	color: #fff;
}

.psb-lightbox .psb-lightbox__close,
.psb-lightbox .psb-lightbox__prev,
.psb-lightbox .psb-lightbox__next {
	color: #fff;
	border-color: #fff;
}

.psb-lightbox__prev:disabled,
.psb-lightbox__next:disabled {
	opacity: .3;
	cursor: default;
}

/* ── Generic modal (product page) ───────────────────────────────────────── */

.psb-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 99999;
}

.psb-modal--open {
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.psb-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.psb-modal__panel {
	position: relative;
	z-index: 1;
	width: min(640px, calc(100vw - 2rem));
	margin-top: 55px;
	background: var(--psb-surface);
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
	padding: 1.25rem;
	max-height: calc(100vh - 110px);
	overflow-y: auto;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.psb-modal__panel.psb-modal--wide {
	width: min(1100px, calc(100vw - 2rem));
}

.psb-modal__close {
	position: absolute;
	top: 0.75rem;
	right: 1.25rem;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 2rem !important;
	height: 2rem;
	padding: 0 !important;
	font-size: 1.25rem !important;
	line-height: 1;
	color: var(--psb-secondary) !important;
	background: transparent;
	border: none !important;
	cursor: pointer !important;
}

.psb-modal__close:hover {
	color: var(--psb-text) !important;
}

.psb-modal__body table a,
.psb-modal__body table a:hover,
.psb-modal__body table a:visited {
	text-decoration: underline;
	border: none;
	box-shadow: none;
	color: var(--psb-primary);
}

.psb-modal__body table .psb-table-cta a,
.psb-modal__body table .psb-table-cta a:visited {
	display: inline-block;
	padding: 6px 14px;
	background: var(--psb-primary);
	color: var(--psb-on-primary) !important;
	font-size: 13px;
	font-weight: 600;
	border-radius: 30px;
	text-decoration: none;
	white-space: nowrap;
	transition: filter 0.15s;
}

.psb-modal__body table {
	width: 100%;
	border-collapse: collapse;
	margin: 16px 0 20px;
	font-size: .925rem;
	border: 1px solid var(--psb-border);
	border-radius: 8px;
}

.psb-modal__body table th,
.psb-modal__body table td {
	padding: 10px 14px;
	border: 1px solid var(--psb-border);
	text-align: left;
	vertical-align: middle;
}

.psb-modal__body table th {
	background: var(--psb-surface-alt);
	font-weight: 600;
	color: var(--psb-text);
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.psb-modal__body table tbody tr:nth-child(even) {
	background: var(--psb-surface-alt);
}

.psb-modal__body table tbody tr:hover {
	background: var(--psb-hover);
}

body.psb-modal-open {
	overflow: hidden;
}

@media (max-width: 640px) {
	.psb-modal__panel {
		width: calc(100vw - 1rem);
		margin-top: 2rem;
		padding: 1rem;
	}

	.psb-modal__panel.psb-modal--wide {
		width: calc(100vw - 1rem);
	}
}

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

@media (max-width: 720px) {
	.psb-hero-swiper {
		aspect-ratio: 4 / 3;
	}

	.psb-pd-identity {
		flex-wrap: wrap;
		gap: 12px;
		padding: 16px 0 14px;
	}

	.psb-pd-brand-logo__img {
		max-height: 48px;
		max-width: 100px;
	}

	.psb-pd-status {
		order: 3;
	}

	.psb-pd-keyspec {
		flex-basis: calc(50% - 1px);
		border-right: none;
		border-bottom: 1px solid var(--psb-border);
	}

	.psb-pd-keyspec:nth-child(odd) {
		border-right: 1px solid var(--psb-border);
	}

	.psb-pd-keyspec:last-child:nth-child(odd) {
		border-right: none;
	}

	.psb-btn {
		flex: 1 1 100%;
	}

	.psb-pd-related__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.psb-pd .psb-pd-specs__table th {
		white-space: normal;
		width: auto;
		min-width: 90px;
	}

	.psb-pd .psb-pd-specs__table td {
		word-break: break-word;
	}
}

/* ── Elementor style isolation ────────────────────────────────────────────── */
/* Prevent 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;
	color: var(--psb-primary);
}

.psb-pd .psb-pd-hashtag,
.psb-pd .psb-pd-hashtag:visited {
	color: var(--psb-primary);
	text-decoration: none;
}

.psb-pd .psb-pd-hashtag:hover {
	color: var(--psb-primary);
	text-decoration: underline;
}

.psb-pd .psb-pd-doc,
.psb-pd .psb-pd-doc:visited {
	color: var(--psb-text);
}

.psb-pd .psb-pd-card,
.psb-pd .psb-pd-card:visited {
	color: var(--psb-text);
	text-decoration: none;
}

.psb-pd .psb-pd-card:hover {
	color: var(--psb-text);
	text-decoration: underline;
}

.psb-pd .psb-pd-specs__table a,
.psb-pd .psb-pd-specs__table a:visited {
	color: var(--psb-primary);
}

.psb-pd .psb-pd-specs__table a:hover {
	text-decoration: underline;
}

.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-pd .psb-btn--primary,
.psb-pd .psb-btn--primary:visited {
	background: var(--psb-primary);
	color: var(--psb-on-primary);
}

.psb-pd .psb-btn--primary:hover,
.psb-pd .psb-btn--primary:focus {
	color: var(--psb-on-primary);
	text-decoration: underline;
}

.psb-pd .psb-btn--secondary,
.psb-pd .psb-btn--secondary:visited {
	background: var(--psb-inverse);
	color: var(--psb-on-inverse);
}

.psb-pd .psb-btn--secondary:hover,
.psb-pd .psb-btn--secondary:focus {
	filter: brightness(1.15);
	color: var(--psb-on-inverse);
	background: var(--psb-inverse);
	text-decoration: underline;
}

/* ── PDF link ───────────────────────────────── */

table td p a:hover {
	text-decoration: underline;
}

/* ── Table CTA column (comparison tables) ───────────────────────────────── */

.psb-pd .psb-table-cta {
	white-space: nowrap;
}

.psb-pd .psb-table-cta a,
.psb-pd .psb-table-cta a:visited {
	display: inline-block;
	padding: 6px 14px;
	background: var(--psb-primary);
	color: var(--psb-on-primary) !important;
	font-size: 13px;
	font-weight: 600;
	border-radius: 30px;
	text-decoration: none;
	white-space: nowrap;
	transition: filter 0.15s;
}

.psb-pd .psb-table-cta a:hover {
	filter: brightness(1.15);
	background: var(--psb-inverse);
	color: var(--psb-on-inverse) !important;
	text-decoration: underline;
}

/* ── Below-table CTA (single-model spec tables) ───────────────────────────── */
/* Add the class "psb-table-cta-below" to a table in the editor to render a
   single button in a paragraph underneath instead of a per-row column.       */

.psb-pd .psb-table-cta-below,
.psb-modal__body .psb-table-cta-below {
	margin: 16px 0 0;
	text-align: right;
}

.psb-pd .psb-table-cta-below__btn,
.psb-pd .psb-table-cta-below__btn:visited,
.psb-modal__body .psb-table-cta-below__btn,
.psb-modal__body .psb-table-cta-below__btn:visited {
	display: inline-block;
	padding: 9px 20px;
	background: var(--psb-primary);
	color: var(--psb-on-primary) !important;
	font-size: 14px;
	font-weight: 600;
	border-radius: 30px;
	text-decoration: none;
	white-space: nowrap;
	transition: filter 0.15s;
	border: none;
	box-shadow: none;
}

.psb-pd .psb-table-cta-below__btn:hover,
.psb-modal__body .psb-table-cta-below__btn:hover {
	filter: brightness(1.15);
	background: var(--psb-inverse);
	color: var(--psb-on-inverse) !important;
}