/*
 * Cesta de liloo.studio: el offcanvas de la cesta de Bootscore (#offcanvas-cart,
 * su mini-carrito y su AJAX de cantidades), restilizado como el cajón del
 * diseño de Claude Design "Liloo Home v2". Se carga en todo el sitio, detrás de
 * main.css: la cesta es la misma en la portada y en la tienda.
 *
 * Marcado: template-parts/header/offcanvas-woocommerce.php (Bootscore),
 * woocommerce/cart/mini-cart.php (con la barra de envío gratis y el vacío del
 * diseño), mini-cart-item.php y mini-cart-footer.php (Bootscore).
 * La tipografía es la de la página: Inter Display en la portada, la de la
 * marca en el resto.
 */

#offcanvas-cart {
  --bs-offcanvas-width: min(420px, 92vw);
  --bs-offcanvas-bg: #FFF8CA;
  --bs-offcanvas-color: #2D120D;
  --bs-offcanvas-border-width: 0;
  --bs-offcanvas-transition: transform .45s cubic-bezier(.2, .8, .2, 1);
  --bs-body-color: #2D120D;
  --bs-link-color-rgb: 45, 18, 13;
  --bs-link-hover-color-rgb: 107, 11, 12;
  box-shadow: -20px 0 60px rgba(45, 18, 13, .18);
}

.offcanvas-backdrop {
  background-color: #2D120D;
}

.offcanvas-backdrop.show {
  opacity: .45;
}

#offcanvas-cart :focus-visible {
  outline: 2px solid #6B0B0C;
  outline-offset: 2px;
  box-shadow: none;
}


/* ---------- Cabecera: "Tu cesta (2)" y cerrar ---------- */

#offcanvas-cart .offcanvas-header {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(45, 18, 13, .12);
}

#offcanvas-cart .offcanvas-title {
  margin: 0;
  font-family: var(--liloo-font-titulos);
  font-variation-settings: normal;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.01em;
}

#offcanvas-cart .liloo-cesta-num {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
}

#offcanvas-cart .btn-close {
  --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3e%3cpath d='M1.5 1.5l11 11M12.5 1.5l-11 11' fill='none' stroke='%232D120D' stroke-width='1.6' stroke-linecap='round'/%3e%3c/svg%3e");
  --bs-btn-close-opacity: 1;
  --bs-btn-close-hover-opacity: 1;
  --bs-btn-close-focus-shadow: none;
  box-sizing: border-box;
  flex: none;
  width: 44px;
  height: 44px;
  margin: 0 0 0 auto;
  padding: 0;
  border: 1.5px solid #2D120D;
  border-radius: 50%;
  background-size: 14px;
  filter: none;
}

#offcanvas-cart .btn-close:hover {
  background-color: rgba(45, 18, 13, .06);
}


/* ---------- Cuerpo: barra de envío arriba, líneas en medio, pie abajo ---------- */

#offcanvas-cart .offcanvas-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#offcanvas-cart .cart-list,
#offcanvas-cart .widget_shopping_cart_content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

#offcanvas-cart .woocommerce-mini-cart {
  --bs-list-group-bg: transparent;
  --bs-list-group-color: #2D120D;
  --bs-list-group-border-color: rgba(45, 18, 13, .1);
  --bs-list-group-item-padding-x: 0;
  flex: 1 1 auto;
  min-height: 0;
  padding: 8px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#offcanvas-cart p {
  margin: 0;
}


/* Envío gratis (Bootstrap progress) */

#offcanvas-cart .liloo-envio {
  flex: none;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(45, 18, 13, .12);
}

#offcanvas-cart .liloo-envio[hidden] {
  display: none;
}

#offcanvas-cart .liloo-envio__texto {
  font-size: 14px;
  line-height: 1.5;
}

/* Con lámparas en la cesta, el texto ocupa siempre dos renglones: al cruzar el
   umbral ("Te faltan…" ↔ "Tienes envío gratis…") no se mueven las líneas ni
   sus +/−. */
#offcanvas-cart .liloo-envio:has(~ .woocommerce-mini-cart) .liloo-envio__texto {
  min-height: 3em;
}

#offcanvas-cart .liloo-envio__barra {
  --bs-progress-height: 6px;
  --bs-progress-border-radius: 6px;
  --bs-progress-bg: rgba(45, 18, 13, .12);
  --bs-progress-bar-bg: #6B0B0C;
  --bs-progress-bar-transition: width .4s ease;
  margin-top: 10px;
}


/* Vacía: "Aún está a oscuras" */

#offcanvas-cart .liloo-cesta-vacia {
  margin: auto;
  padding: 40px 24px;
  text-align: center;
}

#offcanvas-cart .liloo-cesta-vacia__titulo {
  font-family: var(--liloo-font-titulos);
  font-size: 20px;
  font-weight: 700;
}

#offcanvas-cart .liloo-cesta-vacia__texto {
  margin-top: 6px;
  font-size: 15px;
}


/* Líneas: foto 72 × 88, nombre y tipo, cantidad en píldora, importe y papelera */

#offcanvas-cart .woocommerce-mini-cart-item {
  position: relative;
  background: transparent;
}

#offcanvas-cart .woocommerce-mini-cart-item > .row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin: 0;
}

#offcanvas-cart .woocommerce-mini-cart-item > .row > * {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

#offcanvas-cart .item-image a {
  display: block;
}

#offcanvas-cart .item-image img {
  display: block;
  width: 72px;
  height: 88px;
  object-fit: cover;
  border-radius: 12px;
  background: #2D120D;
}

#offcanvas-cart .cart-product-title {
  color: #2D120D;
  font-family: var(--liloo-font-titulos);
  font-variation-settings: normal;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
}

#offcanvas-cart .cart-product-title:hover {
  color: #6B0B0C;
}

#offcanvas-cart .cart-product-excerpt {
  margin-top: 2px;
  color: #5C3B33 !important;
  font-size: 13px;
}

/* "1 × 5,00 €": el diseño solo enseña la píldora y el importe de la línea. */
#offcanvas-cart .item-quantity > span.quantity {
  display: none;
}

#offcanvas-cart .item-quantity div.quantity {
  display: inline-flex;
  margin-top: 8px;
}

#offcanvas-cart .item-quantity .input-group {
  flex-wrap: nowrap;
  align-items: center;
  width: auto;
  border: 1.5px solid #2D120D;
  border-radius: 100px;
}

#offcanvas-cart .item-quantity .input-group-text {
  justify-content: center;
  width: 36px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 100px !important;
  background: transparent;
  color: #2D120D;
  font-size: 18px;
  line-height: 1;
}

#offcanvas-cart .item-quantity .input-group-text:hover:not(:disabled) {
  background: rgba(45, 18, 13, .08);
}

#offcanvas-cart .item-quantity .input-group-text:disabled {
  opacity: .35;
}

#offcanvas-cart .item-quantity .qty {
  width: 26px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #2D120D;
  font: inherit;
  font-weight: 600;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

#offcanvas-cart .item-quantity .qty::-webkit-inner-spin-button,
#offcanvas-cart .item-quantity .qty::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

#offcanvas-cart .remove {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

#offcanvas-cart .bootscore-custom-render-total {
  margin: 0 !important;
  font-family: inherit;
  font-variation-settings: normal;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

#offcanvas-cart a.remove_from_cart_button,
.woocommerce #offcanvas-cart a.remove_from_cart_button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50%;
  background: transparent !important;
  color: #6B0B0C !important;
  font-size: 1rem;
}

#offcanvas-cart a.remove_from_cart_button:hover,
.woocommerce #offcanvas-cart a.remove_from_cart_button:hover {
  background: rgba(107, 11, 12, .1) !important;
  color: #6B0B0C !important;
}

.liloo-papelera {
  display: block;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M4 7h16M10 11v6M14 11v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3'/%3e%3c/svg%3e") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M4 7h16M10 11v6M14 11v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3'/%3e%3c/svg%3e") center / contain no-repeat;
}

/* Cargando (+/− o quitar): el velo de Bootscore, en el color de la cesta. Deja
   pasar los toques: cesta.js suma los +/− y los manda al volver la petición. */
#offcanvas-cart .woocommerce-mini-cart-item .blockOverlay {
  background-color: #FFF8CA !important;
}

#offcanvas-cart .woocommerce-mini-cart-item .blockUI {
  pointer-events: none;
}


/* Avisos de WooCommerce dentro de la cesta (toasts de Bootscore) */

#offcanvas-cart .woocommerce-messages-container {
  flex: none;
}

#offcanvas-cart .toast-container {
  padding: 0 24px !important;
  background: transparent !important;
}

#offcanvas-cart .woocommerce-messages .woocommerce-message,
#offcanvas-cart .woocommerce-messages .woocommerce-info,
#offcanvas-cart .woocommerce-messages .woocommerce-error {
  margin: 0 0 8px !important;
  padding: 10px 14px;
  border: 0;
  border-radius: 12px;
  background: rgba(45, 18, 13, .06);
  color: #2D120D;
  font-size: 14px;
  list-style: none;
}

#offcanvas-cart .woocommerce-messages .woocommerce-error {
  background: rgba(107, 11, 12, .1);
  color: #6B0B0C;
}

#offcanvas-cart .woocommerce-messages .woocommerce-message::before,
#offcanvas-cart .woocommerce-messages .woocommerce-info::before,
#offcanvas-cart .woocommerce-messages .woocommerce-error::before,
#offcanvas-cart .woocommerce-messages .button,
#offcanvas-cart .woocommerce-messages hr {
  display: none;
}


/* Pie: subtotal y finalizar compra */

#offcanvas-cart .cart-footer,
#offcanvas-cart .cart-footer.bg-body-tertiary {
  flex: none;
  padding: 20px 24px 24px !important;
  border-top: 1px solid rgba(45, 18, 13, .12);
  background-color: transparent !important;
}

#offcanvas-cart .woocommerce-mini-cart__total {
  margin: 0 0 14px;
  font-family: inherit;
  font-variation-settings: normal;
  font-size: 18px;
  font-weight: 400;
}

#offcanvas-cart .woocommerce-mini-cart__total strong {
  font-weight: 400;
}

#offcanvas-cart .woocommerce-mini-cart__total .amount {
  font-weight: 700;
}

#offcanvas-cart .woocommerce-mini-cart__buttons {
  margin: 0;
}

#offcanvas-cart .woocommerce-mini-cart__buttons .btn {
  --bs-btn-bg: #6B0B0C;
  --bs-btn-border-color: #6B0B0C;
  --bs-btn-color: #FFF8CA;
  --bs-btn-hover-bg: #2D120D;
  --bs-btn-hover-border-color: #2D120D;
  --bs-btn-hover-color: #FFF8CA;
  --bs-btn-active-bg: #2D120D;
  --bs-btn-active-border-color: #2D120D;
  --bs-btn-active-color: #FFF8CA;
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 54px;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  #offcanvas-cart .liloo-envio__barra {
    --bs-progress-bar-transition: none;
  }
}