@media (max-width: 768px) {

  /*::::::::::::::::::::::::::: PAGINACION DE DATATABLE :::::::::::::::::::::::::::*/
  .eg-pag-container {
    flex-direction: column;
    padding: 0.75rem;
  }

  .eg-pag-pagination {
    display: flex;
    gap: 0.375rem;
    overflow-x: auto;
    overflow-y: visible;
    justify-content: flex-start;
    scroll-snap-type: x mandatory;
    padding: 0.5rem 0;
    margin: 0;
    list-style: none;
    scrollbar-width: thin;
  }

  .eg-pag-pagination::-webkit-scrollbar {
    height: 3px;
  }

  .eg-pag-pagination::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }

  .eg-pag-pagination::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
  }

  .eg-pag-item {
    flex-shrink: 0;
    min-width: 2.25rem;
    height: 2.25rem;
    scroll-snap-align: start;
  }

  .eg-pag-item.control {
    position: sticky;
    background: white;
    z-index: 1;
  }

  .eg-pag-item.control:first-child {
    left: 0;
    margin-right: 0.25rem;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
  }

  .eg-pag-item.control:last-child {
    right: 0;
    margin-left: 0.25rem;
    box-shadow: -2px 0 5px rgba(0,0,0,0.1);
  }

  .eg-pag-info {
    text-align: center;
    font-size: 0.75rem;
  }
  /*:::::::::::::::::::::::: FIN PAGINACION DE DATATABLE ::::::::::::::::::::::::::*/


  /*::::::::::::::::::::::::::: HEADER RESPONSIVE :::::::::::::::::::::::::::*/
  /* Oculta texto dentro de botones */
  #cart-btn span:not(#cart-count),
  #btn-tracking span,
  #language-btn #current-language {
    display: none !important;
  }

  .header-controls {
    padding: 0 35px; /* margen interno */
  }
  /*:::::::::::::::::::::::: END HEADER RESPONSIVE :::::::::::::::::::::::::::*/




  /*:::::::::::::::::::::::: ROW DATATABLE RESPONSIVE CART :::::::::::::::::::::::::::*/
  #table-cart {
    width: 100% !important;
    border-collapse: collapse;
  }

  #table-cart * {
    box-sizing: border-box;
  }

  table, tbody, tr, td {
    display: block;
    width: 100%;
  }

  tr {
    margin-bottom: 15px;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 8px;
    overflow: hidden; /* 👈 evita desbordes */
  }

  td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    gap: 10px; /* 👈 evita que se empujen */
  }

  td::before {
    content: attr(data-label);
    font-weight: bold;
    flex: 1;
  }

  td > * {
    flex: 1;
    text-align: right;
  }

  /*Ocultar el <thead>*/
  #table-cart thead {
    display: none;
  }
  /*::::::::::::::::::::: FIN ROW DATATABLE RESPONSIVE CART ::::::::::::::::::::::::::*/


  /*:::::::::::::::::::::: FOOTER WIZARD PAYMENT RESPONSIVE :::::::::::::::::::::::::::::*/
  @media (max-width: 768px) {

    #boxCartFinishBuyBtns {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 10px;
    }

    /* Checkboxes arriba */
    #boxCartFinishBuyBtns > div {
      width: 100%;
    }

    /* Contenedor de botones en fila flexible */
    #boxCartFinishBuyBtns button {
      flex: 1 1 calc(50% - 6px); /* 👈 2 por fila */
      max-width: calc(50% - 6px);
      padding: 12px;
      font-size: 14px;
      border-radius: 8px;
    }

    /* Activar wrap SOLO para botones */
    #boxCartFinishBuyBtns {
      flex-wrap: wrap;
    }

    /* Checkboxes ocupan toda la fila */
    #boxCartFinishBuyBtns > div {
      flex: 1 1 100%;
    }

    /* Botón principal ocupa todo */
    #paymentNow {
      flex: 1 1 100%;
      max-width: 100%;
      background: #000;
      color: #fff;
      font-weight: bold;
    }

    /* Botones secundarios */
    #back-to-step-w,
    #back-to-cart-btn,
    #next-to-step-w {
      background: #f5f5f5;
    }

    /* Checkboxes */
    .form-check {
      display: flex;
      gap: 8px;
      font-size: 14px;
    }
  }
  /*:::::::::::::::::::: FIN FOOTER WIZARD PAYMENT RESPONSIVE :::::::::::::::::::::::::::*/
}