/* ── Variables ──────────────────────────────────────────────────────────── */
/* Sistema de diseño "Tienda Plantilla": un solo azul de marca, superficies
   neutras, Inter + Montserrat (precios y numéricos), radios pill en todo lo interactivo.
   --color-brand / --color-btn-bg / --color-btn-text los sobreescribe
   ecpm_theme_brand_color() en functions.php según ecpm_settings (branding
   por cliente) — por eso --color-primary apunta a --color-brand y no al
   revés. Los nombres --color-black/--color-gray-* etc. se conservan como
   alias para no tener que tocar cada regla existente del archivo. */
:root {
  /* Marca (dinámico por cliente vía ecpm_settings) */
  --color-brand:      #1b4dff;
  --color-primary:        var(--color-brand);
  --color-primary-active: #1238cc;

  /* Superficies */
  --surface-canvas:        #ffffff;
  --surface-soft:          #f7f8fa;
  --surface-strong:        #eef1f6;
  --surface-dark:          #0a0c12;
  --surface-dark-elevated: #161922;

  /* Texto */
  --text-ink:          #0a0c12;
  --text-body:         #5b616e;
  --text-muted:        #7c828a;
  --text-on-dark:      #ffffff;
  --text-on-dark-soft: #a8acb3;

  /* Líneas */
  --hairline:      #dee2e9;
  --hairline-soft: #eef1f6;

  /* Semántica de comercio (solo color de texto, nunca relleno) */
  --color-up:   #0aa06a;
  --color-down: #d6303b;

  /* Alias heredados (usados en todo el archivo desde antes del rediseño) */
  --color-black:    var(--text-ink);
  --color-white:    var(--surface-canvas);
  --color-gray-50:  var(--surface-soft);
  --color-gray-100: var(--surface-strong);
  --color-gray-200: var(--hairline);
  --color-gray-400: var(--text-muted);
  --color-gray-600: var(--text-body);
  --color-gray-900: var(--surface-dark-elevated);

  /* Tipografía */
  --font:         'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans:    var(--font);
  --font-display: var(--font);
  /* Montserrat ya se carga en todo el sitio (es la fuente de marca elegida
     en Ecommerce Pack - PymesModernas, ecpm_settings['typo_font_family']),
     así que usarla acá no agrega una petición nueva. Reemplaza a JetBrains
     Mono en precios, contadores y demás números que usaban --font-mono. */
  --font-mono:    'Montserrat', var(--font), sans-serif;

  --header-h:      64px;
  --ann-h:         40px;
  --container:     1200px;
  --container-pad: clamp(20px, 4vw, 60px);

  /* Radios: --radius-sm/--radius/--radius-lg son los alias que ya usa el
     archivo; los --radius-xs/md/xl/pill/full son los nombres "reales" del
     sistema, para las secciones nuevas del rediseño. */
  --radius-xs:   4px;
  --radius-md:   12px;
  --radius-xl:   24px;
  --radius-pill: 100px;
  --radius-full: 9999px;
  --radius-sm:   8px;
  --radius:      var(--radius-md);
  --radius-lg:   var(--radius-xl);

  --transition:    0.2s ease;
  --transition-slow: 0.35s ease;
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-black);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
input, select, textarea { font-family: inherit; }

/* ── Container ──────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--narrow { max-width: 800px; }
.container--blog   { max-width: 760px; }

/* ── Barra de anuncio ───────────────────────────────────────────────────── */
.ann-bar {
  background: var(--color-brand);
  color: var(--color-white);
  padding: 10px 0;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.ann-bar__list {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 6px 24px;
  padding-inline: var(--container-pad);
}
.ann-bar__list li { display: flex; align-items: center; gap: 8px; }
.ann-bar__list svg { flex-shrink: 0; fill: #f5b301; }

/* Barra de anuncio en modo marquee: dos grupos idénticos; al desplazar -50% el bucle es continuo. */
.ann-bar--marquee { overflow: hidden; }
.ann-marquee {
  display: flex;
  width: max-content;
  animation: ann-scroll var(--ann-dur, 40s) linear infinite;
  will-change: transform;
}
.ann-bar--marquee:hover .ann-marquee,
.ann-bar--marquee:focus-within .ann-marquee { animation-play-state: paused; }
.ann-marquee__group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ann-marquee__group li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline: 28px;
  white-space: nowrap;
}
.ann-marquee__group svg { flex-shrink: 0; fill: #f5b301; }
@keyframes ann-scroll { to { transform: translateX(-50%); } }
/* Separadores alternativos a la estrella */
.ann-bar svg.ann-ico--plain { fill: currentColor; opacity: .85; }
.ann-bar svg.ann-ico--stroke { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ann-bar .ann-sep { opacity: .6; font-weight: 300; }
@media (prefers-reduced-motion: reduce) {
  .ann-marquee { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .ann-marquee__group[aria-hidden="true"], .ann-marquee__group .is-dup { display: none; }
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  inset-inline: 0;
  z-index: 1000;
  background: var(--color-white);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.site-header.is-scrolled {
  border-bottom-color: var(--color-gray-200);
}
.header-inner {
  display: flex;
  align-items: center;
  height: var(--header-h);
  gap: 24px;
}
.header-spacer { display: none; }

/* Logo */
.header-logo { flex-shrink: 0; }
.header-logo .custom-logo { max-height: 44px; width: auto; }
.header-site-name {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-black);
}

/* Nav */
.header-nav { flex: 1; display: flex; justify-content: center; }
.nav-list {
  display: flex;
  gap: 32px;
  align-items: center;
}
.nav-list > li > a {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-gray-600);
  letter-spacing: 0.01em;
  transition: color var(--transition);
  padding: 4px 0;
  position: relative;
}
.nav-list > li > a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-black);
  transition: width var(--transition);
}
.nav-list > li > a:hover { color: var(--color-black); }
.nav-list > li > a:hover::after { width: 100%; }

/* Dropdown */
.nav-list .sub-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius);
  min-width: 180px;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all var(--transition);
  z-index: 100;
}
.nav-list li {
  position: relative;
  /* Extiende el área "hover" hacia abajo para que no se cierre el submenú
     al cruzar el espacio extra antes de llegar a .sub-menu */
  padding-bottom: 12px;
  margin-bottom: -12px;
}
.nav-list li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-list .sub-menu a {
  display: block;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--color-gray-600);
}
.nav-list .sub-menu a:hover { color: var(--color-black); background: var(--color-gray-50); }

/* Header actions */
.header-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.header-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--color-black);
  transition: background var(--transition);
}
.header-btn:hover { background: var(--color-gray-100); }

/* Carrito */
.header-cart { position: relative; }
.cart-count {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-black);
  color: var(--color-white);
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.cart-count--empty { display: none; }

/* Hamburguesa: solo en móvil */
.header-menu-toggle { display: none; }

/* ── Header en 3 niveles ─────────────────────────────────────────────────────────────
   1) barra de anuncio (.ann-bar, sobre el header)
   2) logo + buscador + íconos (.header-inner)
   3) menú principal en su propia fila (.header-menu-row)
   --header-h es la altura total del header sticky (la usan el cajitón de
   filtros y el resumen sticky del checkout para no quedar debajo de él). */
.header-menu-row { border-top: 1px solid var(--color-gray-200); }
@media (max-width: 768px) { .header-menu-row { display: none; } }
.header-menu-row .header-nav { padding-block: 10px; }
.nav-list > li > a { font-weight: 500; }
.header-actions { margin-left: 0; }
@media (min-width: 769px) {
  :root { --header-h: 128px; }
  .header-inner { height: 80px; gap: 32px; }
  .header-logo .custom-logo { max-height: 56px; }
}

/* ── Buscador del header (siempre visible, nivel 2) ──────────────────────────────
   En escritorio ocupa el centro entre el logo y los íconos; en móvil todo el
   espacio libre entre el logo y los íconos. */
.header-search { flex: 1 1 auto; max-width: 720px; margin-inline: auto; min-width: 0; }
.header-search .search-form { display: flex; }
.header-search .search-field {
  flex: 1;
  min-width: 0;
  height: 44px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-pill);
  background: var(--surface-soft);
  padding: 0 20px;
  font-size: 14px;
  outline: none;
  transition: border-color var(--transition), background var(--transition);
}
.header-search .search-field:focus { background: var(--color-white); border-color: var(--color-black); }
.header-search .search-submit { display: none; }

/* FiboSearch dentro del header */
/* min-width:0 porque FiboSearch fija min-width:230px y en móvil el campo se
   encimaba sobre los íconos de cuenta y carrito. */
.header-search .dgwt-wcas-search-wrapp { width: 100%; max-width: none; min-width: 0; }
/* La skin de FiboSearch le pone padding:10px + fondo propio al contenedor; sin
   quitarlos el campo queda 20px más angosto y la lupa se sale por la derecha. */
.header-search .dgwt-wcas-sf-wrapp { width: 100%; padding: 0 !important; background: none !important; }
.header-search .dgwt-wcas-sf-wrapp input[type="search"] {
  width: 100% !important;
  /* !important: una de las skins de FiboSearch fija height:45px!important
     (ajax-search-for-woocommerce/assets/css/style.min.css); sin !important
     acá esa regla gana y la lupa (abajo) queda descuadrada. */
  height: 44px !important;
  line-height: 44px !important;
  background: var(--surface-soft) !important;
  border: 1px solid var(--color-gray-200) !important;
  border-radius: var(--radius-pill) !important;
  padding: 0 56px 0 20px !important;
  font-size: 14px !important;
  box-shadow: none !important;
  transition: border-color var(--transition), background var(--transition);
}
.header-search .dgwt-wcas-sf-wrapp input[type="search"]:focus {
  background: var(--color-white) !important;
  border-color: var(--color-black) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Lupa: círculo de color de marca con el ícono en blanco, centrada según el
   alto real del campo (no con el "top" fijo en px de FiboSearch) y siempre
   clicable, no solo después de empezar a escribir. */
.header-search .dgwt-wcas-search-submit {
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  right: 4px !important;
  left: auto !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  background: var(--color-brand) !important;
  border-radius: 50% !important;
  pointer-events: auto !important;
}
.header-search .dgwt-wcas-ico-magnifier { fill: #fff; width: 16px; height: 16px; }

@media (max-width: 768px) {
  .header-inner { gap: 12px; }
  .header-search { flex: 1 1 0; max-width: none; margin-inline: 0; }
  .header-search .dgwt-wcas-sf-wrapp input[type="search"] {
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 36px 0 14px !important;
  }
  .header-search .dgwt-wcas-search-submit {
    right: 3px !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }
  .header-search .dgwt-wcas-ico-magnifier { width: 14px; height: 14px; }
  /* En móvil la barra de anuncio muestra solo el primer mensaje */
  .ann-bar__list { justify-content: center; }
  .ann-bar__list li:nth-child(n+2) { display: none; }
}

/* ── Menú móvil ────────────────────────────────────────────────────────── */
.mobile-nav {
  background: var(--color-white);
  border-top: 1px solid var(--color-gray-200);
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
}
.mobile-nav.is-open { max-height: 70vh; overflow-y: auto; }
.mobile-nav-list { padding: 12px 0 20px; }
.mobile-nav-list li a {
  display: block;
  padding: 11px var(--container-pad);
  font-size: 15px;
  color: var(--color-gray-600);
  border-bottom: 1px solid var(--color-gray-100);
  transition: color var(--transition);
}
.mobile-nav-list li a:hover { color: var(--color-black); }
.mobile-nav-list .sub-menu a { padding-left: calc(var(--container-pad) + 16px); font-size: 14px; }

/* Submenú desplegable en mobile-nav (colapsado por defecto, lo abre theme.js) */
.mobile-nav-list li.menu-item-has-children { position: relative; }
.mobile-nav-list li.menu-item-has-children > a { padding-right: 44px; }
.mobile-submenu-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-400);
}
.mobile-submenu-toggle svg { transition: transform var(--transition); }
.mobile-nav-list li.is-open > .mobile-submenu-toggle svg { transform: rotate(180deg); }
.mobile-nav-list .sub-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
}

/* ── Contenido principal ──────────────────────────────────────────────── */
.main-content { min-height: 60vh; }

/* ── Secciones home ────────────────────────────────────────────────────── */
.home-section { padding-block: var(--space-section, 96px); }
.home-section + .home-section { border-top: 1px solid var(--hairline); }
.home-section--soft { background: var(--surface-soft); border-top: 1px solid var(--hairline-soft); border-bottom: 1px solid var(--hairline-soft); }
.home-section--soft + .home-section { border-top: none; }

.section-title {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 32px;
  text-align: center;
}
.section-title--left { text-align: left; margin-bottom: 0; font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -0.02em; }
.section-more { text-align: center; margin-top: 40px; }

.home-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}
.section-more-link { font-size: 14px; font-weight: 600; color: var(--color-primary); white-space: nowrap; }
.section-more-link:hover { color: var(--color-primary-active); }

.pill-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-strong);
  color: var(--text-ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Hero del home */
.home-hero { padding-block: 56px 0; }
.home-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: center;
}
.home-hero__title {
  margin: 20px 0 0;
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-ink);
}
.home-hero__desc { margin: 24px 0 0; max-width: 440px; font-size: 18px; line-height: 1.55; color: var(--text-body); }
.home-hero__actions { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
.home-hero__stats {
  display: flex;
  gap: 40px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
}
.home-hero__stat-value { font-family: var(--font-mono); font-weight: 500; font-size: 22px; color: var(--text-ink); }
.home-hero__stat-label { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.home-hero__media { position: relative; border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-strong); }
.home-hero__media img { width: 100%; height: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }

/* Barra de confianza — [pm_sellos layout="list"] */
.home-trust { padding-block: 40px; }
.ecpm-sellos--list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.ecpm-sellos--list .ecpm-sello { display: flex; align-items: center; gap: 14px; }
.ecpm-sellos--list .ecpm-sello__icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--surface-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ecpm-sellos--list .ecpm-sello__icon img { width: 20px; height: 20px; object-fit: contain; }
.ecpm-sellos--list .ecpm-sello__text { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-ink); }

/* Categorías del home */
.home-categories-grid .woocommerce ul.products li.product-category h2,
.home-categories-grid ul.products li.product-category h2 { text-align: left !important; padding: 14px 0 0 !important; }
.home-categories-grid ul.products li.product-category a img,
.home-categories-grid ul.products li.product-category img { border-radius: var(--radius-xl); aspect-ratio: 4/5; object-fit: cover; }

/* Banner de colección/campaña */
.home-collection { background: var(--surface-dark); color: var(--text-on-dark); }
.home-collection__grid {
  padding-block: var(--space-section, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.home-collection__title { margin: 20px 0 0; font-size: clamp(28px, 4vw, 52px); font-weight: 500; line-height: 1; letter-spacing: -0.02em; color: var(--text-on-dark); }
.home-collection__text { margin: 20px 0 0; max-width: 420px; font-size: 17px; line-height: 1.55; color: var(--text-on-dark-soft); }
.home-collection .btn--outline-light { margin-top: 32px; background: transparent; color: var(--text-on-dark); border: 1px solid rgba(255,255,255,.35); }
.home-collection .btn--outline-light:hover { background: rgba(255,255,255,.1); }
.home-collection__media { position: relative; border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-dark-elevated); }
.home-collection__media img { width: 100%; height: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }

/* Reseñas reales de WooCommerce */
.home-reviews-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.home-review-card { border: 1px solid var(--hairline); border-radius: var(--radius-xl); padding: 32px; background: var(--surface-canvas); }
.home-review-card__stars { font-family: var(--font-mono); font-weight: 500; font-size: 14px; color: var(--text-ink); letter-spacing: 1px; }
.home-review-card__text { margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: var(--text-ink); }
.home-review-card__meta { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--hairline-soft); }
.home-review-card__avatar { width: 44px; height: 44px; border-radius: var(--radius-full); overflow: hidden; flex: 0 0 auto; }
.home-review-card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-review-card__name { font-size: 14px; font-weight: 600; color: var(--text-ink); }
.home-review-card__sub { font-size: 12px; color: var(--text-muted); }

/* Newsletter */
.home-newsletter { background: var(--surface-soft); border-top: 1px solid var(--hairline-soft); }
.home-newsletter__inner { max-width: 720px; margin: 0 auto; padding-block: var(--space-section, 96px); text-align: center; }
.home-newsletter__title { margin: 0; font-size: clamp(28px, 4vw, 44px); font-weight: 500; line-height: 1.09; letter-spacing: -0.02em; color: var(--text-ink); }
.home-newsletter__text { margin: 16px 0 0; font-size: 17px; color: var(--text-body); }
.home-newsletter__form { display: flex; gap: 12px; justify-content: center; margin-top: 32px; max-width: 480px; margin-inline: auto; }
.home-newsletter__input {
  flex: 1 1 auto;
  height: 56px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  font-size: 15px;
  font-family: var(--font-sans);
  background: var(--surface-canvas);
}
.home-newsletter__input:focus { outline: none; border-color: var(--color-primary); }
.home-newsletter__note { margin: 16px 0 0; font-size: 13px; color: var(--text-muted); }
.home-newsletter__note--error { color: var(--color-down); }
.home-newsletter__note--success { color: var(--color-up); }

/* Toast "Producto agregado" */
.ecpm-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-dark);
  color: var(--text-on-dark);
  padding: 16px 22px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.ecpm-toast.is-visible { opacity: 1; transform: none; }
.ecpm-toast__dot { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--color-up); flex-shrink: 0; }

/* ── Página "Sobre nosotros" ──────────────────────────────────────────── */
.pill-badge--dark { background: rgba(255,255,255,.1); color: var(--text-on-dark); }

.about-hero { background: var(--surface-dark); color: var(--text-on-dark); padding-block: 96px; }
.about-hero__title {
  margin: 24px 0 0;
  max-width: 800px;
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-on-dark);
}
.about-hero__text { margin: 24px 0 0; max-width: 560px; font-size: 18px; line-height: 1.55; color: var(--text-on-dark-soft); }

.about-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.about-split__media { position: relative; border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-strong); }
.about-split__media img { width: 100%; height: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.about-split__text h2, .about-split__text h3 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 500; letter-spacing: -0.02em; margin-bottom: 20px; color: var(--text-ink); }
.about-split__text p { font-size: 17px; line-height: 1.6; color: var(--text-body); margin-bottom: 1em; }
.about-split__stats { margin-top: 40px; }

.about-values-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.about-value-card { background: var(--surface-canvas); border: 1px solid var(--hairline); border-radius: var(--radius-xl); padding: 32px; }
.about-value-card__n {
  width: 44px; height: 44px;
  border-radius: var(--radius-full);
  background: var(--surface-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 500; color: var(--text-ink);
}
.about-value-card__title { margin-top: 22px; font-size: 18px; font-weight: 600; color: var(--text-ink); }
.about-value-card__body { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--text-body); }

.about-team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.about-team-card__photo { position: relative; aspect-ratio: 1/1; border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-strong); }
.about-team-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-team-card__name { margin-top: 14px; font-size: 16px; font-weight: 600; color: var(--text-ink); }
.about-team-card__role { font-size: 13px; color: var(--text-muted); margin-top: 3px; }

.about-cta { background: var(--surface-dark); color: var(--text-on-dark); }
.about-cta .container { max-width: 720px; padding-block: 96px; text-align: center; }
.about-cta__title { margin: 0; font-size: clamp(28px, 4vw, 52px); font-weight: 500; line-height: 1; letter-spacing: -0.02em; color: var(--text-on-dark); }
.about-cta__actions { display: flex; gap: 12px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .about-split { grid-template-columns: 1fr; gap: 32px; }
  .about-values-grid { grid-template-columns: 1fr; }
  .about-team-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Página "Contacto" ─────────────────────────────────────────────────── */
.contact-page { padding-block: 72px 96px; }
.contact-page__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 80px; align-items: start; }
.contact-page__title { margin: 20px 0 0; font-size: clamp(28px, 4vw, 52px); font-weight: 500; line-height: 1; letter-spacing: -0.02em; color: var(--text-ink); }
.contact-page__text { margin: 20px 0 0; max-width: 420px; font-size: 17px; line-height: 1.55; color: var(--text-body); }
.contact-page__media { position: relative; height: 240px; border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-strong); margin-top: 32px; }
.contact-page__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.contact-rows { display: flex; flex-direction: column; margin-top: 40px; border-top: 1px solid var(--hairline); }
.contact-rows__row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--hairline); }
.contact-rows__label { font-size: 14px; color: var(--text-muted); }
.contact-rows__value { font-size: 15px; font-weight: 600; color: var(--text-ink); text-align: right; }

.contact-form-card { background: var(--surface-soft); border: 1px solid var(--hairline); border-radius: var(--radius-xl); padding: 40px; }
.contact-form-card__title { margin: 0 0 28px; font-size: 18px; font-weight: 600; color: var(--text-ink); }
.contact-form__hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.contact-form__grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.contact-form__field {
  display: block;
  margin-top: 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-ink);
}
.contact-form__grid2 .contact-form__field { margin-top: 0; }
.contact-form__field input,
.contact-form__field textarea {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 0 16px;
  height: 48px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-canvas);
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text-ink);
  box-sizing: border-box;
}
.contact-form__field textarea { height: auto; padding: 14px 16px; resize: vertical; }
.contact-form__field input:focus,
.contact-form__field textarea:focus { outline: none; border-color: var(--color-primary); }
.contact-form__submit { width: 100%; margin-top: 28px; }
.contact-form__privacy { margin: 16px 0 0; font-size: 13px; color: var(--text-muted); text-align: center; }
.contact-form__notice { margin: 0 0 20px; padding: 14px 18px; border-radius: var(--radius-md); font-size: 14px; }
.contact-form__notice--success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.contact-form__notice--error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

.contact-faq { margin-top: 96px; padding-top: 56px; border-top: 1px solid var(--hairline); }
.contact-faq .ecpm-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin-top: 28px; }

@media (max-width: 900px) {
  .contact-page__grid { grid-template-columns: 1fr; gap: 48px; }
  .contact-form__grid2 { grid-template-columns: 1fr; }
  .contact-faq .ecpm-faq { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .home-hero__grid,
  .home-collection__grid { grid-template-columns: 1fr; gap: 32px; }
  .home-hero__media { order: -1; }
  .ecpm-sellos--list { grid-template-columns: repeat(2, 1fr); }
  .home-reviews-grid { grid-template-columns: 1fr; }
  .home-newsletter__form { flex-direction: column; }
}
@media (max-width: 640px) {
  .home-categories-grid ul.products,
  .home-trust .ecpm-sellos--list { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Espaciado 75px entre bloques del editor en la portada */
.page-content > * + * { margin-top: 75px; }
.page-content h2 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-align: center;
  margin-bottom: 32px;
}
.page-content .wp-block-heading { text-align: center; }

/* Centrar shortcodes del plugin en la portada */
.ecpm-faq { margin-inline: auto; }
.ecpm-sellos { margin-inline: auto; }

/* ── Carrusel de categorías ─────────────────────────────────────────────── */
.woocommerce ul.products:has(li.product-category) {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 24px !important;
  grid-template-columns: unset !important;
  padding-bottom: 4px;
}
.woocommerce ul.products:has(li.product-category)::-webkit-scrollbar { display: none; }

.woocommerce ul.products:has(li.product-category) li.product-category {
  flex: 0 0 calc(25% - 18px) !important;
  scroll-snap-align: start;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
}

/* Flechas del carrusel */
.ecpm-cat-carousel { position: relative; }
.ecpm-cat-arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-black);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), opacity var(--transition);
}
.ecpm-cat-arrow--prev { left: -18px; }
.ecpm-cat-arrow--next { right: -18px; }
.ecpm-cat-arrow:hover { background: var(--color-black); color: var(--color-white); border-color: var(--color-black); }

/* Título de categoría */
.woocommerce ul.products li.product-category h2 {
  font-size: 14px !important;
  font-weight: 500 !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 12px 8px !important;
  letter-spacing: 0;
}
.woocommerce ul.products li.product-category h2 .count {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-gray-400);
  background: none; /* WooCommerce imprime el contador en <mark>, que trae fondo amarillo por defecto del navegador */
}
.woocommerce ul.products li.product-category h2 .count::before { content: '('; }
.woocommerce ul.products li.product-category h2 .count::after  { content: ')'; }

/* About split */
.nosotros-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.nosotros-img img { border-radius: var(--radius-lg); width: 100%; object-fit: cover; aspect-ratio: 4/5; }

/* Foto del shortcode [pm_nosotros_foto]: centrada en su columna cuando no
   llena el ancho completo (ej. página "Sobre nosotros" con columnas de Gutenberg) */
.ecpm-nosotros-foto { margin-inline: auto; }
.nosotros-text h2, .nosotros-text h3 { font-size: 22px; font-weight: 500; margin-bottom: 16px; }
.nosotros-text p { color: var(--color-gray-600); line-height: 1.8; }

/* ── Página / Blog ────────────────────────────────────────────────────── */
.page-article, .single-post { padding-block: 56px; }
.page-title, .post-title {
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-bottom: 32px;
}
.page-body, .post-body {
  color: var(--color-gray-600);
  line-height: 1.85;
}
.page-body p, .post-body p { margin-bottom: 1.4em; }
.page-body h2, .post-body h2 { font-size: 22px; font-weight: 500; margin: 2em 0 .6em; color: var(--color-black); }
.page-body h3, .post-body h3 { font-size: 18px; font-weight: 500; margin: 1.6em 0 .5em; color: var(--color-black); }
.page-body ul, .post-body ul { list-style: disc; padding-left: 1.4em; margin-bottom: 1.4em; }
.page-body a, .post-body a { color: var(--color-brand); text-decoration: underline; text-underline-offset: 3px; }

.post-header { margin-bottom: 32px; }
.post-meta { font-size: 13px; color: var(--color-gray-400); margin-top: 8px; }
.post-thumbnail { margin-bottom: 40px; border-radius: var(--radius-lg); overflow: hidden; }
.post-thumbnail img { width: 100%; max-height: 520px; object-fit: cover; }

/* Blog grid */
.archive-header { margin-block: 48px 40px; }
.archive-title { font-size: 28px; font-weight: 500; letter-spacing: -0.02em; }
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 40px;
  margin-bottom: 48px;
}
.post-card__img { display: block; aspect-ratio: 3/2; overflow: hidden; border-radius: var(--radius); margin-bottom: 16px; }
.post-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.post-card__img:hover img { transform: scale(1.03); }
.post-card__cat { font-size: 12px; color: var(--color-gray-400); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; }
.post-card__title { font-size: 17px; font-weight: 500; margin-bottom: 8px; line-height: 1.4; }
.post-card__title a:hover { color: var(--color-brand); }
.post-card__excerpt { font-size: 14px; color: var(--color-gray-600); line-height: 1.6; margin-bottom: 8px; }
.post-card__meta { font-size: 12px; color: var(--color-gray-400); }

/* Paginación */
.nav-links { display: flex; gap: 8px; justify-content: center; margin-top: 48px; }
.nav-links a, .nav-links span {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  font-size: 13px;
  transition: all var(--transition);
}
.nav-links a:hover { border-color: var(--color-black); color: var(--color-black); }
.nav-links .current { background: var(--color-black); color: var(--color-white); border-color: var(--color-black); }

/* Paginación WooCommerce (tienda / categoría) — usa <ul class="page-numbers">,
   no .nav-links, así que necesita su propia regla flex. */
.woocommerce-pagination { margin-top: 48px; }
.woocommerce-pagination ul.page-numbers {
  display: flex;
  gap: 8px;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.woocommerce-pagination li .page-numbers {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  font-size: 13px;
  transition: all var(--transition);
}
.woocommerce-pagination li a.page-numbers:hover { border-color: var(--color-black); color: var(--color-black); }
.woocommerce-pagination li .page-numbers.current { background: var(--color-black); color: var(--color-white); border-color: var(--color-black); }

/* ── Botones ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 28px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: all var(--transition);
  cursor: pointer;
}
.btn--primary {
  background: var(--color-black);
  color: var(--color-white);
  border: 1px solid var(--color-black);
}
.btn--primary:hover {
  background: var(--color-gray-900);
  border-color: var(--color-gray-900);
}
.btn--brand {
  background: var(--color-brand);
  color: var(--color-white);
  border: 1px solid var(--color-brand);
}
.btn--brand:hover { opacity: .88; }
.btn--outline {
  background: transparent;
  color: var(--color-black);
  border: 1px solid var(--color-black);
}
.btn--outline:hover {
  background: var(--color-black);
  color: var(--color-white);
}

/* ── WooCommerce — global ───────────────────────────────────────────────── */
.woocommerce,
.woocommerce-page { }

/* Todo número (precios) en mono, en cualquier contexto: grid, producto,
   carrito, checkout. Una sola regla en vez de tocar cada .price suelto. */
.woocommerce .price,
.woocommerce .woocommerce-Price-amount,
.woocommerce span.count,
.woocommerce .quantity input.qty {
  font-family: var(--font-mono);
}

/* WooCommerce imprime varios contadores/menciones en <mark>, que el
   navegador resalta en amarillo por defecto — lo neutralizamos en todo
   el bloque WooCommerce, no solo en categorías. */
.woocommerce mark { background: none; color: inherit; }

/* Ocultar aviso demo/tienda de WooCommerce en todas las pantallas */
p.demo_store,
.woocommerce-store-notice,
.woocommerce-store-notice__dismiss-link { display: none !important; }

/* Breadcrumb */
.woocommerce-breadcrumb {
  font-size: 13px;
  color: var(--color-gray-400);
  margin: 24px 0;
}
.woocommerce-breadcrumb a { color: var(--color-gray-600); }
.woocommerce-breadcrumb a:hover { color: var(--color-black); }

/* Mensajes y notificaciones */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top: none;
  border-radius: var(--radius);
  padding: 14px 20px;
  font-size: 14px;
  margin-bottom: 24px;
}
.woocommerce-message { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.woocommerce-info    { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.woocommerce-error   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* ── WooCommerce — tienda (shop) ────────────────────────────────────────── */
.main-content--shop { padding-block: 40px; }

/* Encabezado de la tienda: el <h1 class="page-title"> ya lo imprime el hook
   existente del sitio antes de woocommerce_content() — solo lo agrandamos
   y le damos el borde inferior en el contexto de archivo de tienda, sin
   tocar cómo se ve en checkout/carrito/mi cuenta. */
.main-content--shop-archive .page-title {
  margin: 0 0 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--hairline);
  font-size: clamp(32px, 4vw, 52px) !important;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-ink);
}
.main-content--shop-archive .woocommerce-result-count { margin: 0 0 24px; font-size: 15px; color: var(--text-body); }

.woocommerce-ordering { margin-bottom: 24px; }
.woocommerce-ordering select {
  height: 44px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: 0 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-ink);
  outline: none;
  background-color: var(--surface-canvas);
}

/* Layout de la tienda: sidebar de filtros + grid */
.shop-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; }

/* Botón "Filtros" que abre el panel offcanvas. Solo existe visualmente en
   móvil; en escritorio el sidebar ya está siempre visible junto al grid. */
.shop-filters-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  margin-bottom: 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--surface-canvas);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-ink);
}
.shop-filters-toggle:active { background: var(--surface-strong); }

/* Fondo oscuro detrás del panel, solo visible mientras está abierto */
.shop-filters-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-slow);
  z-index: 190;
}
.shop-filters-overlay.is-open { opacity: 1; pointer-events: auto; }

/* Cabecera del panel ("Filtros" + botón cerrar): solo se ve en móvil,
   dentro del offcanvas. En escritorio queda oculta (ver media query abajo). */
.shop-filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--hairline-soft);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-ink);
}
.shop-filters__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--text-body);
}

.shop-filters__group { padding-bottom: 28px; border-bottom: 1px solid var(--hairline-soft); margin-bottom: 28px; }
.shop-filters__label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; }

/* Acordeón de filtros en móvil: cada grupo (.shop-filters__group) es un
   <details>/<summary> nativo, igual que el acordeón de producto y el FAQ,
   y empieza cerrado en vez de desplegar toda la lista de categorías de una
   vez. En escritorio (≥901px) theme.js fuerza los tres siempre abiertos y
   aquí se bloquea el clic, para no cambiar el aspecto que ya tenía ahí. */
.shop-filters__group > summary.shop-filters__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}
.shop-filters__group > summary::-webkit-details-marker,
.shop-filters__group > summary::marker { display: none; }
.shop-filters__group > summary::after {
  content: '+';
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-muted);
}
.shop-filters__group[open] > summary::after { content: '−'; }

@media (min-width: 901px) {
  .shop-filters__group > summary { cursor: default; pointer-events: none; }
  .shop-filters__group > summary::after { display: none; }
}
.shop-filters__list { display: flex; flex-direction: column; gap: 4px; }
.shop-filters__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  color: var(--text-body);
  transition: background var(--transition), color var(--transition);
}
.shop-filters__item:hover { color: var(--text-ink); }
.shop-filters__item.is-active { background: var(--surface-strong); color: var(--text-ink); font-weight: 600; }
.shop-filters__count { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.shop-filters__pills { display: flex; gap: 8px; flex-wrap: wrap; }
.shop-filters__pill {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  font-size: 13px;
  color: var(--text-body);
}
.shop-filters__pill.is-active { background: var(--text-ink); border-color: var(--text-ink); color: var(--surface-canvas); }
.shop-filters__checkbox { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-body); }
.shop-filters__checkbox-box { width: 18px; height: 18px; border-radius: 6px; border: 1px solid var(--hairline); flex-shrink: 0; }
.shop-filters__checkbox.is-active .shop-filters__checkbox-box { background: var(--text-ink); border-color: var(--text-ink); }
.shop-filters__checkbox.is-active { color: var(--text-ink); font-weight: 600; }
.shop-filters__clear { display: inline-block; font-size: 13px; font-weight: 600; color: var(--color-primary); }

@media (max-width: 900px) {
  .shop-layout { grid-template-columns: 1fr; }

  .shop-filters-toggle { display: inline-flex; }

  /* Panel offcanvas: fuera de pantalla a la derecha hasta que se le agrega
     .is-open. position:fixed lo saca del flujo, así que ya no empuja el
     grid de productos hacia abajo ni obliga a hacer scroll para verlos. */
  .shop-filters {
    position: fixed;
    /* Empieza debajo del header (sticky, z-index:1000) en vez de top:0,
       para no taparle el título "Filtros" ni el botón de cerrar. */
    top: var(--header-h);
    right: 0;
    bottom: 0;
    width: min(85vw, 360px);
    background: var(--surface-canvas);
    z-index: 200;
    padding: 20px var(--container-pad) 32px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--transition-slow);
    box-shadow: -12px 0 32px rgba(15, 23, 42, .18);
  }
  .shop-filters.is-open { transform: translateX(0); }
  body.shop-filters-open { overflow: hidden; }
}

/* El panel offcanvas y su botón/overlay/cabecera son cosas de móvil únicamente:
   en escritorio el sidebar sigue fijo junto al grid, como antes de este cambio. */
@media (min-width: 901px) {
  .shop-filters-toggle,
  .shop-filters-overlay,
  .shop-filters__head { display: none; }
}

/* Grid de productos */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 24px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.woocommerce ul.products li.product { margin: 0 !important; padding: 0 !important; }

/* ── Tarjeta de producto ────────────────────────────────────────────────── */
.woocommerce ul.products li.product {
  position: relative;
  background: var(--surface-canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .attachment-woocommerce_thumbnail {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: var(--color-white);
  border-radius: 0;
  transition: transform 0.4s ease;
  margin-bottom: 0 !important;
}
.woocommerce ul.products li.product:hover img { transform: scale(1.03); }

.woocommerce ul.products li.product > a { display: block; overflow: hidden; }

.ecpm-loop-cat {
  margin: 20px 22px 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--color-black) !important;
  padding: 0 22px !important;
  margin: 8px 0 0 !important;
}

/* Precio + "Agregar" en una sola fila (agrupados por functions.php).
   flex-wrap: wrap evita que en tarjetas angostas (grid de 2 columnas en
   móvil) el botón "Añadir al carrito" se salga de la tarjeta: al no caber
   junto al precio, el botón (flex-shrink: 0, no puede encogerse) pasa a su
   propia línea en vez de desbordar. */
/* justify-content: flex-start (antes space-between) para que precio y botón
   queden alineados a la izquierda como el resto de la tarjeta. Con
   space-between, en productos sin precio (el <p class="price"> queda vacío)
   ese elemento vacío igual cuenta como ítem flex y empuja "Leer más" hasta el
   borde derecho de la tarjeta. */
.ecpm-loop-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px 12px;
  padding: 14px 22px 22px;
}
/* Enlace "fantasma" vacío: al mover precio+botón a un hook posterior,
   woocommerce_template_loop_product_link_close() (que cierra el <a> que
   envuelve la imagen+título) termina emitiéndose después de nuestro footer.
   Eso anida un <a> dentro de otro <a>, HTML inválido; el navegador corrige
   la anidación cerrando el <a> exterior antes del botón, y el cierre
   original sobrante queda ahí, a veces vacío (sin precio) y a veces
   envolviendo el <span class="price"> completo (con precio/oferta). Por eso
   no se puede ocultar con display:none (borraría el precio en ese segundo
   caso): display:contents quita su caja del layout flex (ya no cuenta como
   ítem ni suma el gap de 12px) sin tocar su contenido, que sigue
   renderizándose como si el precio fuera un ítem normal del footer. */
.ecpm-loop-footer a.woocommerce-loop-product__link { display: contents; }

.woocommerce ul.products li.product .price {
  font-size: 18px !important;
  color: var(--color-black) !important;
  font-weight: 500 !important;
  margin: 0 !important;
}
.woocommerce ul.products li.product .price del { color: var(--color-gray-400) !important; font-size: 14px !important; }
.woocommerce ul.products li.product .price ins { text-decoration: none !important; color: var(--color-black) !important; }

/* Botón "Agregar"/"Seleccionar opciones" en el grid: link de texto, agrega
   por AJAX (o lleva al producto si es variable). flex-shrink:0 impedía que
   el botón se encogiera: con textos cortos ("Añadir al carrito") no se
   notaba, pero "Seleccionar opciones" es más largo y el botón se forzaba a
   su ancho completo sin caber en la tarjeta, quedándose recortado por el
   overflow:hidden de la tarjeta. min-width:0 evita que el flex-shrink tope
   con el ancho mínimo por defecto (el de la palabra más larga sin cortar). */
.woocommerce ul.products li.product .button {
  flex-shrink: 1;
  min-width: 0;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--color-primary) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.woocommerce ul.products li.product .button:hover { opacity: .75; }
.woocommerce ul.products li.product .button.loading { opacity: .5; }
.woocommerce ul.products li.product .added_to_cart { display: none !important; }

/* Badges: oferta / agotado */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
  position: absolute !important;
  background: var(--color-black) !important;
  color: var(--color-white) !important;
  border-radius: var(--radius-pill) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 3px 10px !important;
  min-height: auto !important;
  min-width: auto !important;
  line-height: 1.6 !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 5;
}

/* En producto individual, el badge "¡Oferta!" es hermano de la galería y del
   resumen dentro de .product (lo agrega WooCommerce vía hook), no un hijo de
   la imagen — sin esto, la grilla de 2 columnas lo trataba como su propia
   celda y empujaba título/precio/carrito a una fila aparte, dejando un hueco
   enorme. Lo ponemos en la misma celda que la imagen para que el
   position:absolute se ancle ahí (no a toda la página). */
.woocommerce div.product > .onsale {
  grid-column: 1;
  grid-row: 1;
}

/* ── Producto individual ────────────────────────────────────────────────── */
.woocommerce div.product {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  padding-block: 40px;
}

/* Galería */
.woocommerce div.product div.images {
  position: relative;
}
.woocommerce div.product div.images img {
  border-radius: var(--radius-lg);
  background: var(--color-gray-100);
}
.woocommerce div.product div.images .flex-viewport { border-radius: var(--radius-lg); }

/* Limitar alto de la imagen principal en escritorio: si la foto es muy
   vertical, que no estire toda la página — se ve completa (contain) y
   centrada en vez de forzar scroll.
   .woocommerce-product-gallery__wrapper es el contenedor real que WC siempre
   renderiza (con 1 sola foto no hay .flex-viewport, eso solo aparece con
   slider de varias fotos) — !important porque zoom.js/flexslider fijan
   estilos inline en la imagen. */
@media (min-width: 769px) {
  .woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
  .woocommerce div.product div.images .flex-viewport {
    max-height: clamp(320px, calc(100vh - 280px), 720px) !important;
  }
  .woocommerce div.product div.images .woocommerce-product-gallery__wrapper img,
  .woocommerce div.product div.images .flex-viewport img {
    max-height: clamp(320px, calc(100vh - 280px), 720px) !important;
    width: auto !important;
    max-width: 100% !important;
    margin-inline: auto;
  }
}
.woocommerce div.product div.images ol.flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.woocommerce div.product div.images ol.flex-control-thumbs li { min-width: 0; }
.woocommerce div.product div.images ol.flex-control-thumbs img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  opacity: .65;
  cursor: pointer;
  transition: opacity var(--transition);
}
.woocommerce div.product div.images ol.flex-control-thumbs img:hover,
.woocommerce div.product div.images ol.flex-control-thumbs li.flex-active img { opacity: 1; }

/* Resumen del producto. Antes era position:sticky, pero al hacer scroll se
   quedaba pegado arriba y las tabs (grid-column: 1 / -1) subían y lo tapaban,
   cortando la descripción corta. En un grid, el límite del sticky es todo el
   contenedor .product y no solo su fila, así que no se detiene donde termina la
   fila del resumen. Se deja estático. */
.woocommerce div.product div.summary {
  padding-top: 8px;
  position: static;
}
@media (max-width: 768px) {
  .woocommerce div.product div.summary { position: static; }
}

.woocommerce div.product .product_title {
  font-size: clamp(22px, 3vw, 32px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.2 !important;
  margin-bottom: 16px !important;
}

.woocommerce div.product .price {
  font-size: 20px !important;
  color: var(--color-black) !important;
  margin-bottom: 24px !important;
}
.woocommerce div.product .price del { font-size: 16px !important; color: var(--color-gray-400) !important; }

/* Rating */
.woocommerce div.product .woocommerce-product-rating {
  margin-bottom: 20px;
}

/* Descripción corta */
.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--color-gray-600);
  font-size: 14px;
  line-height: 1.75;
  margin-bottom: 28px;
}

/* Variaciones */
.woocommerce div.product form.cart .variations { margin-bottom: 20px; width: 100%; }
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
  padding: 6px 0;
  /* Sin esto, la celda de la etiqueta ("Talla") queda centrada verticalmente
     por el valign por defecto de <table>: si los pills ocupan dos filas, la
     etiqueta aparece flotando junto a la segunda fila en vez de arriba. */
  vertical-align: top;
}
.woocommerce div.product form.cart .variations th {
  /* Separación entre la etiqueta ("Talla") y los pills: sin esto quedan
     pegados, "Talla" tocando el primer círculo. */
  padding-right: 14px;
}
.woocommerce div.product form.cart .variations label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-ink);
}

/* Con variaciones, form.cart pasa a tener 2 "filas" flex: los pills de
   variaciones (que ya declaran width:100%, y con flex-wrap se quedan solos
   en su propia línea) y el bloque de cantidad + botón, que queda debajo en
   vez de apretujado al lado de los pills. En productos simples, que no
   tienen .single_variation_wrap, esto no cambia nada. */
.woocommerce div.product form.cart { flex-wrap: wrap; }
.woocommerce div.product form.cart .single_variation_wrap {
  width: 100%;
  margin-top: 20px;
}
.woocommerce div.product form.cart .variations_button {
  display: flex;
  gap: 12px;
  align-items: center;
}
/* El <select> nativo sigue existiendo (WooCommerce lo necesita para saber
   qué variación agregar) pero queda oculto: los pills de abajo lo manejan. */
.woocommerce div.product form.cart .variations select {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.ecpm-variation-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.ecpm-variation-pill {
  min-width: 44px;
  text-align: center;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-body);
  cursor: pointer;
  transition: all var(--transition);
}
.ecpm-variation-pill:hover { border-color: var(--text-ink); color: var(--text-ink); }
.ecpm-variation-pill.is-active { background: var(--text-ink); border-color: var(--text-ink); color: var(--surface-canvas); }
.ecpm-variation-pill.is-disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.ecpm-variation-pill.is-disabled:hover { border-color: var(--hairline); color: var(--text-body); }

/* Qty + botón */
.woocommerce div.product form.cart { display: flex; gap: 12px; align-items: center; }
.woocommerce div.product form.cart .qty {
  width: 80px;
  height: 48px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius);
  text-align: center;
  font-size: 15px;
}
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart button[type="submit"] {
  flex: 1;
  height: 48px;
  background: var(--color-btn-bg, var(--color-black)) !important;
  color: var(--color-btn-text, #ffffff) !important;
  text-decoration: none !important;
  border-radius: var(--radius-pill) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: var(--font) !important;
  border: none !important;
  transition: opacity var(--transition) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover { opacity: .88 !important; }

/* Tabs */
.woocommerce div.product .woocommerce-tabs {
  grid-column: 1 / -1;
  /* position+z-index+fondo sólido: si el resumen sticky de al lado llega a
     desincronizarse del alto real de la fila (pasa si la galería cambia de
     tamaño después del primer pintado, ej. zoom.js), esta sección sigue
     pintando encima en vez de quedar tapada. */
  position: relative;
  z-index: 2;
  background: var(--surface-canvas);
  margin-top: 48px;
  border-top: 1px solid var(--color-gray-200);
  padding-top: 48px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-gray-200);
  margin-bottom: 32px;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: 0;
  background: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-gray-400);
  padding: 12px 20px;
  transition: color var(--transition);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-bottom-color: var(--color-black);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--color-black); }
.woocommerce div.product .woocommerce-tabs .panel { color: var(--color-gray-600); line-height: 1.8; }

/* ── Reseñas de producto ────────────────────────────────────────────────── */
#reviews { grid-column: 1 / -1; margin-top: 64px; position: relative; z-index: 2; background: var(--surface-canvas); }

.woocommerce-Reviews-title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-gray-200);
}

/* Lista de reseñas */
.woocommerce-Reviews .commentlist { list-style: none; display: flex; flex-direction: column; gap: 20px; margin-bottom: 48px; }
.woocommerce-Reviews .commentlist .comment_container {
  display: flex;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-gray-50);
}
.woocommerce-Reviews .commentlist .avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}
.woocommerce-Reviews .commentlist .comment-text { flex: 1; min-width: 0; }
.woocommerce-Reviews .commentlist .comment-text .star-rating {
  margin-bottom: 6px;
  font-size: 14px;
}
.woocommerce-Reviews .commentlist .meta {
  font-size: 12px;
  color: var(--color-gray-400);
  margin-bottom: 10px;
}
.woocommerce-Reviews .commentlist .meta strong { color: var(--color-black); font-weight: 500; }
.woocommerce-Reviews .commentlist .description p {
  font-size: 14px;
  color: var(--color-gray-600);
  line-height: 1.7;
  margin: 0;
}

/* Formulario de reseña */
#review_form_wrapper {
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
}
#review_form_wrapper #reply-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 20px;
  display: block;
}
.comment-form .comment-notes {
  font-size: 13px;
  color: var(--color-gray-400);
  margin-bottom: 20px;
}

/* Selector de estrellas */
.comment-form-rating { margin-bottom: 20px; }
.comment-form-rating label { font-size: 13px; font-weight: 500; display: block; margin-bottom: 8px; }
.comment-form-rating .stars { display: flex; align-items: center; gap: 4px; margin: 0; }
.comment-form-rating .stars > span { display: flex; gap: 2px; }
.comment-form-rating .stars a {
  display: inline-block;
  width: 28px;
  height: 28px;
  text-indent: -9999px;
  position: relative;
  color: var(--color-gray-200);
}
.comment-form-rating .stars a::before {
  content: '★';
  text-indent: 0;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--color-gray-200);
  transition: color var(--transition);
}
.comment-form-rating .stars a:hover::before,
.comment-form-rating .stars a:hover ~ a::before { color: var(--color-gray-200); }
.comment-form-rating .stars:hover a::before { color: #f59e0b; }
.comment-form-rating .stars a:hover ~ a::before { color: var(--color-gray-200) !important; }
.comment-form-rating .stars.selected a.active::before,
.comment-form-rating .stars.selected a.active ~ a::before { color: var(--color-gray-200); }
.comment-form-rating .stars.selected a::before { color: #f59e0b; }
.comment-form-rating .stars.selected a.active ~ a::before { color: var(--color-gray-200) !important; }

/* Campos del formulario */
.comment-form .comment-form-comment { margin-bottom: 16px; }
.comment-form .comment-form-comment label,
.comment-form .comment-form-author label,
.comment-form .comment-form-email label {
  font-size: 13px;
  font-weight: 500;
  display: block;
  margin-bottom: 6px;
  color: var(--color-black);
}
.comment-form .comment-form-comment textarea {
  width: 100%;
  min-height: 110px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 14px;
  font-family: var(--font);
  line-height: 1.6;
  resize: vertical;
  transition: border-color var(--transition);
  background: var(--color-white);
}
.comment-form .comment-form-comment textarea:focus {
  outline: none;
  border-color: var(--color-black);
}
.comment-form .comment-form-author { margin-bottom: 12px; }
.comment-form .comment-form-email { margin-bottom: 20px; }
.comment-form .comment-form-author input,
.comment-form .comment-form-email input {
  width: 100%;
  height: 42px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius);
  padding: 0 14px;
  font-size: 14px;
  font-family: var(--font);
  transition: border-color var(--transition);
  background: var(--color-white);
}
.comment-form .comment-form-author input:focus,
.comment-form .comment-form-email input:focus {
  outline: none;
  border-color: var(--color-black);
}
.comment-form .form-submit { margin: 0; }
.comment-form .form-submit #submit {
  height: 44px;
  padding: 0 28px;
  background: var(--color-black);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: background var(--transition);
}
.comment-form .form-submit #submit:hover { background: var(--color-gray-900); }

/* Acordeón (envíos / detalles / devoluciones en producto, y [pm_faq]) */
.ecpm-product-accordion { margin-top: 36px; border-top: 1px solid var(--hairline); }
.ecpm-product-accordion__item,
.ecpm-faq__item {
  border-bottom: 1px solid var(--hairline);
}
.ecpm-product-accordion__q,
.ecpm-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-ink);
  list-style: none;
}
.ecpm-product-accordion__q::-webkit-details-marker,
.ecpm-faq__question::-webkit-details-marker { display: none; }
.ecpm-product-accordion__q::after,
.ecpm-faq__question::after {
  content: '+';
  flex-shrink: 0;
  font-size: 18px;
  color: var(--text-muted);
}
.ecpm-product-accordion__item[open] > .ecpm-product-accordion__q::after,
.ecpm-faq__item[open] > .ecpm-faq__question::after {
  content: '−';
}
.ecpm-product-accordion__a,
.ecpm-faq__answer {
  padding: 0 0 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-body);
  max-width: 480px;
}
.ecpm-product-accordion__a p,
.ecpm-faq__answer p { margin: 0 0 1em; }
.ecpm-product-accordion__a p:last-child,
.ecpm-faq__answer p:last-child { margin-bottom: 0; }

/* Productos relacionados */
.related.products { grid-column: 1 / -1; margin-top: 64px; position: relative; z-index: 2; background: var(--surface-canvas); }
.related.products > h2,
.up-sells.products > h2 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 28px;
}

/* ── Carrito ─────────────────────────────────────────────────────────────── */
.woocommerce table.cart {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}
.woocommerce table.cart th {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gray-400);
  border-bottom: 1px solid var(--color-gray-200);
  padding: 12px 16px 12px 0;
}
.woocommerce table.cart td { border-bottom: 1px solid var(--color-gray-100); padding: 20px 16px 20px 0; vertical-align: middle; }
.woocommerce table.cart .product-thumbnail img { width: 72px; border-radius: var(--radius-sm); background: var(--color-gray-100); }
.woocommerce table.cart .product-name a { font-weight: 500; }
.woocommerce table.cart .quantity input.qty {
  width: 64px; height: 38px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  text-align: center;
}
.woocommerce table.cart td.actions { padding-top: 24px; }
.woocommerce table.cart td.actions .coupon { display: flex; gap: 8px; }
.woocommerce table.cart td.actions .coupon input {
  height: 40px; border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm); padding: 0 12px; font-size: 13px;
}
.woocommerce table.cart td.actions .button,
.woocommerce .cart .button {
  height: 40px !important;
  padding: 0 20px !important;
  background: var(--color-black) !important;
  color: var(--color-white) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border: none !important;
}
.woocommerce .cart_totals { margin-top: 32px; }
.woocommerce .cart_totals h2 { font-size: 18px; font-weight: 500; margin-bottom: 20px; }
.woocommerce .cart_totals table { width: 100%; font-size: 14px; }
.woocommerce .cart_totals table th,
.woocommerce .cart_totals table td { padding: 10px 0; border-bottom: 1px solid var(--color-gray-100); }
.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td { font-weight: 600; font-size: 16px; }
.woocommerce .cart_totals .wc-proceed-to-checkout .checkout-button,
.woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 52px !important;
  background: var(--color-btn-bg, var(--color-brand)) !important;
  color: var(--color-btn-text, #ffffff) !important;
  text-decoration: none !important;
  border-radius: var(--radius-pill) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  font-family: var(--font) !important;
  margin-top: 16px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border: none !important;
}
.woocommerce .cart_totals .wc-proceed-to-checkout .checkout-button:hover,
.woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button:hover {
  opacity: .88 !important;
  color: var(--color-btn-text, #ffffff) !important;
}

/* Título en páginas WC (checkout, carrito, mi cuenta) sin margen excesivo */
.main-content--shop .page-title {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 500;
  margin-bottom: 16px;
}

/* ── Checkout 2 columnas ────────────────────────────────────────────────── */

/* Layout principal */
.woocommerce-checkout {
  display: grid !important;
  grid-template-columns: 1fr 380px;
  grid-template-areas: 'details review';
  gap: 32px;
  align-items: start;
  padding-top: 24px;
  padding-bottom: 40px;
  width: 100% !important;
}
#customer_details { grid-area: details; }
#order_review     { grid-area: review; position: sticky; top: calc(var(--header-h) + 16px); }

/* Cualquier hijo inesperado abarca ambas columnas y no rompe el grid */
.woocommerce-checkout > *:not(#customer_details):not(#order_review) {
  grid-column: 1 / -1 !important;
}

/* Ocultar el h3 del pedido (es hijo directo del form, fuera de #order_review) */
#order_review_heading { display: none !important; }

/* col2-set: pasar de floats a bloque vertical */
.col2-set { width: 100% !important; }
.col2-set::after { display: none !important; }
.col2-set .col-1,
.col2-set .col-2 { width: 100% !important; float: none !important; }

/* ── Columna izquierda: formulario ──────────────────────────────────────── */

/* Títulos de sección con número */
.woocommerce-checkout #customer_details h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-black);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-btn-bg, var(--color-brand));
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Campos del formulario */
.woocommerce form .form-row { margin-bottom: 12px; }
.woocommerce form .form-row label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-gray-600);
  margin-bottom: 6px;
  display: block;
}
.woocommerce form .form-row .required { color: var(--color-btn-bg, var(--color-brand)); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  height: 46px;
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius);
  padding: 0 14px;
  font-size: 14px;
  font-family: var(--font);
  width: 100%;
  background: var(--color-white);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.woocommerce form .form-row textarea { height: 100px; padding: 12px 14px; }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
  outline: none;
  border-color: var(--color-btn-bg, var(--color-brand));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-btn-bg, var(--color-brand)) 15%, transparent);
}

/* Pares de campos lado a lado */
.woocommerce-billing-fields .form-row-first,
.woocommerce-billing-fields .form-row-last {
  width: calc(50% - 8px) !important;
  float: left !important;
}
.woocommerce-billing-fields .form-row-first { margin-right: 16px !important; }
.woocommerce-billing-fields::after { content: ''; display: table; clear: both; }

/* ── Columna derecha: resumen del pedido ────────────────────────────────── */

#order_review {
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Encabezado de la card del pedido — inyectado via PHP dentro de #order_review */
#order_review .ecpm-order-heading {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-btn-bg, var(--color-brand));
  margin: 0 !important;
  padding: 18px 24px;
}

/* Tabla de productos */
.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.woocommerce-checkout-review-order-table thead th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gray-400);
  padding: 16px 24px 10px;
  border-bottom: 1px solid var(--color-gray-200);
  text-align: left;
}
.woocommerce-checkout-review-order-table thead th:last-child { text-align: right; }
.woocommerce-checkout-review-order-table tbody tr td {
  padding: 14px 24px;
  border-bottom: 1px solid var(--color-gray-100);
  vertical-align: middle;
}
.woocommerce-checkout-review-order-table tbody .product-name {
  font-weight: 500;
  color: var(--color-black);
}
.woocommerce-checkout-review-order-table tbody .product-name .product-quantity {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-gray-400);
  margin-left: 4px;
}

/* Imagen miniatura del producto en el resumen */
.ecpm-checkout-product {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  vertical-align: middle;
}
.ecpm-checkout-thumb {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  border: 1px solid var(--color-gray-100);
}
.woocommerce-checkout-review-order-table tbody .product-total {
  text-align: right;
  font-weight: 500;
  white-space: nowrap;
}

/* Filas de totales */
.woocommerce-checkout-review-order-table tfoot tr td,
.woocommerce-checkout-review-order-table tfoot tr th {
  padding: 10px 24px;
  font-size: 13px;
  color: var(--color-gray-600);
  border-top: 1px solid var(--color-gray-200);
}
.woocommerce-checkout-review-order-table tfoot tr th { font-weight: 500; }

/* Fila de total final */
.woocommerce-checkout-review-order-table tfoot .order-total td,
.woocommerce-checkout-review-order-table tfoot .order-total th {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-black);
  padding: 16px 24px;
  border-top: 2px solid var(--color-gray-200);
}
.woocommerce-checkout-review-order-table tfoot .order-total .woocommerce-Price-amount {
  color: var(--color-btn-bg, var(--color-brand));
  font-size: 18px;
}

/* Resumen del pedido en móvil: con 24px de padding por lado y el subtotal en
   nowrap, "₡3,390.00 (impuesto incluido)" no cabía en una línea y la tabla
   (377px) se salía de la tarjeta (335px), cortando el texto. Menos padding,
   y la nota de impuestos pasa a su propia línea debajo del monto. */
@media (max-width: 768px) {
  .woocommerce-checkout-review-order-table thead th,
  .woocommerce-checkout-review-order-table tbody tr td,
  .woocommerce-checkout-review-order-table tfoot tr td,
  .woocommerce-checkout-review-order-table tfoot tr th,
  .woocommerce-checkout-review-order-table tfoot .order-total td,
  .woocommerce-checkout-review-order-table tfoot .order-total th {
    padding-left: 16px;
    padding-right: 16px;
  }
  #order_review .ecpm-order-heading { padding-inline: 16px; }
  .woocommerce-checkout-review-order-table tbody .product-total { white-space: normal; }
  .woocommerce-checkout-review-order-table tfoot td { text-align: right; }
  .woocommerce-checkout-review-order-table td small {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    color: var(--color-gray-400);
  }
  .woocommerce-checkout-review-order-table .woocommerce-Price-amount { white-space: nowrap; }
  /* El monto dentro de "(incluye ₡390.00 Impuesto)" heredaba el tamaño y color
     grandes del total (.order-total .woocommerce-Price-amount). */
  .woocommerce-checkout-review-order-table tfoot .order-total td small .woocommerce-Price-amount {
    font-size: inherit;
    color: inherit;
  }
}

/* ── Métodos de pago ─────────────────────────────────────────────────────── */
#payment {
  background: var(--color-white);
  border-top: 1px solid var(--color-gray-200);
  padding: 20px 24px 24px;
}
#payment .payment_methods { list-style: none; margin-bottom: 16px; }
#payment .payment_methods li { padding: 10px 0; border-bottom: 1px solid var(--color-gray-100); }
#payment .payment_methods li:last-child { border-bottom: none; }
#payment .payment_methods label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  color: var(--color-black);
}
#payment .payment_methods input[type="radio"] { accent-color: var(--color-btn-bg, var(--color-brand)); width: 16px; height: 16px; }
#payment .payment_box {
  background: var(--color-gray-50);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--color-gray-600);
  margin-top: 8px;
  line-height: 1.6;
}

/* T&C */
.woocommerce-terms-and-conditions-wrapper {
  font-size: 12px;
  color: var(--color-gray-400);
  margin-bottom: 16px;
  line-height: 1.6;
}
.woocommerce-terms-and-conditions-wrapper a { color: var(--color-btn-bg, var(--color-brand)); }

/* Botón realizar pedido */
#payment #place_order {
  width: 100% !important;
  height: 54px !important;
  background: var(--color-btn-bg, var(--color-brand)) !important;
  color: var(--color-btn-text, #ffffff) !important;
  text-decoration: none !important;
  border-radius: var(--radius-pill) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-family: var(--font) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border: none !important;
  cursor: pointer;
  transition: opacity var(--transition) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}
#payment #place_order:hover { opacity: .88 !important; }

/* Badge de seguridad bajo el botón */
#payment::after {
  content: '🔒  Pago 100% seguro y encriptado';
  display: block;
  text-align: center;
  font-size: 12px;
  color: var(--color-gray-400);
  margin-top: 12px;
}

/* ── Checkout responsive ─────────────────────────────────────────────────── */
@media (max-width: 900px) {

  /* Reducir padding del main en móvil */
  .main-content--shop { padding-block: 8px !important; }

  /* Grid a una columna: resumen arriba, formulario abajo */
  .woocommerce-checkout {
    grid-template-columns: 1fr !important;
    grid-template-areas: 'review' 'details' !important;
    padding-top: 0 !important;
    padding-bottom: 24px !important;
    gap: 16px !important;
  }
  #order_review { position: static; }

  /* Campos full-width en móvil */
  .woocommerce-billing-fields .form-row-first,
  .woocommerce-billing-fields .form-row-last {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
  }

  /* Colapsar wrappers vacíos de notices que crean espacio muerto */
  .woocommerce-notices-wrapper:empty,
  .woocommerce-NoticeGroup:empty {
    display: none !important;
  }

  /* Ocultar formulario de login (ya están logueados vía ícono de Mi Cuenta) */
  .woocommerce-form-login-toggle,
  .woocommerce-form-login { display: none !important; }

  /* Compactar cupón: quitarle el margen extra */
  .checkout_coupon,
  .woocommerce-checkout-toggle { margin-bottom: 8px !important; }

  /* Título del checkout sin margen excesivo */
  .main-content--shop .page-title { margin-bottom: 12px !important; font-size: 24px !important; }

  /* Reducir padding de notices en móvil */
  .woocommerce-info { padding: 10px 14px !important; margin-bottom: 8px !important; }
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--footer-bg, var(--color-white));
  border-top: 1px solid var(--footer-line, var(--color-gray-200));
  padding-block: 48px 32px;
  margin-top: 80px;
}
/* Footer en 3 columnas: 1) logo + contacto, 2 y 3) menús de WordPress
   (ubicaciones "footer" y "footer_2"). La barra inferior ocupa todo el ancho. */
.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 40px 48px;
  align-items: start;
  text-align: left;
}
.footer-brand .custom-logo-link { display: inline-block; }
.footer-brand .custom-logo { width: auto; height: auto; max-width: 200px; max-height: 64px; }
.footer-site-name {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--footer-fg, var(--color-black));
    text-decoration: none;
}
.footer-site-name:hover { opacity: .7; }

.footer-contact { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--footer-fg-link, var(--color-gray-600));
}
.footer-contact svg { flex-shrink: 0; margin-top: 3px; color: var(--footer-fg-soft, var(--color-gray-400)); }
.footer-contact a { color: inherit; transition: color var(--transition); }
.footer-contact a:hover { color: var(--footer-fg, var(--color-black)); }

.footer-col__title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--footer-fg-soft, var(--text-muted));
  margin-bottom: 16px;
}
.footer-nav-list { display: flex; flex-direction: column; gap: 10px; }
.footer-nav-list a {
  font-size: 14px;
  color: var(--footer-fg-link, var(--color-gray-600));
  transition: color var(--transition);
}
.footer-nav-list a:hover { color: var(--footer-fg, var(--color-black)); }

@media (max-width: 900px) {
  .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-col--brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
}

.footer-bottom {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 24px;
  border-top: 1px solid var(--footer-line, var(--color-gray-100));
  padding-top: 24px;
}
.footer-copy  { font-size: 12px; color: var(--footer-fg-soft, var(--color-gray-400)); }
.footer-credit { font-size: 12px; color: var(--footer-fg-soft, var(--color-gray-400)); }
.footer-credit a { color: var(--footer-fg-soft, var(--color-gray-400)); text-decoration: underline; text-underline-offset: 2px; }
.footer-credit a:hover { color: var(--footer-fg-link, var(--color-gray-600)); }

/* ── Búsqueda sin resultados ────────────────────────────────────────────── */
.archive-count { font-size: 13px; color: var(--color-gray-400); margin-top: 6px; }
.ecpm-no-results { padding-block: 48px; max-width: 480px; }
.ecpm-no-results p { color: var(--color-gray-600); margin-bottom: 8px; }
.ecpm-no-results__hint { font-size: 13px; margin-bottom: 24px !important; }

/* ── 404 ─────────────────────────────────────────────────────────────────── */
.error-404 {
  text-align: center;
  padding-block: 100px;
}
.error-404 .error-code { font-size: 96px; font-weight: 300; letter-spacing: -0.06em; color: var(--color-gray-200); line-height: 1; margin-bottom: 16px; }
.error-404 .error-title { font-size: 24px; font-weight: 500; margin-bottom: 12px; }
.error-404 .error-desc { color: var(--color-gray-600); margin-bottom: 32px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .woocommerce ul.products { grid-template-columns: repeat(3, 1fr) !important; }
  .nosotros-split { gap: 40px; }
}

@media (max-width: 768px) {
  :root { --header-h: 56px; }

  .header-nav { display: none; }
  .header-menu-toggle { display: flex; }

  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 20px 12px; }

  .woocommerce ul.products:has(li.product-category) li.product-category {
    flex: 0 0 calc(50% - 12px) !important;
  }


  .woocommerce div.product {
    grid-template-columns: 1fr;
    gap: 32px;
  }


  .nosotros-split { grid-template-columns: 1fr; gap: 28px; }

  .home-section { padding-block: 40px; }

  .footer-nav-list { gap: 8px 16px; }
}

@media (max-width: 480px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 16px 10px; }
  .posts-grid { grid-template-columns: 1fr; }
}