/** MAAT Electronics — retail design-first correction v1.3.3.
 * Matches preview: white compact cards, natural-case labels, independent 400px vertical menu.
 * Selectors are scoped; no changes to WooCommerce products or site-wide WoodMart styles.
 */
.maat-cat-grid {
  --maat-green:#558063;
  --maat-green-dark:#486D54;
  --maat-ink:#252e27;
  --maat-line:#e1e9e2;
  --maat-hover:#f4f8f5;
  position:relative!important;
  isolation:isolate;
  max-width:100%!important;
  margin:0 auto 27px!important;
  font-family:inherit!important;
}
.maat-cat-grid .maat-cat-grid__heading {margin:0 0 16px!important;}
.maat-cat-grid .maat-cat-grid__heading h2 {font-family:inherit!important;color:#252e27!important;font-size:21px!important;line-height:1.3!important;font-weight:650!important;text-transform:none!important;letter-spacing:0!important;}
.maat-cat-grid .maat-cat-grid__items {
  display:grid!important;
  grid-template-columns:repeat(var(--maat-cat-cols,7),minmax(0,1fr))!important;
  gap:10px 12px!important;
  align-items:stretch!important;
  overflow:visible!important;
}
.maat-cat-grid .maat-cat-grid__items .maat-cat-grid__card {
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  width:100%!important;
  height:auto!important;
  min-height:69px!important;
  min-width:0!important;
  margin:0!important;
  padding:10px 12px!important;
  background-color:#fff!important;
  background-image:none!important;
  color:#242c26!important;
  border:1px solid var(--maat-line)!important;
  border-radius:10px!important;
  box-shadow:none!important;
  text-align:left!important;
  text-transform:none!important;
  text-decoration:none!important;
  letter-spacing:0!important;
  font-family:inherit!important;
  font-size:13px!important;
  font-weight:600!important;
  line-height:1.28!important;
  white-space:normal!important;
  cursor:pointer!important;
  -webkit-appearance:none!important;
  appearance:none!important;
  transition:background-color .16s ease, border-color .16s ease, box-shadow .16s ease!important;
}
.maat-cat-grid .maat-cat-grid__items .maat-cat-grid__card:hover,
.maat-cat-grid .maat-cat-grid__items .maat-cat-grid__card:focus-visible,
.maat-cat-grid .maat-cat-grid__items .maat-cat-grid__card[aria-expanded="true"] {
  background-color:var(--maat-hover)!important;
  border-color:#a9c3ae!important;
  color:#2f573a!important;
  box-shadow:0 3px 9px rgba(40,70,46,.055)!important;
}
.maat-cat-grid .maat-cat-grid__art {display:flex!important;align-items:center!important;justify-content:center!important;flex:0 0 32px!important;width:32px!important;height:40px!important;margin:0!important;background:transparent!important;}
.maat-cat-grid .maat-cat-grid__art svg.maat-cat-icon {width:31px!important;height:31px!important;max-width:31px!important;max-height:31px!important;display:block!important;opacity:1!important;}
.maat-cat-grid .maat-cat-grid__items .maat-cat-grid__text {
  display:block!important;flex:1 1 auto!important;min-width:0!important;
  margin:0!important;padding:0!important;
  font-family:inherit!important;font-size:12.9px!important;line-height:1.34!important;
  font-weight:650!important;color:inherit!important;
  letter-spacing:0!important;text-transform:none!important;
  white-space:normal!important;word-break:normal!important;
  overflow-wrap:normal!important;hyphens:none!important;
}
/* The introductory design has no card chevrons; the full affordance is a bordered card. */
.maat-cat-grid .maat-cat-grid__caret {display:none!important;}
.maat-cat-grid__panel {
  --maat-green:#558063;
  --maat-green-dark:#486D54;
  --maat-border:#e3eae4;
  --maat-tint:#f3f7f3;
  --maat-ink:#252e27;
  position:fixed!important;
  z-index:100100!important;
  width:min(410px,calc(100vw - 28px))!important;
  max-width:calc(100vw - 28px)!important;
  max-height:calc(100dvh - 24px)!important;
  padding:0!important;
  margin:0!important;
  background:#fff!important;
  border:1px solid #dae5dc!important;
  border-radius:9px!important;
  box-shadow:0 14px 34px rgba(22,43,27,.13)!important;
  overflow:hidden!important;
  color:#252e27!important;
}
.maat-cat-grid__panel[hidden] {display:none!important;}
.maat-cat-grid__panel .maat-cat-grid__panel-heading {
  display:flex!important;align-items:center!important;gap:8px!important;
  justify-content:space-between!important;flex-wrap:nowrap!important;
  min-height:55px!important;padding:10px 11px!important;
  border-bottom:1px solid #e5ece6!important;background:#fff!important;
}
.maat-cat-grid__panel .maat-cat-grid__panel-title {
  display:flex!important;align-items:center!important;gap:8px!important;
  font-size:13.5px!important;color:#263129!important;min-width:0!important;
  text-transform:none!important;
}
.maat-cat-grid__panel .maat-cat-grid__panel-title strong{font-weight:700!important;line-height:1.3!important;}
.maat-cat-grid__panel .maat-cat-grid__panel-title svg.maat-cat-icon{width:25px!important;height:25px!important;flex:0 0 25px!important;}
.maat-cat-grid__panel .maat-cat-grid__view-all {
  display:inline-flex!important;align-items:center!important;margin:0 0 0 auto!important;
  font-size:11px!important;font-weight:650!important;color:#486D54!important;
  text-align:right!important;line-height:1.25!important;text-transform:none!important;
  white-space:nowrap!important;text-decoration:none!important;
}
.maat-cat-grid__panel .maat-cat-grid__close {
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  flex:0 0 23px!important;width:23px!important;height:23px!important;min-height:0!important;
  padding:0!important;margin:0!important;
  font-size:17px!important;font-weight:400!important;border:0!important;border-radius:5px!important;
  background:#f4f6f4!important;color:#556459!important;box-shadow:none!important;
  cursor:pointer!important;
}
.maat-cat-grid__panel .maat-cat-grid__close:hover{background:#e6eee7!important;}
.maat-cat-grid__panel .maat-cat-grid__submenu{width:100%!important;max-width:none!important;margin:0!important;border:0!important;box-shadow:none!important;overflow:hidden!important;}
.maat-cat-grid__panel .maat-mm-v__scroll {width:100%!important;max-height:var(--maat-flyout-scroll-height,min(57dvh,465px))!important;overflow-y:auto!important;overflow-x:hidden!important;padding:4px 9px 8px!important;}
.maat-cat-grid__panel .maat-cat-grid__pending{margin:0!important;padding:18px 15px!important;font-size:12px!important;line-height:1.5!important;color:#657068!important;}
/* Shared WoodMart dropdown: single vertical column, compact row spacing. */
.maat-mm-v{font-family:inherit!important;width:100%!important;max-width:420px!important;background:#fff!important;border:1px solid #e1e9e2!important;border-radius:8px!important;box-shadow:0 9px 24px rgba(28,49,32,.09)!important;overflow:hidden!important;}
.maat-mm-v .maat-mm-v__header{padding:11px 12px!important;background:#fff!important;min-height:53px!important;}
.maat-mm-v .maat-mm-v__headline{font-weight:700!important;font-size:13.5px!important;text-transform:none!important;}
.maat-mm-v .maat-mm-v__headline svg.maat-cat-icon{width:26px!important;height:26px!important;}
.maat-mm-v .maat-mm-v__scroll{max-height:min(67dvh,500px)!important;overflow-y:auto!important;overflow-x:hidden!important;}
.maat-mm-v .maat-mm-v__group summary,.maat-mm-v .maat-mm-v__leaf{font-family:inherit!important;font-size:12.6px!important;line-height:1.35!important;min-height:35px!important;text-transform:none!important;letter-spacing:0!important;}
.maat-mm-v .maat-mm-v__group summary:hover,.maat-mm-v .maat-mm-v__group[open]>summary{background:#f3f7f3!important;}
.maat-mm-v .maat-mm-v__leaf:hover{background:#f3f7f3!important;color:#486d54!important;}
/* Responsive breakpoints are in the plugin grid, independent from generic WoodMart button CSS. */
@media(max-width:1349px){.maat-cat-grid .maat-cat-grid__items{grid-template-columns:repeat(min(6,var(--maat-cat-cols,7)),minmax(0,1fr))!important;}}
@media(max-width:1129px){.maat-cat-grid .maat-cat-grid__items{grid-template-columns:repeat(min(5,var(--maat-cat-cols,7)),minmax(0,1fr))!important;}}
@media(max-width:959px){.maat-cat-grid .maat-cat-grid__items{grid-template-columns:repeat(min(4,var(--maat-cat-cols,7)),minmax(0,1fr))!important;}}
@media(max-width:749px){.maat-cat-grid .maat-cat-grid__items{grid-template-columns:repeat(3,minmax(0,1fr))!important;}}
@media(max-width:540px){
 .maat-cat-grid .maat-cat-grid__items{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
 .maat-cat-grid .maat-cat-grid__items .maat-cat-grid__card{min-height:65px!important;padding:7px 8px!important;gap:8px!important;}
 .maat-cat-grid .maat-cat-grid__art{width:27px!important;flex-basis:27px!important;}
 .maat-cat-grid .maat-cat-grid__art svg.maat-cat-icon{width:26px!important;height:26px!important;}
 .maat-cat-grid .maat-cat-grid__items .maat-cat-grid__text{font-size:11.5px!important;line-height:1.28!important;}
 .maat-cat-grid__panel .maat-cat-grid__view-all{font-size:10px!important;white-space:normal!important;}
}
@media(prefers-reduced-motion:reduce){.maat-cat-grid__card{transition:none!important;}}

/* v1.3.4: fix the popover viewport overflow and restore real native scrolling.
   This deliberately overrides both the earlier v1.3.0 rules and WoodMart UI CSS.
   Leave the 21-card grid unchanged as in the supplied 1.3.0 preview. */
.maat-cat-grid__panel:not([hidden]) {
  display:flex!important;
  flex-direction:column!important;
  height:var(--maat-popup-height,320px)!important;
  min-height:0!important;
  max-height:calc(100dvh - 24px)!important;
  box-sizing:border-box!important;
  overscroll-behavior:contain!important;
}
.maat-cat-grid__panel,
.maat-cat-grid__panel * {box-sizing:border-box!important;}
.maat-cat-grid__panel .maat-cat-grid__panel-heading {
  flex:0 0 auto!important;
  min-height:56px!important;
  max-width:100%!important;
  position:relative!important;
  z-index:1!important;
}
.maat-cat-grid__panel .maat-cat-grid__submenu {
  display:flex!important;
  flex-direction:column!important;
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  height:auto!important;
  overflow:hidden!important;
  padding:0!important;
}
.maat-cat-grid__panel .maat-cat-grid__submenu .maat-mm-v__scroll {
  display:block!important;
  flex:1 1 auto!important;
  min-height:0!important;
  height:100%!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain!important;
  touch-action:pan-y!important;
  scrollbar-width:thin;
  scrollbar-color:#a9c0ae #f4f7f4;
  padding:4px 9px 11px!important;
}
.maat-cat-grid__panel .maat-cat-grid__submenu .maat-mm-v__scroll::-webkit-scrollbar,
.maat-mm-v .maat-mm-v__scroll::-webkit-scrollbar {width:8px;}
.maat-cat-grid__panel .maat-cat-grid__submenu .maat-mm-v__scroll::-webkit-scrollbar-thumb,
.maat-mm-v .maat-mm-v__scroll::-webkit-scrollbar-thumb {
  background:#b5c9b9;border-radius:12px;border:2px solid #fff;
}
.maat-cat-grid__panel .maat-cat-grid__pending {
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
}
.maat-cat-grid__panel .maat-mm-v__list,
.maat-cat-grid__panel .maat-mm-v__item {min-width:0!important;max-width:100%!important;}
.maat-cat-grid__panel .maat-mm-v__group summary,
.maat-cat-grid__panel .maat-mm-v__leaf {
  white-space:normal!important;
  overflow-wrap:break-word!important;
  word-break:normal!important;
}
.maat-cat-grid__panel--mobile:not([hidden]) {
  border-radius:12px!important;
  box-shadow:0 15px 55px rgba(20,40,26,.25)!important;
}
.maat-cat-grid__panel .maat-cat-grid__close:focus-visible,
.maat-cat-grid__panel .maat-cat-grid__view-all:focus-visible {
  outline:2px solid #558063!important;outline-offset:2px!important;
}
/* Unclipped, independently scrollable WoodMart HTML-block dropdown. */
.wd-sticky-nav .maat-mm-v .maat-mm-v__scroll {
  max-height:min(65dvh,520px)!important;
  overflow-y:auto!important;
  overscroll-behavior-y:contain!important;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}

/* JS viewport width wins over previous CSS !important declarations. */
.maat-cat-grid__panel {width:var(--maat-popup-width,min(410px,calc(100vw - 28px)))!important;max-width:calc(100vw - 20px)!important;}