/* V69 — mobile sample wall reliability + animation fix
   Important: artwork visibility never depends on JavaScript. */

@media (max-width: 900px) {
  /* Keep the sample wall and cards visible even if a global observer fails. */
  body.theme-v38.page-apparel-samples .apparel-sample-browser.v29-reveal,
  body.theme-v38.page-apparel-samples .apparel-sample-browser.v29-reveal.v29-from-left,
  body.theme-v38.page-apparel-samples .apparel-sample-browser.v29-reveal.v29-from-right,
  body.theme-v38.page-apparel-samples .apparel-sample-browser.v29-reveal.v29-scale,
  body.theme-v38.page-apparel-samples .apparel-sample-card,
  body.theme-v38.page-apparel-samples .apparel-sample-card.v29-reveal,
  body.theme-v38.page-apparel-samples .apparel-sample-card.v29-reveal.v29-from-left,
  body.theme-v38.page-apparel-samples .apparel-sample-card.v29-reveal.v29-from-right,
  body.theme-v38.page-apparel-samples .apparel-sample-card.v29-reveal.v29-scale {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  body.theme-v38.page-apparel-samples .apparel-sample-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    overflow: visible !important;
    contain: none !important;
  }

  body.theme-v38.page-apparel-samples .apparel-sample-card {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #071016 !important;
  }

  body.theme-v38.page-apparel-samples .apparel-sample-card .gallery-open {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    opacity: 1;
    transform: none;
    will-change: auto;
  }

  body.theme-v38.page-apparel-samples .apparel-sample-image {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    min-height: min(88vw, 360px) !important;
    overflow: hidden !important;
    background: linear-gradient(135deg,#e9e5db,#f5f2ea) !important;
  }

  body.theme-v38.page-apparel-samples .apparel-sample-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: min(88vw, 360px) !important;
    object-fit: cover !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    background: #eeeae1;
  }

  body.theme-v38.page-apparel-samples .apparel-sample-card.is-filter-hidden {
    display: none !important;
  }

  /* Dedicated animation runs on the card's inner button so visibility remains safe. */
  @media (prefers-reduced-motion: no-preference) {
    body.theme-v38.page-apparel-samples .apparel-sample-card.v69-mobile-enter .gallery-open {
      animation: v69SampleMobileEnter .62s cubic-bezier(.2,.78,.2,1) both;
    }

    body.theme-v38.page-apparel-samples .apparel-sample-card.v69-mobile-enter .apparel-sample-image img {
      animation: v69SampleImageEnter .72s cubic-bezier(.2,.78,.2,1) both;
    }
  }
}

@keyframes v69SampleMobileEnter {
  0% { opacity: .15; transform: translate3d(0,24px,0) scale(.985); }
  100% { opacity: 1; transform: none; }
}

@keyframes v69SampleImageEnter {
  0% { opacity: .45; transform: scale(1.035); }
  100% { opacity: 1; transform: scale(1); }
}

@media (max-width: 420px) {
  body.theme-v38.page-apparel-samples .apparel-sample-image,
  body.theme-v38.page-apparel-samples .apparel-sample-image img {
    min-height: min(90vw, 350px) !important;
  }
}
