/* Mobile fix overrides to keep style carousel visible on small screens */
/* Hide current-style-display by default (desktop) — only show on mobile via media query */
.current-style-display {
  display: none !important;
}
@media screen and (max-width: 480px) {
  .gallery-actions {
    align-items: center !important;
    padding-bottom: 0.5rem !important;
  }

  /* Swap upload and style blocks on mobile: put upload after style */
  .gallery-actions > .action-left {
    order: 1 !important;
    width: 100% !important;
  }

  .gallery-actions > .action-right {
    order: 0 !important;
    width: 100% !important;
  }

  .style-carousel-container {
    width: 100% !important;
    max-width: 100% !important;
    z-index: 50 !important;
  }

  .style-carousel {
    overflow: visible !important;
    height: auto !important;
  }

  /* Make the style buttons behave like desktop (visible buttons, wrapping rows) */
  .style-carousel-track {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    overflow: visible !important;
    gap: 0.6rem !important;
    padding: 0.5rem 0 !important;
  }

  .style-thumb-btn {
    min-width: 0 !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.6rem 0.9rem !important;
    margin: 0.25rem !important;
    opacity: 1 !important;
  }

  /* Instead of showing all style buttons on very small screens,
     hide the full list and surface only prev/next arrows so user
     navigates with arrows and default is style 1. */
  .style-carousel {
    display: none !important;
  }

  .style-carousel-track,
  .style-thumb-btn {
    display: none !important;
  }

  .carousel-arrow {
    display: flex !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 8px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .style-carousel-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  /* Current style display (text only) */
  .current-style-display {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: hsl(var(--white)) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 8px 12px !important;
    background: linear-gradient(90deg, rgba(196,255,0,0.06), rgba(196,255,0,0.02)) !important;
    border-radius: 999px !important;
    min-width: 140px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35) inset;
    letter-spacing: 0.3px !important;
  }

  /* Mobile arrow positioning: absolute inside .image-gallery */
  .mobile-arrow-curve {
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    top: -140px !important; /* move arrow above the images */
    transform: translateX(-50%) !important;
    width: 70% !important; /* shrink so curve sits between images */
    height: 160px !important;
    pointer-events: none !important;
    z-index: 60 !important; /* above gallery-actions but below any modals */
    opacity: 0.98 !important;
  }

  .mobile-arrow-curve svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    overflow: visible !important;
  }
  /* Slightly increase brightness for the SVG glow on dark backgrounds */
  .mobile-arrow-curve svg path,
  .mobile-arrow-curve svg polygon,
  .mobile-arrow-curve svg rect {
    mix-blend-mode: screen;
  }

  /* Ensure desktop arrow remains hidden on mobile (we replace with mobile-arrow-curve) */
  .arrow-curve {
    display: none !important;
  }
}

/* Hide mobile-only arrow on wider screens (desktop) */
@media screen and (min-width: 481px) {
  .mobile-arrow-curve {
    display: none !important;
    pointer-events: none !important;
  }
}