/**
 * Cross-device consistency + Core Web Vitals helpers
 * Based on 2026 mobile-first / CWV guidance:
 * - viewport-fit + safe-area insets
 * - dvh for mobile browser chrome
 * - 48px tap targets
 * - image aspect-ratio stability (CLS)
 * - reduced motion / overflow containment
 */

:root {
  --jj-safe-top: env(safe-area-inset-top, 0px);
  --jj-safe-right: env(safe-area-inset-right, 0px);
  --jj-safe-bottom: env(safe-area-inset-bottom, 0px);
  --jj-safe-left: env(safe-area-inset-left, 0px);
  --jj-tap: 48px;
  --jj-header-h: 84px;
  --jj-vh: 100dvh;
}

@supports not (height: 100dvh) {
  :root {
    --jj-vh: 100vh;
  }
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  hanging-punctuation: first allow-end last;
  scroll-padding-top: calc(var(--jj-header-h) + var(--jj-safe-top));
  overflow-x: clip;
}

body {
  min-height: var(--jj-vh);
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-x: none;
}

img,
picture,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

img {
  display: block;
}

/* Prefer content-visibility for heavy below-fold blocks */
#jj-shop,
#notify-section,
footer#comp-kbgakxmn,
.jj-product__frame:nth-child(n + 2) {
  content-visibility: auto;
  contain-intrinsic-size: 640px 800px;
}

/* Sticky / fixed chrome respects notches */
.jj-site-header {
  padding-top: var(--jj-safe-top);
  padding-left: var(--jj-safe-left);
  padding-right: var(--jj-safe-right);
}

.jj-login-drawer__panel {
  padding-top: var(--jj-safe-top);
  padding-bottom: var(--jj-safe-bottom);
  padding-right: var(--jj-safe-right);
  height: var(--jj-vh);
  max-height: var(--jj-vh);
}

#ai-chat-widget {
  bottom: calc(20px + var(--jj-safe-bottom));
  right: calc(20px + var(--jj-safe-right));
}

.jj-product__toast {
  bottom: calc(24px + var(--jj-safe-bottom));
}

/* Tap targets — WCAG / Apple HIG ~44–48px.
   Header icons are clustered on small screens via site-header.css. */
.jj-icon-btn,
.jj-menu-btn,
.jj-accordion__header,
.jj-login-drawer__close,
.jj-login-drawer__password-toggle {
  min-width: var(--jj-tap);
  min-height: var(--jj-tap);
}

@media (max-width: 900px) {
  .jj-header-actions > .jj-icon-btn {
    min-width: 38px;
    min-height: 38px;
  }
}

.jj-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 10px;
}

.jj-notify-btn,
.jj-product__add,
.jj-hero__cta-btn {
  min-height: 36px;
}

/* Always keep homepage hero layers static (no zoom / parallax drift) */
.jj-hero__media,
.jj-hero__gradient,
.jj-hero__content,
.jj-hero__inner {
  transform: none !important;
  will-change: auto !important;
}

.jj-product-card:hover .jj-product-card__media img,
.jj-product-card:hover .jj-product-card__media .jj-image-frame__fill,
#jj-shop .jj-product-card:hover .jj-image-frame__fill {
  transition: none !important;
}

/* Smooth scrolling only when OK for the user */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@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;
  }
}

/* Mobile / tablet layout stress points */
@media (max-width: 1023px) {
  :root {
    --jj-header-h: 72px;
  }

  .jj-site-header__inner {
    height: var(--jj-header-h);
    padding-left: max(16px, var(--jj-safe-left));
    padding-right: max(16px, var(--jj-safe-right));
  }

  /* Prevent 100vh jump when Safari chrome shows/hides */
  .jj-nav.is-open,
  .mobile-nav,
  #jj-mobile-nav {
    max-height: calc(var(--jj-vh) - var(--jj-header-h) - var(--jj-safe-top));
  }

  /* Kill horizontal scroll from Wix absolute leftovers */
  #site-root,
  #masterPage,
  .c1dmp-overflow-wrapper {
    overflow-x: clip !important;
    max-width: 100vw !important;
  }

  input,
  textarea,
  select,
  button {
    font-size: 16px; /* stops iOS zoom-on-focus */
  }
}

/* High-DPI sharpness without overserving huge bitmaps */
.jj-product__frame img,
.jj-product-card__media img,
.jj-image-frame__fill {
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Focus visible for keyboard / switch users across devices */
:focus-visible {
  outline: 2px solid var(--jj-gold, #b8956c);
  outline-offset: 3px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

/* Storefront only — discourage long-press / drag image download (admin keeps full access) */
body:not(.admin-body) img,
body:not(.admin-body) picture,
body:not(.admin-body) .jj-image-frame__fill {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}