/* ==========================================================

   PW ADD TO CART BAR – FULL STABLE CSS

   ========================================================== */



/* ===== BAR WRAPPER ===== */

.pw-atcbar {

  position: fixed;

  left: 0;

  right: 0;

  bottom: 0;

  background: #ffffff;

  border-top: 1px solid rgba(0,0,0,.12);

  box-shadow: 0 -6px 18px rgba(0,0,0,.08);

  padding: 10px 14px;

  display: none;

  align-items: center;

  width: 100vw;

  z-index: 99999;

}



/* Visible state */

.pw-atcbar--visible {

  display: flex;

}



/* ===== INNER LAYOUT ===== */

.pw-atcbar__inner {

  width: 100%;

  max-width: 1400px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  gap: 12px;

}



/* ===== META (NAME + PRICE INLINE) ===== */

.pw-atcbar__meta {

  flex: 1 1 auto;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  min-width: 0;

  text-align: center;

}



/* Product name */

.pw-atcbar__name {

  font-weight: 600;

  font-size: 14px;

  line-height: 1.25;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  max-width: 60%;

}



/* Price (red) */

.pw-atcbar__price {

  font-weight: 800;

  font-size: 15px;

  color: #e60000;

  white-space: nowrap;

}



/* ===== CTA ===== */

.pw-atcbar__actions {

  flex: 0 0 auto;

}



.pw-atcbar__cta {

  font-size: 15px;

  padding: 10px 16px;

  border-radius: 8px;

  font-weight: 600;

  white-space: nowrap;

}



/* ===== BODY OFFSET ===== */

body.pw-atcbar-pad {

  padding-bottom: 80px;

}



/* ===== DESKTOP TUNING ===== */

@media (min-width: 1024px) {



  .pw-atcbar__name {

    font-size: 16px;

    max-width: 70%;

  }



  .pw-atcbar__price {

    font-size: 17px;

  }



  .pw-atcbar__cta {

    font-size: 16px;

    padding: 12px 20px;

  }

}



/* ==========================================================

   PRICE PULSE (USED BY JS)

   ========================================================== */



@keyframes pwPricePulse {

  0%   { transform: scale(1);   color: #e60000; }

  50%  { transform: scale(1.08); color: #c00000; }

  100% { transform: scale(1);   color: #e60000; }

}



.pw-price-updated {

  animation: pwPricePulse 0.45s ease-in-out;

}



/* ==========================================================

   FLY-TO-TOP ANIMATION (VISIBLE)

   ========================================================== */



/* Flying dot */

.pw-atc-fly {

  position: fixed;

  width: 22px;

  height: 22px;

  border-radius: 50%;

  background: #e60000;

  z-index: 999999;

  pointer-events: none;



  box-shadow:

    0 6px 14px rgba(230,0,0,.45),

    0 0 0 6px rgba(230,0,0,.15);



  animation: pwFlyToTop 1.15s cubic-bezier(.25,.8,.25,1) forwards;

}



/* Animation path */

@keyframes pwFlyToTop {



  0% {

    transform: translate(0, 0) scale(1);

    opacity: 1;

  }



  50% {

    transform:

      translate(

        calc(var(--pw-fly-x) * 0.5),

        calc(var(--pw-fly-y) * 0.5)

      )

      scale(1.3);

    opacity: 1;

  }



  100% {

    transform:

      translate(

        var(--pw-fly-x),

        var(--pw-fly-y)

      )

      scale(0.35);

    opacity: 0;

  }

}