/* ========================================
   MAYORSTHER MOBILE FIXES
   ======================================== */

/* MOBILE NAV MENU - dark background */
.xpro-elementor-horizontal-navbar-wrapper{
  background:rgba(11,6,5,.97)!important;
  color:#E8DED2!important
}
.xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav a{
  color:#E8DED2!important
}
.xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav li{
  border-color:rgba(199,81,19,.12)!important
}
.xpro-elementor-horizontal-menu-close{
  color:#E8DED2!important
}
.xpro-elementor-horizontal-menu-overlay{
  background:rgba(0,0,0,.6)!important
}

/* Chrome autofill dark */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 1000px #151011 inset!important;
  -webkit-text-fill-color:#E8DED2!important;
  transition:background-color 5000s ease-in-out 0s!important
}

/* Newsletter form inputs */
.elementor-element-nwForm input,
.elementor-element-ctNFm input{
  background:#151011!important;
  color:#E8DED2!important;
  border-color:rgba(199,81,19,.2)!important
}

@media(max-width:767px){

  /* HERO - center background */
  .elementor-element-hHero{
    background-position:center center!important;
    background-size:cover!important;
    padding:4rem 5% 3rem!important
  }

  /* GLOBAL - center all buttons on mobile */
  .elementor-widget-button{
    text-align:center!important;
    width:100%!important
  }
  .elementor-widget-button .elementor-button{
    margin:0 auto!important;
    display:block!important;
    text-align:center!important;
    width:80%!important;
    max-width:300px!important
  }

  /* BOOK DETAIL PAGES - force column stack */
  .elementor-element-bd1>.e-con{
    flex-direction:column!important;
    -webkit-flex-direction:column!important;
    text-align:center!important;
    padding:2rem 5%!important;
    gap:1.5rem!important
  }
  .elementor-element-bd1 .e-con{
    width:100%!important;
    max-width:100%!important;
    flex:none!important
  }
  /* Cover image centered and smaller */
  .elementor-element-bd1Cv,
  .elementor-element-bd1Cv img,
  .elementor-element-bd1 .e-con:first-child img{
    max-width:220px!important;
    margin:0 auto!important;
    display:block!important
  }
  .elementor-element-bd1H1{
    font-size:1.8rem!important;
    line-height:1.15!important
  }
  .elementor-element-bd1Hk{
    font-size:.88rem!important
  }
  .elementor-element-bd1Ch{
    justify-content:center!important;
    flex-wrap:wrap!important
  }
  .elementor-element-bd1Cr{
    font-size:.6rem!important;
    text-align:center!important
  }
  .elementor-element-bd1Ey{
    font-size:.6rem!important;
    text-align:center!important
  }

  /* Book detail meta strip */
  .elementor-element-bd2>.e-con{
    flex-wrap:wrap!important;
    gap:1rem!important
  }
  .elementor-element-bd2 .e-con{
    width:45%!important;
    min-width:130px!important;
    text-align:center!important
  }

  /* ABOUT PAGE - stack columns */
  .elementor-element-abGrid>.e-con,
  .elementor-element-abGrid>.elementor-element{
    flex-direction:column!important;
    -webkit-flex-direction:column!important
  }
  .elementor-element-abGrid .e-con,
  .elementor-element-abGrid>.e-con>.e-con{
    width:100%!important;
    max-width:100%!important;
    flex:none!important
  }
  .elementor-element-abGrid .elementor-widget-image img{
    max-width:260px!important;
    margin:0 auto!important;
    display:block!important
  }
  .elementor-element-abGrid .elementor-widget-image::after{
    display:none!important
  }

  /* About facts strip */
  .elementor-element-abFacts>.e-con{
    flex-direction:column!important;
    text-align:center!important;
    gap:1.5rem!important
  }
  .elementor-element-abFacts .e-con{
    width:100%!important
  }

  /* HOME - About section (hAbout) */
  .elementor-element-hAbout>.e-con{
    flex-direction:column!important;
    -webkit-flex-direction:column!important
  }
  .elementor-element-hAbout .e-con{
    width:100%!important;
    max-width:100%!important;
    flex:none!important
  }
  .elementor-element-hAbout .elementor-widget-image img{
    max-width:280px!important;
    margin:0 auto!important;
    display:block!important
  }

  /* HOME - Featured section */
  .elementor-element-hFeat>.e-con{
    flex-direction:column!important;
    text-align:center!important
  }
  .elementor-element-hFeat .e-con{
    width:100%!important
  }
  .elementor-element-hFeat img{
    max-width:260px!important;
    margin:0 auto!important
  }

  /* HOME - Preorder section */
  .elementor-element-hPre>.e-con{
    flex-direction:column!important;
    text-align:center!important
  }
  .elementor-element-hPre .e-con{
    width:100%!important
  }
  .elementor-element-hPre img{
    max-width:260px!important;
    margin:0 auto!important
  }

  /* CONTACT page */
  .elementor-element-ctGrid>.e-con{
    flex-direction:column!important
  }
  .elementor-element-ctGrid .e-con{
    width:100%!important
  }

  /* FOOTER */
  .elementor-element-ftrc{
    flex-direction:column!important;
    text-align:center!important;
    gap:1rem!important;
    padding:24px 5%!important
  }
  .elementor-element-ftrcopy{
    text-align:center!important
  }
  .elementor-element-ftrmenu .xpro-elementor-horizontal-navbar-nav{
    justify-content:center!important;
    flex-wrap:wrap!important
  }

  /* Review cards stack */
  .elementor-element-bd6Rv>.e-con,
  .elementor-element-bkRvCards>.e-con{
    width:100%!important;
    min-width:0!important
  }
  .elementor-element-bd6Rv,
  .elementor-element-bkRvCards{
    flex-direction:column!important
  }

  /* Newsletter form stack */
  .elementor-element-nwForm .wpforms-form,
  .elementor-element-ctNFm .wpforms-form{
    flex-direction:column!important
  }

  /* Reader pages */
  .mst-reader-wrap{padding:1rem 1rem 4rem!important}
  .mst-toc-wrap{padding:1rem 1rem 4rem!important}
  .mst-nav{flex-wrap:wrap!important;justify-content:center!important;gap:.6rem!important}

  /* Auth page */
  .mst-auth-wrap{padding:3rem 1rem!important}
  .mst-auth-tabs{width:100%}
  .mst-tab{flex:1;text-align:center}

  /* Free reader shelf */
  .mst-shelf-item{width:130px!important}
  .mst-shelf-title{font-size:.9rem!important}

  /* Books shelf - keep readable */
  .mst-shelf-row>.e-con{
    min-width:140px!important
  }

  /* ===== ROUND 3 FIXES ===== */

  /* FIX: mobile offcanvas nav panel - Elementor's own generated post-13.css
     hardcodes light-gray backgrounds on the real selector chain
     (.xpro-elementor-horizontal-menu-responsive-tablet/-mobile .xpro-elementor-horizontal-navbar-nav > li > a)
     with higher specificity than anything we'd written before - none of our
     earlier rules (wrapper-level, or missing the > li > a chain) ever matched it. */
  .elementor-element-hdrmenu .xpro-elementor-horizontal-menu-responsive-tablet,
  .elementor-element-hdrmenu .xpro-elementor-horizontal-menu-responsive-mobile{
    background-color:#0B0605!important
  }
  .elementor-element-hdrmenu .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav>li>a,
  .elementor-element-hdrmenu .xpro-elementor-horizontal-menu-responsive-mobile .xpro-elementor-horizontal-navbar-nav>li>a{
    background:transparent!important;
    color:#E8DED2!important;
    border-bottom-color:rgba(243,229,216,.12)!important;
    font-family:Outfit,sans-serif!important;
    letter-spacing:1px!important
  }
  .elementor-element-hdrmenu .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav>li.current-menu-item>a,
  .elementor-element-hdrmenu .xpro-elementor-horizontal-menu-responsive-mobile .xpro-elementor-horizontal-navbar-nav>li.current-menu-item>a{
    background:transparent!important;
    color:#E8813A!important
  }
  .elementor-element-hdrmenu .xpro-elementor-horizontal-menu-close{
    color:#E8DED2!important
  }
  button.xpro-elementor-horizontal-menu-close{
    background-color:transparent!important;
    color:#E8DED2!important;
    border:1px solid rgba(243,229,216,.2)!important;
    border-radius:50%!important
  }

  /* FIX: two-column boxed containers (abGrid, hAbout, hFeat, hPre, ctGrid) never
     stacked on mobile - Elementor wraps "boxed" containers in a plain .e-con-inner
     div with no .e-con class, so our old "> .e-con" child selectors matched
     nothing. Target the container's own class instead - that's where
     flex-direction actually lives inline. */
  .elementor-element-abGrid,
  .elementor-element-hAbout,
  .elementor-element-hFeat,
  .elementor-element-hPre,
  .elementor-element-ctGrid{
    flex-direction:column!important;
    -webkit-flex-direction:column!important;
    text-align:center!important
  }
  .elementor-element-abGrid>.e-con-inner,
  .elementor-element-hAbout>.e-con-inner,
  .elementor-element-hFeat>.e-con-inner,
  .elementor-element-hPre>.e-con-inner,
  .elementor-element-ctGrid>.e-con-inner{
    flex-direction:column!important;
    -webkit-flex-direction:column!important;
    width:100%!important
  }
  .elementor-element-abGrid .e-con-inner>.e-con,
  .elementor-element-hAbout .e-con-inner>.e-con,
  .elementor-element-hFeat .e-con-inner>.e-con,
  .elementor-element-hPre .e-con-inner>.e-con,
  .elementor-element-ctGrid .e-con-inner>.e-con{
    width:100%!important;
    max-width:100%!important;
    flex:none!important
  }
  .elementor-element-abImg .elementor-widget-image img,
  .elementor-element-abFig img{
    max-width:260px!important;
    margin:0 auto 1.5rem!important;
    display:block!important
  }
  /* FIX: portrait was rendering AFTER the bio text, CTA buttons, and social
     icons (raw DOM order: abCopy then abFig) - reorder it to the top of the
     stack, ahead of the bio copy, so it reads as a proper author photo
     instead of a stray image dangling below the "Join the list" button. */
  .elementor-element-abFig{
    order:-1!important;
    margin-bottom:.5rem!important
  }
}

/* ===== ROUND 4: BOOKS PAGE MOBILE CARD REDESIGN =====
   The 3-up (Heart of the Feral) and 2-up (Savage Temptation, Standalones)
   shelves were squeezing full book cards into narrow columns on a 390px
   screen - covers tiny, titles wrapping unevenly, ratings/CTA links landing
   at different heights per card, and the last card's "View the book" link
   sitting right under Astra's floating scroll-to-top button. Restructured
   as a single stacked column of full-width, self-contained book cards. */
@media(max-width:767px){

  .elementor-element-bkShelf,
  .elementor-element-bkSvShelf,
  .elementor-element-bkStShelf{
    flex-direction:column!important;
    -webkit-flex-direction:column!important;
    gap:0!important
  }
  .elementor-element-bkShelf>.e-con-inner,
  .elementor-element-bkSvShelf>.e-con-inner,
  .elementor-element-bkStShelf>.e-con-inner{
    flex-direction:column!important;
    -webkit-flex-direction:column!important;
    width:100%!important
  }
  .elementor-element-bkShelf>*,
  .elementor-element-bkSvShelf>*,
  .elementor-element-bkStShelf>*,
  .elementor-element-bkShelf .e-con-inner>*,
  .elementor-element-bkSvShelf .e-con-inner>*,
  .elementor-element-bkStShelf .e-con-inner>*{
    width:100%!important;
    max-width:360px!important;
    margin:0 auto!important;
    flex:none!important
  }

  /* Each book card: centered column, divider between cards instead of a grid */
  .elementor-element-bkV1,.elementor-element-bkV2,.elementor-element-bkV3,
  .elementor-element-bkSv1,.elementor-element-bkSv2,
  .elementor-element-bkD3,.elementor-element-bkD4{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    text-align:center!important;
    padding:2.25rem 1rem!important;
    border-top:1px solid rgba(243,229,216,.12)!important
  }
  .elementor-element-bkV1,.elementor-element-bkSv1,.elementor-element-bkD3{
    border-top:none!important;
    padding-top:.5rem!important
  }

  .elementor-element-bkV1 .elementor-widget-image,.elementor-element-bkV2 .elementor-widget-image,.elementor-element-bkV3 .elementor-widget-image,
  .elementor-element-bkSv1 .elementor-widget-image,.elementor-element-bkSv2 .elementor-widget-image,
  .elementor-element-bkD3 .elementor-widget-image,.elementor-element-bkD4 .elementor-widget-image{
    max-width:190px!important;
    margin:0 auto 1.25rem!important
  }
  .elementor-element-bkV1 img,.elementor-element-bkV2 img,.elementor-element-bkV3 img,
  .elementor-element-bkSv1 img,.elementor-element-bkSv2 img,
  .elementor-element-bkD3 img,.elementor-element-bkD4 img{
    border-radius:4px!important;
    box-shadow:0 14px 32px rgba(0,0,0,.5)!important
  }

  .elementor-element-bkV1T,.elementor-element-bkV2T,.elementor-element-bkV3T,
  .elementor-element-bkSv1T,.elementor-element-bkSv2T,
  .elementor-element-bkD3T,.elementor-element-bkD4T{
    font-size:1.4rem!important;
    line-height:1.2!important;
    margin-bottom:.4rem!important
  }

  .elementor-element-bkV1S,.elementor-element-bkV2S,.elementor-element-bkV3S,
  .elementor-element-bkSv1S,.elementor-element-bkSv2S,
  .elementor-element-bkD3S,.elementor-element-bkD4S{
    font-size:.72rem!important;
    letter-spacing:.12em!important;
    text-transform:uppercase!important;
    color:#C75113!important;
    margin-bottom:.85rem!important
  }

  .elementor-element-bkV1R,.elementor-element-bkV2R,.elementor-element-bkV3R,
  .elementor-element-bkSv1R,.elementor-element-bkSv2R,
  .elementor-element-bkD3R,.elementor-element-bkD4R{
    font-size:.85rem!important;
    margin-bottom:1.25rem!important;
    white-space:normal!important
  }
  .elementor-element-bkV1R span,.elementor-element-bkV2R span,.elementor-element-bkV3R span{
    display:inline-block!important;
    margin:.3em 0 0!important
  }

  /* CTA as a real pill button - was plain left-aligned text that could land
     under the floating scroll-to-top button */
  .elementor-element-bkV1Lnk,.elementor-element-bkV2Lnk,.elementor-element-bkV3Lnk,
  .elementor-element-bkSv1Lnk,.elementor-element-bkSv2Lnk,
  .elementor-element-bkD3Lnk,.elementor-element-bkD4Lnk{
    display:inline-block!important;
    font-size:.72rem!important;
    letter-spacing:.1em!important;
    border:1px solid rgba(232,129,58,.5)!important;
    color:#E8813A!important;
    padding:.6em 1.5em!important;
    border-radius:999px!important
  }

  /* Give the last shelf clearance so its final card never sits behind the
     floating scroll-to-top button at rest */
  .elementor-element-bkStShelf{
    padding-bottom:2rem!important
  }

  /* Astra's floating scroll-to-top button - smaller and tucked closer to the
     corner on mobile so it can't overlap card content */
  #ast-scroll-top{
    width:2.3em!important;
    height:2.3em!important;
    bottom:14px!important;
    right:12px!important
  }
}

/* ===== ROUND 5: SIGN IN/OUT LINK IN MOBILE MENU =====
   mst-nav-account.php styles this link as a standalone ember pill button
   (border, radius, padding) meant for the desktop bar, with a mobile
   display:none meant to hide it there - but it shares the exact same <ul>
   as the offcanvas panel, and XPro's own nav-link CSS sets display:flex on
   it with higher precedence, so the "hide on mobile" rule never actually
   wins and it shows up in the offcanvas still wearing the desktop pill
   look. Hiding it entirely would also remove a genuinely useful Sign In
   link from the mobile menu, so instead: strip the pill styling inside the
   offcanvas panel specifically, so it reads as a normal menu item like its
   siblings. Desktop bar (outside this panel) is untouched. */
@media(max-width:767px){
  .elementor-element-hdrmenu .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav>li>a.mst-nav-account,
  .elementor-element-hdrmenu .xpro-elementor-horizontal-menu-responsive-mobile .xpro-elementor-horizontal-navbar-nav>li>a.mst-nav-account{
    border:none!important;
    border-bottom:1px solid rgba(243,229,216,.12)!important;
    border-radius:0!important;
    background:transparent!important;
    color:#E8DED2!important;
    justify-content:flex-start!important;
    text-align:left!important;
    margin-left:0!important;
    font-family:Outfit,sans-serif!important;
    letter-spacing:1px!important;
    text-transform:uppercase!important
  }
}