/* Dedicated Pre-Order Block Stylesheet */

.tNfeF {
  --theme-background-color: var(--mv-color-canvas, #000000);
  --theme-text-color: var(--mv-color-ink, #ffffff);
  --colors-primary-reactive-red: var(--mv-color-accent, #e9000d);
  --font-family-main: var(--mv-font-sans, sans-serif);
  --colors-gray-40: var(--mv-color-ink-soft, #888888);
  --colors-gray-10: var(--mv-color-ink-soft, #cccccc);
  --colors-primary-white: #ffffff;
  --spacings-regular: var(--mv-space-s, 16px);
  --spacings-small: var(--mv-space-xs, 8px);
  --spacings-medium: var(--mv-space-m, 24px);
  --spacings-large: var(--mv-space-l, 48px);
  --spacings-page-margin: var(--mv-space-m, 24px);
  --spacings-block-padding: var(--mv-space-xl, clamp(40px, 4vw, 80px));
  --sizes-width-max-screen-width: 1200px;
  --font-sizes-body-small: var(--mv-size-step--1, 0.875rem);
  --font-sizes-body-x-small: var(--mv-size-step--2, 0.75rem);
  --radii-regular: var(--mv-radius-m, 4px);
  --radii-small: var(--mv-radius-s, 2px);
  
  color: var(--theme-text-color);
  background: var(--theme-background-color);
  width: 100%;
  position: relative;
  overflow: hidden;
  padding-top: clamp(30px, 3vw, 50px);
}

.tNfeF:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at left center, rgba(233, 0, 13, 0.15), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.hRYsu {
  width: 100%;
  max-width: var(--sizes-width-max-screen-width);
  margin: auto;
  padding: clamp(20px, 2vw, 40px) var(--spacings-page-margin) var(--spacings-block-padding) var(--spacings-page-margin);
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: var(--spacings-large);
  align-items: start;
}

@media(max-width: 960px) {
  .hRYsu {
    grid-template-columns: 1fr;
    gap: var(--spacings-medium);
  }
}

.npxlx {
  aspect-ratio: var(--aspect-ratio, auto);
  background: var(--image-background, var(--theme-background-color));
  color: var(--theme-text-color);
  padding: var(--top, 0) var(--right, 0) var(--bottom, 0) var(--left, 0);
}

.npxlx picture {
  height: 100%;
}

.XWRtm {
  --overlay-layer-color: rgba(0, 0, 0, .33);
  position: relative;
  display: block;
  z-index: var(--wrapper-z-index, 1);
  transition: .2s ease-out;
  background-color: transparent;
  --border-radius-inner-value: var(--radii-regular);
}

.XWRtm.sizing-default {
  --entry-width: 100%;
  --entry-height: auto;
  width: 100%;
  height: auto;
}

.XWRtm.sizing-shrink {
  --entry-width: fit-content;
  --entry-height: auto;
  width: auto;
  height: auto;
}

.XWRtm.sizing-stretch {
  --entry-width: 100%;
  --entry-height: 100%;
  width: 100%;
  height: 100%;
}

.XWRtm.sizing-fill {
  --entry-width: 100%;
  --entry-height: 100%;
  --fit: cover;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.XWRtm.sizing-fill>[data-target]>* {
  position: absolute;
  inset: 0;
}

.XWRtm.sizing-background {
  --entry-width: 100%;
  --entry-height: 100%;
  --fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.XWRtm.sizing-background>[data-target]>* {
  height: 100%;
  width: 100%;
}

.XWRtm.roundedCorners-true {
  border-radius: var(--radii-regular);
  --border-radius-inner-value: var(--radii-small);
}

.XWRtm.roundedCorners-false {
  border-radius: 0;
}

.Giwxz {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .25);
  color: var(--colors-primary-white);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
  padding: 0;
}

.Giwxz:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
}

.iCKBj {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
  margin-top: 10px;
}

.iCKBj.showControls-false {
  display: none;
}

.TLPNQ {
  width: 11px;
  height: 10px;
  background: rgba(255, 255, 255, 0.3);
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-block;
  transform-origin: center center;
  vertical-align: middle;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%209%208'%3E%3Cpath%20d='M3.4276%200.514402L0.127115%206.45528C-0.24318%207.12181%200.238788%207.94092%201.00127%207.94092H7.60224C8.36473%207.94092%208.84669%207.12181%208.4764%206.45527L5.17591%200.514401C4.79491%20-0.171409%203.8086%20-0.171407%203.4276%200.514402Z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%209%208'%3E%3Cpath%20d='M3.4276%200.514402L0.127115%206.45528C-0.24318%207.12181%200.238788%207.94092%201.00127%207.94092H7.60224C8.36473%207.94092%208.84669%207.12181%208.4764%206.45527L5.17591%200.514401C4.79491%20-0.171409%203.8086%20-0.171407%203.4276%200.514402Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  transition: background .2s ease, transform .2s ease;
}

.TLPNQ:nth-child(2n) {
  transform: rotate(180deg);
}

.TLPNQ[data-active=true] {
  background: rgba(255, 255, 255, 0.7);
}

.TLPNQ:nth-child(2n)[data-active=true] {
  transform: rotate(180deg);
}

.GzdSZ {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
}

.KeDxk {
  position: relative;
  display: none;
  flex-direction: column;
  gap: var(--spacings-regular);
  align-items: center;
  width: 100%;
}

.KeDxk[data-active=true] {
  display: flex;
}

.dgMvi {
  --image-background: transparent;
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}

.dgMvi[data-active=true] {
  opacity: 1;
  pointer-events: auto;
}

.dgMvi>* {
  width: 100%;
  height: 100%;
}

.dgMvi img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.iIZtZ {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 7;
  max-width: 520px;
  margin: 0 auto;
}

.eQktJ {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--colors-primary-reactive-red);
}

.HyCBt {
  display: flex;
  flex-direction: column;
  gap: var(--spacings-regular);
}

.AIAUM {
  display: none;
  margin-bottom: var(--spacings-regular);
  max-width: clamp(514px, 35.68vw, 685px);
}

.AIAUM[data-active=true] {
  display: block;
}

.jGTJb {
  appearance: none;
  background: transparent;
  border: none;
  border-right: 1px solid var(--colors-primary-reactive-red);
  border-top: 1px solid var(--colors-primary-reactive-red);
  border-bottom: 1px solid var(--colors-primary-reactive-red);
  color: var(--colors-primary-reactive-red);
  padding: 13px 16px;
  font-family: var(--font-family-main);
  font-size: var(--font-sizes-body-small);
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
  white-space: nowrap;
}

.jGTJb:first-child {
  border-left: 1px solid var(--colors-primary-reactive-red);
}

.jGTJb:hover {
  background: rgba(233, 0, 13, 0.15);
}

.jGTJb[data-active=true] {
  background: var(--colors-primary-reactive-red);
  color: var(--theme-background-color);
}

@media(max-width: 960px) {
  .jGTJb {
    border: 1px solid var(--colors-primary-reactive-red);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.25);
  }
}

.cprtA {
  margin: 0;
  font-size: var(--font-sizes-body-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--colors-gray-40);
}

.LGieW {
  margin: 0;
  margin-top: var(--spacings-small);
  font-size: var(--font-sizes-body-x-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--theme-text-color);
}

.DmOML {
  margin: 0;
  color: var(--theme-text-color);
  font-family: var(--mv-font-heading, var(--mv-font-sans));
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.FJgza {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-sizes-body-small);
  line-height: 1.4;
  color: var(--colors-gray-10);
}

.MRwuz {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 8px;
  column-gap: var(--spacings-medium);
}

@media(max-width: 960px) {
  .MRwuz {
    grid-template-columns: 1fr;
  }
}

.BSCzf {
  display: none;
  max-width: clamp(514px, 35.68vw, 685px);
}

.BSCzf[data-active=true] {
  display: block;
}

.cwqTt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  color: currentColor;
  white-space: nowrap;
}

.cwqTt svg {
  height: 100%;
  width: auto;
}

.uUaRE {
  display: none;
  flex-wrap: wrap;
  gap: 0;
  width: fit-content;
  border-left: 1px solid var(--colors-primary-reactive-red);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
  margin-bottom: var(--spacings-regular);
}

.uUaRE[data-active=true] {
  display: inline-flex;
}

@media(max-width: 960px) {
  .uUaRE {
    gap: 12px;
    border: none;
    background: transparent;
    overflow: visible;
  }
}

.AUmeP {
  appearance: none;
  background: transparent;
  border: none;
  border-right: 1px solid var(--colors-primary-reactive-red);
  border-bottom: 1px solid var(--colors-primary-reactive-red);
  border-top: 1px solid var(--colors-primary-reactive-red);
  padding: 10px 16px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--colors-primary-reactive-red);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.AUmeP:first-child {
  border-left: 1px solid var(--colors-primary-reactive-red);
}

.AUmeP:hover {
  background: rgba(233, 0, 13, 0.15);
}

.AUmeP[data-active=true] {
  background: var(--colors-primary-reactive-red);
  color: var(--theme-background-color);
}

@media(max-width: 960px) {
  .AUmeP {
    border: 1px solid var(--colors-primary-reactive-red);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.2);
  }
}

.HGovu {
  display: inline-flex;
  flex-wrap: wrap;
  border-left: 1px solid var(--colors-primary-reactive-red);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.25);
  width: fit-content;
}

.HGovu:first-child {
  border-left: 1px solid var(--colors-primary-reactive-red);
}

@media(max-width: 960px) {
  .HGovu {
    gap: 12px;
    border: none;
    background: transparent;
    overflow: visible;
  }
}

.iDTCH {
  position: var(--entry-position, initial);
  width: var(--entry-width, 100%);
  height: var(--entry-height, auto);
  object-fit: var(--fit, cover);
  object-position: var(--x, center) var(--y, center);
  background-size: var(--fit, cover);
  background-repeat: no-repeat;
  background-position: var(--x, center) var(--y, center);
  border-radius: var(--border-radius-inner, 0);
}

.iDTCH.fit-cover {
  --fit: cover;
}

.iDTCH.fit-contain {
  --fit: contain;
}

.XgUBn picture {
  height: 100%;
}

.XgUBn:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: clamp(200px, 15vw, 400px);
  background: linear-gradient(to top, var(--theme-background-color) 0%, var(--theme-background-color) 20%, transparent 100%);
  z-index: 0;
}

.XgUBn:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(60px, 6vw, 100px);
  background: var(--theme-background-color);
  clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
  z-index: 0;
}

@media(max-width: 960px) {
  .XgUBn:before {
    height: clamp(40px, 8vw, 60px);
  }
}

/* Custom visual polish: Uppercase retailers & Styled CTA button */
.AUmeP .cwqTt {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.preorder-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 32px;
  font-family: var(--font-family-main);
  font-weight: 700;
  font-size: var(--font-sizes-body-small);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: var(--colors-primary-reactive-red, #e9000d) !important;
  color: #ffffff !important;
  text-decoration: none;
  border-radius: var(--radii-regular, 4px);
  border: 1px solid var(--colors-primary-reactive-red, #e9000d);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
  width: fit-content;
  margin-top: 12px;
  margin-bottom: 20px;
}

.preorder-cta-button:hover,
.preorder-cta-button:focus {
  background-color: transparent !important;
  color: var(--colors-primary-reactive-red, #e9000d) !important;
  text-decoration: none;
}

.preorder-cta-button.is-disabled {
  background-color: #2a2a2a !important;
  border-color: #444444 !important;
  color: #888888 !important;
  cursor: not-allowed;
  pointer-events: none;
}
