@font-face{font-family:Manrope;font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/438aa629764e75f3-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Manrope;font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/875ae681bfde4580-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Manrope;font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/51251f8b9793cdb3-s.woff2) format("woff2");unicode-range:u+0370-0377,u+037a-037f,u+0384-038a,u+038c,u+038e-03a1,u+03a3-03ff}@font-face{font-family:Manrope;font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/e857b654a2caa584-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Manrope;font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/cc978ac5ee68c2b6-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Manrope;font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/4c9affa5bc8f420e-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/438aa629764e75f3-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/875ae681bfde4580-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/51251f8b9793cdb3-s.woff2) format("woff2");unicode-range:u+0370-0377,u+037a-037f,u+0384-038a,u+038c,u+038e-03a1,u+03a3-03ff}@font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/e857b654a2caa584-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/cc978ac5ee68c2b6-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/4c9affa5bc8f420e-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Manrope;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/438aa629764e75f3-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Manrope;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/875ae681bfde4580-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Manrope;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/51251f8b9793cdb3-s.woff2) format("woff2");unicode-range:u+0370-0377,u+037a-037f,u+0384-038a,u+038c,u+038e-03a1,u+03a3-03ff}@font-face{font-family:Manrope;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/e857b654a2caa584-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Manrope;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/cc978ac5ee68c2b6-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Manrope;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/4c9affa5bc8f420e-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Manrope;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/438aa629764e75f3-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Manrope;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/875ae681bfde4580-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Manrope;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/51251f8b9793cdb3-s.woff2) format("woff2");unicode-range:u+0370-0377,u+037a-037f,u+0384-038a,u+038c,u+038e-03a1,u+03a3-03ff}@font-face{font-family:Manrope;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/e857b654a2caa584-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Manrope;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/cc978ac5ee68c2b6-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Manrope;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/4c9affa5bc8f420e-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Manrope;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/438aa629764e75f3-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Manrope;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/875ae681bfde4580-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Manrope;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/51251f8b9793cdb3-s.woff2) format("woff2");unicode-range:u+0370-0377,u+037a-037f,u+0384-038a,u+038c,u+038e-03a1,u+03a3-03ff}@font-face{font-family:Manrope;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/e857b654a2caa584-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Manrope;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/cc978ac5ee68c2b6-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Manrope;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/4c9affa5bc8f420e-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Manrope;font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/438aa629764e75f3-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Manrope;font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/875ae681bfde4580-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Manrope;font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/51251f8b9793cdb3-s.woff2) format("woff2");unicode-range:u+0370-0377,u+037a-037f,u+0384-038a,u+038c,u+038e-03a1,u+03a3-03ff}@font-face{font-family:Manrope;font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/e857b654a2caa584-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Manrope;font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/cc978ac5ee68c2b6-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Manrope;font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/4c9affa5bc8f420e-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Manrope Fallback;src:local("Arial");ascent-override:103.31%;descent-override:29.07%;line-gap-override:0.00%;size-adjust:103.19%}.__className_538739{font-family:Manrope,Manrope Fallback;font-style:normal}.__variable_538739{--font-body:"Manrope","Manrope Fallback"}

/* --------------------------------------------------------------------------- *
 * Footer layout
 *
 * The newsletter block used to overlap the footer link columns at every width
 * from 1024px up. Cause: the row was a nested flex with justify-between, so the
 * newsletter column (min-width:0) shrank while the link columns could not
 * shrink below their min-content width and simply spilled on top of it.
 *
 * A grid with a reserved newsletter track removes the possibility of collision:
 * the link side is minmax(0,1fr) and both it and its children are allowed to
 * wrap, so the links can never reach into the newsletter column.
 * --------------------------------------------------------------------------- */
.footer-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  min-width: 0;
}

.footer-main {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  min-width: 0;
}

.footer-link-groups {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-width: 0;
}

.footer-link-group {
  min-width: 0;
}

.footer-newsletter {
  width: 100%;
  min-width: 0;
  max-width: 400px;
}

@media (min-width: 640px) {
  .footer-main {
    flex-flow: row wrap;
    gap: 2.5rem 3.5rem;
  }

  .footer-link-groups {
    flex: 1 1 auto;
    flex-flow: row wrap;
    gap: 2rem 2.5rem;
  }
}

@media (min-width: 1024px) {
  .footer-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 2.5rem;
  }

  .footer-newsletter {
    max-width: none;
  }
}

@media (min-width: 1280px) {
  .footer-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
  }
}

/* --------------------------------------------------------------------------- *
 * Utilities missing from the compiled theme.css
 *
 * theme.css is a pre-built Tailwind v4 artefact and there is no build step in
 * this repo, so any utility that was not in the original build silently does
 * nothing. The classes below are all *referenced by the templates* but absent
 * from theme.css - most importantly `py-8`, which is why cards had horizontal
 * padding but no vertical padding.
 *
 * These are written as attribute selectors ([class~="x"]) so that no selector
 * escaping is involved; they sit in site.css, which loads after theme.css, and
 * have the same specificity as a plain utility class.
 *
 * Verified with: node diag-classes2.mjs (see CHANGELOG "Post-audit fixes #5").
 * --------------------------------------------------------------------------- */

/* --- spacing scale (--spacing is defined in theme.css) --------------------- */
[class~="p-0"]   { padding: 0; }
[class~="py-5"]  { padding-block: calc(var(--spacing) * 5); }
[class~="py-8"]  { padding-block: calc(var(--spacing) * 8); }
[class~="pt-12"] { padding-top: calc(var(--spacing) * 12); }
[class~="px-10"] { padding-inline: calc(var(--spacing) * 10); }
[class~="pl-5"]  { padding-left: calc(var(--spacing) * 5); }
[class~="mt-3"]  { margin-top: calc(var(--spacing) * 3); }

[class~="!px-4"] { padding-inline: calc(var(--spacing) * 4) !important; }
[class~="!px-6"] { padding-inline: calc(var(--spacing) * 6) !important; }
[class~="!px-7"] { padding-inline: calc(var(--spacing) * 7) !important; }

@media (min-width: 640px) {
  [class~="sm:px-10"]         { padding-inline: calc(var(--spacing) * 10); }
  [class~="sm:justify-between"] { justify-content: space-between; }
}

@media (min-width: 768px) {
  [class~="md:grid-cols-2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  [class~="lg:col-span-2"] { grid-column: span 2 / span 2; }
}

/* --- typography ------------------------------------------------------------ */
[class~="text-xl"]      { font-size: 1.25rem;  line-height: 1.4; }
[class~="text-3xl"]     { font-size: 1.875rem; line-height: 1.2; }
[class~="leading-tight"]{ line-height: 1.25; }
[class~="text-right"]   { text-align: right; }
[class~="underline"]    { text-decoration-line: underline; }

/* --- box model ------------------------------------------------------------- */
[class~="h-fit"]   { height: fit-content; }
[class~="w-24"]    { width: calc(var(--spacing) * 24); }
[class~="min-h-11"]{ min-height: calc(var(--spacing) * 11); }
[class~="min-w-11"]{ min-width: calc(var(--spacing) * 11); }

/* --- borders and lists ----------------------------------------------------- */
[class~="border-dashed"] { border-style: dashed; }
[class~="border-l-4"]    { border-left-style: solid; border-left-width: 4px; }
[class~="list-disc"]     { list-style-type: disc; }
[class~="opacity-60"]    { opacity: 0.6; }

/* --------------------------------------------------------------------------- *
 * Minimum order value (app.min_order, $300)
 *
 * Below the minimum the cart renders a disabled Checkout button and the
 * checkout page disables its submit button; both show the same shortfall
 * note. Colours reuse the theme's red tokens so the note matches the existing
 * .checkout-error text (#b91c1c / red-700).
 * --------------------------------------------------------------------------- */
.cart-min-note,
.checkout-min-note {
  color: var(--color-red-700);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.cart-min-note {
  margin: 0;
  text-align: right;
}

.checkout-min-note {
  margin: 0.75rem 0 0;
}

.cart-gate__button[disabled],
.checkout-submit[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------- *
 * Crypto payment options (checkout + order confirmation)
 *
 * theme.css ships the base `.checkout-payment__card` shell; everything below
 * is new and lives here because there is no Tailwind build step in this repo.
 * The address is a public deposit address, so it is shown in a monospace box
 * with a one-click copy control rather than hidden behind an email.
 * --------------------------------------------------------------------------- */

.checkout-payment__intro {
  margin: -0.25rem 0 1rem;
  color: var(--muted-2);
  font-size: 0.875rem;
  line-height: 1.5;
}

.checkout-payment__card-symbol {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted-2);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.checkout-payment__card.is-selected .checkout-payment__card-symbol {
  background: rgba(71, 169, 212, 0.16);
  color: var(--accent-dark);
}

/* Wallet detail panel for the selected crypto option. */
.checkout-payment__coin {
  margin: 0 0 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(71, 169, 212, 0.35);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--accent-soft), #ffffff);
}

.checkout-payment__coin[hidden] {
  display: none;
}

.checkout-payment__coin-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.8rem;
}

.checkout-payment__coin-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(25, 48, 58, 0.14);
  flex-shrink: 0;
}

.checkout-payment__coin-badge .checkout-payment__mark {
  width: 1.5rem;
  height: 1.5rem;
}

.checkout-payment__coin-meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.checkout-payment__coin-title {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
}

.checkout-payment__coin-network {
  color: var(--muted);
  font-size: 0.75rem;
}

.checkout-payment__address-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}

.checkout-payment__address,
.crypto-pay__address {
  flex: 1;
  min-width: 0;
  display: block;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.4;
  word-break: break-all;
}

.checkout-payment__copy,
.crypto-pay__copy {
  flex-shrink: 0;
  padding: 0 0.95rem;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.checkout-payment__copy:hover,
.crypto-pay__copy:hover {
  background: var(--accent-dark);
}

.checkout-payment__copy:active,
.crypto-pay__copy:active {
  transform: translateY(1px);
}

.checkout-payment__copy.is-copied,
.crypto-pay__copy.is-copied {
  background: var(--badge);
}

.checkout-payment__coin-note {
  margin: 0.7rem 0 0;
  color: var(--muted-2);
  font-size: 0.75rem;
  line-height: 1.5;
}

/* Order confirmation payment panel. */
.crypto-pay {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.crypto-pay__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.crypto-pay__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  background: var(--accent-soft);
  flex-shrink: 0;
}

.crypto-pay__badge img {
  width: 2rem;
  height: 2rem;
  display: block;
}

.crypto-pay__title {
  margin: 0;
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 700;
}

.crypto-pay__sub {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.crypto-pay__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
  margin: 0 0 1rem;
}

.crypto-pay__meta dt {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.crypto-pay__meta dd {
  margin: 0.1rem 0 0;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
}

.crypto-pay__unit {
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

.crypto-pay__address-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}

.crypto-pay__address {
  background: var(--surface-soft);
}

.crypto-pay__copy {
  padding: 0 1.1rem;
}

.crypto-pay__note {
  margin: 0.8rem 0 0;
  color: var(--muted-2);
  font-size: 0.75rem;
  line-height: 1.5;
}

@media (max-width: 480px) {
  .checkout-payment__address-row,
  .crypto-pay__address-row {
    flex-direction: column;
  }

  .checkout-payment__copy,
  .crypto-pay__copy {
    min-height: 2.5rem;
  }
}

/* --------------------------------------------------------------------------- *
 * Dedicated crypto payment page (/pay/<order-number>/)
 *
 * Full-width, single-purpose page reached straight after checkout: the coin,
 * the amount, the address with a copy control, and numbered steps. It is the
 * only place the address lives now, so it reads as a proper payment screen.
 * --------------------------------------------------------------------------- */

.crypto-page {
  max-width: 42rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

.crypto-page__card {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.crypto-page__card--narrow {
  text-align: center;
}

.crypto-page__hero {
  text-align: center;
  margin-bottom: 1.5rem;
}

.crypto-page__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 999px;
  background: var(--accent-soft);
  margin-bottom: 0.9rem;
}

.crypto-page__badge img {
  width: 2.75rem;
  height: 2.75rem;
  display: block;
}

.crypto-page__eyebrow {
  margin: 0 0 0.35rem;
  color: var(--accent-dark);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.crypto-page__title {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 700;
  line-height: 1.2;
}

.crypto-page__sub {
  margin: 0.6rem auto 0;
  max-width: 34rem;
  color: var(--muted-2);
  font-size: 0.9rem;
  line-height: 1.6;
}

.crypto-page__amount {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  margin: 1.25rem 0;
  padding: 1.1rem;
  border: 1px solid rgba(71, 169, 212, 0.3);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--accent-soft), #ffffff);
}

.crypto-page__amount-label {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.crypto-page__amount-value {
  color: var(--ink);
  font-size: clamp(1.75rem, 5vw, 2.4rem);
  font-weight: 800;
  line-height: 1.1;
}

.crypto-page__amount-note {
  color: var(--muted-2);
  font-size: 0.8rem;
}

.crypto-page__field {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
}

.crypto-page__field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

.crypto-page__field-label {
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 700;
}

.crypto-page__network {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: rgba(71, 169, 212, 0.14);
  color: var(--accent-dark);
  font-size: 0.6875rem;
  font-weight: 700;
}

.crypto-page__address-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}

.crypto-page__address {
  flex: 1;
  min-width: 0;
  display: block;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.4;
  word-break: break-all;
}

.crypto-page__copy {
  flex-shrink: 0;
  padding: 0 1.1rem;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.crypto-page__copy:hover {
  background: var(--accent-dark);
}

.crypto-page__copy:active {
  transform: translateY(1px);
}

.crypto-page__copy.is-copied {
  background: var(--badge);
}

.crypto-page__steps {
  margin: 1.25rem 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.7rem;
}

.crypto-page__steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: var(--muted-2);
  font-size: 0.85rem;
  line-height: 1.5;
}

.crypto-page__num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

.crypto-page__warn {
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(185, 28, 28, 0.18);
  border-radius: 12px;
  background: rgba(185, 28, 28, 0.06);
  color: var(--color-red-700);
  font-size: 0.8rem;
  line-height: 1.5;
}

.crypto-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.crypto-page__cta-sub {
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0.9;
}

.crypto-page__status {
  margin: 0.9rem 0 0;
  text-align: center;
  color: var(--muted-2);
  font-size: 0.85rem;
  line-height: 1.5;
}

.crypto-page__status:empty {
  display: none;
}

.crypto-pay__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.35rem;
}

/* Payment state in the order-confirmation summary line. */
.payment-state--paid {
  color: #2f8a5b;
}

/* Paid state of the order-confirmation payment panel. */
.crypto-pay--paid {
  border-color: #bfe4cd;
  background: linear-gradient(180deg, #f2fbf5, #ffffff);
}

.crypto-pay__badge--paid {
  background: #e6f7ed;
  color: #2f8a5b;
}


@media (max-width: 480px) {
  .crypto-page__address-row {
    flex-direction: column;
  }

  .crypto-page__copy {
    min-height: 2.75rem;
  }

  .crypto-page__actions {
    flex-direction: column;
  }

  .crypto-page__actions a {
    justify-content: center;
    text-align: center;
  }
}