/* ========================================================================== */
/* EVERKLIN flagship task + product workspace color hierarchy                 */
/* Shared by food, solar and I&I flexi/category product hubs.                 */
/* ========================================================================== */

:root {
    --fw-olive: #8aa33a;
    --fw-olive-deep: #63792d;
    --fw-olive-dark: #465c25;
    --fw-lime: #dfe9b8;
    --fw-sage: #edf2dc;
    --fw-mint: #e4eee2;
    --fw-warm: #f5eedc;
    --fw-cream: #fbfaf4;
    --fw-white: #ffffff;
    --fw-ink: #22372a;
    --fw-muted: #5d6b61;
    --fw-line: #cbd6a9;
}

/* One framed workspace with a visible start-to-finish selection path. */
.fph .fph-category-tabs {
    border-color: var(--fw-line);
    border-radius: 7px 7px 0 0;
    background: var(--fw-cream);
    box-shadow: 0 12px 30px rgba(77, 94, 43, .08);
}

.fph .fph-category-tabs button {
    position: relative;
    isolation: isolate;
    border-right-color: rgba(151, 167, 102, .38);
    color: var(--fw-ink);
    transition: color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.fph .fph-category-tabs button:nth-child(6n + 1) { background: #edf3d8; }
.fph .fph-category-tabs button:nth-child(6n + 2) { background: #f7f0dc; }
.fph .fph-category-tabs button:nth-child(6n + 3) { background: #e4eee2; }
.fph .fph-category-tabs button:nth-child(6n + 4) { background: #f3eadf; }
.fph .fph-category-tabs button:nth-child(6n + 5) { background: #e9efd5; }
.fph .fph-category-tabs button:nth-child(6n + 6) { background: #f8f6e9; }

.fph .fph-category-tabs button > span {
    display: grid;
    place-items: center;
    flex: 0 0 27px;
    width: 27px;
    height: 27px;
    border: 1px solid rgba(99, 121, 45, .42);
    border-radius: 50%;
    background: rgba(255, 255, 255, .82);
    color: var(--fw-olive-deep);
    font-size: .62rem;
}

.fph .fph-category-tabs button:hover,
.fph .fph-category-tabs button:focus-visible {
    z-index: 1;
    background: var(--fw-lime);
    box-shadow: inset 0 -4px 0 var(--fw-olive);
    color: var(--fw-ink);
    outline: 0;
}

.fph .fph-category-tabs button.is-active,
.fph .fph-category-tabs button[aria-selected="true"] {
    z-index: 2;
    background: var(--fw-olive) !important;
    box-shadow: inset 0 -4px 0 var(--fw-olive-dark), 0 8px 18px rgba(89, 110, 40, .18) !important;
    color: var(--fw-white) !important;
}

.fph .fph-category-tabs button.is-active > span,
.fph .fph-category-tabs button[aria-selected="true"] > span {
    border-color: var(--fw-white);
    background: var(--fw-white);
    color: var(--fw-olive-deep);
}

.fph .fph-workspace {
    gap: 0;
    border: 1px solid var(--fw-line);
    border-top: 0;
    border-radius: 0 0 7px 7px;
    background: var(--fw-white);
    box-shadow: 0 18px 42px rgba(77, 94, 43, .1);
    overflow: hidden;
}

.fph .fph-selector,
.fph .fph-detail-shell {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.fph .fph-selector {
    border-right: 1px solid var(--fw-line);
    background: var(--fw-cream);
}

.fph .fph-selector__title {
    min-height: 70px;
    border-bottom-color: var(--fw-line);
    background: var(--fw-lime);
}

.fph .fph-selector__title span {
    color: var(--fw-ink);
}

.fph .fph-selector__title small {
    color: var(--fw-olive-dark);
}

.fph .fph-product-list {
    gap: 7px;
    padding: 10px;
    background: linear-gradient(180deg, rgba(237, 242, 220, .58), rgba(251, 250, 244, .9));
}

.fph .fph-product-card {
    position: relative;
    min-height: 94px;
    border: 1px solid var(--fw-line);
    border-left: 4px solid transparent;
    background: var(--fw-white);
    box-shadow: 0 4px 12px rgba(77, 94, 43, .05);
}

.fph .fph-product-card:nth-child(even) {
    background: #f7f8ef;
}

.fph .fph-product-card small {
    align-self: flex-start;
    width: fit-content;
    padding: 4px 7px;
    border-radius: 999px;
    background: var(--fw-sage);
    color: var(--fw-olive-dark);
}

.fph .fph-product-card:hover,
.fph .fph-product-card:focus-visible {
    border-color: var(--fw-olive);
    border-left-color: var(--fw-olive);
    background: #f0f5dc;
    box-shadow: 0 9px 20px rgba(77, 94, 43, .12);
    transform: translateX(2px);
}

.fph .fph-product-card.is-active,
.fph .fph-product-card[aria-current="true"] {
    border-color: var(--fw-olive);
    border-left-color: var(--fw-olive-dark);
    background: var(--fw-lime);
    box-shadow: 0 10px 22px rgba(77, 94, 43, .14);
}

.fph .fph-product-card.is-active small,
.fph .fph-product-card[aria-current="true"] small {
    background: var(--fw-olive-deep);
    color: var(--fw-white);
}

.fph .fph-detail-shell {
    background: var(--fw-white);
}

.fph .fph-category-brief,
.fph .fph-product-summary {
    position: relative;
    background: linear-gradient(135deg, var(--fw-white) 0 75%, var(--fw-sage) 75% 100%);
}

.fph .fph-category-brief::before,
.fph .fph-product-summary::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 5px;
    background: var(--fw-olive);
    content: "";
}

.fph .fph-category-facts div:nth-child(4n + 1),
.fph .fph-summary-facts div:nth-child(4n + 1),
.fph .fph-info-pairs article:nth-child(4n + 1),
.fph .fph-property-list div:nth-child(4n + 1) { background: #edf3d8; }

.fph .fph-category-facts div:nth-child(4n + 2),
.fph .fph-summary-facts div:nth-child(4n + 2),
.fph .fph-info-pairs article:nth-child(4n + 2),
.fph .fph-property-list div:nth-child(4n + 2) { background: #f7f0dc; }

.fph .fph-category-facts div:nth-child(4n + 3),
.fph .fph-summary-facts div:nth-child(4n + 3),
.fph .fph-info-pairs article:nth-child(4n + 3),
.fph .fph-property-list div:nth-child(4n + 3) { background: #e4eee2; }

.fph .fph-category-facts div:nth-child(4n + 4),
.fph .fph-summary-facts div:nth-child(4n + 4),
.fph .fph-info-pairs article:nth-child(4n + 4),
.fph .fph-property-list div:nth-child(4n + 4) { background: #f3eadf; }

.fph .fph-code {
    border-color: var(--fw-olive-deep);
    background: var(--fw-olive-deep);
    color: var(--fw-white);
}

/* Technical tabs stay visually connected to the data beneath them. */
.fph .fph-technical {
    border-color: var(--fw-line);
    box-shadow: 0 16px 36px rgba(77, 94, 43, .08);
}

.fph .fph-technical__head {
    border-bottom-color: var(--fw-line);
    background: var(--fw-sage);
}

.fph .fph-technical-tabs {
    border-bottom-color: var(--fw-line);
    background: var(--fw-cream);
}

.fph .fph-technical-tabs__label {
    background: var(--fw-olive-deep);
    color: var(--fw-white);
}

.fph .fph-technical-tabs button {
    border-right-color: rgba(151, 167, 102, .38);
    color: var(--fw-ink);
}

.fph .fph-technical-tabs button:nth-of-type(6n + 1) { background: #edf3d8; }
.fph .fph-technical-tabs button:nth-of-type(6n + 2) { background: #f7f0dc; }
.fph .fph-technical-tabs button:nth-of-type(6n + 3) { background: #e4eee2; }
.fph .fph-technical-tabs button:nth-of-type(6n + 4) { background: #f3eadf; }
.fph .fph-technical-tabs button:nth-of-type(6n + 5) { background: #e9efd5; }
.fph .fph-technical-tabs button:nth-of-type(6n + 6) { background: #f8f6e9; }

.fph .fph-technical-tabs button:hover,
.fph .fph-technical-tabs button:focus-visible {
    background: var(--fw-lime);
    color: var(--fw-ink);
    outline: 0;
}

.fph .fph-technical-tabs button.is-active,
.fph .fph-technical-tabs button[aria-selected="true"] {
    background: var(--fw-olive) !important;
    box-shadow: inset 0 -4px 0 var(--fw-olive-dark) !important;
    color: var(--fw-white) !important;
}

.fph .fph-technical-panels {
    border-top: 5px solid var(--fw-olive);
    background: var(--fw-white);
}

.fph .fph-benefit-grid article:nth-child(odd),
.fph .fph-directions li:nth-child(odd),
.fph .fph-guardrails article:nth-child(odd) {
    background: var(--fw-sage);
}

.fph .fph-benefit-grid article:nth-child(even),
.fph .fph-directions li:nth-child(even),
.fph .fph-guardrails article:nth-child(even) {
    background: var(--fw-warm);
}

.fph .fph-directions span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--fw-olive);
    color: var(--fw-white);
}

/* Product information tables use contrast, stripes and a strong first column. */
.fph .fph-table-wrap {
    border-color: var(--fw-olive);
    border-radius: 5px;
    box-shadow: 0 9px 22px rgba(77, 94, 43, .08);
}

.fph .fph-technical .fph-table-wrap thead th {
    border-right: 1px solid rgba(255, 255, 255, .28);
    /* The site-wide light table guard is intentionally overridden for this
       scoped data surface so product tables retain a clear header hierarchy. */
    background: var(--fw-olive-deep) !important;
    color: var(--fw-white) !important;
    font-size: .66rem;
}

.fph .fph-table-wrap tbody tr:nth-child(odd) td {
    background: var(--fw-sage) !important;
}

.fph .fph-table-wrap tbody tr:nth-child(even) td {
    background: var(--fw-warm) !important;
}

.fph .fph-table-wrap td {
    border-top-color: var(--fw-line);
    border-right: 1px solid rgba(151, 167, 102, .25);
    color: var(--fw-ink);
}

.fph .fph-table-wrap td:first-child {
    border-left: 4px solid var(--fw-olive);
    font-weight: 800;
}

.fph .fph-table-wrap tbody tr:hover td {
    background: var(--fw-lime) !important;
}

.fph .fph-documents a:nth-child(1) { background: var(--fw-sage); }
.fph .fph-documents a:nth-child(2) { background: var(--fw-warm); }
.fph .fph-documents a:nth-child(3) { background: var(--fw-mint); }

/* Legacy task panels receive the same selection language. */
.iic-room-task-tabs {
    border: 1px solid var(--fw-line);
    border-radius: 6px 6px 0 0;
    background: var(--fw-cream);
}

.iic-room-task-tabs button:nth-child(odd) { background: var(--fw-sage); }
.iic-room-task-tabs button:nth-child(even) { background: var(--fw-warm); }

.iic-room-task-tabs button:hover,
.iic-room-task-tabs button[aria-selected="true"] {
    border-color: var(--fw-olive);
    background: var(--fw-olive) !important;
    color: var(--fw-white) !important;
}

.iic-room-task-products a {
    border-left: 4px solid var(--fw-olive) !important;
    background: var(--fw-sage) !important;
}

.iic-room-task-products a:nth-child(even) {
    background: var(--fw-warm) !important;
}

/* Controlled document cards retain the visual hierarchy without multiplying
   contact actions. The page-level technical review remains the single CTA. */
.room-product-documents__grid article {
    display: flex;
    min-height: 132px;
    flex-direction: column;
    justify-content: space-between;
    padding: 22px;
    border-left: 4px solid var(--fw-olive);
    background: var(--fw-white);
    color: var(--fw-ink);
}

.room-product-documents__grid article:nth-child(2) { background: var(--fw-warm); }
.room-product-documents__grid article:nth-child(3) { background: var(--fw-mint); }

.room-product-documents__grid article span,
.room-product-documents__grid article small,
.ftw-catalogue__status,
.sp-resource-status,
.sample-document-status {
    color: var(--fw-olive-dark);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1.45;
    text-transform: uppercase;
}

.room-product-documents__grid article strong {
    color: var(--fw-ink);
    font-size: 1rem;
}

.ftw-catalogue__status,
.sp-resource-status {
    display: block;
    margin-top: auto;
    padding-top: 18px;
}

.sample-document-status {
    margin-top: 20px;
    text-transform: none;
}

.sp-mini-cta__note {
    max-width: 390px;
    margin: 0;
    color: var(--fw-white);
    font-size: .9rem;
    line-height: 1.6;
}

@media (max-width: 900px) {
    .fph .fph-selector {
        border-right: 0;
        border-bottom: 1px solid var(--fw-line);
    }

    .fph .fph-workspace {
        gap: 0;
    }
}

@media (max-width: 620px) {
    .fph .fph-category-tabs {
        scroll-snap-type: x proximity;
    }

    .fph .fph-category-tabs button {
        flex-basis: 225px;
        scroll-snap-align: start;
    }

    .fph .fph-selector__title {
        min-height: 62px;
    }

    .fph .fph-product-card {
        min-height: 88px;
    }

    .fph .fph-technical-tabs {
        scroll-snap-type: x proximity;
    }

    .fph .fph-technical-tabs button {
        scroll-snap-align: start;
    }

    .room-product-documents__grid article {
        min-height: 112px;
        border-bottom: 1px solid var(--fw-line);
        border-left-width: 3px;
    }

    .room-product-documents__grid article:last-child {
        border-bottom: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fph .fph-category-tabs button,
    .fph .fph-product-card {
        transition: none;
    }
}
