/* public/js/shared/header/header-kit.css
   Styles for the HeaderKit components (header-kit*.js), extracted from the SFC <style> blocks of
   (development) HeaderRenderer*.vue, elements/Frontend*Block.vue, MegaPanelMenu.vue, MenuDrawer.vue.
   <style scoped> is emulated: each component's template elements carry a data-hk-* attribute
   (HeaderKit.scopeTemplate) and the selectors below put that attribute exactly where Vue's
   scoped compiler put [data-v-xxx], so reach and specificity match the SFC build.
   Unscoped (<style> without scoped) blocks are copied verbatim. */

/* ===================== HeaderRenderer.vue (scoped: data-hk-hr) ===================== */
.dynamic-header[data-hk-hr] {
  width: 100%;
  position: relative;
}

/* Drop the header's own box so a sticky section sticks against the page, not the header */
.dynamic-header.has-sticky-section[data-hk-hr] {
  display: contents;
}

/* HeaderRenderer.vue (unscoped): hide-on-device for sections, columns and elements.
   !important beats the inline display set by column content layouts. */
@media (min-width: 992px) {
  .dynamic-header .hide-desktop { display: none !important; }
}
@media (max-width: 991px) and (min-width: 768px) {
  .dynamic-header .hide-tablet { display: none !important; }
}
@media (max-width: 767px) {
  .dynamic-header .hide-mobile { display: none !important; }
}

/* ===================== HeaderRendererSection.vue (scoped: data-hk-hs) ===================== */
.header-section[data-hk-hs] {
  width: 100%;
}

.container[data-hk-hs], .container-fluid[data-hk-hs] {
  padding-left: 15px;
  padding-right: 15px;
}

.row[data-hk-hs] {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

/* ===================== HeaderRendererColumn.vue (scoped: data-hk-hc) ===================== */
.col-1[data-hk-hc] { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2[data-hk-hc] { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3[data-hk-hc] { flex: 0 0 25%; max-width: 25%; }
.col-4[data-hk-hc] { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5[data-hk-hc] { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6[data-hk-hc] { flex: 0 0 50%; max-width: 50%; }
.col-7[data-hk-hc] { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8[data-hk-hc] { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9[data-hk-hc] { flex: 0 0 75%; max-width: 75%; }
.col-10[data-hk-hc] { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11[data-hk-hc] { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12[data-hk-hc] { flex: 0 0 100%; max-width: 100%; }

[class*="col-"][data-hk-hc] {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

/* ===================== FrontendButtonBlock.vue (scoped: data-hk-btn) ===================== */
.header-btn[data-hk-btn] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.header-btn[data-hk-btn]:hover {
  opacity: 0.85;
}

/* ===================== FrontendTextBlock.vue (scoped: data-hk-txt) ===================== */
.header-text-block[data-hk-txt] p {
  margin-bottom: 0;
}

/* Take colour from the element/section styles instead of the theme's p/b rules;
   colours set in the editor are inline and still win. */
.header-text-block[data-hk-txt] :is(p, span, b, strong, em, i, li, h1, h2, h3, h4, h5, h6) {
  color: inherit;
}

/* ===================== FrontendLogoBlock.vue (scoped: data-hk-logo) ===================== */
.navbar-brand[data-hk-logo] {
  text-decoration: none;
  display: inline-block;
  max-width: 300px;
}

.logo-placeholder[data-hk-logo] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 60px;
  border: 2px dashed #ccc;
  border-radius: 4px;
  color: #999;
  font-size: 14px;
  background: #f8f9fa;
}

.h-auto[data-hk-logo] { height: auto !important; }
.col-12[data-hk-logo] { flex: 0 0 100%; width: 100%; }
.d-flex[data-hk-logo] { display: flex !important; }
.align-items-center[data-hk-logo] { align-items: center !important; }
.gap-3[data-hk-logo] { gap: 1rem !important; }

/* ===================== FrontendLocationBlock.vue (scoped: data-hk-loc) ===================== */
.location-info[data-hk-loc] {
  cursor: pointer;
  transition: all 0.3s ease;
}

.location-info[data-hk-loc]:hover {
  opacity: 0.8;
}

.ficon[data-hk-loc] {
  font-size: 24px;
  color: #007bff;
}

.location-details[data-hk-loc] { flex: 1; }

.address-section[data-hk-loc] { margin-bottom: 4px; }

.address-section h6[data-hk-loc] {
  font-size: 14px;
  color: #333;
  line-height: 1.2;
}

.address-section .text-muted[data-hk-loc] {
  font-size: 12px;
  color: #999;
}

.email-section[data-hk-loc] {
  font-size: 12px;
  color: #666;
  display: flex;
  align-items: center;
  margin-bottom: 2px;
}

.email-section i[data-hk-loc] {
  font-size: 14px;
  color: #999;
}

.email-section a[data-hk-loc] { color: inherit; }
.email-section a[data-hk-loc]:hover { color: #007bff; }

.cursor-pointer[data-hk-loc] { cursor: pointer; }
.d-flex[data-hk-loc] { display: flex !important; }
.align-items-center[data-hk-loc] { align-items: center !important; }
.gap-2[data-hk-loc] { gap: 0.5rem !important; }
.me-1[data-hk-loc] { margin-right: 0.25rem !important; }
.mb-0[data-hk-loc] { margin-bottom: 0 !important; }
.fw-bold[data-hk-loc] { font-weight: 700 !important; }
.fw-normal[data-hk-loc] { font-weight: 400 !important; }
.text-muted[data-hk-loc] { color: #6c757d !important; }
.text-decoration-none[data-hk-loc] { text-decoration: none !important; }

/* ===================== FrontendSearchBlock.vue (scoped: data-hk-srch) ===================== */
.input-group[data-hk-srch] {
  display: flex;
  align-items: center;
}

.form-control[data-hk-srch] {
  flex: 1;
  padding: 10px 15px;
  border: none !important;
  outline: none;
  font-size: 14px;
  box-shadow: none !important;
}

.btn[data-hk-srch] {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 15px;
  background: #0d6efd;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 14px;
}

.btn[data-hk-srch]:hover { background: #0b5ed7; }
.fi-rs-search[data-hk-srch] { font-size: 18px; }
.d-flex[data-hk-srch] { display: flex !important; }
.align-items-center[data-hk-srch] { align-items: center !important; }
.gap-3[data-hk-srch] { gap: 1rem !important; }
.w-100[data-hk-srch] { width: 100% !important; }
.border[data-hk-srch] { border: 1px solid #dee2e6 !important; }
.border-0[data-hk-srch] { border: 0 !important; }
.p-1[data-hk-srch] { padding: 0.25rem !important; }
.rounded-2[data-hk-srch] { border-radius: 0.375rem !important; }
.overflow-hidden[data-hk-srch] { overflow: hidden !important; }
.ms-1[data-hk-srch] { margin-left: 0.25rem !important; }

/* ===================== FrontendSocialBlock.vue (scoped: data-hk-soc) ===================== */
.social-links[data-hk-soc] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.social-link[data-hk-soc] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #f8f9fa;
  color: #333;
  text-decoration: none;
  border-radius: 50%;
  transition: all 0.3s ease;
  font-size: 16px;
}

.social-link[data-hk-soc]:hover {
  background: #007bff;
  color: white;
  transform: translateY(-2px);
}

.social-link i[data-hk-soc] {
  font-size: 24px;
  height: 24px;
  line-height: normals;
}

/* Platform specific colors on hover */
.social-link:hover .fa-facebook-f[data-hk-soc],
.social-link:hover .fa-twitter[data-hk-soc],
.social-link:hover .fa-instagram[data-hk-soc],
.social-link:hover .fa-linkedin-in[data-hk-soc] {
  color: white;
}

/* ===================== FrontendMenuBlock.vue (scoped: data-hk-mb) ===================== */
.hamburger-menu-container[data-hk-mb] { position: relative; }

.hamburger-toggle[data-hk-mb] { margin-bottom: 10px; }

.navbar_menu[data-hk-mb] { min-height: unset; }

.navbar_menu .navbar-nav[data-hk-mb] {
  min-height: 44px;
  align-items: center;
}

.navbar_menu .nav-link[data-hk-mb] {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: #333;
  text-decoration: none;
  padding: 8px 15px;
  transition: color 0.3s;
}

.navbar_menu .nav-link[data-hk-mb]:hover { color: #007bff; }

.navbar_menu button.dropdown-toggle i[data-hk-mb] { color: #000 !important; }

/* Category items are <button>s rendered by the child MenuItem component (:deep in the SFC);
   theme CSS forces `.navbar_menu button { color: #fff !important }` */
.navbar_menu[data-hk-mb] button.nav-link,
.navbar_menu[data-hk-mb] button.dropdown-item {
  color: #333 !important;
}

.navbar_menu[data-hk-mb] button.nav-link:hover { color: #007bff !important; }

.navbar[data-hk-mb] { padding: 0; }

.container[data-hk-mb] {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.navbar-collapse[data-hk-mb] {
  flex-basis: 100%;
  flex-grow: 1;
  align-items: center;
}

.justify-content-center[data-hk-mb] { justify-content: center; }

.navbar-nav[data-hk-mb] {
  display: flex;
  flex-direction: row;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-item[data-hk-mb] { position: relative; }
.flex-wrap[data-hk-mb] { flex-wrap: wrap; }
.mb-2[data-hk-mb] { margin-bottom: 0.5rem; }
.mb-lg-0[data-hk-mb] { margin-bottom: 0; }
.m-auto[data-hk-mb] { margin: auto; }

/* Hamburger menu specific styles - Always show hamburger structure */
.hamburger-menu-style .navbar-collapse[data-hk-mb] { display: none; }
.hamburger-menu-style .navbar-collapse.show[data-hk-mb] { display: block; }

.hamburger-menu-style .navbar-nav[data-hk-mb] {
  flex-direction: column;
  width: 100%;
}

.hamburger-menu-style .nav-link[data-hk-mb] {
  width: 100%;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.hamburger-menu-style .hamburger-toggle[data-hk-mb] { display: block !important; }
.hamburger-menu-style .navbar-collapse[data-hk-mb] { display: none !important; }
.hamburger-menu-style .navbar-collapse.show[data-hk-mb] { display: block !important; }

@media (max-width: 991px) {
  .navbar_menu .navbar-nav[data-hk-mb] {
    align-items: unset !important;
    flex-direction: column;
  }

  .navbar_menu button.nav-link[data-hk-mb] {
    width: 100%;
    text-align: left;
  }

  .navbar_menu button[data-hk-mb],
  .navbar_menu .nav-link[data-hk-mb],
  .navbar_menu[data-hk-mb] button.nav-link,
  .navbar_menu[data-hk-mb] button.dropdown-item {
    color: #000 !important;
  }
}

/* Mega menu: Always show expanded */
.primary_menu .navbar-collapse[data-hk-mb] { display: flex !important; }
.primary_menu .navbar-nav[data-hk-mb] { flex-direction: row; }
.primary_menu .nav-link[data-hk-mb] { border-bottom: none; }

/* ===================== FrontendMegaMenuBlock.vue (scoped: data-hk-mm) ===================== */
.hb-mega[data-hk-mm] { color: var(--hbm-text); }

/* ---------- Desktop ---------- */
.hb-mega-list[data-hk-mm] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hb-mega-link[data-hk-mm] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  border: 0;
  background: none;
  color: var(--hbm-text);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.hb-mega-link[data-hk-mm]:hover,
.hb-mega-link[aria-expanded='true'][data-hk-mm] {
  color: var(--hbm-accent);
}

.hb-chev[data-hk-mm],
.hb-arw[data-hk-mm] {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s ease;
}

/* Theme CSS paints header SVG paths white; keep the arrows in the text colour */
.hb-chev path[data-hk-mm],
.hb-arw path[data-hk-mm] {
  stroke: currentColor !important;
  fill: none !important;
}

.hb-mega-link[aria-expanded='true'] .hb-chev[data-hk-mm],
.hb-chev.is-open[data-hk-mm] {
  transform: rotate(180deg);
}

/* Panel spans the nearest positioned ancestor (set position: relative on the section) */
.hb-mega-panel[data-hk-mm] {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1050;
  background: var(--hbm-panel-bg);
  border-top: 3px solid var(--hbm-accent);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}

.hb-mega-panel-in[data-hk-mm] {
  display: grid;
  grid-template-columns: 240px 1fr 260px;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 24px;
}

.hb-mega-panel.is-simple .hb-mega-panel-in[data-hk-mm] {
  grid-template-columns: 1fr 260px;
}

.hb-mega-branch[data-hk-mm] {
  margin: 0;
  padding: 0;
  list-style: none;
  border-right: 1px solid #e5e7eb;
}

.hb-mega-branch button[data-hk-mm] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--hbm-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.hb-mega-branch button[aria-selected='true'][data-hk-mm] {
  background: color-mix(in srgb, var(--hbm-accent) 10%, transparent);
  color: var(--hbm-accent);
  font-weight: 600;
}

.hb-mega-pane h3[data-hk-mm] {
  margin: 0 0 8px;
  font-size: 20px;
  color: var(--hbm-accent);
}

.hb-mega-pane p[data-hk-mm] {
  margin: 0 0 14px;
  color: #4b5563;
}

.hb-mega-links[data-hk-mm] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hb-mega-links a[data-hk-mm] {
  color: var(--hbm-text);
  text-decoration: none;
}

.hb-mega-links a[data-hk-mm]:hover {
  color: var(--hbm-accent);
  text-decoration: underline;
}

.hb-mega-promo[data-hk-mm] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--hbm-accent) 8%, #ffffff);
}

.hb-mega-promo h4[data-hk-mm] {
  margin: 0 0 6px;
  font-size: 17px;
  color: var(--hbm-accent);
}

.hb-mega-promo p[data-hk-mm] {
  margin: 0;
  color: #4b5563;
}

.hb-mega-btn[data-hk-mm] {
  display: inline-block;
  align-self: flex-start;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--hbm-accent);
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
}

.hb-mega-btn[data-hk-mm]:hover {
  opacity: 0.88;
  color: #ffffff;
}

/* ---------- Tablet / mobile ---------- */
.hb-mega-burger[data-hk-mm] {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
}

.hb-mega-burger span[data-hk-mm] {
  display: block;
  height: 2px;
  background: var(--hbm-text);
  border-radius: 2px;
}

.hb-mega-drawer[data-hk-mm] {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1050;
  max-height: 75vh;
  overflow-y: auto;
  background: var(--hbm-panel-bg);
  border-top: 3px solid var(--hbm-accent);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}

.hb-mega-drawer-list[data-hk-mm] {
  margin: 0;
  padding: 8px 16px 16px;
  list-style: none;
}

.hb-mega-drawer-list > li[data-hk-mm] { border-bottom: 1px solid #eef0f3; }

.hb-mega-drawer-link[data-hk-mm] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 14px 4px;
  border: 0;
  background: none;
  color: var(--hbm-text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
}

.hb-mega-drawer-sub[data-hk-mm] { padding: 0 4px 14px; }

.hb-mega-drawer-pane h4[data-hk-mm] {
  margin: 10px 0 6px;
  font-size: 15px;
  color: var(--hbm-accent);
}

.hb-mega-drawer-pane ul[data-hk-mm] {
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
}

.hb-mega-drawer-pane a[data-hk-mm] {
  display: block;
  padding: 6px 0;
  color: var(--hbm-text);
  text-decoration: none;
}

@media (max-width: 991px) {
  .hb-mega-nav[data-hk-mm] { display: none; }
  .hb-mega-burger[data-hk-mm] { display: inline-flex; }
}

@media (min-width: 992px) {
  .hb-mega-drawer[data-hk-mm] { display: none !important; }
}

/* ===================== FrontendProfileBlock.vue (scoped: data-hk-pf) ===================== */
.profile-section[data-hk-pf] { position: relative; }

.cart-section[data-hk-pf],
.wishlist-section[data-hk-pf] {
  position: relative;
}

.custom-dropdown[data-hk-pf] { position: relative; }

.dropdown-menu[data-hk-pf] {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  min-width: 160px;
  display: none;
}

.dropdown-menu.show[data-hk-pf] { display: block; }

.dropdown-item[data-hk-pf] {
  display: block;
  width: 100%;
  padding: 8px 12px;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}

.dropdown-item[data-hk-pf]:hover { background-color: #f8f9fa; }

.ficon[data-hk-pf] {
  font-size: 20px;
  margin-right: 8px;
}

.btn[data-hk-pf] {
  display: flex;
  align-items: center;
  gap: 8px;
}

.badge[data-hk-pf] {
  font-size: 10px;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.position-relative[data-hk-pf] { position: relative; }
.position-absolute[data-hk-pf] { position: absolute; }
.top-0[data-hk-pf] { top: 0; }
.start-100[data-hk-pf] { left: 100%; }
.translate-middle[data-hk-pf] { transform: translate(-50%, -50%); }
.bg-primary[data-hk-pf] { background-color: #0d6efd; }
.rounded-pill[data-hk-pf] { border-radius: 50rem; }

.cart-loader[data-hk-pf] {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #005f85;
}

/* ===================== MegaPanelMenu.vue (unscoped, verbatim) ===================== */
/* Defaults follow the site theme; header-builder colours arrive as inline vars on .mpm-nav.
   Muted/border/soft tones are derived so they match whatever colours are chosen. */
.mpm-nav {
  position: relative;
  --mpm-accent: var(--primary-color, #1f6f5c);
  --mpm-text: #1d2433;
  --mpm-panel-bg: #fff;
  --mpm-muted: color-mix(in srgb, var(--mpm-text) 72%, var(--mpm-panel-bg));
  --mpm-border: color-mix(in srgb, var(--mpm-text) 12%, var(--mpm-panel-bg));
  --mpm-soft: color-mix(in srgb, var(--mpm-accent) 8%, var(--mpm-panel-bg));
}

.mpm-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* static so the panel positions against .mpm-nav, not the item */
.mpm-item {
  position: static;
}

.mpm-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 15px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.mpm-link:hover,
.mpm-item.has-panel:hover > .mpm-link,
.mpm-item.is-open > .mpm-link {
  color: var(--mpm-bar-accent, var(--mpm-accent));
}

/* Standard headers put this menu inside .navbar_menu, whose theme CSS forces
   `.navbar_menu button { color: #fff !important }` (meant for their dark bar);
   the white panel's own buttons keep the panel colours */
.mpm-nav .mpm-branch button {
  color: var(--mpm-text) !important;
}

.mpm-nav .mpm-branch button[aria-selected="true"] {
  color: var(--mpm-accent) !important;
}

.mpm-nav .mpm-panel .mpm-drill,
.mpm-nav .mpm-panel .mpm-back {
  color: var(--mpm-accent) !important;
}

/* Theme CSS sets `svg path { stroke: var(--primary-color) }`; icons follow their own stroke */
.mpm-nav svg path {
  stroke: inherit;
}

.mpm-chev,
.mpm-arw {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s;
}

/* ---------- Panel: full width, slides 10px down ---------- */
.mpm-panel {
  position: absolute;
  top: 100%;
  left: var(--mpm-left, 0);
  z-index: 1000;
  width: var(--mpm-width, 100%);
  background: var(--mpm-panel-bg);
  border-top: 1px solid var(--mpm-border);
  box-shadow: 0 16px 40px rgba(16, 24, 40, 0.12);
  color: var(--mpm-text);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.mpm-item.has-panel:hover > .mpm-panel,
.mpm-item.has-panel:focus-within > .mpm-panel,
.mpm-item.is-open > .mpm-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}

.mpm-item.has-panel:hover > .mpm-link .mpm-chev,
.mpm-item.has-panel:focus-within > .mpm-link .mpm-chev,
.mpm-item.is-open > .mpm-link .mpm-chev {
  transform: rotate(180deg);
}

.mpm-item.is-suppressed > .mpm-panel {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ---------- Grid: Part A (1fr) + Part B widget (290px) ---------- */
.mpm-panel-in {
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 15px;
}

.mpm-panel-in.no-widget {
  grid-template-columns: 1fr;
}

/* Part A */
.mpm-main {
  min-width: 0;
}

.mpm-intro {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--mpm-border);
}

.mpm-intro h3 {
  margin: 0;
  font-size: 1.3rem;
  color: var(--mpm-text);
}

.mpm-intro p {
  margin: 6px 0 0;
  color: var(--mpm-muted);
  line-height: 1.55;
}

.mpm-tabs {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
}

.mpm-branch {
  margin: 0;
  padding: 0 16px 0 0;
  list-style: none;
  border-right: 1px solid var(--mpm-border);
}

.mpm-branch button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--mpm-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mpm-branch button[aria-selected="true"] {
  background: var(--mpm-soft);
  color: var(--mpm-accent);
  font-weight: 600;
}

.mpm-pane h4 {
  margin: 0 0 6px;
  font-size: 1.1rem;
  color: var(--mpm-text);
}

.mpm-pane p {
  margin: 0 0 14px;
  color: var(--mpm-muted);
  line-height: 1.55;
}

.mpm-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mpm-links a {
  display: inline-block;
  padding: 4px 0;
  color: var(--mpm-accent);
  text-decoration: none;
}

.mpm-links a:hover {
  text-decoration: underline;
}

.mpm-links li {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mpm-drill,
.mpm-back {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--mpm-accent);
  font: inherit;
  cursor: pointer;
}

.mpm-drill {
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
}

.mpm-drill:hover {
  background: var(--mpm-soft);
}

.mpm-back {
  gap: 4px;
  margin-bottom: 10px;
  padding: 4px 8px 4px 2px;
  border-radius: 6px;
  font-size: 0.9em;
  font-weight: 600;
}

.mpm-back:hover {
  background: var(--mpm-soft);
}

.mpm-drill svg,
.mpm-back svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Drill-down slide */
.mpm-pane {
  overflow: hidden;
}

.mpm-slide-next-enter-active,
.mpm-slide-next-leave-active,
.mpm-slide-prev-enter-active,
.mpm-slide-prev-leave-active {
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.mpm-slide-next-enter-from,
.mpm-slide-prev-leave-to {
  transform: translateX(40px);
  opacity: 0;
}

.mpm-slide-next-leave-to,
.mpm-slide-prev-enter-from {
  transform: translateX(-40px);
  opacity: 0;
}

/* Part B */
.mpm-widget {
  min-width: 0;
  overflow: hidden;
}

.mpm-widget img {
  max-width: 100%;
  height: auto;
}

/* Tablet: panel stays floating, columns tighten */
@media (max-width: 991px) {
  .mpm-panel {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
  }

  .mpm-panel-in {
    grid-template-columns: 1fr 240px;
    gap: 20px;
    padding: 20px 15px;
  }

  .mpm-tabs {
    grid-template-columns: 180px 1fr;
    gap: 16px;
  }
}

/* ===================== MenuDrawer.vue (unscoped, verbatim) ===================== */
.mdr-root {
  position: fixed;
  inset: 0;
  /* above floating widgets such as the WhatsApp button (9999) */
  z-index: 10050;
  visibility: hidden;
  pointer-events: none;
}

.mdr-root.is-open {
  visibility: visible;
  pointer-events: auto;
}

.mdr-root.is-preview {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  min-height: 360px;
  overflow: hidden;
}

.mdr-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 40, 0.45);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.mdr-root.is-open .mdr-backdrop {
  opacity: 1;
}

.mdr-drawer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: min(320px, 85vw);
  background: #fff;
  box-shadow: 8px 0 30px rgba(16, 24, 40, 0.18);
  transform: translateX(-100%);
  transition: transform 0.25s ease;
}

.mdr-root.is-open .mdr-drawer {
  transform: translateX(0);
}

.mdr-head {
  display: flex;
  justify-content: flex-end;
  padding: 8px 10px;
  border-bottom: 1px solid #eee;
}

.mdr-close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.mdr-close:hover {
  background: #f4f6f8;
}

.mdr-nav {
  /* flex: 1; */
  align-items: flex-start;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
}

/* The nav keeps .navbar_menu for MenuItem's behaviour; drop the theme's desktop-dropdown
   chrome that comes with it (item boxes, the black arrow above each submenu) */
.mdr-nav .nav-item {
  border: 0 !important;
  margin: 0 !important;
}

.mdr-nav .dropdown-menu::before,
.mdr-nav .dropdown-menu::after {
  display: none !important;
}

.mdr-nav .navbar-nav {
  flex-direction: column;
}

.mdr-nav .nav-link,
.mdr-nav .dropdown-item {
  width: 100%;
  padding: 12px 16px;
  text-align: left;
  /* long labels wrap instead of widening the drawer */
  white-space: normal;
  overflow-wrap: anywhere;
  border-bottom: 1px solid #eee;
  color: #1d2433 !important;
}

.mdr-nav .dropdown-menu {
  position: static;
  float: none;
  border: 0;
  box-shadow: none !important;
  padding-left: 12px;
}