/* ============================================================
   StoreWax — Versión escritorio (activable por tienda)
   Solo aplica cuando .ms-app también tiene .ms-app--desktop
   y la pantalla es >= 768px. El móvil queda intacto.
   ============================================================ */

@media (min-width: 768px) {

    /* Contenedor ancho */
    .ms-app--desktop {
        max-width: 1100px;
        padding-bottom: 110px;
    }

    /* ── Header con aire de desktop ── */
    .ms-app--desktop .ms-header {
        padding: 16px 32px;
    }
    .ms-app--desktop .ms-header .ms-brand { font-size: 22px; }
    .ms-app--desktop .ms-header .ms-actions { gap: 20px; }
    .ms-app--desktop .ms-header .ms-actions a { font-size: 26px; }

    /* Más respiro lateral en secciones */
    .ms-app--desktop .ms-section,
    .ms-app--desktop .ms-products,
    .ms-app--desktop .ms-related {
        padding-left: 32px;
        padding-right: 32px;
    }

    /* ── Catálogo: grilla fija de 4 columnas ── */
    .ms-app--desktop .ms-products,
    .ms-app--desktop .ms-products--3col,
    .ms-app--desktop .ms-products--1col {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 20px !important;
    }

    /* El selector de columnas móvil no aplica en desktop */
    .ms-app--desktop .ms-view-controls { display: none; }

    /* Tarjetas con hover */
    .ms-app--desktop .ms-product {
        transition: transform .15s ease, box-shadow .15s ease;
    }
    .ms-app--desktop .ms-product:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, .09);
    }

    /* ── Bloques del landing: grillas más amplias ── */
    .ms-app--desktop .ms-products-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 16px !important;
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
    .ms-app--desktop .ms-products-grid .ms-related-card { border-radius: 14px; }

    /* Tracks horizontales (relacionados / vistos): fila de 6 */
    .ms-app--desktop .ms-related-track {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 12px;
        overflow-x: visible;
        padding: 4px 32px;
    }
    .ms-app--desktop .ms-related-card { flex: none; }

    /* ── Página de producto: carrusel horizontal, slide llena todo el área ── */
    .ms-app--desktop .ms-carousel {
        max-width: 880px;
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;
    }
    .ms-app--desktop .ms-carousel-track {
        padding: 0;
        gap: 0;
    }
    .ms-app--desktop .ms-carousel-slide {
        flex: 0 0 100%;
    }
    /* Caja horizontal: la imagen se ve completa sin recortes */
    .ms-app--desktop .ms-carousel-slide img,
    .ms-app--desktop .ms-carousel-slide iframe {
        aspect-ratio: auto;
        height: clamp(340px, 55vh, 560px);
        object-fit: contain;
        background: transparent;
    }
    /* Flechas separadas del borde ya que el slide llega al 100% */
    .ms-app--desktop .ms-carousel-arrows { padding: 0 14px; }

    /* ── Barra inferior: píldora flotante centrada ── */
    .ms-app--desktop .ms-bottom {
        max-width: none;
        width: auto;
        min-width: 340px;
        bottom: 24px;
        border: 1px solid var(--ms-border);
        border-radius: 28px;
        box-shadow: 0 10px 32px rgba(0, 0, 0, .18);
        padding: 8px 18px;
        background: rgba(255, 255, 255, .95);
        backdrop-filter: blur(12px);
    }
    .ms-app--desktop .ms-bottom-nav { gap: 28px; }
    .ms-app--desktop .ms-bottom-nav a { padding: 4px 10px; }

    /* Hover genérico en botones */
    .ms-app--desktop .ms-btn:hover { filter: brightness(.97); }
    .ms-app--desktop .ms-related-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
    }
    .ms-app--desktop .ms-related-card { transition: transform .15s ease, box-shadow .15s ease; }

    /* Cursor pointer en elementos clicables */
    .ms-app--desktop .ms-product,
    .ms-app--desktop .ms-related-card { cursor: pointer; }
}