.diffusers .empty {
    padding: 3rem;
    border: 2px dashed silver;
    border-radius: .5rem;
    text-align: center;
    color: silver;
}

.diffusers .empty > p:not(:last-child) {
    margin-bottom: 1rem;
}

.diffusers .empty label {
    border: 1px solid var(--orange-dark);
    padding: 0 0.2em;
    border-radius: 3px;
    white-space: nowrap;
    cursor: pointer;
    background-color: var(--orange);
    color: white;
}

.diffusers .empty label:hover {
    outline: 2px solid var(--orange);
    border-color: var(--orange-dark);
}


/* Category selector */

.diffusers .category-selector .category-name {
    font-style: italic;
}

.diffusers .category-selector.locked .question {
    display: none;
}

.diffusers .category-selector:not(.locked) .locked-category {
    display: none;
}

.diffusers .category-selector .locked-category {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    background-color: var(--light-marker);
    padding: 0.5rem;
    border-radius: 0.25rem;
    margin: 1rem 0rem;
}


/* Results */

.diffusers .results-table {
    --info-columns: 20rem 2.5fr 3fr 3fr 2fr;
    margin: 1rem 0;
}

.diffusers .results-table > .results-header {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 6.5rem var(--info-columns);
    padding: 0.5rem;
    border-bottom: 2px solid #ddd;
}

.diffusers .results-table.show-empty .results-header {
    display: none;
}


.diffusers .results-table.collapsed > .results-header {
    display: none;
}

.diffusers .results-table [data-sort-field] {
    cursor: pointer;
    user-select: none;
}

.diffusers .results-table [data-sort-field]:hover {
    text-decoration: underline;
}

.diffusers .results-table [data-sort-field].ascending::after {
    content: "▲";
}

.diffusers .results-table [data-sort-field].descending::after {
    content: "▼";
}

.diffusers .results-table > .results-header .title {
    font-weight: bold;
}

.diffusers .results-table > .results-header .prijs {
    text-align: right;
}

.diffusers .results-table > .results-header :not(.title, .prijs) {
    text-align: center;
}

.diffusers .results-table.collapsed .result:not(.no-collapse) {
    display: none;
}

.diffusers .result {
    display: grid;
    grid-template-columns: 6.5rem var(--info-columns);
    grid-template-rows: minmax(1.5rem, auto) minmax(2rem, auto) 2.5rem auto;
    grid-template-areas:
        "image title worp drukverlies geluid prijs"
        "image desc  desc desc        desc   desc"
        "image more  more more        more   more"
        "    . more  more more        more   more"
    ;

    padding: 0.5rem;
    border-radius: 0.25rem;
    margin-top: 1rem;
    border: 1px solid var(--dark-marker);
    
}

.diffusers .result > .image {
    grid-area: image;
    --spacing: 5px;
    padding-right: calc(0.5rem + var(--spacing));
    padding-top: var(--spacing);
    padding-left: var(--spacing);
}

.diffusers .result > .image img {
    border-radius: 3px;
    width: 100%;
}


.diffusers .result .title {
    grid-area: title;
    font-size: 110%;
}

.diffusers .result > .title {
    font-weight: bold;
}

.diffusers .result .worp,
.diffusers .result .drukverlies,
.diffusers .result .geluid {
    text-align: center;
}

.diffusers .result > .worp,
.diffusers .result > .drukverlies,
.diffusers .result > .geluid {
    color: var(--dark-marker);
}

.diffusers .result .worp {
    grid-area: worp;
}

.diffusers .result .drukverlies {
    grid-area: drukverlies;
}

.diffusers .result .geluid {
    grid-area: geluid;
}

.diffusers .result .prijs {
    grid-area: prijs;
    text-align: right;
    padding-right: 0.25rem
}

.diffusers .result .description {
    grid-area: desc;
    margin-top: 0.5rem;
}

.diffusers .result > .options {
    grid-area: more;
    margin-top: 0.25rem;
}

.diffusers .result .option {
    display: grid;
    grid-template-columns: var(--info-columns);
    grid-template-areas:
        "title worp drukverlies geluid prijs"
    ;

    background-color: var(--light-marker);
    margin-top: .5rem;
    border-radius: 3px;
    border: 1px solid var(--darker-marker);
    cursor: pointer;

    line-height: calc(2rem - 2px);
}

.diffusers .result .option .title.full-width {
    grid-column-start:1;
    grid-column-end: 5;
}

.diffusers .result .option:hover {
    border-color: var(--orange-dark);
}

.diffusers .result .option .title {
    padding-left: .25rem;
    font-size: 1rem; /* back to root size */
}

.diffusers .result .option.selected {
    outline: 2px solid var(--orange);
    border-color: var(--orange-dark);
}

.diffusers .result.no-collapse {
    box-shadow: none;
}

/* Select everything in a `.result` that is not `.option.selected` (only works for this specific tree structure) */
.diffusers .result.no-collapse > :not(.options),
.diffusers .result.no-collapse .options > :not(.selected) {
  filter: opacity(33%);
}

.diffusers .result.no-collapse .options > :not(.selected) {
    background-color: var(--light-marker);
}

.diffusers .results-table:not(.collapsed) .button-expand-results {
    display: none;
}

/* Result table expand button */
.diffusers .results-table .button-expand-results {
    background-color: var(--light-marker);
    margin-top: 1rem;
    width: 100%;
    height: 2rem;
    border-radius: 0.25rem;
    text-align: center;
    border: 1px solid var(--dark-marker);
}

.diffusers .results-table .button-expand-results:hover,
.diffusers .results-table .button-expand-results:active {
    background-color:var(--light-marker--highlight);
}

html.dark-mode .diffusers .results-table .button-expand-results,
body.dark-mode .diffusers .results-table .button-expand-results {
    background-color: var(--light-marker);
}


/* Order cards */

.order-card.order-card--diffuser {
    box-shadow: none;
}
.order-card.order-card--diffuser .product-blurb {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1rem;
}

.order-card.order-card--diffuser .product-blurb img {
    float: left;
    margin-right: 100%;
    margin-bottom: 0.5rem;
    border-radius: 3px;
    max-width: 100%;
}

.order-card.order-card--diffuser .product-blurb img.top-image {
    max-height:14rem;
}

.order-card.order-card--diffuser .product-blurb :where(p, ul) {
    margin-bottom: 1rem;
}

.order-card.order-card--diffuser .product-blurb :where(p, ul):last-child {
    margin-bottom: 0;
}

.order-card.order-card--diffuser .product-blurb li {
    margin-left: 2rem;
}

.order-card.order-card--diffuser .product-situation {
    margin: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.order-card.order-card--diffuser .product-situation .full-width {
    grid-column-start: span 2;
}

.order-card.order-card--diffuser .situation-grid {
    margin: 0.5rem 0;
    display: grid;
    grid-template-columns: 14rem 1fr;
}

.order-card.order-card--diffuser .situation-own-line-header {
    clear: both;
}

.order-card.order-card--diffuser .diagram {
    width: 100%;
    padding-right: 1rem; /* Purely for visual balance */
}

html.dark-mode .order-card.order-card--diffuser .diagram,
body.dark-mode .order-card.order-card--diffuser .diagram {
    filter: invert(1);
}

.order-card .question .error {
    grid-column-start: 1;
    grid-column-end: 4;
    padding:0.5rem;
    width: 100;
    background-color:var(--error-marker);
    margin-top:0.25rem;
    font-style:italic;
}
.question .error.snap-notice {
    background-color: var(--light-marker--highlight);
    font-style: normal;
}


.diffusers .extra_whitespace {
    margin-top:1rem;
}

.hidden_option {
    display: none !important;
}

.hidden_question {
    display: none !important;
}

.fully_hidden_question {
    display: none !important;
}