/* Category Explorer v3.3: viewport-centered 90vw combined navigation geometry. */
:root { --djmm-total-width: 90vw; --djmm-side-width: 280px; }
.djmm-v3 { position: relative; left: 0; width: min(var(--djmm-side-width), 100%); max-width: 100%; font-family: inherit; color: #263444; }
.djmm-v3 *, .djmm-v3 *::before, .djmm-v3 *::after { box-sizing: border-box; }
.djmm-v3__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #f1f4f7; border: 1px solid #e1e6eb; border-bottom: 0; padding: 12px 13px; }
.djmm-v3__toolbar-title { font-size: 14px; }
.djmm-v3 button { font: inherit; cursor: pointer; }
.djmm-v3__hide, .djmm-v3__show, .djmm-v3__close { background: transparent; border: 1px solid #ccd5dd; color: #263444; border-radius: 4px; padding: 4px 8px; }
.djmm-v3__hide:hover, .djmm-v3__show:hover, .djmm-v3__close:hover { background: #e6edf3; }
.djmm-v3__categories { margin: 0 !important; padding: 5px 0 !important; list-style: none !important; background: #fff; border: 1px solid #e1e6eb; }
.djmm-v3__category { margin: 0 !important; padding: 0 8px !important; display: flex; align-items: center; min-height: 38px; }
.djmm-v3__category:hover, .djmm-v3__category.is-active { background: #eaf1f7; }
.djmm-v3__category-link { flex: 1; display: block; min-width: 0; padding: 8px 6px; color: #263444 !important; text-decoration: none !important; font-size: 13px; line-height: 1.35; }
.djmm-v3__category-link:hover { color: #125787 !important; }
.djmm-v3__expand { flex: 0 0 28px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 3px; background: transparent; font-size: 23px !important; line-height: 1; color: #496277; }
.djmm-v3__expand:hover, .djmm-v3__expand:focus-visible { background: #dce8f2; }
.djmm-v3__show { display: none; background: #fff; padding: 10px 14px; }
.djmm-v3.is-collapsed .djmm-v3__toolbar, .djmm-v3.is-collapsed .djmm-v3__categories { display: none; }
.djmm-v3.is-collapsed .djmm-v3__show { display: inline-block; }
.djmm-v3__overlay { position: fixed; z-index: 999999; overflow: auto; background: #fff; box-shadow: 0 8px 32px rgba(0,0,0,.22); border: 1px solid #dfe5eb; padding: 18px 26px 26px; max-height: calc(100dvh - 20px); overscroll-behavior: contain; }
.djmm-v3__overlay[hidden], .djmm-v3__panel[hidden] { display: none !important; }
.djmm-v3__overlay-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.djmm-v3__overlay-label { font-size: 12px; color: #617183; text-transform: uppercase; letter-spacing: .08em; }
.djmm-v3__panel-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 20px; }
.djmm-v3__panel-heading h2 { margin: 0; padding: 0; font-size: 22px; line-height: 1.3; }
.djmm-v3__view-all { font-size: 13px; }
.djmm-v3__grid { display: grid; grid-template-columns: var(--djmm-grid, repeat(3, minmax(0,1fr))); gap: 22px; align-items: start; }
.djmm-v3__column { min-width: 0; }
.djmm-v3__column h3 { font-size: 15px; margin: 0 0 12px; padding: 0; }
.djmm-v3__column ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.djmm-v3__column li { margin: 0 0 8px !important; padding: 0 !important; }
.djmm-v3__column a { font-size: 13px; text-decoration: none; }
.djmm-v3__image img { display: block; width: 100%; height: auto; border-radius: 4px; }
.djmm-v3 :focus-visible { outline: 2px solid #166b9b; outline-offset: 2px; }
@media (max-width: 980px) {
 .djmm-v3__overlay { padding: 16px; }
 .djmm-v3__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .djmm-v3__image { grid-column: 1 / -1; max-width: 420px; }
}
@media (max-width: 767px) {
 .djmm-v3__overlay { left: 8px !important; right: 8px !important; width: auto !important; max-height: calc(100dvh - 16px); }
 .djmm-v3__grid { grid-template-columns: minmax(0,1fr); }
 .djmm-v3__image { grid-column: auto; }
}

/* Overlay is moved to document.body to avoid Divi clipping/transform contexts. */
body > .djmm-v3__overlay { box-sizing: border-box; }

/* Positioning is coordinated by category-explorer.js. Do not apply flex sizing to the outer nav. */
.djmm-v3 { flex: none; flex-shrink: 0; }

/* v3.4 mobile hierarchical navigation; desktop styling remains unchanged. */
.djmm-v3__mobile { display: none; }
@media (max-width: 768px) {
  .djmm-v3 { position: relative !important; left: auto !important; width: 100% !important; max-width: 100% !important; }
  .djmm-v3__toolbar, .djmm-v3__categories, .djmm-v3__show { display: none !important; }
  .djmm-v3__mobile { display: block !important; width: 100%; }
  .djmm-v3__mobile-toggle { display: flex; gap: 10px; align-items: center; width: 100%; padding: 13px 16px; background: #f1f4f7; border: 1px solid #dfe5eb; border-radius: 4px; text-align: left; font-weight: 600; }
  .djmm-v3__mobile-menu { background: #fff; border: 1px solid #dfe5eb; box-shadow: 0 5px 18px rgba(0,0,0,.1); margin-top: 4px; }
  .djmm-v3__mobile-menu[hidden], .djmm-v3__mobile-back[hidden] { display: none !important; }
  .djmm-v3__mobile-header { display: flex; align-items: center; gap: 10px; padding: 12px; background: #f1f4f7; border-bottom: 1px solid #dfe5eb; }
  .djmm-v3__mobile-title { flex: 1; font-size: 14px; }
  .djmm-v3__mobile-back, .djmm-v3__mobile-close { padding: 6px 10px; border: 1px solid #ccd5dd; background: white; border-radius: 4px; }
  .djmm-v3__mobile-content { max-height: min(65dvh, 550px); overflow-y: auto; overscroll-behavior: contain; }
  .djmm-v3__mobile-row { display: flex; align-items: stretch; border-bottom: 1px solid #e7edf1; min-height: 46px; }
  .djmm-v3__mobile-row > button, .djmm-v3__mobile-row > a { display: block; flex: 1; min-width: 0; padding: 13px 14px; background: white; border: 0; text-align: left; color: #263444 !important; text-decoration: none !important; font-size: 14px; line-height: 1.4; }
  .djmm-v3__mobile-row > button::after { content: '›'; float: right; margin-left: 8px; font-size: 20px; line-height: 1; }
  .djmm-v3__mobile-row > button:hover, .djmm-v3__mobile-row > a:hover { background: #eaf1f7; }
  .djmm-v3__mobile-row > .djmm-v3__mobile-visit { flex: 0 0 auto; border-left: 1px solid #e7edf1; color: #125787 !important; font-size: 12px; padding-inline: 10px; }
  .djmm-v3__mobile-content :focus-visible, .djmm-v3__mobile button:focus-visible { outline: 2px solid #166b9b; outline-offset: -2px; }
  body > .djmm-v3__overlay { display: none !important; }
}

/* v3.5: stable image slot when preview dimensions differ. */
.djmm-v3__image img { aspect-ratio: 3 / 2; object-fit: contain; background: #f4f6f8; }

/* v3.7: red hover/focus and persistent active-category identity. */
:root { --djmm-accent-red: #c62828; }
.djmm-v3__category:hover .djmm-v3__category-link,
.djmm-v3__category:focus-within .djmm-v3__category-link,
.djmm-v3__category.is-active .djmm-v3__category-link {
  color: var(--djmm-accent-red) !important;
}
.djmm-v3__category:hover .djmm-v3__expand,
.djmm-v3__category.is-active .djmm-v3__expand {
  color: var(--djmm-accent-red);
}
/* Overlay panels are moved under document.body by desktop JavaScript. */
body > .djmm-v3__overlay .djmm-v3__panel:not([hidden]) .djmm-v3__panel-heading h2 {
  color: var(--djmm-accent-red) !important;
}