/* Products page only: each product card gets its own muted accent colour,
   matching the palette used on the Services page. The slider repeats the six
   products twice (12 cards), so the colours repeat every 6 cards. */

.productslider .productitem:nth-child(6n+1) { --acc: #2f5fb3; }  /* Prime Bill            blue   */
.productslider .productitem:nth-child(6n+2) { --acc: #148f8a; }  /* Pulse by Primeguage   teal   */
.productslider .productitem:nth-child(6n+3) { --acc: #6b5fc0; }  /* Prime Smart Capture   indigo */
.productslider .productitem:nth-child(6n+4) { --acc: #b98a1f; }  /* Numberline            ochre  */
.productslider .productitem:nth-child(6n+5) { --acc: #2f8a5a; }  /* Digital Tax Advisory  green  */
.productslider .productitem:nth-child(6n+6) { --acc: #c0603a; }  /* Tax TV                clay   */

.productslider .productitem {
  border: 2px solid var(--acc, #042664);
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(15, 30, 70, .14);
}

/* picture frame picks up the same accent, kept light */
.productslider .productimage-box {
  border: 1.5px solid var(--acc, #fafbfd);
  border-radius: 8px;
}

/* short accent bar under the product name */
.productslider .productitem h1::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin: 10px auto 0;
  border-radius: 2px;
  background: var(--acc, #042664);
}

.productslider .productitem:focus-within { outline: 3px solid var(--acc); outline-offset: 3px; }

/* Keep the active card centred at every width (it used to sit at 45% + 65px and
   ran off the right edge on phones). */
.productslider .productitem {
  width: min(350px, 88vw);
  left: calc(50% - min(350px, 88vw) / 2);
}
@media (max-width: 600px) {
  .productslider { height: 660px; }
  .productslider .productitem { top: 70px; padding: 16px; }
  .productslider .productitem h1 { font-size: 22px; }
  .productslider .productitem p { font-size: 13px; line-height: 1.6; }
  #prev, #next { font-size: 26px; padding: 8px; }
}