.category-list {
    & ul {
        list-style-type: none;
        margin: 0;
    }
    & li {
        display: flex;
        padding-bottom: 1.25em;
        & strong {
            margin-right: .25em;
        }
    }
    & li li {
        padding: .15em 0;
    }
    & a {
        text-decoration: none;
        font-size: 110%;
    }
    & figure {
        width: 40%;
        margin-right: 1em;
    }
    & caption {
        color: color-mix(in srgb, var(--primary-color), var(--dark) 10%);
    }
}

.product-list {
    padding-bottom: 1em;
    & table {
        width: 100%;
    }
    & thead {
        font-size: 110%;
    }
    & th, td {
        padding: .2em 2em .2em 0;
    }
    & th:first-child, th:nth-of-type(2), td:nth-of-type(2) {
        text-align: left;
    }
    & th:first-child {
        vertical-align: top;
        width: 35%;
    }
    & th:last-child, td:last-child {
        text-align: right;
        padding-left: 1em;
        width: 20%;
    }
    & td:last-child {
        background-color: var(--background);
    }
}

input, select, button {
	padding: .5em;
	margin-bottom: 1em;
}

label{
	display: block;
}

input, select {
	width: 100%;
}

button {
	background-color: var(--primary-color);
	font-weight: bold;
	border-radius: 5px;
	padding: .6em;
}

/* media query for table on small screens */
@media only screen and (max-width: 640px) {
    .product-list {
        & thead {
            display: none;
        }
        & tbody tr {
            display: flex;
            flex-wrap: wrap;
        }
        & th:first-child {
            width: 100%;
            background-color: var(--background);
            padding: .25em;
            & a {
                color: var(--accent-color);
            }
        }
        & th[rowspan] + td, td:first-child {
            width: 70%;
        }
        & td:last-child {
            background-color: var(--light);
            width: 30%;
            padding-right: 1em;
        }
    }
}