/* Safe area handling for mobile devices */
:root {
  --safe-area-top: env(safe-area-inset-top);
  --safe-area-bottom: env(safe-area-inset-bottom);
  --safe-area-left: env(safe-area-inset-left);
  --safe-area-right: env(safe-area-inset-right);
}

body {
  padding-top: max(var(--safe-area-top, 20px), 20px);
  padding-bottom: var(--safe-area-bottom, 0);
  padding-left: var(--safe-area-left, 0);
  padding-right: var(--safe-area-right, 0);
}

.logo-container {
  top: var(--safe-area-top, 0);
  left: var(--safe-area-left, 0);
  right: var(--safe-area-right, 0);
  padding-top: max(var(--safe-area-top, 10px), 10px);
}

.content-wrapper {
  padding-top: max(var(--safe-area-top, 0), 0);
}

@media (max-width: 600px) {
  body {
    min-height: calc(100vh - var(--safe-area-top, 0) - var(--safe-area-bottom, 0));
  }
  
  .logo-container {
    padding: max(var(--safe-area-top, 8px), 8px) var(--safe-area-right, 8px) 8px var(--safe-area-left, 8px);
  }
  
  .shoe-container {
    padding-top: max(var(--safe-area-top, 0), 0);
  }
}