/* The shop's own pieces, on top of the installer's tokens (style.css is
   the design language; nothing here invents a colour - except the PayPal
   button, whose colours are PayPal's own brand). */

.quiet-link{color:var(--fg-3); text-decoration:none}
.quiet-link:hover{color:var(--fg); text-decoration:underline;
                  text-underline-offset:3px}

.shop-h2{
  font:400 1.15rem/1.3 var(--serif); letter-spacing:-.01em;
  margin:2.4rem 0 .7rem; color:var(--fg-2);
}

/* license levels */
.level{margin:1.6rem 0 0}
.level-title{
  font:600 .8rem/1 var(--sans); letter-spacing:.12em; text-transform:uppercase;
  color:var(--fg-3); margin:0 0 .5rem;
}
.level-blurb{color:var(--fg-3); font-size:.9rem; max-width:34rem;
             margin:.2rem 0 .7rem}
.level .choices{margin-top:0}
.level[hidden]{display:none}

/* SKU cards ride the installer's .choice look - which is a FLEX ROW
   (style.css:104), so the card is a text block plus a price pushed to the
   right edge, never floats. */
#sku-list .choice{justify-content:space-between}
.choice .sku-text{flex:1}
.choice .sku-text b{display:block; font-weight:600}
.choice .blurb{display:block; font-size:.85rem; color:var(--fg-3);
               margin-top:.15rem}
.choice .price{flex:none; font-family:var(--mono); color:var(--fg-2)}

.mac-input{
  font-size:1.05rem; padding:.65rem .8rem; width:100%; max-width:22rem;
  background:var(--bg-sunken); color:var(--fg);
  border:1px solid var(--rule-strong); border-radius:3px;
}
.mac-input:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.mac-input.bad{border-color:var(--bad)}

/* The strip is display:flex in style.css, which overrides the UA's
   [hidden] - state it explicitly, the same way .screen[hidden] does. */
#mac-strip[hidden]{display:none}

.quote{
  margin:.4rem 0 0; max-width:22rem; font-size:.98rem;
  border:1px solid var(--rule); border-radius:3px; padding: .9rem 1rem;
  background:var(--bg-sunken);
}
.quote .row{display:flex; justify-content:space-between; gap:1rem;
            padding:.15rem 0}
.quote .row.total{border-top:1px solid var(--rule-strong); margin-top:.4rem;
                  padding-top:.5rem; font-weight:600}
.quote .mono{font-family:var(--mono)}

.bind-warning{
  max-width:34rem; color:var(--fg-2); font-size:.95rem;
  margin:1.4rem 0 0; padding-left:.8rem;
  border-left:3px solid var(--caution);
}

.accept-row{margin:1rem 0 0}
.accept-row label{display:block; font-size:.9rem; color:var(--fg-2);
                  margin-bottom:.35rem}
.accept-input{max-width:11rem; text-transform:uppercase;
              letter-spacing:.08em}

/* branded pay buttons */
.pay-btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-weight:600; font-size:1rem; min-height:2.9rem; padding:.6rem 1.5rem;
}
.card-btn{background:var(--final); color:var(--final-fg)}
.card-btn:hover:not(:disabled){background:var(--final-hover)}
.card-btn svg{flex:none}
/* PayPal's own button colours - gold field, the two-tone wordmark. */
.paypal-btn{background:#ffc439; border-color:#ffc439}
.paypal-btn:hover:not(:disabled){background:#f2ba36}
.paypal-btn .pp-pay,.paypal-btn .pp-pal{
  font-style:italic; font-weight:700; font-size:1.15rem; letter-spacing:-.02em;
}
.paypal-btn .pp-pay{color:#003087}
.paypal-btn .pp-pal{color:#009cde}

/* thanks page */
a.dl{
  display:inline-block; margin-top:1rem; padding:.7rem 1.4rem;
  background:var(--accent); color:var(--accent-fg); border-radius:3px;
  text-decoration:none; font-weight:600;
}
a.dl:hover{background:var(--accent-hover)}