/* ============================================================================
   cart.css - the buy bar that closes every product and package page.

   Loads AFTER store.css and only on /store/ pages. It does not edit fullstyle.css
   or store.css: those sheets live outside this candidate folder, and a shared
   stylesheet is the standing place two hands overwrite each other. Everything
   here is additive and scoped under .buybar.

   His ruling, 2026-08-30: every product and package page ends with two SQUARE
   buttons - BUY NOW (blue) and ADD TO CART (gold-bordered) - and both lead into
   one checkout. SQUARE is taken literally: border-radius 0, no pill. The site's
   existing primary action is a 999px pill; this lane is deliberately not that.

   Colour, and why these exact numbers:
     - Buy fill #2E5AA8 with ink #EAF1FF measures 5.87:1 - clears the 4.5 floor
       for small bold text. The site's blue-glass gradient was measured first and
       came in at 4.47:1 against the same ink, under the floor, so it is not used
       here. Edge #5A87D6 on the true-black ground measures 5.87:1.
     - Cart is gold-bordered per his word. #C9A227 on #0B0B0B measures 8.14:1.
     - The cart fill stays inside the true-black band this lane already holds
       (max channel 22, spread 2): #0B0B0B and #121210 are both inside it.
     - The two buttons are deliberately NOT the same weight: one filled, one
       outlined. The next move is never ambiguous, and no row of identical cells
       exists here - two cells, two different classes.

   Literals, not bare var(): a custom property that resolves to an EMPTY string
   still counts as "set", so a var() fallback never fires for it. Each surface
   declares the literal first and the token second - the literal is the floor.
   ========================================================================== */

/* ------------------------------------------------------------- the buy bar */
.buybar {
  margin: 30px clamp(24px, 3.2vw, 64px) 0;
  margin-inline: var(--pad, clamp(24px, 3.2vw, 64px));
  padding: 24px 0 0;
  border-top: 1px solid #3b3b3b;
  border-top-color: var(--line, #3b3b3b);
}

/* Flex, not grid: two actions on one line, wrapping to two lines on a narrow
   screen. No repeat(3|4) template exists in this sheet. */
.buybar__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
}

/* The shared skeleton. The two buttons diverge below - they never share a look. */
.buybar__buy,
.buybar__cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 26px;
  border-radius: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-family: var(--sans, Arial, Helvetica, sans-serif);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* BUY NOW - the filled primary. */
.buybar__buy {
  background: #2E5AA8;
  border: 1px solid #5A87D6;
  color: #EAF1FF;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.buybar__buy:hover,
.buybar__buy:focus-visible { background: #3668BE; border-color: #85A9E6; }
.buybar__buy:focus-visible { outline: 2px solid #EAF1FF; outline-offset: 2px; }

/* ADD TO CART - the outlined second action, gold-bordered per his ruling. */
.buybar__cart {
  background: #0B0B0B;
  border: 2px solid #C9A227;
  color: #C9A227;
  transition: background 0.18s ease, color 0.18s ease;
}
.buybar__cart:hover,
.buybar__cart:focus-visible { background: #121210; color: #E0BC44; }
.buybar__cart:focus-visible { outline: 2px solid #C9A227; outline-offset: 2px; }
.buybar__cart[data-state="in"] { color: #f1f0eb; color: var(--paper, #f1f0eb); border-color: #E0BC44; }

/* The one line under the buttons. It says what happens next, in words, because a
   control that does not say what it does is not a control. */
.buybar__note {
  margin: 14px 0 0;
  max-width: 68ch;
  font-size: 0.86rem;
  line-height: 1.55;
  color: #a7a7a2;
  color: var(--gray-2, #a7a7a2);
}

/* The live region. Empty until the cart answers, so it never paints a stale
   sentence, and it never moves the buttons when it fills. */
.buybar__said {
  margin: 10px 0 0;
  min-height: 1.3em;
  font-size: 0.86rem;
  line-height: 1.3;
  color: #d7d6d1;
  color: var(--gray-1, #d7d6d1);
}
.buybar__said:empty { margin-top: 0; }
.buybar__said a { color: #C9A227; }

/* --------------------------------------------------------- reduced motion */
/* Every transition in this sheet is a courtesy on hover, never information.
   Off on ask. */
@media (prefers-reduced-motion: reduce) {
  .buybar__buy, .buybar__cart { transition: none; }
}