/* ===========================================================
   Adaptaciones específicas de WordPress / WooCommerce
   (el diseño base vive en main.css)
   =========================================================== */

/* Menús de WordPress: wp_nav_menu envuelve en <ul><li>.
   Los aplanamos para que hereden el layout flex del header/footer. */
.site-header__nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header__nav li {
  margin: 0;
  padding: 0;
}

.site-footer__col ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Contenido de página/post (Gutenberg) dentro de la columna de lectura. */
.rich-text > *,
.cms-page__content > *,
.post-detail__content > * {
  margin-left: auto;
  margin-right: auto;
}

.rich-text img,
.cms-page__content img,
.post-detail__content img {
  height: auto;
}

.alignwide { width: 100%; }
.alignfull { width: 100%; }
.aligncenter { margin-left: auto; margin-right: auto; }

/* Acordeón nativo (core/details) en páginas tipo Ayuda. */
.cms-page__content details {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  background: var(--surface);
}

.cms-page__content summary {
  cursor: pointer;
  font-family: var(--font-heading-stack);
  font-weight: 600;
}

/* Mensajes de WooCommerce (notices) con tono de marca. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  list-style: none;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  background: var(--brand-wash);
  color: var(--ink);
  padding: 14px 18px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  font-size: 0.95rem;
}

.woocommerce-error {
  border-left-color: var(--brand-700);
}

/* Tarjetas de producto/post: altura pareja, descripción a 2 líneas
   y precio/CTA alineados al fondo para que la fila quede uniforme. */
.card-grid .content-card {
  height: 100%;
}

.content-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.content-card__body p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__footer {
  margin-top: auto;
  padding-top: 14px;
}

/* Botón hamburguesa (móvil) */
.site-header__toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  cursor: pointer;
}
.site-header__burger,
.site-header__burger::before,
.site-header__burger::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.15s ease, background 0.15s ease;
}
.site-header__burger {
  position: relative;
}
.site-header__burger::before {
  position: absolute;
  left: 0;
  top: -6px;
}
.site-header__burger::after {
  position: absolute;
  left: 0;
  top: 6px;
}
.site-header__toggle[aria-expanded="true"] .site-header__burger {
  background: transparent;
}
.site-header__toggle[aria-expanded="true"] .site-header__burger::before {
  transform: translateY(6px) rotate(45deg);
}
.site-header__toggle[aria-expanded="true"] .site-header__burger::after {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 860px) {
  .site-header__toggle {
    display: inline-flex;
  }

  /* Logo + hamburguesa SIEMPRE en una sola fila (logo izq, ícono der).
     Anula el flex-direction:column heredado del diseño original. */
  .site-header__inner {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 16px;
    /* Restaura el espacio lateral (la regla heredada lo ponía en 0). */
    padding: 0 24px;
    min-height: 64px;
  }

  /* El menú se despliega como panel debajo del header. */
  .site-header__nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 4px var(--gutter) 12px;
    box-shadow: 0 16px 28px rgba(27, 23, 20, 0.1);
    z-index: 40;
  }

  .site-header__nav.is-open {
    display: block;
  }

  .site-header__nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-header__nav li {
    width: 100%;
  }

  .site-header__nav a {
    display: block;
    width: 100%;
    padding: 15px 2px;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--line-soft);
  }

  .site-header__nav li:last-child a {
    border-bottom: none;
  }

  .site-header__nav a:hover {
    color: var(--accent-ink);
  }
}