.productinfo {
    display:Grid;
    grid-template-columns: 1fr 1.5fr;
    grid-gap:5vw;
    padding-block:5vw;
}

    h1 {
        font-size:3rem;
    }

    .image {
        margin-bottom:2rem;
    }

.map {
    background-color:var(--green);
}

.head {
    width:100%;
}

.fad-outer {
    background-color:var(--green);
}

.prod-list {
    display:grid;
    grid-template-columns: 1fr 3fr;
    grid-gap:2rem;
    padding-block:5vw;
}

    .expand {
        display:none;
        position:absolute;
    }

    .cats {
        margin-bottom:1rem;
    }

    .cats > h2 {
        font-size:1.4rem;
        background-color:#212121;
        color:#fff;
        padding:1rem;
        margin:0;
    }

    .cats a {
        background-color:var(--green);
        color:#fff;
        text-decoration: none;
        padding:0.75rem 1rem;
        margin:0;
    }

        .cats a:hover,
        .cats a.active {
            background-color:var(--bright_green);
            color:var(--green);
        }

    .search {
        margin-bottom:1rem;
    }

    .search form {
        display:Grid;
        grid-template-columns: 1fr 80px;
    }

    .search input[type="text"] {
        border:1px solid var(--green);
        border-right:none;
        border-radius:0.2rem 0 0 0.2rem;
        background-color:#eee;
        padding:1rem;
        margin:0;
    }

    .search .submit-btn {
        width:100%;
        background-color:var(--bright_green);
        color:var(--green);
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-width: 1px 1px 1px 0;
        margin:0;
    }

        .search .submit-btn:hover {
            background-color:Var(--blue);
            color:#fff;
        }

    .results {
        display:grid;
        grid-template-columns: repeat(3,1fr);
        grid-gap:1rem;
    }

        #result-num {
            display:none;
            grid-column: 1/-1;
        }

        .results a {
            text-decoration: none;
            background-color: #fff;
            border-radius: 3px;
            border:1px solid #ccc;
            transform: translateY(0);
            transition: box-shadow 0.5s ease-out, transform 0.5s ease-out;
            overflow: hidden;
        }

            .results a h2 {
                font-size: 1.2rem;
                margin:0;
                color:#212121;
                padding:1rem;
            }

            .results a img {
                width:100%;
                aspect-ratio: 1/1;
                padding:1rem;
                object-fit:contain;
                object-position: center;
            }

            .results a:hover {
                transform: translateY(-0.5rem);
                box-shadow: 0 10px 15px #0003;
            }

            .results a:hover h2 {
                color:var(--blue);
            }

        .results a.visible {
            display:grid;
        }

.file-dl {
    background-color:var(--blue);
    color:#fff;
    text-decoration: none;
    display:grid;
    grid-template-columns: 1fr 15px;
    grid-gap:1rem;
    padding:1rem;
    margin-bottom:0.25rem;
    transition:background-color 0.5s ease-out;
}

    .file-dl:hover {
        background-color: var(--bright_green);
    }

    .file-dl p {
        margin:0;
        line-height:1;
        font-size:0.9rem;
    }

.when {
    width:100%;
    margin-bottom:2rem;
    display:grid;
    grid-template-columns: repeat(6,1fr);
    gap:0.75rem;
    align-items:center;

    & > h3 {
        color:var(--green);
        border-bottom:2px solid #e0e0e0;
        padding-bottom: 1.5rem;
        font-size: 1.6rem;
        width:100%;
        grid-column: 1/-1;
    }

    & .op {
        display:grid;
        align-items: center;
        align-content:center;
        width:100%;
        aspect-ratio: 1;
        text-align: center;
        padding:0.5rem;
        border-radius:100rem;
        border:2px solid var(--green);

        &::before {
                content:'✖';
            }

        & p {
            font-size:0.8rem;
            margin:0;
            line-height:1;
        }

        &.selected {
            background-color:var(--green);
            color:#fff;

            &::before {
                content:'✔';
            }
        }
    }
}

.cat-title {
    background-color:var(--green);
    overflow:hidden;
    isolation: isolate;
    color:#fff;
    position:relative;
    display:grid;
    align-items: center;
    margin-bottom:3rem;
    padding:var(--global_padding);
    border-radius:0.2rem;

    & p {
        margin:0
    }

    & h2 {
        margin:0;
    }

    & .image {
        position:absolute;
        z-index:-1;
        top:0;
        right:0;
        height:100%;
        width:50%;
        mask-image:linear-gradient(90deg,rgba(19, 2, 39, 0) 0%, rgba(19, 2, 39, 1) 50%);
        & img {
            height:100%;
            width:1000%;
            object-fit:cover;
        }
    }
}

.pager-nav {
    padding-bottom:3rem;

    & ul {
    list-style:none;
	width:100%;
	padding:0;
	margin:3rem 0 0 0;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;

        & li {
            padding:0;
            margin:0;

            & a {
                display:block;
                background-color:#fff;
                border:1px solid var(--green);
                padding:0.5rem 1rem;
                text-decoration: none;
                margin:0.25em;

                &:hover,
                li.active & {
                    background-color:var(--green);
                    color:#fff;
                }
            }
        }
    }
}

.howto {
    margin-top:3rem;
}


details {
    display:grid;
    margin-bottom:1.5rem;

    & summary {
        display:grid;
        grid-template-columns: 1fr 1.5rem;
        gap:1rem;
        border-bottom:2px solid #e0e0e0;
        align-items:center;
        cursor:pointer;
        padding-bottom:1.5rem;
        font-size:1.6rem;
        color:var(--green);

        &::after {
            content:'+';
            text-align: right;
            font-weight:Bold;
        }


        & h2 {
            margin:0;
        }
    }

    &[open]{
        & summary img {
            scale:1 -1;
        }

        & summary::after {
            content:'-';
        }
    }

    & .content {
        padding-block:2rem;
        display:grid;

        & > p {
            grid-column: 1/-1;
        }
    }
}

.thumbs {
    margin:0;
    padding: 0;
    list-style: none;
    display:grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap:0.5rem;
    margin-bottom:3rem;
}

    .thumbs :is(li,a,img){
        float:left;
        clear:left;
        width:100%;
        padding:0;
        margin:0;
    }

        .thumbs a {
            border:1px solid var(--green);
        }

        .thumbs a:has(.active),
        .thumbs a:hover{
            border:1px solid var(--yellow);
        }

.product-form {
    background-color:#fff;
    box-shadow:0 1rem 3rem #0003;
    margin-top:2rem;
    padding:1.5rem;
}

    .product-form :is(input:not(.submit-btn),textarea){
        background-color:#eee;
    }

.related,
.product-highlights {
    clear:both;
    padding:5vw;

    & .wrap {
        display:flex;
        flex-wrap:wrap;
        justify-content: center;
        gap:1rem;

        & > h2 {
            color:var(--green);
            width:100%;
        }

        & a {
            width:min(380px,100%);
            text-decoration: none;

            & img {
                width:100%;
            }

            & .text {
                margin-top:1rem;

                & .green-outline-btn {
                    margin-top:0;
                }
            }
        }
    }
}

.product-highlights {
    background-color:var(--pale_green);

    & .wrap {

        & a {
            text-decoration: none;
            background-color: #fff;
            border-radius: 3px;
            box-shadow: 0 5px 10px #0004;
            transform: translateY(0);
            transition: box-shadow 0.5s ease-out, transform 0.5s ease-out;
            overflow: hidden;

            & .image {
                margin-bottom:0;
            }

            & h3 {
                font-size: 1.2rem;
                margin:0;
                color:var(--green);
                font-weight:bold;
            }

            & img {
                width:100%;
                aspect-ratio: 1/1;
                padding:1rem;
                object-fit:contain;
                object-position: center;
            }

            & .text {
                padding:1rem;
                margin:0;
            }

            &:hover {
                transform: translateY(-0.5rem);
                box-shadow: 0 10px 15px #0003;

                & h3 {
                    color:var(--blue);
                }
            }
        }
    }
}

.info-icons {
    display:grid;
    gap:0.5rem;
    margin-bottom:2rem;

    & > div {
        display:grid;
        gap:0.75rem;
        align-items: center;

        &:has(img){
            grid-template-columns: 1.75rem 1fr;
        }

        & p {
            color:var(--green);
            font-weight:bold;
            margin:0;
        }
    }
}

@media screen and (max-width:1199px){
    .prod-list,
    .productinfo {
        padding-inline:5vw;
    }
}

@media screen and (max-width:999px){

    .prod-list {
        grid-template-columns: 210px 1fr;
        grid-gap:1rem;
    }

        .cats a {
            font-size:0.8rem;
        }

    .results {
        grid-template-columns: 1fr 1fr;
    }

    .productinfo {
        grid-template-columns: 200px 1fr;
    }
}

@media screen and (max-width:649px){
    .prod-list {
        grid-template-columns: 1fr;
    }

    .cats {
        position:relative;
    }

    .cat-list {
        display:none;
    }

    .cats a.expand {
        display:block;
        right:0;
        top:0;
        background-color:transparent;
        font-size:1.4rem;
    }

    .productinfo {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width:449px){
    .results {
        grid-template-columns: 1fr;
    }
}