/* =======================================================================
   OMMVISHOP — CART UI (Mobile-First VITAL)
   Scope: SOLO en la página de carrito clásico (shortcode [woocommerce_cart])
   Filosofía: compactar, menos scroll, jerarquía clara y táctil.
   ======================================================================= */


/* ──────────────────────────────────────────────────────────────────────
 * 01) BASE MOBILE – Reset de tabla y labels responsivos
 * - Limpia paddings/bordes y oculta los prefijos "Producto:", "Precio:", etc.
 * - Reduce altura por ítem sin cambiar estructura aún.
 * ──────────────────────────────────────────────────────────────────── */
@media (max-width: 782px){
  body.woocommerce-cart table.shop_table_responsive tr.cart_item td::before{ display:none !important; }
  body.woocommerce-cart table.shop_table td,
  body.woocommerce-cart table.shop_table th{ border:none; padding:0; }
}

/* ──────────────────────────────────────────────────────────────────────
 * 02) BOTÓN ELIMINAR (X) – Área táctil accesible
 * - Unificado (sin duplicados). Ajuste menor en móvil.
 * ──────────────────────────────────────────────────────────────────── */
/*body.woocommerce-cart a.remove{
  display:flex; justify-content:center; align-items:center;
  min-width:44px; min-height:44px; border-radius:50%;
  background:#f5f5f5; font-size:1.2rem; color:#777 !important;
  transition: background-color .2s ease, color .2s ease;
}
body.woocommerce-cart a.remove:hover{ background:#e0e0e0; color:#333 !important; }

@media (max-width: 782px){
  body.woocommerce-cart a.remove{ min-width:40px; min-height:40px; }
}*/

/* ──────────────────────────────────────────────────────────────────────
 * 03) ITEM COMPACTO – Grid 2 filas (thumb/título/X + qty/subtotal)
 * - Carga solo en móvil para evitar scroll infinito.
 * ──────────────────────────────────────────────────────────────────── */
@media (max-width: 782px){
  body.woocommerce-cart table.shop_table_responsive tr.cart_item{
    display:grid;
    grid-template-columns: var(--om-cart-thumb, 64px) 1fr auto;
    grid-template-areas:
      "thumb title remove"
      "thumb qty   subtotal";
    align-items:center; gap:8px 12px;
    padding:10px 12px;
    border:1px solid #eee; border-radius:10px;
    background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.04);
    margin-bottom:10px;
  }
  body.woocommerce-cart .cart_item td.product-thumbnail{ grid-area:thumb; }
  body.woocommerce-cart .cart_item td.product-name{ grid-area:title; margin:0; }
  body.woocommerce-cart .cart_item td.product-remove{ grid-area:remove; justify-self:end; }
  body.woocommerce-cart .cart_item td.product-quantity{ grid-area:qty; }
  body.woocommerce-cart .cart_item td.product-subtotal{ grid-area:subtotal; justify-self:end; }
}

/* ──────────────────────────────────────────────────────────────────────
 * 03B) CONTENEDOR DE LA LISTA – Sin borde ni sombra (solo móvil)
 * - Elimina el marco del bloque que envuelve todos los productos.
 * - Conserva los bordes individuales de cada card (tr.cart_item).
 * ──────────────────────────────────────────────────────────────────── */
@media (max-width: 782px){
  body.woocommerce-cart .woocommerce-cart-form .shop_table,
  body.woocommerce-cart table.shop_table.shop_table_responsive.cart {
    border: 0 !important;
    box-shadow: none /*!important;*/
    background: transparent /*!important;*/
    border-radius: 0 /*!important;*/
  }

/* ──────────────────────────────────────────────────────────────────────
 * 03D) ALINEAR CANTIDAD Y SUBTOTAL EN LA MISMA LÍNEA (mobile-first)
 * - Fuerza a qty y subtotal a tener la misma altura y centrado vertical.
 * - Evita márgenes/line-height raros del tema.
 * ──────────────────────────────────────────────────────────────────── */
@media (max-width: 782px){
  /* la fila ya es grid; ahora alineamos el contenido de las dos celdas */
  body.woocommerce-cart .cart_item td.product-quantity,
  body.woocommerce-cart .cart_item td.product-subtotal{
    display: flex;
    align-items: center;      /* centra vertical */
    min-height: 36px;         /* mismo alto que el control de qty */
  }

  /* qty cómodo y sin márgenes que empujen */
  body.woocommerce-cart .cart_item td.product-quantity .quantity{ 
    display: flex; align-items: center; margin: 0; 
  }

  /* subtotal a la derecha y sin “bailes” de tipografía */
  body.woocommerce-cart .cart_item td.product-subtotal{
    justify-content: flex-end;
    white-space: nowrap;      /* evita saltos de línea */
    font-weight: 700;
    font-size: 1rem;
  }
  body.woocommerce-cart .cart_item td.product-subtotal .amount,
  body.woocommerce-cart .cart_item td.product-subtotal bdi{
    display: block; margin: 0; line-height: 1;
  }

  /* si aún notas que queda 1-2px alto/bajo, usa esta línea como ajuste fino: */
  /* body.woocommerce-cart .cart_item td.product-subtotal{ line-height: 36px; } */
}
  
  
/* ──────────────────────────────────────────────────────────────────────
 * 04) TÍTULOS Y CABECERAS – Jerarquía de página y Totales
 * - Línea roja OMMVI en título principal. H2 de Totales más claro.
 * ──────────────────────────────────────────────────────────────────── */
/*body.woocommerce-cart .entry-title{
  font-size:1.6rem; font-weight:700;
  border-bottom:2px solid #e10600;
  padding-bottom:.5rem; margin-bottom:1rem;
}
body.woocommerce-cart .cart_totals h2{
  font-size:1.4rem; margin-top:1rem;
}
body.woocommerce-cart .cart_totals .order-total{
  font-size:1.3rem; font-weight:700; color:#000;
  padding:.75rem 0; border-top:2px solid #eee;
}*/

/* ──────────────────────────────────────────────────────────────────────
 * 05) TÍTULO PRODUCTO + THUMB – Variable de tamaño + 2 líneas
 * - Controla el tamaño desde --om-cart-thumb (por defecto 92px en móvil)
 * ──────────────────────────────────────────────────────────────────── */
@media (max-width: 782px){
  :root { --om-cart-thumb: 92px; } /* ajusta a 84/92/104 según prefieras */

  body.woocommerce-cart .cart_item td.product-thumbnail{
    align-self: center; /* centra la miniatura en la card */
  }
  body.woocommerce-cart .cart_item td.product-thumbnail img{
    width: var(--om-cart-thumb);
    max-width: var(--om-cart-thumb);
    max-height: calc(var(--om-cart-thumb) + 6px);
    height: auto;
    object-fit: contain;
    display: block;
  }
  body.woocommerce-cart .cart_item td.product-name a{
    display: -webkit-box;
    -webkit-line-clamp: 2;      /* máximo 2 líneas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.2;
  }
}
 
/* ──────────────────────────────────────────────────────────────────────
 * 06) PRECIO UNITARIO – Oculto en móvil (prioriza subtotal)
 * ──────────────────────────────────────────────────────────────────── */
@media (max-width: 782px){
  body.woocommerce-cart .cart_item td.product-price{ display:none !important; }
}

/* ──────────────────────────────────────────────────────────────────────
* 07) CANTIDAD – Controles cómodos en táctil
* ──────────────────────────────────────────────────────────────────── */
@media (max-width: 782px){
  body.woocommerce-cart .cart_item td.product-quantity .qty{
    height:36px; min-width:48px; text-align:center;
  }
  body.woocommerce-cart .cart_item td.product-quantity .minus,
  body.woocommerce-cart .cart_item td.product-quantity .plus{
    min-width:36px; height:36px; line-height:36px;
  }
}
 
/* ──────────────────────────────────────────────────────────────────────
 * 08) SUBTOTAL POR ÍTEM – Destacado y alineado a la derecha
 * ──────────────────────────────────────────────────────────────────── */
@media (max-width: 782px){
  body.woocommerce-cart .cart_item td.product-subtotal{
    font-weight:700; font-size:1rem; justify-self:end;
  }
}  
  
/* ──────────────────────────────────────────────────────────────────────
 * 09R) MÉTODOS DE ENVÍO – Minimal limpio (SOLO en Totales del carrito)
 * - Sin tarjetas, sin pill; solo alineado y espaciado correcto.
 * - Mantiene todo muy parecido al “antes”, pero más claro y legible.
 * ──────────────────────────────────────────────────────────────────── */

body.woocommerce-cart .cart_totals .woocommerce-shipping-methods{
  list-style: none;
  margin: .25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;                 /* separación vertical pequeña y consistente */
}

body.woocommerce-cart .cart_totals .woocommerce-shipping-methods li{
  display: flex;
  align-items: center;
  gap: .5rem;                  /* espacio entre radio y texto */
  padding: .35rem 0;           /* altura táctil sin recuadros */
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.woocommerce-cart .cart_totals .woocommerce-shipping-methods li input[type="radio"]{
  margin: 0;
  transform: scale(1.1);       /* radio un poco mayor */
  accent-color: #e10600;       /* rojo OMMVI */
}

body.woocommerce-cart .cart_totals .woocommerce-shipping-methods li label{
  margin: 0;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  font-weight: 500;
  color: #222;
  line-height: 1.2;
}

/* Resalta el método seleccionado (sin “pill”) */
body.woocommerce-cart .cart_totals .woocommerce-shipping-methods li input[type="radio"]:checked + label{
  font-weight: 700;
  color: #000;
}

/* Dirección: menos protagonismo */
body.woocommerce-cart .woocommerce-shipping-destination{
  font-size: .85rem;
  color: #666;
  margin-top: .6rem;
}

/* ──────────────────────────────────────────────────────────────────────
 * 09T) ENVÍO EN 2 LÍNEAS (sin duplicados)
 * - Quita el label fantasma "Envío:" de Woo (td::before) en Totales.
 * - Deja <th> "Envío:" en su propia línea y métodos debajo full width.
 * ──────────────────────────────────────────────────────────────────── */
@media (max-width: 782px){

  /* 1) Apilar la fila de envío: TH arriba, TD abajo */
  body.woocommerce-cart .cart_totals table.shop_table tr.shipping{
    display: block;
  }
  body.woocommerce-cart .cart_totals table.shop_table tr.shipping th,
  body.woocommerce-cart .cart_totals table.shop_table tr.shipping td{
    display: block;
    width: 100% !important;
    padding-left: 0;
    padding-right: 0;
  }

  /* 2) Quitar el label fantasma "Envío:" que Woo añade con ::before */
  body.woocommerce-cart .cart_totals table.shop_table_responsive tr.shipping td::before{
    content: none !important;
    display: none !important;
  }

  /* 3) Estilo del título "Envío:" */
  body.woocommerce-cart .cart_totals table.shop_table tr.shipping th{
    margin-bottom: .35rem;
    font-weight: 700;
    color: #222;
  }

  /* 4) Métodos a ancho completo (minimal limpio) */
  body.woocommerce-cart .cart_totals .woocommerce-shipping-methods{
    list-style: none; margin: .25rem 0 0; padding: 0;
    display: flex; flex-direction: column; gap: .25rem;
    max-width: 100%;
  }
  body.woocommerce-cart .cart_totals .woocommerce-shipping-methods li{
    display: flex; align-items: center; gap: .5rem;
    padding: .35rem 0; background: transparent !important; border: 0 !important;
  }
  body.woocommerce-cart .cart_totals .woocommerce-shipping-methods li input[type="radio"]{
    margin: 0; transform: scale(1.1); accent-color: #e10600; flex: 0 0 auto;
  }
  body.woocommerce-cart .cart_totals .woocommerce-shipping-methods li label{
    margin: 0; padding: 0 !important; flex: 1 1 auto;
    font-weight: 500; color: #222; line-height: 1.25;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
  }
  body.woocommerce-cart .cart_totals .woocommerce-shipping-methods li input[type="radio"]:checked + label{
    font-weight: 700; color: #000;
  }

  /* 5) Dirección menos protagonista */
  body.woocommerce-cart .woocommerce-shipping-destination{
    font-size: .85rem; color: #666; margin-top: .6rem;
  }
}

/* ──────────────────────────────────────────────────────────────────────
 * 09U-FIX) ENVÍO — Separación real entre bullet y texto (mobile-first)
 * - Fuerza layout en 2 columnas: [radio][label].
 * - Anula posicionamientos raros del tema en el <input>.
 * - Evita solapamientos incluso con radios escalados.
 * ──────────────────────────────────────────────────────────────────── */
@media (max-width: 782px){
  /* Cada método: grid con 2 columnas */
  body.woocommerce-cart .cart_totals .woocommerce-shipping-methods li{
    display: grid !important;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: .6rem;       /* separación clara entre radio y texto */
    padding: .25rem 0;
  }

  /* Normaliza el radio: posición estática y margen real a la derecha */
  body.woocommerce-cart .cart_totals .woocommerce-shipping-methods li input[type="radio"]{
    position: static !important;
    margin: 0 .55rem 0 0 !important;  /* más aire que antes */
    transform: scale(1.08);           /* tamaño cómodo */
    transform-origin: left center;    /* que no crezca “encima” del texto */
    accent-color: #e10600;
  }

  /* El label ocupa la segunda columna completa, sin indentaciones raras */
  body.woocommerce-cart .cart_totals .woocommerce-shipping-methods li label{
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    text-indent: 0 !important;
    white-space: normal;
    line-height: 1.25;
    text-align: left !important;
  }

  /* Seleccionado más claro */
  body.woocommerce-cart .cart_totals .woocommerce-shipping-methods li input[type="radio"]:checked + label{
    font-weight: 700;
    color: #000;
  }
}

  
/* ──────────────────────────────────────────────────────────────────────
 * 15) TOTALES — Espaciado vertical en Subtotal, Envío y Total
 * - Más aire arriba/abajo de los tres títulos y sus valores.
 * - Compatible con nuestro layout 09T (Envío en 2 líneas).
 * ──────────────────────────────────────────────────────────────────── */
body.woocommerce-cart .cart_totals table.shop_table tr.cart-subtotal th,
body.woocommerce-cart .cart_totals table.shop_table tr.cart-subtotal td{
  padding-top: 2px;
  padding-bottom: 10px;
}

body.woocommerce-cart .cart_totals table.shop_table tr.shipping th,
body.woocommerce-cart .cart_totals table.shop_table tr.shipping td{
  padding-top: 10px;
  padding-bottom: 2px;
}

/* En móvil, el <th> “Envío:” queda arriba; dale un poco más de separación
   respecto a la lista de métodos (ajusta si quieres aún más aire). */
@media (max-width: 782px){
  body.woocommerce-cart .cart_totals table.shop_table tr.shipping th{
    margin-bottom: .5rem; /* sube de .35rem → .5rem */
  }
}

body.woocommerce-cart .cart_totals table.shop_table tr.order-total th,
body.woocommerce-cart .cart_totals table.shop_table tr.order-total td{
  padding-top: 10px;
  padding-bottom: 10px;
}