/* Ajustes finales y acotados de ficha: móvil, favorito y salida a Galería. */

@media (max-width: 899px) {
  body.page-watch-detail > .watch-detail-favorite-btn.watch-detail-favorite-overlay {
    transition: transform 160ms ease, opacity 180ms ease;
  }

  /* La ficha usa el alto disponible antes de Reacción rápida: la imagen gana
     presencia sin cambiar el orden, el sticky ni las secciones posteriores. */
  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block {
    grid-template-columns: minmax(0, 0.60fr) minmax(0, 0.40fr);
    row-gap: clamp(26px, 6vw, 34px);
    column-gap: 16px;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block > .watch-detail-hero-media {
    margin-left: -26px;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-hero-figure {
    width: 138%;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-meta-grid {
    gap: 5px;
    padding-left: 10px;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-hero-info .watch-detail-meta-row {
    gap: 2px;
    padding-block: 5px;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-meta-row dt {
    font-size: clamp(0.71rem, 2.3vw, 0.81rem);
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-meta-row dd {
    font-size: clamp(0.87rem, 3.16vw, 1.03rem);
    line-height: 1.24;
  }

  /* Al cerrar, el bloque conserva su silueta completa hasta llegar al borde.
     Así no aparece un hueco entre el mensaje y el triángulo. */
  @keyframes mobile-favorite-toast-collapse {
    from {
      transform: translateX(0);
      clip-path: polygon(0 0, 100% 0, 100% 100%, 46px 100%);
    }

    to {
      transform: translateX(calc(100% - 46px));
      clip-path: polygon(0 0, 100% 0, 100% 100%, 46px 100%);
    }
  }

  body.page-watch-detail > .watch-detail-favorite-btn.watch-detail-favorite-overlay .watch-detail-favorite-toast {
    font-size: clamp(0.76rem, 3.2vw, 0.82rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: 0.05em;
  }

  /* El favorito es una capa raíz para no competir con el hero. Al abrir un
     modal debe retirarse visualmente igual que el resto del fondo. */
  body.footer-modal-open > .watch-detail-favorite-btn.watch-detail-favorite-overlay {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, visibility 0s linear 180ms;
  }
}

/* En escritorio el control conserva su tamaño y comportamiento; solo se
   restituye el corazón vectorial con contraste propio en cada tema. */
@media (min-width: 900px) {
  .watch-detail-page--editorial .watch-detail-title-row .watch-detail-favorite-icon svg {
    display: block;
    width: 16px;
    height: 16px;
    fill: currentColor !important;
    stroke: none !important;
  }

  .watch-detail-page--editorial .watch-detail-title-row .watch-detail-favorite-icon svg path {
    fill: currentColor !important;
    stroke: none !important;
  }

  body.night-mode .watch-detail-page--editorial .watch-detail-title-row .watch-detail-favorite-btn::before {
    border-color: rgb(208 225 237 / 0.28);
    background: rgb(19 31 41 / 0.92);
  }

  body.night-mode .watch-detail-page--editorial .watch-detail-title-row .watch-detail-favorite-btn:not(.is-active) .watch-detail-favorite-icon {
    color: #f3f7f9 !important;
  }

  body.night-mode .watch-detail-page--editorial .watch-detail-title-row .watch-detail-favorite-btn.is-active .watch-detail-favorite-icon {
    color: #f2c94c !important;
  }
}

/* Solo en noche: la parte final de Especificaciones anticipa la llegada de
   Galería con un negro progresivo. La Galería conserva íntegro su propio fondo. */
body.night-mode .watch-detail-page.watch-specs-guide-experience > .watch-detail-specs-block::after {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  height: clamp(150px, 24vh, 300px);
  content: "";
  background: linear-gradient(180deg, rgb(3 4 5 / 0), #030405 100%);
  pointer-events: none;
}