/* ===========================================================================
   Newsletter block -- six designs, two widths, and the mobile repairs.

   Loaded on EVERY storefront page, not only the themed ones. Two reasons:

     1. The mobile section at the bottom repairs the legacy .tp-subscribe-*
        markup, which the twenty layouts do not use and the old theme does.
     2. A shop can switch back to the legacy theme at any time, and the block
        must not be left unstyled while it does.

   Everything here is namespaced .sf-news, so it cannot collide with the base
   template's .tp-subscribe-* rules even though both are on the page.

   Link order matters: this file must come after theme-base.css. The base
   template has its own @media (max-width: 575px) rules for the subscribe
   button, and the repairs below beat them on source order alone -- which is
   why almost nothing here needs !important.
   =========================================================================== */

.sf-news {
  /* Falls back to a sensible literal so the block is still readable on a page
     where the theme variables are not defined. */
  --nl-brand:    var(--tp-theme-primary, #0989ff);
  --nl-on-brand: #ffffff;
  --nl-ink:      var(--tp-heading-primary, #10141a);
  --nl-body:     var(--tp-text-body, #55585b);
  --nl-page:     #ffffff;
  --nl-panel:    #f5f7fa;
  --nl-line:     rgba(0, 0, 0, .10);
  --nl-radius:   6px;
  --nl-pad:      54px;

  position: relative;
  z-index: 1;
}

.sf-news__inner {
  width: 100%;
  max-width: 1290px;
  margin-inline: auto;
  padding-inline: 15px;          /* the same gutter the rest of the page uses */
  padding-block: var(--nl-pad);
}

/* The visible label is redundant next to a placeholder, but a screen reader
   still needs it. Hidden the accessible way rather than with display:none. */
.sf-news__label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sf-news__kicker {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .8;
  margin-bottom: 8px;
}

.sf-news__title {
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1.2;
  font-weight: 700;
  margin: 0;
  color: inherit;
}

.sf-news__words { min-width: 0; }

/* ---------------------------------------------------------------------------
   The form. One shape for every design; the designs re-colour it.

   position: static on the button is deliberate and load-bearing. The base
   template absolutely-positions it inside .tp-subscribe-input, and that rule
   is not scoped tightly enough to stay out of here -- a button that is taken
   out of flow inside a flex row lands outside the box, which is exactly the
   "subscribe button is out of the box" report.
   --------------------------------------------------------------------------- */
.sf-news__form {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 560px;
  margin: 0;
}

/* The field, not the button, is what the visitor has to type into, so it
   takes whatever room is going. min-width stops a flex item from refusing to
   shrink; the basis stops it from collapsing to the width of its placeholder
   when it sits in an auto-sized grid column -- which is what made it barely
   wider than the Subscribe button in the Outlined and Split designs. */
.sf-news__input {
  flex: 1 1 auto;
  min-width: 0;
  flex-basis: 280px;
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--nl-line);
  border-radius: var(--nl-radius);
  background: #fff;
  color: var(--nl-ink);
  font-size: 15px;
  outline: none;
}

.sf-news__input::placeholder { color: rgba(0, 0, 0, .45); opacity: 1; }

.sf-news__input:focus {
  border-color: var(--nl-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nl-brand) 22%, transparent);
}

.sf-news__btn {
  position: static;              /* see the note above */
  top: auto; right: auto;
  flex: 0 0 auto;
  height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--nl-radius);
  background: var(--nl-ink);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s ease;
}

.sf-news__btn:hover { background: #000; }

.sf-news__done {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 20px;
  border-radius: var(--nl-radius);
  background: rgba(0, 0, 0, .06);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   1. CARD -- a floating card on a tinted strip.
   --------------------------------------------------------------------------- */
.sf-news--panel { background: var(--nl-panel); color: var(--nl-body); }

.sf-news--panel .sf-news__card {
  background: var(--nl-page);
  border: 1px solid var(--nl-line);
  border-radius: calc(var(--nl-radius) * 2);
  box-shadow: 0 26px 56px -34px rgba(16, 24, 40, .45);
  padding: clamp(26px, 4vw, 44px);
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}

.sf-news--panel .sf-news__title { color: var(--nl-ink); }
.sf-news--panel .sf-news__kicker { color: var(--nl-brand); }
.sf-news--panel .sf-news__form { margin: 22px auto 0; }
.sf-news--panel .sf-news__btn { background: var(--nl-brand); color: var(--nl-on-brand); }
.sf-news--panel .sf-news__btn:hover { filter: brightness(.92); }

/* ---------------------------------------------------------------------------
   2. SPLIT -- words left, form right, hairline between.
   --------------------------------------------------------------------------- */
.sf-news--split {
  background: var(--nl-page);
  color: var(--nl-body);
  border-top: 1px solid var(--nl-line);
  border-bottom: 1px solid var(--nl-line);
}

.sf-news--split .sf-news__inner {
  display: grid;
  grid-template-columns: 1fr 1px auto;
  gap: 44px;
  align-items: center;
}

.sf-news--split .sf-news__rule { background: var(--nl-line); align-self: stretch; }
.sf-news--split .sf-news__title { color: var(--nl-ink); }
.sf-news--split .sf-news__kicker { color: var(--nl-brand); }
.sf-news--split .sf-news__btn { background: var(--nl-brand); color: var(--nl-on-brand); }

/* ---------------------------------------------------------------------------
   3. INLINE -- one short row, flush against the footer.
   --------------------------------------------------------------------------- */
.sf-news--inline {
  background: var(--nl-panel);
  color: var(--nl-body);
  border-top: 1px solid var(--nl-line);
}

.sf-news--inline .sf-news__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-block: 22px;
}

.sf-news--inline .sf-news__title { font-size: 17px; font-weight: 600; color: var(--nl-ink); }
.sf-news--inline .sf-news__form { max-width: 420px; }
.sf-news--inline .sf-news__input,
.sf-news--inline .sf-news__btn { height: 44px; }
.sf-news--inline .sf-news__btn { background: var(--nl-brand); color: var(--nl-on-brand); padding: 0 22px; }

/* ---------------------------------------------------------------------------
   4. GRADIENT -- big centred type over a brand sweep.
   --------------------------------------------------------------------------- */
.sf-news--gradient {
  background: linear-gradient(120deg,
              var(--nl-brand) 0%,
              color-mix(in srgb, var(--nl-brand) 76%, #000) 52%,
              color-mix(in srgb, var(--nl-brand) 60%, #7b2ff7) 130%);
  color: var(--nl-on-brand);
}

.sf-news--gradient .sf-news__inner {
  text-align: center;
  padding-block: clamp(42px, 6vw, 78px);
}

.sf-news--gradient .sf-news__title { color: var(--nl-on-brand); font-size: clamp(24px, 3.2vw, 40px); }
.sf-news--gradient .sf-news__kicker { color: var(--nl-on-brand); opacity: .8; }
.sf-news--gradient .sf-news__form { margin: 26px auto 0; }
.sf-news--gradient .sf-news__input { border-color: transparent; }
.sf-news--gradient .sf-news__btn { background: #fff; color: var(--nl-ink); }
.sf-news--gradient .sf-news__btn:hover { background: rgba(255, 255, 255, .88); }
.sf-news--gradient .sf-news__done { background: rgba(255, 255, 255, .18); color: #fff; }

/* ---------------------------------------------------------------------------
   5. OUTLINED -- an outlined box, nothing filled in.
   --------------------------------------------------------------------------- */
.sf-news--bordered { background: var(--nl-page); color: var(--nl-body); }

.sf-news--bordered .sf-news__card {
  border: 1px solid var(--nl-brand);
  border-radius: calc(var(--nl-radius) * 2);
  padding: clamp(26px, 4vw, 44px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}

.sf-news--bordered .sf-news__title { color: var(--nl-ink); }
.sf-news--bordered .sf-news__kicker { color: var(--nl-brand); }
.sf-news--bordered .sf-news__btn { background: var(--nl-brand); color: var(--nl-on-brand); }
/* grid-template-columns: 1fr auto sizes this column to the form. Without a
   floor the form shrinks to its placeholder and the field ends up narrower
   than the button beside it. */
.sf-news--bordered .sf-news__form,
.sf-news--split .sf-news__form,
.sf-news--dark .sf-news__form { min-width: min(400px, 100%); }

/* ---------------------------------------------------------------------------
   6. DARK -- a dark band whatever the brand colour is.
   --------------------------------------------------------------------------- */
.sf-news--dark { background: #0d1117; color: #c9d1d9; }

.sf-news--dark .sf-news__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}

.sf-news--dark .sf-news__title { color: #fff; }
.sf-news--dark .sf-news__kicker { color: #8b949e; }
.sf-news--dark .sf-news__input { background: #161b22; border-color: #30363d; color: #e6edf3; }
.sf-news--dark .sf-news__input::placeholder { color: #6e7681; }
.sf-news--dark .sf-news__btn { background: var(--nl-brand); color: var(--nl-on-brand); }
.sf-news--dark .sf-news__done { background: rgba(255, 255, 255, .10); color: #e6edf3; }

/* ---------------------------------------------------------------------------
   Width.

   Full bleed sits flush against the footer -- no gap, or the band reads as a
   floating stripe. Boxed keeps the page gutter and its own breathing room
   below, and rounds its corners so it reads as a block rather than a band.
   --------------------------------------------------------------------------- */
.sf-news--full { width: 100%; margin: 0; }

.sf-news--boxed {
  width: calc(100% - 30px);
  max-width: 1290px;
  margin: 0 auto clamp(40px, 6vw, 70px);
  border-radius: calc(var(--nl-radius) * 2);
  overflow: hidden;
}

/* Boxed already carries the gutter on the section, so the inner one would
   double it and push the content off centre. */
.sf-news--boxed .sf-news__inner { padding-inline: clamp(18px, 3vw, 40px); }

/* Outlined and Card draw their own box; boxing the section as well produces a
   border inside a border. Keep the margin, drop the second frame. */
.sf-news--boxed.sf-news--bordered,
.sf-news--boxed.sf-news--panel { border-radius: 0; overflow: visible; }

/* The legacy band at full width -- what it always was. Written out rather
   than left implicit so that every class the PHP emits has a rule behind it;
   a class with no rule is indistinguishable from a stylesheet that failed to
   load, which is how twenty layouts once shipped unstyled. */
.sf-news-legacy--full { width: 100%; }

/* The legacy band, boxed. Same treatment, applied to the old markup. */
.sf-news-legacy--boxed {
  width: calc(100% - 30px);
  max-width: 1290px;
  margin: 0 auto clamp(40px, 6vw, 70px);
  border-radius: 16px;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Theme personality.

   The design decides the arrangement; the layout decides the shape. Without
   this every layout using, say, Card would draw exactly the same card, which
   is the complaint that started all of this.
   --------------------------------------------------------------------------- */

/* SHARP -- square corners, tight. */
.sf-bazaar .sf-news, .sf-forge .sf-news, .sf-cargo .sf-news,
.sf-motor  .sf-news, .sf-nova  .sf-news { --nl-radius: 2px; --nl-pad: 40px; }

/* SOFT -- pill shapes, generous. */
.sf-feast  .sf-news, .sf-bloom .sf-news, .sf-pantry .sf-news,
.sf-verdant .sf-news, .sf-swift .sf-news { --nl-radius: 14px; --nl-pad: 58px; }

.sf-feast .sf-news__input,  .sf-bloom .sf-news__input,
.sf-pantry .sf-news__input, .sf-verdant .sf-news__input,
.sf-swift .sf-news__input { border-radius: 99px; padding-inline: 22px; }

.sf-feast .sf-news__btn,  .sf-bloom .sf-news__btn,
.sf-pantry .sf-news__btn, .sf-verdant .sf-news__btn,
.sf-swift .sf-news__btn { border-radius: 99px; }

/* QUIET -- hairlines, wide letter-spacing, airy. */
.sf-luxe .sf-news, .sf-atelier .sf-news, .sf-curio .sf-news,
.sf-studio .sf-news, .sf-scholar .sf-news { --nl-radius: 0px; --nl-pad: 64px; }

.sf-luxe .sf-news__title, .sf-atelier .sf-news__title, .sf-curio .sf-news__title,
.sf-studio .sf-news__title, .sf-scholar .sf-news__title {
  font-weight: 400;
  letter-spacing: .01em;
}

/* LOUD -- heavy, high contrast. */
.sf-pulse .sf-news, .sf-sprint .sf-news, .sf-kiosk .sf-news { --nl-radius: 4px; }

.sf-pulse .sf-news__title, .sf-sprint .sf-news__title, .sf-kiosk .sf-news__title {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
}

.sf-pulse .sf-news__btn, .sf-sprint .sf-news__btn, .sf-kiosk .sf-news__btn {
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* PLAIN -- larger type, bigger hit areas. */
.sf-vitals .sf-news, .sf-aurora .sf-news { --nl-radius: 8px; }
.sf-vitals .sf-news__input, .sf-aurora .sf-news__input,
.sf-vitals .sf-news__btn,   .sf-aurora .sf-news__btn { height: 56px; font-size: 16px; }

/* ===========================================================================
   MOBILE

   Two separate jobs below. The first is the new markup, which only has to
   stack. The second is the legacy .tp-subscribe-* band, which arrives on a
   phone genuinely broken: the base template turns the Subscribe button to
   position:relative;top:15px at 575px, so it hangs below the field, auto
   width, left aligned, with a right-only border radius -- and the heading
   stays at 37px, which wraps to four lines on a narrow screen.
   =========================================================================== */

@media (max-width: 991px) {
  .sf-news--split .sf-news__inner { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .sf-news--split .sf-news__rule { display: none; }
  .sf-news--dark .sf-news__inner { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .sf-news--bordered .sf-news__card { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

@media (max-width: 767px) {
  /* --- the new markup ---------------------------------------------------- */
  .sf-news { --nl-pad: 32px; }

  .sf-news__inner { padding-inline: 16px; }
  .sf-news__title { font-size: 20px; }
  .sf-news__kicker { font-size: 11px; }

  /* Side by side, an email field and a Subscribe button leave the field about
     nine characters wide. Stacked, both get the full width. */
  .sf-news__form {
    flex-direction: column;
    max-width: none;
    gap: 8px;
  }

  .sf-news__btn { width: 100%; padding-inline: 0; }
  .sf-news__done { width: 100%; justify-content: center; }

  .sf-news--panel .sf-news__card,
  .sf-news--bordered .sf-news__card { padding: 22px 18px; }

  .sf-news--inline .sf-news__inner { flex-direction: column; align-items: stretch; gap: 14px; }
  .sf-news--inline .sf-news__form { max-width: none; }

  .sf-news--boxed {
    width: calc(100% - 24px);
    margin-bottom: 32px;
  }

  /* --- the legacy band ---------------------------------------------------- */
  .tp-subscribe-area {
    padding-top: 34px;
    padding-bottom: 34px;
  }

  /* Decoration that costs a phone its width and reads as clutter at this size.
     The plane is positioned at right:17% of a 399px box, so on a 360px screen
     it hangs off the side. */
  .tp-subscribe-shape,
  .tp-subscribe-plane { display: none; }

  .tp-subscribe-content {
    text-align: center;
    margin-bottom: 18px;
  }

  .tp-subscribe-content span { font-size: 13px; }

  .tp-subscribe-title {
    font-size: 22px;
    line-height: 1.25;
  }

  .tp-subscribe-input { display: flex; flex-direction: column; gap: 10px; }

  .tp-subscribe-input input { height: 50px; border-radius: 8px; }

  /* Undoes the base template's own 575px rule, which leaves the button
     floating 15px below the field at its natural width. Static rather than
     relative so the flex column lays it out; the radius is restored on all
     four corners because it is no longer butted against the field. */
  .tp-subscribe-input button {
    position: static;
    top: auto;
    right: auto;
    width: 100%;
    height: 50px;
    border-radius: 8px;
  }

  .sf-news-legacy--boxed { width: calc(100% - 24px); margin-bottom: 32px; }
}