/* TODO(design-tokens): Primary fill uses primitives directly until new-brand semantic tokens ship — see Button.spec.md */

/* `:where()` zeroes this rule's specificity, so any single-class variant/size/state rule below,
   or a consumer's own override (e.g. Dialog's `.closeButton`), always wins regardless of order. */
:where(.j2KhcD_wwGsKzBaZw5DQ) {
  /*
   * `--pigment-button-loading-duration` is JS-owned: Button.tsx sets it inline (in lockstep with its
   * `LOADING_TRANSITION_MS` constant) on the same element and at the same time as every
   * `.entering`/`.loading`/`.leaving` class below that reads it, so the 9999s literal never
   * actually applies. The absurd value is the point: should a future rule ever read this variable
   * without Button.tsx also setting the inline override, the result is an unmissable multi-hour
   * stall rather than a slightly-off timing that passes a casual look. (`initial` would make
   * `var()` invalid, but for `animation-duration` that fails silently to 0s — the opposite of loud.)
   * `--pigment-button-loading-slide-distance` is CSS-only, so this is its only definition.
   */
  --pigment-button-loading-duration: 9999s;
  --pigment-button-loading-slide-distance: 15px;
  /* TODO(design-tokens): hardcoded minimum tappable height — replace with a themeable token once one exists. */
  --pigment-button-min-tap-height: 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  border: none;
  background-color: transparent;
  font-family: var(--primitives-font-family-sharpSans);
  font-weight: 800;
  text-decoration: none;
  outline: none;
  /* Containing block for ::before/::after/.dots (all position: absolute). Not `contain:
     layout` — that's a WebKit bug: it misaligns inline-flex siblings by a few px inside
     a flex-end row (e.g. DialogCommonActions' 3-button layout). */
  position: relative;
  isolation: isolate; /* keeps ::before's negative z-index scoped to this button */
  box-sizing: border-box;
  white-space: nowrap;
  transition: opacity 100ms ease;
}

/* Background/border/shadow live here so hover/active can "grow" the shape via inset without affecting layout */
.j2KhcD_wwGsKzBaZw5DQ::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-sizing: border-box;
  transition: inset 100ms ease-out, box-shadow 100ms ease, background-color 100ms ease;
}

.j2KhcD_wwGsKzBaZw5DQ:not([aria-disabled='true']):not([aria-busy='true']):active::before {
  transition-duration: 50ms;
}

.j2KhcD_wwGsKzBaZw5DQ[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: 0.3;
}

/*
 * Loading fades less than a plain disabled button, since it's a transient state rather than a
 * non-interactive one. This can't be a plain `transition: opacity`: the phase class and `aria-busy`
 * are both derived from the same JS phase state (see Button.tsx) and so land in one React commit,
 * and a CSS transition doesn't reliably animate a property change bundled with that. @keyframes
 * always animates.
 * `.loading` is a steady state with no timed edge, so it just holds the value the entering keyframe
 * already faded to.
 *
 * Must stay after the `[aria-disabled='true']` rule above. The two are the same specificity (one
 * class plus one attribute, versus two classes), so a button that is both disabled and loading
 * resolves on source order alone, and the transient 0.5 loading fade is the intended winner over
 * disabled's 0.3. Reordering these blocks silently flips that combination to the heavier dim.
 */
.j2KhcD_wwGsKzBaZw5DQ.JHRRmJuArMCcgDsLfFrA {
  animation: caMyQec0D_xsaY2EauD4 var(--pigment-button-loading-duration) ease-in-out forwards;
}

.j2KhcD_wwGsKzBaZw5DQ.lTXHNHzOOOM3nso6BpuL {
  opacity: 0.5;
}

/* The .entering keyframe played backwards */
.j2KhcD_wwGsKzBaZw5DQ.CLDJJba8RM4akkvywIBn {
  animation: caMyQec0D_xsaY2EauD4 var(--pigment-button-loading-duration) ease-in-out reverse forwards;
}

@keyframes caMyQec0D_xsaY2EauD4 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.5;
  }
}

/*
 * `aria-disabled` and `aria-busy` are set independently (see Button.tsx), so both have to be
 * excluded: a loading but not disabled button still blocks clicks via the JS guard, and so must not
 * show pointer/hover/press feedback either. The same double exclusion applies to every other
 * hover/active rule below.
 */
.j2KhcD_wwGsKzBaZw5DQ:not([aria-disabled='true']):not([aria-busy='true']) {
  cursor: pointer;
}

/*
 * Explicit `default`, not `wait`/`progress` (which overstate a single button's transient state) and
 * not left unset: Button is polymorphic, so an unset cursor falls through to the root element's own
 * native default — e.g. a link's pointer-on-hover — silently undoing the "not clickable right now"
 * signal for `component="a"`.
 */
.j2KhcD_wwGsKzBaZw5DQ[aria-busy='true']:not([aria-disabled='true']) {
  cursor: default;
}

/*
 * TODO(design-tokens): interim new-brand focus-visible treatment — a thicker inkyRed-500 ring,
 * not yet backed by an approved semantic token (existing `--activity-focus-*` tokens are the old
 * blue palette). Swap to the real token once it ships.
 */
.j2KhcD_wwGsKzBaZw5DQ:focus-visible {
  outline: 4px solid var(--primitives-color-inkyRed-500);
  outline-offset: 2px;
}

/* Full width */
.IM_7rkH23Zo04v86joEc {
  width: 100%;
}

/*
 * Sizes: `--pigment-button-height` is each size's single source of truth for its own `height` (below)
 * and for the `minWidth="default"` floor (further down), which is derived as a multiple of it.
 */
.SQN9uFzR2ovirk2__EPi {
  --pigment-button-height: 32px;
  height: var(--pigment-button-height);
  padding: 8px 12px;
  gap: 6px;
  font-size: 13px;
  line-height: 16px;
}

/*
 * Invisible hit-area expansion, so every size meets `--pigment-button-min-tap-height` even when its
 * own visible `--pigment-button-height` falls under that floor (currently only `.small`). `max()`-based
 * rather than hardcoded to `.small`, so it keeps working if either value changes — a themed override
 * of the floor, or a size's height. Sizes that already clear the floor get a same-size no-op
 * pseudo-element. Only height is expanded, not width.
 */
.j2KhcD_wwGsKzBaZw5DQ::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: max(var(--pigment-button-height), var(--pigment-button-min-tap-height));
}

.N05WaCJraCzBss8w5UlI {
  --pigment-button-height: 40px;
  height: var(--pigment-button-height);
  padding: 8px 15px;
  gap: 6px;
  font-size: 14px;
  line-height: 18px;
}

.v6RKMbV2A5xQFaebES0f {
  --pigment-button-height: 48px;
  height: var(--pigment-button-height);
  padding: 12px 18px;
  gap: 8px;
  font-size: 16px;
  line-height: 20px;
}

.YnEPsUL5m60YWLOK4d4i {
  --pigment-button-height: 56px;
  height: var(--pigment-button-height);
  padding: 16px 22px;
  gap: 8px;
  font-size: 16px;
  line-height: 20px;
}

/*
 * The mixed units are deliberate and signed off by UX, not an oversight to unify: "default" is
 * relative because its whole job is staying proportional to whatever size the button is, while
 * "wide"/"extraWide" are absolute because Figma specifies them as fixed widths.
 */
.IKKxciaupHX9NWh5fmHg {
  min-width: calc(var(--pigment-button-height) * 2.25);
}

.PHxlDcinZEcQs6s_GvuU {
  min-width: 190px;
}

.IB4WwoZ8IGeOJHkBdCHj {
  min-width: 300px;
}

/*
 * On touch devices a tap satisfies `:hover` too, and without this guard the elevated/tinted hover
 * look gets stuck on the tapped button until the user taps elsewhere — no real pointer ever leaves
 * to clear it. Every hover rule below is gated the same way.
 */
@media (hover: hover) and (pointer: fine) {
  /* Shared elevation shadows for solid-fill variants (Primary, Secondary) */
  .aYJEgkv1nHZsx761dSn3:not([aria-disabled='true']):not([aria-busy='true']):hover::before,
  .UebqfWJFB9LZ6JNfgnSw:not([aria-disabled='true']):not([aria-busy='true']):hover::before {
    inset: -2px;
    box-shadow: 0px 12px 20px 2px rgba(0, 0, 0, 0.08), 0px 8px 16px 0px rgba(0, 0, 0, 0.08);
  }
}

.aYJEgkv1nHZsx761dSn3:not([aria-disabled='true']):not([aria-busy='true']):active::before,
.UebqfWJFB9LZ6JNfgnSw:not([aria-disabled='true']):not([aria-busy='true']):active::before {
  inset: -1px;
  box-shadow: 0px 6px 12px 2px rgba(0, 0, 0, 0.08), 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
}

/* Primary */
.aYJEgkv1nHZsx761dSn3 {
  color: var(--interactive-text-onFill);
}

.aYJEgkv1nHZsx761dSn3::before {
  background-color: var(--primitives-color-charcoal-900);
}

.aYJEgkv1nHZsx761dSn3.LKjl9yfhuURRSWcASSzd {
  color: var(--neutral-text-primary);
}

.aYJEgkv1nHZsx761dSn3.LKjl9yfhuURRSWcASSzd::before {
  background-color: var(--neutral-background-primary);
}

/* Secondary */
.UebqfWJFB9LZ6JNfgnSw {
  color: var(--neutral-text-primary);
}

.UebqfWJFB9LZ6JNfgnSw::before {
  background-color: transparent;
  border: 2px solid var(--primitives-color-charcoal-900);
}

.UebqfWJFB9LZ6JNfgnSw.LKjl9yfhuURRSWcASSzd {
  color: var(--neutral-text-primaryOnFill);
}

/* Only border-color differs when inverse; hover/pressed reuse the shared shadow/inset rule above */
.UebqfWJFB9LZ6JNfgnSw.LKjl9yfhuURRSWcASSzd::before {
  border-color: var(--interactive-border-strongOnFill);
}

/* Tertiary — no border/shadow, just a subtle dark-tint overlay */
.oyN6Pv78Rx_o6PK006Wk {
  color: var(--neutral-text-primary);
}

.oyN6Pv78Rx_o6PK006Wk::before {
  background-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .oyN6Pv78Rx_o6PK006Wk:not([aria-disabled='true']):not([aria-busy='true']):hover::before {
    inset: -2px;
    background-color: rgba(0, 0, 0, 0.05);
  }
}

.oyN6Pv78Rx_o6PK006Wk:not([aria-disabled='true']):not([aria-busy='true']):active::before {
  inset: -1px;
  background-color: rgba(0, 0, 0, 0.1);
}

/*
 * Overrides the base `::before` transition (100ms, tuned for hover/press feedback) so the tint's
 * fade is paced by the same duration as the button's opacity dim. Left at 100ms, the tint finishes
 * changing color well before the parent's opacity settles and the two animations visibly desync.
 */
.oyN6Pv78Rx_o6PK006Wk.JHRRmJuArMCcgDsLfFrA::before,
.oyN6Pv78Rx_o6PK006Wk.CLDJJba8RM4akkvywIBn::before {
  transition: inset 100ms ease-out, box-shadow 100ms ease,
    background-color var(--pigment-button-loading-duration) ease-in-out;
}

.oyN6Pv78Rx_o6PK006Wk.JHRRmJuArMCcgDsLfFrA::before,
.oyN6Pv78Rx_o6PK006Wk.lTXHNHzOOOM3nso6BpuL::before {
  background-color: rgba(0, 0, 0, 0.1);
}

/* Leaving is the reverse of entering, so it fades back to the resting value, not the loading tint. */
.oyN6Pv78Rx_o6PK006Wk.CLDJJba8RM4akkvywIBn::before {
  background-color: transparent;
}

.oyN6Pv78Rx_o6PK006Wk.LKjl9yfhuURRSWcASSzd {
  color: var(--neutral-text-primaryOnFill);
}

@media (hover: hover) and (pointer: fine) {
  .oyN6Pv78Rx_o6PK006Wk.LKjl9yfhuURRSWcASSzd:not([aria-disabled='true']):not([aria-busy='true']):hover::before {
    background-color: rgba(255, 255, 255, 0.08);
  }
}

.oyN6Pv78Rx_o6PK006Wk.LKjl9yfhuURRSWcASSzd:not([aria-disabled='true']):not([aria-busy='true']):active::before {
  background-color: rgba(255, 255, 255, 0.14);
}

.oyN6Pv78Rx_o6PK006Wk.LKjl9yfhuURRSWcASSzd.JHRRmJuArMCcgDsLfFrA::before,
.oyN6Pv78Rx_o6PK006Wk.LKjl9yfhuURRSWcASSzd.CLDJJba8RM4akkvywIBn::before {
  transition: inset 100ms ease-out, box-shadow 100ms ease,
    background-color var(--pigment-button-loading-duration) ease-in-out;
}

.oyN6Pv78Rx_o6PK006Wk.LKjl9yfhuURRSWcASSzd.JHRRmJuArMCcgDsLfFrA::before,
.oyN6Pv78Rx_o6PK006Wk.LKjl9yfhuURRSWcASSzd.lTXHNHzOOOM3nso6BpuL::before {
  background-color: rgba(255, 255, 255, 0.15);
}

/* Fades back to the resting value — see the non-inverse rule above. */
.oyN6Pv78Rx_o6PK006Wk.LKjl9yfhuURRSWcASSzd.CLDJJba8RM4akkvywIBn::before {
  background-color: transparent;
}

/* Nudges text down to correct for Sharp Sans's ascent/descent not being visually centered within its line box */
.Vr43abaqGKfVl7kbVMJT {
  transform: translateY(0.49px);
}

/* Negative margin offsets whitespace baked into each icon's own artwork */
.w9bDxVDTnkxfemjYh7EK {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: inherit;
}

.w9bDxVDTnkxfemjYh7EK > svg {
  width: 100%;
  height: 100%;
}

.SQN9uFzR2ovirk2__EPi .w9bDxVDTnkxfemjYh7EK {
  width: 18px;
  height: 18px;
  margin-left: -2px;
  margin-right: -2px;
}

.N05WaCJraCzBss8w5UlI .w9bDxVDTnkxfemjYh7EK {
  width: 20px;
  height: 20px;
  margin-left: -2px;
  margin-right: -2px;
}

.v6RKMbV2A5xQFaebES0f .w9bDxVDTnkxfemjYh7EK,
.YnEPsUL5m60YWLOK4d4i .w9bDxVDTnkxfemjYh7EK {
  width: 24px;
  height: 24px;
  margin-left: -3px;
  margin-right: -3px;
}

/*
 * Square, with the negative-margin icon compensation dropped: that compensation exists to align an
 * icon against an adjacent label, and there is no label here. A pill radius on an equal-width/height
 * box already renders as a circle, so no radius override is needed. Must stay after the size/icon
 * rules above, since these same-specificity overrides win the cascade tie-break on source order.
 */
.QBohZqQeV_rcFrVynjEC {
  width: var(--pigment-button-height);
  padding: 0;
}

.QBohZqQeV_rcFrVynjEC .w9bDxVDTnkxfemjYh7EK {
  margin-left: 0;
  margin-right: 0;
}

/*
 * A text Button's width is content-driven and never needs a floor, so the base `.button::after` rule
 * only floors height. An iconOnly button is square, so the floor extends to width too, centered on
 * both axes. Must stay after `.button::after` to win the same-specificity tie-break.
 */
.QBohZqQeV_rcFrVynjEC::after {
  left: 50%;
  right: auto;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max(var(--pigment-button-height), var(--pigment-button-min-tap-height));
}

/*
 * .content (label + icons) stays in normal flow even while fully hidden, so it keeps driving the
 * button's width; .dots is an absolutely-positioned overlay, mounted only while busy (see
 * Button.tsx) since it has no layout role to preserve.
 *
 * Whichever layer is going away always slides left and whichever is appearing always slides in from
 * the right, both on the same duration and easing, like two sides of one rotating drum — only the
 * opacity direction differs. Each phase's start/end values line up with the adjacent phase's while
 * the element is at opacity 0, so the instant position resets never produce a visible jump.
 */
@keyframes Qxvf_BbNc7EXpPVn_DHN {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(calc(-1 * var(--pigment-button-loading-slide-distance)));
  }
}

@keyframes vsDLTabieMX102LgK3K4 {
  from {
    opacity: 0;
    transform: translateX(var(--pigment-button-loading-slide-distance));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.KSw6jokuVICc_khin61g {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transform: translateX(0);
}

.SQN9uFzR2ovirk2__EPi .KSw6jokuVICc_khin61g,
.N05WaCJraCzBss8w5UlI .KSw6jokuVICc_khin61g {
  gap: 6px;
}

.v6RKMbV2A5xQFaebES0f .KSw6jokuVICc_khin61g,
.YnEPsUL5m60YWLOK4d4i .KSw6jokuVICc_khin61g {
  gap: 8px;
}

.vD3y_2PLcFxpJPTxpJvm {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(var(--pigment-button-loading-slide-distance));
  pointer-events: none;
}

.SQN9uFzR2ovirk2__EPi .vD3y_2PLcFxpJPTxpJvm,
.N05WaCJraCzBss8w5UlI .vD3y_2PLcFxpJPTxpJvm {
  gap: 4px;
}

.v6RKMbV2A5xQFaebES0f .vD3y_2PLcFxpJPTxpJvm,
.YnEPsUL5m60YWLOK4d4i .vD3y_2PLcFxpJPTxpJvm {
  gap: 5px;
}

/* Entering: content exits left, dots enter from the right — same slide timing, opposite fade */
.JHRRmJuArMCcgDsLfFrA .KSw6jokuVICc_khin61g {
  pointer-events: none;
  animation: Qxvf_BbNc7EXpPVn_DHN var(--pigment-button-loading-duration) ease-in-out forwards;
}

.JHRRmJuArMCcgDsLfFrA .vD3y_2PLcFxpJPTxpJvm {
  animation: vsDLTabieMX102LgK3K4 var(--pigment-button-loading-duration) ease-in-out forwards;
}

/*
 * Steady loading: content stays hidden/out of the way, dots stay shown. Deliberately opacity-only
 * (not `visibility: hidden`, which would additionally strip this text from the accessibility tree)
 * so the button keeps a stable accessible name throughout — see Button.tsx. The tradeoff is that
 * this (invisible) text stays selectable during the loading state, which is considered a minor risk.
 */
.lTXHNHzOOOM3nso6BpuL .KSw6jokuVICc_khin61g {
  opacity: 0;
  transform: translateX(calc(-1 * var(--pigment-button-loading-slide-distance)));
  pointer-events: none;
}

.lTXHNHzOOOM3nso6BpuL .vD3y_2PLcFxpJPTxpJvm {
  opacity: 1;
  transform: translateX(0);
}

/* Leaving: dots (currently shown) exit left, content enters from the right — same slide timing, opposite fade */
.CLDJJba8RM4akkvywIBn .vD3y_2PLcFxpJPTxpJvm {
  pointer-events: none;
  animation: Qxvf_BbNc7EXpPVn_DHN var(--pigment-button-loading-duration) ease-in-out forwards;
}

.CLDJJba8RM4akkvywIBn .KSw6jokuVICc_khin61g {
  visibility: visible;
  animation: vsDLTabieMX102LgK3K4 var(--pigment-button-loading-duration) ease-in-out forwards;
}

@keyframes PtnO0btDT0qDy7h_cqCQ {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
    opacity: 0.8;
    filter: blur(0.5px);
  }
}

.seCaeYSK7XdpE5UJnBEt {
  border-radius: 50%;
  background-color: currentColor;
  animation: PtnO0btDT0qDy7h_cqCQ 1.1s ease-in-out infinite;
}

.SQN9uFzR2ovirk2__EPi .seCaeYSK7XdpE5UJnBEt,
.N05WaCJraCzBss8w5UlI .seCaeYSK7XdpE5UJnBEt {
  width: 5px;
  height: 5px;
}

.v6RKMbV2A5xQFaebES0f .seCaeYSK7XdpE5UJnBEt,
.YnEPsUL5m60YWLOK4d4i .seCaeYSK7XdpE5UJnBEt {
  width: 6px;
  height: 6px;
}

.seCaeYSK7XdpE5UJnBEt:nth-child(2) {
  animation-delay: 150ms;
}

.seCaeYSK7XdpE5UJnBEt:nth-child(3) {
  animation-delay: 300ms;
}

/* ─── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .j2KhcD_wwGsKzBaZw5DQ,
  .j2KhcD_wwGsKzBaZw5DQ::before,
  .j2KhcD_wwGsKzBaZw5DQ.JHRRmJuArMCcgDsLfFrA,
  .j2KhcD_wwGsKzBaZw5DQ.CLDJJba8RM4akkvywIBn,
  .JHRRmJuArMCcgDsLfFrA .KSw6jokuVICc_khin61g,
  .JHRRmJuArMCcgDsLfFrA .vD3y_2PLcFxpJPTxpJvm,
  .CLDJJba8RM4akkvywIBn .KSw6jokuVICc_khin61g,
  .CLDJJba8RM4akkvywIBn .vD3y_2PLcFxpJPTxpJvm,
  .seCaeYSK7XdpE5UJnBEt {
    transition: none;
    animation: none;
  }
}

.jf5uebFBNBIXAxCNZPBj{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(0,0,0,.11);border-radius:12px;overflow:hidden;font-family:"Sharp Sans",Helvetica,Arial,"Trebuchet MS",sans-serif;color:rgba(0,0,0,.86)}@media(min-width: 700px){.jf5uebFBNBIXAxCNZPBj{flex-direction:row;border-radius:16px}}.jf5uebFBNBIXAxCNZPBj .SV4kBXB_3Kw5P8ma4sDI{display:flex;align-items:center;width:100%;aspect-ratio:319/216;background:#d0d8e4}@media(min-width: 700px){.jf5uebFBNBIXAxCNZPBj .SV4kBXB_3Kw5P8ma4sDI{flex:0 0 40%;width:auto;aspect-ratio:auto}}@media(min-width: 1300px){.jf5uebFBNBIXAxCNZPBj .SV4kBXB_3Kw5P8ma4sDI{flex:0 0 41%}}.jf5uebFBNBIXAxCNZPBj .uw0uExOnrLLHyXUW5vSR{display:block;width:100%;height:auto}.jf5uebFBNBIXAxCNZPBj .Qwsfc6gENpiax_kB_rXe{display:flex;flex-direction:column;gap:12px;padding:16px 16px 20px}@media(min-width: 700px){.jf5uebFBNBIXAxCNZPBj .Qwsfc6gENpiax_kB_rXe{padding:32px 24px 40px 32px}}@media(min-width: 1300px){.jf5uebFBNBIXAxCNZPBj .Qwsfc6gENpiax_kB_rXe{padding:40px 24px 85px 48px}}.jf5uebFBNBIXAxCNZPBj .vBDWvRo6fifQbPdwhzca{padding:0;margin:0;font-weight:700;font-size:20px;line-height:1.25}@media(min-width: 700px){.jf5uebFBNBIXAxCNZPBj .vBDWvRo6fifQbPdwhzca{font-size:24px}}@media(min-width: 1300px){.jf5uebFBNBIXAxCNZPBj .vBDWvRo6fifQbPdwhzca{font-size:28px}}.jf5uebFBNBIXAxCNZPBj .ZNPqKOA1MM5unrISaREE{margin:0;font-weight:500;font-size:14px;line-height:1.5}@media(min-width: 700px){.jf5uebFBNBIXAxCNZPBj .ZNPqKOA1MM5unrISaREE{font-size:16px}}.jf5uebFBNBIXAxCNZPBj .GwJeD1vCGVgZsgMauwYC{align-self:flex-start;font-weight:800}.jf5uebFBNBIXAxCNZPBj .GwJeD1vCGVgZsgMauwYC:hover,.jf5uebFBNBIXAxCNZPBj .GwJeD1vCGVgZsgMauwYC:focus,.jf5uebFBNBIXAxCNZPBj .GwJeD1vCGVgZsgMauwYC:active{color:#fff;text-decoration:none}@media(min-width: 700px){.jf5uebFBNBIXAxCNZPBj .GwJeD1vCGVgZsgMauwYC{--pigment-button-height: 48px;height:48px;padding:12px 18px;margin-top:12px;font-size:16px;line-height:20px}}@media(min-width: 1300px){.jf5uebFBNBIXAxCNZPBj .GwJeD1vCGVgZsgMauwYC{margin-top:20px}}@media(min-width: 700px){.jf5uebFBNBIXAxCNZPBj .GwJeD1vCGVgZsgMauwYC>span:first-child{gap:8px}}@media(min-width: 700px){.jf5uebFBNBIXAxCNZPBj .GwJeD1vCGVgZsgMauwYC>span:first-child>span:last-child{width:24px;height:24px;margin:0 -3px}}
.bgSaPnwWL385qX2BYR1b {
  margin: 2.5rem 0;
}

.IkSdq6rBtbj5wgIhKZMn {
  position: relative;
  overflow: hidden;
}

.PJtS1bjPTuyRaYQykzsg button {
  background-color: var(--neutral-background-primary);
  border-color: transparent;
}

@container category-promo-banner (min-width: 700px) and (max-width: 1023.98px) {
  .PJtS1bjPTuyRaYQykzsg h3 {
    font-size: 20px;
  }
}