/* BASIC */

@font-face {
	font-family: 'Fustat';
	font-display: swap;
	src: url("../fonts/Fustat.woff2") format('woff2');
	font-weight: 200 800;
	font-style: normal;
}

:root {
	--black: #000;
	--white: #fff;
	--white-100: #F0EFEC;
	--gray: #F3F3F2;
	--gray-100: #E3E2DF;
	--light-gray: #E1E1E1;
	--dark-gray: #ACACAC;
	--medium-light-gray: #F3F3F2;
	--medium-dark-gray: #979797;
	--gray-overlay: #4a4a4a4a;
	--black-overlay: #13131395;
	--cream: #F4F3F0;
	--green: #3B4E42;
	--light-green: #666D51;
    --lighter-green: #94997F;
	--new-green-300: #3F4B35;
	--new-green-200: #718360;
	--new-green-100: #95A785;
	--new-green-50: #C0C9B8;
	--footer-green: #616352;
	--sustainability-green: #DCDECC;
	--soft-green: #BFC1AE;
	--cubic-bezier: cubic-bezier(.6,0,.4,1);
	--text-headline: clamp(72px, 12vw, 130px);
	--text-section-title: clamp(26px, 3vw, 35px);
	--text-section-text: clamp(22px, 3vw, 32px);
	--text-section-subtext: clamp(18px, 2.5vw, 24px);
	--text-regular: clamp(16px, 2.5vw, 20px);
	--text-collection-title: clamp(30px, 4vw, 60px);
	--text-collection-designer: clamp(14px, 1.5vw, 18px);
	--text-downloads-title: clamp(20px, 2.5vw, 30px);
	--text-small: clamp(14px, 1.5vw, 16px);
}

* {
	/* outline: 1px solid blue; */
	margin: 0;
	padding: 0;
	-webkit-tap-highlight-color: transparent;
}

body,
html {
	overflow-x:hidden;
}

body {
	width: 100%;
	height: 100%;
	font-family: 'Fustat', sans-serif;
    font-weight: 500;
	color: var(--black);
	background-color: var(--white);
	font-size: 17px;
	margin: 0;
	padding: 0;
	text-underline-offset: 15%;
	text-decoration-thickness: 1px;
	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}

.nojq,
.hidden-fields-container {
	display: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 700;
}

h1 {
	font-size: 60px;
}

h2 {
	font-size: 18px;
}

h3 {  
	font-size: 26px;  
}

h4 {  
	font-size: 22px;  
}

h5 {  
	font-size: 20px;  
}

h6 {  
	font-size: 18px;  
}

b {
	font-weight: 700;
}

hr {
	border: none;
	height: 1px;
	width: 100%;
	background-color: var(--black);
}

img {
	display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

:root {
    --brand-green      : #1E4B3C;
    --brand-green-light: #f4f8f5;
    --brand-green-mid  : #c5d8cc;
    --text-dark        : #1a1a1a;
    --text-mid         : #555;
    --text-light       : #aaa;
    --border-light     : #e4e4e4;
    --page-bg          : #f0f0f0;
    --page-w    : 210mm;
    --page-h    : 297mm;
    --page-pad: 14mm 12mm;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Page wrapper ── */
.pages { padding: 84px 0 48px; }

/* ── A4 Page ── */
.page {
    width      : var(--page-w);
    height : var(--page-h);
    margin     : 0 auto 12px;
    background : #fff;
    position   : relative;
    overflow   : hidden;
    box-shadow : 0 2px 16px rgba(0,0,0,.12);
    display    : flex;
    flex-direction: column;
}

.cover-page { height: var(--page-h); }

.cover-page {
	.content-page {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 25mm 12mm 14mm;
	}
}

.header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;

	h1 {
		text-transform: capitalize;
		line-height: 100%;
	}

	.sustainability-text {
		display: flex;
		flex-direction: column;
		gap: 10px;
		max-width: 50%;

		span {
			font-size: 12px;
			text-transform: uppercase;
			font-variation-settings: 'wght' 400;
		}

		p {
			font-size: 16px;
			line-height: 19px;
			font-variation-settings: 'wght' 600;
		}
	}
}

.bottom {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 15mm;

	img {
		width: 100%;
		height: auto;
	}

	svg {
		display: block;
		height: auto;
		width: 160px;
	}
}

.cover-image img {
    width     : 100%;
    height    : 100%;
    object-fit: contain;
    display   : block;
}

.content-page {
	display: flex;
	flex-direction: column;
    padding   : var(--page-pad);
    flex-grow : 1;

	.section {
		display: flex;
		flex-direction: column;
		gap: 8px;
		font-size: 11px;
		line-height: 120%;
    	margin-bottom: 10px;

		span {
			font-size: 10px;
			text-transform: uppercase;
			font-weight: 700;
		}

		hr {
			height: 0.5px;
		}

		.principles {
			display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 6px 30px;
            padding-top: 2px;
            width: 90%;

			.principle {
				padding-bottom: 5px;
				border-bottom: 0.2px solid var(--black);

				&:last-of-type {
					border-bottom: none;
				}
			}
		}

		.flex-horizontal {
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.text {
				max-width: 60mm;
			}
		}

		.company-certificates {
			display: flex;
			flex-direction: row;
			gap: 10px;

			img {
				background-color: #F4F3F0;
                padding: 20px;
                width: 150px;
                object-fit: contain;
			}
		}

		.percentage-bar {
			display: flex;
			flex-direction: row;
			width: 60%;
			position: relative;
			height: 30px;
			margin-bottom: 30px;
			background-color: #F4F3F0;

			.bar {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				text-align: right;
				position: absolute;
				left: 0;
				top: 0;

				&:nth-of-type(1) {
					z-index: 3;
				}
				
				&:nth-of-type(2) {
					z-index: 2;
				}

				&:nth-of-type(3) {
					z-index: 1;
				}

				span {
					height: 30px;
					width: 100%;
				}
				
				.text {
					font-size: 8px;
					line-height: 100%;
					
					.percentage {
						font-size: 20px;
						line-height: 120%;
						font-variation-settings: 'wght' 700;
						padding-top: 5px;
					}
				}

				&:nth-last-of-type(3) {
					width: 50%;
					color: #95A785;

					span {
						background-color: #95A785;
					}
				}

				&:nth-last-of-type(2) {
					width: 35%;
					color: #718360;

					span {
						background-color: #718360;
					}
				}

				&:nth-last-of-type(1) {
					width: 15%;
					color: #3F4B35;

					span {
						background-color: #3F4B35;
					}
				}
			}
		}

		.icons {
			display: flex;
			flex-direction: row;
			gap: 10px;
			width: 60%;

			.renewable,
			.co2 {
				width: 100%;
				display: flex;
				flex-direction: row;
				gap: 5px;
				align-items: flex-start;
				justify-content: space-between;
				padding: 25px;

				.text {
					display: flex;
					flex-direction: column;
					gap: 4px;
					font-variation-settings: 'wght' 700;

					.percentage {
						font-size: 24px;
					}
				}
			}

			.renewable {
				color: #C8A353;
				background-color: #F1E7C8;
			}

			.co2 {
				color: #616D76;
				background-color: #C8CDD0;
			}
		}

		.certificates {
			display: flex;
			flex-direction: row;
			gap: 10px;

			img {
				background-color: #F4F3F0;
				padding: 20px 40px;
				width: calc(100% / 3 - 7.5px);
				aspect-ratio: 4 / 3;
				object-fit: contain;
			}
		}

		.text-header {
			display: flex;
			flex-direction: column;
			gap: 2px;

			h2 {
				font-size: 13px;
				font-variation-settings: 'wght' 700;
			}

			h3 {
				font-size: 12px;
				font-variation-settings: 'wght' 500;
			}
		}

		.attributes {
			display: flex;
			flex-direction: row;
			gap: 10px;

			h3 {
				font-size: 10px;
				text-transform: uppercase;
				font-variation-settings: 'wght' 700;
			}

			.attributes-wrapper {
				display: flex;
				flex-direction: column;
				gap: 6px;

				span {
					font-size: 14px;
					font-variation-settings: 'wght' 500;
					border-bottom: 0.5px solid var(--black);
					padding-bottom: 6px;

					&:last-of-type {
						border-bottom: none;
					}
				}
			}
		}

		.product-variation {
			display: grid;
			grid-template-columns: repeat(12, 1fr);
			gap: 20px;

			hr,
			span {
				display: none;
			}

			.image-recicle {
				display: grid;
				grid-template-columns: repeat(9, 1fr);
				gap: 10px;
				grid-column: 1 / 6;

				img {
					grid-column: 1 / 5;
				}

				.percentages {
					grid-column: 5 / 10;
					display: flex;
					flex-direction: column;
					gap: 15px;

					.recycledContent,
					.renewableContent,
					.recyclableContent {
						display: flex;
						flex-direction: column;

						p {
							font-size: 8px;
							text-transform: uppercase;
							font-weight: 700;
							border-top: 0.5px solid var(--black);
							padding: 4px 0;
						}

						.percentageBar {
							width: 100%;
							background-color: var(--cream);
							height: 15px;
							align-self: end;

							.percentageIndicator {
								position: relative;
								height: 100%;

								.percentageNumber {
									width: fit-content;
									position: absolute;
									right: 5px;
									top: 53%;
									transform: translateY(-50%);
									font-weight: 700;
									color: var(--white);
									white-space: nowrap;

									&.lowNumber {
										left: calc(100% + 5px);
										color: var(--black);
									}
								}
							}
						}
					}

					.recycledContent {
						.percentageBar {
							.percentageIndicator {
								background-color: var(--new-green-100);
							}
						}
					}

					.renewableContent {
						.percentageBar {
							.percentageIndicator {
								background-color: var(--new-green-200);
							}
						}
					}

					.recyclableContent {
						.percentageBar {
							.percentageIndicator {
								background-color: var(--new-green-300);
							}
						}
					}
				}
			}

			.material-content {
				display: grid;
				grid-template-columns: repeat(9, 1fr);
				gap: 20px;
				grid-column: 6 / 13;
				
				.graph {
					grid-column: 1 / 4;
					svg {
						display: block;
						width: 100%;
						height: auto;
					}
				}

				.material-list {
					grid-column: 4 / 10;
					display: flex;
					flex-direction: column;
					font-weight: 400;
					font-size: 10px;

					.singleMaterial {
						display: grid;
						grid-template-columns: repeat(15, 1fr);
						align-items: center;
						border-bottom: 0.5px solid var(--black);
						padding: 4px 0;

						.color {
							width: 8px;
							aspect-ratio: 1;
							border-radius: 50px;
						}

						.material {
							grid-column: 2 / 11;
						}

						.weight {
							grid-column: 11 / 13;
                            text-align: right;
						}

						.percentage {
							grid-column: 13 / 16;
							justify-self: end;
						}
					}
				}
			}
		}

		&.single {
			.product-variation {
				grid-template-columns: repeat(1, 1fr);
				
				hr,
				span {
					display: block;
				}

				.image-recicle {
					width: 100%;
					align-items: center;
					grid-column: 1;

					img {
						width: 70%;
    					justify-self: center;
					}

					.percentageBar {
						height: 25px !important;

						.percentageNumber {
							font-size: 15px;
						}
					}
				}

				.material-content {
					align-items: center;
					grid-column: 1;

					.graph {
						grid-column: 1 / 5;
						width: 65%;
                    	justify-self: center;
					}
					.material-list {
						grid-column: 5 / 10;
					}
				}
			}
		}
	}

	.emissions-certifications {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 50px;

		.emissions {
			grid-column: 1 / 3;

			.carbon-footprint {
				width: 50%;
				align-self: flex-end;
				padding: 20px 0;
				display: flex;
				flex-direction: column;
				gap: 10px;

				.carbon-item {
					display: flex;
					flex-direction: column;
					gap: 5px;
					font-weight: 700;

					p {
						text-transform: uppercase;
						font-size: 10px;
					}

					.carbon-value {
						font-size: 18px;
					}
				}
			}
		}

		.certificates {
			grid-column: 3 / 6;

			.certifications {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 5px;

				.certification {
					background-color: #F4F3F0;
					padding: 20px;
					width: 100%;
					object-fit: contain;
					display: flex;
					align-items: center;
					justify-content: center;					

					svg {
						display: block;
						max-width: 80%;
						max-height: 80%;
					}
				}
			}
		}

		/* &:has(.emissions):not(:has( .certificates)),
		&:has(.certificates):not(:has( .emissions)) {
			grid-template-columns: 1fr;

			.emissions,
			.certificates {
				grid-column: auto;
			}
		} */

		&.single {
			grid-template-columns: repeat(1, 1fr);
			gap: 10px;

			.emissions,
			.certificates {
				grid-column: auto;
				display: grid;
				grid-template-columns: repeat(9, 1fr);
				gap: 8px 20px;

				hr {
					grid-column: 1 / 10;
				}

				span {
					grid-column: 1 / 5;
				}

				.carbon-footprint {
					grid-column: 5 / 10;
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					width: 100%;
				}

				.certifications {
					grid-column: 5 / 10;
				}
			}
		}
	}

	.disclaimer {
		font-size: 8px;
		line-height: 120%;
		margin-top: 10px;
	}
}

/* Inner page header */
.page-header {
    display       : flex;
    justify-content: space-between;
    align-items   : flex-end;
    padding-bottom: 40px;
}

.page-header-left {
	display: flex;
	flex-direction:row;
	align-items: flex-end;
	gap: 10px;

	.page-header-product {
		font-size  : 35px;
		line-height: 90%;
		font-variation-settings: 'wght' 700;
	}

	.page-header-badge {
		font-size     : 14px;
	}
}

.page-footer {
	position: absolute;
    bottom: 12mm;
    left: 12mm;
    right: 12mm;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
	gap: 15px;

	hr {
		height: 0.5px;
	}

	span {
		font-size: 11px;
	}
}

/* Sections */
.section-title {
    font-size     : 9px;
    font-weight   : 700;
    text-transform: uppercase;
    color         : var(--brand-green);
    border-bottom : 1px solid var(--brand-green-mid);
    padding-bottom: 4px;
    margin-bottom : 12px;
}

/* Page break helper */
.page-break { page-break-before: always; break-before: page; }

/* ── Percentage bars ── */
.bar-row {
    display    : flex;
    align-items: center;
    gap        : 10px;
    margin-bottom: 8px;
}
.bar-label {
    width    : 140px;
    font-size: 10px;
    color    : var(--text-mid);
    flex-shrink: 0;
}
.bar-track {
    flex         : 1;
    height       : 7px;
    background   : #e8ede9;
    border-radius: 4px;
    overflow     : hidden;
}
.bar-fill {
    height       : 100%;
    background   : var(--brand-green);
    border-radius: 4px;
}
.bar-value {
    width     : 38px;
    text-align: right;
    font-size : 10px;
    font-weight: 600;
    color     : var(--brand-green);
    flex-shrink: 0;
}

/* ── Material chart ── */
.material-layout {
    display    : flex;
    gap        : 20px;
    align-items: flex-start;
}
.pie-wrap { flex-shrink: 0; }
.pie-svg  { display: block; }

.mat-table {
    width          : 100%;
    border-collapse: collapse;
    font-size      : 10px;
}
.mat-table th {
    text-align   : left;
    font-weight  : 600;
    color        : #888;
    border-bottom: 1px solid var(--border-light);
    padding      : 3px 6px;
    font-size    : 9px;
    text-transform: uppercase;
}
.mat-table td {
    padding      : 4px 6px;
    border-bottom: 1px solid #f4f4f4;
    vertical-align: middle;
}
.mat-dot {
    display      : inline-block;
    width        : 9px;
    height       : 9px;
    border-radius: 50%;
    vertical-align: middle;
}

/* ── CO2 boxes ── */
.co2-grid {
    display  : flex;
    gap      : 12px;
    flex-wrap: wrap;
}
.co2-box {
    background   : var(--brand-green-light);
    border       : 1px solid var(--brand-green-mid);
    border-radius: 6px;
    padding      : 12px 24px;
    text-align   : center;
    min-width    : 110px;
}
.co2-label {
    font-size     : 9px;
    text-transform: uppercase;
    color         : #888;
    margin-bottom : 4px;
}
.co2-value {
    font-size  : 16px;
    font-weight: 700;
    color      : var(--brand-green);
}

/* ── Certifications ── */
.cert-grid {
    display    : flex;
    flex-wrap  : wrap;
    gap        : 16px;
    align-items: center;
}
.cert-img {
    height    : 48px;
    width     : auto;
    object-fit: contain;
}

/* ── End of life ── */
.endoflife-text {
    font-size  : 10px;
    color      : var(--text-mid);
    line-height: 1.7;
}

/* ══════════════════════════════════════════════
   PRINT STYLES
   These override everything when printing / saving as PDF
══════════════════════════════════════════════ */
@page {
    size  : A4 portrait;
    margin: 0;
}

@media print {
    html, body { background: #fff !important; }

    .toolbar { display: none !important; }
    .pages   { padding: 0; }

    .page {
        box-shadow: none !important;
        margin    : 0 !important;
        page-break-after: always;
        break-after: page;
    }
    .page:last-child {
        page-break-after: avoid;
        break-after: avoid;
    }

    /* Force colours to print */
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

    .cover-overlay,
    .bar-fill,
    .co2-box,
    .mat-dot,
    .pie-svg path { print-color-adjust: exact !important; }
}

.toolbar {
    position   : fixed;
    top        : 0;
	left: 0;
	right: 0;
    z-index    : 100;
    background : var(--brand-green);
    color      : #fff;
    display    : flex;
    align-items: center;
    justify-content: space-between;
    padding    : 12px 24px;
    gap        : 12px;
    box-shadow : 0 2px 8px rgba(0,0,0,.2);
}
.toolbar svg {
	display: block;
	width: 133px;
}
.toolbar .toolbar-title {
	display: flex;
	flex-direction: column;
	width: var(--page-w);
}
.toolbar h1 {
    font-size  : 13px;
    font-weight: 600;
    letter-spacing: .5px;
}
.toolbar .product-name {
    font-size  : 11px;
    opacity    : .7;
    margin-top : 2px;
}
.btn-print {
    background : #fff;
    color      : var(--brand-green);
    border     : none;
    border-radius: 4px;
    padding    : 8px 20px;
    font-size  : 11px;
    font-weight: 700;
    cursor     : pointer;
    letter-spacing: .5px;
    flex-shrink: 0;
}
.btn-print:hover { background: #e8ede9; }