/* Oima POS Lite v20.0.1.4.6: SINGLE shell contract for ALL public pages. */
/* This stylesheet intentionally loads after the old CSS to eliminate per-page layout drift. */
#wrap.oima-pos-frontend,
#wrap.oima-pos-demo-shell {
  --op145-shell-max: 1420px;
  --op145-shell-pad: clamp(18px, 2.5vw, 36px);
  --op145-logo-w: 108px;
  --op145-logo-h: 29px;
}
/* One outer rectangle shared by header, hero, all Home cards, cashier and footer. */
#wrap.oima-pos-frontend .op-nav-inner.container,
#wrap.oima-pos-frontend .op-footer-inner.container,
#wrap.oima-pos-frontend .op-co-wrap.container,
#wrap.oima-pos-frontend .op-workspace-inner.container,
#wrap.oima-pos-frontend > .container,
#wrap.oima-pos-frontend .op-section.container,
#wrap.oima-pos-frontend .op-page-wrap.container,
#wrap.oima-pos-frontend .op-v126-hero-section.container,
#wrap.oima-pos-frontend .op-v126-features.container,
#wrap.oima-pos-frontend .op-callout-wrap.container,
#wrap.oima-pos-frontend .op-section-tight.container {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: var(--op145-shell-max) !important;
  margin-inline: auto !important;
  padding-inline: var(--op145-shell-pad) !important;
}
/* Specific Home sections must be aligned by THEIR CARDS' edges, not full-bleed blocks. */
#wrap.oima-pos-frontend[data-op-page="page_home"] .op-callout-wrap,
#wrap.oima-pos-frontend[data-op-page="page_home"] .op-v126-hero-section,
#wrap.oima-pos-frontend[data-op-page="page_home"] .op-v126-features,
#wrap.oima-pos-frontend[data-op-page="page_home"] .op-section-tight {
  max-width:var(--op145-shell-max) !important;
  padding-inline:var(--op145-shell-pad) !important;
  margin-inline:auto !important;
  box-sizing:border-box !important;
}
#wrap.oima-pos-frontend[data-op-page="page_home"] .op-callout-wrap > .op-callout {
  width:100% !important;
  max-width:100% !important;
  margin-inline:0 !important;
  box-sizing:border-box !important;
}
/* The same REAL Odoo Website brand on top and bottom; bound its nested image wrapper too. */
#wrap.oima-pos-frontend .op-logo-link,
#wrap.oima-pos-demo-shell .op-logo-link,
body .op-site-nav .op-logo-link,
body .op-footer .op-logo-link {
  width:var(--op145-logo-w) !important;
  max-width:var(--op145-logo-w) !important;
  min-width:0 !important;min-height:0 !important;
  height:var(--op145-logo-h) !important;
  margin:0 !important;padding:0 !important;
  display:flex !important;flex:0 0 var(--op145-logo-w) !important;
  align-items:center !important;justify-content:flex-start !important;
  overflow:hidden !important;
}
body .op-site-nav .op-logo-link > a,
body .op-footer .op-logo-link > a,
body .op-site-nav .op-logo-link :is(.navbar-brand, .op-brand-link),
body .op-footer .op-logo-link :is(.navbar-brand, .op-brand-link),
body .op-logo-link span[role="img"],
body .op-logo-link picture {
  width:auto !important;max-width:100% !important;
  height:auto !important;max-height:var(--op145-logo-h) !important;
  min-width:0 !important;min-height:0 !important;
  display:inline-flex !important;align-items:center !important;
  margin:0 !important;padding:0 !important;
  line-height:1 !important;box-sizing:border-box !important;
  font-size:inherit !important;flex-shrink:1 !important;
}
body .op-site-nav .op-logo-link img,
body .op-footer .op-logo-link img,
body .op-site-nav .op-logo-link svg,
body .op-footer .op-logo-link svg {
  display:block !important;
  width:auto !important;height:auto !important;
  max-width:var(--op145-logo-w) !important;
  max-height:var(--op145-logo-h) !important;
  object-fit:contain !important;object-position:left center !important;
  margin:0 !important;padding:0 !important;
  position:static !important;
  box-sizing:border-box !important;
}
/* Nav structure stays the same across changes of page and active route. */
body .op-site-nav {
  width:100% !important;max-width:100% !important;
  background:#fff !important;border-bottom:1px solid #e0e7f0 !important;
  margin:0 !important;padding:0 !important;flex:0 0 auto !important;
  position:relative !important;z-index:70 !important;
}
body .op-site-nav .op-nav-inner.container {
  width:100% !important;max-width:var(--op145-shell-max) !important;
  margin-inline:auto !important;
  padding-inline:var(--op145-shell-pad) !important;
  min-height:65px !important;height:65px !important;
  display:flex !important;align-items:center !important;
  justify-content:space-between !important;
  gap:clamp(10px,1.7vw,22px) !important;
  box-sizing:border-box !important;
}
body .op-site-nav .op-desktop-nav {
  display:flex !important;align-items:center !important;
  justify-content:flex-end !important;
  flex:1 1 auto !important;min-width:0 !important;
  margin:0 0 0 auto !important;padding:0 !important;
  gap:clamp(6px,1vw,16px) !important;
  position:static !important;background:transparent !important;
  box-shadow:none !important;
}
body .op-site-nav .op-desktop-nav a {
  width:auto !important;min-height:39px !important;
  display:inline-flex !important;align-items:center !important;
  white-space:nowrap !important;
  padding:8px clamp(7px,.9vw,13px) !important;
  margin:0 !important;
  font:800 12px/1.35 Montserrat,Arial,sans-serif !important;
  color:#55677d !important;
}
body .op-site-nav .op-language-control {
  flex:0 0 auto !important;margin:0 !important;
  width:76px !important;min-width:76px !important;
  height:38px !important;
  padding:7px 29px 7px 12px !important;
  background-position:right 9px center !important;
  font:800 12px Montserrat,Arial,sans-serif !important;
}
/* Exactly three footer columns, with a proportional logo aligned to the first card edge.
   No native theme flex row or grid rule is allowed to move items. */
body .op-footer {
  width:100% !important;max-width:100% !important;
  min-width:0 !important;background:#fff !important;
  border-top:1px solid #e0e7f0 !important;
  margin:0 !important;padding:0 !important;
  position:relative !important;z-index:1 !important;
  flex:0 0 auto !important;
  box-sizing:border-box !important;
}
body .op-footer .op-footer-inner.container {
  width:100% !important;max-width:var(--op145-shell-max) !important;
  margin:0 auto !important;
  padding:22px var(--op145-shell-pad) !important;
  min-height:100px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
  align-items:center !important;justify-items:stretch !important;
  gap:clamp(14px,2vw,26px) !important;
  text-align:left !important;
  box-sizing:border-box !important;
}
body .op-footer .op-footer-brand {
  grid-column:1 !important;grid-row:1 !important;
  display:flex !important;flex-direction:column !important;
  gap:12px !important;align-items:flex-start !important;
  justify-content:center !important;
  width:100% !important;max-width:100% !important;
  margin:0 !important;padding:0 !important;min-width:0 !important;
}
body .op-footer .op-footer-subtitle {
  display:block !important;
  margin:0 !important;padding:0 !important;
  width:100% !important;min-width:0 !important;
  font:500 11px/1.5 Montserrat,Arial,sans-serif !important;
  color:#8292a5 !important;text-align:left !important;
  white-space:normal !important;
}
body .op-footer .op-footer-mid {
  grid-column:2 !important;grid-row:1 !important;
  margin:0 !important;padding:0 !important;
  font:500 11px/1.6 Montserrat,Arial,sans-serif !important;
  color:#8a9aac !important;text-align:center !important;
  white-space:normal !important;
}
body .op-footer .op-footer-links {
  grid-column:3 !important;grid-row:1 !important;
  width:auto !important;min-width:0 !important;
  display:flex !important;flex-wrap:wrap !important;
  justify-content:flex-end !important;align-items:center !important;
  gap:8px 17px !important;
  margin:0 !important;padding:0 !important;
  text-align:right !important;
}
body .op-footer .op-footer-links a {
  display:inline-flex !important;align-items:center !important;
  width:auto !important;margin:0 !important;padding:5px 0 !important;
  font:800 12px/1.5 Montserrat,Arial,sans-serif !important;
  white-space:nowrap !important;
  color:#55677d !important;
  text-decoration:none !important;
}
body .op-footer .op-footer-links a:hover { color:var(--op-primary,#de6528) !important; }
@media (max-width:950px) {
  body .op-site-nav .op-desktop-nav { display:none !important; }
  body .op-site-nav .op-mobile-nav { display:block !important;flex:0 0 auto !important;margin:0 !important; }
  body .op-site-nav .op-nav-inner.container { height:62px !important;min-height:62px !important;gap:9px !important; }
  body .op-site-nav .op-mobile-nav > nav {
    left:auto !important;right:var(--op145-shell-pad) !important;
    width:min(310px,calc(100vw - 36px)) !important;
    min-width:0 !important;max-width:calc(100vw - 36px) !important;
    padding:12px !important;
    border-radius:13px !important;
    box-shadow:0 17px 35px #1b29382b !important;
  }
  body .op-site-nav .op-mobile-nav nav a {
    display:flex !important;justify-content:flex-end !important;
    text-align:right !important;
    padding:11px 18px !important;
    white-space:normal !important;
  }
  body .op-site-nav .op-language-control {margin-left:auto !important;}
  body .op-footer .op-footer-inner.container {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:16px 20px !important;
  }
  body .op-footer .op-footer-brand {grid-column:1 !important;grid-row:1 !important;}
  body .op-footer .op-footer-links {grid-column:2 !important;grid-row:1 !important;}
  body .op-footer .op-footer-mid {grid-column:1 / -1 !important;grid-row:2 !important;text-align:left !important;}
}
@media(max-width:640px) {
  #wrap.oima-pos-frontend, #wrap.oima-pos-demo-shell {
    --op145-shell-pad:16px;--op145-logo-w:98px;--op145-logo-h:26px;
  }
  body .op-site-nav .op-nav-inner.container { min-height:58px !important;height:58px !important; }
  body .op-footer .op-footer-inner.container {
    padding-block:19px !important;min-height:0 !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    column-gap:10px !important;row-gap:16px !important;
  }
  body .op-footer .op-footer-brand {gap:10px !important;}
  body .op-footer .op-footer-links {gap:4px 11px !important;}
  body .op-footer .op-footer-links a {font-size:11px !important;padding:5px 0 !important;}
  body .op-footer .op-footer-subtitle,body .op-footer .op-footer-mid {font-size:10px !important;}
}
/* Live Demo is an isolated iframe app. Only its OUTER website shell is shared. */
#wrap.oima-pos-demo-shell {max-width:none !important;width:100% !important;margin:0 !important;
 padding:0 !important;display:flex !important;flex-direction:column !important;gap:0 !important;
 background:#f1f4f8 !important;min-height:100dvh !important;}
#wrap.oima-pos-demo-shell .op142-demo-container {
 box-sizing:border-box !important;
 width:calc(100% - 2 * var(--op145-shell-pad)) !important;
 max-width:calc(var(--op145-shell-max) - 2 * var(--op145-shell-pad)) !important;
 height:calc(100dvh - 65px - 105px - 26px) !important;
 min-height:450px !important;
 margin:13px auto !important;
 border-radius:18px !important;
 overflow:hidden !important;
}
#wrap.oima-pos-demo-shell #op142-demo-iframe {border-radius:inherit !important;}
@media(max-width:640px) {
 #wrap.oima-pos-demo-shell .op142-demo-container {
  height:calc(100dvh - 58px - 130px - 18px) !important;
  min-height:400px !important;
  margin:9px auto !important;
  border-radius:14px !important;
 }
}
/* FINAL specificity guard: old v135 selectors have an ID and !important.
   These ID-scoped rules take precedence everywhere, including Cashier/mobile. */
:is(#wrap.oima-pos-frontend,#wrap.oima-pos-demo-shell) .op-site-nav .op-nav-inner.container {
  min-height:65px !important;height:65px !important;
  max-width:var(--op145-shell-max) !important;
  padding-inline:var(--op145-shell-pad) !important;
  margin-inline:auto !important;
  gap:clamp(10px,1.7vw,22px) !important;
}
:is(#wrap.oima-pos-frontend,#wrap.oima-pos-demo-shell) .op-site-nav .op-logo-link,
:is(#wrap.oima-pos-frontend,#wrap.oima-pos-demo-shell) .op-footer .op-logo-link {
  width:var(--op145-logo-w) !important;
  max-width:var(--op145-logo-w) !important;
  min-width:0 !important;min-height:0 !important;
  height:var(--op145-logo-h) !important;
  margin:0 !important;margin-inline:0 !important;padding:0 !important;
  flex:0 0 var(--op145-logo-w) !important;
}
:is(#wrap.oima-pos-frontend,#wrap.oima-pos-demo-shell) .op-site-nav .op-logo-link :is(img,svg),
:is(#wrap.oima-pos-frontend,#wrap.oima-pos-demo-shell) .op-footer .op-logo-link :is(img,svg) {
  max-width:var(--op145-logo-w) !important;
  max-height:var(--op145-logo-h) !important;
  width:auto !important;height:auto !important;
  margin:0 !important;padding:0 !important;
}
:is(#wrap.oima-pos-frontend,#wrap.oima-pos-demo-shell) .op-site-nav .op-desktop-nav {
  margin-left:auto !important;margin-right:0 !important;
  justify-content:flex-end !important;
  gap:clamp(6px,1vw,16px) !important;
}
:is(#wrap.oima-pos-frontend,#wrap.oima-pos-demo-shell) .op-footer .op-footer-inner.container {
  width:100% !important;max-width:var(--op145-shell-max) !important;
  padding:22px var(--op145-shell-pad) !important;
  min-height:100px !important;display:grid !important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
  align-items:center !important;
  gap:clamp(14px,2vw,26px) !important;
}
:is(#wrap.oima-pos-frontend,#wrap.oima-pos-demo-shell) .op-footer .op-footer-brand {
  display:flex !important;flex-direction:column !important;
  align-items:flex-start !important;gap:12px !important;
  grid-column:1 !important;grid-row:1 !important;
}
:is(#wrap.oima-pos-frontend,#wrap.oima-pos-demo-shell) .op-footer .op-footer-links {
  grid-column:3 !important;grid-row:1 !important;
  display:flex !important;justify-content:flex-end !important;
  text-align:right !important;gap:8px 17px !important;
}
:is(#wrap.oima-pos-frontend,#wrap.oima-pos-demo-shell) .op-footer .op-footer-mid {
  grid-column:2 !important;grid-row:1 !important;text-align:center !important;
}
@media(max-width:950px) {
  :is(#wrap.oima-pos-frontend,#wrap.oima-pos-demo-shell) .op-site-nav .op-nav-inner.container {
    min-height:62px !important;height:62px !important;
  }
  :is(#wrap.oima-pos-frontend,#wrap.oima-pos-demo-shell) .op-site-nav .op-desktop-nav { display:none !important; }
  :is(#wrap.oima-pos-frontend,#wrap.oima-pos-demo-shell) .op-site-nav .op-mobile-nav { display:block !important; }
  :is(#wrap.oima-pos-frontend,#wrap.oima-pos-demo-shell) .op-footer .op-footer-inner.container {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:16px 20px !important;
  }
  :is(#wrap.oima-pos-frontend,#wrap.oima-pos-demo-shell) .op-footer .op-footer-links {
    grid-column:2 !important;grid-row:1 !important;
  }
  :is(#wrap.oima-pos-frontend,#wrap.oima-pos-demo-shell) .op-footer .op-footer-mid {
    grid-column:1/-1 !important;grid-row:2 !important;text-align:left !important;
  }
}
@media(max-width:640px) {
  :is(#wrap.oima-pos-frontend,#wrap.oima-pos-demo-shell) .op-site-nav .op-nav-inner.container {
    min-height:58px !important;height:58px !important;
  }
  :is(#wrap.oima-pos-frontend,#wrap.oima-pos-demo-shell) .op-footer .op-footer-inner.container {
    padding-block:19px !important;
    column-gap:10px !important;row-gap:16px !important;
  }
  :is(#wrap.oima-pos-frontend,#wrap.oima-pos-demo-shell) .op-footer .op-footer-brand {gap:10px !important;}
}
/* Self-order desktop keeps the SAME page shell as Home; the list itself scrolls. */
#wrap.oima-pos-frontend[data-op-page="page_shop"] .op140-screen {
  width:100% !important;
  max-width:var(--op145-shell-max) !important;
  padding-inline:var(--op145-shell-pad) !important;
  margin-inline:auto !important;
}
/* v135 hid this footer on desktop; restore it, with only the catalog scrolling. */
#wrap.oima-pos-frontend[data-op-page="page_shop"] > .op-footer {
  display:block !important;
  visibility:visible !important;
  flex:0 0 auto !important;
}
/* The old showroom stylesheet hides the footer. Show the SAME shared footer
   on its outer website wrapper, never inside the isolated demo iframe. */
#wrap.oima-pos-frontend.oima-pos-demo-shell[data-op-page="page_demo"] > .op-footer {
  display:block !important;visibility:visible !important;
}
/* IMPORTANT: the footer brand is a COLUMN flex container. A width-sized flex-basis
   on the logo was interpreted as its HEIGHT, creating the huge blank gap
   between logo and subtitle. Reserve the logo's true visual height here. */
:is(#wrap.oima-pos-frontend,#wrap.oima-pos-demo-shell) .op-footer .op-footer-brand > .op-logo-link {
  flex:0 0 var(--op145-logo-h) !important;
  height:var(--op145-logo-h) !important;
  min-height:var(--op145-logo-h) !important;
  max-height:var(--op145-logo-h) !important;
  width:var(--op145-logo-w) !important;
  max-width:var(--op145-logo-w) !important;
  align-self:flex-start !important;
}

/* v20.0.1.4.7: Visual contract -- ONLY logo + Powered by Oima in every footer. */
:is(#wrap.oima-pos-frontend,#wrap.oima-pos-demo-shell) > .op-footer .op-footer-inner.container,
#wrap.oima-pos-frontend .op-footer .op-footer-inner.container {
  width:100% !important;
  max-width:var(--op145-shell-max) !important;
  box-sizing:border-box !important;
  margin:0 auto !important;
  padding:20px var(--op145-shell-pad) !important;
  min-height:74px !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:20px !important;
}
:is(#wrap.oima-pos-frontend,#wrap.oima-pos-demo-shell) .op-footer .op-footer-brand {
  width:auto !important;max-width:none !important;
  min-width:0 !important;flex:0 0 auto !important;
  display:flex !important;align-items:center !important;
  flex-direction:row !important;justify-content:flex-start !important;
  gap:0 !important;
  grid-column:auto !important;grid-row:auto !important;
  margin:0 !important;padding:0 !important;
}
:is(#wrap.oima-pos-frontend,#wrap.oima-pos-demo-shell) .op-footer .op-footer-mid {
  flex:0 1 auto !important;
  grid-column:auto !important;grid-row:auto !important;
  text-align:right !important;
  margin:0 0 0 auto !important;padding:0 !important;
  font:500 12px/1.5 Montserrat,Arial,sans-serif !important;
  white-space:normal !important;
}
:is(#wrap.oima-pos-frontend,#wrap.oima-pos-demo-shell) .op-footer :is(.op-footer-links,.op-footer-subtitle) {
  display:none !important;
}
/* Home's final callout now shares the four feature cards' actual parent container. */
#wrap.oima-pos-frontend[data-op-page="page_home"] .op-section-tight > .op147-callout {
  width:100% !important;max-width:100% !important;
  margin:clamp(20px,2.3vw,30px) 0 0 !important;
  padding:clamp(18px,2vw,28px) !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:clamp(15px,2vw,26px) !important;
  flex-wrap:wrap !important;
}
#wrap.oima-pos-frontend[data-op-page="page_home"] .op147-callout > div:first-child {
  min-width:0 !important;flex:1 1 320px !important;
}
#wrap.oima-pos-frontend[data-op-page="page_home"] .op147-callout .op-toolbar-links {
  min-width:0 !important;
  display:flex !important;align-items:center !important;
  justify-content:flex-end !important;gap:12px !important;
  flex:0 1 auto !important;flex-wrap:wrap !important;
}
/* Cashier's operational screens should never have a footer. */
#wrap.oima-pos-frontend[data-op-page="page_cashier"] > .op-footer,
#wrap.oima-pos-frontend[data-op-page="page_sale"] > .op-footer {display:none !important;}
/* Collapsible cashier orders: tidy search and result list. */
#wrap.oima-pos-frontend .op147-orders-card {padding:0 !important;overflow:visible !important;}
#wrap.oima-pos-frontend .op147-orders-summary {
  display:flex !important;align-items:center !important;justify-content:space-between !important;
  gap:16px !important;padding:20px 22px !important;
  cursor:pointer !important;list-style:none !important;
  border-radius:15px !important;
  color:var(--op-ink,#182638) !important;
}
#wrap.oima-pos-frontend .op147-orders-summary::-webkit-details-marker {display:none !important;}
#wrap.oima-pos-frontend .op147-orders-summary::marker {content:'';}
#wrap.oima-pos-frontend .op147-orders-heading {font-weight:850 !important;font-size:15px !important;}
#wrap.oima-pos-frontend .op147-orders-meta {
  display:inline-flex !important;align-items:center !important;gap:6px !important;
  flex:0 0 auto !important;color:#62728a !important;font:700 12px/1.4 Montserrat,Arial,sans-serif !important;
}
#wrap.oima-pos-frontend .op147-orders-chevron {font-size:20px !important;line-height:1 !important;display:inline-block !important;transition:transform .18s ease !important;}
#wrap.oima-pos-frontend .op147-orders-disclosure[open] .op147-orders-chevron {transform:rotate(180deg) !important;}
#wrap.oima-pos-frontend .op147-orders-body {padding:0 22px 22px !important;min-width:0 !important;}
#wrap.oima-pos-frontend .op147-orders-label {
  display:block !important;margin-bottom:7px !important;
  color:#61718a !important;font:700 12px/1.5 Montserrat,Arial,sans-serif !important;
}
#wrap.oima-pos-frontend .op147-orders-search {
  width:100% !important;max-width:100% !important;box-sizing:border-box !important;
  min-height:43px !important;margin:0 0 15px !important;
  padding:10px 15px !important;border:1px solid #d6e0ed !important;
  border-radius:11px !important;font:500 13px/1.5 Montserrat,Arial,sans-serif !important;
  background:#fff !important;color:#142539 !important;
}
#wrap.oima-pos-frontend .op147-orders-search:focus {outline:2px solid var(--op-primary,#de6528) !important;outline-offset:1px !important;}
#wrap.oima-pos-frontend .op147-orders-list {max-height:340px !important;overflow-y:auto !important;overscroll-behavior:contain !important;}
#wrap.oima-pos-frontend .op147-order-row {
  margin:0 !important;padding:12px 0 !important;
  display:flex !important;align-items:center !important;justify-content:space-between !important;gap:12px !important;
}
#wrap.oima-pos-frontend .op147-order-row[hidden],
#wrap.oima-pos-frontend .op147-orders-empty[hidden] {display:none !important;}
#wrap.oima-pos-frontend .op147-orders-empty {font-size:12px !important;color:#68788a !important;padding:10px 0 !important;}
#wrap.oima-pos-frontend .op147-orders-body .op-admin-sales-footer {margin-top:16px !important;padding-top:16px !important;border-top:1px solid #e0e7f0 !important;}
@media(max-width:640px) {
  :is(#wrap.oima-pos-frontend,#wrap.oima-pos-demo-shell) .op-footer .op-footer-inner.container {
    padding:17px var(--op145-shell-pad) !important;gap:12px !important;min-height:66px !important;
  }
  :is(#wrap.oima-pos-frontend,#wrap.oima-pos-demo-shell) .op-footer .op-footer-mid {font-size:10px !important;}
  #wrap.oima-pos-frontend[data-op-page="page_home"] .op147-callout .op-toolbar-links {
    width:100% !important;justify-content:flex-start !important;
  }
  #wrap.oima-pos-frontend[data-op-page="page_home"] .op147-callout .op-toolbar-links a {
    max-width:100% !important;white-space:normal !important;
  }
  #wrap.oima-pos-frontend .op147-orders-summary {padding:16px !important;gap:10px !important;}
  #wrap.oima-pos-frontend .op147-orders-body {padding:0 16px 16px !important;}
  #wrap.oima-pos-frontend .op147-orders-heading {font-size:13px !important;}
}

:is(#wrap.oima-pos-frontend,#wrap.oima-pos-demo-shell) .op-footer .op-footer-brand > .op-logo-link {
  flex:0 0 var(--op145-logo-w) !important;
  width:var(--op145-logo-w) !important;
  min-width:var(--op145-logo-w) !important;
  max-width:var(--op145-logo-w) !important;
}

@media(max-width:640px) {
  #wrap.oima-pos-frontend[data-op-page="page_home"] .op-section-tight .op-feature-bullets {
    display:grid !important;grid-template-columns:minmax(0,1fr) !important;gap:14px !important;
  }
}

/* v20.0.1.4.8: dropdown/select spacing polish.
   No arrow may sit flush to the right edge. Apply a unified custom affordance
   across admin, cashier and public frontend forms. */
#wrap.oima-pos-frontend :is(select, .op-customer-picker select,
  .op-role-form select, .op-language-control),
#wrap.oima-pos-demo-shell :is(select, .op-language-control) {
  -webkit-appearance:none !important;
  appearance:none !important;
  background-color:#fff !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6.5L8 10.5L12 6.5' stroke='%2335475C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-size:16px 16px !important;
  background-position:right 16px center !important;
  padding-right:46px !important;
}
#wrap.oima-pos-frontend .op-language-control,
#wrap.oima-pos-demo-shell .op-language-control {
  background-position:right 14px center !important;
  padding-right:40px !important;
}
#wrap.oima-pos-frontend .op-customer-picker select,
#wrap.oima-pos-frontend .op-role-form select,
#wrap.oima-pos-frontend form select,
#wrap.oima-pos-frontend .op-card select {
  min-height:42px !important;
  border-radius:12px !important;
}
@media (max-width: 640px) {
  #wrap.oima-pos-frontend :is(select, .op-customer-picker select,
    .op-role-form select, form select, .op-card select),
  #wrap.oima-pos-demo-shell :is(select, .op-language-control) {
    background-position:right 14px center !important;
    padding-right:42px !important;
  }
  #wrap.oima-pos-frontend .op-language-control,
  #wrap.oima-pos-demo-shell .op-language-control {
    background-position:right 12px center !important;
    padding-right:36px !important;
  }
}

/* 20.0.1.4.9 -- Home callout must stay in the SAME grid track as feature cards.
   For installed Websites this avoids the full-bleed lower panel caused by
   container/oe_structure/Bootstrap competing rules. This is scoped to Home. */
#wrap.oima-pos-frontend[data-op-page="page_home"] > section.op-section-tight,
#wrap.oima-pos-frontend[data-op-page="page_home"] section.container.op-section-tight {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  row-gap: clamp(18px, 2.1vw, 28px) !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  overflow: visible !important;
}
#wrap.oima-pos-frontend[data-op-page="page_home"] section.op-section-tight > .op-feature-bullets,
#wrap.oima-pos-frontend[data-op-page="page_home"] section.op-section-tight > .op147-callout {
  grid-column: 1 / -1 !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  justify-self: stretch !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  float: none !important;
}
#wrap.oima-pos-frontend[data-op-page="page_home"] section.op-section-tight > .op147-callout {
  margin-top: 0 !important;
  margin-bottom: clamp(20px, 2.2vw, 32px) !important;
  padding: clamp(20px, 2.3vw, 30px) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px 24px !important;
}
#wrap.oima-pos-frontend[data-op-page="page_home"] section.op-section-tight > .op147-callout > div:first-child {
  min-width: 0 !important;
  flex: 1 1 280px !important;
}
#wrap.oima-pos-frontend[data-op-page="page_home"] section.op-section-tight > .op147-callout > .op-toolbar-links {
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex: 0 1 auto !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}
@media(max-width:640px) {
  #wrap.oima-pos-frontend[data-op-page="page_home"] section.op-section-tight > .op147-callout {
    padding: 20px !important;
    gap: 18px !important;
  }
  #wrap.oima-pos-frontend[data-op-page="page_home"] section.op-section-tight > .op147-callout > .op-toolbar-links {
    width: 100% !important;
    justify-content: flex-start !important;
  }
}

/* Compact language selector: not a full-size form dropdown.
   Leave the generous 14-16px caret clearance on the LARGE field dropdowns;
   the language selector has a narrower 12px caret and compact padding. */
#wrap.oima-pos-frontend .op-site-nav select.op-language-control,
#wrap.oima-pos-demo-shell .op-site-nav select.op-language-control {
  box-sizing: border-box !important;
  flex: 0 0 76px !important;
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 8px 26px 8px 11px !important;
  background-size: 12px 12px !important;
  background-position: right 10px center !important;
  font-size: 11px !important;
  letter-spacing: 0 !important;
  line-height: 1.35 !important;
  margin-inline-end: 0 !important;
  white-space: nowrap !important;
}
@media(max-width:640px) {
  #wrap.oima-pos-frontend .op-site-nav select.op-language-control,
  #wrap.oima-pos-demo-shell .op-site-nav select.op-language-control {
    flex-basis: 72px !important;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    height: 35px !important;
    min-height: 35px !important;
    padding: 7px 25px 7px 10px !important;
    background-size: 12px 12px !important;
    background-position: right 9px center !important;
    font-size: 11px !important;
  }
}


/* v20.0.1.5.1 -- two individual tabs with accessible breathing room below the workspace bar.
   Keep transparent surroundings and preserve available space for internally scrolling panes.
   The pane controls remain semantic buttons with equal tap targets. */
@container op-viewport (max-width: 890px) {
  #wrap.oima-pos-frontend[data-op-page="page_cashier"] .op-cashier-page .op-cashier-mobile-tabs {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
    background:transparent !important;
    background-color:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    /* Keep the tab backgrounds transparent, but never crowd the workspace divider. */
    padding:0 0 13px !important;
    margin:clamp(14px,2.1vw,18px) 0 0 !important;
    box-sizing:border-box !important;
  }
  #wrap.oima-pos-frontend[data-op-page="page_cashier"] .op-cashier-page .op-cashier-mobile-tabs > button {
    appearance:none !important;
    min-height:42px !important;
    padding:9px 13px !important;
    border:1px solid #d9e2ee !important;
    border-radius:11px !important;
    background:#f4f6fa !important;
    color:#536578 !important;
    box-shadow:none !important;
    font-size:13px !important;
    font-weight:800 !important;
    line-height:1.25 !important;
    cursor:pointer !important;
    width:100% !important;
    min-width:0 !important;
  }
  #wrap.oima-pos-frontend[data-op-page="page_cashier"] .op-cashier-page .op-cashier-mobile-tabs > button[aria-pressed="true"] {
    background:color-mix(in srgb,var(--op-primary,#de6528) 9%,#fff) !important;
    border-color:var(--op-primary,#de6528) !important;
    color:var(--op-primary,#de6528) !important;
  }
  #wrap.oima-pos-frontend[data-op-page="page_cashier"] .op-cashier-page .op-cashier-mobile-tabs > button:focus-visible {
    outline:2px solid var(--op-primary,#de6528) !important;
    outline-offset:2px !important;
  }
}
/* Self-order has its own responsive Products/Cart tabs. No surrounding white shell;
   unselected tabs are soft-gray buttons rather than floating white rectangles. */
@media(max-width:900px){
  #wrap.oima-pos-frontend[data-op-page="page_shop"] .op140-switch {
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
    gap:12px !important;
  }
  #wrap.oima-pos-frontend[data-op-page="page_shop"] .op140-switch-btn:not(.is-active) {
    background:#f4f6fa !important;
  }
}

/* Oima POS Lite v20.0.1.5.2: cashier subtotal/notes breathing room.
   The subtotal row is informational, not a section divider. Remove ONLY its
   bottom rule; all other rows keep their normal borders. */
#wrap.oima-pos-frontend[data-op-page="page_cashier"] .op-cashier-bottom > .op-row.op-subtotal-row {
  border-bottom: 0 !important;
  box-shadow: none !important;
}
/* Space the notes control away from the subtotal (and the disclaimer when shown).
   Keep native form submission, notes popover, gratuity field and payment button. */
#wrap.oima-pos-frontend[data-op-page="page_cashier"] .op-cashier-bottom form#op-create-sale {
  margin-top: 14px !important;
}
#wrap.oima-pos-frontend[data-op-page="page_cashier"] form#op-create-sale > .op-options-trigger {
  margin: 0 0 12px !important;
}