/* TINTIN — Mantenimiento integral de Producto */
body.tt-product-maintenance {
  background: var(--color-background-page, #FFFFFF) !important;
  color: var(--color-text-primary, #222222) !important;
  overflow-x: clip;
}

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

body.tt-product-maintenance .tt-product-page,
body.tt-product-maintenance .tinben,
body.tt-product-maintenance .tinsel,
body.tt-product-maintenance .tt-related-section {
  background: var(--color-background-page, #FFFFFF) !important;
  background-image: none !important;
}

body.tt-product-maintenance .tt-product-detail-grid,
body.tt-product-maintenance .tt-product-gallery,
body.tt-product-maintenance .tt-product-info-panel,
body.tt-product-maintenance .tinben-card,
body.tt-product-maintenance .tinsel-box,
body.tt-product-maintenance .tinsel-item,
body.tt-product-maintenance .tt-related-card,
body.tt-product-maintenance .tt-product-state,
body.tt-product-maintenance #product-loading,
body.tt-product-maintenance #product-not-found {
  background: var(--color-background-surface, #FFFFFF) !important;
  border-color: var(--color-card-border, #FDECF2) !important;
  color: var(--color-text-primary, #222222) !important;
}

body.tt-product-maintenance .tt-product-info-panel,
body.tt-product-maintenance .tinben-card,
body.tt-product-maintenance .tinsel-box,
body.tt-product-maintenance .tt-related-card,
body.tt-product-maintenance .tt-product-state {
  box-shadow: 0 10px 32px var(--color-card-shadow, rgba(248,170,202,.10));
}

body.tt-product-maintenance .tt-product-info-panel {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--color-card-border, #FDECF2);
  border-radius: 24px;
}

body.tt-product-maintenance .tt-gallery-main,
body.tt-product-maintenance .tt-gallery-main img,
body.tt-product-maintenance .tt-gallery-thumb,
body.tt-product-maintenance .tt-gallery-thumb img,
body.tt-product-maintenance .tinsel-item-img,
body.tt-product-maintenance .tinsel-item-img img,
body.tt-product-maintenance .tt-related-card-img,
body.tt-product-maintenance .tt-related-card-img img,
body.tt-product-maintenance .tt-product-img,
body.tt-product-maintenance .tt-product-img img {
  background: var(--color-background-surface-soft, #FDECF2) !important;
  background-image: none !important;
}

body.tt-product-maintenance .tt-product-detail-name,
body.tt-product-maintenance .tinben-title,
body.tt-product-maintenance .tinben-card-title,
body.tt-product-maintenance .tinsel-title,
body.tt-product-maintenance .tinsel-item-name,
body.tt-product-maintenance .tt-section-title,
body.tt-product-maintenance .tt-related-card-name,
body.tt-product-maintenance #product-not-found h2,
body.tt-product-maintenance .tt-product-state h2 {
  color: var(--color-text-title, #222222) !important;
}

body.tt-product-maintenance .tt-product-detail-desc,
body.tt-product-maintenance .tinben-subtitle,
body.tt-product-maintenance .tinben-card-text,
body.tt-product-maintenance .tinsel-total-label,
body.tt-product-maintenance .tinsel-empty,
body.tt-product-maintenance .tinsel-item-variant,
body.tt-product-maintenance .tinsel-footer-label,
body.tt-product-maintenance .tt-related-status,
body.tt-product-maintenance #product-loading p,
body.tt-product-maintenance #product-not-found p,
body.tt-product-maintenance .tt-product-state p {
  color: var(--color-text-secondary, #222222) !important;
}

body.tt-product-maintenance .tt-product-detail-cat,
body.tt-product-maintenance .tt-product-detail-price,
body.tt-product-maintenance .tinsel-total,
body.tt-product-maintenance .tinsel-item-price,
body.tt-product-maintenance .tinsel-footer-amount,
body.tt-product-maintenance .tt-section-sub,
body.tt-product-maintenance .tt-related-card-price {
  color:var(--color-text-primary,#222222) !important;
}

body.tt-product-maintenance .tt-product-status,
body.tt-product-maintenance .tt-product-badge,
body.tt-product-maintenance .tinsel-badge {
  background: var(--color-badge-background, #FDECF2) !important;
  color: var(--color-badge-text, var(--color-brand-primary, #F8AACA)) !important;
  border: 1px solid var(--color-card-border, #FDECF2);
}

body.tt-product-maintenance .tt-product-status[data-stock-state="out"] {
  background: var(--color-error-background, #FDE3E1) !important;
  color: var(--color-error-text, #B8341F) !important;
}

body.tt-product-maintenance .tt-qty-selector,
body.tt-product-maintenance .tt-variant-option,
body.tt-product-maintenance .tt-share-btn,
body.tt-product-maintenance .tinsel-qty,
body.tt-product-maintenance .tinsel-btn-secondary {
  background: var(--color-button-secondary-background, #FFFFFF) !important;
  border-color: var(--color-button-secondary-border, var(--color-brand-primary, #F8AACA)) !important;
  color: var(--color-button-secondary-text, var(--color-brand-primary, #F8AACA)) !important;
}

body.tt-product-maintenance .tt-variant-option.active,
body.tt-product-maintenance .tt-btn-primary-full,
body.tt-product-maintenance .tinsel-btn-primary,
body.tt-product-maintenance #tinsel-checkout-btn,
body.tt-product-maintenance .tt-added-toast-checkout {
  background: var(--color-button-primary-background, var(--color-brand-primary, #F8AACA)) !important;
  border-color: var(--color-button-primary-border, var(--color-brand-primary, #F8AACA)) !important;
  color: var(--color-button-primary-text, #FFFFFF) !important;
}

body.tt-product-maintenance .tt-gallery-main:focus-visible,
body.tt-product-maintenance .tt-gallery-thumb:focus-visible,
body.tt-product-maintenance .tt-variant-option:focus-visible,
body.tt-product-maintenance .tt-qty-btn:focus-visible,
body.tt-product-maintenance button:focus-visible,
body.tt-product-maintenance a:focus-visible {
  outline: 3px solid var(--color-button-primary-focus-ring, rgba(248,170,202,.24));
  outline-offset: 3px;
}

body.tt-product-maintenance .tinben-icon,
body.tt-product-maintenance .tinsel-item,
body.tt-product-maintenance .tinsel-qty,
body.tt-product-maintenance .tinsel-item-img {
  background-color: var(--color-background-surface-soft, #FDECF2) !important;
}

body.tt-product-maintenance .tinsel-toast,
body.tt-product-maintenance .tt-added-toast {
  background: var(--color-background-elevated, #FFFFFF) !important;
  color:var(--color-text-primary,#222222) !important;
  border-color: var(--color-card-border, #FDECF2) !important;
  box-shadow: 0 12px 40px var(--color-card-shadow, rgba(248,170,202,.16)) !important;
}

.tt-product-runtime-state {
  width: 100%;
  min-height: 260px;
  display: grid;
  place-items: center;
  padding: 36px 20px;
  border: 1.5px solid var(--color-card-border, #FDECF2);
  border-radius: 20px;
  background: var(--color-background-surface, #FFFFFF);
  color: var(--color-text-secondary, #222222);
  text-align: center;
}

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

/* El indicador de sincronización en vivo ("Actualizando producto…" /
   "Producto actualizado") queda oculto para clientes — es información
   operativa, no de catálogo. Solo se hace visible cuando mantenimiento-
   producto.js confirma que el usuario autenticado es el Super Admin (clase
   tt-sync-superadmin), y se ubica dentro del breadcrumb en vez de flotar
   suelto arriba de la foto del producto. El estado interno se sigue
   actualizando igual para todos (lo sigue usando el watchdog de carga). */
#tt-product-sync-state {
  display: none;
}

#tt-product-sync-state.tt-sync-superadmin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-text-secondary, #222222);
  background: var(--color-badge-background, #FDECF2);
  border: 1px solid var(--color-card-border, #FDECF2);
  border-radius: 999px;
  padding: 4px 10px 4px 8px;
}

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

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

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

/* Una sola recomendación no debe quedar pegada al extremo izquierdo de una
   grilla pensada para cuatro tarjetas. Se centra sin cambiar la selección ni
   el comportamiento de actualización de productos relacionados. */
body.tt-product-maintenance .tt-related-grid:has(> .tt-related-slot:only-child) {
  grid-template-columns: minmax(0, 320px) !important;
  justify-content: center;
}

body.tt-product-maintenance .tt-footer {
  background: var(--color-background-footer, #FFFFFF) !important;
  color: var(--color-text-primary, #222222) !important;
  border-top: 1px solid var(--color-border-primary, #FDECF2);
}

body.tt-product-maintenance .tt-footer a:not(.tt-footer-wa),
body.tt-product-maintenance .tt-footer-col-title,
body.tt-product-maintenance .tt-footer-bottom,
body.tt-product-maintenance .tt-footer-tagline {
  color: var(--color-text-primary, #222222) !important;
}

@media (min-width: 1025px) {
  body.tt-product-maintenance .tt-product-detail-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
    gap: clamp(32px, 4vw, 64px);
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  body.tt-product-maintenance .tt-product-detail-grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
    gap: 24px;
  }

  body.tt-product-maintenance .tinben-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

  body.tt-product-maintenance .tt-product-detail-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  body.tt-product-maintenance .tt-product-info-panel {
    padding: 20px 16px;
  }

  body.tt-product-maintenance .tt-product-actions-panel .tt-btn,
  body.tt-product-maintenance .tinsel-footer-btns,
  body.tt-product-maintenance .tinsel-footer-btns .tinsel-btn {
    width: 100%;
  }

  body.tt-product-maintenance .tinsel-footer {
    align-items: stretch;
  }

  /* Dos columnas dejan espacio para nombres y acciones en móviles. */
  body.tt-product-maintenance .tt-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  body.tt-product-maintenance .tt-related-grid .tt-product-info {
    padding: 10px;
  }

  body.tt-product-maintenance .tt-related-grid .tt-product-actions {
    flex-direction: column;
    gap: 6px;
  }

  body.tt-product-maintenance .tt-related-grid .tt-product-actions .tt-btn {
    width: 100%;
    padding: 8px 6px;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
  }
}

@media (max-width: 480px) {
  body.tt-product-maintenance .tinben-grid {
    grid-template-columns: 1fr;
  }

  body.tt-product-maintenance .tt-related-grid {
    gap: 8px;
  }

  body.tt-product-maintenance .tinsel-item {
    grid-template-columns: 58px minmax(0, 1fr) auto auto;
  }

  body.tt-product-maintenance .tinsel-item-actions {
    grid-column: 4;
  }
}

@media (max-width: 360px) {
  body.tt-product-maintenance .tt-product-detail-name {
    overflow-wrap: anywhere;
  }

  body.tt-product-maintenance .tt-product-info-panel {
    padding-inline: 12px;
  }
}

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

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


/* Single loading surface: el cargador global es la unica capa visible mientras se resuelve el producto. */
body.tt-product-maintenance #product-loading {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* El loader global ya tiene su propio fondo; quitamos el pseudo-fondo duplicado. */
body.tt-product-maintenance #tt-loader::before {
  content: none !important;
  display: none !important;
}

/* Una unica entrada estable para ficha, hero y superficies del producto. */
body.tt-product-maintenance .tt-product-page,
body.tt-product-maintenance .tt-product-page > .container,
body.tt-product-maintenance #product-grid,
body.tt-product-maintenance #product-grid > * {
  animation: none !important;
  transition: none !important;
}



body.tt-product-maintenance .tt-lightbox{position:fixed!important;inset:0!important;z-index:30000!important;padding:clamp(58px,8vh,96px) clamp(16px,6vw,96px) clamp(54px,8vh,90px);background:rgba(24,15,20,.82)!important;backdrop-filter:blur(14px) saturate(1.05);-webkit-backdrop-filter:blur(14px) saturate(1.05)}
body.tt-product-maintenance .tt-lightbox-stage{width:min(92vw,1180px);height:min(84vh,820px);display:grid;place-items:center;overflow:hidden;border-radius:24px;background:#fff;box-shadow:0 24px 90px rgba(0,0,0,.28);touch-action:none}
body.tt-product-maintenance .tt-lightbox-img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:14px;background:#fff;mix-blend-mode:normal;cursor:grab}
body.tt-product-maintenance .tt-lightbox-img.is-panning{cursor:grabbing}
body.tt-product-maintenance .tt-lightbox-zoom,body.tt-product-maintenance .tt-lightbox-close,body.tt-product-maintenance .tt-lightbox-nav,body.tt-product-maintenance .tt-lightbox-counter{z-index:2}

/* Composición única: mismos gutters para ficha, carrito, recomendaciones y comunidad. */
body.tt-product-maintenance {
  --tt-product-gutter: clamp(16px, 3vw, 32px);
  --tt-product-inset: clamp(16px, 2.4vw, 28px);
}
body.tt-product-maintenance :is(.tt-product-page > .container, .tinsel-wrap,
  .tt-related-section > .container, .tt-reviews-shell) {
  width: min(calc(100% - var(--tt-product-gutter) * 2), 1220px);
  margin-inline: auto;
  padding-inline: 0;
}
body.tt-product-maintenance .tt-product-page {
  padding: clamp(16px, 2.5vw, 30px) 0 0 !important;
}
body.tt-product-maintenance .tt-product-detail-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: start;
  gap: clamp(20px, 3vw, 36px);
  padding: 0;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
body.tt-product-maintenance :is(.tt-product-gallery, .tt-product-info-panel) {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--tt-product-inset);
  border: 1px solid var(--color-card-border, #FDECF2) !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 10px 28px rgba(68, 37, 49, .045) !important;
  overflow: visible;
}
body.tt-product-maintenance .tt-product-gallery { align-self: start; }
body.tt-product-maintenance .tt-gallery-main {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 12px;
  background: #fff !important;
  box-shadow: none !important;
}
body.tt-product-maintenance .tt-gallery-main img {
  position: static;
  width: 100%;
  height: auto;
  max-height: min(72vh, 760px);
  object-fit: contain;
  background: #fff !important;
  mix-blend-mode: normal;
}
body.tt-product-maintenance .tt-gallery-thumbs {
  gap: 10px;
  margin-top: 12px;
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}
body.tt-product-maintenance .tt-gallery-thumb {
  width: clamp(64px, 9vw, 96px);
  height: clamp(64px, 9vw, 96px);
  flex: 0 0 clamp(64px, 9vw, 96px);
  padding: 5px;
  border-radius: 12px;
}
body.tt-product-maintenance .tt-gallery-thumb-img { width: 100%; height: 100%; object-fit: contain; }
body.tt-product-maintenance .tt-product-detail-desc {
  margin-block: 16px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
/* Las características y acciones son parte de la ficha, no tarjetas anidadas. */
html body.tt-product-maintenance :is(.tt-specs-block, .tt-product-actions-panel) {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0;
}
body.tt-product-maintenance .tt-product-specifications > div {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 12px;
  padding-block: 10px;
}
body.tt-product-maintenance .tt-product-specifications dd { min-width: 0; overflow-wrap: anywhere; }
body.tt-product-maintenance .tt-product-selection {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--color-card-border, #FDECF2);
  background: transparent !important;
}
body.tt-product-maintenance .tt-specs-block:not(:has(.tt-product-specifications:not([hidden]))) { display: none; }
.tt-product-selection-title { margin: 0 0 16px; font-size: 1.1rem; line-height: 1.4; }
body.tt-product-maintenance .tt-product-actions-panel { margin: 20px 0 0; gap: 12px; }
body.tt-product-maintenance .tt-product-actions-panel .tt-btn { width: 100%; min-width: 0; white-space: normal; }
body.tt-product-maintenance .tt-product-wa-link { white-space: normal; line-height: 1.5; }
body.tt-product-maintenance .tt-product-trust-badges { display: grid; gap: 10px; margin-top: 16px; }
body.tt-product-maintenance .tt-trust-badge-item {
  min-width: 0;
  padding: 10px 0;
  border: 0;
  box-shadow: none !important;
  background: transparent !important;
}
body.tt-product-maintenance .tt-product-social-bar {
  max-width: none;
  margin: 16px 0 0;
  padding: 12px 0;
  gap: 8px;
  flex-wrap: wrap;
}
body.tt-product-maintenance .tinsel-wrap { padding-block: clamp(20px, 3vw, 32px); }
body.tt-product-maintenance .tinsel-box {
  padding: var(--tt-product-inset);
  border-radius: 20px;
  box-shadow: none !important;
  overflow: visible;
}
body.tt-product-maintenance .tinsel-box::before { content: none; }
body.tt-product-maintenance .tinsel-head-left { min-width: 0; flex-wrap: wrap; }
body.tt-product-maintenance .tinsel-title { overflow-wrap: anywhere; }
body.tt-product-maintenance .tinsel-item { grid-template-columns: 76px minmax(0, 1fr) auto auto; gap: 12px; padding: 12px; }
body.tt-product-maintenance .tinsel-item-name { display: block; overflow: visible; -webkit-line-clamp: unset; overflow-wrap: anywhere; }
body.tt-product-maintenance :is(.tinsel-qbtn, .tinsel-del, .tinsel-favorite) { min-width: 44px; min-height: 44px; }
body.tt-product-maintenance .tinsel-item-img img { object-fit: contain; }
body.tt-product-maintenance .tinsel-footer-btns { min-width: 0; }
body.tt-product-maintenance .tinsel-btn { min-height: 44px; white-space: normal; }
body.tt-product-maintenance .tt-related-section { padding-block: clamp(20px, 3vw, 32px); }
body.tt-product-maintenance .tt-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
body.tt-product-maintenance .tt-related-grid > .tt-product-runtime-state { grid-column: 1 / -1; min-height: 120px; }
body.tt-product-maintenance .tt-reviews-product {
  padding-block: clamp(20px, 3vw, 32px);
  scroll-margin-top: calc(var(--header-h, 80px) + 20px);
  content-visibility: visible;
  contain-intrinsic-size: auto;
}
html body.tt-product-maintenance .tt-reviews-layout {
  gap: 24px;
  padding: 0;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
html body.tt-product-maintenance :is(.tt-reviews-summary, .tt-review-card, .tt-review-form) {
  padding: var(--tt-product-inset);
}
@media (max-width: 900px) {
  body.tt-product-maintenance .tt-product-detail-grid { grid-template-columns: minmax(0, 1fr); }
  body.tt-product-maintenance .tt-product-gallery { position: static; }
}
@media (max-width: 767px) {
  body.tt-product-maintenance .tt-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  body.tt-product-maintenance .tt-related-grid .tt-product-info { padding: 12px; }
  body.tt-product-maintenance .tt-related-grid .tt-product-actions { flex-direction: column; gap: 8px; }
  body.tt-product-maintenance .tt-related-grid .tt-product-actions .tt-btn { padding: 10px; font-size: .8rem; }
  body.tt-product-maintenance .tt-product-specifications > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  body.tt-product-maintenance .tinsel-item { grid-template-columns: 58px minmax(0, 1fr); }
  body.tt-product-maintenance .tinsel-qty { grid-column: 1 / -1; justify-self: start; }
  body.tt-product-maintenance .tinsel-item-actions { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
  body.tt-product-maintenance .tinsel-footer-btns { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); }
  body.tt-product-maintenance .tinsel-footer-btns .tinsel-btn { width: 100%; flex: none; }
  body.tt-product-maintenance .tt-reviews-product { scroll-margin-top: 20px; }
  body.tt-product-maintenance .tt-lightbox { padding: 64px 10px 54px; }
  body.tt-product-maintenance .tt-lightbox-stage { width: 100%; height: min(78vh, 680px); border-radius: 18px; }
}
@media (max-width: 380px) {
  body.tt-product-maintenance .tt-related-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Opciones debajo de la fotografía y espacios internos compartidos. */
body.tt-product-maintenance #product-variants { margin-top:16px; }
body.tt-product-maintenance #product-variants .tt-variant-options { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
body.tt-product-maintenance #product-variants .tt-variant-option { min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; gap:6px; padding:8px 12px; border:1px solid var(--border); border-radius:8px; white-space:normal; }
body.tt-product-maintenance #product-variants .tt-variant-option.active { outline:2px solid var(--pink-dark); outline-offset:2px; }
body.tt-product-maintenance .tt-color-swatch { display:block; width:28px; height:28px; border:2px solid #fff; outline:1px solid #737373; border-radius:50%; background:repeating-linear-gradient(45deg,#eee 0 4px,#999 4px 8px); }
body.tt-product-maintenance .tt-wrist-guide { width:100%; min-width:0; margin:0; padding:0; border:0; }
body.tt-product-maintenance .tt-wrist-guide summary { cursor:pointer; min-height:44px; list-style:none; }
body.tt-product-maintenance .tt-wrist-guide summary::-webkit-details-marker { display:none; }
body.tt-product-maintenance .tt-wrist-guide summary::after { content:'⌄'; margin-inline-start:auto; color:var(--text-sec); transition:transform .2s; }
body.tt-product-maintenance .tt-wrist-guide[open] summary::after { transform:rotate(180deg); }
body.tt-product-maintenance .tt-wrist-guide ol { box-sizing:border-box; margin:8px 12px 12px; padding:12px 20px 12px 40px; border:1px solid var(--border); border-radius:12px; list-style:decimal outside; }
body.tt-product-maintenance .tt-wrist-guide li { margin:8px 0; padding-inline-start:2px; line-height:1.5; }

body.tt-product-maintenance .tt-product-specifications>div { padding-inline:12px; }
body.tt-product-maintenance .tt-product-share { margin-block:12px; }
body.tt-product-maintenance .tt-product-social-bar { margin-top:16px; padding:12px; }
body.tt-product-maintenance .tt-review-form, body.tt-product-maintenance .tt-review-card { padding:20px; }

body.tt-product-maintenance .tt-product-actions-panel { padding:16px; border-radius:16px; }
body.tt-product-maintenance .tt-product-actions-panel .tt-btn { box-sizing:border-box; border:1px solid var(--pink-dark); box-shadow:none; }
body.tt-product-maintenance .tt-product-specifications { overflow:hidden; border:1px solid var(--border); border-radius:14px; margin-block:12px; }
body.tt-product-maintenance .tt-product-specifications>div:last-child { border-bottom:0; }
body.tt-product-maintenance .tt-related-section { padding-block:20px; margin-block:0; }
body.tt-product-maintenance .tt-related-head { margin-bottom:16px; }
body.tt-product-maintenance .tt-related-section .tt-product-info { padding:12px 10px; }
body.tt-product-maintenance .tt-related-section .tt-product-actions { margin-top:10px; }
body.tt-product-maintenance .tt-product-community { margin-block:0; padding-block:24px; }
body.tt-product-maintenance .tt-product-social-bar { margin-block:8px; }
body.tt-product-maintenance #product-variants .tt-variant-option.active { outline:0; border:2px solid var(--pink-dark); padding:7px; }
/* Ficha boutique: superficies serenas, jerarquía clara y controles consistentes. */
body.tt-product-maintenance .tt-product-page { background: #fff !important; }
html body.tt-product-maintenance .tt-product-page > .container { box-sizing:border-box; padding-inline:clamp(16px,3vw,28px) !important; }
html body.tt-product-maintenance #product-grid .tt-product-actions-panel,
html body.tt-product-maintenance #product-grid .tt-specs-block { border:0 !important; border-radius:0 !important; box-shadow:none !important; }
body.tt-product-maintenance .tt-product-detail-grid { padding:clamp(12px,2vw,28px) 0; gap:clamp(24px,3.5vw,48px); }
body.tt-product-maintenance .tt-product-gallery,
body.tt-product-maintenance .tt-product-info-panel { padding:var(--tt-product-inset) !important; border:1px solid var(--color-card-border, #FDECF2) !important; border-radius:24px !important; box-shadow:0 12px 36px rgba(68,37,49,.035) !important; overflow:visible; }
body.tt-product-maintenance .tt-product-gallery { display:flex; flex-direction:column; align-items:stretch; position:static !important; }
body.tt-product-maintenance .tt-gallery-main { display:block; width:100%; height:auto !important; min-height:0 !important; aspect-ratio:1; margin:0 !important; padding:0 !important; overflow:hidden; border-radius:12px !important; }
body.tt-product-maintenance .tt-gallery-main img { width:100% !important; height:100% !important; max-height:none !important; object-fit:contain !important; mix-blend-mode:normal !important; }
body.tt-product-maintenance .tt-gallery-thumbs { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin:20px 0 0; padding:4px; overflow:visible; }
body.tt-product-maintenance .tt-gallery-thumb { flex:0 0 64px; width:64px !important; height:64px !important; min-width:0; padding:4px; border:1px solid var(--border) !important; border-radius:14px !important; transition:border-color .15s,box-shadow .15s; }
body.tt-product-maintenance .tt-gallery-thumb.active { border-color:var(--pink-dark) !important; outline:1px solid var(--pink-dark); outline-offset:3px; }
body.tt-product-maintenance #product-variants { margin:24px 0 0; padding-top:20px; border-top:1px solid var(--color-card-border,var(--border)); }
body.tt-product-maintenance #product-variants:empty { display:none; }
/* El nombre pertenece a su muestra: una opción completa, legible y táctil. */
body.tt-product-maintenance #product-variants .tt-color-option {
  position:relative; display:grid; grid-template-columns:22px minmax(0,1fr) 12px;
  align-items:center; gap:3px 10px; flex:0 1 auto; width:auto; height:auto;
  min-width:0; max-width:100%; min-height:48px; margin:0; padding:11px 14px;
  border:1px solid var(--color-card-border,#FDECF2) !important; border-radius:14px;
  background:var(--color-background-surface,#fff) !important;
  color:var(--color-text-primary,#222222) !important; box-shadow:none !important;
  transition:border-color .15s,background-color .15s;
}
body.tt-product-maintenance #product-variants .tt-color-option.active {
  outline:0; padding:11px 14px; border-color:var(--color-text-primary,#222222) !important;
  background:var(--color-background-surface-soft,#FDECF2) !important;
}
body.tt-product-maintenance #product-variants .tt-color-option::before {
  content:'✓'; grid-column:3; grid-row:1; font-size:12px; font-weight:600; line-height:1; opacity:0;
}
body.tt-product-maintenance #product-variants .tt-color-option.active::before { opacity:1; }
body.tt-product-maintenance #product-variants .tt-color-option .tt-variant-name {
  grid-column:2; grid-row:1; min-width:0; font-size:.78rem; font-weight:500;
  line-height:1.5; letter-spacing:0; text-transform:capitalize; overflow-wrap:anywhere;
}
body.tt-product-maintenance .tt-color-swatch { width:22px; height:22px; box-sizing:border-box; border:1px solid rgba(0,0,0,.16); outline:0; grid-column:1; grid-row:1; }
body.tt-product-maintenance .tt-product-variants:has(.tt-color-option) .tt-variant-current,
body.tt-product-maintenance .tt-variant-color-group > .tt-variant-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
html body.tt-product-maintenance #product-variants .tt-color-option.tt-stock-unavailable::after {
  content:'Agotado'; position:static; grid-column:2 / -1; grid-row:2; transform:none;
  font-size:.625rem; line-height:1.4; color:var(--color-text-secondary,#666666);
}
body.tt-product-maintenance #product-variants .tt-product-variants { margin:0 0 12px; }
body.tt-product-maintenance .tt-product-detail-name { font-size:clamp(1.5rem,2.5vw,2.25rem) !important; font-weight:500; line-height:1.25 !important; letter-spacing:-.025em !important; margin:10px 0 18px !important; overflow-wrap:anywhere; text-wrap:balance; }
body.tt-product-maintenance .tt-product-detail-price { font-size:clamp(1.25rem,2vw,1.65rem) !important; font-weight:500; letter-spacing:-.02em; margin:0 0 24px !important; }
body.tt-product-maintenance .tt-product-detail-desc { margin:0 0 20px !important; line-height:1.75; }
body.tt-product-maintenance .tt-product-specifications { margin:0 0 20px; border:0 !important; border-radius:0 !important; box-shadow:none !important; }
body.tt-product-maintenance .tt-product-specifications > div { padding:10px 0; border-bottom:1px solid var(--border); }
body.tt-product-maintenance .tt-qty-wrap { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:20px 0 0 !important; padding:0 !important; }
body.tt-product-maintenance .tt-qty-selector { display:flex; align-items:center; height:44px; border:1px solid var(--border) !important; border-radius:8px !important; box-shadow:none !important; overflow:hidden; }
body.tt-product-maintenance .tt-qty-btn { width:44px; height:44px; padding:0; border:0; background:transparent !important; }
body.tt-product-maintenance .tt-qty-val { min-width:32px; text-align:center; }
body.tt-product-maintenance .tt-qty-stock { margin:0 !important; font-size:.75rem; }
body.tt-product-maintenance .tt-product-actions-panel { display:grid; gap:12px; margin:20px 0 0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; }
body.tt-product-maintenance .tt-product-actions-panel .tt-btn { width:100%; min-width:0; min-height:52px; height:auto; margin:0 !important; padding:16px 20px !important; border-radius:10px !important; font-size:.78rem; font-weight:600; letter-spacing:.055em; line-height:1.5; box-shadow:none !important; white-space:normal; }
body.tt-product-maintenance .tt-product-actions-panel > div { margin:0 !important; padding:4px 0 0 !important; }
body.tt-product-maintenance .tt-product-wa-link { min-height:44px; padding:10px 4px !important; font-size:.78rem; text-decoration:underline; text-underline-offset:4px; white-space:normal; }
body.tt-product-maintenance .tt-product-trust-badges { padding:16px 0 0 !important; gap:10px; }
body.tt-product-maintenance .tt-product-social-bar { border:0 !important; border-top:1px solid var(--border) !important; border-radius:0 !important; box-shadow:none !important; margin-top:28px; padding:16px 0; }
body.tt-product-maintenance .tinben-card,
body.tt-product-maintenance .tinsel-box,
body.tt-product-maintenance .tt-review-form,
body.tt-product-maintenance .tt-review-card { box-shadow:none !important; border-radius:12px !important; }
html body.tt-product-maintenance .tinben .tinben-card,
html body.tt-product-maintenance .tinsel .tinsel-box,
html body.tt-product-maintenance #product-reviews .tt-review-form,
html body.tt-product-maintenance #product-reviews .tt-review-card,
html body.tt-product-maintenance #product-reviews .tt-reviews-summary { box-shadow:none !important; border-radius:12px !important; }
body.tt-product-maintenance .tt-gallery-thumb:focus-visible,
body.tt-product-maintenance .tt-variant-option:focus-visible,
body.tt-product-maintenance .tt-qty-btn:focus-visible { outline:2px solid var(--pink-dark) !important; outline-offset:3px; }
@media(max-width:767px) {
  body.tt-product-maintenance .tt-product-detail-grid { gap:28px; padding:8px 0 24px; }
  body.tt-product-maintenance .tt-gallery-thumb { flex-basis:56px; width:56px !important; height:56px !important; }
}

/* Mismos controles y columnas de compra en tablet y escritorio. */
@media (min-width:768px) {
  html body.tt-product-maintenance #product-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:clamp(24px,4vw,56px); }
}
body.tt-product-maintenance #product-grid > * { min-width:0; }
/* Miniaturas con proporción estable y área de pulsación completa. */
html body.tt-product-maintenance .tt-gallery-thumb {
  border-radius:14px !important;
  aspect-ratio:1;
  overflow:hidden;
}
body.tt-product-maintenance .tt-color-option .tt-color-swatch {
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12) !important;
}

/* La selección continúa el fondo de la ficha y de las recomendaciones. */
html body.tt-product-maintenance .tinsel,
html body.tt-product-maintenance .tinsel .tinsel-box {
  background: transparent !important;
  background-image: none !important;
}

/* Igual espacio lateral para ficha y recomendaciones en cada orientación. */
html body.tt-product-maintenance .tt-related-section > .container { width:min(100%,1220px); box-sizing:border-box; padding-inline:clamp(16px,3vw,28px) !important; }
@media (min-width:600px) and (max-width:767px) {
  body.tt-product-maintenance .tt-related-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* El control queda fuera del lateral ocupado por WhatsApp en móvil. */
@media (max-width:767px) {
  body.tt-product-maintenance .tt-related-header { flex-direction:row-reverse; gap:12px; margin-bottom:16px; }
  body.tt-product-maintenance #related-trigger { display:block; text-align:left; }
  body.tt-product-maintenance #related-trigger .tt-section-sub { font-size:.65rem; line-height:1.4; margin-bottom:4px; }
  body.tt-product-maintenance #related-trigger .tt-section-title { font-size:clamp(1.1rem,5.4vw,1.45rem); line-height:1.25; margin:0; }
}
body.tt-product-maintenance .tt-related-refresh:focus-visible { outline:2px solid var(--pink-dark); outline-offset:3px; }

/* Una fila desplazable en móvil conserva tarjetas compactas sin una celda vacía. */
@media(max-width:599px) {
  html body.tt-product-maintenance .tt-related-grid,
  html body.tt-product-maintenance .tt-related-grid:has(> .tt-related-slot:only-child) {
    display:grid; grid-template-columns:none !important; grid-auto-flow:column; grid-auto-columns:calc((100% - 12px) / 2);
    justify-content:start; gap:12px; overflow-x:auto; padding:2px 0 12px; scroll-snap-type:x proximity; overscroll-behavior-x:contain;
  }
  body.tt-product-maintenance .tt-related-slot { scroll-snap-align:start; min-width:0; }
}

/* El punto refleja el mismo estado que el texto, también para stock por variante. */
body.tt-product-maintenance .tt-product-status[data-stock-state="out"]::before { background:var(--color-state-soldout,#b8341f); }
body.tt-product-maintenance .tt-product-status[data-stock-state="available"]::before { background:var(--color-state-available,#166534); }

/* Atributos y estados: el contorno permanece estable al seleccionar. */
body.tt-product-maintenance #product-variants .tt-variant-heading {
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 12px; margin-bottom:12px;
}
body.tt-product-maintenance #product-variants .tt-variant-label {
  position:static; width:auto; height:auto; padding:0; margin:0; overflow:visible; clip-path:none; white-space:normal;
  font-size:.66rem; font-weight:600; line-height:1.6; letter-spacing:.1em; text-transform:uppercase;
}
body.tt-product-maintenance .tt-variant-current { font-size:.75rem; line-height:1.5; color:var(--color-text-secondary,var(--text-sec)); overflow-wrap:anywhere; }
body.tt-product-maintenance #product-variants .tt-variant-options { justify-content:flex-start; gap:10px; }
body.tt-product-maintenance #product-variants .tt-product-variants { margin:0 0 22px; }
body.tt-product-maintenance #product-variants .tt-product-variants:last-child { margin-bottom:0; }
body.tt-product-maintenance #product-variants .tt-variant-option:not(.tt-color-option) {
  min-height:48px; min-width:72px; max-width:100%; padding:10px 16px; margin:0; flex-direction:column; gap:3px;
  border:1px solid var(--border); border-radius:10px; background:var(--color-background-surface,#fff) !important;
  color:var(--color-text-primary,#222) !important; font-size:.78rem; line-height:1.4; overflow-wrap:anywhere; box-shadow:none;
}
body.tt-product-maintenance #product-variants .tt-variant-option:not(.tt-color-option).active {
  border:1px solid var(--pink-dark); padding:10px 16px; outline:0;
  box-shadow:inset 0 0 0 1px var(--pink-dark); background:var(--color-background-surface-soft,#FDECF2) !important;
}
html body.tt-product-maintenance #product-variants .tt-variant-option:not(.tt-color-option).tt-stock-unavailable::after {
  content:'Agotado'; position:static; transform:none; font-size:.6rem; line-height:1.3; color:var(--color-text-secondary,var(--text-sec));
}
body.tt-product-maintenance .tt-product-detail-cat { font-size:.65rem; letter-spacing:.15em; line-height:1.6; margin-top:18px; }
body.tt-product-maintenance .tt-product-selection-title { font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; margin:0 0 18px; }
body.tt-product-maintenance .tt-product-selection { margin-top:24px; padding-top:24px; }
body.tt-product-maintenance .tt-qty-wrap { gap:12px 16px; }
body.tt-product-maintenance .tt-qty-label { font-size:.75rem; font-weight:500; }
body.tt-product-maintenance .tt-qty-stock { flex-basis:100%; font-size:.7rem; line-height:1.5; }
body.tt-product-maintenance .tt-product-trust-badges { border-top:1px solid var(--border); margin-top:24px; }
body.tt-product-maintenance .tt-trust-badge-text { font-size:.72rem; line-height:1.6; }
body.tt-product-maintenance .tt-product-actions-panel .tt-btn:disabled { cursor:not-allowed; opacity:.5; }
body.tt-product-maintenance .tt-product-actions-panel .tt-btn:focus-visible,
body.tt-product-maintenance .tt-product-wa-link:focus-visible { outline:2px solid var(--pink-dark) !important; outline-offset:4px; }
@media(hover:hover) {
  body.tt-product-maintenance .tt-gallery-thumb:hover { border-color:var(--pink-dark) !important; }
  body.tt-product-maintenance #product-variants .tt-color-option:not(.active):hover { border-color:var(--color-text-secondary,#666666) !important; }
  body.tt-product-maintenance #product-variants .tt-variant-option:not(.tt-color-option):hover { border-color:var(--pink-dark); }
}
@media(prefers-reduced-motion:reduce) {
  body.tt-product-maintenance #product-variants .tt-color-option { transition:none; }
}
@media(max-width:767px) {
  body.tt-product-maintenance .tt-product-detail-grid { gap:20px; }
  body.tt-product-maintenance #product-variants { margin-top:20px; padding-top:18px; }
  body.tt-product-maintenance .tt-product-info-panel { padding:clamp(20px,5vw,28px) !important; }
}