/* Final ProParts header/navigation UI layer.
 * Purpose: stable tablet breakpoint, clean burger button, and one consistent mobile menu style.
 */

.pp-header,
.pp-header * {
  box-sizing: border-box !important;
}

/* Never show the desktop sticky navigation in the tablet/small-laptop range. */
@media (max-width: 1320px) {
  .pp-desktop-sticky-nav,
  .pp-sticky-header,
  body.pp-sticky-active .pp-desktop-sticky-nav,
  html.pp-sticky-active .pp-desktop-sticky-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .pp-header {
    position: relative !important;
    z-index: 10020 !important;
    overflow: visible !important;
    background: #050608 !important;
  }

  .pp-header-inner {
    width: min(100% - 32px, 1240px) !important;
    max-width: 1240px !important;
    margin-inline: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 52px !important;
    grid-template-areas:
      "logo burger"
      "search search" !important;
    align-items: center !important;
    gap: 12px 16px !important;
    padding: 12px 0 14px !important;
  }

  .pp-logo {
    grid-area: logo !important;
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: min(190px, 72vw) !important;
    min-width: 0 !important;
  }

  .pp-logo .pp-logo-img-brand {
    display: block !important;
    width: auto !important;
    max-width: 190px !important;
    height: 58px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  .pp-logo .pp-logo-img-mobile-wordmark {
    display: none !important;
  }

  .pp-burger {
    grid-area: burger !important;
    justify-self: end !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.07) !important;
    color: #fff !important;
    box-shadow: none !important;
    outline: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
  }

  .pp-burger:hover,
  .pp-burger:focus-visible {
    border-color: rgba(234,31,39,.58) !important;
    background: rgba(234,31,39,.12) !important;
  }

  .pp-burger::before,
  .pp-burger::after {
    content: none !important;
    display: none !important;
  }

  .pp-burger span {
    display: block !important;
    width: 23px !important;
    height: 2px !important;
    min-height: 2px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #fff !important;
    opacity: 1 !important;
    transform-origin: center !important;
    transition: transform .18s ease, opacity .18s ease !important;
  }

  .pp-header.pp-mobile-menu-open .pp-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }

  .pp-header.pp-mobile-menu-open .pp-burger span:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(.2) !important;
  }

  .pp-header.pp-mobile-menu-open .pp-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  .pp-search {
    grid-area: search !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .pp-header-actions {
    display: none !important;
  }

  .pp-header > #pp-mobile-nav.pp-nav {
    display: none !important;
  }

  .pp-header.pp-mobile-menu-open > #pp-mobile-nav.pp-nav,
  body.pp-mobile-menu-active .pp-header > #pp-mobile-nav.pp-nav,
  #pp-mobile-nav.pp-nav.is-open {
    display: block !important;
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    padding: 14px !important;
    border: 1px solid rgba(226,232,240,.96) !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.985) !important;
    box-shadow: 0 22px 60px rgba(15,23,42,.24) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  #pp-mobile-nav .pp-nav-inner,
  #pp-mobile-nav .pp-mobile-auth-row,
  #pp-mobile-nav .pp-mobile-account-nav,
  #pp-mobile-nav .pp-mobile-guest-nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #pp-mobile-nav .pp-mobile-auth-row {
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid #e8edf3 !important;
  }

  #pp-mobile-nav a,
  #pp-mobile-nav .pp-cart-link-mobile {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 36px minmax(0,1fr) auto 18px !important;
    align-items: center !important;
    column-gap: 11px !important;
    width: 100% !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid transparent !important;
    border-radius: 16px !important;
    background: transparent !important;
    color: #172033 !important;
    box-shadow: none !important;
    font-size: 16px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
  }

  #pp-mobile-nav a::before,
  #pp-mobile-nav .pp-cart-link-mobile::before {
    content: "" !important;
    display: block !important;
    grid-column: 1 !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 11px !important;
    background-color: #fff1f2 !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 17px 17px !important;
  }

  #pp-mobile-nav .pp-nav-inner > a:nth-child(1)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e51d2a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3C/svg%3E") !important;
  }

  #pp-mobile-nav .pp-nav-inner > a:nth-child(2)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e51d2a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16l-1 13H5L4 7Z'/%3E%3Cpath d='M8 7a4 4 0 0 1 8 0'/%3E%3C/svg%3E") !important;
  }

  #pp-mobile-nav .pp-nav-inner > a:nth-child(3)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e51d2a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") !important;
  }

  #pp-mobile-nav .pp-nav-inner > a:nth-child(4)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e51d2a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.33 1.78.62 2.63a2 2 0 0 1-.45 2.11L8 9.73a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.85.29 1.73.5 2.63.62A2 2 0 0 1 22 16.92Z'/%3E%3C/svg%3E") !important;
  }

  #pp-mobile-nav .pp-cart-link-mobile::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e51d2a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1'/%3E%3Ccircle cx='19' cy='20' r='1'/%3E%3Cpath d='M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.6L21 8H6'/%3E%3C/svg%3E") !important;
  }

  #pp-mobile-nav .pp-mobile-account-nav a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e51d2a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E") !important;
  }

  #pp-mobile-nav .pp-mobile-login-link::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e51d2a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='m10 17 5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3C/svg%3E") !important;
  }

  #pp-mobile-nav .pp-mobile-register-link::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e51d2a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4Z'/%3E%3C/svg%3E") !important;
  }

  #pp-mobile-nav a::after,
  #pp-mobile-nav .pp-cart-link-mobile::after {
    content: "›" !important;
    display: block !important;
    grid-column: 4 !important;
    justify-self: end !important;
    color: #9aa4b2 !important;
    font-size: 25px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
  }

  #pp-mobile-nav .pp-cart-link-icon {
    display: none !important;
  }

  #pp-mobile-nav .pp-cart-link-label {
    grid-column: 2 !important;
    min-width: 0 !important;
  }

  #pp-mobile-nav .pp-cart-count {
    grid-column: 3 !important;
    justify-self: end !important;
    min-width: 24px !important;
    height: 24px !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    background: #e51d2a !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 24px !important;
    text-align: center !important;
  }

  #pp-mobile-nav a.active,
  #pp-mobile-nav a:hover,
  #pp-mobile-nav a:focus-visible,
  #pp-mobile-nav .pp-cart-link-mobile:hover,
  #pp-mobile-nav .pp-cart-link-mobile:focus-visible {
    border-color: rgba(229,29,42,.18) !important;
    background: #fff5f5 !important;
    color: #e51d2a !important;
    outline: none !important;
  }
}

@media (max-width: 767px) {
  .pp-header-inner {
    width: min(100% - 24px, 560px) !important;
    grid-template-columns: minmax(0, 1fr) 48px !important;
    gap: 10px 12px !important;
    padding: 10px 0 12px !important;
  }

  .pp-logo .pp-logo-img-brand {
    max-width: 155px !important;
    height: 48px !important;
  }

  .pp-burger {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 15px !important;
  }

  .pp-header.pp-mobile-menu-open > #pp-mobile-nav.pp-nav,
  body.pp-mobile-menu-active .pp-header > #pp-mobile-nav.pp-nav,
  #pp-mobile-nav.pp-nav.is-open {
    left: 12px !important;
    right: 12px !important;
    max-width: calc(100vw - 24px) !important;
    margin-inline: 0 !important;
  }
}

/* Full desktop remains simple and collision-free. */
@media (min-width: 1321px) {
  .pp-burger {
    display: none !important;
  }

  .pp-desktop-sticky-inner {
    min-width: 0 !important;
  }

  .pp-sticky-links,
  .pp-sticky-actions {
    min-width: 0 !important;
    flex-wrap: nowrap !important;
  }
}

/* 2026-07-17: final iPhone navbar cleanup. Keep one visual language and never render text/emoji glyph icons. */
@media (max-width: 767px) {
  body.pp-mobile-menu-active #pp-mobile-nav.pp-nav,
  .pp-header.pp-mobile-menu-open > #pp-mobile-nav.pp-nav,
  #pp-mobile-nav.pp-nav.is-open {
    top: 118px !important;
    left: 12px !important;
    right: 12px !important;
    bottom: auto !important;
    max-height: calc(100dvh - 132px) !important;
    padding: 10px !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .22) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.pp-mobile-menu-active #pp-mobile-nav.pp-nav a,
  body.pp-mobile-menu-active #pp-mobile-nav.pp-nav .pp-cart-link-mobile,
  .pp-header.pp-mobile-menu-open #pp-mobile-nav.pp-nav a,
  .pp-header.pp-mobile-menu-open #pp-mobile-nav.pp-nav .pp-cart-link-mobile {
    min-height: 52px !important;
    padding: 0 12px !important;
    grid-template-columns: 34px minmax(0, 1fr) auto 16px !important;
    column-gap: 10px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
  }

  body.pp-mobile-menu-active #pp-mobile-nav.pp-nav a::before,
  body.pp-mobile-menu-active #pp-mobile-nav.pp-nav .pp-cart-link-mobile::before,
  .pp-header.pp-mobile-menu-open #pp-mobile-nav.pp-nav a::before,
  .pp-header.pp-mobile-menu-open #pp-mobile-nav.pp-nav .pp-cart-link-mobile::before {
    content: "" !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    background-color: #fff1f2 !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 16px 16px !important;
  }

  body.pp-mobile-menu-active #pp-mobile-nav.pp-nav a::after,
  body.pp-mobile-menu-active #pp-mobile-nav.pp-nav .pp-cart-link-mobile::after,
  .pp-header.pp-mobile-menu-open #pp-mobile-nav.pp-nav a::after,
  .pp-header.pp-mobile-menu-open #pp-mobile-nav.pp-nav .pp-cart-link-mobile::after {
    content: "›" !important;
    font-family: Arial, sans-serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    color: #98a2b3 !important;
  }

  body.pp-mobile-menu-active #pp-mobile-nav.pp-nav a.active,
  .pp-header.pp-mobile-menu-open #pp-mobile-nav.pp-nav a.active {
    color: #d71920 !important;
    background: #fff6f6 !important;
    border-color: rgba(215, 25, 32, .18) !important;
  }
}

/* 2026-07-17 mobile nav icon/render fix */
@media (max-width: 1023px) {
  #pp-mobile-nav a::before,
  #pp-mobile-nav .pp-cart-link-mobile::before {
    display: none !important;
    content: none !important;
    background-image: none !important;
  }

  #pp-mobile-nav a,
  #pp-mobile-nav .pp-cart-link-mobile {
    grid-template-columns: 38px minmax(0,1fr) auto 18px !important;
  }

  #pp-mobile-nav .pp-mobile-nav-svg {
    grid-column: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 11px !important;
    background: #fff1f2 !important;
    color: #e51d2a !important;
    flex: 0 0 36px !important;
  }

  #pp-mobile-nav .pp-mobile-nav-svg svg {
    display: block !important;
    width: 19px !important;
    height: 19px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  #pp-mobile-nav .pp-nav-inner,
  #pp-mobile-nav .pp-mobile-auth-row,
  #pp-mobile-nav .pp-mobile-account-nav,
  #pp-mobile-nav .pp-mobile-guest-nav {
    gap: 4px !important;
  }

  #pp-mobile-nav a,
  #pp-mobile-nav .pp-cart-link-mobile {
    min-height: 58px !important;
    border-radius: 15px !important;
  }
}

/* 2026-07-17 V3: one icon container only; remove leftover legacy icon boxes. */
@media (max-width: 1023px) {
  #pp-mobile-nav .pp-nav-icon,
  #pp-mobile-nav .pp-menu-icon,
  #pp-mobile-nav a > span:not(.pp-mobile-nav-svg):empty,
  #pp-mobile-nav .pp-cart-link-mobile > span:not(.pp-mobile-nav-svg):empty {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #pp-mobile-nav a,
  #pp-mobile-nav .pp-cart-link-mobile {
    grid-template-columns: 36px minmax(0, 1fr) auto 18px !important;
    min-height: 56px !important;
    padding: 0 14px !important;
  }

  #pp-mobile-nav .pp-mobile-nav-svg {
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
  }
}


/* 2026-07-17 V4: final mobile-nav pseudo-icon reset.
   Earlier high-specificity rules kept drawing an extra empty pink square. */
@media (max-width: 1023px) {
  body.pp-mobile-menu-active #pp-mobile-nav.pp-nav a::before,
  body.pp-mobile-menu-active #pp-mobile-nav.pp-nav .pp-cart-link-mobile::before,
  .pp-header.pp-mobile-menu-open > #pp-mobile-nav.pp-nav a::before,
  .pp-header.pp-mobile-menu-open > #pp-mobile-nav.pp-nav .pp-cart-link-mobile::before,
  #pp-mobile-nav.pp-nav.is-open a::before,
  #pp-mobile-nav.pp-nav.is-open .pp-cart-link-mobile::before {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  }

  body.pp-mobile-menu-active #pp-mobile-nav.pp-nav a,
  body.pp-mobile-menu-active #pp-mobile-nav.pp-nav .pp-cart-link-mobile,
  .pp-header.pp-mobile-menu-open > #pp-mobile-nav.pp-nav a,
  .pp-header.pp-mobile-menu-open > #pp-mobile-nav.pp-nav .pp-cart-link-mobile,
  #pp-mobile-nav.pp-nav.is-open a,
  #pp-mobile-nav.pp-nav.is-open .pp-cart-link-mobile {
    grid-template-columns: 36px minmax(0, 1fr) auto 18px !important;
    min-height: 56px !important;
    padding: 0 14px !important;
  }

  #pp-mobile-nav .pp-mobile-nav-svg {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
}