@scope (.stores-table) {
  @media (width < 48rem) {
    :scope {
      display: block;
      width: 100%;
      border: none;
    }

    thead {
      display: none; /* Hide header row on mobile */
    }

    tbody {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-md);
      padding: var(--space-xs); /* Slight breathing room for shadows */
    }

    tr {
      display: grid;
      grid-template-areas:
        "name status"
        "actions actions";
      grid-template-columns: 1fr auto;
      gap: var(--space-md);
      padding: var(--space-lg);
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
      transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;

      &:hover {
        background: var(--color-surface); /* override default hover highlight */
        border-color: var(--color-primary);
        box-shadow: var(--shadow-md);
      }

      &:active {
        transform: scale(0.995);
      }
    }

    /* Column 1: Store Name */
    td:nth-child(1) {
      grid-area: name;
      padding: 0;
      border: none;
      font-size: var(--text-heading-6);
      font-weight: var(--font-semibold);
      color: var(--color-text-heading);

      a {
        color: var(--color-text-heading);
        text-decoration: none;

        &:hover {
          color: var(--color-primary);
          text-decoration: none;
        }
      }
    }

    /* Column 2: Active / Inactive Status */
    td:nth-child(2) {
      grid-area: status;
      padding: 0;
      border: none;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    /* Column 3: Actions (Edit / Remove) */
    td:nth-child(3) {
      grid-area: actions;
      padding: 0;
      border: none;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: var(--space-xs);

      .button {
        padding: var(--space-xs) var(--space-md);
      }

      /* Make sure delete button form stays inline */
      form {
        display: inline-flex;
      }
    }
  }
}