/**
 * 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.
 */
.tocart-resumen {
    display: none;
}

@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%.
     */
    .catalog-product-view {
        --pdp-gal-w: clamp(calc(0.8 * (100vw - 30px)), calc(100vh - 560px), calc(100vw - 30px));
    }
    @supports (height: 100svh) {
        .catalog-product-view {
            --pdp-gal-w: clamp(calc(0.8 * (100vw - 30px)), calc(100svh - 560px), calc(100vw - 30px));
        }
    }
    .catalog-product-view .product-info-main-content .product.media {
        width: var(--pdp-gal-w);
        max-width: 100%;
        margin: 6px auto 0;
    }

    /*
     * Puntos tipo carrusel en vez de miniaturas (nav "dots" en etc/view.xml), con el estilo
     * de los .owl-dots de la home. El tema reserva el alto de las miniaturas con !important.
     */
    .catalog-product-view .product.media .gallery-placeholder.imgs {
        padding-bottom: calc(var(--pad-product) + 20px) !important;
    }
    .catalog-product-view .product.media .gallery-placeholder .thumb-pl {
        display: none;
    }
    /* Sin el bottom: 0 del tema, que sube los puntos y los pega a la imagen */
    .catalog-product-view .product.media .fotorama__nav-wrap {
        margin: 0;
        bottom: auto;
    }
    .catalog-product-view .product.media .fotorama__nav--dots {
        height: 20px !important;
    }
    /* fotorama pone en linea el ancho y el margen de las miniaturas (66px + 10px) */
    .catalog-product-view .product.media .fotorama__nav--dots .fotorama__nav__frame {
        width: 16px !important;
        height: 20px !important;
        margin: 0 !important;
    }
    .catalog-product-view .product.media .fotorama__dot {
        top: 6px;
        left: 4px;
        width: 8px;
        height: 8px;
        border: 0;
        border-radius: 50%;
        background-color: #d6d6d6;
    }
    .catalog-product-view .product.media .fotorama__active .fotorama__dot {
        background-color: #fcb800;
    }

    /*
     * 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;
    }
    .catalog-product-view .product-info-price > .product.attribute.overview {
        flex: 0 0 100%;
        order: 3;
        margin: 20px 0 0;
    }
    .catalog-product-view .product-info-stock-sku .block-static-block {
        flex: 0 0 100%;
        order: 4;
    }

    /*
     * Barra fija de "Agregar al carrito": precio y stock a la izquierda, boton a la derecha.
     * Sin cantidad (se cambia en el carrito) ni lista de deseos.
     */
    .catalog-product-view .box-tocart {
        padding: 0 15px env(safe-area-inset-bottom, 0px);
        border-top: 1px solid #e8e8e8;
        box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08);
    }
    .catalog-product-view .box-tocart .fieldset-add {
        flex-wrap: nowrap;
        align-items: center;
        column-gap: 12px;
        padding: 10px 0;
    }
    .catalog-product-view .box-tocart .field,
    .catalog-product-view .box-tocart .towishlist,
    .catalog-product-view .box-tocart #instant-purchase {
        display: none;
    }
    .catalog-product-view .box-tocart .actions {
        flex: 0 0 auto;
    }
    /*
     * Ancho fijo (el de "Agregar al carrito"): los textos "Agregando..." y "Agregado"
     * son mas cortos y si el boton se achica el precio y el stock se reacomodan.
     */
    .catalog-product-view .box-tocart .actions .tocart {
        width: 154px;
        min-width: 0;
        height: 46px;
        margin: 0;
        padding: 0 20px;
        border-radius: 8px;
        font-size: 15px;
        font-weight: 600;
        text-align: center;
        white-space: nowrap;
        text-transform: none;
    }
    .catalog-product-view .tocart-resumen {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        row-gap: 4px;
        min-width: 0;
        line-height: 1.2;
    }
    .catalog-product-view .tocart-resumen .price-box {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 6px;
        margin: 0;
    }
    .catalog-product-view .tocart-resumen .price-box > * {
        margin: 0;
    }
    .catalog-product-view .tocart-resumen .price-box .price {
        font-size: 2rem;
        font-weight: 700;
        white-space: nowrap;
    }
    /*
     * Tachado fino y mas bajo: el line-through del tema se calcula sobre .old-price (16px)
     * y cruza los numeros por el medio, donde se distinguen el 3, el 8 y el 9.
     */
    .catalog-product-view .tocart-resumen .price-box .old-price {
        text-decoration: none;
    }
    .catalog-product-view .tocart-resumen .price-box .old-price .price {
        background: linear-gradient(currentColor, currentColor) no-repeat 0 66% / 100% 1px;
        font-size: 14px;
        font-weight: 400;
        color: #999;
    }
    .catalog-product-view .tocart-resumen .price-box .price-label {
        font-size: 12px;
        color: #777;
    }
    /* Stock como texto (sin la etiqueta verde) y "Solo quedan" en naranja */
    .catalog-product-view .tocart-resumen-stock {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 10px;
        font-size: 13px;
    }
    .catalog-product-view .tocart-resumen-stock > .stock,
    .catalog-product-view .tocart-resumen-stock > .availability.only {
        margin: 0;
        padding: 0;
        font-size: 13px;
    }
    .catalog-product-view .tocart-resumen-stock > .stock.available,
    .catalog-product-view .tocart-resumen-stock > .stock.available span {
        display: inline-flex;
        align-items: center;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        color: #4c8c0a;
        font-weight: 600;
    }
    .catalog-product-view .tocart-resumen-stock > .stock.available span:before {
        content: '';
        width: 7px;
        height: 7px;
        margin-right: 5px;
        border-radius: 50%;
        background-color: currentColor;
    }
    .catalog-product-view .tocart-resumen-stock > .availability.only {
        color: #c45500;
    }
    /*
     * En configurables el inventario lo oculta dentro de .product-info-stock-sku hasta elegir
     * una variante (muestra "%1"); su JS lo hace visible con la cantidad real.
     */
    .catalog-product-view .tocart-resumen-stock > .configurable-variation-qty {
        display: none;
    }
    /* Burbuja del asistente (Standard_AiChatbot) por encima de la barra; el modulo la posiciona inline */
    .catalog-product-view:has(.box-tocart) #aichatbot-launcher {
        bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* 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 */
    .catalog-product-view .block-static-block.widget,
    .catalog-product-view .block-cms-link.widget {
        margin-bottom: 0;
    }

    /* Opciones de color / talle sin el margen del tema (20px arriba y abajo) */
    .catalog-product-view .swatch-opt {
        margin: 0;
    }

    /* Categorias debajo de la info del producto, sin el margen superior del tema (20px) */
    .catalog-product-view .cat-links {
        margin-top: 0;
    }
}

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