.elementor-10512 .elementor-element.elementor-element-53b4ecc{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS *//* =========================================================
   PET PAMPER SHED
   GLOBAL PAGE BRANDING
   Pink Scrollbar + Fixed Background Watermarks

   Shed = almost touching top left
   Cat  = middle right
   Dog  = lower left and horizontally flipped
   ========================================================= */


/* =========================================================
   BRAND COLOURS
   ========================================================= */

:root {
  --pps-pink: #ee3f72;
  --pps-pink-dark: #d92f62;
  --pps-pink-light: #fde7ef;
}


/* =========================================================
   PAGE BACKGROUND
   ========================================================= */

html {
  background: #ffffff;
}


body {
  position: relative;

  background: transparent !important;
}


/* =========================================================
   PINK VERTICAL SCROLLBAR
   ========================================================= */

/* Firefox */

html {
  scrollbar-width: thin;

  scrollbar-color:
    var(--pps-pink)
    #fde7ef;
}


/* Chrome / Edge / Safari */

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 11px;
}


html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: #fde7ef;
}


html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background:
    linear-gradient(
      180deg,
      #f45c88 0%,
      #ee3f72 50%,
      #d92f62 100%
    );

  border-radius: 50px;

  border:
    3px solid
    #fde7ef;
}


html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background:
    var(--pps-pink-dark);
}


/* =========================================================
   SHED + CAT ANIMATION
   ========================================================= */

@keyframes pps-watermark-float {

  0% {
    transform:
      translate3d(0, 0, 0);
  }

  25% {
    transform:
      translate3d(7px, -6px, 0);
  }

  50% {
    transform:
      translate3d(12px, 3px, 0);
  }

  75% {
    transform:
      translate3d(4px, 7px, 0);
  }

  100% {
    transform:
      translate3d(0, 0, 0);
  }

}


/* =========================================================
   FLIPPED DOG ANIMATION
   ========================================================= */

@keyframes pps-dog-float-flipped {

  0% {
    transform:
      scaleX(-1)
      translate3d(0, 0, 0);
  }

  25% {
    transform:
      scaleX(-1)
      translate3d(8px, -7px, 0);
  }

  50% {
    transform:
      scaleX(-1)
      translate3d(13px, 3px, 0);
  }

  75% {
    transform:
      scaleX(-1)
      translate3d(5px, 9px, 0);
  }

  100% {
    transform:
      scaleX(-1)
      translate3d(0, 0, 0);
  }

}


/* =========================================================
   BACKGROUND LAYER ONE
   SHED + CAT
   ========================================================= */

body::before {
  content: "";

  position: fixed;

  inset: 0;

  width: 100vw;
  height: 100vh;

  pointer-events: none;

  z-index: -1;


  /* Exact Pet Pamper Shed pink */

  background:
    var(--pps-pink);


  /* Subtle watermark strength */

  opacity:
    .045;


  /* =====================================================
     MASK IMAGES
     ===================================================== */

  -webkit-mask-image:

    url("https://allacesprinting.clientbuild.neonsnow.com.au/wp-content/uploads/2026/08/PS-SHED-scaled.png"),

    url("https://allacesprinting.clientbuild.neonsnow.com.au/wp-content/uploads/2026/08/PS-CAT-scaled.png");


  mask-image:

    url("https://allacesprinting.clientbuild.neonsnow.com.au/wp-content/uploads/2026/08/PS-SHED-scaled.png"),

    url("https://allacesprinting.clientbuild.neonsnow.com.au/wp-content/uploads/2026/08/PS-CAT-scaled.png");


  /* =====================================================
     POSITION
     ===================================================== */

  /*
   * SHED
   * Almost touching the top edge.
   * Most of the graphic remains slightly off-screen left.
   *
   * CAT
   * Middle/right edge.
   */

  -webkit-mask-position:

    -115px 8px,

    calc(100% + 80px) 52%;


  mask-position:

    -115px 8px,

    calc(100% + 80px) 52%;


  /* =====================================================
     SIZE
     ===================================================== */

  -webkit-mask-size:

    390px auto,

    310px auto;


  mask-size:

    390px auto,

    310px auto;


  /* =====================================================
     REPEAT
     ===================================================== */

  -webkit-mask-repeat:

    no-repeat,

    no-repeat;


  mask-repeat:

    no-repeat,

    no-repeat;


  animation:
    pps-watermark-float
    45s
    ease-in-out
    infinite;
}


/* =========================================================
   BACKGROUND LAYER TWO
   DOG - HORIZONTALLY FLIPPED
   ========================================================= */

body::after {
  content: "";

  position: fixed;

  left: -92px;
  bottom: 4%;

  width: 340px;
  height: 440px;

  pointer-events: none;

  z-index: -1;


  background:
    var(--pps-pink);


  opacity:
    .038;


  /* =====================================================
     DOG MASK
     ===================================================== */

  -webkit-mask-image:
    url("https://allacesprinting.clientbuild.neonsnow.com.au/wp-content/uploads/2026/08/PS-DOG-scaled.png");


  mask-image:
    url("https://allacesprinting.clientbuild.neonsnow.com.au/wp-content/uploads/2026/08/PS-DOG-scaled.png");


  -webkit-mask-repeat:
    no-repeat;

  mask-repeat:
    no-repeat;


  -webkit-mask-position:
    center;

  mask-position:
    center;


  -webkit-mask-size:
    contain;

  mask-size:
    contain;


  /*
   * Horizontally flipped
   */

  transform:
    scaleX(-1);


  transform-origin:
    center center;


  animation:
    pps-dog-float-flipped
    55s
    ease-in-out
    infinite;
}


/* =========================================================
   KEEP WEBSITE CONTENT ABOVE WATERMARKS
   ========================================================= */

#page,
.site,
.site-content,
main,
.elementor,
.elementor-location-header,
.elementor-location-footer {
  position: relative;

  z-index: 1;
}


/* =========================================================
   COMBINED HEADER
   ========================================================= */

.pps-combined,
.pps-combined-shell,
.pps-combined-header {
  position: relative;

  z-index: 100;
}


/* Backwards compatibility */

.pps-header,
.pps-header-main,
.pps-header-inner {
  position: relative;

  z-index: 100;
}


/* =========================================================
   ELEMENTOR EDITOR
   ========================================================= */

.elementor-editor-active body::before,
.elementor-editor-active body::after {
  pointer-events: none;
}


/* =========================================================
   LARGE DESKTOP
   1600px+
   ========================================================= */

@media (min-width: 1600px) {

  /* Shed + Cat */

  body::before {
    opacity:
      .045;


    -webkit-mask-position:

      -125px 3px,

      calc(100% + 80px) 51%;


    mask-position:

      -125px 3px,

      calc(100% + 80px) 51%;


    -webkit-mask-size:

      430px auto,

      340px auto;


    mask-size:

      430px auto,

      340px auto;
  }


  /* Flipped Dog */

  body::after {
    left:
      -105px;

    bottom:
      3%;

    width:
      380px;

    height:
      480px;

    opacity:
      .038;
  }

}


/* =========================================================
   SMALL LAPTOP / TABLET LANDSCAPE
   ========================================================= */

@media (max-width: 1200px) {

  /* Shed + Cat */

  body::before {
    opacity:
      .038;


    -webkit-mask-position:

      -125px 6px,

      calc(100% + 95px) 53%;


    mask-position:

      -125px 6px,

      calc(100% + 95px) 53%;


    -webkit-mask-size:

      320px auto,

      260px auto;


    mask-size:

      320px auto,

      260px auto;
  }


  /* Flipped Dog */

  body::after {
    left:
      -105px;

    bottom:
      5%;

    width:
      285px;

    height:
      370px;

    opacity:
      .032;
  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 768px) {

  /* Shed + Cat */

  body::before {
    opacity:
      .03;


    -webkit-mask-position:

      -115px 5px,

      calc(100% + 95px) 57%;


    mask-position:

      -115px 5px,

      calc(100% + 95px) 57%;


    -webkit-mask-size:

      260px auto,

      215px auto;


    mask-size:

      260px auto,

      215px auto;
  }


  /* Flipped Dog */

  body::after {
    left:
      -100px;

    bottom:
      5%;

    width:
      230px;

    height:
      300px;

    opacity:
      .027;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 480px) {

  /* Scrollbar */

  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    width:
      8px;
  }


  html::-webkit-scrollbar-thumb,
  body::-webkit-scrollbar-thumb {
    border-width:
      2px;
  }


  /* =====================================================
     SHED ONLY ON MOBILE
     ===================================================== */

  body::before {
    opacity:
      .025;


    -webkit-mask-image:
      url("https://allacesprinting.clientbuild.neonsnow.com.au/wp-content/uploads/2026/08/PS-SHED-scaled.png");


    mask-image:
      url("https://allacesprinting.clientbuild.neonsnow.com.au/wp-content/uploads/2026/08/PS-SHED-scaled.png");


    /*
     * Almost touching mobile top edge
     */

    -webkit-mask-position:
      -105px 4px;


    mask-position:
      -105px 4px;


    -webkit-mask-size:
      215px auto;


    mask-size:
      215px auto;


    -webkit-mask-repeat:
      no-repeat;


    mask-repeat:
      no-repeat;
  }


  /* =====================================================
     FLIPPED DOG MOBILE
     ===================================================== */

  body::after {
    left:
      auto;

    right:
      -72px;

    bottom:
      4%;

    width:
      190px;

    height:
      245px;

    opacity:
      .022;
  }

}


/* =========================================================
   EXTRA SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

  body::before {
    opacity:
      .021;


    -webkit-mask-size:
      185px auto;


    mask-size:
      185px auto;


    -webkit-mask-position:
      -95px 3px;


    mask-position:
      -95px 3px;
  }


  body::after {
    right:
      -75px;

    width:
      170px;

    height:
      220px;

    opacity:
      .02;
  }

}


/* =========================================================
   ACCESSIBILITY
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  body::before {
    animation:
      none !important;
  }


  body::after {
    animation:
      none !important;

    transform:
      scaleX(-1) !important;
  }

}/* End custom CSS */