/*
 * MIGNO TOKYO 10.0
 * Approved static hero-phone artwork + generated ranking UI assets.
 * The information architecture and commerce hierarchy stay unchanged.
 */

/* --------------------------------------------------------------------------
 * First view: use the approved, self-contained phone artwork.
 * ----------------------------------------------------------------------- */
.trend-hero-v10 .trend-hero-visual-v10 {
  position: relative;
  min-height: 650px;
  align-self: end;
  isolation: isolate;
}
.trend-hero-v10 .hero-phone-art-link {
  position: absolute;
  z-index: 5;
  right: clamp(0px, 1.2vw, 18px);
  bottom: -62px;
  width: clamp(360px, 27vw, 410px);
  display: block;
  transform: rotate(3.2deg);
  transform-origin: 50% 56%;
  transition: transform .28s ease, filter .28s ease;
  filter: drop-shadow(0 34px 36px rgba(55, 40, 73, .20));
}
.trend-hero-v10 .hero-phone-art-link:hover {
  transform: rotate(2.2deg) translateY(-5px);
  filter: drop-shadow(0 40px 42px rgba(55, 40, 73, .24));
}
.trend-hero-v10 .hero-phone-art-link picture,
.trend-hero-v10 .hero-phone-art {
  width: 100%;
  height: auto;
  display: block;
}
.trend-hero-v10 .hero-v6-sparkles-a {
  right: 1%;
  top: 7%;
  width: 300px;
  opacity: .13;
}
.trend-hero-v10 .hero-v6-sparkles-b {
  display: none;
}

@media (min-width: 1101px) {
  .trend-hero-v10,
  .trend-hero-v10 .trend-hero-grid {
    min-height: 760px;
  }
  .trend-hero-v10 .trend-hero-grid {
    grid-template-columns: minmax(570px, 1.12fr) minmax(410px, .88fr);
    gap: clamp(18px, 2.5vw, 42px);
    padding-top: 108px;
  }
}

@media (min-width: 1101px) and (max-width: 1260px) {
  .trend-hero-v10 .hero-phone-art-link {
    right: 0;
    bottom: -54px;
    width: 374px;
  }
}

/* Tablet/mobile intentionally keep the concise text-first first view. */
@media (max-width: 1100px) {
  .trend-hero-v10 .trend-hero-visual-v10 {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
 * Approved rank shields and flame icon on real product cards.
 * ----------------------------------------------------------------------- */
.product-rank-art {
  position: absolute;
  z-index: 4;
  top: 5px;
  left: 5px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.product-rank-art picture,
.product-rank-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.product-rank-standard {
  z-index: 4;
}
.product-card-v9 .product-trend-badge-v10 {
  top: 10px;
  right: 44px;
  min-height: 29px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 8px 3px 5px;
  border: 1px solid rgba(255, 89, 137, .12);
  border-radius: 999px;
  background: rgba(255,255,255,.93);
  box-shadow: 0 8px 20px rgba(78, 48, 91, .08);
  backdrop-filter: blur(10px);
}
.product-trend-badge-v10 picture,
.product-trend-badge-v10 img {
  width: 15px;
  height: 19px;
  display: block;
  object-fit: contain;
}
.product-trend-badge-v10 b {
  color: #ef4e80;
  font-size: 8px;
  line-height: 1;
  white-space: nowrap;
}

/* Compact ranking reuses the same design language at a smaller scale. */
.compact-rank-art {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
}
.compact-rank-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.compact-rank-score-v10 {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}
.compact-rank-score-v10 img {
  width: 11px;
  height: 15px;
  display: block;
  object-fit: contain;
}
.compact-rank-score-v10 b {
  color: inherit;
  font: inherit;
}

/* Keep long product bottles visually contained. */
.product-card-v9 .product-image-link img {
  max-height: 146px;
}

@media (max-width: 760px) {
  .product-rank-art {
    top: 3px;
    left: 3px;
    width: 38px;
    height: 38px;
  }
  .product-card-v9 .product-trend-badge-v10 {
    top: 7px;
    right: 34px;
    min-height: 24px;
    padding: 2px 6px 2px 4px;
  }
  .product-trend-badge-v10 picture,
  .product-trend-badge-v10 img {
    width: 12px;
    height: 16px;
  }
  .product-trend-badge-v10 b {
    font-size: 6.8px;
  }
  .product-card-v9 .product-image-link img {
    max-height: 108px;
  }
}

@media (max-width: 390px) {
  .product-rank-art {
    width: 35px;
    height: 35px;
  }
  .product-card-v9 .product-image-link img {
    max-height: 100px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trend-hero-v10 .hero-phone-art-link {
    transition: none;
  }
}