/* Mobile card tracks use native scrolling, including without JavaScript. */
.dsg-carousel-hint { display: none; }

@media screen and (max-width: 700px) {
  :is(.dsg-gearbox-grid, .dsg-error-preview__grid, .dsg-service-grid, .dsg-symptom-list, .dsg-editorial-cards, .dsg-gearbox-cards) {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 12px;
    min-inline-size: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--wp--preset--color--muted) transparent;
    padding: 4px 4px 14px;
  }

  :is(.dsg-gearbox-grid, .dsg-error-preview__grid, .dsg-service-grid, .dsg-symptom-list, .dsg-editorial-cards, .dsg-gearbox-cards) > * {
    flex: 0 0 88%;
    min-inline-size: 0;
    margin-block: 0;
    scroll-snap-align: start;
    scroll-margin-inline: 4px;
    transform: none;
  }

  :is(.dsg-gearbox-grid, .dsg-service-grid) > * {
    min-block-size: 17.5rem;
    padding: 1.4rem;
  }
  :is(.dsg-gearbox-grid, .dsg-service-grid) > *::before { inset-inline-start: 1.4rem; }
  .dsg-gearbox-grid h3 { font-size: 2.2rem; }
  .dsg-service-grid h3 { font-size: 1.45rem; }
  .dsg-error-card { padding: 1.4rem; }
  .dsg-error-card::before { inset-inline-start: 1.4rem; }
  .dsg-error-card h3 { font-size: 1.25rem; }
  .dsg-error-card > p:not(.dsg-error-card__code):not(.dsg-error-card__link) { font-size: 0.92rem; }
  .dsg-editorial-cards > * { min-block-size: 12rem; }
  .dsg-gearbox-cards > * { min-block-size: 16rem; }
  .dsg-symptom-list { flex: none; }
  .dsg-symptom-card { min-block-size: 13rem; padding: 1.25rem; }
  .dsg-symptom-card strong { font-size: 1.2rem; }

  .dsg-carousel-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    color: var(--wp--preset--color--muted);
    font-size: 0.75rem;
    line-height: 1.5;
    margin-block: 0.6rem 0;
  }
  .dsg-carousel-controls { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
  /* Keep the arrow buttons away from the floating contact button on the right. */
  .dsg-carousel-hint > span:first-child { order: 2; }
  .dsg-carousel-controls { order: 1; }
  .dsg-carousel-count { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .dsg-carousel-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 44px;
    min-inline-size: 44px;
    padding: .5rem;
    border: 1px solid var(--dsg-control-border);
    border-radius: var(--wp--custom--radius);
    background: var(--wp--preset--color--surface);
    color: var(--wp--preset--color--text);
    font: inherit;
    font-size: 1.1rem;
    cursor: pointer;
  }
  .dsg-carousel-button:hover:enabled { border-color: var(--wp--preset--color--signal); background: var(--dsg-hover-surface); }
  .dsg-carousel-button:disabled { opacity: .4; cursor: default; }
}