/* 8WEST Anime Ward - final CSS replacement */
/* Replace the old Anime Ward CSS with this file. */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.anime-cinematic-wrapper,
.anime-cinematic-wrapper * {
  box-sizing: border-box;
}

.anime-cinematic-wrapper {
  width: min(1180px, calc(100vw - 48px));
  max-width: 100%;
  margin: 48px auto;
  isolation: isolate;
}

.anime-cinematic-card {
  --accent: #bfc5ce;
  --accent-soft: rgba(191, 197, 206, 0.18);
  --accent-glow: rgba(191, 197, 206, 0.28);

  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  grid-template-areas: "content banner";
  width: 100%;
  max-width: 100%;
  min-height: 640px;
  overflow: hidden;
  color: #f5eddc;
  text-decoration: none;
  background: #1c1c1c !important;
  border: 1px solid rgba(224, 210, 183, 0.16);
  border-radius: 6px;
  box-shadow:
    0 0 30px var(--accent-soft),
    0 0 90px rgba(255, 255, 255, 0.04);
  transition: transform 0.45s ease, box-shadow 0.45s ease;
}

@media (hover: hover) and (pointer: fine) {
  .anime-cinematic-card:hover {
    transform: translateY(-6px);
    box-shadow:
      0 0 45px var(--accent-glow),
      0 0 140px var(--accent-soft);
  }
}

.anime-banner,
.zoro-banner,
.itachi-banner,
.kaneki-banner {
  position: relative;
  grid-area: banner;
  min-width: 0;
  min-height: 640px;
  overflow: hidden;
  background: #111;
}

.anime-banner img,
.anime-slide,
.zoro-slide,
.itachi-slide {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
}

.anime-slide,
.zoro-slide,
.itachi-slide {
  opacity: 0;
  transition: opacity 1.2s ease;
}

.anime-slide.active,
.zoro-slide.active,
.itachi-slide.active,
.anime-image,
.anime-banner img:not(.anime-slide):not(.zoro-slide):not(.itachi-slide) {
  opacity: 1;
}

.anime-overlay,
.anime-banner::after,
.zoro-banner::after,
.itachi-banner::after,
.kaneki-banner::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.anime-overlay {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(12, 12, 12, 0.04), rgba(12, 12, 12, 0.22)),
    linear-gradient(0deg, rgba(12, 12, 12, 0.42), transparent 44%);
}

.anime-banner::after,
.zoro-banner::after,
.itachi-banner::after,
.kaneki-banner::after {
  content: "";
  z-index: 2;
  background:
    radial-gradient(circle at center, var(--accent-soft), transparent 72%);
}

.anime-content {
  position: relative;
  z-index: 3;
  grid-area: content;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 56px;
  overflow-wrap: break-word;
}

.subject-main {
  display: block;
  max-width: 100%;
  color: rgba(224, 210, 183, 0.72);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  text-transform: uppercase;
}

.anime-title {
  display: block;
  max-width: 100%;
  margin: 0;
  color: #e0d2b7;
  font-size: 4.5rem;
  font-weight: 900;
  line-height: 0.92;
  text-transform: uppercase;
}

.anime-title span {
  display: block;
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
}

.anime-title-prefix {
  color: #e0d2b7 !important;
}

.anime-title-name {
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
  text-shadow: 0 0 22px var(--accent-glow);
  filter: none !important;
}

.anime-desc {
  display: block;
  max-width: 520px;
  color: rgba(245, 237, 220, 0.68);
  font-size: 1rem;
  line-height: 1.75;
  overflow-wrap: break-word;
}

.anime-price {
  display: flex;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  color: #fff;
}

.price-current,
.anime-price span:first-child {
  font-size: 2.75rem;
  font-weight: 900;
  line-height: 1;
}

.price-old,
.anime-price span:nth-child(2) {
  color: rgba(245, 237, 220, 0.45);
  font-size: 1.25rem;
  line-height: 1;
  text-decoration: line-through;
}

.price-currency,
.anime-price span:nth-child(3) {
  color: rgba(245, 237, 220, 0.65);
  font-size: 1rem;
  line-height: 1;
}

.colors-label {
  display: block;
  color: rgba(224, 210, 183, 0.62);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.color-row {
  display: flex;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.color-dot {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(224, 210, 183, 0.34);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.35);
}

.black-dot {
  background: #050505;
}

.white-dot {
  background: #f4f1e8;
}

.burgundy-dot {
  background: #5b1019;
}

.shop-btn {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  padding: 14px 18px;
  color: #f6edda;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.55;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: break-word;
  background: rgba(224, 210, 183, 0.06);
  border: 1px solid rgba(224, 210, 183, 0.22);
  border-radius: 4px;
}

.kaneki-card,
.anime-cinematic-card:not(.zoro-card):not(.itachi-card) {
  --accent: #bfc5ce;
  --accent-soft: rgba(191, 197, 206, 0.16);
  --accent-glow: rgba(191, 197, 206, 0.28);
  border-color: rgba(191, 197, 206, 0.22);
}

.zoro-card {
  --accent: #5e7a63;
  --accent-soft: rgba(72, 120, 82, 0.18);
  --accent-glow: rgba(72, 120, 82, 0.28);
  border-color: rgba(76, 110, 82, 0.22);
}

.itachi-card {
  --accent: #7a1a22;
  --accent-soft: rgba(122, 26, 34, 0.18);
  --accent-glow: rgba(122, 26, 34, 0.28);
  border-color: rgba(122, 26, 34, 0.22);
}

@media (prefers-reduced-motion: reduce) {
  .anime-cinematic-card,
  .anime-slide,
  .zoro-slide,
  .itachi-slide {
    transition: none;
  }

  .anime-cinematic-card:hover {
    transform: none;
  }
}

@media (max-width: 1100px) {
  .anime-cinematic-wrapper {
    width: min(100%, calc(100vw - 36px));
    margin: 36px auto;
  }

  .anime-cinematic-card {
    min-height: 560px;
  }

  .anime-banner,
  .zoro-banner,
  .itachi-banner,
  .kaneki-banner {
    min-height: 560px;
  }

  .anime-content {
    padding: 44px;
  }

  .anime-title {
    font-size: 3.65rem;
  }
}

/* Mobile and tablets: keep the same horizontal banner structure. */
@media (max-width: 900px) {
  .anime-cinematic-wrapper {
    width: min(100%, calc(100vw - 24px));
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 28px auto;
    overflow: visible !important;
  }

  .anime-cinematic-card {
    display: grid !important;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
    grid-template-areas: "content banner" !important;
    width: 100% !important;
    height: auto !important;
    min-height: clamp(360px, 52vw, 500px) !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  .anime-banner,
  .zoro-banner,
  .itachi-banner,
  .kaneki-banner {
    grid-area: banner !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  .anime-banner img,
  .anime-slide,
  .zoro-slide,
  .itachi-slide {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  .anime-content {
    position: relative !important;
    inset: auto !important;
    z-index: 5 !important;
    grid-area: content !important;
    display: flex !important;
    visibility: visible !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 12px !important;
    opacity: 1 !important;
    overflow: visible !important;
    transform: none !important;
    clip: auto !important;
    clip-path: none !important;
    pointer-events: auto !important;
    content-visibility: visible !important;
    padding: 28px !important;
  }

  .subject-main,
  .anime-title,
  .anime-title span,
  .anime-desc,
  .anime-price,
  .colors-label,
  .color-row,
  .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;
    transform: none !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    content-visibility: visible !important;
  }

  .subject-main,
  .anime-title,
  .anime-title span,
  .anime-desc,
  .colors-label,
  .shop-btn {
    max-width: 100% !important;
  }

  .subject-main,
  .anime-title,
  .anime-title span,
  .anime-desc,
  .colors-label {
    display: block !important;
  }

  .anime-price,
  .color-row,
  .shop-btn {
    display: flex !important;
  }

  .anime-title {
    font-size: clamp(2rem, 6vw, 2.9rem) !important;
    line-height: 0.98 !important;
  }

  .anime-desc {
    font-size: clamp(0.82rem, 2vw, 0.94rem) !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 640px) {
  .anime-cinematic-wrapper {
    width: min(100%, calc(100vw - 12px));
    margin: 14px auto;
  }

  .anime-cinematic-card {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important;
    min-height: clamp(235px, 74vw, 340px) !important;
    border-radius: 6px;
  }

  .anime-overlay {
    background:
      linear-gradient(0deg, rgba(12, 12, 12, 0.36), transparent 52%),
      linear-gradient(90deg, rgba(12, 12, 12, 0.08), rgba(12, 12, 12, 0.18));
  }

  .anime-content {
    gap: clamp(4px, 1.8vw, 8px) !important;
    padding: clamp(8px, 3vw, 16px) !important;
  }

  .subject-main {
    font-size: clamp(0.42rem, 1.65vw, 0.58rem) !important;
    line-height: 1.2 !important;
  }

  .anime-title {
    font-size: clamp(0.9rem, 5vw, 1.55rem) !important;
    line-height: 0.98 !important;
  }

  .anime-title span {
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .anime-desc {
    font-size: clamp(0.48rem, 2vw, 0.64rem) !important;
    line-height: 1.35 !important;
  }

  .anime-price {
    gap: 2px 5px !important;
  }

  .price-current,
  .anime-price span:first-child {
    margin-left: 0 !important;
    font-size: clamp(1.05rem, 5vw, 1.55rem) !important;
  }

  .price-old,
  .anime-price span:nth-child(2) {
    margin-left: 0 !important;
    font-size: clamp(0.52rem, 2.2vw, 0.76rem) !important;
  }

  .price-currency,
  .anime-price span:nth-child(3) {
    margin-left: 0 !important;
    font-size: clamp(0.48rem, 2vw, 0.68rem) !important;
  }

  .colors-label {
    font-size: clamp(0.42rem, 1.7vw, 0.56rem) !important;
    line-height: 1.1 !important;
  }

  .color-row {
    gap: 5px !important;
  }

  .color-dot {
    width: clamp(10px, 3.4vw, 15px) !important;
    height: clamp(10px, 3.4vw, 15px) !important;
  }

  .shop-btn {
    width: 100% !important;
    margin-top: 0 !important;
    padding: clamp(5px, 1.8vw, 8px) clamp(5px, 2vw, 9px) !important;
    font-size: clamp(0.44rem, 1.85vw, 0.6rem) !important;
    line-height: 1.25 !important;
  }
}

@media (max-width: 380px) {
  .anime-cinematic-wrapper {
    width: min(100%, calc(100vw - 8px));
    margin: 10px auto;
  }

  .anime-cinematic-card {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
    min-height: clamp(228px, 80vw, 300px) !important;
  }

  .anime-content {
    gap: 4px !important;
    padding: 8px !important;
  }

  .subject-main {
    font-size: 0.42rem !important;
  }

  .anime-title {
    font-size: 0.9rem !important;
  }

  .anime-desc {
    font-size: 0.46rem !important;
    line-height: 1.3 !important;
  }

  .price-current,
  .anime-price span:first-child {
    font-size: 1.05rem !important;
  }

  .price-old,
  .anime-price span:nth-child(2) {
    font-size: 0.5rem !important;
  }

  .price-currency,
  .anime-price span:nth-child(3) {
    font-size: 0.46rem !important;
  }

  .colors-label {
    font-size: 0.42rem !important;
  }

  .color-dot {
    width: 10px !important;
    height: 10px !important;
  }

  .shop-btn {
    padding: 5px 6px !important;
    font-size: 0.44rem !important;
  }
}

/* Mobile horizontal banner lock.
   This is intentionally last: it prevents any old mobile rule from stacking
   the Anime Ward cards vertically. */
@media (max-width: 767px) {
  .anime-cinematic-wrapper {
    width: calc(100vw - 10px) !important;
    max-width: calc(100vw - 10px) !important;
    margin: 12px auto !important;
    overflow: visible !important;
  }

  .anime-cinematic-wrapper > .anime-cinematic-card,
  .anime-cinematic-card {
    display: grid !important;
    grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    grid-template-areas: "content banner" !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: clamp(235px, 72vw, 330px) !important;
    max-height: 340px !important;
    overflow: hidden !important;
  }

  .anime-cinematic-card > .anime-banner,
  .anime-cinematic-card > .zoro-banner,
  .anime-cinematic-card > .itachi-banner,
  .anime-cinematic-card > .kaneki-banner {
    grid-area: banner !important;
    align-self: stretch !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  .anime-cinematic-card > .anime-banner img,
  .anime-cinematic-card > .anime-banner .anime-slide,
  .anime-cinematic-card > .anime-banner .zoro-slide,
  .anime-cinematic-card > .anime-banner .itachi-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  .anime-cinematic-card > .anime-content {
    grid-area: content !important;
    align-self: stretch !important;
    display: flex !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;
    gap: clamp(4px, 1.45vw, 8px) !important;
    padding: clamp(8px, 2.6vw, 14px) !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    transform: none !important;
    clip: auto !important;
    clip-path: none !important;
  }

  .anime-content .subject-main,
  .anime-content .anime-title,
  .anime-content .anime-title span,
  .anime-content .anime-desc,
  .anime-content .anime-price,
  .anime-content .colors-label,
  .anime-content .color-row,
  .anime-content .shop-btn {
    display: revert !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    white-space: normal !important;
    transform: none !important;
    clip: auto !important;
    clip-path: none !important;
  }

  .anime-content .subject-main,
  .anime-content .anime-title,
  .anime-content .anime-title span,
  .anime-content .anime-desc,
  .anime-content .colors-label {
    display: block !important;
  }

  .anime-content .anime-price,
  .anime-content .color-row,
  .anime-content .shop-btn {
    display: flex !important;
  }

  .anime-content .subject-main {
    font-size: clamp(0.42rem, 1.55vw, 0.56rem) !important;
    line-height: 1.15 !important;
  }

  .anime-content .anime-title {
    font-size: clamp(0.98rem, 4.8vw, 1.55rem) !important;
    line-height: 0.98 !important;
  }

  .anime-content .anime-title span {
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .anime-content .anime-desc {
    font-size: clamp(0.48rem, 1.9vw, 0.64rem) !important;
    line-height: 1.32 !important;
  }

  .anime-content .anime-price {
    gap: 2px 5px !important;
  }

  .anime-content .price-current,
  .anime-content .anime-price span:first-child {
    margin-left: 0 !important;
    font-size: clamp(1.02rem, 4.6vw, 1.45rem) !important;
    line-height: 1 !important;
  }

  .anime-content .price-old,
  .anime-content .anime-price span:nth-child(2) {
    margin-left: 0 !important;
    font-size: clamp(0.5rem, 2vw, 0.72rem) !important;
    line-height: 1 !important;
  }

  .anime-content .price-currency,
  .anime-content .anime-price span:nth-child(3) {
    margin-left: 0 !important;
    font-size: clamp(0.46rem, 1.8vw, 0.64rem) !important;
    line-height: 1 !important;
  }

  .anime-content .colors-label {
    font-size: clamp(0.4rem, 1.5vw, 0.54rem) !important;
    line-height: 1.1 !important;
  }

  .anime-content .color-row {
    gap: 5px !important;
  }

  .anime-content .color-dot {
    width: clamp(9px, 3vw, 14px) !important;
    height: clamp(9px, 3vw, 14px) !important;
  }

  .anime-content .shop-btn {
    width: 100% !important;
    margin-top: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(5px, 1.7vw, 8px) clamp(5px, 2vw, 9px) !important;
    font-size: clamp(0.42rem, 1.7vw, 0.58rem) !important;
    line-height: 1.22 !important;
    text-align: center !important;
  }
}

@media (max-width: 340px) {
  .anime-cinematic-wrapper > .anime-cinematic-card,
  .anime-cinematic-card {
    grid-template-columns: minmax(0, 0.48fr) minmax(0, 0.52fr) !important;
    min-height: clamp(225px, 78vw, 285px) !important;
    max-height: 300px !important;
  }

  .anime-cinematic-card > .anime-content {
    gap: 3px !important;
    padding: 6px !important;
  }

  .anime-content .subject-main {
    font-size: 0.38rem !important;
  }

  .anime-content .anime-title {
    font-size: 0.82rem !important;
  }

  .anime-content .anime-desc {
    font-size: 0.42rem !important;
    line-height: 1.25 !important;
  }

  .anime-content .price-current,
  .anime-content .anime-price span:first-child {
    font-size: 0.96rem !important;
  }

  .anime-content .price-old,
  .anime-content .anime-price span:nth-child(2),
  .anime-content .price-currency,
  .anime-content .anime-price span:nth-child(3) {
    font-size: 0.42rem !important;
  }

  .anime-content .colors-label {
    font-size: 0.38rem !important;
  }

  .anime-content .color-dot {
    width: 9px !important;
    height: 9px !important;
  }

  .anime-content .shop-btn {
    padding: 4px 5px !important;
    font-size: 0.4rem !important;
  }
}

/* Final mobile cinematic banner mode.
   Keep Anime Ward horizontal on phones: content + image in one short banner. */
@media (max-width: 767px) {
  .anime-cinematic-wrapper {
    width: calc(100vw - 10px) !important;
    max-width: calc(100vw - 10px) !important;
    margin: 12px auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .anime-cinematic-wrapper > .anime-cinematic-card,
  .anime-cinematic-card {
    display: grid !important;
    grid-template-columns: minmax(0, 0.47fr) minmax(0, 0.53fr) !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;
  }

  .anime-cinematic-card > .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(3px, 1.15vw, 7px) !important;
    padding: clamp(7px, 2.35vw, 13px) !important;
    opacity: 1 !important;
    overflow: visible !important;
    transform: none !important;
    clip: auto !important;
    clip-path: none !important;
  }

  .anime-cinematic-card > .anime-banner,
  .anime-cinematic-card > .zoro-banner,
  .anime-cinematic-card > .itachi-banner,
  .anime-cinematic-card > .kaneki-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;
  }

  .anime-cinematic-card > .anime-banner img,
  .anime-cinematic-card > .anime-banner .anime-slide,
  .anime-cinematic-card > .anime-banner .zoro-slide,
  .anime-cinematic-card > .anime-banner .itachi-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;
  }

  .anime-content .subject-main,
  .anime-content .anime-title,
  .anime-content .anime-title span,
  .anime-content .anime-desc,
  .anime-content .anime-price,
  .anime-content .colors-label,
  .anime-content .color-row,
  .anime-content .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;
  }

  .anime-content .subject-main,
  .anime-content .anime-title,
  .anime-content .anime-title span,
  .anime-content .anime-desc,
  .anime-content .colors-label {
    display: block !important;
    max-width: 100% !important;
  }

  .anime-content .anime-price,
  .anime-content .color-row,
  .anime-content .shop-btn {
    display: flex !important;
    max-width: 100% !important;
  }

  .anime-content .subject-main {
    font-size: clamp(0.38rem, 1.45vw, 0.54rem) !important;
    line-height: 1.12 !important;
  }

  .anime-content .anime-title {
    font-size: clamp(0.88rem, 4.45vw, 1.48rem) !important;
    line-height: 0.96 !important;
  }

  .anime-content .anime-title span {
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .anime-content .anime-desc {
    font-size: clamp(0.42rem, 1.78vw, 0.62rem) !important;
    line-height: 1.24 !important;
  }

  .anime-content .anime-price {
    align-items: baseline !important;
    gap: 2px 5px !important;
  }

  .anime-content .price-current,
  .anime-content .anime-price span:first-child {
    margin-left: 0 !important;
    font-size: clamp(0.95rem, 4.3vw, 1.38rem) !important;
    line-height: 1 !important;
  }

  .anime-content .price-old,
  .anime-content .anime-price span:nth-child(2) {
    margin-left: 0 !important;
    font-size: clamp(0.45rem, 1.9vw, 0.68rem) !important;
    line-height: 1 !important;
  }

  .anime-content .price-currency,
  .anime-content .anime-price span:nth-child(3) {
    margin-left: 0 !important;
    font-size: clamp(0.42rem, 1.7vw, 0.6rem) !important;
    line-height: 1 !important;
  }

  .anime-content .colors-label {
    font-size: clamp(0.36rem, 1.4vw, 0.5rem) !important;
    line-height: 1.08 !important;
  }

  .anime-content .color-row {
    gap: 4px !important;
  }

  .anime-content .color-dot {
    width: clamp(8px, 2.8vw, 13px) !important;
    height: clamp(8px, 2.8vw, 13px) !important;
  }

  .anime-content .shop-btn {
    width: 100% !important;
    margin-top: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(4px, 1.45vw, 7px) clamp(5px, 1.8vw, 8px) !important;
    font-size: clamp(0.38rem, 1.55vw, 0.54rem) !important;
    line-height: 1.16 !important;
    text-align: center !important;
  }
}

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

  .anime-cinematic-card > .anime-content {
    gap: 3px !important;
    padding: 6px !important;
  }

  .anime-content .subject-main {
    font-size: 0.36rem !important;
  }

  .anime-content .anime-title {
    font-size: 0.78rem !important;
  }

  .anime-content .anime-desc {
    font-size: 0.4rem !important;
    line-height: 1.22 !important;
  }

  .anime-content .price-current,
  .anime-content .anime-price span:first-child {
    font-size: 0.9rem !important;
  }

  .anime-content .price-old,
  .anime-content .anime-price span:nth-child(2),
  .anime-content .price-currency,
  .anime-content .anime-price span:nth-child(3) {
    font-size: 0.4rem !important;
  }

  .anime-content .colors-label {
    font-size: 0.36rem !important;
  }

  .anime-content .color-dot {
    width: 8px !important;
    height: 8px !important;
  }

  .anime-content .shop-btn {
    padding: 4px 5px !important;
    font-size: 0.38rem !important;
  }
}

/* Final mobile typography polish.
   Same horizontal card size, better reading rhythm, no text collision. */
@media (max-width: 767px) {
  .anime-cinematic-wrapper > .anime-cinematic-card,
  .anime-cinematic-card {
    grid-template-columns: minmax(0, 0.54fr) minmax(0, 0.46fr) !important;
    aspect-ratio: 16 / 10.5 !important;
  }

  .anime-cinematic-card > .anime-content {
    gap: clamp(5px, 1.35vw, 9px) !important;
    padding: clamp(8px, 2.15vw, 12px) !important;
  }

  .anime-cinematic-card > .anime-content > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .anime-content .subject-main {
    font-size: clamp(0.38rem, 1.35vw, 0.5rem) !important;
    line-height: 1.32 !important;
  }

  .anime-content .anime-title {
    font-size: clamp(0.78rem, 3.9vw, 1.32rem) !important;
    line-height: 1.12 !important;
  }

  .anime-content .anime-title span {
    line-height: 1.08 !important;
  }

  .anime-content .anime-title-name {
    margin-top: 1px !important;
  }

  .anime-content .anime-desc {
    font-size: clamp(0.43rem, 1.58vw, 0.58rem) !important;
    line-height: 1.38 !important;
  }

  .anime-content .anime-price {
    margin-top: 1px !important;
    align-items: baseline !important;
    gap: 2px 5px !important;
    line-height: 1.1 !important;
  }

  .anime-content .price-current,
  .anime-content .anime-price span:first-child {
    font-size: clamp(0.9rem, 4vw, 1.28rem) !important;
    line-height: 1.05 !important;
  }

  .anime-content .price-old,
  .anime-content .anime-price span:nth-child(2) {
    font-size: clamp(0.44rem, 1.72vw, 0.64rem) !important;
    line-height: 1.05 !important;
  }

  .anime-content .price-currency,
  .anime-content .anime-price span:nth-child(3) {
    font-size: clamp(0.4rem, 1.55vw, 0.56rem) !important;
    line-height: 1.05 !important;
  }

  .anime-content .colors-label {
    font-size: clamp(0.35rem, 1.32vw, 0.48rem) !important;
    line-height: 1.2 !important;
  }

  .anime-content .color-row {
    gap: 5px !important;
  }

  .anime-content .shop-btn {
    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;
  }
}

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

  .anime-cinematic-card > .anime-content {
    gap: 4px !important;
    padding: 6px !important;
  }

  .anime-content .subject-main {
    font-size: 0.34rem !important;
    line-height: 1.3 !important;
  }

  .anime-content .anime-title {
    font-size: 0.72rem !important;
    line-height: 1.13 !important;
  }

  .anime-content .anime-title span {
    line-height: 1.09 !important;
  }

  .anime-content .anime-desc {
    font-size: 0.37rem !important;
    line-height: 1.35 !important;
  }

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

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

  .anime-content .colors-label {
    font-size: 0.34rem !important;
    line-height: 1.18 !important;
  }

  .anime-content .shop-btn {
    padding: 4px 5px !important;
    font-size: 0.36rem !important;
    line-height: 1.25 !important;
  }
}