/*
 * miramonoshop — carrito, checkout y cuenta
 *
 * Se carga solo en el carrito, el checkout y las paginas de cuenta.
 * Carga despues de custom.css, asi que puede afinar lo global.
 *
 * Indice:
 *    1. Contenedor blanco sobre fondo gris (carrito, checkout y cuenta)
 *    2. Pagina del carrito
 *    3. Resumen del pedido en el checkout
 *    4. Metodos de pago y envio
 *    5. Formulario del checkout
 */


/*  1. CONTENEDOR BLANCO SOBRE FONDO GRIS (CARRITO, CHECKOUT Y CUENTA) ----------- */

@media (min-width: 768px) {
    /* Las paginas de cuenta no entraban en la regla de centrado de mas abajo. */
    .woocommerce-account #primary {
        max-width: 1280px;
        margin: 60px auto 2.617924em;
        float: none;
    }
}


/*  2. PAGINA DEL CARRITO -------------------------------------------------------- */

@media (max-width: 767.98px) {
    .woocommerce-cart .woocommerce-cart-wrapper {
        flex-flow: column;
    }

    table.cart td.product-remove a.remove {

        top: 26px;
        right: 0;
    }
}

.cart-collaterals h2 {
    display: none;
}

table.cart td.actions {
    border-top: none;
}

.cart-collaterals .cart_totals, .cart-collaterals .shipping_calculator {
    max-width: 580px;
}

table.cart td.actions input {
    border: none;
}

table.cart {
    margin-bottom: 20px;
}

table.cart th, table.cart td {
    padding: 10px;
}

@media (min-width: 768px) {
    .woocommerce-cart #primary, .woocommerce-checkout #primary {
        max-width: 980px;
        margin: 0 auto 60px auto!important;
        float:none;


    }
}

.woocommerce-cart #primary, .woocommerce-checkout h3 {
        font-size: 15px;
        font-weight: 500;
    }

.woocommerce-cart .woocommerce-cart-wrapper {
    display: flex;
        
}

@media (max-width: 1064px) {
    .woocommerce-cart .woocommerce {
        flex-flow: column;
    }

    .woocommerce-cart .woocommerce .woocommerce-cart-form {
        width:100%;
    }

    .woocommerce-cart .woocommerce .cart-collaterals {
        width:100%;
    }
}

.woocommerce-cart .woocommerce .cart-collaterals .ppc-button-wrapper {
    max-width: none;
}

.woocommerce-cart .woocommerce .cart-collaterals .wcpay-payment-request-wrapper {
    max-width: none;
}

.wc-proceed-to-checkout .button.checkout-button {
    font-size: 18px;
}

@media (min-width: 768px) {
    .cart-collaterals .cart_totals, .cart-collaterals .shipping_calculator {
        width: 100%;
        padding-left: 30px;
        float: none;
            max-width: 480px;
    margin-left: auto;
    }
}

@media (max-width: 767.98px) {
    table.cart th, table.cart td {
        padding: 10px 0;
    }
}

.woocommerce-cart-form__contents tr th {
    border-bottom: 1px solid #dddddd !important;
}

/* En escritorio solo cambia una cosa: la «×» de eliminar pasa a texto (lo hace
   miramono_cart_remove_link_text en inc/miramono-cart-quantity.php). El control
   − / + y el resto del rediseno son solo para movil. */
/* Lleva `table.cart` para superar en especificidad a la regla de Storefront
   `table.cart td.product-remove a.remove { position:absolute }`, que es (0,3,3):
   sin ella el enlace quedaba absoluto y su celda media 0x0. El right/top se
   anulan por la regla de mas arriba en este archivo que los fija en movil. */
.woocommerce-cart table.cart td.product-remove a.remove,
.woocommerce-cart table.cart td.product-remove a.remove:hover,
.woocommerce-cart table.cart td.product-remove a.remove:focus {
    display: inline;
    position: static;
    float: none;
    top: auto;
    right: auto;
    width: auto;
    height: auto;
    line-height: inherit;
    text-align: left;
    font-size: .9em;
    font-weight: 400;
    color: #000;
    opacity: .6;
    text-decoration: underline;
    background: none;
    border-radius: 0;
}

.woocommerce-cart table.cart td.product-remove a.remove:hover {
    opacity: 1;
}

/* El ✖ lo pinta la regla a.remove::before de mas abajo en este archivo. */
.woocommerce-cart table.cart td.product-remove a.remove::before {
    content: none;
}

/* El control − / + sustituye al input de cantidad y al boton «Update bag» en
   todos los anchos: con el input habia que escribir el numero y ademas pulsar
   actualizar. El input nativo se mantiene oculto porque es el que se envia, y el
   boton tambien porque el JS lo pulsa por detras. */
.mm-qty--cart {
    display: inline-flex;
}

.woocommerce-cart td.product-quantity .quantity {
    display: none;
}

.woocommerce-cart table.cart td.actions .button[name="update_cart"] {
    display: none;
}

@media (max-width: 767.98px) {
    /* Cada linea, como en el desplegable: imagen a la izquierda ocupando las
       filas, nombre y precio arriba a la izquierda, cantidad arriba a la derecha
       y eliminar abajo a la izquierda. */
    .woocommerce-cart table.cart tbody tr.cart_item {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr) auto;
        grid-template-areas:
            "thumb name   qty"
            "thumb price  qty"
            "thumb remove remove";
        column-gap: 12px;
        row-gap: 4px;
        align-items: start;
        padding: 16px 0;
        border-bottom: 1px solid #dedede;
    }

    .woocommerce-cart table.cart tbody tr.cart_item td {
        display: block;
        width: auto;
        padding: 0;
        border: 0;
        text-align: left;
        background: none;
    }

    /* Fuera las etiquetas «Product», «Price»… de la tabla responsive. */
    .woocommerce-cart table.cart tbody tr.cart_item td::before {
        content: none !important;
        display: none !important;
    }

    .woocommerce-cart table.cart tbody tr.cart_item td.product-thumbnail {
        grid-area: thumb;
        display: block;
    }

    .woocommerce-cart table.cart tbody tr.cart_item td.product-thumbnail img {
        width: 100%;
        max-width: none;
        height: auto;
        margin: 0;
        display: block;
    }

    .woocommerce-cart table.cart tbody tr.cart_item td.product-name {
        grid-area: name;
        line-height: 110%;
    }

    .woocommerce-cart table.cart tbody tr.cart_item td.product-name a {
        color: #000;
        text-decoration: none;
    }

    .woocommerce-cart table.cart tbody tr.cart_item td.product-price {
        grid-area: price;
    }

    .woocommerce-cart table.cart tbody tr.cart_item td.product-quantity {
        grid-area: qty;
        justify-self: end;
    }

    .woocommerce-cart table.cart tbody tr.cart_item td.product-remove {
        grid-area: remove;
        justify-self: start;
        margin-top: 4px;
    }

    /* El subtotal de linea se omite: con precio y cantidad delante es redundante,
       y el total general sigue debajo. */
    .woocommerce-cart table.cart tbody tr.cart_item td.product-subtotal {
        display: none;
    }
}

/* CARRITO, CHECKOUT Y CUENTA: CONTENEDOR BLANCO SOBRE FONDO GRIS
  
   El contenedor es #primary, que en estas paginas ya venia centrado con
   max-width. La cabecera queda fuera, sobre el gris.
  
   Con `body` delante a proposito: «woocommerce-checkout» no es solo una clase del
   body, WooCommerce la pone tambien en el propio formulario
   (<form class="checkout woocommerce-checkout">), asi que sin acotar a body el
   formulario se pintaba de gris por dentro de la caja blanca. */
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account {
    background-color: #ededed;
}

.woocommerce-cart #primary,
.woocommerce-checkout #primary,
.woocommerce-account #primary {
    background-color: #FFF;
    padding: 40px;
    border-radius: 4px;
    box-sizing: border-box;
    margin-bottom: 2.617924em;
}

/* .site-main vive DENTRO de #primary, asi que su margin-bottom dejaba un hueco
   blanco dentro de la caja. Se pasa el margen al contenedor, para que el aire
   quede entre la caja y el footer, sobre el gris. */
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-account .site-main {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    /* 4px de margen lateral para que se vea el gris a los lados. */
    .woocommerce-cart .col-full,
    .woocommerce-checkout .col-full,
    .woocommerce-account .col-full {
        width: 100%;
        padding: 0 10px;
    }

    .woocommerce-cart #primary,
    .woocommerce-checkout #primary,
    .woocommerce-account #primary {
        margin-bottom: 6.617924em;
        padding: 20px 14px;
    }
}


/*  3. RESUMEN DEL PEDIDO EN EL CHECKOUT ----------------------------------------- */

table.woocommerce-checkout-review-order-table thead .product-name, table.woocommerce-checkout-review-order-table thead .product-total {
    display: none;
}

/* La cantidad («× 2») la imprime WooCommerce dentro de la MISMA celda que el
   nombre del producto, y el precio va en la celda siguiente. Con la regla de
   arriba, que deja el padding horizontal de las celdas a 0, quedaban separados
   1px y se leian juntos: «× 2» + «75,00 €» parecia «275,00 €». */
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    padding-right: 24px;
}

.woocommerce-checkout-review-order-table th:last-child,
.woocommerce-checkout-review-order-table td:last-child {
    padding-right: 0;
}

/* Reparto de ancho: mas sitio a la izquierda para que el nombre del producto no
   se parta, y menos a la derecha, que solo lleva importes. */
.woocommerce-checkout-review-order-table th:first-child,
.woocommerce-checkout-review-order-table td:first-child {
    width: 65%;
}

.woocommerce-checkout-review-order-table th:last-child,
.woocommerce-checkout-review-order-table td:last-child {
    width: 35%;
}

/* Que un importe nunca se parta en dos lineas. */
.woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout-review-order-table .product-quantity {
    white-space: nowrap;
}

/* La cantidad, atenuada para que no se confunda con el importe. */
.woocommerce-checkout-review-order-table .product-quantity {
    font-weight: 400;
    opacity: .6;
}

#order_review {
    font-size: 14px;
    letter-spacing: 0.4px;
}


/*  4. METODOS DE PAGO Y ENVIO --------------------------------------------------- */

ul#shipping_method, .woocommerce-shipping-destination {
    margin-bottom: 10px;
}

/* El radio nativo esta oculto (sr-only) y el circulo lo dibuja un glifo de Font
   Awesome en label::before, definido en assets/css/base/icons.css:
   sin elegir -> U+F111 «circle»      elegido -> U+F192 «dot-circle»
   Pero esa regla fija font-weight:900, que es el estilo Solid, y ahi «circle» es
   un disco macizo: sin elegir se veia igual que elegido.
  
   Se sustituye el glifo por un circulo de CSS: contorno sin relleno cuando no
   esta elegido, y punto negro cuando si. El `body` delante sube la especificidad
   por encima de las reglas de icons.css. */
body #payment .payment_methods > .wc_payment_method > label::before,
body #payment .payment_methods > .woocommerce-PaymentMethod > label::before {
    content: "";
    width: 15px;
    height: 15px;
    border: 1px solid #9a9a9a;
    border-radius: 50%;
    background-color: transparent;
    box-sizing: border-box;
    vertical-align: middle;
    margin-right: .6em;
    transition: border-color .15s ease, background-color .15s ease;
}

body #payment .payment_methods > .wc_payment_method > label:hover::before,
body #payment .payment_methods > .woocommerce-PaymentMethod > label:hover::before {
    border-color: #000;
}

body #payment .payment_methods li.wc_payment_method > input[type=radio]:first-child:checked + label::before,
body #payment .payment_methods li.woocommerce-PaymentMethod > input[type=radio]:first-child:checked + label::before {
    content: "";
    border-color: #000;
    background-color: #000;
    /* El anillo interior blanco deja el punto centrado sin otro elemento. */
    box-shadow: inset 0 0 0 3px #fff;
}

/* El radio nativo esta oculto, asi que el foco de teclado se marca aqui. */
body #payment .payment_methods li > input[type=radio]:first-child:focus-visible + label::before {
    outline: 2px solid #000;
    outline-offset: 2px;
}

body #payment .payment_methods li:first-child {
    padding: 10px 10px 10px 0;
}

#payment .payment_methods li .payment_box {
    margin-top: 10px;
}

#payment .payment_methods>.woocommerce-PaymentMethod>label, #payment .payment_methods>.wc_payment_method>label {
    padding: 1.1575em!important;
}


/*  5. FORMULARIO DEL CHECKOUT --------------------------------------------------- */

.woocommerce-checkout .wcpay-payment-request-wrapper {
    margin: 0 auto;
}

@media (min-width: 768px) {
    .storefront-full-width-content.woocommerce-checkout .entry-header h1:last-child {
       /* text-align: center!important;*/
    }

    .col2-set .form-row-first {
        width: 49%!important;
        margin-right: 1%!important;
    }

    .col2-set .form-row-last {
        width: 49%!important;

    }
}

#ship-to-different-address label {
    font-weight: 500;
}

.checkout-inline-error-message {
    color: #c01616;
    font-size: 15px;
}