/**
 *  @author    Rekire <info@rekire.com>
 *  @copyright Rekire
 *  @license   http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */

.rkr_relational-container {
    padding-top: 1em;
    padding-bottom: 1em;
}

.rkr_relational-products {
    overflow-y: auto;
    overflow-x: unset;
}

.rkr_relational-container input[type=checkbox] {
    opacity: 0;
    z-index: -1;
    height: 1px;
    width: 1px;
    float: left;
}

.rkr_relational-container .rkr_flex {
    display: flex;
    margin-right: 0.4em;
}

.rkr_relational-container .rkr_flex-none {
    flex: none;
    /* text-align: right; */
}

.rkr_relational-container .rkr_flex-none span {
    text-align: right;
}

.rkr_relational-container .rkr_flex-auto {
    flex: 1 1 auto;
}

.rkr_relational-container .rkr_flex-1 {
    flex: 1;
}

.rkr_flex-col {
    flex-direction: column;
}

.rkr_flex-row {
    flex-direction: row;
}

.rkr_relational-container .rkr_tabs {
    border-radius: 8px;
    width: 100%;
}

.rkr_relational-container .rkr_tab {
    width: 100%;
    color: white;
    overflow: hidden;
}

.rkr_relational-container .rkr_tab-label {
    display: flex;
    justify-content: space-between;
    padding: 1em;
    background: #a3bfe2;
    /* El color del texto NO se heredaba: lo ponia el tema. En los que pintan
       las etiquetas en blanco, el nombre de la familia quedaba blanco sobre
       azul claro (y sobre 'antiquewhite' al abrir el grupo), es decir,
       ilegible. Se fija aqui para no depender del tema. */
    color: #2c3e50;
    font-weight: bold;
    cursor: pointer;
}

.rkr_relational-container .rkr_tab-label:hover {
    background: #607e94;
    color: #fff; /* el fondo del hover es oscuro; sin esto el texto no se lee */
}

.rkr_relational-container .rkr_tab-label::after {
    content: "❯";
    width: 1em;
    height: 1em;
    text-align: center;
    transition: all 0.35s;
}

.rkr_relational-container .rkr_tab-content {
    max-height: 0;
    padding: 0 0.2em;
    color: #2c3e50;
    background: white;
    transition: all 0.35s;
}

.rkr_relational-container .rkr_tab-close {
    display: flex;
    justify-content: flex-end;
    padding: 1em;
    font-size: 0.75em;
    background: #0a7ced;
    cursor: pointer;
}

.rkr_relational-container .rkr_tab-close:hover {
    background: #1a252f;
}

/* El grupo abierto tiene fondo claro tambien cuando el raton esta encima, asi
   que aqui hay que repetir el color del texto: si no, gana el :hover y el
   nombre de la familia queda blanco sobre 'antiquewhite'. */
.rkr_relational-container input:checked + .rkr_tab-label,
.rkr_relational-container input:checked + .rkr_tab-label:hover {
    background: antiquewhite;
    color: #2c3e50;
}

.rkr_relational-container input:checked + .rkr_tab-label::after {
    transform: rotate(90deg);
}

.rkr_relational-container input:checked ~ .rkr_tab-content {
    max-height: 100%;
    padding: 0.2em;
    overflow: hidden;
}

/* --> */
.rkr_relational-container .product-miniature.js-product-miniature.rkr_flex {
    display: flex;
    margin-right: 0.4em;
}

.rkr_relational-container .product-miniature {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.rkr_relational-container .product-miniature .thumbnail-container {
    position: relative;
    height: auto;
    margin-bottom: 1.563rem;
    overflow: hidden;
    background: #fff;
    width:unset;

    box-shadow: unset;
}

.rkr_relational-container .product-miniature .thumbnail-top {
    position: relative;
    overflow: hidden;
}

.rkr_relational-container .product-miniature .product-thumbnail {
    display: block;
}

.rkr_relational-container .product-miniature .thumbnail-container .product-thumbnail img {
    position: relative;
    display: block;
    max-width: 100%;
    height: auto;
    margin: auto;
}

.rkr_relational-container .product-miniature .thumbnail-container:hover .highlighted-informations.no-variants, .rkr_relational-container .product-miniature .thumbnail-container:focus .highlighted-informations.no-variants {
    top: calc(100% - 2.5rem);
}
.rkr_relational-container .product-miniature .thumbnail-container:hover .highlighted-informations, .rkr_relational-container  .product-miniature .thumbnail-container:focus .highlighted-informations {
    top: calc(100% - 4.4rem);
}

.rkr_relational-container .product-miniature .highlighted-informations {
    position: absolute;
    top: 100%;
    z-index: 2;
    width: 100%;
    /* height: auto; */
    padding: 0.625rem 0;
    text-align: center;
    background: rgb(255, 255, 255) none repeat scroll;
    transition: 0.3s;
}

.rkr_relational-container .product-miniature .product-description {
    position: relative;
    bottom: 0;
    height: auto;
    padding: 0.25rem;
    background: #fff;
}
/* <-- */

.rkr_relational-container h3.rkr_product-name {
    font-size: 1rem;
}

.rkr_relational-container .btn {
    white-space: normal;
}

.rkr_relational-container .rkr_tab-content .rkr_name_price, .rkr_relational-container .rkr_tab-content .rkr_cart-icon {
    align-self: center
}

.rkr_relational-container .btn-primary .material-icons, .rkr_relational-container .rkr_tab-content .btn-primary i {
    margin-right: unset;
}

.rkr_relational-container .rkr_tab-content .rkr_name_price p {
    margin-bottom: unset;
}

.rkr_relational-container .rkr_price_noimp {
    line-height: 0.8rem;
}

.rkr_relational-container .rkr_link-product-thumbnail {
    display: inline-block;
}

.rkr_relational-container .product-title, .rkr_relational-container .product-price-and-shipping {
    text-align: unset;
}

.rkr_relational-container .rkr_price {
    color: #ad1f00;
    padding-top: 0.4rem;
    display: inline-block;
}

.rkr_relational-container .product-item-buttons {
    padding-bottom: 1em;
}

.rkr_product-qty {
    display: inline-block;
    margin-right: 5px;
}

.rkr_product-qty input {
    max-width: 4em;
}

.rkr_relational-container .rkr_cart-icon-svg {
    width: 18px;
}

@media (min-width: 768px) {
    .rkr_cart-icon .add .btn {
        margin-top: unset;
    }

    .rkr_cart-icon .add {
        float: right;
    }
}

/* slider */
.rkr_relational-container .rkr-template-h_slider .swiper{
    background: #fff;
    width: 100%;
    height: 100%;
}

.rkr_relational-container .rkr-template-v_slider .swiper{
    background: #fff;
    width: 100%;
    height: 100%;
}

.rkr_relational-container .swiper-slide {
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.rkr_relational-container .rkr_relational-slider {
    margin-top: 1em;
    padding-top: 1em;
}

.rkr_relational-container .rkr-template-v_slider .product {
    padding-left: 55px;
    padding-right: 55px;
}

.rkr_relational-container .rkr_relational-slider .product-description {
    text-align: center;
}

.rkr_relational-container .rkr_title {
    padding-bottom: 0.3em;
}

/* La tarjeta en fila (foto a la izquierda, texto a la derecha) es la de la
   plantilla Default. En una zona ancha —el pie de la ficha— el texto se comia
   todo el espacio libre y el nombre quedaba a un extremo y el boton al otro,
   con medio metro de blanco en medio. Se le pone un ancho maximo: en columnas
   estrechas no cambia nada, porque ahi nunca se llega a ese ancho. */
.rkr_relational-container .rkr-template-default .product-miniature {
    max-width: 760px;
}

/* Carrusel agrupado: cada familia es un bloque con su titulo y su carrusel. */
.rkr_relational-container .rkr_relational-grupo {
    margin-bottom: 1.6em;
}

.rkr_relational-container .rkr_grupped_title-slider {
    margin: 0 0 0.4em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* En el carrusel horizontal la tarjeta se apila: foto arriba y texto debajo.
   La regla general de .product-miniature la pone en fila, que es lo que hace
   falta en el carrusel vertical (estrecho) pero deja la foto y el nombre en
   extremos opuestos cuando la diapositiva es ancha. */
.rkr_relational-container .rkr-template-h_slider .product-miniature {
    display: block;
}

/* La diapositiva deja de ser flex: con una tarjeta apilada dentro, el hijo se
   encogia a cero de ancho y la foto desaparecia. En bloque ocupa el ancho de
   la diapositiva y ademas las tarjetas quedan alineadas por arriba. */
.rkr_relational-container .rkr-template-h_slider .swiper-slide {
    display: block;
    text-align: center;
}

.rkr_relational-container .rkr-template-h_slider .swiper-slide .thumbnail-container {
    margin-bottom: 0.6rem;
}

/* Las flechas se pintan sobre el carrusel; sin este hueco tapan la primera y
   la ultima tarjeta de cada familia. */
.rkr_relational-container .rkr-template-h_slider .swiper {
    padding-left: 34px;
    padding-right: 34px;
}

.rkr_relational-container .rkr-template-h_slider .swiper-button-next,
.rkr_relational-container .rkr-template-h_slider .swiper-button-prev {
    width: 28px;
}

.rkr_relational-container .rkr-template-h_slider .swiper-button-next::after,
.rkr_relational-container .rkr-template-h_slider .swiper-button-prev::after {
    font-size: 22px;
}

.rkr_relational-container article .wishlist-button-add {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}

.rkr_relational-container .swiper-button-prev:hover::after, .rkr_relational-container .swiper-button-next:hover::after {
    color: darkblue;
}

.rkr_relational-container .rkr-template-v_slider .swiper-button-next {
    right: 20px;
    transform: rotate(90deg);
}

.rkr_relational-container .rkr-template-v_slider .swiper-button-prev {
    left: 20px;
    transform: rotate(90deg);
}

.rkr_relational-container .rkr-template-v_slider .thumbnail-container {
    margin-bottom: unset;
}

.rkr_relational-container .rkr-template-h_slider .rkr_product-action {
    justify-content: center;
}



/* ---------------------------------------------------------------- Rejilla --
   Plantilla «Grid»: una cabecera por familia -nombre y numero de productos- y
   debajo sus productos en rejilla. El numero de columnas llega como variables
   CSS desde la plantilla (--rkr-col-sm/md/lg/xl), que es lo que permite que el
   comerciante elija de 1 a 10 por tamano de pantalla sin generar una clase por
   combinacion.
   Los cortes son los mismos que anuncian las etiquetas del formulario:
   768, 992 y 1200. */
.rkr_relational-container .rkr_grid-familia + .rkr_grid-familia {
    margin-top: 2.5rem;
}

.rkr_relational-container .rkr_grid-cabecera {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.rkr_relational-container .rkr_grid-nombre {
    margin: 0 0 -1px;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid currentColor;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* La cuenta de productos de la familia. Va en un circulo discreto: informa sin
   competir con el nombre, que es lo que el cliente viene buscando. */
.rkr_relational-container .rkr_grid-cuenta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    margin-bottom: 0.3rem;
    padding: 0 0.4rem;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 999px;
    font-size: 0.8125rem;
    line-height: 1;
    opacity: 0.7;
}

.rkr_relational-container .rkr_grid-productos {
    display: grid;
    /* minmax(0, 1fr) y no 1fr a secas: con 1fr, un nombre de producto largo sin
       espacios ensancha su columna y descuadra la fila entera. */
    grid-template-columns: repeat(var(--rkr-col-sm, 1), minmax(0, 1fr));
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .rkr_relational-container .rkr_grid-productos {
        grid-template-columns: repeat(var(--rkr-col-md, 2), minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .rkr_relational-container .rkr_grid-productos {
        grid-template-columns: repeat(var(--rkr-col-lg, 3), minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .rkr_relational-container .rkr_grid-productos {
        grid-template-columns: repeat(var(--rkr-col-xl, 4), minmax(0, 1fr));
    }
}

/* La celda entera es la tarjeta, para que todas midan lo mismo en su fila y el
   boton de comprar quede abajo aunque los nombres ocupen distinto. */
.rkr_relational-container .rkr-template-grid .rkr_grid-celda {
    display: flex;
}

.rkr_relational-container .rkr-template-grid .product-miniature {
    width: 100%;
}

.rkr_relational-container .rkr-template-grid .thumbnail-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 3px;
}

.rkr_relational-container .rkr-template-grid .product-description {
    flex: 1 1 auto;
    padding: 0.625rem;
}

.rkr_relational-container .rkr-template-grid .rkr_product-action {
    margin-top: auto;
    justify-content: center;
    padding: 0 0.625rem 0.625rem;
}



/* ------------------------------------------------------- Fila de tarjetas --
   Plantilla «Card row»: tarjetas apaisadas en una sola fila con desplazamiento
   nativo y dos flechas. Cuantas se ven a la vez lo deciden las mismas variables
   que la rejilla (--rkr-col-sm/md/lg/xl), con los mismos cortes; se le suma un
   cuarto de tarjeta para que asome la siguiente y se note que hay mas.
   Los colores son neutros a proposito: precio y boton heredan los del tema
   (.price, .btn-primary) y solo se fija la forma. */
.rkr_relational-container .rkr-template-card_row {
    --rkr-cards-hueco: 12px;
    position: relative;
}

.rkr_relational-container .rkr_cards-familia + .rkr_cards-familia {
    margin-top: 1.5rem;
}

.rkr_relational-container .rkr_cards-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

/* Sin agrupar no hay nombre de familia: las flechas suben a la altura del
   titulo del bloque, a su derecha, y la cabecera no ocupa alto. */
.rkr_relational-container .rkr_cards-sin-agrupar .rkr_cards-cabecera {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
}

.rkr_relational-container .rkr_cards-sin-agrupar > .rkr_title {
    padding-right: 84px;
}

.rkr_relational-container .rkr_cards-nombre {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.rkr_relational-container .rkr_cards-cuenta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.35rem;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1;
    opacity: 0.7;
}

.rkr_relational-container .rkr_cards-nav {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.rkr_relational-container .rkr_cards-nav[hidden] {
    display: none;
}

.rkr_relational-container .rkr_cards-nav button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0 0 2px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 50%;
    background: #fff;
    color: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.rkr_relational-container .rkr_cards-nav button:disabled {
    opacity: 0.35;
    cursor: default;
}

.rkr_relational-container .rkr_cards-fila {
    --rkr-cols: var(--rkr-col-sm, 1);
    display: flex;
    gap: var(--rkr-cards-hueco);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.rkr_relational-container .rkr_cards-fila::-webkit-scrollbar {
    display: none;
}

@media (min-width: 768px) {
    .rkr_relational-container .rkr_cards-fila {
        --rkr-cols: var(--rkr-col-md, 2);
    }
}

@media (min-width: 992px) {
    .rkr_relational-container .rkr_cards-fila {
        --rkr-cols: var(--rkr-col-lg, 3);
    }
}

@media (min-width: 1200px) {
    .rkr_relational-container .rkr_cards-fila {
        --rkr-cols: var(--rkr-col-xl, 4);
    }
}

/* N tarjetas enteras y un cuarto de la siguiente: N*ancho + N*hueco + ancho/4
   = 100 %. El minimo evita tarjetas ilegibles si se piden muchas columnas. */
.rkr_relational-container .rkr_cards-celda {
    flex: 0 0 calc((100% - var(--rkr-cols) * var(--rkr-cards-hueco)) / (var(--rkr-cols) + 0.25));
    min-width: 280px;
    margin: 0;
    scroll-snap-align: start;
}

.rkr_relational-container .rkr_cards-tarjeta {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    margin: 0;
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    background: #f6f6f4;
    box-shadow: none;
}

/* El atributo hidden lo pierde cualquier tema que de display a
   .thumbnail-container; esto lo mantiene oculto. */
.rkr_relational-container .rkr_cards-tarjeta > .rkr_cards-hueco {
    display: none;
}

.rkr_relational-container .rkr_cards-foto {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

.rkr_relational-container .rkr_cards-foto img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* min-width: 0 es lo que deja recortar el nombre: sin el, un nombre largo
   ensancha el bloque y empuja el boton fuera de la tarjeta. Va con la
   tarjeta delante porque los temas le ponen fondo blanco y relleno a
   .product-miniature .product-description, con la misma fuerza que esta. */
.rkr_relational-container .rkr_cards-tarjeta .rkr_cards-texto {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    background: transparent;
    text-align: left;
}

.rkr_relational-container .rkr_cards-texto .product-title {
    margin: 0 0 4px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    text-transform: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rkr_relational-container .rkr_cards-texto .product-title a {
    color: inherit;
}

.rkr_relational-container .rkr_cards-texto .category-title {
    margin: 0 0 2px;
    font-size: 0.75rem;
    opacity: 0.75;
}

.rkr_relational-container .rkr_cards-texto .product-price-and-shipping {
    margin: 0;
    text-align: left;
}

.rkr_relational-container .rkr_cards-antes {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 6px;
    font-size: 0.875rem;
    line-height: 1.3;
}

.rkr_relational-container .rkr_cards-antes .discount-product {
    position: static;
    margin: 0;
    padding: 0;
    background: none;
    color: inherit;
    font-size: inherit;
    font-weight: 400;
}

.rkr_relational-container .rkr_cards-texto .price {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
}

.rkr_relational-container .rkr_cards-accion {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.rkr_relational-container .rkr_cards-accion .product-item-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.rkr_relational-container .rkr_cards-accion .rkr_product-qty input {
    width: 3.5rem;
    min-height: 34px;
    padding: 4px 6px;
}

.rkr_relational-container .rkr_cards-accion .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    margin: 0;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-transform: none;
}

.rkr_relational-container .rkr_cards-accion .btn .rkr_cart-icon-svg {
    width: 18px;
    height: 18px;
}