/*!
 * SB Mega Menu — storefront stylesheet (v1.4.0)
 *
 * Layout of this file:
 *   1. Tokens + shared bits (labels, icons, device visibility)
 *   2. Menu content: blocks, link lists, brands, products, columns
 *   3. Desktop: horizontal bar + panels
 *   4. Desktop: category catalog (rail + pane)
 *   5. Mobile: accordion tree (own drawer / displayMobileNav)
 *   6. Mobile: ST Sidebar panel (#side_stmobilemenu)
 *   7. Motion / print safety
 *
 * Rules: flat design, one blue (#1877f2), radius <= 8px, no backdrop-filter, no layered patches.
 * Per-item colours / panel images arrive as CSS custom properties from the templates.
 * Selectors under #side_stmobilemenu only use !important where the host theme positions the panel.
 */

/* ============================================================ 1. tokens */
.sbmm-shell,
#side_stmobilemenu,
.sbmm-own-drawer,
.sbmm-mobile-nav-hook {
  --sbmm-accent: #1877f2;
  --sbmm-accent-ink: #1259ba;
  --sbmm-accent-soft: #e8f1fe;
  --sbmm-accent-line: #a3c8fa;
  --sbmm-ink: #111827;
  --sbmm-ink-2: #374151;
  --sbmm-mute: #6b7280;
  --sbmm-line: #e6e8ec;
  --sbmm-soft: #f5f6f8;
  --sbmm-bg: #fff;
  --sbmm-r: 7px;
}

.sbmm-shell { --sbmm-max: 1240px; position: relative; z-index: 60; width: 100%; font: inherit; color: var(--sbmm-ink); }
.sbmm-shell *,
.sbmm-shell *::before,
.sbmm-shell *::after,
#side_stmobilemenu *,
#side_stmobilemenu *::before,
#side_stmobilemenu *::after,
.sbmm-own-drawer *,
.sbmm-mobile-nav-hook * { box-sizing: border-box; }
.sbmm-shell a,
#side_stmobilemenu a,
.sbmm-own-drawer a { text-decoration: none; }
.sbmm-shell ul,
#side_stmobilemenu ul,
.sbmm-own-drawer ul { margin: 0; padding: 0; list-style: none; }

.sbmm-label {
  display: inline-flex; align-items: center; min-height: 18px; padding: 1px 6px;
  font-size: 10px; font-style: normal; line-height: 1.3;
  color: var(--sbmm-label-color, #c62828); background: var(--sbmm-label-bg, #fdecec); border-radius: 5px;
}

/* bundled SVG icon painted with currentColor; the file arrives as --sbmmi from the template */
.sbmmi {
  display: inline-block; flex: none; width: 1.15em; height: 1.15em; vertical-align: -.18em;
  background: currentColor;
  -webkit-mask: var(--sbmmi) center / contain no-repeat; mask: var(--sbmmi) center / contain no-repeat;
}

/* device visibility: 0 = all, 1 = desktop only, 2 = mobile only */
.sbmm-vis-2 { display: none; }
html.sbmm-vp-mobile .sbmm-vis-1 { display: none !important; }
html.sbmm-vp-mobile .sbmm-vis-2 { display: block !important; }
html.sbmm-vp-desktop .sbmm-vis-2 { display: none !important; }

.sbmm-tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===================================================== 2. menu content */
.sbmm-columns { display: flex; flex-wrap: wrap; align-items: flex-start; margin: -6px; }
.sbmm-column { flex: 0 0 calc(var(--sbmm-col, 4) * 8.3333%); max-width: calc(var(--sbmm-col, 4) * 8.3333%); min-width: 180px; padding: 6px; }
.sbmm-block { margin: 0 0 8px; }
.sbmm-block:last-child { margin-bottom: 0; }

.sbmm-block-head,
.sbmm-column-title,
.sbmm-dk-column-title {
  position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0 0 5px; padding-inline-start: 9px;
  font-size: 13px; font-weight: 700; line-height: 1.55; color: var(--sbmm-ink);
}
.sbmm-block-head::before,
.sbmm-column-title::before,
.sbmm-dk-column-title::before {
  content: ""; position: absolute; inset-inline-start: 0; width: 3px; height: 14px; background: var(--sbmm-accent); border-radius: 2px;
}
.sbmm-block-head a { display: flex; align-items: center; gap: 6px; min-width: 0; color: inherit; }
.sbmm-block-head a:hover { color: var(--sbmm-accent); }

.sbmm-link-list,
.sbmm-category-node ul,
.sbmm-nested-links { margin: 0; padding: 0; list-style: none; }
.sbmm-category-node ul { margin: 1px 0 3px; padding-inline-start: 8px; border-inline-start: 1px solid var(--sbmm-line); }
.sbmm-category-node > a,
.sbmm-link-list a,
.sbmm-simple-item > a {
  display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 28px; padding: 3px 2px;
  font-size: 12.5px; line-height: 1.5; color: var(--sbmm-ink-2); transition: color .12s;
}
.sbmm-category-node ul a { font-size: 11.5px; color: var(--sbmm-mute); }
.sbmm-category-node > a:hover,
.sbmm-link-list a:hover,
.sbmm-simple-item > a:hover { color: var(--sbmm-accent); }
.sbmm-simple-item > a > :is(i, em) { flex: none; }

.sbmm-simple-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 14px; }
.sbmm-simple-item { min-width: 0; }
.sbmm-inline-mega { margin: 4px 0 6px; padding: 6px; background: var(--sbmm-soft); border-radius: var(--sbmm-r); }
.sbmm-inline-mega .sbmm-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.sbmm-category-hero { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.sbmm-category-hero img { width: 56px; height: 56px; object-fit: cover; border: 1px solid var(--sbmm-line); border-radius: var(--sbmm-r); }
.sbmm-category-hero a { font-weight: 700; color: var(--sbmm-ink); }

.sbmm-product-grid { display: grid; grid-template-columns: repeat(var(--sbmm-items, 4), minmax(0, 1fr)); gap: 8px; }
.sbmm-product-card {
  display: flex; align-items: center; gap: 6px; min-width: 0; padding: 5px;
  color: var(--sbmm-ink-2); background: #fff; border: 1px solid var(--sbmm-line); border-radius: var(--sbmm-r); transition: border-color .12s;
}
.sbmm-product-card:hover { border-color: var(--sbmm-accent-line); }
.sbmm-product-image { display: grid; flex: 0 0 44px; height: 44px; place-items: center; }
.sbmm-product-image img { width: auto; max-width: 44px; height: auto; max-height: 44px; object-fit: contain; }
.sbmm-product-name { display: -webkit-box; overflow: hidden; font-size: 12px; line-height: 1.45; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.sbmm-brand-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.sbmm-brand {
  display: grid; min-height: 48px; padding: 5px; place-items: center;
  color: var(--sbmm-ink-2); background: #fff; border: 1px solid var(--sbmm-line); border-radius: var(--sbmm-r);
}
.sbmm-brand:hover { border-color: var(--sbmm-accent-line); }
.sbmm-brand img { width: auto; max-width: 100%; height: auto; max-height: 38px; object-fit: contain; }

.sbmm-html { font-size: 13px; line-height: 1.8; color: var(--sbmm-ink-2); }
.sbmm-html img { max-width: 100%; height: auto; }

/* ============================================ 3. desktop: horizontal bar */
.sbmm-nav { position: relative; max-width: var(--sbmm-max); margin: 0 auto; }
.sbmm-root-list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.sbmm-root-item {
  --sbmm-item-bg: transparent; --sbmm-item-color: var(--sbmm-ink-2);
  --sbmm-item-hover-bg: var(--sbmm-soft); --sbmm-item-hover-color: var(--sbmm-accent); --sbmm-panel-bg: #fff;
  position: relative; list-style: none;
}
.sbmm-root-link-wrap { display: flex; align-items: center; background: var(--sbmm-item-bg); border-radius: var(--sbmm-r); }
.sbmm-root-link {
  display: flex; align-items: center; gap: 5px; min-height: 40px; padding: 0 9px;
  font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--sbmm-item-color); cursor: pointer;
}
.sbmm-root-item.sbmm-open > .sbmm-root-link-wrap,
.sbmm-root-item:hover > .sbmm-root-link-wrap { background: var(--sbmm-item-hover-bg); }
.sbmm-root-item.sbmm-open .sbmm-root-link,
.sbmm-root-item:hover .sbmm-root-link { color: var(--sbmm-item-hover-color); }
.sbmm-panel-toggle { width: 22px; height: 40px; margin-inline-start: -6px; padding: 0; color: var(--sbmm-mute); background: none; border: 0; cursor: pointer; }
.sbmm-chevron { display: inline-block; width: 6px; height: 6px; border-inline-end: 1.6px solid; border-bottom: 1.6px solid; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.sbmm-open > .sbmm-root-link-wrap .sbmm-chevron { transform: rotate(225deg) translate(-2px, -2px); }

.sbmm-panel {
  position: absolute; inset-block-start: calc(100% + 6px); inset-inline-start: 0; z-index: 70;
  width: min(900px, calc(100vw - 24px)); max-height: 560px; overflow: auto;
  visibility: hidden; opacity: 0; transform: translateY(6px);
  background-color: var(--sbmm-panel-bg); border: 1px solid var(--sbmm-line); border-radius: min(var(--sbmm-radius, 8px), 8px);
  background-image: var(--sbmm-bg-image, none); background-repeat: no-repeat; background-position: 0 100%;
  padding-bottom: var(--sbmm-bg-pb, 0);
  transition: opacity .14s, transform .14s, visibility .14s; scrollbar-width: thin;
}
.sbmm-with-shadow .sbmm-panel { box-shadow: 0 14px 34px rgba(17, 24, 39, .12); }
.sbmm-has-panel.sbmm-open > .sbmm-panel,
[data-open-mode="hover"] .sbmm-has-panel:hover > .sbmm-panel { visibility: visible; opacity: 1; transform: none; }
.sbmm-panel-inner { padding: 12px 14px; }
.sbmm-panel a { color: var(--sbmm-link-color, inherit); }
.sbmm-align-1 > .sbmm-panel { inset-inline: auto 0; }
.sbmm-align-2 > .sbmm-panel { inset-inline-start: 50%; transform: translate(-50%, 6px); }
[dir="rtl"] .sbmm-align-2 > .sbmm-panel { transform: translate(50%, 6px); }
.sbmm-align-2.sbmm-open > .sbmm-panel,
.sbmm-align-2:hover > .sbmm-panel { transform: translate(-50%); }
[dir="rtl"] .sbmm-align-2.sbmm-open > .sbmm-panel,
[dir="rtl"] .sbmm-align-2:hover > .sbmm-panel { transform: translate(50%); }

.sbmm-bg-repeat-0 { background-repeat: repeat; }
.sbmm-bg-repeat-1 { background-repeat: repeat-x; }
.sbmm-bg-repeat-2 { background-repeat: repeat-y; }
.sbmm-bg-pos-0 { background-position: 100% 100%; }
.sbmm-bg-pos-1 { background-position: 0 0; }
.sbmm-bg-pos-2 { background-position: 0 50%; }
.sbmm-bg-pos-3 { background-position: 0 100%; }
.sbmm-bg-pos-4 { background-position: 100% 0; }
.sbmm-bg-pos-5 { background-position: 100% 50%; }
.sbmm-bg-pos-6 { background-position: 50% 0; }
.sbmm-bg-pos-7 { background-position: 50% 50%; }
.sbmm-bg-pos-8 { background-position: 50% 100%; }

/* column mode (displayLeftColumn / displayRightColumn): plain accordion */
.sbmm-column-shell .sbmm-root-list,
.sbmm-column-shell .sbmm-root-item { display: block; }
.sbmm-column-shell .sbmm-root-link-wrap { justify-content: space-between; }
.sbmm-column-shell .sbmm-panel { position: static; display: none; visibility: visible; width: 100%; max-height: none; margin-top: 5px; opacity: 1; transform: none; }
.sbmm-column-shell .sbmm-open > .sbmm-panel { display: block; }

.sbmm-own-trigger {
  display: none; align-items: center; gap: 7px; min-height: 40px; padding: 0 10px;
  font: inherit; font-size: 12px; font-weight: 700; color: var(--sbmm-ink); background: #fff; border: 0; border-radius: var(--sbmm-r); cursor: pointer;
}
.sbmm-burger { display: grid; gap: 4px; width: 20px; }
.sbmm-burger i { display: block; height: 2px; background: currentColor; border-radius: 2px; }

/* ================================================ 4. desktop: catalog */
@media (min-width: 992px) {
  .sbmm-dk-nav { position: relative; overflow: visible; }
  .sbmm-dk-bar { position: relative; display: flex; align-items: center; gap: 8px; max-width: var(--sbmm-max); min-height: 40px; margin: 0 auto; padding: 0 2px; background: #fff; border-bottom: 1px solid var(--sbmm-line); }
  .sbmm-dk-catalog { position: relative; z-index: 64; display: flex; align-items: stretch; align-self: stretch; }

  .sbmm-dk-trigger {
    position: relative; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px;
    font: inherit; font-size: 13px; font-weight: 700; line-height: 1; color: #fff; background: var(--sbmm-accent);
    border: 0; border-radius: var(--sbmm-r); cursor: pointer; transition: background .13s;
  }
  .sbmm-dk-trigger:hover,
  .sbmm-dk-catalog.sbmm-dk-open > .sbmm-dk-trigger { background: var(--sbmm-accent-ink); }
  .sbmm-dk-hamburger { display: grid; gap: 3px; width: 17px; }
  .sbmm-dk-hamburger i { display: block; height: 1.7px; background: currentColor; border-radius: 2px; }

  .sbmm-dk-panel {
    position: absolute; inset-block-start: calc(100% + 4px);
    inset-inline-start: calc(0px - var(--sbmm-dk-edge-shift, 0px) - var(--sbmm-dk-edge-shift-ltr, 0px));
    z-index: 65; display: grid; grid-template-columns: 236px minmax(0, 1fr);
    width: min(var(--sbmm-max), calc(100vw - 24px)); height: min(560px, 72vh); min-height: 430px;
    overflow: hidden; visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(6px);
    background: #fff; border: 1px solid var(--sbmm-line); border-radius: min(var(--sbmm-radius, 8px), 8px);
    box-shadow: 0 24px 48px -24px rgba(17, 24, 39, .3), 0 6px 18px -10px rgba(17, 24, 39, .12);
    transition: opacity .13s, transform .13s, visibility .13s;
  }
  .sbmm-dk-catalog.sbmm-dk-open > .sbmm-dk-panel { visibility: visible; opacity: 1; pointer-events: auto; transform: none; }
  .sbmm-panel-full .sbmm-dk-bar,
  .sbmm-panel-full .sbmm-dk-catalog { position: static; }
  .sbmm-panel-full,
  .sbmm-panel-full .sbmm-dk-nav,
  .sbmm-panel-full .sbmm-dk-bar { width: 100%; max-width: none; }
  .sbmm-panel-full .sbmm-dk-panel { inset-inline: 0; width: auto; max-width: none; }

  /* rail */
  .sbmm-dk-rail { min-width: 0; height: 100%; overflow: hidden; background: var(--sbmm-soft); border-inline-end: 1px solid var(--sbmm-line); }
  .sbmm-dk-rail-scroll { height: 100%; padding: 8px 6px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d3dbe8 transparent; }
  .sbmm-dk-rail-item {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) 14px; align-items: center; gap: 9px; min-height: 52px; padding: 5px 8px;
    font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--sbmm-ink-2);
    border: 1px solid transparent; border-radius: var(--sbmm-r); transition: background .12s, border-color .12s, color .12s;
  }
  .sbmm-dk-rail-item + .sbmm-dk-rail-item { margin-top: 2px; }
  .sbmm-dk-rail-item:hover { background: #fff; border-color: var(--sbmm-line); }
  .sbmm-dk-rail-item.is-active { color: var(--sbmm-accent-ink); background: #fff; border-color: var(--sbmm-accent-line); }
  .sbmm-dk-rail-media { display: grid; width: 40px; height: 40px; place-items: center; overflow: hidden; background: var(--sbmm-accent-soft); border-radius: var(--sbmm-r); }
  .sbmm-dk-rail-media img { width: 30px; height: 30px; object-fit: contain; }
  .sbmm-dk-rail-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sbmm-dk-arrow { color: var(--sbmm-mute); font-size: 18px; line-height: 1; }
  .sbmm-dk-rail-item.is-active .sbmm-dk-arrow { color: var(--sbmm-accent); }

  /* pane */
  .sbmm-dk-content { position: relative; min-width: 0; height: 100%; overflow: hidden; background: #fff; }
  .sbmm-dk-pane { display: none; min-width: 0; height: 100%; }
  .sbmm-dk-pane.is-active { display: block; }
  .sbmm-dk-pane-scroll { height: 100%; padding: 14px 16px 18px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d3dbe8 transparent; }
  .sbmm-dk-pane-scroll:has(> .sbmm-dk-columns):not(:has(> .sbmm-dk-simple-grid)) { display: flex; flex-direction: column; overflow: hidden; }
  .sbmm-dk-pane-head { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--sbmm-line); }
  .sbmm-dk-pane-title-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .sbmm-dk-pane-title { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 18px; font-weight: 800; line-height: 1.4; color: var(--sbmm-ink); }
  .sbmm-dk-pane-title::before { content: ""; width: 4px; height: 22px; background: var(--sbmm-accent); border-radius: 2px; }
  .sbmm-dk-all-link {
    display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 14px; white-space: nowrap;
    font-size: 12.5px; font-weight: 700; color: #fff; background: var(--sbmm-accent); border-radius: var(--sbmm-r); transition: background .12s;
  }
  .sbmm-dk-all-link:hover { background: var(--sbmm-accent-ink); color: #fff; }

  .sbmm-dk-columns { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; gap: 8px; }
  .sbmm-dk-pane-scroll:has(> .sbmm-dk-columns):not(:has(> .sbmm-dk-simple-grid)) > .sbmm-dk-columns { flex: 1 1 0; min-height: 0; grid-auto-rows: minmax(0, 1fr); }
  .sbmm-dk-column {
    grid-column: span var(--sbmm-dk-span, 3); min-width: 0; max-height: 100%; padding: 8px; overflow: hidden auto;
    background: #fbfcfe; border: 1px solid var(--sbmm-line); border-radius: var(--sbmm-r); overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d3dbe8 transparent;
  }
  .sbmm-dk-column-title { display: block; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sbmm-dk-pane .sbmm-block { margin: 0 0 4px; }
  .sbmm-dk-pane .sbmm-block + .sbmm-block { margin-top: 6px; }
  .sbmm-dk-pane .sbmm-block-head { padding: 0 2px 5px 0; padding-inline-start: 9px; border-bottom: 1px dashed var(--sbmm-line); }
  .sbmm-dk-pane .sbmm-link-list > li,
  .sbmm-dk-pane .sbmm-category-node { margin: 0; }
  .sbmm-dk-pane .sbmm-category-node > a,
  .sbmm-dk-pane .sbmm-link-list a { min-height: 27px; padding: 2px 6px; white-space: nowrap; border-radius: 5px; }
  .sbmm-dk-pane .sbmm-category-node > a::before,
  .sbmm-dk-pane .sbmm-link-list a::before { content: ""; flex: none; width: 5px; height: 5px; background: #cdd6e5; border-radius: 50%; transition: background .12s; }
  .sbmm-dk-pane .sbmm-category-node > a:hover,
  .sbmm-dk-pane .sbmm-link-list a:hover { background: var(--sbmm-accent-soft); color: var(--sbmm-accent-ink); }
  .sbmm-dk-pane .sbmm-category-node > a:hover::before,
  .sbmm-dk-pane .sbmm-link-list a:hover::before { background: var(--sbmm-accent); }
  .sbmm-dk-pane .sbmm-link-list:has(> li:nth-child(9)) { columns: 10rem auto; column-gap: 8px; }
  .sbmm-dk-pane .sbmm-link-list > li { break-inside: avoid; }
  /* heading-only blocks become link chips */
  .sbmm-dk-pane .sbmm-block:not(:has(.sbmm-link-list)) .sbmm-block-head { padding: 0; border: 0; }
  .sbmm-dk-pane .sbmm-block:not(:has(.sbmm-link-list)) .sbmm-block-head::before { display: none; }
  .sbmm-dk-pane .sbmm-block:not(:has(.sbmm-link-list)) .sbmm-block-head a {
    justify-content: space-between; padding: 7px 10px; font-size: 13px; background: #fff; border: 1px solid var(--sbmm-line); border-radius: var(--sbmm-r); transition: border-color .12s;
  }
  .sbmm-dk-pane .sbmm-block:not(:has(.sbmm-link-list)) .sbmm-block-head a::after { content: "\2039"; font-size: 17px; line-height: 1; color: var(--sbmm-mute); }
  .sbmm-dk-pane .sbmm-block:not(:has(.sbmm-link-list)) .sbmm-block-head a:hover { border-color: var(--sbmm-accent-line); }

  .sbmm-dk-auto-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; padding: 4px 0 6px; }
  .sbmm-dk-auto-group { min-width: 0; }
  .sbmm-dk-auto-title { position: relative; display: flex; align-items: center; gap: 5px; margin-bottom: 5px; padding-inline-start: 9px; font-size: 13px; font-weight: 700; color: var(--sbmm-ink); }
  .sbmm-dk-auto-title::before { content: ""; position: absolute; inset-inline-start: 0; width: 3px; height: 14px; background: var(--sbmm-accent); border-radius: 2px; }
  .sbmm-dk-auto-title span { color: var(--sbmm-accent); font-size: 16px; }
  .sbmm-dk-auto-group li a { display: block; padding: 4px 1px; font-size: 12px; line-height: 1.45; color: var(--sbmm-ink-2); }
  .sbmm-dk-auto-group li a:hover { color: var(--sbmm-accent); }

  .sbmm-dk-simple-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 12px; margin-top: 10px; }
  .sbmm-dk-simple-grid .sbmm-simple-item > a { padding: 8px 12px; font-weight: 700; color: var(--sbmm-ink); background: #fff; border: 1px solid var(--sbmm-line); border-radius: var(--sbmm-r); }
  .sbmm-dk-simple-grid .sbmm-simple-item > a:hover { background: var(--sbmm-accent-soft); border-color: var(--sbmm-accent-line); }
  .sbmm-dk-pane .sbmm-brand-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sbmm-dk-pane .sbmm-product-grid { grid-template-columns: repeat(var(--sbmm-items, 4), minmax(0, 1fr)); }
  .sbmm-dk-pane .sbmm-category-hero { display: none; }

  /* horizontal links next to the catalog button */
  .sbmm-dk-horizontal-wrap { flex: auto; min-width: 0; }
  .sbmm-dk-horizontal-list { flex-wrap: nowrap; gap: 2px; padding: 0 4px; }
  .sbmm-dk-horizontal-list > .sbmm-root-item { flex: none; }
  .sbmm-dk-end-wrap { display: flex; flex: none; align-items: center; min-width: 0; margin-inline-start: auto; }
  .sbmm-dk-end-list { padding-inline-end: 6px; }
  .sbmm-dk-end-list .sbmm-panel { inset-inline: auto 0; }
}

@media (min-width: 992px) and (max-width: 1180px) {
  .sbmm-root-link { padding-inline: 7px; }
  .sbmm-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sbmm-dk-panel { grid-template-columns: 210px minmax(0, 1fr); }
  .sbmm-dk-auto-grid,
  .sbmm-dk-simple-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1920px) {
  .sbmm-dk-panel { grid-template-columns: 260px minmax(0, 1fr); height: min(640px, 70vh); }
  .sbmm-dk-pane-scroll { padding: 18px 22px 22px; }
  .sbmm-dk-column { padding: 10px; }
  .sbmm-dk-pane .sbmm-category-node > a,
  .sbmm-dk-pane .sbmm-link-list a { font-size: 13.5px; }
}

/* ===================================== 5. mobile: accordion tree (own drawer) */
.sbmm-own-overlay { position: fixed; inset: 0; z-index: 10080; display: none; background: rgba(17, 24, 39, .4); }
.sbmm-own-drawer {
  position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 10090; width: min(88vw, 380px); overflow: auto;
  background: #f4f8ff; box-shadow: 0 0 40px rgba(17, 24, 39, .2); transform: translateX(105%); transition: transform .2s;
}
[dir="ltr"] .sbmm-own-drawer { transform: translateX(-105%); }
.sbmm-drawer-open .sbmm-own-overlay { display: block; }
.sbmm-drawer-open .sbmm-own-drawer { transform: none; }
.sbmm-drawer-head { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 12px; border-bottom: 1px solid var(--sbmm-line); }
.sbmm-drawer-head strong { font-size: 15px; font-weight: 700; }
.sbmm-drawer-head button { display: grid; width: 34px; height: 34px; padding: 0; place-items: center; font-size: 20px; line-height: 1; color: #c62828; background: #fff; border: 1px solid var(--sbmm-line); border-radius: var(--sbmm-r); cursor: pointer; }

.sbmm-mobile-tree { padding: 6px 10px 12px; }
.sbmm-mobile-item { background: #fff; border-bottom: 1px solid var(--sbmm-line); }
.sbmm-mobile-row { display: flex; align-items: center; gap: 4px; min-height: 44px; }
.sbmm-mobile-row > a {
  display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding: 4px 2px;
  font-size: 13px; font-weight: 700; line-height: 1.45; color: var(--sbmm-ink); overflow-wrap: anywhere;
}
.sbmm-mobile-toggle { position: relative; flex: 0 0 36px; width: 36px; height: 36px; padding: 0; background: none; border: 0; border-radius: var(--sbmm-r); cursor: pointer; }
.sbmm-mobile-toggle span::before,
.sbmm-mobile-toggle span::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.5px; background: #626b76; transform: translate(-50%, -50%); }
.sbmm-mobile-toggle span::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .15s; }
.sbmm-mobile-toggle[aria-expanded="true"] span::after { transform: translate(-50%, -50%) rotate(0); }
.sbmm-mobile-toggle:active { background: var(--sbmm-soft); }
.sbmm-mobile-children { margin: 0 0 6px; padding: 4px 8px 8px; background: #fafbfc; border-radius: var(--sbmm-r); }
.sbmm-mobile-children[hidden] { display: none; }
.sbmm-mobile-children .sbmm-mobile-item { background: none; }
.sbmm-mobile-children .sbmm-mobile-row > a { min-height: 40px; font-size: 12px; color: var(--sbmm-ink-2); }
.sbmm-mobile-section-title { padding: 8px 2px 4px; font-size: 11px; font-weight: 700; color: var(--sbmm-mute); }
.sbmm-mobile-brands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px 0; }
.sbmm-mobile-brands a { display: grid; min-height: 44px; padding: 5px 4px; place-items: center; font-size: 11px; text-align: center; color: var(--sbmm-ink-2); background: #fff; border: 1px solid var(--sbmm-line); border-radius: var(--sbmm-r); }
.sbmm-mobile-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 4px 0; }
.sbmm-mobile-products .sbmm-product-card { display: block; padding: 5px; text-align: center; }
.sbmm-mobile-products .sbmm-product-name { font-size: 11px; }
.sbmm-mobile-html { padding: 6px 2px; font-size: 12px; line-height: 1.75; }

.sbmm-item-media { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; overflow: hidden; background: var(--sbmm-soft); border-radius: var(--sbmm-r); }
.sbmm-item-media img { width: 100%; height: 100%; padding: 4px; object-fit: contain; }
.sbmm-item-title { min-width: 0; overflow-wrap: anywhere; }

.sbmm-mobile-all,
.sbmm-mobile-view-all {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 36px; margin: 4px 0; padding: 6px 10px;
  font-size: 12px; font-weight: 700; color: var(--sbmm-accent-ink); background: var(--sbmm-accent-soft); border-radius: var(--sbmm-r);
}
.sbmm-mobile-view-all-arrow { font-size: 17px; line-height: 1; }

@media (max-width: 991px) {
  .sbmm-shell:not(.sbmm-column-shell) .sbmm-nav { display: none; }
  .sbmm-own-trigger { display: flex; }
}

/* ============================ 6. mobile: ST Sidebar panel (#side_stmobilemenu) */
#side_stmobilemenu .sbmm-m__tab,
#side_stmobilemenu .sbmm-qlink,
#side_stmobilemenu .sbmm-search__clear,
.sbmm-card__more { font: inherit; }

@media (max-width: 991px) {
  /* the host theme owns the panel position/size: keep it full screen, flat and above everything */
  #side_stmobilemenu.st-menu {
    position: fixed !important; inset: 0 !important; z-index: 100000 !important;
    display: flex; flex-direction: column; width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important;
    margin: 0 !important; overflow: hidden !important; direction: rtl;
    background: linear-gradient(180deg, #f4f8ff, #eaf2fe) !important; border: 0 !important;
  }

  /* header: no background of its own — the word sits directly on the panel */
  #side_stmobilemenu .st-menu-header {
    display: flex; flex: none; align-items: center; justify-content: space-between; height: 52px; min-height: 52px; margin: 0; padding: 0 14px;
    background: none !important; border: 0 !important; box-shadow: none !important;
  }
  #side_stmobilemenu .st-menu-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--sbmm-ink) !important; background: none !important; }
  #side_stmobilemenu .close_right_side {
    display: grid; width: 34px; height: 34px; margin: 0 !important; place-items: center;
    color: #c62828 !important; background: #fff !important; border: 1px solid var(--sbmm-line); border-radius: 50%;
  }

  /* quick links (home, about, contact …): compact pills close to each other */
  #side_stmobilemenu .sbmm-qlinks {
    display: flex; flex: none; gap: 4px; margin: 0; padding: 2px 12px 6px; overflow-x: auto; direction: rtl; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  #side_stmobilemenu .sbmm-qlinks::-webkit-scrollbar { display: none; }
  #side_stmobilemenu .sbmm-qlink {
    display: inline-flex; flex: none; align-items: center; gap: 4px; max-width: 150px; min-height: 30px; padding: 0 9px 0 8px;
    font-size: 11.5px; font-weight: 700; line-height: 1; white-space: nowrap; color: var(--sbmm-ink);
    background: #fff; border: 1px solid var(--sbmm-line); border-radius: var(--sbmm-r);
  }
  #side_stmobilemenu .sbmm-qlink:active { background: var(--sbmm-accent-soft); }
  #side_stmobilemenu .sbmm-qlink img { flex: none; width: 15px; height: 15px; object-fit: contain; }
  #side_stmobilemenu .sbmm-qlink span { overflow: hidden; text-overflow: ellipsis; }

  /* category search: placeholder text only, no magnifier icon */
  #side_stmobilemenu .sbmm-search { position: relative; flex: none; margin: 0 12px 8px; }
  #side_stmobilemenu .sbmm-search__input {
    display: block; width: 100%; height: 40px; margin: 0; padding: 0 12px; padding-inline-end: 38px;
    font: inherit; font-size: 16px; font-weight: 600; text-align: right; color: var(--sbmm-ink);
    background: #fff; border: 1px solid var(--sbmm-line); border-radius: var(--sbmm-r); box-shadow: none; outline: 0; -webkit-appearance: none; appearance: none;
  }
  #side_stmobilemenu .sbmm-search__input::placeholder { font-size: 13.5px; font-weight: 500; color: #8a93a0; }
  #side_stmobilemenu .sbmm-search__input:focus { border-color: var(--sbmm-accent); box-shadow: 0 0 0 3px rgba(24, 119, 242, .15); }
  #side_stmobilemenu .sbmm-search__input::-webkit-search-cancel-button { display: none; }
  #side_stmobilemenu .sbmm-search__clear {
    position: absolute; inset-block: 0; inset-inline-end: 6px; display: grid; width: 28px; height: 28px; margin: auto 0; padding: 0; place-items: center;
    font-size: 18px; line-height: 1; color: var(--sbmm-mute); background: var(--sbmm-soft); border: 0; border-radius: 50%; cursor: pointer;
  }
  #side_stmobilemenu .sbmm-search__clear[hidden] { display: none; }
  #side_stmobilemenu .sbmm-search-empty { flex: none; margin: 0 12px 8px; padding: 12px 8px; font-size: 12px; text-align: center; color: var(--sbmm-mute); background: #fff; border-radius: var(--sbmm-r); }
  #side_stmobilemenu .sbmm-search-empty[hidden] { display: none; }

  /* rail + panes */
  #side_stmobilemenu .sbmm-m {
    display: grid; flex: 1 1 auto; grid-template-columns: 96px minmax(0, 1fr); min-height: 0; direction: rtl;
  }
  #side_stmobilemenu .sbmm-m__rail {
    grid-area: 1 / 1; min-height: 0; padding: 4px 6px max(80px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  }
  #side_stmobilemenu .sbmm-m__rail::-webkit-scrollbar,
  #side_stmobilemenu .sbmm-m__panes::-webkit-scrollbar { display: none; }
  #side_stmobilemenu .sbmm-m__tab {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 100%; min-height: 76px; margin: 0 0 4px; padding: 6px 3px;
    font-size: 10.5px; font-weight: 700; line-height: 1.35; text-align: center; color: var(--sbmm-ink-2);
    background: transparent; border: 1px solid transparent; border-radius: var(--sbmm-r); cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  #side_stmobilemenu .sbmm-m__tab.is-active { color: var(--sbmm-accent-ink); background: #fff; border-color: var(--sbmm-accent-line); }
  #side_stmobilemenu .sbmm-m__tab-media { display: grid; width: 40px; height: 40px; place-items: center; background: #fff; border-radius: var(--sbmm-r); }
  #side_stmobilemenu .sbmm-m__tab.is-active .sbmm-m__tab-media { background: var(--sbmm-accent-soft); }
  #side_stmobilemenu .sbmm-m__tab-media img { width: 32px; height: 32px; object-fit: contain; }
  #side_stmobilemenu .sbmm-m__tab-title { max-width: 100%; overflow-wrap: anywhere; }
  #side_stmobilemenu .sbmm-m__tab .sbmm-label { margin-top: 1px; }

  #side_stmobilemenu .sbmm-m__panes {
    grid-area: 1 / 2; min-height: 0; padding: 8px 8px max(90px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
    background: #fff; border-start-start-radius: 12px; border-start-end-radius: 0;
  }
  #side_stmobilemenu .sbmm-m__pane { display: none; min-width: 0; }
  #side_stmobilemenu .sbmm-m__pane.is-active { display: block; }

  /* explicit mega columns / links inside a pane use the accordion rows */
  #side_stmobilemenu .sbmm-m__pane .sbmm-mobile-item { border-bottom: 1px solid var(--sbmm-line); }
  #side_stmobilemenu .sbmm-m__pane > .sbmm-mobile-item:last-child { border-bottom: 0; }

  /* category cards: 3 per row, big icon filling the tile (little white around it) */
  .sbmm-cards {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 4px 0; padding: 0; list-style: none;
  }
  .sbmm-card { position: relative; min-width: 0; }
  .sbmm-card__link {
    display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; padding: 4px 3px 5px;
    color: var(--sbmm-ink-2); background: #fff; border: 1px solid var(--sbmm-line); border-radius: var(--sbmm-r);
  }
  .sbmm-card__link:active { border-color: var(--sbmm-accent-line); }
  .sbmm-card__media {
    display: grid; width: 100%; aspect-ratio: 1; place-items: center; overflow: hidden; background: var(--sbmm-soft); border-radius: 5px;
  }
  .sbmm-card__media img { width: 100%; height: 100%; padding: 4px; object-fit: contain; }
  .sbmm-card__title {
    display: -webkit-box; width: 100%; min-height: 28px; overflow: hidden; font-size: 10px; font-weight: 600; line-height: 1.4; text-align: center;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere;
  }
  .sbmm-card__more {
    position: absolute; inset-block-start: 3px; inset-inline-start: 3px; display: grid; width: 24px; height: 24px; padding: 0; place-items: center;
    color: var(--sbmm-accent-ink); background: rgba(255, 255, 255, .95); border: 1px solid var(--sbmm-line); border-radius: 50%; cursor: pointer;
  }
  .sbmm-card__more::before,
  .sbmm-card__more::after { content: ""; position: absolute; width: 10px; height: 1.5px; background: currentColor; border-radius: 1px; }
  .sbmm-card__more::after { transform: rotate(90deg); transition: transform .15s; }
  .sbmm-card__more[aria-expanded="true"]::after { transform: rotate(0); }
  /* an expanded card takes the whole row and shows its children as another card grid */
  .sbmm-card.is-open { grid-column: 1 / -1; }
  .sbmm-card.is-open > .sbmm-card__link { height: auto; flex-direction: row; justify-content: flex-start; gap: 8px; padding: 4px 8px; padding-inline-start: 34px; border-color: var(--sbmm-accent-line); background: var(--sbmm-accent-soft); }
  .sbmm-card.is-open > .sbmm-card__link .sbmm-card__media { width: 40px; height: 40px; background: #fff; }
  .sbmm-card.is-open > .sbmm-card__link .sbmm-card__title { min-height: 0; width: auto; font-size: 12px; font-weight: 700; text-align: start; -webkit-line-clamp: 1; }
  .sbmm-card.is-open > .sbmm-card__more { inset-block-start: 14px; }
  .sbmm-card__children { margin: 6px 0 4px; padding: 6px; background: #f7f9fc; border-radius: var(--sbmm-r); }
  .sbmm-card__children[hidden] { display: none; }
  .sbmm-card__children > .sbmm-cards { margin: 0; }
  .sbmm-card__all { display: flex; align-items: center; justify-content: space-between; min-height: 34px; margin-top: 6px; padding: 5px 10px; font-size: 11.5px; font-weight: 700; color: var(--sbmm-accent-ink); background: #fff; border-radius: var(--sbmm-r); }

  /* search mode: every pane is listed, only matches stay visible */
  #side_stmobilemenu.sbmm-searching .sbmm-m { display: block; overflow-y: auto; }
  #side_stmobilemenu.sbmm-searching .sbmm-m__rail { display: none; }
  #side_stmobilemenu.sbmm-searching .sbmm-m__panes { height: 100%; border-radius: 0; }
  #side_stmobilemenu.sbmm-searching .sbmm-m__pane { display: block; }
  #side_stmobilemenu.sbmm-searching [data-sbmm-search-hidden="1"],
  #side_stmobilemenu.sbmm-searching .sbmm-mobile-all { display: none; }
  #side_stmobilemenu.sbmm-searching .sbmm-card__children[hidden],
  #side_stmobilemenu.sbmm-searching .sbmm-mobile-children[hidden] { display: block; }
  #side_stmobilemenu.sbmm-searching .sbmm-card__more { display: none; }
  /* search results read as a compact list instead of tiles */
  #side_stmobilemenu.sbmm-searching .sbmm-cards { grid-template-columns: 1fr; gap: 4px; }
  #side_stmobilemenu.sbmm-searching .sbmm-card__link { flex-direction: row; justify-content: flex-start; gap: 8px; height: auto; padding: 4px 8px; }
  #side_stmobilemenu.sbmm-searching .sbmm-card__media { flex: none; width: 36px; height: 36px; aspect-ratio: auto; }
  #side_stmobilemenu.sbmm-searching .sbmm-card__title { width: auto; min-height: 0; font-size: 12px; text-align: start; -webkit-line-clamp: 1; }
  #side_stmobilemenu.sbmm-searching .sbmm-card__all { display: none; }
  #side_stmobilemenu.sbmm-searching .sbmm-card__children { margin: 4px 0 0; padding: 4px 0 0 0; padding-inline-start: 12px; background: none; }
}

@media (max-width: 380px) {
  #side_stmobilemenu .sbmm-m { grid-template-columns: 84px minmax(0, 1fr); }
  #side_stmobilemenu .sbmm-m__tab { min-height: 70px; font-size: 10px; }
  #side_stmobilemenu .sbmm-m__tab-media { width: 36px; height: 36px; }
  #side_stmobilemenu .sbmm-m__tab-media img { width: 28px; height: 28px; }
  #side_stmobilemenu .sbmm-m__panes { padding-inline: 6px; }
  .sbmm-cards { gap: 5px; }
}
@media (min-width: 600px) and (max-width: 991px) {
  #side_stmobilemenu .sbmm-m { grid-template-columns: 130px minmax(0, 1fr); }
  #side_stmobilemenu .sbmm-m__tab { font-size: 12px; }
  .sbmm-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sbmm-card__title { font-size: 11px; }
}
@media (min-width: 992px) {
  #side_stmobilemenu .sbmm-qlinks { display: none; }
}

/* ============================================================ 7. motion */
@media (prefers-reduced-motion: reduce) {
  .sbmm-shell *,
  #side_stmobilemenu *,
  .sbmm-own-drawer { transition: none !important; scroll-behavior: auto !important; }
}

/* 1.4.3 — menu titles may be printed as <div> instead of <h2>/<h3> (SBMM_SEO_TITLES).
   Zero-specificity rules that reproduce what the heading tags received from the theme
   (Bootstrap h2/h3 defaults), so the div version renders identically. */
:where(div.sbmm-dk-pane-title){font-size:22.4px;font-weight:700;line-height:1.1;margin-bottom:16px}
:where(div.st-menu-title){line-height:1.1}