:root {
      --brand: #6c757d;
      --brand-2: #939496;
      --muted: #6c757d;
      --bg: #f6f8fb;
      --radius: 1rem;
    }

    html,
    body {
      background: var(--bg);
    }

    /* Header */
    .header {
      background: linear-gradient(140deg, var(--brand), var(--brand-2));
      color: #fff;
    }

    .header .logo {
      height: 42px
    }

    .header .subtitle {
      color: #000 !important;
      opacity: .85
    }

    /* Barra de progresso */
    .progress-wrap {
      height: 6px;
      background: #ffffff33;
      border-radius: 999px;
      overflow: hidden
    }

    .progress-wrap .bar {
      height: 100%;
      width: 0%;
      background: #fff
    }

    /* Step pills (scrollável) */
    .step-tabs-wrap {
      position: sticky;
      top: 0;
      z-index: 1030;
      background: var(--bg);
      border-bottom: 1px solid #e9ecef
    }

    .step-tabs {
      display: flex;
      gap: .5rem;
      overflow: auto;
      padding: .5rem .25rem
    }

    .step-tabs .nav-link {
      display: flex;
      align-items: center;
      gap: .5rem;
      border-radius: 999px
    }

    .step-tabs .badge {
      background: rgba(15, 125, 99, .12);
      color: var(--brand)
    }

    @media (max-width: 767.98px) {
      .step-tabs {
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 50%;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable both-edges;
      }

      .step-tabs .nav-link {
        scroll-snap-align: center;
      }
    }

    /* Cor da etapa ativa (pílula) */
    .step-tabs .nav-link.active {
      background: #000 !important;
      color: #fff !important;
      border-color: #000 !important;
      box-shadow: 0 0 0 .15rem rgba(0, 0, 0, .12);
    }

    /* Número (badge) dentro da pílula ativa */
    .step-tabs .nav-link.active .badge {
      background: #fff !important;
      color: #000 !important;
    }

    .step-tabs .nav-link:not(.active):hover {
      background: #f1f1f1;
    }


    /* Cards radio / produtos */
    .radio-card {
      position: relative;
      border: 2px solid transparent;
      border-radius: var(--radius);
      cursor: pointer;
      transition: .2s ease;
      background: #fff
    }

    .radio-card input {
      position: absolute;
      inset: 0;
      opacity: 0;
      cursor: pointer
    }

    .radio-card:hover {
      transform: translateY(-2px)
    }

    .radio-card.selected {
      border-color: var(--brand);
      box-shadow: 0 0 0 .25rem rgba(15, 125, 99, .12)
    }

    /* Grid de produtos (Versão A style) */
    .grid {
      display: grid;
      gap: 1rem
    }

    .grid.products {
      grid-template-columns: 1fr
    }

    @media (min-width: 768px) {
      .grid.products {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    .badge-hit {
      background: rgba(15, 125, 99, .12);
      color: #0f7d63
    }

    /* Footer bottom-sheet */
    .footer-nav {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1040;
      background: rgba(255, 255, 255, .9);
      backdrop-filter: blur(8px);
      border-top: 1px solid #e9ecef
    }

    .footer-nav .shadow-top {
      position: absolute;
      left: 0;
      right: 0;
      top: -12px;
      height: 12px;
      background: linear-gradient(180deg, rgba(15, 125, 99, .12), transparent)
    }

    main {
      padding-bottom: 110px
    }

    /* Dropzone */
    .dropzone {
      border: 2px dashed #ced4da;
      border-radius: var(--radius);
      padding: 1rem;
      text-align: center;
      background: #fff
    }

    .dropzone.drag {
      border-color: var(--brand);
      background: #f2fbf8
    }

    /* Chips de arquivo */
    .file-chip {
      display: flex;
      align-items: center;
      gap: .5rem;
      border: 1px solid #e9ecef;
      border-radius: 999px;
      padding: .25rem .5rem;
      background: #fff
    }

    /* Tabs de pagamento */
    .segmented .btn {
      border-radius: 999px !important
    }

    .segmented .btn-check:checked+.btn {
      color: #fff;
      background: var(--brand);
      border-color: var(--brand)
    }

    /* QR placeholder */
    .qr {
      width: 180px;
      height: 180px;
      background: repeating-linear-gradient(45deg, #dee2e6 0 6px, #ffffff 6px 12px);
      border-radius: .5rem;
      margin-inline: auto
    }

    /* Filtros PF/PJ (etapa 1) */
    .filters .btn {
      border-radius: 999px
    }

    label.btn.disabled {
      pointer-events: none;
      opacity: .65;
    }

    /* ===== Skeleton Products (shimmer) ===== */
    @keyframes shimmer {
      0% {
        background-position: -200% 0;
      }

      100% {
        background-position: 200% 0;
      }
    }

    .skeleton-grid {
      display: grid;
      gap: 1rem;
    }

    .skeleton-grid.products {
      grid-template-columns: 1fr;
    }

    @media (min-width: 768px) {
      .skeleton-grid.products {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    .s-card {
      background: #fff;
      border-radius: var(--radius);
      padding: 1rem;
      display: flex;
      gap: .75rem;
      align-items: flex-start;
      border: 1px solid #eef1f4;
      box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
    }

    .skel {
      position: relative;
      overflow: hidden;
      background: #e9ecef;
      border-radius: .5rem;
    }

    .skel::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .6), rgba(255, 255, 255, 0));
      background-size: 200% 100%;
      animation: shimmer 1.2s linear infinite;
    }

    .skel-icon {
      width: 44px;
      height: 44px;
      border-radius: .75rem;
    }

    .skel-line {
      height: 12px;
      border-radius: 999px;
    }

    .skel-price {
      width: 80px;
      height: 16px;
      border-radius: 6px;
    }

    .skel-badge {
      width: 100px;
      height: 16px;
      border-radius: 999px;
    }

    .skeleton-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: .5rem;
    }

    /* Preferências do usuário */
    @media (prefers-reduced-motion: reduce) {
      .skel::after {
        animation: none;
      }
    }

    #btnAvancar.btn {
      background: #000 !important;
      border-color: #000 !important;
      color: #fff !important;
      border-radius: 999px;
      padding: .75rem 1.1rem;
      font-weight: 600;
      letter-spacing: .2px;
      box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
      transform: translateY(0);
      transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    }

    #btnAvancar.btn:hover {
      background: #111 !important;
      box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
      transform: translateY(-1px);
    }

    #btnAvancar.btn:active {
      background: #000 !important;
      box-shadow: 0 3px 8px rgba(0, 0, 0, .25) inset, 0 2px 8px rgba(0, 0, 0, .15);
      transform: translateY(0);
    }

    #btnAvancar.btn:focus-visible {
      outline: none;
      box-shadow: 0 0 0 .2rem rgba(0, 0, 0, .2), 0 6px 14px rgba(0, 0, 0, .18);
    }

    #btnAvancar.btn:disabled {
      background: #333 !important;
      border-color: #333 !important;
      color: #bbb !important;
      box-shadow: none;
      cursor: not-allowed;
    }

    /* “Voltar” com contorno preto */
    #btnVoltar.btn {
      background: transparent !important;
      border-color: #000 !important;
      color: #000 !important;
      border-radius: 999px;
      padding: .75rem 1.1rem;
      font-weight: 600;
      letter-spacing: .2px;
      transition: background .15s ease, color .15s ease, border-color .15s ease;
    }

    #btnVoltar.btn:hover {
      background: rgba(0, 0, 0, .06) !important;
      border-color: #000 !important;
      color: #000 !important;
    }

    #btnVoltar.btn:active {
      background: rgba(0, 0, 0, .1) !important;
    }

    #btnVoltar.btn:focus-visible {
      outline: none;
      box-shadow: 0 0 0 .2rem rgba(0, 0, 0, .2);
    }

    #btnVoltar.btn:disabled {
      border-color: #bdbdbd !important;
      color: #bdbdbd !important;
      background: transparent !important;
      cursor: not-allowed;
    }

    /*alinhar os ícones com o novo visual */
    #btnAvancar i,
    #btnVoltar i {
      margin-left: .25rem;
    }

    #btnVoltar i {
      margin-right: .25rem;
      margin-left: 0;
    }

    .footer-nav .shadow-top {
      background: linear-gradient(180deg, rgba(0, 0, 0, .08), transparent);
    }

    .step-tabs .nav-link:not(.active):hover {
      background: #ededed;
    }

    .step[data-step="5"] .text-success,
    #drawerResumo .text-success {
      color: #000 !important;
    }

    .step[data-step="5"] .btn-outline-success,
    #drawerResumo .btn-outline-success {
      border-color: #000 !important;
      color: #000 !important;
      background: transparent !important;
      border-radius: 999px;
      font-weight: 600;
    }

    .step[data-step="5"] .btn-outline-success:hover,
    #drawerResumo .btn-outline-success:hover {
      background: rgba(0, 0, 0, .06) !important;
      border-color: #000 !important;
      color: #000 !important;
    }

    .step[data-step="5"] .btn-success,
    #drawerResumo .btn-success {
      background: #000 !important;
      border-color: #000 !important;
      color: #fff !important;
      border-radius: 999px;
      font-weight: 600;
      box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
    }

    .step[data-step="5"] .btn-success:hover,
    #drawerResumo .btn-success:hover {
      background: #111 !important;
      box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
    }

    .step[data-step="5"] .bi-check2-circle {
      color: #000 !important;
    }

    .step[data-step="5"] .list-group-item .fw-semibold,
    #drawerResumo #drawerTotal {
      color: #000;
    }

    .offcanvas .offcanvas-header {
      box-shadow: 0 1px 0 #eee;
    }

    .app-alert-icon {
      width: 40px;
      height: 40px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
    }

    @keyframes popIn {
      from {
        transform: scale(.78);
        opacity: 0;
      }

      to {
        transform: scale(1);
        opacity: 1;
      }
    }

    @keyframes ringPulse {
      0% {
        transform: scale(.9);
        opacity: .55;
      }

      100% {
        transform: scale(1.35);
        opacity: 0;
      }
    }

    .pay-ok-icon {
      width: 76px;
      height: 76px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;

      background: rgba(25, 135, 84, .12);
      color: #198754;
      font-size: 40px;

      position: relative;
      animation: popIn .22s ease-out;
    }

    .pay-ok-icon::after {
      content: "";
      position: absolute;
      inset: -10px;
      border-radius: 999px;
      border: 2px solid rgba(25, 135, 84, .25);
      animation: ringPulse .9s ease-out forwards;
    }

    .segmented.btn-group {
      gap: .6rem;
    }

    .segmented.btn-group>.btn,
    .segmented.btn-group>.btn:not(:first-child) {
      margin-left: 0 !important;
    }