.poseidon-category-grid {
    display: grid;
    gap: 8px;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}
.poseidon-category-grid--full {
    padding-left: clamp(24px, 5vw, 96px);
    padding-right: clamp(24px, 5vw, 96px);
}
.poseidon-category-grid--wide {
    padding-left: clamp(24px, 4vw, 64px);
    padding-right: clamp(24px, 4vw, 64px);
}
.poseidon-category-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.poseidon-category-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.poseidon-category-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

.poseidon-category-grid__card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--poseidon-surface, #fff);
    text-decoration: none;
}
.poseidon-category-grid__img {
    aspect-ratio: 3 / 4;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .9s cubic-bezier(.25,.46,.45,.94);
}
.poseidon-category-grid__card:hover .poseidon-category-grid__img {
    transform: scale(1.05);
}
.poseidon-category-grid__media {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
}
.poseidon-category-grid__media .poseidon-category-grid__img--placeholder {
    position: absolute;
    inset: 0;
}
.poseidon-category-grid__img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6f7f7;
    color: #c2c7cc;
}

.poseidon-category-grid__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 16px 12px 4px;
    text-align: center;
}
.poseidon-category-grid__name {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--poseidon-text, #111);
}
.poseidon-category-grid__count {
    font-size: 12px;
    color: var(--poseidon-text-muted, #6b7280);
}
.poseidon-category-grid__card:hover .poseidon-category-grid__name {
    opacity: .7;
}

@media (max-width: 900px) {
    .poseidon-category-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .poseidon-category-grid--cols-3,
    .poseidon-category-grid--cols-4 { grid-template-columns: repeat(1, 1fr); }
}

/* ── Estado vacío (sin categorías válidas) ── */
.poseidon-category-grid__empty {
    text-align: center;
    color: var(--poseidon-text-muted, #6b7280);
    padding: 40px 24px;
    margin: 0;
    font-size: 13.5px;
}

/* ── Skeleton de carga (editor, mientras responde ServerSideRender) ── */
.poseidon-category-grid__skeleton {
    display: grid;
    gap: 8px;
}
.poseidon-category-grid__skeleton-item {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--poseidon-surface, #fff);
}
.poseidon-category-grid__skeleton-media {
    aspect-ratio: 3 / 4;
    width: 100%;
    background: linear-gradient(
        100deg,
        #eceef0 30%,
        #f6f7f7 45%,
        #eceef0 60%
    );
    background-size: 200% 100%;
    animation: poseidon-skeleton-shimmer 1.4s ease-in-out infinite;
}
.poseidon-category-grid__skeleton-line {
    height: 10px;
    border-radius: 3px;
    margin: 16px auto 6px;
    background: linear-gradient(
        100deg,
        #eceef0 30%,
        #f6f7f7 45%,
        #eceef0 60%
    );
    background-size: 200% 100%;
    animation: poseidon-skeleton-shimmer 1.4s ease-in-out infinite;
}
.poseidon-category-grid__skeleton-line--name { width: 55%; }
.poseidon-category-grid__skeleton-line--count { width: 35%; height: 8px; margin-top: 8px; margin-bottom: 4px; }

@keyframes poseidon-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .poseidon-category-grid__skeleton-media,
    .poseidon-category-grid__skeleton-line {
        animation: none;
    }
}