:root {
  color-scheme: light;
  --bg: #f3f6fb;
  --card: #ffffff;
  --edge: #dde5f0;
  --ink: #0b1526;
  --soft: #56637a;
  --accent: #0a6cff;
  --accent-ink: #0050c2;
  --accent-soft: #e5efff;
  --ok: #00875a;
  --ok-soft: #dff6ec;
  --danger: #d42a1f;
  --grad: linear-gradient(135deg, #0a6cff 0%, #0a8cff 55%, #00b37e 130%);
  --glow-a: rgba(10, 108, 255, 0.18);
  --glow-b: rgba(0, 179, 126, 0.14);
  --shadow: 0 1px 2px rgba(11, 21, 38, 0.05), 0 24px 48px -28px rgba(11, 21, 38, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0a1120;
    --card: #111a2c;
    --edge: #223049;
    --ink: #e7eefa;
    --soft: #92a0b8;
    --accent: #2a7aff;
    --accent-ink: #8dbdff;
    --accent-soft: #132a52;
    --ok: #34d399;
    --ok-soft: #0e2e25;
    --danger: #ff6b61;
    --grad: linear-gradient(135deg, #1f6fff 0%, #2a86ff 55%, #13a877 130%);
    --glow-a: rgba(42, 122, 255, 0.24);
    --glow-b: rgba(34, 195, 142, 0.12);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 24px 48px -28px rgba(0, 0, 0, 0.8);
  }
}

* { box-sizing: border-box; }

/* "hidden" debe ganar siempre: si no, un display de la clase lo anula (p. ej. el botón de la tienda). */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  padding-inline: 20px;
  overflow-x: hidden;
  position: relative;
}

/* Halo suave detrás del titular: da profundidad sin competir con el contenido. */
.glow {
  position: absolute;
  inset: -240px 0 auto 0;
  height: 720px;
  background:
    radial-gradient(520px 320px at 30% 55%, var(--glow-a), transparent 70%),
    radial-gradient(420px 260px at 72% 40%, var(--glow-b), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.top, main, .foot {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
}

/* — Cabecera — */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding-block: 22px;
}

.top-right { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* Sign in / My account, with the balance once signed in. */
.account-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 13px/1 "Manrope", sans-serif;
  color: var(--ink);
  text-decoration: none;
  padding: 9px 13px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--card);
}
.account-link:hover { border-color: var(--accent); }
.account-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.account-balance {
  font: 700 12px/1 "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--accent-ink, var(--accent));
}
.buy-email { display: grid; gap: 6px; }
.buy-fine[hidden] { display: none; }
.buy-email[hidden] { display: none; }
#coin-saldo + .coin-text { flex: 1 1 auto; min-width: 0; }
#coin-saldo + .coin-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coin-balance { margin-left: auto; font: 600 12px/1.3 "IBM Plex Mono", ui-monospace, monospace; color: var(--soft); text-align: right; font-variant-numeric: tabular-nums; }
.buy-min a { color: inherit; font-weight: 700; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Sora", "Manrope", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  text-decoration: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--grad);
  color: #fff;
  font-size: 15px;
}

.lang {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--card);
}

.lang-btn {
  font: 600 12px/1 "Manrope", sans-serif;
  letter-spacing: 0.04em;
  color: var(--soft);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 7px 12px;
  cursor: pointer;
}
.lang-btn.is-active { background: var(--accent); color: #fff; }

/* — Portada — */

.hero {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  padding-block: 56px 64px;
}

.eyebrow {
  display: inline-block;
  margin: 0 0 20px;
  padding: 6px 14px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--card);
  font: 500 12px/1.4 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--soft);
}

h1 {
  font-family: "Sora", "Manrope", sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 5.4vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 20px;
  text-wrap: balance;
}

.lede {
  max-width: 58ch;
  margin: 0 auto 40px;
  font-size: clamp(16px, 1.8vw, 18px);
  color: var(--soft);
  text-wrap: pretty;
}

/* Abrir un pedido: la única acción de la página. */
.open-order {
  max-width: 580px;
  margin-inline: auto;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: 18px;
  padding: 20px;
  box-shadow: var(--shadow);
}

.open-order label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 10px;
}

.order-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.order-row input {
  flex: 1 1 260px;
  min-width: 0;
  font: 500 15px/1.2 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--edge);
  border-radius: 12px;
  padding: 14px 16px;
}
.order-row input::placeholder { font-family: "Manrope", sans-serif; letter-spacing: 0; color: var(--soft); }
.order-row input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.order-row input[aria-invalid="true"] { border-color: var(--danger); }

.cta {
  flex: 0 0 auto;
  font: 700 15px/1 "Manrope", sans-serif;
  color: #fff;
  background: var(--grad);
  box-shadow: 0 10px 24px -10px rgba(10, 108, 255, 0.55);
  border: 0;
  border-radius: 12px;
  padding: 14px 22px;
  cursor: pointer;
  transition: transform 0.08s ease, filter 0.15s ease;
}
.cta:hover { filter: brightness(1.08); }
.cta:active { transform: scale(0.98); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cta { color: #fff; }
}

.form-hint { margin: 10px 2px 0; font-size: 13px; color: var(--soft); }
.form-hint.error { color: var(--danger); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* — Pasos — */

.steps { padding-block: 24px 48px; }

.steps h2 {
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--soft);
  text-align: center;
  margin: 0 0 24px;
}

.steps ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  counter-reset: none;
}

.steps li {
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: 16px;
  padding: 22px;
}

.step-n {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font: 600 14px/1 "IBM Plex Mono", ui-monospace, monospace;
}

h3 {
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 6px;
}

.steps p, .trust p { margin: 0; font-size: 14.5px; color: var(--soft); }

/* — Garantías: sin tarjetas, una franja separada por líneas — */

.trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--edge);
  margin-bottom: 40px;
}

.trust article {
  display: flex;
  gap: 14px;
  padding: 26px 22px;
}
.trust article + article { border-left: 1px solid var(--edge); }

.trust-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent-soft);
  font-size: 16px;
}
.trust-icon.ok { background: var(--ok-soft); color: var(--ok); font-weight: 700; }

.foot {
  margin-top: auto;
  padding-block: 24px 32px;
  text-align: center;
  font-size: 13px;
  color: var(--soft);
}
.site-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 10px; }
.site-links a { color: inherit; }
.site-links a:hover { color: var(--accent); }

/* — Móvil — */

@media (max-width: 760px) {
  .hero { padding-block: 32px 44px; }
  .steps ol, .trust { grid-template-columns: 1fr; }
  .trust article + article { border-left: 0; border-top: 1px solid var(--edge); }
  .cta { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cta { transition: none; }
}

/* Cinco idiomas en pantallas estrechas: botones más compactos y sólo el icono de la marca. */
@media (max-width: 420px) {
  .top { gap: 8px; }
  .brand span:not(.brand-mark) { display: none; }
  .lang-btn { padding: 7px 8px; }
}

/* — Tienda — */

.hero-shop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: -12px auto 28px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--grad);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 10px 24px -10px rgba(10, 108, 255, 0.55);
  transition: transform 0.12s ease, filter 0.15s ease;
}
.hero-shop:hover { filter: brightness(1.07); transform: translateY(-1px); }

.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.hero-actions .hero-shop { margin: 0; }
.hero-topup {
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid var(--edge);
  background: var(--card);
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}
.hero-topup:hover { border-color: var(--accent); color: var(--accent-ink); }
.hero-trust {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--soft);
}
.hero-trust li::before { content: "✓"; margin-right: 6px; color: var(--ok); font-weight: 700; }

/* With the shop open: the offer on the left, "already bought?" on the right. */
.hero.has-shop { max-width: none; }
.hero.has-shop .lede { margin-bottom: 28px; }
.hero.has-shop .open-order { margin-top: 36px; }
@media (min-width: 900px) {
  .hero.has-shop {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: center;
    gap: 56px;
    text-align: left;
    padding-block: 48px 64px;
  }
  .hero.has-shop h1 { font-size: clamp(34px, 4.4vw, 50px); }
  .hero.has-shop .lede { margin-inline: 0; }
  .hero.has-shop .hero-actions, .hero.has-shop .hero-trust { justify-content: flex-start; }
  .hero.has-shop .open-order { margin: 0; }
  .hero.has-shop .order-row .cta { flex: 1 1 100%; }
}

.shop { padding-block: 8px 48px; scroll-margin-top: 16px; }

.shop-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.shop-head h2 {
  font-family: "Sora", "Manrope", sans-serif;
  font-size: clamp(24px, 3.4vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 8px;
  text-wrap: balance;
}
.shop-head .eyebrow { margin-bottom: 12px; }
.shop-lede { margin: 0; max-width: 56ch; color: var(--soft); font-size: 15.5px; }

.pay-methods { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.pay-method {
  display: flex;
  flex-direction: column;
  padding: 7px 12px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: var(--card);
  line-height: 1.25;
}
.pay-method strong { font-size: 13px; }
.pay-method span { font-size: 11.5px; color: var(--soft); }

.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
}
/* One product alone shouldn't stretch across the whole page. */
.products:has(> .product:only-child) { max-width: 520px; }

.product {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: border-color 0.15s ease, transform 0.2s ease;
}
.product:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--edge)); transform: translateY(-3px); }
.product.is-out { opacity: 0.72; }
.product.is-out:hover { transform: none; border-color: var(--edge); }

/* Cover: the product photo, or a designed cover while there is none. */
.product-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--edge);
  background: var(--accent-soft);
  overflow: hidden;
  cursor: pointer;
}
.product-media:disabled { cursor: not-allowed; }
.product-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.product:hover .product-media img { transform: scale(1.035); }

.product-art {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(255, 255, 255, 0.22), transparent 55%),
    radial-gradient(90% 70% at 10% 100%, rgba(0, 0, 0, 0.18), transparent 60%),
    var(--grad);
}
.art-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 20px;
}
.art-name {
  font-family: "Sora", "Manrope", sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  max-width: 15ch;
  text-wrap: balance;
}

.product-stock {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  color: var(--ok);
  box-shadow: 0 2px 8px rgba(11, 21, 38, 0.12);
  white-space: nowrap;
}
.product-stock.low { color: #9a5b00; }
.product-stock.out { color: var(--soft); }
@media (prefers-color-scheme: dark) {
  .product-stock.low { color: #f5c451; }
}
.product-count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  font: 600 11.5px/1 "IBM Plex Mono", ui-monospace, monospace;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(5, 12, 26, 0.6);
  color: #fff;
}

.product-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 20px 22px 22px; }
.product-name { font-family: "Sora", "Manrope", sans-serif; font-size: 19px; line-height: 1.3; margin: 0; text-wrap: balance; }
.product-badge {
  align-self: flex-start;
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent-soft);
  padding: 4px 10px;
  border-radius: 8px;
}
/* The full text is in the buy dialog: the card keeps to four lines. */
.product-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--soft);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-foot { margin-top: auto; display: grid; gap: 12px; padding-top: 6px; }
.product-price { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.product-price strong {
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 34px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.product-price span { font-size: 13px; color: var(--soft); }

.tiers { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.tiers li {
  font: 500 12px/1 "IBM Plex Mono", ui-monospace, monospace;
  padding: 6px 9px;
  border-radius: 8px;
  border: 1px dashed color-mix(in srgb, var(--ok) 55%, transparent);
  color: var(--ok);
}

.product-buy { width: 100%; padding: 14px; font-size: 16px; }
.product-buy:disabled { background: var(--edge); color: var(--soft); box-shadow: none; cursor: not-allowed; filter: none; }

/* Photos in the buy dialog */
.buy-gallery { display: grid; gap: 8px; }
.buy-gallery img#buyImage {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--edge);
  background: var(--accent-soft);
  display: block;
}
.buy-thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.buy-thumb { flex: none; width: 60px; aspect-ratio: 4 / 3; padding: 0; border: 1px solid var(--edge); border-radius: 9px; overflow: hidden; background: none; cursor: pointer; opacity: 0.7; }
.buy-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.buy-thumb[aria-current="true"] { opacity: 1; outline: 2px solid var(--accent); outline-offset: 1px; }
.buy-desc { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--soft); }

/* Diálogo de compra */

.buy {
  width: min(460px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 1px solid var(--edge);
  border-radius: 20px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.45);
}
.buy::backdrop { background: rgba(5, 12, 26, 0.6); backdrop-filter: blur(2px); }
.buy form { display: flex; flex-direction: column; gap: 10px; padding: 22px; }

.buy-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 6px; }
.buy-head h2 { font-family: "Sora", "Manrope", sans-serif; font-size: 20px; line-height: 1.25; margin: 2px 0 0; }
.buy-eyebrow {
  margin: 0;
  font: 500 11px/1.4 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.icon-btn {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--edge);
  background: transparent;
  color: var(--soft);
  font-size: 15px;
  cursor: pointer;
}
.icon-btn:hover { color: var(--ink); background: var(--bg); }

.buy-label { font-size: 13px; font-weight: 700; color: var(--ink); }
.buy-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--edge); border-radius: 12px; overflow: hidden; }
.stepper button {
  width: 42px;
  border: 0;
  background: var(--bg);
  color: var(--ink);
  font-size: 20px;
  cursor: pointer;
}
.stepper button:disabled { color: var(--edge); cursor: not-allowed; }
.stepper input {
  width: 56px;
  border: 0;
  border-inline: 1px solid var(--edge);
  background: var(--card);
  color: var(--ink);
  text-align: center;
  font: 700 17px/1 "Manrope", sans-serif;
  font-variant-numeric: tabular-nums;
  padding: 10px 0;
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.buy-tiers { margin: -4px 0 4px; font: 500 12px/1.5 "IBM Plex Mono", ui-monospace, monospace; color: var(--ok); white-space: pre-wrap; }

.buy-input {
  font: 500 15px/1.2 "Manrope", sans-serif;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--edge);
  border-radius: 12px;
  padding: 13px 14px;
}
.buy-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.buy-hint { margin: -4px 0 4px; font-size: 12.5px; color: var(--soft); }
.coupon { display: grid; gap: 6px; }
.coupon-toggle { justify-self: start; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.coupon-toggle:hover { text-decoration: underline; }
.coupon-entry { display: flex; gap: 8px; }
.coupon-entry .buy-input { flex: 1; min-width: 0; text-transform: uppercase; }
.coupon-apply { padding: 0 16px; border-radius: 10px; border: 1px solid var(--edge); background: var(--card, transparent); color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.coupon-note { margin: 0; font-size: 13px; color: var(--soft); }
.coupon-note.error { color: var(--danger); }
.coupon-applied { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ok); }

.coins { border: 0; margin: 4px 0 0; padding: 0; min-width: 0; }
.coins legend { padding: 0; margin-bottom: 8px; }
.coin-list { display: grid; gap: 8px; }
.coin {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  cursor: pointer;
}
.coin.is-on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.coin input { accent-color: var(--accent); margin: 0; }
.coin-text { display: flex; flex-direction: column; line-height: 1.3; }
.coin-text strong { font-size: 14.5px; }
.coin-text span { font-size: 12px; color: var(--soft); }

.buy-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--bg);
}
.buy-total > div { display: flex; flex-direction: column; }
.buy-total strong { font-family: "Sora", "Manrope", sans-serif; font-size: 26px; font-variant-numeric: tabular-nums; }
.buy-saving { font-size: 12.5px; font-weight: 700; color: var(--ok); }

.buy-error { margin: 0; font-size: 13.5px; color: var(--danger); }
.buy-cta { width: 100%; padding: 16px; font-size: 16px; }
.buy-fine { margin: 0; font-size: 12px; color: var(--soft); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .product, .hero-shop, .product-media img { transition: none; }
  .product:hover .product-media img { transform: none; }
}

/* — Pago mínimo por moneda — */
.coin-min { margin-left: auto; font: 500 11.5px/1 "IBM Plex Mono", ui-monospace, monospace; color: var(--soft); white-space: nowrap; }
.product-min { margin: -4px 0 0; font-size: 12.5px; color: var(--soft); }
.buy-min {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, #f5a524 16%, transparent);
  border: 1px solid color-mix(in srgb, #f5a524 45%, transparent);
  font-size: 13.5px;
  line-height: 1.5;
}
.min-fix {
  font: 700 13px/1 "Manrope", sans-serif;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border: 0;
  border-radius: 8px;
  padding: 6px 10px;
  margin-top: 4px;
  cursor: pointer;
}
.buy-cta:disabled { opacity: 0.55; cursor: not-allowed; filter: grayscale(0.3); }

/* "Prefer to top up first?" under the shop intro */
.shop-topup { margin: 8px 0 0; font-size: 14px; color: var(--soft); }
.shop-topup a { color: var(--accent); font-weight: 700; text-decoration: none; }
.shop-topup a:hover { text-decoration: underline; }

/* — Shop extras: live, categories, tags, sharing, reviews — */

.shop-side { display: grid; gap: 10px; justify-items: end; }
.shop-meta { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; justify-content: flex-end; }
.shop-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  background: var(--ok-soft);
  color: var(--ok);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.live-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--ok);
  opacity: 0;
  animation: live-pulse 2s ease-out infinite;
}
@keyframes live-pulse { 0% { transform: scale(0.5); opacity: 0.7; } 100% { transform: scale(1.4); opacity: 0; } }
.link-btn {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.link-btn:hover { text-decoration: underline; }
.topup-bonus {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--ok-soft);
  color: var(--ok);
  font-size: 12.5px;
  font-weight: 700;
}

.cat-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: -4px 0 18px; }
.cat-chip {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--edge);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.cat-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.product { position: relative; }
.product-tag {
  position: absolute;
  bottom: 12px;
  left: 12px;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--grad);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 16px -6px rgba(10, 108, 255, 0.6);
}
.product-share {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--edge) 60%, transparent);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(6px);
  color: var(--ink);
  cursor: pointer;
}
.product-share svg, .icon-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.product-share:hover { color: var(--accent); }
.product-hot { margin: -4px 0 0; font-size: 13px; font-weight: 700; color: #c2410c; }
@media (prefers-color-scheme: dark) { .product-hot { color: #fb923c; } }
.price-before { font-size: 15px; color: var(--soft); font-weight: 600; }
.price-off {
  padding: 1px 7px;
  border-radius: 6px;
  background: var(--ok-soft);
  color: var(--ok) !important;
  font-size: 12.5px !important;
  font-weight: 800;
}
.product-buy.is-notify { background: var(--card); color: var(--accent); border: 1px solid var(--accent); box-shadow: none; }
.product.is-out { opacity: 1; }
.product.is-out .product-media { opacity: 0.6; }
.product-desc, .buy-desc { white-space: pre-line; }

.buy-head-actions { display: flex; gap: 8px; flex: none; }
.coin-binance .coin-text strong { color: #b7870a; }
@media (prefers-color-scheme: dark) { .coin-binance .coin-text strong { color: #f0b90b; } }

/* Share and notify sheets reuse the buy dialog's look. */
.sheet {
  width: min(420px, calc(100vw - 24px));
  padding: 22px;
  border: 1px solid var(--edge);
  border-radius: 20px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.45);
}
.sheet::backdrop { background: rgba(5, 12, 26, 0.6); backdrop-filter: blur(2px); }
.sheet form, #notifyAsk { display: grid; gap: 10px; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sheet-head h2 { margin: 0; font-family: "Sora", "Manrope", sans-serif; font-size: 20px; }
.sheet-sub { margin: 6px 0 16px; color: var(--soft); font-size: 14px; }
.share-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-bottom: 14px; }
.share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--edge);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.share-btn::before { content: ""; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; background: var(--soft); }
.share-whatsapp::before { background: #25d366; }
.share-telegram::before { background: #229ed9; }
.share-facebook::before { background: #1877f2; }
.share-x::before { background: var(--ink); }
.share-btn:hover { border-color: var(--accent); }
.share-link { display: flex; gap: 8px; }
.share-link .buy-input { min-width: 0; flex: 1; font-size: 13px; }
.share-link .cta { padding: 0 16px; white-space: nowrap; }
.notify-done { margin: 4px 0 0; padding: 14px; border-radius: 12px; background: var(--ok-soft); color: var(--ok); font-weight: 600; }

.reviews { padding-block: 8px 48px; }
.reviews-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 20px; }
.reviews-head h2 { font-family: "Sora", "Manrope", sans-serif; font-size: clamp(24px, 3.4vw, 32px); letter-spacing: -0.02em; line-height: 1.15; margin: 0; text-wrap: balance; }
.review-score { display: grid; justify-items: end; gap: 2px; text-align: right; }
.score-main { display: flex; align-items: center; gap: 10px; }
.score-main strong { font-family: "Sora", "Manrope", sans-serif; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.score-sub { font-size: 13px; color: var(--soft); }
.stars { color: #f5a524; letter-spacing: 0.08em; font-size: 16px; }
.review-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(84vw, 300px), 1fr);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
}
.review {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 18px 20px;
  border: 1px solid var(--edge);
  border-radius: 18px;
  background: var(--card);
}
.review-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.review-date { font-size: 12px; color: var(--soft); }
.review-text { margin: 0; font-size: 14.5px; line-height: 1.6; white-space: pre-line; }
.review-by { margin-top: auto; display: grid; font-size: 13px; }
.review-by span { color: var(--soft); font-size: 12px; }

.recent-toast {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: center;
  max-width: min(340px, calc(100vw - 32px));
  padding: 12px 16px;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow);
  font-size: 13.5px;
  animation: toast-in 0.35s ease;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.recent-toast.is-out { opacity: 0; transform: translateY(8px); }
.recent-icon { grid-row: span 2; font-size: 22px; }
.recent-text { font-weight: 700; }
.recent-when { font-size: 12px; color: var(--soft); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  .shop-side { justify-items: start; }
  .shop-meta { justify-content: flex-start; }
  .review-score { justify-items: start; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot::after, .recent-toast { animation: none; }
}

/* Instant or delivered by hand */
.product-delivery { margin: 0; font-size: 13px; font-weight: 700; color: var(--ok); }
.product-delivery.is-manual { color: var(--accent-ink); }
.product-stock.manual { color: var(--accent-ink); }
.buy-manual { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); font-size: 13.5px; line-height: 1.5; }

/* ————————————————————————————————————————————————
   Marketplace landing. The shop page commits to one dark, violet world (like the big digital
   key stores): every token is redefined here, so dialogs and cards follow it in any OS theme.
   With the shop closed the page stays the "open your order" page, in the same palette.
   ———————————————————————————————————————————————— */
:root {
  color-scheme: dark;
  --bg: #120b2b;
  --bg-2: #1a1040;
  --card: #1f1449;
  --card-2: #281a5c;
  --edge: #352672;
  --ink: #f4f1ff;
  --soft: #a89dd6;
  --accent: #8f6bff;
  --accent-ink: #c4b2ff;
  --accent-soft: #2e1f6b;
  --buy: #ffd23d;
  --buy-ink: #1a1040;
  --ok: #3ee69a;
  --ok-soft: #133d36;
  --danger: #ff6b7a;
  --grad: linear-gradient(135deg, #7c4dff 0%, #b14dff 55%, #ff4d9d 120%);
  --glow-a: rgba(143, 107, 255, 0.25);
  --glow-b: rgba(255, 77, 157, 0.14);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 24px 48px -28px rgba(0, 0, 0, 0.8);
}
body { background: radial-gradient(1200px 600px at 50% -200px, #2a1866 0%, transparent 70%), var(--bg); }
.top, main, .foot { max-width: 1240px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

body.is-loading .shop-only, body.is-loading .noshop-only { display: none !important; }
body:not(.has-shop) .shop-only { display: none !important; }
body.has-shop .noshop-only { display: none !important; }

/* The yellow button is the one that sells: every "buy" wears it. */
.cta { background: var(--buy); color: var(--buy-ink); box-shadow: 0 10px 24px -12px rgba(255, 210, 61, 0.55); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cta { color: var(--buy-ink); } }
.cta:hover { filter: brightness(1.06); }
.lang-btn.is-active { background: var(--accent); }
.eyebrow { background: var(--card); border-color: var(--edge); color: var(--accent-ink); }

/* — Header: brand, search, my order, account, language — */
.top { flex-wrap: nowrap; padding-block: 16px; }
.search {
  flex: 1 1 auto;
  max-width: 520px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline: 8px;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--edge);
}
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(143, 107, 255, 0.25); }
.search svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--soft); stroke-width: 2; stroke-linecap: round; }
.search input { flex: 1; min-width: 0; padding: 12px 0; border: 0; background: none; color: var(--ink); font: 500 15px/1.2 "Manrope", sans-serif; }
.search input:focus { outline: none; }
.search input::placeholder { color: var(--soft); }
.order-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 13px/1 "Manrope", sans-serif;
  color: var(--ink);
  text-decoration: none;
  padding: 9px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.order-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.order-link:hover { background: var(--card); }
.account-link { background: var(--card); white-space: nowrap; }
.top-right { flex-wrap: nowrap; }

/* — Hero: an offers carousel and, beside it, two real perks — */
.sales-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  margin-top: 4px;
}
.hero-main { position: relative; min-width: 0; }
.slides { display: grid; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); }
.slide {
  grid-area: 1 / 1;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: center;
  gap: 28px;
  min-height: 360px;
  padding: 40px 44px;
  overflow: hidden;
  background:
    radial-gradient(60% 90% at 100% 0%, rgba(255, 77, 157, 0.45), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(124, 77, 255, 0.55), transparent 60%),
    linear-gradient(140deg, #1b0f45 0%, #2d1580 60%, #4b1d9c 100%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s;
}
.slide.is-on { opacity: 1; visibility: visible; }
/* With a product photo: the photo itself, blurred and dimmed, is the backdrop. */
.slide::before {
  content: "";
  position: absolute;
  inset: -40px;
  z-index: -1;
  background: var(--slide-img, none) center / cover;
  filter: blur(28px) saturate(1.3);
  opacity: 0.45;
}
.slide-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.slide-tag { padding: 6px 12px; border-radius: 8px; background: var(--buy); color: var(--buy-ink); font: 800 12px/1.2 "Manrope", sans-serif; letter-spacing: 0.03em; text-transform: uppercase; }
.slide-pill { padding: 6px 11px; border-radius: 8px; background: rgba(255, 255, 255, 0.12); color: #fff; font: 700 12.5px/1.2 "Manrope", sans-serif; }
.slide-pill.is-hot { background: rgba(255, 120, 60, 0.22); color: #ffc09a; }
.slide-name { font-family: "Sora", "Manrope", sans-serif; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.06; letter-spacing: -0.02em; margin: 0 0 12px; color: #fff; text-wrap: balance; }
.slide-desc { margin: 0 0 22px; max-width: 46ch; color: rgba(255, 255, 255, 0.78); font-size: 16px; }
.slide-foot { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px 22px; }
.slide-price { margin: 0; display: grid; gap: 4px; color: #fff; }
.slide-price strong { font-family: "Sora", "Manrope", sans-serif; font-size: 44px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.slide-buy { padding: 16px 28px; font-size: 16.5px; border-radius: 12px; }
.slide-cover {
  justify-self: center;
  width: min(100%, 300px);
  aspect-ratio: 1;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.12);
  transform: rotate(3deg);
  transition: transform 0.3s ease;
}
.slide-cover:hover { transform: rotate(0deg) scale(1.02); }
.slide-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide-cover .product-art { position: relative; width: 100%; height: 100%; }
.slide-nav { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; align-items: center; gap: 10px; }
.slide-dots { display: flex; gap: 6px; }
.slide-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.35); cursor: pointer; transition: width 0.25s ease, background 0.25s ease; }
.slide-dot.is-on { width: 26px; background: #fff; }
.slide-arrow { width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.slide-arrow:hover { background: rgba(255, 255, 255, 0.25); }

.hero-side { display: grid; gap: 16px; grid-auto-rows: 1fr; }
.side-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  padding: 22px;
  border-radius: 22px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(150deg, #2a1a66 0%, #3d1f8f 100%);
  box-shadow: var(--shadow);
  transition: transform 0.15s ease;
}
.side-tile:hover { transform: translateY(-2px); }
.side-tile.is-bonus { background: linear-gradient(150deg, #0f5a4a 0%, #1aa37a 100%); }
.side-tile.is-binance { background: linear-gradient(150deg, #3b3006 0%, #a37f0b 100%); }
.side-tile.is-instant { background: linear-gradient(150deg, #3a1470 0%, #b14dff 100%); }
.side-tile.is-crypto { background: linear-gradient(150deg, #0b2f6b 0%, #2a7aff 100%); }
.side-icon { position: absolute; top: 16px; right: 18px; font-size: 40px; line-height: 1; opacity: 0.85; }
.side-tile strong { font-family: "Sora", "Manrope", sans-serif; font-size: 20px; line-height: 1.2; }
.side-tile span:not(.side-icon):not(.side-go) { font-size: 13.5px; color: rgba(255, 255, 255, 0.82); max-width: 24ch; }
.side-go { position: absolute; right: 18px; bottom: 16px; font-size: 20px; }

/* — Guarantees: one bar, four promises — */
.trust-strip {
  list-style: none;
  margin: 16px 0 4px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: 18px;
}
.trust-strip li { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; }
.trust-strip li + li { border-left: 1px solid var(--edge); }
.ts-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 800; }
.trust-strip strong { display: block; font-size: 14px; line-height: 1.3; }
.trust-strip small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--soft); }

/* — Catalog: compact cards, many per row, price first — */
body.has-shop .shop { padding-top: 36px; }
body.has-shop .shop-head { align-items: center; }
.shop-head h2 { font-size: clamp(22px, 2.6vw, 28px); }
.shop-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.shop-tools .cat-chips { margin: 0; }
.cat-chips.is-muted { opacity: 0.45; }
.cat-chip { background: var(--card); border-color: var(--edge); color: var(--ink); }
.cat-chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.sort { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13px; color: var(--soft); }
.sort select { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--edge); background: var(--card); color: var(--ink); font: 600 13.5px/1 "Manrope", sans-serif; }
.search-empty { margin: 0 0 14px; font-weight: 600; color: var(--soft); }
.pay-method { background: var(--card); border-color: var(--edge); }

body.has-shop .products { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 16px; }
body.has-shop .products:has(> .product:only-child) { max-width: 300px; }
body.has-shop .product { border-radius: 16px; background: var(--card); box-shadow: none; position: relative; }
body.has-shop .product:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.9); }
body.has-shop .product-media { aspect-ratio: 1; border-bottom: 0; }
body.has-shop .art-name { font-size: clamp(17px, 1.6vw, 21px); }
body.has-shop .product-body { gap: 8px; padding: 14px 16px 16px; }
body.has-shop .product-name { font-size: 15.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.has-shop .product-desc { display: none; }
body.has-shop .product-hot, body.has-shop .product-delivery, body.has-shop .product-badge { font-size: 12px; margin: 0; }
body.has-shop .tiers { display: none; }
.product-price { display: grid !important; gap: 2px; }
.price-was { display: flex; align-items: center; gap: 8px; }
.price-before { color: var(--soft); font-size: 13px; }
.price-off, .product-price .price-off { padding: 3px 7px; border-radius: 6px; background: var(--ok); color: #06261a !important; font: 800 12px/1 "Manrope", sans-serif !important; }
.product-price .price-was { font-size: inherit; }
body.has-shop .product-price strong { font-size: 26px; }
.price-unit { font-size: 12px; color: var(--soft); }
body.has-shop .product-buy { padding: 12px; font-size: 15px; border-radius: 10px; }
body.has-shop .product-share { width: 32px; height: 32px; }
.product-stock { background: rgba(18, 11, 43, 0.82) !important; color: var(--ok) !important; box-shadow: none !important; }
.product-stock.low { color: var(--buy) !important; }
.product-stock.out { color: var(--soft) !important; }

/* Rows that scroll sideways: best sellers, deals. */
.rows { display: grid; gap: 28px; margin-bottom: 28px; }
.rows:empty { display: none; }
.row-title { font-family: "Sora", "Manrope", sans-serif; font-size: 20px; margin: 0 0 12px; }
.row-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 240px); gap: 16px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.row-track > .product { scroll-snap-align: start; }

/* — Sections below — */
.reviews, .howbuy, .faq-mini { padding-block: 32px; }
.review { background: var(--card); border-color: var(--edge); }
.section-head { text-align: center; margin-bottom: 24px; }
.section-head .eyebrow { margin-bottom: 12px; }
.section-head h2, .closing-cta h2 { font-family: "Sora", "Manrope", sans-serif; font-size: clamp(24px, 3vw, 30px); letter-spacing: -0.02em; line-height: 1.15; margin: 0; text-wrap: balance; }
.howbuy ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.howbuy li { padding: 24px; border-radius: 18px; background: var(--card); border: 1px solid var(--edge); }
.howbuy p { margin: 0; font-size: 14.5px; color: var(--soft); }
.hb-n { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 12px; background: var(--grad); color: #fff; font: 700 17px/1 "Sora", sans-serif; }
.faq-mini { max-width: 820px; margin-inline: auto; width: 100%; }
.faq-list { display: grid; gap: 10px; }
.faq-list details { border: 1px solid var(--edge); border-radius: 14px; background: var(--card); }
.faq-list summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px; font-weight: 700; font-size: 15.5px; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; flex: none; font: 500 22px/1 "Manrope", sans-serif; color: var(--accent-ink); transition: transform 0.2s ease; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list p { margin: 0 18px 16px; font-size: 14.5px; color: var(--soft); max-width: 68ch; }
.faq-more { display: inline-block; margin-top: 16px; font-weight: 700; color: var(--accent-ink); text-decoration: none; }
.faq-more:hover { text-decoration: underline; }

.closing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding-block: 16px 48px; scroll-margin-top: 16px; }
.closing-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 32px; border-radius: 22px; color: #fff; background: radial-gradient(70% 90% at 100% 0%, rgba(255, 77, 157, 0.45), transparent 60%), linear-gradient(140deg, #1b0f45 0%, #3a1a8f 100%); }
.closing-cta h2 { color: #fff; }
.closing-cta p { margin: 0 0 6px; color: rgba(255, 255, 255, 0.8); }
.sh-cta { display: inline-flex; align-items: center; gap: 8px; padding: 15px 26px; border-radius: 12px; background: var(--buy); color: var(--buy-ink); font: 800 16px/1 "Manrope", sans-serif; text-decoration: none; }
.sh-cta:hover { filter: brightness(1.06); }
.closing-order { display: grid; }
.open-order { background: var(--card); border-color: var(--edge); }
.order-row input { background: var(--bg-2); }
.closing-order .open-order { max-width: none; margin: 0; display: flex; flex-direction: column; justify-content: center; }
.closing-order .order-row .cta { flex: 1 1 100%; }

/* — Phones: the featured product stays one tap away — */
.sticky-buy {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 16px;
  border-radius: 16px;
  background: var(--card-2);
  border: 1px solid var(--edge);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.8);
  animation: sb-in 0.25s ease;
}
@keyframes sb-in { from { transform: translateY(16px); opacity: 0; } }
.sb-text { display: grid; min-width: 0; flex: 1; line-height: 1.25; }
.sb-text strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-text span { font-size: 12.5px; color: var(--soft); font-variant-numeric: tabular-nums; }
.sticky-buy .cta { flex: none; padding: 13px 18px; }
@media (min-width: 761px) { .sticky-buy { display: none !important; } }

@media (max-width: 1020px) {
  .sales-hero { grid-template-columns: 1fr; }
  .hero-side { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .side-tile { min-height: 120px; }
}
@media (max-width: 900px) {
  .top { flex-wrap: wrap; }
  .search { order: 3; flex-basis: 100%; max-width: none; margin: 0; }
  .trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-strip li:nth-child(3) { border-left: 0; }
  .trust-strip li:nth-child(n + 3) { border-top: 1px solid var(--edge); }
}
@media (max-width: 760px) {
  .slide { grid-template-columns: 1fr; min-height: 0; padding: 22px 20px 52px; gap: 16px; }
  .slide-cover { grid-row: 1; width: 132px; justify-self: start; border-radius: 16px; transform: none; }
  .slide-cover .art-name { font-size: 14px; }
  .slide-cover .art-mark { width: 30px; height: 30px; font-size: 14px; }
  .slide-desc { font-size: 14.5px; margin-bottom: 16px; }
  .slide-price strong { font-size: 34px; }
  .slide-buy { flex: 1 1 100%; }
  .hero-side { gap: 10px; }
  .side-tile { padding: 16px; border-radius: 16px; min-height: 104px; }
  .side-tile strong { font-size: 15.5px; }
  .side-icon { font-size: 26px; top: 12px; right: 12px; }
  .side-tile span:not(.side-icon):not(.side-go) { font-size: 12px; }
  .side-go { display: none; }
  body.has-shop .products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.has-shop .product-body { padding: 10px 11px 12px; }
  body.has-shop .product-name { font-size: 14px; }
  body.has-shop .product-price strong { font-size: 21px; }
  body.has-shop .product-buy { padding: 10px 8px; font-size: 13.5px; }
  .row-track { grid-auto-columns: 46%; gap: 10px; }
  .sort span { display: none; }
  .howbuy ol, .closing { grid-template-columns: 1fr; }
  .closing-cta { padding: 26px 22px; }
  body.has-shop .foot { padding-bottom: 96px; }
}
@media (max-width: 480px) {
  .trust-strip li { padding: 13px 12px; gap: 10px; }
  .ts-icon { width: 30px; height: 30px; }
  .order-link span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .slide, .slide-cover, .slide-dot, .sticky-buy, .side-tile { transition: none; animation: none; }
}

/* Covers without a photo: each product keeps its own hue, so the grid isn't one colour. */
.product-art { filter: hue-rotate(var(--hue, 0deg)); }

/* The shop's own logo in place of the ✦ mark (set in the panel). */
img.brand-mark.brand-logo { object-fit: contain; background: none; padding: 0; border-radius: 9px; }
.brand-name { white-space: nowrap; }

/* Network fee per coin: cheap ones in green, TRON's high withdrawal fee in amber. */
.coin-fee { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 700; }
.coin-fee.is-low { color: var(--ok); }
.coin-fee.is-high { color: #f5c451; }
.coin-best { margin-left: auto; padding: 4px 8px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font: 800 11px/1 "Manrope", sans-serif; white-space: nowrap; }