/* =========================================================================
   MAKA THEME — main.css
   Estilos completos del tema bohemio.
   "La magia está en ser tú."

   TABLA DE CONTENIDOS
   1. Variables de marca (colores, tipografías, radios)
   2. Base / tipografía
   3. Utilidades de layout (contenedor, blobs, botones)
   4. Barra de anuncio
   5. Header / navegación
   6. Menú móvil
   7. Buscador
   8. Hero
   9. Categorías
   10. Tarjetas de producto
   11. Manifiesto orgánico
   12. Blog
   13. Newsletter
   14. Footer
   15. WooCommerce (catálogo, producto, carrito, checkout)
   16. Páginas internas / posts / 404 / search
   17. Contacto
   18. Responsive
   ========================================================================= */

/* 1. VARIABLES DE MARCA --------------------------------------------------- */
:root {
  --lila: #AFA3E8;        /* Lila Libre  - color principal */
  --sol: #F4C542;         /* Sol Valiente - amarillo acento */
  --esencia: #F5F2EC;     /* Esencia Pura - fondo cálido */
  --intencion: #1A1A1A;   /* Intención - texto/negro */
  --verde: #A8C3A0;       /* Verde Raíz - complementario */
  --blanco: #FFFFFF;
  --gris-texto: #5A5A52;
  --gris-suave: #7A7A72;
  --gris-claro: #A8A8A0;
  --error: #C0584B;

  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  --container: 1240px;
  --shadow-soft: 0 18px 50px rgba(26, 26, 26, 0.08);
  --shadow-card: 0 10px 30px rgba(26, 26, 26, 0.06);
}

/* 2. BASE / TIPOGRAFÍA ---------------------------------------------------- */
body.maka-body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--intencion);
  background-color: var(--esencia);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
/* Respaldo general: cualquier elemento que se desborde horizontalmente en
   algún punto del sitio (ej. el carril interno del carrusel de producto) no
   debe poder ensanchar la página completa ni afectar a elementos con
   position:fixed (como el botón flotante de WhatsApp) — de ahí que también
   se hayan visto "cortados" en el mismo reporte del usuario. */
html { overflow-x: hidden; }
body.maka-body { overflow-x: hidden; max-width: 100vw; }

h1, h2, h3, h4, h5, h6 { line-height: 1.15; margin: 0 0 .6em; }

.fraunces, .maka-display { font-family: var(--font-display); }

a { color: inherit; transition: color .25s ease; }
a:hover { color: var(--lila); }

p { margin: 0 0 1em; }

strong, b { font-weight: 600; }

/* 3. UTILIDADES DE LAYOUT ------------------------------------------------- */
.maka-container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: 36px;
  padding-right: 36px;
}

.maka-section { padding: 64px 0; }

/* Formas orgánicas blob */
.blob  { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
.blob2 { border-radius: 58% 42% 38% 62% / 54% 40% 60% 46%; }

/* Botones */
.maka-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  padding: 15px 36px;
  border-radius: var(--radius-full);
  border: none;
  cursor: url('../images/cursor-estrella.png') 16 16, pointer;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
  line-height: 1;
  text-align: center;
}
.maka-btn--dark { background: var(--intencion); color: var(--esencia); }
.maka-btn--dark:hover { background: var(--lila); color: #fff; }
.maka-btn--lila { background: var(--lila); color: #fff; }
.maka-btn--lila:hover { background: var(--intencion); color: #fff; }
.maka-btn--outline { background: transparent; border: 1.5px solid var(--intencion); color: var(--intencion); }
.maka-btn--outline:hover { background: var(--intencion); color: #fff; }
.maka-btn--ghost { background: transparent; color: var(--intencion); padding-left: 0; padding-right: 0; }
.maka-btn--ghost:hover { color: var(--lila); }

.maka-eyebrow {
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--verde);
  font-weight: 500;
  margin-bottom: 12px;
}
.maka-section-title { font-family: var(--font-display); font-size: 2.4rem; font-weight: 300; }

.maka-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 40px;
  gap: 24px;
  flex-wrap: wrap;
}
.maka-section-head--center { display: block; text-align: center; }

/* 4. BARRA DE ANUNCIO ----------------------------------------------------- */
.maka-announcement {
  background: var(--verde);
  color: var(--intencion);
  text-align: center;
  font-size: 12px;
  letter-spacing: .03em;
  padding: 10px 16px;
  font-weight: 500;
}

/* 5. HEADER --------------------------------------------------------------- */
.maka-header {
  background: rgba(245, 242, 236, 0.9);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(26,26,26,.04);
}
.maka-header__inner {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.maka-logo img { height: 40px; width: auto; }
/* Logo del encabezado (the_custom_logo() nativo de WordPress imprime la
   clase .custom-logo, no .maka-logo de arriba) — sin esta regla se veía a
   su tamaño natural del SVG (222×70), demasiado grande para los 80px de
   alto del header. height:35px = 50% del tamaño con el que se veía antes;
   width:auto mantiene la proporción real del logo automáticamente. */
.custom-logo { height: 35px; width: auto; }

.maka-menu {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
  color: #4A4A45;
}
.maka-menu a { transition: color .25s; }
.maka-menu a:hover,
.maka-menu .current-menu-item > a,
.maka-menu .current_page_item > a { color: var(--lila); }

/* Submenú desplegable (ej. "Tienda" → categorías) — clic en el padre navega,
   hover/foco muestra las categorías. */
.maka-menu li.menu-item-has-children { position: relative; }
.maka-menu li.menu-item-has-children > a::after {
  content: '\f107';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 10px;
  margin-left: 6px;
  vertical-align: middle;
  transition: transform .25s ease;
}
.maka-menu li.menu-item-has-children:hover > a::after,
.maka-menu li.menu-item-has-children:focus-within > a::after { transform: rotate(180deg); }
.maka-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 210px;
  margin: 0;
  padding: 10px;
  background: var(--esencia);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  z-index: 60;
}
.maka-menu li.menu-item-has-children:hover > .sub-menu,
.maka-menu li.menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.maka-menu .sub-menu a {
  display: block;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  color: var(--intencion);
}
.maka-menu .sub-menu a:hover { background: rgba(175, 163, 232, .12); color: var(--lila); }

/* Menú móvil: las categorías aparecen anidadas y siempre visibles debajo de
   "Tienda" (sin necesidad de hover, que no aplica en pantallas táctiles). */
.maka-mobile-menu .sub-menu { padding-left: 18px; }
.maka-mobile-menu .sub-menu a { font-size: 15px; padding: 10px 0; }

.maka-header__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  color: #4A4A45;
  font-size: 16px;
}
.maka-header__actions a:hover,
.maka-icon-btn:hover { color: var(--lila); }
.maka-icon-btn {
  background: none;
  border: none;
  cursor: url('../images/cursor-estrella.png') 16 16, pointer;
  color: inherit;
  font-size: 16px;
  padding: 0;
  line-height: 1;
}
.maka-cart-link { position: relative; }
.maka-cart-count {
  position: absolute;
  top: -8px;
  right: -10px;
  background: var(--lila);
  color: #fff;
  font-size: 10px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
}
.maka-burger { display: none; }

/* 6. MENÚ MÓVIL ----------------------------------------------------------- */
.maka-mobile-nav {
  position: fixed;
  top: 0; right: 0;
  width: 82%;
  max-width: 360px;
  height: 100%;
  background: var(--esencia);
  z-index: 100;
  transform: translateX(100%);
  transition: transform .35s ease;
  padding: 28px 28px 40px;
  overflow-y: auto;
  box-shadow: -20px 0 60px rgba(0,0,0,.15);
}
.maka-mobile-nav.is-open { transform: translateX(0); }
.maka-mobile-nav__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.maka-mobile-nav ul { display: flex; flex-direction: column; gap: 4px; }
.maka-mobile-nav li a { display: block; padding: 12px 0; font-size: 18px; font-family: var(--font-display); border-bottom: 1px solid rgba(26,26,26,.06); }
.maka-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26,26,26,.4);
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease;
}
.maka-overlay.is-open { opacity: 1; visibility: visible; }
.maka-close { background: none; border: none; font-size: 22px; cursor: url('../images/cursor-estrella.png') 16 16, pointer; color: var(--intencion); }

/* 7. BUSCADOR ------------------------------------------------------------- */
.maka-search-panel {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--esencia);
  z-index: 110;
  padding: 28px 0;
  transform: translateY(-100%);
  transition: transform .35s ease;
  box-shadow: var(--shadow-soft);
}
.maka-search-panel.is-open { transform: translateY(0); }
.maka-search-panel form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.maka-search-panel input[type="search"],
.maka-search-panel input[type="text"] {
  flex: 1;
  min-width: 0; /* sin esto, el input (elemento con "tamaño automático" propio
    del navegador) no se encoge por debajo de su ancho por defecto dentro del
    flexbox — en pantallas angostas eso empujaba el botón "Buscar" (y el de
    cerrar) fuera del viewport en vez de dejarlos visibles. */
  font-family: var(--font-display);
  font-size: 1.6rem;
  border: none;
  background: transparent;
  border-bottom: 2px solid rgba(26,26,26,.15);
  padding: 8px 4px;
  color: var(--intencion);
}
.maka-search-panel input:focus { outline: none; border-color: var(--lila); }

/* 8. HERO ----------------------------------------------------------------- */
.maka-hero { position: relative; overflow: hidden; }
.maka-hero__blob1 {
  position: absolute; top: -96px; right: -96px;
  width: 420px; height: 420px;
  background: rgba(175,163,232,.25);
}
.maka-hero__blob2 {
  position: absolute; top: 160px; left: -80px;
  width: 288px; height: 288px;
  background: rgba(168,195,160,.25);
}
.maka-hero__inner { position: relative; padding-top: 64px; padding-bottom: 80px; }
.maka-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.maka-badge-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.7);
  font-size: 12px; padding: 8px 16px;
  border-radius: var(--radius-full);
  margin-bottom: 28px;
}
.maka-badge-pill i { color: var(--sol); font-size: 10px; }
.maka-hero__title {
  font-family: var(--font-display);
  font-size: 4.8rem;
  line-height: 1.02;
  font-weight: 300;
  margin-bottom: 24px;
}
.maka-hero__title .italic { font-style: italic; color: var(--lila); }
.maka-hero__text { color: var(--gris-texto); font-size: 1.125rem; font-weight: 300; margin-bottom: 36px; max-width: 28rem; }
.maka-hero__cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.maka-hero__media { position: relative; }
.maka-hero__media img { width: 100%; height: 560px; object-fit: cover; }
.maka-hero__card {
  position: absolute; bottom: 16px; left: -16px;
  background: #fff; border-radius: 16px;
  padding: 16px 24px;
  box-shadow: var(--shadow-soft);
  display: flex; align-items: center; gap: 12px;
}
.maka-hero__card i { color: var(--verde); font-size: 20px; }
.maka-hero__card p { margin: 0; }
.maka-hero__card .t { font-size: 14px; font-weight: 500; line-height: 1; }
.maka-hero__card .s { font-size: 12px; color: var(--gris-suave); margin-top: 4px; }

/* 9. CATEGORÍAS ----------------------------------------------------------- */
.maka-cats__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.maka-cat { text-align: center; }
.maka-cat__img {
  aspect-ratio: 1/1;
  overflow: hidden;
  margin-bottom: 16px;
  background: #fff;
}
.maka-cat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.maka-cat:hover .maka-cat__img img { transform: scale(1.1); }
.maka-cat p { font-size: 14px; font-weight: 500; margin: 0; }

/* Página "Catálogo completo" (/categoria-producto/) — tarjetas circulares,
   una por categoría real de la tienda. */
.maka-catalog { padding: 56px 0 88px; }
.maka-catalog__head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.maka-catalog__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 36px 24px;
}
.maka-catalog-cat { text-align: center; }
.maka-catalog-cat__img {
  aspect-ratio: 1/1;
  max-width: 180px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-card);
}
.maka-catalog-cat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.maka-catalog-cat:hover .maka-catalog-cat__img img { transform: scale(1.08); }
.maka-catalog-cat p { font-size: 14px; font-weight: 500; margin: 0; }
@media (max-width: 1100px) { .maka-catalog__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .maka-catalog__grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; } }

/* 10. TARJETAS DE PRODUCTO ------------------------------------------------ */
.maka-products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.maka-product-card { position: relative; }
.maka-product-card__media {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: 16px;
  background: #fff;
}
.maka-product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.maka-product-card:hover .maka-product-card__media img { transform: scale(1.05); }
.maka-tag {
  position: absolute; top: 16px; left: 16px;
  font-size: 10px; font-weight: 600;
  padding: 4px 12px; border-radius: var(--radius-full);
}
.maka-tag--new { background: var(--sol); color: var(--intencion); }
.maka-tag--sale { background: var(--lila); color: #fff; }
.maka-fav {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px;
  background: rgba(255,255,255,.8);
  border-radius: var(--radius-full);
  border: none; cursor: url('../images/cursor-estrella.png') 16 16, pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--gris-texto); font-size: 12px;
  transition: color .25s;
}
.maka-fav:hover { color: var(--lila); }
.maka-product-card__cat { font-size: 12px; color: var(--gris-claro); margin: 0 0 4px; }
.maka-product-card__title { font-size: 16px; font-weight: 500; margin: 0 0 4px; }
.maka-product-card__title a:hover { color: var(--lila); }
.maka-product-card__price { font-size: 14px; font-weight: 600; }
.maka-product-card__price del { color: var(--gris-claro); font-weight: 400; font-size: 12px; margin-left: 6px; }
.maka-product-card__price ins { text-decoration: none; }

/* 10.1 PESTAÑAS "CARRITO" / "FAVORITOS" (página del carrito) -------------
   Mismo lenguaje visual que .maka-account-tabs (login/registro) — píldora
   activa oscura, inactiva transparente. Ver functions.php →
   maka_wrap_cart_with_favorites_tabs(). */
.maka-cart-tabs {
  display: flex; gap: 8px;
  max-width: 360px;
  margin: 0 0 32px;
}
.maka-cart-tabs__btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  text-align: center;
  padding: 12px 16px;
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 500;
  color: var(--gris-texto);
  cursor: url('../images/cursor-estrella.png') 16 16, pointer;
  transition: background-color .25s ease, color .25s ease;
}
.maka-cart-tabs__btn.is-active { background: var(--intencion); color: var(--esencia); }
.maka-cart-tabs__btn:hover:not(.is-active) { background: rgba(26, 26, 26, .06); }
.maka-cart-tabs__count {
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--lila);
  color: #fff;
  font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.maka-cart-tabs__btn:not(.is-active) .maka-cart-tabs__count { background: rgba(26,26,26,.12); color: var(--gris-texto); }

.maka-cart-tab-panel { display: none; }
.maka-cart-tab-panel.is-active { display: block; }

/* 10.2 GRID DE FAVORITOS — misma tarjeta .maka-product-card del catálogo,
   ~20% más pequeña. La reducción de ancho por tarjeta viene de usar 5
   columnas en vez de 4 (1/5 = 80% del ancho de 1/4, con el mismo gap
   proporcional) y la tipografía/espaciado interno se escala al mismo 80%
   a mano (más confiable que transform:scale para mantener nitidez e
   interacción del botón de favorito). */
.maka-fav-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
  margin: 0 0 40px;
}
.maka-fav-grid .maka-product-card__media { margin-bottom: 13px; }
.maka-fav-grid .maka-tag { top: 11px; left: 11px; font-size: 8px; padding: 3px 10px; }
.maka-fav-grid .maka-fav { top: 11px; right: 11px; width: 29px; height: 29px; font-size: 10px; }
.maka-fav-grid .maka-product-card__cat { font-size: 10px; }
.maka-fav-grid .maka-product-card__title { font-size: 13px; }
.maka-fav-grid .maka-product-card__price { font-size: 11px; }
.maka-fav-grid .maka-product-card__price del { font-size: 10px; }
.maka-fav-empty { color: var(--gris-texto); padding: 40px 0; text-align: center; }

@media (max-width: 1100px) { .maka-fav-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .maka-fav-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; } }

/* 11. MANIFIESTO ---------------------------------------------------------- */
.maka-manifiesto { margin: 40px 0; }
.maka-manifiesto__box {
  position: relative;
  background: rgba(175,163,232,.15);
  border-radius: 60px;
  padding: 80px 64px;
  overflow: hidden;
}
.maka-manifiesto__blob {
  position: absolute; bottom: -64px; right: -40px;
  width: 288px; height: 288px;
  background: rgba(244,197,66,.2);
}
.maka-manifiesto__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.maka-manifiesto__icon { color: var(--sol); font-size: 30px; margin-bottom: 24px; }
.maka-manifiesto__title { font-family: var(--font-display); font-size: 2.4rem; line-height: 1.3; font-weight: 300; margin-bottom: 24px; }
.maka-manifiesto__title .italic { font-style: italic; color: var(--lila); }
.maka-manifiesto__text { color: var(--gris-texto); font-weight: 300; margin-bottom: 32px; }
.maka-values { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.maka-value { background: #fff; border-radius: var(--radius-lg); padding: 28px; text-align: center; }
.maka-value:nth-child(2), .maka-value:nth-child(4) { margin-top: 24px; }
.maka-value i { font-size: 24px; margin-bottom: 12px; }
.maka-value .ico-verde { color: var(--verde); }
.maka-value .ico-lila { color: var(--lila); }
.maka-value .ico-sol { color: var(--sol); }
.maka-value h3 { font-family: var(--font-display); font-size: 1.5rem; margin: 0; }
.maka-value p { font-size: 12px; color: var(--gris-suave); margin-top: 4px; }

/* 12. BLOG ---------------------------------------------------------------- */
.maka-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.maka-article-card { background: #fff; border-radius: var(--radius-xl); overflow: hidden; }
.maka-article-card__media { position: relative; display: block; aspect-ratio: 16/10; overflow: hidden; }
.maka-article-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.maka-article-card:hover .maka-article-card__media img { transform: scale(1.05); }
/* Pie de la imagen de previsualización en /blog = título del post, visible
   ANTES de entrar a la entrada (no confundir con el título de la sección
   .maka-article-card__body de abajo, que ya existía). Dinámico
   (the_title()), recortado a 1 línea con "…" si no cabe. */
.maka-article-card__media-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 16px;
  background: linear-gradient(to top, rgba(26, 26, 26, .72), rgba(26, 26, 26, 0));
  color: var(--blanco);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.maka-article-card__body { padding: 24px; }
.maka-article-card__cat { font-size: 12px; color: var(--lila); font-weight: 500; margin: 0 0 8px; }
.maka-article-card__title { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.35; margin: 0 0 8px; }
.maka-article-card__excerpt { font-size: 14px; color: var(--gris-suave); font-weight: 300; margin: 0; }

/* 13. NEWSLETTER ---------------------------------------------------------- */
.maka-newsletter { padding-bottom: 96px; }
.maka-newsletter__box {
  position: relative;
  background: rgba(168,195,160,.25);
  border-radius: 48px;
  padding: 64px 56px;
  text-align: center;
  overflow: hidden;
}
.maka-newsletter__blob {
  position: absolute; top: -48px; left: -40px;
  width: 224px; height: 224px;
  background: rgba(175,163,232,.25);
}
.maka-newsletter__inner { position: relative; }
.maka-newsletter__icon { color: var(--sol); font-size: 24px; margin-bottom: 20px; }
.maka-newsletter__title { font-family: var(--font-display); font-size: 2.4rem; font-weight: 300; margin-bottom: 12px; }
.maka-newsletter__text { color: var(--gris-texto); font-weight: 300; margin: 0 auto 32px; max-width: 32rem; }
.maka-newsletter__form { display: flex; gap: 12px; max-width: 28rem; margin: 0 auto; }
.maka-newsletter__form input {
  flex: 1; background: #fff; border: 1px solid #fff;
  border-radius: var(--radius-full); padding: 16px 24px; font-size: 14px;
  font-family: var(--font-body);
}
.maka-newsletter__form input:focus { outline: none; border-color: var(--lila); }

/* 14. FOOTER -------------------------------------------------------------- */
.maka-footer { background: var(--intencion); color: #fff; }
.maka-footer__inner { padding: 64px 0; }
.maka-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 48px; }
.maka-footer__logo-link { display: inline-block; cursor: url('../images/cursor-estrella.png') 16 16, pointer; }
.maka-footer__brand img { height: 32px; margin-bottom: 16px; }
.maka-footer__brand p { font-size: 14px; color: #9c9c9c; font-weight: 300; max-width: 22rem; }
.maka-footer__social { display: flex; gap: 16px; margin-top: 24px; color: #9c9c9c; font-size: 18px; }
.maka-footer__social a:hover { color: var(--lila); }
.maka-footer h4 { font-size: 14px; font-weight: 600; margin-bottom: 16px; }
.maka-footer ul li { margin-bottom: 10px; }
.maka-footer ul a { font-size: 14px; color: #9c9c9c; font-weight: 300; }
.maka-footer ul a:hover { color: #fff; }
.maka-footer__contact li { font-size: 14px; color: #9c9c9c; font-weight: 300; }
.maka-footer__contact i { width: 16px; margin-right: 4px; }
.maka-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 32px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.maka-footer__copy { font-size: 12px; color: #6f6f6f; margin: 0; }
.maka-pay { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.maka-pay__label { font-size: 12px; color: #6f6f6f; margin-right: 4px; }
.maka-pay__badge {
  background: #fff; color: var(--intencion);
  font-size: 10px; font-weight: 600;
  padding: 6px 10px; border-radius: var(--radius-sm);
}

/* 15. WOOCOMMERCE --------------------------------------------------------- */
.maka-shop-wrap { padding: 48px 36px 80px; }
.woocommerce-breadcrumb { font-size: 13px; color: var(--gris-suave); margin-bottom: 24px; }
.woocommerce-products-header__title,
.maka-shop-wrap h1 { font-family: var(--font-display); font-weight: 300; font-size: 2.6rem; margin-bottom: 24px; }
.woocommerce-result-count { color: var(--gris-suave); font-size: 14px; }
.woocommerce-ordering select {
  border: 1px solid rgba(26,26,26,.15); border-radius: var(--radius-full);
  padding: 10px 18px; font-family: var(--font-body); background: #fff;
}

/* Grid de productos WooCommerce */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin: 0; padding: 0;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: auto; margin: 0; float: none; text-align: left;
  display: flex; flex-direction: column;
  position: relative;
}
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce-page ul.products li.product .woocommerce-loop-product__link { flex: 1; display: flex; flex-direction: column; position: relative; }
/* La insignia "¡Oferta!" se imprime como primer hijo de .woocommerce-loop-product__link
   (que es flex-column), justo antes de la imagen. Sin position:absolute se convierte
   en su propia fila del flex en vez de superponerse a la imagen — se veían como
   2 elementos separados. Igual que en la página de producto individual. */
.woocommerce ul.products li.product span.onsale,
.woocommerce-page ul.products li.product span.onsale { position: absolute; z-index: 2; }
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button { margin-top: 12px; align-self: flex-start; }
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .maka-wc-thumb img {
  border-radius: var(--radius-xl);
  margin-bottom: 14px;
  aspect-ratio: 3/4;
  object-fit: cover;
  width: 100%;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px; font-weight: 500; padding: 0; margin: 0 0 4px;
  font-family: var(--font-body);
}
.woocommerce ul.products li.product .price {
  color: var(--intencion); font-size: 14px; font-weight: 600;
}
.woocommerce ul.products li.product .price del { color: var(--gris-claro); font-weight: 400; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce span.onsale {
  background: var(--lila) !important; color: #fff !important;
  border-radius: var(--radius-full) !important;
  font-size: 10px !important; font-weight: 600 !important;
  min-height: auto !important; min-width: auto !important;
  padding: 4px 12px !important; margin: 0 !important;
  top: 14px; left: 14px;
  line-height: 1.4 !important;
}

/* Botón .maka-fav en las tarjetas del catálogo/tienda: se imprime como hermano
   del <a> del producto (ver functions.php → maka_shop_loop_fav_button), no
   dentro de .maka-product-card__media como en la portada — .woocommerce
   ul.products li.product ya tiene position:relative, así que el posicionamiento
   absoluto base de .maka-fav funciona igual. Solo se ajustan 2px para alinear
   el top exacto con la insignia "¡Oferta!" de arriba (14px, no los 16px por
   defecto de .maka-fav). */
.woocommerce ul.products li.product .maka-fav,
.woocommerce-page ul.products li.product .maka-fav {
  top: 14px; right: 14px;
}

/* Insignia "Oferta" de los bloques nativos de WooCommerce (recomendados del
   carrito y "Nuevo en la tienda" cuando el carrito está vacío) — por defecto
   usan el estilo genérico de WooCommerce Blocks, distinto al resto del sitio.
   Se homologan al mismo lenguaje visual que .maka-tag--sale (píldora lila).
   Cubre las 2 familias de bloques que WooCommerce usa para esto:
   - .wc-block-components-product-sale-badge → bloque "Product Collection"
     (usado en las recomendaciones del carrito lleno, "Puede que estés
     interesado en…").
   - .wc-block-grid__product-onsale → bloque "Grid" heredado (usado en
     "Nuevo en la tienda" cuando el carrito está vacío). */
.wc-block-components-product-sale-badge,
.wc-block-grid__product-onsale {
  background: var(--lila) !important;
  color: #fff !important;
  border-radius: var(--radius-full) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  padding: 4px 12px !important;
  border: none !important;
  min-height: auto !important;
}
.wc-block-components-product-sale-badge__text,
.wc-block-grid__product-onsale span[aria-hidden="true"] {
  color: #fff !important;
}

/* Selector de páginas de la tienda/categorías (paginate_links nativo de
   WooCommerce, misma clase .page-numbers que .maka-pagination del blog —
   sin estilo propio quedaba como una lista <ul><li> vertical con viñetas).
   Se estandariza aquí con el mismo lenguaje visual que .maka-pagination
   (sección 16) para que todos los selectores de páginas del sitio luzcan
   igual, sin importar si vienen de WordPress o de WooCommerce. */
.woocommerce-pagination { margin-top: 48px; }
.woocommerce-pagination ul.page-numbers {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  list-style: none; margin: 0; padding: 0;
}
.woocommerce-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 12px;
  border-radius: var(--radius-full); background: #fff; font-size: 14px;
  border: 1px solid rgba(26,26,26,.08);
}
.woocommerce-pagination .page-numbers.current { background: var(--lila); color: #fff; border-color: var(--lila); }
.woocommerce-pagination a.page-numbers:hover { background: var(--intencion); color: #fff; }

/* Variante "Anterior/Siguiente" sin números (Mi cuenta > Pedidos): no usa
   .page-numbers, son botones de texto (ya toman el estilo píldora genérico
   de .woocommerce a.button) — solo se alinean en fila con la misma
   separación superior que el resto de selectores de páginas del sitio. */
.woocommerce-pagination.woocommerce-pagination--without-numbers {
  display: flex; justify-content: center; gap: 12px;
}

/* "Mi cuenta" — formulario de inicio de sesión, mismo lenguaje visual que el
   modal de registro del popup de bienvenida (plugin maka-welcome-discount:
   tarjeta blanca centrada, título Fraunces, campos con radio/foco lila,
   botón píldora oscuro). Se limita a la vista de acceso (":not(.logged-in)")
   para no afectar el panel ya autenticado de Mi Cuenta (pedidos, direcciones,
   etc.), que no fue parte de este pedido y desaparece en cuanto el body deja
   de tener esa clase. */
body.woocommerce-account:not(.logged-in) .woocommerce {
  max-width: 420px;
  margin: 0 auto;
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  padding: 40px 32px;
}
body.woocommerce-account:not(.logged-in) .woocommerce h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--intencion);
  text-align: center;
  margin: 0 0 26px;
}
.woocommerce-form-login .woocommerce-form-row--wide label,
.maka-account-register .woocommerce-form-row--wide label {
  display: block;
  font-size: .82rem;
  font-weight: 500;
  color: var(--intencion);
  margin-bottom: 6px;
}
.woocommerce-form-login input.input-text,
.maka-account-register input.input-text {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid rgba(26, 26, 26, .15);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--intencion);
  background: #fff;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.woocommerce-form-login input.input-text:focus,
.maka-account-register input.input-text:focus {
  outline: none;
  border-color: var(--lila);
  box-shadow: 0 0 0 4px rgba(175, 163, 232, .18);
}
/* Botón nativo de WooCommerce para mostrar/ocultar contraseña (JS de
   woocommerce.js envuelve el input en <span class="password-input"> y le
   agrega el botón vacío .show-password-input, alternando la clase
   .display-password — sin CSS propio quedaba invisible). Se reubica dentro
   del campo, al extremo derecho, con un ícono de ojo que cambia según ese
   mismo estado que WooCommerce ya controla por su cuenta. */
.woocommerce-form-login .password-input,
.maka-account-register .password-input { position: relative; display: block; }
.woocommerce-form-login .password-input input.input-text,
.maka-account-register .password-input input.input-text { padding-right: 44px; }
.woocommerce-form-login .show-password-input,
.maka-account-register .show-password-input {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: url('../images/cursor-estrella.png') 16 16, pointer;
  color: var(--gris-suave);
}
.woocommerce-form-login .show-password-input::before,
.maka-account-register .show-password-input::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 16px;
  content: "\f06e"; /* fa-eye */
}
.woocommerce-form-login .show-password-input.display-password::before,
.maka-account-register .show-password-input.display-password::before {
  content: "\f070"; /* fa-eye-slash */
}
.woocommerce-form-login .show-password-input:hover,
.maka-account-register .show-password-input:hover { color: var(--lila); }
/* Botón nativo del navegador para mostrar contraseña (el "ojo" que agrega
   Edge/IE por su cuenta con ::-ms-reveal, y su botón de limpiar ::-ms-clear)
   — se oculta para que solo quede el botón propio de arriba, controlado por
   WooCommerce. Sitewide (no solo el login) para cubrir también el modal de
   registro del popup de bienvenida. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; }

.woocommerce-form-login p.form-row:not(.woocommerce-form-row--wide) {
  display: flex; flex-direction: column; gap: 16px; margin: 20px 0 0;
}
.maka-account-register p.form-row { margin: 4px 0 0; }
.woocommerce-form-login__rememberme {
  display: flex; align-items: center; gap: 8px;
  font-size: .85rem; color: var(--gris-texto); cursor: url('../images/cursor-estrella.png') 16 16, pointer;
}
.woocommerce-form-login__submit {
  width: 100%;
  justify-content: center;
  background: var(--intencion);
  color: var(--esencia);
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 500;
  padding: 15px 28px;
  border: none;
  border-radius: var(--radius-full);
  cursor: url('../images/cursor-estrella.png') 16 16, pointer;
  transition: background-color .25s ease, color .25s ease;
}
.woocommerce-form-login__submit:hover { background: var(--lila); color: #fff; }
.woocommerce-LostPassword {
  text-align: center;
  margin-top: 16px;
  font-size: .85rem;
}
.woocommerce-LostPassword a { color: var(--lila); font-weight: 600; text-decoration: underline; }

/* "Mi cuenta" — pestañas para alternar entre "Iniciar sesión" y "Crear
   cuenta" (agregadas vía hooks en functions.php, sin sobreescribir la
   plantilla). El panel de registro reutiliza el mismo lenguaje visual de
   los campos/botón de login de arriba, y del modal de registro del popup
   de bienvenida (tarjeta blanca, campos con foco lila, botón píldora). */
.maka-account-tabs { display: flex; gap: 8px; margin-bottom: 28px; }
.maka-account-tabs__btn {
  flex: 1;
  text-align: center;
  padding: 12px 16px;
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 500;
  color: var(--gris-texto);
  cursor: url('../images/cursor-estrella.png') 16 16, pointer;
  transition: background-color .25s ease, color .25s ease;
}
.maka-account-tabs__btn.is-active { background: var(--intencion); color: var(--esencia); }
.maka-account-tabs__btn:hover:not(.is-active) { background: rgba(26, 26, 26, .06); }

.maka-account-panel { display: none; }
.maka-account-panel.is-active { display: block; }

.maka-account-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 20px 0;
  text-align: left;
}
.maka-account-consent input { margin-top: 3px; flex-shrink: 0; }
.maka-account-consent label { font-size: .8rem; color: var(--gris-texto); line-height: 1.5; }
.maka-account-consent a { color: var(--lila); text-decoration: underline; }

.maka-account-register__msg {
  min-height: 1.2em;
  margin: 14px 0 0;
  font-size: .88rem;
  font-weight: 500;
  text-align: center;
  color: var(--gris-texto);
  display: none;
}
.maka-account-register__msg.is-visible { display: block; }
.maka-account-register__msg.is-error { color: var(--error); }

/* "Mi cuenta" — panel autenticado (navegación lateral + contenido). Antes de
   este bloque no tenía NINGÚN estilo propio (mismo motivo de siempre: el CSS
   nativo de WooCommerce está deshabilitado en el tema) — la navegación se
   veía como una lista de enlaces sin distinguir cuál está activo, y el
   contenido (pedidos, direcciones, editar cuenta) sin ninguna caja. */
body.woocommerce-account.logged-in .woocommerce {
  display: grid;
  grid-template-columns: 220px 1fr;
  /* row-gap 0: título y nav quedan pegados para verse como UNA sola tarjeta
     oscura (misma técnica que separar radios/paddings más abajo); column-gap
     32px: separación normal entre la tarjeta oscura y la de contenido. */
  gap: 0 32px;
  align-items: start;
}
/* .woocommerce-notices-wrapper solo aparece como hijo directo de .woocommerce
   en la vista SIN sesión (login) — con sesión iniciada, WooCommerce lo
   imprime DENTRO de .woocommerce-MyAccount-content (hook
   woocommerce_account_content), así que en este panel no es un ítem del
   grid; se deja igual por si alguna vez cambia. */
body.woocommerce-account.logged-in .woocommerce-notices-wrapper { grid-column: 1 / -1; }

/* Posiciones EXPLÍCITAS de los 4 hijos directos de .woocommerce en este panel
   (título de nav, nav, botón de despliegue móvil, contenido) — sin esto, el
   auto-acomodo de CSS Grid coloca el título en la columna 1 fila 1, pero
   empuja la <nav> (el 2do hijo) a la columna 2 fila 1 en su lugar, y el
   contenido termina en una fila nueva — descuadrando por completo las 2
   columnas. Fijar cada uno a su celda evita depender del orden de aparición
   en el HTML. */
.maka-account-nav-title { grid-column: 1; grid-row: 1; }
.woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 2; }
/* El botón de despliegue móvil solo existe visualmente en el breakpoint
   ≤900px (ver ese media query) — display:none aquí evita que participe del
   grid de escritorio como un 4to hijo (mismo tipo de bug que el título). */
.maka-account-nav-toggle { display: none; }
body.woocommerce-account.logged-in .woocommerce-MyAccount-content { grid-column: 2; grid-row: 1 / 3; }

/* Título + navegación = UNA sola tarjeta (más oscura que la tarjeta blanca
   de contenido de la derecha, para distinguir "menú" de "contenido" de un
   vistazo). Color: el MISMO --verde que ya usa el botón flotante de
   WhatsApp del sitio (.maka-wa-fab) — un verde YA establecido en la
   identidad visual, en vez de inventar un tono nuevo. Al ser 2 elementos de
   grid distintos (no hay wrapper común en el HTML de WooCommerce), se logra
   dándoles el MISMO fondo y redondeando solo las esquinas exteriores de
   cada uno (arriba en el título, abajo en la nav) — con el row-gap en 0 de
   arriba, quedan pegados y se ven como una pieza sola; el box-shadow se
   repite en ambos para que la tarjeta completa se vea elevada sin una
   costura visible en el medio. Como --verde es un tono claro, el texto va
   en oscuro (--intencion) en vez de blanco, para buen contraste. */
.maka-account-nav-title {
  background: var(--verde);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-soft);
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(26, 26, 26, .7);
  margin: 0;
  padding: 24px 20px 10px;
}

.woocommerce-MyAccount-navigation {
  background: var(--verde);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  box-shadow: var(--shadow-soft);
  padding: 6px 12px 20px;
  /* Ancla el botón de despliegue móvil (.maka-account-nav-toggle, movido
     aquí dentro por JS) a ESTA tarjeta específicamente. */
  position: relative;
}
/* .maka-page__content ul { list-style: disc; } (sección 16, más abajo en
   este archivo) tiene la MISMA especificidad que un simple
   ".woocommerce-MyAccount-navigation ul" y, al declararse después en el
   archivo, terminaba ganando el empate — de ahí la viñeta de lista que no
   se quitaba. Se sube la especificidad con "body.woocommerce-account.
   logged-in" como prefijo para que esta regla gane siempre, sin importar el
   orden en el archivo. */
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Mismo problema de especificidad empatada con ".maka-page__content a {
   color: var(--lila); text-decoration: underline; }" (sección 16) — esa
   regla ganaba el empate en el estado NORMAL (por ir después en el
   archivo), y solo el :hover (con mayor especificidad propia, gracias a
   .is-active/:hover) alcanzaba a ganarle — por eso el color solo cambiaba
   al pasar el mouse. Se sube la especificidad de las 3 reglas con el mismo
   prefijo "body.woocommerce-account.logged-in" para que el --blanco (el
   mismo color exacto que ya usa el texto del botón "Contacto" del header
   sobre su fondo --verde) se vea SIEMPRE, no solo en hover, y se quita el
   subrayado que esa regla también agregaba sin querer. */
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation-link a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 500;
  color: var(--blanco);
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation-link a:hover { background: rgba(26, 26, 26, .1); color: var(--blanco); }
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation-link.is-active a { background: var(--intencion); color: var(--blanco); }
/* Ícono por sección (Font Awesome, ya cargado sitewide) para reconocer cada
   pestaña más rápido de un vistazo. */
.woocommerce-MyAccount-navigation-link a::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 14px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}
.woocommerce-MyAccount-navigation-link--dashboard a::before { content: "\f015"; }       /* fa-house */
.woocommerce-MyAccount-navigation-link--orders a::before { content: "\f290"; }          /* fa-bag-shopping */
.woocommerce-MyAccount-navigation-link--downloads a::before { content: "\f019"; }       /* fa-download */
.woocommerce-MyAccount-navigation-link--edit-address a::before { content: "\f3c5"; }    /* fa-location-dot */
.woocommerce-MyAccount-navigation-link--payment-methods a::before { content: "\f09d"; } /* fa-credit-card */
.woocommerce-MyAccount-navigation-link--edit-account a::before { content: "\f007"; }    /* fa-user */
.woocommerce-MyAccount-navigation-link--customer-logout a::before { content: "\f2f5"; } /* fa-right-from-bracket */
/* "Cerrar sesión" en un tono distinto (acción de salida, no una sección más).
   Mismo prefijo de especificidad que el resto del menú, por la misma razón
   (empate con ".maka-page__content a" de la sección 16). */
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--error); text-decoration: none; }
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation-link--customer-logout a:hover { background: rgba(192, 88, 75, .15); color: var(--error); }

body.woocommerce-account.logged-in .woocommerce-MyAccount-content {
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  padding: 40px;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-content h2,
body.woocommerce-account.logged-in .woocommerce-MyAccount-content h3 {
  font-family: var(--font-display);
  font-weight: 400;
  margin-top: 0;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-content a { color: var(--lila); text-decoration: underline; }

/* Campos/labels/selects compartidos por TODOS los formularios de la cuenta
   (editar cuenta, editar dirección) — el login/registro de arriba ya tienen
   su propio estilo idéntico; esto solo extiende la misma apariencia a los
   formularios que faltaban, en vez de repetir las reglas por tercera vez. */
body.woocommerce-account.logged-in .woocommerce-form-row label,
body.woocommerce-account.logged-in fieldset legend {
  display: block;
  font-size: .82rem;
  font-weight: 500;
  color: var(--intencion);
  margin-bottom: 6px;
}
body.woocommerce-account.logged-in input.input-text,
body.woocommerce-account.logged-in select {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid rgba(26, 26, 26, .15);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--intencion);
  background: #fff;
  transition: border-color .25s ease, box-shadow .25s ease;
}
body.woocommerce-account.logged-in input.input-text:focus,
body.woocommerce-account.logged-in select:focus {
  outline: none;
  border-color: var(--lila);
  box-shadow: 0 0 0 4px rgba(175, 163, 232, .18);
}
body.woocommerce-account.logged-in fieldset { border: none; padding: 0; margin: 24px 0 0; }
body.woocommerce-account.logged-in fieldset legend { font-family: var(--font-display); font-size: 1.1rem; font-weight: 400; margin-bottom: 12px; }
/* Nombre/Apellido lado a lado: .clear (clase que ya trae la plantilla de
   WooCommerce) está pensada justo para acompañar este patrón con float. */
body.woocommerce-account.logged-in .woocommerce-form-row--first { float: left; width: calc(50% - 8px); }
body.woocommerce-account.logged-in .woocommerce-form-row--last { float: right; width: calc(50% - 8px); }
body.woocommerce-account.logged-in .clear { clear: both; }

/* Direcciones (Facturación/Envío) */
body.woocommerce-account.logged-in .woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
body.woocommerce-account.logged-in .woocommerce-Address {
  background: var(--esencia);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 24px;
}
body.woocommerce-account.logged-in .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
body.woocommerce-account.logged-in .woocommerce-Address-title h2 { font-size: 1.1rem; margin: 0; }
/* El link "Editar/Agregar" se ve como un botón propio (píldora blanca sobre
   el fondo de la tarjeta), en vez de un texto subrayado suelto, para que se
   sienta integrado al diseño de tarjeta en vez de flotar aparte. */
body.woocommerce-account.logged-in .woocommerce-Address-title a.edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--intencion);
  background: #fff;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  transition: background-color .25s ease, color .25s ease;
}
body.woocommerce-account.logged-in .woocommerce-Address-title a.edit::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  content: "\f304"; /* fa-pen */
}
body.woocommerce-account.logged-in .woocommerce-Address-title a.edit:hover { background: var(--lila); color: #fff; }
body.woocommerce-account.logged-in address { font-style: normal; font-size: .9rem; line-height: 1.6; color: var(--gris-texto); }

/* Tabla de pedidos: sin padding propio, las celdas quedaban pegadas entre sí
   (mismo motivo de siempre — CSS de WooCommerce deshabilitado). Extiende
   también a la tabla del carrito, que comparte la misma clase .shop_table. */
.woocommerce table.shop_table th,
.woocommerce table.shop_table td { padding: 14px 16px; }

/* Botones WooCommerce */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background: var(--intencion);
  color: var(--esencia);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  padding: 13px 28px;
  transition: background-color .25s, color .25s;
  text-transform: none;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { background: var(--lila); color: #fff; }

/* .star-rating (promedio en la ficha de producto + cada valoración individual)
   depende de la fuente de iconos propia de WooCommerce, deshabilitada junto
   al resto de su CSS (woocommerce_enqueue_styles) — sin esto se ve como
   texto literal ("Valorado 5.00 sobre 5 basado en..."), nunca como estrellas.
   Mismo criterio de reemplazo con el glyph ★ ya usado en el selector de
   puntuación del formulario (ver #tab-reviews .comment-form-rating más
   abajo): el texto original se mantiene en el DOM para accesibilidad, solo
   se oculta visualmente (font-size:0) y el span interno (ya trae su ancho
   en % puesto por WooCommerce) se recorta en la capa dorada superpuesta. */
.woocommerce .star-rating {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 5.4em;
  height: 1em;
  line-height: 1;
  font-size: 15px;
  font-family: Georgia, 'Times New Roman', serif;
  letter-spacing: .18em;
  color: rgba(26, 26, 26, .15);
}
.woocommerce .star-rating::before { content: '★★★★★'; display: block; }
.woocommerce .star-rating span {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  display: block;
  height: 100%;
  font-size: 0;
  color: var(--sol);
}
.woocommerce .star-rating span::before {
  content: '★★★★★';
  display: block;
  font-size: 15px;
  letter-spacing: .18em;
}

/* Página de producto individual */
/* La insignia "¡Oferta!" se imprime como hijo directo de div.product (grid de 2
   columnas), ANTES de la galería. Sin position:absolute se convierte en un tercer
   ítem del grid y empuja el resumen del producto a una fila nueva debajo de la
   imagen — por eso solo se rompía en productos con precio de oferta (el Bolso).
   position:relative aquí ancla la insignia absoluta al mismo punto donde arranca
   la imagen (primera columna), sin afectar el resto del layout. */
.single-product div.product { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; position: relative; }
/* min-width:0 en los hijos del grid es indispensable: por defecto un ítem de
   grid no se encoge por debajo del ancho intrínseco de su contenido
   (min-width:auto), así que si flexslider calcula un ancho de galería mayor
   al de la pantalla, la columna —y la página entera— se desbordan
   horizontalmente en vez de encogerse. Se ve sobre todo en móvil, pero es un
   problema de fondo del grid, no solo de ese breakpoint. */
.single-product div.product > .woocommerce-product-gallery,
.single-product div.product > .summary { min-width: 0; }
.single-product div.product .woocommerce-product-gallery { margin: 0; max-width: 100%; }
.single-product div.product > span.onsale { position: absolute; z-index: 2; }
.single-product div.product .woocommerce-product-gallery img {
  border-radius: var(--radius-xl);
  max-width: 100%;
  height: auto;
}
.single-product div.product .woocommerce-product-gallery,
.single-product div.product .woocommerce-product-gallery__image {
  max-width: 100%;
}
/* OJO: .woocommerce-product-gallery__wrapper NO lleva max-width:100% a propósito.
   flexslider necesita que este contenedor sea más ancho que el 100% visible —
   es el "riel" donde viven las 4 diapositivas una al lado de la otra (ej. 400%
   de ancho para 4 imágenes), y lo desplaza con margin-left/transform para
   mostrar una a la vez. Un intento anterior de capar esto a 100% "aplastaba"
   ese riel, descuadrando el cálculo interno de flexslider — el resultado era
   que solo la primera diapositiva (sin necesidad de desplazamiento) se veía
   bien, y las demás miniaturas no cambiaban la imagen grande. El recorte
   visual (para que ese riel ancho no se vea sobresalir) lo hace el
   overflow:hidden de más abajo, en el contenedor EXTERIOR (.woocommerce-product-gallery),
   no en el riel mismo. */
/* Respaldo defensivo: flexslider calcula en JS el ancho de su "carril" de
   diapositivas y a veces esa medición queda desactualizada frente al ancho
   real del contenedor (ej. si el layout todavía se está acomodando cuando
   flexslider mide por primera vez). overflow:hidden en el propio contenedor
   de la galería garantiza que ese carril nunca se vea sobresalir del recorte
   redondeado, sin importar la causa exacta de la medición. */
.single-product div.product .woocommerce-product-gallery { overflow: hidden; }
/* Botón de lupa (.woocommerce-product-gallery__trigger) generado por el propio JS
   de WooCommerce: se oculta visualmente y la imagen asume su comportamiento (ver
   main.js) reutilizando la misma instancia interna de PhotoSwipe de WooCommerce.
   No tenía ningún estilo propio en el tema, así que ocultarlo libera su espacio
   sin necesidad de ajustes adicionales. */
.woocommerce-product-gallery__trigger { display: none !important; }
.woocommerce-product-gallery__image a,
.woocommerce-product-gallery__image img { cursor: url('../images/cursor-estrella.png') 16 16, pointer; }

/* Selector de miniaturas de la galería (flexslider genera <ol class="flex-control-nav">
   sin estilo propio del tema — se veía como lista numerada en cascada). Se envuelve
   en .maka-gallery-thumbs vía JS (ver main.js) para agregar flechas + desvanecido
   en los extremos cuando hay más miniaturas de las que caben. */
.maka-gallery-thumbs {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
}
.maka-gallery-thumbs .flex-control-nav {
  display: flex;
  flex: 1;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.maka-gallery-thumbs .flex-control-nav::-webkit-scrollbar { display: none; }
.maka-gallery-thumbs .flex-control-nav li { flex: 0 0 auto; }
.maka-gallery-thumbs .flex-control-nav img {
  display: block;
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: var(--radius-md);
  cursor: url('../images/cursor-estrella.png') 16 16, pointer;
  opacity: .5;
  transition: opacity .25s ease;
}
.maka-gallery-thumbs .flex-control-nav img:hover { opacity: .85; }
.maka-gallery-thumbs .flex-control-nav img.flex-active { opacity: 1; }

.maka-gallery-thumbs__arrow {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(26, 26, 26, .12);
  background: var(--blanco);
  color: var(--intencion);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: url('../images/cursor-estrella.png') 16 16, pointer;
  z-index: 2;
  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
.maka-gallery-thumbs__arrow:hover { background: var(--lila); color: #fff; }
/* Las flechas SIEMPRE están presentes (navegan entre imágenes, no solo
   desplazan la tira); se deshabilitan solo en el primer/último extremo. */
.maka-gallery-thumbs__arrow:disabled { opacity: .3; cursor: default; pointer-events: none; }
/* El desvanecido en los bordes sí es condicional: solo cuando hay más
   miniaturas de las que caben en el ancho disponible. */
.maka-gallery-thumbs.is-scrollable::before,
.maka-gallery-thumbs.is-scrollable::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 36px;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
  transition: opacity .25s ease;
}
.maka-gallery-thumbs.is-scrollable::before {
  left: 40px;
  background: linear-gradient(to right, var(--esencia), rgba(245, 242, 236, 0));
}
.maka-gallery-thumbs.is-scrollable::after {
  right: 40px;
  background: linear-gradient(to left, var(--esencia), rgba(245, 242, 236, 0));
}
.maka-gallery-thumbs.is-scrollable.is-at-start::before { opacity: 0; }
.maka-gallery-thumbs.is-scrollable.is-at-end::after { opacity: 0; }
.single-product div.product .product_title {
  font-family: var(--font-display); font-weight: 300; font-size: 2.6rem; margin-bottom: 12px;
}
.single-product div.product p.price,
.single-product div.product span.price { color: var(--intencion); font-size: 1.4rem; font-weight: 600; }
.single-product .woocommerce-tabs { grid-column: 1 / -1; margin-top: 24px; }

/* Pestañas de producto (Descripción / Información adicional / Valoraciones)
   — WooCommerce ya trae la lógica de cambio de pestaña por JS (funciona
   bien, no se toca), pero como el CSS propio de WooCommerce está
   deshabilitado en todo el sitio, se veían como una simple lista de
   enlaces apilados verticalmente, sin ninguna distinción visual de cuál
   está activa. Mismo lenguaje de píldora que el selector de talla
   (.maka-size-swatches__btn) de la misma página, para que se sienta como
   el mismo tipo de control ya conocido, no uno nuevo. */
.wc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
}
.wc-tabs li { margin: 0; }
.wc-tabs li a {
  display: inline-block;
  padding: 10px 20px;
  border: 1.5px solid rgba(26, 26, 26, .15);
  border-radius: var(--radius-full);
  background: var(--blanco);
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 500;
  color: var(--intencion);
  text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
  cursor: url('../images/cursor-estrella.png') 16 16, pointer;
}
.wc-tabs li a:hover { border-color: var(--lila); }
.wc-tabs li.active a {
  background: var(--lila);
  border-color: var(--lila);
  color: var(--blanco);
}

.woocommerce-Tabs-panel { max-width: 760px; }
/* Título de cada panel ("Descripción", "Información adicional",
   "Valoraciones") — el de Valoraciones vive un nivel más adentro en el
   HTML que genera WooCommerce (dentro de #reviews > #comments, no como
   hijo directo del panel como los otros 2), por eso el selector cubre
   ambos casos para que los 3 se vean con el mismo estilo. */
.woocommerce-Tabs-panel > h2,
.woocommerce-Tabs-panel .woocommerce-Reviews-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.4rem;
  margin: 0 0 20px;
}
.woocommerce-Tabs-panel p { line-height: 1.6; color: var(--gris-texto); margin-bottom: 1em; }

/* ======================================================================
 * VALORACIONES DE PRODUCTO — formulario primero, tarjetas debajo,
 * paginación de 10 en 10 (single-product-reviews.php, override del tema)
 * ====================================================================== */

/* Formulario "Añadir una valoración", como tarjeta — mismo lenguaje visual
   (fondo blanco, radius-lg, shadow-card) que las tarjetas del acordeón de
   FAQ, para que toda la sección se sienta parte del mismo sistema. */
#review_form_wrapper {
  background: var(--blanco);
  border: 1px solid rgba(26, 26, 26, .05);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px 28px 6px;
  margin-bottom: 40px;
}
#review_form_wrapper .comment-reply-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  margin: 0 0 18px;
}

/* Resumen (promedio + total) + selector de orden, en una misma barra arriba
   de la lista — en pantallas angostas se apilan uno debajo del otro. */
.maka-reviews-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: -6px 0 24px;
}
.maka-reviews-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--gris-suave);
  font-size: .92rem;
}
.maka-reviews-summary .star-rating { font-size: 16px; }
.maka-reviews-summary__avg { font-family: var(--font-display); font-size: 1.05rem; color: var(--intencion); }

/* Mismo tratamiento de pastilla que el selector "Orden por defecto" de la
   tienda (.woocommerce-ordering select), para que ambos selectores de orden
   del sitio se vean consistentes. */
.maka-reviews-sort { margin: 0; }
.maka-reviews-sort select {
  border: 1px solid rgba(26, 26, 26, .15);
  border-radius: var(--radius-full);
  padding: 10px 18px;
  font-family: var(--font-body);
  font-size: .88rem;
  background: #fff;
  cursor: url('../images/cursor-estrella.png') 16 16, pointer;
}

/* Lista de valoraciones, como tarjetas individuales */
#comments .commentlist {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#comments .commentlist .comment_container {
  display: flex;
  gap: 16px;
  background: var(--blanco);
  border: 1px solid rgba(26, 26, 26, .05);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 22px 24px;
}
#comments .commentlist img.avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
}
#comments .commentlist .comment-text { flex: 1; min-width: 0; }
#comments .commentlist .comment-text .star-rating { margin-bottom: 8px; }
#comments .commentlist .meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 10px;
  font-size: .85rem;
}
#comments .commentlist .woocommerce-review__author { font-family: var(--font-body); font-weight: 600; color: var(--intencion); }
#comments .commentlist .woocommerce-review__dash,
#comments .commentlist .woocommerce-review__published-date { color: var(--gris-claro); }
#comments .commentlist .woocommerce-review__verified {
  font-style: normal;
  font-size: .74rem;
  font-weight: 500;
  color: var(--verde);
  background: rgba(168, 195, 160, .18);
  border-radius: var(--radius-full);
  padding: 2px 10px;
}
#comments .commentlist .woocommerce-review__awaiting-approval {
  display: inline-block;
  margin-top: 4px;
  font-style: normal;
  font-size: .78rem;
  color: var(--gris-claro);
}
#comments .commentlist .description p { margin: 0; color: var(--gris-texto); line-height: 1.6; }
.woocommerce-noreviews { color: var(--gris-suave); font-size: .95rem; }

table.woocommerce-product-attributes { width: 100%; border-collapse: collapse; margin-top: 8px; }
table.woocommerce-product-attributes th,
table.woocommerce-product-attributes td {
  padding: 12px 0;
  border-bottom: 1px solid rgba(26, 26, 26, .08);
  text-align: left;
  font-size: .92rem;
}
table.woocommerce-product-attributes th { color: var(--gris-suave); font-weight: 500; width: 180px; }

/* Valoraciones: el widget de estrellas de WooCommerce depende de su propio
   ícono de fuente (deshabilitado junto al resto de su CSS) — sin esto se ve
   como texto literal "1 of 5 stars, 2 of 5 stars..."; se reemplaza por un
   ícono ★ real vía ::before, con el mismo amarillo de marca (--sol) que ya
   se usa en el resto del sitio para no introducir un color nuevo. */
#tab-reviews .comment-form-rating .stars a {
  display: inline-block;
  width: 22px;
  font-size: 0;
  color: rgba(26, 26, 26, .2);
}
#tab-reviews .comment-form-rating .stars a::before {
  content: '★';
  font-size: 20px;
  line-height: 1;
}
/* .is-hover-filled/.is-click-filled: rellenan también las estrellas
   ANTERIORES a la que se pasó el mouse o se clickeó (main.js sección 15)
   — sin esto solo se vería dorada la estrella exacta tocada, no el relleno
   acumulado que se espera de un control de puntuación (clic en la 4ta
   estrella = 4 estrellas doradas seguidas, no solo la 4ta suelta). */
#tab-reviews .comment-form-rating .stars a:hover,
#tab-reviews .comment-form-rating .stars a.active,
#tab-reviews .comment-form-rating .stars a.is-hover-filled,
#tab-reviews .comment-form-rating .stars a.is-click-filled { color: var(--sol); }
#tab-reviews input[type="text"],
#tab-reviews input[type="email"],
#tab-reviews textarea {
  display: block;
  width: 100%;
  max-width: 480px;
  border: 1px solid rgba(26, 26, 26, .15);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin: 6px 0 16px;
  font-family: var(--font-body);
}
#tab-reviews textarea { max-width: 100%; min-height: 120px; }
#tab-reviews .form-submit input[type="submit"] {
  background: var(--intencion);
  color: var(--esencia);
  border: none;
  border-radius: var(--radius-full);
  padding: 14px 32px;
  font-family: var(--font-body);
  font-weight: 500;
  cursor: url('../images/cursor-estrella.png') 16 16, pointer;
}
.single-product .related.products { grid-column: 1 / -1; margin-top: 48px; }
.single-product .related.products > h2 { font-family: var(--font-display); font-weight: 300; font-size: 2rem; margin-bottom: 24px; }
.woocommerce div.product form.cart {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
/* form.cart es flex y sus hijos directos (tabla de tallas, bloque de cantidad+botón)
   se acomodan según el ancho de cada uno. Sin esto, la tabla de tallas solo forzaba
   el salto de línea cuando tenía muchas opciones (ej. Tenis con 6 tallas) — con
   menos opciones (Hoodie/Chaqueta, 4 tallas) el bloque de compra cabía al lado en
   la misma fila. width:100% obliga a la tabla a ocupar toda la fila siempre, sin
   importar cuántas tallas tenga, para que el botón quede debajo en todos los casos. */
.woocommerce div.product form.cart table.variations { width: 100%; }
.woocommerce div.product form.cart .button { padding: 15px 36px; }
/* El "Guía de tallas no disponible" (productos sin talla) también necesita ocupar
   toda la fila: en esos productos SÍ es hijo flex directo de form.cart (a diferencia
   de los productos con talla, donde el trigger vive en un <div> plano aparte), así
   que sin esto podía compartir línea con .maka-buy-row según el ancho disponible. */
.maka-size-guide__unavailable {
  width: 100%;
  margin: 6px 0 0;
  font-family: var(--font-body);
  font-size: .92rem;
  color: var(--gris-claro);
}
/* Contenedor propio para cantidad + botón de compra. WooCommerce anida este bloque
   de forma distinta según el producto (bloque plano en productos con talla, hijo
   flex directo de form.cart en productos simples) — en vez de igualar ambos
   contextos ajenos con reglas distintas por caso (lo que terminaba viéndose
   distinto entre productos), se envuelve en '.maka-buy-row', que se comporta
   exactamente igual sin importar dónde quede anidado. align-items:flex-start evita
   que el botón se estire a lo ancho; cada hijo conserva su tamaño natural. */
.maka-buy-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}
.woocommerce .quantity .qty {
  border: 1px solid rgba(26,26,26,.15); border-radius: var(--radius-full);
  padding: 12px; width: 72px; text-align: center;
}

/* Botones "+"/"−" para la cantidad en producto individual — main.js
   sección 14 envuelve el input.qty existente con estos 2 botones. El
   input pierde su propio borde/radio dentro del envoltorio para que solo
   la píldora completa (.maka-qty-stepper) se vea, no 2 bordes anidados. */
.maka-qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid rgba(26,26,26,.15);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.maka-qty-stepper .qty {
  border: none !important;
  border-radius: 0 !important;
  width: 44px !important;
  padding: 12px 0 !important;
  -moz-appearance: textfield;
}
.maka-qty-stepper .qty::-webkit-outer-spin-button,
.maka-qty-stepper .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.maka-qty-btn {
  width: 40px;
  height: 46px;
  border: none;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  color: var(--intencion);
  transition: background .2s ease, color .2s ease;
}
.maka-qty-btn:hover { background: rgba(175,163,232,.12); color: var(--lila); }
.maka-qty-btn:active { background: rgba(175,163,232,.22); }

/* Información adicional (tabla de atributos, ej. Talla) */
/* El <p> que envuelve el valor hereda el reset global "p { margin: 0 0 1em; }"
   (sección 2) — ese margen inferior de 1em infla la altura de la celda del
   valor más que la de la etiqueta (que no tiene ningún <p>), así que al
   centrar verticalmente ambas celdas (comportamiento por defecto del
   navegador en tablas), el texto de las tallas queda "más arriba" que el
   texto "Talla". Se anula solo aquí, sin tocar el reset global de <p>. */
.woocommerce-product-attributes-item__value p { margin: 0; }
.woocommerce-product-attributes-item__label::after { content: ":"; }

/* Carrito */
.woocommerce table.shop_table {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(26,26,26,.08);
  overflow: hidden;
  background: #fff;
}
.woocommerce table.shop_table th { font-family: var(--font-body); font-weight: 600; }
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-cart .cart-collaterals .cart_totals {
  background: rgba(175,163,232,.12);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading,
.woocommerce form.checkout h3 {
  font-family: var(--font-display); font-weight: 400;
}

/* Checkout */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout .input-text,
.select2-container--default .select2-selection--single {
  border: 1px solid rgba(26,26,26,.15) !important;
  border-radius: var(--radius-md) !important;
  padding: 12px 14px !important;
  font-family: var(--font-body);
}
.woocommerce #payment, .woocommerce-checkout #payment {
  background: rgba(175,163,232,.12);
  border-radius: var(--radius-lg);
}
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
  border-top-color: var(--lila);
}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before { color: var(--lila); }

/* Mensajes y notices (WooCommerce las imprime como texto plano sin caja: el
   tema deshabilita por completo el CSS propio de WooCommerce, así que sin
   estas reglas el aviso queda pegado al contenido de arriba/abajo, sin
   separación ni fondo). */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 20px;
  position: relative;
  background: var(--esencia);
  border-top: 3px solid var(--gris-texto);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 16px 52px 16px 24px;
  margin: 0 0 32px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--gris-texto);
  transition: opacity .2s ease;
}
/* Botón "x" para cerrar el aviso, agregado vía JS (main.js sección 10) ya
   que WooCommerce no imprime ninguno propio. */
.maka-notice-close {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  color: var(--gris-texto);
  font-size: 20px;
  line-height: 1;
  cursor: url('../images/cursor-estrella.png') 16 16, pointer;
  transition: background-color .2s, color .2s;
}
.maka-notice-close:hover {
  background: rgba(26, 26, 26, .08);
  color: var(--intencion);
}

/* Selector de Talla (swatches tipo pill, reemplazan el <select> nativo vía JS) */
.maka-size-swatches__label {
  display: block;
  font-weight: 600;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gris-texto);
  margin-bottom: 8px;
}
.maka-size-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 6px;
}
.maka-size-swatches__btn {
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(26, 26, 26, .15);
  border-radius: var(--radius-md);
  background: var(--blanco);
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--intencion);
  cursor: url('../images/cursor-estrella.png') 16 16, pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.maka-size-swatches__btn:hover { border-color: var(--lila); }
.maka-size-swatches__btn.is-selected {
  background: var(--lila);
  border-color: var(--lila);
  color: var(--blanco);
}
.maka-size-swatches__btn.is-disabled {
  background: rgba(122, 122, 114, .12); /* lavado grisáceo, mismo tono que --gris-suave */
  border-color: rgba(26, 26, 26, .08);
  color: var(--gris-claro);
  opacity: 1;
  cursor: not-allowed;
  text-decoration: line-through;
}
.maka-size-swatches__btn.is-disabled:hover { border-color: rgba(26, 26, 26, .08); }

/* Aviso flotante (ej. "talla sin existencias") — main.js sección 6,
   función makaShowToast(). Independiente del sistema de notices de
   WooCommerce (que solo mejora avisos ya impresos al cargar la página). */
.maka-toast {
  position: fixed;
  left: 50%;
  top: 96px; /* justo debajo del header fijo (80px de alto + 16px de aire) */
  transform: translateX(-50%) translateY(-12px);
  max-width: min(90vw, 475px); /* 380px + 25% */
  z-index: 9999;
  background: var(--blanco);
  border-top: 4px solid var(--error); /* 3px + 25%, redondeado a entero */
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 17.5px 25px; /* 14px 20px + 25% */
  font-family: var(--font-body);
  font-size: 1.125rem; /* .9rem + 25% */
  line-height: 1.4;
  color: var(--gris-texto);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.maka-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Variante lila (mismo tono que .maka-tag--sale) — avisos positivos/informativos,
   ej. "producto agregado a favoritos". El rojo (--error) de arriba sigue siendo
   el color por defecto, para los avisos de advertencia como "talla sin existencias". */
.maka-toast--lila { border-top-color: var(--lila); }
/* El <select> nativo queda oculto visualmente pero funcional (WooCommerce lo sigue usando) */
.variations select.maka-size-select--enhanced {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.woocommerce div.product form.cart .variations td.label { display: none; }
.woocommerce div.product form.cart .variations { margin-bottom: 0; }
.woocommerce div.product form.cart .reset_variations {
  display: inline-block;
  font-size: .85rem;
  color: var(--lila);
  text-decoration: underline;
  margin: 4px 0 0;
}

/* Enlace "Guía de tallas" */
.maka-size-guide__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 4px 0;
  margin: 6px 0 22px;
  font-family: var(--font-body);
  font-size: .92rem;
  font-weight: 500;
  color: var(--intencion);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: url('../images/cursor-estrella.png') 16 16, pointer;
}
.maka-size-guide__trigger i { color: var(--lila); font-size: .95rem; }
.maka-size-guide__trigger:hover { color: var(--lila); }

/* Modal de Guía de Tallas */
body.maka-modal-open { overflow: hidden; }
.maka-size-guide { display: none; position: fixed; inset: 0; z-index: 9999; }
.maka-size-guide.is-open { display: block; }
.maka-size-guide__backdrop { position: absolute; inset: 0; background: rgba(26, 26, 26, .55); }
.maka-size-guide__panel {
  position: relative;
  background: var(--blanco);
  max-width: 560px;
  width: calc(100% - 32px);
  margin: 8vh auto 0;
  max-height: 82vh;
  overflow-y: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 32px 28px;
}
.maka-size-guide__close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px;
  border: none; border-radius: var(--radius-full);
  background: var(--esencia);
  color: var(--intencion);
  cursor: url('../images/cursor-estrella.png') 16 16, pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .2s ease, color .2s ease;
}
.maka-size-guide__close:hover { background: var(--lila); color: var(--blanco); }
.maka-size-guide__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  margin: 0 0 16px;
  padding-right: 36px;
}
.maka-size-guide__intro { font-size: .92rem; color: var(--gris-texto); margin-bottom: 18px; }
.maka-size-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: .92rem; }
.maka-size-table th, .maka-size-table td {
  padding: 10px 12px; text-align: center; border-bottom: 1px solid rgba(26, 26, 26, .08);
}
.maka-size-table th { font-family: var(--font-display); font-weight: 500; background: var(--esencia); }
.maka-size-guide__note { font-size: .9rem; color: var(--gris-texto); line-height: 1.6; }
.maka-size-guide__cta {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid rgba(26, 26, 26, .08);
  font-size: .92rem;
}
.maka-size-guide__cta a { color: var(--lila); font-weight: 600; }

/* 16. PÁGINAS INTERNAS / POST / 404 / SEARCH ------------------------------ */
.maka-page { padding: 56px 0 80px; }
.maka-page__header { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.maka-page__title { font-family: var(--font-display); font-weight: 300; font-size: 3rem; }
.maka-page__content { max-width: 760px; margin: 0 auto; font-size: 1.05rem; }
.maka-page__content h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.8rem; margin-top: 1.6em; }
.maka-page__content h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; margin-top: 1.4em; }
.maka-page__content ul, .maka-page__content ol { margin: 0 0 1.2em 1.4em; }
.maka-page__content ul { list-style: disc; }
.maka-page__content ol { list-style: decimal; }
.maka-page__content li { margin-bottom: .5em; }
.maka-page__content a { color: var(--lila); text-decoration: underline; }
.maka-page__content blockquote {
  border-left: 3px solid var(--lila);
  padding-left: 20px; margin: 1.5em 0; font-style: italic; color: var(--gris-texto);
}

/* Acordeón de preguntas frecuentes (bloque nativo core/details) — estilo tarjeta */
.maka-page__content details {
  background: var(--blanco);
  border: 1px solid rgba(26, 26, 26, .05);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  margin-bottom: 16px;
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease;
}
.maka-page__content details:hover {
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}
.maka-page__content details[open] {
  box-shadow: var(--shadow-soft);
}
.maka-page__content summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.08rem;
  line-height: 1.4;
  padding: 22px 24px;
  cursor: url('../images/cursor-estrella.png') 16 16, pointer;
  list-style: none;
  color: var(--intencion);
}
.maka-page__content summary::-webkit-details-marker { display: none; }
/* Badge circular "más / menos" que insinúa la acción de "abrir" y confirma el estado con color.
   Las dos barras del "+" son capas de background-image independientes: al abrir, la barra
   vertical colapsa (background-size) y solo queda la horizontal, formando el "−". */
.maka-page__content summary::after {
  content: '';
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background-color: var(--esencia);
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 2px, 2px 12px;
  color: var(--lila);
  transition: background-size .3s ease, background-color .3s ease, color .3s ease;
}
.maka-page__content summary:hover::after {
  background-color: var(--lila);
  color: var(--blanco);
}
.maka-page__content details[open] summary::after {
  background-color: var(--lila);
  color: var(--blanco);
  background-size: 12px 2px, 2px 0;
}
.maka-page__content details[open] summary {
  border-bottom: 1px solid rgba(26, 26, 26, .06);
  padding-bottom: 18px;
}
.maka-page__content details p {
  margin: 18px 24px;
  font-size: .98rem;
  line-height: 1.7;
  color: var(--gris-texto);
}
.maka-page__content details ul,
.maka-page__content details ol {
  margin: 0 24px 1.2em 44px;
}
.maka-page__content details p:first-of-type { margin-top: 20px; }
.maka-page__content details > *:last-child { margin-bottom: 22px; }

/* Post individual */
.maka-single { padding: 56px 0 80px; }
.maka-single__header { text-align: center; max-width: 800px; margin: 0 auto 40px; }
.maka-single__cat { color: var(--lila); font-weight: 500; font-size: 14px; margin-bottom: 12px; }
.maka-single__title { font-family: var(--font-display); font-weight: 300; font-size: 3rem; line-height: 1.1; }
.maka-single__meta { color: var(--gris-suave); font-size: 14px; margin-top: 16px; }
.maka-single__thumb { border-radius: var(--radius-xl); overflow: hidden; max-width: 980px; margin: 0 auto 40px; background: var(--esencia); }
/* Pie de la imagen destacada = título del post, dinámico (the_title()) para
   que aplique solo con el título real de cada entrada, sin tocar contenido
   existente. Una sola línea, recortado con "…" si no cabe. */
.maka-single__thumb-caption {
  display: block;
  padding: 14px 24px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--gris-texto);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.maka-single__content { max-width: 760px; margin: 0 auto; font-size: 1.05rem; }
.maka-single__content h2, .maka-single__content h3 { font-family: var(--font-display); font-weight: 400; }
.maka-single__content p { margin-bottom: 1.2em; }
.maka-single__content img { border-radius: var(--radius-lg); margin: 1.5em 0; }

/* Layout blog con sidebar */
.maka-blog-layout { display: grid; grid-template-columns: 1fr 300px; gap: 48px; }
.maka-blog-layout--full { grid-template-columns: 1fr; }
.maka-widget { background: #fff; border-radius: var(--radius-lg); padding: 24px; margin-bottom: 24px; }
.maka-widget__title { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; margin-bottom: 16px; }
.maka-widget ul li { padding: 6px 0; border-bottom: 1px solid rgba(26,26,26,.06); font-size: 14px; }

/* Paginación */
.maka-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 48px; }
.maka-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 12px;
  border-radius: var(--radius-full); background: #fff; font-size: 14px;
  border: 1px solid rgba(26,26,26,.08);
}
.maka-pagination .page-numbers.current { background: var(--lila); color: #fff; border-color: var(--lila); }
.maka-pagination a.page-numbers:hover { background: var(--intencion); color: #fff; }

/* 404 */
.maka-404 { text-align: center; padding: 100px 0; }
.maka-404__code { font-family: var(--font-display); font-size: 8rem; color: var(--lila); line-height: 1; }
.maka-404__title { font-family: var(--font-display); font-weight: 300; font-size: 2.2rem; margin: 16px 0; }
.maka-404 .maka-star { width: 60px; margin: 0 auto 24px; }

/* Search */
.maka-search-results { padding: 56px 0 80px; }
.maka-search-item { padding: 24px 0; border-bottom: 1px solid rgba(26,26,26,.08); }
.maka-search-item h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; margin: 0 0 8px; }

/* 17. CONTACTO ------------------------------------------------------------ */
.maka-contact { padding: 56px 0 80px; }
.maka-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.maka-contact__info .maka-contact__icon {
  width: 48px; height: 48px; border-radius: var(--radius-full);
  background: rgba(175,163,232,.18); color: var(--lila);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; margin-bottom: 12px;
}
.maka-contact__block { margin-bottom: 28px; }
.maka-contact__block h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; margin: 0 0 4px; }
.maka-contact__block p { color: var(--gris-texto); margin: 0; }
.maka-form { background: #fff; border-radius: var(--radius-xl); padding: 36px; box-shadow: var(--shadow-card); }
.maka-form label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.maka-form .maka-field { margin-bottom: 20px; }
.maka-form input, .maka-form textarea {
  width: 100%; border: 1px solid rgba(26,26,26,.15);
  border-radius: var(--radius-md); padding: 13px 16px;
  font-family: var(--font-body); font-size: 15px;
}
.maka-form input:focus, .maka-form textarea:focus { outline: none; border-color: var(--lila); }
.maka-form textarea { min-height: 140px; resize: vertical; }
.maka-form__note { font-size: 13px; color: var(--gris-suave); margin-top: 12px; }

.maka-star-deco { width: 40px; height: auto; display: inline-block; }

/* Comentarios */
.maka-comments { max-width: 760px; margin: 48px auto 0; }
.maka-comments h3 { font-family: var(--font-display); font-weight: 400; }
.maka-comments .comment-list { margin-bottom: 32px; }
.maka-comments .comment-list li { background: #fff; border-radius: var(--radius-lg); padding: 20px 24px; margin-bottom: 16px; }
.maka-comments .comment-respond input[type="text"],
.maka-comments .comment-respond input[type="email"],
.maka-comments .comment-respond input[type="url"],
.maka-comments .comment-respond textarea {
  width: 100%; border: 1px solid rgba(26,26,26,.15);
  border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 14px;
  font-family: var(--font-body);
}

/* 18. RESPONSIVE ---------------------------------------------------------- */
@media (max-width: 1100px) {
  .maka-products-grid,
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(3, 1fr); }
  .maka-cats__grid { grid-template-columns: repeat(3, 1fr); }
  .maka-hero__title { font-size: 3.6rem; }
}

@media (max-width: 900px) {
  .maka-menu { display: none; }
  .maka-burger { display: inline-flex; }
  .maka-hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .maka-hero__media img { height: 420px; }
  .maka-manifiesto__grid,
  .maka-contact__grid,
  .single-product div.product { grid-template-columns: 1fr; }
  /* Menos separación vertical entre imagen e info del producto una vez que
     quedan apiladas (56px se pensó para el espacio horizontal de escritorio). */
  .single-product div.product { gap: 32px; }
  .maka-footer__grid { grid-template-columns: 1fr 1fr; }
  .maka-blog-layout { grid-template-columns: 1fr; }
  .maka-blog-grid { grid-template-columns: repeat(2, 1fr); }
  /* "Mi cuenta" autenticada: la navegación pasa a ser una barra horizontal
     con scroll arriba del contenido, en vez de una columna lateral fija
     (no hay suficiente ancho para las 2 columnas de escritorio). Se
     resetean las posiciones explícitas de grid (título/nav/contenido) que
     solo tienen sentido en el layout de 2 columnas de escritorio — de lo
     contrario el contenido (fijo en "columna 2") quedaría en una columna
     fantasma fuera de la única columna que existe en móvil. */
  body.woocommerce-account.logged-in .woocommerce { grid-template-columns: 1fr; }
  .maka-account-nav-title,
  .woocommerce-MyAccount-navigation,
  body.woocommerce-account.logged-in .woocommerce-MyAccount-content {
    grid-column: 1;
    grid-row: auto;
  }
  /* El row-gap:0 del grid (pensado para pegar título+nav entre sí) también
     dejaría la tarjeta de contenido pegada a la nav en esta columna única —
     se le agrega separación propia aquí. */
  body.woocommerce-account.logged-in .woocommerce-MyAccount-content { margin-top: 24px; }
  /* Menú plegable: en vez de mostrar todas las opciones (barra horizontal
     con scroll), solo se ve el título + la opción actual (Escritorio,
     Pedidos, etc.) — el resto queda oculto hasta que se toca el botón
     redondo de abajo (.maka-account-nav-toggle), que actúa como interruptor
     (main.js sección 13) agregando ".is-expanded" a la <nav>.
     Se anima con max-height + opacity en vez de display:none/block (que no
     se puede transicionar) — 56px es un estimado cercano al alto real de un
     ítem (evita que la animación se sienta "de golpe" por usar un valor
     exagerado de más). */
  /* El "gap" del flex (heredado de la regla de escritorio, 4px) aplica
     entre TODOS los <li>, incluso los que están en max-height:0 — con 6
     ítems eso son 5 huecos "fantasma" de 4px (20px en total) sumando a la
     tarjeta plegada, sin ningún ítem real visible que los justifique. Se
     anula por completo mientras está plegado, y se restaura solo cuando el
     menú se expande (ahí sí hay 6 ítems reales que necesitan ese aire). */
  /* Prefijo body.woocommerce-account.logged-in obligatorio para el "gap":
     la regla base de escritorio ("gap: 4px") ya tiene esa misma
     especificidad alta — sin igualarla aquí, este override perdería el
     empate sin importar que esté dentro de un media query más específico
     en ancho (los media queries no aportan especificidad). */
  body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul { flex-direction: column; gap: 0; }
  body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.is-expanded ul { gap: 4px; }
  .woocommerce-MyAccount-navigation-link {
    /* Por defecto, un ítem flex tiene min-height:auto (no 0) — un "tamaño
       mínimo automático" basado en su contenido que GANA sobre max-height
       cuando compiten (min siempre gana sobre max en CSS). Sin esto, los
       ítems "ocultos" seguían ocupando su alto natural completo (~44px
       cada uno) pese a max-height:0 — invisibles por opacity:0, pero sin
       colapsar de verdad; de ahí el hueco grande que quedaba. Mismo tipo de
       bug que min-width:auto en la galería de producto y la barra de
       búsqueda (ver notas de esos incrementos). */
    min-height: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .35s ease, opacity .25s ease;
  }
  .woocommerce-MyAccount-navigation-link.is-active,
  .woocommerce-MyAccount-navigation.is-expanded .woocommerce-MyAccount-navigation-link {
    max-height: 56px;
    opacity: 1;
  }
  /* Espacio para que el botón de abajo no tape la opción activa — el
     mínimo real es 42px (32px de alto del botón + 10px de separación del
     borde inferior); se deja en 52px para un margen de aire pequeño (10px)
     entre la opción activa y el botón, sin hueco de sobra. */
  .woocommerce-MyAccount-navigation { padding-bottom: 52px; }
  /* El botón (.maka-account-nav-toggle, agregado vía hook
     woocommerce_after_account_navigation en functions.php, JUSTO DESPUÉS de
     la <nav>) se mueve DENTRO de la <nav> por JS (main.js sección 13) para
     poder anclarlo a esa tarjeta específica. Intento anterior: quedaba
     posicionado con position:absolute + bottom/left directamente sobre
     ".woocommerce" (el grid completo) — pero al especificar esos offsets
     explícitos, el punto de referencia real es la caja COMPLETA del
     ancestro posicionado más cercano, que es TODO el grid (tan alto como la
     columna de contenido, la más alta) — no la celda/tarjeta de la nav. Por
     eso terminaba viéndose "dentro" de la tarjeta de contenido. Al moverlo
     con JS a ser hijo real de la <nav> (que ya tiene position:relative),
     bottom/left ahora sí se calculan contra la propia tarjeta oscura. */
  .maka-account-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(26, 26, 26, .15);
    color: var(--blanco);
    cursor: url('../images/cursor-estrella.png') 16 16, pointer;
    z-index: 2;
  }
  .maka-account-nav-toggle::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 13px;
    content: "\f078"; /* fa-chevron-down */
    transition: transform .25s ease;
  }
  .woocommerce-MyAccount-navigation.is-expanded .maka-account-nav-toggle::before {
    transform: rotate(180deg);
  }
  body.woocommerce-account.logged-in .woocommerce-Addresses { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .maka-container { padding-left: 20px; padding-right: 20px; }
  .maka-section { padding: 44px 0; }
  .maka-hero__title { font-size: 2.8rem; }
  /* Página de producto: mismo padding lateral que el resto del sitio en
     móvil (48px 36px se sentía apretado/desalineado frente al resto), y
     título/precio escalados para no dominar una pantalla angosta. */
  .maka-shop-wrap { padding: 32px 20px 56px; }
  .single-product div.product .product_title { font-size: 1.8rem; }
  .single-product div.product p.price,
  .single-product div.product span.price { font-size: 1.2rem; }
  /* Miniaturas de la galería un poco más chicas para que quepan más cómodas
     junto a las flechas en una pantalla angosta. */
  .maka-gallery-thumbs .flex-control-nav img { width: 58px; height: 58px; }
  .maka-gallery-thumbs__arrow { width: 28px; height: 28px; font-size: 11px; }
  .maka-products-grid,
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .maka-cats__grid,
  .maka-blog-grid { grid-template-columns: repeat(2, 1fr); }
  .maka-section-title,
  .maka-manifiesto__title,
  .maka-newsletter__title,
  .maka-page__title { font-size: 2rem; }
  .maka-manifiesto__box { padding: 48px 24px; border-radius: 36px; }
  .maka-newsletter__box { padding: 44px 24px; border-radius: 32px; }
  .maka-newsletter__form { flex-direction: column; }
  .maka-newsletter__form .maka-btn { width: 100%; justify-content: center; }
  .maka-values { grid-template-columns: 1fr; }
  .maka-value:nth-child(2), .maka-value:nth-child(4) { margin-top: 0; }
  .maka-footer__grid { grid-template-columns: 1fr; }
  .maka-footer__bottom { flex-direction: column; align-items: flex-start; }
  .maka-hero__card { left: 0; }
  /* Buscador: el input pasa a su propia fila completa y los botones
     "Buscar"/cerrar quedan debajo, en vez de compartir una sola fila
     angosta (mismo criterio que .maka-newsletter__form). */
  .maka-search-panel input[type="search"],
  .maka-search-panel input[type="text"] { flex-basis: 100%; }
  .maka-search-panel .maka-btn { flex: 1; justify-content: center; }
  /* "Mi cuenta" autenticada en pantalla angosta: la tarjeta de contenido
     pierde padding para no desperdiciar espacio, Nombre/Apellido pasan de
     lado a lado a una fila cada uno (50% ya no cabe cómodo), y la tabla de
     pedidos se desplaza horizontalmente en vez de aplastar sus columnas. */
  body.woocommerce-account.logged-in .woocommerce-MyAccount-content { padding: 28px 20px; }
  body.woocommerce-account.logged-in .woocommerce-form-row--first,
  body.woocommerce-account.logged-in .woocommerce-form-row--last { float: none; width: 100%; }
  .woocommerce table.shop_table_responsive { display: block; overflow-x: auto; }
}

@media (max-width: 420px) {
  .maka-products-grid,
  .woocommerce ul.products,
  .maka-cats__grid,
  .maka-blog-grid { grid-template-columns: 1fr; }
}

/* Etiqueta oferta en página individual de producto */
.woocommerce div.product span.onsale {
  min-height: auto !important;
  min-width: auto !important;
  line-height: 1.4 !important;
  border-radius: var(--radius-full) !important;
  padding: 4px 12px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  background: var(--lila) !important;
  color: #fff !important;
}

/* 15. CURSOR PERSONALIZADO -------------------------------------------------
   Reemplaza la flecha "pointer" por la estrella de 4 puntas del logo MAKA
   en TODO elemento clickeable del sitio — no solo los que ya tenían su
   propio "cursor: pointer;" (reemplazados arriba, uno por uno), sino
   también los que reciben ese cursor por comportamiento nativo del
   navegador sin ninguna regla CSS propia (enlaces, botones, campos de
   formulario clickeables, etc.). 16 16 = punto exacto del centro de la
   estrella (imagen de 32x32) que queda alineado con la posición real del
   mouse. El navegador ignora automáticamente la imagen si no puede
   cargarla y usa "pointer" como respaldo (segundo valor de la lista). */
a,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"],
select,
label[for],
summary,
[role="button"],
[onclick] {
  cursor: url('../images/cursor-estrella.png') 16 16, pointer;
}

/* Checkout (bloque nativo de WooCommerce "Resumen del pedido") — sin el
   CSS propio de WooCommerce (deshabilitado en el tema para todo lo demás
   del sitio), la columna de nombre+descripción de cada producto queda sin
   ningún ancho flexible propio y termina comprimida a un puñado de
   píxeles, forzando que el texto se parta letra por letra (ej. "Bolso
   Intención" → "Bol / so / Int / enc / ión") en vez de por palabra. */
.wc-block-components-order-summary-item {
  align-items: flex-start;
}
.wc-block-components-order-summary-item__image {
  flex: 0 0 auto;
}
.wc-block-components-order-summary-item__description {
  flex: 1 1 auto;
  min-width: 0; /* deja que el hijo se encoja de verdad al ancho real disponible */
}
.wc-block-components-order-summary-item__description .wc-block-components-product-name {
  max-width: 100%;
  overflow-wrap: break-word; /* solo rompe si una palabra individual no cabe, no en cualquier punto */
  word-break: normal;
  font-size: .95rem;
}
/* La descripción larga del producto (extracto) no tiene lugar para
   mostrarse completa en esta columna angosta — se recorta a 2 líneas con
   puntos suspensivos en vez de desbordar o partirse en exceso. */
.wc-block-components-product-metadata__description p {
  margin: 4px 0 0;
  font-size: .8rem;
  color: var(--gris-suave);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.wc-block-components-order-summary-item__total-price {
  flex: 0 0 auto;
  text-align: right;
  white-space: normal;
}