/** Shopify CDN: Minification failed

Line 2174:14 Unexpected "{"
Line 2174:23 Expected ":"
Line 2174:30 Unexpected "{"

**/
/* =========================================================
   DON'T LAG COFFEE
   COFFEE FIGHTERS
   90s ARCADE FIGHTING GAME THEME
   ========================================================= */


/* ---------------------------------------------------------
   VARIABLES
--------------------------------------------------------- */

.dlc-coffee-fighter,
body:has(.dlc-coffee-fighter) {
  --cf-bg: #08070c;
  --cf-bg-soft: #12101a;
  --cf-panel: #17131f;
  --cf-panel-light: #231c2e;

  --cf-white: #fff8df;
  --cf-muted: #b9afc3;

  --cf-yellow: #ffd447;
  --cf-red: #d94a4a;
  --cf-blue: #4e7cff;

  --cf-border: rgba(255, 255, 255, 0.14);

  /*
    These are supplied by the Liquid section:
    --cf-accent
    --cf-accent-dark
    --cf-accent-light
  */
}

.dlc-coffee-fighter {
  background: var(--cf-bg);
  color: var(--cf-white);
}


/* =========================================================
   WORLD BACKGROUND
   ========================================================= */

.coffee-fighter-world {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 15% 5%,
      color-mix(in srgb, var(--cf-accent) 22%, transparent),
      transparent 30%
    ),
    radial-gradient(
      circle at 85% 25%,
      rgba(84, 55, 150, 0.16),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #100c17 0%,
      #07060a 60%,
      #0b0710 100%
    );
}

.coffee-fighter-grid-overlay {
  position: absolute;
  inset: 0;

  pointer-events: none;

  opacity: 0.22;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px
    );

  background-size:
    34px 34px;
}

.coffee-fighter-page {
  position: relative;
  z-index: 2;

  padding-top: 42px;
  padding-bottom: 70px;
}


/* =========================================================
   SHARED ARCADE TYPE
   ========================================================= */

.coffee-fighter-series,
.coffee-fighter-status,
.coffee-fighter-section-kicker,
.coffee-fighter-panel-header,
.coffee-fighter-media-footer,
.coffee-fighter-player-label,
.coffee-fighter-loadout-heading,
.coffee-fighter-stats-heading,
.coffee-fighter-special-heading,
.coffee-fighter-final-callout {
  font-family:
    Arial Black,
    Impact,
    sans-serif;

  text-transform: uppercase;
}

.coffee-fighter-section-kicker {
  color: var(--cf-accent-light);

  font-size: 1rem;
  font-weight: 900;

  letter-spacing: 0.18em;
}


/* =========================================================
   HERO
   ========================================================= */

.coffee-fighter-hero {
  display: grid;

  grid-template-columns:
    minmax(340px, 0.9fr)
    minmax(430px, 1.1fr);

  gap: 24px;

  align-items: start;
}


/* =========================================================
   MEDIA PANEL
   ========================================================= */

.coffee-fighter-media-panel {
  position: relative;

  padding: 12px;

  border:
    3px solid
    var(--cf-accent);

  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--cf-accent-dark) 45%, #17131f),
      #0d0a12
    );

  box-shadow:
    8px 8px 0
    rgba(0, 0, 0, 0.45);
}

.coffee-fighter-media-panel::before {
  content: "";

  position: absolute;
  inset: 6px;

  pointer-events: none;

  border:
    1px solid
    rgba(255, 255, 255, 0.18);
}

.coffee-fighter-panel-header {
  position: relative;
  z-index: 2;

  display: flex;
  justify-content: space-between;

  gap: 20px;

  padding:
    8px 10px;

  margin-bottom: 10px;

  color: #111;

  background:
    var(--cf-accent);

  font-size: 1rem;
  font-weight: 900;

  letter-spacing: 0.1em;

  text-shadow:
    1px 1px 0
    rgba(255, 255, 255, 0.35);
}

.coffee-fighter-gallery {
  position: relative;
  z-index: 2;
}

.coffee-fighter-media-footer {
  position: relative;
  z-index: 2;

  display: flex;
  justify-content: space-between;

  gap: 20px;

  padding:
    10px 4px
    2px;

  color:
    var(--cf-accent-light);

  font-size: 0.95rem;
  font-weight: 900;

  letter-spacing: 0.1em;
}


/* =========================================================
   SHOPIFY MEDIA CLEANUP
   ========================================================= */

.dlc-coffee-fighter
.product__media-wrapper {
  width: 100%;
  max-width: none;
}

.dlc-coffee-fighter
.product__media-list {
  display: block !important;

  margin: 0 !important;
  padding: 0 !important;
}

.dlc-coffee-fighter
.product__media-list
.product__media-item {
  display: none !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 !important;
}

.dlc-coffee-fighter
.product__media-list
.product__media-item.is-active {
  display: block !important;
}

.dlc-coffee-fighter
.product__media-list
.product__media-item:first-child {
  display: block !important;
}

.dlc-coffee-fighter
.product__media-list:has(
  .product__media-item.is-active:not(:first-child)
)
.product__media-item:first-child {
  display: none !important;
}

.dlc-coffee-fighter
.product__media {
  display: flex !important;

  align-items: center;
  justify-content: center;

  min-height: 0 !important;

  padding: 14px !important;

  background:
    linear-gradient(
      135deg,
      #f5efe4,
      #e6d8c1
    ) !important;

  border:
    2px solid
    rgba(0, 0, 0, 0.32);
}

.dlc-coffee-fighter
.product__media img {
  position: relative !important;

  inset: auto !important;

  width: auto !important;
  height: auto !important;

  max-width: 100% !important;
  max-height: 500px !important;

  object-fit: contain !important;

  margin:
    0 auto !important;
}

.dlc-coffee-fighter
.product-media-container,
.dlc-coffee-fighter
.product__media,
.dlc-coffee-fighter
.media {
  height: auto !important;
  min-height: 0 !important;
}


/* Thumbnails */

.dlc-coffee-fighter
.thumbnail-slider {
  margin-top: 10px;
}

.dlc-coffee-fighter
.thumbnail-list {
  display: flex !important;

  gap: 8px;

  flex-wrap: wrap;

  margin: 0 !important;
  padding: 0 !important;
}

.dlc-coffee-fighter
.thumbnail-list__item {
  flex:
    0 0
    74px !important;

  width: 74px !important;
  max-width: 74px !important;
}

.dlc-coffee-fighter
.thumbnail {
  width: 74px;
  height: 74px;

  padding: 2px;

  background: #08070c !important;

  border:
    2px solid
    #383043;

  border-radius: 0;
}

.dlc-coffee-fighter
.thumbnail[aria-current] {
  border-color:
    var(--cf-accent);

  box-shadow:
    0 0 0 2px
    color-mix(
      in srgb,
      var(--cf-accent) 35%,
      transparent
    );
}


/* =========================================================
   FIGHTER SHEET
   ========================================================= */

.coffee-fighter-sheet {
  position: relative;

  padding:
    26px 26px
    28px;

  border:
    3px solid
    var(--cf-accent);

  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--cf-accent-dark) 30%,
        #1b1422
      ),
      #0d0a12
    );

  box-shadow:
    8px 8px 0
    rgba(0, 0, 0, 0.5);
}

.coffee-fighter-sheet::before {
  content: "";

  position: absolute;
  inset: 7px;

  pointer-events: none;

  border:
    1px solid
    rgba(255, 255, 255, 0.12);
}

.coffee-fighter-sheet-top {
  position: relative;
  z-index: 2;

  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 18px;

  margin-bottom: 18px;
}

.coffee-fighter-series {
  color:
    var(--cf-yellow);

  font-size: 1.05rem;

  letter-spacing: 0.12em;

  text-shadow:
    2px 2px 0
    #802500;
}

.coffee-fighter-status {
  padding:
    6px 10px;

  color: #111;

  background:
    var(--cf-accent);

  font-size: 0.9rem;

  letter-spacing: 0.08em;
}


/* =========================================================
   FIGHTER TITLE
   ========================================================= */

.coffee-fighter-title-wrap {
  position: relative;
  z-index: 2;

  padding-bottom: 18px;

  border-bottom:
    2px solid
    rgba(255, 255, 255, 0.12);
}

.coffee-fighter-player-label {
  margin-bottom: 4px;

  color:
    var(--cf-accent-light);

  font-size: 1rem;

  letter-spacing: 0.1em;
}

.coffee-fighter-title {
  margin: 0;

  color: var(--cf-white);

  font-family:
    Impact,
    Arial Black,
    sans-serif;

  font-size:
    clamp(
      4rem,
      5vw,
      6.8rem
    );

  line-height: 0.92;

  text-transform: uppercase;

  letter-spacing:
    -0.02em;

  text-shadow:
    3px 3px 0
    var(--cf-accent-dark),
    6px 6px 0
    rgba(0, 0, 0, 0.6);
}

.coffee-fighter-tagline {
  margin:
    12px 0
    0;

  color:
    #c9bed1;

  font-size: 1.5rem;
  font-weight: 700;

  font-style: italic;
}


/* =========================================================
   FIGHTER STATS
   ========================================================= */

.coffee-fighter-stats {
  position: relative;
  z-index: 2;

  margin-top: 20px;

  border:
    2px solid
    rgba(255, 255, 255, 0.12);

  background:
    rgba(0, 0, 0, 0.18);
}

.coffee-fighter-stats-heading {
  display: flex;
  justify-content: space-between;

  padding:
    8px 10px;

  color: #111;

  background:
    var(--cf-accent);

  font-size: 1rem;

  letter-spacing: 0.1em;
}

.coffee-fighter-stat {
  display: flex;

  justify-content: space-between;

  gap: 20px;

  padding:
    10px 12px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.1);
}

.coffee-fighter-stat-name {
  color:
    #9f93aa;

  font-size: 1rem;
  font-weight: 800;

  letter-spacing: 0.1em;
}

.coffee-fighter-stat strong {
  color:
    var(--cf-white);

  font-family:
    Arial Black,
    sans-serif;

  text-align: right;
}


/* =========================================================
   PRICE
   ========================================================= */

.coffee-fighter-price {
  position: relative;
  z-index: 2;

  margin:
    20px 0;

  color:
    var(--cf-yellow);

  font-family:
    Impact,
    Arial Black,
    sans-serif;

  font-size: 2.8rem;

  letter-spacing: 0.03em;

  text-shadow:
    2px 2px 0
    #8a2800;
}


/* =========================================================
   LOADOUT / VARIANTS
   ========================================================= */

.coffee-fighter-loadout-heading {
  position: relative;
  z-index: 2;

  margin-bottom: 12px;

  color:
    var(--cf-accent-light);

  font-size: 1.15rem;

  letter-spacing: 0.12em;
}

.coffee-fighter-variants
.product-form__input {
  max-width: none;

  margin-bottom: 18px;
}

.coffee-fighter-variants
.form__label,
.coffee-fighter-quantity
.form__label {
  display: block;

  margin-bottom: 8px;

  color:
    var(--cf-white);

  font-family:
    Arial Black,
    sans-serif;

  font-size: 1rem;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

.coffee-fighter-option-buttons {
  display: flex;

  gap: 7px;

  flex-wrap: wrap;
}

.coffee-fighter-variants
input[type="radio"] {
  position: absolute;

  opacity: 0;

  pointer-events: none;
}

.coffee-fighter-option-label {
  display: inline-block;

  padding:
    10px 14px;

  color:
    var(--cf-white);

  background:
    #12101a;

  border:
    2px solid
    #393040;

  cursor: pointer;

  font-family:
    Arial Black,
    sans-serif;

  font-size: 1.05rem;

  box-shadow:
    3px 3px 0
    #000;

  transition:
    transform 0.1s ease,
    background 0.1s ease,
    border-color 0.1s ease;
}

.coffee-fighter-option-label:hover {
  transform:
    translateY(-1px);

  border-color:
    var(--cf-accent);
}

.coffee-fighter-variants
input[type="radio"]:checked
+ .coffee-fighter-option-label {
  color: #111;

  background:
    var(--cf-accent);

  border-color:
    var(--cf-accent-light);

  box-shadow:
    3px 3px 0
    var(--cf-accent-dark);
}


/* Impossible combination */

.coffee-fighter-option-label.is-impossible {
  opacity: 0.25;

  cursor: not-allowed;

  text-decoration:
    line-through;
}


/* Sold-out combination */

.coffee-fighter-option-label.is-sold-out {
  opacity: 0.55;

  background:
    #21151a;

  border-color:
    #6d3535;
}


/* =========================================================
   QUANTITY
   ========================================================= */

.coffee-fighter-quantity {
  margin:
    5px 0
    18px;
}

.coffee-fighter-quantity
.quantity {
  min-height: 45px;

  background:
    #0d0b12;

  border:
    2px solid
    #393040;
}

.coffee-fighter-quantity
.quantity::after {
  display: none;
}

.coffee-fighter-quantity
.quantity__button,
.coffee-fighter-quantity
.quantity__input {
  color:
    var(--cf-white);
}


/* =========================================================
   SUBSCRIPTION APP
   ========================================================= */

.coffee-fighter-app {
  margin:
    18px 0;

  padding: 10px;

  background:
    rgba(0, 0, 0, 0.2);

  border:
    2px solid
    rgba(255, 255, 255, 0.09);
}


/* =========================================================
   BUY
   ========================================================= */

.coffee-fighter-buy {
  margin-top: 18px;
}

.coffee-fighter-buy
.product-form__submit {
  min-height: 60px;

  color: #111;

  background:
    linear-gradient(
      180deg,
      var(--cf-accent-light),
      var(--cf-accent)
    );

  border:
    3px solid
    var(--cf-accent-light);

  border-radius: 0;

  font-family:
    Arial Black,
    Impact,
    sans-serif;

  font-size: 1.4rem;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  box-shadow:
    5px 5px 0
    var(--cf-accent-dark);
}

.coffee-fighter-buy
.product-form__submit::after {
  box-shadow: none;
}

.coffee-fighter-buy
.product-form__submit:hover {
  transform:
    translateY(-1px);
}

.coffee-fighter-dynamic-checkout {
  margin-top: 12px;
}

.dlc-coffee-fighter
.shopify-payment-button__more-options {
  display: none !important;
}

.coffee-fighter-fine-print {
  position: relative;
  z-index: 2;

  margin-top: 14px;

  color:
    #817687;

  font-size: 1rem;
}


/* =========================================================
   SHARED SECTION HEADINGS
   ========================================================= */

.coffee-fighter-section-heading {
  text-align: center;
}

.coffee-fighter-section-heading h2,
.coffee-fighter-profile-heading h2,
.coffee-fighter-description-intro h2,
.coffee-fighter-final h2 {
  margin:
    5px 0
    0;

  color:
    var(--cf-white);

  font-family:
    Impact,
    Arial Black,
    sans-serif;

  font-size:
    clamp(
      3.4rem,
      5vw,
      6rem
    );

  line-height: 0.95;

  text-transform: uppercase;

  text-shadow:
    3px 3px 0
    var(--cf-accent-dark);
}

.coffee-fighter-section-heading p {
  margin:
    12px 0
    0;

  color:
    var(--cf-muted);

  font-size: 1.35rem;
}


/* =========================================================
   CHARACTER SELECT
   ========================================================= */

.coffee-fighter-roster {
  margin:
    85px 0
    70px;
}

.coffee-fighter-roster-grid {
  display: grid;

  grid-template-columns:
    repeat(6, minmax(0, 1fr));

  gap: 10px;

  margin-top: 32px;
}

.coffee-fighter-roster-card {
  display: block;

  color:
    var(--cf-white);

  text-decoration: none;

  border:
    3px solid
    #332a3d;

  background:
    #12101a;

  box-shadow:
    4px 4px 0
    #000;

  transition:
    transform 0.12s ease,
    border-color 0.12s ease;
}

.coffee-fighter-roster-card:hover {
  transform:
    translateY(-4px);

  border-color:
    var(--fighter-card-accent);
}

.coffee-fighter-roster-card.is-current {
  border-color:
    var(--fighter-card-accent);

  box-shadow:
    0 0 0 3px
      color-mix(
        in srgb,
        var(--fighter-card-accent) 28%,
        transparent
      ),
    5px 5px 0
    #000;
}

.coffee-fighter-roster-slot {
  position: relative;

  aspect-ratio:
    1 / 1;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--fighter-card-accent) 35%,
        #18121d
      ),
      #09070d
    );
}

.coffee-fighter-roster-image {
  width: 100%;
  height: 100%;
}

.coffee-fighter-roster-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    contrast(1.05)
    saturate(1.08);

  transition:
    transform 0.15s ease;
}

.coffee-fighter-roster-card:hover
.coffee-fighter-roster-image img {
  transform:
    scale(1.04);
}

.coffee-fighter-slot-number {
  position: absolute;

  top: 6px;
  left: 7px;

  z-index: 3;

  color:
    rgba(255, 255, 255, 0.75);

  font-family:
    Arial Black,
    sans-serif;

  font-size: 0.85rem;
}

.coffee-fighter-player-marker {
  position: absolute;

  right: 5px;
  bottom: 5px;

  z-index: 3;

  padding:
    4px 7px;

  color: #111;

  background:
    var(--fighter-card-accent);

  font-family:
    Arial Black,
    sans-serif;

  font-size: 0.9rem;

  animation:
    coffee-fighter-pulse
    0.8s
    infinite alternate;
}

@keyframes coffee-fighter-pulse {

  from {
    transform:
      translateY(0);
  }

  to {
    transform:
      translateY(-3px);
  }

}

.coffee-fighter-roster-name {
  padding:
    9px 8px
    10px;

  text-align: center;
}

.coffee-fighter-roster-name strong {
  display: block;

  color:
    var(--cf-white);

  font-family:
    Arial Black,
    sans-serif;

  font-size: 1rem;

  text-transform: uppercase;
}

.coffee-fighter-roster-name span {
  display: block;

  margin-top: 3px;

  color:
    #91859b;

  font-size: 0.85rem;
}


/* =========================================================
   VS SCREEN
   ========================================================= */

.coffee-fighter-versus {
  display: grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items: center;

  gap: 30px;

  max-width: 900px;

  margin:
    35px auto
    85px;

  padding:
    25px 30px;

  background:
    linear-gradient(
      90deg,
      color-mix(
        in srgb,
        var(--cf-accent-dark) 45%,
        #15101d
      ),
      #08060b 47%,
      #08060b 53%,
      #25121a
    );

  border-top:
    4px solid
    var(--cf-accent);

  border-bottom:
    4px solid
    var(--cf-red);

  box-shadow:
    6px 6px 0
    rgba(0, 0, 0, 0.45);
}

.coffee-fighter-vs-player {
  text-align: right;
}

.coffee-fighter-vs-player-two {
  text-align: left;
}

.coffee-fighter-vs-player span {
  display: block;

  color:
    #91859b;

  font-family:
    Arial Black,
    sans-serif;

  font-size: 0.9rem;

  letter-spacing: 0.1em;
}

.coffee-fighter-vs-player strong {
  display: block;

  margin-top: 4px;

  color:
    var(--cf-white);

  font-family:
    Impact,
    Arial Black,
    sans-serif;

  font-size:
    clamp(
      2.3rem,
      4vw,
      4rem
    );

  text-transform: uppercase;
}

.coffee-fighter-vs-mark {
  color:
    var(--cf-yellow);

  font-family:
    Impact,
    Arial Black,
    sans-serif;

  font-size:
    clamp(
      4rem,
      6vw,
      7rem
    );

  font-style: italic;

  text-shadow:
    4px 4px 0
    var(--cf-red);
}


/* =========================================================
   PROFILE + SPECIAL MOVES
   ========================================================= */

.coffee-fighter-profile {
  padding:
    65px 0;

  border-top:
    2px solid
    rgba(255, 255, 255, 0.08);

  border-bottom:
    2px solid
    rgba(255, 255, 255, 0.08);
}

.coffee-fighter-profile-heading {
  max-width: 760px;

  margin-bottom: 35px;
}

.coffee-fighter-profile-grid {
  display: grid;

  grid-template-columns:
    0.9fr
    1.1fr;

  gap: 45px;
}

.coffee-fighter-profile-copy {
  color:
    #c5bacb;

  font-size: 1.5rem;
  line-height: 1.7;
}

.coffee-fighter-profile-copy p {
  margin:
    0 0
    1em;
}

.coffee-fighter-special-moves {
  border:
    3px solid
    var(--cf-accent);

  background:
    #0e0b13;

  box-shadow:
    6px 6px 0
    #000;
}

.coffee-fighter-special-heading {
  padding:
    10px 14px;

  color: #111;

  background:
    var(--cf-accent);

  font-size: 1.15rem;

  letter-spacing: 0.1em;
}

.coffee-fighter-move {
  padding:
    15px 16px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.12);
}

.coffee-fighter-move > div {
  display: flex;

  justify-content: space-between;

  gap: 18px;

  align-items: center;
}

.coffee-fighter-move span {
  color:
    var(--cf-yellow);

  font-family:
    Arial Black,
    sans-serif;

  font-size: 1.05rem;

  letter-spacing: 0.08em;
}

.coffee-fighter-move strong {
  color:
    var(--cf-white);

  font-family:
    Arial Black,
    sans-serif;

  font-size: 1.1rem;

  text-align: right;
}

.coffee-fighter-move p {
  margin:
    7px 0
    0;

  color:
    #9e92a5;

  font-size: 1.15rem;
}


/* =========================================================
   ARENA VIDEO
   ========================================================= */

.coffee-fighter-arena {
  margin-top: 85px;
}

.coffee-fighter-video {
  max-width: 1000px;

  margin:
    30px auto
    0;

  padding: 8px;

  border:
    3px solid
    var(--cf-accent);

  background:
    #050407;

  box-shadow:
    7px 7px 0
    #000;
}

.coffee-fighter-video video {
  display: block;

  width: 100%;
}


/* =========================================================
   PRODUCT DESCRIPTION
   ========================================================= */

.coffee-fighter-description {
  display: grid;

  grid-template-columns:
    minmax(280px, 0.8fr)
    minmax(0, 1.2fr);

  gap: 55px;

  margin-top: 85px;

  padding:
    55px 0;

  border-top:
    2px solid
    rgba(255, 255, 255, 0.08);

  border-bottom:
    2px solid
    rgba(255, 255, 255, 0.08);
}

.coffee-fighter-description-intro p {
  max-width: 480px;

  margin-top: 18px;

  color:
    #a89cac;

  font-size: 1.35rem;
  line-height: 1.6;
}

.coffee-fighter-product-description {
  color:
    #cec3d2;

  font-size: 1.42rem;
  line-height: 1.65;
}

.coffee-fighter-product-description
> *:first-child {
  margin-top: 0;
}

.coffee-fighter-product-description
> *:last-child {
  margin-bottom: 0;
}

.coffee-fighter-product-description p {
  margin:
    0 0
    1.2em;
}

.coffee-fighter-product-description
strong,
.coffee-fighter-product-description
h1,
.coffee-fighter-product-description
h2,
.coffee-fighter-product-description
h3 {
  color:
    var(--cf-white);
}


/* =========================================================
   FINAL SCREEN
   ========================================================= */

.coffee-fighter-final {
  max-width: 850px;

  margin:
    75px auto
    10px;

  padding:
    35px 30px;

  text-align: center;

  border:
    4px solid
    var(--cf-accent);

  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--cf-accent-dark) 35%,
        #1b1322
      ),
      #09070d
    );

  box-shadow:
    8px 8px 0
    #000;
}

.coffee-fighter-final p {
  max-width: 650px;

  margin:
    18px auto
    0;

  color:
    #b6aabd;

  font-size: 1.35rem;
  line-height: 1.6;
}

.coffee-fighter-final-callout {
  display: inline-block;

  margin-top: 24px;

  padding:
    10px 16px;

  color:
    var(--cf-yellow);

  border:
    2px solid
    var(--cf-yellow);

  font-size: 1rem;

  letter-spacing: 0.1em;

  animation:
    coffee-fighter-blink
    1s
    steps(2, start)
    infinite;
}

@keyframes coffee-fighter-blink {

  50% {
    opacity: 0.45;
  }

}


/* =========================================================
   RELATED PRODUCTS
   ========================================================= */

body:has(.dlc-coffee-fighter)
.shopify-section:has(.related-products) {
  background:
    #09070d !important;

  color:
    var(--cf-white) !important;
}

body:has(.dlc-coffee-fighter)
.shopify-section:has(.related-products)
> div,

body:has(.dlc-coffee-fighter)
.shopify-section:has(.related-products)
.gradient,

body:has(.dlc-coffee-fighter)
.shopify-section:has(.related-products)
[class*="color-"] {
  background:
    transparent !important;
}

body:has(.dlc-coffee-fighter)
.related-products {
  padding-top: 50px;
  padding-bottom: 55px;
}

body:has(.dlc-coffee-fighter)
.related-products__heading {
  color:
    var(--cf-white) !important;

  font-family:
    Impact,
    Arial Black,
    sans-serif;

  font-size:
    clamp(
      3rem,
      4vw,
      4.8rem
    );

  text-transform: uppercase;

  text-shadow:
    3px 3px 0
    var(--cf-accent-dark);
}

body:has(.dlc-coffee-fighter)
.related-products__heading::before {
  content:
    "BONUS ROUND";

  display: block;

  margin-bottom: 6px;

  color:
    var(--cf-yellow);

  font-family:
    Arial Black,
    sans-serif;

  font-size: 0.95rem;

  letter-spacing: 0.15em;
}

body:has(.dlc-coffee-fighter)
.related-products .card {
  padding: 7px;

  background:
    #12101a !important;

  border:
    2px solid
    #342b3d;

  box-shadow:
    4px 4px 0
    #000;
}

body:has(.dlc-coffee-fighter)
.related-products .card:hover {
  border-color:
    var(--cf-accent);
}

body:has(.dlc-coffee-fighter)
.related-products
.card__heading,

body:has(.dlc-coffee-fighter)
.related-products
.card__heading a {
  color:
    var(--cf-white) !important;

  font-family:
    Arial Black,
    sans-serif;
}

body:has(.dlc-coffee-fighter)
.related-products
.price,

body:has(.dlc-coffee-fighter)
.related-products
.price * {
  color:
    #aaa0b3 !important;
}


/* =========================================================
   FAQ
   ========================================================= */

body:has(.dlc-coffee-fighter)
.shopify-section:has(.collapsible-content) {
  background:
    #08070c !important;

  color:
    var(--cf-white) !important;
}

body:has(.dlc-coffee-fighter)
.shopify-section:has(.collapsible-content)
> div,

body:has(.dlc-coffee-fighter)
.shopify-section:has(.collapsible-content)
.gradient,

body:has(.dlc-coffee-fighter)
.shopify-section:has(.collapsible-content)
[class*="color-"] {
  background:
    transparent !important;
}

body:has(.dlc-coffee-fighter)
.collapsible-content__wrapper {
  max-width: 1000px;

  margin:
    0 auto;

  padding:
    38px 45px;

  background:
    #12101a !important;

  border:
    3px solid
    var(--cf-accent);

  box-shadow:
    6px 6px 0
    #000;
}

body:has(.dlc-coffee-fighter)
.collapsible-content__heading,

body:has(.dlc-coffee-fighter)
.collapsible-content__heading * {
  color:
    var(--cf-white) !important;

  font-family:
    Impact,
    Arial Black,
    sans-serif;

  text-transform:
    uppercase;
}

body:has(.dlc-coffee-fighter)
.collapsible-content
.caption-with-letter-spacing,

body:has(.dlc-coffee-fighter)
.collapsible-content
.caption-with-letter-spacing * {
  color:
    var(--cf-yellow) !important;

  font-family:
    Arial Black,
    sans-serif;

  letter-spacing: 0.15em;
}

body:has(.dlc-coffee-fighter)
.collapsible-content
.accordion {
  border-color:
    rgba(255, 255, 255, 0.14) !important;
}

body:has(.dlc-coffee-fighter)
.collapsible-content
.accordion__title,

body:has(.dlc-coffee-fighter)
.collapsible-content
.accordion__title *,

body:has(.dlc-coffee-fighter)
.collapsible-content
summary,

body:has(.dlc-coffee-fighter)
.collapsible-content
summary * {
  color:
    var(--cf-white) !important;
}

body:has(.dlc-coffee-fighter)
.collapsible-content
.accordion__content,

body:has(.dlc-coffee-fighter)
.collapsible-content
.accordion__content *,

body:has(.dlc-coffee-fighter)
.collapsible-content
.rte,

body:has(.dlc-coffee-fighter)
.collapsible-content
.rte * {
  color:
    #b9aec0 !important;
}

body:has(.dlc-coffee-fighter)
.collapsible-content svg,
body:has(.dlc-coffee-fighter)
.collapsible-content path {
  color:
    var(--cf-accent) !important;

  fill:
    currentColor;
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 989px) {

  .coffee-fighter-page {
    padding-top: 28px;
  }

  .coffee-fighter-hero {
    grid-template-columns:
      1fr;
  }

  .coffee-fighter-media-panel {
    width: 100%;
    max-width: 650px;

    margin:
      0 auto;
  }

  .coffee-fighter-profile-grid {
    grid-template-columns:
      1fr;

    gap: 30px;
  }

  .coffee-fighter-description {
    grid-template-columns:
      1fr;

    gap: 30px;
  }

  .coffee-fighter-roster-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 749px) {

  .coffee-fighter-page {
    padding-left: 15px;
    padding-right: 15px;
  }


  /* Hero */

  .coffee-fighter-media-panel {
    padding: 8px;
  }

  .coffee-fighter-panel-header {
    font-size: 0.78rem;
  }

  .coffee-fighter-sheet {
    padding:
      22px 16px
      24px;
  }

  .coffee-fighter-sheet-top {
    display: block;
  }

  .coffee-fighter-status {
    display: inline-block;

    margin-top: 8px;
  }

  .coffee-fighter-title {
    font-size:
      clamp(
        3.4rem,
        15vw,
        5.1rem
      );
  }

  .coffee-fighter-tagline {
    font-size: 1.25rem;
  }


  /* Gallery */

  .dlc-coffee-fighter
  .product__media img {
    max-height: 420px !important;
  }

  .dlc-coffee-fighter
  .thumbnail-list {
    justify-content: center;
  }

  .dlc-coffee-fighter
  .thumbnail-list__item {
    flex:
      0 0
      64px !important;

    width:
      64px !important;

    max-width:
      64px !important;
  }

  .dlc-coffee-fighter
  .thumbnail {
    width: 64px;
    height: 64px;
  }


  /* Roster */

  .coffee-fighter-roster {
    margin-top: 65px;
  }

  .coffee-fighter-roster-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 8px;
  }


  /* VS */

  .coffee-fighter-versus {
    grid-template-columns:
      1fr;

    gap: 10px;

    text-align: center;

    padding:
      20px 15px;
  }

  .coffee-fighter-vs-player,
  .coffee-fighter-vs-player-two {
    text-align: center;
  }

  .coffee-fighter-vs-mark {
    font-size: 5rem;
  }


  /* Profile */

  .coffee-fighter-profile {
    padding:
      45px 0;
  }

  .coffee-fighter-profile-copy {
    font-size: 1.35rem;
  }

  .coffee-fighter-move > div {
    display: block;
  }

  .coffee-fighter-move strong {
    display: block;

    margin-top: 5px;

    text-align: left;
  }


  /* Description */

  .coffee-fighter-description {
    margin-top: 65px;

    padding:
      42px 0;
  }


  /* Final */

  .coffee-fighter-final {
    margin-top: 60px;

    padding:
      28px 18px;
  }


  /* FAQ */

  body:has(.dlc-coffee-fighter)
  .collapsible-content__wrapper {
    margin:
      0 15px;

    padding:
      28px 18px;
  }

}

/* =====================================================
   CONTINUE BUTTON
===================================================== */

.coffee-fighter-final-callout {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}

.coffee-fighter-final-callout:hover {
  background: var(--cf-accent);
  color: #111;
}


/* Smooth arcade-style return to player select */

html {
  scroll-behavior: smooth;
}

#ProductInfo-{{ section.id }} {
  scroll-margin-top: 100px;
}