/* ClientePlus Cart Module - scope: carrito/drawer */
:root{--cp-cart-accent:#25D366;--cp-cart-surface:#f7f7f8;--cp-cart-muted:rgba(17,17,17,.58);}
.cartProgress,.phoneChilePrefixInline{display:none!important;}
.drawer{background:#fff!important;color:#111!important;}
.drawer__top{position:sticky!important;top:0!important;z-index:4!important;background: #161513 !important;border-bottom:1px solid rgba(0,0,0,.08)!important;padding:14px 16px!important;}
.drawer__title{color: #f8a814 !important;font-size:20px!important;line-height:1.08!important;font-weight:1000!important;letter-spacing:-.02em!important;}
.drawer__sub{color: rgb(255 255 255) !important;font-size:12px!important;font-weight:900!important;margin-top:3px!important;}
.drawer .ghostBtn{background: #cb1212 !important;color: #fff9f9 !important;border:1px solid rgba(0,0,0,.08)!important;box-shadow:none!important;}
.drawer__body{background: #770e0e !important;gap:10px!important;padding:12px!important;}
.drawer .cartList{gap:7px!important;}
.drawer .cartItem.cartItem--justo{background:#fff!important;color:#111!important;border: 2px solid rgb(215 161 61) !important;border-radius:16px!important;padding:8px!important;box-shadow:0 8px 20px rgba(0,0,0,.04)!important;}
.cartItem__row{display:grid;grid-template-columns:54px minmax(0,1fr);gap:10px;align-items:start;}
.cartItem__thumb{width: 70px;height: 70px;border-radius:13px;overflow:hidden;background:#f3f3f4;border:1px solid rgba(0,0,0,.06);}
.cartItem__thumb img{width:100%;height:100%;display:block;object-fit:cover;}
.cartItem__thumb--empty{display:flex;align-items:center;justify-content:center;font-size:18px;color:rgba(17,17,17,.42);}
.cartItem__content{min-width:0;padding-left: 15px;}
.drawer .cartItem__main{gap:8px!important;align-items:flex-start!important;}
.drawer .cartItem__name{color:#111!important;font-size:13px!important;line-height:1.16!important;font-weight:1000!important;letter-spacing:-.01em!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.drawer .cartItem__meta{margin-top:3px!important;font-size:11px!important;line-height:1.2!important;color:rgba(17,17,17,.52)!important;}
.drawer .cartItem__amount,.drawer .cartItem__price{color:#111!important;font-size:13px!important;line-height:1.1!important;font-weight:1000!important;white-space:nowrap!important;padding-top:1px;}
.drawer .cartItem__summary{margin-top:5px!important;gap:4px!important;}
.drawer .summaryPill{background:#fff5dc!important;border:1px solid rgba(248,168,20,.26)!important;color:#111!important;font-size:10.5px!important;line-height:1.1!important;padding:4px 7px!important;max-width:130px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.drawer .cartItem__actions{display:flex!important;align-items:center!important;margin-top:8px!important;gap:6px!important;justify-content:flex-start!important;}
.drawer .cartItem__stepper,.drawer .stepper{height: 22px!important;padding:3px 5px!important;gap:6px!important;background: #d7a13d4f !important;border:1px solid rgba(0,0,0,.07)!important;border-radius:999px!important;}
.drawer .stepBtn{width: 22px!important;height: 22px!important;font-size:16px!important;border-radius:999px!important;background:#111!important;color:#fff!important;border:0!important;font-weight:1000!important;}
.drawer .qty{min-width:18px!important;font-size:12px!important;color:#111!important;font-weight:1000!important;}
.drawer .miniBtn,.drawer .cartItem__edit{min-height: 20px!important;padding: 3px 10px!important;font-size:11px!important;background: #d7a13d !important;color:#111!important;border:1px solid rgba(0,0,0,.12)!important;border-radius:999px!important;font-weight:1000!important;}
.drawer .xBtn,.drawer .cartItem__remove{width:30px!important;height:30px!important;font-size: 18px!important;margin-left:auto!important;background:#fff0f0!important;color:#b91c1c!important;border: 2px solid rgb(185 28 28) !important;border-radius:999px!important;}
.drawer .compactCard,.drawer .card,.drawer .totals{background:#fff!important;color:#111!important;border: 2px solid rgb(215 161 61) !important;border-radius:16px!important;box-shadow:0 10px 26px rgba(0,0,0,.04)!important;padding: 8px!important;}
.drawer .card__title{font-size:13px!important;color:#111!important;font-weight:1000!important;}
.drawer .hint,.drawer .addr-help,.drawer .smallHint{font-size:11.5px!important;color: rgb(17 17 17 / 97%) !important;font-weight:800!important;line-height:1.35!important;}
.drawer .ship-cards{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin-top:10px!important;}
.drawer .ship-card{padding:9px 8px!important;border-radius:13px!important;background:#f6f6f7!important;color:#111!important;border: 1px solid rgb(0 0 0 / 33%) !important;}
.drawer .ship-card.is-active{background: #d7a13d45 !important;color:#fff!important;border-color: #740e0e !important;}
.drawer .ship-title{font-size:12px!important;font-weight:1000!important;}
.phoneRow{display:flex!important;align-items:center!important;gap:8px!important;}
.phoneRow .pill{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:40px!important;border-radius:12px!important;background:#f3f4f6!important;color:#111!important;border:1px solid rgba(0,0,0,.10)!important;font-weight:1000!important;padding:0 10px!important;}
.drawer .waLabel{color:#111!important;font-size:12px!important;font-weight:1000!important;}
.drawer .waLabel img{width:15px;height:15px;vertical-align:-2px;margin-left:4px;}
.drawer .addr-input,.drawer .input,.drawer textarea.note{min-height:40px!important;padding:9px 10px!important;font-size:13px!important;border-radius:12px!important;background:#fff!important;color:#111!important;border: 1px solid rgb(0 0 0 / 47%) !important;outline:none!important;box-shadow:none!important;}
#clientPhone{letter-spacing:.08em;font-weight:900!important;}
.drawer .addr-input:focus,.drawer .input:focus,.drawer textarea.note:focus{border-color: #d7a13d !important;box-shadow:0 0 0 3px rgba(37,211,102,.18)!important;}
.drawer .totals__row{padding:4px 0!important;font-size:13px!important;color:rgba(17,17,17,.72)!important;font-weight:900!important;}
.drawer .totals__row b{color:#111!important;font-weight:1000!important;}
.drawer .totals__row--big{font-size:17px!important;padding-top:9px!important;border-top:1px dashed rgba(0,0,0,.18)!important;color:#111!important;}
.drawerCheckoutPanel{position:sticky!important;bottom:0!important;z-index:8!important;flex:0 0 auto!important;margin-top:auto!important;padding:10px 0 0!important;background:linear-gradient(180deg,rgba(247,247,248,0) 0%,var(--cp-cart-surface,#f7f7f8) 18%,var(--cp-cart-surface,#f7f7f8) 100%)!important;}
.drawer .cta,#checkoutBtn{position:relative!important;bottom:auto!important;width:100%!important;min-height:50px!important;margin-top:10px!important;border-radius:15px!important;background:var(--cp-cart-accent)!important;color:#fff!important;font-size:14px!important;font-weight:1000!important;box-shadow:0 16px 38px rgba(37,211,102,.28)!important;}
#checkoutBtn.cta--blocked,#checkoutBtn:disabled{background:#d7a13d!important;color:#111!important;box-shadow:none!important;cursor:not-allowed!important;}
.checkoutMicrocopy{display:none!important;}
.floatingCart{left:12px!important;right:12px!important;bottom:max(12px,env(safe-area-inset-bottom))!important;z-index:170!important;}
.floatingCart[hidden]{display:none!important;}
.floatingCart__btn{min-height:58px!important;border-radius:18px!important;padding:0 16px!important;background:#f8a814!important;color:#111!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;box-shadow:0 18px 44px rgba(0,0,0,.34)!important;}
.floatingCart__left{display:inline-flex!important;align-items:center!important;gap:9px!important;min-width:0!important;font-size:15px!important;font-weight:1000!important;white-space:nowrap!important;}
.floatingCart__right{flex:0 0 auto!important;font-size:18px!important;font-weight:1000!important;}
.floatingCart__right::after{content:' ›';font-weight:1000;}
.cartJustAdded .floatingCart__btn,.floatingCart__btn.cartJustAdded{animation:cpCartAddedPulse .42s ease-out;}
@keyframes cpCartAddedPulse{0%{transform:translateY(0) scale(1);}35%{transform:translateY(-2px) scale(1.025);box-shadow:0 22px 48px rgba(37,211,102,.28);}100%{transform:translateY(0) scale(1);}}
@media (min-width:768px){.floatingCart{left:auto!important;right:22px!important;width:360px!important;}}
@media(max-width:420px){.cartItem__row{grid-template-columns: 70px minmax(0,1fr);gap:9px;px; */}.cartItem__thumb{width: 70px;height: 70px;border-radius:12px;}.drawer .cartItem__name{font-size:12.5px!important;}.drawer .summaryPill{max-width:112px!important;}}

/* =========================================================
   CLIENTEPLUS / CART FINAL CLEAN
   Teléfono +569 real, sin barra de progreso, CTA fijo abajo.
   ========================================================= */
.cartProgress,
.phoneChilePrefixInline{
  display:none !important;
}

.drawer__body{
  display:flex !important;
  flex-direction:column !important;
  height:100vh !important;
  max-height:100vh !important;
  overflow-y:auto !important;
  padding-bottom:calc(84px + env(safe-area-inset-bottom)) !important;
}

.phoneInputWithPrefix{
  display:flex !important;
  align-items:center !important;
  width:100% !important;
  min-height:40px !important;
  margin-top:4px !important;
  background:#ffffff !important;
  border: 1px solid rgb(0 0 0 / 48%) !important;
  border-radius:12px !important;
  overflow:hidden !important;
  box-shadow:none !important;
}

.phoneInputWithPrefix:focus-within{
  border-color:#25D366 !important;
  box-shadow:0 0 0 3px rgba(37,211,102,.18) !important;
}

.phoneInputWithPrefix__prefix{
  flex:0 0 auto !important;
  padding:0 0 0 12px !important;
  color:#111111 !important;
  font-size: 14px !important;
  font-weight:1000 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  background:transparent !important;
  user-select:none !important;
  pointer-events:none !important;
}

.phoneInputWithPrefix #clientPhone,
.drawer .phoneInputWithPrefix #clientPhone{
  flex:1 1 auto !important;
  min-width:0 !important;
  min-height:40px !important;
  height:40px !important;
  padding:9px 10px 9px 6px !important;
  margin:0 !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  color:#111111 !important;
  font-size: 14px !important;
  font-weight:900 !important;
  letter-spacing:.04em !important;
  border-radius:0 !important;
}

.phoneInputWithPrefix #clientPhone::placeholder{
  color:transparent !important;
}

.drawer #checkoutBtn{
  position:sticky !important;
  bottom:max(10px, env(safe-area-inset-bottom)) !important;
  z-index:50 !important;
  width:100% !important;
  min-height:52px !important;
  margin-top:10px !important;
  border-radius:15px !important;
  background:#25D366 !important;
  color:#ffffff !important;
  font-size:14px !important;
  font-weight:1000 !important;
  box-shadow:0 16px 38px rgba(37,211,102,.28) !important;
}

.drawer #checkoutBtn.cta--blocked,
.drawer #checkoutBtn:disabled{
  background:#d7a13d !important;
  color:#111111 !important;
  box-shadow:none !important;
  cursor:not-allowed !important;
}

/* =========================================================
   CLIENTEPLUS CART - FINAL FIX: CTA FIJO EN LA BASE
   El botón queda pegado al borde inferior del drawer.
   ========================================================= */
.drawer,
.drawer--checkout{
  position: fixed !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.drawer__body,
.drawer__body--checkout{
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding-bottom: 124px !important;
}

.drawerCheckoutPanel,
.cartCheckoutPanel,
.cart__footer{
  position: fixed !important;
  left: auto !important;
  right: 12px !important;
  bottom: max(10px, env(safe-area-inset-bottom)) !important;
  width: calc(min(440px, 100vw) - 24px) !important;
  z-index: 9500 !important;
  margin: 0 !important;
  padding: 10px 0 0 !important;
  background: linear-gradient(180deg, rgba(247,247,248,0), #f7f7f8 18%, #f7f7f8 100%) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.drawerCheckoutPanel .totals,
.cartCheckoutPanel .totals,
.cart__footer .totals{
  margin: 0 !important;
}

.drawerCheckoutPanel #checkoutBtn,
.cartCheckoutPanel #checkoutBtn,
.cart__footer #checkoutBtn,
#checkoutBtn{
  position: relative !important;
  bottom: auto !important;
  width: 100% !important;
  min-height: 52px !important;
  margin: 8px 0 0 !important;
  border-radius: 14px !important;
}

@media (max-width: 640px){
  .drawerCheckoutPanel,
  .cartCheckoutPanel,
  .cart__footer{
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
  }

  .drawer__body,
  .drawer__body--checkout{
    padding-bottom: 132px !important;
  }
}


/* HARD FIX: botón pegado al fondo real */
.drawerCheckoutPanel,
.cartCheckoutPanel,
.cart__footer{
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom)) !important;
  background: #f7f7f8 !important;
  z-index: 9999 !important;
}

/* espacio real para que no lo tape */
.drawer__body,
.drawer__body--checkout{
  padding-bottom: 140px !important;
}

/* =========================================================
   CLIENTEPLUS / FIX DEFINITIVO BOTÓN EN BASE DEL DRAWER
   Estructura requerida: #checkoutBtn dentro de #cartFooter.cart__footer,
   fuera de .drawer__body. No depende de sticky ni fixed interno.
   ========================================================= */
#drawer.drawer{
  display:flex !important;
  flex-direction:column !important;
  height:100vh !important;
  max-height:100vh !important;
  overflow:hidden !important;
}

#drawer .drawer__top{
  flex:0 0 auto !important;
}

#drawer .drawer__body{
  flex:1 1 auto !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  overflow-y:auto !important;
  padding-bottom:12px !important;
}

#drawer .cart__footer{
  flex:0 0 auto !important;
  position:relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  width:100% !important;
  margin:0 !important;
  padding:10px 12px calc(12px + env(safe-area-inset-bottom)) !important;
  background: #161513 !important;
  border-top:1px solid rgba(0,0,0,.08) !important;
  box-shadow:0 -10px 22px rgba(15,23,42,.06) !important;
  z-index:20 !important;
}

#drawer .cart__footer #checkoutBtn{
  position:static !important;
  inset:auto !important;
  bottom:auto !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  display:block !important;
  width:100% !important;
  min-height:52px !important;
  height:auto !important;
  margin:0 !important;
  padding:14px !important;
  border:0 !important;
  border-radius:15px !important;
  background:#25D366 !important;
  color:#ffffff !important;
  font-size:14px !important;
  font-weight:1000 !important;
  text-align:center !important;
  box-shadow:0 14px 32px rgba(37,211,102,.24) !important;
}

#drawer .cart__footer #checkoutBtn.cta--blocked,
#drawer .cart__footer #checkoutBtn:disabled{
  background:#d7a13d !important;
  color:#111111 !important;
  box-shadow:none !important;
  cursor:not-allowed !important;
}

#drawer .cart__footer #warnBox{
  margin-top:8px !important;
}

@media (max-width:640px){
  #drawer .cart__footer{
    padding:10px 10px calc(12px + env(safe-area-inset-bottom)) !important;
  }
}

/* =========================================================
   CLIENTEPLUS / FIX MOBILE NAV BAR SAFE SPACE
   Mantiene footer estructural actual. Solo agrega colchón inferior
   para Android/Galaxy cuando env(safe-area-inset-bottom) devuelve 0.
   ========================================================= */
#drawer .cart__footer{
  padding-bottom: calc(34px + env(safe-area-inset-bottom)) !important;
}

#drawer .drawer__body{
  padding-bottom: 18px !important;
}

@media (max-width:640px){
  #drawer .cart__footer{
    padding-bottom: calc(38px + env(safe-area-inset-bottom)) !important;
  }
}

/* =========================================================
   CLIENTEPLUS CORE / CART BUTTON FINAL
   Regla de estabilidad:
   - El botón del carrito usa la misma lógica visual de .floatingCart.
   - No depende de .cart__footer, sticky ni fixed internos.
   - No agrega espacio vacío excesivo al final del drawer.
   - No tocar miniaturas: .cartItem__thumb se mantiene activo.
   ========================================================= */

#drawer.drawer{
  position: fixed !important;

  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;

  width: 420px !important;
  max-width: 100% !important;

  display: flex !important;
  flex-direction: column !important;

  height: 100dvh !important;
  max-height: 100dvh !important;

  overflow: hidden !important;
}

@supports not (height: 100dvh){
  #drawer.drawer{
    height: 100vh !important;
    max-height: 100vh !important;
  }
}

#drawer .drawer__top{
  flex: 0 0 auto !important;
}

#drawer .drawer__body{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  padding-bottom: 20px !important;
  -webkit-overflow-scrolling: touch !important;
}

/* El checkoutBtn vive dentro de .drawer__body en el HTML actual.
   Lo sacamos visualmente del flujo y lo hacemos flotante como .floatingCart. */
#drawer #checkoutBtn{
  position: fixed !important;
  left: 12px !important;
  right: 12px !important;
  bottom: max(12px, env(safe-area-inset-bottom)) !important;
  width: auto !important;
  min-height: 58px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 18px !important;
  z-index: 10020 !important;
  background: #25D366 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 1000 !important;
  line-height: 1.15 !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.34) !important;
  cursor: pointer !important;
}

#drawer #checkoutBtn:active{
  transform: translateY(1px) scale(.99) !important;
}

#drawer #checkoutBtn.cta--blocked,
#drawer #checkoutBtn:disabled{
  background: #d7a13d !important;
  color: #111111 !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.22) !important;
  cursor: not-allowed !important;
}

/* El mensaje de warning no debe empujar el layout ni quedar bajo la barra del teléfono. */
#drawer #warnBox{
  position: fixed !important;
  left: 12px !important;
  right: 12px !important;
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 66px) !important;
  width: auto !important;
  margin: 0 !important;
  z-index: 10021 !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.18) !important;
}

#drawer #warnBox[hidden]{
  display: none !important;
}

/* Neutraliza reglas antiguas de footer del carrito que ya no aplican a este HTML. */
#drawer .cart__footer,
#drawer .drawerCheckoutPanel,
#drawer .cartCheckoutPanel{
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #750e0e !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Miniaturas del carrito: regla protegida, no remover. */
#drawer .cartItem__row{
  display: grid !important;
  grid-template-columns: 70px minmax(0,1fr) !important;
  gap: 10px !important;
  align-items: start !important;
}

#drawer .cartItem__thumb{
  width: 70px !important;
  height: 70px !important;
  border-radius: 13px !important;
  overflow: hidden !important;
  background: #f3f3f4 !important;
  border: 1px solid rgba(0,0,0,.06) !important;
}

#drawer .cartItem__thumb img{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

#drawer .cartItem__content{
  min-width: 0 !important;
  padding-left: 0 !important;
}

@media (min-width: 768px){
  #drawer #checkoutBtn,
  #drawer #warnBox{
    left: auto !important;
    right: 22px !important;
    width: 360px !important;
  }
}

@media (max-width: 420px){
  #drawer .drawer__body{
    padding-bottom: 15px !important;
  }

  #drawer #checkoutBtn{
    left: 10px !important;
    right: 10px !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    min-height: 56px !important;
    border-radius: 17px !important;
    font-size: 14px !important;
  }

  #drawer #warnBox{
    left: 10px !important;
    right: 10px !important;
    bottom: calc(max(14px, env(safe-area-inset-bottom)) + 64px) !important;
  }
}