/* Charge Me Later - Bulk Order Form. Colors and fonts come from the theme where it exposes them. */
.cml-bo {
  --cml-bo-text: rgb(var(--color-foreground, 18, 18, 18));
  --cml-bo-muted: rgba(var(--color-foreground, 18, 18, 18), 0.65);
  --cml-bo-border: rgba(var(--color-foreground, 18, 18, 18), 0.15);
  --cml-bo-soft: rgba(var(--color-foreground, 18, 18, 18), 0.04);
  --cml-bo-bg: rgb(var(--color-background, 255, 255, 255));
  --cml-bo-accent: rgb(var(--color-button, 18, 18, 18));
  --cml-bo-accent-text: rgb(var(--color-button-text, 255, 255, 255));
  --cml-bo-sale: #b42318;
  color: var(--cml-bo-text);
  margin: 2rem auto;
  font-size: 1.5rem;
}
.cml-bo *, .cml-bo *::before, .cml-bo *::after { box-sizing: border-box; }
.cml-bo [hidden] { display: none !important; }
.cml-bo__heading { margin: 0 0 0.5rem; }
.cml-bo__description { color: var(--cml-bo-muted); margin-bottom: 1.5rem; }
.cml-bo__notice { padding: 1.5rem; border: 1px solid var(--cml-bo-border); border-radius: 8px; background: var(--cml-bo-soft); }
.cml-bo__notice p { margin: 0 0 1rem; }
.cml-bo__visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* toolbar */
.cml-bo__toolbar { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1.5rem; }
.cml-bo__search { position: relative; flex: 1 1 28rem; }
.cml-bo__search-input,
.cml-bo__select,
.cml-bo__filter-search,
.cml-bo__price-range input {
  width: 100%;
  min-height: 4.4rem;
  padding: 0.8rem 1.2rem;
  border: 1px solid var(--cml-bo-border);
  border-radius: 6px;
  background: var(--cml-bo-bg);
  color: var(--cml-bo-text);
  font: inherit;
}
.cml-bo__search-input { padding-right: 3.6rem; }
.cml-bo__kbd { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); padding: 0 0.6rem; border: 1px solid var(--cml-bo-border); border-radius: 4px; color: var(--cml-bo-muted); font-size: 1.2rem; pointer-events: none; }
.cml-bo__sort { flex: 0 0 auto; min-width: 16rem; }
.cml-bo__filters-toggle { display: none; }

/* layout */
.cml-bo__layout { display: grid; grid-template-columns: 24rem minmax(0, 1fr); gap: 2.4rem; align-items: start; }
.cml-bo__filters { position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: 1.2rem; }
.cml-bo__filter { border-bottom: 1px solid var(--cml-bo-border); padding-bottom: 1.2rem; }
.cml-bo__filter-title { display: block; font-weight: 600; margin-bottom: 0.6rem; cursor: pointer; }
details.cml-bo__filter > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; }
details.cml-bo__filter > summary::-webkit-details-marker { display: none; }
details.cml-bo__filter > summary::after { content: '+'; color: var(--cml-bo-muted); }
details.cml-bo__filter[open] > summary::after { content: '\2212'; }
.cml-bo__count { margin-left: auto; margin-right: 0.8rem; padding: 0 0.7rem; border-radius: 999px; background: var(--cml-bo-accent); color: var(--cml-bo-accent-text); font-size: 1.2rem; }
.cml-bo__filter-search { min-height: 3.6rem; margin-bottom: 0.6rem; }
.cml-bo__options { list-style: none; margin: 0; padding: 0; max-height: 22rem; overflow-y: auto; }
.cml-bo__options label,
.cml-bo__check { display: flex; gap: 0.8rem; align-items: center; padding: 0.3rem 0; cursor: pointer; }
.cml-bo__price-range { display: flex; gap: 0.6rem; align-items: center; }

/* chips + status */
.cml-bo__chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.8rem; }
.cml-bo__chips:empty { display: none; }
.cml-bo__chip { padding: 0.4rem 1.1rem; border: 1px solid var(--cml-bo-border); border-radius: 999px; background: var(--cml-bo-soft); color: var(--cml-bo-text); font: inherit; font-size: 1.3rem; cursor: pointer; }
.cml-bo__chip--clear { background: none; border-color: transparent; text-decoration: underline; }
.cml-bo__status { margin: 0 0 0.8rem; color: var(--cml-bo-muted); }
.cml-bo__status:empty { display: none; }

/* table */
.cml-bo__table-wrap { overflow-x: auto; }
.cml-bo__table { width: 100%; border-collapse: collapse; }
.cml-bo__table th { text-align: left; font-weight: 600; font-size: 1.3rem; color: var(--cml-bo-muted); padding: 0.8rem; border-bottom: 1px solid var(--cml-bo-border); }
.cml-bo__table td { padding: 0.8rem; border-bottom: 1px solid var(--cml-bo-border); vertical-align: middle; }
.cml-bo__col-img { width: 6.4rem; }
.cml-bo__col-img img { display: block; width: 4.8rem; height: 4.8rem; object-fit: cover; border-radius: 4px; }
.cml-bo__col-name a { color: inherit; text-decoration: none; font-weight: 500; }
.cml-bo__col-name a:hover { text-decoration: underline; }
.cml-bo__vendor, .cml-bo__sku-mobile { display: block; color: var(--cml-bo-muted); font-size: 1.3rem; }
.cml-bo__sku-mobile { display: none; }
.cml-bo__col-sku { color: var(--cml-bo-muted); font-size: 1.3rem; white-space: nowrap; }
.cml-bo__col-price, .cml-bo__col-total { white-space: nowrap; }
.cml-bo__col-total { text-align: right; font-weight: 600; }
.cml-bo__retail { color: var(--cml-bo-muted); font-size: 1.3rem; margin-right: 0.4rem; }
.cml-bo__your-price { color: inherit; }
s.cml-bo__retail + .cml-bo__your-price { color: var(--cml-bo-sale); }
.cml-bo__product td { background: var(--cml-bo-soft); }
.cml-bo__toggle { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; align-items: baseline; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cml-bo__toggle::before { content: '\25BE'; color: var(--cml-bo-muted); }
.cml-bo__toggle[aria-expanded="false"]::before { content: '\25B8'; }
.cml-bo__product-title { font-weight: 600; }
.cml-bo__variant-count { color: var(--cml-bo-muted); font-size: 1.3rem; }
.cml-bo__row--variant .cml-bo__col-name { padding-left: 2rem; }
.cml-bo__sold-out { color: var(--cml-bo-muted); font-size: 1.3rem; }

.cml-bo__qty { display: inline-flex; align-items: stretch; border: 1px solid var(--cml-bo-border); border-radius: 6px; overflow: hidden; }
.cml-bo__qty button { width: 3.6rem; border: 0; background: var(--cml-bo-soft); color: inherit; font-size: 1.8rem; cursor: pointer; }
.cml-bo__qty button:hover { background: var(--cml-bo-border); }
.cml-bo__qty input { width: 6rem; min-height: 3.8rem; border: 0; border-left: 1px solid var(--cml-bo-border); border-right: 1px solid var(--cml-bo-border); background: var(--cml-bo-bg); color: inherit; font: inherit; text-align: center; -moz-appearance: textfield; }
.cml-bo__qty input::-webkit-outer-spin-button,
.cml-bo__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cml-bo button:focus-visible, .cml-bo input:focus-visible, .cml-bo select:focus-visible, .cml-bo summary:focus-visible { outline: 2px solid var(--cml-bo-accent); outline-offset: 2px; }

.cml-bo__load-more { display: block; margin: 1.6rem auto 0; }

/* sticky order summary */
.cml-bo__summary { position: sticky; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; margin-top: 2rem; padding: 1.4rem 1.6rem; border: 1px solid var(--cml-bo-border); border-radius: 8px; background: var(--cml-bo-bg); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06); }
.cml-bo__summary-text { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; align-items: baseline; }
.cml-bo__savings { color: var(--cml-bo-sale); font-weight: 600; }
.cml-bo__note { flex-basis: 100%; color: var(--cml-bo-muted); font-size: 1.3rem; }
.cml-bo__summary-actions { display: flex; gap: 1rem; align-items: center; }
.cml-bo__clear { border: 0; background: none; color: var(--cml-bo-muted); font: inherit; text-decoration: underline; cursor: pointer; }
.cml-bo__add[disabled] { opacity: 0.5; cursor: not-allowed; }
.cml-bo__messages { flex-basis: 100%; }
.cml-bo__messages:empty { display: none; }
.cml-bo__messages p, .cml-bo__messages ul { margin: 0.4rem 0; }
.cml-bo__messages { color: var(--cml-bo-sale); }
.cml-bo__success { color: inherit; }

@media screen and (max-width: 749px) {
  .cml-bo__layout { grid-template-columns: 1fr; gap: 1rem; }
  .cml-bo__filters-toggle { display: inline-flex; align-items: center; min-height: 4.4rem; padding: 0 1.6rem; border: 1px solid var(--cml-bo-border); border-radius: 6px; background: var(--cml-bo-bg); color: inherit; font: inherit; cursor: pointer; }
  .cml-bo__sort { flex: 1 1 auto; }
  .cml-bo__filters { position: static; display: none; padding: 1.2rem; border: 1px solid var(--cml-bo-border); border-radius: 8px; }
  .cml-bo__filters.is-open { display: flex; }
  .cml-bo__kbd { display: none; }

  /* rows become cards: name on top, price / qty / total underneath */
  .cml-bo__table thead { display: none; }
  .cml-bo__table, .cml-bo__table tbody { display: block; }
  .cml-bo__row { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "img name name" "img price total" "img qty qty"; gap: 0.4rem 1rem; padding: 1rem 0; border-bottom: 1px solid var(--cml-bo-border); }
  .cml-bo__row td { padding: 0; border: 0; }
  .cml-bo__row .cml-bo__col-img { grid-area: img; width: auto; }
  .cml-bo__row .cml-bo__col-name { grid-area: name; padding-left: 0; }
  .cml-bo__row .cml-bo__col-sku { display: none; }
  .cml-bo__row .cml-bo__col-price { grid-area: price; }
  .cml-bo__row .cml-bo__col-total { grid-area: total; }
  .cml-bo__row .cml-bo__col-qty { grid-area: qty; }
  .cml-bo__sku-mobile { display: block; }
  .cml-bo__product { display: block; padding-top: 1rem; }
  .cml-bo__product td { display: inline-block; background: none; padding: 0; border: 0; vertical-align: middle; }
  .cml-bo__summary { border-radius: 8px 8px 0 0; }
  .cml-bo__summary-actions { width: 100%; }
  .cml-bo__add { flex: 1; }
}