/**
 * Shop Design System — Layout CSS
 * Contêineres, Seções e Grids Unificados
 */
.s-container {
    width: 100%;
    max-width: var(--s-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--s-container-pad);
    padding-right: var(--s-container-pad);
}

.s-section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.s-section-sm {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

/* Header de Seção Padronizado */
.s-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.75rem;
}

.s-section-title-box h2 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--s-color-text-main);
    margin: 0 0 0.25rem 0;
}

.s-section-title-box p {
    font-size: 0.92rem;
    color: var(--s-color-text-muted);
    margin: 0;
}

.s-section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--s-color-secondary);
}

.s-section-link:hover {
    color: var(--s-color-secondary-hover);
    text-decoration: underline;
}

/* Grid de Produtos Universais (4 a 6 colunas responsive) */
.s-grid-products {
    display: grid;
    grid-template-columns: repeat(var(--showcase-cols, 5), 1fr);
    gap: 1.25rem;
}

@media (max-width: 1200px) {
    .s-grid-products {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 992px) {
    .s-grid-products {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .s-grid-products {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}

/* Grid de Categorias */
.s-grid-categories {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}

@media (max-width: 1024px) {
    .s-grid-categories {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 640px) {
    .s-grid-categories {
        grid-template-columns: repeat(3, 1fr);
    }
}