/* eBangali premium layer v94.0.9.24 - one shared look for Bay, POS, Event, Soft, Blog, Corporate, Service and Access.
   Loaded after every other theme stylesheet. It only restyles: no menu, link, form name or button action changes.
   v94.0.9.24 (owner's test of .23): the header, the 4 menu bars, the my-account sidebar and the cart/notice counters keep
   their previous style; the footer uses the header colours; buttons keep one size on hover/click (no jump).
   Brand: blue #014693, light blue #1f72ce, yellow #ffd740, red #cd1b29. */
:root {
  --eb-blue: #014693;
  --eb-blue-2: #1f72ce;
  --eb-blue-soft: #eaf2fc;
  --eb-yellow: #ffd740;
  --eb-red: #cd1b29;
  --eb-green: #16794c;
  --eb-ink: #1b2430;
  --eb-ink-2: #4a5566;
  --eb-muted: #6b7686;
  --eb-line: #e3e8ef;
  --eb-bg: #f5f7fb;
  --eb-card: #ffffff;
  --eb-radius: 12px;
  --eb-radius-sm: 8px;
  --eb-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --eb-shadow-lg: 0 8px 24px rgba(16, 24, 40, .12);
  --eb-focus: 0 0 0 3px rgba(31, 114, 206, .35);
  --eb-font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Bengali", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- base ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-family: var(--eb-font); font-size: 14px; line-height: 1.55; color: var(--eb-ink); background: var(--eb-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1:where(:not(#page > header *, #page > nav *, #mobile-menu *)), h2:where(:not(#page > header *, #page > nav *, #mobile-menu *)), h3:where(:not(#page > header *, #page > nav *, #mobile-menu *)), h4:where(:not(#page > header *, #page > nav *, #mobile-menu *)), h5:where(:not(#page > header *, #page > nav *, #mobile-menu *)), h6:where(:not(#page > header *, #page > nav *, #mobile-menu *)), .h1:where(:not(#page > header *, #page > nav *, #mobile-menu *)), .h2:where(:not(#page > header *, #page > nav *, #mobile-menu *)), .h3:where(:not(#page > header *, #page > nav *, #mobile-menu *)), .h4:where(:not(#page > header *, #page > nav *, #mobile-menu *)) { font-family: var(--eb-font); color: var(--eb-ink); letter-spacing: -.01em; }
a:where(:not(#page > header *, #page > nav *, #mobile-menu *)) { color: var(--eb-blue-2); transition: color .15s ease; }
a:hover:where(:not(#page > header *, #page > nav *, #mobile-menu *)), a:focus:where(:not(#page > header *, #page > nav *, #mobile-menu *)) { color: var(--eb-blue); }
img:where(:not(#page > header *, #page > nav *, #mobile-menu *)) { max-width: 100%; height: auto; }
::selection { background: var(--eb-yellow); color: var(--eb-ink); }
:focus-visible:where(:not(#page > header *, #page > nav *, #mobile-menu *)) { outline: none; box-shadow: var(--eb-focus); border-radius: 4px; }
.page, .main-container, .content-page, .site-content { background: transparent; }

/* the header, the menu bar and the phone menu keep the previous letters, size and colours */
#page > header, #page > nav, #mobile-menu { font-family: sans-serif; font-size: 13px; line-height: 1.42857143; color: #333; -webkit-font-smoothing: auto; }
#page > header a, #page > nav a, #mobile-menu a { transition: none; }

/* my-account sidebar: previous look; it only no longer bounces in (it is there at once, so a click lands) */
.sidebar.wow, .wow.bounceInUp, .animated.bounceInUp { animation: none !important; visibility: visible !important; }

/* ---------- cards: wells, panels, notification rows, shop items ---------- */
.well, .panel, .content-page .category-product, .product-bestseller, .eb-card { background: var(--eb-card); border: 1px solid var(--eb-line); border-radius: var(--eb-radius); box-shadow: var(--eb-shadow); }
.well { padding: 18px 20px; }
.panel-heading { border-radius: var(--eb-radius) var(--eb-radius) 0 0; background: #fafbfd; border-bottom: 1px solid var(--eb-line); }
.new_title, .page-title { border-radius: var(--eb-radius) var(--eb-radius) 0 0; }
.products-grid .item .item-inner { background: var(--eb-card); border: 1px solid var(--eb-line); border-radius: var(--eb-radius); overflow: hidden; transition: box-shadow .15s ease; height: 100%; }
.products-grid .item .item-inner:hover { box-shadow: var(--eb-shadow-lg); }
.products-grid .item .item-img img, .product-image img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.item-info .item-title a { color: var(--eb-ink); font-weight: 600; }
.price:where(:not(#page > header *, #page > nav *, #mobile-menu *)), .special-price .price:where(:not(#page > header *, #page > nav *, #mobile-menu *)) { color: var(--eb-ink); font-weight: 700; }
.old-price .price:where(:not(#page > header *, #page > nav *, #mobile-menu *)) { color: var(--eb-muted); font-weight: 400; }
.price-label, .sale-label { border-radius: 0 0 var(--eb-radius-sm) 0; }

/* long lists draw only what is on screen (fast with many rows) */
.products-grid .item { content-visibility: auto; contain-intrinsic-size: auto 320px; }

/* ---------- post pictures (Blog, Corporate, Service, Event): a tall picture no longer fills the whole screen ---------- */
.blog_entry-header img, .entry-content > a > img, .entry-content > img, .site-content .thumb img, .post-header img { width: 100%; max-height: 460px; object-fit: cover; border-radius: var(--eb-radius-sm); background: #e9eef5; }
.sidebar .thumb img, .col-right .thumb img, .sidebar .img-responsive { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; max-height: 200px; border-radius: var(--eb-radius-sm); }
.post-meta, .entry-meta { color: var(--eb-muted); font-size: 13px; }

/* buttons and fields of the page only: the header, the menu bar and the phone menu keep their previous look */
/* ---------- buttons (every system uses .button / .btn): the same size, border and place in every state ---------- */
.button:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), button.button:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), a.button:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), .btn:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), input[type=submit]:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), input[type=button]:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), .button:hover:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), button.button:hover:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), a.button:hover:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), .btn:hover:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), input[type=submit]:hover:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), input[type=button]:hover:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), .button:focus:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), button.button:focus:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), a.button:focus:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), .btn:focus:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), .button:active:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), button.button:active:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), a.button:active:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), .btn:active:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), input[type=submit]:active:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), input[type=button]:active:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)) {
  border-radius: var(--eb-radius-sm); min-height: 38px; height: auto; padding: 8px 16px; border-width: 1px; border-style: solid;
  font-weight: 600; letter-spacing: .01em; line-height: 1.3; transform: none; top: auto; margin-top: 0; margin-bottom: 0;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; touch-action: manipulation;
}
.button:active:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), .btn:active:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), button.button:active:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), a.button:active:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)) { box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15); }
.button:focus-visible, .btn:focus-visible, input[type=submit]:focus-visible { box-shadow: var(--eb-focus); outline: none; }
:is(.btn-primary, .button.submit, button.submit):where(:not(.eb-classic *)) { background-color: var(--eb-blue); border-color: var(--eb-blue); color: #fff; }
:is(.btn-primary:hover, .button.submit:hover, button.submit:hover):where(:not(.eb-classic *)) { background-color: var(--eb-blue-2); border-color: var(--eb-blue-2); color: #fff; }
.btn-danger:where(:not(.eb-classic *)) { background-color: var(--eb-red); border-color: var(--eb-red); }
.btn-success:where(:not(.eb-classic *)) { background-color: var(--eb-green); border-color: var(--eb-green); }
.button[disabled], .btn[disabled], button:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- forms ---------- */
.form-control:where(:not(#page > header *, #page > nav *, #mobile-menu *)), input[type=text]:where(:not(#page > header *, #page > nav *, #mobile-menu *)), input[type=email]:where(:not(#page > header *, #page > nav *, #mobile-menu *)), input[type=password]:where(:not(#page > header *, #page > nav *, #mobile-menu *)), input[type=number]:where(:not(#page > header *, #page > nav *, #mobile-menu *)), input[type=tel]:where(:not(#page > header *, #page > nav *, #mobile-menu *)), input[type=search]:where(:not(#page > header *, #page > nav *, #mobile-menu *)), input[type=date]:where(:not(#page > header *, #page > nav *, #mobile-menu *)), input[type=url]:where(:not(#page > header *, #page > nav *, #mobile-menu *)), select:where(:not(#page > header *, #page > nav *, #mobile-menu *)), textarea:where(:not(#page > header *, #page > nav *, #mobile-menu *)) {
  border: 1px solid #cfd7e3; border-radius: var(--eb-radius-sm); background-color: #fff; color: var(--eb-ink); transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus:where(:not(#page > header *, #page > nav *, #mobile-menu *)), input[type=text]:focus:where(:not(#page > header *, #page > nav *, #mobile-menu *)), input[type=email]:focus:where(:not(#page > header *, #page > nav *, #mobile-menu *)), input[type=password]:focus:where(:not(#page > header *, #page > nav *, #mobile-menu *)), input[type=number]:focus:where(:not(#page > header *, #page > nav *, #mobile-menu *)), input[type=tel]:focus:where(:not(#page > header *, #page > nav *, #mobile-menu *)), input[type=search]:focus:where(:not(#page > header *, #page > nav *, #mobile-menu *)), input[type=date]:focus:where(:not(#page > header *, #page > nav *, #mobile-menu *)), select:focus:where(:not(#page > header *, #page > nav *, #mobile-menu *)), textarea:focus:where(:not(#page > header *, #page > nav *, #mobile-menu *)) {
  border-color: var(--eb-blue-2); box-shadow: var(--eb-focus); outline: none;
}
label { color: var(--eb-ink-2); font-weight: 600; }
::placeholder { color: #9aa4b2; }
fieldset.group-select ul { padding-left: 0; }

/* ---------- tables (reports, books, histories) ---------- */
.table { background: var(--eb-card); border-radius: var(--eb-radius-sm); }
.table > thead > tr > th { background: #f3f6fa; color: var(--eb-ink-2); font-weight: 700; font-size: 12.5px; text-transform: none; border-bottom: 1px solid var(--eb-line) !important; position: sticky; top: 0; z-index: 1; }
.table > tbody > tr > td, .table > tbody > tr > th { border-color: var(--eb-line) !important; vertical-align: middle; }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: #fafbfd; }
.table-hover > tbody > tr:hover, .table > tbody > tr:hover { background-color: var(--eb-blue-soft); }
.table-responsive { border: 0; border-radius: var(--eb-radius-sm); -webkit-overflow-scrolling: touch; }
.table td, .table th { font-variant-numeric: tabular-nums; }

/* ---------- alerts, badges, page buttons ---------- */
.alert { border-radius: var(--eb-radius-sm); border-width: 1px; }
/* the theme styles every <nav> as the blue menu bar; the page buttons are a plain row */
nav.eb-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; padding: 0; width: auto; height: auto; min-height: 0; background: none; border: 0; box-shadow: none; position: static; }
.eb-pager .eb-pager-info { color: var(--eb-muted); margin-right: auto; }
.pagination > li > a, .pagination > li > span { border-radius: 6px; margin: 0 2px; border-color: var(--eb-line); }
.pagination > .active > a, .pagination > .active > span { background-color: var(--eb-blue); border-color: var(--eb-blue); }

/* ---------- footer and footer menu: the header colours (blue #014693, white, yellow #ffd740) ---------- */
.footer, footer .footer-inner, .footer-middle, .footer-top { background: var(--eb-blue); color: #fff; }
.footer-bottom, footer .coppyright { background: #013a7a; color: #e6eefa; border-top: 1px solid rgba(255, 255, 255, .15); }
.footer-top, .footer-middle .col-md-3, .footer-column { border-color: rgba(255, 255, 255, .15) !important; }
.footer h4, .footer-middle h4, .footer .footer-column h4 { color: var(--eb-yellow); }
.footer a, .footer-middle .links li a, .footer-bottom a, .footer address, .contacts-info address, .footer-middle p { color: #fff; }
.footer a:hover, .footer-middle .links li a:hover, .footer-bottom a:hover, .footer a:focus { color: var(--eb-yellow); }

/* ---------- Bay (Shop) and POS (Home) top menus on a computer: grouped like bay-my-account / pos-my-account ----------
   The links, their order and who sees them are unchanged; the long list is shown in columns, each group under its title,
   so it fits on one screen instead of running 2,000 px down the page. */
@media (min-width: 1200px) {
  /* placed in the middle of the window (not of the menu bar, which is wider than a 1200 px screen), right under the menu name */
  .header-container .navbar-nav > li.eb-mega-li > .dropdown-menu.eb-mega {
    position: fixed; top: auto; left: 50%; right: auto; transform: translateX(-50%); margin-top: 0;
    width: calc(100vw - 40px); max-width: 1140px; padding: 10px 6px 12px;
    column-width: 215px; column-gap: 6px; column-fill: balance;
  }
  .eb-mega > li { break-inside: avoid; -webkit-column-break-inside: avoid; }
  .eb-mega > li.eb-mh { break-after: avoid; -webkit-column-break-after: avoid; padding: 8px 14px 4px; margin-top: 4px;
    font-size: 11px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; color: #014693; border-bottom: 2px solid #ffd740; }
  .eb-mega > li > a { white-space: normal; }
  .eb-mega > li.dropdown-submenu { position: relative; }
  /* a category opens to the left, so the last column does not open past the screen edge */
  .eb-mega > li.dropdown-submenu > .dropdown-menu { left: auto; right: 100%; margin-left: 0; margin-right: -1px; }
}

/* the theme's page width is 1260 px from a 1200 px screen up, so on 1200-1259 px screens the last top menu (Sign Up / your
   name) was cut off at the right. There the page now uses the screen width; from 1260 px up nothing changes. */
@media (min-width: 1200px) and (max-width: 1259px) {
  .container { width: 100%; }
}

/* ---------- phones and tablets ---------- */
@media (max-width: 991px) {
  body { font-size: 15px; }
.button:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), button.button:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), a.button:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), .btn:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), input[type=submit]:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), input[type=button]:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), .button:hover:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), button.button:hover:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), a.button:hover:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), .btn:hover:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), .button:active:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), button.button:active:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), a.button:active:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), .btn:active:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), .button:focus:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), button.button:focus:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), a.button:focus:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), .btn:focus:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), input[type=submit]:focus:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)), input[type=button]:focus:where(:not(#page > header *, #page > nav *, #mobile-menu *, .eb-classic *)) { min-height: 44px; height: auto; }
  a.button, button.button, a.btn { display: inline-flex; align-items: center; justify-content: center; }
.form-control:where(:not(#page > header *, #page > nav *, #mobile-menu *)), input[type=text]:where(:not(#page > header *, #page > nav *, #mobile-menu *)), input[type=email]:where(:not(#page > header *, #page > nav *, #mobile-menu *)), input[type=password]:where(:not(#page > header *, #page > nav *, #mobile-menu *)), input[type=number]:where(:not(#page > header *, #page > nav *, #mobile-menu *)), input[type=tel]:where(:not(#page > header *, #page > nav *, #mobile-menu *)), input[type=search]:where(:not(#page > header *, #page > nav *, #mobile-menu *)), select:where(:not(#page > header *, #page > nav *, #mobile-menu *)), textarea:where(:not(#page > header *, #page > nav *, #mobile-menu *)) { min-height: 44px; font-size: 16px; }
  .well { padding: 14px; }
  .block-content ul li a, .block-account ul li a { min-height: 42px; display: flex; align-items: center; gap: 8px; }
}
@media (max-width: 767px) {
  /* the theme's .container has no padding, so the -15px of every .row went past the screen and was cut off */
  .container:where(:not(#page > header *, #page > nav *, #mobile-menu *)) { padding-left: 15px; padding-right: 15px; }
  .table-responsive { margin-bottom: 12px; }
  .table > thead > tr > th { white-space: nowrap; }
  .table > thead > tr > th, .table > tbody > tr > td { padding: 8px 10px; }
  .table > tbody > tr > td, .table-responsive > .table > tbody > tr > td { white-space: normal; overflow-wrap: anywhere; }
  .products-grid .item { padding-left: 6px; padding-right: 6px; }
  .well { border-radius: var(--eb-radius-sm); }
  .eb-pager .button { flex: 1 1 auto; text-align: center; }
}

/* ---------- motion and print ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
  .header-container, .footer, .sidebar, .sidebar-offcanvas, #search_mini_form, .button, .btn { display: none !important; }
  body { background: #fff; }
  .well, .block, .table { box-shadow: none; border-color: #ccc; }
}

/* v94.0.9.30: on phones a wide table scrolls inside its own box (the page does not), and buttons in table cells keep their
   words on one line (EDIT, DELETE, Mark paid were cut or broken into letters). Header and menus are not touched. */
@media (max-width: 767px) {
  .container table:not(.eb-cards):where(:not(#page > header *, #page > nav *, #mobile-menu *)) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .container td .button, .container td .btn, .container td button, .container td input[type=submit] { white-space: nowrap; word-break: normal; overflow-wrap: normal; }
  .container td .buttons-set { white-space: nowrap; }
}
/* v94.0.9.30: buttons big enough to tap on phones (same size in every state): editor toolbar, Search for user, small form buttons */
@media (max-width: 767px) {
  .toolbareditor button { min-width: 32px; min-height: 32px; }
  .container .buttons-set .button, .container .input-group-addon button, .container td .button { min-height: 34px; }
}
/* v94.0.9.30: date boxes show the whole date on phones (the year was cut: 10/13/202) */
@media (max-width: 767px) {
  .container input[type=date] { min-width: 10.5em; }
}