#carrito {
  position: fixed;
  top: 0;
  right: -400px; /* oculto fuera de pantalla */
  width: 320px;
  height: 100%;

  overflow-y: auto;
  background-color: rgba(255, 255, 255, 0.95);
  padding: 20px;

  box-shadow: -2px 0 8px rgba(0,0,0,0.3);
  transition: right 0.3s ease-in-out;
  z-index: 1000;
}

/* 👉 cuando se abre */
#carrito.show {
  right: 0;
}

/* lista */
#carrito ul {
  list-style: none;
  padding: 0;
  margin: 10px 0;
}

/* items */
#carrito li {
  color: #240202;
  padding: 8px;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: small;
}

/* botones */
#carrito button {
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#carrito button:hover {
  background-color: #f3b1c500;
}


.envio-box {
  background: #fffaf7;
  border-radius: 12px;
  padding: 12px;
  margin-top: 10px;
}

.envio-box h3 {
  margin-bottom: 8px;
  font-size: 14px;
}

.envio-opcion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.2s;
}

.envio-opcion:hover {
  background: #f3ece8;
}

.envio-opcion input {
  margin-right: 6px;
}

.datos-envio {
  margin-top: 10px;
}

.datos-envio input {
  width: 100%;
  margin-bottom: 6px;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #ddd;
}

.envio-info {
  font-size: 12px;
  margin-top: 8px;
  color: #555;
}


.transfer-container {
    /* background: #b5754e; */
    background: #f3b1c5;;
    /* padding: 12px; */
    border-radius: 3px;
    display: flex;
    margin: 12px 0 12px 0;
    justify-content: center;
      transition: filter 0.2s ease, transform 0.2s ease;
}


.btn-transfer-custom {
  background: #f3b1c5;;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 28px;
  font-family: "Antonio";
  color: white;
  cursor: pointer;
  width: 180px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* hover bonito */
.transfer-container:hover {
  filter: brightness(0.65); /* 👈 más oscuro */
  
}

.mp-container {
    background: #ffe600;
    padding: 0px 10px;
    border-radius: 3px;
    display: flex;
    justify-content: center;
}
.btn-mp {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.btn-mp img {
    width: 70%;
    /* max-width: 90%; */
    height: auto;
    /* display: block; */
}
.mp-container {
  transition: filter 0.2s ease;
}

.mp-container:hover {
  filter: brightness(1.2); /* 👈 +20% más claro */
}



/* Cambiar color de los párrafos <p> */
.modal-transferencia p {
  color: #555555; /* gris oscuro */
  font-size: 16px;
}

/* Cambiar color y estilo del texto dentro de h5 */
.modal-transferencia h5 {
  color: #f11149; /* morado rosado */
  font-style: "Delius";
  margin-top: 15px;
}

/* Cambiar estilo del h4 (ojo, "bold" no es etiqueta válida, usar <strong>) */
.modal-transferencia h4 {
  color: #000000; /* rosa intenso */
  font-weight: bold;
  margin-top: 10px;
}

.producto {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.productos-aleatorios .producto:hover,
.grid-productos .producto:hover,
.productos-grid .producto:hover{
  transform: translateY(-8px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
  z-index: 3;
}
.qty-badge {
  background: #ff4757;
  color: white;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 0.85rem;
  margin-left: 8px;
  display: inline-block;
}


.item-controls { display: inline-flex; gap:8px; align-items:center; margin-left:10px; }
.item-controls button { padding:4px 8px; border-radius:6px; cursor:pointer; }
.item-subtotal { font-weight:600; margin-left:8px; }
.agregado { transform: scale(0.95); transition: transform 0.15s; }

#total {
  display: block;
  margin: 0 auto 15px auto; /* arriba 0, laterales auto, abajo 15px */
  text-align: center;
}


.modal-transferencia {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s ease;
  padding: 0 15px; /* Padding horizontal, vertical lo pondremos dinámico */
   background-color:#fff;
  border-radius: 8px;
}

/* Cuando está activo (visible) */
.modal-transferencia.active {
  max-height: 1500px; /* un valor suficientemente alto para el contenido */
  
}

.modal-content {
 
  font-family: "Delius", cursive;
  text-align: center;
  background-color: #ffffff;
}

/* Checkout scoped styles. Existing product styles remain unchanged. */
#carrito{box-sizing:border-box;right:0;width:min(100vw,520px);height:100dvh;max-height:100dvh;transform:translateX(105%);transition:transform .25s ease;background:#fffaf7;padding:24px;z-index:1200;font-family:"Delius",system-ui,sans-serif;color:#240202;box-shadow:-8px 0 32px #24020220;visibility:hidden}
#carrito.show{transform:translateX(0);visibility:visible}
#carrito [hidden],#profile-addresses [hidden]{display:none!important}
#carrito .checkout-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
#carrito .checkout-header h2{font-family:"Antonio",sans-serif;font-size:30px;margin:4px 0}
#carrito .checkout-eyebrow{font-size:12px;letter-spacing:.1em;color:#73134c}
#carrito #cerrarCarrito{background:#fff0f4;color:#73134c;width:44px;height:44px;font-size:22px}
#carrito .checkout-muted{font-size:13px;color:#65505a;line-height:1.5}
#carrito .checkout-section{border:1px solid #efdae1;background:white;padding:16px;border-radius:16px;margin:16px 0}
#carrito .checkout-section h3{font-size:17px;margin:0 0 14px;color:#73134c;display:flex;gap:9px;align-items:center}
#carrito h3 span{background:#fff0f4;border-radius:50%;width:26px;height:26px;text-align:center;line-height:26px;font-size:13px}
#carrito li.item-carrito{display:block;padding:14px 0;background:transparent;color:inherit;font-size:15px}
#carrito .item-nombre{display:block;margin-bottom:10px;line-height:1.4}
#carrito .item-controls{display:flex;flex-wrap:wrap;margin:0;gap:8px}
#carrito .item-controls button{min-width:36px;min-height:36px;background:#fff0f4;color:#73134c}
#carrito .item-cantidad{font-size:13px;align-self:center}
#carrito .item-subtotal{margin-left:auto;align-self:center}
#carrito #total{font-size:22px;font-weight:700;text-align:right;margin:16px 0}
#carrito input:not([type=radio]):not([type=checkbox]),#carrito select,#profile-addresses input:not([type=checkbox]),#profile-addresses select{box-sizing:border-box;width:100%;padding:11px 12px;border:1px solid #dccbd2;border-radius:9px;background:#fff;color:#240202;font:inherit;font-size:14px;margin:6px 0 0;min-height:44px}
#carrito label,#profile-addresses label{font-size:13px;display:block;line-height:1.4}
.address-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}.address-full{grid-column:1/-1}
#carrito .address-check,#profile-addresses .address-check{display:flex;gap:8px;align-items:center;margin:14px 0}
#carrito input[type=checkbox],#carrito input[type=radio],#profile-addresses input[type=checkbox]{width:18px;height:18px;accent-color:#73134c;flex-shrink:0;margin:0}
#carrito .checkout-methods{display:grid;gap:9px}
#carrito .checkout-methods label,#carrito .envio-opcion{border:1px solid #efdae1;border-radius:10px;padding:12px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;cursor:pointer}
#carrito .checkout-methods label:has(input:checked),#carrito .envio-opcion:has(input:checked){background:#fff0f4;border-color:#da84c8}
#carrito .checkout-methods small,#carrito .envio-opcion small{font-size:11px;margin-left:auto;color:#65505a}
#carrito .checkout-primary,#carrito .checkout-secondary,#profile-addresses button{display:block;width:100%;box-sizing:border-box;min-height:44px;border-radius:10px;padding:12px 14px;background:#73134c;color:white;text-align:center;text-decoration:none;font:inherit;font-weight:700;font-size:15px;border:0;cursor:pointer;margin-top:10px;text-shadow:none}
#carrito .checkout-secondary,#profile-addresses .address-cancel{background:#fff0f4;color:#73134c}
#carrito .checkout-primary:hover,#profile-addresses button:hover{background:#5d103e}
#carrito button:disabled{opacity:.55;cursor:wait}
#carrito .checkout-note{background:#fff0f4;border:1px solid #efdae1;border-radius:12px;padding:14px;font-size:14px;line-height:1.5}
#carrito #checkout-error{color:#a31640;font-size:14px;line-height:1.5}
#carrito #checkout-status{color:#65505a;font-size:14px}
#carrito .checkout-total{font-size:21px;font-weight:700;margin:12px 0}
#carrito #paypal-button-container{margin:14px 0}
#carrito #checkout-empty{padding:20px;background:#fff0f4;border-radius:12px}
#profile-addresses{margin-top:24px;border-top:1px solid #efdae1;padding-top:16px}
.saved-addresses{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.saved-address{border:1px solid #efdae1;border-radius:12px;padding:14px}.saved-address p{font-size:14px;line-height:1.5}.address-actions{display:flex;gap:8px;flex-wrap:wrap}#profile-addresses .address-actions button{width:auto;font-size:12px}.address-editor{padding:16px;border:1px solid #efdae1;border-radius:12px;margin-top:12px}
#carrito :focus-visible,#profile-addresses :focus-visible{outline:3px solid #d8b06b;outline-offset:2px}

@media(max-width:420px){#carrito{padding:18px}.address-fields{grid-template-columns:1fr}.address-full{grid-column:auto}}
@media(prefers-reduced-motion:reduce){#carrito{transition:none}}