/* Page-scoped: standalone bands, accessories, navigation and shared assets retain their styles. */
.aj-merged-watch ul.watch.aj-watch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 2%;
  align-items: stretch;
}
.aj-merged-watch ul.aj-watch-grid > li.aj-watch-card {
  display: grid !important;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 20px;
  --case-size: 165px;
}
.aj-merged-watch ul.aj-watch-grid > li.aj-watch-card[style*="display: none"],
.aj-merged-watch ul.aj-watch-grid > li.aj-watch-card[hidden],
.aj-merged-watch ul.aj-watch-grid > li.aj-watch-empty { display: none !important; }
.aj-merged-watch ul.aj-watch-grid > .aj-watch-card > h2 {
  grid-row: 1;
  min-height: 0;
  margin: 0;
  text-align: center;
  align-self: start;
}
.aj-watch-card > .aj-watch-subtitle { grid-row: 2; text-align: center; }
.aj-watch-card > .aj-watch-subtitle p { margin: 4px 0 0; }
.aj-watch-card > .aj-watch-subtitle:empty { display: none; }
.aj-watch-card > .aj-watch-media { grid-row: 3; height: 280px; position: relative; }
.aj-watch-card > .aj-watch-media > picture { display: contents; }
.aj-merged-watch ul.aj-watch-grid > .aj-watch-card .aj-watch-media img {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: calc(var(--case-size) * var(--image-scale)) !important;
  height: auto !important;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  margin: 0 !important;
  transform: translate(var(--image-x), var(--image-y));
}
.aj-merged-watch ul.aj-watch-grid > .aj-watch-card > .wrap {
  grid-row: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 114px;
  align-items: center;
  /* Share the tallest actual purchase block within the row; no empty
     four-line reservation when all cards contain only a single price. */
  min-height: 32px;
  gap: 8px;
  margin: 0;
}
.aj-merged-watch ul.aj-watch-grid > .aj-watch-card > .wrap > .price-block {
  display: flex;
  flex-direction: column;
  align-self: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}
.aj-merged-watch ul.aj-watch-grid > .aj-watch-card > .wrap > .price-block p {
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 20px;
  white-space: normal;
}
.aj-merged-watch ul.aj-watch-grid > .aj-watch-card > .wrap > .price-block p + p { margin-top: 7px; }
.aj-watch-card .watch-variant-label { font-size: 13px; line-height: 18px; white-space: normal; }
.aj-watch-card .aj-watch-amount, .aj-watch-card .aj-watch-size { white-space: nowrap; }
.aj-merged-watch ul.aj-watch-grid > .aj-watch-card > .wrap > div:last-child {
  margin: 0;
  padding: 0;
  width: auto;
  line-height: 0;
  align-self: center;
  justify-self: end;
}
.aj-merged-watch ul.aj-watch-grid > .aj-watch-card > .wrap .button { display: block; margin: 0; width: 114px; }
/* The existing site uses a 950px layout viewport on phones. Only watch cards
   adapt below; the shared header, menus and accessory cards are not restyled. */
@media (max-device-width: 600px) and (orientation: portrait) and (pointer: coarse) {
  .aj-merged-watch ul.watch.aj-watch-grid { grid-template-columns: 1fr; gap: 32px 0; }
  .aj-merged-watch ul.aj-watch-grid > li.aj-watch-card { padding: 40px; --case-size: 340px; }
  .aj-merged-watch ul.aj-watch-grid > .aj-watch-card > h2 { font-size: 34px; line-height: 39px; }
  .aj-watch-card > .aj-watch-subtitle p { font-size: 30px; line-height: 36px; margin-top: 8px; }
  .aj-watch-card > .aj-watch-media { height: 570px; }
  .aj-merged-watch ul.aj-watch-grid > .aj-watch-card > .wrap { grid-template-columns: minmax(0, 1fr) 260px; min-height: 72px; gap: 20px; }
  .aj-merged-watch ul.aj-watch-grid > .aj-watch-card > .wrap > .price-block p { font-size: 32px; line-height: 42px; }
  .aj-merged-watch ul.aj-watch-grid > .aj-watch-card > .wrap > .price-block p + p { margin-top: 14px; }
  .aj-watch-card .watch-variant-label { font-size: 28px; line-height: 38px; }
  .aj-merged-watch ul.aj-watch-grid > .aj-watch-card > .wrap .button { width: 260px; height: 70px; line-height: 70px; font-size: 32px; border-radius: 36px; }
}
@media (min-device-width: 601px) and (max-device-width: 850px) and (pointer: coarse) {
  .aj-merged-watch ul.watch.aj-watch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aj-merged-watch ul.aj-watch-grid > li.aj-watch-card { --case-size: 180px; }
  .aj-watch-card > .aj-watch-media { height: 310px; }
}
/* Older engines retain a usable three-zone card; row synchronization is handled
   by the small fallback script only where CSS subgrid is unavailable. */
@supports not (grid-template-rows: subgrid) {
  .aj-merged-watch ul.aj-watch-grid > li.aj-watch-card {
    grid-row: auto;
    grid-template-rows: var(--title-row, auto) var(--subtitle-row, auto) auto var(--purchase-row, minmax(32px, auto));
  }
}