/* Product Spec template based on Osterlene_green.html */
@font-face {
    font-family: 'Roboto Condensed';
    src: url('../font/RobotoCondensed-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url('../font/RobotoCondensed-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

:root {
    --spec-font-family-base: 'Roboto Condensed', Arial, Helvetica, sans-serif;
    --spec-font-size-print-btn: 15px;
    --spec-font-size-metric-pill: 16px;
    --spec-font-size-category: 27px;
    --spec-font-size-product-code: 18px;
    --spec-font-size-header-metrics: 13.5px;
    --spec-font-size-header-right: 16.5px;
    --spec-font-size-intro: 13.5px;
    --spec-font-size-block-title: 25px;
    --spec-font-size-table-head: 15px;
    --spec-font-size-table-body: 13.5px;
    --spec-font-size-footnote: 9px;
    --spec-font-size-footer-meta: 12px;
    --spec-font-size-rev: 9px;
    --spec-font-size-footer-legal: 6.5px;

    --spec-green: #1aae48;
    --spec-text: #231f20;
    --spec-muted: #838a8f;
    --spec-border: #d9d9d9;
    --spec-white: #fff;
}

* {
    box-sizing: border-box;
}

body.product-spec-body {
    margin: 0;
    padding: 0;
    background: #9e9e9e;
    color: var(--spec-text);
    font-family: var(--spec-font-family-base);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.spec-toolbar {
    text-align: center;
    padding: 16px;
}

.spec-print-btn {
    background: var(--spec-green);
    color: #fff;
    border: 0;
    border-radius: 4px;
    padding: 10px 18px;
    font-size: var(--spec-font-size-print-btn);
    cursor: pointer;
}

.spec-page {
    width: 918px;
    min-height: 1188px;
    margin: 12px auto;
    padding: 36px 40px 30px;
    box-shadow: 1px 1px 3px 1px #333;
    display: flex;
    flex-direction: column;
    background: url(../img/icon-osterman-gray.svg) #fff bottom right no-repeat;
    background-size: 62%;
}

.spec-header {
    margin-bottom: 10px;
}

.spec-header-diagram {
    display: grid;
    grid-template-columns: 340px 1fr 260px;
    align-items: end;
    column-gap: 14px;
    margin-bottom: 18px;
}

.spec-diagram-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width:262px;
    padding-bottom: 18px;
}

.spec-logo-wrap {
    width: 100%;
}

.spec-logo {
    width: 100%;
    max-width: 280px;
    height: auto;
    display: block;
}

.spec-green-pill {
    height: 28px;
    border-radius: 999px;
    background: var(--spec-green);
    text-align: center;
    padding-top: 4px;
    font-weight: bold;
    color: var(--spec-white);
    z-index: 1;
}

.spec-dashed-connector {
    position: relative;
    height: 66px;
}

.spec-dashed-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translate(-31%);
    border-top: 2px dotted #b6b6b6;
    width: 136%;
}

.spec-dashed-branch {
    position: absolute;
    right: 0;
    top: 10px;
    width: 24px;
    height: 46px;
    border: 2px dotted #b6b6b6;
    border-right: 0;
    border-radius: 8px 0 0 8px;
    background: transparent;
    transform: translate(13px, -1px);
}

.spec-metric-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.spec-metric-pill {
    height: 32px;
    border-radius: 12px;
    background: #c8c8c8;
    border: 1px solid #9f9f9f;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    font-size: var(--spec-font-size-metric-pill);
    color: #333;
}

.spec-metric-label {
    font-weight: 700;
}

.spec-metric-value {
    font-weight: 500;
}

.spec-name-row {
    margin-bottom: 12px;
}

.spec-category {
    margin: 0;
    color: var(--spec-green);
    font-size: var(--spec-font-size-category);
    line-height: 1;
    letter-spacing: 0px;
    text-align: right;
}

.spec-product-code {
    margin: 10px 0 0;
    font-size: var(--spec-font-size-product-code);
    line-height: 1;
    color: #fff;
    text-shadow: 0 0 1px #000;
}

.spec-header-metrics {
    margin: 8px 0 0;
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    font-size: var(--spec-font-size-header-metrics);
    color: var(--spec-text);
    line-height: 1.2;
}

.spec-header-metrics span {
    display: inline-flex;
    gap: 4px;
}

.spec-header-right {
    margin-top: 8px;
    font-size: var(--spec-font-size-header-right);
    color: #a7a5a6;
    letter-spacing: 1px;
    text-transform: none;
}

.spec-intro {
    margin: 0 0 24px;
    color: var(--spec-muted);
    font-size: var(--spec-font-size-intro);
    line-height: 1.45;
    background: rgba(0, 0, 0, .06);
    padding: 1em;
    border-radius:1em;
}

.spec-intro p {
    margin: 0 0 8px;
}

.spec-block {
    margin: 0 0 14px;
}

.spec-block-title {
    margin: 0 0 8px;
    font-size: var(--spec-font-size-block-title);
    line-height: 1;
    color: #8f8f8f;
    font-weight: 700;
    line-height: 1;
    color: #8f8f8f;
    font-weight: 700;
    text-align: center;
    
}

.spec-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    border: 1px solid #d9d9d9;
    border-radius: 0 0 26px 26px;
    overflow: hidden;
}

.spec-table thead th {
    background: var(--spec-green);
    color: #fff;
    text-align: left;
    font-size: var(--spec-font-size-table-head);
    font-weight: 700;
    padding: 6px 12px;
    border: 1px solid var(--spec-green);
}

.spec-table tbody td {
    padding: 6px 12px;
    font-size: var(--spec-font-size-table-body);
    border-bottom: 1px solid var(--spec-border);
    vertical-align: top;
}



/* Section title row — full-width bold header within properties table */
.spec-table .spec-section-title {
    font-weight: bold;
    background: #f5f5f5;
    padding: 6px 12px;
}

/* Indented property — title row (regular property, no border) */
.spec-table .spec-indented-group-row td {
    border-bottom: none;
}

/* Indented property — sub-property rows (indented, no border) */
.spec-table .spec-indented-sub td {
    border-bottom: none;
    padding-left: 25px;
}

/* Add bottom border ONLY to the last sub-property in the group */
.spec-table .spec-indented-sub.spec-indented-sub-last td {
    border-bottom: 1px solid var(--spec-border);
}

/* Restore normal padding on non-first cells of indented sub-rows */
.spec-table .spec-indented-sub td:nth-child(n+2) {
    padding-left: 12px;
}

.spec-footnote {
    margin: 6px 0 0;
    color: #000;
    font-size: var(--spec-font-size-footnote);
    line-height: 1.35;
}

.variant-table thead th,
.variant-table tbody td {
    text-align: left;
}

.spec-footer {
margin-top: auto;
    border-top: 1px dotted #b6b6b6;
    padding-top: 16px;
    display: flex;
    gap: 24px;
    flex-direction: row;
    flex-wrap: wrap;
}

.spec-footer-meta {
    width: 21%;
    font-size: var(--spec-font-size-footer-meta);
    line-height: 1.35;
    border-right:1px dotted #b6b6b6;
}

.spec-rev {
    margin: 0 0 8px;
    font-size: var(--spec-font-size-rev);
    font-weight: 700;
    text-align: right;
}

.spec-footer-meta p {
    margin: 0;
}

.spec-footer-legal {
    width: 55%;
    font-size: var(--spec-font-size-footer-legal);
    line-height: 1.4;
    text-align: justify;
    letter-spacing: -0.1px;
}

.spec-footer-legal p {
    margin: 0 0 2px;
}

/* Two-page layout — page 2 screen styles */
.spec-page-2 {
    page-break-before: always;
    margin-top: 40px;
}

@media print {
    @page {
        size: 918px 1188px;
        margin: 0;
    }

    body.product-spec-body {
        background: #fff;
    }

    .no-print {
        display: none !important;
    }

    .spec-page {
        width: 918px;
        min-height: 1188px;
        margin: 0;
        box-shadow: none;
        padding: 36px 40px 30px;
    }

    .spec-page-2 {
        page-break-before: always;
        margin-top: 0;
    }

    .spec-header-diagram {
        grid-template-columns: 300px 1fr 240px;
    }
}

table.spec-table.rainbow-header thead th {
    background: none;
    border:none;
}



table.spec-table.rainbow-header thead {
    background:linear-gradient(        to right,         /* First Sequence */        #92d050, #00b050, #0070c0, #7030a0, #c000c0, #ff0000, #ffc000    );
}
.category-description {
    color: var(--spec-muted);
    text-align: right;
    letter-spacing: 2px;
}
section.spec-intro p {
    padding-left: 20px;
    position: relative;
	color: black;
}

section.spec-intro p:before {
    content: '';
    width: 10px;
    height: 10px;
    border-bottom: 1px solid #000000;
    position: absolute;
    border-left: 1px solid #000000;
    border-top: 2px solid #000000;
    border-right: 2px solid #000000;
    left: 0px;
    top: 3px;
    z-index: 2;
}

div.spec-footer-logo {
    width: 17%;
}

.spec-footer-logo img {
    max-width: 160px;
    width: 90%;
}

/* ===== Product Type Color Overrides ===== */

/* Polyetheylene / PE — #00AB4E */
body.product-type-pe h2.spec-category { color: #00AB4E; }
body.product-type-pe .spec-green-pill { background: #00AB4E; }
body.product-type-pe .spec-table:not(.rainbow-header, .rainbow-header-split) thead th { background: #00AB4E; border-color: #00AB4E; }
body.product-type-pe .spec-print-btn { background: #00AB4E; }

/* Polypropylene / PP — #ED1C24 */
body.product-type-pp h2.spec-category { color: #ED1C24; }
body.product-type-pp .spec-green-pill { background: #ED1C24; }
body.product-type-pp .spec-table:not(.rainbow-header) thead th { background: #ED1C24; border-color: #ED1C24; }
body.product-type-pp .spec-print-btn { background: #ED1C24; }

/* Polypropylene PIR / PIR — #607691 */
body.product-type-pir h2.spec-category { color: #607691; }
body.product-type-pir .spec-green-pill { background: #607691; }
body.product-type-pir .spec-table:not(.rainbow-header, .rainbow-header-split) thead th { background: #607691; border-color: #607691; }
body.product-type-pir .spec-print-btn { background: #607691; }

/* Polystyrene / PS — #1E84C6 */
body.product-type-ps h2.spec-category { color: #1E84C6; }
body.product-type-ps .spec-green-pill { background: #1E84C6; }
body.product-type-ps .spec-table:not(.rainbow-header, .rainbow-header-split) thead th { background: #1E84C6; border-color: #1E84C6; }
body.product-type-ps .spec-print-btn { background: #1E84C6; }

/* EPIMAX_ABS — #B0053A */
body.product-type-epimax_abs h2.spec-category { color: #B0053A; }
body.product-type-epimax_abs .spec-green-pill { background: #B0053A; }
body.product-type-epimax_abs .spec-table:not(.rainbow-header, .rainbow-header-split) thead th { background: #B0053A; border-color: #B0053A; }
body.product-type-epimax_abs .spec-print-btn { background: #B0053A; }

/* EPIMAX_PC — #B0053A */
body.product-type-epimax_pc h2.spec-category { color: #B0053A; }
body.product-type-epimax_pc .spec-green-pill { background: #B0053A; }
body.product-type-epimax_pc .spec-table:not(.rainbow-header, .rainbow-header-split) thead th { background: #B0053A; border-color: #B0053A; }
body.product-type-epimax_pc .spec-print-btn { background: #B0053A; }

/* EPITEC_PCABS — #005479 */
body.product-type-epitec_pcabs h2.spec-category { color: #005479; }
body.product-type-epitec_pcabs .spec-green-pill { background: #005479; }
body.product-type-epitec_pcabs .spec-table:not(.rainbow-header, .rainbow-header-split) thead th { background: #005479; border-color: #005479; }
body.product-type-epitec_pcabs .spec-print-btn { background: #005479; }

/* EPITEC_NYLON — #005479 */
body.product-type-epitec_nylon h2.spec-category { color: #005479; }
body.product-type-epitec_nylon .spec-green-pill { background: #005479; }
body.product-type-epitec_nylon .spec-table:not(.rainbow-header, .rainbow-header-split) thead th { background: #005479; border-color: #005479; }
body.product-type-epitec_nylon .spec-print-btn { background: #005479; }

/* ===== EPI Footer Tagline ===== */
.spec-footer-epi-tagline {
    margin: 4px 0 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--spec-muted);
    text-transform: uppercase;
}

.spec-footer-logo-img {
    max-width: 160px;
    width: 90%;
}

/* ===== EPI Header Layout ===== */
.spec-header-epi {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    padding-bottom: 12px;
}

.spec-epi-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 300px;
}

.spec-epi-left .spec-logo {
    max-width: 220px;
}

.spec-epi-tagline {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--spec-muted);
    letter-spacing: 0.5px;
}

.spec-epi-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    text-align: right;
}

.spec-epi-sheet-label {
    margin: 0;
    font-size: 14px;
    color: var(--spec-muted);
    letter-spacing: 1px;
}

.spec-epi-right .spec-green-pill {
    text-align: center;
    min-width: 200px;
    font-size: 24px;
    height: 36px;
}

.spec-epi-category-desc {
    margin: 0;
    font-size: 12px;
    color: var(--spec-muted);
    letter-spacing: 0.3px;
}

.spec-epi-divider {
    border-top: 2px dotted #b6b6b6;
    margin-bottom: 18px;
}

/* EPI abbreviation pill with dotted border above (positioned above footer) */
.spec-epi-abbr-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: auto;
    padding-top: 12px;
}

.spec-epi-abbr-border {
    border-top: 2px dotted #b6b6b6;
    width: 100%;
    margin-bottom: 8px;
}

.spec-epi-abbr-pill {
    height: 42px;
    border-radius: 999px;
    background: var(--spec-green);
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    min-width: 100px;
}
.spec-product-category-titles {
    margin-bottom: 40px;
}

/* Per-type color overrides for EPI abbreviation pill */
body.product-type-epimax_abs .spec-epi-abbr-pill { background: #B0053A; }
body.product-type-epimax_pc .spec-epi-abbr-pill { background: #B0053A; }
body.product-type-epitec_pcabs .spec-epi-abbr-pill { background: #005479; }
body.product-type-epitec_nylon .spec-epi-abbr-pill { background: #005479; }
p.spec-footnote {
    padding-left: 14px;
}

/* ===== Rainbow Header Split — gradient on individual th cells ===== */
/* Eliminates PDF rendering artifacts caused by thead-level gradient */
table.spec-table.rainbow-header-split thead {
    background: none;
}

table.spec-table.rainbow-header-split thead th {
    background-image: linear-gradient(to right, #92d050, #00b050, #0070c0, #7030a0, #c000c0, #ff0000, #ffc000);
    background-size: 400% 100%;
    border: none;
    border-right: 2px solid transparent;
}

table.spec-table.rainbow-header-split thead th:last-child {
    border-right: none;
}

/* Position each th's slice of the full gradient */
table.spec-table.rainbow-header-split thead th:nth-child(1) { background-position: 0% 0; border-right:1px solid #009087}
table.spec-table.rainbow-header-split thead th:nth-child(2) { background-position: 33.333% 0; }
table.spec-table.rainbow-header-split thead th:nth-child(3) { background-position: 66.666% 0; }
table.spec-table.rainbow-header-split thead th:nth-child(4) { background-position: 100% 0; }

/* Color internal borders to match the gradient at each boundary (25%, 50%, 75%) */
table.spec-table.rainbow-header-split thead th:nth-child(2) { border-left: 2px solid #009088;border-right: 2px solid #70309f; }
table.spec-table.rainbow-header-split thead th:nth-child(3) { border-left: 2px solid #702f9f; border-right: 1px solid #df0060;}
table.spec-table.rainbow-header-split thead th:nth-child(4) { border-left: 2px solid #e00160;}


/*  Flex version — widths are set dynamically by JS to match thead th widths  */
.rainbow-header-flex {
    background:linear-gradient(to right, #92d050, #00b050, #0070c0, #7030a0, #c000c0, #ff0000, #ffc000);
    border:1px solid #d9d9d9;
    color:#fff;
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    font-size: var(--spec-font-size-table-head);
    font-weight: 700;
    border-bottom:0;
    margin-bottom:-29px;
    overflow: hidden;
}

.rainbow-header-flex-cell {
    /* width/padding injected by JS; box-sizing already set inline */
    flex-shrink: 0;
}


table.spec-table.rainbow-header thead{
    opacity:0;
}