/* ---- Desktop: Sidebar brand layout ---- */
@media (min-width: 1025px) {
    .pg-cat-layout {
        display: flex;
        gap: 28px;
    }

    /* Sidebar brands */
    .pg-cat-brands-wrapper {
        flex: 0 0 170px;
        position: sticky;
        top: calc(var(--pg-header-height) + 16px);
        align-self: flex-start;
        max-height: calc(100vh - var(--pg-header-height) - 32px);
        overflow-y: auto;
        background: transparent;
        border-bottom: none;
        padding: 16px 0 16px;
        scrollbar-width: thin;
        scrollbar-color: var(--pg-border-medium) transparent;
    }
    .pg-cat-brands-wrapper::-webkit-scrollbar {
        width: 4px;
    }
    .pg-cat-brands-wrapper::-webkit-scrollbar-track {
        background: transparent;
    }
    .pg-cat-brands-wrapper::-webkit-scrollbar-thumb {
        background: var(--pg-border-medium);
        border-radius: 2px;
    }
    .pg-cat-brands-wrapper::-webkit-scrollbar-thumb:hover {
        background: var(--pg-grey-light);
    }

    .pg-cat-brands-container {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .pg-cat-brands-scroll {
        overflow-x: visible;
        overflow-y: visible;
    }
    .pg-cat-brands-scroll::-webkit-scrollbar {
        display: none;
    }

    .pg-cat-brands-grid {
        flex-direction: column;
        gap: 8px;
        padding-bottom: 0;
    }

    .pg-cat-brand-card {
        width: 100%;
        min-height: auto;
        padding: 10px 10px;
        gap: 4px;
        border-radius: 2px;
    }
    .pg-cat-brand-card:hover {
        transform: translateY(-2px);
    }

    .pg-cat-brand-logo {
        width: 56px;
        height: 56px;
        border-radius: 2px;
    }

    .pg-cat-brand-name {
        font-size: 12px;
    }

    .pg-cat-brand-count {
        top: 4px;
        right: 4px;
        min-width: 18px;
        height: 18px;
        font-size: 10px;
        padding: 0 4px;
    }

    .pg-cat-brand-card.active::after {
        top: 4px;
        right: 4px;
        width: 18px;
        height: 18px;
        font-size: 10px;
    }

    /* Main takes remaining space */
    .pg-cat-main {
        flex: 1;
        min-width: 0;
    }

    /* Adjust grid columns for sidebar layout */
    .pg-cat-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .pg-cat-subcat-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Large desktop: 5 columns when space allows */
@media (min-width: 1400px) {
    .pg-cat-grid {
        grid-template-columns: repeat(5, 1fr);
    }
    .pg-cat-subcat-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}