/* Policy marquee, design 2 — icon + text scrolling (home-cosmetic.html
 * ~1561 "infiniteSlide-policy style-2"). Measured on the bought template at
 * 1440px, and unchanged at every other width — this block has no @media
 * rule of its own in styles.css; re-measured at 1440/1024/768/390 in the
 * browser, band 1440x68 / 1024x68 / 768x68 / 390x68 on both sides:
 *   .infiniteSlide-policy { padding-top: 23px; padding-bottom: 23px;
 *     border-top/bottom: 1px solid var(--line); } — no .container ancestor
 *     in the page (it sits directly between the hero slider and the next
 *     section), i.e. genuinely edge to edge, so the section sets
 *     --mt-content-width: none and --mt-content-gutter: 0 (see the .jinja)
 *     instead of leaving the usual 1440px/15px cap. The 23px is the band's
 *     OWN padding — it sits on the same bordered box as the border itself,
 *     giving a 23px gap between the hairline and the text — not an outer
 *     section gap: the template has no extra space before/after this strip
 *     at all, it touches the sections above and below directly. So the
 *     fixed 23px lives on .amer-policy-marquee__band with the border, and
 *     the section's own --mt-space-top/-bottom (the merchant's padding_top
 *     / padding_bottom setting) default to 0: an untouched merchant adds no
 *     extra gap, matching the template; one who wants breathing room around
 *     the strip can add it via that setting.
 *   .style-2 only removes the (non-style-2) edge fade mask — plain here.
 *   .infiniteSlide-wrapper > * { margin-left/right: 16px; } on every direct
 *     child (icon, then its text, alternating) — a uniform 32px gap
 *     between every element, icon-to-its-text and text-to-next-icon alike;
 *     measured 32.0 / 32.0 / 32.1 across the template's strip. Our markup
 *     groups icon+text as one "chip" per message instead of two flat
 *     siblings, so the same 32px is set once as --amer-policy-marquee-gap
 *     and the shared sheet spends it in all three places that have to read
 *     the same: inside the chip, between chips, and after the last chip of
 *     each looping copy (the loop seam).
 *   Icon (icon-Lightning-1) has no colour/size rule anywhere in
 *     styles.css, so it inherits the body's 16px and var(--text) — measured
 *     16x16, rgb(16,16,16); text (text-caption-02 12px/16px, lh-20 → 20px
 *     !important, fw-semibold → 600, text-uppercase) has no colour rule
 *     either — measured 12px/20px/600/uppercase, rgb(16,16,16), and our
 *     text box comes out 265.4px against the template's 265.7px on the same
 *     string. Both map to --amer-heading (the template's --text, #101010 by
 *     default). */
.mt-section.amer-policy-marquee--d2 {
  padding-block: var(--mt-space-top, 0px) var(--mt-space-bottom, 0px);
}
@media (max-width: 767px) {
  .mt-section.amer-policy-marquee--d2 {
    padding-block: var(--mt-space-top-mobile, var(--mt-space-top, 0px)) var(--mt-space-bottom-mobile, var(--mt-space-bottom, 0px));
  }
}
.amer-policy-marquee--d2 {
  --amer-policy-marquee-gap: 32px;
}
.amer-policy-marquee--d2 .amer-policy-marquee__band {
  padding-block: 23px;
  border-block: 1px solid var(--amer-line);
}
.amer-policy-marquee--d2 .amer-policy-marquee__item {
  color: var(--amer-heading);
}
.amer-policy-marquee--d2 .amer-policy-marquee__icon {
  font-size: 16px;
}
.amer-policy-marquee--d2 .amer-policy-marquee__icon-img {
  inline-size: 16px;
  block-size: 16px;
}
.amer-policy-marquee--d2 .amer-policy-marquee__text {
  font-size: 12px;
  line-height: 20px;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}