/*
Theme Name: Xóchitl Natural
Theme URI: https://xochitlnatural.com
Description: Tema hijo de Storefront para Xóchitl Natural — cosmética natural artesanal mexicana. Compra menos, siente más.
Author: Xóchitl Natural
Author URI: https://xochitlnatural.com
Template: storefront
Version: 1.0.0
Text Domain: xochitl-natural
Tags: e-commerce, natural, artisanal
*/

/* ==========================================================================
   XÓCHITL NATURAL — Identidad visual
   Paleta y tipografía de la marca
   ========================================================================== */

:root {
    /* Colores de marca */
    --xn-verde-oscuro:  #4A5D4E;  /* Principal: menús, títulos, footer */
    --xn-verde-claro:   #8FA68E;  /* Secundario: hovers, detalles */
    --xn-crema:         #F5F1E8;  /* Fondo general (cálido, no blanco puro) */
    --xn-crema-claro:   #FAF8F3;  /* Fondo de tarjetas */
    --xn-cafe:          #8B6F4E;  /* Acentos, bordes */
    --xn-cafe-claro:    #C9B79C;  /* Bordes suaves */
    --xn-terracota:     #C4785C;  /* Botones de acción (carrito, comprar) */
    --xn-terracota-osc: #A85F45;  /* Hover de botones */
    --xn-carbon:        #2C2C2C;  /* Texto principal */
    --xn-gris-suave:    #6B6B6B;  /* Texto secundario */

    /* Tipografía */
    --xn-font-titulo:   'Jost', 'Century Gothic', 'Futura', sans-serif;
    --xn-font-texto:    'Karla', -apple-system, 'Segoe UI', sans-serif;

    /* Medidas */
    --xn-radio:         4px;
    --xn-transicion:    all 0.25s ease;
}

/* ==========================================================================
   BASE
   ========================================================================== */

body {
    background-color: var(--xn-crema);
    color: var(--xn-carbon);
    font-family: var(--xn-font-texto);
    font-size: 16px;
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--xn-font-titulo);
    color: var(--xn-verde-oscuro);
    font-weight: 400;
    letter-spacing: 0.02em;
}

h1 { font-size: 2.4em; }
h2 { font-size: 1.9em; }
h3 { font-size: 1.4em; }

a {
    color: var(--xn-verde-oscuro);
    transition: var(--xn-transicion);
}

a:hover {
    color: var(--xn-terracota);
}

/* ==========================================================================
   CABECERA
   ========================================================================== */

.site-header {
    background-color: var(--xn-crema-claro);
    border-bottom: 1px solid var(--xn-cafe-claro);
    padding-top: 1.5em;
    padding-bottom: 1em;
}

.site-header .site-branding img,
.site-header .custom-logo-link img {
    max-width: 240px;
    height: auto;
}

/* Menú principal */
.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
    font-family: var(--xn-font-titulo);
    color: var(--xn-verde-oscuro);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85em;
    font-weight: 500;
    padding: 1em 1.2em;
}

.main-navigation ul.menu > li > a:hover,
.main-navigation ul.nav-menu > li > a:hover {
    color: var(--xn-terracota);
}

.main-navigation ul.menu li.current-menu-item > a {
    color: var(--xn-terracota);
}

/* Submenús */
.main-navigation ul.menu ul,
.main-navigation ul.nav-menu ul {
    background-color: var(--xn-crema-claro);
    border: 1px solid var(--xn-cafe-claro);
}

/* Carrito de la cabecera */
.site-header-cart .cart-contents {
    color: var(--xn-verde-oscuro);
    font-family: var(--xn-font-titulo);
}

.site-header-cart .cart-contents:hover {
    color: var(--xn-terracota);
}

/* Buscador */
.woocommerce-product-search input[type="search"],
.widget_search input[type="search"] {
    background-color: #fff;
    border: 1px solid var(--xn-cafe-claro);
    border-radius: var(--xn-radio);
    padding: 0.7em 1em;
}

/* ==========================================================================
   BOTONES
   ========================================================================== */

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    background-color: var(--xn-terracota);
    color: #fff;
    font-family: var(--xn-font-titulo);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.85em;
    font-weight: 500;
    border-radius: var(--xn-radio);
    padding: 0.9em 1.8em;
    border: none;
    transition: var(--xn-transicion);
}

button:hover,
.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    background-color: var(--xn-terracota-osc);
    color: #fff;
}

/* Botón principal (finalizar compra) */
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    background-color: var(--xn-verde-oscuro);
    color: #fff;
}

.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
    background-color: var(--xn-verde-claro);
    color: #fff;
}

/* ==========================================================================
   PRODUCTOS — Listado
   ========================================================================== */

.woocommerce ul.products li.product {
    background-color: var(--xn-crema-claro);
    border: 1px solid transparent;
    border-radius: var(--xn-radio);
    padding: 1em;
    transition: var(--xn-transicion);
}

.woocommerce ul.products li.product:hover {
    border-color: var(--xn-cafe-claro);
    box-shadow: 0 4px 16px rgba(74, 93, 78, 0.08);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--xn-font-titulo);
    color: var(--xn-verde-oscuro);
    font-size: 1.05em;
    font-weight: 400;
    padding-bottom: 0.4em;
}

.woocommerce ul.products li.product .price {
    color: var(--xn-cafe);
    font-family: var(--xn-font-titulo);
    font-size: 1.1em;
    font-weight: 500;
}

.woocommerce ul.products li.product img {
    border-radius: var(--xn-radio);
    margin-bottom: 0.8em;
}

/* Etiqueta de oferta */
.woocommerce span.onsale {
    background-color: var(--xn-verde-claro);
    color: #fff;
    font-family: var(--xn-font-titulo);
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--xn-radio);
    min-height: auto;
    min-width: auto;
    padding: 0.4em 0.9em;
    line-height: 1.4;
}

/* ==========================================================================
   PRODUCTO INDIVIDUAL
   ========================================================================== */

.woocommerce div.product .product_title {
    font-family: var(--xn-font-titulo);
    color: var(--xn-verde-oscuro);
    font-weight: 400;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--xn-cafe);
    font-family: var(--xn-font-titulo);
    font-size: 1.6em;
    font-weight: 500;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background-color: var(--xn-crema-claro);
    border-bottom-color: var(--xn-crema-claro);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--xn-verde-oscuro);
}

/* Cantidad */
.quantity .qty {
    border: 1px solid var(--xn-cafe-claro);
    border-radius: var(--xn-radio);
    padding: 0.6em;
}

/* ==========================================================================
   PIE DE PÁGINA
   ========================================================================== */

.site-footer {
    background-color: var(--xn-verde-oscuro);
    color: var(--xn-crema);
    padding-top: 3em;
}

.site-footer a {
    color: var(--xn-crema);
}

.site-footer a:hover {
    color: var(--xn-cafe-claro);
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer .widget-title {
    color: var(--xn-crema);
    font-family: var(--xn-font-titulo);
}

/* Logo en el footer (versión blanca) */
.site-footer .xn-footer-logo img {
    max-width: 200px;
    height: auto;
    margin-bottom: 1em;
}

/* Frase de marca en el footer */
.xn-tagline {
    font-family: var(--xn-font-titulo);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.8em;
    color: var(--xn-cafe-claro);
}

/* ==========================================================================
   AVISOS DE WOOCOMMERCE
   ========================================================================== */

.woocommerce-message,
.woocommerce-info {
    background-color: var(--xn-crema-claro);
    border-top-color: var(--xn-verde-claro);
    color: var(--xn-carbon);
}

.woocommerce-message::before,
.woocommerce-info::before {
    color: var(--xn-verde-claro);
}

.woocommerce-error {
    background-color: var(--xn-crema-claro);
    border-top-color: var(--xn-terracota);
    color: var(--xn-carbon);
}

.woocommerce-error::before {
    color: var(--xn-terracota);
}

/* ==========================================================================
   RESPONSIVE — Móvil
   ========================================================================== */

@media (max-width: 767px) {
    .site-header .site-branding img,
    .site-header .custom-logo-link img {
        max-width: 180px;
    }

    h1 { font-size: 1.8em; }
    h2 { font-size: 1.5em; }
}