/* ============================================================
   FEED DE PRODUCTO — Bancas de Camarin  ·  namespace .mob-
   Ancho de contenido: 1200px
   Card: proporcion exacta del Figma (425x526) escalada a 280x347

   Estructura del diseno original, sin cambios. Las declaraciones
   de token (--mob-*) y TODAS las media queries las emite
   Mob_Feed_CSS::build() como inline style detras de esta hoja,
   para conservar el orden de cascada exacto del diseno.
   ============================================================ */

.mob-feed,
.mob-feed *,
.mob-feed *::before,
.mob-feed *::after { box-sizing: border-box !important; }

.mob-feed {
  font-family: var(--mob-font) !important;
  background: var(--mob-white) !important;
  display: block !important;
  width: 100% !important;
  max-width: var(--mob-content) !important;
  margin: 0 auto !important;
  padding: 0 var(--mob-side) !important;
  -webkit-font-smoothing: antialiased;
}

/* [mob_cross_selling]: sin el tope de 1200px del diseno original. El feed y
   el carrusel de relacionados viven dentro del layout que ya tiene ese ancho
   de contenido; el cross-selling del carrito va suelto en la seccion de
   Elementor que se elija, de cualquier ancho, asi que tiene que llenarla en
   vez de quedar centrado y recortado a 1200px dentro de ella. */
.mob-feed.mob-cross {
  max-width: none !important;
  margin: 0 !important;
}

/* ---------- Encabezado: 12 · MODELOS DISPONIBLES ---------- */
.mob-feed__head {
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 0 var(--mob-head-mb) !important;
}

.mob-feed__count {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--mob-count-w) !important;
  height: var(--mob-count-h) !important;
  border-radius: var(--mob-r-pill) !important;
  background: var(--mob-navy) !important;
  color: var(--mob-white) !important;
  font-weight: 900 !important;
  font-size: var(--mob-fz-count) !important;
  line-height: 1 !important;
  letter-spacing: var(--mob-ls-count) !important;
  text-indent: var(--mob-ls-count) !important;
  text-transform: uppercase !important;
}

.mob-feed__label {
  flex: 0 0 auto !important;
  margin: 0 var(--mob-label-mr) 0 var(--mob-label-ml) !important;
  color: var(--mob-navy) !important;
  font-weight: 900 !important;
  font-size: var(--mob-fz-label) !important;
  line-height: 1 !important;
  letter-spacing: var(--mob-ls-label) !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.mob-feed__rule {
  flex: 1 1 30px !important;
  min-width: 20px !important;
  height: var(--mob-rule-h) !important;
  background: var(--mob-rule) !important;
}

/* ---------- Grilla ---------- */
.mob-feed__grid {
  display: grid !important;
  grid-template-columns: repeat(var(--mob-cols), minmax(0, 1fr)) !important;
  column-gap: var(--mob-col-gap) !important;
  row-gap: var(--mob-row-gap) !important;
  padding: 0 !important;
  align-items: stretch !important;
}

/* ---------- Card ---------- */
.mob-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  background: var(--mob-white) !important;
  border: var(--mob-card-bw) solid var(--mob-border) !important;
  border-radius: var(--mob-r-card) !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Imagen: proporcion 395/286, recortada */
.mob-card__media {
  flex: 0 0 auto !important;
  margin: var(--mob-inset) var(--mob-inset) 0 !important;
  aspect-ratio: var(--mob-ratio) !important;
  min-height: 50px !important;
  border-radius: var(--mob-r-media) !important;
  background: var(--mob-media-bg) !important;
  overflow: hidden !important;
}
/* El enlace opcional no debe alterar la caja: la imagen sigue midiendo 100%
   contra .mob-card__media, no contra el <a>. */
.mob-card__media a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  text-decoration: none !important;
  border: 0 !important;
}
.mob-card__media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* Titulo — Nunito Bold uppercase */
.mob-card__title {
  flex: 0 0 auto !important;
  margin: var(--mob-gap-title) var(--mob-pad) 0 !important;
  padding: 0 !important;
  color: var(--mob-navy) !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  font-size: var(--mob-fz-title) !important;
  line-height: var(--mob-line) !important;
  height: var(--mob-line) !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* El enlace opcional hereda todo: el recorte con puntos suspensivos lo sigue
   haciendo el h3, asi que el <a> se queda en linea. */
.mob-card__title a {
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-decoration: none !important;
  background: none !important;
}

/* Precio — ExtraBold + "+ IVA" */
.mob-card__price {
  flex: 0 0 auto !important;
  margin: var(--mob-gap-price) var(--mob-pad) 0 !important;
  padding: 0 !important;
  height: var(--mob-line) !important;
  line-height: var(--mob-line) !important;
  letter-spacing: var(--mob-ls-price) !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
.mob-card__amount {
  color: var(--mob-navy) !important;
  font-weight: 800 !important;
  font-size: var(--mob-fz-price) !important;
}
.mob-card__iva {
  color: var(--mob-blue-soft) !important;
  font-weight: 800 !important;
  font-size: var(--mob-fz-iva) !important;
  margin-left: var(--mob-iva-ml) !important;
}

/* Boton — #2E9BD6
   El "Ver carrito" que aparece tras anadir comparte este mismo bloque, asi
   que usa exactamente los mismos tokens del panel. .added_to_cart entra en la
   lista como red de seguridad: si algun otro plugin dispara el handler de
   WooCommerce, su enlace hereda el mismo aspecto en vez de salir como texto
   suelto del tema. */
.mob-card__btn,
.mob-card__view-cart,
.mob-card .added_to_cart {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--mob-btn-gap) !important;
  margin: var(--mob-gap-btn) var(--mob-pad) var(--mob-pad-bottom) !important;
  height: var(--mob-btn-h) !important;
  padding: 0 8px !important;
  border-radius: var(--mob-r-btn) !important;
  background: var(--mob-blue) !important;
  color: var(--mob-white) !important;
  font-family: inherit !important;
  font-weight: 800 !important;
  font-size: var(--mob-fz-btn) !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  border: 0 !important;
  cursor: pointer !important;
  filter: none !important;
  transition: background-color .2s ease !important;
}
/* "Ver carrito": mismo boton, centrado justo debajo del de anadir. */
.mob-card__view-cart,
.mob-card .added_to_cart {
  margin: 0 var(--mob-pad) var(--mob-pad-bottom) !important;
  text-transform: none !important;
  font-style: normal !important;
  width: auto !important;
  float: none !important;
}
/* .wc-forward suele traer una flecha ::after del tema. */
.mob-card .added_to_cart::after,
.mob-card .added_to_cart::before { content: none !important; display: none !important; }

/* Al aparecer el segundo boton, el primero cede su margen inferior al hueco:
   asi el alto total de la card no cambia y la fila de la grilla no salta. */
.mob-card__btn:has(+ .mob-card__view-cart),
.mob-card__btn:has(+ .added_to_cart) {
  /* El valor de respaldo cubre el caso de un CSS cacheado de una version
     anterior, donde el token aun no existia y el margen caia a 0. */
  margin-bottom: var(--mob-gap-view, 10px) !important;
}

.mob-card__btn:hover,
.mob-card__view-cart:hover,
.mob-card .added_to_cart:hover { background: var(--mob-blue-hover) !important; }

.mob-card__btn:focus-visible,
.mob-card__view-cart:focus-visible,
.mob-card .added_to_cart:focus-visible { outline: 3px solid var(--mob-navy) !important; outline-offset: 2px !important; }

/* Estados del add-to-cart AJAX. Sin marcado extra: el spinner es un
   ::after, asi que la estructura del diseno no cambia. */
.mob-card__btn.is-loading { pointer-events: none !important; cursor: wait !important; }
.mob-card__btn.is-added   { background: var(--mob-navy) !important; }

/* Mientras carga, el "+" cede su sitio a un spinner del mismo tamano: el
   boton conserva exactamente el mismo ancho y alto. */
.mob-card__btn.is-loading .mob-card__plus { display: none !important; }

.mob-card__btn.is-loading::after {
  content: "" !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  width: var(--mob-icon) !important;
  height: var(--mob-icon) !important;
  border-radius: 50% !important;
  /* La segunda declaracion gana donde haya color-mix y respeta el blanco
     del panel; la primera queda de respaldo. */
  border: 2px solid rgba(255, 255, 255, .4) !important;
  border: 2px solid color-mix(in srgb, var(--mob-white) 40%, transparent) !important;
  border-top-color: var(--mob-white) !important;
  animation: mob-feed-spin .6s linear infinite !important;
}

@keyframes mob-feed-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .mob-card__btn.is-loading::after { animation: none !important; }
  .mob-card__btn.is-loading { opacity: .65 !important; }
}

.mob-card__plus {
  flex: 0 0 auto !important;
  width: var(--mob-icon) !important;
  height: var(--mob-icon) !important;
  color: var(--mob-white) !important;
}

/* ============================================================
   RELACIONADOS — carrusel  ·  [mob_relacionados]
   Diseno: relacionados.jpg

   La seccion lleva las DOS clases (.mob-feed .mob-rel) a
   proposito: asi la card, sus tokens y todas las media queries
   del feed valen aqui sin duplicar una sola regla. Lo unico
   propio es el encabezado —titulo + flechas— y la pista, que
   sustituye a la grilla.

   Las cards visibles a la vez salen de --mob-cols, el mismo
   token que cuenta las columnas del feed. Por eso el carrusel
   ya responde a los breakpoints (4 / 3 / 2 / 2) sin CSS extra.
   ============================================================ */

/* ---------- Encabezado ---------- */
.mob-rel__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  margin: 0 0 var(--mob-rel-head-mb) !important;
  padding: 0 var(--mob-rel-head-px) !important;
}

.mob-rel__title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--mob-navy) !important;
  font-family: inherit !important;
  font-weight: 900 !important;
  font-size: var(--mob-rel-fz-title) !important;
  line-height: 1.2 !important;
  letter-spacing: var(--mob-rel-ls-title) !important;
  text-transform: uppercase !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.mob-rel__nav {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--mob-rel-arrow-gap) !important;
}

/* Sin JS el carrusel sigue desplazandose con el dedo y con la barra, asi
   que las flechas solo se ocultan cuando el panel lo pide y ademas no hay
   nada que desplazar (la clase la pone mob-rel.js). */
.mob-rel__nav.is-hidden { display: none !important; }

/* ---------- Flechas ---------- */
.mob-rel__arrow,
.mob-rel__arrow:hover,
.mob-rel__arrow:focus,
.mob-rel__arrow:active {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--mob-rel-arrow-size) !important;
  height: var(--mob-rel-arrow-size) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: var(--mob-rel-arrow-r) !important;
  background: var(--mob-rel-arrow-bg) !important;
  background-image: none !important;
  color: var(--mob-rel-arrow-color) !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  filter: none !important;
  transition: background-color .2s ease, opacity .2s ease !important;
}

/* Detras de la regla de estados, con la que empata en especificidad. */
.mob-rel__arrow:hover { background: var(--mob-rel-arrow-bg-hover) !important; }

.mob-rel__arrow[disabled] {
  opacity: var(--mob-rel-arrow-dim) !important;
  cursor: default !important;
  background: var(--mob-rel-arrow-bg) !important;
}

.mob-rel__arrow:focus-visible {
  outline: 3px solid var(--mob-navy) !important;
  outline-offset: 2px !important;
}

.mob-rel__arrow svg {
  display: block !important;
  width: var(--mob-rel-arrow-icon) !important;
  height: var(--mob-rel-arrow-icon) !important;
  color: inherit !important;
}

/* ---------- Pista ---------- */
.mob-rel__track {
  display: grid !important;
  grid-auto-flow: column !important;
  /* Mismo ancho de card que en la grilla del feed: reparte el ancho visible
     entre --mob-cols columnas descontando los huecos. */
  grid-auto-columns: calc((100% - (var(--mob-cols) - 1) * var(--mob-col-gap)) / var(--mob-cols)) !important;
  column-gap: var(--mob-col-gap) !important;
  align-items: stretch !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  overscroll-behavior-x: contain !important;
  /* El respiro vertical es neto cero: solo evita que overflow recorte el
     anillo de foco de los botones de las cards. */
  padding: 4px 0 !important;
  margin: -4px 0 !important;
  /* La barra de scroll no esta en el diseno; el desplazamiento va por las
     flechas y por gesto tactil. */
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.mob-rel__track::-webkit-scrollbar { display: none !important; }

.mob-rel .mob-card {
  scroll-snap-align: start !important;
  min-width: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .mob-rel__track { scroll-behavior: auto !important; }
}

/* ============================================================
   BUSQUEDA Y ARCHIVO — solo con [mob_feed context="auto"]
   Sin diseno de origen: paginador y aviso "sin resultados",
   con la paleta y tipografia del feed (mismos tokens navy/azul/
   borde/radio de boton), no una nueva.
   ============================================================ */

/* ---------- Paginador ---------- */
.mob-feed__pager {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: var(--mob-pager-gap) !important;
  margin: var(--mob-pager-mt) 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.mob-feed__pager-item {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: var(--mob-pager-size) !important;
  height: var(--mob-pager-size) !important;
  padding: 0 6px !important;
  margin: 0 !important;
  border-radius: var(--mob-r-btn) !important;
  border: var(--mob-card-bw) solid var(--mob-border) !important;
  background: var(--mob-white) !important;
  color: var(--mob-navy) !important;
  font-family: inherit !important;
  font-weight: 800 !important;
  font-size: var(--mob-pager-fz) !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease !important;
}

a.mob-feed__pager-item:hover,
a.mob-feed__pager-item:focus-visible {
  background: var(--mob-blue) !important;
  border-color: var(--mob-blue) !important;
  color: var(--mob-white) !important;
}

a.mob-feed__pager-item:focus-visible {
  outline: 3px solid var(--mob-navy) !important;
  outline-offset: 2px !important;
}

.mob-feed__pager-item.current {
  background: var(--mob-navy) !important;
  border-color: var(--mob-navy) !important;
  color: var(--mob-white) !important;
  cursor: default !important;
}

.mob-feed__pager-item.dots {
  border-color: transparent !important;
  background: none !important;
  color: var(--mob-navy) !important;
  cursor: default !important;
}

/* ---------- Sin resultados ---------- */
.mob-feed--empty { text-align: center !important; }

.mob-feed__empty {
  padding: var(--mob-row-gap) 0 !important;
}

.mob-feed__empty-title {
  margin: 0 !important;
  color: var(--mob-navy) !important;
  font-weight: 900 !important;
  font-size: var(--mob-fz-label) !important;
  letter-spacing: var(--mob-ls-label) !important;
  text-transform: uppercase !important;
}

.mob-feed__empty-text {
  margin: var(--mob-gap-price) 0 0 !important;
  color: var(--mob-blue-soft) !important;
  font-weight: 700 !important;
  font-size: var(--mob-fz-price) !important;
}

/* Lector de pantalla: confirmacion del add-to-cart */
.mob-feed__sr {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important;
  white-space: nowrap !important; border: 0 !important;
}