/* PATCH #116 — styles.mobile.harmony.css */

/* Stop horizontal jitter */
html, body { overflow-x: hidden !important; max-width: 100vw; }

/* Generic container safety */
main, .main, .page, .container, section { contain: layout paint; }

/* Carousel normalization */
.sf-carousel {
  display: flex !important;
  gap: 12px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch;
  padding: 4px 12px 16px 12px;
  mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
}
.sf-carousel > * {
  scroll-snap-align: start;
  flex: 0 0 auto;
  min-width: clamp(220px, 78vw, 340px);
  max-width: 90vw;
}

/* When screen wider (phablets) show ~2.2 items */
@media (min-width: 420px) and (max-width: 820px){
  .sf-carousel > * { min-width: clamp(220px, 46vw, 360px); }
}

/* Hide ugly scrollbars (where possible) */
.sf-carousel { scrollbar-width: none; }
.sf-carousel::-webkit-scrollbar { display: none; }

/* Decorative figures clamp */
.sf-deco-clamped {
  position: absolute !important;
  right: max(env(safe-area-inset-right), 6px) !important;
  left: auto !important;
  max-width: min(40vw, 240px) !important;
  height: auto !important;
  transform: none !important;
  pointer-events: none !important;
  z-index: 1;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.25));
}
.sf-deco-parent { overflow: hidden !important; position: relative !important; }

/* Header above everything visual */
header, .site-header { position: sticky; top: 0; z-index: 30; }

/* Safety: card titles truncate nicely */
.card-product .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Avoid image dragging bounce */
img { -webkit-user-drag: none; -webkit-touch-callout: none; }