/* v1.10.10: final layering, full clipboard visibility, mobile breathing room, and explicit social settings support. Loaded last. */

/* Desktop: keep the approved composition, but fully contain the clipboard and set the requested layer order. */
.ppx .ppx-phone{
  right:calc(2px + var(--pp-phone-x))!important;
  top:calc(84px + var(--pp-phone-y))!important;
  width:170px!important;
  z-index:14!important; /* behind clipboard */
}
.ppx .ppx-clipboard{
  right:calc(8px + var(--pp-clipboard-x))!important;
  bottom:calc(78px - var(--pp-clipboard-y))!important;
  width:176px!important;
  z-index:18!important;
}
.ppx .ppx-side-sign{
  right:64px!important;
  bottom:52px!important;
  z-index:24!important; /* in front of clipboard */
}

/* The social-link row is part of the footer and is populated only by URLs entered in Paw Pro Designer. */
.ppx .ppx-social-links{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  flex-wrap:wrap!important;
}

@media(max-width:960px){
  .ppx .ppx-phone{right:calc(6px + var(--pp-phone-x))!important;width:150px!important;z-index:14!important}
  .ppx .ppx-clipboard{right:calc(8px + var(--pp-clipboard-x))!important;bottom:calc(72px - var(--pp-clipboard-y))!important;width:158px!important;z-index:18!important}
  .ppx .ppx-side-sign{z-index:24!important}
}

@media(max-width:640px){
  /* Leave clear space beneath the logo and Join the List button before the visual begins. */
  .ppx .ppx-hero-grid{
    transform:none!important;
    padding-top:92px!important;
  }
  .ppx .ppx-visual{
    margin-top:0!important;
  }

  /* Move the sign and the complete visual composition down together with the visual container. */
  .ppx .ppx-window{
    top:-4px!important;
    left:50%!important;
    right:auto!important;
    width:206px!important;
    transform:translateX(-50%)!important;
    z-index:20!important;
  }

  /* Phone behind clipboard; both fully visible within the mobile visual. */
  .ppx .ppx-phone{
    display:block!important;
    right:calc(9px + var(--pp-phone-x))!important;
    top:calc(116px + var(--pp-phone-y))!important;
    width:118px!important;
    z-index:14!important;
  }
  .ppx .ppx-clipboard{
    display:block!important;
    right:calc(8px + var(--pp-clipboard-x))!important;
    bottom:calc(80px - var(--pp-clipboard-y))!important;
    width:126px!important;
    z-index:18!important;
  }
  .ppx .ppx-poodle{z-index:16!important}

  /* Keep the top CTA completely readable. */
  .ppx .ppx-nav-button{
    min-width:138px!important;
    width:auto!important;
    padding:0 14px!important;
  }
  .ppx .ppx-nav-button .ppx-nav-label{
    display:inline-block!important;
    visibility:visible!important;
    opacity:1!important;
    font-size:10px!important;
  }
}