/* ===== Sticky Add To Cart (Single Product Bottom Bar) ===== */

/* Body padding so content isn't hidden under bar */
body.sp-sticky-atc-active{
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

/* Main bar */
.sp-sticky-atc{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;

  background: #fff;
  border-top: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 -10px 24px rgba(0,0,0,.08);

  transform: translateY(110%);
  transition: transform .22s ease;

  /* safe-area for iPhone */
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
}

.sp-sticky-atc.is-visible{
  transform: translateY(0);
}

/* Inner container */
.sp-sticky-atc__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  /* allow wrapping on smaller screens */
  flex-wrap: wrap;
}

/* Left: thumb + meta */
.sp-sticky-atc__left{
  display: flex;
  align-items: center;
  gap: 12px;

  /* allow shrink */
  flex: 1 1 320px;
  min-width: 0;
}

.sp-sticky-atc__thumb{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.sp-sticky-atc__img,
.sp-sticky-atc__thumb img{
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 12px;
}

/* Meta */
.sp-sticky-atc__meta{
  min-width: 0;
}

.sp-sticky-atc__title{
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  color: #111318;

  /* ellipsis */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* responsive clamp */
  max-width: 46vw;
}

.sp-sticky-atc__price{
  font-size: 14px;
  margin-top: 2px;
  line-height: 1.2;
}
.sp-sticky-atc__price del{ opacity: .65; }
.sp-sticky-atc__price ins{ text-decoration: none; font-weight: 700; }

/* Right: options + qty + button */
.sp-sticky-atc__right{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;

  flex: 0 1 auto;
  flex-wrap: wrap;
}

/* Options area (WBW select / variation selects) */
.sp-sticky-atc__options{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.sp-sticky-atc__label{
  font-size: 12px;
  font-weight: 600;
  opacity: .85;
  white-space: nowrap;
}

.sp-sticky-atc__select{
  appearance: none;
  -webkit-appearance: none;

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

  height: 44px;
  padding: 0 12px;

  font-size: 14px;
  font-weight: 600;
  background: #fff;

  /* prevent overflow */
  max-width: 320px;
  min-width: 180px;
}

/* Quantity */
.sp-sticky-atc__qty{
  display: flex;
  align-items: center;
  gap: 8px;

  height: 44px;
  padding: 0 8px;

  border: 1px solid rgba(0,0,0,.18);
  border-radius: 12px;
}

.sp-sticky-atc__qty-btn{
  width: 36px;
  height: 36px;
  border: 0;
  background: rgba(0,0,0,.06);
  border-radius: 10px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.sp-sticky-atc__qty-input{
  width: 56px;
  height: 36px;
  border: 0;
  text-align: center;
  font-size: 15px;
  outline: none;
  background: transparent;
}

/* Button */
.sp-sticky-atc__button{
  height: 44px;
  padding: 0 18px;

  border-radius: 12px;

  font-weight: 700;
  white-space: nowrap;

  cursor: pointer;
}

/* Disabled visuals */
.sp-sticky-atc__button.is-disabled{
  opacity: .6;
  cursor: not-allowed;
}

/* =========================
   Tablet responsiveness
   ========================= */
@media (max-width: 1024px){
  body.sp-sticky-atc-active{
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
  }

  .sp-sticky-atc__inner{
    padding: 0 12px;
    gap: 12px;
  }

  .sp-sticky-atc__title{
    max-width: 56vw;
  }

  .sp-sticky-atc__select{
    min-width: 160px;
    max-width: 280px;
  }
}

/* =========================
   Mobile (Shopify-style stacking)
   ========================= */
@media (max-width: 768px){
  body.sp-sticky-atc-active{
    padding-bottom: calc(170px + env(safe-area-inset-bottom));
  }

  .sp-sticky-atc{
    padding: 10px 0 calc(12px + env(safe-area-inset-bottom));
  }

  /* Stack sections: top(meta) + bottom(actions) */
  .sp-sticky-atc__inner{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .sp-sticky-atc__left{
    flex: none;
    width: 100%;
  }

  .sp-sticky-atc__title{
    max-width: 100%;
    font-size: 14px;
  }

  .sp-sticky-atc__right{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    justify-content: stretch;
  }

  .sp-sticky-atc__options{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .sp-sticky-atc__label{
    white-space: normal;
  }

  .sp-sticky-atc__select{
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 48px;
  }

  .sp-sticky-atc__qty{
    width: 100%;
    justify-content: space-between;
    height: 48px;
  }

  .sp-sticky-atc__qty-input{
    width: 72px;
    height: 40px;
  }

  .sp-sticky-atc__button{
    width: 100%;
    height: 48px;
  }
}

/* Extra small phones */
@media (max-width: 420px){
  .sp-sticky-atc__thumb{
    display: none;
  }
  .sp-sticky-atc__title{
    font-size: 13px;
  }
  .sp-sticky-atc__price{
    font-size: 13px;
  }
}