/* Lenguaje visual de Operación e Inventario: superficies y ritmo de Historial. */
.ui-operations-page {
  --ops-accent: var(--color-primary, #fb7185);
  --ops-surface: var(--color-surface, #0b1220);
  --ops-raised: var(--color-surface-raised, #121d2f);
  --ops-hover: var(--color-surface-hover, #182438);
  --ops-text: var(--color-text-primary, #f8fafc);
  --ops-secondary: var(--color-text-secondary, #cbd5e1);
  --ops-muted: var(--color-text-muted, #94a3b8);
  --ops-border: var(--color-border, #29364a);
  --ops-radius: var(--radius-lg, 16px);
  --ops-gap: var(--space-3, .75rem);
  color: var(--ops-text);
}

#tab-pos.ui-operations-page,
#tab-inventory.ui-operations-page { min-width: 0; }

#tab-pos .ui-pos-accounts-card {
  display: grid;
  gap: var(--ops-gap);
  padding: var(--space-4, 1rem);
  border-color: var(--ops-border);
  border-radius: var(--radius-xl, 22px);
  background: var(--ops-surface);
  box-shadow: 0 4px 14px rgb(0 0 0 / .12);
}
#tab-pos .accounts-title-area { align-items: center; gap: var(--space-3, .75rem); }
#tab-pos .accounts-main-heading { color: var(--ops-text); font-size: clamp(1.25rem, 2vw, 1.65rem); font-weight: 900; letter-spacing: -.035em; }
#tab-pos .btn-new-account.ui-button { flex: 0 0 auto; }
#tab-pos .open-accounts-scroll { gap: var(--space-2, .5rem); padding: .1rem 0 .25rem; }
#tab-pos .open-accounts-scroll .account-chip {
  border-color: var(--ops-border);
  border-radius: var(--radius-md, 12px);
  background: var(--ops-raised);
  box-shadow: 0 2px 8px rgb(0 0 0 / .12);
}
#tab-pos .open-accounts-scroll .account-chip:hover { border-color: var(--color-border-strong, #475569); background: var(--ops-hover); }
#tab-pos .open-accounts-scroll .account-chip.active { border-color: color-mix(in srgb, var(--ops-accent) 72%, var(--ops-border)); background: color-mix(in srgb, var(--ops-accent) 6%, var(--ops-raised)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ops-accent) 18%, transparent); }
#tab-pos .open-accounts-scroll .account-chip-total { color: var(--ops-accent); }
#tab-pos .ui-pos-products-card { margin-top: var(--space-3, .75rem); padding: 0; overflow: hidden; border-color: var(--ops-border); border-radius: var(--radius-xl, 22px); background: var(--ops-surface); }
#tab-pos .pos-sales-compact-menu { padding: var(--space-4, 1rem); }
#tab-pos .pos-sales-compact-heading { color: var(--ops-text); }
#tab-pos .pos-sales-compact-heading small { color: var(--ops-muted); }
#tab-pos .pos-sales-compact-grid { gap: var(--space-3, .75rem); }
#tab-pos .pos-sales-compact-card { min-height: 6.2rem; border-color: var(--ops-border); border-radius: var(--radius-lg, 16px); background: linear-gradient(145deg, var(--ops-raised), var(--ops-surface)); color: var(--ops-text); }
#tab-pos .pos-sales-compact-card:hover,
#tab-pos .pos-sales-compact-card:focus-visible { border-color: var(--ops-accent); background: var(--ops-hover); }

#tab-pos .pos-order-builder { display: grid; gap: .8rem; }
#tab-pos .pos-order-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
#tab-pos .pos-order-tab { display: flex; align-items: center; justify-content: center; gap: .55rem; min-height: 2.85rem; border: 1px solid var(--ops-border); border-radius: var(--radius-md, 12px); background: var(--ops-raised); color: var(--ops-secondary); font: inherit; font-weight: 850; cursor: pointer; }
#tab-pos .pos-order-tab span { padding: .12rem .42rem; border-radius: 999px; background: color-mix(in srgb, var(--ops-muted) 15%, transparent); font-size: .72rem; }
#tab-pos .pos-order-tab.active { border-color: var(--ops-accent); background: color-mix(in srgb, var(--ops-accent) 12%, var(--ops-raised)); color: var(--ops-text); }
#tab-pos .pos-order-products { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: .55rem; }
#tab-pos .pos-order-product { position: relative; min-width: 0; border: 1px solid var(--ops-border); border-radius: var(--radius-md, 12px); background: var(--ops-raised); }
#tab-pos .pos-order-product.is-in-cart { border-color: color-mix(in srgb, var(--ops-accent) 65%, var(--ops-border)); }
#tab-pos .pos-order-product-add { display: flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%; min-height: 4.1rem; padding: .7rem; border: 0; border-radius: inherit; background: transparent; color: var(--ops-text); text-align: left; font: inherit; cursor: pointer; }
#tab-pos .pos-order-product-add > span { display: grid; gap: .3rem; min-width: 0; }
#tab-pos .pos-order-product-add b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tab-pos .pos-order-product-add small,
#tab-pos .pos-order-cart-row small { color: var(--ops-muted); font-size: .76rem; }
#tab-pos .pos-order-product-add > strong { display: grid; place-items: center; width: 2rem; height: 2rem; flex: 0 0 auto; border-radius: 10px; background: color-mix(in srgb, var(--ops-accent) 15%, transparent); color: var(--ops-accent); font-size: 1.2rem; }
#tab-pos .pos-order-product-qty { position: absolute; top: .5rem; right: 3rem; color: var(--ops-text); font-weight: 900; }
#tab-pos .pos-order-product-minus { position: absolute; right: .45rem; bottom: .45rem; display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border: 1px solid var(--ops-border); border-radius: 9px; background: var(--ops-surface); color: var(--ops-text); font: inherit; cursor: pointer; }
#tab-pos .pos-order-empty,
#tab-pos .pos-order-cart-empty { margin: 0; padding: .8rem; color: var(--ops-muted); font-size: .86rem; }
#tab-pos .pos-order-cart { display: grid; gap: .7rem; padding: .9rem; border: 1px solid var(--ops-border); border-radius: var(--radius-lg, 16px); background: var(--ops-raised); }
#tab-pos .pos-order-cart-heading,
#tab-pos .pos-order-cart-total { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
#tab-pos .pos-order-cart-heading strong { font-size: 1rem; }
#tab-pos .pos-order-cart-heading span { color: var(--ops-muted); font-size: .8rem; }
#tab-pos .pos-order-takeout { display: flex; align-items: center; gap: .65rem; width: 100%; min-height: 3.25rem; padding: .55rem .7rem; border: 1px solid var(--ops-border); border-radius: var(--radius-md, 12px); background: var(--ops-surface); color: var(--ops-text); text-align: left; font: inherit; cursor: pointer; }
#tab-pos .pos-order-takeout > span:nth-child(2) { display: grid; gap: .12rem; flex: 1; }
#tab-pos .pos-order-takeout small { color: var(--ops-muted); font-size: .74rem; }
#tab-pos .pos-order-takeout > strong { color: var(--ops-muted); font-size: .8rem; }
#tab-pos .pos-order-takeout.active { border-color: color-mix(in srgb, var(--color-warning, #fbbf24) 65%, var(--ops-border)); background: color-mix(in srgb, var(--color-warning, #fbbf24) 10%, var(--ops-surface)); }
#tab-pos .pos-order-takeout.active > strong { color: var(--color-warning, #fbbf24); }
#tab-pos .pos-order-cart-items { display: grid; gap: .35rem; max-height: 17rem; overflow-y: auto; }
#tab-pos .pos-order-cart-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .7rem; padding: .55rem .6rem; border: 1px solid var(--ops-border); border-radius: 10px; background: var(--ops-surface); }
#tab-pos .pos-order-cart-row > span:first-child { display: grid; gap: .15rem; min-width: 0; }
#tab-pos .pos-order-cart-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tab-pos .pos-order-cart-row > strong { white-space: nowrap; font-size: .85rem; }
#tab-pos .pos-order-cart-controls { display: flex; gap: .25rem; }
#tab-pos .pos-order-cart-controls button { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border: 1px solid var(--ops-border); border-radius: 8px; background: var(--ops-raised); color: var(--ops-text); font: inherit; cursor: pointer; }
#tab-pos .pos-order-packaging { border-style: dashed; color: var(--color-warning, #fbbf24); }
#tab-pos .pos-order-cart-total { padding-top: .7rem; border-top: 1px solid var(--ops-border); font-weight: 850; }
#tab-pos .pos-order-cart-total strong { color: var(--ops-accent); font-size: 1.2rem; white-space: nowrap; }
#tab-pos .pos-order-checkout { min-height: 2.85rem; border: 0; border-radius: var(--radius-md, 12px); background: var(--color-primary, #df5b47); color: #fff; font: inherit; font-weight: 900; cursor: pointer; }
#tab-pos .pos-order-checkout:disabled { opacity: .5; cursor: not-allowed; }

#tab-inventory .inventory-page-heading { margin-bottom: var(--space-3, .75rem); }
#tab-inventory .inventory-page-heading .section-title { color: var(--ops-text); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 900; letter-spacing: -.04em; }
#tab-inventory .inventory-page-subtitle { color: var(--ops-muted); }
#tab-inventory .inventory-availability-panel.ui-card {
  padding: var(--space-4, 1rem);
  border-color: var(--ops-border);
  border-radius: var(--radius-xl, 22px);
  background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--ops-accent) 9%, transparent), transparent 38%), var(--ops-surface);
  box-shadow: 0 18px 42px rgb(0 0 0 / .16);
}
#tab-inventory .inventory-simple-board { padding: 0; }
#tab-inventory .inventory-simple-heading h3 { color: var(--ops-text); font-size: clamp(1.25rem, 2.6vw, 1.8rem); font-weight: 900; letter-spacing: -.04em; }
#tab-inventory .inventory-simple-heading p,
#tab-inventory .inventory-simple-chart-help { color: var(--ops-muted); }
#tab-inventory .inventory-quick-management {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: .55rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 1rem;
}
#tab-inventory .inventory-quick-management > .inventory-operational-actions > button,
#tab-inventory .inventory-quick-management > .inventory-operational-actions > .inventory-entry-action > button,
#tab-inventory .inventory-quick-management > .inventory-operational-actions > .inventory-secondary-actions > summary,
#tab-inventory .inventory-simple-actions button {
  min-height: 2.75rem; padding: .55rem .8rem; border: 1px solid var(--ops-border); border-radius: var(--radius-md, 12px);
  background: var(--ops-raised); color: var(--ops-secondary); font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
#tab-inventory .inventory-quick-management > .inventory-operational-actions > button:hover,
#tab-inventory .inventory-quick-management > .inventory-operational-actions > .inventory-entry-action > button:hover,
#tab-inventory .inventory-quick-management > .inventory-operational-actions > .inventory-secondary-actions > summary:hover,
#tab-inventory .inventory-simple-actions button:hover { border-color: var(--ops-accent); background: var(--ops-hover); color: var(--ops-text); }
#tab-inventory .inventory-quick-management .inventory-add-supply-button { border-color: transparent; background: var(--color-primary, #df5b47); color: #fff; }
#tab-inventory .inventory-quick-management > .inventory-operational-actions > .inventory-primary-action { border-color: transparent; background: var(--color-primary, #df5b47); color: #fff; }
#tab-inventory .inventory-simple-pick-heading { color: var(--ops-text); }
#tab-inventory .inventory-simple-filters { gap: var(--space-2, .5rem); }
#tab-inventory .inventory-simple-filter { border-color: var(--ops-border); border-radius: var(--radius-md, 12px); background: var(--ops-raised); color: var(--ops-secondary); }
#tab-inventory .inventory-simple-filter:hover { border-color: var(--color-border-strong, #475569); background: var(--ops-hover); }
#tab-inventory .inventory-simple-filter.is-active { border-color: var(--ops-accent); background: color-mix(in srgb, var(--ops-accent) 13%, var(--ops-raised)); color: var(--ops-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ops-accent) 18%, transparent); }
#tab-inventory .inventory-simple-filter-copy small { color: var(--ops-muted); }
#tab-inventory .inventory-simple-list-heading { border-color: var(--ops-border); }
#tab-inventory .inventory-simple-list-heading h4 { color: var(--ops-text); }
#tab-inventory .inventory-simple-list-heading span { color: var(--ops-muted); }
#tab-inventory .inventory-simple-row { gap: var(--space-3, .75rem); padding: var(--space-3, .75rem); border: 1px solid var(--ops-border); border-radius: var(--radius-lg, 16px); background: linear-gradient(145deg, var(--ops-raised), var(--ops-surface)); }
#tab-inventory .inventory-simple-name h4,
#tab-inventory .inventory-simple-quantity strong { color: var(--ops-text); }
#tab-inventory .inventory-simple-name > div > span,
#tab-inventory .inventory-simple-quantity span,
#tab-inventory .inventory-simple-meter small { color: var(--ops-muted); }
#tab-inventory .inventory-simple-icon { border-color: var(--ops-border); border-radius: var(--radius-md, 12px); background: var(--ops-hover); }
#tab-inventory .inventory-simple-track { background: color-mix(in srgb, var(--ops-muted) 18%, transparent); }
#tab-inventory .inventory-simple-track > span { background: linear-gradient(90deg, var(--ops-accent), #fda4af); }
#tab-inventory .inventory-simple-track > i { background: var(--ops-text); }
#tab-inventory .inventory-simple-badge { border-color: color-mix(in srgb, var(--color-success, #34d399) 30%, transparent); color: var(--color-success, #34d399); }
#tab-inventory .inventory-simple-badge.status-low { border-color: color-mix(in srgb, var(--color-warning, #fbbf24) 34%, transparent); color: var(--color-warning, #fbbf24); }
#tab-inventory .inventory-simple-badge.status-empty { border-color: color-mix(in srgb, var(--color-danger, #fb7185) 34%, transparent); color: var(--color-danger, #fb7185); }
#tab-inventory .inventory-simple-actions button:first-child { border-color: color-mix(in srgb, var(--ops-accent) 36%, var(--ops-border)); color: var(--ops-accent); }
#tab-inventory .inventory-simple-actions button:nth-child(2) { border-color: color-mix(in srgb, var(--color-warning, #fbbf24) 32%, var(--ops-border)); color: var(--color-warning, #fbbf24); }
#tab-inventory .inventory-simple-actions .inventory-simple-edit { min-width: 44px; }

@media (max-width: 720px) {
  #tab-pos .ui-pos-accounts-card,
  #tab-inventory .inventory-availability-panel.ui-card { padding: var(--space-3, .75rem); border-radius: var(--radius-lg, 16px); }
  #tab-pos .accounts-title-area { align-items: flex-start; flex-wrap: wrap; }
  #tab-pos .btn-new-account.ui-button { width: 100%; }
  #tab-pos .pos-sales-compact-menu { padding: var(--space-3, .75rem); }
  #tab-pos .pos-order-cart { padding: .7rem; }
  #tab-pos .pos-order-cart-row { grid-template-columns: minmax(0, 1fr) auto; }
  #tab-pos .pos-order-cart-controls { grid-column: 1 / -1; justify-content: flex-end; }
}
:is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .pos-sales-quick-product {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-2);
  min-height: 3.5rem; padding: .3rem .45rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); transition: border-color .16s ease, background-color .16s ease;
}
:is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .pos-sales-quick-product.selected { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface)); }
:is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .pos-sales-quick-product-main {
  display: flex; align-items: center; justify-content: flex-start; gap: var(--space-3);
  width: 100%; min-width: 0; min-height: 3.25rem; padding: .5rem .6rem;
  border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--color-text-primary); text-align: left;
  font: inherit; cursor: pointer; transition: background-color .16s ease, border-color .16s ease;
}
:is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .pos-sales-quick-product-main:hover { background: var(--color-surface-hover); }
:is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .pos-sales-quick-product-main:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
:is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .pos-sales-quick-product-main > span { display: grid; min-width: 0; gap: .2rem; }
:is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .pos-sales-quick-product-main b { min-width: 0; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }
:is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .pos-sales-quick-product-main small { color: var(--color-text-muted); font-size: var(--font-size-xs); }
:is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .pos-sales-quick-quantity { min-width: 2rem; color: var(--color-text-primary); font-size: var(--font-size-sm); font-weight: 850; font-variant-numeric: tabular-nums; text-align: center; }
:is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .pos-sales-quick-decrement { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface-raised); color: var(--color-text-secondary); font: inherit; font-size: 1.15rem; font-weight: 800; cursor: pointer; }
:is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .pos-sales-quick-decrement:hover { border-color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 12%, var(--color-surface)); color: var(--color-danger); }
:is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .pos-sales-quick-decrement:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Las dos mitades del producto usan las mismas zonas laterales que la factura. */
:is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .pos-sales-quick-product {
  position: relative;
  display: block;
  min-height: 4.1rem;
  padding: 0;
  overflow: hidden;
}
:is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .pos-sales-quick-product-main {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-height: 4.1rem;
  padding: .5rem 2.6rem;
  pointer-events: none;
  cursor: default;
  transition: none;
}
:is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .pos-sales-quick-product-main:hover,
:is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .pos-sales-quick-product-main:focus-visible { background: transparent; outline: none; }
:is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .account-action-product-details { display: grid; min-width: 0; gap: .2rem; }
:is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .account-action-product-details b { color: var(--color-text-primary); }
:is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .account-action-product-details small { color: var(--color-text-muted); white-space: nowrap; }
:is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .account-action-product-count {
  flex: 0 0 auto;
  min-width: 1.5rem;
  color: #f3b65d;
  font-size: .82rem;
  font-weight: 800;
  text-align: center;
}
:is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .account-action-product-step {
  position: absolute;
  z-index: 2;
  top: .25rem;
  bottom: .25rem;
  width: 50%;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  outline: none;
  cursor: pointer;
}
:is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .account-action-product-step--remove {
  left: 0;
  border-left: 3px solid transparent;
  border-radius: 10px 0 0 10px;
}
:is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .account-action-product-step--add {
  right: 0;
  border-right: 3px solid transparent;
  border-radius: 0 10px 10px 0;
}
:is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .account-action-product-step--remove:disabled { cursor: not-allowed; opacity: .38; }
:is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .pos-sales-quick-product {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface-raised);
}
:is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .pos-sales-quick-product.selected { border-color: color-mix(in srgb, var(--color-accent) 48%, var(--color-border)); background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface-raised)); box-shadow: none; }

/* Control de cantidad compartido por las tarjetas del POS y del picker de
   cuenta: superficie continua, mitades táctiles completas y signos discretos. */
body.app-redesign .account-action-product-picker .pos-sales-quick-product[data-product-id],
body.app-redesign :is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .pos-sales-quick-product[data-product-id] {
  border: 1px solid var(--color-border, #35404a) !important;
  border-radius: 12px;
  background: var(--color-surface-raised, #20252b) !important;
  box-shadow: none !important;
  touch-action: pan-y;
}

body.app-redesign .account-action-product-picker .pos-sales-quick-product[data-product-id].selected,
body.app-redesign :is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .pos-sales-quick-product[data-product-id].selected {
  border-color: var(--color-accent, #f3b65d) !important;
  background: color-mix(in srgb, var(--color-accent, #f3b65d) 6%, var(--color-surface-raised, #20252b)) !important;
}

body.app-redesign .account-action-product-picker .pos-sales-quick-product[data-product-id]::before,
body.app-redesign :is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .pos-sales-quick-product[data-product-id]::before {
  background: linear-gradient(90deg,
    rgba(220, 68, 68, .09) 0%, rgba(220, 68, 68, .025) 24%, transparent 48%,
    transparent 52%, rgba(54, 177, 111, .025) 76%, rgba(54, 177, 111, .09) 100%);
}

body.app-redesign .account-action-product-picker .pos-sales-quick-product[data-product-id] > .account-action-product-step,
body.app-redesign :is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .pos-sales-quick-product[data-product-id] > .account-action-product-step {
  z-index: 4;
  top: 0 !important;
  bottom: 0 !important;
  width: 50% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center;
  box-sizing: border-box;
  padding: 0 .65rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
  opacity: 1;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

body.app-redesign .account-action-product-picker .pos-sales-quick-product[data-product-id] > .account-action-product-step--remove,
body.app-redesign :is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .pos-sales-quick-product[data-product-id] > .account-action-product-step--remove {
  left: 0 !important;
  justify-content: flex-start;
}

body.app-redesign .account-action-product-picker .pos-sales-quick-product[data-product-id] > .account-action-product-step--add,
body.app-redesign :is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .pos-sales-quick-product[data-product-id] > .account-action-product-step--add {
  right: 0 !important;
  justify-content: flex-end;
}

body.app-redesign .account-action-product-picker .pos-sales-quick-product[data-product-id] > .account-action-product-step--remove::after,
body.app-redesign .account-action-product-picker .pos-sales-quick-product[data-product-id] > .account-action-product-step--add::after,
body.app-redesign :is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .pos-sales-quick-product[data-product-id] > .account-action-product-step--remove::after,
body.app-redesign :is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .pos-sales-quick-product[data-product-id] > .account-action-product-step--add::after {
  color: var(--color-text-muted, #9ca5ae);
  font-size: .95rem;
  font-weight: 650;
  line-height: 1;
  opacity: .72;
  pointer-events: none;
}

body.app-redesign .account-action-product-picker .pos-sales-quick-product[data-product-id] > .account-action-product-step--remove::after,
body.app-redesign :is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .pos-sales-quick-product[data-product-id] > .account-action-product-step--remove::after {
  content: "−";
}

body.app-redesign .account-action-product-picker .pos-sales-quick-product[data-product-id] > .account-action-product-step--add::after,
body.app-redesign :is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .pos-sales-quick-product[data-product-id] > .account-action-product-step--add::after {
  content: "+";
}

body.app-redesign .account-action-product-picker .pos-sales-quick-product[data-product-id] > .account-action-product-step--remove:disabled::after,
body.app-redesign :is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .pos-sales-quick-product[data-product-id] > .account-action-product-step--remove:disabled::after {
  opacity: .32;
}

body.app-redesign .account-action-product-picker .pos-sales-quick-product[data-product-id] > .account-action-product-step:focus-visible,
body.app-redesign :is(#posQuickMenuModal, #tab-pos .pos-desktop-catalog-grid) .pos-sales-quick-product[data-product-id] > .account-action-product-step:focus-visible {
  outline: 2px solid var(--color-focus, #f3b65d);
  outline-offset: -3px;
}