/* =============================================
   Mobile — iOS & Android
   Loaded after all other stylesheets.
   ============================================= */

/* ─── 1. Remove tap highlight & prevent double-tap zoom ─── */
*, *::before, *::after {
  -webkit-tap-highlight-color: transparent;
}

a, button, [role="button"], [role="tab"],
input[type="submit"], input[type="button"], label {
  touch-action: manipulation;
}

/* ─── 2. Safe area insets (iPhone notch / home bar) ─────── */
/* viewport-fit=cover in <meta viewport> is required for these to work */

footer {
  /* Push footer above home bar */
  padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));
}

.site-nav {
  /* Extend nav background up under status bar (home screen / PWA) */
  padding-top: env(safe-area-inset-top);
  height: calc(var(--nav-height) + env(safe-area-inset-top));
}

.page-header {
  /* Push content below taller nav on notched devices */
  margin-top: calc(var(--nav-height) + env(safe-area-inset-top));
}

.nav__mobile-overlay {
  padding-top: max(var(--space-lg), env(safe-area-inset-top));
  padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom));
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ─── 3. Touch target sizes (min 44 × 44 px — Apple HIG) ── */
.nav__hamburger {
  min-width: 44px;
  min-height: 44px;
}

.filter-btn {
  min-height: 44px;
}

.radio-pill__label {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.shop-modal__close {
  min-width: 44px;
  min-height: 44px;
}

.contact-link {
  min-height: 44px;
}

.shipping-accordion__trigger {
  min-height: 48px;
}

.payment-tab {
  min-height: 44px;
}

/* ─── 4. Modal → bottom sheet on mobile ────────────────── */
@media (max-width: 767px) {
  #shop-modal {
    align-items: flex-end;
    padding: 0;
    /* top padding guards against accidental swipe-to-close area */
    padding-top: 48px;
  }

  .shop-modal__dialog {
    width: 100%;
    max-width: 100%;
    max-height: 94dvh;  /* dvh = dynamic viewport, shrinks when keyboard appears */
    max-height: 94vh;   /* fallback for browsers without dvh */
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 40px rgba(18, 8, 30, 0.25);
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Drag-handle visual indicator */
  .shop-modal__dialog::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--color-border);
    border-radius: 2px;
    margin: 12px auto 0;
    flex-shrink: 0;
  }

  .shop-modal__layout {
    grid-template-columns: 1fr;
  }

  .shop-modal__main-img {
    aspect-ratio: 4 / 3; /* landscape crop — shows more artwork, scrolls to info below */
  }

  .shop-modal__info {
    padding: var(--space-md) var(--space-md) var(--space-lg);
  }

  .shop-modal__title {
    font-size: var(--text-2xl);
  }

  /* Compress payment tabs on narrow screens */
  .payment-tab {
    font-size: 10px;
    letter-spacing: 0.08em;
    padding: 10px var(--space-xs);
  }
}

/* ─── 5. Scrollable filter tabs (no page-scroll, no wrap) ─ */
@media (max-width: 599px) {
  .gallery-filter {
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* IE / Edge */
    padding-bottom: 0;
    /* Fade-out hint at right edge */
    -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
    mask-image: linear-gradient(to right, black 80%, transparent 100%);
  }

  .gallery-filter::-webkit-scrollbar { display: none; }

  .filter-btn {
    flex-shrink: 0;
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }
}

/* ─── 6. Shipping table — horizontal scroll on small screens */
@media (max-width: 599px) {
  .shipping-accordion__body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .shipping-accordion__body::-webkit-scrollbar { display: none; }
  .shipping-table {
    min-width: 380px; /* ensures columns don't collapse */
  }
}

/* ─── 7. Product card footer: stack on very small screens ── */
@media (max-width: 400px) {
  .product-card__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }
  .btn--buy,
  button.btn--buy {
    width: 100%;
    text-align: center;
    justify-content: center;
    display: flex;
  }
}

/* ─── 8. Disable hover on touch devices ────────────────── */
/* :hover fires on tap on iOS and stays stuck until next tap */
@media (hover: none) {
  .gallery-item:hover {
    transform: none;
    box-shadow: none;
    border-top-color: var(--color-border);
  }
  .gallery-item:hover .gallery-item__zoom { opacity: 0; }
  .gallery-item:hover .gallery-item__image-wrap img { transform: none; }
  .gallery-item:hover .gallery-item__overlay { background: transparent; }

  .product-card:hover {
    transform: none;
    box-shadow: none;
  }
  .product-card:hover .product-card__image-wrap img { transform: none; }

  .series-card:hover {
    transform: none;
    box-shadow: none;
    border-top-color: transparent;
  }

  /* Provide tap feedback via :active instead */
  .gallery-item:active,
  .product-card:active,
  .series-card:active {
    opacity: 0.78;
    transition: opacity 0.08s;
  }

  .btn--buy:hover,
  .btn--submit:hover,
  .btn--buy-modal:hover,
  .btn:hover {
    /* Reset hover styles — taps will use default pressed state */
    background: var(--color-text);
    border-color: var(--color-text);
    color: var(--color-white);
  }

  .btn--outline-dark:hover {
    background: transparent;
    color: var(--color-text);
  }

  .nav__links a:hover {
    color: var(--color-text);
  }
  .nav__links a:hover::after {
    width: 0;
  }
}

/* ─── 9. Reduce motion (accessibility) ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Make reveal elements immediately visible */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero__scroll,
  .hero__scroll svg {
    animation: none !important;
  }
}

/* ─── 10. Lightbox mobile adjustments ──────────────────── */
@media (max-width: 599px) {
  .lightbox__stage {
    width: 100vw;
    padding: 0;
    gap: var(--space-sm);
  }

  .lightbox__image-wrap {
    max-height: 65vh;
  }

  .lightbox__image-wrap img {
    max-height: 65vh;
  }

  /* Reposition arrows for thumb-friendly use */
  .lightbox__prev { left: var(--space-xs); }
  .lightbox__next { right: var(--space-xs); }

  /* Caption below image */
  .lightbox__caption {
    padding: 0 var(--space-sm);
  }
}

/* ─── 11. Hero mobile ───────────────────────────────────── */
@media (max-width: 599px) {
  .hero {
    padding-bottom: max(var(--space-xl), calc(var(--space-lg) + env(safe-area-inset-bottom)));
  }
}

/* ─── 12. Scrolling improvements ───────────────────────── */
.shop-modal__info,
.shop-modal__dialog {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Prevent body scroll-through when modal is open */
body.no-scroll {
  touch-action: none;
  overscroll-behavior: none;
}