.loader {
    position: fixed;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background-color: #f3f3f3;*/
    z-index: 9999;
    align-items: center !important;
    display: flex;
    background: linear-gradient(-45deg, rgb(238, 119, 82), rgb(231, 60, 126), rgb(73, 161, 181), rgb(86, 170, 136)) 0% 0% / 400% 400%;
    animation: 15s ease 0s infinite normal none running gradient;
}


@keyframes morph {
    0% {
        border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
    }
    50% {
        border-radius: 30% 60% 70% 40%/50% 60% 30% 60%;
    }
    100% {
        border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
    }
}

@keyframes  gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


.loader > .loader-box {
    align-items: center !important;
    display: flex;
    border-radius: 100%;
    position: relative;
    margin: 0 auto;
}
.loader .loader-box > div {
    width: 250px;
    height: 250px;
    text-align: center;
    font-size: 53px;
    color: #fff;
    text-shadow: 0 0 8px #bbbaba;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
    animation: morph 8s ease-in-out infinite;
    border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
    transition: all 1s ease-in-out;
}
.loader .loader-box > div >img {
    object-fit: contain;
    height: auto;
    background-color: transparent;
    width: 100%;
    border-radius: 15px;
}

/* Titulo que lee un lector de pantalla y un rastreador pero no se ve. Va aqui y no se usa el
   sr-only de Bootstrap porque los dos layouts traen versiones distintas del framework: el de tienda
   es Bootstrap 5 (sr-only y visually-hidden) y el general Bootstrap 4 (solo sr-only). */
.az-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* El nombre del producto era un <p> y el precio un <h6>: la tarjeta no tenia titulo y el precio
   contaba como encabezado, o sea una tirada de h6 sin h1 delante. Ahora el nombre es el h2 de la
   tarjeta y el precio un div. Estos valores son los MEDIDOS antes del cambio, para que ni el
   tamano, ni el peso, ni el color, ni el alto de caja se muevan. */
.product-name {
    font-size: 14px;
    font-weight: 400;
    line-height: 26px;
    color: #555;
}

/* main.css baja el nombre a 15px/22px por debajo de 576px. Este fichero se carga DESPUES y con la
   misma especificidad, asi que sin repetir aqui la consulta de medios la regla de arriba se comia
   la de movil y el nombre salia a 14px/26px en el telefono. */
@media (max-width: 575px) {
    .product-name {
        font-size: 15px;
        line-height: 22px;
    }
}

.product-price {
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    color: var(--heading);
}

/* El panel del carrito NO esta oculto, esta fuera de pantalla (right: -450px), asi que sus dos h6
   contaban como encabezados de la pagina. Ni el nombre ni el importe son secciones: pasan a div con
   los valores medidos de .cart-info h6 y .cart-action-group h6. */
.cart-item-name {
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: var(--heading);
    text-transform: capitalize;
}

.cart-item-name a {
    color: var(--heading);
}

.cart-item-total {
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    color: var(--primary);
}

/* El precio de la ficha era un h3 justo debajo del nombre del producto, que ahora es el h1.
   Valores medidos del h3 antes del cambio. */
.details-price {
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    color: var(--heading);
}

/* Los dos titulos del pie eran h3 y son secciones de primer nivel: con un h1 en la pagina el salto
   h1 -> h3 rompia el orden de encabezados. Pasan a h2 y aqui se conservan los 24px del h3. */
.footer-title {
    font-size: 24px;
    line-height: 32px;
}

/* El nombre de cada reseña era un h5 colgando de un h2, o sea un salto de dos niveles. Pasa a h3
   con los valores medidos del h5. */
.testimonial-name {
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    color: var(--white);
    text-transform: capitalize;
}

/* Titulo de las paginas de cuenta (perfil, pedidos, checkout). Era un h2 y la pagina se quedaba sin
   ningun h1: el nombre de la pagina ES su encabezado principal. El tema pinta ese h2 por etiqueta
   dentro de .container, asi que los valores medidos se traen aqui para que se vea igual. */
.account-page-title {
    font-size: 38px;
    font-weight: 500;
    line-height: 48px;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 15px;
}

/* Titulos de seccion de las paginas de cuenta (perfil, pedidos, checkout). Eran h4 o h5 colgando
   directamente del h1 de la pagina, o sea saltandose uno o dos niveles. Pasan a h2 y aqui se
   conservan los valores que el tema les daba por etiqueta. */
.account-section-title {
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    color: #39404a;
    text-transform: capitalize;
    margin-bottom: 0;
}

/* Titulo de cada pedido en /orders. Era un h5 colgando del h1 de la pagina. El color va por la
   variable del tema para que siga siendo el de cada tienda, y text-danger lo sigue pisando cuando
   el pedido esta sin pagar porque Bootstrap lo marca como !important. */
.order-title {
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    color: var(--primary);
    text-transform: capitalize;
    margin-bottom: 0;
}

/* Titulos de columna del pie del layout general. Eran h4 y el tema los pintaba con
   .footer-widget .widget-title h4, o sea por etiqueta: al pasarlos a h2 para no dejar un salto de
   nivel, esos valores se traen aqui tal cual estaban medidos. */
.footer-widget .widget-title .footer-widget-title {
    font-family: 'Spartan', sans-serif;
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0;
}