/* The shop pages (/buy/ and /key/), on top of the site's style.css: the price card, PayPal's button in it,
   the key once bought, and the find-your-key form. Kept apart so the shop can change without raising the
   ?v= of every page's stylesheet. */

/* A class, not a style attribute: the shop's security policy refuses those on a page that takes payments. */
.nav-end { margin-left: auto; }

.prose ol { padding-left: 1.3em; }
.prose ol li { margin: 8px 0; }

.shop-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brass);
  border-radius: 10px;
  padding: clamp(20px, 4vw, 34px);
  margin-top: 10px;
  margin-bottom: 10px;
}
.shop-price { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.shop-price .amount { font-family: var(--display); font-size: clamp(40px, 7vw, 56px); color: var(--brass);  }
.shop-price .per { color: var(--muted); font-size: 15px; letter-spacing: 0.04em; }
.shop-gets { margin: 6px 0 22px; }

/* PayPal draws its own button into this; the width keeps it from stretching across a wide card. */
.shop-paypal { max-width: 420px; }
.shop-paypal[hidden] { display: none; }

.shop-status {
  margin: 0 0 18px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(217, 182, 92, 0.4);
  background: rgba(217, 182, 92, 0.08);
  color: var(--text);
}
.shop-status.error { border-color: rgba(168, 57, 45, 0.55); background: rgba(168, 57, 45, 0.1); }
.shop-status[hidden], .shop-key[hidden] { display: none; }

.shop-key { margin-top: 6px; padding: 18px 20px; border: 1px dashed rgba(217, 182, 92, 0.55); border-radius: 10px; }
.shop-key-label { font-family: var(--display); letter-spacing: 0.1em; color: var(--muted); margin: 0 0 4px; font-size: 14px; text-transform: uppercase; }
.shop-key code { font-size: clamp(18px, 4.4vw, 28px); letter-spacing: 0.06em; word-break: break-all; user-select: all; }
.shop-key-note { margin-bottom: 0; }

.shop-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 18px 0 8px; }
.shop-form label { position: absolute; left: -9999px; }
.shop-form input[type="email"] {
  flex: 1 1 260px;
  min-width: 0;
  padding: 12px 14px;
  font: 17px var(--body);
  color: var(--text);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.shop-form input[type="email"]:focus { outline: none; border-color: var(--brass); }
.shop-form button { cursor: pointer; }
.shop-small { color: var(--muted); font-size: 14px; }

/* The price as it stands: the regular one struck through under a sale or a code, and what set it. */
.shop-price .was { color: var(--muted); font-size: 22px; font-family: var(--display); }
.shop-price .was[hidden] { display: none; }
.shop-sale { color: var(--brass); font-family: var(--display); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; }
.shop-sale:empty { display: none; }

/* The discount code box: small, above the button. */
.shop-code { margin: 0 0 16px; max-width: 420px; }
.shop-code input[type="text"] {
  flex: 1 1 160px;
  min-width: 0;
  padding: 9px 12px;
  font: 15px var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.shop-code input[type="text"]:focus { outline: none; border-color: var(--brass); }
.shop-code input::placeholder { text-transform: none; letter-spacing: 0; }
.shop-code label { position: absolute; left: -9999px; }
.shop-code[hidden] { display: none; }
.shop-final { font-size: 15px; margin: 0 0 16px; }

/* The site's prose rules, on the shop's page. */
.shop .shop-gets { padding-left: 1.2em; }
.shop .shop-price .per, .shop .shop-small { color: var(--muted); }