/* 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 *)), button.button:where(:not(#page > header *, #page > nav *, #mobile-menu *)), a.button:where(:not(#page > header *, #page > nav *, #mobile-menu *)), .btn:where(:not(#page > header *, #page > nav *, #mobile-menu *)), input[type=submit]:where(:not(#page > header *, #page > nav *, #mobile-menu *)), input[type=button]:where(:not(#page > header *, #page > nav *, #mobile-menu *)), .button:hover:where(:not(#page > header *, #page > nav *, #mobile-menu *)), button.button:hover:where(:not(#page > header *, #page > nav *, #mobile-menu *)), a.button:hover:where(:not(#page > header *, #page > nav *, #mobile-menu *)), .btn:hover:where(:not(#page > header *, #page > nav *, #mobile-menu *)), input[type=submit]:hover:where(:not(#page > header *, #page > nav *, #mobile-menu *)), input[type=button]:hover:where(:not(#page > header *, #page > nav *, #mobile-menu *)), .button:focus:where(:not(#page > header *, #page > nav *, #mobile-menu *)), button.button:focus:where(:not(#page > header *, #page > nav *, #mobile-menu *)), a.button:focus:where(:not(#page > header *, #page > nav *, #mobile-menu *)), .btn:focus:where(:not(#page > header *, #page > nav *, #mobile-menu *)), .button:active:where(:not(#page > header *, #page > nav *, #mobile-menu *)), button.button:active:where(:not(#page > header *, #page > nav *, #mobile-menu *)), a.button:active:where(:not(#page > header *, #page > nav *, #mobile-menu *)), .btn:active:where(:not(#page > header *, #page > nav *, #mobile-menu *)), input[type=submit]:active:where(:not(#page > header *, #page > nav *, #mobile-menu *)), input[type=button]:active:where(:not(#page > header *, #page > nav *, #mobile-menu *)) {
  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 *)), .btn:active:where(:not(#page > header *, #page > nav *, #mobile-menu *)), button.button:active:where(:not(#page > header *, #page > nav *, #mobile-menu *)), a.button:active:where(:not(#page > header *, #page > nav *, #mobile-menu *)) { 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; }
.btn-primary, .button.submit, button.submit { background-color: var(--eb-blue); border-color: var(--eb-blue); color: #fff; }
.btn-primary:hover, .button.submit:hover, button.submit:hover { background-color: var(--eb-blue-2); border-color: var(--eb-blue-2); color: #fff; }
.btn-danger { background-color: var(--eb-red); border-color: var(--eb-red); }
.btn-success { 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 *)), button.button:where(:not(#page > header *, #page > nav *, #mobile-menu *)), a.button:where(:not(#page > header *, #page > nav *, #mobile-menu *)), .btn:where(:not(#page > header *, #page > nav *, #mobile-menu *)), input[type=submit]:where(:not(#page > header *, #page > nav *, #mobile-menu *)), input[type=button]:where(:not(#page > header *, #page > nav *, #mobile-menu *)), .button:hover:where(:not(#page > header *, #page > nav *, #mobile-menu *)), button.button:hover:where(:not(#page > header *, #page > nav *, #mobile-menu *)), a.button:hover:where(:not(#page > header *, #page > nav *, #mobile-menu *)), .btn:hover:where(:not(#page > header *, #page > nav *, #mobile-menu *)), .button:active:where(:not(#page > header *, #page > nav *, #mobile-menu *)), button.button:active:where(:not(#page > header *, #page > nav *, #mobile-menu *)), a.button:active:where(:not(#page > header *, #page > nav *, #mobile-menu *)), .btn:active:where(:not(#page > header *, #page > nav *, #mobile-menu *)), .button:focus:where(:not(#page > header *, #page > nav *, #mobile-menu *)), button.button:focus:where(:not(#page > header *, #page > nav *, #mobile-menu *)), a.button:focus:where(:not(#page > header *, #page > nav *, #mobile-menu *)), .btn:focus:where(:not(#page > header *, #page > nav *, #mobile-menu *)), input[type=submit]:focus:where(:not(#page > header *, #page > nav *, #mobile-menu *)), input[type=button]:focus:where(:not(#page > header *, #page > nav *, #mobile-menu *)) { 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; }
}