/* 8WEST Legends Ward - merged production CSS */
/* Desktop styles preserve the current Ragnar and Oppenheimer cards. */

.ragnar-wrapper,
.oppenheimer-wrapper,
.ragnar-wrapper *,
.oppenheimer-wrapper * {
  box-sizing: border-box;
}

.ragnar-card,
.oppenheimer-card {
  position: relative;
  overflow: hidden;
  background: #161616 !important;
  transition: .45s ease;
}

.ragnar-card {
  border: 1px solid rgba(212,175,55,.18);
  box-shadow:
    0 0 35px rgba(212,175,55,.14),
    0 0 120px rgba(212,175,55,.08);
}

.oppenheimer-card {
  border: 1px solid rgba(200,90,17,.18);
  box-shadow:
    0 0 35px rgba(200,90,17,.14),
    0 0 120px rgba(200,90,17,.08);
}

.ragnar-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 0 45px rgba(212,175,55,.24),
    0 0 160px rgba(212,175,55,.12);
}

.oppenheimer-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 0 45px rgba(200,90,17,.24),
    0 0 160px rgba(200,90,17,.12);
}

.ragnar-banner,
.oppenheimer-banner {
  position: relative;
  overflow: hidden;
  min-height: 640px;
}

.ragnar-slide,
.oppenheimer-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.ragnar-slide.active,
.oppenheimer-slide.active {
  opacity: 1;
}

.ragnar-banner::after,
.oppenheimer-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ragnar-banner::after {
  background:
    radial-gradient(
      circle at center,
      rgba(212,175,55,.12),
      transparent 72%
    );
}

.oppenheimer-banner::after {
  background:
    radial-gradient(
      circle at center,
      rgba(200,90,17,.12),
      transparent 72%
    );
}

.ragnar-wrapper .subject-main,
.oppenheimer-wrapper .subject-main {
  letter-spacing: 2px;
  font-weight: 700;
}

.ragnar-wrapper .subject-main {
  color: #C7AE7A !important;
}

.oppenheimer-wrapper .subject-main {
  color: #C85A11 !important;
}

.legends-title-prefix {
  display: block;
  color: #E0D2B7 !important;
}

.legends-title-name {
  display: block;
}

.ragnar-wrapper .anime-title span:last-child,
.ragnar-wrapper .legends-title-name {
  color: #D4AF37 !important;
  text-shadow:
    0 0 22px rgba(212,175,55,.45),
    0 0 80px rgba(212,175,55,.18);
}

.oppenheimer-wrapper .anime-title span:last-child,
.oppenheimer-wrapper .legends-title-name {
  color: #C85A11 !important;
  text-shadow:
    0 0 22px rgba(200,90,17,.45),
    0 0 80px rgba(200,90,17,.18);
}

.ragnar-wrapper .anime-desc,
.oppenheimer-wrapper .anime-desc {
  color: rgba(255,255,255,.72);
  line-height: 1.9;
}

.ragnar-wrapper .anime-price,
.oppenheimer-wrapper .anime-price {
  margin-top: 18px;
}

.legends-price-current {
  font-size: 44px !important;
  color: #ffffff !important;
  font-weight: 900 !important;
}

.legends-price-old {
  font-size: 20px !important;
  opacity: .45 !important;
  text-decoration: line-through !important;
  margin-left: 10px !important;
}

.legends-price-currency {
  font-size: 16px !important;
  opacity: .65 !important;
  margin-left: 8px !important;
}

.ragnar-wrapper .colors-label,
.oppenheimer-wrapper .colors-label {
  letter-spacing: 2px;
  font-weight: 700;
}

.ragnar-wrapper .colors-label {
  color: #C7AE7A;
}

.oppenheimer-wrapper .colors-label {
  color: #C85A11;
}

.ragnar-wrapper .black-dot,
.oppenheimer-wrapper .black-dot {
  background: #000 !important;
  border: 1px solid rgba(255,255,255,.18);
}

.ragnar-wrapper .burgundy-dot {
  background: #4A0F1B !important;
  border: 1px solid rgba(255,255,255,.12);
}

.olive-dark-dot {
  background: #3B3A1E !important;
  border: 1px solid rgba(255,255,255,.12);
  width: 38px;
  height: 38px;
  border-radius: 8px;
}

.ragnar-wrapper .shop-btn,
.oppenheimer-wrapper .shop-btn {
  color: #E0D2B7;
  transition: .35s ease;
}

.ragnar-wrapper .shop-btn {
  border: 1px solid rgba(212,175,55,.22);
  background:
    linear-gradient(
      180deg,
      rgba(212,175,55,.08),
      rgba(212,175,55,.03)
    );
}

.oppenheimer-wrapper .shop-btn {
  border: 1px solid rgba(200,90,17,.22);
  background:
    linear-gradient(
      180deg,
      rgba(200,90,17,.08),
      rgba(200,90,17,.03)
    );
}

.ragnar-wrapper .shop-btn:hover {
  border-color: rgba(212,175,55,.42);
  background:
    linear-gradient(
      180deg,
      rgba(212,175,55,.14),
      rgba(212,175,55,.06)
    );
  box-shadow:
    0 0 35px rgba(212,175,55,.12);
}

.oppenheimer-wrapper .shop-btn:hover {
  border-color: rgba(200,90,17,.42);
  background:
    linear-gradient(
      180deg,
      rgba(200,90,17,.14),
      rgba(200,90,17,.06)
    );
  box-shadow:
    0 0 35px rgba(200,90,17,.12);
}

.ragnar-wrapper .anime-overlay,
.oppenheimer-wrapper .anime-overlay {
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.05),
      rgba(0,0,0,.55)
    );
}

/* Mobile: use the current Anime Ward horizontal cinematic banner layout only. */
@media (max-width: 767px) {
  .ragnar-wrapper,
  .oppenheimer-wrapper {
    width: calc(100vw - 10px) !important;
    max-width: calc(100vw - 10px) !important;
    margin: 12px auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .ragnar-wrapper > .anime-cinematic-card,
  .oppenheimer-wrapper > .anime-cinematic-card {
    display: grid !important;
    grid-template-columns: minmax(0, 0.54fr) minmax(0, 0.46fr) !important;
    grid-template-rows: 1fr !important;
    grid-template-areas: "content banner" !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 10.5 !important;
    overflow: hidden !important;
  }

  .ragnar-wrapper .anime-content,
  .oppenheimer-wrapper .anime-content {
    grid-area: content !important;
    position: relative !important;
    inset: auto !important;
    z-index: 5 !important;
    display: flex !important;
    visibility: visible !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: clamp(5px, 1.35vw, 9px) !important;
    padding: clamp(8px, 2.15vw, 12px) !important;
    opacity: 1 !important;
    overflow: visible !important;
    transform: none !important;
    clip: auto !important;
    clip-path: none !important;
  }

  .ragnar-wrapper .anime-banner,
  .oppenheimer-wrapper .anime-banner,
  .ragnar-wrapper .ragnar-banner,
  .oppenheimer-wrapper .oppenheimer-banner {
    grid-area: banner !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
  }

  .ragnar-wrapper .anime-banner img,
  .oppenheimer-wrapper .anime-banner img,
  .ragnar-wrapper .ragnar-slide,
  .oppenheimer-wrapper .oppenheimer-slide {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  .ragnar-wrapper .anime-content > *,
  .oppenheimer-wrapper .anime-content > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .ragnar-wrapper .subject-main,
  .oppenheimer-wrapper .subject-main,
  .ragnar-wrapper .anime-title,
  .oppenheimer-wrapper .anime-title,
  .ragnar-wrapper .anime-title span,
  .oppenheimer-wrapper .anime-title span,
  .ragnar-wrapper .anime-desc,
  .oppenheimer-wrapper .anime-desc,
  .ragnar-wrapper .anime-price,
  .oppenheimer-wrapper .anime-price,
  .ragnar-wrapper .colors-label,
  .oppenheimer-wrapper .colors-label,
  .ragnar-wrapper .color-row,
  .oppenheimer-wrapper .color-row,
  .ragnar-wrapper .shop-btn,
  .oppenheimer-wrapper .shop-btn {
    position: relative !important;
    inset: auto !important;
    visibility: visible !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    white-space: normal !important;
    transform: none !important;
    clip: auto !important;
    clip-path: none !important;
  }

  .ragnar-wrapper .subject-main,
  .oppenheimer-wrapper .subject-main {
    display: block !important;
    max-width: 100% !important;
    font-size: clamp(0.38rem, 1.35vw, 0.5rem) !important;
    line-height: 1.32 !important;
  }

  .ragnar-wrapper .anime-title,
  .oppenheimer-wrapper .anime-title {
    display: block !important;
    max-width: 100% !important;
    font-size: clamp(0.78rem, 3.9vw, 1.32rem) !important;
    line-height: 1.12 !important;
  }

  .ragnar-wrapper .anime-title span,
  .oppenheimer-wrapper .anime-title span {
    display: block !important;
    max-width: 100% !important;
    line-height: 1.08 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .ragnar-wrapper .anime-title span:last-child,
  .oppenheimer-wrapper .anime-title span:last-child {
    margin-top: 1px !important;
  }

  .ragnar-wrapper .anime-desc,
  .oppenheimer-wrapper .anime-desc {
    display: block !important;
    max-width: 100% !important;
    font-size: clamp(0.43rem, 1.58vw, 0.58rem) !important;
    line-height: 1.38 !important;
  }

  .ragnar-wrapper .anime-price,
  .oppenheimer-wrapper .anime-price {
    display: flex !important;
    max-width: 100% !important;
    margin-top: 1px !important;
    align-items: baseline !important;
    gap: 2px 5px !important;
    line-height: 1.1 !important;
  }

  .ragnar-wrapper .legends-price-current,
  .oppenheimer-wrapper .legends-price-current,
  .ragnar-wrapper .anime-price span:first-child,
  .oppenheimer-wrapper .anime-price span:first-child {
    margin-left: 0 !important;
    font-size: clamp(0.9rem, 4vw, 1.28rem) !important;
    line-height: 1.05 !important;
  }

  .ragnar-wrapper .legends-price-old,
  .oppenheimer-wrapper .legends-price-old,
  .ragnar-wrapper .anime-price span:nth-child(2),
  .oppenheimer-wrapper .anime-price span:nth-child(2) {
    margin-left: 0 !important;
    font-size: clamp(0.44rem, 1.72vw, 0.64rem) !important;
    line-height: 1.05 !important;
  }

  .ragnar-wrapper .legends-price-currency,
  .oppenheimer-wrapper .legends-price-currency,
  .ragnar-wrapper .anime-price span:nth-child(3),
  .oppenheimer-wrapper .anime-price span:nth-child(3) {
    margin-left: 0 !important;
    font-size: clamp(0.4rem, 1.55vw, 0.56rem) !important;
    line-height: 1.05 !important;
  }

  .ragnar-wrapper .colors-label,
  .oppenheimer-wrapper .colors-label {
    display: block !important;
    max-width: 100% !important;
    font-size: clamp(0.35rem, 1.32vw, 0.48rem) !important;
    line-height: 1.2 !important;
  }

  .ragnar-wrapper .color-row,
  .oppenheimer-wrapper .color-row {
    display: flex !important;
    max-width: 100% !important;
    gap: 5px !important;
  }

  .ragnar-wrapper .color-dot,
  .oppenheimer-wrapper .color-dot,
  .oppenheimer-wrapper .olive-dark-dot {
    width: clamp(8px, 2.8vw, 13px) !important;
    height: clamp(8px, 2.8vw, 13px) !important;
  }

  .oppenheimer-wrapper .olive-dark-dot {
    border-radius: 4px !important;
  }

  .ragnar-wrapper .shop-btn,
  .oppenheimer-wrapper .shop-btn {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(4px, 1.35vw, 7px) clamp(5px, 1.75vw, 8px) !important;
    font-size: clamp(0.37rem, 1.45vw, 0.52rem) !important;
    line-height: 1.28 !important;
    text-align: center !important;
  }
}

@media (max-width: 360px) {
  .ragnar-wrapper > .anime-cinematic-card,
  .oppenheimer-wrapper > .anime-cinematic-card {
    grid-template-columns: minmax(0, 0.56fr) minmax(0, 0.44fr) !important;
    aspect-ratio: 16 / 11.2 !important;
  }

  .ragnar-wrapper .anime-content,
  .oppenheimer-wrapper .anime-content {
    gap: 4px !important;
    padding: 6px !important;
  }

  .ragnar-wrapper .subject-main,
  .oppenheimer-wrapper .subject-main {
    font-size: 0.34rem !important;
    line-height: 1.3 !important;
  }

  .ragnar-wrapper .anime-title,
  .oppenheimer-wrapper .anime-title {
    font-size: 0.72rem !important;
    line-height: 1.13 !important;
  }

  .ragnar-wrapper .anime-title span,
  .oppenheimer-wrapper .anime-title span {
    line-height: 1.09 !important;
  }

  .ragnar-wrapper .anime-desc,
  .oppenheimer-wrapper .anime-desc {
    font-size: 0.37rem !important;
    line-height: 1.35 !important;
  }

  .ragnar-wrapper .legends-price-current,
  .oppenheimer-wrapper .legends-price-current,
  .ragnar-wrapper .anime-price span:first-child,
  .oppenheimer-wrapper .anime-price span:first-child {
    font-size: 0.82rem !important;
    line-height: 1.05 !important;
  }

  .ragnar-wrapper .legends-price-old,
  .oppenheimer-wrapper .legends-price-old,
  .ragnar-wrapper .legends-price-currency,
  .oppenheimer-wrapper .legends-price-currency,
  .ragnar-wrapper .anime-price span:nth-child(2),
  .oppenheimer-wrapper .anime-price span:nth-child(2),
  .ragnar-wrapper .anime-price span:nth-child(3),
  .oppenheimer-wrapper .anime-price span:nth-child(3) {
    font-size: 0.36rem !important;
    line-height: 1.05 !important;
  }

  .ragnar-wrapper .colors-label,
  .oppenheimer-wrapper .colors-label {
    font-size: 0.34rem !important;
    line-height: 1.18 !important;
  }

  .ragnar-wrapper .shop-btn,
  .oppenheimer-wrapper .shop-btn {
    padding: 4px 5px !important;
    font-size: 0.36rem !important;
    line-height: 1.25 !important;
  }
}