/* ==========================================================================
   Carrito lateral (complementos a base.css), botones de agregar y avisos de
   WooCommerce. Va en todas las páginas: se mantiene pequeño.
   ========================================================================== */

.drawer__link {
  justify-self: center;
  font-size: 0.95rem; font-weight: 600;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.drawer__foot .btn { width: 100%; }

.cart-item { transition: opacity 200ms ease, transform 240ms var(--ease-out); }
.cart-item[aria-busy="true"] { opacity: 0.6; }
.cart-item[aria-busy="true"] .stepper { pointer-events: none; }
.cart-item.is-leaving { opacity: 0; transform: translateX(12px); }
.cart-item__extra { font-style: italic; overflow-wrap: anywhere; }
.cart-item__extra span { font-style: normal; color: var(--choco-900); }
.cart-item__name { overflow-wrap: anywhere; }
.stepper button[disabled] { opacity: 0.35; cursor: not-allowed; }
.stepper button[disabled]:active { transform: none; }

/* Cerrado, el carrito lateral no se ve, no proyecta sombra ni recibe foco. */
.drawer { visibility: hidden; transition: transform 200ms var(--ease-out), visibility 0s linear 200ms; }
.drawer.is-open { visibility: visible; transition: transform 340ms var(--ease-drawer); }

/* Botón de agregar mientras espera a WooCommerce */
[data-tm-add].is-loading { pointer-events: none; opacity: 0.75; }
[data-tm-add].is-loading::after {
  content: ""; width: 1em; height: 1em; margin-left: 4px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: tm-spin 700ms linear infinite;
}
@keyframes tm-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Avisos de WooCommerce (tienda, ficha, carrito, pago y cuenta)
   -------------------------------------------------------------------------- */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.tm-notice {
  list-style: none;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin: 0 0 18px; padding: 14px 18px;
  border-radius: var(--r-small);
  background: #fff5e4; color: var(--choco-950);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--choco) 14%, transparent);
  font-weight: 500; line-height: 1.45;
}
.woocommerce-message { background: color-mix(in srgb, var(--pistachio) 55%, #fff); box-shadow: none; color: #3d1f16; }
.woocommerce-info { background: color-mix(in srgb, var(--teal) 18%, #fff); box-shadow: none; }
.woocommerce-error { background: color-mix(in srgb, var(--pink) 70%, #fff); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--raspberry) 30%, transparent); color: #3d1f16; display: grid; gap: 6px; }
.woocommerce-error li { margin: 0; }
.woocommerce-message > i, .woocommerce-info > i { font-size: 1.35em; flex: none; }
.woocommerce-message a:not(.btn), .woocommerce-info a:not(.btn), .woocommerce-error a:not(.btn) { font-weight: 650; }
.woocommerce-message .btn, .woocommerce-info .btn, .woocommerce-message .button, .woocommerce-info .button { order: 2; margin-left: auto; }
.woocommerce-message .button, .woocommerce-info .button {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  border-radius: var(--r-pill); background: var(--choco-950); color: var(--cream);
  font-weight: 650; font-size: 0.95rem; text-decoration: none;
}
.tm-notice__text { flex: 1 1 220px; }

/* Aviso: ancho según el texto (con left: 50% el navegador lo encogía a media pantalla). */
.toast { width: max-content; max-width: calc(100% - 32px); }
.toast span { min-width: 0; }
body.cart-open .toast .btn { display: none; }