/*
Theme Name: Kadence Child - Malva Cloth
Theme URI: https://malvacloth.com
Description: Child theme de Kadence para Malva Cloth
Author: Malva Cloth
Template: kadence
Version: 1.2.0
Text Domain: kadence-child
*/

/* =========================================
   VARIABLES GLOBALES
   ========================================= */
:root {
  /* Paleta */
  --color-malva:       #7B4F7A;
  --color-malva-dark:  #4E2E4D;
  --color-malva-light: #9B6F9A;
  --color-coral:       #C4527A;
  --color-cream:       #FAF7F4;
  --color-nude:        #E8D5C4;
  --color-charcoal:    #2A2A2A;
  --color-off-white:   #FFFDFC;
  --color-white:       #FFFFFF;
  --color-border:      rgba(123, 79, 122, 0.12);
  --color-text-muted:  #6B6B6B;

  /* Tipografía */
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.5rem;
  --text-4xl:  3.25rem;

  --line-tight:   1.15;
  --line-normal:  1.6;
  --line-relaxed: 1.8;

  /* Espaciado */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Radios */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-full: 9999px;

  /* Sombras */
  --shadow-sm: 0 1px 4px rgba(42, 42, 42, 0.06);
  --shadow-md: 0 4px 16px rgba(42, 42, 42, 0.08);
  --shadow-lg: 0 8px 32px rgba(42, 42, 42, 0.12);

  /* Transiciones */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-smooth: 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* =========================================
   BASE
   ========================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--line-normal);
  color: var(--color-charcoal);
  background-color: var(--color-off-white);
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* =========================================
   TIPOGRAFÍA
   ========================================= */
h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title,
.page-title,
.product_title {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: var(--line-tight);
  color: var(--color-charcoal);
  letter-spacing: -0.01em;
  margin-top: 0;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); font-weight: 500; }
h5 { font-size: var(--text-md); font-weight: 500; }
h6 { font-size: var(--text-base); font-weight: 500; }

p {
  margin-top: 0;
  margin-bottom: var(--space-4);
  line-height: var(--line-relaxed);
}

strong, b { font-weight: 500; }

/* =========================================
   ENLACES
   ========================================= */
a {
  color: var(--color-malva);
  text-decoration: none;
  transition: color var(--transition-base);
}
a:hover { color: var(--color-coral); }
a:focus-visible {
  outline: 2px solid var(--color-malva);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* =========================================
   BOTONES
   ========================================= */
.button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8125rem 2rem;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--color-charcoal);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-base),
              color var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base),
              transform var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
  background-color: var(--color-charcoal);
  color: var(--color-off-white) !important;
  line-height: 1;
}

.button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
input[type="submit"]:hover {
  background-color: var(--color-malva);
  border-color: var(--color-malva);
  color: var(--color-off-white) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--color-charcoal) !important;
  border-color: var(--color-charcoal);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--color-charcoal);
  color: var(--color-off-white) !important;
}

/* =========================================
   KADENCE — HEADER
   ========================================= */
.site-header,
.site-header-wrap,
.site-header-upper-wrap {
  background-color: var(--color-off-white);
}

/* Logo */
.site-branding img,
.custom-logo,
.site-branding .site-title {
  max-height: 52px;
}

/* Título del sitio como logo de texto */
.site-title,
.site-title a {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-charcoal);
}
.site-title a:hover { color: var(--color-malva); }

/* Navegación principal */
.main-navigation .menu > li > a,
.main-navigation ul > li > a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-charcoal);
  transition: color var(--transition-base);
  padding: 0.5rem 0.75rem;
}
.main-navigation .menu > li > a:hover,
.main-navigation ul > li > a:hover {
  color: var(--color-malva);
}

/* Dropdown */
.main-navigation .sub-menu {
  background-color: var(--color-off-white);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.main-navigation .sub-menu a {
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-charcoal);
  padding: 0.6rem 1.25rem;
}
.main-navigation .sub-menu a:hover { color: var(--color-malva); }

/* Botón menú móvil */
.menu-toggle-open {
  color: var(--color-charcoal);
}

/* =========================================
   KADENCE — FOOTER
   ========================================= */
.site-footer,
.site-footer-wrap {
  background-color: var(--color-charcoal);
  color: var(--color-nude);
  font-size: var(--text-sm);
}

.site-footer a,
.footer-html a {
  color: var(--color-nude);
  transition: color var(--transition-base);
}
.site-footer a:hover,
.footer-html a:hover {
  color: var(--color-off-white);
}

.site-footer p {
  color: var(--color-nude);
  margin-bottom: var(--space-2);
}

/* =========================================
   CONTENIDO — BLOG / PÁGINAS
   ========================================= */
.content-area,
.site-main {
  background-color: var(--color-off-white);
}

/* Cards del blog */
.loop-entry,
.entry.content-bg {
  background-color: var(--color-white);
  border: 1px solid rgba(42,42,42,0.06);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.loop-entry:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Título de la entrada */
.entry-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 400;
  margin-bottom: var(--space-2);
}
.entry-title a {
  color: var(--color-charcoal);
}
.entry-title a:hover {
  color: var(--color-malva);
}

/* Meta (fecha, autor) */
.entry-meta,
.entry-date,
.author {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}

/* Categorías */
.category-link-uncategorized,
.category-links a,
.term-links a {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-malva);
}

/* Extracto */
.entry-summary p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--line-relaxed);
}

/* "Leer más" */
.entry-actions a,
.read-more-link {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-charcoal);
  border-bottom: 1px solid var(--color-charcoal);
  padding-bottom: 1px;
  transition: color var(--transition-base), border-color var(--transition-base);
}
.entry-actions a:hover,
.read-more-link:hover {
  color: var(--color-malva);
  border-color: var(--color-malva);
}

/* Separador */
hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-8) 0;
}

/* =========================================
   WOOCOMMERCE — BASE
   ========================================= */
.woocommerce,
.woocommerce-page {
  background-color: var(--color-off-white);
}

/* ---- Grid de productos ---- */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: var(--space-4) !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  position: relative;
  overflow: hidden;
  float: none !important;
  width: auto !important;
}

/* Imagen producto */
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform var(--transition-smooth);
}
.woocommerce ul.products li.product:hover a img,
.woocommerce-page ul.products li.product:hover a img {
  transform: scale(1.04);
}

/* Nombre producto */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 400;
  color: var(--color-charcoal);
  margin-top: var(--space-3);
  margin-bottom: var(--space-1);
  padding: 0;
}

/* Precio en grid */
.woocommerce ul.products li.product .price {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-charcoal);
  display: block;
  margin-bottom: var(--space-3);
}
.woocommerce ul.products li.product .price del {
  color: var(--color-nude);
  margin-right: var(--space-2);
  opacity: 0.8;
}
.woocommerce ul.products li.product .price ins {
  color: var(--color-coral);
  text-decoration: none;
  font-weight: 500;
}

/* Botón add to cart */
.woocommerce ul.products li.product .button.add_to_cart_button {
  width: 100%;
  padding: 0.6875rem 1rem;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
}

/* ---- Producto individual ---- */
.woocommerce div.product .woocommerce-product-gallery__image img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  width: 100%;
}

.woocommerce div.product h1.product_title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--text-2xl);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-3);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--color-charcoal);
}
.woocommerce div.product p.price del { color: var(--color-nude); }
.woocommerce div.product p.price ins {
  color: var(--color-coral);
  text-decoration: none;
}

.woocommerce div.product .cart .single_add_to_cart_button {
  width: 100%;
  padding: 1rem 2rem;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
}

/* Breadcrumb */
.woocommerce .woocommerce-breadcrumb {
  font-size: var(--text-xs);
  color: var(--color-nude);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-6);
}
.woocommerce .woocommerce-breadcrumb a { color: var(--color-nude); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--color-malva); }

/* Badge SALE */
.woocommerce span.onsale {
  background-color: var(--color-coral);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.6rem;
  min-height: auto;
  min-width: auto;
  line-height: 1.4;
  top: var(--space-3);
  left: var(--space-3);
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-charcoal);
}

/* Carrito */
.woocommerce table.cart td,
.woocommerce table.cart th {
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

/* Totales carrito / checkout */
.woocommerce-cart .cart-collaterals .cart_totals h2,
.woocommerce-checkout h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--text-xl);
}

/* Formulario checkout */
.woocommerce-checkout .woocommerce-billing-fields label,
.woocommerce-checkout .woocommerce-shipping-fields label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--color-charcoal);
}

.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce textarea,
.woocommerce select {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  border: 1px solid var(--color-nude);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  color: var(--color-charcoal);
  background-color: var(--color-white);
  transition: border-color var(--transition-base);
}
.woocommerce input[type="text"]:focus,
.woocommerce input[type="email"]:focus,
.woocommerce input[type="tel"]:focus,
.woocommerce textarea:focus {
  border-color: var(--color-malva);
  outline: none;
}

/* =========================================
   GUTENBERG — BLOQUES
   ========================================= */
.wp-block-image img {
  border-radius: var(--radius-md);
}

.wp-block-quote {
  border-left: 3px solid var(--color-malva);
  padding-left: var(--space-6);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-style: italic;
  color: var(--color-charcoal);
}

.wp-block-separator {
  border-color: var(--color-border);
  opacity: 1;
}

/* Columnas */
.wp-block-columns {
  gap: var(--space-8);
}

/* Colores de fondo de bloque */
.has-charcoal-background-color { background-color: var(--color-charcoal) !important; }
.has-malva-background-color    { background-color: var(--color-malva) !important; }
.has-cream-background-color    { background-color: var(--color-cream) !important; }
.has-nude-background-color     { background-color: var(--color-nude) !important; }
.has-coral-background-color    { background-color: var(--color-coral) !important; }
.has-off-white-background-color{ background-color: var(--color-off-white) !important; }

/* Colores de texto */
.has-charcoal-color { color: var(--color-charcoal) !important; }
.has-malva-color    { color: var(--color-malva) !important; }
.has-coral-color    { color: var(--color-coral) !important; }
.has-cream-color    { color: var(--color-cream) !important; }
.has-nude-color     { color: var(--color-nude) !important; }

/* =========================================
   RESPONSIVE — MOBILE FIRST
   ========================================= */

/* Tablet 640px+ */
@media (min-width: 640px) {
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-2xl); }

  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-6) !important;
  }
}

/* Desktop 1024px+ */
@media (min-width: 1024px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--space-8) !important;
  }
}

/* Desktop wide 1280px+ */
@media (min-width: 1280px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}