/* ComerClaro product responsive layout
   Un solo DOM:
   - Desktop: 2 columnas reales.
   - Móvil/tablet: bloques reordenables por prioridad UX.
*/

.cc-product-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.cc-product-block {
    min-width: 0;
}

/* En móvil aplanamos las columnas para que todos los cards compitan en el mismo orden */
.cc-product-main,
.cc-product-sidebar,
.cc-product-sidebar-stack {
    display: contents;
}

/* Orden móvil */
.cc-order-alerts {
    order: 10;
}

.cc-order-hero {
    order: 20;
}

.cc-order-score {
    order: 30;
}

.cc-order-ingredients {
    order: 40;
}

.cc-order-additives {
    order: 50;
}

.cc-order-nutrition {
    order: 60;
}

.cc-order-food-authority {
    order: 70;
}

.cc-order-alternatives {
    order: 80;
}

.cc-order-community {
    order: 90;
}

@media (min-width: 768px) {
    .cc-product-layout {
        gap: 2rem;
    }
}

@media (min-width: 1024px) {
    .cc-product-layout {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 2rem;
    }

    .cc-product-main {
        display: flex;
        grid-column: span 8 / span 8;
        flex-direction: column;
        gap: 2rem;
        min-width: 0;
    }

    .cc-product-sidebar {
        display: block;
        grid-column: span 4 / span 4;
        align-self: start;
        position: sticky;
        top: 100px;
        min-width: 0;
    }

    .cc-product-sidebar-stack {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .cc-product-block {
        order: 0;
    }
}