/* Shared archive popup foundations, scoped to the popup on every public page.
   Rem values use the original Shop 16px base so legacy root sizing cannot restyle it. */
.shop-popup-backdrop {
  --is-paper: #000000;
  --is-panel: #10120f;
  --is-ink: #eae9e2;
  --is-muted: #b8b8b0;
  --is-rule: #3e443a;
  --is-control-rule: #7e8478;
  --is-accent: #ff8a3d;
  --is-danger: #e79c92;
  --is-accent-ink: #20221f;
  --is-faint: #95998f;
  --is-artwork-surface: #191d16;
  --is-disabled-surface: #292c26;
  --is-disabled-stripe: #363b31;
  --is-success: #a4c499;
  --is-danger-surface: #30211f;
  --is-sans: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
  --is-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --is-gutter: clamp(20px, 3.5vw, 64px);
  --is-max: 1680px;
  --is-space-1: 8px;
  --is-space-2: 16px;
  --is-space-3: 24px;
  --is-space-4: 40px;
  --is-space-5: 80px;
  --is-fast: 180ms ease;
  --is-reveal: 450ms cubic-bezier(.2,.7,.2,1);
  /* Compatibility aliases for the existing presentational class names. */
  --gold: var(--is-ink);
  --gold-dim: var(--is-muted);
  --text: var(--is-ink);
  --text-bright: var(--is-ink);
  --text-dim: var(--is-muted);
  --bg-deep: var(--is-paper);
  --bg-input: var(--is-panel);
  --border: var(--is-rule);
  --danger: var(--is-danger);
}
.shop-popup-backdrop, .shop-popup-backdrop *, .shop-popup-backdrop *::before, .shop-popup-backdrop *::after { box-sizing: border-box; }

.shop-popup-backdrop { background: var(--is-paper); color: var(--is-ink); font-family: var(--is-sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
.shop-popup-backdrop :where(h1,h2,h3,p,dl,dd) { margin: 0; }
.shop-popup-backdrop :where(h1,h2,h3) { font-weight: 500; line-height: 1; text-transform: uppercase; letter-spacing: -.055em; overflow-wrap: anywhere; }
.shop-popup-backdrop :where(p,summary,label,.shop-desc,.shop-lede,.shop-notice,.shop-line-meta,.shop-total-row,.shop-accordion-body,.shop-spec) { text-transform: lowercase; }
.shop-popup-backdrop :where(input,textarea,select) { text-transform: none; }
.shop-popup-backdrop a { color: inherit; text-underline-offset: 4px; }
.shop-popup-backdrop :where(button,input,select,textarea) { font: inherit; border-radius: 0; }
.shop-popup-backdrop button { cursor: pointer; text-transform: uppercase; }
.shop-popup-backdrop [hidden] { display: none !important; }
.shop-popup-backdrop :where(a,button,input,select,textarea,summary):focus-visible { outline: 2px solid var(--is-ink); outline-offset: 4px; }
.shop-popup-backdrop ::selection { background: var(--is-accent); color: var(--is-accent-ink); }
.shop-popup-backdrop :where(.btn-gold,.btn-outline) { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 16px 24px; border: 1px solid var(--is-ink); font: 12px/1.4 var(--is-mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: background var(--is-fast), color var(--is-fast); }
.shop-popup-backdrop .btn-gold { background: var(--is-ink); color: var(--is-panel); }
.shop-popup-backdrop .btn-outline { background: transparent; color: var(--is-ink); }
.shop-popup-backdrop :where(.btn-gold,.btn-outline):hover:not(:disabled) { background: var(--is-accent); color: var(--is-accent-ink); }
.shop-popup-backdrop button:disabled { cursor: not-allowed; }
.shop-popup-backdrop :where(input[type=text],input[type=email],input[type=password],input[type=tel],textarea,select) { width: 100%; min-width: 0; min-height: 48px; padding: 14px; border: 1px solid var(--is-control-rule); background: var(--is-panel); color: var(--is-ink); font-size: 16px; }
.shop-popup-backdrop input::placeholder { color: var(--is-muted); opacity: 1; }

.shop-popup .shop-eyebrow {
  font-family: var(--is-mono);
  font-size: 11.52px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 16px;
}
.shop-popup .shop-consent { display: flex; align-items: flex-start; gap: 12px; margin: 18px 0 4px; cursor: pointer; }
.shop-popup .shop-consent input[type="checkbox"] {
  appearance: none; width: 20px; height: 20px; min-width: 20px; margin-top: 2px;
  border: 1px solid var(--border); background: var(--bg-input); border-radius: 2px;
  cursor: pointer; position: relative; transition: border-color 0.2s, background 0.2s;
}
.shop-popup .shop-consent input[type="checkbox"]:checked { border-color: var(--gold-dim); background: var(--gold-dim); }
.shop-popup .shop-consent input[type="checkbox"]:checked::after {
  content: '\2713'; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); color: var(--bg-deep); font-size: 13px; font-weight: bold;
}
.shop-popup .shop-consent input:focus-visible { outline: 2px solid var(--gold-dim); outline-offset: 2px; }
.shop-popup .shop-consent span { font-size: 14.4px; line-height: 1.6; color: var(--text-dim); }
.shop-popup-backdrop {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(4, 4, 6, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.shop-popup-backdrop.is-open { opacity: 1; }
.shop-popup {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 92vh;
  overflow-y: auto;
  border: 1px solid var(--gold-dim);
  background: var(--is-panel);
  padding: 40px 26px 32px;
  text-align: center;
  transform: translateY(18px);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2);
}
.shop-popup-backdrop.is-open .shop-popup { transform: translateY(0); }
@media (min-width: 600px) { .shop-popup { padding: 46px 40px 36px; } }
.shop-popup-close {
  position: absolute; top: 8px; right: 8px;
  width: 38px; height: 38px;
  background: none; border: none; cursor: pointer;
  color: var(--is-faint); font-size: 21.6px; line-height: 1;
  transition: color 0.3s ease;
}
.shop-popup-close:hover { color: var(--gold); }
.shop-popup img { width: 100%; max-height: 170px; object-fit: cover; margin-bottom: 22px; }
.shop-popup h2 {
  font-size: clamp(19.2px, 4.5vw, 25.6px);
  letter-spacing: 0.14em;
  margin-bottom: 14px;
}
.shop-popup p { font-size: 15.2px; line-height: 1.75; color: var(--text-dim); margin-bottom: 22px; }
.shop-popup input[type="email"] { text-align: center; margin-bottom: 14px; }
.shop-popup .shop-consent { text-align: left; margin-bottom: 20px; }
.shop-popup .btn-gold { width: 100%; padding: 17px 24px; font-size: 13.6px; letter-spacing: 0.28em; }
.shop-popup-code {
  display: inline-block; margin-top: 16px; padding: 12px 22px;
  border: 1px dashed var(--gold-dim); font-family: var(--is-mono);
  font-size: 18.4px; letter-spacing: 0.24em; color: var(--gold);
}
.shop-popup-status { min-height: 22px; margin-top: 12px; font-size: 13.76px; }
.shop-popup-status.is-error { color: var(--is-danger); }


.shop-popup { text-align: left; }
.shop-popup h2 { font-family: var(--is-sans); font-size: 38px; letter-spacing: -.05em; }
.shop-popup-close { width: 44px; height: 44px; color: var(--is-ink); }
.shop-popup .btn-gold { letter-spacing: .05em; }
.shop-popup-status { font-size: 13px; text-transform: lowercase; }
.shop-popup .shop-eyebrow { font: 12px/1.6 var(--is-mono); letter-spacing: .07em; }
.shop-popup .shop-consent input[type="checkbox"] { border-color: var(--is-control-rule); }
@media (prefers-reduced-motion: reduce) { .shop-popup-backdrop, .shop-popup-backdrop * { animation: none !important; transition: none !important; } }

/* Keep legacy page-wide form typography/focus effects outside this component. */
.shop-popup-backdrop .shop-popup label { font-family: inherit; letter-spacing: normal; }
.shop-popup-backdrop .shop-popup input[type="email"] { font: inherit; font-size: 16px; padding: 14px; border: 1px solid var(--is-control-rule); border-radius: 0; transition: none; }
.shop-popup-backdrop .shop-popup input[type="email"]:focus { background: var(--is-panel); border-color: var(--is-control-rule); box-shadow: none; }
.shop-popup-backdrop .shop-popup .btn-gold { box-shadow: none; transform: none; position: static; overflow: visible; }
.shop-popup-backdrop .shop-popup .btn-gold::after { content: none; }
.shop-popup-backdrop .shop-popup .btn-gold:disabled { opacity: 1; }

.shop-popup-backdrop { letter-spacing: normal; font-weight: 400; font-variant: normal; font-feature-settings: normal; text-rendering: auto; }

/* Archive signal � a brief decoding sequence, then a quiet, usable form. */
.shop-popup-backdrop .shop-popup {
  max-width: 500px;
  padding: 52px 38px 30px;
  border-color: #4a4135;
  background: linear-gradient(145deg, #171914, #0d100d 65%);
  box-shadow: 0 32px 120px #0009;
}
.shop-popup-backdrop .shop-popup::before {
  content: ''; position: absolute; top: 0; left: 38px; width: 64px; height: 2px;
  background: var(--is-accent);
}
.shop-popup-backdrop .shop-popup::after {
  content: '+  /  +'; position: absolute; top: 17px; left: 38px;
  color: #ff8a3d80; font: 11px/1 var(--is-mono); letter-spacing: .24em;
  pointer-events: none;
}
.shop-popup-backdrop .shop-popup .shop-eyebrow { color: var(--is-accent); font-size: 12px; letter-spacing: .13em; margin-bottom: 24px; }
.shop-popup-backdrop .shop-popup h2 { font-size: 52px; line-height: .98; letter-spacing: -.055em; margin-bottom: 24px; }
.popup-title-word { display: inline-block; white-space: nowrap; }
.popup-glyph { display: inline-block; position: relative; }
.popup-glyph-code { position: absolute; inset: 0; color: var(--is-accent); }
.popup-glyph.is-decoding > :first-child { opacity: 0; }
.popup-title-period { color: var(--is-accent); }
.shop-popup-backdrop .shop-popup > p { max-width: 34ch; color: #afb3a7; margin-bottom: 28px; }
.shop-popup-backdrop .shop-popup-close { color: #afb3a7; transition: color .2s ease, transform .2s ease; }
.shop-popup-backdrop .shop-popup-close:hover { color: var(--is-accent); transform: rotate(90deg); }
.popup-email-frame { position: relative; margin: 0 0 22px; border: 1px solid #606354; background: #0b0e0a; transition: border-color .25s ease; }
.shop-popup-backdrop .shop-popup .popup-email-frame input[type="email"] {
  position: relative; z-index: 1; min-height: 64px; margin: 0; padding: 18px 42px;
  background: transparent; border: 0; font: 16px/1.5 var(--is-mono); letter-spacing: -.035em;
  color: var(--is-ink); caret-color: var(--is-accent); outline: none;
}
.shop-popup-backdrop .shop-popup .popup-email-frame input::placeholder { color: #a2a797; font-size: 12px; letter-spacing: .07em; }
.popup-email-frame:focus-within { border-color: var(--is-accent); outline: 1px solid #ff8a3d24; outline-offset: 4px; }
.popup-email-bracket { position: absolute; z-index: 2; top: 50%; margin-top: -12px; color: var(--is-accent); font: 22px/24px var(--is-mono); pointer-events: none; }
.popup-email-bracket--left { left: 15px; --bracket-drift: 4px; }
.popup-email-bracket--right { right: 15px; --bracket-drift: -4px; }
.is-open .popup-email-bracket { animation: popup-bracket-register 1.4s cubic-bezier(.2,.7,.2,1) 3; }
.popup-email-track { position: absolute; bottom: -1px; left: 0; width: 28px; height: 1px; background: var(--is-accent); pointer-events: none; }
.is-open .popup-email-track { animation: popup-track-register 3.8s cubic-bezier(.2,.7,.2,1) 1 both; }
.popup-email-frame:has(input:not(:placeholder-shown)) .popup-email-bracket,
.popup-email-frame:has(input:not(:placeholder-shown)) .popup-email-track { animation: none; }
.shop-popup-backdrop .shop-popup .shop-consent { margin: 0 0 26px; gap: 12px; }
.shop-popup-backdrop .shop-popup .shop-consent span { font-size: 12px; line-height: 1.7; color: #a2a797; }
.shop-popup-backdrop .shop-popup .shop-consent input:checked { border-color: var(--is-accent); background: var(--is-accent); }
.shop-popup-backdrop .shop-popup .btn-gold { background: var(--is-accent); color: #151810; border-color: var(--is-accent); min-height: 56px; font-size: 12px; letter-spacing: .15em; }
.shop-popup-backdrop .shop-popup .btn-gold:hover:not(:disabled) { background: #ffa76e; border-color: #ffa76e; }
.shop-popup-backdrop .shop-popup .btn-gold:disabled { opacity: .65; }
.shop-popup-backdrop .shop-popup .btn-gold:focus-visible { outline: 2px solid var(--is-ink); outline-offset: 4px; }
.shop-popup-backdrop .shop-popup-status { margin-bottom: 0; }
@keyframes popup-bracket-register { 0%,100% { transform: translateX(0); opacity: .7; } 45% { transform: translateX(var(--bracket-drift)); opacity: 1; } }
@keyframes popup-track-register { 0% { left: 0; } 65% { left: calc(100% - 28px); } 100% { left: 0; } }
@media (max-width: 599px) {
  .shop-popup-backdrop .shop-popup { padding: 46px 24px 24px; }
  .shop-popup-backdrop .shop-popup::before, .shop-popup-backdrop .shop-popup::after { left: 24px; }
  .shop-popup-backdrop .shop-popup h2 { font-size: clamp(32px, 9.8vw, 46px); }
}
@media (prefers-reduced-motion: reduce) {
  .shop-popup-backdrop *, .shop-popup-backdrop *::before, .shop-popup-backdrop *::after { animation: none !important; transition: none !important; }
}