/*
 * MIGNO TOKYO 7.0
 * v4 information architecture + v6 pastel trend design.
 * The hero phone is a single CSS component, so its screen can never drift
 * away from the hardware frame at different viewport sizes.
 */

/* --------------------------------------------------------------------------
 * Hero: keep the approved visual language, replace the image phone frame.
 * ----------------------------------------------------------------------- */
.trend-hero-v7 {
  min-height: 820px;
  overflow: hidden;
  background: #f8f2fb;
}
.trend-hero-v7 .trend-hero-background img {
  object-position: center center;
}
.trend-hero-v7 .trend-hero-grid {
  grid-template-columns: minmax(600px, 1.08fr) minmax(500px, .92fr);
  gap: clamp(24px, 3.2vw, 54px);
}
.trend-hero-v7 .trend-hero-copy {
  max-width: 690px;
}
.trend-hero-v7 .trend-hero-copy > p {
  max-width: 585px;
}
.trend-hero-v7 .trend-hero-visual {
  min-height: 650px;
}

/* One transform is applied to the hardware and screen together. */
.phone-shell-v7 {
  position: absolute;
  z-index: 5;
  right: 4px;
  bottom: -178px;
  width: 472px;
  aspect-ratio: 0.55;
  padding: 10px;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 59px;
  background: linear-gradient(145deg, #111116 0%, #303039 45%, #08080b 100%);
  box-shadow:
    0 44px 68px rgba(54, 40, 73, .27),
    inset 0 0 0 2px rgba(255,255,255,.18),
    inset 0 0 0 5px rgba(0,0,0,.42);
  transform: rotate(5.4deg);
  transform-origin: 50% 50%;
}
.phone-shell-v7::before,
.phone-shell-v7::after {
  content: "";
  position: absolute;
  z-index: 7;
  right: -6px;
  width: 5px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #3b3b43, #151519);
  box-shadow: inset 1px 0 rgba(255,255,255,.2);
}
.phone-shell-v7::before { top: 150px; height: 78px; }
.phone-shell-v7::after { top: 246px; height: 116px; }
.phone-screen-v7 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 64px 28px 25px;
  border: 1px solid rgba(0,0,0,.32);
  border-radius: 48px;
  background: #fff;
  color: #17131b;
  box-shadow: inset 0 0 24px rgba(31,24,40,.035);
}
.phone-screen-v7::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: 14px;
  left: 50%;
  width: 136px;
  height: 32px;
  border-radius: 999px;
  background: #060608;
  transform: translateX(-50%);
  box-shadow: inset 0 -1px rgba(255,255,255,.08);
}
.phone-screen-v7::after {
  content: "";
  position: absolute;
  z-index: 5;
  top: 25px;
  left: calc(50% + 36px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #151923;
  box-shadow: 0 0 0 2px #0a0a0d, inset 0 0 2px #314b70;
}
.phone-shell-v7 .phone-rank-image img {
  width: 100%;
  height: 100%;
  padding: 5px;
  object-fit: contain;
}
.phone-shell-v7 .phone-more {
  width: 154px;
  border: 1px solid #ffd2df;
  border-radius: 999px;
}

/* Individual approved assets. */
.trend-hero-v7 .hero-v6-heart { left: 0; top: 118px; width: 118px; }
.trend-hero-v7 .hero-v6-hash { left: 2%; bottom: 98px; width: 92px; }
.trend-hero-v7 .hero-v6-arrow { right: -1%; bottom: 120px; width: 116px; }
.trend-hero-v7 .hero-v6-instagram { right: 0; top: 82px; width: 70px; }
.trend-hero-v7 .hero-v6-x { right: -1%; top: 242px; width: 66px; }
.trend-hero-v7 .hero-v6-tiktok { right: 1%; bottom: 54px; width: 72px; }
.trend-hero-v7 .hero-v6-sparkles-a { right: 0; top: 2%; width: 360px; opacity: .38; }
.trend-hero-v7 .hero-v6-sparkles-b { left: 28%; bottom: -31%; width: 390px; opacity: .25; }

/* --------------------------------------------------------------------------
 * Keep the more useful v4 page composition, but in the new visual tone.
 * ----------------------------------------------------------------------- */
.season-focus-inner,
.insight-panel,
.guide-cards article,
.social-card,
.product-card-v6 {
  border-color: rgba(104, 76, 134, .08);
  box-shadow: 0 20px 54px rgba(82, 57, 108, .075);
}
.season-focus-inner {
  background:
    radial-gradient(circle at 82% 22%, rgba(119, 176, 255, .13), transparent 32%),
    radial-gradient(circle at 54% 86%, rgba(253, 111, 172, .12), transparent 32%),
    linear-gradient(120deg, #fff 0%, #fff8fc 42%, #f4f2ff 100%);
}
.category-section {
  position: relative;
  overflow: hidden;
}
.category-section::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -150px;
  bottom: -180px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(134, 113, 255, .10), transparent 68%);
  pointer-events: none;
}
.category-section .container { position: relative; z-index: 1; }
.category-link {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.category-link:hover {
  transform: translateY(-3px);
  border-color: rgba(142, 102, 244, .22);
  box-shadow: 0 15px 32px rgba(85, 57, 113, .08);
}
.ranking-section {
  background:
    radial-gradient(circle at 88% 15%, rgba(116, 169, 255, .11), transparent 31%),
    radial-gradient(circle at 6% 75%, rgba(255, 105, 161, .09), transparent 27%),
    linear-gradient(180deg, #fbf9ff 0%, #fff 100%);
}
.social-section::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: 10px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(112, 178, 255, .10), transparent 68%);
  pointer-events: none;
}
.insight-section {
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 116, 171, .10), transparent 30%),
    radial-gradient(circle at 86% 88%, rgba(116, 177, 255, .12), transparent 31%),
    linear-gradient(140deg, #faf8ff 0%, #fff5f9 48%, #f4f8ff 100%);
}
.data-guide-section {
  background: #fff;
}
.guide-cards article {
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(250,247,255,.94));
}

/* Keep product images visible and give commerce hierarchy a clear end point. */
.product-card-v6 .product-image-wrap {
  min-height: 260px;
}
.product-card-v6 .product-image-link img,
.season-product span img,
.compact-rank-image img {
  opacity: 1;
  visibility: visible;
}
.product-card-v6 .product-image-link img {
  filter: drop-shadow(0 14px 16px rgba(56, 39, 69, .10));
}
.product-amazon-button {
  background: #ffd814;
  border-color: #e5b300;
}
.product-amazon-button:hover { background: #f7ca00; }

/* --------------------------------------------------------------------------
 * Responsive
 * ----------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .trend-hero-v7 .trend-hero-grid {
    grid-template-columns: minmax(550px, 1.04fr) minmax(450px, .96fr);
  }
  .phone-shell-v7 { right: 10px; width: 440px; bottom: -150px; }
  .trend-hero-v7 .hero-v6-heart { left: -2%; width: 100px; }
  .trend-hero-v7 .hero-v6-hash { left: 0; width: 80px; }
}

@media (max-width: 1040px) {
  .trend-hero-v7 { min-height: 1120px; }
  .trend-hero-v7 .trend-hero-grid {
    min-height: 1120px;
    grid-template-columns: 1fr;
    align-content: start;
  }
  .trend-hero-v7 .trend-hero-copy { max-width: 760px; }
  .trend-hero-v7 .trend-hero-visual { min-height: 610px; margin-top: -6px; }
  .phone-shell-v7 { right: 9%; bottom: -160px; width: 440px; }
  .trend-hero-v7 .hero-v6-heart { left: 17%; top: 46px; }
  .trend-hero-v7 .hero-v6-hash { left: 13%; bottom: 62px; }
  .trend-hero-v7 .hero-v6-instagram { right: 9%; }
  .trend-hero-v7 .hero-v6-x { right: 6%; }
  .trend-hero-v7 .hero-v6-tiktok { right: 10%; }
  .trend-hero-v7 .hero-v6-arrow { right: 6%; }
}

@media (max-width: 760px) {
  .trend-hero-v7 {
    min-height: 1130px;
  }
  .trend-hero-v7 .trend-hero-grid {
    width: min(calc(100% - 30px), 1260px);
    min-height: 1130px;
    padding-top: 100px;
    padding-bottom: 22px;
  }
  .trend-hero-v7 .trend-hero-visual {
    min-height: 500px;
    margin-top: 8px;
  }
  .phone-shell-v7 {
    right: 50%;
    bottom: -38px;
    width: 296px;
    padding: 7px;
    border-radius: 43px;
    transform: translateX(50%) rotate(3.4deg);
  }
  .phone-shell-v7::before { top: 100px; height: 54px; }
  .phone-shell-v7::after { top: 164px; height: 74px; }
  .phone-screen-v7 {
    padding: 43px 16px 14px;
    border-radius: 36px;
  }
  .phone-screen-v7::before {
    top: 9px;
    width: 92px;
    height: 23px;
  }
  .phone-screen-v7::after {
    top: 17px;
    left: calc(50% + 24px);
    width: 5px;
    height: 5px;
  }
  .phone-shell-v7 .phone-topbar b { font-size: 13px; }
  .phone-shell-v7 .phone-topbar span { width: 25px; height: 25px; }
  .phone-shell-v7 .phone-topbar svg { width: 14px; }
  .phone-shell-v7 .phone-tabs { gap: 3px; margin-top: 10px; padding-bottom: 9px; }
  .phone-shell-v7 .phone-tabs span { padding: 5px 7px; font-size: 5.6px; }
  .phone-shell-v7 .phone-tabs span:nth-child(4) { display: none; }
  .phone-shell-v7 .phone-rank-row {
    min-height: 78px;
    grid-template-columns: 18px 46px minmax(0,1fr);
    column-gap: 7px;
    padding: 7px 0;
  }
  .phone-shell-v7 .phone-rank-number { width: 18px; height: 24px; font-size: 6.5px; }
  .phone-shell-v7 .phone-rank-image { width: 46px; height: 52px; border-radius: 9px; }
  .phone-shell-v7 .phone-rank-copy b { font-size: 7.8px; }
  .phone-shell-v7 .phone-rank-copy small { margin-top: 2px; font-size: 4.8px; }
  .phone-shell-v7 .phone-rank-score { margin-top: -22px; font-size: 5.4px; }
  .phone-shell-v7 .phone-rank-score svg { width: 7px; height: 7px; }
  .phone-shell-v7 .phone-more { width: 98px; height: 28px; margin-top: 8px; font-size: 5.6px; }
  .trend-hero-v7 .hero-v6-heart { left: 2%; top: 50px; width: 68px; }
  .trend-hero-v7 .hero-v6-hash { left: 4%; bottom: 46px; width: 57px; }
  .trend-hero-v7 .hero-v6-instagram { right: 1%; top: 25px; width: 48px; }
  .trend-hero-v7 .hero-v6-x { right: 1%; top: 115px; width: 45px; }
  .trend-hero-v7 .hero-v6-tiktok,
  .trend-hero-v7 .hero-v6-arrow { display: none; }
  .trend-hero-v7 .hero-v6-sparkles-a { right: -24%; width: 230px; }
  .trend-hero-v7 .hero-v6-sparkles-b { display: none; }

  .season-focus-products { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .product-card-v6 .product-image-wrap { min-height: 0; }
}

@media (max-width: 430px) {
  .trend-hero-v7 { min-height: 1090px; }
  .trend-hero-v7 .trend-hero-grid { min-height: 1090px; }
  .phone-shell-v7 { width: 282px; bottom: -24px; }
}

@media (prefers-reduced-motion: no-preference) {
  .trend-hero-v7 .hero-v6-heart { animation: migno-v7-float 5.8s ease-in-out infinite; }
  .trend-hero-v7 .hero-v6-hash { animation: migno-v7-float 6.5s ease-in-out -1.5s infinite; }
  .trend-hero-v7 .hero-v6-arrow { animation: migno-v7-float 7s ease-in-out -2s infinite; }
}
@keyframes migno-v7-float {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}