#fw-section-hero-video-d69b0464-e4ec-428b-a2f6-75dcc6de84b6 {
--color-primary: #4e4ea0;
--color-primary-rgb: 78, 78, 160;
--color-background: #505675;
--color-background-rgb: 80, 86, 117;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #af7aaf;
--color-on-background-rgb: 175, 122, 175;
--color-product-image-background: #af7aaf;
--color-background-brightness: 88;
background-color: var(--color-background);
color: var(--color-on-background);
/* ─────────────────────────────────────────────
   Make the “Sports Clothing” outline button
   look exactly like the filled primary button.
   Works only inside the hero-video block so the
   rest of your store keeps its outline style.
   ──────────────────────────────────────────── */

/* ❶  Fourthwall wraps the banner in an element whose
       id starts with hero-video-… (you can see it in
       the address bar of your screenshot).           */
.button--outline {
  /* same purple fill the primary button uses */
  background-color: var(--color-primary) !important;
  /* remove the faint outline */
  border: none !important;
  /* correct text colour */
  color: var(--color-on-primary) !important;
}

/* ❷  Simple hover/focus state so the button still
       feels clickable. Tweak the 1.07 if you want
       it brighter/darker.                           */
.button--outline:hover,
.button--outline:focus-visible {
  filter: brightness(1.07);
}
}