/* ClingCling responsive shell V0.5. Desktop rules remain unchanged. */
@media (max-width: 1199px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body { min-width: 0; }

  .header {
    height: auto;
    min-height: 132px;
    padding: 24px;
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .brand,
  .icons { justify-content: center; }

  .nav {
    flex-wrap: wrap;
    gap: 16px 28px;
    white-space: normal;
  }

  .content { width: calc(100% - 32px); }
  .story-gap { min-height: clamp(220px, 40vw, 360px); }

  .split {
    grid-template-columns: 1fr;
    aspect-ratio: auto;
  }

  .split img,
  .split video {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .footer-wrap { padding: 48px 24px 64px; }
  .footer-grid { gap: 32px; }
  .footer-bottom { flex-wrap: wrap; }

  .size-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .size-table { min-width: 820px; }
}

@media (max-width: 767px) {
  .header { padding: 22px 16px 26px; }

  .nav {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px 12px;
    text-align: center;
  }

  .nav a { line-height: 1.5; }
  .icons { gap: 26px; }
  .content { width: calc(100% - 20px); }
  .story-gap { min-height: 180px; }
  .label { left: 18px; font-size: 14px; }

  .category-content,
  .shopping-content,
  .support-content {
    width: calc(100% - 32px);
  }

  .product-placeholder-grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .search-row { grid-template-columns: minmax(0, 1fr) 108px; }
  .saved-item { align-items: flex-start; flex-direction: column; }

  .footer-wrap { padding: 44px 20px 58px; }
  .newsletter-form { width: 100%; max-width: 420px; }
  .newsletter-form input { min-width: 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 22px; }
  .footer-bottom {
    margin-top: 48px;
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 479px) {
  .brand { gap: 12px; }
  .brand-mark { width: 72px; flex-basis: 72px; }
  .brand-title { font-size: 21px; }
  .newsletter-form button { width: 108px; }
  .size-table { min-width: 760px; }
}

/* Real-iPhone mobile polish V0.7 */
@media (max-width: 767px) {
  .header { min-height: 0; padding: 14px 16px 18px; gap: 14px; }
  .nav { gap: 10px 12px; }
  .icons { gap: 24px; }
  .story-gap { min-height: 104px; }
  .section { margin-bottom: 8px; }
  .label { left: 18px; top: 50%; font-size: 14px; }
  .hero video, .single video, .wide-crop, .split img, .split video {
    aspect-ratio: 16 / 9; max-height: 62vw; object-fit: cover;
  }
  #couture-1 img, #couture-2 img, #couture-2 video { object-position: center 32%; }
  #ready img, #ready video, #ready-b img, #ready-b video { object-position: center 38%; }
  #sleep img, #sleep video { object-position: center 40%; }
  #life-1 img, #life-2 img { object-position: center; }
  .footer-wrap { padding: 30px 20px 28px; }
  .newsletter-title { margin-bottom: 10px; }
  .footer-grid { margin-top: 30px; grid-template-columns: 1fr; gap: 12px; }
  .footer-col a { line-height: 1.65; }
  .footer-bottom { margin-top: 30px; gap: 18px; }
  .socials { gap: 18px; }
}
@media (max-width: 479px) {
  .brand-mark { width: 64px; flex-basis: 64px; }
}
/* Real-iPhone per-panel crop repair V0.8 */
@media (max-width: 767px) {
  /* Couture introduction: retain the naturally complete still. */
  #couture-1 img { height: auto; max-height: none; object-fit: contain; object-position: center; }

  /* Couture pair: distinct side/profile and front/bow compositions. */
  #couture-2 .split img { aspect-ratio: 4 / 3; max-height: none; object-fit: cover; object-position: center 18%; }
  #couture-2 .split video { aspect-ratio: 4 / 3; max-height: none; object-fit: cover; object-position: center 34%; }

  /* Pink hooded pair: movement first, complementary face/hood detail second. */
  #ready .split video { aspect-ratio: 4 / 3; max-height: none; object-fit: cover; object-position: center 22%; }
  #ready .split img { aspect-ratio: 1 / 1; max-height: none; object-fit: cover; object-position: center 24%; }

  /* Yellow tracksuit: full relationship followed by a separately centered pose. */
  #ready-b .split img { aspect-ratio: 4 / 3; max-height: none; object-fit: cover; object-position: center 16%; }
  #ready-b .split video { aspect-ratio: 4 / 3; max-height: none; object-fit: cover; object-position: center 30%; }

  /* Soft essentials: preserve child headroom and the complete rack composition. */
  #sleep .split video { aspect-ratio: 4 / 3; max-height: none; object-fit: cover; object-position: center 20%; }
  #sleep .split img { aspect-ratio: 4 / 3; max-height: none; object-fit: contain; object-position: center; background: #fff; }

  /* Lifestyle remains wide, calm and minimally cropped. */
  #life-1 .wide-crop, #life-2 .wide-crop { aspect-ratio: 16 / 9; max-height: none; }
  #life-1 video, #life-2 img { object-fit: cover; object-position: center; }
}
/* V0.8 distinction refinement for paired motion panels */
@media (max-width: 767px) {
  #couture-2 .split video { aspect-ratio: 1 / 1; object-position: 62% 42%; }
  #ready-b .split video { aspect-ratio: 1 / 1; object-position: 58% 34%; }
}
/* Real-iPhone mobile micro patch V0.9 */
@media (max-width: 767px) {
  /* Pair labels belong to the first panel, not the stacked-section seam. */
  #couture-2 > .label,
  #ready > .label,
  #ready-b > .label { top: 22%; transform: translateY(-50%); }
  #sleep > .label { top: 25%; transform: translateY(-50%); }

  /* Natural full-width rack still: no contained 4:3 inset. */
  #sleep .split img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center;
  }
}