/* TIENDA */

section.products {
    display: grid;
    grid-template-columns: repeat(3, 310px);
    gap: 105px;
    padding: 0 0 12em;
}

section.products article.product > a {
    display: grid;
    gap: 2em;
}

section.products article.product a, section.products article.product a:hover, section.products article.product a:active, section.products article.product a:focus {
    color: unset;
    text-decoration: none;
}

section.products article.product h2 {
    font-size: 24px;
    font-weight: 300;
    color: var(--black);
}

/* detalle producto */

.single-product-page article.product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}

.single-product-page article.product .price-container {
    margin: 2em 0 0;
}

.single-product-page article.product .price-container span.woocommerce-Price-amount.amount * {
    font-size: 18px;
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    color: var(--black);
}

.single-product-page article.product > .content {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: start;
    text-align: left;
}

.single-product-page article.product h2 {
    color: var(--black);
    font-size: 30px;
    font-weight: 300;
    margin: 0 0 20px;
}

.single-product-page .centered-column {
    margin: 2em auto 4em;
}

.checkout-button.button.alt.wc-forward br,
.button.wc-backward br {
    display: none;
}

.woocommerce-error::before {
    color: #b81c23 !important;
}

.woocommerce-error, .woocommerce-info, .woocommerce-message, .cart-empty.woocommerce-info {
    border-top-color: var(--footer-color);
}

.woocommerce-info::before {
    color: var(--footer-color);
}

button[name="woocommerce_checkout_place_order"], button[name="woocommerce_checkout_place_order"]:focus, button[name="woocommerce_checkout_place_order"]:active, button[name="woocommerce_checkout_place_order"]:hover,
button[name="update_cart"], button[name="update_cart"]:active, button[name="update_cart"]:focus, button[name="update_cart"]:hover,
.checkout-button.button.alt.wc-forward, .checkout-button.button.alt.wc-forward:active, .checkout-button.button.alt.wc-forward:focus, .checkout-button.button.alt.wc-forward:hover,
.coupon button, .coupon button:active, .coupon button:focus, .coupon button:hover,
a.button.wc-forward, a.button.wc-forward:active, a.button.wc-forward:focus, a.button.wc-forward:hover,
.button.wc-backward, .button.wc-backward:active, .button.wc-backward:hover, .button.wc-backward:focus,
button#submit, button#submit:active, button#submit:focus, button#submit:hover,
.quantity-wrapper button, .quantity-wrapper button:active, .quantity-wrapper button:focus, .quantity-wrapper button:hover {
    background-color: var(--footer-color) !important;
    color: var(--black) !important;
    font-weight: 900 !important;
    border-radius: 0 !important;
}

.quantity-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    width: 100%;
} 

.form-fields {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1em;
    max-height: 200px;
}

div.quantity, .form-fields, .formulario-compra, form.cart, .woocommerce .quantity .qty {
    width: 100% !important;
}

/* Ocultar las flechas */
.quantity-wrapper input[type=number]::-webkit-inner-spin-button,
.quantity-wrapper input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none; /* quitar el estilo por defecto */
    margin: 0;
    display: none;
}

/* Puedes cambiar color/tamaño si quieres customizar */
.quantity-wrapper input[type=number]::-webkit-inner-spin-button {
    background-color: unset;
    width: 14px;
    height: 14px;
    display: none;
}

/* CARRITO */

.textos-page:has(.centered-column.textos.textos-container .woocommerce) .centered-column.textos.textos-container {
    padding: 2em 15px 5em;
}

.centered-column.textos.textos-container h1 {
    margin: 0 0 30px;
}

/* CHECKOUT */

#customer_details {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2em;
}

#customer_details > * {
    width: 100% !important;
}

.woocommerce form .form-row label {
    line-height: 2;
    padding: 1em 0 0 !important;
}

@media(max-width: 1350px) {
    section.products {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

@media(max-width: 1080px) {
    .form-fields {
        grid-template-columns: 1fr;
    }

    .quantity-wrapper {
        max-width: 300px;
        margin: 0 0 0 auto;
    }
}

@media(max-width: 1020px) {
    .single-product-page article.product {
        grid-template-columns: 1fr;
    }
    
    .single-product-page article.product .content, .single-product-page article.product img {
        max-width: 500px;
        margin: auto;
        width: 100%;
    }
}

@media(max-width: 890px) {
    section.products {
        grid-template-columns: 400px;
        gap: 70px;
        place-content: center;
    }
}

@media(max-width: 600px) {
    section.products {
        padding: 0 0 3em;
    }
}

@media(max-width: 500px) {
    section.products {
        grid-template-columns: 1fr;
    }

    .form-fields {
        padding: 2em 0 0;
    }

    .quantity-wrapper {
        max-width: unset;
    }
}