/* =========================================================================
   Core theme — Newsletter. Rebuilt from zero.

   Reads as the page's closing move: a single calm surface, a serif display
   heading, and a form that looks like one object rather than a stray input
   next to a stray button. Same vocabulary as Featured Products / Best Sellers.

   Every --nl-* property is written by section.php from a schema control.
   ========================================================================= */

.storly-nl {
  --nl-gap: var(--core-intro-stack, 8px);
  --nl-form-gap: 10px;
  --nl-field-radius: var(--r-sm, 6px);
  --nl-btn-radius: var(--btn-radius, var(--r-sm, 6px));
  --nl-surface-radius: var(--r-xl, 12px);
  --nl-heading-size: var(--core-heading-section, clamp(1.6rem, 2.8vw, 2.3rem));
  --nl-inset: var(--gutter);
  --nl-surface-pad: clamp(28px, 4vw, 56px);

  --nl-surface: var(--bg-s);
  --nl-heading: var(--text);
  --nl-ink: var(--text-s);
  --nl-field-bg: var(--surface);
  --nl-field-border: var(--border);
  --nl-btn-bg: var(--btn-bg, var(--brand));
  --nl-btn-ink: var(--btn-color, var(--on-brand));
  --nl-accent: var(--accent);

  padding-block: var(--nl-pad-top, var(--core-rhythm, 64px)) var(--nl-pad-bottom, var(--core-rhythm, 64px));
  background: var(--nl-bg, transparent);
}

.storly-nl__inner {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--nl-inset);
  max-width: var(--core-track-default, 1360px);
}

/* ── Surface ────────────────────────────────────────────────────────────── */

.storly-nl__panel {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  margin-inline: auto;
  padding: var(--nl-surface-pad);
  border-radius: var(--nl-surface-radius);
}

.storly-nl[data-surface="panel"]    .storly-nl__panel { background: var(--nl-surface); }
.storly-nl[data-surface="outlined"] .storly-nl__panel { border: 1px solid var(--nl-field-border); }
.storly-nl[data-surface="plain"]    .storly-nl__panel { padding-inline: 0; background: none; }

.storly-nl[data-width="narrow"]  .storly-nl__panel { max-width: 720px; }
.storly-nl[data-width="default"] .storly-nl__panel { max-width: 960px; }
.storly-nl[data-width="wide"]    .storly-nl__panel { max-width: none; }

/* Split puts the copy and the form side by side on desktop; stacked keeps the
   classic centred column. */
@media (min-width: 1025px) {
  .storly-nl[data-layout="split"] .storly-nl__panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }
  .storly-nl[data-layout="split"] .storly-nl__copy { text-align: start; }
}

/* ── Copy ───────────────────────────────────────────────────────────────── */

.storly-nl__copy { display: flex; flex-direction: column; gap: var(--nl-gap); min-width: 0; }
.storly-nl[data-align="center"] .storly-nl__copy { align-items: center; text-align: center; }

.storly-nl__eyebrow {
  margin: 0;
  color: var(--nl-accent);
  font-size: var(--core-eyebrow-size, 11.5px);
  font-weight: var(--core-eyebrow-weight, 600);
  letter-spacing: var(--core-eyebrow-tracking, .14em);
  text-transform: var(--core-eyebrow-transform, uppercase);
}

.storly-nl__heading {
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: var(--nl-heading-size);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.015em;
  text-wrap: balance;
  color: var(--nl-heading);
}

.storly-nl__description {
  margin: 0;
  max-width: 56ch;
  color: var(--nl-ink);
  font-size: 15px;
  line-height: var(--lh-body, 1.6);
}

/* ── Form ───────────────────────────────────────────────────────────────── */

.storly-nl__formwrap { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.storly-nl[data-align="center"][data-layout="stacked"] .storly-nl__formwrap { align-items: center; }

.storly-nl__form { width: 100%; max-width: 520px; }
.storly-nl[data-layout="split"] .storly-nl__form { max-width: none; }

/* The label is for assistive tech; the placeholder carries the visible copy. */
.storly-nl__label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.storly-nl__row {
  display: flex;
  gap: var(--nl-form-gap);
  align-items: stretch;
}
.storly-nl[data-form="stacked"] .storly-nl__row { flex-direction: column; }

.storly-nl__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  padding-inline: 15px;
  border: 1px solid var(--nl-field-border);
  border-radius: var(--nl-field-radius);
  background: var(--nl-field-bg);
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  transition: border-color var(--dur-fast, .16s) var(--ease), box-shadow var(--dur-fast, .16s) var(--ease);
}
.storly-nl__input::placeholder { color: var(--text-m); }
.storly-nl__input:focus {
  outline: 0;
  border-color: var(--nl-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nl-accent) 20%, transparent);
}

.storly-nl[data-field="filled"] .storly-nl__input { border-color: transparent; background: var(--bg-t); }
.storly-nl[data-field="underline"] .storly-nl__input {
  padding-inline: 2px;
  border: 0;
  border-bottom: 1px solid var(--nl-field-border);
  border-radius: 0;
  background: transparent;
}
.storly-nl[data-field="underline"] .storly-nl__input:focus { box-shadow: none; border-bottom-color: var(--nl-accent); }

.storly-nl__btn {
  flex: none;
  height: 48px;
  padding-inline: 26px;
  border: 1px solid transparent;
  border-radius: var(--nl-btn-radius);
  background: var(--nl-btn-bg);
  color: var(--nl-btn-ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: .02em;
  cursor: pointer;
  transition: opacity var(--dur-fast, .16s) var(--ease);
}
.storly-nl__btn:hover { opacity: .92; }
.storly-nl__btn:focus-visible { outline: 2px solid var(--nl-accent); outline-offset: 2px; }

.storly-nl[data-button="outline"] .storly-nl__btn {
  background: transparent;
  border-color: color-mix(in srgb, var(--nl-heading) 26%, transparent);
  color: var(--nl-heading);
}

/* Busy state is toggled by script.js. */
.storly-nl__form.is-busy .storly-nl__btn { opacity: .6; pointer-events: none; }
.storly-nl__form.is-busy .storly-nl__input { opacity: .8; }

/* ── Status / consent / privacy ─────────────────────────────────────────── */

.storly-nl__status {
  margin: 8px 0 0;
  min-height: 1.2em;
  font-size: 13px;
  line-height: 1.45;
  color: var(--nl-ink);
}
.storly-nl__status.is-success { color: var(--success); font-weight: 600; }
.storly-nl__status.is-error   { color: var(--danger); font-weight: 600; }

.storly-nl__consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  color: var(--nl-ink);
  font-size: 13px;
  line-height: 1.45;
  cursor: pointer;
}
.storly-nl__consent input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--nl-accent); }

.storly-nl__privacy { margin: 0; color: var(--text-m); font-size: 12px; line-height: 1.5; }
.storly-nl__privacy a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.storly-nl[data-align="center"][data-layout="stacked"] .storly-nl__privacy { text-align: center; }

/* Honeypot: reachable to bots, invisible and unfocusable for people.
   Hidden by clipping, not an off-screen offset — a negative `left` adds
   thousands of pixels of horizontal scroll once the document is RTL. */
.storly-nl__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
/* The field and button stack into full-width tap targets — an inline 48px
   button beside an input is unusable at 320px. */

@media (max-width: 767px) {
  .storly-nl { --nl-surface-pad: 22px; }
  .storly-nl__heading {
  }
  .storly-nl__row { flex-direction: column; }
  .storly-nl__btn { width: 100%; padding-inline: 18px; }
  .storly-nl__form { max-width: none; }
  .storly-nl__copy { align-items: flex-start; text-align: start; }
  .storly-nl[data-align="center"] .storly-nl__copy { align-items: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .storly-nl__input, .storly-nl__btn { transition: none; }
}

/* =========================================================================
   Image panel, eyebrow rules, pill field and medallion.

   Added on top of the block above so every --nl-* control above still wins
   where the merchant has set one. The picture is the merchant's own choice
   from the schema; nothing here ships an image of its own.
   ========================================================================= */

/* The panel becomes a picture on one side and the copy on the other, the
   photograph bleeding under a fade into the panel's own surface. */
/* The panel is the positioning context for both the picture and the aside. */
.storly-nl__panel { position: relative; }
.storly-nl[data-has-image="1"] .storly-nl__panel {
  overflow: hidden;
  padding-inline: var(--nl-surface-pad);
}
.storly-nl__media { display: none; }

@media (min-width: 900px) {
  /* The picture keeps the left of the panel in either writing direction — it
     is a composition, not a reading order, so it does not mirror. */
  .storly-nl[data-has-image="1"] .storly-nl__panel { padding-left: clamp(300px, 28%, 440px); }
  .storly-nl__media {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: clamp(300px, 36%, 560px);
  }
  .storly-nl__media img { width: 100%; height: 100%; object-fit: cover; }
  /* A long fade into the panel's own surface, so the picture has no cut edge. */
  .storly-nl__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent 0%, color-mix(in srgb, var(--nl-surface) 55%, transparent) 46%, var(--nl-surface) 100%);
  }
}

/* Eyebrow, set between two short rules as the design has it. */
.storly-nl__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--nl-accent, var(--accent));
}
.storly-nl[data-align="center"] .storly-nl__eyebrow { justify-content: center; }
.storly-nl__eyebrow::before,
.storly-nl__eyebrow::after {
  content: "";
  width: clamp(24px, 4vw, 52px);
  height: 1px;
  background: currentColor;
  opacity: .55;
}
.storly-nl[data-align="start"] .storly-nl__eyebrow::before { display: none; }

/* One object: a pill field carrying its own glyph, then the button. */
.storly-nl__field { position: relative; display: block; flex: 1 1 auto; min-width: 0; }
.storly-nl__field-icon {
  position: absolute;
  inset-inline-start: 16px;
  inset-block-start: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--nl-ink);
  opacity: .5;
  pointer-events: none;
}
.storly-nl__field .storly-nl__input { width: 100%; padding-inline-start: 46px; }

.storly-nl[data-field="outline"] .storly-nl__input,
.storly-nl[data-field="filled"] .storly-nl__input { border-radius: var(--nl-field-radius, 999px); }
.storly-nl__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.storly-nl__btn svg { width: 16px; height: 16px; }
[dir="rtl"] .storly-nl__btn svg { transform: scaleX(-1); }

/* The medallion is decoration, not a control: it carries no text of its own
   unless the merchant wrote an aside line. */
.storly-nl__aside { display: none; }
@media (min-width: 1200px) {
  .storly-nl__aside {
    position: absolute;
    right: clamp(24px, 3vw, 48px);
    top: 50%;
    display: grid;
    gap: 12px;
    justify-items: center;
    width: clamp(120px, 12vw, 168px);
    transform: translateY(-50%);
    text-align: center;
    pointer-events: none;
  }
  .storly-nl[data-has-image="1"] .storly-nl__panel > .storly-nl__aside { position: absolute; }
  .storly-nl__medallion {
    display: grid;
    width: 58px;
    height: 58px;
    border: 1px solid color-mix(in srgb, var(--nl-accent, var(--accent)) 40%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--nl-accent, var(--accent)) 9%, transparent);
    color: var(--nl-accent, var(--accent));
    place-items: center;
  }
  .storly-nl__medallion svg { width: 24px; height: 24px; }
  .storly-nl__aside-text { margin: 0; color: var(--nl-ink); font-size: .8125rem; line-height: 1.5; opacity: .82; }
}

/* The aside must not crowd the copy where the panel is already narrow. */
@media (min-width: 1200px) {
  .storly-nl[data-width="narrow"] .storly-nl__aside { display: none; }
}