/* Keyboard access (2026-10-28). The age check's Yes/No and the Hamburger were <a> tags without an href, which the
   Tab key skips, so a keyboard user could not get past the age popup. They are <button>s now (bottom.php, top.php);
   the resets below keep the look master.css gives them. Focus rings use :focus-visible, so they show for the
   keyboard and not for a mouse click or a tap. */

/* First Tab stop on every page with the masthead (top.php); off screen until it has focus */
a.SkipLink {
  left: -9999px;
  position: absolute;
  top: 0;
}
a.SkipLink:focus {
  background: #65612f;
  border-radius: 0 0 5px 0;
  color: #fdfdfd;
  font-family: "museo-sans-rounded", Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 700;
  left: 0;
  letter-spacing: 1px;
  padding: 10px 16px;
  position: fixed;
  text-decoration: none;
  text-transform: uppercase;
  z-index: 1000;
}

#Age #YES,
#Age #NO {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  cursor: pointer;
}
#Age #YES:focus-visible,
#Age #NO:focus-visible {
  outline: 2px solid #65612f;
  outline-offset: 2px;
}

button.Hamburger {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
}
button.Hamburger:focus-visible {
  border-radius: 5px;
  outline: 2px solid #fdfdfd;
  outline-offset: -2px;
}

/* the drawn checkboxes (app.js checkableA11y); master.css takes their outline away */
.prettycheckbox > a:focus-visible {
  outline: 2px solid #f15c22;
  outline-offset: 2px;
}

/* app.js moves focus onto a checkout step (or the invoice) when the focused button hides or is removed; the
   step itself needs no ring */
#Checkout div.slide:focus {
  outline: none;
}

/* The store's <a role="button">s (add to cart, View Cart, Checkout, the checkout steps, the cart's ×): the browser's
   own ring is orange on these orange buttons. White on the orange cart bar and the olive mini cart. */
a[role=button]:focus-visible {
  outline: 2px solid #65612f;
  outline-offset: 2px;
}
#CartBar a[role=button]:focus-visible {
  outline-color: #fdfdfd;
}
#CartBar .wrap a[role=button]:focus-visible {
  outline-offset: -3px;
}
/* the checkout steps' Next/Back sit in boxes that clip anything outside them, so their ring goes inside */
#Checkout a.next[role=button]:focus-visible,
#Checkout a.previous[role=button]:focus-visible {
  outline-color: #fdfdfd;
  outline-offset: -4px;
}