/* ============================================================================
   add-to-cart.css — the second, quieter button in a product page's Buy Now row.

   assets/js/buy-now.js injects <a class="buybtn hbe-add"> beside every Buy Now
   that carries a data-buy-sku, rather than the markup being written by hand
   into forty heroes. Each product page's hero was designed on its own page and
   carries its own <style>, so a button added to one template would never reach
   the rest.

   The look has to come from a stylesheet rather than from inline styles on the
   element, and it has to win on specificity rather than on source order: the
   pages put their inline <style> blocks AFTER the <link> tags in the head, so a
   linked `a.buybtn` rule would lose to the page's own. Every selector below
   names .hbe-add as well, which is a genuine specificity win wherever the file
   is loaded.

   Same blue, less weight: white with a blue outline marks it as the quieter
   of the two without introducing a second colour. Deliberately no icon — the
   cart glyph belongs to Buy Now, which is the button that actually goes to
   the cart.
   ========================================================================= */

/* Filled white, not transparent: several heroes (the Yealink phones, the
   headset) sit the row over a photograph, and a transparent outline there
   left "Add to Cart" as blue text on a grey desk — unreadable. White keeps it
   legible on any backdrop, reads as secondary against the solid blue of Buy
   Now, and matches the white Download Data Sheet button those heroes already
   have. Blue on white is 4.9:1.

   The outline is an inset shadow, not a border, so this button is exactly
   the height of Buy Now. A 1.5px border made it 3px taller, and in the rows
   that are plain blocks rather than flex that dropped it 3px below its
   neighbour. */
a.buybtn.hbe-add {
  color: var(--blue);
  background: #fff;
  border: 0;
  box-shadow: inset 0 0 0 1.5px var(--blue);
}

a.buybtn.hbe-add:hover {
  color: #fff;
  background: var(--blue);
  box-shadow: inset 0 0 0 1.5px var(--blue), 0 10px 22px -10px var(--blue);
}

a.buybtn.hbe-add:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Mid-add and just-added. aria-disabled rather than a disabled attribute,
   which an <a> does not have; the click handler honours it. */
a.buybtn.hbe-add[aria-disabled] {
  pointer-events: none;
  color: #fff;
  background: var(--blue);
}

/* ---------- where the gap comes from --------------------------------------
   The row is one of four things depending on the page, so buy-now.js measures
   it and picks the class rather than this file guessing:

     .pcta / .sw-actions   already flex rows with their own gap  -> no class
     .buy-row              a plain block on most pages           -> -inline
     .p-glance             a narrow rail, button at width 100%   -> -stack

   hbe-ax3000-router.html makes its .buy-row a flex row with a gap, which is
   why the choice cannot simply be "margin-left in .buy-row". */

a.buybtn.hbe-add-inline {
  margin-left: 10px;
}

/* Side by side in a plain block row the two sit on a shared baseline, and
   Buy Now's cart icon puts its baseline 2.5px off a text-only button's.
   Middle-aligning both lines them up exactly. No effect where .buy-row is a
   flex row (hbe-ax3000-router.html) — vertical-align does not apply to flex
   items — and no page sets vertical-align on a.buybtn, so nothing is
   overridden. */
.buy-row > a.buybtn {
  vertical-align: middle;
}

a.buybtn.hbe-add-stack {
  margin-left: 0;
  margin-top: 10px;
}