/* ===== Bolsa dibujada en pequeño ===== */
.bolsa-dibujo { display: inline-block; zoom: var(--z); line-height: 1.2; }
.bolsa-dibujo .bolsa { width: 236px; animation: none; box-shadow: 6px 8px 0 var(--sombra, rgba(30,58,95,.2)); }
.bolsa-dibujo .bolsa__circulo { width: 156px; height: 156px; }
.bolsa-dibujo .marca { font-size: 28px; }
.bolsa-dibujo .bolsa__que, .bolsa-dibujo .bolsa__pildora, .bolsa-dibujo .bolsa__pildora--aviso { font-size: 14px; }
/* vacía: el círculo sin Minimals y un «?» */
.bolsa-dibujo--vacia .bolsa__circulo { display: grid; place-items: center; }
.bolsa-dibujo--vacia .bolsa__circulo img { display: none; }
.bolsa-dibujo--vacia .bolsa__circulo::after { content: "?"; font-family: var(--display); font-size: 90px; color: var(--chip); }

/* ===== Carrito desplegable ===== */
.boton-icono--carrito { position: relative; }
.boton-icono--carrito .carrito-cuenta { display: grid; } /* en móvil se oculta la palabra «Carrito», no el número */
.carrito-cuenta { position: absolute; top: -6px; right: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--c-coral); color: #fff; font-size: 13px; font-weight: 800; display: grid; place-items: center; border: 2px solid #fff; animation: pop 300ms both; }
.cabecera__acciones { position: relative; }
.minicarrito { position: absolute; z-index: 60; top: calc(100% + 12px); right: 0; width: min(400px, calc(100vw - 24px)); background: #fff; border: 3px solid var(--tinta); border-radius: 24px; box-shadow: 8px 10px 0 var(--tinta); padding: 16px; transform-origin: 90% 0; animation: minicarrito-entra 220ms cubic-bezier(.2,1.4,.4,1) both; }
.minicarrito[hidden] { display: none; }
.minicarrito::before { content: ""; position: absolute; top: -11px; right: 34px; width: 18px; height: 18px; background: #fff; border-left: 3px solid var(--tinta); border-top: 3px solid var(--tinta); transform: rotate(45deg); }
@keyframes minicarrito-entra { from { opacity: 0; transform: scale(.92) translateY(-6px); } }
.minicarrito__titulo { margin: 0 0 10px; font-family: var(--display); text-transform: uppercase; font-size: 24px; color: var(--c-morado); display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.minicarrito__titulo span { font-family: var(--texto); font-size: 15px; text-transform: none; color: var(--texto-2); font-weight: 700; }
/* scroll propio: la página de detrás no se mueve */
.minicarrito__lista { list-style: none; margin: 0 -6px; padding: 2px 6px; display: grid; gap: 10px; max-height: min(46vh, 380px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--c-morado) var(--fondo); }
.minicarrito__lista::-webkit-scrollbar { width: 8px; }
.minicarrito__lista::-webkit-scrollbar-thumb { background: var(--c-morado); border-radius: 8px; }
.minicarrito__lista::-webkit-scrollbar-track { background: var(--fondo); border-radius: 8px; }
.minicarrito__lista:focus-visible { outline: 3px solid var(--c-amarillo); outline-offset: 2px; }
.minicarrito__articulo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border: 2px solid var(--tinta); border-radius: 18px; background: var(--fondo); }
.minicarrito__pack { display: grid; grid-template-columns: repeat(3, 30px); gap: 3px; }
.minicarrito__pack span { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; border: 2px solid var(--tinta); background: #fff; }
.minicarrito__pack img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%; transform: scale(1.35); }
.minicarrito__bolsa { display: grid; place-items: center; width: 96px; transform: rotate(-4deg); }
.minicarrito__texto { display: grid; gap: 2px; min-width: 0; font-size: 14px; color: var(--texto-2); line-height: 1.35; }
.minicarrito__texto a { font-weight: 800; font-size: 16px; color: var(--tinta); text-decoration: none; }
.minicarrito__texto a:hover { text-decoration: underline; text-underline-offset: 3px; }
.minicarrito__precio { font-size: 16px; white-space: nowrap; }
.minicarrito__total { display: flex; justify-content: space-between; align-items: baseline; margin: 12px 0 0; padding-top: 10px; border-top: 2px dashed var(--panel-borde, #d9c9ad); font-size: 18px; }
.minicarrito__total strong { font-size: 22px; }
.minicarrito__nota { margin: 2px 0 12px; font-size: 13px; color: var(--texto-2); }
/* si no caben los dos en una línea (móvil, letra grande), el segundo baja entero */
.minicarrito__botones { display: flex; flex-wrap: wrap; gap: 10px; }
.minicarrito__botones .pildora { flex: 1 1 auto; min-width: 0; justify-content: center; text-align: center; white-space: normal; padding-inline: 18px; }
@media (max-width: 767px) {
  /* justo debajo de la cabecera (el JS pone --mc-top) y por encima de la barra «Tu bolsa» */
  .minicarrito { position: fixed; z-index: 70; top: var(--mc-top, 76px); left: 12px; right: 12px; width: auto; }
  .minicarrito::before { right: 64px; }
  .minicarrito__lista { max-height: calc(100dvh - var(--mc-top, 76px) - 210px); }
  .minicarrito__bolsa { width: 64px; }
  /* con el carrito abierto, la barra «Tu bolsa» de Elige tus 6 se aparta */
  .con-minicarrito .bolsa-movil { transform: translateY(110%) !important; }
}
@media (prefers-reduced-motion: reduce) { .minicarrito { animation: none; } }
/* ===== Bolsa dibujada en pequeño ===== */
.bolsa-dibujo { display: inline-block; zoom: var(--z); line-height: 1.2; }
.bolsa-dibujo .bolsa { width: 236px; animation: none; box-shadow: 6px 8px 0 var(--sombra, rgba(30,58,95,.2)); }
.bolsa-dibujo .bolsa__circulo { width: 156px; height: 156px; }
.bolsa-dibujo .marca { font-size: 28px; }
.bolsa-dibujo .bolsa__que, .bolsa-dibujo .bolsa__pildora, .bolsa-dibujo .bolsa__pildora--aviso { font-size: 14px; }
/* vacía: el círculo sin Minimals y un «?» */
.bolsa-dibujo--vacia .bolsa__circulo { display: grid; place-items: center; }
.bolsa-dibujo--vacia .bolsa__circulo img { display: none; }
.bolsa-dibujo--vacia .bolsa__circulo::after { content: "?"; font-family: var(--display); font-size: 90px; color: var(--chip); }