/* ============================================================
   TINTIN ACCESORIOS & RELOJES — Main Stylesheet
   ============================================================ */

/* ── CSS Variables ── */
:root {
  --bg:          #fcf0f6;
  --bg-soft:     #fcf0f6;
  --card-bg:     #fef5f8;
  /* La paleta de marca vive en css/core/tokens-color.css, que se carga antes que
     esta hoja en todas las páginas y es la que el panel de Super Admin
     modifica en tiempo real (js/components/color/esquema-color.js escribe los tokens
     --color-*). Estos nombres se mantienen porque los usa medio sitio, pero
     derivan de esos tokens en vez de repetir un valor propio.

     Antes --pink-dark era #b84c72 y --color-brand-primary #AD3F67: dos rosas
     distintos para el mismo color de marca. Se notaba en que al cambiar el
     color desde el panel, lo que usaba tokens cambiaba y lo que usaba
     --pink-dark quedaba con el rosa viejo. Además #AD3F67 contrasta mejor
     sobre blanco (5.70:1 contra 4.87:1).

     El valor viejo queda como fallback: si tokens-color.css no cargara, el
     sitio sigue viéndose como antes en vez de quedarse sin color. */
  --pink-pale:   var(--color-brand-accent, #fce4ec);
  --pink:        #e8a0b4;
  --pink-mid:    #d4748e;
  --pink-dark:   var(--color-brand-primary, #b84c72);
  --rose:        var(--color-brand-primary-hover, #8b2642);
  /* --gold/--text*: css/core/tema-unificado-tintin.css redeclara estos mismos
     nombres con !important en :root y gana en todas las páginas que la
     cargan (todas menos admin-images.html) — esos valores (#AD3F67/#2B2B2B/
     #7B6F72) son los que realmente se ven. Los de acá quedaban desalineados:
     un texto "gold" #c9a96e y un texto principal #C86B86 dan menos de 2.3:1
     y 3.6:1 de contraste sobre blanco. Se alinean a los valores reales para
     que no quede una verdad distinta "en el papel" de la que se renderiza. */
  --gold:        #AD3F67;
  --gold-hover:  #8B2642;
  --gold-light:  #FFF9FC;
  --text:        #2B2B2B;
  --text-sec:    #7B6F72;
  --text-muted:  #7B6F72;
  --text-title:  #2B2B2B;
  --border:      #f0d8e0;
  --white:       #ffffff;
  --whatsapp:    #25d366;
  --whatsapp-h:  #1fba58;
  --error:       #e53935;
  --success:     #4caf50;
  --shadow-sm:   0 2px 8px rgba(180,76,114,0.08);
  --shadow-md:   0 4px 20px rgba(180,76,114,0.12);
  --shadow-lg:   0 8px 40px rgba(180,76,114,0.18);
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-pill: 999px;
  --transition:  0.3s cubic-bezier(0.4,0,0.2,1);
  --header-h:    72px;
  --font-heading: "Montserrat";
  --font-body: "Montserrat";
  /* z-index system */
  --z-dropdown:   200;
  --z-whatsapp:   900;
  --z-tabbar:     950;
  --z-sheet:      960;
  --z-sheet-back: 959;
  --z-header:     1000;
  --z-search:     1500;
  --z-cart-over:  1800;
  --z-cart:       1900;
  --z-mobile:     2000;
  --z-lightbox:   9998;
  --z-toast:      9999;
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; max-width: 100%; }

.tt-cart-feedback {
  position: fixed;
  left: 50%;
  bottom: max(88px, calc(24px + env(safe-area-inset-bottom)));
  z-index: 10020;
  width: min(92vw, 520px);
  padding: 13px 20px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 16px;
  background: #8f294f;
  color: #fff !important;
  box-shadow: 0 12px 34px rgba(57,16,31,.28);
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 18px);
  transition: opacity .22s ease, transform .22s ease;
}
.tt-cart-feedback.is-visible { opacity: 1; transform: translate(-50%, 0); }
.tt-cart-feedback[data-state="warning"] { background: #7e2546; }
@media (max-width: 768px) {
  .tt-cart-feedback {
    bottom: max(84px, calc(76px + env(safe-area-inset-bottom)));
    padding: 12px 16px;
    font-size: .8rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tt-cart-feedback { transition: none; }
}

/* ═══════════════════════════════════════════════
   SCROLLBAR ROSA GLOBAL
   scrollbar-color cubre Firefox; ::-webkit-scrollbar cubre Chrome/Safari/
   Edge — se degrada sola a la barra nativa del sistema en donde ninguna de
   las dos se soporte, así que no hace falta (ni conviene) simular una barra
   con JS/divs. Selectores puntuales con su propia regla de scrollbar ya
   ocultan la suya con más especificidad — siguen ganando sobre esta regla
   general sin tocarlos. */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--color-scrollbar-thumb, #EA7EA3) var(--color-scrollbar-track, #FDF0F5);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-scrollbar-track, #FDF0F5); }
::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar-thumb, #EA7EA3);
  border-radius: 999px;
  border: 2px solid var(--color-scrollbar-track, #FDF0F5);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: #D9648C; }
::-webkit-scrollbar-corner { background: var(--color-scrollbar-track, #FDF0F5); }

body {
  font-family:Montserrat;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  /* clip, no hidden: overflow-x:hidden fuerza overflow-y a auto por spec,
     convirtiendo <body> en un segundo contenedor de scroll independiente
     de <html> — eso le robaba el scroll de teclado/rueda al documento real. */
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; object-position: center; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family:Montserrat; }
input, textarea, select { font-family:Montserrat; }

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 { font-family:Montserrat; font-weight: 600; line-height: 1.2; color: var(--text-title); }

.tt-section-title {
  font-family:Montserrat;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--text-title);
  letter-spacing: 0.02em;
  margin-bottom: 0.5rem;
}

.tt-section-sub {
  font-family:Montserrat;
  font-size: 0.95rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.tt-section-desc {
  font-size: 1rem;
  color: var(--text-sec);
  max-width: 560px;
  line-height: 1.8;
}

/* ═══════════════════════════════════════════════
   SISTEMA GLOBAL DE IMÁGENES RESPONSIVE
   Base reutilizable para cualquier imagen que venga de
   assets-tintin/images (o de Firestore) en cualquier sección,
   actual o futura. No forzar fondos acá — si una sección
   necesita fondo, se define en la sección misma, nunca pegado
   a la imagen (así se respeta la transparencia real del archivo).
═══════════════════════════════════════════════ */
.tintin-img,
.tt-responsive-img,
.tt-section-img {
  max-width: 100%;
  height: auto;
  display: block;
  object-position: center;
}

/* Para fotos de producto/colección dentro de un contenedor de tamaño fijo
   (aspect-ratio + overflow:hidden): se ve la pieza completa, nunca recortada,
   y jamás se agrega un color sólido detrás — si el archivo tiene transparencia,
   se respeta. */
.tt-media-contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: transparent;
  display: block;
}

/* ── Utility Classes ── */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 48px 0; }
.section-sm { padding: 32px 0; }
.text-center { text-align: center; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: 12px; }
.gap-md { gap: 24px; }
.gap-lg { gap: 40px; }
.w-full { width: 100%; }
.mt-sm { margin-top: 12px; }
.mt-md { margin-top: 24px; }
.mt-lg { margin-top: 40px; }
.mb-sm { margin-bottom: 12px; }
.mb-md { margin-bottom: 24px; }
.mb-lg { margin-bottom: 40px; }

/* ── Buttons ── */
.tt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  font-family:Montserrat;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--pink-dark);
  color: var(--white);
  transition: var(--transition);
  cursor: pointer;
  border: 2px solid transparent;
  white-space: nowrap;
}

.tt-btn:hover {
  background: var(--rose);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.tt-btn-outline {
  background: transparent;
  border-color: var(--pink-dark);
  color: var(--pink-dark);
}

.tt-btn-outline:hover {
  background: var(--pink-dark);
  color: var(--white);
}

.tt-btn-gold {
  background: var(--gold);
  color: var(--white);
}

.tt-btn-gold:hover { background: var(--gold-hover); }

.tt-btn-sm {
  padding: 8px 18px;
  font-size: 0.75rem;
}

.tt-btn-lg {
  padding: 16px 40px;
  font-size: 0.9rem;
  max-width: 100%;
  box-sizing: border-box;
}

.tt-btn-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--pink-pale);
  color: var(--pink-dark);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  cursor: pointer;
  border: none;
}

.tt-btn-icon:hover {
  background: var(--pink-dark);
  color: var(--white);
}

/* ── Image Placeholders ── */
.tt-img-placeholder {
  width: 100%;
  background: linear-gradient(135deg, #fce4ec 0%, #f5d4e0 40%, #ede0f0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.tt-img-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(225deg, rgba(201,169,110,0.15) 0%, transparent 60%);
}

.tt-img-placeholder-rose {
  background: linear-gradient(135deg, #f5d4e0 0%, #e8a0b4 50%, #d4748e 100%);
}

.tt-img-placeholder-nude {
  background: linear-gradient(135deg, #f5ead0 0%, #f0d8c0 40%, #e8cba8 100%);
}

.tt-img-placeholder-purple {
  background: linear-gradient(135deg, #ede0f0 0%, #d4b8e0 50%, #b890c8 100%);
}

/* ═══════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════ */
.tt-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: var(--z-header);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.tt-header.scrolled {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--border);
  box-shadow: 0 2px 20px rgba(180,76,114,0.08);
}

/* Antirregresión: no existe ningún header superior de mobile — #tt-header-
   mobile fue retirado por completo del HTML de las páginas públicas. Si
   alguna página lo reintrodujera por error, esta regla lo saca del layout
   en cualquier ancho (no sólo lo oculta visualmente): la navegación
   persistente de mobile es exclusivamente .tt-tabbar. */
#tt-header-mobile {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* Misma protección en sentido contrario: la tabbar es exclusiva de mobile,
   nunca debe poder aparecer en desktop/tablet. */
@media (min-width: 769px) {
  .tt-tabbar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

.tt-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 32px;
  gap: 24px;
}

/* Logo */
.tt-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.tt-logo-img {
  height: 56px;   /* desktop */
  width: auto;
  display: block;
  object-fit: contain;
}

/* Menu drawer logo — slightly larger since it's on white bg */
.tt-logo-img--menu {
  height: 52px;
}

/* Nav */
.tt-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
}

.tt-nav > a,
.tt-nav-dropdown > button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family:Montserrat;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-title);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  position: relative;
  transition: color var(--transition), background var(--transition), border-color var(--transition), transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease;
  white-space: nowrap;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  cursor: pointer;
}

.tt-nav > a::after,
.tt-nav > .tt-nav-dropdown > button::after {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 3px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
}

.tt-nav > a:hover,
.tt-nav-dropdown > button:hover,
.tt-nav > a.active,
.tt-nav-dropdown > button.active {
  color: var(--text-title);
  background: rgba(255,255,255,0.28);
  border-color: rgba(255,255,255,0.36);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(64,22,39,.12);
}

.tt-nav > a.active::after,
.tt-nav > .tt-nav-dropdown > button.active::after { transform: scaleX(1); }

.tt-header.scrolled .tt-nav > a,
.tt-header.scrolled .tt-nav-dropdown > button {
  color: var(--text);
  background: rgba(212,120,154,0.06);
  border-color: rgba(212,120,154,0.14);
}

.tt-header.scrolled .tt-nav > a:hover,
.tt-header.scrolled .tt-nav-dropdown > button:hover,
.tt-header.scrolled .tt-nav > a.active,
.tt-header.scrolled .tt-nav-dropdown > button.active {
  color: var(--pink-dark);
  background: var(--pink-pale);
  border-color: rgba(212,120,154,0.28);
}

/* Dropdown */
.tt-nav-dropdown {
  position: relative;
}

.tt-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  width: 680px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  pointer-events: none;
  z-index: 200;
}

.tt-nav-dropdown.open .tt-dropdown,
.tt-nav-dropdown:focus-within .tt-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: all;
}

.tt-dropdown-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

/* Account dropdown (user icon) — same open/close mechanics as the Tienda
   dropdown above (.tt-nav-dropdown.open / :focus-within), but a short list
   instead of a grid, right-aligned under the icon instead of centered. */
.tt-account-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 10px;
  width: min(264px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  pointer-events: none;
  z-index: 200;
}

.tt-nav-dropdown.open .tt-account-panel,
.tt-nav-dropdown:focus-within .tt-account-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: all;
}

.tt-account-header {
  padding: 10px 10px 12px;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tt-account-header span { overflow: hidden; text-overflow: ellipsis; }
.tt-account-panel-avatar { box-shadow: 0 4px 12px rgba(139,38,66,.16); }

/* Scoped as ".tt-account-panel .tt-account-item" (not just ".tt-account-item")
   so this wins specificity over ".tt-header-actions button/a" — the account
   dropdown lives inside .tt-header-actions, which otherwise forces these
   into 40x40 icon boxes and wraps the text. */
.tt-account-panel .tt-account-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  height: auto;
  padding: 11px 12px;
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
  font-family:Montserrat;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease;
  overflow: visible;
}

.tt-account-panel .tt-account-item:hover { background: var(--pink-pale); color: var(--pink-dark); }
.tt-account-panel .tt-account-item.tt-account-logout { color: var(--rose); }
.tt-account-divider { height: 1px; background: var(--border); margin: 8px 4px; }

.tt-dropdown-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  text-align: center;
  transition: var(--transition);
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
}

.tt-dropdown-card:hover {
  background: var(--pink-pale);
  border-color: var(--pink);
  transform: translateY(-2px);
}

.tt-dropdown-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #fce4ec, #f5d4e0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #b84c72;
}

.tt-dropdown-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}

/* Header Actions */
.tt-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.tt-header-actions button,
.tt-header-actions a {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  color: var(--text-title);
  transition: var(--transition);
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  overflow: hidden;
}

.tt-header-actions button:hover,
.tt-header-actions a:hover {
  background: rgba(255,255,255,0.18);
  color: var(--text-title);
}

.tt-header-actions button.active,
.tt-header-actions a.active {
  background: rgba(255,255,255,.24);
  color: var(--text-title);
  box-shadow: 0 0 0 2px rgba(255,255,255,.34), 0 8px 20px rgba(64,22,39,.12);
  transform: translateY(-1px);
}

.tt-header.scrolled .tt-header-actions button,
.tt-header.scrolled .tt-header-actions a {
  color: var(--text);
}

.tt-header.scrolled .tt-header-actions button:hover,
.tt-header.scrolled .tt-header-actions a:hover {
  background: var(--pink-pale);
  color: var(--pink-dark);
}

.tt-header.scrolled .tt-header-actions button.active,
.tt-header.scrolled .tt-header-actions a.active {
  background: var(--pink-pale);
  color: var(--pink-dark);
  box-shadow: 0 0 0 2px rgba(212,120,154,.2), 0 8px 20px rgba(64,22,39,.1);
}

/* #btn-cuenta vive dentro de .tt-nav-dropdown (el mismo wrapper que el botón
   de texto "TIENDA ▾"), así que sin esto heredaba el padding/fondo/borde de
   botón-pill de esa regla compartida (.tt-nav-dropdown > button) — eso le
   dejaba mucho menos espacio interno que a búsqueda/carrito y el ícono se
   veía más chico/apretado que sus vecinos. Se resetea acá para que quede
   exactamente del mismo tamaño que los otros dos íconos del header. */
#account-dropdown > button {
  padding: 0;
  background: none;
  border: none;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
}

/* Foto de cuenta (Google) en el ícono del header — reemplaza el ícono
   genérico apenas hay sesión iniciada, para saber de un vistazo con qué
   cuenta se está navegando/comprando en cualquier página del sitio. */
.tt-account-avatar-btn {
  width: 26px;
  height: 26px;
  max-width: none;
  max-height: none;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.tt-cart-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--pink-dark);
  color: var(--white);
  font-size: 0.6rem;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.tt-cart-badge.hidden { display: none; }

/* Mobile tabbar cart badge */
#cart-badge-mobile {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--pink-dark);
  color: var(--white);
  font-size: 0.55rem;
  font-weight: 700;
  min-width: 15px;
  height: 15px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0 3px;
}
#cart-badge-mobile.hidden { display: none; }

/* Mobile Menu Toggle */
.tt-menu-toggle {
  display: none;
  font-size: 1.4rem;
  color: var(--text-title);
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  transition: color var(--transition);
}

.tt-header.scrolled .tt-menu-toggle { color: var(--text); }

/* ── Mobile Menu Overlay ── */
.tt-mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--white);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  padding: 24px;
  transform: translateX(-100%);
  transition: transform var(--transition);
  overflow-y: auto;
}

.tt-mobile-menu.open { transform: translateX(0); }

.tt-mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.tt-mobile-close {
  font-size: 1.5rem;
  color: var(--text);
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.tt-mobile-nav a,
.tt-mobile-nav button {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  cursor: pointer;
  transition: color var(--transition);
}

.tt-mobile-nav a:hover,
.tt-mobile-nav button:hover { color: var(--pink-dark); }

.tt-mobile-nav a.active,
.tt-mobile-nav button.active {
  color: var(--pink-dark);
  padding-inline: 14px;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--pink-pale), transparent);
  box-shadow: inset 3px 0 0 var(--pink-dark);
}

/* Mobile tienda toggle button */
.tt-mobile-tienda-btn {
  display: flex !important;
  align-items: center;
  justify-content: space-between !important;
  width: 100%;
}
.tt-mobile-chevron {
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.tt-mobile-tienda-btn[aria-expanded="true"] .tt-mobile-chevron {
  transform: rotate(180deg);
}

/* Collapsible TIENDA panel */
.tt-mobile-cats {
  display: none;
  padding: 12px 0 8px;
  border-bottom: 1px solid var(--border);
}
.tt-mobile-cats.open { display: block; }

.tt-mobile-cats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding-bottom: 12px;
}

.tt-mobile-cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  transition: color 0.2s;
}
.tt-mobile-cat-card:hover { color: var(--pink-dark); }

.tt-mobile-cat-img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.tt-mobile-cat-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tt-mobile-ver-todo {
  display: block;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pink-dark);
  padding: 10px 0 4px;
  text-decoration: none;
}
.tt-mobile-ver-todo:hover { text-decoration: underline; }

/* Mobile menu user panel */
.tt-mobile-user {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.tt-mobile-user-login,
.tt-mobile-user-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border-radius: 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  box-shadow: 0 6px 18px rgba(139,38,66,.05);
  transition: background-color .2s ease;
}
.tt-mobile-user-login:hover,
.tt-mobile-user-profile:hover { background: var(--pink-pale); }

.tt-mobile-user-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--pink-pale);
  box-shadow: 0 4px 12px rgba(139,38,66,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.tt-mobile-user-avatar img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  flex-shrink: 0;
}
.tt-mobile-user-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}
.tt-mobile-user-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Acción de cerrar sesión — misma superficie (menú hamburguesa) que en
   escritorio ofrece el dropdown del header, para que la acción exista en
   ambas pantallas y no solo dentro de "Mi cuenta". */
.tt-mobile-user-logout {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 12px 16px;
  border-radius: 14px;
  background: none;
  border: 1px solid var(--border);
  color: var(--rose);
  font-family:Montserrat;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background-color .2s ease;
}
.tt-mobile-user-logout:hover { background: var(--pink-pale); }

/* ── Search Panel ── */
.tt-search-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--white);
  z-index: 1500;
  padding: 0 32px;
  height: 80px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--border);
  transform: translateY(-100%);
  transition: transform var(--transition);
  box-shadow: var(--shadow-md);
}

.tt-search-panel.open { transform: translateY(0); }

.tt-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1.1rem;
  font-family:Montserrat;
  color: var(--text);
  background: transparent;
}

.tt-search-input::placeholder { color: var(--text-muted); }

.tt-search-close {
  font-size: 1.4rem;
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px;
}

.tt-search-close:hover { color: var(--pink-dark); }

.tt-search-results {
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  max-height: 400px;
  overflow-y: auto;
  padding: 16px 32px;
  box-shadow: var(--shadow-md);
}

.tt-search-result-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: var(--transition);
}

.tt-search-result-item:last-child { border-bottom: none; }

.tt-search-result-item:hover { color: var(--pink-dark); }

.tt-search-result-thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #fce4ec, #f5d4e0);
  flex-shrink: 0;
}

.tt-search-result-info { flex: 1; }
.tt-search-result-name {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tt-search-result-price {
  font-size: 0.8rem;
  color: var(--pink-dark);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════ */
/* ════════════════════════════════════════════════
   HERO BANNER — img-based, Shopify-style
   Image loads instantly from local WebP, no JS
   ════════════════════════════════════════════════ */
.tt-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 100vh;
  height: 100svh;
  min-height: 680px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  background: #1a0610;
  /* El primer gesto real puede empezar sobre el fondo del hero — nunca debe
     competir con el scroll vertical nativo. */
  touch-action: pan-y;
}

/* ── Media container: fills hero, sits behind everything ── */
/* Decorativo, nunca interactivo: pointer-events:none saca esta capa por
   completo del hit-testing, así el primer toque siempre llega directo al
   scroll nativo del documento en vez de competir con el gesto nativo de
   "arrastrar imagen" / callout de iOS. */
.tt-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: #1a0610;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Oculta el <img> del hero hasta que gestion-imagenes.js confirme la URL real
   de Cloudinary Y esa foto haya terminado de descargarse — así la sección
   nunca queda revelada con el fondo oscuro a la vista mientras la imagen
   todavía carga. Queda el fondo oscuro de .tt-hero-media como transición,
   nunca un hueco en blanco. Un script de seguridad en el HTML quita esta
   clase igual si JS/Firestore tarda demasiado. */
.tt-hero-media.tt-hero-pending .tt-hero-img {
  visibility: hidden;
}

.tt-hero-media picture {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.tt-hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* No transition on first paint — avoids flash */
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}


/* ── Text content sits above overlay ── */
.tt-hero-content {
  position: relative;
  z-index: 2;
  max-width: 860px;
  padding: 0 32px;
  margin-top: 0;
}

@media (min-width: 1025px) {
  .tt-hero-content {
    max-width: 50%;
  }
}

.tt-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family:Montserrat;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 14px;
}

.tt-hero-eyebrow::before {
  content: '';
  display: block;
  width: 28px;
  height: 1.5px;
  background: currentColor;
  flex-shrink: 0;
  opacity: 0.7;
}

.tt-hero-title {
  font-family:Montserrat;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 700;
  color: var(--text-title);
  line-height: 0.95;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.tt-hero-line {
  width: 48px;
  height: 2px;
  margin: 0 0 18px;
  background: var(--pink-dark);
  opacity: 0.85;
}

/* Vacío por defecto (Super Admin → Contenido → Hero → Subtítulo) — :empty
   lo saca del flujo por completo así no deja un hueco cuando nadie lo usa. */
.tt-hero-subtitle {
  font-family:Montserrat;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  font-weight: 400;
  color: var(--text-sec);
  margin: -6px 0 16px;
  max-width: 480px;
}
.tt-hero-subtitle:empty { display: none; margin: 0; }

.tt-hero-tagline {
  font-family:Montserrat;
  font-size: clamp(0.78rem, 1.4vw, 0.92rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  margin-bottom: 6px;
}

.tt-hero-sub {
  font-family:Montserrat;
  font-size: clamp(0.72rem, 1.2vw, 0.82rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.6);
  margin-bottom: 34px;
  font-style: italic;
}

.tt-hero-pills {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.tt-hero-pill {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.92);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 7px 16px;
  border-radius: 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.tt-hero-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

/* Primary hero button: pink fill + breathing */
.tt-hero-actions .tt-btn:not(.tt-btn-outline) {
  background: var(--pink-dark);
  color: #fff;
  border-color: var(--pink-dark);
  font-weight: 700;
  animation: tt-btn-breathe 3s ease-in-out 1.2s infinite;
}
.tt-hero-actions .tt-btn:not(.tt-btn-outline):hover {
  background: var(--rose);
  border-color: var(--rose);
  animation-play-state: paused;
  transform: translateY(-2px) scale(1.03);
  letter-spacing: 0.14em;
}

@keyframes tt-btn-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184,76,114,0); }
  50%       { box-shadow: 0 0 0 8px rgba(184,76,114,0.22); }
}

/* Primary hero CTA: flecha que se desliza al pasar el mouse */
.tt-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tt-hero-cta-arrow {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tt-hero-cta:hover .tt-hero-cta-arrow {
  transform: translateX(6px);
}

/* Link secundario del hero: texto subrayado, sin competir con el CTA principal */
.tt-hero-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 2px;
  color: var(--text);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
  opacity: 0.85;
  transition: opacity 0.25s ease, color 0.25s ease;
}
.tt-hero-link:hover {
  opacity: 1;
  color: var(--pink-dark);
}

/* Indicador de scroll: invita a bajar, se oculta apenas el usuario scrollea */
.tt-hero-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.35s ease;
  animation: tt-scroll-hint-bounce 1.8s ease-in-out infinite;
}
.tt-hero-scroll-hint.tt-hero-scroll-hint-hidden {
  opacity: 0;
  pointer-events: none;
}
@keyframes tt-scroll-hint-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

/* ═══════════════════════════════════════════════
   TRUST BAR
═══════════════════════════════════════════════ */
.tt-trust-bar {
  background: var(--bg);
  padding: 32px 0;
}

.tt-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.tt-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  background: var(--white);
  border: 1px solid rgba(212,120,154,0.12);
  border-radius: var(--radius-md);
  padding: 24px 16px;
  position: relative;
  min-width: 0;
  overflow: visible;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.tt-trust-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--pink-dark), rgba(212,120,154,0.3), var(--pink-dark));
  opacity: 0;
  transition: opacity 0.22s ease;
}

.tt-trust-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(212,120,154,0.12);
  border-color: rgba(212,120,154,0.28);
}

.tt-trust-item:hover::before { opacity: 1; }

.tt-trust-icon {
  width: 52px;
  height: 52px;
  background: rgba(212,120,154,0.1);
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tt-trust-title {
  font-family:Montserrat;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  max-width: 100%;
  overflow-wrap: anywhere;
}

.tt-trust-desc {
  font-size: 0.8rem;
  color: var(--text-sec);
  line-height: 1.5;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* ═══════════════════════════════════════════════
   EDITORIAL SPLIT
═══════════════════════════════════════════════ */
.tt-editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
}

.tt-editorial-img {
  min-height: 400px;
}

.tt-editorial-img .tt-img-placeholder {
  height: 100%;
  min-height: 400px;
}

.tt-editorial-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 72px;
  background: var(--bg);
}

.tt-editorial-eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 12px;
}

.tt-editorial-title {
  font-family:Montserrat;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700;
  color: var(--text-title);
  line-height: 1.15;
  margin-bottom: 20px;
}

.tt-editorial-desc {
  font-size: 0.95rem;
  color: var(--text-sec);
  line-height: 1.8;
  margin-bottom: 32px;
  max-width: 440px;
}

/* Reverse layout */
.tt-editorial.reverse .tt-editorial-img { order: 2; }
.tt-editorial.reverse .tt-editorial-content { order: 1; }

/* Hide hardcoded SVG icon placeholders inside editorial/watch — gradient alone looks clean */
.tt-editorial-img .tt-img-placeholder > div,
.tt-watch-feature-img .tt-img-placeholder > div {
  display: none;
}

/* ═══════════════════════════════════════════════
   COLLECTIONS GRID
═══════════════════════════════════════════════ */
.tt-collections-section { background: var(--bg); }

.tt-collections-header {
  text-align: center;
  margin-bottom: 48px;
}

.tt-collections-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.tt-coll-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  text-decoration: none;
  display: block;
  aspect-ratio: 3/4;
}

.tt-coll-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.tt-coll-card-img {
  width: 100%;
  height: 100%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.tt-coll-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(139,38,66,0.75) 100%);
  display: flex;
  align-items: flex-end;
  padding: 16px 12px;
}

.tt-coll-card-label {
  font-family:Montserrat;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Sin !important pierde contra el span{color:var(--tt-text)!important}
     genérico de tema-unificado-tintin.css, que se carga después. */
  color: var(--white) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* ═══════════════════════════════════════════════
   COMPLETÁ TU LOOK
═══════════════════════════════════════════════ */
.tt-look-section { background: var(--bg); }

.tt-look-header {
  text-align: center;
  margin-bottom: 40px;
}

.tt-look-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

.tt-look-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.tt-look-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.tt-look-card-img {
  height: 220px;
  background: transparent;
  overflow: hidden;
  position: relative;
}
.tt-look-card-img-ph::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%23e8a0b8' stroke-width='1.5'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'%3E%3C/path%3E%3Ccircle cx='12' cy='13' r='4'%3E%3C/circle%3E%3C/svg%3E") center/48px no-repeat;
}

.tt-look-card-inner {
  display: block;
  text-decoration: none;
  color: inherit;
}

.tt-look-card-foot {
  padding: 0 16px 14px;
}

.tt-look-card-body { padding: 14px 16px 8px; }

.tt-look-card-name {
  font-family:Montserrat;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 4px;
}

.tt-look-card-price {
  font-size: 0.85rem;
  color: var(--pink-dark);
  font-weight: 600;
}

.tt-look-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════
   WATCH FEATURE
═══════════════════════════════════════════════ */
.tt-watch-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 560px;
  background: var(--bg);
}

.tt-watch-feature-img {
  position: relative;
  overflow: hidden;
  min-height: 400px;
}

.tt-watch-feature-img .tt-img-placeholder {
  height: 100%;
  min-height: 400px;
  background: linear-gradient(135deg, #c9a96e 0%, #f5ead0 40%, #fce4ec 70%, #e8a0b4 100%);
}

.tt-watch-feature-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 72px;
}

.tt-watch-eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}

.tt-watch-title {
  font-family:Montserrat;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 700;
  color: var(--text-title);
  line-height: 1.15;
  margin-bottom: 20px;
}

.tt-watch-desc {
  font-size: 0.95rem;
  color: var(--text-sec);
  line-height: 1.8;
  margin-bottom: 32px;
  max-width: 440px;
}

/* ═══════════════════════════════════════════════
   PRODUCTS GRID
═══════════════════════════════════════════════ */
.tt-products-section { background: var(--bg); }

.tt-products-header {
  text-align: center;
  margin-bottom: 48px;
}

.tt-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.tt-product-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  position: relative;
}

.tt-product-favorite-button {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(173,63,103,.22);
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  color: var(--pink-dark);
  font-size: 1.45rem;
  cursor: pointer;
  box-shadow: 0 5px 16px rgba(86,32,51,.12);
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 0;
}
.tt-product-favorite-button [data-favorite-icon],
.tt-product-favorite-icon [data-favorite-icon] {
  display: grid;
  place-items: center;
  line-height: 0;
}
.tt-product-favorite-button svg,
.tt-product-favorite-icon svg { display: block; }

.tt-product-favorite-button.is-favorite { background: var(--pink-pale); }

.tt-product-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: var(--pink);
}

.tt-product-img {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
}

.tt-product-card-img-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.tt-product-img-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #fce4ec 0%, #f5d4e0 40%, #ede0f0 100%);
  transition: transform 0.4s ease;
}

/* New image system placeholders */
.tt-prod-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #fce4ec 0%, #f5d4e0 40%, #ede0f0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s ease;
}
.tt-prod-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.tt-prod-ph-svg {
  background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%);
  position: relative;
}
.tt-prod-ph-svg::after {
  content: '';
  display: block;
  width: 48px; height: 48px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%23e8a0c0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E") center/contain no-repeat;
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.tt-product-card:hover .tt-prod-placeholder { transform: scale(1.05); }

/* Generic image slot img support */
.tt-img-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.tt-product-card:hover .tt-product-img-placeholder {
  transform: scale(1.05);
}

.tt-product-img-real {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  transition: transform 0.4s ease;
  display: block;
}
.tt-product-card:hover .tt-product-img-real { transform: scale(1.05); }

.tt-product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--pink-dark);
  color: var(--white);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  z-index: 1;
}

.tt-product-badge.nuevo {
  background: var(--gold);
}

.tt-product-info {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tt-product-cat {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tt-product-name {
  font-family:Montserrat;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.3;
  margin: 0;
}

.tt-product-name a {
  color: inherit;
  text-decoration: none;
}

.tt-product-name a:hover {
  color: var(--pink-dark);
}

.tt-product-price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--pink-dark);
  margin-top: 4px;
}

.tt-product-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}

.tt-product-actions .tt-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 40px;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
}

/* ═══════════════════════════════════════════════
   REVIEWS
═══════════════════════════════════════════════ */
.tt-reviews-section { background: var(--bg); }

.tt-reviews-header {
  text-align: center;
  margin-bottom: 48px;
}

.tt-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.tt-review-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: var(--transition);
}

.tt-review-card:hover { box-shadow: var(--shadow-md); }

.tt-review-stars {
  color: var(--gold);
  font-size: 1rem;
  letter-spacing: 2px;
  margin-bottom: 16px;
}

.tt-review-text {
  font-size: 0.9rem;
  color: var(--text-sec);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 20px;
}

.tt-review-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tt-review-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #fce4ec, #f5d4e0);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tt-review-name {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text);
}

.tt-review-product {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════ */
.tt-footer {
  background: var(--pink-dark);
  color: var(--white);
  padding: 60px 0 0;
}

.tt-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

.tt-footer-brand .tt-logo-link { flex-direction: column; align-items: flex-start; gap: 2px; }

.tt-footer-tagline {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.7;
  margin-top: 16px;
  margin-bottom: 24px;
  max-width: 280px;
}

.tt-footer-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #25d366;
  color: var(--white);
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 600;
  transition: var(--transition);
  text-decoration: none;
}

.tt-footer-wa:hover { background: #128c3c; transform: translateY(-1px); }

.tt-footer-col-title {
  font-family:Montserrat;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 20px;
}

.tt-footer-accordion-toggle {
  display: contents;
  color: inherit;
  font: inherit;
}

@media (max-width: 480px) {
  .tt-footer-col-title {
    margin: 0;
  }
  .tt-footer-accordion-toggle {
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
  }
  .tt-footer-accordion-icon {
    font-size: 18px;
    line-height: 1;
    transition: transform .18s ease;
  }
  .tt-footer-accordion-toggle[aria-expanded="true"] .tt-footer-accordion-icon {
    transform: rotate(45deg);
  }
  .tt-footer-col > ul {
    padding-top: 8px;
  }
}

.tt-footer-col ul li { margin-bottom: 10px; }
.tt-footer-col ul li a {
  display: inline-flex;
  align-items: center;
  min-width: 24px;
  min-height: 24px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
  transition: color var(--transition);
}
.tt-footer-col ul li a:hover { color: var(--white); }

.tt-footer-bottom {
  padding: 20px 0;
  text-align: center;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.05em;
}

/* ═══════════════════════════════════════════════
   WHATSAPP FLOAT
═══════════════════════════════════════════════ */
.tt-wa-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 56px;
  height: 56px;
  background: #25d366;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.4);
  z-index: 900;
  transition: transform 0.22s ease, box-shadow 0.22s ease, opacity 0.18s ease;
  text-decoration: none;
  cursor: pointer;
  animation: none;
}

/* initWaFloatVisibility (tienda.js) aplica esta clase cuando el botón fijo
   queda encima de un enlace o botón del contenido (índice de términos/
   privacidad, última fila de tarjetas, footer en páginas cortas). El ocultado
   es INSTANTÁNEO a propósito — sin transición: mientras dura un fade el botón
   sigue tapando lo que tiene debajo, que es justo lo que se quiere evitar.
   La reaparición sí hereda la transición suave de .tt-wa-float. */
.tt-wa-float.tt-wa-float-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.7);
  transition: none;
  animation: none;
}

@keyframes ttn-wa-breathe {
  0%, 100% { transform: translateY(0) scale(1);       box-shadow: 0 4px 20px rgba(37,211,102,0.4); }
  50%       { transform: translateY(-3px) scale(1.04); box-shadow: 0 8px 32px rgba(37,211,102,0.55); }
}

.tt-wa-float:hover {
  animation-play-state: paused;
  transform: none;
  box-shadow: 0 10px 36px rgba(37,211,102,0.6);
}

.tt-wa-float svg { width: 28px; height: 28px; fill: white; }

@media (prefers-reduced-motion: reduce) {
  .tt-wa-float { animation: none; }
}

/* ═══════════════════════════════════════════════
   MOBILE BOTTOM TABBAR
═══════════════════════════════════════════════ */
.tt-tabbar {
  display: none;
  position: fixed;
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  /* left:50% + transform centering only gives shrink-to-fit half the
     viewport as its layout budget (transform doesn't affect layout), so on
     narrow phones the 5 icon buttons got silently compressed — width:
     max-content forces the box to size to its real preferred content width
     instead of shrinking into that half-viewport budget. */
  width: max-content;
  max-width: calc(100vw - 32px);
  background: var(--white);
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 32px rgba(0,0,0,0.15), 0 0 0 1px var(--border);
  padding: 8px 20px;
  /* Por encima de los paneles/drawers compartidos (backdrop 1450, morph 1455,
     dropdown/search/cart/account/collections 1460, header con superficie
     abierta 1470 — ver paneles.css): sin esto la tabbar queda tapada por
     cualquier panel abierto y no se puede volver a tocar para cerrarlo. */
  z-index: 1480;
  gap: 4px;
  align-items: center;
}

.tt-tabbar-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-sec);
  transition: color .2s ease, background-color .2s ease, transform .16s cubic-bezier(.2,.8,.2,1);
  cursor: pointer;
  background: none;
  border: none;
  text-decoration: none;
  position: relative;
}

.tt-tabbar-btn::after {
  content: '';
  position: absolute;
  left: 28%;
  right: 28%;
  bottom: 3px;
  height: 3px;
  border-radius: 999px;
  background: var(--pink-dark);
  transform: scaleX(0);
  transition: transform .2s cubic-bezier(.2,.8,.2,1);
}

.tt-tabbar-btn:hover,
.tt-tabbar-btn.active {
  background: var(--pink-pale);
  color: var(--pink-dark);
}

.tt-tabbar-btn.active::after { transform: scaleX(1); }

.tt-tabbar-btn svg { width: 20px; height: 20px; }

/* Cookies y privacidad: tarjeta discreta, sin overlay ni bloqueo de navegación.
   Estilo más "Apple": tipografía calma (menos peso/mayúsculas gritadas),
   más aire, sombra difusa y suave, logo real de Tintin en vez de un emoji. */
.tt-privacy-consent {
  position: fixed;
  z-index: 2200;
  right: max(20px, env(safe-area-inset-right, 0px));
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  width: min(400px, calc(100vw - 36px));
  padding: 22px;
  border: 1px solid rgba(173,63,103,.12);
  border-radius: 26px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 24px 64px rgba(38,24,30,.14), 0 2px 8px rgba(38,24,30,.05);
  color: var(--text);
  font-family:Montserrat;
  box-sizing: border-box;
  animation: ttPrivacyIn .32s cubic-bezier(.22,.61,.36,1) both;
}
.tt-privacy-consent[hidden] { display: none !important; }
.tt-privacy-heading { display: flex; align-items: center; gap: 13px; padding-right: 24px; }
.tt-privacy-icon {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 18px rgba(173,63,103,.16), inset 0 0 0 1px rgba(173,63,103,.08);
  overflow: hidden;
}
.tt-privacy-icon img { width: 26px; height: 26px; object-fit: contain; display: block; }
.tt-privacy-eyebrow {
  color: var(--pink-dark);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tt-privacy-heading h2 { margin: 3px 0 0; color: var(--text); font: 700 1rem/1.3 var(--font-display); letter-spacing: -.01em; }
.tt-privacy-summary { margin: 14px 0 17px; color: var(--text-sec); font-size: .78rem; line-height: 1.62; }
.tt-privacy-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tt-privacy-btn,
.tt-privacy-link-btn {
  min-height: 44px;
  border-radius: 999px;
  padding: 9px 16px;
  border: 0;
  font: 700 .72rem/1.2 var(--font-body);
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
}
.tt-privacy-btn:active { transform: scale(.97); }
.tt-privacy-btn-primary { background: var(--pink-dark); color: #fff; box-shadow: 0 10px 24px rgba(173,63,103,.22); }
.tt-privacy-btn-primary:hover { opacity: .92; }
.tt-privacy-btn-secondary { border: 1px solid rgba(173,63,103,.22); background: #fff; color: var(--text); }
.tt-privacy-btn-secondary:hover { background: var(--pink-pale); }
.tt-privacy-link-btn { padding-inline: 6px; background: transparent; color: var(--pink-dark); text-decoration: none; font-weight: 600; opacity: .85; }
.tt-privacy-link-btn:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.tt-privacy-close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-sec);
  font-size: 19px;
  cursor: pointer;
  transition: background .15s ease;
}
.tt-privacy-close:hover { background: rgba(38,24,30,.05); }
.tt-privacy-details { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--border); }
.tt-privacy-option { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 15px; }
.tt-privacy-option + .tt-privacy-option { border-top: 1px solid rgba(38,24,30,.06); }
.tt-privacy-option div { display: grid; gap: 2px; }
.tt-privacy-option strong { color: var(--text); font-size: .77rem; font-weight: 600; }
.tt-privacy-option span { color: var(--text-sec); font-size: .68rem; line-height: 1.45; }
.tt-privacy-option input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--pink-dark); }
.tt-privacy-required { color: var(--pink-dark) !important; font-weight: 700; font-size: .66rem; white-space: nowrap; }
.tt-privacy-details-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.tt-privacy-details-actions a { color: var(--pink-dark); font-size: .71rem; font-weight: 600; text-underline-offset: 3px; }
@keyframes ttPrivacyIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

@media (max-width: 768px) {
  .tt-privacy-consent {
    right: 12px;
    bottom: calc(86px + env(safe-area-inset-bottom, 0px));
    width: calc(100vw - 24px);
    max-height: min(70vh, 580px);
    overflow: auto;
    padding: 18px;
    border-radius: 22px;
  }
  /* Ese margen de 86px reserva el alto de la tabbar mobile — en login.html
     la tabbar existe en el DOM pero queda oculta (display:none, ver
     css/theme/fondo-solido-cargador.css), así que el banner quedaba flotando
     de más ahí y tapaba el botón "Continuar con Google". */
  body:has(.login-page) .tt-privacy-consent {
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
  }
  /* La etiqueta "Cookies y privacidad" es redundante con el logo y el
     título de abajo — en mobile el banner ya compite por espacio vertical
     con el CTA del hero (que también se ancla abajo), así que acá se
     esconde para recuperar esas líneas sin perder información real. */
  .tt-privacy-eyebrow { display: none; }
  .tt-privacy-heading { padding-right: 20px; }
  .tt-privacy-summary { margin: 10px 0 14px; }
  .tt-privacy-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .tt-privacy-link-btn { grid-column: 1 / -1; padding-block: 4px; }
  .tt-privacy-details-actions { align-items: stretch; flex-direction: column; }
  .tt-privacy-details-actions .tt-privacy-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .tt-privacy-consent { animation: none; }
}

/* Login y 404 antes no tenian la navegacion publica. Al compartir ahora el
   mismo header fijo que la portada, su contenido conserva una zona superior
   segura en desktop/tablet y una zona inferior segura para la tabbar mobile. */
@media (min-width: 769px) {
  body.tt-public-shell-mounted .login-page,
  body.tt-public-shell-mounted .tt-404-wrap {
    padding-top: var(--header-h);
  }
}

@media (max-width: 768px) {
  body.tt-public-shell-mounted .login-page,
  body.tt-public-shell-mounted .tt-404-wrap,
  body.tt-public-shell-mounted .ck-body {
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  }
}

/* Respuesta táctil estable, similar a la barra móvil de Instagram: la
   barra no salta al desplazarse y solo el icono pulsado responde. */
.tt-tabbar-btn:active { transform: scale(.9); }
.tt-tabbar-btn.active svg,
.tt-tabbar-btn.active .tt-tabbar-avatar { transform: scale(1.1); }
.tt-tabbar-btn svg,
.tt-tabbar-btn .tt-tabbar-avatar { transition: transform .2s cubic-bezier(.2,.8,.2,1); }

@media (prefers-reduced-motion: reduce) {
  .tt-tabbar-btn,
  .tt-tabbar-btn svg,
  .tt-tabbar-btn .tt-tabbar-avatar { transition: none; }
  .tt-tabbar-btn:active,
  .tt-tabbar-btn.active svg,
  .tt-tabbar-btn.active .tt-tabbar-avatar { transform: none; }
}

@media (max-width: 768px) {
  .tt-btn-sm,
  .tt-card-btn { min-height: 44px; }
  .tt-footer li a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
  }
  .tt-contact-info-item a,
  .tt-inline-support-link,
  #btn-product-wa {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  #btn-close-sheet {
    width: 44px;
    height: 44px;
  }
}

/* ── Mobile Collections Bottom Sheet ── */
.tt-collections-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--white);
  border-radius: 24px 24px 0 0;
  /* La tabbar flota fija a bottom:16px con ~56px de alto y queda por encima
     (z-index 970) para seguir tocable con el sheet abierto — este padding
     extra evita que su contenido (el botón "Ver todas las colecciones")
     quede tapado detrás de ella. */
  padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 88px);
  z-index: 960;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(0.4,0,0.2,1);
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 -4px 32px rgba(0,0,0,0.12);
}
.tt-collections-sheet.open { transform: translateY(0); }

.tt-sheet-handle {
  width: 40px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 12px auto 0;
}

.tt-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 1rem;
}
.tt-sheet-header button {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
}
.tt-sheet-header button:hover { color: var(--pink-dark); }

.tt-sheet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
}

.tt-sheet-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px;
  background: var(--white);
  text-decoration: none;
  color: var(--text);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: background var(--transition), color var(--transition);
}
.tt-sheet-item:hover,
.tt-sheet-item:active { background: var(--pink-pale); color: var(--pink-dark); }
.tt-sheet-item-img {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.tt-sheet-item-img img { width: 100%; height: 100%; object-fit: contain; display: block; }

.tt-sheet-footer { padding: 12px 16px 8px; }

.tt-sheet-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 959;
}
.tt-sheet-backdrop.open { display: block; }

/* ═══════════════════════════════════════════════
   CART DRAWER
═══════════════════════════════════════════════ */
.tt-cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1800;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}

.tt-cart-overlay.open { opacity: 1; visibility: visible; }

.tt-cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  max-width: 95vw;
  background: var(--white);
  z-index: 1900;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--transition);
  box-shadow: -4px 0 40px rgba(180,76,114,0.18);
}

.tt-cart-drawer.open { transform: translateX(0); }

.tt-cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.tt-cart-title {
  font-family:Montserrat;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
}

.tt-cart-close {
  font-size: 1.4rem;
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px 8px;
  transition: color var(--transition);
}

.tt-cart-close:hover { color: var(--pink-dark); }

.tt-cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
}

.tt-cart-body:has(.tt-cart-empty) {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tt-cart-body:has(.tt-cart-empty):has(.tt-cart-favorites) { display: block; }

.tt-cart-empty {
  text-align: center;
  padding: 40px 0;
  color: var(--text-muted);
}

.tt-cart-empty-icon { margin-bottom: 16px; display: flex; justify-content: center; }
.tt-cart-empty-text { font-size: 0.9rem; margin-bottom: 20px; }
.tt-cart-goto-btn {
  display: inline-block;
  padding: 12px 28px;
  background: var(--acc, #b84c72);
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-radius: 30px;
  transition: background 0.2s;
}
.tt-cart-goto-btn:hover { background: #9b3d5e; }

.tt-cart-item {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}

.tt-cart-item-img {
  width: 72px;
  height: 80px;
  border-radius: var(--radius-sm);
  background: transparent;
  flex-shrink: 0;
}

.tt-cart-item-info { flex: 1; }

.tt-cart-item-name {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text);
  margin-bottom: 4px;
}

.tt-cart-item-price {
  font-size: 0.85rem;
  color: var(--pink-dark);
  font-weight: 600;
  margin-bottom: 10px;
}

.tt-cart-qty {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tt-cart-qty-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transition);
  background: none;
  color: var(--text);
}

.tt-cart-qty-btn:hover { background: var(--pink-pale); color: var(--pink-dark); border-color: var(--pink); }

.tt-cart-qty-val {
  font-size: 0.85rem;
  font-weight: 600;
  min-width: 20px;
  text-align: center;
}

.tt-cart-item-remove {
  font-size: 0.75rem;
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  padding: 2px 4px;
  transition: color var(--transition);
  align-self: flex-start;
}

.tt-cart-item-remove:hover { color: var(--pink-dark); }

.tt-cart-item-actions { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tt-cart-favorite-toggle {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--pink-pale);
  color: var(--pink-dark);
  font-size: 1.25rem;
  cursor: pointer;
}
.tt-cart-favorites { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.tt-cart-favorites h3 { margin: 0 0 12px; color: var(--text); font: 700 .85rem/1.3 Montserrat, sans-serif; text-transform: uppercase; letter-spacing: .06em; }
.tt-cart-favorite-item { display: grid; grid-template-columns: 54px minmax(0,1fr) auto 40px; gap: 9px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.tt-cart-favorite-img { width: 54px; height: 60px; border-radius: 10px; overflow: hidden; background: var(--pink-pale); }
.tt-cart-favorite-img img { width: 100%; height: 100%; object-fit: contain; }
.tt-cart-favorite-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tt-cart-favorite-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; color: var(--text); }
.tt-cart-favorite-info span { font-size: .75rem; color: var(--pink-dark); font-weight: 700; }
.tt-cart-favorite-add { min-height: 40px; padding: 7px 10px; border: 1px solid var(--pink-dark); border-radius: 999px; background: #fff; color: var(--pink-dark); font: 700 .68rem Montserrat, sans-serif; cursor: pointer; }

.tt-cart-footer {
  padding: 20px 24px;
  border-top: 1px solid var(--border);
}

.tt-cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.tt-cart-total-label {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
}

.tt-cart-total-value {
  font-family:Montserrat;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--pink-dark);
}

.tt-cart-checkout-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--pink-dark);
  color: var(--white);
  padding: 14px;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  margin-bottom: 10px;
  text-decoration: none;
}

.tt-cart-checkout-btn:hover { background: var(--rose); transform: translateY(-1px); }

/* ─── Skeleton loading cards ─── */
@keyframes tt-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.tt-skeleton-line,
.tt-skeleton-img {
  background: linear-gradient(90deg, #f0d8e0 25%, #fce4ec 50%, #f0d8e0 75%);
  background-size: 800px 100%;
  animation: tt-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
.tt-skeleton-img {
  width: 100%;
  height: 100%;
  min-height: 200px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.tt-skeleton-card { pointer-events: none; }

/* ═══════════════════════════════════════════════
   INNER PAGES HERO
═══════════════════════════════════════════════ */
.tt-page-hero {
  background: linear-gradient(135deg, #fce4ec 0%, #f5d4e0 50%, #ede0f0 100%);
  padding: calc(var(--header-h) + 40px) 0 40px;
  text-align: center;
}

.tt-page-hero-title {
  font-family:Montserrat;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  color: var(--pink-dark);
  margin-bottom: 12px;
}

.tt-page-hero-sub {
  font-size: 0.95rem;
  color: var(--text-sec);
  max-width: 560px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════
   INFO PAGES (envios, cambios, faq)
═══════════════════════════════════════════════ */
.tt-info-block {
  background: #fff;
  border-radius: 16px;
  padding: 28px 32px;
  margin-bottom: 24px;
  border: 1px solid #f0d8e0;
}
.tt-info-title {
  font-family:Montserrat;
  font-size: 1.25rem;
  color: var(--pink-dark);
  margin: 0 0 12px;
}
.tt-info-block p { color: var(--text-sec); margin: 0 0 12px; line-height: 1.7; }
.tt-info-block ul { color: var(--text-sec); padding-left: 20px; line-height: 1.8; margin: 0; }
.tt-info-block li { margin-bottom: 4px; }

/* Lista de ciudades/precio de envío (envios.html) — conectada a Super Admin */
.tt-city-price-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 20px;
  border-top: 1px dashed #f0d8e0;
  padding-top: 16px;
}
.tt-city-price-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 0.86rem;
  color: var(--text-sec);
  margin-bottom: 0;
  padding: 4px 0;
}
.tt-city-price-val { color: var(--pink-dark); font-weight: 600; white-space: nowrap; }
.tt-city-price-loading, .tt-city-price-empty {
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-style: italic;
}
@media (max-width: 480px) {
  .tt-city-price-list { grid-template-columns: 1fr; }
}

.tt-faq-item {
  border-bottom: 1px solid #f0d8e0;
  padding: 20px 0;
}
.tt-faq-item:last-child { border-bottom: none; }

/* ═══════════════════════════════════════════════
   ABOUT PAGE
═══════════════════════════════════════════════ */
.tt-about-section { background: var(--bg); }

.tt-about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.tt-about-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
}

.tt-about-img .tt-img-placeholder {
  height: 100%;
  min-height: 400px;
}

.tt-about-content {}

.tt-about-greeting {
  font-family:Montserrat;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700;
  color: var(--pink-dark);
  margin-bottom: 8px;
}

.tt-about-subtitle {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
}

.tt-about-text {
  font-size: 0.95rem;
  color: var(--text-sec);
  line-height: 1.9;
  margin-bottom: 20px;
}

.tt-about-date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold-light);
  border: 1px solid var(--gold);
  border-radius: var(--radius-pill);
  padding: 8px 20px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--rose);
  margin-bottom: 24px;
  letter-spacing: 0.05em;
}

.tt-about-signature {
  font-family:Montserrat;
  font-size: 1.3rem;
  font-style: italic;
  color: var(--pink-dark);
  margin-top: 24px;
}

/* ═══════════════════════════════════════════════
   IMAGEN "BLOB" — mancha orgánica redondeada
═══════════════════════════════════════════════ */
.tt-blob-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  /* Como hijo de grid con align-items:center, sin un ancho explícito el
     navegador puede derivar el ancho a partir del alto disponible (que en
     esta fila lo define la columna de texto, mucho más alta) en vez de
     tomar el ancho real de su columna del grid — el resultado es una
     imagen mucho más ancha que su 1fr. width:100% fija qué dimensión manda:
     el ancho de la columna, y aspect-ratio deriva el alto a partir de eso.
     min-width:0 evita que el contenido interno reviente esa misma columna.
     overflow:visible (pisando el overflow:hidden de la regla base
     .tt-about-img más arriba en este archivo) es a propósito: el acento
     decorativo de ::before se dibuja un poco más grande que este
     contenedor para asomar completo por los costados — quien recorta la
     foto en sí es .tt-blob-shape, un nivel más adentro. */
  min-width: 0;
  overflow: visible;
}

.tt-blob-media .tt-blob-shape {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 63% 37% 54% 46% / 43% 47% 53% 57%;
  box-shadow: 0 30px 60px -20px rgba(173,63,103,0.35);
}

.tt-blob-media .tt-blob-shape img,
.tt-blob-media .tt-blob-shape .tt-img-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Segunda mancha, más chica y detrás, como acento decorativo — igual que la
   silueta clara detrás de la firma en el diseño de referencia. */
.tt-blob-media::before {
  content: '';
  position: absolute;
  inset: 6% -8% -8% 6%;
  background: var(--pink-pale);
  border-radius: 46% 54% 63% 37% / 57% 43% 57% 43%;
  z-index: -1;
}

@media (max-width: 640px) {
  .tt-blob-media .tt-blob-shape {
    border-radius: 32px;
  }
  .tt-blob-media::before {
    inset: 4% -5% -5% 4%;
    border-radius: 26px;
  }
}

/* ═══════════════════════════════════════════════
   NUESTRA MISIÓN — bloque invertido bajo la historia
═══════════════════════════════════════════════ */
.tt-about-mission-section { background: var(--surface-soft, var(--pink-pale)); }

.tt-about-mission-eyebrow {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}

.tt-about-mission-title {
  font-family:Montserrat;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700;
  color: var(--pink-dark);
  margin-bottom: 20px;
}

.tt-about-mission-text {
  font-size: 0.95rem;
  color: var(--text-sec);
  line-height: 1.9;
  margin-bottom: 16px;
}

/* ═══════════════════════════════════════════════
   CONTACT PAGE
═══════════════════════════════════════════════ */
.tt-contact-section { background: var(--bg); }

.tt-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.tt-contact-form-title {
  font-family:Montserrat;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.tt-contact-form-sub {
  font-size: 0.9rem;
  color: var(--text-sec);
  margin-bottom: 32px;
}

.tt-form-group { margin-bottom: 20px; }

.tt-form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 8px;
}

.tt-form-input,
.tt-form-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--text);
  background: var(--white);
  transition: border-color var(--transition);
  outline: none;
}

.tt-form-input:focus,
.tt-form-textarea:focus { border-color: var(--pink-mid); }

.tt-form-textarea { height: 140px; resize: vertical; }

.tt-contact-alt {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 40px;
  border: 1px solid var(--border);
}

.tt-contact-alt-title {
  font-family:Montserrat;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
}

.tt-contact-alt-desc {
  font-size: 0.9rem;
  color: var(--text-sec);
  line-height: 1.8;
  margin-bottom: 24px;
}

.tt-contact-wa-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #25d366;
  color: var(--white);
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: var(--transition);
}

.tt-contact-wa-link:hover { background: #128c3c; transform: translateY(-1px); }

.tt-contact-info-list { margin-top: 32px; }
.tt-contact-info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text-sec);
}
.tt-contact-info-item:last-child { border-bottom: none; }
.tt-contact-info-icon { font-size: 1.2rem; flex-shrink: 0; }

/* ═══════════════════════════════════════════════
   COLLECTIONS PAGE
═══════════════════════════════════════════════ */
.tt-colls-page-section { background: var(--bg); }

.tt-colls-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.tt-coll-page-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.tt-coll-page-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.tt-coll-page-img {
  height: 240px;
  display: block;
  overflow: hidden;
  position: relative;
  background: transparent;
  transition: transform 0.4s ease;
}
.tt-coll-page-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  display: block;
}

.tt-coll-page-card:hover .tt-coll-page-img { transform: scale(1.04); }

.tt-coll-page-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tt-coll-page-initial {
  font-family:Montserrat;
  font-size: 2rem;
  color: var(--pink);
  margin-bottom: 8px;
}

.tt-coll-page-name {
  font-family:Montserrat;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 8px;
}

.tt-coll-page-desc {
  font-size: 0.85rem;
  color: var(--text-sec);
  line-height: 1.7;
  flex: 1;
  margin-bottom: 16px;
}

/* ═══════════════════════════════════════════════
   PRODUCT DETAIL PAGE
═══════════════════════════════════════════════ */
.tt-product-page { background: var(--bg); padding: 32px 0 44px; }

/* #product-loading, #product-not-found y #product-load-error son estados
   transitorios que se muestran antes de que #product-grid (con la galería
   en aspect-ratio 3/4) se revele. Sin una altura mínima cercana a la de la
   grilla final, el salto entre "spinner corto" y "grilla alta" es un CLS
   real y grande — se midió hasta 0.96 en product.html. La medida es
   aproximada a propósito (no exacta): alcanza con que el salto quede chico,
   no con clavar el pixel exacto. */
#product-loading,
#product-not-found,
#product-load-error {
  min-height: 70vh;
  box-sizing: border-box;
}

.tt-product-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.tt-product-gallery {}

.tt-gallery-main {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3/4;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  margin-bottom: 12px;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  font-family: "Montserrat";
  box-shadow: 0 20px 44px rgba(139,38,66,.12), 0 2px 8px rgba(139,38,66,.05);
}
.tt-gallery-main img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  display: block;
}

.tt-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.tt-gallery-thumb {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  padding: 0;
  background: transparent;
  transition: border-color var(--transition);
}

.tt-gallery-thumb.active { border-color: var(--pink-dark); box-shadow: 0 0 0 3px rgba(173,63,103,.14); }

.tt-gallery-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
}


.tt-product-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e8f5e9;
  color: #2e7d32;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
}

.tt-product-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dot-color, #4caf50);
}

.tt-product-detail-cat {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}

/* .tt-product-badge is also used on grid cards, absolutely positioned over
   the product photo — but here it sits inline in the info column with the
   rest of the text, so it must not inherit that absolute positioning
   (otherwise it escapes to the nearest positioned ancestor, which floats it
   to the top-left of the page instead of next to the price). */
#product-badge-label.tt-product-badge {
  position: static;
  display: inline-block;
}

.tt-product-detail-name {
  font-family:Montserrat;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tt-product-detail-price {
  font-family:Montserrat;
  font-size: 2rem;
  font-weight: 700;
  color: var(--pink-dark);
  margin-bottom: 24px;
}

.tt-product-detail-desc {
  font-size: 0.9rem;
  color: var(--text-sec);
  line-height: 1.9;
  margin-bottom: 28px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
}

.tt-product-variants { margin-bottom: 28px; }

.tt-variant-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 10px;
}

.tt-variant-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tt-variant-option {
  padding: 6px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  background: none;
  color: var(--text);
}

.tt-variant-option:hover,
.tt-variant-option.active {
  border-color: var(--pink-dark);
  color: var(--pink-dark);
  background: var(--pink-pale);
}

/* Loading spinner */
.tt-prod-loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--pink-pale);
  border-top-color: var(--pink-dark);
  border-radius: 50%;
  animation: tt-spin 0.8s linear infinite;
  margin: 0 auto;
}
@keyframes tt-spin { to { transform: rotate(360deg); } }

.tt-product-state {
  text-align: center;
  padding: 72px 20px;
}

.tt-product-state-icon {
  color: var(--pink-dark);
  font-size: 2.5rem;
  margin-bottom: 14px;
}

.tt-product-state h2 {
  color: var(--pink-dark);
  font-size: clamp(1.35rem, 4vw, 1.85rem);
  margin-bottom: 10px;
}

.tt-product-state p {
  color: var(--text-sec);
  line-height: 1.6;
  margin: 0 auto 22px;
  max-width: 520px;
}

/* Quantity selector */
.tt-qty-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.tt-qty-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  min-width: 60px;
}

.tt-qty-selector {
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: var(--radius-pill);
  background: var(--pink-pale);
  padding: 3px;
}

.tt-qty-btn {
  width: 38px;
  height: 38px;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--pink-dark);
  background: var(--white);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.15s ease, background var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.tt-qty-btn:hover { background: var(--white); transform: translateY(-1px); }
.tt-qty-btn:active { transform: scale(0.94); }
.tt-qty-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

.tt-qty-val {
  min-width: 40px;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
}

/* "Solo X disponibles" — la clienta pidió que quede solo el selector de
   cantidad, sin esta línea aparte debajo. */
.tt-qty-stock { display: none; }

/* Full-width action buttons */
.tt-btn-primary-full {
  width: 100%;
  background: var(--pink-dark);
  color: var(--white);
  border: 2px solid var(--pink-dark);
  padding: 16px 24px;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 34px rgba(139,38,66,.18), 0 2px 8px rgba(139,38,66,.07);
}
.tt-btn-primary-full:hover { background: var(--rose); border-color: var(--rose); transform: translateY(-1px); }
.tt-btn-primary-full:active { transform: translateY(0); box-shadow: 0 6px 16px rgba(139,38,66,.16); }

.tt-btn-outline-full {
  width: 100%;
  background: transparent;
  color: var(--pink-dark);
  border: 2px solid var(--pink-dark);
  padding: 16px 24px;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(139,38,66,.08);
}
.tt-btn-outline-full:hover { background: var(--pink-dark); color: var(--white); transform: translateY(-1px); }
.tt-btn-outline-full:active { transform: translateY(0); }

/* Added-to-cart toast */
.tt-added-toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 16px 20px;
  z-index: 9999;
  min-width: 280px;
  max-width: 90vw;
  animation: tt-toast-in 0.3s ease;
}
@keyframes tt-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.tt-added-toast-msg {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}
.tt-added-toast-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e8f5e9;
  color: #2e7d32;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.tt-added-toast-actions {
  display: flex;
  gap: 8px;
}
.tt-added-toast-btn {
  flex: 1;
  padding: 9px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  letter-spacing: 0.06em;
  transition: var(--transition);
  border: none;
}
.tt-added-toast-continue {
  background: var(--card-bg);
  color: var(--text-sec);
  border: 1.5px solid var(--border);
}
.tt-added-toast-continue:hover { background: var(--border); }
.tt-added-toast-checkout {
  background: var(--pink-dark);
  color: var(--white) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tt-added-toast-checkout:hover { background: var(--rose); }

/* Variant required shake */
@keyframes tt-shake {
  0%, 100% { transform: none; }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.tt-variant-required {
  border-color: #e53935 !important;
  animation: tt-shake 0.3s ease;
}
.tt-variant-required-msg {
  color: #e53935;
  font-size: 0.75rem;
  margin-top: 6px;
  display: block;
}

.tt-product-actions-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.tt-product-name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.tt-product-name-row .tt-product-detail-name { margin-bottom: 0; flex: 1; }

.tt-product-favorite-icon {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--pink);
  border-radius: 50%;
  background: var(--pink-pale);
  color: var(--pink-dark);
  font-size: 1.3rem;
  cursor: pointer;
  margin-top: 4px;
  padding: 0;
  line-height: 0;
}
.tt-product-favorite-icon.is-favorite { background: #f8dce7; border-color: var(--pink-dark); }

.tt-product-wa-link {
  min-width: 44px;
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-family: "Montserrat";
  font-size: 0.75rem;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tt-product-trust-badges {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  /* El panel que envuelve esto (.tt-product-info-panel) queda blanco puro vía
     --color-background-surface con !important (product-maintenance.css) —
     un sistema de variables totalmente aparte del --white de acá abajo (que
     tema-unificado-tintin.css reescribe a un tono rosado de su propio "surface").
     Sin esto, el hueco entre las dos píldoras de abajo mostraba ese rosado en
     vez del blanco del panel — se fuerza el mismo blanco literal para que no
     se note la costura. */
  background: #fff;
}

.tt-trust-badge-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #fff !important;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
/* Redundante a propósito junto con el gap de .tt-product-trust-badges: si
   algo neutraliza el gap del contenedor, las dos tarjetas igual no quedan
   pegadas — nunca deben tocarse. */
.tt-trust-badge-item:not(:last-child) { margin-bottom: 0; }

.tt-trust-badge-icon { font-size: 1.1rem; }

.tt-trust-badge-text {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-sec);
  line-height: 1.3;
}

/* Related Products */
.tt-related-section {
  background: var(--card-bg);
  padding: 44px 0;
}

.tt-accordion-chevron { display: none; }

.tt-related-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  margin-bottom: 32px;
}

.tt-related-refresh {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1.5px solid var(--pink-dark);
  border-radius: 50%;
  background: var(--white);
  color: var(--pink-dark);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.tt-related-refresh:hover {
  color: var(--white);
  background: var(--pink-dark);
  transform: rotate(20deg);
}

.tt-related-refresh:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.tt-related-refresh svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tt-related-refresh.is-refreshing svg {
  animation: tt-related-spin 0.75s linear infinite;
}

@keyframes tt-related-spin {
  to { transform: rotate(360deg); }
}

.tt-related-status {
  min-height: 1px;
  margin: 0;
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.tt-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}

.tt-related-slot {
  min-width: 0;
  display: flex;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.tt-related-slot > .tt-product-card {
  width: 100%;
  height: 100%;
}

.tt-related-grid .tt-product-info {
  align-items: center;
  text-align: center;
}

.tt-related-slot.is-leaving {
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  pointer-events: none;
}

.tt-related-slot.is-entering {
  opacity: 0;
  transform: translateY(-10px) scale(0.985);
}

/* ═══════════════════════════════════════════════
   BREADCRUMB
═══════════════════════════════════════════════ */
.tt-breadcrumb {
  padding: 16px 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* .tt-header is position:fixed, so it's out of normal flow and would
   otherwise overlap the breadcrumb (the first thing in the page below it).
   Only needed where the fixed header is actually visible — it's hidden
   entirely at <=768px (mobile uses the tabbar instead), so the breadcrumb
   there keeps its normal flush-top spacing. */
@media (min-width: 769px) {
  .tt-breadcrumb {
    margin-top: calc(var(--header-h) + 24px);
  }
}

.tt-breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-width: 24px;
  min-height: 24px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition);
}
.tt-breadcrumb a:hover { color: var(--pink-dark); }
.tt-breadcrumb span { color: var(--text-sec); }
.tt-breadcrumb span#breadcrumb-product { color: var(--pink-dark); font-weight: 700; }

/* ═══════════════════════════════════════════════
   RESPONSIVE — 1025px (Desktop)
═══════════════════════════════════════════════ */
/* El header desktop (encabezado-escritorio.css, fuente de verdad >=1025px)
   renderiza a 88px fijos. --header-h debe reflejar ese valor real para que
   los offsets que dependen de la variable (hero, breadcrumb, checkout,
   page-hero) no queden por debajo del header fijo. */
@media (min-width: 1025px) {
  :root { --header-h: 88px; }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — 1024px (Tablet)
═══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  :root { --header-h: 64px; }

  /* Quick cats hidden on all screen sizes */

  .tt-collections-grid { grid-template-columns: repeat(4, 1fr); }
  .tt-products-grid { grid-template-columns: repeat(3, 1fr); }

  .tt-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }

  .tt-editorial-content { padding: 48px 40px; }
  .tt-watch-feature-content { padding: 48px 40px; }

  .tt-about-grid { gap: 48px; }
  .tt-contact-grid { gap: 40px; }
  .tt-colls-page-grid { grid-template-columns: repeat(2, 1fr); }

  .tt-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — TABLET ONLY (769px–1024px)
   Rango exclusivo: no se solapa con el bloque mobile (≤768px) de abajo. El
   header de esta franja vive acá, escopado siempre a
   #tt-header-desktop-tablet — no existe ningún header superior de mobile
   (ver bloque ≤768px de abajo, cuya única navegación persistente es
   .tt-tabbar).
═══════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  /* 3-zone header: hamburguesa IZQ | logo CENTRO | acciones DER. El logo se
     centra con position:absolute + translate(-50%,-50%) sobre
     .tt-header-inner (ya con su propio ancho bien definido). Con grid
     1fr/auto/1fr, el lado de acciones (3 íconos) tiene más ancho mínimo de
     contenido que el de hamburguesa (1 ícono) — con esta técnica el logo
     queda centrado sí o sí, sin importar cuánto pesen los lados. */
  #tt-header-desktop-tablet .tt-header-inner {
    padding: 0 16px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
  }
  #tt-header-desktop-tablet .tt-menu-toggle {
    display: flex;
    order: 1;
    width: 44px;
    height: 44px;
    padding: 0;
    align-items: center;
    justify-content: center;
  }
  #tt-header-desktop-tablet .tt-logo-link {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  #tt-header-desktop-tablet .tt-logo-img { height: 44px; }
  #tt-header-desktop-tablet .tt-header-actions {
    order: 3;
    gap: 4px;
  }
  #tt-header-desktop-tablet .tt-header-actions button,
  #tt-header-desktop-tablet .tt-header-actions a {
    width: 44px;
    height: 44px;
  }
  /* Los links del panel viven dentro de .tt-header-actions, pero no son
     iconos del header. La regla anterior los comprimía a 44px y cortaba
     "Ingresar con Google" exactamente en el breakpoint tablet. */
  #tt-header-desktop-tablet .tt-account-panel .tt-account-item {
    width: 100%;
    height: auto;
    min-height: 44px;
    justify-content: flex-start;
    overflow: visible;
  }
  #tt-header-desktop-tablet .tt-nav { display: none; }

  /* Tres columnas dejan cada tarjeta demasiado angosta para dos CTAs en
     línea. En tablet se apilan, conservan 44px táctiles y nunca desbordan. */
  .tt-products-grid .tt-product-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .tt-products-grid .tt-product-actions .tt-btn {
    width: 100%;
    min-height: 44px;
  }

  .tt-hero {
    display: grid;
    grid-template-rows: 1fr 1fr;
    min-height: 640px;
  }
  .tt-hero-content {
    grid-row: 2;
    align-self: start;
    justify-self: center;
    max-width: 620px;
    width: 100%;
    padding: 40px 32px 56px;
    text-align: center;
  }
  .tt-hero-eyebrow { justify-content: center; }
  .tt-hero-pills { justify-content: center; }
  .tt-hero-actions { justify-content: center; }
  .tt-hero-img { object-position: center; }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — 768px (Large Mobile)
═══════════════════════════════════════════════ */
@media (max-width: 768px) {
  html { overflow-x: hidden; max-width: 100%; }
  body { overflow-x: clip; max-width: 100%; }
  * { box-sizing: border-box; }
  .section { padding: 36px 0; }
  .section-sm { padding: 24px 0; }
  .tt-trust-bar { padding: 24px 0; }
  .tt-related-section { padding: 36px 0; }

  /* Hide desktop/tablet header on mobile — .tt-tabbar is the only
     persistent navigation in this range. Belt-and-suspenders: also strips
     pointer-events/visibility so a hidden header can never receive clicks
     even if some future rule only touched display. */
  .tt-header {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Refuerzo explícito: el nav de escritorio (TIENDA/NOSOTROS/CONTACTO y su
     dropdown) no puede aparecer en este rango bajo ninguna circunstancia.
     No depende de la regla .tt-nav{display:none} del bloque de 1024px de
     arriba — queda garantizado acá mismo, en el rango exacto que importa. */
  #tt-nav-desktop-tablet.tt-nav { display: none !important; }

  .tt-tabbar { display: flex; }
  /* Sigue al tabbar cuando el safe-area lo empuja hacia arriba. */
  .tt-wa-float {
    bottom: max(88px, calc(72px + env(safe-area-inset-bottom, 0px)));
    right: 16px; width: 48px; height: 48px;
  }

  .tt-trust-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }

  .tt-editorial { grid-template-columns: 1fr; }
  .tt-editorial .tt-editorial-content { padding: 40px 24px; }
  .tt-editorial.reverse .tt-editorial-img { order: 0; }
  .tt-editorial.reverse .tt-editorial-content { order: 1; }

  .tt-collections-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .tt-look-grid { grid-template-columns: 1fr; }

  .tt-watch-feature { grid-template-columns: 1fr; }
  .tt-watch-feature-content { padding: 40px 24px; }
  .tt-watch-feature-img { min-height: 280px; }

  .tt-products-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .tt-reviews-grid { grid-template-columns: 1fr; }

  .tt-footer-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .tt-footer { padding: 40px 0 calc(32px + env(safe-area-inset-bottom)); }

  .tt-about-grid { grid-template-columns: 1fr; gap: 32px; }
  .tt-about-img { aspect-ratio: 16/9; }
  .tt-blob-media { aspect-ratio: 5/4; }
  /* En mobile la imagen siempre va arriba, sin importar el orden del HTML
     en cada bloque (texto-imagen o imagen-texto en desktop) — mismo
     criterio que .tt-editorial. */
  .tt-about-grid .tt-about-img { order: 0; }
  .tt-about-grid .tt-about-content { order: 1; }

  .tt-contact-grid { grid-template-columns: 1fr; }

  .tt-colls-page-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  .tt-product-detail-grid { grid-template-columns: 1fr; gap: 28px; }
  .tt-product-gallery { width: min(100%, 620px); margin: 0 auto; }
  .tt-product-trust-badges { grid-template-columns: 1fr; }
  .tt-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .tt-related-grid .tt-product-info { padding: 10px; }
  .tt-related-grid .tt-product-actions { flex-direction: column; gap: 6px; }
  .tt-related-grid .tt-product-actions .tt-btn {
    width: 100%;
    padding: 8px 6px;
    font-size: 0.68rem;
    letter-spacing: 0.02em;
  }

  /* Mobile hero — bloque de contenido centrado horizontalmente y apoyado
     hacia abajo (no en el medio vertical del banner), con un margen
     inferior chico y parejo. min-height se mantiene igual que antes; sólo
     cambia el alineado. */
  .tt-hero {
    min-height: 620px;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
  }
  .tt-hero-content {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    /* 100px: la tabbar en esta franja (481-768px) muestra las etiquetas de
       texto bajo cada ícono y mide ~68.8px + 16px de separación del borde
       = ~84.8px de altura real desde el borde inferior. 100px conserva un
       margen táctil visible de unos 15px sin superponer los botones. */
    padding: 0 clamp(18px, 5vw, 32px) 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .tt-hero-eyebrow { justify-content: center; }
  .tt-hero-title,
  .tt-hero-subtitle { width: 100%; text-align: center; }
  .tt-hero-actions { justify-content: center; }
  .tt-hero-img { object-position: center top; }
  .tt-hero-title { font-size: clamp(3rem, 10vw, 5rem); }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — 480px (Small Mobile)
═══════════════════════════════════════════════ */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .section { padding: 26px 0; }
  .section-sm { padding: 18px 0; }
  .tt-trust-bar { padding: 20px 0; }
  .tt-related-section { padding: 30px 0; }
  .tt-page-hero { padding: calc(var(--header-h) + 32px) 0 30px; }

  /* Mobile hero pequeño — mismo centrado horizontal y apoyo hacia abajo
     que el bloque de 768px de arriba, sólo ajusta min-height/padding/
     tamaño de título para pantallas chicas y apila los botones (siguen
     centrados, nunca align-items:flex-start). */
  .tt-hero { min-height: 560px; align-items: flex-end; justify-content: center; }
  /* 92px: acá la tabbar esconde las etiquetas de texto (span{display:none}
     más abajo) y mide ~56px + 16px de separación = ~72px reales desde el
     borde inferior. 92px deja cerca de 16px entre la navegación y el CTA. */
  .tt-hero-content { padding: 0 20px 92px; }
  .tt-hero-img { object-position: center top; }
  .tt-hero-title { font-size: clamp(2.2rem, 8vw, 3rem); }
  .tt-hero-actions { flex-direction: column; justify-content: center; align-items: center; gap: 10px; }
  .tt-hero-actions .tt-btn { width: 100%; max-width: 280px; justify-content: center; }

  .tt-collections-grid { grid-template-columns: repeat(2, 1fr); }

  .tt-dropdown { width: min(95vw, 400px); }
  .tt-dropdown-grid { grid-template-columns: repeat(3, 1fr); }

  .tt-footer-grid { grid-template-columns: 1fr; }

  /* Sin label (span oculto abajo) el botón sólo tenía el ícono + padding
     vertical, quedando en ~36px de alto — 10px sube el touch target a 40px
     real, dentro del mínimo 40-44px pedido. */
  .tt-tabbar-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
  }
  .tt-tabbar-btn span { display: block; }

  .tt-editorial-content { padding: 32px 20px; }
  .tt-watch-feature-content { padding: 32px 20px; }

  .tt-colls-page-grid { grid-template-columns: 1fr; }
  .tt-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

  .tt-product-detail-grid { gap: 22px; }
  .tt-product-detail-name { font-size: 1.6rem; }
  .tt-product-page { padding: 20px 0 30px; }
  .tt-qty-wrap { flex-wrap: wrap; gap: 10px 12px; }
  .tt-related-header { justify-content: space-between; text-align: left; margin-bottom: 26px; }
  .tt-related-refresh { width: 44px; height: 44px; flex-basis: 44px; }

  #related-trigger {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    cursor: pointer;
  }
  #related-trigger .tt-section-sub,
  #related-trigger .tt-section-title { grid-column: 1; }
  #related-trigger .tt-accordion-chevron {
    display: block;
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 20px;
    height: 20px;
    color: var(--pink-dark);
    transition: transform 0.2s ease;
  }
  #related-trigger[aria-expanded="false"] .tt-accordion-chevron { transform: rotate(-90deg); }
  .tt-related-section[data-collapsed="true"] #related-status,
  .tt-related-section[data-collapsed="true"] #related-grid { display: none; }

  #specs-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin: 18px 0 0;
    padding: 12px 0;
    border: 0;
    border-top: 1px solid var(--border, #eadde2);
    background: none;
    font: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text);
    cursor: pointer;
  }
  #specs-trigger .tt-accordion-chevron {
    display: block;
    width: 18px;
    height: 18px;
    color: var(--pink-dark);
    transition: transform 0.2s ease;
  }
  #specs-trigger[aria-expanded="false"] .tt-accordion-chevron { transform: rotate(-90deg); }
  .tt-specs-block[data-collapsed="true"] #product-specifications { display: none; }
  .tt-added-toast { width: calc(100vw - 32px); min-width: 0; bottom: 82px; }
  .tt-added-toast-actions { flex-wrap: wrap; }
  .tt-added-toast-btn { min-width: 120px; min-height: 40px; }
  .tt-share-btn { min-height: 40px; }

  /* Product card: stack buttons vertically on small phones */
  .tt-product-actions { flex-direction: column; gap: 6px; }
  .tt-product-actions .tt-btn { width: 100%; }

  /* Look combinator actions: long button labels overflow the viewport with
     nowrap text — stack and let them wrap instead of clipping edge-to-edge */
  .tt-look-actions { flex-direction: column; align-items: stretch; }
  .tt-look-actions .tt-btn { width: 100%; white-space: normal; text-align: center; }
}

@media (max-width: 380px) {
  .tt-related-section { padding: 30px 0; }
  .tt-related-header .tt-section-title { font-size: clamp(1.45rem, 8vw, 2rem); }
  .tt-product-actions-panel .tt-btn { padding-inline: 14px; letter-spacing: 0.06em; }
  .tt-product-share { align-items: stretch; }
  .tt-share-btn { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .tt-related-slot,
  .tt-related-refresh {
    transition: none;
  }

  .tt-related-refresh.is-refreshing svg {
    animation: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   FOCUS VISIBLE — keyboard navigation (WCAG)
══════════════════════════════════════════════════════════════ */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--pink-dark);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.tt-btn:focus-visible,
.tt-btn-icon:focus-visible {
  outline: 2px solid var(--pink-dark);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(184,76,114,0.18);
}
.tt-product-card:focus-visible,
.tt-coll-card:focus-visible,
.tt-coll-page-card:focus-visible {
  outline: 2px solid var(--pink-dark);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}
.tt-variant-option:focus-visible,
.tt-gallery-thumb:focus-visible,
.tt-filtro-btn:focus-visible,
.cat-filter-option:focus-visible {
  outline: 2px solid var(--pink-dark);
  outline-offset: 2px;
}

/* ── Button missing states ── */
.tt-btn:active { transform: translateY(1px); box-shadow: none; }
.tt-btn:disabled,
.tt-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   BACK TO TOP
══════════════════════════════════════════════════════════════ */
.tt-back-to-top {
  position: fixed;
  bottom: 96px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 895;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s, color 0.2s;
  color: var(--pink-dark);
}
.tt-back-to-top.visible { opacity: 1; transform: translateY(0); }
.tt-back-to-top:hover {
  background: var(--pink-dark);
  color: var(--white);
  border-color: var(--pink-dark);
  transform: translateY(-2px);
}
/* Apilado sobre .tt-wa-float, con el mismo desplazamiento por safe-area. */
@media (max-width: 768px) {
  .tt-back-to-top {
    bottom: max(148px, calc(132px + env(safe-area-inset-bottom, 0px)));
    right: 16px;
  }
}

/* ══════════════════════════════════════════════════════════════
   LIGHTBOX
══════════════════════════════════════════════════════════════ */
.tt-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10,5,8,0.94);
  z-index: var(--z-lightbox);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
  padding: 20px;
}
.tt-lightbox.open { opacity: 1; pointer-events: all; }
.tt-lightbox-img {
  max-width: min(88vw, 820px);
  max-height: 82vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  transform: scale(0.94);
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
  user-select: none;
}
.tt-lightbox.open .tt-lightbox-img { transform: scale(1); }
.tt-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-pill);
  color: white;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  backdrop-filter: blur(4px);
}
.tt-lightbox-close:hover { background: rgba(255,255,255,0.22); }
.tt-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-pill);
  color: white;
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
  backdrop-filter: blur(4px);
}
.tt-lightbox-nav:hover { background: rgba(255,255,255,0.22); }
.tt-lightbox-prev { left: 16px; }
.tt-lightbox-next { right: 16px; }
.tt-lightbox-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.7);
  font-size: 0.78rem;
  font-family:Montserrat;
  letter-spacing: 0.06em;
}
.tt-gallery-main { cursor: zoom-in; }
.tt-gallery-main:disabled { cursor: default; }
@media (max-width: 768px) {
  .tt-lightbox-nav { display: none; }
  .tt-lightbox-img { max-height: 75vh; }
}

/* ══════════════════════════════════════════════════════════════
   SHARE BUTTON
══════════════════════════════════════════════════════════════ */
.tt-product-share {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.tt-share-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  width: 100%;
}
.tt-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--text-sec);
  font-size: 0.72rem;
  font-weight: 500;
  font-family:Montserrat;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  min-height: 44px;
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tt-share-btn:hover {
  border-color: var(--pink-dark);
  color: var(--pink-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.tt-share-btn-wa {
  background: var(--whatsapp);
  border-color: var(--whatsapp);
  color: var(--white) !important;
}
.tt-share-btn-wa:hover {
  background: var(--whatsapp-h);
  border-color: var(--whatsapp-h);
  color: var(--white) !important;
}

/* Angosto: las 3 acciones (Compartir/WhatsApp/Copiar enlace) con su texto
   completo no entran en una sola fila en un teléfono típico — en vez de
   partirse en dos filas con un botón suelto ocupando todo el ancho, se
   vuelven botones circulares solo-ícono (con aria-label para lectores de
   pantalla), como el tray de compartir de iOS: compactas, parejas, y
   siempre en una sola fila sin importar el ancho. */
@media (max-width: 460px) {
  .tt-share-btn {
    flex: 0 0 auto;
    width: 44px;
    padding: 0;
    gap: 0;
  }
  .tt-share-btn-label { display: none; }
  .tt-product-share { justify-content: flex-start; }
}

/* ══════════════════════════════════════════════════════════════
   FAQ ACCORDION
══════════════════════════════════════════════════════════════ */
.tt-faq-item {
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.tt-faq-q {
  padding: 15px 0;
  font-weight: 600;
  font-size: 0.91rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: var(--text);
  transition: color 0.2s;
  user-select: none;
  list-style: none;
}
.tt-faq-q::after {
  content: '+';
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--pink-dark);
  flex-shrink: 0;
  line-height: 1;
  transition: transform 0.28s ease;
}
.tt-faq-item.tt-faq-open .tt-faq-q::after { transform: rotate(45deg); }
.tt-faq-item.tt-faq-open .tt-faq-q { color: var(--pink-dark); }
.tt-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s ease;
  font-size: 0.87rem;
  color: var(--text-sec);
  line-height: 1.75;
}
.tt-faq-item.tt-faq-open .tt-faq-a {
  max-height: 400px;
  padding-bottom: 15px;
}

/* ══════════════════════════════════════════════════════════════
   CHECKOUT TRUST BAR
══════════════════════════════════════════════════════════════ */
.ck-trust-bar {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 14px 0 4px;
  flex-wrap: wrap;
}
.ck-trust-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  color: var(--text-muted);
  font-family:Montserrat;
}

/* ══════════════════════════════════════════════════════════════
   SEARCH RESULTS — keyboard highlight
══════════════════════════════════════════════════════════════ */
.tt-search-result-item { cursor: pointer; }
.tt-search-result-item.tt-search-focus {
  background: var(--pink-pale);
  border-radius: var(--radius-sm);
}

/* ══════════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION
══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .sr { opacity: 1 !important; transform: none !important; }
  .tt-lightbox-img { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   INTRO SPLASH (home) y PAGE LOADER (todas las demás páginas)
   viven inline en index.html y se auto-inyectan desde
   js/cargador-pagina.js respectivamente — nunca acá, para que no haya
   dos definiciones de #tt-intro/#tt-loader compitiendo entre sí.
═══════════════════════════════════════════════════════════ */

/* Scroll reveal: lo maneja js/quality/revelado-desplazamiento-global.js (.tt-auto-reveal /
   .tt-visible), cargado global vía js/cargador-pagina.js — este bloque quedó
   retirado porque duplicaba esa misma animación con su propio sistema
   (.tt-reveal / .tt-visible) sobre los mismos elementos. */
@media (prefers-reduced-motion: reduce) {
  .tt-hero-actions .tt-btn:not(.tt-btn-outline) { animation: none; }
}

/* Mini mobile: el ancho se resuelve en el propio componente, sin ocultar
   desbordes del documento. */
/* Los estados de sincronización son telemetría operativa. Permanecen en el DOM
   y siguen actualizándose, pero el público y las cuentas cliente no los ven.
   auth-nav habilita la clase únicamente para roles con acceso al panel. */
:where(
  [data-tt-operational-status],
  .tt-cart-sync-status,
  #tt-catalog-sync-state,
  #tt-collections-sync-state,
  #tt-product-sync-state,
  #tt-checkout-sync-state,
  #tt-profile-network
) {
  display: none !important;
}

html.tt-staff-session :where(
  [data-tt-operational-status],
  .tt-cart-sync-status,
  #tt-catalog-sync-state,
  #tt-collections-sync-state,
  #tt-product-sync-state,
  #tt-checkout-sync-state,
  #tt-profile-network
) {
  display: flex !important;
}

@media (prefers-reduced-motion: reduce) {
  .tt-nav > a,
  .tt-nav-dropdown > button,
  .tt-nav > a::after,
  .tt-nav > .tt-nav-dropdown > button::after,
  .tt-header-actions button,
  .tt-header-actions a,
  .tt-tabbar-btn::after { transition: none !important; }
  .tt-nav > a.active,
  .tt-nav-dropdown > button.active,
  .tt-header-actions button.active,
  .tt-header-actions a.active { transform: none !important; }
}

@media (max-width: 360px) {
  .tt-hero-actions {
    width: 100%;
    align-items: stretch;
  }
  .tt-hero-actions .tt-btn,
  .tt-btn-lg {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-inline: 16px;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }
  .tt-trust-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .tt-trust-item {
    width: 100%;
    padding: 20px 14px;
  }
}