/* ==========================================================================
   IMPERVORA -- SYNCHRONY FINANCING ASSETS

   Wrapper styling only. Synchrony's approved artwork is never redrawn,
   recoloured, cropped or re-hosted -- everything below sizes and positions the
   container around it, which is what the merchant agreement allows.

   Gold usage follows the brand standard: #C6A667 is the systemic UI gold used
   for the non-brand eyebrow, rules and links. #C8A35A is reserved for the
   brand name and is deliberately absent here.
   ========================================================================== */

.impervora-syf {
  background: #F4F2EF;
  padding: 72px 24px;
  text-align: center;
}

/* ---------- Type ----------

   Every paragraph in this section carries a doubled selector and auto side
   margins. The design system caps homepage paragraphs with `.home p`
   (max-width: 68ch) as a reading-measure rule and Astra's reset then pins
   margin-left/right to 0, so a capped <p> hugs the LEFT edge of the section and
   the centred text inside it lands off the section axis. `.home p` scores
   (0,1,1); `.impervora-syf .impervora-syf__x` scores (0,2,0) and wins. Do not
   simplify these back to single-class selectors. */

.impervora-syf .impervora-syf__eyebrow {
  max-width: none;
  margin: 0 auto 18px;
  color: #C6A667;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.impervora-syf__title {
  margin: 0 0 16px;
  color: #0E0E0E;
  font-size: 32px;
  font-weight: 300;
  letter-spacing: 4px;
}

.impervora-syf .impervora-syf__copy {
  max-width: 620px;
  margin: 0 auto 34px;
  color: #4A4A4A;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
}

/* The banner carries its own message, so the heading needs a little more air
   beneath it than the apply section's lede does. */
.impervora-syf--banner .impervora-syf__title {
  margin-bottom: 34px;
}

/* ---------- The approved asset ----------

   The asset is an <input type="image"> inside Synchrony's own <form>. Two
   things have to be neutralised around it:

   1. Theme button styling. Astra styles bare `button` and the submit-type
      inputs with a background, border and generous padding; an image input that
      inherited any of that would render as a padded box around the artwork.
      Everything is zeroed explicitly here rather than relying on
      input[type="image"] being absent from Astra's selector list.
   2. The global `img { height: auto }` rule does not reach a form control, so
      height is set to auto explicitly -- without it a width-constrained image
      input keeps its intrinsic height and the artwork distorts on mobile.

   max-width:100% is what keeps the 300px banner and the 218px button inside a
   320px viewport; with height:auto they scale proportionally rather than
   overflowing or being clipped. */

.impervora-syf__asset {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
}

.impervora-syf__asset form {
  max-width: 100%;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.impervora-syf__asset input[type="image"] {
  display: block;
  height: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Native sizes of the approved artwork. The apply asset ships at 2x (436px
   wide) for a 218px slot, so it is presented at 218px and stays crisp. */
.impervora-syf__asset--banner input[type="image"] {
  width: 300px;
}

.impervora-syf__asset--apply input[type="image"] {
  width: 218px;
}

@media (hover: hover) {
  .impervora-syf__asset input[type="image"]:hover {
    transform: translateY(-2px);
  }
}

.impervora-syf__asset input[type="image"]:focus-visible {
  outline: 2px solid #C6A667;
  outline-offset: 4px;
}

/* ---------- Supporting lines ---------- */

.impervora-syf .impervora-syf__link {
  max-width: none;
  margin: 30px auto 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.impervora-syf__link a {
  color: #0E0E0E;
  text-decoration: none;
  border-bottom: 1px solid rgba(198, 166, 103, 0.75);
  padding-bottom: 3px;
  transition: color 0.35s ease, border-color 0.35s ease;
}

.impervora-syf__link a:hover,
.impervora-syf__link a:focus {
  color: #B08F4E;
  border-bottom-color: #B08F4E;
  text-decoration: none;
}

.impervora-syf .impervora-syf__note {
  max-width: 620px;
  margin: 30px auto 0;
  color: #4A4A4A;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
}

/* ---------- Tablet ---------- */

@media (max-width: 921px) {
  .impervora-syf {
    padding: 56px 20px;
  }

  .impervora-syf__title {
    font-size: 27px;
    letter-spacing: 3px;
  }

  .impervora-syf .impervora-syf__copy {
    margin-bottom: 30px;
    font-size: 16px;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 544px) {
  .impervora-syf {
    padding: 48px 18px;
  }

  .impervora-syf__title {
    font-size: 24px;
    letter-spacing: 2px;
  }

  .impervora-syf--banner .impervora-syf__title {
    margin-bottom: 28px;
  }

  .impervora-syf .impervora-syf__copy {
    font-size: 15px;
  }

  .impervora-syf .impervora-syf__link {
    font-size: 13px;
    letter-spacing: 1.2px;
  }

  .impervora-syf .impervora-syf__note {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .impervora-syf__asset input[type="image"] {
    transition: none;
  }

  .impervora-syf__asset input[type="image"]:hover {
    transform: none;
  }
}

/* ==========================================================================
   Category / shop archive banner

   A single approved Synchrony asset above the product grid. Wrapper styling
   only -- the artwork itself is untouched and still scales through the shared
   .impervora-syf__asset rules above.

   The homepage band is a tall, centred, full-width section; on an archive that
   would push the product grid below the fold, so this variant lays the same
   asset out horizontally beside its heading and cuts the vertical padding.
   These rules are appended after the base mobile block deliberately: the
   single-class .impervora-syf--archive ties with .impervora-syf on
   specificity, so source order is what lets it win, and the archive keeps its
   own responsive steps below.
   ========================================================================== */

.impervora-syf--archive {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin: 0 0 32px;
  padding: 32px 24px;
  text-align: left;
}

.impervora-syf--archive .impervora-syf__archive-text {
  max-width: 420px;
}

.impervora-syf--archive .impervora-syf__eyebrow {
  margin: 0 0 10px;
}

.impervora-syf--archive .impervora-syf__title {
  margin: 0;
  font-size: 26px;
  letter-spacing: 3px;
}

.impervora-syf--archive .impervora-syf__link {
  margin: 16px 0 0;
}

/* The flex parent already centres the asset; a 100% width child would force a
   line break between the text and the artwork. */
.impervora-syf--archive .impervora-syf__asset {
  width: auto;
  flex: 0 0 auto;
}

@media (max-width: 921px) {
  .impervora-syf--archive {
    gap: 28px;
    padding: 28px 20px;
  }

  .impervora-syf--archive .impervora-syf__title {
    font-size: 22px;
    letter-spacing: 2px;
  }
}

@media (max-width: 544px) {
  .impervora-syf--archive {
    flex-direction: column;
    gap: 24px;
    padding: 28px 18px;
    text-align: center;
  }

  .impervora-syf--archive .impervora-syf__archive-text {
    max-width: none;
  }
}

/* ==========================================================================
   MPP Anywhere trigger + IMPERVORA CTA  (2026-08-11)

   The approved creative is no longer an <input type="image"> inside Synchrony's
   eApply <form> -- that application is inactive and the form was removed. It is
   now a plain <img> inside <a class="MPPAnywhereClass">, the Synchrony plugin's
   own Multiproduct Presentment trigger. The artwork is untouched; everything
   below sizes and positions the container around it.

   The <input type="image"> rules further up are left in place deliberately:
   they cost nothing and mean the approved form markup still renders correctly
   if Synchrony reactivates the application and it is restored.

   CTA selectors are doubled (.impervora-syf .impervora-syf__cta, 0-2-0) for the
   same reason the paragraphs above are: Astra's .entry-content a also scores
   0-2-0, and this stylesheet loads after it, so source order decides.
   ========================================================================== */

.impervora-syf__asset a.MPPAnywhereClass {
  display: block;
  max-width: 100%;
  border: 0;
  line-height: 0;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.impervora-syf__asset a.MPPAnywhereClass img {
  display: block;
  width: 300px;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
}

@media (hover: hover) {
  .impervora-syf__asset a.MPPAnywhereClass:hover {
    transform: translateY(-2px);
  }
}

.impervora-syf__asset a.MPPAnywhereClass:focus-visible {
  outline: 2px solid #C6A667;
  outline-offset: 4px;
}

.impervora-syf .impervora-syf__cta-wrap {
  max-width: none;
  margin: 30px auto 0;
}

.impervora-syf .impervora-syf__cta {
  display: inline-block;
  margin: 0;
  padding: 15px 34px;
  background: #0E0E0E;
  border: 1px solid #0E0E0E;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

.impervora-syf .impervora-syf__cta:hover,
.impervora-syf .impervora-syf__cta:focus {
  background: #C6A667;
  border-color: #C6A667;
  color: #0E0E0E;
  text-decoration: none;
}

.impervora-syf .impervora-syf__cta:focus-visible {
  outline: 2px solid #C6A667;
  outline-offset: 3px;
}

/* In the archive band the CTA sits inside the left text column. */
.impervora-syf--archive .impervora-syf__cta-wrap {
  margin: 18px 0 0;
}

@media (max-width: 544px) {
  .impervora-syf .impervora-syf__cta {
    padding: 14px 26px;
    font-size: 12px;
    letter-spacing: 1.3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .impervora-syf__asset a.MPPAnywhereClass {
    transition: none;
  }

  .impervora-syf__asset a.MPPAnywhereClass:hover {
    transform: none;
  }
}

/* ---- Approved creative is informational only (2026-08-11) ----
   The MPPAnywhereClass anchor was removed after testing showed it never paints
   a modal, so the artwork is now a bare <img>. It must still scale exactly as
   it did inside the anchor: 300px native, capped by max-width, ratio kept by
   height:auto. The a.MPPAnywhereClass rules above are inert and harmless. */

.impervora-syf__asset img {
  display: block;
  width: 300px;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
}

/* The design system underlines content links with a selector that outscores the
   .impervora-syf .impervora-syf__cta block above, so the button rendered with an
   underline through it. Element+class on both halves wins without !important. */
.impervora-syf p.impervora-syf__cta-wrap a.impervora-syf__cta,
.impervora-syf p.impervora-syf__cta-wrap a.impervora-syf__cta:hover,
.impervora-syf p.impervora-syf__cta-wrap a.impervora-syf__cta:focus,
.impervora-syf p.impervora-syf__cta-wrap a.impervora-syf__cta:visited {
  text-decoration: none;
}