/* ProductCardGrid.css — Grilla de tarjetas de producto. Nodos 3655:48882 (PC) y 3655:49084 (mobile);
   tablet sin nodo. Tipografía: site.css. */

/* --- Sección: fondo blanco a sangre completa. El relleno lateral va acá, no en el contenedor. --- */
.ProductCardGrid {
    width: 100%; /* Ocupa el ancho de la ventana. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    background-color: #ffffff; /* Fondo del diseño. */
    padding: 30px 48px; /* 30px arriba y abajo de sección; lados estándar. */
}

/* Contenido centrado dentro del techo del sitio: encabezado y grilla apilados. */
.ProductCardGrid-container {
    display: flex; /* Encabezado y grilla en columna. */
    flex-direction: column; /* En vertical. */
    gap: 16px; /* Separación del nodo 3655:48883. */
    max-width: var(--container-max-width); /* Techo del contenido. */
    margin-inline: auto; /* Centrado. */
}

/* --- Fila superior: encabezado a la izquierda y "Ver todos" a la derecha. --- */
.ProductCardGrid-top {
    display: flex; /* Encabezado y enlace en fila. */
    align-items: center; /* Centrados entre sí, como el nodo. */
    justify-content: space-between; /* Enlace al borde final. */
    gap: 16px; /* Aire mínimo entre ambos. */
}

.ProductCardGrid-top > .ProductCardGrid-header {
    flex: 1 1 auto; /* Toma el ancho que deja el enlace. */
}

/* "Ver todos": misma tipografía y flecha que la leyenda de las tarjetas. */
.ProductCardGrid-viewall,
.ProductCardGrid-viewall:link,
.ProductCardGrid-viewall:visited,
.ProductCardGrid-viewall:hover,
.ProductCardGrid-viewall:focus,
.ProductCardGrid-viewall:active {
    color: #222a30; /* Color del enlace estándar. */
    text-decoration: none; /* Nunca subrayado. */
}

.ProductCardGrid-viewall {
    display: inline-flex; /* Leyenda y flecha en línea. */
    align-items: center; /* Centradas entre sí. */
    flex: 0 1 auto; /* Cede ancho antes de desbordar. */
    gap: 6px; /* Separación estándar entre leyenda y flecha. */
    min-width: 0; /* Deja que el texto recorte. */
    max-width: 40%; /* El título conserva su sitio. */
    margin-left: auto; /* Al borde final aunque no haya encabezado. */
    font-size: 14px; /* Tamaño del enlace estándar. */
    font-weight: 700; /* Bold. */
    line-height: normal; /* Interlineado estándar. */
    transition: gap 0.2s ease-in-out; /* Animación estándar de la flecha. */
}

.ProductCardGrid-viewall:hover,
.ProductCardGrid-viewall:focus-visible {
    gap: 10px; /* La flecha se corre. */
}

.ProductCardGrid-viewall:focus-visible {
    outline: 2px solid #429cde; /* Anillo de foco visible. */
    outline-offset: 2px; /* Separado del texto. */
}

/* Hasta dos renglones con puntos suspensivos, como el título de la tarjeta. */
.ProductCardGrid-viewall-text {
    display: -webkit-box; /* Necesario para el recorte por renglones. */
    -webkit-box-orient: vertical; /* Ídem. */
    -webkit-line-clamp: 2; /* Tope de renglones. */
    line-clamp: 2; /* Ídem, versión estándar. */
    overflow: hidden; /* Recorta lo que sobra con puntos suspensivos. */
    min-width: 0; /* Deja que el texto recorte. */
    overflow-wrap: anywhere; /* Parte también dentro de una palabra si hace falta. */
}

/* --- Encabezado. --- */
.ProductCardGrid-header {
    display: flex; /* Eyebrow y título apilados. */
    flex-direction: column; /* En vertical. */
    align-items: flex-start; /* Pegados al borde de inicio. */
    gap: 10px; /* Misma separación que TextImageSection. */
    min-width: 0; /* No fuerza el ancho. */
}

/* Ninguna pieza pasa del ancho: una palabra sin espacios no ensancha el encabezado. */
.ProductCardGrid-header > * {
    max-width: 100%; /* Techo del ancho del contenedor. */
}

/* Etiqueta con el cuadrado de marca: misma que TextImageSection. */
.ProductCardGrid-eyebrow {
    display: flex; /* Cuadrado y texto en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 10px; /* Separación del diseño. */
    margin: 0; /* El 0 es obligatorio: es un <p> usado como ítem de flex. */
}

/* Cuadrado de la etiqueta. */
.ProductCardGrid-eyebrow-mark {
    flex-shrink: 0; /* No se comprime. */
    width: 7px; /* Lado del diseño. */
    height: 7px; /* Cuadrado. */
    background-color: var(--color-cool-neutral-02); /* #243746 del diseño. */
}

/* Texto de la etiqueta. */
.ProductCardGrid-eyebrow-text {
    font-size: 14px; /* Tamaño del diseño. */
    font-weight: 700; /* Bold del diseño. */
    line-height: 1.35; /* Interlineado del diseño. */
    letter-spacing: 0.5px; /* Apertura del diseño. */
    text-transform: uppercase; /* Se lee como etiqueta. */
    color: var(--color-cool-neutral-02); /* #243746 del diseño. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* Título de la sección. */
.ProductCardGrid-title {
    margin: 0; /* La separación la da el gap del encabezado. */
    font-size: 24px; /* Tamaño del nodo 3655:48886. */
    font-weight: 600; /* Semibold del diseño. */
    line-height: 1.25; /* Interlineado del nodo. */
    color: #0f0f12; /* Casi negro del diseño. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* --- Grilla: de 1 a 6 tarjetas por fila en escritorio (4 por defecto), todas del mismo ancho. --- */
.ProductCardGrid--cols-1 { --pcg-cols: 1; } /* Una por fila. */
.ProductCardGrid--cols-2 { --pcg-cols: 2; } /* Dos por fila. */
.ProductCardGrid--cols-3 { --pcg-cols: 3; } /* Tres por fila. */
.ProductCardGrid--cols-5 { --pcg-cols: 5; } /* Cinco por fila. */
.ProductCardGrid--cols-6 { --pcg-cols: 6; } /* Seis por fila. */

.ProductCardGrid-grid {
    display: grid; /* Filas de tarjetas. */
    grid-template-columns: repeat(var(--pcg-cols, 4), minmax(0, 1fr)); /* Columnas iguales que llenan el ancho. */
    grid-auto-rows: auto; /* Cada fila con el alto de SU tarjeta más alta: iguales dentro de la fila, no entre filas. */
    gap: 20px; /* Separación del nodo 3655:48889. */
}

/* Tamaño fijo (nodo 4944:5929): 184px por tarjeta, alineadas al inicio; se encogen si no caben. */
.ProductCardGrid--size-fixed .ProductCardGrid-grid {
    grid-template-columns: repeat(var(--pcg-cols, 4), minmax(0, 184px)); /* Ancho tope de la tarjeta. */
    justify-content: start; /* Sin estirarse a todo el ancho. */
}

/* --- Tarjeta. --- */
.ProductCardGrid-card {
    display: flex; /* Miniatura y textos apilados. */
    flex-direction: column; /* En vertical. */
    position: relative; /* Bloque contenedor del enlace estirado. */
    min-width: 0; /* No fuerza el ancho de la columna. */
    overflow: hidden; /* La miniatura respeta las esquinas. */
    box-sizing: border-box; /* El borde entra en el ancho. */
    background-color: #ffffff; /* Fondo del diseño. */
    border: 1px solid rgba(15, 15, 18, 0.09); /* Borde del diseño. */
    border-radius: 12px; /* Esquinas del diseño. */
}

/* Enlace del título: los cinco estados para ganarle al a:hover de Bootstrap. */
.ProductCardGrid-card-link,
.ProductCardGrid-card-link:link,
.ProductCardGrid-card-link:visited,
.ProductCardGrid-card-link:hover,
.ProductCardGrid-card-link:focus,
.ProductCardGrid-card-link:active {
    color: inherit; /* Toma el color del título. */
    text-decoration: none; /* Nunca subrayado. */
    outline: none; /* El anillo de foco lo dibuja la tarjeta. */
}

.ProductCardGrid-card-link {
    display: block; /* El span recortado es de nivel bloque. */
}

/* Clic estirado a toda la tarjeta. */
.ProductCardGrid-card-link::after {
    content: ""; /* Necesario para que exista. */
    position: absolute; /* Contra la tarjeta. */
    inset: 0; /* Cubre la tarjeta entera. */
    z-index: 2; /* Encima de la miniatura y los textos. */
}

/* Anillo de foco en la tarjeta entera, como cuando la tarjeta era el enlace. */
.ProductCardGrid-card--link:has(.ProductCardGrid-card-link:focus-visible) {
    outline: 2px solid #429cde; /* Anillo de foco visible. */
    outline-offset: 2px; /* Separado del borde. */
}

/* Recuadro de la miniatura: alto fijo para que todas las tarjetas midan lo mismo. */
.ProductCardGrid-card-media {
    flex: none; /* No se comprime. */
    height: 190px; /* Alto del nodo. */
    overflow: hidden; /* Recorta el acercamiento. */
    background: linear-gradient(157deg, #f2f1ef 7%, #e1e0de 79%); /* Fondo de producto, mismo que BrandFilteredProductCarousel. */
}

/* Fondo blanco elegido por el editor. */
.ProductCardGrid--media-white .ProductCardGrid-card-media {
    background: #ffffff; /* Reemplaza el degradado gris. */
}

.ProductCardGrid-card-image {
    display: block; /* Sin el hueco de línea de un img en línea. */
    width: 100%; /* Llena el recuadro. */
    height: 100%; /* Ídem. */
    max-width: none; /* Anula el max-width de Bootstrap. */
    object-fit: contain; /* El producto entero, sin recortar. */
    transition: transform 0.3s ease-in-out; /* Acercamiento suave. */
}

/* Acercamiento sutil de la foto: solo la tarjeta con enlace. */
.ProductCardGrid-card--link:hover .ProductCardGrid-card-image,
.ProductCardGrid-card--link:has(.ProductCardGrid-card-link:focus-visible) .ProductCardGrid-card-image {
    transform: scale(1.05); /* Acercamiento estándar. */
}

/* Textos de la tarjeta. */
.ProductCardGrid-card-body {
    display: flex; /* Título, texto y leyenda apilados. */
    flex-direction: column; /* En vertical. */
    flex: 1; /* Ocupa el resto del alto de la tarjeta. */
    gap: 5px; /* Separación del nodo. */
    padding: 15px 18px 18px; /* Arriba, lados y abajo del nodo. */
    min-width: 0; /* No fuerza el ancho. */
}

/* Nombre y descripción. */
.ProductCardGrid-card-title,
.ProductCardGrid-card-text {
    margin: 0; /* Sin el margen del navegador. */
    font-size: 13px; /* Tamaño del nodo. */
    font-weight: 600; /* Semibold del diseño. */
    line-height: 1.3; /* Interlineado del nodo. */
    overflow-wrap: anywhere; /* Parte también dentro de una palabra si hace falta. */
}

/* Hasta dos renglones con puntos suspensivos. En el título va en el span: el h3 no recorta el ::after. */
.ProductCardGrid-card-title-text,
.ProductCardGrid-card-text {
    display: -webkit-box; /* Necesario para el recorte por renglones. */
    -webkit-box-orient: vertical; /* Ídem. */
    -webkit-line-clamp: 2; /* Tope de renglones. */
    line-clamp: 2; /* Ídem, versión estándar. */
    overflow: hidden; /* Recorta lo que sobra con puntos suspensivos. */
}

.ProductCardGrid-card-title {
    color: #0f0f12; /* Casi negro del diseño. */
}

.ProductCardGrid-card-text {
    color: rgba(15, 15, 18, 0.45); /* Gris del diseño. */
}

/* SKU: un renglón reservado aunque falte, para no correr la descripción entre tarjetas. */
.ProductCardGrid-card-sku {
    margin: 0; /* Sin el margen del navegador. */
    font-size: 12px; /* Un punto menos que el nombre. */
    font-weight: 600; /* Semibold, como los demás textos de la tarjeta. */
    line-height: 1.3; /* Mismo interlineado. */
    min-height: 1.3em; /* Un renglón reservado. */
    color: rgba(15, 15, 18, 0.45); /* Gris de la descripción. */
    white-space: nowrap; /* Un solo renglón. */
    overflow: hidden; /* Recorta lo que sobra. */
    text-overflow: ellipsis; /* Con puntos suspensivos. */
}

/* Leyenda del enlace, con el formato del enlace de TextImageSection. */
.ProductCardGrid-card-cta {
    display: inline-flex; /* Leyenda y flecha en línea. */
    align-items: center; /* Centradas entre sí. */
    align-self: flex-start; /* Solo el ancho de su texto. */
    gap: 6px; /* Separación estándar entre leyenda y flecha. */
    margin-top: auto; /* Al pie de la tarjeta: alineada en toda la fila. */
    padding-top: 7px; /* 12px en total sobre la descripción. */
    font-size: 14px; /* Tamaño del enlace estándar. */
    font-weight: 700; /* Bold. */
    line-height: normal; /* Interlineado del nodo del enlace. */
    color: #222a30; /* Color del enlace estándar. */
    transition: gap 0.2s ease-in-out; /* Animación estándar de LegalLinksSection. */
}

/* La flecha se corre al abrir la separación con el hover o el foco de la tarjeta. */
.ProductCardGrid-card--link:hover .ProductCardGrid-card-cta,
.ProductCardGrid-card--link:has(.ProductCardGrid-card-link:focus-visible) .ProductCardGrid-card-cta {
    gap: 10px; /* Separación estándar en hover y foco. */
}

/* Flecha estándar de LegalLinksSection. */
.ProductCardGrid-arrow {
    width: 14px; /* Tamaño estándar. */
    height: 14px; /* Cuadrada. */
    flex: none; /* No se comprime. */
    fill: none; /* Solo trazo. */
    stroke: currentColor; /* Toma el color de la leyenda. */
    stroke-width: 2.75; /* Grosor estándar. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértice redondeado. */
}

/* --- Botón de leer más: mismo estilo que el de ImageCardGrid. --- */
.ProductCardGrid-card-toggle {
    position: relative; /* Para subirlo por encima del enlace estirado. */
    z-index: 3; /* El clic es del botón, no del enlace. */
    align-self: flex-start; /* Solo el ancho de su texto. */
    margin: 0; /* La separación la da el gap. */
    padding: 0; /* Sin el relleno del navegador. */
    border: 0; /* Sin el borde del navegador. */
    background: none; /* Sin el fondo del navegador. */
    font: inherit; /* Familia del sitio. */
    font-size: 13px; /* Tamaño del de ImageCardGrid. */
    font-weight: 600; /* Semibold. */
    line-height: 1.3; /* Interlineado. */
    color: #243746; /* Azul de marca. */
    text-decoration: none; /* Sin subrayado en ningún estado. */
    cursor: pointer; /* Mano de clic. */
}

.ProductCardGrid-card-toggle[hidden] {
    display: none; /* El atributo hidden le gana al display propio. */
}

.ProductCardGrid-card-toggle:focus-visible {
    outline: 2px solid #429cde; /* Anillo de foco visible. */
    outline-offset: 2px; /* Separado del texto. */
    border-radius: 2px; /* Esquinas del anillo. */
}

/* Abierta: los textos completos. */
.ProductCardGrid-card.is-expanded [data-card-clamp] {
    display: block; /* Sin el modelo del recorte. */
    -webkit-line-clamp: unset; /* Sin tope. */
    line-clamp: none; /* Ídem. */
    overflow: visible; /* Sin recorte. */
    white-space: normal; /* El SKU también parte de renglón. */
}

.ProductCardGrid-card.is-frozen {
    align-self: start; /* No se estira con la abierta. */
    height: var(--card-height); /* Alto que tenía cerrada. */
}

.ProductCardGrid-card.is-expanded {
    align-self: start; /* Crece con sus textos. */
    min-height: var(--card-height); /* Nunca más baja que las demás. */
}

/* --- Tablet: hasta 1024px. Sin nodo: tres columnas. --- */
@media (max-width: 1024px) {

    .ProductCardGrid {
        padding: 30px 40px; /* 30px arriba y abajo; lados de tablet. */
    }

    .ProductCardGrid-title {
        font-size: 22px; /* Entre el de PC y el de mobile. */
    }

    .ProductCardGrid-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)); /* Tres columnas iguales. */
        gap: 16px; /* Separación de tablet. */
    }

    .ProductCardGrid--size-fixed .ProductCardGrid-grid {
        grid-template-columns: repeat(3, minmax(0, 184px)); /* Tres de tamaño fijo. */
    }
}

/* --- Mobile: hasta 500px. Dos columnas. --- */
@media (max-width: 500px) {

    .ProductCardGrid {
        padding: 30px 20px; /* 30px arriba y abajo; lados de mobile. */
    }

    .ProductCardGrid-top {
        flex-direction: column; /* "Ver todos" debajo del título, como el nodo 4944:6138. */
        align-items: flex-start; /* Pegados al borde de inicio. */
        gap: 0; /* El nodo no las separa. */
    }

    .ProductCardGrid-viewall {
        max-width: 100%; /* Toda la fila disponible. */
        margin-left: 0; /* A la izquierda. */
    }

    .ProductCardGrid-header {
        gap: 12px; /* Separación del nodo 3655:49087. */
    }

    .ProductCardGrid-title {
        font-size: 20px; /* Tamaño del nodo 3655:49088. */
    }

    .ProductCardGrid-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* Dos columnas iguales. */
        gap: 16px 12px; /* Filas y columnas del nodo 3655:49091. */
    }

    .ProductCardGrid--size-fixed .ProductCardGrid-grid {
        grid-template-columns: repeat(2, minmax(0, 160px)); /* Dos de 160px, nodo 4944:6144. */
    }
}

/* Sin animación para quien la desactivó en el sistema. */
@media (prefers-reduced-motion: reduce) {

    .ProductCardGrid-viewall,
    .ProductCardGrid-card-cta,
    .ProductCardGrid-card-image {
        transition: none; /* Sin interpolación: el acercamiento es instantáneo. */
    }

    .ProductCardGrid-card--link:hover .ProductCardGrid-card-cta,
    .ProductCardGrid-card--link:has(.ProductCardGrid-card-link:focus-visible) .ProductCardGrid-card-cta {
        gap: 6px; /* La flecha no se corre. */
    }
}