* {
    box-sizing: border-box;
}

.toyboxmenu-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.toyboxmenu-bar {
    /* Same slant/divider mechanics as .creator-bar in PublicCreators.css,
       just with the right-hand side widened to fit a full image rather
       than a narrow thumbnail, and the left side a plain dark panel
       instead of a profile+fields layout. */
    --panel-color: var(--frame-color, #142c46);
    --divider-color: var(--highlight-color, #4fb6ec);
    --slant: 60px;
    --divider-thickness: 14px;
    --right-width: 40%;
    position: relative;
    width: 100%;
    height: 190px;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    cursor: pointer;
}

/* Right-hand image - fills that side of the bar edge to edge */
.toyboxmenu-thumb {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--right-width);
    height: 100%;
    object-fit: cover;
}

/* Left-hand panel, cut on the diagonal, holding the heading image */
.toyboxmenu-panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: calc(var(--right-width) - var(--slant));
    background: var(--panel-color);
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 60px 20px 20px;
    transition: background 0.2s ease;
}

/* Hover - left panel switches to the same colour as the slant/divider */
.toyboxmenu-bar:hover .toyboxmenu-panel {
    background: var(--divider-color);
}

.toyboxmenu-heading-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Thin accent stripe along the seam */
.toyboxmenu-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(100% - var(--right-width) - (var(--divider-thickness) / 2));
    width: calc(var(--slant) + var(--divider-thickness));
    background: var(--divider-color);
    clip-path: polygon( var(--slant) 0, 100% 0, var(--divider-thickness) 100%, 0 100% );
}

@media (max-width: 700px) {
    .toyboxmenu-bar {
        height: auto;
        display: flex;
        flex-direction: column;
    }

    .toyboxmenu-panel {
        position: static;
        order: 1;
        clip-path: none;
        padding: 16px;
    }

    .toyboxmenu-thumb {
        position: static;
        order: 2;
        width: 100%;
        height: 200px;
    }

    .toyboxmenu-divider {
        display: none;
    }
}