/* Product catalogue functional styles */
:root {

            --paper: #F5F4EF;

            --surface: #FFFFFF;

            --ink: #1E2A24;

            --ink-soft: #63706A;

            --accent: #1B6E62;

            --accent-dark: #12504A;

            --accent-soft: #E3EFEA;

            --amber: #C6772E;

            --amber-soft: #F7E9D8;

            --line: #E4E1D6;

        }


        * {

            font-family: 'IBM Plex Sans', system-ui, sans-serif;

        }


        code, .mono, .cas-value, .chem-tile, .filter-mono {

            font-family: 'IBM Plex Mono', ui-monospace, monospace !important;

        }


        body {

            background: var(--paper);

            color: var(--ink);

        }


        .chemical-wrapper {

            background: var(--surface);

            border-radius: 20px;

            padding: 32px;

            box-shadow: 0 1px 2px rgba(30,42,36,0.04);

            border: 1px solid var(--line);
        }


        .page-title {

            font-weight: 700;

            margin-bottom: 4px;

            letter-spacing: -0.01em;
        }


        .page-subtitle {

            color: var(--ink-soft);

            font-size: 15px;
        }


        /*
        ---------------------------------------
        SEARCH
        ---------------------------------------
        */

        .search-box {

            position: relative;
        }


        .search-box input {

            height: 50px;

            padding-left: 18px;

            padding-right: 110px;

            border-radius: 10px;

            border: 1px solid var(--line);

            background: var(--paper);
        }


        .search-box input:focus {

            border-color: var(--accent);

            box-shadow: 0 0 0 3px var(--accent-soft);

            background: var(--surface);
        }


        .search-btn {

            position: absolute;

            right: 6px;

            top: 6px;

            height: 38px;

            border-radius: 7px;

            background: var(--accent);

            border-color: var(--accent);
        }


        .search-btn:hover {

            background: var(--accent-dark);

            border-color: var(--accent-dark);
        }


        /*
        ---------------------------------------
        FILTER BOX
        ---------------------------------------
        */

        .filter-section {

            background: var(--paper);

            border: 1px solid var(--line);

            border-radius: 14px;

            padding: 20px;
        }


        .filter-title {

            font-size: 12px;

            font-weight: 700;

            color: var(--ink-soft);

            text-transform: uppercase;

            letter-spacing: .08em;

            margin-bottom: 12px;
        }


        .filter-buttons {

            display: flex;

            flex-wrap: wrap;

            gap: 6px;
        }


        .filter-btn {

            min-width: 38px;

            border-radius: 7px;

            font-weight: 500;

            border-color: var(--line);

            color: var(--ink);
        }


        .filter-btn.active-letter {

            background: var(--accent);

            border-color: var(--accent);

            color: #fff;
        }


        .filter-btn.active-number {

            background: var(--amber);

            border-color: var(--amber);

            color: #fff;
        }


        .filter-btn.active-symbol {

            background: var(--ink);

            border-color: var(--ink);

            color: #fff;
        }


        .filter-btn.active-all {

            background: var(--ink);

            border-color: var(--ink);

            color: #fff;
        }


        /*
        ---------------------------------------
        CARD GRID
        ---------------------------------------
        */

        .chem-grid {

            display: grid;

            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

            gap: 14px;
        }


        .chem-card {

            display: flex;

            gap: 14px;

            align-items: flex-start;

            background: var(--surface);

            border: 1px solid var(--line);

            border-radius: 14px;

            padding: 16px;

            transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
        }


        .chem-card:hover {

            transform: translateY(-2px);

            box-shadow: 0 10px 24px rgba(27,110,98,0.12);

            border-color: var(--accent);
        }


        .chem-tile {

            position: relative;

            width: 52px;

            height: 52px;

            flex-shrink: 0;

            border-radius: 10px;

            background: var(--accent-soft);

            color: var(--accent-dark);

            display: flex;

            align-items: center;

            justify-content: center;

            font-weight: 700;

            font-size: 18px;
        }


        .chem-tile .tile-index {

            position: absolute;

            top: 3px;

            left: 5px;

            font-size: 9px;

            font-weight: 600;

            color: var(--accent-dark);

            opacity: .65;
        }


        .chem-body {

            min-width: 0;

            flex: 1;
        }


        .chem-name {

            font-weight: 600;

            font-size: 15px;

            color: var(--ink);

            line-height: 1.3;

            margin-bottom: 8px;

            overflow-wrap: anywhere;
        }


        .chem-cas {

            display: inline-flex;

            align-items: center;

            gap: 7px;

            background: var(--paper);

            border: 1px solid var(--line);

            border-radius: 8px;

            padding: 4px 10px 4px 8px;

            max-width: 100%;
        }


        .chem-cas .label {

            font-size: 9px;

            font-weight: 700;

            letter-spacing: .07em;

            color: var(--accent);

            text-transform: uppercase;
        }


        .cas-value {

            font-size: 12.5px;

            color: var(--ink-soft);

            overflow-wrap: anywhere;
        }


        .empty-state {

            text-align: center;

            padding: 70px 20px;

            border: 1px dashed var(--line);

            border-radius: 14px;

            background: var(--paper);
        }


        /*
        ---------------------------------------
        BADGE
        ---------------------------------------
        */

        .chemical-count {

            font-size: 14px;

            padding: 9px 16px;

            border-radius: 30px;

            background: var(--accent) !important;

            font-weight: 600;
        }


        /*
        ---------------------------------------
        ACTIVE FILTER BADGES
        ---------------------------------------
        */

        .active-badge {

            display: inline-flex;

            align-items: center;

            font-size: 12px;

            font-weight: 600;

            padding: 4px 10px;

            border-radius: 20px;

            margin-left: 4px;
        }


        .active-badge.b-letter { background: var(--accent-soft); color: var(--accent-dark); }

        .active-badge.b-number { background: var(--amber-soft); color: var(--amber); }

        .active-badge.b-symbol { background: var(--ink); color: #fff; }

        .active-badge.b-search { background: #E7EEF7; color: #2B547E; }


        /*
        ---------------------------------------
        PAGINATION
        ---------------------------------------
        */

        .pagination .page-link {

            margin: 0 2px;

            border-radius: 7px;

            color: var(--ink);

            border-color: var(--line);
        }


        .pagination .active .page-link {

            background: var(--accent);

            border-color: var(--accent);

            color: #ffffff;
        }


        /*
        ---------------------------------------
        RESULT
        ---------------------------------------
        */

        .result-info {

            color: var(--ink-soft);

            font-size: 14px;
        }


        /*
        ---------------------------------------
        MOBILE
        ---------------------------------------
        */

        @media (max-width: 576px) {

            .chemical-wrapper {

                padding: 18px;

                border-radius: 14px;
            }


            .search-box input {

                padding-right: 15px;
            }


            .search-btn {

                position: static;

                width: 100%;

                margin-top: 8px;

                height: 45px;
            }


            .page-title {

                font-size: 24px;
            }


            .chem-grid {

                grid-template-columns: 1fr;
            }

        }
        
        .header-area .menu-area a {
    text-decoration: none !important;
}

.header-area .menu-area a:hover {
    text-decoration: none !important;
}

.menu-area a {
    color: #fff;
    text-decoration: none !important;
}

.footer-area a,
.footer-area a:hover,
.footer-area a:focus {
    text-decoration: none !important;
}
footer a,
footer a:hover,
footer a:focus {
    text-decoration: none !important;
    color: inherit;
}