/**
 * Nissei - Ficha de producto en mobile
 * Compacta titulo y galeria para que precio, stock y cantidad
 * disponible se vean en la primera pantalla sin hacer scroll.
 * La cabecera compacta es global: ver web/css/nissei-header.css.
 * Solo se carga en catalog_product_view y solo aplica por debajo de 768px.
 */
@media (max-width: 767px) {
    /* Breadcrumbs */
    .catalog-product-view .wrapper-breadcrums {
        display: none;
    }

    /* Titulo, y marca + SKU en una misma linea */
    .catalog-product-view .product-info-main-top {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 12px;
        margin: 8px 0 0;
        padding-bottom: 6px;
    }
    .catalog-product-view .product-info-main-top .page-title-wrapper {
        display: contents;
    }
    .catalog-product-view .product-info-main-top .page-title {
        flex: 0 0 100%;
        margin: 0 0 4px;
        font-size: 17px;
        line-height: 1.3;
    }
    .catalog-product-view .product-info-main-top .amshopby-option-link,
    .catalog-product-view .product-info-main-top .info-after-title {
        margin: 0;
        font-size: 13px;
    }

    /*
     * Ancho de la galeria (fotorama calcula el alto segun el ancho, asi no recorta la imagen):
     * 80% del contenedor en pantallas bajas, crece con el alto disponible hasta el 100%.
     * La misma variable se usa abajo para que las promociones no entren en la primera pantalla.
     */
    .catalog-product-view {
        --pdp-gal-w: clamp(calc(0.8 * (100vw - 30px)), calc(100vh - 560px), calc(100vw - 30px));
        --pdp-pantalla: 100vh;
    }
    @supports (height: 100svh) {
        .catalog-product-view {
            --pdp-gal-w: clamp(calc(0.8 * (100vw - 30px)), calc(100svh - 560px), calc(100vw - 30px));
            --pdp-pantalla: 100svh;
        }
    }
    .catalog-product-view .product-info-main-content .product.media {
        width: var(--pdp-gal-w);
        max-width: 100%;
        margin: 6px auto 0;
    }

    /*
     * Precio, stock, descripcion y promociones bancarias.
     * .product-info-stock-sku pasa a display: contents para que sus hijos queden al
     * mismo nivel que el overview y se puedan ordenar: precio > stock > overview > promos.
     */
    .catalog-product-view .product-info-price {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 22px;
        width: 100%;
        margin: 6px 0;
    }
    .catalog-product-view .product-info-price > .price-box {
        flex: 0 0 100%;
        order: 1;
    }
    .catalog-product-view .product-info-price .product-info-stock-sku {
        display: contents;
    }
    .catalog-product-view .product-info-stock-sku .stock,
    .catalog-product-view .product-info-stock-sku .availability.only {
        order: 2;
        margin: 4px 0 0;
    }
    /*
     * Alto minimo del overview: empuja las promociones por debajo de la barra fija de
     * "Agregar al carrito" (60px). 514px = cabecera + titulo + miniaturas + precio/stock + margen.
     */
    .catalog-product-view .product-info-price > .product.attribute.overview {
        flex: 0 0 100%;
        order: 3;
        margin: 20px 0 0;
        min-height: calc(var(--pdp-pantalla) - 514px - var(--pdp-gal-w));
    }
    .catalog-product-view .product-info-stock-sku .block-static-block {
        flex: 0 0 100%;
        order: 4;
    }

    /* Cuotas de las promociones bancarias (el bloque CMS product-hl-hint las define en 18px / 14px) */
    .catalog-product-view .principal-cuotas h3,
    .catalog-product-view .secundaria-cuotas h3 {
        font-size: 13px;
        font-weight: 100;
        margin-bottom: 8px;
    }

    /* Sin el espacio extra que dejan los widgets CMS y el bloque de lista de regalos */
    .catalog-product-view .block-static-block.widget,
    .catalog-product-view .block-cms-link.widget {
        margin-bottom: 0;
    }
    .catalog-product-view .add-to-gift-registry-action {
        padding: 0;
        margin-top: 0;
    }
}

@media (max-width: 380px) {
    .catalog-product-view .product-info-main-top .page-title {
        font-size: 15px;
    }
}