/*
 * Meniu produse (kogmenu): front styles. Loaded only when the new menu is active in the shop (or in the staff preview).
 * Green #00A859; fonts = the theme tokens --kog-font-body / --kog-font-head (fallbacks Roboto / Poppins), breakpoint 992 px. White text uses
 * #00853f (contrast 4.7:1).
 * Placement (0.3.0): only the module's own classes here. kogm--theme (any theme but PRS01001): the nav sits where the
 * theme puts it (hook displayNavFullWidth = its own row .kogm-bar > .container.kogm-anchor; {widget name='kogmenu'} =
 * the nav alone), the desktop panel opens under the closest .kogm-anchor (the script marks the nav's parent when the
 * theme has none). kogm--legacy (old theme PRS01001): views/css/legacy.css puts the button and the panel in the
 * theme's navigation row, as before 0.3.0.
 *
 * Size rules (desktop, every panel the same; docs/module/KOGMENU-INSTALL.md):
 *   overlay   = the theme container (1170 px from 1200 px wide screens: 1280, 1440, 1920 look the same; 940 px between
 *               992 and 1199 px); left list 270 px (240 px under 1200), the panel takes the rest (900 / 700 px);
 *   height    = the height of the left list (15 rows of 44 px + „Toate produsele”), at least 700 px (620 px under
 *               1200): the panel is never smaller or bigger than the list, it scrolls only if the content is taller;
 *   grid      = 4 columns, 16 px gaps (12 px under 1200), padding 22 x 24 px; order in every panel: the subcategory
 *               cards, the titled rows of the groups with links, „Cele mai comandate”, „Vezi toate produsele din X”;
 *   subcategory card = 84 px high, photo box 64 x 64 px on the left (brand logos too, fitted inside), name 2 lines
 *               13.5 px and the number of products 12.5 px on the right; under 1200: 76 px, photo 56 px, 3 columns;
 *   product card („Cele mai comandate”) = 208 px high, photo box 120 x 120 px, name 2 lines, price 15 px; under
 *               1200: 184 px, photo 96 px; on phones every product card has room for 2 price lines (the old price
 *               of a discount goes under the new one), so the cards of a panel keep one height;
 *   „Cele mai comandate” in EVERY category panel: 8 products (2 rows) when the subcategory cards take at most one row
 *               (0-4 subcategories), 4 (1 row) when they take more (BO settings: 0, 4 or 8).
 */
.kogm {
  --kogm-green: #00A859; --kogm-green-d: #007a41; --kogm-green-btn: #00853f; --kogm-green-bg: #eef8f2;
  --kogm-blue: #00AFEF; --kogm-text: #222; --kogm-muted: #5b6661; --kogm-line: #e3e8e6; --kogm-soft: #f6f8f7;
  --kogm-side: 270px; --kogm-thumb: 40px; --kogm-row: 44px; --kogm-min: 700px;
  --kogm-pad-y: 22px; --kogm-pad-x: 24px; --kogm-gap: 16px;
  --kogm-gphoto: 64px; --kogm-gcard: 84px; --kogm-pphoto: 120px; --kogm-pcard: 208px;
  font-family: var(--kog-font-body, Roboto, Arial, Helvetica, sans-serif);
  text-align: left;
}
.kogm *, .kogm *::before, .kogm *::after { box-sizing: border-box; }
.kogm [hidden], .kogm-mega[hidden], .kogm-backdrop[hidden] { display: none !important; }
.kogm a { text-decoration: none; }
.kogm .kogm-ic { display: block; flex: none; }
/* focus ring: the theme's focus token (#0b6aa2, 5.8:1 on white; --kogm-blue #00AFEF is 2.5:1, below WCAG 3:1) */
.kogm a:focus-visible, .kogm button:focus-visible, .kogm-burger:focus-visible { outline: 2px solid var(--kog-focus, #0b6aa2); outline-offset: -2px; }
.kogm-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* the theme sizes every svg (svg:not(:root) { width: 300px }): the module's icons carry their size inline */

/* the button (desktop) */
.kogm-btn {
  width: 234px; height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 16px; margin: 0;
  background: var(--kogm-green-btn); color: #fff; border: 0; border-radius: 8px; cursor: pointer;
  font: 500 15px/1 var(--kog-font-body, Roboto, Arial, sans-serif); letter-spacing: .01em; text-transform: none;
}
.kogm-btn:hover, .kogm.is-open .kogm-btn { background: var(--kogm-green-d); color: #fff; }
.kogm-btn .kogm-btn-chev { margin-left: auto; transition: transform .2s ease; }
.kogm.is-open .kogm-btn .kogm-btn-chev { transform: rotate(180deg); }

/* the header burger (hook displayTop, placed by the theme script like the old one) */
.kogm-trigger { display: inline-block; vertical-align: middle; }
.kogm-burger { background: none; border: 0; padding: 8px; margin: 0; color: #222; cursor: pointer; line-height: 0; border-radius: 6px; }
.kogm-burger:hover { color: #00853f; }

/* left list: real product photos in white square boxes */
.kogm-side, .kogm-grid { list-style: none; margin: 0; padding: 0; }
.kogm-row { display: flex; align-items: stretch; }
.kogm-toplink, .kogm-everything { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: var(--kogm-text); font-weight: 500; }
.kogm-thumb {
  width: var(--kogm-thumb); height: var(--kogm-thumb); flex: none; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--kogm-line); border-radius: 8px; overflow: hidden; color: var(--kogm-green-d);
}
.kogm-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.kogm-label { flex: 1; min-width: 0; }
.kogm-chev { color: #9aa5a1; flex: none; }
.kogm-top.is-current > .kogm-row .kogm-toplink { color: var(--kogm-green-d); }
.kogm-everything { color: var(--kogm-green-d); font-weight: 700; border-top: 1px solid var(--kogm-line); }
.kogm-everything:hover, .kogm-everything:focus-visible { color: var(--kogm-green-d); }
.kogm-dhead, .kogm-acc { display: none; }
/* 0.3.1 „Utile”: the shop's ps_mainmenu links, only in the phone drawer (on desktop they are in the links row) */
.kogm-useful { display: none; }

/* cards: every element of a panel is a link, the whole card is clickable */
.kogm-card {
  display: grid; grid-template-columns: var(--kogm-gphoto) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px;
  align-content: center; height: var(--kogm-gcard); padding: 9px 10px 9px 9px;
  background: #fff; border: 1px solid var(--kogm-line); border-radius: 10px; color: var(--kogm-text); text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.kogm-card:hover, .kogm-card:focus-visible { border-color: var(--kogm-green); box-shadow: 0 6px 18px rgba(0, 90, 45, .12); color: var(--kogm-green-d); }
.kogm-photo {
  grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center; width: var(--kogm-gphoto); height: var(--kogm-gphoto);
  color: var(--kogm-green); background: #fff;
}
.kogm-photo img { display: block; width: var(--kogm-gphoto); height: var(--kogm-gphoto); object-fit: contain; background: #fff; }
.kogm-cname {
  display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  align-self: end; max-height: 36px; font: 500 13.5px/18px var(--kog-font-body, Roboto, Arial, sans-serif); overflow-wrap: anywhere;
}
.kogm-card > .kogm-cname:last-child { grid-row: 1 / span 2; align-self: center; }
.kogm-cmeta { display: block; align-self: start; margin-top: 2px; font-size: 12.5px; line-height: 16px; color: var(--kogm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* brand cards: the logo is fitted inside the same photo box as a product photo, so every card text starts at the same x */
.kogm-lcard .kogm-photo img { object-fit: contain; }
/* product cards: photo on top, name, price */
.kogm-pcard { display: flex; flex-direction: column; align-items: stretch; height: var(--kogm-pcard); padding: 10px; text-align: center; }
.kogm-pcard .kogm-photo { width: auto; height: var(--kogm-pphoto); flex: none; }
.kogm-pcard .kogm-photo img { width: var(--kogm-pphoto); height: var(--kogm-pphoto); }
.kogm-pcard .kogm-cname { margin-top: 8px; height: 36px; max-height: none; font-weight: 400; }
.kogm-price { display: block; margin-top: 4px; height: 20px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kogm-price:empty::before { content: ""; display: inline-block; width: 64px; height: 12px; border-radius: 6px; background: #edf1ef; vertical-align: middle; }
.kogm-price.is-none::before { display: none; }
.kogm-pnow { font-weight: 700; font-size: 15px; color: var(--kogm-text); }
.kogm-pold { margin-left: 6px; font-size: 12px; color: #7d8783; text-decoration: line-through; }
.kogm-stitle { margin: 0 0 10px; font: 600 15px/22px var(--kog-font-head, Poppins, Roboto, sans-serif); color: var(--kogm-text); }
.kogm-stitle a { display: inline-flex; align-items: center; gap: 4px; color: var(--kogm-text); }
.kogm-stitle a:hover, .kogm-stitle a:focus-visible { color: var(--kogm-green-d); text-decoration: underline; }
.kogm-all { display: inline-flex; align-items: center; gap: 4px; color: var(--kogm-green-d); font-weight: 700; }
.kogm-all:hover, .kogm-all:focus-visible { color: var(--kogm-green-d); text-decoration: underline; }

/* 0.3.5 promo block at the end of a category panel (the Kit panel: kit configurator). Desktop: a wide band, text left,
   button right. Phone drawer: one compact line, title + arrow button, first in the panel. */
.kogm-promo {
  display: flex; align-items: center; gap: 20px; margin-top: 24px; padding: 18px 20px 18px 22px;
  background: var(--kogm-green-bg); border: 1px solid #cfe9da; border-radius: 12px; color: var(--kogm-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.kogm-promo:hover, .kogm-promo:focus-visible { border-color: var(--kogm-green); box-shadow: 0 6px 18px rgba(0, 90, 45, .12); color: var(--kogm-text); }
.kogm-promo-body { flex: 1; min-width: 0; display: block; }
.kogm-promo-t { display: block; font: 600 17px/24px var(--kog-font-head, Poppins, Roboto, sans-serif); color: var(--kogm-text); }
.kogm-promo-p { display: block; margin-top: 4px; font-size: 14.5px; line-height: 21px; color: var(--kogm-muted); }
.kogm-promo-btn {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 8px;
  background: var(--kogm-green-btn); color: #fff; font-weight: 600; font-size: 15px; line-height: 1; white-space: nowrap;
}
.kogm-promo:hover .kogm-promo-btn, .kogm-promo:focus-visible .kogm-promo-btn { background: var(--kogm-green-d); }
.kogm .kogm-parrow { display: block; flex: none; width: 18px; height: 18px; transition: transform .18s ease-out; }
.kogm-promo:hover .kogm-parrow, .kogm-promo:focus-visible .kogm-parrow { transform: translateX(4px); }
/* one gentle pulse of the arrow when the panel opens (once per opening) */
.kogm-top.is-active .kogm-promo .kogm-parrow, .kogm-top.is-open .kogm-promo .kogm-parrow { animation: kogm-nudge 1s ease-in-out .5s 1; }
@keyframes kogm-nudge { 0%, 100% { transform: translateX(0); } 40% { transform: translateX(6px); } 70% { transform: translateX(2px); } }

/* desktop: dropdown with the list on the left and the panel on the right */
@media (min-width: 992px) {
  /* the theme's row that holds the nav: the panel opens under it, as wide as it */
  .kogm-anchor { position: relative; }
  .kogm--theme { display: inline-block; vertical-align: middle; }
  .kogm-bar .kogm-anchor { display: flex; align-items: center; min-height: 62px; }
  .kogm-trigger--theme { display: none; }
  .kogm-mega {
    position: absolute; z-index: 998; top: 100%; left: 0; right: 0; min-height: var(--kogm-min);
    background: #fff; border: 1px solid var(--kogm-line); border-radius: 0 0 12px 12px;
    box-shadow: 0 18px 40px rgba(16, 24, 40, .16);
  }
  .kogm-mega.kogm--fixed { position: fixed; z-index: 1000; border-radius: 12px; }
  .kogm-side { width: var(--kogm-side); padding: 6px 0; }
  .kogm-mega::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--kogm-side); border-left: 1px solid var(--kogm-line); }
  .kogm-toplink, .kogm-everything { padding: 2px 12px 2px 11px; min-height: var(--kogm-row); border-left: 3px solid transparent; font-size: 14.5px; line-height: 1.25; }
  .kogm-everything { width: var(--kogm-side); padding-top: 4px; padding-bottom: 4px; min-height: calc(var(--kogm-row) + 2px); }
  .kogm-top.is-active > .kogm-row .kogm-toplink { background: var(--kogm-green-bg); border-left-color: var(--kogm-green); color: var(--kogm-green-d); }
  .kogm-top.is-active > .kogm-row .kogm-thumb { border-color: #cfe9da; }
  .kogm-top.is-active > .kogm-row .kogm-chev { color: var(--kogm-green); }
  .kogm-toplink:hover, .kogm-toplink:focus-visible { color: var(--kogm-green-d); }
  .kogm-panel {
    display: none; position: absolute; top: 0; bottom: 0; left: var(--kogm-side); right: 0;
    padding: var(--kogm-pad-y) var(--kogm-pad-x); overflow-y: auto;
  }
  .kogm-top.is-active > .kogm-panel { display: block; animation: kogm-fade .14s ease-out; }
  /* motion (theme 2026-10-05): the panel drops in (opacity + 6 px), fades out on close (.is-leaving, front.js keeps it
     shown 150 ms); the right-hand panel fades when the row changes. Transform / opacity only, hover intent unchanged. */
  .kogm-mega { animation: kogm-drop .18s cubic-bezier(.16, 1, .3, 1); }
  .kogm-mega.is-leaving { opacity: 0; transform: translateY(-4px); transition: opacity .14s ease-in, transform .14s ease-in; pointer-events: none; animation: none; }
  .kogm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--kogm-gap); }
  .kogm-panel > .kogm-sec, .kogm-panel > .kogm-grid + .kogm-sec { margin-top: 20px; }
  .kogm-panel > .kogm-sec:first-child { margin-top: 0; }
  .kogm-all { margin-top: 20px; font-size: 14px; line-height: 20px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .kogm { --kogm-side: 240px; --kogm-min: 620px; --kogm-pad-y: 18px; --kogm-pad-x: 18px; --kogm-gap: 12px; --kogm-gphoto: 56px; --kogm-gcard: 76px; --kogm-pphoto: 96px; --kogm-pcard: 184px; }
  .kogm-card { column-gap: 10px; }
  .kogm-cname { font-size: 13px; }
  /* the subcategory cards would be too narrow for their names in 4 columns: 3 here (products stay in 4) */
  .kogm-panel > .kogm-grid, .kogm-sec:not(.kogm-reco) > .kogm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kogm-toplink, .kogm-everything { font-size: 14px; gap: 10px; }
}

/* phone and tablet: drawer from the left, the same markup as an accordion with small photos */
@media (max-width: 991.98px) {
  .kogm { --kogm-thumb: 36px; }
  .kogm-btn { display: none; }
  .kogm-mega {
    position: fixed; z-index: 10001; top: 0; left: 0; bottom: 0; width: 88vw; max-width: 360px;
    background: #fff; overflow-y: auto; overscroll-behavior: contain; box-shadow: 4px 0 24px rgba(0, 0, 0, .18);
    animation: kogm-in .22s ease-out; -webkit-overflow-scrolling: touch;
  }
  .kogm-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10000; background: rgba(0, 0, 0, .45); }
  .kogm-dhead { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 2; height: 56px; padding: 0 4px 0 18px; background: var(--kogm-green-btn); color: #fff; }
  .kogm-dtitle { font: 500 18px var(--kog-font-body, Roboto, Arial, sans-serif); }
  .kogm-dclose { background: none; border: 0; color: #fff; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
  .kogm-row { border-bottom: 1px solid var(--kogm-line); }
  .kogm-toplink, .kogm-everything { padding: 8px 10px 8px 12px; min-height: 56px; font-size: 15px; line-height: 1.25; }
  .kogm-chev { display: none; }
  .kogm-acc { display: block; position: relative; flex: none; width: 54px; min-height: 56px; border: 0; border-left: 1px solid var(--kogm-line); background: none; cursor: pointer; color: var(--kogm-text); padding: 0; }
  .kogm-acc::before, .kogm-acc::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: currentColor; border-radius: 1px; transition: transform .2s; }
  .kogm-acc::after { transform: rotate(90deg); }
  .kogm-acc[aria-expanded="true"]::after { transform: rotate(0deg); }
  .kogm-panel { display: none; padding: 10px 12px 14px; background: var(--kogm-soft); border-bottom: 1px solid var(--kogm-line); }
  .kogm-top.is-open > .kogm-panel { display: block; }
  .kogm-top.is-open > .kogm-row .kogm-toplink { color: var(--kogm-green-d); }
  .kogm-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .kogm-panel > .kogm-sec, .kogm-panel > .kogm-grid + .kogm-sec { margin-top: 14px; }
  .kogm-panel > .kogm-sec:first-child { margin-top: 0; }
  /* subcategory cards become rows: small photo, name, count */
  .kogm { --kogm-gphoto: 44px; }
  .kogm-card { height: auto; min-height: 62px; padding: 8px 10px; }
  .kogm-cname { font-size: 14.5px; line-height: 19px; max-height: 38px; }
  .kogm-cmeta { font-size: 12.5px; }
  .kogm-stitle { margin-bottom: 8px; font-size: 14.5px; }
  .kogm-stitle a, .kogm-stitle span { display: flex; min-height: 44px; align-items: center; }
  /* recommended products: 2 columns of small product cards */
  .kogm-reco .kogm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kogm-pcard { height: auto; padding: 10px 8px; }
  .kogm-pcard .kogm-photo { height: 88px; }
  .kogm-pcard .kogm-photo img { width: 88px; height: 88px; }
  .kogm-pcard .kogm-cname { margin-top: 6px; height: 38px; font-size: 13px; line-height: 19px; }
  /* room for 2 price lines (new price 20 px + old price 16 px) on every card: discounted or not, one card height */
  .kogm-pcard .kogm-price { height: auto; min-height: 36px; white-space: normal; line-height: 20px; }
  .kogm-pcard .kogm-pnow { display: block; line-height: 20px; }
  .kogm-pcard .kogm-pold { display: block; margin: 0; line-height: 16px; }
  /* „Cele mai comandate” in the drawer (owner 2026-10-05: it filled the whole phone screen): at most 4 small cards in
     one row that swipes sideways, bleeding to the drawer edges (2.3 cards in view say there is more); the section title
     link above and „Vezi toate produsele din X” below stay. Desktop unchanged (8 or 4 cards, BO setting). */
  .kogm-reco .kogm-grid {
    display: flex; gap: 8px; margin: 0 -12px; padding: 0 12px 6px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding: 0 12px; -webkit-overflow-scrolling: touch;
  }
  .kogm-reco .kogm-cell { flex: 0 0 132px; min-width: 0; scroll-snap-align: start; }
  .kogm-reco .kogm-cell:nth-child(n+5) { display: none; }
  .kogm-reco .kogm-pcard { height: 100%; padding: 8px; }
  .kogm-reco .kogm-pcard .kogm-photo { height: 72px; }
  .kogm-reco .kogm-pcard .kogm-photo img { width: 72px; height: 72px; }
  .kogm-reco .kogm-pcard .kogm-cname { margin-top: 6px; height: 34px; font-size: 12.5px; line-height: 17px; }
  .kogm-reco .kogm-pcard .kogm-pnow { font-size: 14px; }
  .kogm-all { display: flex; margin-top: 12px; min-height: 44px; font-size: 14.5px; }
  /* promo: one compact line, first in the open panel: the title and the arrow button (the long text and the button label stay for screen readers) */
  .kogm-top.is-open > .kogm-panel { display: flex; flex-direction: column; }
  .kogm-promo { order: -1; margin: 0 0 12px; padding: 6px 6px 6px 14px; min-height: 52px; gap: 10px; border-radius: 10px; }
  .kogm-promo-t { font-size: 14.5px; line-height: 20px; font-weight: 600; }
  .kogm-promo-p, .kogm-promo-lbl { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .kogm-promo-btn { position: relative; width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
  .kogm-useful { display: block; padding-bottom: 12px; }
  .kogm-useful-t { margin: 0; padding: 18px 12px 6px; font: 600 13px/18px var(--kog-font-body, Roboto, Arial, sans-serif); color: var(--kogm-muted); border-bottom: 1px solid var(--kogm-line); }
  .kogm-useful-list { list-style: none; margin: 0; padding: 0; }
  .kogm-ulink {
    display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px 8px 12px; border-bottom: 1px solid var(--kogm-line);
    color: var(--kogm-text); font-weight: 500; font-size: 15px; line-height: 1.25;
  }
  .kogm-ulink:hover, .kogm-ulink:focus-visible { color: var(--kogm-green-d); }
  .kogm-ulink .kogm-arrow { flex: none; color: #9aa5a1; }
  html.kogm-lock, html.kogm-lock body { overflow: hidden; }
}
@keyframes kogm-in { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes kogm-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes kogm-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .kogm-mega, .kogm-top.is-active > .kogm-panel { animation: none; }
  .kogm-mega.is-leaving { transition: none; }
  .kogm-top.is-active .kogm-promo .kogm-parrow, .kogm-top.is-open .kogm-promo .kogm-parrow { animation: none; }
  .kogm-promo, .kogm .kogm-parrow { transition: none; }
  .kogm-promo:hover .kogm-parrow, .kogm-promo:focus-visible .kogm-parrow { transform: none; }
  .kogm-card, .kogm-btn .kogm-btn-chev, .kogm-acc::before, .kogm-acc::after { transition: none; }
}

/* owner 2026-10-10: no empty white area under a short right-hand panel. Desktop: the mega menu is two separate surfaces,
   the category column (with "Toate produsele") and the panel, which is only as tall as its content (scrolls when taller
   than the column). The Black Friday skin gets the same split with its dark surfaces. */
@media (min-width: 992px) {
  .kogm-mega { background: transparent; border: 0; box-shadow: none; }
  /* owner 2026-10-12: the transparent area of the mega menu (under a short panel, beside the column) must not catch
     clicks: the page under it (e.g. a "Compară" button) stays clickable; only the visible surfaces take the pointer */
  .kogm-mega { pointer-events: none; }
  .kogm-side, .kogm-everything, .kogm-top.is-active > .kogm-panel { pointer-events: auto; }
  /* the fading menu (.is-leaving, 150 ms) takes no pointer at all, as before: a click there reaches the page */
  .kogm-mega.is-leaving .kogm-side, .kogm-mega.is-leaving .kogm-everything,
  .kogm-mega.is-leaving .kogm-top.is-active > .kogm-panel { pointer-events: none; }
  .kogm-mega::before { display: none; }
  .kogm-side,
  .kogm-everything { background: #fff; border: 1px solid var(--kogm-line); border-top: 0; box-shadow: 0 18px 40px rgba(16, 24, 40, .14); }
  .kogm-side { border-bottom: 0; }
  .kogm-everything { border-radius: 0 0 0 12px; }
  .kogm-mega.kogm--fixed .kogm-side { border-top: 1px solid var(--kogm-line); border-radius: 12px 0 0 0; }
  .kogm-panel { bottom: auto; max-height: 100%; background: #fff; border: 1px solid var(--kogm-line); border-top: 0; border-radius: 0 0 12px 0; box-shadow: 0 18px 40px rgba(16, 24, 40, .14); }
  .kogm-mega.kogm--fixed .kogm-panel { border-top: 1px solid var(--kogm-line); border-radius: 0 12px 12px 0; }
  body.kog-bf .kogm-mega { background: transparent; border: 0; box-shadow: none; }
  body.kog-bf .kogm-side,
  body.kog-bf .kogm-everything { background: var(--bf-ink-1, #141416); border-color: var(--bf-line-strong, #2e2e33); box-shadow: 0 18px 40px rgba(0, 0, 0, .7); }
  /* owner 2026-10-10: switching rows must show the next panel instantly (the fade let the page show through) */
  .kogm-top.is-active > .kogm-panel { animation: none; }
  body.kog-bf .kogm-panel { background: var(--bf-ink-2, #1b1b1e); border-color: var(--bf-line-strong, #2e2e33); box-shadow: 0 18px 40px rgba(0, 0, 0, .7); }
}