/* =====================================================
   SURPIN - CARRITO MÓVIL (VERSIÓN FINAL Y LIMPIA)
   ===================================================== */

@media (max-width: 768px) {

  /* 1. NOTA INFORMATIVA ARRIBA */
  body.page-id-69 .woocommerce::before {
    content: 'Productos en el Carrito.' !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    font-family: 'Oswald', sans-serif !important; /* Misma fuente que el título */
    font-size: 15px !important; /* Mismo tamaño */
    color: #0A1F44 !important; /* Mismo color azul marino */
    font-weight: 600 !important; /* Mismo grosor */
    line-height: 1.3 !important;
    background: #F5F7FA !important;
    padding: 12px !important;
    border-radius: 8px !important;
    margin-bottom: 15px !important;
    box-sizing: border-box !important;
    border: 1px solid #E5EAF3 !important;
    text-transform: none !important; /* Para que no se ponga en mayúsculas */
  }

  /* 2. Layout general */
  body.page-id-69 .woocommerce {
    display: block !important;
    padding: 0px 10px 0px !important;
  }

  body.page-id-69 .woocommerce > .cart-collaterals {
    max-width: 100% !important;
    width: 100% !important;
    margin-top: 20px !important;
  }

  /* 3. Ocultar cabecera de la tabla */
  body.page-id-69 table.shop_table.cart thead {
    display: none !important;
  }

  /* 4. Convertir la tabla en tarjetas */
  body.page-id-69 table.shop_table.cart,
  body.page-id-69 table.shop_table.cart tbody,
  body.page-id-69 table.shop_table.cart tr,
  body.page-id-69 table.shop_table.cart td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body.page-id-69 table.shop_table.cart {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* 5. Tarjeta del producto */
  body.page-id-69 table.shop_table.cart tr {
    display: grid !important;
    grid-template-columns: 80px 1fr !important;
    gap: 12px !important;
    background: #fff !important;
    border: 1px solid #E5EAF3 !important;
    border-radius: 12px !important;
    padding: 15px !important;
    margin-bottom: 15px !important;
    position: relative !important;
    box-shadow: 0 2px 10px rgba(10, 31, 68, 0.03) !important;
  }

  /* 6. Botón "X" de eliminar */
  body.page-id-69 table.shop_table.cart td.product-remove {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    z-index: 10 !important;
    padding: 0 !important;
  }

  body.page-id-69 table.shop_table.cart td.product-remove a.remove {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #A0AEC0 !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  /* 7. Imagen redondeada */
  body.page-id-69 table.shop_table.cart td.product-thumbnail {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    padding: 0 !important;
    border: none !important;
  }

  body.page-id-69 table.shop_table.cart td.product-thumbnail img {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    border: 1px solid #F5F7FA !important;
    padding: 4px !important;
    object-fit: contain !important;
  }

  /* 8. Nombre del producto */
  body.page-id-69 table.shop_table.cart td.product-name {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: 0 25px 0 0 !important;
    border: none !important;
    text-align: left !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
  }

  body.page-id-69 table.shop_table.cart td.product-name a {
    font-size: 15px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    color: #0A1F44 !important;
  }

  /* 9. Precio unitario (pequeño y gris) */
  body.page-id-69 table.shop_table.cart td.product-price {
    grid-column: 2 !important;
    grid-row: 2 !important;
    padding: 0 !important;
    border: none !important;
    text-align: left !important;
    font-size: 14px !important;
    color: #5C7291 !important;
    font-family: 'Nunito Sans', sans-serif !important;
    font-weight: 500 !important;
  }

  body.page-id-69 table.shop_table.cart td.product-price::before {
    content: '' !important;
    display: none !important;
  }

  /* 10. Subtotal (alineado con el título) */
  body.page-id-69 table.shop_table.cart td.product-subtotal {
    grid-column: 2 !important;
    grid-row: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 3px 0 0 0 !important;
    border: none !important;
    background: transparent !important;
    text-align: left !important;
    gap: 5px !important;
  }

  body.page-id-69 table.shop_table.cart td.product-subtotal::before {
    content: 'Total: ' !important;
    font-size: 13px !important;
    color: #5C7291 !important;
    font-family: 'Nunito Sans', sans-serif !important;
    font-weight: 500 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: inline-block !important;
  }

  body.page-id-69 table.shop_table.cart td.product-subtotal .amount {
    font-size: 16px !important;
    font-family: 'Oswald', sans-serif !important;
    font-weight: 700 !important;
    color: #E63946 !important;
    line-height: 1 !important;
    display: inline-block !important;
  }

  body.page-id-69 table.shop_table.cart td::before {
    display: none !important;
  }

  /* =====================================================
     11. CANTIDAD (ALINEADA CON EL TÍTULO Y EL PRECIO)
     ===================================================== */
  
  body.page-id-69 table.shop_table.cart td.product-quantity {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    padding: 0px 0 0 90px !important; /* Aquí está la clave: 0 a la izquierda para que herede el padding de la tarjeta */
    border: none !important;
    margin-top: 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  body.page-id-69 table.shop_table.cart td.product-quantity::before {
    content: 'Cantidad:' !important;
    display: inline-block !important;
    font-size: 13px !important;
    color: #5C7291 !important;
    font-family: 'Nunito Sans', sans-serif !important;
    font-weight: 500 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  /* La píldora */
  body.page-id-69 table.shop_table.cart td.product-quantity .quantity {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    border-radius: 16px !important;
    padding: 0 2px !important;
    background: #ffffff !important;
    border: 1px solid #D5DDEE !important;
    margin: 0 !important;
  }

  body.page-id-69 table.shop_table.cart td.product-quantity .quantity input.qty {
    width: 24px !important;
    height: 28px !important;
    font-size: 14px !important;
    font-family: 'Oswald', sans-serif !important;
    font-weight: 600 !important;
    color: #0A1F44 !important;
    text-align: center !important;
    line-height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
  }

  body.page-id-69 table.shop_table.cart td.product-quantity .quantity input.qty::-webkit-outer-spin-button,
  body.page-id-69 table.shop_table.cart td.product-quantity .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Los botones + y - */
  body.page-id-69 table.shop_table.cart td.product-quantity .quantity .minus,
  body.page-id-69 table.shop_table.cart td.product-quantity .quantity .plus {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 28px !important;
    background: transparent !important;
    color: #0A1F44 !important;
    border: none !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border-radius: 50% !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  /* =====================================================
   LIMPIAR LÍNEAS Y FONDO EN LA CAJA DE TOTALES
   ===================================================== */
  /* 1. Ocultar la fila del Subtotal */
  body.page-id-69 .cart-collaterals .cart_totals table tr.cart-subtotal {
    display: none !important;
  }

  /* 2. Forzar el fondo blanco en toda la caja de totales */
  body.page-id-69 .cart-collaterals .cart_totals {
    background: #ffffff !important;
    border: 1px solid #E5EAF3 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 2px 10px rgba(10, 31, 68, 0.03) !important;
  }

  /* 3. El contenedor de la tabla y las celdas también en blanco */
  body.page-id-69 .cart-collaterals .cart_totals table,
  body.page-id-69 .cart-collaterals .cart_totals table tbody,
  body.page-id-69 .cart-collaterals .cart_totals table tr,
  body.page-id-69 .cart-collaterals .cart_totals table th,
  body.page-id-69 .cart-collaterals .cart_totals table td {
    background: #ffffff !important;
    border: none !important; /* Eliminar cualquier línea o borde */
  }

  /* 4. Eliminar la línea divisoria del título */
  body.page-id-69 .cart-collaterals .cart_totals h2 {
    border-bottom: none !important;
    margin-bottom: 10px !important;
    padding-bottom: 0 !important;
  }

  /* 5. Asegurar que la fila del Total no tenga bordes ni líneas */
  body.page-id-69 .cart-collaterals .cart_totals table tr.order-total th,
  body.page-id-69 .cart-collaterals .cart_totals table tr.order-total td {
    border-top: none !important;
    border-bottom: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* 6. Quitar el fondo gris de la fila del total (si lo hubiera) */
  body.page-id-69 .cart-collaterals .cart_totals table tr.order-total {
    background: transparent !important;
  }
}