/*
 * miramonoshop — listado y ficha de producto
 *
 * Se carga solo en la tienda, las categorias y las fichas de producto.
 * Carga despues de custom.css, asi que puede afinar lo global.
 *
 * Indice:
 *    1. Listado de productos
 *    2. Ficha de producto
 *    3. Galeria del producto
 */


/*  1. LISTADO DE PRODUCTOS ------------------------------------------------------ */

/* El listado es una grid. Storefront lo maqueta con float y anchuras en
   porcentaje (assets/css/woocommerce/woocommerce.css), que es lo que obliga a
   tener una regla distinta por cada numero de columnas, a las clases .first y
   .last que WooCommerce escribe en el HTML solo para cerrar las filas, y a un
   clearfix en el ul.

   Las medidas son las mismas que antes: el hueco entre columnas es el
   margin-right que tenian los li, y el hueco entre filas su margin-bottom
   (4.2358em del li, que con su font-size de .875em son los 3.7063em de aqui).
   El margin-bottom del ul repone el aire que ese margin dejaba bajo la ultima
   fila. */
ul.products {
    display: grid;
    grid-template-columns: repeat(var(--mm-products-columns, 1), minmax(0, 1fr));
    column-gap: 4.347826087%;
    row-gap: 3.706325903em;
    margin-bottom: 3.706325903em;
}

/* El clearfix ya no hace falta y, dentro de una grid, sus dos pseudoelementos
   pasarian a ocupar celdas vacias al principio del listado. */
ul.products::before,
ul.products::after {
    content: none;
}

/* Los float y las anchuras se anulan con !important porque llegan en selectores
   de cinco clases (.storefront-full-width-content .site-main ul.products.columns-3
   li.product): igualar esa especificidad aqui obligaria a repetir el bloque seis
   veces, una por cada columns-N. */
ul.products li.product {
    float: none !important;
    width: auto !important;
    margin-right: 0 !important;
    margin-bottom: 0;
}

/* Una columna en movil, como hasta ahora. De 768px en adelante manda la clase
   columns-N que pone WooCommerce, asi que el numero de columnas se sigue
   cambiando desde Personalizar > WooCommerce > Catalogo de productos. */
@media (min-width: 768px) {
    ul.products.columns-2 {
        --mm-products-columns: 2;
    }

    ul.products.columns-3 {
        --mm-products-columns: 3;
    }

    ul.products.columns-4 {
        --mm-products-columns: 4;
    }

    ul.products.columns-5 {
        --mm-products-columns: 5;
    }

    ul.products.columns-6 {
        --mm-products-columns: 6;
    }
}

ul.products li.product .woocommerce-loop-product__title, ul.products li.product .woocommerce-loop-category__title, ul.products li.product .wc-block-grid__product-title, ul.products li.product .wc-block-grid__product-title>a, ul.products .wc-block-grid__product .woocommerce-loop-product__title, ul.products .wc-block-grid__product .woocommerce-loop-category__title, ul.products .wc-block-grid__product .wc-block-grid__product-title, ul.products .wc-block-grid__product .wc-block-grid__product-title>a, .wc-block-grid__products li.product .woocommerce-loop-product__title, .wc-block-grid__products li.product .woocommerce-loop-category__title, .wc-block-grid__products li.product .wc-block-grid__product-title, .wc-block-grid__products li.product .wc-block-grid__product-title>a, .wc-block-grid__products .wc-block-grid__product .woocommerce-loop-product__title, .wc-block-grid__products .wc-block-grid__product .woocommerce-loop-category__title, .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-title, .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-title>a {
        font-size: 15px;
    text-transform: uppercase;
	text-align:left;
	margin-bottom:0;
}

ul.products li.product .woocommerce-loop-product__title, ul.products li.product .woocommerce-loop-category__title, ul.products li.product .wc-block-grid__product-title, ul.products li.product .wc-block-grid__product-title>a, ul.products .wc-block-grid__product .woocommerce-loop-product__title, ul.products .wc-block-grid__product .woocommerce-loop-category__title, ul.products .wc-block-grid__product .wc-block-grid__product-title, ul.products .wc-block-grid__product .wc-block-grid__product-title>a, .wc-block-grid__products li.product .woocommerce-loop-product__title, .wc-block-grid__products li.product .woocommerce-loop-category__title, .wc-block-grid__products li.product .wc-block-grid__product-title, .wc-block-grid__products li.product .wc-block-grid__product-title>a, .wc-block-grid__products .wc-block-grid__product .woocommerce-loop-product__title, .wc-block-grid__products .wc-block-grid__product .woocommerce-loop-category__title, .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-title, .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-title>a {
    font-weight: 500;
}

ul.products li.product img, ul.products .wc-block-grid__product img, .wc-block-grid__products li.product img, .wc-block-grid__products .wc-block-grid__product img {
    width:100%;
}

ul.products li.product img, ul.products .wc-block-grid__product img, .wc-block-grid__products li.product img, .wc-block-grid__products .wc-block-grid__product img {
    margin: 0 auto 10px;
}

ul.products li.product .button, ul.products .wc-block-grid__product .button, .wc-block-grid__products li.product .button, .wc-block-grid__products .wc-block-grid__product .button {
    display: none;
}

.storefront-sorting {
    display: none;
}


/*  2. FICHA DE PRODUCTO --------------------------------------------------------- */

.product_title  {
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 600;
	margin-bottom:0;
}

.single-product div.product p.price {
    margin: 0 0 1.41575em 0;
          font-size: 20px;
    font-weight: 600;
}

.single-product div.product .product_meta {
    margin-top: 40px;
}

.woocommerce-product-details__short-description {
    max-width: 620px;
	font-size:15px;
    font-weight: 500;
    letter-spacing: 0.4px;
}

.single-product div.product form.cart .quantity {
    margin-right: 4px!important;
}

@media (min-width: 768px) {
    .storefront-full-width-content.single-product div.product .summary {
        width:40%!important;
    }
}

@media (max-width: 767.98px) {
    /* Solo en la ficha de producto: la galeria ya trae sus 20px de margin-top,
       asi que los 40px de arriba sobraban. El resto de paginas los conservan. */
    .single-product .site-content {
        padding-top: 0;
    }

    .product_title.entry-title{
        margin-bottom: 0;
        margin-top: 30px;
    }

    .single-product div.product p.price {
        font-size: 18px;
    }
}

.single-product div.product {
	overflow:visible;
}

@media (min-width: 768px) {
    .storefront-full-width-content.single-product div.product .summary {
    	position:sticky;
    	top:120px;
            padding-left: calc(20px + 3vw);
    }
}

.single-product div.product form.cart {
    display:flex;
    margin-bottom: 0;
}


/*  3. GALERIA DEL PRODUCTO ------------------------------------------------------ */

.single-product div.product .woocommerce-product-gallery img {
    width:100%;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
    z-index: 2;
    width:10%;
    min-width: 80px;
        order: 1;
    display: flex;
    flex-flow: column;
    margin-right: 4px;
}

.storefront-full-width-content.single-product div.product .woocommerce-product-gallery {
            display: flex;
}

.woocommerce-product-gallery__image {
    padding-right: 1px;
}

@media (min-width: 768px) {
    .storefront-full-width-content.single-product div.product .woocommerce-product-gallery {
        width:60%!important;
    }

    .storefront-full-width-content.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
       width:100%;
    margin-right: 10px;
    	margin-bottom:4px;
    }
}

.single-product div.product .images, .single-product div.product .summary, .single-product div.product .woocommerce-product-gallery {
    margin-bottom: 0;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
    width: 16%;
   
    margin-right: 4px;
}

.single-product div.product .woocommerce-product-gallery .flex-viewport {
    margin-bottom: 4px;
    order: 2;
    width: calc(100% - 110px);
   
}

@media (min-width: 768px) {
    .storefront-full-width-content.single-product div.product .woocommerce-product-gallery {
        float: left;
        margin-right: 0;
        margin-bottom: 3.706325903em;
    }
}