/* ==========================================================================
   En Balance · Materia Clara — tienda, categorías y búsqueda de productos.
   Solo se decide DÓNDE va cada pieza en celular (base), tableta (≥ 768 px)
   y escritorio (≥ 1024 px). La tarjeta, los chips y la rejilla vienen de
   eb-inicio.css; los materiales, de materia-clara.css.
   ========================================================================== */

/* El cielo detrás de la cabecera (body.mc-con-cielo) vive en eb-inicio.css: lo usan todas las plantillas propias. */

/* Mismas capas y valores de la portada, acotados a la tienda. */
body.mc-tienda-pagina, body.mc-tienda-pagina .mc-mundo {
  --mc-cielo-1: #cfe5ef; --mc-cielo-2: #e2edf0;
  --mc-horizonte: #eaf4ef; --mc-bruma: #eef5f2;
  --mc-linea-horizonte: rgba(255,255,255,.5);
  --mc-halo-1: rgba(159,220,175,.55); --mc-halo-2: rgba(78,203,217,.40);
  --mc-halo-3: rgba(168,214,236,.60); --mc-halo-4: rgba(159,220,175,.42);
}
.mc-tienda { --mc-alto-amanecer: 760px; min-height: 100vh; isolation: isolate; }
body.mc-tienda-pagina .mc-sol {
  background: radial-gradient(680px 520px at 16% 22%, rgba(255,255,255,.7), transparent 72%),
              radial-gradient(140% 110px at 50% 68.4%, rgba(255,255,255,.45), transparent 78%);
}
.mc-tienda > .mc-aurora { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 520px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 520px), transparent); }
.mc-tienda::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 480px; pointer-events: none; z-index: 0; background: linear-gradient(180deg, transparent, var(--mc-suelo)); }
.mc-tienda > .mc-contenido, .mc-tienda > .mc-luz { z-index: 1; }
.mc-tienda .mc-secciones { padding-bottom: var(--mc-e5); }
#main-content.mc-tienda { padding-bottom: 0; }

.mc-tienda-confianza { display: inline-flex; align-items: center; gap: var(--mc-e1); font-weight: 600; color: var(--mc-texto-2); }
.mc-tienda-confianza svg { width: 16px; height: 16px; color: var(--mc-acento); }

/* La asesora: una tarjeta más del anaquel, con una persona en lugar de un producto */
.mc-asesora-foto { overflow: hidden; }
.mc-vitrina.mc-asesora-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.mc-asesora .mc-tarjeta-nombre { font-weight: 700; }
.mc-asesora-texto { padding: 0 var(--mc-e2); margin-top: calc(-1 * var(--mc-e1)); font-size: 13px; line-height: 1.4; color: var(--mc-texto-2); }
.mc-asesora .mc-tarjeta-pie { padding: 0; }
.mc-asesora .mc-boton { width: 100%; min-height: 44px; padding: 0 var(--mc-e3); font-size: 14px; }

/* ---- Catálogo: dónde estás, categorías, filtros y rejilla, juntos ---- */
.mc-tienda-catalogo { display: flex; flex-direction: column; gap: var(--mc-e4); padding-top: var(--mc-e4); }
.mc-tienda-catalogo .mc-productos { margin-top: var(--mc-e2); }
.mc-tienda-cabeza { display: flex; flex-direction: column; gap: var(--mc-e3); }
.mc-tienda-titulo { font-size: clamp(34px, 1.3rem + 2vw, 52px); max-width: 18ch; }
/* El foco lo recibe al cambiar de categoría sin recargar (para lectores de pantalla); no se dibuja marco. */
.mc-tienda-titulo:focus { outline: none; }
.mc-tienda-cabeza .mc-lede { max-width: 46ch; }
.mc-tienda-intro, .mc-tienda-titulos { display: flex; flex-direction: column; gap: var(--mc-e3); min-width: 0; }
.mc-tienda-intro { gap: var(--mc-e4); }
.mc-tienda-buscar { display: flex; align-items: center; gap: var(--mc-e2); padding: var(--mc-e1) var(--mc-e2) var(--mc-e1) var(--mc-e4); border-radius: var(--mc-r-pildora); margin: 0; min-width: 0; }
.mc-tienda-buscar input[type="search"] { flex: 1; width: 100%; min-width: 0; margin: 0; padding: 0; height: 44px; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; font: 400 15px var(--mc-fuente); color: var(--mc-tinta); }
.mc-tienda-buscar input::placeholder { color: var(--mc-texto-3); opacity: 1; }
.mc-tienda-buscar button { flex: none; }
.mc-tienda-categorias { display: flex; align-items: center; gap: var(--mc-e3); min-width: 0; }
.mc-tienda .mc-tienda-chips { flex: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto; margin: 0; padding: var(--mc-e2) 0; gap: var(--mc-e3); -webkit-mask-image: none; mask-image: none; }
.mc-tienda .mc-chip.mc-pastilla { flex: none; gap: var(--mc-e2); min-height: 44px; padding: var(--mc-e3) var(--mc-e4); font-size: 14px; font-weight: 600; white-space: nowrap; }
.mc-tienda-chips small { color: var(--mc-texto-3); font-size: 13px; font-weight: 500; }
.mc-tienda-chips .mc-activo small { color: rgba(255,255,255,.72); }
.mc-tienda-mas-categorias { display: none; }
.mc-migas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mc-e2); font-size: 13px; font-weight: 600; color: var(--mc-texto-3); }

/* La categoría activa se marca con tinta: es "estás aquí", no un botón de acción. */
.mc-mundo .mc-chip.mc-activo { background: var(--mc-tinta) !important; color: #fff !important; box-shadow: none !important; }
.mc-mundo .mc-chip.mc-activo:hover { color: #fff !important; }
/* Con la pieza que se desliza, el relleno es de ella (no de la píldora). */
.mc-mundo .mc-con-guia .mc-chip.mc-activo { background: transparent !important; transition: color .3s ease .1s; }
.mc-tienda-catalogo.mc-cargando > :not(.mc-tienda-categorias):not(.mc-tienda-cabeza) { opacity: .35; transition: opacity .2s ease; }
.mc-tienda-subchips { margin-top: calc(-1 * var(--mc-e2)); }
.mc-tienda-subchips .mc-chip { display: inline-flex; align-items: center; min-height: 44px; padding: var(--mc-e2) var(--mc-e3); font-size: 13px; box-shadow: inset 0 0 0 1px rgba(22,21,20,.14); }

/* El estante se desliza solo a petición de la persona. */
.mc-tienda-pedidos { display: flex; flex-direction: column; gap: var(--mc-e4); margin-top: var(--mc-e4); min-width: 0; }
.mc-tienda-pedidos .mc-cabeza { flex-wrap: wrap; }
.mc-tienda-pedidos-control { display: flex; align-items: center; gap: var(--mc-e2); margin-left: auto; }
.mc-tienda a.mc-enlace { min-height: 44px; color: var(--mc-acento); }
.mc-tienda-pedidos-control .mc-icono { flex: none; }
.mc-tienda-pedidos + .mc-tienda-barra { margin-top: var(--mc-e4); }
.mc-tienda button:disabled { opacity: .45; cursor: default; }
.mc-tienda-estante { --mc-estante-gap: var(--mc-e3); display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - var(--mc-estante-gap)) / 2); gap: var(--mc-estante-gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: var(--mc-e3) 0 var(--mc-e5); margin: calc(-1 * var(--mc-e3)) 0 calc(-1 * var(--mc-e3)); }
.mc-tienda-estante::-webkit-scrollbar { display: none; }
.mc-tienda-estante > .mc-tarjeta { scroll-snap-align: start; min-width: 0; }
.mc-tienda-estante:focus-visible { outline: 2px solid var(--mc-acento); outline-offset: var(--mc-e1); }

/* ---- Barra: cuántos hay, precio y orden ---- */
.mc-tienda-barra {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mc-e3);
  margin: 0; padding-top: var(--mc-e3); border-top: 1px solid var(--mc-filete);
}
.mc-tienda-cuenta { margin: 0; }
.mc-tienda-cuenta .mc-nota { font-size: 16px; font-weight: 500; white-space: nowrap; }
.mc-tienda-selectores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mc-e2); width: 100%; }
.mc-selector { position: relative; display: flex; align-items: center; min-width: 0; border-radius: var(--mc-r-pildora); }
.mc-selector:focus-within { outline: 2px solid var(--mc-acento); outline-offset: 2px; }
/* El tema da borde, fondo y altura a todos los <select>: aquí manda el material. */
.mc-mundo .mc-selector select {
  -webkit-appearance: none; appearance: none; width: 100%; min-width: 0; height: 44px; margin: 0;
  border: 0 !important; border-radius: inherit !important; background: transparent !important; box-shadow: none !important; outline: none;
  padding: 0 var(--mc-e5) 0 var(--mc-e4) !important; font: 600 14px/44px var(--mc-fuente) !important; color: var(--mc-tinta) !important;
  cursor: pointer; text-overflow: ellipsis; white-space: nowrap;
}
.mc-selector-flecha { position: absolute; right: var(--mc-e3); pointer-events: none; color: var(--mc-texto-2); }

/* ---- Tarjeta: la otra mitad del nombre, o "agotado" ---- */
.mc-tarjeta-detalle {
  padding: 0 var(--mc-e2); margin-top: calc(-1 * var(--mc-e1)); font-size: 13px; line-height: 1.35; color: var(--mc-texto-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mc-tarjeta-detalle.mc-agotado { color: var(--mc-texto-2); font-weight: 600; }
.mc-tienda .mc-tarjeta { min-width: 0; }
.mc-tienda .mc-tarjeta-nombre { font-weight: 700; letter-spacing: -.03em; }
.mc-tienda .mc-estrellas { font-size: 12px; }
.mc-tienda .mc-tarjeta-pie { gap: var(--mc-e2); }
.mc-tienda .mc-tarjeta-pie .mc-icono { flex: none; }
.mc-tienda .mc-precio { min-width: 0; font-size: 14px; }
.mc-tienda .mc-precio .woocommerce-Price-amount { white-space: nowrap; }
.mc-tienda .mc-precio del { display: block; }
.mc-tienda .mc-tienda-opciones { font-weight: 600; }
.mc-tienda-paquetes { grid-column: span 2; flex-direction: row; align-items: stretch; gap: var(--mc-e3); min-width: 0; }
.mc-tienda-paquetes-texto { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: var(--mc-e3); min-width: 0; padding: var(--mc-e3) 0 var(--mc-e3) var(--mc-e2); }
.mc-tienda-paquetes-texto .mc-h2 { font-size: clamp(20px, 1rem + 1vw, 28px); }
.mc-tienda-paquetes-texto .mc-rotulo, .mc-tienda-paquetes-texto .mc-enlace { color: var(--mc-acento); }
.mc-tienda-paquetes > .mc-vitrina { width: 45%; flex: none; min-height: 210px; }
.mc-tienda-paquetes .mc-enlace { font-size: 14px; font-weight: 600; line-height: 1.4; }

/* ---- Páginas ---- */
.mc-paginas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--mc-e2); padding-top: var(--mc-e3); }
.mc-tienda-paginacion { display: flex; flex-direction: column; align-items: center; padding-top: var(--mc-e4); }
.mc-tienda-con-fetch .mc-paginas { display: none; }
.mc-tienda-cargar { text-align: center; }
.mc-tienda-cargar[aria-disabled="true"] { opacity: .6; cursor: wait; }
.mc-mundo .mc-paginas .page-numbers {
  box-sizing: border-box; min-width: 44px; height: 44px; padding: 0 var(--mc-e3); display: inline-grid; place-items: center;
  border-radius: var(--mc-r-pildora); font-size: 15px; font-weight: 600; line-height: 1;
  background: rgba(255,255,255,.5); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}
.mc-mundo .mc-paginas a.page-numbers:hover { background: rgba(255,255,255,.8); }
.mc-mundo .mc-paginas .page-numbers.current { background: var(--mc-tinta); color: #fff; box-shadow: none; }
.mc-mundo .mc-paginas .page-numbers.dots { min-width: 0; padding: 0 var(--mc-e1); background: transparent; box-shadow: none; }

/* ---- Sin resultados ---- */
.mc-vacio { padding: var(--mc-e6) var(--mc-e4); display: flex; flex-direction: column; align-items: flex-start; gap: var(--mc-e3); }
.mc-vacio .mc-boton { margin-top: var(--mc-e2); }

/* Avisos de WooCommerce (p. ej. "se añadió al carrito" sin JavaScript) */
.mc-tienda .woocommerce-notices-wrapper:empty { display: none; }

@media (min-width: 768px) {
  .mc-tienda-selectores { display: flex; width: auto; }
  .mc-mundo .mc-selector select { min-width: 190px; }
}

@media (min-width: 1024px) {
  .mc-tienda { --mc-alto-amanecer: 900px; --mc-halo-ancho: 760px; --mc-halo-alto: 560px; --mc-luz-radio: 420px; }
  .mc-tienda-catalogo { padding-top: var(--mc-e5); }
  .mc-tienda-intro { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: var(--mc-e5); }
  .mc-tienda-titulos { flex: 1; }
  .mc-tienda-buscar { flex: 0 0 360px; }
  .mc-tienda-mas-categorias { display: inline-flex; align-items: center; gap: var(--mc-e2); min-height: 44px; }
  .mc-tienda-pedidos { margin-top: var(--mc-e5); }
  .mc-tienda-estante { --mc-estante-gap: var(--mc-e4); grid-auto-columns: calc((100% - 3 * var(--mc-estante-gap)) / 4); }
  .mc-tienda .mc-precio { font-size: 16px; }
  .mc-tienda .mc-estrellas { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-tienda *, .mc-tienda *::before, .mc-tienda *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Ajustes de la usuaria (30-sep): sin marcos azules; foco del buscador como luz suave del cristal. */
.mc-tienda-titulo:focus, .mc-tienda-titulo:focus-visible { outline: none !important; box-shadow: none !important; }
.mc-tienda-buscar input[type="search"]:focus, .mc-tienda-buscar input[type="search"]:focus-visible { outline: none !important; box-shadow: none !important; -webkit-appearance: none; appearance: none; }
.mc-tienda-buscar:focus-within { box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), inset 0 1px 0 #fff, 0 0 0 4px rgba(31,116,128,.14), 0 21px 44px -24px rgba(22,21,20,.3); }
/* Píldoras: se difuminan en las orillas como el carrusel de la portada (sin corte seco). */
.mc-tienda .mc-tienda-chips { --mc-difumina: 34px; padding-inline: var(--mc-difumina); margin-inline: calc(-1 * var(--mc-difumina)); scroll-padding-inline: var(--mc-difumina);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--mc-difumina), #000 calc(100% - var(--mc-difumina)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--mc-difumina), #000 calc(100% - var(--mc-difumina)), transparent 100%); }
/* Buscador: cristal limpio (sin sombra larga ni degradado); al enfocarlo, solo un filo jade. */
.mc-tienda-buscar, .mc-tienda-buscar:focus-within { background: rgba(255,255,255,.42); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(22,21,20,.04); }
.mc-tienda-buscar:focus-within { box-shadow: inset 0 0 0 1px rgba(31,116,128,.35), inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(22,21,20,.04); }
/* A la derecha la fila termina antes de «Más» y se desvanece con más espacio. */
.mc-tienda .mc-tienda-chips { margin-inline-end: 0; padding-inline-end: 0; scroll-padding-inline-end: 89px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--mc-difumina), #000 calc(100% - 89px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--mc-difumina), #000 calc(100% - 89px), transparent 100%); }
/* Orillas según dónde va la fila: nítida en el extremo al que ya se llegó. */
.mc-tienda .mc-tienda-chips { --mc-izq: var(--mc-difumina); --mc-der: 89px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--mc-izq), #000 calc(100% - var(--mc-der)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--mc-izq), #000 calc(100% - var(--mc-der)), transparent 100%); }
.mc-tienda .mc-tienda-chips.mc-al-inicio { --mc-izq: 0px; }
.mc-tienda .mc-tienda-chips.mc-al-final { --mc-der: 0px; }

/* Los más pedidos: aire para que la sombra de las tarjetas no se corte (la fila tiene scroll y recorta). */
.mc-tienda-estante { padding: var(--mc-e3) 21px 89px; margin: calc(-1 * var(--mc-e3)) -21px calc(-89px + var(--mc-e3)); scroll-padding-inline: 21px; }