/* Stockist locator (T28). A list of stockists with a postcode search, Near me, region and range
   buttons (radios and checkboxes styled as T02 chips) and an empty state. No map.
   Mobile first, tokens only. Prototype: heading 28px/400, chips 14px pill with 1px border,
   list cards white, 1px hairline border, 20px radius, 24px padding, 3 per row on desktop. */

.locator__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.locator__head { display: flex; flex-direction: column; gap: var(--space-2); }
.locator__heading {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
}
.locator__intro { margin: 0; font-size: var(--fs-body-md); color: var(--color-text); max-width: var(--container-text); }

.locator__form { display: flex; flex-direction: column; gap: var(--space-5); }

/* Search row: postcode, Find and Near me stay on one row, also at 390 px. */
.locator__search { display: flex; flex-direction: column; gap: var(--space-2); max-width: var(--container-text); }
.locator__label, .locator__legend {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-heading);
}
.locator__row { display: flex; gap: var(--space-2); align-items: stretch; }
.locator__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  border: var(--border-width) solid var(--c-grey-600);
  border-radius: var(--radius-input);
  background: var(--c-white);
  font-size: var(--fs-body);
}
.locator__input[aria-invalid="true"] { border-color: var(--c-deep-blue); border-width: var(--border-width-heavy); }
.locator__find { flex: none; padding-inline: var(--space-5); }
.locator__near-me {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--c-white);
  color: var(--c-deep-blue);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: var(--transition-control);
}
.locator__near-me:hover { border-color: var(--c-deep-blue); }
.locator__near-me svg { flex: none; }
.locator__near-me[hidden] { display: none; }

.locator__error {
  margin: 0;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-deep-blue);
}
.locator__error:empty { display: none; }

.locator__suggest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-input);
  background: var(--color-surface-quiet);
  font-size: var(--fs-body);
}
.locator__suggest[hidden] { display: none; }
.locator__suggest p { margin: 0; flex: 1 1 100%; }
.locator__suggest .btn { min-height: var(--tap-min); padding-block: var(--space-2); }
.locator__suggest a { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--color-link); }

/* Filters: fieldsets with legends; the inputs sit inside chip labels and wrap onto lines. */
.locator__filter { margin: 0; padding: 0; border: 0; min-width: 0; }
.locator__legend { padding: 0; margin-bottom: var(--space-2); }
.locator__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.locator__chip { position: relative; cursor: pointer; color: var(--c-grey-900); }
.locator__choice {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.locator__chip:has(.locator__choice:checked) {
  border-color: var(--c-grey-900);
  background: var(--c-grey-900);
  color: var(--c-white);
}
.locator__chip:has(.locator__choice:focus-visible) {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}
.locator__apply[hidden] { display: none; }

.locator__status { margin: 0; font-size: var(--fs-body-sm); color: var(--color-muted); }

/* Results */
.locator__results { display: flex; flex-direction: column; gap: var(--space-4); }
.locator__results-heading { margin: 0; font-size: var(--fs-h4); font-weight: var(--fw-medium); }
.locator__group-heading {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-eyebrow);
}
.locator__notice { margin: 0; }

.locator__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.locator__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-6);
  border: var(--border-width) solid var(--color-hairline);
  border-radius: var(--radius-media);
  background: var(--c-white);
}
.locator__name { margin: 0; font-size: var(--fs-h4); font-weight: var(--fw-medium); color: var(--color-heading); overflow-wrap: anywhere; }
.locator__place, .locator__address { margin: 0; font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--color-text); }
.locator__address { white-space: pre-line; }

.locator__links { margin: var(--space-1) 0 0; padding: 0; list-style: none; }
.locator__link {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);   /* B6: 44 px tap rows */
  font-size: var(--fs-body);
  color: var(--color-link);
  overflow-wrap: anywhere;
}
.locator__link:hover { color: var(--color-link-hover); }

.locator__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 0; }
.locator__tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  color: var(--c-grey-900);
}
.locator__tag--full { border-color: var(--c-deep-blue); background: var(--c-deep-blue); color: var(--c-white); }

.locator__empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-media);
  background: var(--color-surface-quiet);
}
.locator__empty-heading { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-regular); }
.locator__empty-text { margin: 0; max-width: var(--container-text); }
.locator__nearby { display: flex; flex-direction: column; gap: var(--space-4); }
.locator__nearby-heading { margin: var(--space-4) 0 0; font-size: var(--fs-h4); font-weight: var(--fw-medium); }

@media (min-width: 600px) {
  .locator__heading { font-size: calc(var(--fs-h3) + var(--space-1) + var(--space-1) / 2); } /* prototype 28px */
  .locator__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .locator__suggest p { flex: 0 1 auto; }
}
@media (min-width: 1024px) {
  .locator__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}