/* --- Bloque global ------------------------------------------------------ */
#makito-techniques.card {
  border: 1px solid #e3e3e3;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
}

/* --- Botones “Sin personalizar / Personalizar” -------------------------- */
#makito-techniques .btn-group-toggle .btn {
  min-width: 140px;
}
#makito-techniques .btn-group-toggle .btn.active,
#makito-techniques .btn-group-toggle input:checked + .btn {
  background:#007cba;   /* mismo azul Woo */
  border-color:#007cba;
  color:#fff;
}
/* --- Botones “Sin personalizar / Personalizar” : base --------- */
#makito-techniques .btn-group-toggle .btn {
  min-width: 140px;                 /* lo tenías ya */
  background: #fff;                 /* fondo claro para el botón inactivo   */
  border: 1px solid #007cba;        /* contorno azul para que se vea siempre */
  color: #007cba;                   /* texto azul en estado normal          */
  transition: all .15s;
}

/* --- Estado activo (seleccionado) ----------------------------- */
#makito-techniques .btn-group-toggle .btn.active,
#makito-techniques .btn-group-toggle input:checked + .btn {
  background: #007cba;              /* relleno azul                         */
  border-color: #007cba;
  color: #fff;                      /* texto blanco                         */
}

/* --- Hover sobre el botón inactivo (opcional) ---------------- */
#makito-techniques .btn-group-toggle .btn:not(.active):hover {
  background: #e6f5ff;              /* ligero azul de fondo al pasar el ratón */
  text-decoration: none;
}
/* --- Select técnica de marcaje ----------------------------------------- */
#mk_technique {
  min-width: 260px;
}

/* --- Colores: radios => botones ---------------------------------------- */
#mk_colours label.btn {
  cursor:pointer;
  border:1px solid #ced4da;
  padding:.375rem .75rem;
  margin:0 .25rem .25rem 0;
  transition:all .15s;
}
#mk_colours input[type=radio] { display:none; }
#mk_colours input:checked + label.btn,
#mk_colours label.btn.active {
  background:#007cba;
  border-color:#007cba;
  color:#fff;
}

/* --- Alertas y preview -------------------------------------------------- */
#mk_minqty_info { font-size:.875rem; }
#mk_price_preview [data-role="price"] { font-size:1.15rem; }

/* --- Tablas de precios -------------------------------------------------- */
#mk_price_table table,
#mk_price_summary table {
  font-size:.875rem;
  border-collapse:collapse;
  width:100%;
}
#mk_price_table th,
#mk_price_table td,
#mk_price_summary th,
#mk_price_summary td {
  border:1px solid #dee2e6;
  padding:.5rem .75rem;
  text-align:center;
}
#mk_price_table th { background:#f8f9fa; font-weight:600; }
/* Área de marcaje seleccionada */
label.mk-area {
  border: 1px solid #007cba;
  padding: 4px;
  border-radius: 4px;
  transition: box-shadow .15s;
}
label.mk-area.active {
  box-shadow: 0 0 0 2px #007cba inset;
}
label.mk-area img {
  border-radius: 2px;
}
/* ──────────────────────────────────────────────────────────────
   Makito – alineación del bloque “Personalización” en el carrito
   PrestaShop 8 – Classic & derivados
   ────────────────────────────────────────────────────────────── */

/* 0 ▸ la fila (flex-container) que engloba cantidad, precio, etc. ------ */
.cart-items .product-line-grid-right > .row{
  display: flex !important;   /* volvemos a flex */
  flex-wrap: wrap;            /* comportamiento Bootstrap por defecto */
}

/* 1 ▸ la “columna” que PrestaShop reserva para acciones + nuestro bloque */
.cart-items .product-line-grid-right > .row > .col-md-2.text-xs-right{
  flex: 0 0 100% !important;  /* ocupa toda la línea */
  max-width: 100% !important;
  width: 100% !important;     /* fallback IE */
  float: none !important;     /* limpia flotado heredado */
  text-align: left !important;
  padding: 0 15px !important; /* mismo gutter que el grid */
  margin-top: .5rem;
}

/* 2 ▸ contenedor del botón 🗑 y del bloque de personalización ----------- */
.cart-line-product-actions{
  position: relative;         /* contexto para el icono eliminar */
  width: 100% !important;     /* ahora sí, 100 % de la columna   */
  max-width: 100% !important; /* sin límite fijo                  */
  margin-left: 0 !important;  /* ya no se empuja a la derecha     */
  padding-top: .25rem;
}

/* 2-b ▸ botón eliminar (se mantiene alineado) -------------------------- */
.cart-line-product-actions > a.remove-from-cart{
  position: absolute;
  top: 0;
  right: 0;
  line-height: 1;
}

/* 3 ▸ bloque “Personalización” ----------------------------------------- */
.mk-customization{
  width: 100% !important;           /* llena todo el contenedor            */
  margin-top: .25rem !important;    /* pequeño margen superior             */
  padding: .75rem 1rem !important;  /* aire interior                       */
  border: 1px solid #eeeeee;
  border-radius: .25rem;
}

.mk-customization p{                /* título “Personalización”            */
  margin-bottom: .75rem;
}

.mk-customization ul{
  list-style: none;
  padding-left: 0;
}

.mk-customization li{
  line-height: 1.4;
}

/* METIDO A TROQUEL ROBER*/

/* ── OVERRIDE: forzar label encima de los botones en Personalización ── */
#makito-techniques.card .form-group.mb-3 {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

#makito-techniques.card .form-group.mb-3 > label {
  width: auto !important;        /* que no se estire al 100% */
  text-align: left !important;
  margin-bottom: 0.5rem !important;
}

#makito-techniques.card .form-group.mb-3 .btn-group-toggle {
  margin-top: 0 !important;      /* ya separa el label con margin-bottom */
}




/* 4 ▸ móvil: nada que cambiar (ya es 100 %) ----------------------------- */
/* — si tu tema tuviera overrides extraños, actívalo: — */
/*
@media (max-width: 767.98px){
  .cart-line-product-actions{
    width: 100% !important;
  }
}
*/