/* AdeptDEV Market — PWA Adaptive UI v1.3.0
   Fluid phone/tablet adaptation + standalone safe areas. */
:root {
  --ad-pwa-safe-top: env(safe-area-inset-top, 0px);
  --ad-pwa-safe-right: env(safe-area-inset-right, 0px);
  --ad-pwa-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ad-pwa-safe-left: env(safe-area-inset-left, 0px);
  --ad-pwa-phone-gap: clamp(8px, 2.4vw, 14px);
}

html, body {
  max-width: 100%;
  overflow-x: clip;
}

@supports (height: 100dvh) {
  html, body { min-height: 100dvh; }
}

@media (max-width: 900px) {
  .nx-shell {
    width: min(calc(100% - (var(--ad-pwa-phone-gap) * 2)), var(--nx-container));
  }

  .nx-main__inner {
    gap: clamp(7px, 2.2vw, 14px);
    min-height: clamp(64px, 17vw, 78px);
  }

  .nx-logo { min-width: 0; }

  .nx-logo img {
    width: auto;
    max-width: clamp(104px, 31vw, 140px);
    max-height: clamp(38px, 11vw, 48px);
    object-fit: contain;
  }

  .nx-pwa-install.is-visible {
    min-width: 0;
    max-width: min(44vw, 190px);
    padding: clamp(7px, 2vw, 10px) clamp(8px, 2.4vw, 13px);
    gap: clamp(6px, 1.8vw, 9px);
    border-radius: clamp(12px, 3.5vw, 16px);
  }

  .nx-pwa-install__icon {
    flex: 0 0 clamp(29px, 8.4vw, 36px);
    width: clamp(29px, 8.4vw, 36px);
    height: clamp(29px, 8.4vw, 36px);
  }

  .nx-pwa-install__text { min-width: 0; }
  .nx-pwa-install__text strong { font-size: clamp(10px, 2.8vw, 12px); }
  .nx-pwa-install__text span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(9px, 2.55vw, 11px);
  }

  .nx-mobile-bottom {
    right: max(var(--ad-pwa-phone-gap), var(--ad-pwa-safe-right));
    left: max(var(--ad-pwa-phone-gap), var(--ad-pwa-safe-left));
    bottom: max(var(--ad-pwa-phone-gap), var(--ad-pwa-safe-bottom));
    min-height: clamp(60px, 16vw, 68px);
    border-radius: clamp(16px, 5vw, 22px);
  }

  .nx-pwa-success,
  .nx-pwa-ios-guide {
    padding-right: max(14px, var(--ad-pwa-safe-right));
    padding-bottom: max(14px, var(--ad-pwa-safe-bottom));
    padding-left: max(14px, var(--ad-pwa-safe-left));
  }

  .nx-pwa-success__card,
  .nx-pwa-ios-guide__card {
    width: min(100%, 430px);
    max-height: calc(100dvh - var(--ad-pwa-safe-top) - var(--ad-pwa-safe-bottom) - 28px);
    overflow: auto;
    overscroll-behavior: contain;
  }
}

@media (max-width: 359.98px) {
  .nx-main__inner { gap: 6px; }
  .nx-logo img { max-width: 96px; }
  .nx-pwa-install.is-visible { max-width: 132px; padding-inline: 7px; }
  .nx-pwa-install__text span { max-width: 74px; }
}

@media (min-width: 600px) and (max-width: 900px) {
  .nx-main__inner { min-height: 78px; }
  .nx-logo img { max-width: 150px; }
  .nx-pwa-install.is-visible { max-width: 205px; }
}

@media (display-mode: standalone) {
  html { background: var(--nx-bg, #ffffff); }

  body {
    min-height: 100dvh;
    padding-right: var(--ad-pwa-safe-right);
    padding-left: var(--ad-pwa-safe-left);
    padding-bottom: calc(86px + var(--ad-pwa-safe-bottom));
    overscroll-behavior-y: contain;
    -webkit-tap-highlight-color: transparent;
  }

  .nx-header { padding-top: var(--ad-pwa-safe-top); }
  .nx-sticky-shell, .nx-sticky-core { top: var(--ad-pwa-safe-top); }
  .nx-mobile-bottom { bottom: max(8px, var(--ad-pwa-safe-bottom)); }
  .nx-pwa-install { display: none !important; }
}

html.nx-ios-standalone .nx-pwa-install { display: none !important; }

@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  .nx-main__inner { min-height: 58px; }
  .nx-logo img { max-height: 38px; }
  .nx-mobile-bottom { min-height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .nx-pwa-install.is-visible { animation: none !important; }
}


/* AdeptDEV Market — PWA phone adaptation v1.5.0 */
html.nx-pwa-modal-open,
html.nx-pwa-modal-open body {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

@media (max-width: 900px) {
  .nx-pwa-install.is-visible {
    display: inline-flex !important;
    max-width: min(42vw, 176px) !important;
  }

  .nx-pwa-success,
  .nx-pwa-ios-guide {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100svh !important;
    padding-top: max(12px, env(safe-area-inset-top)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    overflow: hidden !important;
  }

  .nx-pwa-ios-guide {
    align-items: flex-end !important;
  }

  .nx-pwa-success {
    align-items: center !important;
  }

  .nx-pwa-success__card,
  .nx-pwa-ios-guide__card {
    box-sizing: border-box !important;
    width: min(100%, 430px) !important;
    max-width: 100% !important;
    max-height: calc(100dvh - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom))) !important;
    margin: 0 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    border-radius: clamp(18px, 5vw, 24px) !important;
    padding: clamp(18px, 5vw, 24px) clamp(16px, 4.5vw, 20px) clamp(16px, 4.5vw, 20px) !important;
  }

  .nx-pwa-ios-guide__x {
    top: clamp(10px, 3vw, 14px) !important;
    right: clamp(10px, 3vw, 14px) !important;
  }

  .nx-pwa-ios-guide__app,
  .nx-pwa-success__check {
    width: clamp(48px, 14vw, 58px) !important;
    height: clamp(48px, 14vw, 58px) !important;
    border-radius: clamp(14px, 4vw, 18px) !important;
  }

  .nx-pwa-ios-guide__title,
  .nx-pwa-success__title {
    font-size: clamp(18px, 5.2vw, 21px) !important;
  }

  .nx-pwa-ios-guide__lead,
  .nx-pwa-success__text,
  .nx-pwa-ios-guide__step {
    font-size: clamp(12px, 3.5vw, 14px) !important;
  }

  .nx-pwa-ios-guide__step {
    grid-template-columns: clamp(28px, 8vw, 32px) minmax(0, 1fr) !important;
    padding: clamp(9px, 2.8vw, 12px) !important;
  }

  .nx-pwa-ios-guide__done,
  .nx-pwa-success__close {
    min-height: clamp(44px, 12vw, 50px) !important;
  }
}

@media (max-width: 360px) {
  .nx-pwa-ios-guide__browser { display: none !important; }
  .nx-pwa-ios-guide__lead { margin-bottom: 12px !important; }
  .nx-pwa-ios-guide__steps { gap: 7px !important; }
  .nx-pwa-install.is-visible { max-width: 138px !important; }
}

/* Standalone app must never sit under iOS/Android system status bars. */
@media (display-mode: standalone) {
  .nx-header {
    padding-top: 0 !important;
  }

  .nx-sticky-core {
    padding-top: env(safe-area-inset-top) !important;
    box-sizing: border-box !important;
  }

  .nx-sticky-core.is-stuck {
    top: 0 !important;
    padding-top: env(safe-area-inset-top) !important;
  }

  .nx-sticky-shell.is-fixed-shell {
    min-height: calc(var(--nx-sticky-height, 0px) + env(safe-area-inset-top)) !important;
  }

  .nx-main__inner {
    min-height: clamp(60px, 16vw, 72px) !important;
  }

  .nx-mobile-bottom {
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    left: max(8px, env(safe-area-inset-left)) !important;
  }

  body {
    padding-bottom: calc(clamp(76px, 20vw, 92px) + env(safe-area-inset-bottom)) !important;
  }
}

html.nx-ios-standalone .nx-sticky-core {
  padding-top: env(safe-area-inset-top) !important;
}


/* AdeptDEV Market — compact install CTA beside mini-cart v1.6.0 */
@media (max-width: 900px) {
  .nx-actions {
    gap: clamp(7px, 2vw, 9px) !important;
  }

  .nx-actions .nx-pwa-install.is-visible {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: auto !important;
    display: inline-flex !important;
    flex: 0 0 48px !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    gap: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(217,77,121,.40) !important;
    border-radius: 14px !important;
    background: var(--nx-bg-elevated) !important;
    color: var(--nx-accent, #a72d52) !important;
    box-shadow: 0 0 0 0 rgba(217,77,121,.16) !important;
    animation: nxPwaCompactPulse 2.2s ease-in-out infinite !important;
    overflow: visible !important;
  }

  .nx-actions .nx-pwa-install__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: 23px !important;
    height: 23px !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: currentColor !important;
  }

  .nx-actions .nx-pwa-install__icon svg {
    width: 22px !important;
    height: 22px !important;
  }

  .nx-actions .nx-pwa-install__badge {
    position: absolute !important;
    right: -5px !important;
    bottom: -5px !important;
    min-width: 27px !important;
    height: 16px !important;
    padding: 0 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid var(--nx-bg-elevated) !important;
    border-radius: 999px !important;
    background: var(--nx-accent, #a72d52) !important;
    color: #fff !important;
    font-size: 7px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .04em !important;
  }

  .nx-actions .nx-pwa-install:hover,
  .nx-actions .nx-pwa-install:focus-visible {
    border-color: var(--nx-accent, #a72d52) !important;
    background: var(--nx-accent-soft) !important;
    color: var(--nx-accent, #a72d52) !important;
    transform: none !important;
    outline: none !important;
  }

  body.nx-dark .nx-actions .nx-pwa-install.is-visible {
    background: var(--nx-bg-elevated) !important;
    color: #d94d79 !important;
    border-color: rgba(217,77,121,.48) !important;
  }
}

@keyframes nxPwaCompactPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217,77,121,.16); }
  50% { box-shadow: 0 0 0 5px rgba(217,77,121,0); }
}

@media (max-width: 359.98px) {
  .nx-actions .nx-pwa-install.is-visible {
    flex-basis: 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 13px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nx-actions .nx-pwa-install.is-visible { animation: none !important; }
}


/* =========================================================
   AdeptDEV PWA v1.7 FINAL — Android install CTA next to mini-cart
   Never place the install CTA in/over the logo area.
   ========================================================= */
@media (max-width: 767px) {
  .nx-pwa-install,
  #adeptdev-pwa-install,
  [data-pwa-install] {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 148px !important;
    height: 48px !important;
    margin: 0 6px 0 0 !important;
    padding: 0 10px !important;
    border-radius: 14px !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    white-space: nowrap !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    z-index: auto !important;
    box-sizing: border-box !important;
  }

  .nx-pwa-install.is-visible,
  #adeptdev-pwa-install.is-visible,
  [data-pwa-install].is-visible {
    display: inline-flex !important;
  }

  .nx-pwa-install-label {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-width: 0 !important;
    line-height: 1.02 !important;
  }

  .nx-pwa-install-label > span {
    display: block !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    opacity: .78 !important;
    letter-spacing: .01em !important;
  }

  .nx-pwa-install-label > strong {
    display: block !important;
    margin-top: 2px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .01em !important;
  }

  .nx-pwa-install-icon {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
  }

  /* Keep logo untouched and give actions their own right-side row space. */
  .nx-logo,
  .header-logo,
  #logo {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .nx-actions,
  .header-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    margin-left: auto !important;
  }
}

/* On very narrow phones keep the original wording, just tighter. */
@media (max-width: 360px) {
  .nx-pwa-install,
  #adeptdev-pwa-install,
  [data-pwa-install] {
    max-width: 124px !important;
    height: 44px !important;
    padding: 0 8px !important;
    margin-right: 4px !important;
  }

  .nx-pwa-install-icon {
    width: 26px !important;
    height: 26px !important;
    flex-basis: 26px !important;
  }

  .nx-pwa-install-label > span { font-size: 9px !important; }
  .nx-pwa-install-label > strong { font-size: 10px !important; }
}

/* =========================================================
   AdeptDEV PWA v1.8 — FINAL MOBILE INSTALL BUTTON
   Exact layout: logo | [install CTA + mini-cart]
   ========================================================= */
@media (max-width: 900px) {
  .nx-main__inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 8px !important;
  }

  .nx-main__inner > .nx-logo {
    grid-column: 1 !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
  }

  .nx-main__inner > .nx-search-zone {
    display: none !important;
  }

  .nx-main__inner > .nx-actions {
    grid-column: 2 !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    flex-wrap: nowrap !important;
  }

  .nx-actions > .nx-pwa-install {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    flex: 0 0 auto !important;
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 5px 9px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(183, 41, 84, .38) !important;
    border-radius: 14px !important;
    background: rgba(167,45,82,.07) !important;
    color: #a72d52 !important;
    box-shadow: 0 0 0 1px rgba(217,77,121,.08), 0 4px 12px rgba(116,28,57,.06) !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  .nx-actions > .nx-pwa-install:not(.is-visible) {
    display: none !important;
  }

  .nx-actions > .nx-pwa-install.is-visible {
    display: inline-flex !important;
    animation: nxPwaThinPulse 2.4s ease-in-out infinite !important;
  }

  .nx-actions > .nx-pwa-install .nx-pwa-install__icon {
    display: inline-flex !important;
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9px !important;
    background: rgba(167,45,82,.10) !important;
    color: #d94d79 !important;
  }

  .nx-actions > .nx-pwa-install .nx-pwa-install__icon svg {
    width: 18px !important;
    height: 18px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  .nx-actions > .nx-pwa-install .nx-pwa-install__text {
    display: flex !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 2px !important;
    overflow: hidden !important;
  }

  .nx-actions > .nx-pwa-install .nx-pwa-install__text strong {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    line-height: 1.05 !important;
    letter-spacing: .01em !important;
    color: var(--nx-text, #19171a) !important;
  }

  .nx-actions > .nx-pwa-install .nx-pwa-install__text span {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    color: #d94d79 !important;
  }

  .nx-actions > .nx-cart-safe {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  body.nx-dark .nx-actions > .nx-pwa-install {
    background: rgba(167,45,82,.12) !important;
    border-color: rgba(217,77,121,.42) !important;
  }

  body.nx-dark .nx-actions > .nx-pwa-install .nx-pwa-install__text strong {
    color: #fff !important;
  }
}

@media (max-width: 390px) {
  .nx-main__inner { column-gap: 6px !important; }
  .nx-main__inner > .nx-actions { gap: 5px !important; }
  .nx-actions > .nx-pwa-install {
    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 4px 7px !important;
    gap: 6px !important;
    border-radius: 13px !important;
  }
  .nx-actions > .nx-pwa-install .nx-pwa-install__icon {
    flex-basis: 28px !important;
    width: 28px !important;
    height: 28px !important;
  }
  .nx-actions > .nx-pwa-install .nx-pwa-install__text strong,
  .nx-actions > .nx-pwa-install .nx-pwa-install__text span {
    font-size: 9px !important;
  }
}

@media (max-width: 350px) {
  .nx-actions > .nx-pwa-install {
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
  }
  .nx-actions > .nx-pwa-install .nx-pwa-install__text strong { font-size: 8px !important; }
  .nx-actions > .nx-pwa-install .nx-pwa-install__text span { font-size: 8px !important; }
}

@keyframes nxPwaThinPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(217,77,121,.11), 0 4px 12px rgba(116,28,57,.06); }
  50% { box-shadow: 0 0 0 4px rgba(217,77,121,0), 0 4px 12px rgba(116,28,57,.06); }
}

@media (prefers-reduced-motion: reduce) {
  .nx-actions > .nx-pwa-install.is-visible { animation: none !important; }
}