/*
 * THE "DUNKING LIFETIME WARRANTY" POP-UP — the legacy window shade,
 * re-expressed in this storefront's tokens (W181, Ryan 2026-09-04).
 *
 * Served as a static asset and pulled in by `<WarrantyStyles>`; same reasoning
 * as chrome.css's header.
 *
 * Class prefix `sf-warr-`.
 *
 * WHAT WAS TRANSPLANTED: the SEQUENCE (seal and lede with the player bleeding
 * off the corner, four bullet lists, the film, the testimonial on its own
 * tinted band) and the legacy's grey sub-notes under each bullet. What was NOT:
 * the absolute `top: 750px` film and the 40px dark title bar — see the modal's
 * header for why neither could come across.
 *
 * THE FRAME IS NOT HERE; `modal.css` owns it. The one number that is this
 * board's is the panel width, 780 — every shade pop-up's measure.
 */

.sf-warr__panel {
  width: 780px;
}

/* ------------------------------------------------------- the focus ring -- */

.sf-warr__film:focus-visible {
  outline: var(--sf-focus-ring, 2px solid var(--brand-color-accent, #c4530a));
  outline-offset: var(--sf-focus-ring-offset, 2px);
}

/* ------------------------------------------------------------ the intro -- */

/*
 * `overflow: hidden` IS WHAT LETS THE PLAYER BLEED. The panel clips too, but
 * clipping here as well keeps the cut-out from extending the content row's
 * scrollable width — the defect `tools/shadegate.mjs` caught on the galvanized
 * pole (scrollWidth 1068 against a 780 client), and the same fix.
 */
.sf-warr__intro {
  align-items: center;
  display: flex;
  gap: 22px;
  overflow: hidden;
  padding: 32px 32px 30px;
  position: relative;
}

/*
 * THE PLAYER, OFF THE TOP-RIGHT CORNER — the legacy's `right: -21px; top: 0`,
 * which assumed a shade with page outside it to bleed into. Here the bleed is
 * into the clip above, and `pointer-events: none` keeps a decorative cut-out
 * from swallowing presses meant for the copy beneath it.
 */
.sf-warr__player {
  height: auto;
  pointer-events: none;
  position: absolute;
  right: -26px;
  top: -18px;
  width: 210px;
  z-index: 0;
}

.sf-warr__seal {
  flex: none;
  height: auto;
  position: relative;
  width: 130px;
  z-index: 1;
}

.sf-warr__lede {
  color: var(--brand-color-ink-soft, #44464a);
  flex: 1;
  font-size: var(--text-body);
  line-height: 1.5;
  margin: 0;
  min-width: 0;
  /* CLEAR OF THE PLAYER'S COLUMN, which is what the legacy's
   * `padding-right: 200px` was doing on a much wider shade. */
  padding-right: 172px;
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------ the lists -- */

.sf-warr__list-block {
  padding: 0 32px;
}

.sf-warr__list-block:first-of-type {
  padding-top: 6px;
}

/*
 * globals.css styles every h1-h3 with the heading face at weight 500, a -0.015em
 * track, 1.12 leading and `text-wrap: balance`; these want the BODY face at 700,
 * so all five are restated. `wrap` is the initial value and is spelled `wrap`
 * rather than `normal` (`normal` is `white-space`'s keyword and is dropped at
 * parse time — the site-wide defect found 2026-08-26).
 */
.sf-warr__list-head {
  color: var(--brand-color-ink, #17181a);
  font-family: var(--brand-font-body, system-ui, sans-serif);
  font-size: var(--text-body);
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.3;
  margin: 30px 0 12px;
  text-wrap: wrap;
}

.sf-warr__list {
  color: var(--brand-color-ink-soft, #44464a);
  display: grid;
  font-size: var(--text-body);
  gap: 12px;
  line-height: 1.5;
  margin: 0;
  padding-left: 20px;
}

.sf-warr__bullet {
  list-style: disc;
}

/*
 * THE GREY SUB-NOTE, on its own line — the legacy's `span { display: block }`.
 * It carries two different jobs in the source (a short qualifier like "applies
 * to Rust Armor version", and a whole paragraph under the "what makes it
 * better" bullets), and one treatment serves both because the legacy's does.
 */
.sf-warr__note {
  color: var(--brand-color-muted, #6c6a62);
  display: block;
  font-size: var(--text-small);
  line-height: 1.5;
  margin-top: 3px;
}

/* ------------------------------------------------------------- the film -- */

/* IN THE FLOW, not pinned at `top: 750px`. 302 is the asset's own width and the
 * legacy's own draw. */
.sf-warr__film {
  background: none;
  border: 0;
  cursor: pointer;
  display: block;
  margin: 36px auto 0;
  padding: 0;
  position: relative;
  width: 302px;
}

.sf-warr__film-poster {
  border: 3px solid var(--brand-color-surface, #ffffff);
  border-radius: var(--radius-inner);
  box-shadow: 0 6px 18px rgba(23, 24, 26, 0.16);
  box-sizing: border-box;
  display: block;
  height: auto;
  width: 100%;
}

.sf-warr__film-play {
  background: var(--brand-color-surface, #ffffff);
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 10px rgba(11, 12, 14, 0.36);
  height: 44px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
}

.sf-warr__film-play::after {
  border-bottom: 7px solid transparent;
  border-left: 12px solid var(--brand-color-ink, #17181a);
  border-top: 7px solid transparent;
  content: "";
  left: 50%;
  position: absolute;
  top: 50%;
  /* OPTICAL CENTRING: a right-pointing triangle's visual centre sits left of
   * its box's, so it is nudged right of true centre. */
  transform: translate(-40%, -50%);
}

/* ------------------------------------------------------ the testimonial -- */

/*
 * ITS OWN TINTED BAND, which is the legacy's `--gray-background` with a dark
 * rule above it. Full bleed through the pop-up's inset so it closes the
 * document the way the legacy's does.
 */
.sf-warr__testimonial {
  align-items: flex-start;
  background: var(--brand-color-well, #f1f0ec);
  border-top: 1px solid var(--brand-color-line, #e8e7e3);
  display: flex;
  gap: 26px;
  margin: 40px 0 0;
  padding: 34px 32px;
}

.sf-warr__testimonial-photo {
  border-radius: var(--radius-inner);
  flex: none;
  height: auto;
  width: 224px;
}

.sf-warr__testimonial-body {
  min-width: 0;
}

.sf-warr__stars {
  color: var(--brand-color-accent, #c4530a);
  display: flex;
  gap: 2px;
}

.sf-warr__quote {
  color: var(--brand-color-ink-soft, #44464a);
  font-size: var(--text-body);
  line-height: 1.5;
  margin: 14px 0 0;
}

.sf-warr__signature {
  color: var(--brand-color-ink, #17181a);
  font-size: var(--text-small);
  font-weight: 700;
  line-height: 1.5;
  margin-top: 18px;
  text-align: right;
}

.sf-warr__place,
.sf-warr__recommends {
  color: var(--brand-color-muted, #6c6a62);
  display: block;
  font-weight: 400;
}

.sf-warr__recommends {
  margin-top: 10px;
}

/* -------------------------------------------------------------- a phone -- */

@media (max-width: 767.98px) {
  /*
   * THE PLAYER STANDS DOWN. At 360 of measure a 210px cut-out over a paragraph
   * is not a bleed, it is a collision — and the legacy half-agrees: below 768
   * it keeps the player but gives the copy a 135px inset, which at this width
   * is most of the line. Hiding it is the honest version, and the `alt=""` it
   * already carries says it was never holding meaning.
   */
  .sf-warr__player {
    display: none;
  }

  .sf-warr__intro {
    display: block;
    padding: 26px 20px 24px;
  }

  .sf-warr__seal {
    margin-bottom: 18px;
  }

  .sf-warr__lede {
    padding-right: 0;
  }

  .sf-warr__list-block {
    padding: 0 20px;
  }

  .sf-warr__film {
    margin-top: 30px;
    max-width: 100%;
  }

  .sf-warr__testimonial {
    display: block;
    padding: 28px 20px;
  }

  .sf-warr__testimonial-photo {
    display: block;
    margin: 0 auto 20px;
    max-width: 100%;
  }
}