/* La imagen aprobada vive en el HTML y se carga con prioridad alta. El loader
   puede seguir protegiendo el estado de la tienda, pero no se deja una capa
   rosa intermedia esperando una confirmación remota del hero. */
html.tt-initializing body.tt-home-premium{background:#FFF6FA!important}

.tt-home-premium{overflow-x:clip;background:#FFF6FA!important;min-height:100svh}
.tt-home-premium .container{width:min(100%,1280px)}

/* El header de desktop/tablet es fixed y, por eso, queda fuera del flujo:
   sin este margen, el hero arranca en y=0 y el header queda superpuesto
   sobre su parte superior. margin-top reserva ese espacio empujando TODO
   el hero hacia abajo (imagen, picture, media, contenido, botones) sin
   tocar su height/min-height — el hero conserva el alto completo que ya
   tenía (100svh/min-height de arriba) y el total pasa a ser altura del
   header + altura completa del hero, nunca menos.
   769px porque ahí es donde .tt-header deja de tener display:none (ver
   styles.css) — es el mismo corte que usan .tt-breadcrumb y .login-page
   para el mismo problema. --header-h es la única fuente de verdad (se
   define y redefine únicamente en styles.css); mobile no recibe ningún
   margen porque no usa este header. */
@media (min-width: 769px) {
  body.tt-home-premium .tt-hero {
    margin-top: var(--header-h);
  }
}

/* En tableta el header fijo ya queda reservado por el margen del hero.
   No sumar también el padding global del body: dejaba una franja vacía
   entre el header y el banner. */
@media (min-width: 768px) and (max-width: 1024px) {
  body.tt-home-premium {
    padding-top: 0 !important;
  }
}

/* Header y cookies de Inicio: fondos realmente sólidos. Estas reglas viven en
   la última hoja del home y usan selectores de alta especificidad para que ni
   el esquema publicado, ni estados de scroll, ni transparencias heredadas
   puedan volverlos translúcidos. */
html body.tt-home-premium #tt-header-desktop-tablet.tt-header,
html body.tt-home-premium #tt-header-desktop-tablet.tt-header.scrolled{
  background:#FFFFFF!important;
  background-color:#FFFFFF!important;
  opacity:1!important;
  filter:none!important;
  mix-blend-mode:normal!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border-bottom:1px solid #F1E4E7!important;
  box-shadow:0 2px 18px rgba(173,63,103,.10)!important;
}
html body.tt-home-premium #tt-privacy-consent.tt-privacy-consent{
  background:#FFFFFF!important;
  background-color:#FFFFFF!important;
  opacity:1!important;
  filter:none!important;
  mix-blend-mode:normal!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  isolation:isolate!important;
  border:1px solid rgba(173,63,103,.12)!important;
  box-shadow:0 24px 64px rgba(38,24,30,.14),0 2px 8px rgba(38,24,30,.05)!important;
}
html body.tt-home-premium #tt-privacy-consent .tt-privacy-btn-primary{
  background:var(--tt-accent,#AD3F67)!important;
  background-color:var(--tt-accent,#AD3F67)!important;
  border-color:var(--tt-accent,#AD3F67)!important;
  color:#FFFFFF!important;
  opacity:1!important;
}
html body.tt-home-premium #tt-privacy-consent .tt-privacy-btn-secondary{
  background:#FFFFFF!important;
  background-color:#FFFFFF!important;
  border-color:var(--tt-accent,#AD3F67)!important;
  color:var(--tt-accent,#AD3F67)!important;
  opacity:1!important;
}

/* El hero puede recibir PNG/WebP con transparencia desde el panel. Toda la
   cadena visual usa un respaldo sólido para que nunca se vea el contenido de
   atrás ni aparezcan zonas transparentes en desktop, tablet o mobile. */
.tt-home-premium .tt-hero,
.tt-home-premium .tt-hero-media,
.tt-home-premium .tt-hero-media picture,
.tt-home-premium .tt-hero-img{
  background:#FFF6FA!important;
  background-color:#FFF6FA!important;
}
/* No usar una foto de muestra detrás del <img>: si la imagen publicada tarda
   un frame en decodificar, esa segunda foto es el origen del parpadeo. */
.tt-home-premium .tt-hero-media{
  background-image:none!important;
}
/* El hero no tiene estados de entrada ni capas de respaldo visibles: la
   portada estática del HTML es la primera y única composición que se pinta. */
.tt-home-premium .tt-hero-media{
  visibility:visible!important;
  opacity:1!important;
}
.tt-home-premium .tt-hero-media picture{
  width:100%;
  height:100%;
  overflow:hidden;
}
/* El tamaño y la posición se leen de las variables que configura Super Admin
   para cada dispositivo. No se fija contain/cover acá: desktop, tablet y
   mobile deben respetar de forma independiente su selección publicada. */
body.tt-home-premium #tt-hero-img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:var(--tt-hero-fit-desktop,cover)!important;
  object-position:var(--tt-hero-pos-desktop,center center)!important;
  transform:scale(var(--tt-hero-scale-desktop,1))!important;
  transform-origin:var(--tt-hero-pos-desktop,center center)!important;
}
@media(max-width:1023px){
  body.tt-home-premium #tt-hero-img{
    object-fit:var(--tt-hero-fit-tablet,cover)!important;
    object-position:var(--tt-hero-pos-tablet,center center)!important;
    transform:scale(var(--tt-hero-scale-tablet,1))!important;
    transform-origin:var(--tt-hero-pos-tablet,center center)!important;
  }
}
@media(max-width:768px){
  body.tt-home-premium #tt-hero-img{
    object-fit:var(--tt-hero-fit-mobile,cover)!important;
    object-position:var(--tt-hero-pos-mobile,center center)!important;
    transform:scale(var(--tt-hero-scale-mobile,1))!important;
    transform-origin:var(--tt-hero-pos-mobile,center center)!important;
  }
}
/* El botón secundario del hero no puede depender de un token transparente:
   siempre se ve como botón real sobre cualquier foto. */
body.tt-home-premium .tt-hero-actions .tt-btn-outline{
  background:#FFFFFF!important;
  background-color:#FFFFFF!important;
  border-color:var(--tt-accent,#AD3F67)!important;
  color:var(--tt-accent,#AD3F67)!important;
  box-shadow:0 8px 24px rgba(38,24,30,.12)!important;
  opacity:1!important;
}
body.tt-home-premium .tt-hero-actions .tt-btn-outline:hover,
body.tt-home-premium .tt-hero-actions .tt-btn-outline:focus-visible{
  background:var(--tt-accent,#AD3F67)!important;
  background-color:var(--tt-accent,#AD3F67)!important;
  color:#FFFFFF!important;
}
.tt-home-premium .tt-trust-bar,
.tt-home-premium .section-sm,
.tt-home-premium .tt-collections-section,
.tt-home-premium .tt-products-section,
.tt-home-premium .tt-reviews-section,
.tt-home-premium .tt-footer{min-height:0}
.tt-home-premium .tt-trust-grid,.tt-home-premium .tt-collections-grid,.tt-home-premium #products-grid,.tt-home-premium .tt-reviews-grid{gap:clamp(14px,2.2vw,28px)}
.tt-home-premium .tt-collections-grid,
.tt-home-premium #products-grid{min-height:0}
.tt-home-premium .tt-collections-grid > .tt-coll-card{
  position:relative;
  z-index:1;
  pointer-events:auto;
  cursor:pointer;
}
.tt-home-premium .tt-collections-grid > .tt-coll-card > *{
  pointer-events:none;
}
.tt-home-premium [data-img-slot] img,.tt-home-premium .tt-coll-card-img img,.tt-home-premium .tt-card-img img{width:100%;height:100%;object-fit:contain}
.tt-home-premium .tt-editorial-img img,.tt-home-premium .tt-watch-feature-img img{object-fit:cover}
.tt-home-motion{opacity:0;transform:translateY(30px) scale(.985);filter:blur(6px);transition:opacity .62s ease,transform .62s cubic-bezier(.22,.61,.36,1),filter .62s ease;transition-delay:var(--tt-delay,0ms);will-change:opacity,transform,filter}
.tt-home-motion.is-visible{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
.tt-scroll-up .tt-home-motion:not(.is-visible){transform:translateY(-28px) scale(.985)}
.tt-home-motion.tt-home-hero{opacity:1;filter:blur(0);transform:none}
.tt-home-premium .tt-footer,.tt-home-premium .tt-footer *{color:#2B2B2B!important;opacity:1!important;text-shadow:none!important}
.tt-home-premium .tt-footer a{color:#2B2B2B!important;text-decoration-color:#AD3F67!important}
.tt-home-premium .tt-footer a:hover{color:#AD3F67!important}
.tt-home-premium .tt-footer a.tt-footer-wa,.tt-home-premium .tt-footer a.tt-footer-wa *{color:#fff!important;text-decoration-color:transparent!important}
.tt-home-premium .tt-footer a.tt-footer-wa:hover{color:#fff!important}
.tt-home-premium .tt-footer-col-title,.tt-home-premium .tt-footer-brand,.tt-home-premium .tt-footer-logo,.tt-home-premium .tt-footer h2,.tt-home-premium .tt-footer h3{color:#2B2B2B!important;font-weight:800!important;opacity:1!important}
.tt-home-premium .tt-footer-brand strong,.tt-home-premium .tt-footer-logo strong{font-weight:900!important;color:#2B2B2B!important}
@media(max-width:768px){.tt-home-premium .section{padding:56px 0}.tt-home-premium .section-sm{padding:42px 0}.tt-home-premium .tt-trust-grid,.tt-home-premium .tt-collections-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tt-home-motion{transform:translateY(22px) scale(.99)}}
@media(max-width:380px){.tt-home-premium .section{padding:44px 0}.tt-home-premium .section-sm{padding:34px 0}}
@media(max-height:520px) and (orientation:landscape){.tt-home-premium .tt-hero-content{padding-top:86px;padding-bottom:38px}}
@media(prefers-reduced-motion:reduce){.tt-home-motion,.tt-home-motion.is-visible{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}}

/* =============================================================
   PARTE 2B — continuidad visual completa del Inicio
   ============================================================= */

/* El combinador se oculta inline durante la primera carga de productos. Cuando
   Firestore responde, el contenido ya se renderiza, pero ese display:none podía
   quedar pegado para siempre. El Inicio conserva ahora la sección visible y deja
   que su estado de carga/vacío o sus tarjetas comuniquen la situación real. */
body.tt-home-premium #look-section{
  display:block!important;
}

/* Mientras la fuente real de colecciones responde, no dejamos un texto pequeño
   flotando dentro de una sección prácticamente vacía. El estado ocupa una
   superficie estable y legible; cuando llegan las colecciones, el renderer lo
   reemplaza por las tarjetas reales sin alterar navegación ni datos. */
body.tt-home-premium .tt-collections-grid:has(> .tt-phase4-collections-state){
  grid-template-columns:minmax(0,1fr)!important;
}
body.tt-home-premium .tt-collections-grid > .tt-phase4-collections-state{
  min-height:clamp(190px,24vw,300px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:clamp(24px,4vw,42px)!important;
  border:1px solid var(--color-card-border,#F1E4E7);
  border-radius:24px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,246,250,.96)),
    var(--color-background-surface,#FFFFFF);
  box-shadow:0 12px 34px rgba(173,63,103,.08);
  color:var(--color-text-secondary,#7B6F72)!important;
  font-size:.86rem!important;
  font-weight:600;
  line-height:1.6;
}
body.tt-home-premium .tt-collections-grid > .tt-phase4-collections-state--info::before{
  content:"";
  width:34px;
  height:34px;
  border:3px solid var(--color-progress-track,#F1E4E7);
  border-top-color:var(--color-progress-fill,#AD3F67);
  border-radius:50%;
  animation:tt-home-collections-spin .8s linear infinite;
}
body.tt-home-premium .tt-collections-grid > .tt-phase4-collections-state--error{
  border-color:color-mix(in srgb,var(--color-brand-primary,#AD3F67) 28%,#FFFFFF);
}
@keyframes tt-home-collections-spin{to{transform:rotate(360deg)}}

/* Las superficies remotas de Inicio mantienen el mismo ancho, radio y altura
   mínima para que Colecciones, Completá tu look y Productos no produzcan saltos
   bruscos cuando cambian de loading a contenido real. */
body.tt-home-premium #look-grid > .tt-home-runtime-state,
body.tt-home-premium #products-grid > .tt-home-runtime-state{
  min-height:clamp(190px,24vw,280px);
  box-shadow:0 12px 34px rgba(173,63,103,.07);
}

@media(max-width:768px){
  body.tt-home-premium .tt-collections-grid > .tt-phase4-collections-state,
  body.tt-home-premium #look-grid > .tt-home-runtime-state,
  body.tt-home-premium #products-grid > .tt-home-runtime-state{
    min-height:180px;
    border-radius:18px;
  }
}

@media(prefers-reduced-motion:reduce){
  body.tt-home-premium .tt-collections-grid > .tt-phase4-collections-state--info::before{
    animation:none;
  }
}

/* =============================================================
   JERARQUÍA HOME — recorrido visual y de compra
   El DOM conserva la lógica existente; estas reglas solo ordenan el peso
   visual de cada bloque y mantienen el mismo lenguaje en todos los viewports.
   ============================================================= */
body.tt-home-premium .tt-trust-bar {
  position: relative;
  z-index: 1;
  padding: clamp(18px, 2.4vw, 30px) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-card-border, #F1E4E7) 72%, transparent);
}

body.tt-home-premium .tt-trust-grid {
  max-width: 1120px;
  margin-inline: auto;
  align-items: stretch;
}

body.tt-home-premium .tt-trust-item {
  min-height: 84px;
  padding: 14px clamp(10px, 1.8vw, 22px);
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--color-card-border, #F1E4E7) 80%, transparent);
  border-radius: 0;
  box-shadow: none;
}

body.tt-home-premium .tt-trust-item:last-child { border-right: 0; }
body.tt-home-premium .tt-trust-icon { margin-bottom: 8px; }
body.tt-home-premium .tt-trust-title { font-size: .78rem; letter-spacing: .06em; }
body.tt-home-premium .tt-trust-desc { font-size: .72rem; line-height: 1.45; }

body.tt-home-premium .tt-collection-carousel {
  padding-block: clamp(58px, 7vw, 96px);
}

body.tt-home-premium #look-section {
  padding-block: clamp(54px, 7vw, 92px);
  background: var(--color-background-surface, #FFFFFF) !important;
  border-block: 1px solid color-mix(in srgb, var(--color-card-border, #F1E4E7) 70%, transparent);
}

body.tt-home-premium .tt-look-header,
body.tt-home-premium .tt-reviews-header {
  max-width: 680px;
  margin-inline: auto;
}

body.tt-home-premium .tt-editorial,
body.tt-home-premium .tt-watch-feature {
  max-width: 1180px;
  margin-inline: auto;
  border: 1px solid var(--color-card-border, #F1E4E7);
  border-radius: clamp(18px, 2vw, 28px);
  overflow: hidden;
  box-shadow: 0 16px 42px rgba(92, 37, 57, .07);
}

body.tt-home-premium .tt-home-random-products {
  background: linear-gradient(180deg, rgba(252,240,245,.72), rgba(255,255,255,.96));
  border-block: 1px solid color-mix(in srgb, var(--color-card-border, #F1E4E7) 70%, transparent);
}

body.tt-home-premium .tt-home-random-products-header { margin-bottom: clamp(22px, 3vw, 34px); }
body.tt-home-premium .tt-home-random-products-header .tt-section-desc { margin: 0 auto; text-align: center; }
body.tt-home-premium .tt-home-random-products-grid {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
  padding: 4px 4px 14px;
}
body.tt-home-premium .tt-home-random-products-grid > * { scroll-snap-align: start; min-width: 0; }
body.tt-home-premium .tt-home-random-products-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

body.tt-home-premium .tt-editorial-content,
body.tt-home-premium .tt-watch-feature-content {
  padding: clamp(30px, 5vw, 72px);
}

body.tt-home-premium .tt-editorial-title,
body.tt-home-premium .tt-watch-title {
  max-width: 15ch;
  text-wrap: balance;
}

body.tt-home-premium .tt-editorial-desc,
body.tt-home-premium .tt-watch-desc {
  max-width: 48ch;
  line-height: 1.75;
}

body.tt-home-premium .tt-reviews-section {
  padding-block: clamp(54px, 7vw, 90px);
}

@media (max-width: 900px) {
  body.tt-home-premium .tt-trust-item {
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-card-border, #F1E4E7) 80%, transparent);
  }
  body.tt-home-premium .tt-trust-item:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (min-width: 769px) and (max-width: 960px) {
  body.tt-home-premium .tt-home-random-products-grid { grid-auto-columns: minmax(230px, 42vw); }
}

@media (max-width: 768px) {
  body.tt-home-premium .tt-trust-bar { padding-block: 10px; }
  body.tt-home-premium .tt-trust-grid { gap: 0; }
  body.tt-home-premium .tt-trust-item { min-height: 72px; padding: 12px 8px; }
  body.tt-home-premium .tt-trust-title { font-size: .7rem; }
  body.tt-home-premium .tt-trust-desc { font-size: .66rem; }
  body.tt-home-premium .tt-editorial,
  body.tt-home-premium .tt-watch-feature { border-radius: 18px; }
  body.tt-home-premium .tt-editorial-content,
  body.tt-home-premium .tt-watch-feature-content { padding: 32px 22px; }
  body.tt-home-premium .tt-editorial-desc,
  body.tt-home-premium .tt-watch-desc { line-height: 1.65; }
  body.tt-home-premium .tt-home-random-products-grid { grid-auto-columns: minmax(230px, 78vw); gap: 14px; }
  body.tt-home-premium .tt-home-random-products-actions { margin-top: 18px; }
}