/* =============================================================================
   AL SIGNUP — popup + inline capture
   -----------------------------------------------------------------------------
   Speaks the shop's own design language (skin.v310.css): --al-* tokens, the one
   135deg brass gradient on the primary button, hairline borders, the stitch
   rule, Newsreader / Work Sans / Chivo. Every token carries a literal fallback
   so this file also stands up on its own — on the unsubscribe page, or if the
   skin is ever switched off.
   ========================================================================== */

.al-su-modal,
.al-su-inline,
.al-su-page,
.al-news__panel--signup-photo {
  /* Local aliases: the skin's value if present, the leather value if not. */
  --su-ground-0: var(--al-ground-0, #0B0A08);
  --su-ground-1: var(--al-ground-1, #14120F);
  --su-ground-2: var(--al-ground-2, #1C1A16);
  --su-surface-1: var(--al-surface-1, #26231E);
  --su-surface-2: var(--al-surface-2, #302C26);
  --su-line-1: var(--al-line-1, rgba(217, 184, 124, .16));
  --su-line-2: var(--al-line-2, #4A443B);
  --su-text-hi: var(--al-text-hi, #F4EFE6);
  --su-text-mid: var(--al-text-mid, #CEC6B8);
  --su-text-dim: var(--al-text-dim, #A0978A);
  --su-text-inverse: var(--al-text-inverse, #17140F);
  --su-brass-100: var(--al-brass-100, #F0DCB4);
  --su-brass-300: var(--al-brass-300, #D9B87C);
  --su-brass-400: var(--al-brass-400, #C39A5A);
  --su-brass-tint: var(--al-brass-tint, rgba(217, 184, 124, .10));
  --su-turq-300: var(--al-turq-300, #5FD2C2);
  --su-ok: var(--al-ok, #7BD9A2);
  --su-danger: var(--al-danger, #F2938C);
  --su-grad: var(--al-grad-gold, linear-gradient(135deg, #D9B87C 0%, #C39A5A 100%));
  --su-font-display: var(--al-font-display, "Newsreader", "Hoefler Text", Georgia, serif);
  --su-font-body: var(--al-font-body, "Work Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  --su-font-util: var(--al-font-util, "Chivo", "Helvetica Neue", Helvetica, Arial, sans-serif);
  --su-r-ctrl: var(--al-r-ctrl, 10px);
  --su-r-card: var(--al-r-card, 14px);
  --su-shadow-pop: var(--al-shadow-pop, 0 18px 50px rgba(11, 10, 8, .55));
  --su-shadow-gold: var(--al-shadow-gold, 0 6px 24px rgba(195, 154, 90, .30));
  --su-ease: var(--al-ease, cubic-bezier(.25, .6, .3, 1));
  --su-stitch: var(--al-stitch, repeating-linear-gradient(90deg, rgba(217, 184, 124, .45) 0 7px, transparent 7px 14px));
}

/* Never inherit a content-box from a theme: our padded controls must fit. */
.al-su-modal,
.al-su-inline,
.al-su-page,
.al-su-modal *,
.al-su-inline *,
.al-su-page * { box-sizing: border-box; }

.al-su-modal[hidden],
.al-su-done[hidden],
.al-su-form[hidden] { display: none !important; }

/* ---------- Screen-reader helper ------------------------------------------ */
.al-su-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ---------- The honeypot: off screen, not display:none -------------------- */
.al-su-trap {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* ---------- Modal shell --------------------------------------------------- */
.al-su-modal {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: var(--su-font-body);
}

.al-su-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(11, 10, 8, .72);
  backdrop-filter: blur(2px);
  animation: al-su-fade 240ms var(--su-ease) both;
}

.al-su-modal__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 860px;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow: auto;
  background: var(--su-surface-1);
  border: 1px solid var(--su-line-2);
  border-radius: var(--su-r-card);
  box-shadow: var(--su-shadow-pop);
  animation: al-su-rise 320ms var(--su-ease) both;
}

@keyframes al-su-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes al-su-rise {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.al-su-modal__grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  align-items: stretch;
}

/* Original product photograph: preserve the leather and metal colors. */
.al-su-modal__media {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-right: 1px solid var(--su-line-1);
  border-radius: var(--su-r-card) 0 0 var(--su-r-card);
}
.al-su-modal__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  filter: none;
}

.al-su-modal__body { padding: 40px 40px 36px; }

.al-su-modal .al-su-close {
  position: sticky;
  top: 10px;
  z-index: 3;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  margin: 10px 12px -54px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--su-ground-1);
  border: 1px solid var(--su-line-2);
  border-radius: 50%;
  color: var(--su-text-hi);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: color .2s var(--su-ease), background .2s var(--su-ease);
}
.al-su-modal .al-su-close:hover {
  color: var(--su-brass-100);
  background: var(--su-surface-2);
}
.al-su-modal .al-su-close:focus-visible {
  outline: 2px solid var(--su-turq-300);
  outline-offset: 2px;
}

/* ---------- The lockup ---------------------------------------------------- */
.al-su-kicker {
  font-family: var(--su-font-util);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--su-brass-400);
  margin: 0 0 14px;
}

.al-su-title {
  font-family: var(--su-font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--su-text-hi);
  margin: 0;
}

.al-su-rule {
  border: 0;
  height: 2px;
  width: 64px;
  background: var(--su-stitch);
  margin: 16px 0;
}

.al-su-lede,
.al-su-modal p.al-su-lede,
.al-su-lockup p.al-su-lede {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--su-text-mid);
  max-width: 46ch;
  margin: 0 0 24px;
}

/* ---------- The form ------------------------------------------------------ */
.al-su-form { margin: 0; }

.al-su-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.al-su-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  background: var(--su-surface-2);
  color: var(--su-text-hi);
  font-family: var(--su-font-body);
  font-size: 1rem;
  line-height: 1.4;
  border: 1px solid var(--su-line-2);
  border-radius: var(--su-r-ctrl);
  padding: 15px 16px;
  box-shadow: none;
  transition: border-color .2s var(--su-ease);
  -webkit-appearance: none;
  appearance: none;
}
.al-su-input::placeholder { color: var(--su-text-dim); opacity: 1; }
.al-su-input:focus {
  border-color: var(--su-turq-300);
  outline: none;
}
.al-su-input:focus-visible {
  outline: 2px solid var(--su-turq-300);
  outline-offset: 2px;
}
/* The site skin paints every input border with !important
   (body.theme-rocket-wc-master input[type="email"]{ border: ... !important }),
   so the invalid state has to answer in kind or it never shows at all. */
.al-su-input[aria-invalid="true"] { border-color: var(--su-danger) !important; }

.al-su-btn,
button.al-su-btn,
a.al-su-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--su-grad);
  color: var(--su-text-inverse) !important;
  font-family: var(--su-font-util);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 0;
  border-radius: var(--su-r-ctrl);
  padding: 15px 26px;
  text-decoration: none !important;
  cursor: pointer;
  white-space: nowrap;
  transition: filter .2s var(--su-ease), transform .2s var(--su-ease), box-shadow .2s var(--su-ease);
}
.al-su-btn:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow: var(--su-shadow-gold);
}
.al-su-btn:focus-visible {
  outline: 2px solid var(--su-turq-300);
  outline-offset: 3px;
}
.al-su-btn[disabled],
.al-su-btn[aria-disabled="true"] {
  opacity: .6;
  cursor: default;
  transform: none;
  box-shadow: none;
}

/* -----------------------------------------------------------------------
   A note on the doubled-up selectors below.

   The site skin ships `body.theme-rocket-wc-master p { color: var(--al-text-mid) }`.
   That is specificity (0,1,2) and it loads AFTER this file, so a plain
   `.al-su-msg { color: ... }` at (0,1,0) loses — the error message would come
   out in ordinary body colour with nothing to say it is an error. Scoping each
   paragraph rule to its wrapper puts us at (0,2,1) and settles it without a
   single !important.
   -------------------------------------------------------------------------- */
.al-su-msg,
.al-su-formwrap p.al-su-msg {
  font-size: .875rem;
  line-height: 1.5;
  margin: 12px 0 0;
  min-height: 0;
  color: var(--su-danger);
}
.al-su-msg:empty { display: none; }

.al-su-fine,
.al-su-formwrap p.al-su-fine {
  font-family: var(--su-font-body);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--su-text-dim);
  margin: 16px 0 0;
}

/* ---------- The success state --------------------------------------------- */
.al-su-done {
  animation: al-su-fade 260ms var(--su-ease) both;
}

.al-su-done__head,
.al-su-formwrap p.al-su-done__head {
  font-family: var(--su-font-util);
  font-weight: 600;
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--su-brass-400);
  margin: 0 0 10px;
}

.al-su-done__code {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  background: var(--su-ground-2);
  border: 1px solid var(--su-line-1);
  border-radius: var(--su-r-ctrl);
  padding: 16px 18px;
  margin: 0 0 14px;
}

.al-su-done__value {
  font-family: var(--su-font-util);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: .10em;
  color: var(--su-brass-300);
  word-break: break-all;
}

.al-su-copybtn {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--su-brass-400);
  border-radius: var(--su-r-ctrl);
  color: var(--su-brass-300);
  font-family: var(--su-font-util);
  font-weight: 600;
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 9px 14px;
  cursor: pointer;
  transition: background .2s var(--su-ease), color .2s var(--su-ease), border-color .2s var(--su-ease);
}
.al-su-copybtn:hover {
  background: var(--su-brass-tint);
  border-color: var(--su-brass-300);
  color: var(--su-brass-100);
}
.al-su-copybtn:focus-visible {
  outline: 2px solid var(--su-turq-300);
  outline-offset: 2px;
}

.al-su-done__msg,
.al-su-formwrap p.al-su-done__msg {
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--su-text-mid);
  margin: 0 0 6px;
}

.al-su-done__note,
.al-su-formwrap p.al-su-done__note {
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--su-text-dim);
  margin: 0;
}

.al-su-done__ok { color: var(--su-ok); }

/* ---------- Inline form (shortcode + the upgraded homepage block) --------- */
/* Alignment is inherited, so the form sits centred inside the centred
   newsletter panel and flush left wherever the shortcode is dropped into
   left-aligned prose. */
.al-su-inline {
  font-family: var(--su-font-body);
  max-width: 560px;
  margin-inline: auto;
}

.al-su-inline--upgraded { margin-top: 0; }

/* A centred host centres the lockup rule too. */
.al-news__panel .al-su-inline .al-su-rule,
.al-su-inline[style*="center"] .al-su-rule { margin-inline: auto; }

.al-su-inline .al-su-done__code { text-align: left; }

/* Opt-in bottom signup panel only. The surrounding live homepage is untouched. */
body.theme-rocket-wc-master .al-news__panel.al-news__panel--signup-photo {
  display: grid;
  max-width: 1040px;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  padding: 0;
  overflow: hidden;
  text-align: left;
}
.al-news__panel--signup-photo .al-su-news-photo {
  margin: 0;
  background: #fff;
  border-right: 1px solid var(--su-line-1);
}
.al-news__panel--signup-photo .al-su-news-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
  filter: none;
}
.al-news__panel--signup-photo .al-su-news-body {
  min-width: 0;
  padding: clamp(24px, 3.5vw, 48px);
}
.al-news__panel--signup-photo .al-news__head { text-align: left; }
.al-news__panel--signup-photo .al-su-inline { max-width: none; margin: 0; }
.al-news__panel--signup-photo .al-rule { margin-inline: 0; }
.al-news__panel--signup-photo .al-su-row { flex-wrap: wrap; }
.al-news__panel--signup-photo .al-su-input { flex: 1 1 210px; }
body.theme-rocket-wc-master .al-news__panel--signup-photo .al-news__note {
  font-size: .8125rem;
  line-height: 1.6;
}

/* ---------- Small screens: a bottom sheet, never a takeover --------------- */
@media (max-width: 767px) {
  .al-su-modal__grid { grid-template-columns: 1fr; }
  .al-su-modal__media {
    display: block;
    height: 144px;
    border-right: 0;
    border-bottom: 1px solid var(--su-line-1);
    border-radius: var(--su-r-card) var(--su-r-card) 0 0;
  }
  .al-su-modal__body { padding: 24px; }
  body.theme-rocket-wc-master .al-news__panel.al-news__panel--signup-photo { grid-template-columns: 1fr; }
  .al-news__panel--signup-photo .al-su-news-photo { height: 200px; border-right: 0; }
}

@media (max-width: 639px) {
  .al-su-modal {
    align-items: flex-end;
    padding: 0;
  }
  .al-su-modal__card {
    max-width: none;
    max-height: 90vh;
    max-height: 90dvh;
    border-radius: var(--su-r-card) var(--su-r-card) 0 0;
    border-bottom: 0;
    animation: al-su-sheet 320ms var(--su-ease) both;
  }
  .al-su-modal__body { padding: 22px 20px max(24px, env(safe-area-inset-bottom)); }
  .al-su-row { flex-direction: column; }
  .al-su-btn { width: 100%; padding: 16px 22px; }
  .al-su-modal .al-su-close { top: 8px; margin: 8px 8px -52px auto; }
  .al-su-modal__media { height: 120px; }
  .al-news__panel--signup-photo .al-su-input { flex-basis: auto; }

  /* Tighten the lockup so the field and the button stay above the fold.
     Selectors are deliberately heavy: the skin's own
     `body.theme-rocket-wc-master p.al-kicker` / `p` rules sit at (0,1,2) and
     load later, so anything lighter than this is simply ignored here. */
  .al-su-modal .al-su-modal__body p.al-su-kicker { margin-bottom: 10px; }
  .al-su-modal .al-su-modal__body .al-su-title { font-size: 1.5rem; line-height: 1.2; }
  .al-su-modal .al-su-rule { margin: 12px 0; }
  .al-su-modal .al-su-modal__body p.al-su-lede {
    font-size: 1rem;
    line-height: 1.55;
    margin-bottom: 18px;
  }
  .al-su-modal .al-su-modal__body p.al-su-fine { margin-top: 12px; }
}

@keyframes al-su-sheet {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

/* ---------- Motion safety ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .al-su-modal__card,
  .al-su-modal__scrim,
  .al-su-done { animation: none !important; }
  .al-su-btn,
  .al-su-close,
  .al-su-input,
  .al-su-copybtn { transition: none !important; }
  /* The skin's `.al-btn:hover { transform: translateY(-1px) }` is the same
     specificity as ours and loads later, so honouring the preference takes an
     !important here. Motion preferences outrank house style. */
  .al-su-btn:hover,
  button.al-su-btn:hover,
  a.al-su-btn:hover { transform: none !important; }
}

/* ---------- The unsubscribe page ----------------------------------------- */
.al-su-page {
  max-width: 560px;
  text-align: center;
  padding: 40px 32px;
  background: var(--su-surface-1);
  border: 1px solid var(--su-line-2);
  border-radius: var(--su-r-card);
  box-shadow: var(--al-shadow-card, 0 10px 30px rgba(11, 10, 8, .45));
}
.al-su-page .al-su-kicker { text-align: center; }
.al-su-page__title {
  font-family: var(--su-font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
  line-height: 1.15;
  color: var(--su-text-hi);
  margin: 0;
}
.al-su-page .al-su-rule { margin: 16px auto; }
.al-su-page__body {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--su-text-mid);
  margin: 0 0 18px;
}
.al-su-page__email {
  font-family: var(--su-font-util);
  font-size: .8125rem;
  letter-spacing: .10em;
  color: var(--su-brass-300);
  margin: 0 0 24px;
  word-break: break-all;
}
.al-su-page__cta { margin: 0 0 22px; }
.al-su-page__fine {
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--su-text-dim);
  margin: 0;
}