/* Explain: Storefront layout helpers and editorial spacing */
.store-container {
    width: min(1180px, calc(100vw - 2rem));
    margin-inline: auto;
}

.wide-container {
    width: min(1420px, calc(100vw - 1rem));
    margin-inline: auto;
}

.section-pad {
    padding-block: clamp(4rem, 8vw, 7.5rem);
}

.editorial-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
    gap: 1rem;
}

.product-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.96fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: start;
}

.diagonal-divider {
    height: 2.5rem;
    background: linear-gradient(135deg, transparent 0 48%, rgba(193, 18, 31, 0.72) 48% 52%, transparent 52% 100%);
}

@media (max-width: 900px) {
    .editorial-grid,
    .product-detail-grid {
        grid-template-columns: 1fr;
    }
}