/* TINTIN — Página de Colecciones estable y configurable */
.tt-collections-page {
  background: var(--color-background-page, #FFF6FA) !important;
  color: var(--color-text-primary, #2B2B2B) !important;
  overflow-x: clip;
}

.tt-collections-page:not(.tt-collections-runtime-ready) *,
.tt-collections-page:not(.tt-collections-runtime-ready) *::before,
.tt-collections-page:not(.tt-collections-runtime-ready) *::after {
  transition-duration: 0s !important;
  animation-delay: 0s !important;
}

.tt-collections-page .tt-page-hero,
.tt-collections-page .tt-colls-page-section,
.tt-collections-page .tt-products-section {
  background: var(--color-background-page, #FFF6FA) !important;
  background-image: none !important;
}

/* La reserva genérica de content-visibility para <section> (ver
   calidad-interfaz.css) asume 620px de alto. Estas dos secciones son mucho más
   altas de verdad (grilla de colecciones + destacados), así que al hacer
   scroll la página "saltaba" varios cientos de px de golpe cuando cada
   una pasaba de reservada a renderizada. Se desactiva la reserva acá,
   igual que ya se hizo antes para las tarjetas angostas (ver
   experiencia-interfaz.css). */
.tt-collections-page .tt-colls-page-section,
.tt-collections-page .tt-products-section {
  content-visibility: visible !important;
  contain-intrinsic-size: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

.tt-collections-page .tt-page-hero {
  border-bottom: 1px solid var(--color-border-primary, #F1E4E7);
}

.tt-collections-page .tt-page-hero-title,
.tt-collections-page .tt-section-title,
.tt-collections-page .tt-coll-page-name,
.tt-collections-page .tt-product-name {
  color: var(--color-text-title, #2B2B2B) !important;
}

.tt-collections-page .tt-section-sub {
  color: var(--color-brand-primary, #AD3F67) !important;
}

.tt-collections-page .tt-page-hero-sub,
.tt-collections-page .tt-coll-page-desc,
.tt-collections-page .tt-products-intro,
.tt-collections-page .tt-inline-support-link,
.tt-collections-page .tt-collections-state {
  color: var(--color-text-secondary, #7B6F72) !important;
}

.tt-collections-page .tt-page-hero-sub {
  max-width: 680px;
  line-height: 1.75;
}

.tt-collections-page .tt-colls-page-grid,
.tt-collections-page .tt-products-grid {
  align-items: stretch;
  min-height: 260px;
}

/* Reserva el alto de los esqueletos para que la respuesta en vivo no desplace
   las secciones siguientes cuando el resultado sea vacío o más corto. */
.tt-collections-page .tt-colls-page-grid {
  min-height: 390px;
}

.tt-collections-page .tt-products-grid {
  min-height: 360px;
}

.tt-collections-page .tt-coll-page-card,
.tt-collections-page .tt-product-card {
  height: 100%;
  background: var(--color-background-surface, #FFFFFF) !important;
  border-color: var(--color-card-border, #F1E4E7) !important;
  color: var(--color-text-primary, #2B2B2B) !important;
  box-shadow: 0 8px 28px var(--color-card-shadow, rgba(212,106,138,.10));
}

/* Los placeholders son efímeros: aislarlos con contain/translateZ hace que
   Chromium atribuya su reemplazo fuera de pantalla como un shift en (0,0). */
.tt-collections-page .tt-skeleton-card {
  contain: none;
  transform: none;
  backface-visibility: visible;
}

.tt-collections-page .tt-coll-page-img,
.tt-collections-page .tt-product-img,
.tt-collections-page .tt-skeleton-img,
.tt-collections-page .tt-skeleton-line {
  background-color: var(--color-skeleton-base, #F1E4E7) !important;
  background-image: none !important;
}

.tt-collections-page .tt-coll-page-img {
  aspect-ratio: 4 / 3;
  height: auto;
  min-height: 280px;
  cursor: pointer;
}

.tt-collections-page .tt-coll-page-img img,
.tt-collections-page .tt-product-img img {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-background-surface-soft, #FFF9FC) !important;
  object-fit: contain;
}

.tt-collections-page .tt-coll-page-img:focus-visible,
.tt-collections-page .tt-product-img[data-product-href]:focus-visible,
.tt-collections-page a:focus-visible,
.tt-collections-page button:focus-visible {
  outline: 3px solid var(--color-button-primary-focus-ring, rgba(173,63,103,.24));
  outline-offset: 3px;
}

.tt-collections-page .tt-coll-page-body {
  gap: 6px;
}

.tt-collections-page .tt-coll-page-initial {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--color-badge-background, #FDECF2);
  color: var(--color-badge-text, #AD3F67) !important;
  font-size: 1.4rem;
  line-height: 1;
}

.tt-collections-page .tt-coll-page-name {
  margin-bottom: 0;
  line-height: 1.45;
}

.tt-collections-page .tt-coll-page-count {
  display: inline-flex;
  width: fit-content;
  min-height: 28px;
  align-items: center;
  margin-bottom: 4px;
  padding: 4px 10px;
  border: 1px solid var(--color-card-border, #F1E4E7);
  border-radius: 999px;
  background: var(--color-badge-background, #FDECF2);
  color: var(--color-badge-text, #AD3F67) !important;
  font-size: .7rem;
  font-weight: 800;
}

.tt-collections-page .tt-coll-page-body > .tt-btn,
.tt-collections-page .tt-collections-actions .tt-btn,
.tt-collections-page .tt-collections-state .tt-btn {
  min-height: 44px;
  background: var(--color-button-primary-background, #AD3F67) !important;
  border-color: var(--color-button-primary-border, #AD3F67) !important;
  color: var(--color-button-primary-text, #FFFFFF) !important;
}

.tt-collections-page .tt-coll-page-body > .tt-btn {
  align-self: flex-start;
  margin-top: auto;
}

.tt-collections-page .tt-products-section {
  border-top: 1px solid var(--color-border-primary, #F1E4E7);
}

.tt-collections-page .tt-products-header {
  max-width: 680px;
  margin-inline: auto;
}

.tt-collections-page .tt-products-intro {
  max-width: 620px;
  margin: 10px auto 0;
  font-size: .88rem;
  line-height: 1.7;
}

.tt-collections-page .tt-product-img[data-product-href] {
  cursor: pointer;
}

.tt-collections-page .tt-collections-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
  text-align: center;
}

.tt-collections-page .tt-inline-support-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.tt-collections-page .tt-collections-state,
.tt-collections-runtime-state {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 230px;
  display: grid;
  place-items: center;
  padding: 36px 20px;
  border: 1.5px solid var(--color-card-border, #F1E4E7);
  border-radius: 18px;
  background: var(--color-background-surface, #FFFFFF) !important;
  color: var(--color-text-secondary, #7B6F72) !important;
  text-align: center;
}

.tt-collections-runtime-state strong {
  display: block;
  margin-bottom: 7px;
  color: var(--color-text-title, #2B2B2B);
  font-size: 16px;
}

#tt-collections-sync-state {
  width: min(1180px, calc(100% - 40px));
  min-height: 24px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  color: var(--color-text-secondary, #7B6F72);
  font: 700 11px/1.35 Montserrat;
}

#tt-collections-sync-state::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-border-success, #166534);
}

#tt-collections-sync-state[data-state="loading"]::before {
  background: var(--color-border-warning, #BF360C);
}

#tt-collections-sync-state[data-state="error"]::before,
#tt-collections-sync-state[data-state="offline"]::before {
  background: var(--color-border-error, #B8341F);
}

.tt-collections-page .tt-footer {
  background: var(--color-background-footer, #FFFFFF) !important;
  color: var(--color-text-primary, #2B2B2B) !important;
  border-top: 1px solid var(--color-border-primary, #F1E4E7);
}

.tt-collections-page .tt-footer a:not(.tt-footer-wa),
.tt-collections-page .tt-footer-col-title,
.tt-collections-page .tt-footer-bottom,
.tt-collections-page .tt-footer-tagline {
  color: var(--color-text-primary, #2B2B2B) !important;
}

@media (min-width: 1025px) {
  /* Estilo Apple: menos columnas, foto de colección más grande y protagonista. */
  .tt-collections-page .tt-colls-page-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
  }

  .tt-collections-page .tt-coll-page-img {
    min-height: 360px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .tt-collections-page .tt-colls-page-grid,
  .tt-collections-page .tt-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .tt-collections-page .tt-coll-page-img {
    min-height: 260px;
  }
}

@media (max-width: 768px) {
  .tt-collections-page {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  .tt-collections-page .tt-page-hero {
    padding: 36px 0 44px;
  }

  .tt-collections-page .tt-page-hero-title {
    font-size: clamp(1.9rem, 7vw, 2.8rem);
  }

  .tt-collections-page .tt-colls-page-grid,
  .tt-collections-page .tt-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .tt-collections-page .tt-colls-page-grid {
    min-height: 350px;
  }

  .tt-collections-page .tt-products-grid {
    min-height: 330px;
  }

  .tt-collections-page .tt-coll-page-body {
    padding: 18px;
  }

  #tt-collections-sync-state {
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .tt-collections-page .tt-page-hero {
    padding: 28px 0 36px;
  }

  .tt-collections-page .tt-colls-page-grid {
    grid-template-columns: 1fr;
  }

  .tt-collections-page .tt-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .tt-collections-page .tt-coll-page-img {
    min-height: 240px;
  }

  .tt-collections-page .tt-product-info {
    padding: 11px;
  }

  .tt-collections-page .tt-product-name {
    font-size: .72rem;
    letter-spacing: .04em;
  }
}

@media (max-width: 360px) {

  .tt-collections-page .tt-product-info {
    padding: 9px;
  }

  .tt-collections-page .tt-product-name {
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* #tt-loader queda afuera: su spinner es estado del sistema ("todavía
     estoy cargando"), no una animación decorativa — apagarlo lo deja
     congelado en vez de simplemente sobrio. */
  .tt-collections-page *:not(#tt-loader):not(#tt-loader *),
  .tt-collections-page *::before,
  .tt-collections-page *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .tt-collections-page #tt-loader .tt-loader-spinner::before,
  .tt-collections-page #tt-loader .tt-loader-spinner::after {
    animation-duration: 1.6s !important;
    animation-iteration-count: infinite !important;
  }
}

/* El contador reserva su lugar antes de tener el dato: ocupa el alto pero no
   se dibuja, para que al llegar los productos la tarjeta no crezca de golpe
   (era la fuente del salto de layout que medía el presupuesto de CLS). */
.tt-collections-page .tt-coll-page-count.is-pending {
  visibility: hidden;
}

/* El cuerpo de la tarjeta reserva su alto real desde el primer pintado.
   El esqueleto de carga traía una sola línea de 16px y la tarjeta real lleva
   inicial, nombre, contador, descripción y botón: al reemplazarse, cada
   tarjeta crecía de golpe. Ese salto medía 0.234 de CLS sobre un presupuesto
   de 0.1 y hacía fallar el CI de forma intermitente —en main pasaba sólo
   porque el reintento caía en otro camino—. Fijando el alto acá, los dos
   estados ocupan exactamente lo mismo y no hay nada que tunear a ojo. */
.tt-collections-page .tt-coll-page-body {
  min-height: 265px;
}

.tt-collections-page .tt-coll-page-card .tt-coll-page-initial.tt-skeleton-img {
  color: transparent;
}