/* TINTIN — coherencia visual de shell y superficies.
   Esta hoja se carga al final del paquete de navegación para que carrito,
   cuenta y notificaciones compartan la misma jerarquía sin reescribir sus
   componentes ni sus reglas de acceso. */
:root {
  /* Rosa Tintin estable: evita heredar violetas de temas legacy. */
  --tt-drawer-accent: var(--color-brand-primary, #F8AACA);
  --tt-drawer-accent-strong: var(--color-brand-primary, #F8AACA);
  --tt-drawer-soft: #fff0f5;
  --tt-drawer-border: #edbfd0;
  --tt-drawer-text: #2b1b23;
  --tt-drawer-muted: #6e5962;
}

/* El hero se mantiene reservado en layout, pero la imagen no se revela por
   franjas mientras el navegador la decodifica. El shell retira pending justo
   antes de quitar el loader global. */
body.tt-home-premium.tt-hero-atomic-pending .tt-hero-media {
  opacity: 0 !important;
}
body.tt-home-premium.tt-hero-atomic-ready .tt-hero-media {
  opacity: 1 !important;
}
body.tt-home-premium .tt-hero-media {
  transition: opacity 140ms ease-out;
}

/* Cabecera única para todas las hojas laterales. */
.tt-cart-header,
.tt-account-drawer-header,
.tt-notifications-head {
  min-height: 86px !important;
  box-sizing: border-box;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 18px 24px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.18) !important;
  background: var(--tt-drawer-accent) !important;
  background-image: none !important;
  color:#222222 !important;
  box-shadow: 0 8px 24px rgba(92, 24, 50, .12) !important;
}

.tt-cart-title,
.tt-account-drawer-header h2,
.tt-notifications-title,
.tt-notifications-kicker {
  color: #222222 !important;
}

.tt-cart-title,
.tt-account-drawer-header h2,
.tt-notifications-title {
  margin: 0 !important;
  font-weight: 800 !important;
  letter-spacing: .045em !important;
}

.tt-account-drawer-heading {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tt-account-drawer-kicker,
.tt-notifications-kicker {
  margin: 0 !important;
  font-size: .69rem !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  opacity: .78;
}

.tt-cart-close,
.tt-account-drawer-header #btn-account-close,
.tt-notifications-close {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.65) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.08) !important;
  color: #222222 !important;
  box-shadow: none !important;
}
.tt-cart-close:hover,
.tt-account-drawer-header #btn-account-close:hover,
.tt-notifications-close:hover {
  background: rgba(255,255,255,.17) !important;
}
.tt-cart-close svg,
.tt-account-drawer-header #btn-account-close svg {
  color: inherit !important;
  stroke: currentColor !important;
}

.tt-cart-sync-status {
  color: rgba(255,255,255,.82) !important;
  font-weight: 600 !important;
}

/* Cuenta: identidad compacta, navegación limpia y cierre separado. */
.tt-account-drawer .tt-account-panel {
  gap: 16px !important;
  padding: 24px !important;
  background: #fff !important;
  color: var(--tt-drawer-text) !important;
}

.tt-account-drawer .tt-account-header {
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  width: 100%;
  box-sizing: border-box;
  padding: 15px 16px !important;
  margin: 0 !important;
  border: 1px solid var(--tt-drawer-border) !important;
  border-radius: 18px !important;
  background: var(--tt-drawer-soft) !important;
  box-shadow: none !important;
}

.tt-account-panel-avatar {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  flex: 0 0 46px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 1px solid rgba(248,170,202,.16) !important;
  background: #fff !important;
}
.tt-account-panel-initials {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--tt-drawer-accent) !important;
  color:#222222 !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
  letter-spacing: .04em;
}

.tt-account-identity {
  min-width: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
}
.tt-account-identity strong {
  overflow: hidden;
  color: var(--tt-drawer-text) !important;
  font-size: .94rem;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tt-account-identity span {
  overflow: hidden;
  color: var(--tt-drawer-muted) !important;
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-account-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tt-account-drawer .tt-account-item {
  width: 100% !important;
  min-height: 50px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 13px 15px !important;
  border: 1px solid transparent !important;
  border-radius: 13px !important;
  background: transparent !important;
  color: var(--tt-drawer-accent) !important;
  font-size: .88rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-align: left !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease !important;
}
/* Las cabeceras y CTA conservan su contraste incluso frente a la tipografía global. */
html body :is(#account-drawer, #cart-drawer, #notifications-drawer) :is(.tt-account-drawer-header, .tt-cart-header, .tt-notifications-head) {
  background: var(--color-brand-primary, #F8AACA) !important;
  background-image: none !important;
  color:#222222 !important;
}
html body :is(#account-drawer, #cart-drawer, #notifications-drawer) :is(.tt-account-drawer-header, .tt-cart-header, .tt-notifications-head) :is(h2, span, button, svg) {
  color: #222222 !important;
}
html body #account-drawer .tt-account-primary,
html body #account-drawer .tt-account-primary:is(:visited, :hover, :focus-visible) {
  color: #222222 !important;
}
html body #account-drawer .tt-account-drawer-header {
  display: flex !important;
  min-height: 84px !important;
  padding: 18px 22px !important;
}
html body #account-drawer .tt-account-drawer-header::before {
  content: none;
  display: none;
}
html body #account-drawer .tt-account-drawer-heading { flex: 1; }
html body #account-drawer .tt-account-drawer-kicker { display: none; }
html body #account-drawer .tt-account-drawer-header h2 { margin: 0 !important; }
html body #account-drawer .tt-account-drawer-header h2::before { content: none !important; display:none !important; }

html body #account-drawer .tt-account-drawer-header {
  position: relative; align-items: center !important;
  min-height: 0 !important; padding: 20px 48px 18px !important;
}
html body #account-drawer .tt-account-drawer-heading {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; width: 100%; margin: 0;
}
html body #account-drawer .tt-account-drawer-logo {
  display: block !important; width: 110px !important; height: 46px !important;
  margin: 0 !important; object-fit: contain; filter: brightness(0) invert(1) !important;
}
html body #account-drawer .tt-account-drawer-header h2,
html body #account-drawer .tt-account-drawer-header #btn-account-close,
html body #account-drawer .tt-account-drawer-header #btn-account-close svg {
  color: #fff !important;
}
html body #account-drawer .tt-account-drawer-header #btn-account-close {
  position: absolute; top: 12px; right: 12px; margin: 0;
}

.tt-account-drawer .tt-account-item:hover,
.tt-account-drawer .tt-account-item:focus-visible {
  border-color: var(--tt-drawer-border) !important;
  background: var(--tt-drawer-soft) !important;
  outline: 0 !important;
}
.tt-account-drawer .tt-account-internal {
  border-color: #efd0dc !important;
  background: #fff7fa !important;
  color: var(--tt-drawer-accent-strong) !important;
}
.tt-account-drawer .tt-account-logout {
  margin-top: auto !important;
  border-color: var(--tt-drawer-border) !important;
  background: #fff !important;
  color: var(--tt-drawer-accent) !important;
  cursor: pointer;
}

.tt-account-guest {
  padding: 6px 2px 2px;
}
.tt-account-guest-title {
  margin: 0 0 6px;
  color: var(--tt-drawer-text);
  font-size: 1rem;
  font-weight: 800;
}
.tt-account-guest-copy {
  margin: 0 !important;
  color: var(--tt-drawer-muted) !important;
  font-size: .85rem !important;
  line-height: 1.55 !important;
}
.tt-account-drawer .tt-account-primary {
  justify-content: center !important;
  border-color: var(--tt-drawer-accent) !important;
  background: var(--tt-drawer-accent) !important;
  color:#222222 !important;
}
.tt-account-drawer .tt-account-primary:hover,
.tt-account-drawer .tt-account-primary:focus-visible {
  border-color: var(--tt-drawer-accent-strong) !important;
  background: var(--tt-drawer-accent-strong) !important;
}

/* Cuenta: el CTA debe tener contraste real incluso si una hoja legacy declara
   colores de enlace sobre la superficie. La misma regla sirve para invitadas,
   clientes y cuentas internas sin alterar sus permisos o destinos. */
html body .tt-account-drawer .tt-account-primary,
html body .tt-account-drawer .tt-account-primary:visited {
  background: var(--tt-drawer-accent) !important;
  background-color: var(--tt-drawer-accent) !important;
  border: 1px solid var(--tt-drawer-accent) !important;
  color:#222222 !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
  opacity: 1 !important;
  text-shadow: none !important;
}
html body .tt-account-drawer .tt-account-primary:hover,
html body .tt-account-drawer .tt-account-primary:focus-visible {
  background: var(--tt-drawer-accent-strong) !important;
  background-color: var(--tt-drawer-accent-strong) !important;
  border-color: var(--tt-drawer-accent-strong) !important;
  color:#222222 !important;
}

html body .tt-account-drawer .tt-account-item {
  color: var(--tt-drawer-accent-strong) !important;
}
html body .tt-account-drawer .tt-account-primary,
html body .tt-account-drawer .tt-account-primary:hover,
html body .tt-account-drawer .tt-account-primary:focus-visible {
  color: #222222 !important;
}
html body .tt-account-drawer .tt-account-internal {
  background: var(--tt-drawer-soft) !important;
  border-color: var(--tt-drawer-border) !important;
  color: var(--tt-drawer-accent-strong) !important;
}

@media (min-width: 1025px) {
  html body .tt-account-drawer {
    width: min(430px, calc(100vw - 32px)) !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  html body .tt-account-drawer {
    width: min(560px, calc(100vw - 24px)) !important;
  }
}

.tt-account-loading {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--tt-drawer-muted) !important;
  font-size: .84rem;
  font-weight: 650;
}
.tt-account-loading-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tt-drawer-accent);
  box-shadow: 0 0 0 5px rgba(248,170,202,.11);
  animation: tt-account-pulse 1.1s ease-in-out infinite alternate;
}
@keyframes tt-account-pulse {
  to { opacity: .35; transform: scale(.8); }
}

/* Notificaciones mantiene su estructura funcional, pero hereda la misma
   cabecera que carrito/cuenta. */
.tt-notifications-head > div {
  min-width: 0;
}
.tt-notifications-toolbar {
  border-bottom-color: var(--tt-drawer-border) !important;
  background: #fff !important;
}

@media (max-width: 767px) {
  .tt-cart-header,
  .tt-account-drawer-header,
  .tt-notifications-head {
    min-height: 78px !important;
    padding: 14px 18px !important;
  }
  .tt-account-drawer .tt-account-panel {
    padding: 20px 18px calc(24px + env(safe-area-inset-bottom)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.tt-home-premium .tt-hero-media,
  .tt-account-drawer .tt-account-item,
  .tt-account-loading-dot {
    transition: none !important;
    animation: none !important;
  }
}

/* Colecciones: toda la fotografía cabe en su tarjeta y el nombre comparte
   el mismo eje inferior en escritorio, tablet y el panel móvil. */
:is(.tt-dropdown-grid,.tt-tablet-cats-grid,.tt-mobile-cats-grid,.tt-sheet-grid)
  :is(.tt-dropdown-card,.tt-tablet-cat-card,.tt-mobile-cat-card,.tt-sheet-item) {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  background: #fff;
}
html body :is(.tt-dropdown-icon,.tt-tablet-cat-img,.tt-mobile-cat-img,.tt-sheet-item-img) {
  width: 100% !important;
  height: clamp(92px, 10vw, 132px) !important;
  max-width: 100%;
  border-radius: 0 !important;
  background: #fff !important;
}
html body :is(.tt-dropdown-icon,.tt-tablet-cat-img,.tt-mobile-cat-img,.tt-sheet-item-img) img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  border-radius: 0;
}
html body :is(.tt-dropdown-label,.tt-tablet-cat-card > span,.tt-mobile-cat-card > span,.tt-sheet-item > span:last-child) {
  width: 100%;
  text-align: center;
  font-size: clamp(12px, 1.1vw, 15px);
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

html body :is(.tt-dropdown-card,.tt-sheet-item,.tt-tablet-cat-card,.tt-mobile-cat-card) { border-radius:12px; border:1px solid #ecd8e0; }

html body :is(#account-drawer,#cart-drawer,#notifications-drawer,#collections-sheet) :is(.tt-account-drawer-header,.tt-cart-header,.tt-notifications-head,.tt-sheet-header) {
  position:relative; display:flex !important; align-items:center !important; justify-content:center !important;
  min-height:0 !important; height:auto !important; padding:20px 48px 18px !important; margin:0 !important;
  background:var(--color-brand-primary,#F8AACA) !important; border-radius:0 !important;
}
html body .tt-drawer-brand-heading { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; }
html body :is(#cart-drawer,#notifications-drawer,#collections-sheet) .tt-drawer-brand-logo { display:block !important; width:110px !important; height:46px !important; object-fit:contain !important; margin:0 !important; filter:brightness(0) invert(1) !important; }
html body :is(#account-drawer,#cart-drawer,#notifications-drawer,#collections-sheet) :is(.tt-account-drawer-header,.tt-cart-header,.tt-notifications-head,.tt-sheet-header) :is(h2,span,p,button,svg) { color:#fff !important; }
html body :is(.tt-drawer-brand-heading,.tt-account-drawer-heading) h2 { margin:0 !important; align-self:center !important; max-width:100%; font-size:14px !important; text-align:center; text-shadow:none !important; letter-spacing:.09em; }
html body :is(#btn-cart-close,#btn-account-close,#btn-notifications-close,#btn-close-sheet) { position:absolute !important; top:12px !important; right:12px !important; display:grid; place-items:center; width:36px !important; height:36px !important; border:1px solid #fff !important; border-radius:50% !important; margin:0 !important; padding:0 !important; background:transparent !important; }
html body .tt-notifications-kicker { display:none !important; }

.tt-sheet-header #btn-close-sheet,
.tt-search-close {
  display:inline-grid !important; place-items:center;
  width:44px !important; height:44px !important; min-height:44px;
  padding:0 !important; border:1px solid var(--tt-drawer-border) !important;
  border-radius:50% !important; background:#fff !important;
  color:var(--tt-drawer-text) !important;
}
.tt-collections-sheet .tt-sheet-grid { gap:12px !important; padding:16px !important; }
.tt-sheet-grid .tt-sheet-item { border:1px solid var(--tt-drawer-border); border-radius:18px !important; padding:14px 8px !important; gap:10px; }
.tt-sheet-grid .tt-sheet-item-img { width:clamp(68px,18vw,100px); height:clamp(68px,18vw,100px); }
.tt-cart-drawer { border-radius:24px 0 0 24px; overflow:hidden; }
@media (max-width:767px) {
  .tt-collections-sheet .tt-sheet-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .tt-sheet-grid .tt-sheet-item { font-size:11px; line-height:1.4; }
}

.tt-sheet-info-links { display:flex; justify-content:center; gap:24px; margin:0 0 14px; }
.tt-sheet-info-links a { display:inline-flex; align-items:center; min-height:44px; color:var(--tt-drawer-text); font-weight:600; text-decoration:none; }
html body #btn-tablet-close,
html body #collections-sheet #btn-close-sheet {
  width:44px !important; height:44px !important; min-width:44px;
  display:grid !important; place-items:center; padding:0 !important;
  border:1px solid #fff !important; border-radius:50% !important;
  background:transparent !important; color:#fff !important;
}
html body .tt-header-desktop .tt-dropdown-grid { gap:14px; }
html body .tt-header-desktop .tt-dropdown-card { border-radius:18px !important; padding:16px 10px; }
html body .tt-header-desktop .tt-dropdown-icon img { object-fit:contain; }

/* Superficies sólidas con una cabecera continua, sin asa ni franjas laterales. */
html body :is(#cart-drawer,#account-drawer,#notifications-drawer,#collections-sheet) { box-sizing:border-box; overflow-x:hidden; }
html body :is(#cart-drawer,#account-drawer,#notifications-drawer,#collections-sheet) :is(.tt-cart-header,.tt-account-drawer-header,.tt-notifications-head,.tt-sheet-header) { box-sizing:border-box; width:100% !important; max-width:100% !important; margin:0; min-height:92px !important; flex-shrink:0; padding:16px 20px !important; box-shadow:none !important; }
html body .tt-drawer-brand-heading { min-width:0; }
html body .tt-drawer-brand-logo { width:72px; height:32px; margin-bottom:6px; }
html body #notifications-drawer .tt-notifications-toolbar { flex-wrap:wrap; align-items:center; gap:6px 14px; padding:12px 20px; background:#fff; }
html body #notifications-drawer .tt-notifications-auto-read { flex:1 1 180px; min-width:0; font-size:11px; line-height:1.5; color:var(--tt-drawer-muted); }
html body .tt-sheet-handle { display:none; }
html body #collections-sheet .tt-sheet-footer { padding:16px 20px; background:#fff; border-top:1px solid var(--tt-drawer-border); }
html body #collections-sheet .tt-sheet-footer .tt-btn { min-height:44px; }
@media(max-width:767px) {
  html body :is(#cart-drawer,#account-drawer,#notifications-drawer,#collections-sheet) { inset:0 !important; width:100vw !important; max-width:100vw !important; height:100dvh !important; max-height:none !important; border-radius:0 !important; padding:0 !important; }
  html body :is(#cart-drawer,#account-drawer,#notifications-drawer,#collections-sheet) :is(.tt-cart-header,.tt-account-drawer-header,.tt-notifications-head,.tt-sheet-header) { padding-top:max(16px,env(safe-area-inset-top)) !important; }
  html body #collections-sheet { display:flex; flex-direction:column; }
  html body #collections-sheet:not(.open) { display:none; }
  html body #collections-sheet .tt-sheet-grid { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; align-content:start; }
  html body #collections-sheet .tt-sheet-footer { padding-bottom:calc(100px + env(safe-area-inset-bottom)); }
  html body #cart-drawer .tt-cart-body, html body #notifications-drawer .tt-notifications-list { padding-bottom:calc(100px + env(safe-area-inset-bottom)); }
}

html body #collections-sheet { overflow:hidden; }
html body #collections-sheet.open { display:flex; flex-direction:column; }
html body #collections-sheet .tt-sheet-grid { flex:1 1 auto; min-height:0; overflow:auto; align-content:start; }
html body.tt-public-shell-mounted:not(:has(.adm-main)) #collections-sheet { padding-bottom:0 !important; }
html body :is(#cart-drawer,#account-drawer,#notifications-drawer,#collections-sheet) :is(#btn-cart-close,#btn-account-close,#btn-notifications-close,#btn-close-sheet) { width:44px !important; height:44px !important; }

html body .tt-catalog-all-link { display:flex; align-items:center; justify-content:center; min-height:44px; margin-top:12px; padding:12px; border-top:1px solid var(--tt-drawer-border); color:var(--color-text-primary,#222222); font-weight:600; font-size:.8rem; }
html body .tt-catalog-all-link:focus-visible { outline:2px solid var(--color-text-primary,#222222); outline-offset:2px; }