/** Shopify CDN: Minification failed

Line 2065:0 Unexpected "}"

**/
/* Bad Earl — brand layer (tokens live in base.css :root) */

body {
  background-color: var(--be-black);
  color: var(--be-white);
  overflow-x: hidden;
}

/* ---------- Section-edge light streams ----------
   Drawn on one fixed canvas by be-lightstream.js. Sits under the sticky
   header (z-index 3) so it never covers navigation. */
#MainContent {
  position: relative;
}

/* ---------- First-visit intro overlay ----------
   Hidden unless the snippet's inline script opts this visit in, so returning
   visitors get no flash and no video download. */
/* Everything except display lives on the element itself, so the state classes
   below are never outranked by a longer selector. */
.be-intro {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Above the sticky header, lightstream, and sticky add-to-cart. */
  z-index: 1000;
  background: #000;
  opacity: 1;
  isolation: isolate;
  overflow: hidden;
  transition: opacity var(--be-intro-fade, 1s) ease;
}

html.be-intro-active .be-intro {
  display: block;
}

.be-intro.is-done {
  opacity: 0;
  pointer-events: none;
}

html.be-intro-lock,
html.be-intro-lock body {
  overflow: hidden;
}

/* Children carry explicit z-index: a video paints in its own compositing
   layer and will otherwise sit over plain siblings. */
.be-intro__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: translateZ(0);
}

/* Dark gradient from the window edges. Drawn as ::after so it cannot
   collapse to 0×0, and translated so it shares the video's layer model. */
.be-intro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transform: translateZ(0);
  opacity: var(--be-intro-vignette, 1);
  background:
    radial-gradient(
      ellipse 64% 60% at 50% 48%,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0) 48%,
      rgba(0, 0, 0, 0.42) 78%,
      rgba(0, 0, 0, 0.88) 100%
    ),
    linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.65) 10%, rgba(0, 0, 0, 0) 26%),
    linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0.65) 10%, rgba(0, 0, 0, 0) 26%),
    linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.55) 10%, rgba(0, 0, 0, 0) 24%),
    linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.65) 12%, rgba(0, 0, 0, 0) 28%);
}

.be-intro__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: #000;
  opacity: 0;
  transform: translateZ(0);
  transition: opacity var(--be-intro-fade, 1s) linear;
}

.be-intro.is-fading .be-intro__veil {
  opacity: 1;
}

.be-intro__skip {
  position: absolute;
  z-index: 3;
  right: max(1.6rem, env(safe-area-inset-right));
  bottom: max(1.6rem, env(safe-area-inset-bottom));
  min-height: 4.4rem;
  padding: 1rem 1.8rem;
  border: 0.1rem solid rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-family: inherit;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.be-intro__skip:hover {
  background: var(--be-red);
  border-color: transparent;
}

.be-intro__skip:focus-visible {
  outline: 0.2rem solid #fff;
  outline-offset: 0.3rem;
}

.be-lightstream-canvas {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

@media screen and (max-width: 1099px) {
  .be-lightstream-canvas {
    display: none;
  }
}

/* ---------- Smooth scrolling (Lenis) ---------- */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* ---------- Scroll reveal ----------
   Extends Dawn's .scroll-trigger system with a longer, further travel.
   The extra .be-reveal class outweighs Dawn's three-class selectors. */
@media (prefers-reduced-motion: no-preference) {
  .be-reveal.scroll-trigger.animate--slide-in {
    opacity: 0.01;
    transform: translateY(3.2rem);
  }

  .be-reveal.scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in {
    animation: beSlideIn 850ms cubic-bezier(0.16, 0.84, 0.28, 1) forwards;
    animation-delay: calc(var(--animation-order, 0) * 90ms);
  }

  @keyframes beSlideIn {
    from {
      opacity: 0.01;
      transform: translateY(3.2rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* ---------- Announcement bar (homepage Section 1) ---------- */
.announcement-bar-section .utility-bar {
  border-bottom: 0.3rem solid var(--be-red);
}

.announcement-bar__message {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 1.2rem;
  line-height: 1.3;
  padding: 1.1rem 1.2rem;
  min-height: 4.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 750px) {
  .announcement-bar__message {
    font-size: 1.3rem;
    letter-spacing: 0.14em;
  }
}

.announcement-bar__link {
  width: 100%;
  min-height: 4.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.announcement-bar__link:hover {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.announcement-bar__link:focus-visible {
  outline: 0.2rem solid var(--be-red);
  outline-offset: -0.4rem;
}

/* Focus — high-contrast, always visible */
:focus-visible {
  outline: 0.2rem solid var(--be-red);
  outline-offset: 0.3rem;
}

.button:focus-visible,
.shopify-payment-button__button--unbranded:focus-visible {
  outline: 0.2rem solid var(--be-blue);
  outline-offset: 0.3rem;
  box-shadow: 0 0 0 0.3rem var(--be-white), 0 0 0 0.5rem rgba(var(--be-red-rgb), 0.55);
}

/* Links lean brand red */
a.link,
.link {
  color: var(--be-red);
}

a.link:hover,
.link:hover {
  color: var(--be-blue);
}

/* One content column for full-width homepage modules */
.be-campaign__layout.page-width,
.be-wild__shell.page-width,
.be-featured .page-width,
.be-categories .page-width,
.be-statement__rail.page-width {
  max-width: min(var(--page-width), 104rem);
  margin-left: auto;
  margin-right: auto;
}

.be-newsletter__shell.page-width {
  max-width: min(var(--page-width), 76rem);
  margin-left: auto;
  margin-right: auto;
}

.be-origin__inner.page-width,
.be-definition__inner.page-width,
.be-story__inner.page-width,
.be-faq .page-width {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Hero ---------- */
.be-hero {
  position: relative;
  display: grid;
  color: var(--be-white);
  background: var(--be-black);
  overflow: hidden;
}

.be-hero--contain {
  min-height: 0;
}

.be-hero--contain .be-hero__media {
  position: relative;
  grid-area: 1 / 1;
  z-index: 0;
}

.be-hero--contain .be-hero__media img,
.be-hero--contain .be-hero__media video,
.be-hero--contain .be-hero__media iframe {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  display: block;
}

.be-hero--contain .be-hero__overlay,
.be-hero--contain .be-hero__content {
  grid-area: 1 / 1;
}

.be-hero--cover .be-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.be-hero--cover {
  --be-hero-height: min(100svh, 920px);
  min-height: var(--be-hero-height);
  height: var(--be-hero-height);
}

.be-hero--cover .be-hero__media img,
.be-hero--cover .be-hero__media video,
.be-hero--cover .be-hero__media iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 80% center;
  display: block;
}

/* ---------- Hero intro clip ----------
   These three layers live inside .be-hero__media, which is its own stacking
   context, so they stay under the overlay and the wordmark. The clip plays
   once over the still, the veil takes it to black, then the veil clears and
   the still is what remains. */
.be-hero--contain .be-hero__media .be-hero__intro,
.be-hero--cover .be-hero__media .be-hero__intro {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  transition: opacity 0.2s linear;
}

.be-hero.is-intro-done .be-hero__intro {
  opacity: 0;
}

/* Dark gradient drawn in from the edges towards the centre. */
.be-hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: var(--be-hero-vignette, 0.7);
  background:
    radial-gradient(
      ellipse 76% 70% at 50% 46%,
      transparent 38%,
      rgba(0, 0, 0, 0.42) 72%,
      rgba(0, 0, 0, 0.88) 100%
    ),
    linear-gradient(to top, rgba(0, 0, 0, 0.72) 0, transparent 40%);
}

.be-hero__fade {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: var(--be-black);
  opacity: 0;
  transition: opacity var(--be-hero-fade, 1.2s) linear;
}

.be-hero.is-intro-fading .be-hero__fade {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .be-hero__intro {
    display: none;
  }
}

.be-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.35;
  background: linear-gradient(
    90deg,
    rgba(var(--be-black-rgb), 0.55) 0%,
    rgba(var(--be-black-rgb), 0.18) 46%,
    rgba(var(--be-black-rgb), 0.04) 100%
  );
}

.be-hero__overlay--texture {
  background-image: var(--be-overlay-image),
    linear-gradient(
      180deg,
      rgba(var(--be-black-rgb), 0.25) 0%,
      rgba(var(--be-blue-rgb), 0.4) 55%,
      rgba(var(--be-black-rgb), 0.75) 100%
    );
  background-size: cover;
  background-position: center;
  mix-blend-mode: multiply;
  opacity: var(--be-overlay-opacity, 0.55);
}

.be-hero--cover .be-hero__content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: max(1.5rem, calc((100vw - var(--page-width)) / 2 + 1.5rem));
  right: auto;
  z-index: 2;
  width: min(52rem, calc(100% - 3rem));
  max-width: 52rem;
  margin: 0;
}

.be-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left;
  gap: 1.6rem;
  padding: 5rem 1.5rem 6rem;
  max-width: 90rem;
  margin: 0 auto 0 0;
  width: 100%;
  align-self: stretch;
}

@media screen and (max-width: 749px) {
  .be-hero--cover .be-hero__media img,
  .be-hero--cover .be-hero__media video,
  .be-hero--cover .be-hero__media iframe {
    object-position: 88% center;
  }

  .be-hero__overlay {
    background: linear-gradient(
      180deg,
      rgba(var(--be-black-rgb), 0.12) 0%,
      rgba(var(--be-black-rgb), 0.28) 40%,
      rgba(var(--be-black-rgb), 0.72) 100%
    );
  }
}

@media screen and (min-width: 750px) {
  .be-hero__content {
    padding: 7rem 5rem 7rem;
    gap: 2rem;
    max-width: 58rem;
  }

  .be-hero--cover .be-hero__content {
    width: min(58rem, calc(100% - 10rem));
    max-width: 58rem;
    left: max(5rem, calc((100vw - var(--page-width)) / 2 + 5rem));
    padding-left: 0;
    padding-right: 5rem;
    padding-bottom: 7rem;
  }
}

.be-hero__heading {
  margin: 0;
  color: var(--be-white);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 0.95;
  text-shadow: 0 2px 24px rgba(var(--be-black-rgb), 0.5);
  font-size: clamp(4.2rem, 10vmin, 9.6rem);
}

/* Branded wordmark — condensed italic mark like hero graphic */
.be-wordmark {
  margin: 0;
  font-family: var(--font-heading-family), 'Arial Narrow', sans-serif;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.18em;
  white-space: nowrap;
}

.be-wordmark__line {
  display: inline-block;
  font-size: clamp(4.8rem, 12vmin, 11rem);
  -webkit-text-stroke: 0.1rem var(--be-white);
  paint-order: stroke fill;
  /* 2-floor shadow: fixed px so scale stays consistent on all screens */
  text-shadow: 3px 3px 0 var(--be-white), 6px 6px 0 #8a8a8a;
}

.be-wordmark__line--bad {
  color: var(--be-red);
}

.be-wordmark__line--earl {
  color: var(--be-blue2);
}

.be-hero__wordmark {
  max-width: min(100%, 52rem);
}

@media screen and (max-width: 749px) {
  .be-wordmark__line {
    font-size: clamp(4rem, 14vw, 6.4rem);
    -webkit-text-stroke: 0.07rem var(--be-white);
    text-shadow: 2px 2px 0 var(--be-white), 4px 4px 0 #8a8a8a;
  }
}

.be-hero__subheading {
  margin: 0;
  max-width: 40rem;
  color: var(--be-bone);
  font-size: 1.6rem;
  line-height: 1.45;
  letter-spacing: 0.02em;
}

.be-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
  justify-content: flex-start;
}

.be-hero__actions .button {
  min-height: 4.8rem;
  min-width: 16rem;
}

.be-hero .button {
  background-color: var(--be-red);
  color: var(--be-white);
  --color-button: var(--be-red-rgb);
  --color-button-text: var(--be-white-rgb);
}

.be-hero .button:hover {
  background-color: var(--be-blue2);
  --color-button: var(--be-blue2-rgb);
}

.be-hero .be-hero__button--secondary {
  background-color: transparent;
  color: var(--be-white);
  --color-button: var(--be-white-rgb);
  --color-button-text: var(--be-white-rgb);
  --alpha-button-background: 0;
  box-shadow: inset 0 0 0 0.2rem var(--be-white);
}

.be-hero .be-hero__button--secondary:hover {
  background-color: var(--be-white);
  color: var(--be-black);
  --color-button-text: var(--be-black-rgb);
}

/* ---------- What Is Bad Earl (definition) ---------- */
.be-definition {
  position: relative;
  background: var(--be-black);
  color: var(--be-white);
  overflow: hidden;
}

.be-definition__accent {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
}

.be-definition__accent img,
.be-definition__accent-img {
  width: min(92vw, 72rem);
  max-height: 92%;
  height: auto;
  object-fit: contain;
  object-position: center;
  display: block;
  opacity: var(--be-definition-accent-opacity, 0.3);
}

.be-definition__inner {
  position: relative;
  z-index: 1;
  max-width: 64rem;
  margin: 0 auto;
  text-align: center;
}

.be-definition__eyebrow {
  margin: 0 0 1.8rem;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--be-red);
}

.be-definition__heading {
  margin: 0;
  color: var(--be-white);
  letter-spacing: 0.08em;
  line-height: 0.92;
  text-transform: uppercase;
}

.be-definition__meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1.4rem 0 0;
  font-size: 1.25rem;
  font-style: italic;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: rgba(var(--be-white-rgb), 0.62);
}

.be-definition__bleep {
  display: inline-block;
  width: 4.8rem;
  height: 0.9rem;
  background: var(--be-red);
}

.be-definition__body {
  margin: 2.4rem auto 0;
  max-width: 46rem;
  font-size: clamp(1.8rem, 2.2vw, 2.3rem);
  line-height: 1.4;
  color: var(--be-bone);
}

.be-definition__body p {
  margin: 0;
}

.be-definition__supporting {
  margin: 1.4rem auto 0;
  max-width: 40rem;
  font-size: 1.5rem;
  line-height: 1.5;
  color: rgba(var(--be-white-rgb), 0.7);
}

.be-definition__mantra {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem 0;
  margin: 2.8rem 0 0;
  padding: 1.8rem 0 0;
  border-top: 0.1rem solid rgba(var(--be-white-rgb), 0.16);
}

.be-definition__mantra li {
  padding: 0 1.6rem;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--be-white);
}

@media screen and (min-width: 750px) {
  .be-definition__mantra li + li {
    border-left: 0.1rem solid rgba(var(--be-white-rgb), 0.22);
  }
}

.be-definition .button {
  margin-top: 2.8rem;
  min-height: 4.8rem;
}

/* ---------- Shop by category ---------- */
.be-categories {
  background: var(--be-black);
}

.be-categories__header {
  margin-bottom: 2rem;
}

.be-categories__title {
  margin: 0;
  color: var(--be-white);
}

.be-categories__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}

@media screen and (min-width: 750px) {
  .be-categories__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.6rem;
  }
}

.be-categories__card {
  display: block;
  position: relative;
  color: var(--be-white);
  text-decoration: none;
  overflow: hidden;
  background: var(--be-black);
  min-height: 28rem;
}

@media screen and (min-width: 750px) {
  .be-categories__card {
    min-height: 36rem;
  }
}

.be-categories__media {
  position: absolute;
  inset: 0;
}

.be-categories__media img,
.be-categories__media svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}

.be-categories__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 30%, rgba(var(--be-black-rgb), 0.82));
}

.be-categories__label {
  position: absolute;
  left: 1.6rem;
  right: 1.6rem;
  bottom: 1.6rem;
  z-index: 1;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .be-categories__card:hover .be-categories__media img {
    transform: scale(1.06);
  }
}

.be-categories__card:focus-visible {
  outline: 0.2rem solid var(--be-red);
  outline-offset: 0.3rem;
}

/* ---------- Brand origin ---------- */
.be-origin__inner {
  max-width: 72rem;
  margin: 0 auto;
}

.be-origin__inner--split {
  display: grid;
  gap: 2.4rem;
  align-items: center;
}

@media screen and (min-width: 750px) {
  .be-origin__inner--split {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

.be-origin__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}

.be-origin__eyebrow {
  margin: 0 0 1rem;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--be-red);
}

.be-origin__heading {
  margin: 0 0 1.4rem;
}

.be-origin__text {
  margin: 0 0 2rem;
  font-size: 1.55rem;
  line-height: 1.5;
}

/* ---------- Premium brand accent (dark surfaces only) ---------- */
.be-accent {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: var(--be-accent-opacity, 0.22);
}

.be-accent img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: var(--be-accent-position, right bottom);
}

.be-accent--corner-br {
  right: -1%;
  bottom: -6%;
  width: min(42vw, 440px);
  height: min(34vw, 340px);
  --be-accent-position: right bottom;
}

@media screen and (max-width: 749px) {
  .be-accent--corner-br {
    right: -4%;
    bottom: -4%;
    width: min(58vw, 260px);
    height: min(46vw, 210px);
    opacity: calc(var(--be-accent-opacity, 0.22) * 0.72);
  }
}

/* ---------- Campaign (Stop the Cuss manifesto) ---------- */
.be-campaign {
  position: relative;
  background: var(--be-black);
  color: var(--be-white);
  overflow: hidden;
}

.be-campaign__layout {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media screen and (min-width: 750px) {
  .be-campaign__layout {
    min-height: 54rem;
  }
}

.be-campaign__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

@media screen and (min-width: 750px) {
  .be-campaign__copy {
    max-width: 54rem;
  }
}

/* Model shot. Contain keeps the full figure — cover was clipping head and
   shoes. Empty section padding is handled separately, not by cropping him. */
.be-campaign__visual {
  position: relative;
  order: 2;
  z-index: 0;
  margin-top: 3.2rem;
  height: 40rem;
  pointer-events: none;
}

.be-campaign__visual-img,
.be-campaign__visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  display: block;
  opacity: var(--be-campaign-graphic-opacity, 1);
}

@media screen and (min-width: 750px) {
  .be-campaign__visual {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    right: 0;
    height: auto;
    margin-top: 0;
  }

  .be-campaign__visual-img,
  .be-campaign__visual img {
    object-position: bottom right;
  }
}

.be-campaign__eyebrow {
  margin: 0 0 2rem;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--be-red);
}

.be-campaign__heading {
  margin: 0;
  color: var(--be-white);
  font-size: clamp(3.6rem, 8vmin, 7.2rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.02;
  text-transform: uppercase;
}

.be-campaign__line {
  display: block;
}

/* Censor mark, not a control: an angular impact plate slammed into the
   headline. Sharp asymmetric corners rather than soft scallops, so it reads
   as struck metal instead of a balloon. The clip sits on the inner span and
   the shadow on the outer one, because drop-shadow follows the clipped
   silhouette while box-shadow would be clipped away with it. */
.be-campaign__bleep {
  display: inline-block;
  position: relative;
  top: -0.28em;
  left: -0.14em;
  color: var(--be-white);
  margin: 0 0.04em 0 0.06em;
  font-size: 0.8em;
  font-weight: 900;
  letter-spacing: 0.1em;
  transform: rotate(-2.4deg);
  vertical-align: middle;
  filter:
    drop-shadow(0.07em 0.07em 0 rgba(var(--be-black-rgb), 0.9))
    drop-shadow(0.15em 0.16em 0 rgba(var(--be-blue2-rgb), 0.6));
}

.be-campaign__bleep-text {
  display: block;
  padding: 0.16em 0.5em 0.2em 0.56em;
  /* Top sheen over a lit-to-shadowed red gives the plate thickness. */
  background-image:
    linear-gradient(180deg, rgba(var(--be-white-rgb), 0.32) 0, rgba(var(--be-white-rgb), 0) 34%),
    linear-gradient(178deg, #ea1740 0, var(--be-red) 48%, #8d0b20 100%);
  transform: skewX(-6deg);
  clip-path: polygon(3% 11%, 14% 0%, 97% 5%, 100% 68%, 88% 100%, 6% 94%, 0% 40%);
}

/* Sparks knocked loose on impact. */
.be-campaign__bleep::before,
.be-campaign__bleep::after {
  content: '';
  position: absolute;
  background: var(--be-red);
}

.be-campaign__bleep::before {
  top: -0.2em;
  right: -0.12em;
  width: 0.36em;
  height: 0.28em;
  clip-path: polygon(0% 100%, 100% 0%, 58% 94%);
  transform: rotate(9deg);
}

.be-campaign__bleep::after {
  bottom: -0.22em;
  left: -0.1em;
  width: 0.28em;
  height: 0.24em;
  clip-path: polygon(0% 0%, 100% 62%, 22% 100%);
  transform: rotate(-12deg);
}

.be-campaign__text {
  margin: 2.4rem 0 0;
  max-width: 46rem;
  color: var(--be-bone);
  font-size: 1.65rem;
  line-height: 1.5;
}

.be-campaign__points {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 0;
  margin: 2.8rem 0 0;
  padding: 1.8rem 0 0;
  border-top: 0.1rem solid rgba(var(--be-white-rgb), 0.16);
  width: 100%;
  max-width: 52rem;
}

.be-campaign__points li {
  padding: 0 1.6rem 0 0;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--be-white);
}

@media screen and (min-width: 750px) {
  .be-campaign__points li + li {
    padding-left: 1.6rem;
    border-left: 0.1rem solid rgba(var(--be-white-rgb), 0.22);
  }
}

.be-campaign .button {
  margin-top: 2.8rem;
  min-height: 4.8rem;
  background: var(--be-red);
  color: var(--be-white);
  --color-button: var(--be-red-rgb);
  --color-button-text: var(--be-white-rgb);
}

.be-campaign .button:hover {
  background-color: var(--be-blue2);
  --color-button: var(--be-blue2-rgb);
}

/* ---------- Brand statement (manifesto type) ---------- */
.be-statement {
  position: relative;
  background: var(--be-blue);
  color: var(--be-white);
}

/* Two columns on the same page-width as IN THE WILD: copy left, top-half
   crop of the still on the right. Height follows the photo, not a vw band. */
.be-statement--photo {
  background: #111;
}

.be-statement__rail {
  position: relative;
  z-index: 2;
  width: 100%;
}

.be-statement--photo .be-statement__rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 2.4rem;
}

@media screen and (min-width: 750px) {
  .be-statement--photo .be-statement__rail {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4rem;
  }
}

.be-statement__copy {
  min-width: 0;
}

.be-statement__media {
  position: relative;
  z-index: 0;
  width: 100%;
  aspect-ratio: 1122 / 701;
  overflow: hidden;
  pointer-events: none;
  justify-self: stretch;
}

.be-statement__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.be-statement__overlay {
  display: none;
}

.be-statement__line {
  margin: 0;
  color: var(--be-white);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 0.95;
}

.be-statement__line--1 {
  font-size: clamp(3.2rem, 6vmin, 5.4rem);
}

.be-statement__line--2 {
  margin-top: 0.3rem;
  font-size: clamp(3.2rem, 6vmin, 5.4rem);
  color: var(--be-bone);
}

.be-statement__line--3 {
  margin-top: 0.3rem;
  font-size: clamp(3.2rem, 6vmin, 5.4rem);
  color: var(--be-red);
}

.be-statement__footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 0.1rem solid rgba(var(--be-white-rgb), 0.25);
}

.be-statement__text {
  margin: 0;
  color: var(--be-bone);
  font-size: clamp(1.6rem, 1.8vw, 2rem);
}

.be-statement__link {
  color: var(--be-white);
  font-size: clamp(1.5rem, 1.6vw, 1.8rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 0.2rem solid var(--be-red);
  padding-bottom: 0.2rem;
}

.be-statement__link:hover {
  color: var(--be-red);
}

/* ---------- FAQ ---------- */
.be-faq {
  background: var(--be-black);
}

.be-faq__title {
  margin: 0 0 2rem;
  text-align: center;
  color: var(--be-white);
}

.be-faq__lede {
  max-width: 64rem;
  margin: 0 auto 2.4rem;
  text-align: center;
  color: var(--be-bone);
  font-size: 1.6rem;
  line-height: 1.5;
}

.be-faq__list {
  max-width: 72rem;
  margin: 0 auto;
  display: grid;
  gap: 0.8rem;
}

.be-faq details {
  background: rgba(var(--be-white-rgb), 0.04);
  border: 0.1rem solid rgba(var(--be-white-rgb), 0.12);
  padding: 0 1.4rem;
}

.be-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.4rem 0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--be-white);
}

.be-faq summary::-webkit-details-marker {
  display: none;
}

.be-faq__answer {
  padding: 0 0 1.4rem;
  color: var(--be-bone);
  font-size: 1.5rem;
  line-height: 1.5;
}

/* ---------- In the Wild (premium clip grid) ---------- */
.be-wild {
  background: var(--be-black);
}

.be-wild__header {
  margin-bottom: 2.8rem;
}

.be-wild__eyebrow {
  margin: 0 0 1rem;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--be-red);
}

.be-wild__header-row {
  display: grid;
  gap: 0.8rem;
}

@media screen and (min-width: 750px) {
  .be-wild__header-row {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 32rem);
    gap: 2.4rem;
    align-items: end;
  }
}

.be-wild__title {
  margin: 0;
  color: var(--be-white);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.be-wild__subheading {
  margin: 0;
  color: var(--be-bone);
  font-size: 1.5rem;
  line-height: 1.45;
}

@media screen and (min-width: 750px) {
  .be-wild__subheading {
    text-align: right;
    max-width: 32rem;
    margin-left: auto;
  }
}

.be-wild__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media screen and (min-width: 750px) {
  .be-wild__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.4rem;
  }

  .be-wild__grid--count-1,
  .be-wild__grid--count-2,
  .be-wild__grid--count-3,
  .be-wild__grid--count-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .be-wild__grid--count-1 {
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: 1fr;
  }

  .be-wild__grid--count-2 {
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .be-wild__grid--count-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.be-wild__card {
  position: relative;
  background: var(--be-black);
  overflow: hidden;
}

.be-wild__card--poster .be-wild__media {
  background:
    linear-gradient(180deg, rgba(var(--be-black-rgb), 0.15) 0%, rgba(var(--be-black-rgb), 0.55) 100%),
    linear-gradient(145deg, #1a1a1a 0%, #0a3161 58%, #111111 100%);
}

.be-wild__poster-mark,
.be-wild__icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 1;
  color: rgba(var(--be-white-rgb), 0.88);
}

.be-wild__icon svg {
  width: min(42%, 7.2rem);
  height: auto;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));
}

.be-wild__link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.be-wild__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: linear-gradient(160deg, #1a1a1a, #0a3161);
}

.be-wild__media img,
.be-wild__media video,
.be-wild__media iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
  transition: transform 0.45s ease;
}

.be-wild__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 45%, rgba(var(--be-black-rgb), 0.78));
  pointer-events: none;
}

.be-wild__play {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  z-index: 1;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(var(--be-white-rgb), 0.92);
  color: var(--be-black);
}

.be-wild__cta {
  position: absolute;
  left: 1.2rem;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.6rem;
  padding: 0.6rem 1rem;
  background: var(--be-red);
  color: var(--be-white);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}

.be-wild__cta-icon {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  color: currentColor;
}

.be-wild__cta-icon .be-wild__icon {
  position: static;
  display: block;
  inset: auto;
}

.be-wild__cta-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  filter: none;
}

.be-wild__card--poster .be-wild__cta {
  background: rgba(var(--be-black-rgb), 0.72);
  box-shadow: inset 0 0 0 0.1rem rgba(var(--be-white-rgb), 0.18);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .be-wild__card:hover .be-wild__media img,
  .be-wild__card:hover .be-wild__media video {
    transform: scale(1.05);
  }

  .be-wild__card:hover .be-wild__cta {
    background: var(--be-blue2);
  }

  .be-wild__card--poster:hover .be-wild__cta {
    background: var(--be-red);
    box-shadow: none;
  }
}

.be-wild__empty {
  margin-top: 2.4rem;
  padding: 3.2rem 2rem;
  border: 0.1rem solid rgba(var(--be-white-rgb), 0.12);
  text-align: center;
}

.be-wild__empty-kicker {
  margin: 0 0 0.8rem;
  color: var(--be-red);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.be-wild__empty-text {
  margin: 0 auto;
  max-width: 42rem;
  color: rgba(var(--be-white-rgb), 0.78);
  font-size: 1.5rem;
  line-height: 1.5;
}

.be-categories__card--static {
  cursor: default;
}

.be-categories__card--static:hover .be-categories__media img {
  transform: none;
}

/* ---------- Featured collection ---------- */
.be-featured {
  background: var(--be-black);
  padding: 3.2rem 0 4rem;
}

.be-featured__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}

.be-featured__title {
  margin: 0;
  color: var(--be-white);
}

.be-featured .link,
.be-featured .underlined-link {
  color: var(--be-bone);
}

.be-featured .link:hover,
.be-featured .underlined-link:hover {
  color: var(--be-red);
}

.be-featured__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem 1rem;
}

@media screen and (min-width: 990px) {
  .be-featured__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem 1.6rem;
  }
}

.be-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.be-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--be-bone);
}

.be-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.be-card__media .be-card__img--secondary {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .be-card:hover .be-card__img--secondary {
    opacity: 1;
  }

  .be-card:hover .be-card__img--primary {
    transform: scale(1.03);
  }
}

.be-card__title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.25;
}

.be-card__title a {
  color: var(--be-white);
  text-decoration: none;
}

.be-card__title a:hover {
  color: var(--be-red);
}

.be-card__price {
  color: var(--be-white);
  font-weight: 700;
  font-size: 1.45rem;
}

.be-card__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.be-card__swatch {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 0.1rem solid rgba(var(--be-white-rgb), 0.35);
  background: var(--be-swatch, var(--be-bone));
}

.be-card__swatch--more {
  font-size: 1rem;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--be-bone);
}

/* ---------- Brand story ---------- */
.be-story {
  position: relative;
  background: var(--be-blue);
  color: var(--be-white);
  padding: 4rem 0;
  overflow: hidden;
}

.be-story::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -12deg,
    transparent,
    transparent 18px,
    rgba(var(--be-white-rgb), 0.03) 18px,
    rgba(var(--be-white-rgb), 0.03) 20px
  );
  pointer-events: none;
}

.be-story__inner {
  position: relative;
  z-index: 1;
  max-width: 64rem;
  margin: 0 auto;
  text-align: center;
}

.be-story__eyebrow {
  display: inline-block;
  margin-bottom: 1.2rem;
  padding: 0.4rem 1.2rem;
  background: var(--be-black);
  color: var(--be-white);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  position: relative;
}

.be-story__eyebrow::before,
.be-story__eyebrow::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 2.4rem;
  height: 0.55rem;
  background: var(--be-red);
  transform: translateY(-50%);
}

.be-story__eyebrow::before {
  left: -3.2rem;
}

.be-story__eyebrow::after {
  right: -3.2rem;
}

.be-story__heading {
  margin: 0 0 1.6rem;
  color: var(--be-white);
}

.be-story__definition {
  margin: 0 0 1.6rem;
  font-size: 1.6rem;
  line-height: 1.5;
  color: var(--be-bone);
}

.be-story__mission {
  margin: 0 0 2rem;
  font-size: 1.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--be-white);
}

.be-story__flag {
  display: flex;
  height: 0.6rem;
  width: min(100%, 28rem);
  margin: 0 auto 2rem;
  overflow: hidden;
}

.be-story__flag span {
  flex: 1;
}

.be-story__flag span:nth-child(1) {
  background: var(--be-red);
}

.be-story__flag span:nth-child(2) {
  background: var(--be-white);
}

.be-story__flag span:nth-child(3) {
  background: var(--be-blue2);
}

.be-story .button {
  background: var(--be-red);
  color: var(--be-white);
  --color-button: var(--be-red-rgb);
  --color-button-text: var(--be-white-rgb);
}

/* ---------- Newsletter (centered CTA) ---------- */
.be-newsletter {
  background: var(--be-bone);
  color: var(--be-black);
}

.be-newsletter__shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.6rem;
}

.be-newsletter__heading {
  margin: 0;
  color: var(--be-blue);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.be-newsletter__text {
  margin: 0;
  max-width: 42rem;
  color: rgba(var(--be-black-rgb), 0.72);
  font-size: 1.5rem;
  line-height: 1.45;
}

.be-newsletter__text p {
  margin: 0;
}

.be-newsletter__perks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem 1.6rem;
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
  color: rgba(var(--be-black-rgb), 0.72);
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.be-newsletter__panel {
  width: 100%;
}

.be-newsletter__form {
  width: 100%;
}

.be-newsletter__fields {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.8rem;
  width: 100%;
}

@media screen and (min-width: 750px) {
  .be-newsletter__fields,
  .be-newsletter__fields--with-sms {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    gap: 0.8rem;
  }
}

.be-newsletter__field {
  min-width: 0;
  flex: 1 1 auto;
}

.be-newsletter__input {
  display: block;
  width: 100%;
  min-height: 5.2rem;
  padding: 0 1.6rem;
  border: 0.1rem solid var(--be-black);
  border-radius: 0;
  background: var(--be-white);
  color: var(--be-black);
  font-size: 1.5rem;
  text-align: center;
  appearance: none;
}

.be-newsletter__input::placeholder {
  color: rgba(var(--be-black-rgb), 0.45);
}

.be-newsletter__input:focus {
  outline: 0.2rem solid var(--be-red);
  outline-offset: 0.2rem;
}

.be-newsletter__submit {
  flex: 0 0 auto;
  width: 100%;
  min-height: 5.2rem;
  min-width: 14rem;
  padding: 0 2.4rem;
  background: var(--be-red);
  color: var(--be-white);
  --color-button: var(--be-red-rgb);
  --color-button-text: var(--be-white-rgb);
  letter-spacing: 0.1em;
}

@media screen and (min-width: 750px) {
  .be-newsletter__submit {
    width: auto;
  }
}

.be-newsletter .button:hover {
  background-color: var(--be-blue);
  --color-button: var(--be-blue-rgb);
}

.be-newsletter__note {
  margin: 0.4rem 0 0;
  max-width: 48rem;
  font-size: 1.2rem;
  line-height: 1.5;
  color: rgba(var(--be-black-rgb), 0.48);
}

.be-newsletter__success {
  margin: 0;
  color: var(--be-blue);
  font-weight: 700;
  font-size: 1.6rem;
}

.be-newsletter .form__message {
  color: var(--be-red);
  text-align: center;
  margin-bottom: 1rem;
}

/* ---------- Footer brand accents ---------- */
.footer {
  border-top: 0.4rem solid var(--be-red);
}

.footer .list-social__link:hover {
  color: var(--be-red);
}

.footer__copyright a,
.policies a {
  color: inherit;
}

.footer__copyright a:hover,
.policies a:hover {
  color: var(--be-red);
}

.footer .footer-block__details-content a {
  text-decoration: none;
}

.footer .footer-block__details-content a:hover {
  color: var(--be-red);
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

/* ---------- Sticky ATC (mobile) ---------- */
.be-sticky-atc {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: none;
  padding: 1rem 1.2rem calc(1rem + env(safe-area-inset-bottom));
  background: rgba(var(--be-white-rgb), 0.96);
  border-top: 0.2rem solid var(--be-red);
  box-shadow: 0 -4px 24px rgba(var(--be-black-rgb), 0.12);
  transform: translateY(110%);
  transition: transform 0.25s ease;
}

.be-sticky-atc.is-visible {
  transform: translateY(0);
}

@media screen and (max-width: 749px) {
  .be-sticky-atc {
    display: block;
  }

  body:has(.be-sticky-atc.is-visible) {
    padding-bottom: 7.5rem;
  }
}

.be-sticky-atc__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.be-sticky-atc__meta {
  flex: 1;
  min-width: 0;
}

.be-sticky-atc__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--be-black);
}

.be-sticky-atc__price {
  margin: 0.2rem 0 0;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--be-blue);
}

.be-sticky-atc__button {
  flex-shrink: 0;
  min-width: 12rem;
  background: var(--be-red) !important;
  color: var(--be-white) !important;
}

.be-sticky-atc__button[disabled] {
  opacity: 0.55;
}

.be-product-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
}

.be-product-trust a {
  color: inherit;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.28rem;
}

.be-product-trust a:hover {
  color: var(--be-red);
}

.be-policy__heading {
  margin: 0 0 1.6rem;
}

.be-cart-policies {
  margin: 1.2rem 0 0;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.be-cart-policies a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.28rem;
}

.be-search-empty {
  margin-top: 1.6rem;
  text-align: center;
}
}

/* ---------- Size guide trigger ---------- */
.be-size-guide-trigger {
  margin: 0.4rem 0 1.2rem;
}

.be-size-guide-trigger .product-popup-modal__button {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--be-blue);
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.be-size-guide-trigger .product-popup-modal__button:hover {
  color: var(--be-red);
}

.product-popup-modal__content-info {
  color: var(--be-black);
}

.product-popup-modal__content-info .h2 {
  color: var(--be-blue);
}

/* Product / collection / cart — same content measure as homepage */
.product.grid,
.collection .page-width,
.cart-items,
.main-page-title,
.search .template-search__header {
  max-width: var(--page-width);
}

@media screen and (min-width: 990px) {
  .product--large:not(.product--no-media) .product__media-wrapper {
    max-width: 56%;
    width: calc(56% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .product--large:not(.product--no-media) .product__info-wrapper {
    max-width: 44%;
    width: calc(44% - var(--grid-desktop-horizontal-spacing) / 2);
  }
}

.footer__content-top.page-width,
.footer__content-bottom.page-width {
  max-width: var(--page-width);
}

/* Collection grid already 2/4 via settings — brand polish */
.collection .card__heading {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: reduce) {
  .be-sticky-atc,
  .be-card__media .be-card__img--secondary {
    transition: none;
  }
}