/**
 * Hair Hub × SWELL UI Compatibility Layer
 *
 * Keeps SWELL's fixed page-top button from covering Hair Hub content on
 * tablet/mobile viewports while leaving desktop behavior unchanged.
 *
 * @package HairHubOfficial
 * @since 5.2.0-alpha-2.1
 */

/* Tablet / mobile: keep the fixed control close to the viewport edge. */
@media (max-width: 767px) {
  .p-fixBtnWrap {
    right: max(4px, env(safe-area-inset-right)) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }

  #pagetop.c-fixBtn,
  #pagetop {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  #pagetop .c-fixBtn__icon,
  #pagetop i {
    font-size: 14px !important;
  }
}

/* Narrow phones: reduce overlap further without hiding the SWELL control. */
@media (max-width: 375px) {
  .p-fixBtnWrap {
    right: max(3px, env(safe-area-inset-right)) !important;
    bottom: max(6px, env(safe-area-inset-bottom)) !important;
  }

  #pagetop.c-fixBtn,
  #pagetop {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }

  #pagetop .c-fixBtn__icon,
  #pagetop i {
    font-size: 12px !important;
  }
}