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

/* ── CSS Variables ── */
:root {
  --bg:          #fcf0f6;
  --bg-soft:     #fcf0f6;
  --card-bg:     #fef5f8;
  --pink-pale:   #fce4ec;
  --pink:        #e8a0b4;
  --pink-mid:    #d4748e;
  --pink-dark:   #b84c72;
  --rose:        #8b2642;
  /* --gold/--text*: css/tintin-unified-theme.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: 767px) {
  .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: 80px 0; }
.section-sm { padding: 48px 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 {
  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);
  transition: color var(--transition), background var(--transition), border-color var(--transition);
  white-space: nowrap;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  cursor: pointer;
}

.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);
}

.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: var(--radius-md);
  padding: 8px;
  width: min(240px, 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 12px 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 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: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
  font-family:Montserrat;
  white-space: nowrap;
  transition: var(--transition);
  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: 6px 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.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);
}

/* #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); }

/* 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(3, 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: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--bg);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition: background 0.2s;
}
.tt-mobile-user-login:hover,
.tt-mobile-user-profile:hover { background: var(--pink-pale); }

.tt-mobile-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pink-pale);
  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: 10px 16px;
  border-radius: var(--radius-md);
  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 0.2s;
}
.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;
}

.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%;
  }
}

/* Tablet real (iPad, Android tablets) — el contenido arranca desde la mitad del
   hero hacia abajo, centrado, en vez de quedar centrado en todo el alto como en desktop. */
@media (min-width: 769px) and (max-width: 1024px) {
  .tt-hero {
    align-items: flex-end;
    justify-content: center;
    text-align: center;
  }
  .tt-hero-content {
    height: 50%;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 48px 56px;
  }
  .tt-hero-pills,
  .tt-hero-actions {
    justify-content: center;
  }
}

.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;
}

/* 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;
  gap: 14px;
  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); }
}
/* Outline hero button: dark border / dark text */
.tt-hero-actions .tt-btn-outline {
  border-color: var(--text);
  color: var(--text);
}
.tt-hero-actions .tt-btn-outline:hover {
  background: rgba(0,0,0,0.06);
}

/* ═══════════════════════════════════════════════
   TRUST BAR
═══════════════════════════════════════════════ */
.tt-trust-bar {
  background: var(--bg);
  padding: 48px 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;
  color: var(--white);
  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;
}

.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-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;
  text-decoration: none;
  cursor: pointer;
  animation: ttn-wa-breathe 3.2s ease-in-out 2s infinite;
}

@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: translateY(-4px) scale(1.08);
  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 .tt-collections-sheet (960) y su backdrop (959): el
     dropup de colecciones cubre esta zona de la pantalla, y sin esto
     tabbar-tienda queda tapado y no se puede volver a tocar para cerrarlo. */
  z-index: 970;
  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;
}

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

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

/* Cookies y privacidad: tarjeta discreta, sin overlay ni bloqueo de navegación. */
.tt-privacy-consent {
  position: fixed;
  z-index: 2200;
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  width: min(430px, calc(100vw - 36px));
  padding: 18px;
  border: 1px solid rgba(173,63,103,.16);
  border-radius: 22px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 18px 54px rgba(38,24,30,.16);
  color: var(--text);
  font-family:Montserrat;
  box-sizing: border-box;
  animation: ttPrivacyIn .28s cubic-bezier(.2,.8,.2,1) both;
}
.tt-privacy-consent[hidden] { display: none !important; }
.tt-privacy-heading { display: flex; align-items: center; gap: 11px; padding-right: 24px; }
.tt-privacy-icon {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 13px;
  background: var(--pink-pale);
  font-size: 19px;
}
.tt-privacy-eyebrow {
  color: var(--pink-dark);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.tt-privacy-heading h2 { margin: 2px 0 0; color: var(--text); font: 700 1.03rem/1.25 var(--font-display); }
.tt-privacy-summary { margin: 13px 0 15px; color: var(--text-sec); font-size: .77rem; line-height: 1.58; }
.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 14px;
  border: 0;
  font: 800 .68rem/1.2 var(--font-body);
  letter-spacing: .035em;
  cursor: pointer;
}
.tt-privacy-btn-primary { background: var(--pink-dark); color: #fff; box-shadow: 0 8px 20px rgba(173,63,103,.18); }
.tt-privacy-btn-secondary { border: 1px solid rgba(173,63,103,.28); background: #fff; color: var(--text); }
.tt-privacy-link-btn { padding-inline: 6px; background: transparent; color: var(--pink-dark); text-decoration: underline; text-underline-offset: 3px; }
.tt-privacy-close {
  position: absolute;
  top: 7px;
  right: 7px;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-sec);
  font-size: 20px;
  cursor: pointer;
}
.tt-privacy-details { margin-top: 15px; padding-top: 14px; 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: .76rem; }
.tt-privacy-option span { color: var(--text-sec); font-size: .67rem; line-height: 1.4; }
.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: 800; white-space: nowrap; }
.tt-privacy-details-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 13px; }
.tt-privacy-details-actions a { color: var(--pink-dark); font-size: .7rem; font-weight: 700; text-underline-offset: 3px; }
@keyframes ttPrivacyIn { from { opacity: 0; transform: translateY(12px); } 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: 16px;
    border-radius: 20px;
  }
  .tt-privacy-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .tt-privacy-link-btn { grid-column: 1 / -1; }
  .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(4, 1fr);
  gap: 1px;
  background: var(--border);
}

.tt-sheet-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 8px;
  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: 46px;
  height: 46px;
  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-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;
  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-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) + 48px) 0 64px;
  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; }
.tt-faq-q {
  font-weight: 600;
  color: var(--pink-dark);
  margin-bottom: 8px;
  font-size: 1rem;
}
.tt-faq-a { color: var(--text-sec); line-height: 1.7; }

/* ═══════════════════════════════════════════════
   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;
}

/* ═══════════════════════════════════════════════
   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: 48px 0 80px; }

.tt-product-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  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";
}
.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); }

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

.tt-product-info-panel {}

.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;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--white);
}

.tt-qty-btn {
  width: 44px;
  height: 44px;
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--pink-dark);
  background: none;
  border: none;
  cursor: pointer;
  transition: background var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tt-qty-btn:hover { background: var(--pink-pale); }
.tt-qty-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.tt-qty-val {
  min-width: 36px;
  text-align: center;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
}

.tt-qty-stock {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* 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: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tt-btn-primary-full:hover { background: var(--rose); border-color: var(--rose); transform: translateY(-1px); }

.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: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tt-btn-outline-full:hover { background: var(--pink-dark); color: var(--white); transform: translateY(-1px); }

/* 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: 32px;
}

.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;
}

.tt-trust-badge-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--card-bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.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: 64px 0;
}

.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(4, 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-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.78rem;
  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); }

/* ═══════════════════════════════════════════════
   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(2, 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: 56px 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; }
  .tt-wa-float { bottom: 88px; 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 0; }

  .tt-about-grid { grid-template-columns: 1fr; }
  .tt-about-img { aspect-ratio: 16/9; }

  .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; }
  .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(2, minmax(0, 1fr)); }

  /* 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: 40px 0; }

  /* 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: none; }

  .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(2, minmax(0, 1fr)); gap: 12px; }

  .tt-product-detail-grid { gap: 32px; }
  .tt-product-detail-name { font-size: 1.6rem; }
  .tt-product-page { padding-top: 28px; }
  .tt-qty-wrap { flex-wrap: wrap; gap: 10px 12px; }
  .tt-qty-stock { flex: 1 1 100%; }
  .tt-related-header { justify-content: space-between; text-align: left; margin-bottom: 26px; }
  .tt-related-refresh { width: 44px; height: 44px; flex-basis: 44px; }
  .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-grid { grid-template-columns: 1fr; }
  .tt-related-section { padding: 48px 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);
}
/* Stacked above .tt-wa-float (bottom:88px, 48px tall, z-index:900 → top
   edge at 136px) with the same ~12px gap desktop uses between the two
   floats, so they no longer sit on the same spot and fight over z-index. */
@media (max-width: 767px) { .tt-back-to-top { bottom: 148px; 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: 767px) {
  .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: 4px;
  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;
  gap: 6px;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--text-sec);
  font-size: 0.75rem;
  font-weight: 500;
  font-family:Montserrat;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  min-height: 44px;
}
.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;
}

/* ══════════════════════════════════════════════════════════════
   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/page-loader.js respectivamente — nunca acá, para que no haya
   dos definiciones de #tt-intro/#tt-loader compitiendo entre sí.
═══════════════════════════════════════════════════════════ */

/* Scroll reveal: lo maneja js/scroll-reveal-global.js (.tt-auto-reveal /
   .tt-visible), cargado global vía js/page-loader.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. */
@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;
  }
}