/* ==========================================================================
   Mobile hamburger drawer — 6-item off-canvas, OVERLAY from the right.
   Mobile only (<=768px). Gated by pp_mobile_hamburger_menu_v1.
   Navy/gold to match the recolored gate + sale-aligned skin.
   ========================================================================== */

/* --- Mobile header: reveal the REAL hamburger + fold the inline icon nav into the drawer.
   The 'mobile-header-compact-v2' feature hides .menu-toggle via a body-class-scoped rule
   (specificity 1,2,2) and shows inline icons instead; we override at higher specificity
   (1,2,3) so the hamburger returns, and hide the inline nav so the drawer is the menu. --- */
@media (max-width: 768px) {
  html body.pp-mobile-header-compact-v2 nav#mobile-header .menu-toggle,
  html body nav#mobile-header .menu-toggle {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    margin: 0 !important;
    background: #002952 !important; /* navy button: visible on the white header */
    border: 0 !important;
    border-radius: 8px !important;
    cursor: pointer;
    order: 9 !important; /* far right of the header row */
  }
  /* The theme forces the menu-toggle glyph white; pair it with the navy button
     above so the bars stay visible (white-on-navy) and never white-on-white. */
  #mobile-header .menu-toggle .gp-icon,
  #mobile-header .menu-toggle .gp-icon svg {
    display: inline-block !important;
    width: 24px !important;
    height: 24px !important;
    fill: #ffffff !important;
    color: #ffffff !important;
  }
  /* Owner wants the inline quick icons KEPT — so we do NOT hide the inline nav.
     The hamburger is simply ADDED at the far right (order:9 above), which pushes the
     cart (and the quick icons) leftward. Logo stays far left. */
  #mobile-header .inside-navigation {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }
  #mobile-header .site-logo {
    margin-right: auto !important;
  }
  /* Keep the row from overflowing once the hamburger is added. */
  #mobile-header .menu-toggle {
    margin-left: 4px !important;
    flex: 0 0 auto !important;
  }
}

@media (max-width: 768px) {
  #pp-mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    width: min(84vw, 332px);
    background: #002952;
    color: #fff;
    transform: translateX(102%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100001;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 34px rgba(0, 12, 28, 0.38);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
  }
  body.pp-mm-open #pp-mobile-menu {
    transform: translateX(0);
    visibility: visible;
  }

  .pp-mm-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 12, 28, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease;
    z-index: 100000;
  }
  body.pp-mm-open .pp-mm-scrim {
    opacity: 1;
    visibility: visible;
  }
  body.pp-mm-open {
    overflow: hidden;
  }

  .pp-mm__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    flex: 0 0 auto;
  }
  .pp-mm__title {
    font-family: var(--ppv2-font-heading, 'Figtree', system-ui, sans-serif);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #d8b657;
    margin: 0;
  }
  .pp-mm__close {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    color: #fff;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 8px;
    margin: -8px -8px -8px 0;
  }
  /* The global v2 button rule (pp-bundle-base.css, inside @media (hover:none))
     paints ANY non-ghost <button> #003D82 with !important on :hover/:focus/:active.
     The drawer programmatically focuses THIS close button on open (a11y), so on a
     touch device it rendered as a solid blue square with the X washed out. Pin it
     transparent + white X across states, id-scoped (1,2,x) to outrank that
     (0,3,2) global rule even with !important. */
  #pp-mobile-menu .pp-mm__close,
  #pp-mobile-menu .pp-mm__close:hover,
  #pp-mobile-menu .pp-mm__close:focus,
  #pp-mobile-menu .pp-mm__close:active {
    background: transparent !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: none !important;
    outline: none;
  }
  /* The X SVG had no CSS width, so the flex button collapsed it to width:0
     (the link icons survive because they set flex:0 0 auto + an explicit width).
     visibility:visible also survives the branded-loader's body * {visibility:hidden}.
     overflow:visible guards against the 0-box clipping the strokes. */
  #pp-mobile-menu .pp-mm__close svg {
    flex: 0 0 auto !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    visibility: visible !important;
    overflow: visible !important;
    stroke: #fff !important;
    fill: none !important;
  }
  #pp-mobile-menu .pp-mm__close svg line {
    stroke: #fff !important;
  }
  /* Keep a subtle affordance for pointer-hover + real keyboard focus only
     (programmatic .focus() on open matches :focus, not :focus-visible). */
  #pp-mobile-menu .pp-mm__close:hover,
  #pp-mobile-menu .pp-mm__close:focus-visible {
    background: rgba(255, 255, 255, 0.12) !important;
  }

  /* Live product search in the drawer (auto-suggest as you type).
     The form is the positioning context; pp-header-search-suggest.js appends its
     .pp-search-suggestions panel here (input.parentElement) since there's no
     .pp-search-dropdown ancestor — so the panel anchors under the field. */
  #pp-mobile-menu .pp-mm__search {
    padding: 14px 20px 8px;
    flex: 0 0 auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  #pp-mobile-menu .pp-mm__search-form {
    position: relative;
    margin: 0;
  }
  #pp-mobile-menu .pp-mm__search-ic {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    pointer-events: none;
  }
  /* !important throughout: the desktop .pp-search-input rules (overrides bundle)
     set padding/background/color with !important, so a plain rule here loses even
     at higher specificity — which left the text under the icon + the field dark. */
  #pp-mobile-menu .pp-mm__search .pp-search-input {
    width: 100% !important;
    height: 44px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 14px 0 40px !important; /* left clears the magnifier icon at left:12 */
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 16px !important; /* >=16px so iOS doesn't zoom on focus */
    line-height: 44px !important;
    font-family: inherit !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }
  #pp-mobile-menu .pp-mm__search .pp-search-input::placeholder { color: #94a3b8 !important; }
  #pp-mobile-menu .pp-mm__search .pp-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
  #pp-mobile-menu .pp-mm__search .pp-search-input:focus {
    outline: none !important;
    border-color: #d8b657 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 0 0 2px rgba(216, 182, 87, 0.35) !important;
  }
  /* The shared .pp-search-suggestions panel is position:absolute; top:100%;
     left/right:0 — anchored to the form here. Lift it above the drawer content. */
  #pp-mobile-menu .pp-mm__search-form .pp-search-suggestions {
    z-index: 100002;
    margin-top: 4px;
  }

  .pp-mm__nav {
    display: flex;
    flex-direction: column;
    padding: 6px 0 24px;
  }
  /* id-scoped (1,1,0) so the white text beats page-scoped <a> color rules — e.g.
     the WooCommerce-checkout link styling that was rendering these light-blue. */
  #pp-mobile-menu .pp-mm__link,
  #pp-mobile-menu .pp-mm__link:link,
  #pp-mobile-menu .pp-mm__link:visited {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 54px;
    padding: 0 22px;
    color: #fff !important;
    text-decoration: none !important;
    font-family: var(--ppv2-font-body, 'Noto Sans', system-ui, sans-serif);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    border-left: 3px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }
  #pp-mobile-menu .pp-mm__link svg {
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
    color: #d8b657;
    stroke: #d8b657;
  }
  #pp-mobile-menu .pp-mm__link:hover,
  #pp-mobile-menu .pp-mm__link:focus-visible,
  #pp-mobile-menu .pp-mm__link:active {
    background: rgba(255, 255, 255, 0.07);
    border-left-color: #b8932e;
    color: #fff !important;
    outline: none;
  }

  /* We take over the existing GP mobile hamburger, so suppress GP's own slideout. */
  #generate-slideout-menu,
  .slideout-overlay {
    display: none !important;
  }

  @media (prefers-reduced-motion: reduce) {
    #pp-mobile-menu,
    .pp-mm-scrim {
      transition: none;
    }
  }
}

/* Desktop: the drawer never participates. */
@media (min-width: 769px) {
  #pp-mobile-menu,
  .pp-mm-scrim {
    display: none !important;
  }
}