:root{
  --loo-text: #1A1A1A;
  --loo-black: #000000;
  --loo-white: #FFFFFF;

  --loo-granate: #7A1F2B;     /* hover comprar + precio final */
  --loo-sage: #A3B8A1;        /* promos */
  --loo-cloud: #F5F5F2;       /* cloud dream */
}

/* -------------------------------
   Texto general + fondos
-------------------------------- */
html, body{
  color: var(--loo-text);
  background: var(--loo-white);
}

a{ color: var(--loo-text); }
a:hover{ color: var(--loo-granate); }

.bg-white{ background: var(--loo-white) !important; }
.bg-cloud,
.bg-cloud-dream{ background: var(--loo-cloud) !important; }
.bg-sage{ background: var(--loo-sage) !important; }

/* =========================================================
   BOTONES
   ✅ Dejamos el 90% de botones con el estilo default de Rubix
   ✅ Solo personalizamos:
      - Comprar / Añadir al carrito (negro y hover granate)
      - Ver carrito / Finalizar compra (negro y hover granate)
      - (Opcional) acciones directas del bloque de carrito
   ========================================================= */

/* --- Botón COMPRAR / AÑADIR AL CARRITO --- */
.add-to-cart,
.btn-add-to-cart,
.product-add-to-cart .add-to-cart,
.product-actions .add-to-cart,
#add-to-cart-or-refresh button[type="submit"],
button[data-button-action="add-to-cart"],
a.add-to-cart{
  background-color: var(--loo-black) !important;
  border: 1px solid var(--loo-black) !important;
  color: var(--loo-white) !important;
}

.add-to-cart *,
.btn-add-to-cart *,
button[data-button-action="add-to-cart"] *{
  color: var(--loo-white) !important;
  fill: var(--loo-white) !important;
}

.add-to-cart:hover,
.btn-add-to-cart:hover,
.product-add-to-cart .add-to-cart:hover,
.product-actions .add-to-cart:hover,
#add-to-cart-or-refresh button[type="submit"]:hover,
button[data-button-action="add-to-cart"]:hover,
a.add-to-cart:hover{
  background-color: var(--loo-granate) !important;
  border-color: var(--loo-granate) !important;
  color: var(--loo-white) !important;
}

.add-to-cart:hover *,
.btn-add-to-cart:hover *,
button[data-button-action="add-to-cart"]:hover *{
  color: var(--loo-white) !important;
  fill: var(--loo-white) !important;
}

/* --- Botones del carrito (Ver carrito / Finalizar compra) ---
   Nota: estos selectores cubren los nombres más comunes. */
.cart-content-btn .btn,
.cart-content-btn .btn-primary,
.cart-content-btn a,
.cart-summary .checkout a,
a.btn[href*="order"],
a.btn[href*="carrito"],
a.btn[href*="cart"],
a.btn[href*="pedido"],
button[name="checkout"],
button[name="confirmDeliveryOption"]{
  background-color: var(--loo-black) !important;
  border: 1px solid var(--loo-black) !important;
  color: var(--loo-white) !important;
}

.cart-content-btn .btn:hover,
.cart-content-btn .btn-primary:hover,
.cart-summary .checkout a:hover,
a.btn[href*="order"]:hover,
a.btn[href*="cart"]:hover,
button[name="checkout"]:hover,
button[name="confirmDeliveryOption"]:hover{
  background-color: var(--loo-granate) !important;
  border-color: var(--loo-granate) !important;
  color: var(--loo-white) !important;
}

/* -------------------------------
   Badges promo: Nuevo / Descuento
   Verde + texto blanco
-------------------------------- */
.badge,
.product-flag,
.product-flags .product-flag,
.product-flags li,
.new,
.on-sale,
.discount,
.sale,
.badge-success{
  background: var(--loo-sage) !important;
  color: var(--loo-white) !important;
  border: 0 !important;
}

.badge *,
.product-flag *{
  color: var(--loo-white) !important;
}

/* -------------------------------
   PRECIOS
   - Precio actual (con descuento) en granate
   - Precio anterior tachado en negro
-------------------------------- */
.price,
.product-price,
.current-price,
.current-price .price,
.product-price-and-shipping .price,
.product-price-and-shipping .current-price,
.product-price-and-shipping .current-price span,
#product .current-price span,
#product .product-price{
  color: var(--loo-granate) !important;
}

.regular-price,
.old-price,
.price-regular,
.price-before-discount,
.product-price-and-shipping .regular-price,
.product-price-and-shipping .regular-price span,
del,
del .price,
del span{
  color: var(--loo-text) !important;
}

.discount-percentage,
.discount-amount,
.price-percent-reduction{
  color: var(--loo-granate) !important;
}
/* =================================================
   PRODUCT CARD — WISHLIST + COMPARE
   Fondo verde corporativo + icono negro
   ================================================= */

/* Botones laterales (wishlist / compare) */
.product-miniature .leo-wishlist-button,
.product-miniature .leo-compare-button,
.product-miniature .wishlist-button,
.product-miniature .compare-button,
.product-miniature .btn-wishlist,
.product-miniature .btn-compare,
.product-miniature .action-btn.wishlist,
.product-miniature .action-btn.compare,
.product-miniature .product-action .btn:not(.add-to-cart):not(.quick-view){
  background-color: var(--loo-sage) !important;
  border: 0 !important;
  color: var(--loo-black) !important;
}

/* Iconos dentro (SVG / font icons) */
.product-miniature .leo-wishlist-button i,
.product-miniature .leo-compare-button i,
.product-miniature .wishlist-button i,
.product-miniature .compare-button i,
.product-miniature .btn-wishlist i,
.product-miniature .btn-compare i,
.product-miniature .leo-wishlist-button svg,
.product-miniature .leo-compare-button svg{
  color: var(--loo-black) !important;
  fill: var(--loo-black) !important;
}

/* Hover: mantenemos verde pero un poco más oscuro */
.product-miniature .leo-wishlist-button:hover,
.product-miniature .leo-compare-button:hover,
.product-miniature .wishlist-button:hover,
.product-miniature .compare-button:hover,
.product-miniature .btn-wishlist:hover,
.product-miniature .btn-compare:hover{
  background-color: #8FA98D !important; /* verde un poco más oscuro */
}

/* Evita que hereden estilos de botones negros globales */
.product-miniature .leo-wishlist-button *,
.product-miniature .leo-compare-button *,
.product-miniature .wishlist-button *,
.product-miniature .compare-button *{
  color: var(--loo-black) !important;
  fill: var(--loo-black) !important;
}

/* =================================================
   PRODUCT IMAGE ACTIONS
   Añadir + Vista rápida
   Hover en granate corporativo
   ================================================= */

/* Estado normal */
.product-miniature .product-action a.add-to-cart,
.product-miniature .product-action a.quick-view,
.product-miniature .product-action button.add-to-cart,
.product-miniature .product-action button.quick-view{
  background-color: var(--loo-black) !important;
  border-color: var(--loo-black) !important;
  color: var(--loo-white) !important;
}

/* Iconos internos */
.product-miniature .product-action a.add-to-cart *,
.product-miniature .product-action a.quick-view *,
.product-miniature .product-action button.add-to-cart *,
.product-miniature .product-action button.quick-view *{
  color: var()
}

/* =================================================
   CARRITO (Rubix/Leo) — BADGE DESCUENTO + PAPELERA
   ================================================= */

/* --- Badge descuento: fondo verde, texto negro --- */
/* Cubrimos los selectores habituales del carrito en Presta/Rubix */
.cart-overview .discount-percentage,
.cart-overview .price-percent-reduction,
.cart-overview .price-percent-reduction2,
.cart-overview .product-discount,
.cart-overview .discount,
.cart-overview .badge,
.cart-overview .cart-discount .label,
.cart-overview .cart-item .discount-percentage,
.cart-overview .cart-item .price-percent-reduction{
  background-color: #A3B8A1 !important;
  color: #1A1A1A !important;
  border: 0 !important;
}

/* Asegura que el texto interno también sea negro */
.cart-overview .discount-percentage *,
.cart-overview .price-percent-reduction *,
.cart-overview .price-percent-reduction2 *,
.cart-overview .product-discount *,
.cart-overview .discount *,
.cart-overview .badge *,
.cart-overview .cart-discount .label *{
  color: #1A1A1A !important;
}

/* --- Papelera (eliminar línea) gris claro --- */
/* En Presta 8/9 normalmente es un <a class="remove-from-cart"> con icono dentro */
.cart-overview a.remove-from-cart,
.cart-overview a.remove-from-cart i,
.cart-overview a.remove-from-cart svg,
.cart-overview .remove-from-cart,
.cart-overview .remove-from-cart i,
.cart-overview .remove-from-cart svg,
.cart-overview .cart-item .remove-from-cart,
.cart-overview .cart-item .remove-from-cart i,
.cart-overview .cart-item .remove-from-cart svg,
.cart-overview i.material-icons.delete,
.cart-overview i.material-icons{
  color: #B5B5B5 !important;
  fill: #B5B5B5 !important;
}

/* Hover papelera un poco más oscuro */
.cart-overview a.remove-from-cart:hover,
.cart-overview a.remove-from-cart:hover i,
.cart-overview a.remove-from-cart:hover svg,
.cart-overview .remove-from-cart:hover,
.cart-overview .remove-from-cart:hover i,
.cart-overview .remove-from-cart:hover svg{
  color: #8A8A8A !important;
  fill: #8A8A8A !important;
}

/*********************************
  INNOTU
*********************************/
body#checkout .custom-checkbox span {
    float: none;
}
body#checkout section.checkout-step #login-form .form-control-label {
    text-align: left;
}
.product-variants > .product-variants-item ul li .radio-label {
    font-size: 16px;
    padding: 3px 10px;
    font-weight: 400;
}
.product-variants > .product-variants-item .color {
    width: 35px;
    height: 35px;
}