/* Keep product screenshots readable; the frame, not the image, reacts to hover. */
.hero-product,
.screen-pair figure,
.warehouse-product,
.accounting-section .accounting-screens .accounting-product,
.detail-visual {
  box-shadow: 11px 11px 0 rgba(207, 159, 72, .65), 0 22px 34px rgba(20, 48, 68, .14);
  transition: box-shadow .2s ease;
}

.accounting-section .accounting-screens .accounting-product {
  box-shadow: 11px 11px 0 rgba(20, 48, 68, .48), 0 22px 34px rgba(45, 34, 19, .16);
}

.screen-open:hover img,
.screen-open:focus-visible img {
  filter: none;
}

.screen-pair figure:hover,
.screen-pair figure:focus-within,
.warehouse-product:hover,
.warehouse-product:focus-within {
  box-shadow: 7px 7px 0 rgba(194, 135, 35, .92), 0 18px 30px rgba(20, 48, 68, .2);
}

.accounting-section .accounting-screens .accounting-product:hover,
.accounting-section .accounting-screens .accounting-product:focus-within {
  box-shadow: 7px 7px 0 rgba(20, 48, 68, .82), 0 18px 30px rgba(45, 34, 19, .23);
}

@media (max-width: 600px) {
  .hero-product,
  .screen-pair figure,
  .warehouse-product,
  .accounting-section .accounting-screens .accounting-product,
  .detail-visual {
    box-shadow: 7px 7px 0 rgba(207, 159, 72, .65), 0 16px 26px rgba(20, 48, 68, .14);
  }

  .accounting-section .accounting-screens .accounting-product {
    box-shadow: 7px 7px 0 rgba(20, 48, 68, .48), 0 16px 26px rgba(45, 34, 19, .16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-product,
  .screen-pair figure,
  .warehouse-product,
  .accounting-section .accounting-screens .accounting-product,
  .detail-visual {
    transition: none;
  }
}