#main .twhc-heading { display: none; }

@media not all and (min-width: 768px) {
    #main .top-category-menu {
        box-sizing: border-box;
        max-width: 100%;
        min-width: 0;
        margin: 0 auto 12px;
        padding: 3px;
        gap: 7px;
        align-items: stretch;
        justify-content: start;
    }

    #main .top-category-menu > a {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        gap: 7px;
        min-width: 0;
        min-height: 44px;
        margin: 0;
        padding: 8px 13px;
        border: 1px solid #e4dce0;
        border-radius: 12px;
        background: #fff;
        color: #29242c;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;
        text-align: left;
        text-transform: none;
        letter-spacing: normal;
        text-decoration: none;
    }

    #main .top-category-menu > a:hover,
    #main .top-category-menu > a:active {
        border-color: #d6b4c3;
        background: #f6edf1;
        color: #68072e;
    }

    #main .top-category-menu > a:focus-visible {
        outline: 2px solid #8b073a;
        outline-offset: 1px;
    }

    #main .top-category-menu > a > i {
        display: inline-flex;
        flex: 0 0 18px;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        margin: 0;
        color: #8b073a;
        font-size: 18px;
    }

    #main .top-category-menu {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-padding-inline: 3px;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
        scrollbar-color: #c4acb8 transparent;
    }

    #main .top-category-menu > a {
        flex: 0 0 auto;
        scroll-snap-align: start;
        white-space: nowrap;
    }

    #main :is(.twhc-heading:has(details[open]) + .top-category-menu, .top-category-menu[data-twhc-open]) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
        scroll-snap-type: none;
    }

    #main :is(.twhc-heading:has(details[open]) + .top-category-menu, .top-category-menu[data-twhc-open]) > a {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    #main .twhc-heading {
        display: flex;
        min-height: 44px;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 2px 8px;
        margin: 0 3px 3px;
    }

    #main .twhc-heading h2 {
        margin: 0;
        color: #29242c;
        font-size: 19px;
        font-weight: 700;
        line-height: 1.2;
        text-transform: none;
        letter-spacing: -.025em;
    }

    #main .twhc-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 44px;
        padding: 5px 2px;
        border: 0;
        background: transparent;
        color: #8b073a;
        font: inherit;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.25;
        cursor: pointer;
    }

    #main .top-category-menu > a[hidden],
    #main .twhc-fold[hidden] {
        display: none;
    }

    #main .twhc-toggle:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
    }


    #main .twhc-fold { margin: 0; }
    #main .twhc-toggle { list-style: none; }
    #main .twhc-toggle::-webkit-details-marker { display: none; }
    #main .twhc-toggle .twhc-less,
    #main .twhc-fold[open] .twhc-more { display: none; }
    #main .twhc-fold[open] .twhc-less { display: inline; }

    #main .twhc-toggle:focus-visible { outline: 2px solid #8b073a; outline-offset: 1px; }

    /* Only replace icons for which the local sprite contains an outline. */
    #main .top-category-menu > a > :is(.fa-graduation-cap, .fa-futbol-o, .fa-paw, .fa-magic, .fa-puzzle-piece, .fa-ghost, .fa-tree, .fa-egg, .fa-heart, .fa-th, .fa-leaf, .fa-ring, .fa-font, .fa-fire, .fa-venus-mars, .fa-ellipsis-h)::before,
    #main .twhc-toggle::before {
        content: "";
        display: inline-block;
        width: 18px;
        height: 18px;
        background-image: url("../img/topics.svg");
        background-repeat: no-repeat;
        background-size: 1800% 100%;
        background-position: var(--twhc-icon-x, 0%) center;
    }

    #main .twhc-toggle::before {
        width: 16px;
        height: 16px;
        --twhc-icon-x: 94.117647%;
    }

    #main .twhc-fold[open] .twhc-toggle::before { --twhc-icon-x: 100%; }
}

@media (max-width: 359px) {
    #main .twhc-heading h2 { font-size: 17px; }
    #main .twhc-toggle { gap: 4px; font-size: 12px; }
}