/* =============================================================
   Pixelvega Mega Menu
   Every visual value is a CSS variable set by the Elementor
   controls on the widget wrapper, so this file stays static
   and cacheable. Nothing here needs editing to restyle.
   ============================================================= */

.pxv-mm{
  /* ---- colour ---- */
  --pxv-panel-bg:#ffffff;
  --pxv-col1-bg:var(--pxv-panel-bg);   /* each column can differ */
  --pxv-col2-bg:var(--pxv-panel-bg);
  --pxv-col3-bg:var(--pxv-panel-bg);
  --pxv-link:#4a4a4a;
  --pxv-link-hover:#16263f;
  --pxv-link-bg-hover:transparent;
  --pxv-l3-link:var(--pxv-link);        /* level 3 falls back to level 2 */
  --pxv-l3-link-hover:var(--pxv-link-hover);
  --pxv-l3-bg-hover:var(--pxv-link-bg-hover);
  --pxv-label:#9a9a9a;
  --pxv-label-hover:#16263f;
  --pxv-active:#16263f;
  --pxv-accent:#c8862a;
  --pxv-rule:#e8e8e8;
  --pxv-rule-w:1px;        /* the line under a column header */
  --pxv-col-rule-w:0px;    /* the line BETWEEN two columns, nowhere else */
  --pxv-edge-w:0px;        /* the panel's own outer edge */
  --pxv-edge:var(--pxv-rule);
  --pxv-overlay:rgba(15,26,36,.45);
  --pxv-overlay-blur:0px;

  /* ---- layout ---- */
  --pxv-l1:288px;
  --pxv-l2:330px;
  --pxv-l3:270px;
  --pxv-top:0px;
  --pxv-adminbar:0px;   /* set below when the WP admin bar is on screen */
  --pxv-sbw:0px;        /* scrollbar width, measured by the script on open */
  --pxv-head-h:63px;

  /* ---- row spacing ----
     These three are the base for all three levels. Each level can override
     any of them from its own section, and anything a level does not set
     falls back to the value here. Nothing sets the per-level variables by
     default, which is why a change here moves every level at once. */
  --pxv-row-gap:22px;
  --pxv-row-pad-y:0px;         /* desktop: height comes from the gap */
  --pxv-row-pad-x:22px;
  --pxv-row-pad-y-touch:10px;  /* accordion: rows need a tap target */

  /* ---- accordion, tablet and mobile ---- */
  --pxv-panel-max:520px;
  --pxv-indent:22px;           /* how far a submenu block is pushed in */
  --pxv-acc-bd-w:1px;          /* the line that marks a submenu block */
  --pxv-acc-bd:var(--pxv-rule);
  --pxv-acc-bd-radius:0px;
  --pxv-acc-sub-pad-x:18px;    /* text to that line */
  --pxv-acc-sub-pad-y:2px;

  /* ---- type ---- */
  --pxv-l1-size:13.5px;
  --pxv-l1-weight:500;
  --pxv-l1-ls:.07em;
  --pxv-l1-tt:uppercase;
  --pxv-l2-size:14px;
  --pxv-l2-weight:400;
  --pxv-l2-ls:0;
  --pxv-l2-tt:none;
  --pxv-head-size:16px;

  /* ---- marker + arrow ---- */
  --pxv-mark-w:2px;
  --pxv-mark-offset:0px;
  --pxv-mark-h:14px;
  --pxv-mark-color:#c8862a;
  --pxv-arrow-size:12px;
  --pxv-arrow-color:#9a9a9a;
  --pxv-arrow-color-hover:#16263f;

  /* ---- close button ---- */
  --pxv-close-bg:transparent;
  --pxv-close-bg-hover:transparent;
  --pxv-close-color:#5b5b5b;
  --pxv-close-color-hover:#16263f;
  --pxv-close-bd:#e6e2db;
  --pxv-close-bd-hover:#c8862a;
  --pxv-close-bd-w:1px;
  --pxv-close-radius:999px;
  --pxv-close-pad-y:5px;
  --pxv-close-pad-x:12px;
  --pxv-close-gap:7px;
  --pxv-close-size:12.5px;
  --pxv-close-icon:11px;
  --pxv-close-icon-color:currentColor;
  --pxv-close-icon-color-hover:currentColor;
  --pxv-close-icon-stroke:1.8;

  /* ---- motion ---- */
  --pxv-dur:230ms;
  --pxv-ease:cubic-bezier(.22,.61,.36,1);
  --pxv-sub-dur:230ms;
  --pxv-sub-ease:cubic-bezier(.22,.61,.36,1);
  --pxv-slide:24px;
  --pxv-stagger:0ms;
}

/* =============================================================
   1. TRIGGER  (stays in the header, outside the fixed layer)
   ============================================================= */
/* CONFIG BLOCK, trigger. The trigger button is a sibling of the panel, not a
   child of it, so these cannot live in the .pxv-mm block above. The Elementor
   controls write --pxv-trig-* onto the widget wrapper, which is an ancestor of
   both, and each value below is read from there with a default. */
.pxv-mm__trigger{
  --_trig-gap:var(--pxv-trig-gap,9px);
  --_trig-icon:var(--pxv-trig-icon,14px);
  --_trig-icon-color:var(--pxv-trig-icon-color,currentColor);
  --_trig-icon-color-hover:var(--pxv-trig-icon-color-hover,currentColor);
  --_trig-icon-stroke:var(--pxv-trig-icon-stroke,1.8);
  --_trig-dot:var(--pxv-trig-dot,4px);
  --_trig-dot-gap:var(--pxv-trig-dot-gap,2.5px);

  display:inline-flex;align-items:center;gap:var(--_trig-gap);
  background:none;border:0;cursor:pointer;padding:7px 2px;
  font:inherit;color:inherit;line-height:1;
}
/* icon before the label instead of after it */
.pxv-mm__trigger[data-icon-pos="before"]{flex-direction:row-reverse}
.pxv-mm__trigger:focus-visible{outline:2px solid var(--pxv-accent);outline-offset:3px}

/* the four dots */
.pxv-mm__trigger-dots{
  display:grid;grid-template-columns:repeat(2,var(--_trig-dot));
  gap:var(--_trig-dot-gap);flex:0 0 auto;
  color:var(--_trig-icon-color);
}
.pxv-mm__trigger-dots i{
  width:var(--_trig-dot);height:var(--_trig-dot);
  background:currentColor;display:block;
}
.pxv-mm__trigger:hover .pxv-mm__trigger-dots{color:var(--_trig-icon-color-hover)}

/* every other icon shape, including a custom Elementor icon */
.pxv-mm__trigger-icon{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:var(--_trig-icon);height:var(--_trig-icon);
  font-size:var(--_trig-icon);
  color:var(--_trig-icon-color);
}
.pxv-mm__trigger:hover .pxv-mm__trigger-icon{color:var(--_trig-icon-color-hover)}
.pxv-mm__trigger-icon svg{
  width:100%;height:100%;display:block;fill:none;
  stroke:currentColor;stroke-width:var(--_trig-icon-stroke);stroke-linecap:round;
}
/* an Elementor icon library glyph is a font, and a Font Awesome SVG is filled,
   so neither should be given a stroke */
.pxv-mm__trigger-icon i{font-size:inherit;line-height:1}
.pxv-mm__trigger-icon svg[class]{fill:currentColor;stroke:none}

/* =============================================================
   2. OVERLAY SHELL
   ============================================================= */
.pxv-mm{
  position:fixed;inset:0;z-index:99990;
  pointer-events:none;visibility:hidden;
}
/* The WordPress admin bar is fixed over the top of the viewport for logged-in
   users. Without this the panel head, and its close button, sit underneath it. */
body.admin-bar .pxv-mm{--pxv-adminbar:32px}
@media screen and (max-width:782px){body.admin-bar .pxv-mm{--pxv-adminbar:46px}}
.pxv-mm.is-open{pointer-events:auto;visibility:visible}

/* The row padding default depends on the mode, not on the level. Desktop rows
   take their height from the gap; accordion rows need a real tap target. Any
   per-level control the user sets wins over both, at every breakpoint. */
.pxv-mm{--_pad-y-base:var(--pxv-row-pad-y)}
.pxv-mm[data-mode="accordion"]{--_pad-y-base:var(--pxv-row-pad-y-touch)}

.pxv-mm__scrim{
  position:absolute;inset:0;
  background:var(--pxv-overlay);
  backdrop-filter:blur(var(--pxv-overlay-blur));
  -webkit-backdrop-filter:blur(var(--pxv-overlay-blur));
  opacity:0;transition:opacity var(--pxv-dur) var(--pxv-ease);
}
.pxv-mm.is-open .pxv-mm__scrim{opacity:1}

.pxv-mm,.pxv-mm *,.pxv-mm__trigger,.pxv-mm__trigger *{box-sizing:border-box}

.pxv-mm__panel{
  position:absolute;top:calc(var(--pxv-top) + var(--pxv-adminbar));bottom:0;
  display:flex;
  background:var(--pxv-panel-bg);
  width:var(--pxv-l1);
  overflow-x:clip;overflow-y:visible;
  box-shadow:0 0 40px rgba(0,0,0,.14);
  transition:width var(--pxv-dur) var(--pxv-ease),
             transform var(--pxv-dur) var(--pxv-ease),
             opacity var(--pxv-dur) var(--pxv-ease);
}
.pxv-mm[data-side="right"] .pxv-mm__panel{
  right:0;flex-direction:row-reverse;
  border-left:var(--pxv-edge-w) solid var(--pxv-edge);
}
.pxv-mm[data-side="left"] .pxv-mm__panel{
  left:0;flex-direction:row;
  border-right:var(--pxv-edge-w) solid var(--pxv-edge);
}

/* ---- panel entrance, by data-anim ---- */
.pxv-mm[data-anim="slide"][data-side="right"] .pxv-mm__panel,
.pxv-mm[data-anim="slidefade"][data-side="right"] .pxv-mm__panel{transform:translateX(103%)}
.pxv-mm[data-anim="slide"][data-side="left"] .pxv-mm__panel,
.pxv-mm[data-anim="slidefade"][data-side="left"] .pxv-mm__panel{transform:translateX(-103%)}
.pxv-mm[data-anim="fade"] .pxv-mm__panel,
.pxv-mm[data-anim="slidefade"] .pxv-mm__panel{opacity:0}
.pxv-mm[data-anim="none"] .pxv-mm__panel{transition:width var(--pxv-dur) var(--pxv-ease)}
/* the closed-state rules above carry two attribute selectors, so the open
   state has to match that weight or the panel never slides in */
.pxv-mm.is-open[data-anim][data-side] .pxv-mm__panel{transform:none;opacity:1}

/* =============================================================
   3. PRIMARY COLUMN
   ============================================================= */
.pxv-mm__col{
  position:relative;                        /* containing block for depth 2 */
  width:var(--pxv-l1);flex:0 0 var(--pxv-l1);
  display:flex;flex-direction:column;min-height:0;
  z-index:2;background:var(--pxv-col1-bg);
}
.pxv-mm__sub[data-depth="2"]{background:var(--pxv-col2-bg)}
.pxv-mm__sub[data-depth="3"]{background:var(--pxv-col3-bg)}
/* The primary column paints no vertical border of its own. It used to carry
   border-left on a right-hand panel, which is the panel's outer edge, not a
   divider between columns, so the divider control drew a line in two places at
   once. Where a submenu met the column the two borders also stacked into 2px.
   Each line now has exactly one owner: the divider belongs to the submenu, the
   outer edge belongs to the panel. */

.pxv-mm__head,.pxv-mm__subhead{
  display:flex;align-items:center;gap:10px;flex:0 0 auto;
  min-height:var(--pxv-head-h);padding:0 var(--pxv-row-pad-x);
  border-bottom:var(--pxv-rule-w) solid var(--pxv-rule);
}
.pxv-mm__title,.pxv-mm__subhead{
  margin:0;font-size:var(--pxv-head-size);
  letter-spacing:.06em;color:var(--pxv-active);font-weight:500;
}
.pxv-mm__close{
  margin-left:auto;display:inline-flex;align-items:center;
  gap:var(--pxv-close-gap);
  background:var(--pxv-close-bg);
  border:var(--pxv-close-bd-w) solid var(--pxv-close-bd);
  border-radius:var(--pxv-close-radius);
  padding:var(--pxv-close-pad-y) var(--pxv-close-pad-x);
  cursor:pointer;font:inherit;font-size:var(--pxv-close-size);
  letter-spacing:.05em;color:var(--pxv-close-color);
  transition:background-color var(--pxv-dur) var(--pxv-ease),
             color var(--pxv-dur) var(--pxv-ease),
             border-color var(--pxv-dur) var(--pxv-ease);
}
.pxv-mm__close:hover{
  background-color:var(--pxv-close-bg-hover);
  border-color:var(--pxv-close-bd-hover);
  color:var(--pxv-close-color-hover);
}
.pxv-mm__close-icon{
  flex:0 0 auto;display:inline-flex;width:var(--pxv-close-icon);height:var(--pxv-close-icon);
  /* the icon colour defaults to currentColor, so it follows the label unless
     it is given a colour of its own in the panel. */
  color:var(--pxv-close-icon-color);
}
.pxv-mm__close:hover .pxv-mm__close-icon{color:var(--pxv-close-icon-color-hover)}
.pxv-mm__close-icon svg{width:100%;height:100%;display:block;fill:none;
  stroke:currentColor;stroke-width:var(--pxv-close-icon-stroke);stroke-linecap:round}
.pxv-mm[data-close-label="off"] .pxv-mm__close-label{display:none}
.pxv-mm__close:focus-visible{outline:2px solid var(--pxv-accent);outline-offset:2px}

.pxv-mm__search{padding:14px var(--pxv-row-pad-x) 4px;flex:0 0 auto}
.pxv-mm__search input{
  width:100%;padding:10px 14px;font:inherit;font-size:13.5px;
  border:var(--pxv-rule-w) solid var(--pxv-rule);border-radius:999px;
  background:var(--pxv-panel-bg);color:var(--pxv-active);
}
.pxv-mm__search input:focus-visible{outline:2px solid var(--pxv-accent);outline-offset:1px}
.pxv-mm[data-search="off"] .pxv-mm__search{display:none}

.pxv-mm__foot{margin-top:auto;flex:0 0 auto;padding:16px var(--pxv-row-pad-x) 22px;display:grid;gap:9px}
.pxv-mm__btn{
  display:block;text-align:center;text-decoration:none;padding:13px 16px;
  font:inherit;font-size:15px;letter-spacing:.05em;
}
.pxv-mm__btn:focus-visible{outline:2px solid var(--pxv-accent);outline-offset:2px}
.pxv-mm__btn:hover{filter:brightness(1.09)}
/* fallbacks, overridden by the widget's colour controls */
.pxv-mm__btn--primary{background:#16263f;color:#fff}
.pxv-mm__btn--secondary{background:#a98b5d;color:#17222e}

/* =============================================================
   4. LISTS AND ROWS
   ============================================================= */
.pxv-mm__list,.pxv-mm__sublist{
  list-style:none;margin:0;padding:8px 0;
  overflow-y:auto;flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;gap:var(--pxv-row-gap);
}
/* per-level gap, each falling back to the shared base */
.pxv-mm__col>.pxv-mm__list{gap:var(--pxv-l1-gap,var(--pxv-row-gap))}
.pxv-mm__sub[data-depth="2"]>.pxv-mm__sublist{gap:var(--pxv-l2-gap,var(--pxv-row-gap))}
.pxv-mm__sub[data-depth="3"]>.pxv-mm__sublist{gap:var(--pxv-l3-gap,var(--pxv-row-gap))}
.pxv-mm__list>li,.pxv-mm__sublist>li{flex:0 0 auto}
.pxv-mm__list::-webkit-scrollbar,.pxv-mm__sublist::-webkit-scrollbar{width:6px}
.pxv-mm__list::-webkit-scrollbar-thumb,
.pxv-mm__sublist::-webkit-scrollbar-thumb{background:var(--pxv-rule);border-radius:3px}

.pxv-mm__row{
  display:flex;align-items:center;gap:8px;width:100%;position:relative;
  padding:var(--pxv-row-pad-y) var(--pxv-row-pad-x);
  background:none;border:0;cursor:pointer;text-align:left;text-decoration:none;
  font:inherit;line-height:1.35;
  color:var(--pxv-link);
  font-size:var(--pxv-l2-size);
  font-weight:var(--pxv-l2-weight);
  letter-spacing:var(--pxv-l2-ls);
  text-transform:var(--pxv-l2-tt);
  transition:color var(--pxv-dur) var(--pxv-ease),
             background-color var(--pxv-dur) var(--pxv-ease);
}
/* per-level padding. The child chains are deliberate: a depth-3 sub sits
   inside a depth-2 sub in the DOM, so a descendant selector would style both. */
.pxv-mm__col>.pxv-mm__list>li>.pxv-mm__row{
  padding:var(--pxv-l1-pad-y,var(--_pad-y-base)) var(--pxv-l1-pad-x,var(--pxv-row-pad-x));
}
.pxv-mm__sub[data-depth="2"]>.pxv-mm__sublist>li>.pxv-mm__row{
  padding:var(--pxv-l2-pad-y,var(--_pad-y-base)) var(--pxv-l2-pad-x,var(--pxv-row-pad-x));
}
.pxv-mm__sub[data-depth="3"]>.pxv-mm__sublist>li>.pxv-mm__row{
  padding:var(--pxv-l3-pad-y,var(--_pad-y-base)) var(--pxv-l3-pad-x,var(--pxv-row-pad-x));
}
.pxv-mm__row:hover{color:var(--pxv-link-hover);background-color:var(--pxv-link-bg-hover)}
.pxv-mm__row:focus-visible{outline:2px solid var(--pxv-accent);outline-offset:-2px;color:var(--pxv-link-hover)}
.pxv-mm__row[aria-expanded="true"]{color:var(--pxv-active);font-weight:600}

/* depth 1 rows read as section labels */
.pxv-mm__list>li>.pxv-mm__row{
  color:var(--pxv-label);
  font-size:var(--pxv-l1-size);
  font-weight:var(--pxv-l1-weight);
  letter-spacing:var(--pxv-l1-ls);
  text-transform:var(--pxv-l1-tt);
}
.pxv-mm__list>li>.pxv-mm__row:hover,
.pxv-mm__list>li>.pxv-mm__row[aria-expanded="true"]{color:var(--pxv-label-hover)}

/* level 3 can be coloured separately, and falls back to level 2 */
.pxv-mm__sub[data-depth="3"] .pxv-mm__row{color:var(--pxv-l3-link)}
.pxv-mm__sub[data-depth="3"] .pxv-mm__row:hover{
  color:var(--pxv-l3-link-hover);background-color:var(--pxv-l3-bg-hover);
}

/* ---- has-children marker ---- */
.pxv-mm__mark{
  position:absolute;top:50%;transform:translateY(-50%);
  width:var(--pxv-mark-w);height:var(--pxv-mark-h);
  background:var(--pxv-mark-color);
  opacity:0;transition:opacity var(--pxv-dur) var(--pxv-ease);
}
.pxv-mm[data-mark="off"] .pxv-mm__mark{display:none}
.pxv-mm[data-mark-side="left"]  .pxv-mm__mark{left:var(--pxv-mark-offset)}
.pxv-mm[data-mark-side="right"] .pxv-mm__mark{right:var(--pxv-mark-offset)}
.pxv-mm__row:hover .pxv-mm__mark,
.pxv-mm__row:focus-visible .pxv-mm__mark,
.pxv-mm__row[aria-expanded="true"] .pxv-mm__mark{opacity:1}
/* "always" keeps the marker on every parent, which is the only version that
   reads on a touch screen, where there is no hover state at all. */
.pxv-mm[data-mark-when="always"] .pxv-mm__mark{opacity:1}
/* the page you are on, using the class WordPress puts on the item itself */
.pxv-mm[data-mark-current="on"] li.current-menu-item>.pxv-mm__row .pxv-mm__mark,
.pxv-mm[data-mark-current="on"] li.current-menu-ancestor>.pxv-mm__row .pxv-mm__mark,
.pxv-mm[data-mark-current="on"] li.current-menu-parent>.pxv-mm__row .pxv-mm__mark{opacity:1}

/* ---- arrow ---- */
.pxv-mm__arrow{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:var(--pxv-arrow-size);height:var(--pxv-arrow-size);
  color:var(--pxv-arrow-color);
  transition:transform var(--pxv-dur) var(--pxv-ease),color var(--pxv-dur) var(--pxv-ease);
}
.pxv-mm__arrow svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pxv-mm[data-arrow="off"] .pxv-mm__arrow{display:none}
.pxv-mm[data-arrow-side="right"] .pxv-mm__arrow{margin-left:auto;order:9}
.pxv-mm[data-arrow-side="left"]  .pxv-mm__arrow{order:-1}
.pxv-mm__row:hover .pxv-mm__arrow{color:var(--pxv-arrow-color-hover)}
.pxv-mm[data-arrow-rotate="on"] .pxv-mm__row[aria-expanded="true"] .pxv-mm__arrow{transform:rotate(90deg)}
.pxv-mm[data-arrow-rotate="on"][data-side="left"] .pxv-mm__row[aria-expanded="true"] .pxv-mm__arrow{transform:rotate(-90deg)}
.pxv-mm__label{flex:1 1 auto;min-width:0}

/* =============================================================
   5. CASCADE MODE (desktop)
   Each submenu is positioned against its OWN parent column with
   right:100% / left:100%, so it works at any depth and is never
   clipped by a scrolling ancestor.
   ============================================================= */
.pxv-mm[data-mode="cascade"] .pxv-mm__sub{
  position:absolute;top:0;bottom:0;
  display:none;flex-direction:column;min-height:0;overflow:visible;
}
.pxv-mm[data-mode="cascade"] li.is-open>.pxv-mm__sub{display:flex}
.pxv-mm[data-mode="cascade"][data-side="right"] .pxv-mm__sub{right:100%;border-right:var(--pxv-col-rule-w) solid var(--pxv-rule)}
.pxv-mm[data-mode="cascade"][data-side="left"]  .pxv-mm__sub{left:100%; border-left:var(--pxv-col-rule-w) solid var(--pxv-rule)}
.pxv-mm[data-mode="cascade"] .pxv-mm__sub[data-depth="2"]{width:var(--pxv-l2)}
.pxv-mm[data-mode="cascade"] .pxv-mm__sub[data-depth="3"]{width:var(--pxv-l3)}

/* ---- submenu entrance ----
   A submenu is a DOM descendant of the column it belongs to, so a transform
   on the submenu box paints it ON TOP of that parent column. That is what made
   the drawer sweep across the parent instead of coming out from under it.

   So each submenu now clips its own inner edge, the one that touches its
   parent. The keyframes move the box and shrink that clip by the same amount
   in the same frame, which pins the clip edge to the parent's edge: the column
   is uncovered as it travels and never paints over the parent. The outer edge
   is left wide open, because the next depth sits outside this box and must not
   be clipped away.

   Direction lives in the variables below, so each keyframe is written once and
   works on a left or a right hand panel. */
.pxv-mm[data-mode="cascade"][data-side="right"] .pxv-mm__sub{
  --pxv-shift:100%;
  --pxv-nudge:var(--pxv-slide);
  --pxv-clip-open:inset(-100vh 0% -100vh -100vw);
  --pxv-clip-hidden:inset(-100vh 100% -100vh -100vw);
  --pxv-clip-nudge:inset(-100vh var(--pxv-slide) -100vh -100vw);
}
.pxv-mm[data-mode="cascade"][data-side="left"] .pxv-mm__sub{
  --pxv-shift:-100%;
  --pxv-nudge:calc(var(--pxv-slide) * -1);
  --pxv-clip-open:inset(-100vh -100vw -100vh 0%);
  --pxv-clip-hidden:inset(-100vh -100vw -100vh 100%);
  --pxv-clip-nudge:inset(-100vh -100vw -100vh var(--pxv-slide));
}
.pxv-mm[data-mode="cascade"] .pxv-mm__sub{clip-path:var(--pxv-clip-open)}

/* "drawer" is the default: the column starts hidden behind its parent and
   comes out by exactly its own width while the panel widens at the same rate,
   so both edges travel together. Keep the submenu duration and easing equal to
   the panel's, or the two drift apart. */
.pxv-mm[data-mode="cascade"][data-anim-sub="drawer"] li.is-open>.pxv-mm__sub{
  animation:pxvDrawer var(--pxv-sub-dur) var(--pxv-sub-ease) both;
}
/* "reveal": the column sits still at its final position and the panel's own
   width transition uncovers it. One moving part, the calmest of the set. */
.pxv-mm[data-mode="cascade"][data-anim-sub="reveal"] li.is-open>.pxv-mm__sub{animation:none}
.pxv-mm[data-mode="cascade"][data-anim-sub="slide"]     li.is-open>.pxv-mm__sub{animation:pxvSlide var(--pxv-sub-dur) var(--pxv-sub-ease) both}
.pxv-mm[data-mode="cascade"][data-anim-sub="fade"]      li.is-open>.pxv-mm__sub{animation:pxvFade  var(--pxv-sub-dur) var(--pxv-sub-ease) both}
.pxv-mm[data-mode="cascade"][data-anim-sub="slidefade"] li.is-open>.pxv-mm__sub{animation:pxvSlideFade var(--pxv-sub-dur) var(--pxv-sub-ease) both}

@keyframes pxvDrawer{
  from{transform:translateX(var(--pxv-shift));clip-path:var(--pxv-clip-hidden)}
  to  {transform:none;clip-path:var(--pxv-clip-open)}
}
@keyframes pxvSlide{
  from{transform:translateX(var(--pxv-nudge));clip-path:var(--pxv-clip-nudge)}
  to  {transform:none;clip-path:var(--pxv-clip-open)}
}
@keyframes pxvSlideFade{
  from{opacity:0;transform:translateX(var(--pxv-nudge));clip-path:var(--pxv-clip-nudge)}
  to  {opacity:1;transform:none;clip-path:var(--pxv-clip-open)}
}
@keyframes pxvFade{from{opacity:0}to{opacity:1}}

/* optional per-item stagger */
.pxv-mm[data-stagger="on"] li.is-open>.pxv-mm__sub>.pxv-mm__sublist>li{
  animation:pxvRise var(--pxv-sub-dur) var(--pxv-sub-ease) both;
  animation-delay:calc(var(--i,0) * var(--pxv-stagger));
}
@keyframes pxvRise{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* =============================================================
   6. ACCORDION MODE (tablet / mobile)
   ============================================================= */
.pxv-mm[data-mode="accordion"] .pxv-mm__panel{
  width:100%;max-width:min(var(--pxv-panel-max),88%);flex-direction:column;
}
.pxv-mm[data-mode="accordion"] .pxv-mm__col{width:100%;flex:1 1 auto;border:0}
.pxv-mm[data-mode="accordion"] .pxv-mm__subhead{display:none}
.pxv-mm[data-mode="accordion"] .pxv-mm__sub{position:static;display:none}
.pxv-mm[data-mode="accordion"] li.is-open>.pxv-mm__sub{display:block;animation:pxvDown var(--pxv-sub-dur) var(--pxv-sub-ease) both}
.pxv-mm[data-mode="accordion"][data-anim-sub="none"] li.is-open>.pxv-mm__sub{animation:none}
.pxv-mm[data-mode="accordion"] .pxv-mm__sublist{
  overflow:visible;
  padding-block:var(--pxv-acc-sub-pad-y);
  margin-inline-start:var(--pxv-indent);
  border-radius:var(--pxv-acc-bd-radius);
}
/* Which edges of a submenu block are drawn. Default is the single line on the
   inner edge; "box" draws all four, "none" draws nothing. */
.pxv-mm[data-mode="accordion"][data-acc-border="line"] .pxv-mm__sublist{
  border-inline-start:var(--pxv-acc-bd-w) solid var(--pxv-acc-bd);
}
.pxv-mm[data-mode="accordion"][data-acc-border="box"] .pxv-mm__sublist{
  border:var(--pxv-acc-bd-w) solid var(--pxv-acc-bd);
}
.pxv-mm[data-mode="accordion"][data-acc-border="none"] .pxv-mm__sublist{border:0}
/* the gap between that line and the text of the rows inside it */
.pxv-mm[data-mode="accordion"] .pxv-mm__sublist>li>.pxv-mm__row{
  padding-inline-start:var(--pxv-acc-sub-pad-x);
}
.pxv-mm[data-mode="accordion"][data-arrow-rotate="on"] .pxv-mm__row[aria-expanded="true"] .pxv-mm__arrow{transform:rotate(90deg)}
@keyframes pxvDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* =============================================================
   7. MOTION PREFERENCE
   ============================================================= */
@media (prefers-reduced-motion:reduce){
  .pxv-mm__panel,.pxv-mm__scrim,.pxv-mm__mark,.pxv-mm__arrow,.pxv-mm__row{transition-duration:1ms}
  .pxv-mm li.is-open>.pxv-mm__sub,
  .pxv-mm[data-stagger="on"] li.is-open>.pxv-mm__sub>.pxv-mm__sublist>li{animation-duration:1ms;animation-delay:0ms}
}

/* Page scroll lock. Hiding the scrollbar makes the viewport wider, which
   shifts the whole page sideways. The script measures the scrollbar and the
   width is given back as padding, so nothing moves. */
html.pxv-mm-locked,html.pxv-mm-locked body{overflow:hidden}
html.pxv-mm-locked body{padding-right:var(--pxv-sbw)}