/**
 * Harvest — the shopper palette switcher (FE-01), as it sits in the footer bar.
 *
 * NO LITERAL COLOUR IN THIS FILE, INCLUDING THE SWATCHES. The five palette identity pairs it
 * paints come from tokens/_swatches.css via var(--hrv-swatch-<name>-*), which is where a palette's
 * defining hex belongs; see that file for why they cannot simply be the active --hrv-* tokens.
 *
 * TAP TARGETS ARE 44px AND THAT IS A REQUIREMENT, NOT A ROUNDING. CLAUDE.md 11.4 sets it for
 * every viewport, and the 144 viewport tasks closed on it. The visible swatch is 20px; the button
 * around it carries the size, which is why min-width/min-height sit on the button and not on the
 * swatch. min-* on an inline box does nothing - this theme has that bug on record from the
 * mobile-drawer rows - so the button is explicitly inline-flex.
 *
 * THE CURRENT OPTION IS MARKED BY A RING, NOT BY COLOUR ALONE. aria-pressed carries it for
 * assistive tech; sighted users get a visible outline offset from the swatch, because "the
 * selected one is slightly darker" is not a distinction on a row of five colours, several of
 * which differ from each other by less than that.
 */
.ecommpaas-palette-switcher {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.ecommpaas-palette-switcher__label {
  font-size: 12.5px;
  color: var(--hrv-text-muted);
}

.ecommpaas-palette-switcher__options {
  display: flex;
  align-items: center;
  gap: 2px;
}

.ecommpaas-palette-switcher__option {
  /* inline-flex, not inline-block: min-height on an inline box is inert. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 50%;
}

.ecommpaas-palette-switcher__option:focus-visible {
  outline: 2px solid var(--hrv-accent);
  outline-offset: -4px;
}

.ecommpaas-palette-switcher__swatch {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--hrv-border);
  /* Ring of the palette's page colour, core of its accent - the two values a shopper actually
     recognises a palette by. */
  background:
    radial-gradient(circle at 50% 50%,
      var(--hrv-swatch-accent) 0 55%,
      var(--hrv-swatch-bg) 56% 100%);
}

.ecommpaas-palette-switcher__option[data-palette="wheat"] .ecommpaas-palette-switcher__swatch {
  --hrv-swatch-bg: var(--hrv-swatch-wheat-bg);
  --hrv-swatch-accent: var(--hrv-swatch-wheat-accent);
}

.ecommpaas-palette-switcher__option[data-palette="basil"] .ecommpaas-palette-switcher__swatch {
  --hrv-swatch-bg: var(--hrv-swatch-basil-bg);
  --hrv-swatch-accent: var(--hrv-swatch-basil-accent);
}

.ecommpaas-palette-switcher__option[data-palette="tomato"] .ecommpaas-palette-switcher__swatch {
  --hrv-swatch-bg: var(--hrv-swatch-tomato-bg);
  --hrv-swatch-accent: var(--hrv-swatch-tomato-accent);
}

.ecommpaas-palette-switcher__option[data-palette="plum"] .ecommpaas-palette-switcher__swatch {
  --hrv-swatch-bg: var(--hrv-swatch-plum-bg);
  --hrv-swatch-accent: var(--hrv-swatch-plum-accent);
}

.ecommpaas-palette-switcher__option[data-palette="honey"] .ecommpaas-palette-switcher__swatch {
  --hrv-swatch-bg: var(--hrv-swatch-honey-bg);
  --hrv-swatch-accent: var(--hrv-swatch-honey-accent);
}

.ecommpaas-palette-switcher__option[aria-pressed="true"] .ecommpaas-palette-switcher__swatch {
  box-shadow: 0 0 0 2px var(--hrv-text);
}

/* The name is for assistive tech and for anyone who cannot tell the swatches apart; it is not in
   the artboard's footer, which is a single quiet row. Hidden visually, never from the
   accessibility tree - display:none or visibility:hidden would take it out of both. */
.ecommpaas-palette-switcher__name {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/*
 * NO MOBILE OVERRIDE, AND THE ABSENCE IS DELIBERATE - TWO RULES WERE TRIED HERE AND BOTH WERE
 * WRONG, IN DIFFERENT WAYS.
 *
 * `justify-content: center` was a no-op. Below 768px components/_footer.css switches
 * .hrv-footer-bar-inner to `flex-direction: column; align-items: flex-start`, which sizes each
 * item shrink-to-fit on the cross axis - so the switcher is exactly as wide as its content and
 * has ZERO free space on its own main axis, and justify-content had nothing to distribute. The
 * comment shipped with it claimed it centred the row; it did not.
 *
 * `align-self: center` did work, and a screenshot is what settled that it should not be there:
 * the mobile footer stacks copyright, switcher, links, and a centred middle row between two
 * left-aligned ones reads as a mistake. The artboard has no switcher to copy, so the honest
 * default is to look like its siblings - which is what the parent's align-items already does.
 *
 * Left as a comment rather than deleted: this is the third time this decision has been made, and
 * the next person to notice the switcher is not centred should find the reason here.
 */

/* The live region for a refused or dropped save. Visually hidden but never removed from the
   accessibility tree, and never display:none - a live region that is not in the tree when the
   page loads does not announce later writes in several screen readers. */
.ecommpaas-palette-switcher__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}