/** Shopify CDN: Minification failed

Line 588:14 Expected identifier but found bad string token
Line 588:15 Unterminated string token

**/
.card-wrapper {
  color: inherit;
  height: 100%;
  position: relative;
  text-decoration: none;
}

.card {
  text-decoration: none;
  text-align: var(--text-alignment);
}

.card:not(.ratio) {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card.card--horizontal {
  --text-alignment: left;
  --image-padding: 0rem;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.5rem;
}

.card--horizontal.ratio:before {
  padding-bottom: 0;
}

.card--card.card--horizontal {
  padding: 1.2rem;
}

.card--card.card--horizontal.card--text {
  column-gap: 0;
}

.card--card {
  height: 100%;
}

.card--card,
.card--standard .card__inner {
  position: relative;
  box-sizing: border-box;
  border-radius: var(--border-radius);
  border: var(--border-width) solid rgba(var(--color-foreground), var(--border-opacity));
}

.card--card:after,
.card--standard .card__inner:after {
  content: '';
  position: absolute;
  z-index: -1;
  width: calc(var(--border-width) * 2 + 100%);
  height: calc(var(--border-width) * 2 + 100%);
  top: calc(var(--border-width) * -1);
  left: calc(var(--border-width) * -1);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
    rgba(var(--color-shadow), var(--shadow-opacity));
}

/* Needed for gradient continuity with or without animation, the transform scopes the gradient to its container which happens already when animation are turned on */
.card--card.gradient,
.card__inner.gradient {
  transform: perspective(0);
}

/* Needed for gradient continuity with or without animation so that transparent PNG images come up as we would expect */
.card__inner.color-scheme-1 {
  background: transparent;
}

.card .card__inner .card__media {
  overflow: visible;
  /* Fix for Safari border bug on hover */
  z-index: 0;
  border-radius: calc(var(--border-radius) - var(--border-width) - var(--image-padding));
}

.card--card .card__inner .card__media {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.card--standard.card--text {
  background-color: transparent;
}

.card-information {
  text-align: var(--text-alignment);
}

.card__media,
.card .media {
  bottom: 0;
  position: absolute;
  top: 0;
}

.card .media {
  width: 100%;
  border-radius: calc(var(--border-radius) - var(--border-width) - var(--image-padding));
}

.card__media {
  margin: var(--image-padding);
  width: calc(100% - 2 * var(--image-padding));
}

.card--standard .card__media {
  margin: var(--image-padding);
}

.card__inner {
  width: 100%;
}

.card--media .card__inner .card__content {
  position: relative;
  padding: calc(var(--image-padding) + 1rem);
}

.card__content {
  display: grid;
  grid-template-rows: minmax(0, 1fr) max-content minmax(0, 1fr);
  padding: 1rem;
  width: 100%;
  flex-grow: 1;
}

.card__content--auto-margins {
  grid-template-rows: minmax(0, auto) max-content minmax(0, auto);
}

.card__information {
  grid-row-start: 2;
  padding: 1.3rem 1rem;
}

.card:not(.ratio) > .card__content {
  grid-template-rows: max-content minmax(0, 1fr) max-content auto;
}

.card-information .card__information-volume-pricing-note {
  margin-top: 0.6rem;
  line-height: calc(0.5 + 0.4 / var(--font-body-scale));
  color: rgba(var(--color-foreground), 0.75);
}

.card__information-volume-pricing-note--button,
.card__information-volume-pricing-note--button.quantity-popover__info-button--icon-with-label {
  position: relative;
  z-index: 1;
  cursor: pointer;
  padding: 0;
  margin: 0;
  text-align: var(--text-alignment);
  min-width: auto;
}

.card__information-volume-pricing-note--button:hover {
  text-decoration: underline;
}

.card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info {
  transform: initial;
  top: auto;
  bottom: 4rem;
  max-width: 20rem;
  width: calc(95% + 2rem);
}

.card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info span:first-of-type {
  padding-right: 0.3rem;
}

.card__information-volume-pricing-note--button-right + .global-settings-popup.quantity-popover__info {
  right: 0;
  left: auto;
}

.card__information-volume-pricing-note--button-center + .global-settings-popup.quantity-popover__info {
  left: 50%;
  transform: translate(-50%);
}

.card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info .quantity__rules {
  text-align: left;
}

@media screen and (min-width: 990px) {
  .grid--6-col-desktop .card__content quick-add-bulk .quantity {
    width: auto;
  }

  .grid--6-col-desktop .card__content quick-add-bulk .quantity__button {
    width: calc(3rem / var(--font-body-scale));
  }

  .grid--6-col-desktop .card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info {
    left: 50%;
    transform: translate(-50%);
    width: calc(100% + var(--border-width) + 3.5rem);
  }

  .grid--6-col-desktop
    .card--standard
    .card__information-volume-pricing-note--button
    + .global-settings-popup.quantity-popover__info {
    width: calc(100% + var(--border-width) + 1rem);
  }
}

@media screen and (max-width: 749px) {
  .grid--2-col-tablet-down .card__content quick-add-bulk .quantity__button {
    width: calc(3.5rem / var(--font-body-scale));
  }

  .grid--2-col-tablet-down
    .card--card
    .card__information-volume-pricing-note--button
    + .global-settings-popup.quantity-popover__info,
  .grid--2-col-tablet-down
    .card--standard
    .card__information-volume-pricing-note--button
    + .global-settings-popup.quantity-popover__info {
    left: 50%;
    transform: translate(-50%);
  }

  .grid--2-col-tablet-down
    .card--standard
    .card__information-volume-pricing-note--button
    + .global-settings-popup.quantity-popover__info {
    width: 100%;
  }

  .grid--2-col-tablet-down
    .card--card
    .card__information-volume-pricing-note--button
    + .global-settings-popup.quantity-popover__info {
    width: calc(100% + var(--border-width) + 4rem);
  }

  .grid--2-col-tablet-down .card__content quick-add-bulk .quantity {
    width: auto;
  }
}

.card-information quantity-popover volume-pricing {
  margin-top: 0;
}

@media screen and (max-width: 989px) {
  .card-information quantity-popover .quantity__rules ~ volume-pricing {
    margin-top: 0;
  }

  .card-information quantity-popover volume-pricing {
    margin-top: 4.2rem;
  }
}

@media screen and (min-width: 750px) {
  .card__information {
    padding-bottom: 1.7rem;
    padding-top: 1.7rem;
  }
}

.card__badge {
  align-self: flex-end;
  grid-row-start: 3;
  justify-self: flex-start;
}

.card__badge.top {
  display: inline-block;
  align-self: flex-start;
  grid-row-start: 1;
}

.card__badge.right {
  justify-self: flex-end;
}

.card:not(.card--horizontal) > .card__content > .card__badge {
  margin: 1.3rem;
}

.card__media .media img {
  height: 100%;
  object-fit: cover;
  object-position: center center;
  width: 100%;
}

.card__inner:not(.ratio) > .card__content {
  height: 100%;
}

.card__heading {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: var(--weight-bold);
}

.card__heading:last-child {
  margin-bottom: 0;
}

.card--horizontal .card__heading,
.card--horizontal .price__container .price-item,
.card--horizontal__quick-add {
  font-size: calc(var(--font-heading-scale) * 1.2rem);
}

.card--horizontal
  .card-information
  > *:not(.visually-hidden:first-child)
  + *:not(.rating):not(.card__information-volume-pricing-note) {
  margin-top: 0;
}

.card--horizontal__quick-add:before {
  box-shadow: none;
}

@media only screen and (min-width: 750px) {
  .card--horizontal .card__heading,
  .card--horizontal .price__container .price-item,
  .card--horizontal__quick-add {
    font-size: calc(var(--font-heading-scale) * 1.3rem);
  }
}

.card--card.card--media > .card__content {
  margin-top: calc(0rem - var(--image-padding));
}

.card--standard.card--text a::after,
.card--card .card__heading a::after {
  bottom: calc(var(--border-width) * -1);
  left: calc(var(--border-width) * -1);
  right: calc(var(--border-width) * -1);
  top: calc(var(--border-width) * -1);
}

.card__heading a::after {
  bottom: 0;
  content: '';
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.card__heading a:after {
  outline-offset: 0.3rem;
}

.card__heading a:focus:after {
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
}

.card__heading a:focus-visible:after {
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
}

.card__heading a:focus:not(:focus-visible):after {
  box-shadow: none;
  outline: 0;
}

.card__heading a:focus {
  box-shadow: none;
  outline: 0;
}

.card--standard.card--media .card__inner .card__information,
.card--standard.card--text:not(.card--horizontal) > .card__content .card__heading:not(.card__heading--placeholder),
.card--standard:not(.card--horizontal) > .card__content .card__badge,
.card--standard.card--text.article-card > .card__content .card__information,
.card--standard > .card__content .card__caption {
  display: none;
}

.card--standard:not(.card--horizontal) .placeholder-svg {
  width: 100%;
}

.card--standard > .card__content {
  padding: 0;
}

.card--standard > .card__content .card__information {
  padding-left: 0;
  padding-right: 0;
}

.card--card.card--media .card__inner .card__information,
.card--card.card--text .card__inner,
.card--card.card--media > .card__content .card__badge {
  display: none;
}

.card--horizontal .card__badge,
.card--horizontal.card--text .card__inner {
  display: none;
}

.card--extend-height {
  height: 100%;
}

.card--extend-height.card--standard.card--text,
.card--extend-height.card--media {
  display: flex;
  flex-direction: column;
}

.card--extend-height.card--standard.card--text .card__inner,
.card--extend-height.card--media .card__inner {
  flex-grow: 1;
}

.card .icon-wrap {
  margin-left: 0.8rem;
  white-space: nowrap;
  transition: transform var(--duration-short) ease;
  overflow: hidden;
}

.card-information > * + * {
  margin-top: 0.5rem;
}

.card-information {
  width: 100%;
}

.card-information > * {
  line-height: calc(1 + 0.4 / var(--font-body-scale));
  color: rgb(var(--color-foreground));
}

.card-information > .price {
  color: rgb(var(--color-foreground));
}

.card--horizontal .card-information > .price {
  color: rgba(var(--color-foreground), 0.75);
}

.card-information > .rating {
  margin-top: 0.4rem;
}

/* Specificity needed due to the changes below */
.card-information
  > *:not(.visually-hidden:first-child)
  + quantity-popover:not(.rating):not(.card__information-volume-pricing-note),
.card-information .card__information-volume-pricing-note.card__information-volume-pricing-note--button {
  margin-top: 0;
}

.card-information > *:not(.visually-hidden:first-child) + *:not(.rating):not(.card__information-volume-pricing-note) {
  margin-top: 0;
}

.card-information .caption {
  letter-spacing: 0.07rem;
}

.card-article-info {
  margin-top: 1rem;
}

/* Card Shapes */

.card--shape .card__content {
  padding-top: 0;
}

.card--shape.card--standard:not(.card--text) .card__inner {
  border: 0;
  /* Border is not currently compatible with image shapes for standard cards. */
  background-color: transparent;
  filter: drop-shadow(
    var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
      rgba(var(--color-shadow), var(--shadow-opacity))
  );
}

.card--shape.card--standard:not(.card--text) .card__inner:after {
  display: none;
}

.grid__item:nth-child(2n) .shape--blob {
  clip-path: polygon(var(--shape--blob-2));
}

.grid__item:nth-child(3n) .shape--blob {
  clip-path: polygon(var(--shape--blob-3));
}

.grid__item:nth-child(4n) .shape--blob {
  clip-path: polygon(var(--shape--blob-4));
}

.grid__item:nth-child(5n) .shape--blob {
  clip-path: polygon(var(--shape--blob-5));
}

.grid__item:nth-child(7n) .shape--blob {
  clip-path: polygon(var(--shape--blob-6));
}

.grid__item:nth-child(8n) .shape--blob {
  clip-path: polygon(var(--shape--blob-1));
}

/* Card Shape Hover Rules */

@media (prefers-reduced-motion: no-preference) {
  .product-card-wrapper .shape--round {
    transition: clip-path var(--duration-long) ease;
  }

  .product-card-wrapper:hover .shape--round {
    clip-path: ellipse(47% 47% at 50% 50%);
  }

  .product-card-wrapper .shape--blob {
    transition: clip-path var(--duration-long) ease-in-out;
  }

  .product-card-wrapper:hover .shape--blob {
    clip-path: polygon(var(--shape--blob-5));
  }

  .grid__item:nth-child(2n) .product-card-wrapper:hover .shape--blob {
    clip-path: polygon(var(--shape--blob-6));
  }

  .grid__item:nth-child(3n) .product-card-wrapper:hover .shape--blob {
    clip-path: polygon(var(--shape--blob-1));
  }

  .grid__item:nth-child(4n) .product-card-wrapper:hover .shape--blob {
    clip-path: polygon(var(--shape--blob-2));
  }

  .grid__item:nth-child(5n) .product-card-wrapper:hover .shape--blob {
    clip-path: polygon(var(--shape--blob-3));
  }

  .grid__item:nth-child(7n) .product-card-wrapper:hover .shape--blob {
    clip-path: polygon(var(--shape--blob-4));
  }

  .grid__item:nth-child(8n) .product-card-wrapper:hover .shape--blob {
    clip-path: polygon(var(--shape--blob-5));
  }
}

.card__heading {
  font-size: 18px;
  text-transform: uppercase;
}

.featured-badge {
  position: absolute;
  width: 100px;
  top: -14px;
  left: -14px;"
}

.featured-badge img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 749px) {
  .card__heading {
    font-size: 16px;
  }
  
  .featured-badge {
    width: 70px;
    top: -10px;
    left: -10px;
  }
}

.featured-product-wrapper {
    position: relative; /* Allows you to position the image within the wrapper */
    /* Define a thin gradient border overlay */
    border: 4px solid transparent;
    border-image: linear-gradient(110deg, #881177, #cc6666, #eedd00, #44dd88, #00bbcc, #663399) 1; /* Adjust the colors and direction as needed */
    box-sizing: border-box; /* Include border in width/height */
}

/* variant names */
.variant-name {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.06rem;
}

/* background image positions */
.card__inner {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

/* Extra Card */
.extra-card-wrapper {
  position: relative;
  height: 100%;
}

.extra-card-content {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.extra-card--media {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.extra-card-content .media img {
  border-radius: 0;
}

.extra-card--inner {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.extra-card-image {
  padding: 1rem 1rem 0;
}

.extra-card--inner a:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.extra-card-buttons {
  flex-grow: 1;
  margin: 0 0 1rem;
  display: flex;
  align-items: flex-end;
}

@media (max-width: 749px) {
  .content-mobile-left {
    text-align: left;
  }
  .content-mobile-center {
    text-align: center;
  }
  .content-mobile-right {
    text-align: right;
  }

  .extra-card-wrapper .button {
    padding: 0 1rem;
  }
}

/*----- Default Collection Product Card -----*/ 

.collection-grid--premium .product-card-wrapper { 
  background-color: #E2E2E2; 
  color: #000;  
  border-radius: 1rem; 
  overflow: hidden;
}

/* The wrapper rounds and clips the card at 10px. Dawn's inner card radius
   only showed as rounded bottom corners on full-bleed hover media. */
.collection-grid--premium .product-card-wrapper .card__inner,
.collection-grid--premium .product-card-wrapper .card__media,
.collection-grid--premium .product-card-wrapper .card__media .media {
  border-radius: 0;
}

.collection-grid--premium .product-card-wrapper .card__inner {
  background-color: #E2E2E2; 
  color: #000; 
}

.collection-grid--premium .product-card-wrapper .card__information, 
.collection-grid--premium .product-card-wrapper .full-unstyled-link { 
  color: #000; 
} 

.collection-grid--premium .product-card-wrapper .card-information > .price, 
.collection-grid--premium .product-card-wrapper .price__regular .price-item--regular { 
  color: #00000099; 
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.4rem; 
  letter-spacing: -0.04em; 
} 
 
.collection-grid--premium .product-card-wrapper .card__information { 
  padding: 2rem;
  display: flex; 
  flex-flow: column nowrap;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 0.5rem; 
}

.collection-grid--premium .product-card-wrapper .card__heading { 
  font-weight: var(--weight-heavy); 
  font-size: 1.6rem; 
  letter-spacing: -0.01em; 
  margin-right: 30px;
}

.collection-grid--premium .product-card-wrapper .card__badge, 
.collection-grid--premium .product-card-wrapper .card__badge span { 
  display: block; 
}

.collection-grid--premium .product-card-wrapper .card__badge.top.left {
  position: absolute;
  top: calc(20px - calc(var(--image-padding) + 1rem));
  left: 20px;
}

/* Keep every card layer (+ button, badges) inside the grid's own stacking
   context, so the facets loading overlay (z-index 2) covers all of it. */
.collection-grid--premium .product-grid {
  isolation: isolate;
}

/* Plus-style quick-add button on collection product cards.
   Mirrors .cst-card__quick-add from collection-slider-tabs.css so the
   collection grid matches the slider sections. Pinned to the card edge. */
.collection-grid--premium .product-card-wrapper .card__quick-add-plus-wrap {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 3;
  margin: 0;
  padding: 0;
  max-width: none;
}

.collection-grid--premium .product-card-wrapper .card__quick-add-plus-form {
  display: block;
  margin: 0;
  padding: 0;
}

.collection-grid--premium .card__quick-add-plus {
  display: flex;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 0;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: #000;
  background: #fff;
  border: none;
  border-radius: 4px;
  box-shadow: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.collection-grid--premium .card__quick-add-plus path {
  transition: all var(--duration-default) ease-in-out;
}

/* Two states only: white/black at rest; active-color/white on button
   hover and while adding (.loading), regardless of pointer position. */
.collection-grid--premium .card__quick-add-plus:not(:disabled):hover,
.collection-grid--premium .card__quick-add-plus.loading {
  background: var(--active-color);
  color: #fff;
}

.collection-grid--premium .card__quick-add-plus:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.collection-grid--premium .card__quick-add-plus:disabled:hover {
  background: #fff;
  color: #000;
}

.collection-grid--premium .card__quick-add-plus:focus-visible {
  outline: 0.2rem solid rgba(0, 0, 0, 0.4);
  outline-offset: 0.2rem;
}

.collection-grid--premium .card__quick-add-plus .cst-card__quick-add-icon {
  display: block;
  flex-shrink: 0;
  pointer-events: none;
}

.collection-grid--premium .card__quick-add-plus.loading .cst-card__quick-add-icon {
  opacity: 0;
}

/* Spinner only shows while .loading, which uses the active-color
   background, so it's always white. */
.collection-grid--premium .card__quick-add-plus .loading__spinner .path {
  stroke: #fff;
}

.collection-grid--premium .card__quick-add-plus .loading__spinner,
.collection-grid--premium .card__quick-add-plus .spinner {
  position: absolute;
  inset: 0;
  display: flex;
  width: 1.4rem;
  height: 1.4rem;
  align-items: center;
  justify-content: center;
  margin: auto;
  pointer-events: none;
}

/* Faint radial shadow behind the product image: strongest in the
   center, fading out to fully transparent toward the edges. */
.collection-grid--premium .card__media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 42% 38% at 50% 50%,
    rgba(0, 0, 0, 0.22) 0%,
    rgba(0, 0, 0, 0.08) 45%,
    rgba(0, 0, 0, 0) 75%
  );
}
/* Alternate hover media from fm_field.product_card_hover_media (rendered
   only when a section passes use_alternate_card_media to the card snippets).
   Hidden by default, faded in over the cover image on hover. The cover
   stays solid underneath: fading both at once lets the card background
   flash through mid-transition (same fix as the homepage carousel cards). */
.media--hover-effect > .card__hover-media {
  opacity: 0;
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.media--hover-effect > card-hover-media .card__hover-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Hover images: CSS hover only. */
@media screen and (hover: hover) {
  .card-wrapper:hover .media--hover-effect > img.card__hover-media {
    opacity: 1;
  }
}

/* Hover videos: card-hover-media.js sets the state classes, so playback and
   visibility stay in step (desktop hover/focus, mobile play-in-view). */
.card-wrapper.is-media-hover .media--hover-effect > card-hover-media,
.card-wrapper.is-mobile-video-playing .media--hover-effect > card-hover-media {
  opacity: 1;
}

/* Model + color eyebrow above the title. Sits after the heading in the DOM
   (the link already carries the text for screen readers), so order moves it
   up. Type values from the Figma card, matching
   .collection-slider-tabs__card-subtext. */
.card__subtext {
  order: -1;
  margin: 0;
  font-family: var(--font-body-family);
  font-weight: 400;
  font-size: 1.4rem;
  text-transform: uppercase;
  line-height: 1.2;
  color: rgba(0, 0, 0, 0.6);
}

/*----- Promo card (main-collection-product-grid promo_card block) -----*/

.grid__item--promo {
  display: flex;
}

.card-promo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  min-height: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 1rem;
  background-color: var(--promo-bg, #2b2727);
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}

/* In a row, the card matches the height of the product cards beside it.
  In case it's on its own line, set a minimum height. */
@media screen and (min-width: 750px) {
  .card-promo {
    aspect-ratio: auto;
    min-height: 400px; 
  }
}

@media screen and (min-width: 990px) {
  .card-promo {
    min-height: 450px; 
  }
}

.card-promo__image {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-long) ease;
}

@media screen and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card-promo:hover .card-promo__image {
    transform: scale(1.03);
  }
}

.card-promo__heading {
  margin: 0;
  padding: 2.4rem 0.8rem 6rem;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
  color: #fff;
  font-family: var(--font-heading-family);
  font-weight: var(--weight-heavy);
  font-size: 3rem;
  line-height: 1.05;
  letter-spacing: -0.012em;
  text-align: center;
  text-transform: uppercase;
  word-break: break-word;
}

.card-promo__button-wrap {
  display: flex;
  padding: 6rem 1.6rem 1.6rem;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
}

.card-promo__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 4.5rem;
  padding: 0 2rem;
  border-radius: 0.4rem;
  background-color: #fff;
  color: #000;
  font-family: var(--font-heading-family);
  font-weight: var(--weight-heavy);
  font-size: 1.5rem;
  line-height: 1.2;
  text-transform: uppercase;
}

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