/* The primary action as a <button>.
   ==========================================================================
   The site styles this control as `a.buybtn` — element-qualified, everywhere
   it is defined — so a <button class="buybtn"> gets none of it and falls back
   to the browser's grey box. Place Order has to be a button: it runs script
   rather than following a link.

   The prototype hit the same thing. Its build.py mirrored every a.buybtn rule
   onto button.buybtn in the stylesheet it generates, and these are those
   rules, copied from prototypes/shop/css/style.css on the shop-prototype
   branch rather than retyped, so the two cannot drift on a value.
   ------------------------------------------------------------------------ */

button.buybtn {
  font: inherit;
  cursor: pointer;
  border: 0;
}

button.buybtn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      height: 30px;
      padding: 0 12px;
      border-radius: 40px;
      color: #fff;
      background: var(--blue);
      border: 0;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .01em;
      text-decoration: none;
      box-shadow: var(--shadow-sm);
      transition: background .14s, transform .12s, box-shadow .14s;
    }

button.buybtn:hover {
      background: var(--blue-deep);
      transform: translateY(-1px);
      box-shadow: var(--shadow-md);
    }

button.buybtn svg {
      width: 14px;
      height: 14px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

button.buybtn {
      height: 30px;
      padding-top: 0;
      padding-bottom: 0;
      align-items: center;
    }

/* Add to Cart, on hover.
   ==========================================================================
   page-switches.css carries two !important rules for the same state:

       .viewbtn:hover { color: #fff    !important; }
       .viewbtn:hover { color: #0c151b !important; }

   The second is a dark-theme rule sitting at the top level of the file
   instead of inside its media query — #0c151b is the dark background colour.
   Equal specificity, both !important, so the later one wins and the label
   goes near-black on a blue button.

   The fault is in the ported site stylesheet and it affects every .viewbtn on
   any page that loads it, not just this button. That file is generated from
   the static site by port_page.py, so correcting it there would be undone by
   the next port and the static build is not ours to change — hence this
   override, scoped to the shop card, and a note to whoever owns the port.

   !important and a longer selector are both needed: the rule being beaten has
   !important, and equal specificity would lose to it on source order. */
body .sw-card .act.viewbtn:hover,
body .sw-card .act.viewbtn:focus,
body .sw-card .act.viewbtn:active {
  color: #fff !important;
}

/* The primary button's label, in every theme state.
   ==========================================================================
   The site gives a.buybtn its padding, radius and background in a plain
   rule, but its colour only here:

       :root[data-theme="light"] a.buybtn { color: #fff; }

   That matches only when a light theme has been explicitly stamped on the
   root element. The default is neither stamp — a visitor who has never
   touched a theme toggle gets no data-theme at all — so the rule misses, the
   label inherits the page's dark ink, and a dark label sits on a blue
   button. Hover looked fine only because those rules carry !important.

   Same shape of fault as the leaked .viewbtn rules above: a colour whose
   only definition lives inside a [data-theme] block. Worth fixing at the
   source for the whole site; this covers the commerce pages.

   .btn-outline is deliberately untouched — Continue Shopping is meant to
   read as dark text on a pale ground. */
body a.buybtn,
body button.buybtn,
body a.buybtn:hover,
body a.buybtn:focus,
body a.buybtn:active,
body button.buybtn:hover,
body button.buybtn:focus,
body button.buybtn:active {
  color: #fff !important;
}