/* ============ phone-fixes.css — phone-only reworks (net-new, additive) ============
   Loaded after styles.css / redesign.css; the inline <style> block in
   index.html loads after this file, so the inline mobile rules win ties.
   Every rule is scoped to the breakpoint the real components already use:
   560px = why-carousel, 768px = product gallery.
   ============================================================================ */

/* 1. Why-carousel (<=560px): neighbour fade, driven exclusively by the single
      .active index the JS state machine owns (transform swipe lives inline). */
@media (max-width: 560px) {
  .why-card { transition: opacity 0.3s ease; }
  .why-card:not(.active) { opacity: 0.35; }
  .why-card.active { opacity: 1; }
}

/* 2. Product gallery (<=768px): harden the uniform-height stage. Every slide
      must stretch to the full row height so the cover fills the whole stage
      on every engine (iOS grid + absolute children is the blank-space quirk). */
@media (max-width: 768px) {
  .gallery-stage { height: 72vh; max-height: 72vh; }
  .gallery-slides {
    display: grid;
    grid-template-rows: 1fr;
    align-items: stretch;
    height: 100%;
  }
  .gallery-slide {
    grid-area: 1 / 1;
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
    height: 100%;
    min-height: 100%;
  }
  .gallery-slide .sh {
    max-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* 4th slide (Everything included): compact, evenly spread, no scroll */
  .gallery-slides .gallery-slide:nth-child(4) .sh {
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .gallery-slides .gallery-slide:nth-child(4) .sh-head { flex: 0 0 auto; }
  .gallery-slides .gallery-slide:nth-child(4) .sh-deliv {
    flex: 1 1 auto;
    min-height: 0;
    gap: 2px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    overflow: hidden;
  }
  .gallery-slides .gallery-slide:nth-child(4) .sh-drow { padding: 4px 10px; }
  .gallery-slides .gallery-slide:nth-child(4) .sh-drow .sh-l { font-size: 11.5px; line-height: 1.25; }
  .gallery-slides .gallery-slide:nth-child(4) .sh-drow .sh-s { font-size: 9.5px; line-height: 1.3; }
  .gallery-slide.cover-slide .product-cover {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
  }
}