/*
Theme Name: The Watch Zone
Author: Tu Nombre
Description: Tema completamente a medida para nuestra marca de relojes. Cero constructores.
Version: 1.0
Text Domain: the-watch-zone
*/

/* --- RESET BÁSICO --- */

/* ==========================================================================
   1. IMPORTAR FUENTE INTER (Google Fonts) Y APLICAR GLOBALMENTE
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* Aplicar Inter a toda la web */
body, 
button, 
input, 
select, 
textarea, 
.woocommerce, 
.woocommerce-cart .woocommerce, 
.woocommerce-checkout .woocommerce {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400;
}

/* ==========================================================================
   2. ELIMINAR TÍTULO DE PÁGINA "CARRITO"
   ========================================================================== */
.woocommerce-cart h1.entry-title, 
.woocommerce-cart h1.page-title,
.woocommerce-checkout h1.entry-title, 
.woocommerce-checkout h1.page-title {
    display: none !important;
}

/* Dar algo de espacio después del header para compensar el título borrado */
.site-main {
    padding-top: 50px !important;
}

/* ==========================================================================
   2. ELIMINAR TÍTULO DE PÁGINA "CARRITO"
   ========================================================================== */
.woocommerce-cart h1.entry-title, 
.woocommerce-cart h1.page-title,
.woocommerce-checkout h1.entry-title, 
.woocommerce-checkout h1.page-title {
    display: none !important;
}

/* Dar algo de espacio después del header para compensar el título borrado */
.site-main {
    padding-top: 50px !important;
}

/* ==========================================================================
   4. CENTRAR TOTALES Y BOTONES DE PAGO (Mac Clean)
   ========================================================================== */

/* Contenedor principal de totales - Forzamos centrado */
.cart-collaterals {
    width: 100% !important;
    max-width: 600px !important; /* Limitamos ancho para que el centrado se vea mejor */
    margin: 0 auto !important; /* ¡¡CENTRADO ABSOLUTO!! */
}

.cart-collaterals .cart_totals {
    width: 100% !important;
    float: none !important; /* Eliminamos el float right original de Woo */
    background-color: transparent !important;
    padding: 0 !important;
    margin-bottom: 40px;
}

.cart-collaterals .cart_totals h2 {
    font-family: 'Inter', sans-serif;
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 30px;
    text-transform: none;
    color: #000;
}

/* Tabla de Totales (sin bordes) */
.woocommerce-cart .cart_totals table.shop_table,
.woocommerce-checkout .cart_totals table.shop_table {
    border: none !important;
    width: 100% !important;
    max-width: 500px;
    margin: 0 auto !important; /* Centrado */
}

.woocommerce-cart .cart_totals table td,
.woocommerce-cart .cart_totals table th {
    padding: 15px !important;
    font-family: 'Inter', sans-serif !important;
    text-align: left !important;
    color: #000 !important;
    border: none !important;
}

.woocommerce-cart .cart_totals table td {
    text-align: right !important; /* Valores alineados a la derecha */
}

/* 5. Estilizar Botón Principal "Finalizar Compra" (#B60000) */
/* Centrar el contenedor del botón principal */
.woocommerce-cart .wc-proceed-to-checkout, 
.woocommerce-checkout #payment div.form-row.place-order {
    text-align: center !important;
    display: block !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 400px;
}

/* El botón principal en sí */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #payment #place_order {
    background-color: #B60000 !important; /* Tu color rojo */
    color: #fff !important;
    border-radius: 0 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    padding: 18px !important;
    font-size: 16px;
    transition: background-color 0.3s ease;
    display: block !important;
    margin: 0 auto !important;
    width: 100% !important;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-checkout #payment #place_order:hover {
    background-color: #000 !important;
}

/* 6. Centrar los Métodos de Pago Exprés (Apple/Google/Amazon/Link) */
/* Estos botones se cargan dinámicamente, por lo que tenemos que 
   atacar a sus contenedores comunes. */
#wc-payment-express-button-container,
#wc-stripe-payment-request-wrapper,
#wc-stripe-payment-request-button,
.wc-stripe-payment-request-button,
.woocommerce-payments-express-checkout-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 20px auto 0 !important; /* Margen superior y centrado horizontal */
    max-width: 400px; /* Misma anchura que el botón de Finalizar Compra */
    width: 100%;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Times New Roman", Times, serif; /* Según tu diseño, parece una tipografía Serif */
    background-color: #f4f4f4; /* El gris clarito de tu fondo */
    color: #000;
}

/* --- CABECERA --- */
.site-header {
    background-color: #f4f4f4;
    padding: 30px 50px;
}

.header-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.header-left a, .header-right a {
    text-decoration: none;
    color: #000;
    font-size: 18px;
}

.header-right {
    text-align: right; /* Empuja "Carrito" a la derecha del todo */
}

.header-center .logo-text {
    text-decoration: none;
    color: #b30000; /* El rojo oscuro de tu diseño */
    font-size: 32px;
    font-family: serif;
    text-align: center;
    display: block;
    line-height: 1;
}

/* --- HERO SECTION --- */
.hero-section {
    /* Necesitarás subir tu imagen de fondo a la carpeta assets */
    background-image: url('assets/hero-bg.jpg'); 
    background-size: cover;
    background-position: center;
    height: 450px; 
    display: flex;
    align-items: center;
    padding: 0 50px;
    color: #fff;
}

.hero-subtitle {
    font-size: 10px;
    letter-spacing: 2px;
    margin-bottom: 10px;
    font-family: sans-serif;
}

.hero-title {
    font-size: 48px;
    margin-bottom: 20px;
    font-weight: normal;
}

.btn-shop {
    background: #fff;
    color: #000;
    padding: 12px 24px;
    text-decoration: none;
    font-size: 12px;
    letter-spacing: 1px;
    display: inline-block;
}

/* --- SECCIÓN PRODUCTO --- */
.featured-product {
    max-width: 900px;
    margin: 60px auto;
    text-align: center;
}

.product-catchphrase {
    font-size: 22px;
    font-weight: normal;
    margin-bottom: 50px;
}

.product-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    text-align: left;
}

.product-image img {
    width: 100%;
    height: auto;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Un poco de sombra sutil */
}

.product-name {
    font-size: 18px;
    margin-bottom: 30px;
    font-family: serif;
}

.btn-buy {
    background: #b30000; /* El botón rojo de tu diseño */
    color: #fff;
    padding: 15px 40px;
    text-decoration: none;
    font-weight: bold;
    font-family: serif;
    display: inline-block;
}

/* --- OVERRIDES DE WOOCOMMERCE (Carrito y Checkout) --- */

/* Contenedor principal de las páginas estáticas */
.page-container {
    max-width: 1000px;
    margin: 60px auto;
    padding: 0 20px;
}

.page-title {
    text-align: center;
    font-size: 36px;
    margin-bottom: 40px;
    font-weight: normal;
}

/* Estilizar los botones morados feos de WooCommerce al rojo de tu marca */
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt {
    background-color: #b30000 !important; /* Forzamos el color con !important para pisar a Woo */
    color: #fff !important;
    border-radius: 0 !important; /* Quitamos bordes redondeados para mantener el estilo Bauhaus/Minimal */
    padding: 15px 30px !important;
    font-family: "Times New Roman", Times, serif !important;
    font-size: 16px !important;
    text-transform: uppercase;
}

.woocommerce button.button.alt:hover {
    background-color: #000 !important; /* Al pasar el ratón se pone negro */
}

/* Limpiar los campos de texto del formulario de pago */
.woocommerce form .form-row input.input-text, 
.woocommerce form .form-row textarea {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 0;
    font-family: sans-serif;
}

/* 1. Importar la fuente Inter desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');

/* 2. Forzar la fuente Inter en todo el bloque de WooCommerce */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
    font-family: 'Inter', sans-serif;
}

/* 3. Limpiar la tabla de productos (quitar bordes grises y fondos) */
.woocommerce table.shop_table {
    border: none !important;
    border-radius: 0 !important;
}

/* Cabecera de la tabla (Producto, Precio, Cantidad) */
.woocommerce table.shop_table th {
    background-color: transparent !important;
    border-bottom: 2px solid #000 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    padding-bottom: 15px;
}

/* Filas de los productos */
.woocommerce table.shop_table td {
    border-top: 1px solid #eaeaea !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    vertical-align: middle;
    padding: 25px 0 !important;
}

/* Enlaces del nombre del producto */
.woocommerce-cart table.cart td.product-name a {
    color: #000 !important;
    text-decoration: none;
    font-weight: 400;
}

.woocommerce-cart table.cart td.product-name a:hover {
    color: #B60000 !important;
}

/* 4. Inputs de cantidad y cupones */
.woocommerce-cart table.cart td.actions .coupon .input-text,
.woocommerce .quantity .qty {
    border: 1px solid #ccc !important;
    border-radius: 0 !important;
    padding: 12px !important;
    font-family: 'Inter', sans-serif;
    box-shadow: none !important;
}

/* 5. Botones secundarios (Aplicar cupón, Actualizar carrito) */
.woocommerce #content table.cart td.actions .button, 
.woocommerce table.cart td.actions .button {
    background-color: transparent !important;
    color: