/* Shared mobile alignment — only on real phones/tablets (not browser-zoom on desktop). */

@media (max-width: 991px) {
  html:not(.ay-force-desktop) {
    --ayenyx-gutter: max(1.25rem, calc(28px * var(--ayenyx-scale)));
    --ayenyx-pad-left: max(var(--ayenyx-gutter), env(safe-area-inset-left, 0px));
    --ayenyx-pad-right: max(var(--ayenyx-gutter), env(safe-area-inset-right, 0px));
  }

  html:not(.ay-force-desktop),
  html:not(.ay-force-desktop) body {
    overflow-x: hidden;
    max-width: 100%;
  }

  html:not(.ay-force-desktop) .navbar-compact .navbar-grid {
    padding-left: var(--ayenyx-pad-left) !important;
    padding-right: var(--ayenyx-pad-right) !important;
    flex-wrap: nowrap !important;
  }

  html:not(.ay-force-desktop) .navbar-compact .navbar-logo {
    width: var(--navbar-logo-width, 195px) !important;
    max-width: var(--navbar-logo-width, 195px) !important;
    height: auto !important;
    max-height: var(--navbar-logo-height, 44px) !important;
  }

  html:not(.ay-force-desktop) .navbar-compact .navbar-grid__menu,
  html:not(.ay-force-desktop) .navbar-compact #navbarNav,
  html:not(.ay-force-desktop) .navbar-compact #navbarNav.collapse,
  html:not(.ay-force-desktop) .navbar-compact #navbarNav.collapse.show {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(var(--navbar-bar-height, 82px) + env(safe-area-inset-top, 0px)) !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    flex: none !important;
    flex-basis: auto !important;
  }

  html:not(.ay-force-desktop) .navbar-compact #navbarNav.is-open,
  html:not(.ay-force-desktop) .navbar-compact #navbarNav.show,
  html:not(.ay-force-desktop) .navbar-compact #navbarNav.collapse.show {
    min-height: calc(100dvh - var(--navbar-bar-height, 82px) - env(safe-area-inset-top, 0px));
    padding: 1.25rem var(--ayenyx-pad-right) 2.5rem var(--ayenyx-pad-left) !important;
    background: #fff !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }

  html:not(.ay-force-desktop) .navbar-compact #navbarNav ul li .nav-link::after,
  html:not(.ay-force-desktop) .navbar-compact .products-mega-trigger::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
  }

  html:not(.ay-force-desktop) .products-mega-dropdown__panel,
  html:not(.ay-force-desktop) .products-mega-dropdown__panel.is-open {
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
  }

  html:not(.ay-force-desktop) .products-mega-menu__main {
    background: #fff !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  html:not(.ay-force-desktop) .products-mega-menu ul.products-mega-menu__main-list {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
  }

  html:not(.ay-force-desktop) .home-hero__copy {
    left: var(--ayenyx-pad-left) !important;
    right: var(--ayenyx-pad-right) !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    padding: 1rem 0 0 !important;
    bottom: 6.25rem;
  }

  html:not(.ay-force-desktop) .home-hero__title,
  html:not(.ay-force-desktop) .home-about-partner__title,
  html:not(.ay-force-desktop) .home-categories__title,
  html:not(.ay-force-desktop) .home-value__title,
  html:not(.ay-force-desktop) .home-audience__title,
  html:not(.ay-force-desktop) .home-brands__title,
  html:not(.ay-force-desktop) .home-promo__title,
  html:not(.ay-force-desktop) .home-uae__title,
  html:not(.ay-force-desktop) .home-blog__title,
  html:not(.ay-force-desktop) .home-final-cta__title {
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: none !important;
  }

  html:not(.ay-force-desktop) .home-value__title-keep {
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
  }

  html:not(.ay-force-desktop) .home-hero__lead,
  html:not(.ay-force-desktop) .home-about-partner__lead,
  html:not(.ay-force-desktop) .home-value__lead,
  html:not(.ay-force-desktop) .home-promo__text,
  html:not(.ay-force-desktop) .home-uae__text,
  html:not(.ay-force-desktop) .home-final-cta__text {
    max-width: none;
  }

  html:not(.ay-force-desktop) .home-hero__image {
    max-width: none !important;
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: 82% center;
  }

  html:not(.ay-force-desktop) .home-about-partner__img,
  html:not(.ay-force-desktop) .home-promo__banner img,
  html:not(.ay-force-desktop) .home-value__visual-img,
  html:not(.ay-force-desktop) .home-value__visual > img.home-value__visual-img,
  html:not(.ay-force-desktop) .home-blog__media img {
    max-width: none !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  html:not(.ay-force-desktop) .home-categories__container,
  html:not(.ay-force-desktop) .home-audience__container,
  html:not(.ay-force-desktop) .home-brands__container,
  html:not(.ay-force-desktop) .home-blog__container,
  html:not(.ay-force-desktop) .home-uae__container,
  html:not(.ay-force-desktop) .home-final-cta__inner,
  html:not(.ay-force-desktop) .home-features__container,
  html:not(.ay-force-desktop) .home-principles__container,
  html:not(.ay-force-desktop) .home-promo__wrap,
  html:not(.ay-force-desktop) .site-footer__wrap,
  html:not(.ay-force-desktop) .about-vision__wrap,
  html:not(.ay-force-desktop) .about-brand-supply__wrap {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--ayenyx-pad-left) !important;
    padding-right: var(--ayenyx-pad-right) !important;
    box-sizing: border-box;
  }

  html:not(.ay-force-desktop) .contact-page {
    padding-left: var(--ayenyx-pad-left) !important;
    padding-right: var(--ayenyx-pad-right) !important;
  }

  html:not(.ay-force-desktop) .contact-page__container {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  html:not(.ay-force-desktop) .home-about-partner__copy {
    padding-left: var(--ayenyx-pad-left) !important;
    padding-right: var(--ayenyx-pad-right) !important;
  }

  html:not(.ay-force-desktop) .home-value__panel-content {
    padding-left: var(--ayenyx-pad-left) !important;
    padding-right: var(--ayenyx-pad-right) !important;
  }

  html:not(.ay-force-desktop) .home-value__points {
    padding-left: var(--ayenyx-pad-left) !important;
    padding-right: var(--ayenyx-pad-right) !important;
  }

  html:not(.ay-force-desktop) .home-blog__grid,
  html:not(.ay-force-desktop) .insights-page__grid {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html:not(.ay-force-desktop) .help-popup {
    right: var(--ayenyx-pad-right) !important;
    bottom: max(1rem, env(safe-area-inset-bottom, 0px)) !important;
  }

  html:not(.ay-force-desktop) .help-popup__panel {
    width: min(320px, calc(100vw - (var(--ayenyx-pad-left) + var(--ayenyx-pad-right) + 0.35rem)));
  }
}

@media (max-width: 575px) {
  html:not(.ay-force-desktop) {
    --ayenyx-gutter: max(1.25rem, calc(28px * var(--ayenyx-scale)));
    --ayenyx-pad-left: max(var(--ayenyx-gutter), env(safe-area-inset-left, 0px));
    --ayenyx-pad-right: max(var(--ayenyx-gutter), env(safe-area-inset-right, 0px));
  }

  html:not(.ay-force-desktop) .home-hero__actions,
  html:not(.ay-force-desktop) .home-value__actions,
  html:not(.ay-force-desktop) .home-promo__actions,
  html:not(.ay-force-desktop) .home-final-cta__actions {
    flex-direction: column;
    align-items: stretch;
  }

  html:not(.ay-force-desktop) .home-hero__btn,
  html:not(.ay-force-desktop) .home-value__cta,
  html:not(.ay-force-desktop) .home-promo__btn,
  html:not(.ay-force-desktop) .home-final-cta__btn,
  html:not(.ay-force-desktop) .home-categories__view-all {
    width: 100%;
  }

  html:not(.ay-force-desktop) .help-popup__fab {
    width: 44px;
    height: 44px;
  }

  html:not(.ay-force-desktop) .help-popup__tease {
    max-width: min(210px, calc(100vw - 5.25rem));
  }

  html:not(.ay-force-desktop) .help-popup__tease-text {
    white-space: normal;
  }
}