/* ==========================================================================
   Harmony — Home estilo supermercado (market-*)
   Flat design sobre los tokens de tokens.css. Paleta marca: forest/cream/rust.
   ========================================================================== */

/* market-top es el header GLOBAL (header.php) desde 16-jul-2026.
   Full-bleed solo en el home; las páginas internas conservan título y contenedor. */
body { background: var(--color-cream-warm); }
.ast-above-header-wrap, .site-header { display: none; }

body.home .entry-title,
body.home .ast-container > .entry-header { display: none; }
body.home .site-content .ast-container,
body.home .entry-content { max-width: none; padding: 0; margin: 0; }

/* ---------- Barra superior ---------- */
.market-top { position: sticky; top: 0; z-index: 100; }

.market-top__bar { background: var(--color-forest); padding: var(--space-3) 0; }
.market-top__inner { display: flex; align-items: center; gap: var(--space-6); }

.market-top__logo { display: flex; flex-direction: column; line-height: 1.05; text-decoration: none; flex-shrink: 0; }
.market-top__logo-name { font-family: var(--font-display); font-weight: 600; font-size: 26px; color: var(--color-bone); }
.market-top__logo-sub { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-sage-soft); }

.market-search { display: flex; flex: 1; max-width: 640px; background: var(--color-bone); border-radius: var(--radius-pill); overflow: hidden; }
.market-search__input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 13px 22px; font: 500 var(--text-base) var(--font-body); color: var(--color-ink); }
.market-search__input::placeholder { color: var(--color-ink-soft); }
.market-search__input:focus { outline: none; }
.market-search:focus-within { box-shadow: 0 0 0 3px rgba(184, 85, 43, 0.45); }
/* !important: harmony.css fuerza button→píldora forest con !important */
.market-search__btn { display: flex; align-items: center; gap: 8px; border: 0; cursor: pointer; background: var(--color-rust) !important; color: #fff !important; padding: 0 26px !important; border-radius: 0 !important; box-shadow: none !important; font: 600 var(--text-sm) var(--font-body); transition: background 150ms ease; }
.market-search__btn:hover { background: #9c4522 !important; transform: none !important; }
.market-search__btn span { color: #fff !important; }

.market-top__actions { display: flex; align-items: center; gap: var(--space-6); margin-left: auto; flex-shrink: 0; }
.market-top__action { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--color-bone) !important; text-decoration: none; font: 500 11px var(--font-body); transition: opacity 150ms ease; }
.market-top__action:hover { opacity: 0.8; color: var(--color-bone) !important; }
.market-top__action span { color: var(--color-bone); }
.market-top__cart-count { position: absolute; top: -6px; right: 2px; min-width: 18px; height: 18px; border-radius: var(--radius-pill); background: var(--color-rust); color: #fff; font: 700 11px/18px var(--font-body); text-align: center; padding: 0 4px; }

/* ---------- Barra de categorías ---------- */
.market-cats { background: var(--color-bone); border-bottom: 1px solid var(--color-sage-soft); }
.market-cats__inner { display: flex; gap: var(--space-2); overflow-x: auto; padding: 10px 24px; scrollbar-width: none; }
.market-cats__inner::-webkit-scrollbar { display: none; }
.market-cats__chip { flex-shrink: 0; padding: 7px 18px; border-radius: var(--radius-pill); border: 1px solid var(--color-sage-soft); color: var(--color-forest); background: transparent; font: 600 var(--text-sm) var(--font-body); text-decoration: none; transition: background 150ms ease, color 150ms ease; cursor: pointer; }
.market-cats__chip:hover { background: var(--color-forest); color: var(--color-bone) !important; border-color: var(--color-forest); }
.market-cats__chip--hot { background: var(--color-rust); border-color: var(--color-rust); color: #fff !important; }
.market-cats__chip--hot:hover { background: #9c4522; border-color: #9c4522; color: #fff !important; }

/* ---------- Carrusel de banners ---------- */
.market-banners { padding: var(--space-6) 0 var(--space-2); }
.market-banners__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--radius-lg); }
.market-banners__track::-webkit-scrollbar { display: none; }

/* border-right cream: oculta el filo subpixel del slide siguiente */
.market-banner { position: relative; display: flex; align-items: center; justify-content: space-between; flex: 0 0 100%; scroll-snap-align: start; border-radius: var(--radius-lg); border-right: 3px solid var(--color-cream-warm); padding: clamp(28px, 4vw, 56px) clamp(24px, 5vw, 64px); min-height: 230px; overflow: hidden; }
.market-banner--forest { background: var(--color-forest); color: var(--color-bone); }
.market-banner--rust { background: var(--color-rust); color: #FFF6EE; }
.market-banner--sage { background: var(--color-sage-soft); color: var(--color-forest-deep); }

.market-banner__eyebrow { font: 700 var(--text-xs) var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.75; margin-bottom: var(--space-2); }
.market-banner__title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; margin: 0 0 var(--space-2); color: inherit; }
.market-banner__text { font: 400 var(--text-base) var(--font-body); color: inherit !important; opacity: 0.9; margin: 0 0 var(--space-4); max-width: 46ch; }
.market-banner__cta { display: inline-flex; align-items: center; gap: 8px; background: var(--color-bone); color: var(--color-ink) !important; border-radius: var(--radius-pill); padding: 11px 24px; font: 600 var(--text-sm) var(--font-body); text-decoration: none; transition: transform 150ms ease; }
.market-banner__cta:hover { transform: translateY(-1px); color: var(--color-ink) !important; }
.market-banner__art { width: clamp(90px, 12vw, 160px); opacity: 0.18; flex-shrink: 0; }
.market-banner__art svg { width: 100%; height: auto; }

.market-banners__dots { display: flex; justify-content: center; gap: 8px; padding-top: var(--space-3); }
/* !important: neutraliza la regla global button de harmony.css */
.market-banners__dot { width: 8px; height: 8px; min-height: 0 !important; border-radius: 50% !important; border: 0; cursor: pointer; background: var(--color-sage-soft) !important; padding: 0 !important; box-shadow: none !important; transition: background 150ms ease, transform 150ms ease; }
.market-banners__dot.is-active { background: var(--color-forest) !important; transform: scale(1.25); }

/* ---------- Vitrinas de producto ---------- */
.market-row { padding: var(--space-8) 0 0; }
.market-row__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-4); }
.market-row__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; color: var(--color-ink); margin: 0; }
.market-row__all { display: inline-flex; align-items: center; gap: 6px; color: var(--color-forest); font: 600 var(--text-sm) var(--font-body); text-decoration: none; }
.market-row__all:hover { color: var(--color-rust); }

.market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--space-4); }

.market-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--color-sage-soft); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow 200ms ease, transform 200ms ease; }
.market-card:hover { box-shadow: 0 10px 28px rgba(15, 77, 61, 0.12); transform: translateY(-2px); }

.market-card__tag { position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--color-forest); color: var(--color-bone); font: 700 11px var(--font-body); border-radius: var(--radius-sm); padding: 4px 8px; }
.market-card__tag--off { background: var(--color-rust); color: #fff; }

.market-card__media { display: block; aspect-ratio: 1; background: var(--color-cream); }
.market-card__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.market-card__placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--color-sage); }

.market-card__body { display: flex; flex-direction: column; gap: 6px; padding: var(--space-3); flex: 1; }
.market-card__name { font: 500 var(--text-sm) var(--font-body); line-height: 1.35; color: var(--color-ink) !important; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.market-card__name:hover { color: var(--color-forest) !important; }

.market-card__prices { display: flex; align-items: baseline; gap: 8px; }
.market-card__price { font: 700 var(--text-lg) var(--font-body); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.market-card__old { font: 400 var(--text-sm) var(--font-body); color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }

.market-card__add { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: auto; background: var(--color-rust); color: #fff !important; border-radius: var(--radius-pill); padding: 10px 0; font: 600 var(--text-sm) var(--font-body); text-decoration: none; min-height: 44px; transition: background 150ms ease; cursor: pointer; }
.market-card__add:hover { background: #9c4522; color: #fff !important; }

/* Tarjetas demo: sutilmente identificables solo en admin bar activa */
.admin-bar .market-card--demo::after { content: 'DEMO'; position: absolute; top: 10px; right: 10px; font: 700 9px var(--font-body); letter-spacing: 0.1em; color: var(--color-ink-soft); background: var(--color-cream); border-radius: var(--radius-sm); padding: 3px 6px; }

/* ---------- Franja de confianza ---------- */
.market-trust { margin-top: var(--space-12); background: var(--color-forest); padding: var(--space-8) 0; }
.market-trust__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-6); }
.market-trust__item { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--color-bone); }
.market-trust__item svg { flex-shrink: 0; color: var(--color-sage-soft); }
.market-trust__item strong { display: block; font: 600 var(--text-base) var(--font-body); color: var(--color-bone); }
.market-trust__item span { font: 400 var(--text-sm) var(--font-body); color: var(--color-bone) !important; opacity: 0.75; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .market-top__inner { flex-wrap: wrap; gap: var(--space-3); }
  .market-search { order: 3; flex-basis: 100%; max-width: none; }
  .market-top__actions { gap: var(--space-4); }
  .market-banner { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .market-banner__art { display: none; }
  .market-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
  .market-card, .market-banner__cta, .market-banners__dot { transition: none; }
}

/* ==========================================================================
   Correcciones auditoría visual 16-jul-2026 (páginas WooCommerce + header)
   ========================================================================== */

/* 1. Skip-link: accesible solo con teclado; antes quedaba como caja verde
      visible montada sobre el contenido */
.skip-link { position: absolute !important; left: -9999px !important; top: auto !important; }
.skip-link:focus { left: 8px !important; top: 8px !important; z-index: 999; }

/* 2. Logo: nombre y tagline en columna (antes corrían en línea y se montaban) */
.header .logo > span { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.header .logo__sub { display: block; margin-top: 2px; white-space: nowrap; }
.header__inner { gap: var(--space-4); }
.header .logo { flex-shrink: 1; min-width: 0; }
@media (max-width: 1023px) {
  .header .logo__sub { display: none; } /* tagline fuera en móvil/tablet: se montaba sobre el título */
  .header .logo { font-size: var(--text-lg); }
}

/* 3. El header market-top es sticky (en flujo), no fijo: solo un respiro arriba */
body.woocommerce #content,
body.woocommerce-page #content { padding-top: var(--space-6); }

/* 4. Contenedor en páginas Woo: el contenido iba pegado al borde izquierdo */
body.woocommerce #content .content-area,
body.woocommerce-page #content .content-area {
  width: 100%; max-width: var(--container-max);
  margin: 0 auto; padding: 0 var(--space-6) var(--space-16);
}
@media (min-width: 768px) {
  body.woocommerce #content .content-area,
  body.woocommerce-page #content .content-area { padding: 0 var(--space-12) var(--space-16); }
}

/* 5. Galería de producto: fondo neutro (el degradado forest se veía como
      franja verde con fotos de fondo blanco) */
.woocommerce div.product .woocommerce-product-gallery__image img,
.woocommerce div.product .woocommerce-product-gallery__wrapper {
  background: var(--color-bone) !important;
  border: 1px solid var(--color-sage-soft);
}

/* 6. Botón búsqueda del header: harmony.css lo volvía píldora forest sin icono */
.header button.icon-btn {
  background: transparent !important;
  padding: 0 !important;
  min-height: 44px !important;
  width: 44px;
  border-radius: var(--radius-pill) !important;
  box-shadow: none !important;
  color: var(--color-ink) !important;
}
.header button.icon-btn:hover { background: var(--color-sage-soft) !important; }
.header .icon-btn svg { width: 20px !important; height: 20px !important; display: block; }

/* ==========================================================================
   Unificación diseño (opción A, 16-jul): páginas Woo con el look del home
   ========================================================================== */

/* Tarjetas del archivo de tienda/categorías = market-card */
.woocommerce ul.products li.product {
  background: #fff !important;
  border: 1px solid var(--color-sage-soft) !important;
  border-radius: var(--radius-md) !important;
  padding: 0 0 var(--space-3) !important;
  overflow: hidden;
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.woocommerce ul.products li.product:hover {
  box-shadow: 0 10px 28px rgba(15, 77, 61, 0.12);
  transform: translateY(-2px);
}
.woocommerce ul.products li.product img {
  border-radius: 0 !important;
  background: var(--color-bone);
  aspect-ratio: 1; object-fit: contain; width: 100%;
  margin: 0 0 var(--space-2) !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  color: var(--color-ink) !important;
  padding: 0 var(--space-3) !important;
  line-height: 1.35;
}
.woocommerce ul.products li.product .price {
  font-family: var(--font-body) !important;
  font-size: var(--text-lg) !important;
  font-weight: 700 !important;
  color: var(--color-ink) !important;
  font-variant-numeric: tabular-nums;
  padding: 0 var(--space-3);
}
.woocommerce ul.products li.product .price del { font-size: var(--text-sm); font-weight: 400; color: var(--color-ink-soft); }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .button {
  margin: var(--space-2) var(--space-3) 0 !important;
  width: calc(100% - 2 * var(--space-3));
  background: var(--color-rust) !important;
  color: #fff !important;
  min-height: 44px;
}
.woocommerce ul.products li.product .button:hover { background: #9c4522 !important; }

/* Badge de oferta = chip rust como en el home */
.woocommerce span.onsale {
  background: var(--color-rust) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  font: 700 11px var(--font-body) !important;
  padding: 4px 8px !important;
  min-height: 0 !important; min-width: 0 !important;
  line-height: 1.4 !important;
  top: 10px !important; left: 10px !important;
}

/* Botones principales de producto/carrito/checkout en rust (acción de compra) */
.woocommerce div.product .single_add_to_cart_button,
.woocommerce .cart .button, 
.woocommerce-cart .checkout-button,
#place_order {
  background: var(--color-rust) !important;
  color: #fff !important;
}
.woocommerce div.product .single_add_to_cart_button:hover,
.woocommerce-cart .checkout-button:hover,
#place_order:hover { background: #9c4522 !important; }

/* Páginas de prosa (legales, FAQ, contacto): contenedor de lectura y
   tipografía a escala. Se excluyen las páginas con secciones editoriales
   (.section) y las de WooCommerce, que tienen su propio contenedor. */
body.page:not(.home):not(.woocommerce-page) #content .content-area:not(:has(.section)),
body.single #content .content-area {
  width: 100%;
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-16);
}
body.page:not(.home):not(.woocommerce-page) .content-area:not(:has(.section)) .entry-title {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-6);
}
body.page:not(.home):not(.woocommerce-page) .content-area:not(:has(.section)) .entry-content h2 {
  font-size: var(--text-2xl);
  margin: var(--space-8) 0 var(--space-3);
}
body.page:not(.home):not(.woocommerce-page) .content-area:not(:has(.section)) .entry-content p,
body.page:not(.home):not(.woocommerce-page) .content-area:not(:has(.section)) .entry-content li {
  line-height: 1.7;
  margin-bottom: var(--space-3);
}

/* ==========================================================================
   QA profesional 16-jul (2ª pasada) — hallazgos del crawler
   ========================================================================== */

/* 1. Marca en footer: nombre y tagline en columna (estaban en línea, montados) */
.logo > span { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.logo .logo__sub { display: block; margin-top: 2px; }

/* 2. Badge de oferta de Astra: chip rust consistente con el home
      (texto lo pone Astra; estilo unificado aquí) */
.ast-onsale-card {
  background: var(--color-rust) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  font: 700 11px var(--font-body) !important;
  padding: 4px 8px !important;
  box-shadow: none !important;
  top: 10px !important; left: 10px !important;
}

/* 3. Botones de WooCommerce Blocks (carrito/checkout): rust de marca, no azul */
.wc-block-components-button:not(.is-link),
.wp-element-button,
.wc-block-cart__submit-button {
  background: var(--color-rust) !important;
  color: #fff !important;
  border-radius: var(--radius-pill) !important;
  border: 0 !important;
}
.wc-block-components-button:not(.is-link):hover,
.wp-element-button:hover { background: #9c4522 !important; }

/* 4. Carrito en móvil: la tabla forzaba 436px de ancho en viewport de 390 */
@media (max-width: 700px) {
  table.wc-block-cart-items { table-layout: fixed; width: 100% !important; }
  .wc-block-cart-items th, .wc-block-cart-items td { word-wrap: break-word; }
  .wc-block-cart-item__prices .wc-block-components-sale-badge { display: none; }
  .wc-block-components-product-metadata__description { display: none; }
}

/* 5. Acordeones <details> en descripciones: el contenido cerrado quedaba
      en el layout generando solapes fantasma */
.entry-content details:not([open]) > *:not(summary),
.woocommerce-Tabs-panel details:not([open]) > *:not(summary) { display: none !important; }
details > summary { cursor: pointer; padding: var(--space-2) 0; font-weight: 600; }

/* 6. Selector de variaciones (Sabor/Color): texto se recortaba */
.woocommerce div.product form.cart .variations select {
  min-height: 44px; padding: 8px 36px 8px 12px;
  border-radius: var(--radius-sm); border: 1px solid var(--color-sage-soft);
  font: 500 var(--text-base) var(--font-body); color: var(--color-ink);
  background-color: var(--color-bone);
}
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th { padding: var(--space-2) 0; }

/* 7. Carrito móvil: apilado en columna (la tabla forzaba 439px en 390) */
@media (max-width: 700px) {
  .wc-block-cart-items thead { display: none; }
  table.wc-block-cart-items,
  table.wc-block-cart-items tbody,
  table.wc-block-cart-items tr.wc-block-cart-items__row,
  table.wc-block-cart-items td.wc-block-cart-item__image,
  table.wc-block-cart-items td.wc-block-cart-item__product,
  table.wc-block-cart-items td.wc-block-cart-item__total { display: block; float: none; position: static; width: 100% !important; max-width: 100% !important; box-sizing: border-box; text-align: left; }
  .wc-block-cart-items__row { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-sage-soft); }
  table.wc-block-cart-items td.wc-block-cart-item__image { width: 96px !important; }
  td.wc-block-cart-item__image img { max-width: 96px; }
  .wc-block-cart-item__total .wc-block-components-sale-badge { display: none; }
  table.wc-block-cart-items { margin: 0 !important; }
  table.wc-block-cart-items td { padding-left: 0 !important; padding-right: 0 !important; }
  .wc-block-cart { overflow-x: clip; }
}

/* 8. Astra inyecta un segundo badge hardcodeado en las tarjetas modern-style;
      se oculta y queda solo el nuestro (con % real, clase .onsale) */
.ast-onsale-card:not(.onsale) { display: none !important; }