/* =====================================================================
   Technical data sheet — document view (A4) and shared data components
   ===================================================================== */

/* ---------- Shared components (product page + document) ---------- */
.tdc-ico { width: 1.6em; height: 1.6em; flex: none; }
.tdc { border: 1px solid var(--tdc-line, #E4DED4); border-radius: .4em; padding: 1.1em 1.2em 1.2em; background: #fff; }
.tdc-title { font-family: "Manrope", system-ui, sans-serif; font-size: .74em; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tdc-muted, #6A6E75); margin: 0 0 1em; }

/* key figures */
.tdc-glance { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(7.6em, 1fr)); border: 1px solid var(--tdc-line, #E4DED4); border-radius: .4em; overflow: hidden; background: #fff; }
.tdc-tile { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .7em; align-items: center; padding: .95em 1em; border-right: 1px solid var(--tdc-line, #E4DED4); }
.tdc-tile:last-child { border-right: 0; }
.tdc-tile .tdc-ico { grid-row: 1 / 3; color: var(--acc-ink, #8A4A1C); width: 1.7em; height: 1.7em; }
.tdc-tile-label { font-size: .7em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tdc-muted, #6A6E75); }
.tdc-tile-value { font-weight: 700; font-size: .98em; line-height: 1.25; color: var(--tdc-ink, #15171B); }

/* sheen meter */
.tdc-gloss-bar {
	position: relative; height: .9em; border-radius: .45em; margin: 2.3em 0 .7em;
	background:
		repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), rgba(21, 23, 27, .18) calc(20% - 1px) 20%),
		linear-gradient(90deg, #BDB6AB 0%, #D3CDC4 30%, #E8E4DD 60%, #F7F5F1 82%, #FFFFFF 100%);
	box-shadow: inset 0 0 0 1px rgba(21, 23, 27, .08), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.tdc-gloss-bar::after { content: ""; position: absolute; left: 62%; right: 3%; top: 2px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95)); }
.tdc-gloss-pin { position: absolute; top: -.45em; bottom: -.45em; width: 2px; margin-left: -1px; background: var(--tdc-ink, #15171B); }
.tdc-gloss-pin b { position: absolute; bottom: calc(100% + .35em); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .76em; font-weight: 700; background: var(--tdc-ink, #15171B); color: #fff; padding: .25em .6em; border-radius: .3em; }
.tdc-gloss-scale { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); font-size: .72em; color: var(--tdc-muted, #6A6E75); text-align: center; }
.tdc-gloss-scale .is-on { color: var(--tdc-ink, #15171B); font-weight: 700; }

/* drying timeline */
.tdc-dry-svg { width: 100%; height: auto; display: block; overflow: visible; font-family: "Manrope", system-ui, sans-serif; }
.tdc-axis { stroke: #D6CFC4; stroke-width: 2; }
.tdc-tick { stroke: #BDB5A8; stroke-width: 1.5; }
.tdc-tick-label { font-size: 9.5px; fill: #7A7E85; font-weight: 600; }
.tdc-range { fill: var(--acc, #C8963E); opacity: .35; }
.tdc-dot { fill: var(--acc-ink, #8A4A1C); stroke: #fff; stroke-width: 2.5; }
.tdc-lead { stroke: var(--acc-ink, #8A4A1C); stroke-width: 1; stroke-dasharray: 2 3; opacity: .7; }
.tdc-stage { font-size: 11px; }
.tdc-stage-name { font-weight: 700; fill: #15171B; }
.tdc-stage-val { fill: #5E636B; font-weight: 500; }

/* application methods */
.tdc-methods ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .9em 1.1em; }
.tdc-methods li { display: flex; flex-direction: column; align-items: center; gap: .45em; font-size: .78em; font-weight: 600; min-width: 4.6em; }
.tdc-methods .tdc-ico { width: 3.3em; height: 3.3em; padding: .75em; border-radius: 50%; border: 1px solid var(--tdc-line, #E4DED4); }
.tdc-methods .is-on .tdc-ico { background: var(--acc-soft, #F6EFE6); border-color: var(--acc, #C8963E); color: var(--acc-ink, #8A4A1C); }
.tdc-methods .is-off { opacity: .32; }
.tdc-methods .is-off span { text-decoration: line-through; }

/* coverage */
.tdc-cov-big { font-family: "Manrope", system-ui, sans-serif; font-weight: 700; font-size: 2.5em; line-height: 1; margin: 0; color: var(--acc-ink, #8A4A1C); letter-spacing: -.03em; font-variant-numeric: lining-nums tabular-nums; }
.tdc-cov-big small { font-size: .36em; font-weight: 700; margin-left: .35em; color: var(--tdc-ink, #15171B); letter-spacing: 0; }
.tdc-cov-sub { font-size: .82em; color: var(--tdc-muted, #6A6E75); margin: .45em 0 1em; }
.tdc-cov-table { width: 100%; border-collapse: collapse; font-size: .86em; }
.tdc-cov-table th, .tdc-cov-table td { padding: .55em 0; border-top: 1px solid var(--tdc-line, #E4DED4); text-align: left; }
.tdc-cov-table th { font-weight: 600; }
.tdc-cov-table th .tdc-tin { vertical-align: -.2em; margin-right: .55em; }
.tdc-cov-table th em { font-style: normal; color: var(--tdc-muted, #6A6E75); font-weight: 500; }
.tdc-cov-table td { text-align: right; font-weight: 700; }

/* tins */
.tdc-tin { position: relative; display: inline-block; width: 1em; height: 1.2em; border-radius: .14em .14em .22em .22em; background: linear-gradient(90deg, #A9ADB4, #EEF0F2 38%, #C4C8CE 70%, #9EA3AA); flex: none; }
.tdc-tin::before { content: ""; position: absolute; left: 0; right: 0; top: 34%; bottom: 20%; background: var(--acc, #C8963E); }
.tdc-tin-drum { width: 1.35em; height: 1.6em; }
.tdc-tin-quarter, .tdc-tin-1l { width: .8em; height: .95em; }
.tdc-packs ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.4em; align-items: flex-end; }
.tdc-packs li { display: grid; justify-items: center; gap: .3em; font-size: .85em; }
.tdc-packs li .tdc-tin { font-size: 1.8em; }
.tdc-packs em { font-style: normal; color: var(--tdc-muted, #6A6E75); font-size: .9em; }

/* recommended system */
.tdc-system ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6em; counter-reset: s; }
.tdc-system li { position: relative; display: flex; align-items: center; gap: .7em; flex: 1 1 12em; padding: .7em .9em; border: 1px solid var(--tdc-line, #E4DED4); border-radius: .4em; background: #fff; }
.tdc-system li.is-self { border-color: var(--acc, #C8963E); background: var(--acc-soft, #F6EFE6); }
.tdc-system img { width: 2.8em; height: 2.8em; object-fit: contain; flex: none; }
.tdc-step-no { width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .8em; background: var(--tdc-ink, #15171B); color: #fff; flex: none; }
.tdc-system .is-self .tdc-step-no { background: var(--acc-ink, #8A4A1C); }
.tdc-step-text { display: grid; line-height: 1.3; }
.tdc-step-text b { font-size: .88em; }
.tdc-step-text b a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.tdc-step-text small { font-size: .76em; color: var(--tdc-muted, #6A6E75); }

/* safety */
.tdc-safety { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .8em; }
.tdc-safety li { display: flex; align-items: center; gap: .7em; font-size: .8em; font-weight: 600; line-height: 1.3; }
.tdc-safety .tdc-ico { width: 2.9em; height: 2.9em; padding: .6em; border-radius: 50%; background: #F3F0EA; color: var(--tdc-ink, #15171B); }

@media (max-width: 640px) {
	.tdc-safety { grid-template-columns: 1fr 1fr; }
	.tdc-tile { border-right: 0; border-bottom: 1px solid var(--tdc-line, #E4DED4); }
}

/* =====================================================================
   Document view
   ===================================================================== */
body.ds-view {
	margin: 0; background: #CFCAC2; color: #15171B;
	font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased;
	-webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.ds-view *, .ds-view *::before, .ds-view *::after { box-sizing: border-box; }
.ds-view img { max-width: 100%; display: block; }

.ds-toolbar {
	position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 16px; padding: 12px 20px;
	background: rgba(21, 23, 27, .92); color: #fff; backdrop-filter: blur(10px); font-size: 14px;
}
.ds-back { color: #fff; text-decoration: none; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-hint { margin-left: auto; color: #B9BDC6; font-size: 13px; }
.ds-print { display: inline-flex; align-items: center; gap: 8px; border: 0; background: #fff; color: #15171B; font: inherit; font-weight: 700; padding: 11px 18px; border-radius: 3px; cursor: pointer; }
.ds-print .tdc-ico { transform: rotate(90deg); width: 18px; height: 18px; }
@media (max-width: 700px) { .ds-hint { display: none; } .ds-print { margin-left: auto; } }

.ds-doc {
	--tdc-line: #E4DED4; --tdc-muted: #5E636B; --tdc-ink: #15171B;
	display: grid; justify-content: center; gap: 28px; padding: 32px 12px 64px; font-size: 9pt;
}
.sheet {
	position: relative; width: 210mm; height: 297mm; background: #fff; overflow: hidden;
	display: flex; flex-direction: column; box-shadow: 0 2px 6px rgba(0, 0, 0, .08), 0 24px 60px rgba(0, 0, 0, .18);
}

.ds-eyebrow { display: block; font-size: 6.8pt; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.ds-logo { height: 12mm; width: auto; }
.ds-logo.brand-logo-text { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 20pt; letter-spacing: .06em; height: auto; }

/* ---------- Cover band ---------- */
.ds-band {
	position: relative; height: 97mm; padding: 10mm 14mm 0; color: #fff; overflow: hidden; flex: none; display: flex; flex-direction: column;
	background:
		radial-gradient(60mm 60mm at 76% 60%, color-mix(in srgb, var(--acc) 62%, transparent) 0%, transparent 70%),
		radial-gradient(120mm 90mm at 100% 0%, rgba(255, 255, 255, .07), transparent 70%),
		linear-gradient(140deg, #1C2537 0%, #121823 60%, #0E131C 100%);
}
.ds-stroke { position: absolute; inset: 0; width: 100%; height: 100%; }
.ds-stroke path { fill: none; stroke: var(--acc); stroke-width: 46; stroke-linecap: round; opacity: .2; }
.ds-stroke .ds-stroke-2 { stroke-width: 22; opacity: .12; }
.ds-band-top { position: relative; display: flex; justify-content: space-between; align-items: flex-start; }
.ds-band-logo .ds-logo { height: 13mm; }
.ds-band-logo .brand-logo-text { color: #fff; }
.ds-band-meta { text-align: right; font-size: 7pt; color: rgba(255, 255, 255, .62); line-height: 1.7; }
.ds-band-meta .ds-eyebrow { color: #fff; font-size: 7.5pt; }
.ds-band-main { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: 1.12fr .88fr; gap: 6mm; align-items: end; padding-bottom: 7.5mm; }
.ds-kicker { font-size: 7pt; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: color-mix(in srgb, var(--acc) 45%, #fff); margin: 0 0 3mm; }
.ds-title { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 31pt; line-height: .98; letter-spacing: -.005em; margin: 0 0 3.5mm; }
.ds-tagline { font-size: 10pt; line-height: 1.5; color: rgba(255, 255, 255, .8); margin: 0 0 5mm; max-width: 88mm; }
.ds-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 2mm; margin: 0; padding: 0; }
.ds-tags li { font-size: 6.8pt; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 1.6mm 3mm; border: 1px solid rgba(255, 255, 255, .32); border-radius: 1mm; }
.ds-tags li:first-child { background: #fff; color: #15171B; border-color: #fff; }
.ds-hero { position: relative; height: 70mm; margin-bottom: -5.5mm; display: grid; place-items: end center; }
.ds-hero img { position: relative; height: 68mm; width: 100%; object-fit: contain; object-position: 50% 100%; scale: var(--ph, 1); transform-origin: 50% 100%; filter: drop-shadow(0 6mm 6mm rgba(0, 0, 0, .45)); }
.ds-hero-glow { position: absolute; left: 50%; bottom: 3mm; width: 64mm; height: 8mm; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); }
.ds-rule { position: absolute; left: 0; right: 0; bottom: 0; height: 1.6mm; }
.ds-rule-wallman { background: linear-gradient(90deg, #E53935, #F57C00 20%, #FBC02D 40%, #43A047 60%, #1E88E5 80%, #5E35B1); }
.ds-rule-whale { background: linear-gradient(90deg, #A6CE38, #2E9BD6); }
.ds-rule-pacs { background: linear-gradient(90deg, #E8611A, #A6CE38); }
.ds-rule-ironwall { background: linear-gradient(90deg, #1FA36A, #F2C12E 35%, #E4572E 65%, #7A3FB0); }

/* ---------- Body ---------- */
.ds-body { flex: 1; padding: 6.5mm 14mm 0; display: flex; flex-direction: column; min-height: 0; }
.ds-body > * { flex-shrink: 0; }
.ds-body-inner { padding-top: 5mm; }
.ds-body .tdc-glance { font-size: 8.4pt; }
.ds-h {
	display: flex; align-items: baseline; gap: 3mm; margin: 5mm 0 2.6mm; padding-top: 2.4mm; border-top: 1px solid #15171B;
	font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 15.5pt; line-height: 1.1;
}
.ds-h span { font-family: "Manrope", system-ui, sans-serif; font-size: 7pt; font-weight: 700; letter-spacing: .12em; color: var(--acc-ink); }
.ds-h3 { font-size: 7pt; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #5E636B; margin: 4mm 0 2mm; }
.ds-text { font-size: 9pt; line-height: 1.6; color: #2A2D33; }
.ds-text p { margin: 0 0 2mm; }
.ds-cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: 8mm; align-items: start; }
.ds-cols-even { grid-template-columns: 1fr 1fr; }
.ds-panel { background: #F6F3EE; border-radius: 1.2mm; padding: 0 5mm 4.5mm; }
.ds-panel .ds-h { border-top: 0; }
.ds-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.6mm; }
.ds-chips li { font-size: 7.6pt; font-weight: 600; padding: 1.3mm 2.6mm; border: 1px solid #DAD3C8; border-radius: 1mm; }
.ds-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.3mm; }
.ds-ticks li { display: flex; gap: 2.5mm; align-items: flex-start; font-size: 8.8pt; font-weight: 600; line-height: 1.4; }
.ds-ticks .tdc-ico { width: 4.4mm; height: 4.4mm; padding: .8mm; border-radius: 50%; background: var(--acc); color: var(--acc-on); stroke-width: 3; margin-top: .2mm; }

.ds-perf { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; font-size: 8.6pt; }
.ds-perf-wide { grid-column: 1 / -1; }
.ds-perf-wide .tdc { padding-bottom: .6em; }
.ds-perf > .tdc:only-child, .ds-perf > .tdc:nth-child(2):last-child { grid-column: 1 / -1; }

/* ---------- Page 2 ---------- */
.ds-strip { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 7mm; padding: 8mm 14mm 4mm; border-bottom: 1px solid #E4DED4; flex: none; }
.ds-strip .ds-logo { height: 9mm; }
.ds-strip-title strong { display: block; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 15pt; line-height: 1.1; margin-top: .6mm; }
.ds-strip-title .ds-eyebrow { color: var(--acc-ink); }
.ds-strip-code { display: flex; align-items: center; gap: 3.5mm; text-align: right; font-size: 6.6pt; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #5E636B; line-height: 1.7; }
.ds-strip-code em { font-style: normal; color: #9A9EA5; letter-spacing: .08em; }
.ds-strip .ds-qr { width: 14mm; height: 14mm; }
.ds-body-inner > .ds-split > div > .ds-h:first-child, .ds-body-inner > .ds-shade-head .ds-h { margin-top: 0; }
.ds-split { display: grid; grid-template-columns: 1.3fr 1fr; gap: 7mm; align-items: start; }
.ds-table { width: 100%; border-collapse: collapse; font-size: 8.3pt; }
.ds-table th, .ds-table td { text-align: left; vertical-align: top; padding: 1.4mm 0; border-bottom: 1px solid #ECE7DF; line-height: 1.35; }
.ds-table th { width: 42%; font-weight: 500; color: #5E636B; padding-right: 3mm; }
.ds-table td { font-weight: 700; }
.ds-table tr:first-child th, .ds-table tr:first-child td { border-top: 1px solid #ECE7DF; }
.ds-note { font-size: 6.9pt; line-height: 1.5; color: #7A7E85; margin: 2mm 0 0; }
.ds-side { display: grid; gap: 3.5mm; font-size: 8.4pt; padding-top: 9mm; }
.ds-side .tdc-system { background: #F6F3EE; border-color: transparent; }
.ds-side .tdc-system ol { flex-direction: column; gap: 2mm; }
.ds-side .tdc-system li { flex: none; padding: 2mm 2.6mm; }
.ds-side .tdc-system img { width: 9mm; height: 9mm; }
.ds-qr-card { display: flex; gap: 4mm; align-items: center; background: #F6F3EE; border-color: transparent; margin-top: 4mm; font-size: 8.4pt; }
.ds-qr { width: 21mm; height: 21mm; flex: none; }
.ds-qr svg, .ds-qr img { width: 100%; height: 100%; }
.ds-qr-card p { margin: 0; font-size: 7.6pt; line-height: 1.45; color: #5E636B; }
.ds-qr-card b { display: block; color: #15171B; font-size: 8.4pt; margin-bottom: .6mm; }
.ds-steps ol { margin: 0; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 2mm; }
.ds-steps li { counter-increment: st; position: relative; padding-left: 7.5mm; font-size: 8.3pt; line-height: 1.48; color: #2A2D33; }
.ds-steps li::before { content: counter(st); position: absolute; left: 0; top: .1mm; width: 4.8mm; height: 4.8mm; border-radius: 50%; background: #15171B; color: #fff; font-size: 6.6pt; font-weight: 700; display: grid; place-items: center; }
.ds-steps .ds-h3 { margin-top: 0; }
.ds-body .tdc-safety { font-size: 8.6pt; }
.ds-storage { font-size: 8pt; margin: 3mm 0 0; color: #3D4047; }
.ds-disclaimer { margin-top: auto; padding: 4mm 0 3mm; font-size: 6.6pt; line-height: 1.5; color: #8A8E95; }

/* ---------- Shade page ---------- */
.ds-shade-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 6mm; }
.ds-shade-head p { font-size: 8.4pt; color: #5E636B; margin: 0 0 3mm; }
.ds-shades { list-style: none; margin: 1mm 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols, 7), 1fr); gap: 4.2mm 3.2mm; }
.ds-shades li { display: grid; gap: 1.4mm; }
.ds-chip { display: block; height: var(--chip, 21mm); border-radius: 1mm; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); }
.ds-shade-name { font-size: 7.6pt; font-weight: 600; line-height: 1.25; }
.ds-shade-code { display: block; font-size: 7pt; font-weight: 700; color: #666; }
.ds-shades + .ds-note { margin-top: 5mm; }

/* ---------- Footer ---------- */
.ds-foot {
	flex: none; display: grid; grid-template-columns: 1.3fr 1fr 1fr auto; gap: 5mm; align-items: center;
	margin: 0 14mm; padding: 3.6mm 0 6mm; border-top: 1px solid #15171B; font-size: 6.6pt; line-height: 1.45; color: #5E636B;
}
.ds-foot-brand { display: flex; align-items: center; gap: 3mm; white-space: nowrap; }
.ds-foot-mark { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 14pt; letter-spacing: .08em; color: #15171B; }
.ds-foot-iso { display: flex; align-items: center; gap: 2mm; }
.ds-foot-iso .tdc-ico { width: 5mm; height: 5mm; color: #15171B; }
.ds-foot-contact { display: grid; }
.ds-foot-page { text-align: right; display: grid; justify-items: end; }
.ds-foot-page b { font-size: 10pt; font-weight: 700; color: #15171B; letter-spacing: .06em; font-variant-numeric: tabular-nums; }

/* ---------- Print ---------- */
@page { size: A4; margin: 0; }
@media print {
	body.ds-view { background: #fff; }
	.ds-toolbar, #wpadminbar { display: none !important; }
	.ds-doc { display: block; padding: 0; gap: 0; zoom: 1 !important; }
	.sheet { box-shadow: none; break-after: page; page-break-after: always; }
	.sheet:last-child { break-after: auto; page-break-after: auto; }
}

.ds-text pre, .ds-text code { font: inherit; white-space: normal; overflow-wrap: anywhere; background: none; padding: 0; margin: 0 0 .8em; }