/* ProBond product page styles */

.probond-product {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

body.single-product { overflow-x: hidden; }
.probond-product h2 { font-size: 24px; margin: 0 0 20px; }
.probond-product h3 { font-size: 16px; margin: 0 0 12px; }

/* 1a. Hero image */
.pp-hero-image {
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	height: 85vh;
	min-height: 640px;
	width: 100%;
}

/* 1b. Intro band */
.pp-intro { padding: 50px clamp(24px, 6vw, 100px); background: var(--pp-cream, #F5F0E6); }
.pp-intro__grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 40px; align-items: start; }
.pp-intro h1 { font-size: 34px; margin: 0; }
.pp-intro__icons { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.pp-intro__icon { height: 69px; width: auto; }
.pp-intro__tagline { font-size: 16px; line-height: 1.6; margin: 0 0 20px; }

/* Buttons */
.pp-btn {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 4px;
	text-decoration: none;
	font-size: 14px;
	cursor: pointer;
}
.pp-btn--primary { background: #1a1a1a !important; color: #fff !important; border: none !important; }
.pp-btn--primary:hover,
.pp-btn--primary:focus,
.pp-btn--primary:visited { color: #fff !important; background: #1a1a1a !important; border: none !important; }
.pp-btn--ghost {
	background: transparent;
	color: #1a1a1a !important;
	border: 1px solid #1a1a1a;
	margin-top: 12px;
	margin-bottom: 36px;
	display: block;
	width: fit-content;
	margin-left: auto;
	padding: 6px 16px;
	font-size: 12px;
}
.pp-btn--ghost:hover,
.pp-btn--ghost:focus,
.pp-btn--ghost:visited { color: #1a1a1a !important; }

/* 2. Product info */
.pp-info { padding: 40px clamp(24px, 6vw, 100px); background: #f6f5f2; }
.pp-info__grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 40px; }
.pp-info__col-left { padding-right: 24px; }
.pp-mt { margin-top: 56px !important; }

.pp-download-list { list-style: none; padding: 0; margin: 0 0 16px; }
.pp-download-list li { padding: 6px 0; border-top: 1px solid #ddd; }
.pp-download-list li:first-child { border-top: none; }
.pp-download-list a { text-decoration: none; color: #1a1a1a !important; font-size: 14px; }
.pp-download-list a:hover,
.pp-download-list a:focus { color: var(--pp-teal, #004f58) !important; }
.pp-download-icon { float: right; opacity: 0.6; }
.pp-play-icon {
	display: inline-block;
	margin-right: 8px;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 8px solid #1a1a1a;
	opacity: 0.6;
	vertical-align: middle;
}

.pp-fire-rating {
	display: flex;
	align-items: center;
	gap: 16px;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 24px;
	background: #fff;
}
.pp-fire-rating__logo { max-width: 70px; height: auto; }
.pp-fire-rating__label { font-weight: 600; margin: 0 0 4px; }
.pp-fire-rating__detail { margin: 0; color: #555; font-size: 14px; }

.pp-spec-table { width: 100%; border-collapse: collapse; border: none !important; }
.pp-spec-table tr,
.pp-spec-table tr:nth-child(even),
.pp-spec-table tr:nth-child(odd) {
	background: transparent !important;
}
.pp-spec-table td {
	padding: 9px 4px;
	font-size: 14px;
	color: #1a1a1a;
	border: none !important;
	background: transparent !important;
}
.pp-spec-table td:last-child {
	text-align: right;
}

/* 3. Colours */
.pp-colours { padding: 40px clamp(24px, 6vw, 100px); }
/* Moodboard heart toggle */
.pp-moodboard-toggle {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 4px;
	border: 1px solid #ddd !important;
	color: #1a1a1a !important;
	font-size: 14px;
	font-family: inherit !important;
	flex-shrink: 0;
}
.pp-moodboard-toggle:hover { border-color: var(--pp-teal, #004f58) !important; color: var(--pp-teal, #004f58) !important; }
.pp-moodboard-toggle.is-active { background: var(--pp-teal, #004f58) !important; border-color: var(--pp-teal, #004f58) !important; color: #fff !important; }
.pp-moodboard-toggle.is-active svg { fill: currentColor; }
.pp-moodboard-toggle__label { font-family: inherit !important; font-size: inherit !important; }

/* Moodboard floating button */
.pp-moodboard-fab {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #1a1a1a !important;
	color: #fff !important;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(0,0,0,0.25);
	z-index: 999;
}
.pp-moodboard-count {
	position: absolute;
	top: -4px;
	right: -4px;
	background: var(--pp-teal, #004f58);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	min-width: 20px;
	height: 20px;
	border-radius: 10px;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
}

/* Moodboard slide-out panel */
.pp-moodboard-panel {
	position: fixed;
	top: 0;
	right: -360px;
	width: 340px;
	max-width: 90vw;
	height: 100%;
	background: #fff;
	box-shadow: -4px 0 24px rgba(0,0,0,0.15);
	z-index: 1000;
	transition: right 0.3s ease;
	display: flex;
	flex-direction: column;
	padding: 24px 20px;
}
.pp-moodboard-panel.is-open { right: 0; }
.pp-moodboard-panel__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.pp-moodboard-panel__header p { font-weight: 600; font-size: 16px; margin: 0; }
.pp-moodboard-panel__header button {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
	color: #888 !important;
}
.pp-moodboard-panel__list { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.pp-moodboard-panel__empty { color: #888; font-size: 13px; line-height: 1.5; }
.pp-moodboard-panel__view-link {
	display: block;
	text-align: center;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #eee;
	color: var(--pp-teal, #004f58) !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}
.pp-moodboard-panel__view-link:hover { text-decoration: underline; }
.pp-moodboard-item { display: flex; align-items: center; gap: 12px; border: 1px solid #eee; border-radius: 8px; padding: 8px; }
.pp-moodboard-item__swatch { width: 44px; height: 44px; border-radius: 6px; background-size: cover; background-position: center; flex-shrink: 0; }
.pp-moodboard-item__text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pp-moodboard-item__text a { font-size: 13px; font-weight: 500; color: #1a1a1a !important; text-decoration: none; }
.pp-moodboard-item__text span { font-size: 12px; color: #888; }
.pp-moodboard-item__remove {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	font-size: 18px;
	color: #bbb !important;
	flex-shrink: 0;
	padding: 4px;
}
.pp-moodboard-item__remove:hover { color: var(--pp-teal, #004f58) !important; }
.pp-colours__share { margin-top: 16px; }
.pp-pinterest-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 20px;
	border: 1px solid #ddd;
	color: #1a1a1a !important;
	font-size: 13px;
	text-decoration: none;
}
.pp-pinterest-btn:hover { border-color: #E60023 !important; color: #E60023 !important; }
.pp-pinterest-btn svg { flex-shrink: 0; }
.pp-colours__left { display: flex; flex-direction: column; }
.pp-colours__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px; align-items: start; }
.pp-colour-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.pp-colour-tab {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	padding: 7px 16px;
	font-size: 13px;
	font-family: inherit !important;
	border-radius: 20px;
	border: 1px solid var(--pp-teal, #004f58) !important;
	background: transparent !important;
	color: var(--pp-teal, #004f58) !important;
}
.pp-colour-tab:hover,
.pp-colour-tab:focus {
	background: rgba(0, 79, 88, 0.08) !important;
	color: var(--pp-teal, #004f58) !important;
}
.pp-colour-tab.is-active,
.pp-colour-tab.is-active:hover {
	border-color: var(--pp-teal, #004f58) !important;
	background: var(--pp-teal, #004f58) !important;
	color: #fff !important;
}

.pp-colours__swatches {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 24px 20px;
	align-content: start;
}
.pp-swatch-item { text-align: center; width: 100% !important; max-width: none !important; }
.pp-swatch {
	all: unset;
	box-sizing: border-box !important;
	cursor: pointer;
	display: block !important;
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	aspect-ratio: 1 !important;
	border-radius: 6px;
	border: 2px solid transparent !important;
	background-size: cover;
	background-position: center;
	background-color: transparent !important;
}
.pp-swatch.is-active { border-color: #1a1a1a !important; }
.pp-swatch-name { font-size: 13px; margin: 10px 0 0; line-height: 1.3; }
.pp-swatch-stock { font-size: 11px; margin: 2px 0 0; color: #999; }
.pp-swatch-stock--made_to_order { color: #b8875a; }
.pp-colours__preview {
	border: 1px solid #ddd;
	border-radius: 12px;
	padding: 20px;
	position: sticky;
	top: 24px;
	align-self: start;
}
.pp-colours__preview-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.pp-colours__preview .pp-btn-row { display: flex; gap: 12px; align-items: center; }
.pp-colours__preview .pp-btn--ghost {
	display: inline-block;
	width: auto;
	margin: 0;
	padding: 10px 22px;
	font-size: 14px;
}
.pp-colours__preview .pp-btn--primary { margin: 0; }
.pp-colours__preview-image { width: 100%; aspect-ratio: 4/3; background-size: cover; background-position: center; border-radius: 8px; background-color: #eee; }
.pp-colours__preview-name { font-weight: 600; margin: 0; font-size: 18px; }

/* 4. Sustainability */
.pp-sustainability {
	background-size: cover;
	background-position: center;
	background-color: #f6f5f2;
	background-attachment: fixed;
	position: relative;
}
.pp-sustainability__overlay { padding: 60px clamp(24px, 6vw, 100px); }
.pp-sustainability.has-bg-image .pp-sustainability__overlay { background: rgba(0, 0, 0, 0.45); }
.pp-sustainability.has-bg-image .pp-sustainability__content { color: #fff; }
.pp-sustainability.has-bg-image .pp-sustainability__content h2 { color: #fff; }
.pp-sustainability__content { max-width: 560px; }
.pp-sustainability__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 560px; margin-top: 16px; }
.pp-sustainability.has-bg-image .pp-sustainability__cards .pp-card { background: rgba(255, 255, 255, 0.95); color: #1a1a1a; }
.pp-card { background: #fff; border-radius: 8px; padding: 12px 20px; text-align: left; }
.pp-card__label { font-weight: 600; margin: 0 0 4px; font-size: 13px; }

/* 5. Projects gallery */
.pp-projects { padding: 40px clamp(24px, 6vw, 100px); }
.pp-projects__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.pp-projects__tile {
	aspect-ratio: 4/3;
	background-size: cover;
	background-position: center;
	background-color: #eee;
	border-radius: 8px;
	position: relative;
	display: block;
	text-decoration: none;
	overflow: hidden;
	transition: box-shadow 0.25s ease;
}
.pp-projects__tile::before {
	content: '';
	position: absolute;
	inset: 0;
	background-size: inherit;
	background-position: inherit;
	background-image: inherit;
	transform: scale(1);
	transition: transform 0.4s ease;
}
.pp-projects__tile:hover {
	box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.pp-projects__tile:hover::before {
	transform: scale(1.08);
}
.pp-projects__tile span {
	position: absolute; bottom: 0; left: 0; right: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0));
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	padding: 28px 12px 12px;
	z-index: 1;
	transition: padding 0.25s ease;
}
.pp-projects__tile:hover span {
	padding-top: 36px;
}

/* 6. Technical info tabs */
.pp-tech-info { padding: 40px clamp(24px, 6vw, 100px); background: #f6f5f2; }
.pp-tech-info__wrap { display: grid; grid-template-columns: 0.8fr 2fr; border: 1px solid #ddd; border-radius: 12px; overflow: hidden; background: #fff; }
.pp-tech-info__tablist { border-right: 1px solid #ddd; display: block !important; }
.pp-tech-tab {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	display: block !important;
	width: 100% !important;
	float: none !important;
	clear: both !important;
	text-align: left;
	padding: 14px 18px;
	font-size: 13px;
	font-family: inherit !important;
	color: #1a1a1a !important;
	background-color: transparent !important;
	border-right: none !important;
	border-bottom: none !important;
	border-left: 3px solid transparent !important;
	border-top: 1px solid #eee !important;
}
.pp-tech-tab:hover { background-color: rgba(0, 79, 88, 0.06) !important; }
.pp-tech-tab.is-active {
	border-left-color: var(--pp-teal, #004f58) !important;
	background: rgba(0, 79, 88, 0.06) !important;
	color: var(--pp-teal, #004f58) !important;
	font-weight: 600;
}
.pp-tech-tab:first-child { border-top: none; }

.pp-tech-info__content { padding: 24px; }
.pp-tech-info__text { font-size: 14px; line-height: 1.7; margin: 0; }
.pp-tech-info__content .pp-spec-table td:first-child { width: 1%; white-space: nowrap; padding-right: 60px; }
.pp-tech-info__content .pp-spec-table td:last-child { text-align: left; font-weight: 500; }

.pp-matrix-wrap { overflow-x: auto; }
.pp-matrix-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pp-matrix-table th { text-align: center; font-weight: 600; color: var(--pp-teal, #004f58); padding: 10px 12px; white-space: nowrap; }
.pp-matrix-table th:first-child { text-align: left; }
.pp-matrix-row-label { padding: 10px 12px; white-space: nowrap; }
.pp-matrix-table tr { border-top: 1px solid #eee; }
.pp-matrix-table thead tr { border-top: none; border-bottom: 2px solid #eee; }
.pp-matrix-tick { text-align: center; padding: 10px 12px; }
.pp-matrix-tick span { color: var(--pp-teal, #004f58); font-weight: 700; }

/* 7. Additional downloads */
.pp-additional-downloads { padding: 40px clamp(24px, 6vw, 100px); }
.pp-downloads__wrap { display: grid; grid-template-columns: 0.8fr 2fr; border: 1px solid #ddd; border-radius: 12px; overflow: hidden; background: #fff; }
.pp-downloads__tablist { border-right: 1px solid #ddd; display: block !important; }
.pp-downloads-tab {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	display: block !important;
	width: 100% !important;
	float: none !important;
	clear: both !important;
	text-align: left;
	padding: 14px 18px;
	font-size: 13px;
	font-family: inherit !important;
	color: #1a1a1a !important;
	background-color: transparent !important;
	border-right: none !important;
	border-bottom: none !important;
	border-left: 3px solid transparent !important;
	border-top: 1px solid #eee !important;
}
.pp-downloads-tab:first-child { border-top: none !important; }
.pp-downloads-tab:hover { background-color: rgba(0, 79, 88, 0.06) !important; }
.pp-downloads-tab.is-active {
	border-left-color: var(--pp-teal, #004f58) !important;
	background: rgba(0, 79, 88, 0.06) !important;
	color: var(--pp-teal, #004f58) !important;
	font-weight: 600;
}
.pp-downloads-tab__count { font-weight: 400; color: #888; font-size: 12px; }
.pp-downloads__content { padding: 24px; }

/* 8. Related products */
/* 3b. Product additions */
.pp-additions { padding: 50px clamp(24px, 6vw, 100px); background: #1a1a1a; }
.pp-additions h2 { color: #fff; }
.pp-additions__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.pp-additions__card {
	display: block;
	text-decoration: none;
	background: #1a1a1a;
	cursor: pointer;
}
.pp-additions__image {
	aspect-ratio: 4/3;
	background-size: cover;
	background-position: center;
	background-color: #2a2a2a;
	border-radius: 8px;
	transition: opacity 0.25s ease;
}
.pp-additions__card:hover .pp-additions__image { opacity: 0.85; }
.pp-additions__text { padding: 10px 2px; }
.pp-additions__name { color: #fff; font-size: 13px; font-weight: 600; margin: 0 0 2px; }
.pp-additions__tagline { color: #bbb; font-size: 11px; margin: 0; }

.pp-related { padding: 40px clamp(24px, 6vw, 100px); background: #f6f5f2; }
.pp-related__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.pp-related__card { text-decoration: none; color: #1a1a1a; border: 1px solid #ddd; border-radius: 12px; overflow: hidden; display: block; background: #fff; }
.pp-related__image { aspect-ratio: 4/3; background-size: cover; background-position: center; background-color: #eee; }
.pp-related__name { padding: 12px; font-size: 14px; margin: 0; }

/* 9. Closing CTA */
.pp-closing-cta {
	background-size: cover;
	background-position: center;
	background-color: transparent;
}
.pp-closing-cta__overlay { padding: 100px clamp(24px, 6vw, 100px); text-align: center; }
.pp-closing-cta.has-bg-image .pp-closing-cta__overlay { background: rgba(0, 0, 0, 0.45); }
.pp-closing-cta.has-bg-image h2 { color: #fff; }
.pp-closing-cta h2 { margin-bottom: 32px; font-size: 36px; }
.pp-closing-cta .pp-btn--primary { padding: 18px 44px; font-size: 16px; }

/* Lightbox */
.pp-lightbox {
	display: none;
	position: fixed; top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.75);
	z-index: 9999;
	align-items: center;
	justify-content: center;
}
.pp-lightbox.is-open { display: flex; }
.pp-lightbox__inner { position: relative; width: 90%; max-width: 800px; }
.pp-lightbox__close {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	position: absolute; top: -36px; right: 0;
	color: #fff !important;
	border: none !important;
	background: transparent !important;
	font-size: 28px;
}
#pp-lightbox-video-wrap { position: relative; padding-bottom: 56.25%; height: 0; }
#pp-lightbox-video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

/* Gated download signup modal */
.pp-signup-modal__inner {
	background: #fff;
	border-radius: 12px;
	padding: 32px;
	width: 90%;
	max-width: 420px;
}
.pp-signup-modal__inner h3 { margin: 0 0 8px; font-size: 20px; }
.pp-signup-modal__intro { font-size: 13px; color: #666; margin: 0 0 20px; }
.pp-signup-modal__inner .pp-lightbox__close { color: #999 !important; border: none !important; background: transparent !important; top: 16px; right: 16px; font-size: 22px; }
#pp-signup-modal-form { display: flex; flex-direction: column; gap: 14px; }
#pp-signup-modal-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #444; }
#pp-signup-modal-form input {
	padding: 10px 12px;
	border: 1px solid #ddd !important;
	border-radius: 4px;
	font-size: 14px;
	font-family: inherit;
	color: #1a1a1a !important;
}
#pp-signup-modal-form input:focus { outline: none; border-color: var(--pp-teal, #004f58) !important; }
#pp-signup-modal-form .pp-btn { margin-top: 6px; width: 100%; text-align: center; }

/* Mobile - basic fallback, needs its own design pass */
@media (max-width: 782px) {
	.pp-info__grid,
	.pp-colours__grid,
	.pp-tech-info__wrap,
	.pp-downloads__wrap { grid-template-columns: 1fr; }
	.pp-colours__swatches { grid-template-columns: repeat(2, 1fr); }
	.pp-projects__grid { grid-template-columns: repeat(2, 1fr); }
	.pp-additions__grid { grid-template-columns: repeat(2, 1fr); }
	.pp-related__grid { grid-template-columns: 1fr; }
	.pp-colours__preview { position: static; }
}