/* PromoIQ store code pages (/codes, /codes/<store>), site v3 design.
   Built by scripts/build-store-pages.mjs. Uses only variables from /assets/tokens.css and site.css. */

.crumbs { margin: 0 0 18px; font-size: 15px; color: var(--color-text-2); }
.crumbs a { color: var(--color-text-2); }
.crumbs a:hover { color: var(--color-text); }
.crumbs [aria-current] { color: var(--color-text); font-weight: var(--weight-strong); }

.codes-section .wrap > * { max-width: 52rem; }
.codes-h2 { font-size: clamp(26px, 3vw, var(--text-3xl)); letter-spacing: var(--tracking-title); line-height: 1.12; margin: 56px 0 10px; scroll-margin-top: 96px; }
.codes-h2:first-child { margin-top: 0; }
.codes-intro { color: var(--color-text-2); margin: 0 0 18px; }
.codes-later { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--color-line); font-size: 16px; }
.note.untested { margin: 0 0 18px; background: var(--color-sunken); border-color: var(--color-line-strong); border-style: dashed; }

/* ---- code cards ---- */
.store-codes, .store-offers { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.store-code, .store-offer {
  margin: 0; padding: 18px 20px;
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md);
}
.store-codes[data-proof="shoppers"] .store-code { border-color: var(--color-success-line); box-shadow: inset var(--line-accent) 0 0 var(--color-success); }
.store-codes[data-proof="online"] .store-code { border-style: dashed; border-color: var(--color-line-strong); background: transparent; }
.store-code__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }

/* the ticket-shaped code chip, as in the extension panel */
.code-chip {
  --c: var(--scoop-code);
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
  font-family: var(--font-code); font-size: 19px; font-weight: var(--weight-bold); letter-spacing: 0.06em; color: var(--color-text);
  background:
    radial-gradient(circle at 0 0, var(--color-surface) var(--c), transparent calc(var(--c) + 0.5px)),
    radial-gradient(circle at 100% 0, var(--color-surface) var(--c), transparent calc(var(--c) + 0.5px)),
    radial-gradient(circle at 0 100%, var(--color-surface) var(--c), transparent calc(var(--c) + 0.5px)),
    radial-gradient(circle at 100% 100%, var(--color-surface) var(--c), transparent calc(var(--c) + 0.5px)),
    var(--color-sunken);
  box-shadow: inset 0 0 0 1.5px var(--color-line-strong);
  border-radius: 2px;
  word-break: break-all;
}
.store-codes[data-proof="online"] .code-chip { background: transparent; box-shadow: inset 0 0 0 1.5px var(--color-line-strong); }

.copy-btn {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text);
  box-shadow: inset 0 0 0 1.5px var(--color-line-strong); font: var(--weight-bold) 15px/1 var(--font-sans);
  transition: box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.copy-btn:hover { box-shadow: inset 0 0 0 1.5px var(--color-text); }
.copy-btn[data-copied] { background: var(--color-success-soft); box-shadow: inset 0 0 0 1.5px var(--color-success); color: var(--color-success); }

.store-code__desc { margin: 12px 0 0; color: var(--color-text); font-size: 17px; line-height: 1.45; }
.store-code__terms { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.store-code__terms li {
  margin: 0; padding: 3px 8px; border-radius: var(--radius-xs);
  background: var(--color-caution-soft); border: 1px solid var(--color-caution-line); color: var(--color-caution);
  font-size: 13.5px; font-weight: var(--weight-strong); line-height: 1.3;
}
.store-code__meta { margin: 10px 0 0; color: var(--color-text-2); font-size: 15px; line-height: 1.5; }
.store-code__meta strong { color: var(--color-success); }
.store-code__where { margin: 6px 0 0; color: var(--color-text-3); font-size: 14.5px; }
.store-code[data-ended] { opacity: 0.6; }
.store-code__ended { margin: 8px 0 0; color: var(--color-danger); font-weight: var(--weight-bold); font-size: 15px; }

.store-offer__who { margin: 0 0 4px; font-size: 13.5px; font-weight: var(--weight-bold); color: var(--color-secondary-text); }
.store-offer__text { margin: 0; font-size: 17px; color: var(--color-text); }

/* ---- hub list ---- */
.store-list { list-style: none; padding: 0; margin: 8px 0 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 24px; }
.store-list li { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--color-line); }
.store-list a { font-weight: var(--weight-bold); display: inline-flex; min-height: 28px; align-items: center; }
.store-list span { display: block; color: var(--color-text-2); font-size: 14.5px; }
.store-list--quiet a { font-weight: var(--weight-strong); }

/* ---- call to action ---- */
.codes-cta { display: grid; gap: 20px 48px; align-items: center; }
.codes-cta h2 { font-size: clamp(26px, 3vw, var(--text-3xl)); letter-spacing: var(--tracking-title); line-height: 1.12; margin-bottom: 10px; }
.codes-cta p { margin: 0; color: var(--color-text-2); max-width: 44rem; }
@media (min-width: 860px) { .codes-cta { grid-template-columns: minmax(0, 1fr) auto; } }

/* ---- notices ---- */
.stale-note { margin-top: 16px; }
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 40; transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  max-width: calc(100vw - 32px); padding: 12px 16px; border-radius: var(--radius-md);
  background: var(--color-ink); color: var(--color-on-ink); box-shadow: var(--shadow-toast); font-size: 15px;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.toast[data-show] { opacity: 1; transform: translate(-50%, 0); }
.toast code { background: rgba(255, 255, 255, 0.14); color: inherit; }
.store-offer__quote { margin: 6px 0 0; color: var(--color-text-2); font-size: 15px; }