/* Skystep PDP Boven-de-Vouw CSS — Sprongbalk, Hotspot-Galerij, Keukentafel-Kader, 3-Staps Buy-Box & Sticky Balk */

.ss-pdp-jumpbar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid #e4ecef; }
.ss-jump-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ss-jump-label { font-size: 12.5px; font-weight: 700; color: #526d77; margin-right: 4px; }
.ss-jump-links a { font-size: 13px; font-weight: 600; color: #123845; background: #f0f6f8; padding: 5px 11px; border-radius: 999px; text-decoration: none; }
.ss-jump-links a:hover { background: #dcebef; color: #005b70; }

/* Galerij Stage + Hotspots + Bijschriftbalk */
.ss-pdp-stage { position: relative; aspect-ratio: auto; background: #fff; border: 1px solid #dce6ea; border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 961px) {
	.ss-pdp-buybox { grid-column: 2; grid-row: auto; position: sticky; top: 84px; }
}
.ss-stage-top-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ss-stage-family-pill { font-size: 12.5px; font-weight: 700; color: #005b70; background: #ebf5f7; padding: 5px 12px; border-radius: 999px; }
.ss-hotspot-toggle { font-size: 12.5px; font-weight: 600; color: #123845; background: #f4f7f8; border: 1px solid #cfe0e5; border-radius: 999px; padding: 6px 12px; cursor: pointer; min-height: 36px; }
.ss-stage-canvas { position: relative; display: flex; align-items: center; justify-content: center; min-height: 340px; background: #f8fbfc; border-radius: 12px; padding: 16px; }
.ss-hotspot-layer { position: absolute; inset: 0; pointer-events: none; }
.ss-hotspot-layer[hidden] { display: none; }
.ss-hotspot-pin {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 34px;
	height: 34px;
	border-radius: 999px;
	border: 2.5px solid #fff;
	color: #fff;
	font-weight: 800;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 16px rgba(14, 39, 48, 0.28);
	pointer-events: auto;
	cursor: pointer;
}
.ss-hotspot-pin.is-orange, .ss-hotspot-num.is-orange { background: #ea7a1e; }
.ss-hotspot-pin.is-teal, .ss-hotspot-num.is-teal { background: #005b70; }
.ss-hotspot-pin.is-green, .ss-hotspot-num.is-green { background: #15803d; }

.ss-photo-caption-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	background: #f4f7f8;
	border-radius: 10px;
	padding: 9px 13px;
	font-size: 13px;
	color: #334e58;
}
.ss-caption-unit {
	color: #15803d;
	font-size: 12.5px;
	font-weight: 700;
}

/* Benoemde Thumbnails */
.ss-pdp-thumbs-named {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
	gap: 10px;
	margin-top: 12px;
}
.ss-pdp-thumbs-named .ss-pdp-thumb {
	width: 100%;
	height: auto;
	padding: 8px 6px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: 1.5px solid #dce6ea;
	border-radius: 12px;
}
.ss-pdp-thumbs-named .ss-pdp-thumb.is-active {
	border-color: #005b70;
	box-shadow: 0 0 0 2px rgba(0, 91, 112, 0.14);
}
.ss-pdp-thumbs-named .ss-pdp-thumb img { width: 54px; height: 54px; object-fit: contain; }
.ss-thumb-label { font-size: 11.5px; font-weight: 600; color: #1e3a44; text-align: center; line-height: 1.2; }

/* Anatomische Callout Kaartjes + Voetkundig Adviseur Kader */
.ss-hotspot-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-top: 14px;
}
.ss-hotspot-card {
	background: #fff;
	border: 1px solid #e1ebee;
	border-radius: 12px;
	padding: 11px 12px;
	display: flex;
	align-items: flex-start;
	gap: 9px;
}
.ss-hotspot-card.is-highlight { border-color: #005b70; background: #f2f9fb; }
.ss-hotspot-num {
	flex: 0 0 24px;
	height: 24px;
	border-radius: 999px;
	color: #fff;
	font-size: 12.5px;
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.ss-hotspot-card strong { display: block; font-size: 13.5px; color: #123845; margin-bottom: 2px; }
.ss-hotspot-card p { margin: 0; font-size: 12.5px; color: #405b65; line-height: 1.4; }

.ss-keukentafel-advisor {
	margin-top: 16px;
	background: #ecfdf5;
	border: 1px solid #bbf7d0;
	border-left: 5px solid #15803d;
	border-radius: 14px;
	padding: 16px 18px;
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 16px;
	align-items: center;
}
.ss-advisor-seal { width: 72px; height: 72px; object-fit: contain; background: #fff; border-radius: 999px; padding: 4px; }
.ss-advisor-kicker { font-size: 12px; font-weight: 700; color: #15803d; text-transform: uppercase; letter-spacing: 0.03em; }
.ss-advisor-heading { font-size: 17px; margin: 2px 0 6px; color: #0e2730; }
.ss-advisor-copy p { margin: 0; font-size: 14px; line-height: 1.55; color: #1e3a44; }

/* Buy-Box 3-Staps Upgrade + Conversiegroene CTA (#7ac142) + Bundels + Sticky Balk */
.ss-pdp-tag-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ss-complaint-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.ss-complaint-tag { font-size: 12px; font-weight: 700; color: #005b70; background: #ebf5f7; padding: 4px 10px; border-radius: 999px; text-decoration: none; }
.ss-pdp-rating-link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: #123845; text-decoration: none; }
.ss-stars { color: #f59e0b; letter-spacing: 1px; }
.ss-pdp-lead { font-size: 14.5px; color: #334e58; line-height: 1.5; margin: 6px 0 12px; }
.ss-step-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14.5px; font-weight: 700; color: #123845; margin-bottom: 8px; }
.ss-tier-strike { text-decoration: line-through; color: #7b9199; font-size: 12.5px; font-weight: 500; margin-right: 5px; }

.ss-bundle-box { background: #f8fbfc; border: 1px solid #d8e5e9; border-radius: 14px; padding: 14px; margin: 14px 0; }
.ss-bundle-list { display: flex; flex-direction: column; gap: 8px; }
.ss-bundle-item { display: grid; grid-template-columns: 22px 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; background: #fff; border: 1px solid #e1ecee; border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.ss-bundle-item.is-checked { border-color: #15803d; background: #f2fcf5; }
.ss-bundle-item input { width: 18px; height: 18px; accent-color: #15803d; }
.ss-bundle-item img { width: 44px; height: 44px; object-fit: contain; border-radius: 6px; background: #f4f7f8; }
.ss-bundle-meta strong { display: block; font-size: 13.5px; color: #0e2730; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-bundle-meta span { font-size: 12px; color: #005b70; font-weight: 600; }
.ss-bundle-price { font-size: 13.5px; font-weight: 700; color: #15803d; white-space: nowrap; }

.ss-btn-green,
#ssPdpAddToCartBtn.ss-btn-green,
#ssStickyAddBtn.ss-btn-green { background: #4c8c20; color: #fff; border: none; font-weight: 800; }
#ssPdpAddToCartBtn.ss-btn-green { font-size: 17px; }
.ss-btn-green:hover,
#ssPdpAddToCartBtn.ss-btn-green:hover,
#ssStickyAddBtn.ss-btn-green:hover { background: #3e7518; }

.ss-wwk-slider { background: #f8fbfc; border: 1px solid #dfeaed; border-radius: 12px; padding: 12px 14px; margin-top: 14px; }
.ss-wwk-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ss-wwk-head img { height: 24px; width: auto; }
.ss-wwk-quote { font-size: 13.5px; color: #1e3a44; line-height: 1.45; margin: 0; }
.ss-wwk-nav { display: flex; gap: 6px; }
.ss-wwk-btn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid #cfe0e5; background: #fff; cursor: pointer; font-weight: 700; }
.ss-mollie-strip { margin-top: 12px; text-align: center; }
.ss-mollie-strip img { max-height: 28px; width: auto; max-width: 100%; margin: 0 auto; }

.ss-sticky-pdp-bar[hidden] { display: none !important; }
.ss-sticky-pdp-bar { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid #d5e2e6; box-shadow: 0 -10px 28px rgba(14, 39, 48, 0.12); padding: 10px 0; z-index: 80; }
.ss-sticky-pdp-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.ss-sticky-pdp-prod { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ss-sticky-pdp-prod img { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: #f4f7f8; }
.ss-sticky-pdp-prod strong { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; }
.ss-sticky-pdp-prod span { display: block; font-size: 13px; color: #15803d; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-sticky-pdp-cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

@media (max-width: 900px) {
	.ss-hotspot-cards { grid-template-columns: 1fr; }
	.ss-keukentafel-advisor { grid-template-columns: 56px minmax(0, 1fr); padding: 14px; }
	.ss-advisor-seal { width: 56px; height: 56px; }
	.ss-sticky-pdp-prod img, .ss-sticky-pdp-prod strong { display: none; }
}
@media (max-width: 560px) {
	.ss-sticky-pdp-prod { display: none; }
	.ss-sticky-pdp-cta { width: 100%; justify-content: space-between; }
}