/* ============================================================
   Bebé Crece — estabilidad visual y ancho seguro (2026-07-11)
   Corrige la causa del desbordamiento lateral y evita que el
   carrito/modal se anime durante la inicialización de la página.
   ============================================================ */

:root{
  --bc-safe-gutter: 12px;
}

html{
  width:100%;
  max-width:100%;
  overflow-x:clip;
  scrollbar-gutter:stable;
}

body{
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0;
  overflow-x:clip;
}

*,*::before,*::after{box-sizing:border-box}
img,video,svg,canvas,iframe{max-width:100%}
main,header,footer,nav,section,.wrap,.container,.site-shell,.page-shell{min-width:0;max-width:100%}

/* El drawer cerrado ya no se coloca fuera del viewport con translateX().
   Así no aumenta el scrollWidth ni deja una franja negra a la derecha. */
#cartDrawer.cart-drawer,
.cart-drawer#cartDrawer{
  position:fixed!important;
  top:12px!important;
  right:12px!important;
  bottom:12px!important;
  left:auto!important;
  width:min(390px,calc(100% - 24px))!important;
  max-width:calc(100% - 24px)!important;
  height:auto!important;
  transform:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  contain:layout paint;
  transition:opacity .18s ease,visibility 0s linear .18s!important;
}

#cartDrawer.cart-drawer.open,
.cart-drawer#cartDrawer.open{
  transform:none!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transition:opacity .18s ease!important;
}

#drawerOverlay{
  position:fixed!important;
  inset:0!important;
  width:auto!important;
  max-width:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:opacity .18s ease,visibility 0s linear .18s!important;
}
#drawerOverlay.show{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transition:opacity .18s ease!important;
}

/* Antes de terminar el primer frame no se anima ningún panel. */
html:not(.bc-page-stable) #cartDrawer,
html:not(.bc-page-stable) #drawerOverlay,
html:not(.bc-page-stable) .modal-overlay,
html:not(.bc-page-stable) .bc-login-gate-overlay{
  transition:none!important;
  animation:none!important;
}

/* Los overlays no deben ocupar ni bloquear la página si no están abiertos. */
.modal-overlay:not(.show),
.bc-login-gate-overlay:not(.show),
#checkoutModal:not(.show),
#productDetailModal:not(.show),
#productModal:not(.show),
#bcAuthModal:not(.show){
  pointer-events:none!important;
  visibility:hidden!important;
  opacity:0!important;
}

body.modal-open,
body.cart-open,
body.bc-cart-drawer-open,
body.bc-login-gate-open{
  overflow:hidden!important;
  overscroll-behavior:none;
}

/* El bloqueo de scroll no puede cambiar el ancho de la tienda. */
body.modal-open,
body.cart-open,
body.bc-cart-drawer-open,
body.bc-login-gate-open{
  width:100%!important;
  max-width:100%!important;
  padding-right:0!important;
}

/* Controles flotantes siempre dentro del viewport. */
.float-cart,.float-whatsapp,#toTop,.floating-cart,.floating-whatsapp{
  max-width:calc(100% - 24px)!important;
}

/* Resumen de checkout único */
#checkoutSummary .bc-checkout-shipping-row,
#checkoutSummary .bc-checkout-discount-row,
#checkoutSummary .bc-checkout-subtotal-row,
#checkoutSummary .bc-checkout-total-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
#checkoutSummary .bc-checkout-shipping-row small,
#checkoutSummary .bc-checkout-discount-row small,
#checkoutSummary .bc-checkout-product-row small{
  display:block;
  margin-top:3px;
  color:#607093;
  font-size:11px;
  line-height:1.35;
}
#checkoutSummary .bc-checkout-discount-row{
  color:#0b7a37;
  background:#eafff2;
  border:1px solid #b7f0cc;
  border-radius:14px;
  padding:12px;
  margin-top:10px;
}
#checkoutSummary .bc-checkout-total-row{
  margin-top:12px;
  padding:14px;
  border:1px solid #2048a0;
  border-radius:15px;
  background:#edf5ff;
  color:#102a63;
  font-weight:900;
}
#checkoutSummary .bc-checkout-total-row b{font-size:21px;color:#2048a0}

#bcCouponCheckout{
  margin-top:12px;
  padding:14px;
  border:1px solid #f1b800;
  border-radius:15px;
  background:#fffdf5;
}
#bcCouponCheckout h4{margin:0 0 7px;color:#102a63;font-size:15px}
#bcCouponCheckout p{margin:0 0 11px;color:#607093;font-size:11px;line-height:1.45}
.bc-coupon-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center}
#bcCouponCode{
  width:100%;
  min-width:0;
  min-height:42px;
  border:1px solid #cfe0ff;
  border-radius:11px;
  padding:10px 12px;
  color:#102a63;
  background:#fff;
  font:800 12px Poppins,Arial,sans-serif;
  text-transform:uppercase;
}
#bcApplyCouponBtn,#bcRemoveCouponBtn{
  min-height:42px;
  border-radius:11px;
  padding:9px 13px;
  font:900 12px Poppins,Arial,sans-serif;
  cursor:pointer;
  white-space:nowrap;
}
#bcApplyCouponBtn{border:1px solid #2048a0;background:#fff;color:#2048a0}
#bcApplyCouponBtn:disabled{opacity:.62;cursor:wait}
#bcRemoveCouponBtn{border:1px solid #d9a400;background:#fff8df;color:#805d00}
#bcCouponStatus{min-height:18px;margin-top:9px;font:750 11px/1.45 Poppins,Arial,sans-serif;color:#607093}
#bcCouponStatus.is-success{color:#0b7a37}
#bcCouponStatus.is-error{color:#b42318}

@media(max-width:640px){
  html{scrollbar-gutter:auto}
  #cartDrawer.cart-drawer,.cart-drawer#cartDrawer{
    top:8px!important;right:8px!important;bottom:8px!important;
    width:calc(100% - 16px)!important;max-width:calc(100% - 16px)!important;
  }
  .bc-coupon-row{grid-template-columns:1fr}
  #bcApplyCouponBtn,#bcRemoveCouponBtn{width:100%}
}