/* ====================================================
   IseMoody – Home Page Mobile Responsiveness
   Loaded only on front-page at priority 99.
   Desktop is untouched — all rules scoped to
   @media (max-width: 768px).
   ==================================================== */

@media (max-width: 768px) {

  /* ── Background: match other pages (background-attachment:fixed breaks on mobile) ── */
  body.home {
    background:
      radial-gradient(ellipse at 15% 10%,  rgba(184, 134, 11, 0.13) 0%, transparent 45%),
      radial-gradient(ellipse at 85% 5%,   rgba(201, 162, 39, 0.09) 0%, transparent 40%),
      radial-gradient(ellipse at 50% 55%,  rgba(212, 168, 75, 0.06) 0%, transparent 55%),
      radial-gradient(ellipse at 8%  80%,  rgba(184, 134, 11, 0.08) 0%, transparent 40%),
      radial-gradient(ellipse at 92% 88%,  rgba(201, 162, 39, 0.07) 0%, transparent 40%),
      #fafaf9 !important;
    background-attachment: scroll !important;
  }

  /* ── Overflow containment ───────────────────────── */
  body.home {
    overflow-x: hidden;
  }

  /* ── Hero ───────────────────────────────────────── */
  .hero--with-image {
    min-height: 90vh !important;
  }

  .hero__content {
    padding: 0 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero__title {
    font-size: clamp(1.4rem, 6vw, 2.2rem) !important;
    line-height: 1.25 !important;
    letter-spacing: 0.02em !important;
    margin-bottom: 12px !important;
  }

  .hero__subtitle {
    font-size: 0.9rem !important;
    margin-bottom: 16px !important;
  }

  .hero__morph {
    font-size: 0.85rem !important;
    margin-bottom: 24px !important;
  }

  .hero__button {
    padding: 14px 28px !important;
    font-size: 0.8rem !important;
  }

  /* ── Our Values (features) ──────────────────────── */
  .front-page__content .features {
    padding: 48px 16px !important;
  }

  .features__grid--values {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .feature-block--value {
    min-height: unset !important;
    padding: 20px 18px !important;
  }

  .feature-block__value-title {
    font-size: 0.95rem !important;
    margin-bottom: 8px !important;
  }

  .feature-block__value-desc {
    font-size: 0.88rem !important;
    line-height: 1.65 !important;
  }

  /* ── Product grid (PRODUCT CARD section) ────────── */
  .front-page__content .section-grid {
    padding: 48px 16px !important;
  }

  .product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 0 !important;
  }

  .product-grid .product-card.reveal-card {
    aspect-ratio: 3 / 4 !important;
  }

  .reveal-card__label {
    font-size: 0.78rem !important;
  }

  .reveal-card__price {
    font-size: 0.82rem !important;
  }

  .section-grid__footer {
    margin-top: 2rem !important;
  }

  .shop-all-btn {
    font-size: 0.8rem !important;
    padding: 12px 24px !important;
  }

  /* ── Our Story section ──────────────────────────── */
  .front-page__content .story-section {
    padding: 48px 16px !important;
  }

  .story-section__inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .story-section__image {
    aspect-ratio: 3 / 2 !important;
    width: 100% !important;
  }

  .story-section__content h2 {
    font-size: clamp(1.4rem, 6vw, 2rem) !important;
    text-align: center !important;
  }

  .story-section__content p {
    font-size: 0.95rem !important;
    line-height: 1.75 !important;
    text-align: center !important;
  }

  /* ── Testimonials ───────────────────────────────── */
  .front-page__content .testimonials-section {
    padding: 48px 16px !important;
  }

  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .testimonials-section__title {
    font-size: clamp(1.3rem, 5vw, 1.75rem) !important;
    margin-bottom: 24px !important;
  }

  .testimonial-card {
    padding: 20px 16px !important;
    font-size: 0.88rem !important;
  }

  .testimonial-quote {
    font-size: 2.5rem !important;
  }

  /* ── Reveal-card touch interaction ──────────────────
     Overlay is hidden by default (hover-only on desktop).
     JS adds .is-touch-revealed on first tap — show overlay.
     Tapping the overlay then navigates normally.          */
  .reveal-card.is-touch-revealed .reveal-card__overlay {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  .reveal-card.is-touch-revealed .reveal-card__media img {
    transform: scale(1.06) !important;
  }

  /* ── Overlay: raise z-index above the out-of-stock badge (z-index:10) when tapped ── */
  .product-grid .reveal-card.is-touch-revealed .reveal-card__overlay {
    z-index: 15 !important;
  }

  /* ── VIEW button: move to top so it sits clear of any badge area ── */
  .product-grid .product-card.reveal-card .reveal-card__overlay {
    align-items: flex-start !important;
    padding-top: 18px !important;
  }
}