:root{
      --radius: 12px; --shadow: 0 10px 30px rgba(0,0,0,.06);
  --primary: #ED9F14; --primary-light: #FFD07A; --text-dark: #111111; --border: #FFD07A;
}
.bbo-wrap.modern, .bbo-wrap.modern * { box-sizing: border-box; }
.bbo-wrap.modern{
  width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 12px; color: var(--text-dark); 
}
.bbo-wrap.modern a { color: var(--text-dark) !important; text-decoration: none; }
.bbo-wrap.modern a:hover { color: var(--primary) !important; }

/* Toolbar (Brand / Strength / Search / Clear) */
.bbo-toolbar { padding:12px; border:1px solid var(--border); border-radius:12px; background:#fff; margin: 12px 0 12px; }
.bbo-field { grid-column: span 3; display:flex; flex-direction:column; gap:6px; min-width:160px; }
.bbo-field--button{ grid-column: span 3; min-width:auto; }
.bbo-field label { font-size:12px; color: var(--text-dark); font-weight:600; }
.bbo-field select, .bbo-field input[type=search], .bbo-field input[type=number]{ height:40px; padding:8px 12px; border:1px solid var(--border); border-radius: var(--radius); background:#fff; outline:none; color: var(--text-dark);}

/* Top Actions (button + status banner) */
.bbo-top-actions { display:inline-block !important; align-items:center; justify-content:space-between; gap:12px; padding: 6px 0 12px; }
.bbo-status--banner { flex:1; min-height: 38px; display:flex; align-items:center; padding:8px 12px; border-radius: 10px; background: var(--primary-light); color: var(--text-dark); box-shadow: var(--shadow); }
.bbo-status--banner:empty { display:none; }

/* Buttons */
.bbo-btn { border-radius: var(--radius); padding:10px 14px; border:1px solid var(--primary) !important; cursor:pointer; background: var(--primary) !important; color: var(--text-dark) !important; box-shadow: var(--shadow); transition: transform .06s ease; }
.bbo-btn:hover { transform: translateY(-1px); }
.bbo-btn[disabled]{ opacity:.5; cursor:not-allowed; }
.bbo-btn.bbo-ghost, .bbo-page-btn, .bbo-prev, .bbo-next { background: var(--primary-light) !important; border-color: var(--primary-light) !important; color: var(--text-dark) !important; }

/* Table */
.bbo-table-wrap { overflow:auto; border:1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); background:#fff; }
.bbo-table { width:100%; border-collapse: collapse; }
.bbo-table th, .bbo-table td { padding:12px; border:1px solid var(--border); vertical-align:middle; }
.bbo-table thead th { position:sticky; top:0; background:#fff7e6; z-index:2; text-align:left; }
.bbo-col-image { width:60px; }
.bbo-col-qty { width:140px; }
.bbo-qty { display:flex; gap:6px; align-items:center; }
.bbo-qty-input{ width:100px; padding:8px; border:1px solid var(--border) !important; border-radius:10px !important; text-align: center !important;}
.bbo-empty { text-align:center; opacity:.8; }
.bbo-product { font-weight:600; }
.bbo-price { white-space:nowrap; }
.bbo-price del { display:none !important; } /* hide old price entirely */
.bbo-price ins { text-decoration:none; } /* show only current */

 /* Images */
.bbo-row-image { width:44px; height:44px; object-fit:cover; border-radius:10px; box-shadow:0 1px 2px rgba(0,0,0,.05); }

/* Pagination (single-line + Prev/Next + ellipses) */
.bbo-pagination { display:flex; align-items:center; gap:8px; justify-content:center; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; padding: 12px 0 16px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.bbo-page-btn, .bbo-prev, .bbo-next { padding:8px 12px; border-radius:9999px; white-space:nowrap; }
.bbo-page-btn.is-active, .bbo-page-btn[aria-current="page"] { box-shadow: 0 0 0 2px var(--text-dark) inset; }
.bbo-ellipsis{ padding:0 6px; opacity:.7; }

/* Mobile: cards */
@media (max-width: 720px){
  .bbo-field { grid-column: span 6; }
  .bbo-field--button { grid-column: span 12; }
  .bbo-top-actions { flex-direction:column; align-items:stretch; }
  .bbo-table, .bbo-table thead, .bbo-table tbody, .bbo-table th, .bbo-table td, .bbo-table tr { display:block; }
  .bbo-table thead { display:none; }
  .bbo-table tbody tr { border:1px solid var(--border); border-radius: 12px; padding:10px; margin:10px; }
  .bbo-table td { display:flex; justify-content: space-between; align-items:center; padding:8px 6px; border-bottom:none; }
  .bbo-table td::before { content: attr(data-label); font-weight:600; margin-right:10px; }
  .bbo-col-qty .bbo-qty { width:100%; }
  .bbo-qty input { width:100%; }
}

/* Ultralarge */
@media (min-width: 1440px){
  .bbo-field { grid-column: span 3; }
  .bbo-col-qty { width:160px; }
}

/* Focus styles */
.bbo-field select:focus-visible,
.bbo-field input:focus-visible,
.bbo-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* "Out of stock" pill */
.bbo-oos { display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px; font-size:11px; background: var(--primary); color: var(--text-dark); }

/* Toolbar: menos espaço entre label e campo + label maior */
.bbo-wrap.modern .bbo-toolbar .bbo-field{
  gap: 4px;            /* antes era ~6px */
}

.bbo-wrap.modern .bbo-toolbar .bbo-field label{
  font-size: 14px;     /* maior */
  line-height: 1.25;
  font-weight: 600;
  display: none;
}

/* Se quiser ainda maior em desktop */
@media (min-width: 1100px){
  .bbo-wrap.modern .bbo-toolbar .bbo-field label{ font-size: 15px; }
  .bbo-toolbar{ display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 12px 16px; align-items:end; }
}

/* ===== MOBILE POLISH — tipografia e espaçamentos coerentes ===== */
/* ===== MOBILE FIX PACK ===== */
@media (max-width: 720px){

  /* Cart como cartão sem bordas laterais “fantasma” do tema */
  .bbo-table tbody tr{
    border:1px solid var(--border);
    border-radius:12px;
    padding:14px;
    margin:12px;
    background:#fff;
    overflow:hidden; /* evita qualquer sobra de borda */
  }

  /* Cada linha do card: tira qualquer borda herdada do tema */
  .bbo-table td{
    display:flex;
    align-items:center;
    gap:12px;
    padding:8px 0;
    border:0 !important;          /* remove right/left/bottom vindos do tema */
    border-right:0 !important;
    border-left:0 !important;
    box-shadow:none !important;
  }

  /* Label (coluna virtual) com largura fixa para alinhar tudo */
  .bbo-table td::before{
    content: attr(data-label);
    flex:0 0 92px;
    font-weight:600;
    color:#4b5563;
    letter-spacing:.2px;
  }

  /* Cabeçalho do card (produto + imagem) */
  .bbo-table td[data-label="Image"]::before,
  .bbo-table td[data-label="Product"]::before{ display:none; }
  .bbo-table td[data-label="Product"] .bbo-product a{
    font-size:16px;
    font-weight:700;
    line-height:1.3;
  }

  /* Qty: ocupa largura adequada e não “quebra” */
  .bbo-col-qty .bbo-qty{ width:100%; }
  .bbo-col-qty .bbo-qty input{
    flex:1 1 auto;
    min-width:50px;              /* dá conforto ao teclado numérico */
    max-width:100%;
    height:40px;
    padding:8px 10px;
    border:1px solid var(--border);
    border-radius:10px;
    background:#fff;
    color:var(--text-dark);
  }

  /* Normaliza os spinners (evita aquele micro controle cortado) */
  .bbo-col-qty .bbo-qty input[type=number]{
    -moz-appearance:textfield;
  }
  .bbo-col-qty .bbo-qty input[type=number]::-webkit-outer-spin-button,
  .bbo-col-qty .bbo-qty input[type=number]::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
  }

  /* Botão alinhado e com altura consistente */
  .bbo-table td[data-label="Action"] .bbo-btn{
    height:40px;
    padding:10px 14px;
  }
}

/* Top actions alinhados à esquerda, um do lado do outro */
.bbo-wrap.modern .bbo-top-actions{
  gap:12px;
  justify-content:flex-start;      /* <— nada de space-between */
  flex-wrap:wrap;
}

/* Status banner: escondido por padrão; mostra só quando tiver texto */
.bbo-wrap.modern .bbo-status--banner{
  display:none;                    /* <— some quando vazio */
  flex:0 0 auto;
  align-items:center;
  height:44px;
  padding:0 18px;
  white-space:nowrap;
  background:var(--primary-light);
  color:var(--text-dark);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* Quando o JS marcar como visível */
.bbo-wrap.modern .bbo-status--banner.is-on{
  display:inline-flex;
}

/* (opcional) combine com o botão para ficarem iguais em altura */
.bbo-wrap.modern .bbo-add-all,
.bbo-wrap.modern .bbo-btn.bbo-primary{
  height:44px;
  padding:0 18px;
}
/* ===== Mobile: mais espaço entre "Qty" e o input ===== */
@media (max-width: 720px){
   .bbo-table td[data-label="Qty"]{
    display: flex;               /* já é flex em mobile, mas reforçamos */
    align-items: center;
    justify-content: space-between;  /* <-- magia: label à esquerda, input à direita */
    gap: 12px;                   /* espaçamento mínimo entre eles */
    width: 100%;
  }
  .bbo-table td[data-label="Qty"]::before{
    padding-right: 4px;        /* micro respiro extra */
  }
  /* garante alinhamento e largura confortável do input */
  .bbo-col-qty .bbo-qty{
    flex: 1 1 auto;
  }
  .bbo-col-qty .bbo-qty input{
    flex: 1 1 auto;
    min-width: 30px;   
    text-align:center; /* opcional: aumente/diminua conforme gosto */
  }
  .bbo-toolbar{
      display: block !important;
  }
  .bbo-var::before{
      flex: 0 0 !important; 
  }

}
.bbo-var{ text-align: center; }