/*
 * Tarjetas de producto dentro de "Coleccion abierta".
 * Esta hoja es la fuente de verdad del componente y se carga despues de
 * estilos.css para aislarlo de reglas historicas del catalogo.
 */

.collection-zoom-products {
    /* Proporciones de la versión publicada en umbrale.ar (b577). */
    --collection-card-rest-height: 620px;
    --collection-card-rest-image: 458px;
    --collection-card-open-image: 318px;
    --collection-card-motion: .52s;
    --collection-card-ease: cubic-bezier(.22, .75, .18, 1);
}

@keyframes umbrale-buy-light-pulse {
    0%, 100% {
        border-color: rgba(244, 199, 117, .82);
        box-shadow:
            inset 0 1px 0 rgba(255, 238, 204, .12),
            0 0 8px rgba(208, 160, 99, .13),
            0 0 18px rgba(208, 160, 99, .08);
        filter: brightness(1);
    }
    50% {
        border-color: rgba(255, 225, 168, 1);
        box-shadow:
            inset 0 1px 0 rgba(255, 247, 229, .24),
            0 0 12px rgba(235, 190, 111, .38),
            0 0 28px rgba(208, 160, 99, .22);
        filter: brightness(1.12);
    }
}

@media (min-width: 701px) and (pointer: fine) {
    /* Productos conserva sus proporciones ya aprobadas. */
    .dynamic-space .product-strip:not(.product-strip-collapsed) {
        height: 394px !important;
        min-height: 394px !important;
        max-height: 394px !important;
    }

    .dynamic-space .product-strip:not(.product-strip-collapsed) .product-strip-row,
    .dynamic-space .product-strip:not(.product-strip-collapsed) .product-strip-card {
        height: 300px !important;
        min-height: 300px !important;
        max-height: 300px !important;
    }

    /* Colecciones recibe espacio real para mostrar las bajadas completas. */
    .dynamic-space .catalog:not(.collections-collapsed) {
        height: 442px !important;
        min-height: 442px !important;
        max-height: 442px !important;
    }

    .dynamic-space .catalog:not(.collections-collapsed) > .cover-cards,
    .dynamic-space .catalog:not(.collections-collapsed) .cover-card {
        height: 348px !important;
        min-height: 348px !important;
        max-height: 348px !important;
    }

    .dynamic-space .catalog:not(.collections-collapsed) .cover-card .card-img,
    .dynamic-space .product-strip:not(.product-strip-collapsed) .product-strip-card .card-img {
        flex: 0 0 230px !important;
        height: 230px !important;
        min-height: 230px !important;
        max-height: 230px !important;
    }

    .dynamic-space .product-strip:not(.product-strip-collapsed) .product-strip-card .card-info {
        flex: 0 0 70px !important;
        height: 70px !important;
        min-height: 70px !important;
        max-height: 70px !important;
    }

    .dynamic-space .catalog:not(.collections-collapsed) .cover-card .card-info {
        flex: 0 0 118px !important;
        height: 118px !important;
        min-height: 118px !important;
        max-height: 118px !important;
    }

    .collection-zoom-products {
        align-items: start !important;
        grid-auto-rows: var(--collection-card-rest-height) !important;
        interpolate-size: allow-keywords;
    }

    .collection-zoom-products .product-card {
        position: relative !important;
        z-index: 1 !important;
        align-self: start !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        height: var(--collection-card-rest-height) !important;
        min-height: var(--collection-card-rest-height) !important;
        max-height: none !important;
        overflow: hidden !important;
        transition:
            z-index 0s linear calc(var(--collection-card-motion) + .04s),
            height var(--collection-card-motion) var(--collection-card-ease),
            transform var(--collection-card-motion) var(--collection-card-ease),
            border-color .34s ease,
            box-shadow .38s ease,
            filter .38s ease !important;
    }

    .collection-zoom-products .product-card:hover,
    .collection-zoom-products .product-card:focus-within {
        z-index: 80 !important;
        height: max-content !important;
        min-height: var(--collection-card-rest-height) !important;
        max-height: none !important;
        transform: translate3d(0, -3px, 0) scale(1.012) !important;
        transition:
            z-index 0s linear 0s,
            height var(--collection-card-motion) var(--collection-card-ease),
            transform var(--collection-card-motion) var(--collection-card-ease),
            border-color .34s ease,
            box-shadow .38s ease,
            filter .38s ease !important;
    }

    .collection-zoom-products .product-card .card-img {
        flex: 0 0 var(--collection-card-rest-image) !important;
        height: var(--collection-card-rest-image) !important;
        min-height: var(--collection-card-rest-image) !important;
        max-height: var(--collection-card-rest-image) !important;
        transition:
            flex-basis var(--collection-card-motion) var(--collection-card-ease),
            height var(--collection-card-motion) var(--collection-card-ease),
            min-height var(--collection-card-motion) var(--collection-card-ease),
            max-height var(--collection-card-motion) var(--collection-card-ease),
            filter .42s ease !important;
    }

    .collection-zoom-products .product-card:hover .card-img,
    .collection-zoom-products .product-card:focus-within .card-img {
        flex-basis: var(--collection-card-open-image) !important;
        height: var(--collection-card-open-image) !important;
        min-height: var(--collection-card-open-image) !important;
        max-height: var(--collection-card-open-image) !important;
    }

    .collection-zoom-products .product-card .card-info {
        box-sizing: border-box !important;
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 10px 13px 12px !important;
        overflow: hidden !important;
        justify-content: flex-start !important;
        transform: translateY(0) !important;
        transition: transform var(--collection-card-motion) var(--collection-card-ease) !important;
    }

    .collection-zoom-products .product-card .product-category {
        min-height: 14px !important;
        margin: 0 0 4px !important;
    }

    .collection-zoom-products .product-card .card-info h3 {
        min-height: 20px !important;
        max-height: 40px !important;
        margin: 0 0 4px !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
    }

    .collection-zoom-products .product-card .product-description {
        min-height: 38px !important;
        max-height: 38px !important;
        margin: 4px 0 0 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
    }

    .collection-zoom-products .product-card .product-buy-button {
        flex: 0 0 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        margin: auto 0 0 !important;
        border-color: rgba(244, 199, 117, .92) !important;
        background:
            linear-gradient(180deg, rgba(214, 162, 82, .28), rgba(118, 75, 25, .18)) !important;
        color: #fff0cf !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 238, 204, .12),
            0 0 14px rgba(208, 160, 99, .16) !important;
        font-weight: 700 !important;
        transition:
            border-color .22s ease,
            background .22s ease,
            color .22s ease,
            box-shadow .22s ease !important;
    }

    .collection-zoom-products .product-card .product-buy-button:hover,
    .collection-zoom-products .product-card .product-buy-button:focus-visible {
        border-color: rgba(255, 222, 161, 1) !important;
        background:
            linear-gradient(180deg, rgba(232, 182, 103, .38), rgba(139, 88, 29, .24)) !important;
        color: #fff8e8 !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 246, 226, .18),
            0 0 18px rgba(222, 170, 91, .28) !important;
    }

    .collection-zoom-products .product-card:hover .card-info,
    .collection-zoom-products .product-card:focus-within .card-info {
        flex: 0 0 300px !important;
        height: 300px !important;
        min-height: 300px !important;
        max-height: 300px !important;
        padding-top: 6px !important;
        padding-bottom: 8px !important;
        overflow: visible !important;
        justify-content: flex-start !important;
        transform: none !important;
    }

    .collection-zoom-products .product-card:hover .card-info > *,
    .collection-zoom-products .product-card:focus-within .card-info > * {
        flex-shrink: 0 !important;
    }

    .collection-zoom-products .product-card:hover .card-info h3,
    .collection-zoom-products .product-card:focus-within .card-info h3 {
        min-height: 0 !important;
        max-height: none !important;
        display: block !important;
        -webkit-line-clamp: unset !important;
        overflow: visible !important;
    }

    /*
     * La descripcion reserva siempre cuatro renglones. Asi las acciones quedan
     * alineadas sin empujar todo el contenido hacia arriba o hacia abajo.
     */
    .collection-zoom-products .product-card:hover .product-description,
    .collection-zoom-products .product-card:focus-within .product-description {
        min-height: 75px !important;
        max-height: 75px !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 4 !important;
        overflow: hidden !important;
    }

    .collection-zoom-products .product-card:hover .product-category,
    .collection-zoom-products .product-card:focus-within .product-category {
        margin-bottom: 4px !important;
    }

    .collection-zoom-products .product-card:hover .card-info h3,
    .collection-zoom-products .product-card:focus-within .card-info h3 {
        margin-bottom: 3px !important;
    }

    .collection-zoom-products .product-card:hover .product-description,
    .collection-zoom-products .product-card:focus-within .product-description {
        margin: 4px 0 !important;
    }

    .collection-zoom-products .product-card:hover .product-inline-code,
    .collection-zoom-products .product-card:focus-within .product-inline-code,
    .collection-zoom-products .product-card:hover .product-measures,
    .collection-zoom-products .product-card:focus-within .product-measures {
        margin: 4px 0 0 !important;
    }

    .collection-zoom-products .product-card:hover .product-buy-button,
    .collection-zoom-products .product-card:focus-within .product-buy-button,
    .collection-zoom-products .product-card:hover .price-row,
    .collection-zoom-products .product-card:focus-within .price-row,
    .collection-zoom-products .product-card:hover .cart-control,
    .collection-zoom-products .product-card:focus-within .cart-control {
        margin-top: 6px !important;
    }

    .collection-zoom-products .product-card:hover .product-buy-button,
    .collection-zoom-products .product-card:focus-within .product-buy-button {
        animation: umbrale-buy-light-pulse 2.35s ease-in-out infinite !important;
    }

    .collection-zoom-products .product-card:hover .price-row,
    .collection-zoom-products .product-card:focus-within .price-row {
        margin-top: auto !important;
    }
}

/*
 * En celular no existe el hover real: la ficha debe mostrar toda la compra
 * en flujo normal. Estas reglas aíslan el ajuste móvil de las proporciones
 * aprobadas para escritorio y evitan que descripción, código y medidas se
 * superpongan por las transiciones históricas del componente.
 */
@media (max-width: 700px) {
    .collection-zoom-products {
        align-items: start !important;
        grid-auto-rows: 642px !important;
    }

    .collection-zoom-products .product-card,
    .collection-zoom-products .product-card:hover,
    .collection-zoom-products .product-card:focus-within {
        align-self: start !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
        transform: none !important;
    }

    .collection-zoom-products .product-card .card-img,
    .collection-zoom-products .product-card:hover .card-img,
    .collection-zoom-products .product-card:focus-within .card-img {
        flex: 0 0 300px !important;
        height: 300px !important;
        min-height: 300px !important;
        max-height: 300px !important;
    }

    .collection-zoom-products .product-card .card-info,
    .collection-zoom-products .product-card:hover .card-info,
    .collection-zoom-products .product-card:focus-within .card-info {
        box-sizing: border-box !important;
        display: flex !important;
        flex: 0 0 340px !important;
        flex-direction: column !important;
        height: 340px !important;
        min-height: 340px !important;
        max-height: 340px !important;
        padding: 10px 14px 12px !important;
        overflow: hidden !important;
        justify-content: flex-start !important;
        transform: none !important;
    }

    .collection-zoom-products .product-card .card-info > * {
        position: static !important;
        flex-shrink: 0 !important;
        transform: none !important;
    }

    .collection-zoom-products .product-card .product-category {
        min-height: 14px !important;
        margin: 0 0 4px !important;
    }

    .collection-zoom-products .product-card .card-info h3 {
        min-height: 40px !important;
        max-height: 40px !important;
        margin: 0 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
    }

    .collection-zoom-products .product-card .product-description,
    .collection-zoom-products .product-card:hover .product-description,
    .collection-zoom-products .product-card:focus-within .product-description {
        min-height: 72px !important;
        max-height: 72px !important;
        margin: 4px 0 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 4 !important;
        overflow: hidden !important;
    }

    .collection-zoom-products .product-card .product-inline-code,
    .collection-zoom-products .product-card .product-measures,
    .collection-zoom-products .product-card .price-row,
    .collection-zoom-products .product-card .cart-control,
    .collection-zoom-products .product-card .cart-control.has-items {
        visibility: visible !important;
        pointer-events: auto !important;
        opacity: 1 !important;
        overflow: visible !important;
        transform: none !important;
    }

    .collection-zoom-products .product-card .product-inline-code {
        max-height: 18px !important;
        margin: 4px 0 0 !important;
    }

    .collection-zoom-products .product-card .product-measures {
        max-height: 22px !important;
        margin: 4px 0 0 !important;
    }

    .collection-zoom-products .product-card .price-row {
        max-height: 42px !important;
        margin-top: auto !important;
        padding-top: 7px !important;
        border-color: rgba(176,122,63,.18) !important;
    }

    .collection-zoom-products .product-card .product-buy-button,
    .collection-zoom-products .product-card:hover .product-buy-button,
    .collection-zoom-products .product-card:focus-within .product-buy-button {
        flex: 0 0 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        margin-top: 7px !important;
        animation: none !important;
    }

    .collection-zoom-products .product-card .cart-control,
    .collection-zoom-products .product-card .cart-control.has-items {
        max-height: 42px !important;
        height: 42px !important;
        margin-top: 7px !important;
        padding-bottom: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .collection-zoom-products .product-card,
    .collection-zoom-products .product-card .card-img,
    .collection-zoom-products .product-card .card-info {
        transition: none !important;
    }

    .collection-zoom-products .product-card .product-buy-button {
        animation: none !important;
    }
}