/*
 * Keyboard focus for every storefront page, whatever the theme does with
 * outlines. Linked right after the theme's stylesheet by
 * theme_head_tags_for() (includes/themes.php).
 *
 * The ring is the theme's ink on a halo of its paper: two colours far apart,
 * so one of them stands out against whatever it sits on, light or dark.
 * :not(#px-focus-off) lifts the rule above a theme's own `outline: none`
 * (ids included) and !important above its !important ones. A theme can
 * recolour it with --px-focus-ring / --px-focus-halo but can't switch it off
 * by accident.
 *
 * The two colours are taken from the page's own ink and paper, not a
 * section's: a footer band or a panel that redefines --ink/--paper for its
 * own colours (sometimes to the same value) would otherwise hide the ring.
 */
:root {
  --px-focus-ring: var(--ink, #15131a);
  --px-focus-halo: var(--paper, #ffffff);
}

/* A date field's own calendar button takes focus without :focus-visible. */
:root :focus-visible:not(#px-focus-off),
:root input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]):focus:not(#px-focus-off) {
  outline: 2px solid var(--px-focus-ring, var(--ink, #15131a)) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px var(--px-focus-halo, var(--paper, #ffffff)) !important;
}

/* Something focused by script so a screen reader starts there (the page's
   main region after the skip link, a dialog with nothing to press yet). */
:root [tabindex="-1"]:focus:not(#px-focus-off),
:root [data-px-focus-target]:focus:not(#px-focus-off) {
  outline: none !important;
  box-shadow: none !important;
}

.px-skip-link {
  position: fixed;
  top: 0.5rem;
  inset-inline-start: 0.5rem;
  z-index: 2147483000;
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  background: var(--ink, #15131a);
  color: var(--paper, #ffffff);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.px-skip-link:focus {
  transform: none;
}

/*
 * A card that is one link. The title's link (.px-stretch-link) is the card's
 * only way to its page; its ::after spreads over the whole card
 * (.px-stretch), so a click on the picture lands on the same link and
 * keyboard and screen-reader users meet it once, named by the title. The
 * card's own buttons sit above that layer. Its focus ring is drawn on the
 * layer, round the card, because a title clamped to two lines would clip a
 * ring drawn on the text.
 */
.px-stretch {
  position: relative;
}
.px-stretch .px-stretch-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
}
.px-stretch :is(button, input, select, textarea, label, summary, [role="button"], a[href]:not(.px-stretch-link)) {
  position: relative;
  z-index: 6;
}
:root .px-stretch .px-stretch-link:focus-visible:not(#px-focus-off) {
  outline: none !important;
  box-shadow: none !important;
}
:root .px-stretch .px-stretch-link:focus-visible:not(#px-focus-off)::after {
  box-shadow:
    inset 0 0 0 2px var(--px-focus-halo, var(--paper, #ffffff)),
    inset 0 0 0 4px var(--px-focus-ring, var(--ink, #15131a)),
    inset 0 0 0 6px var(--px-focus-halo, var(--paper, #ffffff));
}