.ot-bof-wrap{max-width:1100px;margin:0 auto;padding:20px}
.ot-bof-title{font-weight:800;font-size:28px;margin:0 0 18px}
.ot-bof-section{margin:0 0 26px}
.ot-bof-section-title{font-weight:800;font-size:22px;margin:0 0 10px}
.ot-bof-table{width:100%}
.ot-bof-thumb{width:48px;height:auto;border-radius:6px}
.ot-bof-cell-thumb{width:70px}
.ot-bof-cell-price{white-space:nowrap}
.ot-bof-product{width:100%;max-width:520px}
.ot-bof-cell-name{min-width:260px}
.ot-bof-cell-qty{width:130px}
.ot-bof-qty{width:90px}
.ot-bof-remove{border:0;background:transparent;font-size:16px;line-height:1;cursor:pointer;color:#81323b;font-weight:700}
.ot-bof-add-row{margin-top:10px}

/* Footer layout: right-aligned totals with submit below */
.ot-bof-footer{display:flex;justify-content:flex-end;flex-wrap:wrap;margin-top:20px}
.ot-bof-footer-right{margin-left:auto;width:50%;min-width:320px;max-width:560px}
.ot-bof-totals{width:100%}
.ot-bof-actions{display:flex;flex-direction:column;gap:10px;align-items:flex-end;margin-top:12px}

/* Hide update button (we keep it in the markup for compatibility) */
.ot-bof-update{display:none!important}
.ot-bof-submit{font-size:20px!important;font-weight:800!important;text-decoration:none!important;padding:14px 22px!important}
.ot-bof-wrap.ot-bof-busy{opacity:.75;pointer-events:none}
.ot-bof-status{min-height:20px;font-size:14px}

@media (max-width: 768px){
  .ot-bof-title{font-size:24px}
  .ot-bof-section-title{font-size:20px}
  /* Hide product thumbnails on mobile for more room */
  .ot-bof-cell-thumb{display:none!important}
  .ot-bof-product{max-width:100%}
  .ot-bof-footer-right{width:100%;min-width:0;max-width:100%}
  .ot-bof-actions{align-items:stretch}
  .ot-bof-submit{width:100%;text-align:center}

  /* Reflow rows into a clean 2-line layout (no overlaps)
     Line 1: Product dropdown
     Line 2: Price | Quantity | Remove
  */
  .ot-bof-table thead{display:none}
  .ot-bof-table, .ot-bof-table tbody{display:block;width:100%}
  .ot-bof-row{
    display:grid;
    grid-template-columns:1fr 1fr 44px;
    grid-template-areas:
      "name name name"
      "price qty remove";
    gap:10px 12px;
    align-items:start;
    padding:14px 12px;
    border-bottom:1px solid #eee;
  }
  .ot-bof-cell-name{grid-area:name;min-width:0}
  .ot-bof-cell-price{grid-area:price;white-space:normal}
  .ot-bof-cell-qty{grid-area:qty;width:auto}
  .ot-bof-cell-remove{grid-area:remove;justify-self:end}

  /* Mobile labels since the table header is hidden */
  .ot-bof-cell-price:before{content:"Price";display:block;font-weight:600;color:#777;margin-bottom:4px}
  .ot-bof-cell-qty:before{content:"Quantity";display:block;font-weight:600;color:#777;margin-bottom:4px}
  .ot-bof-cell-name,.ot-bof-cell-price,.ot-bof-cell-qty,.ot-bof-cell-remove{padding:0!important;border:0!important}
  .ot-bof-product{width:100%;max-width:100%}
  .ot-bof-qty{width:100%;max-width:110px}

  /* Ensure the remove "x" is visible without hover */
  .ot-bof-remove{opacity:1}
}