/* XCellParts — Dynamic Mega-Menu
 * Models the behavior in docs/wireframes/mega-menu.html, themed with brand tokens.
 * Open state is JS-only via .is-open (hover + keyboard focus route through it; a
 * single panel open at a time). No CSS :hover/:focus-within panel triggers.
 */
.xcell-mm{position:relative;font-family:var(--xcell-mm-font,'Inter',ui-sans-serif,system-ui,sans-serif);background:#fff;z-index:50}
.xcell-mm *{box-sizing:border-box}
.xcell-mm--sticky{position:sticky;top:var(--xcell-mm-sticky-top,0)}

/* ===== Customizable color tokens =====
   Defaults here; the theme / panel-theme classes override them; and the
   shortcode or Elementor widget can override any of them inline via
   style="--xcell-mm-...:#color" on the root element. Nothing is hard-coded
   downstream — every coloured part reads one of these variables. */
.xcell-mm{
  --xcell-mm-accent:var(--xcell-red-500,#e20404);            /* master fallback for all hover/active accents */

  /* Bar */
  --xcell-mm-bar-bg:#fff;
  --xcell-mm-bar-text:var(--xcell-ink-700,#2c313c);
  --xcell-mm-bar-text-hover:var(--xcell-mm-accent);          /* link text on hover / open */
  --xcell-mm-bar-underline:var(--xcell-mm-accent);           /* underline on hover / open / selected */

  /* Panel */
  --xcell-mm-panel-bg:#fff;
  --xcell-mm-panel-text:var(--xcell-ink-700,#2c313c);
  --xcell-mm-link-hover:var(--xcell-mm-accent);              /* model link + heading hover */
  --xcell-mm-panel-heading:var(--xcell-n-500,#6b7280);
  --xcell-mm-panel-border:var(--xcell-n-200,#e5e7eb);

  /* Tabs (series pills) */
  --xcell-mm-tab-bg:var(--xcell-n-100,#f1f2f4);
  --xcell-mm-tab-text:var(--xcell-ink-800,#1f2330);
  --xcell-mm-tab-hover-bg:var(--xcell-mm-accent);
  --xcell-mm-tab-hover-text:#fff;
  --xcell-mm-tab-active-bg:var(--xcell-mm-accent);           /* selected tab */
  --xcell-mm-tab-active-text:#fff;

  /* Panel search */
  --xcell-mm-search-bg:var(--xcell-n-100,#f1f2f4);
  --xcell-mm-search-text:var(--xcell-ink-800,#1f2330);
  --xcell-mm-search-border:var(--xcell-n-300,#cbd0d8);
  --xcell-mm-search-focus:var(--xcell-mm-accent);            /* border + glow on focus */
}
.xcell-mm--dark{
  --xcell-mm-bar-bg:#0e1116;
  --xcell-mm-bar-text:#c5ccd8;
  --xcell-mm-bar-text-hover:#fff;
}
.xcell-mm--panel-dark,
.xcell-mm__panel--dark{
  --xcell-mm-panel-bg:#0e1116;
  --xcell-mm-panel-text:#c5ccd8;
  --xcell-mm-panel-heading:#8b93a3;
  --xcell-mm-panel-border:rgba(255,255,255,.12);
  --xcell-mm-tab-bg:rgba(255,255,255,.08);
  --xcell-mm-tab-text:#dfe3ea;
  --xcell-mm-search-bg:rgba(255,255,255,.08);
  --xcell-mm-search-text:#fff;
  --xcell-mm-search-border:rgba(255,255,255,.18);
}
/* Per-panel LIGHT override (used when a single category forces light over a dark menu). */
.xcell-mm__panel--light{
  --xcell-mm-panel-bg:#fff;
  --xcell-mm-panel-text:var(--xcell-ink-700,#2c313c);
  --xcell-mm-panel-heading:var(--xcell-n-500,#6b7280);
  --xcell-mm-panel-border:var(--xcell-n-200,#e5e7eb);
  --xcell-mm-tab-bg:var(--xcell-n-100,#f1f2f4);
  --xcell-mm-tab-text:var(--xcell-ink-800,#1f2330);
  --xcell-mm-search-bg:var(--xcell-n-100,#f1f2f4);
  --xcell-mm-search-text:var(--xcell-ink-800,#1f2330);
  --xcell-mm-search-border:var(--xcell-n-300,#cbd0d8);
}

/* ===== Bar ===== */
.xcell-mm__bar{position:relative;z-index:60;background:var(--xcell-mm-bar-bg);display:flex;align-items:center;gap:var(--xcell-mm-item-gap,2px);max-width:var(--xcell-mm-panel-maxw,1180px);margin:0 auto;padding:0 16px;min-height:var(--xcell-mm-bar-h,50px);flex-wrap:nowrap}
.xcell-mm__allcat{display:inline-flex;align-items:center;gap:9px;background:var(--xcell-red-500);color:#fff;font-weight:600;font-size:14px;
  border-radius:var(--xcell-r-pill);padding:9px 16px;margin-inline-end:8px;white-space:nowrap;text-decoration:none;transition:.16s var(--xcell-ease)}
.xcell-mm__allcat:hover{background:var(--xcell-red-600);color:#fff}
.xcell-mm__list{display:flex;align-items:stretch;gap:var(--xcell-mm-item-gap,2px);margin:0;padding:0;list-style:none;flex:1;flex-wrap:nowrap;overflow:visible}
/* Bar alignment (default = left). */
.xcell-mm--bar-center .xcell-mm__list{justify-content:center}
.xcell-mm--bar-right .xcell-mm__list{justify-content:flex-end}
.xcell-mm__li{display:flex;align-items:stretch}
.xcell-mm__top{display:inline-flex;align-items:center;gap:5px;color:var(--xcell-mm-bar-text);font-size:var(--xcell-mm-bar-fs,14px);font-weight:var(--xcell-mm-bar-fw,500);text-transform:var(--xcell-mm-bar-tt,none);
  padding:14px 12px;white-space:nowrap;text-decoration:none;border-bottom:3px solid transparent;cursor:pointer;transition:color .15s var(--xcell-ease),border-color .15s var(--xcell-ease)}
.xcell-mm__top:hover,.xcell-mm__li.is-open>.xcell-mm__top{color:var(--xcell-mm-bar-text-hover);border-bottom-color:var(--xcell-mm-bar-underline)}
.xcell-mm__chev{transition:transform .15s var(--xcell-ease)}
.xcell-mm__li.is-open>.xcell-mm__top .xcell-mm__chev{transform:rotate(180deg)}
.xcell-mm:not(.xcell-mm--click) .xcell-mm__top:hover .xcell-mm__chev{transform:rotate(180deg)}

/* burger (mobile only) */
.xcell-mm__burger{display:none;align-items:center;gap:9px;background:var(--xcell-red-500);color:#fff;border:0;border-radius:var(--xcell-r-pill);
  padding:9px 16px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}

/* ===== Panel ===== */
.xcell-mm__panel{position:absolute;left:0;right:0;top:100%;background:var(--xcell-mm-panel-bg);border:1px solid var(--xcell-mm-panel-border);border-top:0;
  border-radius:0 0 var(--xcell-mm-panel-radius,28px) var(--xcell-mm-panel-radius,28px);box-shadow:var(--xcell-mm-panel-shadow,0 22px 40px rgba(14,17,22,.16));padding:0;
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.996);
  transition:opacity var(--xcell-mm-anim,120ms) var(--xcell-ease,ease),transform var(--xcell-mm-anim,140ms) cubic-bezier(.16,1,.3,1),visibility var(--xcell-mm-anim,120ms) var(--xcell-ease,ease);
  z-index:55;pointer-events:none;will-change:opacity,transform}
/* Animation style variants (default = fade + tiny lift). */
.xcell-mm--anim-slide .xcell-mm__panel{transform:translateY(-16px) scale(1)}
.xcell-mm--anim-none .xcell-mm__panel{transition:none;transform:none}
/* Panel shadow presets (default = soft). */
.xcell-mm--shadow-none{--xcell-mm-panel-shadow:none}
.xcell-mm--shadow-strong{--xcell-mm-panel-shadow:0 32px 72px rgba(14,17,22,.32)}
/* Sticky auto-hide: JS toggles .is-bar-hidden on scroll direction. */
.xcell-mm--sticky.xcell-mm--autohide{transition:transform .22s var(--xcell-ease)}
.xcell-mm--sticky.xcell-mm--autohide.is-bar-hidden{transform:translateY(-110%)}
/* Panel open: JS-managed .is-open ONLY. We deliberately do NOT use :focus-within —
   focus from clicking a tab would keep one panel open while another opens on hover,
   showing two at once. JS adds is-open on hover AND keyboard focus; closeAll() then
   guarantees exactly one open panel. */
.xcell-mm__li.is-open>.xcell-mm__panel{opacity:1;visibility:visible;transform:none;pointer-events:auto}
/* Transparent bridge: extends the panel's pointer-events area 12 px upward. */
.xcell-mm__panel::before{content:'';position:absolute;top:-12px;left:0;right:0;height:12px}
.xcell-mm__panel-inner{max-width:var(--xcell-mm-panel-maxw,1180px);margin:0 auto;padding:20px 22px 26px;display:flex;flex-direction:column;
  /* Cap the whole panel to the viewport; JS refines this to the exact space below
     the bar on open + on scroll/resize. The search header stays put and only the
     content area (.xcell-mm__panel-scroll) scrolls. */
  max-height:var(--xcell-mm-panel-maxh,calc(100vh - 160px))}
.xcell-mm__panel-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
/* When the panel has a tabwrap (tabs / columns / tiles) the panel itself no longer
   scrolls: the tab row stays pinned at the top, the image + compatibility aside stays
   pinned on the right, and only the items column scrolls (JS forwards wheel events that
   land on the static regions). Falls back to whole-panel scrolling where :has is
   unsupported. */
.xcell-mm__panel-scroll:has(.xcell-mm__tabwrap){display:flex;flex-direction:column;overflow:hidden}
.xcell-mm__panel-scroll:has(.xcell-mm__tabwrap)>*{flex:1 1 auto;min-height:0}
/* Content slots + showcase rows pin at natural height; only the tabwrap flexes
   (otherwise they'd share the panel's height 1:1 with the tabs and squash). */
.xcell-mm__panel-scroll:has(.xcell-mm__tabwrap)>.xcell-mm__slot,
.xcell-mm__panel-scroll:has(.xcell-mm__tabwrap)>.xcell-mm__products{flex:0 0 auto}
.xcell-mm__lazywrap{min-height:0}
.xcell-mm__panel-scroll:has(.xcell-mm__tabwrap) .xcell-mm__lazywrap{display:flex;flex-direction:column}
.xcell-mm__panel-scroll:has(.xcell-mm__tabwrap) .xcell-mm__lazywrap>*{flex:1 1 auto;min-height:0}
/* The actual scrolling surfaces: the panel (fallback) + the inner item lists. */
.xcell-mm__panel-scroll,.xcell-mm__tabpanels,.xcell-mm__tabwrap>.xcell-mm__cols{scrollbar-width:thin;scrollbar-color:var(--xcell-mm-panel-border) transparent}
.xcell-mm__panel-scroll::-webkit-scrollbar,.xcell-mm__tabpanels::-webkit-scrollbar,.xcell-mm__tabwrap>.xcell-mm__cols::-webkit-scrollbar{width:10px}
.xcell-mm__panel-scroll::-webkit-scrollbar-track,.xcell-mm__tabpanels::-webkit-scrollbar-track,.xcell-mm__tabwrap>.xcell-mm__cols::-webkit-scrollbar-track{background:transparent}
.xcell-mm__panel-scroll::-webkit-scrollbar-thumb,.xcell-mm__tabpanels::-webkit-scrollbar-thumb,.xcell-mm__tabwrap>.xcell-mm__cols::-webkit-scrollbar-thumb{background:var(--xcell-mm-panel-border);border-radius:9999px;border:3px solid transparent;background-clip:content-box}
.xcell-mm__panel-scroll::-webkit-scrollbar-thumb:hover,.xcell-mm__tabpanels::-webkit-scrollbar-thumb:hover,.xcell-mm__tabwrap>.xcell-mm__cols::-webkit-scrollbar-thumb:hover{background:var(--xcell-mm-panel-heading)}
.xcell-mm__lazylink{display:inline-block;padding:14px 4px;font-size:14px;font-weight:600;color:var(--xcell-mm-accent);text-decoration:none}
.xcell-mm__lazylink:hover{filter:brightness(.9)}

/* "View all {category}" footer — pinned below the scroll area. */
.xcell-mm__viewall-row{flex:none;display:flex;justify-content:flex-end;border-top:1px solid var(--xcell-mm-panel-border);margin-top:14px;padding-top:12px}
.xcell-mm__viewall{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--xcell-mm-panel-text);text-decoration:none;transition:gap .14s var(--xcell-ease),color .14s var(--xcell-ease)}
.xcell-mm__viewall:hover{gap:12px;color:var(--xcell-mm-link-hover)}

/* ===== Focus visibility (brand focus ring: 2px red-700 + offset) ===== */
.xcell-mm a:focus-visible,
.xcell-mm button:focus-visible,
.xcell-mm [tabindex]:focus-visible{outline:2px solid var(--xcell-red-700);outline-offset:2px;border-radius:6px}
.xcell-mm__drawer a:focus-visible,
.xcell-mm__drawer button:focus-visible{outline-offset:-2px}

/* tabs */
.xcell-mm__tabs{display:flex;flex-direction:column;min-height:0}
.xcell-mm__tabnav{flex:none;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;border-bottom:1px solid var(--xcell-mm-panel-border);padding-bottom:12px;margin-bottom:16px}
.xcell-mm--tabs-left .xcell-mm__tabnav{justify-content:flex-start}
.xcell-mm--tabs-right .xcell-mm__tabnav{justify-content:flex-end}
.xcell-mm__tab{background:var(--xcell-mm-tab-bg);border:0;color:var(--xcell-mm-tab-text);font-size:12.5px;font-weight:500;padding:8px 16px;border-radius:var(--xcell-r-pill);cursor:pointer;transition:.15s var(--xcell-ease)}
.xcell-mm__tab:hover{background:var(--xcell-mm-tab-hover-bg);color:var(--xcell-mm-tab-hover-text)}
.xcell-mm__tab.is-active{background:var(--xcell-mm-tab-active-bg);color:var(--xcell-mm-tab-active-text)}
.xcell-mm__tabwrap{display:flex;gap:22px;min-height:0;flex:1 1 auto}
.xcell-mm__tabpanels{flex:1;min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.xcell-mm__tabpanel{display:none}
.xcell-mm__tabpanel.is-active{display:block}

/* columns */
.xcell-mm__cols{display:grid;grid-template-columns:repeat(var(--xcell-mm-cols,4),1fr);gap:18px;flex:1}
.xcell-mm__tabwrap>.xcell-mm__cols{min-height:0;overflow-y:auto;overscroll-behavior:contain;align-content:start}
.xcell-mm__col{min-width:0}
.xcell-mm__colhead{display:block;margin:0 0 10px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--xcell-mm-panel-heading);text-decoration:none}
.xcell-mm__colhead:hover{color:var(--xcell-mm-link-hover)}
.xcell-mm__link{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--xcell-mm-panel-text);padding:5px 0;text-decoration:none}
.xcell-mm__link:hover{color:var(--xcell-mm-link-hover)}
.xcell-mm__thumb{width:var(--xcell-mm-thumb-size,30px);height:var(--xcell-mm-thumb-size,30px);border-radius:var(--xcell-mm-thumb-radius,7px);flex:none;object-fit:cover;background:var(--xcell-n-50);border:1px solid var(--xcell-n-100)}
.xcell-mm__count{color:var(--xcell-n-400);font-style:normal;font-size:11.5px}

/* banner */
.xcell-mm__banner{width:230px;flex:none;border-radius:14px;overflow:hidden;align-self:flex-start}
.xcell-mm__banner img{width:100%;height:100%;object-fit:cover;display:block}

/* tiles */
.xcell-mm__tiles{display:grid;grid-template-columns:repeat(var(--xcell-mm-tile-cols,5),1fr);gap:var(--xcell-mm-tile-gap,20px)}
.xcell-mm__tile{display:flex;flex-direction:column;gap:8px;text-decoration:none;text-align:center}
.xcell-mm__tileimg{position:relative;width:100%;aspect-ratio:var(--xcell-mm-tile-aspect,1);border-radius:var(--xcell-mm-tile-radius,12px);overflow:hidden;background:var(--xcell-n-50);border:1px solid var(--xcell-n-100);display:block}
.xcell-mm__tileimg img{width:100%;height:100%;object-fit:cover}
/* tile_fit="contain": show the whole product image, lightly padded. */
.xcell-mm--tile-contain .xcell-mm__tileimg img{object-fit:contain;padding:8%;box-sizing:border-box}
.xcell-mm__tile b{font-size:12.5px;color:var(--xcell-mm-panel-text);font-weight:600;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xcell-mm__tile:hover b{color:var(--xcell-mm-link-hover)}
/* Hide tile captions/counts when show_tile_labels is off (image-only grid). */
.xcell-mm--no-tile-labels .xcell-mm__tile b,
.xcell-mm--no-tile-labels .xcell-mm__tile .xcell-mm__count{display:none}

/* Per-item bar icon (image before the label). */
.xcell-mm__topicon{width:18px;height:18px;border-radius:4px;object-fit:cover;flex:none;margin-inline-end:2px}
/* Per-item ⓘ info button + shared modal.
   NB: never set position:relative on .xcell-mm__li — the full-width dropdown
   panels are positioned against the bar, and a positioned li becomes their
   containing block (panels collapse to the item's width). */
.xcell-mm__info{width:16px;height:16px;border:1px solid var(--xcell-mm-panel-border,#E2E5EA);border-radius:50%;background:transparent;color:inherit;opacity:.65;font:italic 700 10px/1 Georgia,serif;cursor:pointer;padding:0;flex:none;align-self:center;margin-inline-start:-4px}
.xcell-mm__info:hover,.xcell-mm__info:focus-visible{opacity:1;border-color:var(--xcell-mm-accent);color:var(--xcell-mm-accent)}
.xcell-mm__infooverlay{position:fixed;inset:0;background:rgba(14,17,22,.5);z-index:1200;display:flex;align-items:center;justify-content:center;padding:20px}
.xcell-mm__infooverlay[hidden]{display:none}
.xcell-mm__infomodal{position:relative;background:#fff;color:#1F2330;border-radius:16px;box-shadow:0 24px 60px rgba(14,17,22,.25);max-width:440px;width:100%;max-height:80vh;overflow:auto;padding:22px 24px}
.xcell-mm__infotitle{margin:0 0 8px;margin-inline-end:28px;font-size:16px;font-weight:800}
.xcell-mm__infobody{font-size:13.5px;line-height:1.55}
.xcell-mm__infobody img{max-width:100%;height:auto;border-radius:10px}
.xcell-mm__infoclose{position:absolute;top:12px;inset-inline-end:12px;width:30px;height:30px;border:0;border-radius:50%;background:#EEF0F3;color:#1F2330;font-size:16px;line-height:1;cursor:pointer}
.xcell-mm__infoclose:hover{background:#FAD1D4;color:#B11A20}
/* Per-item aside promo block (admin "Right-side promo" HTML). */
.xcell-mm__asidehtml{font-size:13px;line-height:1.5;border:1px solid var(--xcell-mm-panel-border,#E2E5EA);border-radius:12px;padding:12px 14px;background:var(--xcell-n-50,#F7F8FA)}
.xcell-mm__asidehtml :first-child{margin-top:0}
.xcell-mm__asidehtml :last-child{margin-bottom:0}
.xcell-mm__asidehtml img{max-width:100%;height:auto;border-radius:8px}

/* Item badge (ribbon) — on links/colheads (inline) and tiles (overlay). */
.xcell-mm__badge{display:inline-flex;align-items:center;height:16px;padding:0 6px;margin-inline-start:6px;border-radius:9999px;font-size:10px;font-weight:700;line-height:1;letter-spacing:.3px;text-transform:uppercase;background:var(--xcell-mm-accent);color:#fff;vertical-align:middle}
.xcell-mm__link .xcell-mm__badge{margin-inline-start:0} /* flex link already has gap */
.xcell-mm__badge--tile{position:absolute;top:6px;inset-inline-start:6px;margin:0;z-index:1;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.xcell-mm__badge--plp{position:absolute;top:4px;inset-inline-end:4px;margin:0;z-index:1;box-shadow:0 1px 3px rgba(0,0,0,.25)}
/* Second ribbon: stack overlay badges instead of overlapping; inline badges just flow. */
.xcell-mm__badge--tile+.xcell-mm__badge--tile{top:26px}
.xcell-mm__badge--plp+.xcell-mm__badge--plp{top:24px}
/* Badge colour tones (default = accent). */
.xcell-mm__badge--red{background:#e11d2a;color:#fff}
.xcell-mm__badge--green{background:#15803d;color:#fff}
.xcell-mm__badge--blue{background:#1d4ed8;color:#fff}
.xcell-mm__badge--amber{background:#b45309;color:#fff}
.xcell-mm__badge--neutral{background:var(--xcell-mm-panel-border);color:var(--xcell-mm-panel-text)}

/* Master badge toggle (show_badges="0"). */
.xcell-mm--no-badges .xcell-mm__badge{display:none!important}

/* Highlighted top-bar item. */
.xcell-mm__top--highlight{color:var(--xcell-mm-accent);font-weight:700}

/* Featured links list (top of the aside). */
.xcell-mm__featured{display:flex;flex-direction:column;gap:6px}
.xcell-mm__featured-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--xcell-mm-panel-heading)}
.xcell-mm__featured-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.xcell-mm__featured-link{display:block;font-size:13px;font-weight:600;color:var(--xcell-mm-panel-text);text-decoration:none;padding:3px 0}
.xcell-mm__featured-link:hover{color:var(--xcell-mm-link-hover)}

/* Panel content slot (admin-assigned HTML Block / template / shortcode). */
.xcell-mm__slot{font-size:13px;line-height:1.55;color:var(--xcell-mm-panel-text)}
.xcell-mm__slot--above{margin:0 0 16px;padding:0 0 16px;border-bottom:1px solid var(--xcell-mm-panel-border)}
.xcell-mm__slot--below{margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--xcell-mm-panel-border)}
.xcell-mm__slot img{max-width:100%;height:auto}
.xcell-mm__slot>:first-child{margin-top:0}
.xcell-mm__slot>:last-child{margin-bottom:0}

/* Product showcase row (best sellers / newest / on sale mini cards). */
.xcell-mm__products{margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--xcell-mm-panel-border);display:flex;flex-direction:column;gap:10px}
.xcell-mm__products-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.xcell-mm__products-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--xcell-mm-panel-heading)}
.xcell-mm__products-viewall{font-size:12px;font-weight:600;color:var(--xcell-mm-accent);text-decoration:none;white-space:nowrap}
.xcell-mm__products-viewall:hover{text-decoration:underline}
.xcell-mm__products-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px}
.xcell-mm__product{display:flex;flex-direction:column;gap:6px;min-width:0;text-decoration:none;color:var(--xcell-mm-panel-text);border:1px solid var(--xcell-mm-panel-border);border-radius:12px;padding:10px;background:var(--xcell-mm-panel-bg);transition:border-color .12s var(--xcell-ease),box-shadow .12s var(--xcell-ease)}
.xcell-mm__product:hover{border-color:var(--xcell-mm-accent);box-shadow:0 4px 14px rgba(14,17,22,.08)}
.xcell-mm__product img{width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:8px;background:var(--xcell-n-50,#F7F8FA)}
.xcell-mm__product b{font-size:12px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.xcell-mm__product-price{font-size:12px;font-weight:700;color:var(--xcell-mm-accent)}
.xcell-mm__product-price del{color:var(--xcell-mm-panel-heading);font-weight:500;margin-inline-end:4px}
.xcell-mm__product-price ins{text-decoration:none}
/* Showcase design templates (per-item "Showcase design" select; default = cards above).
   Pure CSS modifiers on the wrapper, so they style server cards, lazy REST panels and
   JS-hydrated recent rows alike. Flex/logical properties only — RTL mirrors for free. */
.xcell-mm__products--strip .xcell-mm__products-row{display:flex;flex-wrap:wrap;gap:8px}
.xcell-mm__products--strip .xcell-mm__product{flex:1 1 190px;max-width:260px;flex-direction:row;align-items:center;gap:9px;padding:6px 12px 6px 7px;border-radius:999px;border-color:transparent;background:var(--xcell-n-50,#F7F8FA)}
.xcell-mm__products--strip .xcell-mm__product:hover{background:var(--xcell-mm-panel-bg);border-color:var(--xcell-mm-accent);box-shadow:none}
.xcell-mm__products--strip .xcell-mm__product img{width:32px;height:32px;flex:0 0 auto;border-radius:50%}
.xcell-mm__products--strip .xcell-mm__product b{flex:1 1 auto;min-width:0;font-size:11.5px;-webkit-line-clamp:1}
.xcell-mm__products--strip .xcell-mm__product-price{font-size:11.5px;white-space:nowrap;margin-inline-start:auto}
.xcell-mm__products--list .xcell-mm__products-row{display:flex;flex-direction:column;gap:6px}
.xcell-mm__products--list .xcell-mm__product{flex-direction:row;align-items:center;gap:12px;padding:8px 10px;border-radius:10px;border-color:transparent}
.xcell-mm__products--list .xcell-mm__product:hover{background:var(--xcell-n-50,#F7F8FA);border-color:var(--xcell-mm-panel-border);box-shadow:none}
.xcell-mm__products--list .xcell-mm__product img{width:44px;height:44px;flex:0 0 auto}
.xcell-mm__products--list .xcell-mm__product b{flex:1 1 auto;min-width:0;font-size:12.5px}
.xcell-mm__products--list .xcell-mm__product-price{white-space:nowrap}
.xcell-mm__products--hero .xcell-mm__products-row{grid-template-columns:repeat(auto-fill,minmax(116px,1fr))}
.xcell-mm__products--hero .xcell-mm__product:first-child{grid-column:1/-1;flex-direction:row;align-items:center;gap:16px;padding:12px 16px 12px 12px}
.xcell-mm__products--hero .xcell-mm__product:first-child img{width:88px;height:88px;flex:0 0 auto}
.xcell-mm__products--hero .xcell-mm__product:first-child b{flex:1 1 auto;min-width:0;font-size:14px;-webkit-line-clamp:2}
.xcell-mm__products--hero .xcell-mm__product:first-child .xcell-mm__product-price{font-size:14px;white-space:nowrap}

/* overlay */
.xcell-mm__overlay{position:fixed;inset:0;background:rgba(20,24,34,.42);opacity:0;visibility:hidden;transition:.16s var(--xcell-ease);z-index:40}
/* Click mode: keep the overlay (for outside-click-to-close) but don't dim the page. */
.xcell-mm--click .xcell-mm__overlay{background:transparent}
.xcell-mm__overlay.is-show{opacity:1;visibility:visible}

.xcell-mm--empty{padding:10px 16px;color:var(--xcell-n-500)}

/* ===== Mobile drawer ===== */
.xcell-mm__drawer{position:fixed;top:0;bottom:0;left:0;width:86%;max-width:var(--xcell-mm-drawer-w,360px);background:#fff;z-index:80;
  transform:translateX(-100%);transition:transform .22s var(--xcell-ease);display:flex;flex-direction:column;box-shadow:6px 0 24px rgba(0,0,0,.2)}
.xcell-mm__drawer.is-open{transform:none}
/* Drawer slides in from the right edge instead. */
.xcell-mm--drawer-right .xcell-mm__drawer{left:auto;right:0;transform:translateX(100%);box-shadow:-6px 0 24px rgba(0,0,0,.2)}
.xcell-mm--drawer-right .xcell-mm__drawer.is-open{transform:none}
.xcell-mm__dhead{display:flex;align-items:center;gap:10px;padding:14px;border-bottom:1px solid var(--xcell-n-200);font-weight:700;color:var(--xcell-ink-800)}
.xcell-mm__dback{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--xcell-n-300);background:#fff;border-radius:8px;padding:5px 10px;cursor:pointer;font:inherit;font-size:13px;color:var(--xcell-ink-700)}
.xcell-mm__dtitle{flex:1}
.xcell-mm__dclose{margin-inline-start:auto;border:0;background:var(--xcell-n-100);border-radius:8px;width:32px;height:32px;cursor:pointer;font-size:18px;line-height:1;color:var(--xcell-ink-700)}
.xcell-mm__dbody{overflow:auto;padding:8px;-webkit-overflow-scrolling:touch}
.xcell-mm__drow{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;border-bottom:1px solid var(--xcell-n-100);
  padding:13px 10px;font-size:14px;color:var(--xcell-ink-800);cursor:pointer;text-align:start;text-decoration:none}
.xcell-mm__drow img{width:30px;height:30px;border-radius:var(--xcell-mm-thumb-radius,7px);object-fit:cover;flex:none;background:var(--xcell-n-50)}
.xcell-mm__drow span.label{flex:1}
.xcell-mm__drow .chev{color:var(--xcell-n-400)}
/* Drawer merchandising parity: per-category Featured links + promo banner. */
.xcell-mm__dfeat{display:flex;flex-direction:column;padding:12px 6px 2px;border-top:1px solid var(--xcell-n-200);margin-top:8px}
.xcell-mm__dfeat-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--xcell-n-500);padding:0 0 4px}
.xcell-mm__dfeat-link{display:block;padding:8px 0;font-size:14px;font-weight:600;color:var(--xcell-ink-700);text-decoration:none;border-bottom:1px solid var(--xcell-n-100)}
.xcell-mm__dfeat-link:last-child{border-bottom:0}
.xcell-mm__dbanner{display:block;margin:10px 6px 6px;border-radius:12px;overflow:hidden;box-shadow:0 4px 14px rgba(14,17,22,.10)}
.xcell-mm__dbanner img{display:block;width:100%;height:auto}
/* Showcase parity (M9): drawer levels reuse the panel product-card CSS (incl.
   the design-template modifiers). The drawer chrome is always white, so the
   panel vars are pinned to light values here — a dark panel_theme must not
   produce dark-on-white cards inside the drawer. */
.xcell-mm__drawer .xcell-mm__products{--xcell-mm-panel-bg:#fff;--xcell-mm-panel-text:var(--xcell-ink-700,#2c313c);--xcell-mm-panel-heading:var(--xcell-n-500,#6b7280);--xcell-mm-panel-border:var(--xcell-n-200,#e5e7eb);margin:8px 6px 6px;padding:12px 0 0}
.xcell-mm__doverlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:75;opacity:0;visibility:hidden;transition:.2s var(--xcell-ease)}
.xcell-mm__doverlay.is-show{opacity:1;visibility:visible}

/* ===== Responsive ===== */
@media(max-width:1024px){
  .xcell-mm__banner,.xcell-mm__aside{display:none}
  .xcell-mm__cols{grid-template-columns:repeat(3,1fr)}
  .xcell-mm__tiles{grid-template-columns:repeat(4,1fr)}
}
/* Stock collapse breakpoint. Instances with a custom breakpoint carry
   .xcell-mm--custom-bp and get a per-instance media query instead. */
@media(max-width:782px){
  .xcell-mm:not(.xcell-mm--custom-bp) .xcell-mm__list,.xcell-mm:not(.xcell-mm--custom-bp) .xcell-mm__allcat{display:none}
  .xcell-mm:not(.xcell-mm--custom-bp) .xcell-mm__burger{display:inline-flex}
  .xcell-mm:not(.xcell-mm--custom-bp) .xcell-mm__bar{padding:8px 16px}
  /* Per-item device-visibility rules (custom-bp instances get these from their
     per-instance media query instead). */
  .xcell-mm:not(.xcell-mm--custom-bp) .xcell-mm__li--desktop-only,
  .xcell-mm:not(.xcell-mm--custom-bp) .xcell-mm__drow--desktop-only,
  .xcell-mm:not(.xcell-mm--custom-bp) .xcell-mm--desktop-only{display:none!important}
}
@media(min-width:783px){
  .xcell-mm:not(.xcell-mm--custom-bp) .xcell-mm__li--mobile-only,
  .xcell-mm:not(.xcell-mm--custom-bp) .xcell-mm__drow--mobile-only,
  .xcell-mm:not(.xcell-mm--custom-bp) .xcell-mm--mobile-only{display:none!important}
}

/* ===== PLP layout (Header V2) ===== */
.xcell-mm--plp{background:transparent;font-family:var(--xcell-mm-font,'Inter',ui-sans-serif,system-ui,sans-serif)}
.xcell-mm--plp .xcell-mm__bar{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:9999px;padding:5px;min-height:0;max-width:1180px;margin:0 auto}
.xcell-mm--plp .xcell-mm__list{gap:2px}
.xcell-mm--plp .xcell-mm__top{color:#c5ccd8;font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:9999px;border-bottom:0}
.xcell-mm--plp .xcell-mm__top:hover,.xcell-mm--plp .xcell-mm__li.is-open>.xcell-mm__top,.xcell-mm--plp .xcell-mm__li:focus-within>.xcell-mm__top,.xcell-mm--plp .xcell-mm__li:hover>.xcell-mm__top{color:#fff;background:rgba(255,255,255,.12)}
.xcell-mm--plp .xcell-mm__panel{border-radius:16px;border:1px solid var(--xcell-n-200);box-shadow:0 24px 60px rgba(14,17,22,.18);margin-top:8px}
.xcell-mm--plp .xcell-mm__panel-inner{padding:18px}
.xcell-mm__plp-search{display:flex;align-items:center;gap:10px;background:var(--xcell-n-50);border:1px solid var(--xcell-n-100);border-radius:9999px;padding-block:0;padding-inline:16px 8px;height:46px;margin-bottom:16px}
.xcell-mm__plp-search input{flex:1;border:0;background:transparent;outline:0;font:inherit;font-size:14px;color:var(--xcell-ink-800)}
.xcell-mm__plp-close{width:32px;height:32px;border-radius:50%;border:0;background:var(--xcell-ink-900);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none;font-size:18px;line-height:1}
.xcell-mm__plp-body{display:grid;grid-template-columns:236px 1fr;gap:18px}
.xcell-mm__rail{display:flex;flex-direction:column;gap:2px;border-inline-end:1px solid var(--xcell-n-100);padding-inline-end:12px}
.xcell-mm__rail-item{display:flex;align-items:center;justify-content:space-between;width:100%;border:0;background:transparent;padding:11px 14px;border-radius:9999px;font:inherit;font-size:13.5px;font-weight:600;color:var(--xcell-ink-700);cursor:pointer;text-align:start;transition:.13s var(--xcell-ease)}
.xcell-mm__rail-item:hover{background:var(--xcell-n-50);color:var(--xcell-ink-900)}
.xcell-mm__rail-item.is-active{background:var(--xcell-red-50);color:var(--xcell-red-600)}
.xcell-mm__rail-item svg{opacity:0;transition:.13s var(--xcell-ease)}
.xcell-mm__rail-item.is-active svg,.xcell-mm__rail-item:hover svg{opacity:1}
.xcell-mm__plp-panel{display:none}
.xcell-mm__plp-panel.is-active{display:block}
.xcell-mm__plp-thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;align-content:start}
.xcell-mm__plp-thumb{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;padding:12px 6px;border-radius:14px;text-align:center;text-decoration:none;transition:.14s var(--xcell-ease)}
.xcell-mm__plp-thumb:hover{background:var(--xcell-n-50)}
.xcell-mm__plp-thumb.is-hidden{display:none}
.xcell-mm__plp-circ{width:72px;height:72px;border-radius:50%;border:1px solid var(--xcell-n-100);background:radial-gradient(60px 50px at 60% 32%,var(--xcell-red-50),var(--xcell-n-50));display:flex;align-items:center;justify-content:center;overflow:hidden;transition:.16s var(--xcell-ease)}
.xcell-mm__plp-circ img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.xcell-mm__plp-thumb:hover .xcell-mm__plp-circ{border-color:var(--xcell-red-300);transform:translateY(-2px)}
.xcell-mm__plp-label{font-size:12px;font-weight:600;color:var(--xcell-ink-700);line-height:1.25}
.xcell-mm__plp-thumb:hover .xcell-mm__plp-label{color:var(--xcell-red-600)}
.xcell-mm__plp-empty{font-size:13px;color:var(--xcell-n-500);text-align:center;padding:12px 0}
@media(max-width:1040px){.xcell-mm__plp-body{grid-template-columns:1fr}.xcell-mm__rail{flex-direction:row;flex-wrap:wrap;border-inline-end:0;border-bottom:1px solid var(--xcell-n-100);padding:0 0 10px}.xcell-mm__plp-thumbs{grid-template-columns:repeat(4,1fr)}}
@media(max-width:782px){.xcell-mm--plp .xcell-mm__panel{display:none!important}}

/* ===== Compact layout ===== */
.xcell-mm--compact .xcell-mm__bar{min-height:42px;padding:0 12px}
.xcell-mm--compact .xcell-mm__top{font-size:13px;padding:10px 10px;border-bottom-width:2px}
.xcell-mm--compact .xcell-mm__allcat{font-size:13px;padding:7px 13px}
.xcell-mm--compact .xcell-mm__panel-inner{padding:16px 18px 20px}

/* ===== Minimal layout (flat links, no panels) ===== */
.xcell-mm--minimal .xcell-mm__list{gap:4px}
.xcell-mm--minimal .xcell-mm__top{border-bottom:none;border-radius:9999px;padding:8px 14px;font-size:13.5px;font-weight:500}
.xcell-mm--minimal .xcell-mm__top:hover{background:var(--xcell-n-100);color:var(--xcell-ink-900);border-bottom-color:transparent}
.xcell-mm--minimal .xcell-mm__overlay{display:none!important}

/* ===== Drawer-only layout (no desktop bar, burger always visible) ===== */
.xcell-mm--drawer-only .xcell-mm__bar{justify-content:flex-start;min-height:44px}

/* ===== Burger always-visible override ===== */
.xcell-mm--burger-always .xcell-mm__burger{display:inline-flex!important}

/* ===== Display mode: desktop-only ===== */
.xcell-mm--desktop .xcell-mm__burger{display:none!important}
.xcell-mm--desktop .xcell-mm__drawer,.xcell-mm--desktop .xcell-mm__doverlay{display:none!important}

/* ===== Display mode: mobile-only ===== */
.xcell-mm--mobile .xcell-mm__list,.xcell-mm--mobile .xcell-mm__allcat,.xcell-mm--mobile .xcell-mm__isearch,.xcell-mm--mobile .xcell-mm__overlay{display:none!important}
.xcell-mm--mobile .xcell-mm__burger{display:inline-flex!important}

/* ===== Dark theme ===== */
/* Dark bar background/text/hover are now driven by the --xcell-mm-* tokens
   defined in the ".xcell-mm--dark" token block above. */
.xcell-mm--dark .xcell-mm__isearch{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15)}
.xcell-mm--dark .xcell-mm__isearch input{color:#fff}
.xcell-mm--dark .xcell-mm__isearch input::placeholder{color:rgba(255,255,255,.45)}
.xcell-mm--dark .xcell-mm__isearch svg{color:rgba(255,255,255,.5)}
.xcell-mm--minimal.xcell-mm--dark .xcell-mm__top{color:#c5ccd8}
.xcell-mm--minimal.xcell-mm--dark .xcell-mm__top:hover{background:rgba(255,255,255,.1);color:#fff}

/* ===== Inline search bar ===== */
.xcell-mm__isearch{display:flex;align-items:center;gap:8px;background:var(--xcell-n-50);border:1px solid var(--xcell-n-200);border-radius:9999px;padding:0 14px;height:36px;min-width:180px;max-width:260px;flex-shrink:0;margin-inline-start:auto;transition:border-color .15s var(--xcell-ease),box-shadow .15s var(--xcell-ease)}
.xcell-mm__isearch:focus-within{border-color:var(--xcell-red-400);box-shadow:0 0 0 3px rgba(var(--xcell-red-rgb,.6,.08,.11),.12)}
.xcell-mm__isearch svg{color:var(--xcell-n-400);flex:none}
.xcell-mm__isearch input{flex:1;border:0;background:transparent;outline:0;font:inherit;font-size:13px;color:var(--xcell-ink-800);min-width:0}
.xcell-mm__isearch input::placeholder{color:var(--xcell-n-400)}

/* ===== Panel search (classic / compact dropdowns) =====
   The dropdown panel is always white (even when theme="dark" darkens only the
   bar), so the panel search ALWAYS uses light styling — never the dark overrides. */
.xcell-mm__psearch{display:flex;align-items:center;gap:10px;background:var(--xcell-mm-search-bg);border:1px solid var(--xcell-mm-search-border);border-radius:9999px;padding:0 18px;height:44px;margin-bottom:18px;transition:border-color .15s var(--xcell-ease),box-shadow .15s var(--xcell-ease)}
.xcell-mm__psearch:focus-within{border-color:var(--xcell-mm-search-focus);box-shadow:0 0 0 3px rgba(var(--xcell-red-rgb,.6,.08,.11),.12)}
.xcell-mm__psearch svg{color:var(--xcell-mm-search-text);opacity:.6;flex:none}
.xcell-mm__psearch input[type=search]{flex:1;border:0;background:transparent;outline:0;font:inherit;font-size:14px;color:var(--xcell-mm-search-text);min-width:0}
.xcell-mm__psearch input[type=hidden]{display:none}
.xcell-mm__psearch input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.xcell-mm__psearch input::placeholder{color:var(--xcell-mm-search-text);opacity:.55}
/* Live result counter inside the field. */
.xcell-mm__psearch-count{flex:none;font-size:12px;font-weight:700;letter-spacing:.2px;color:var(--xcell-mm-accent);white-space:nowrap}
.xcell-mm__psearch-count:empty{display:none}
/* Clear (×) button. */
.xcell-mm__psearch-clear{flex:none;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;cursor:pointer;font-size:17px;line-height:1;background:var(--xcell-mm-search-text);color:var(--xcell-mm-search-bg);opacity:.22;transition:opacity .12s var(--xcell-ease),transform .12s var(--xcell-ease)}
.xcell-mm__psearch-clear:hover{opacity:.55;transform:scale(1.08)}
.xcell-mm__psearch-status{margin:6px 4px 16px;font-size:13px;color:var(--xcell-mm-panel-heading);font-style:italic}
.xcell-ps-hide{display:none!important}
/* While searching a tabbed panel: drop the tab buttons and show every family at
   once so matches in any tab appear together as a flat result list. */
.xcell-mm__panel-inner.is-searching .xcell-mm__tabnav{display:none}
.xcell-mm__panel-inner.is-searching .xcell-mm__tabpanel{display:block}
/* Merchandising surfaces step aside while the shopper is filtering. */
.xcell-mm__panel-inner.is-searching .xcell-mm__slot,
.xcell-mm__panel-inner.is-searching .xcell-mm__products{display:none}
/* Sub-category icon toggle (show_icons="0") — drops the round thumbnails and
   tightens the link rows; images are data-driven, never hardcoded. */
.xcell-mm--no-icons .xcell-mm__thumb,.xcell-mm--no-icons .xcell-mm__plp-circ{display:none}
.xcell-mm--no-icons .xcell-mm__link{gap:0}
/* ===== Panel header (full-width search) ===== */
.xcell-mm__panel-head{display:flex;gap:16px;align-items:flex-start;margin-bottom:10px}
.xcell-mm__panel-head .xcell-mm__psearch{flex:1 1 auto;width:100%;margin-bottom:0;height:44px}
/* ===== Right-side aside: hover image preview + compatibility card ===== */
.xcell-mm__aside{width:var(--xcell-mm-aside-w,260px);flex:none;align-self:flex-start;display:flex;flex-direction:column;gap:12px;max-height:100%;min-height:0}
.xcell-mm__preview{position:relative;display:block;border-radius:14px;overflow:hidden;background:var(--xcell-n-50);border:1px solid var(--xcell-n-100);text-decoration:none;line-height:0}
.xcell-mm__preview-img{width:100%;display:block;aspect-ratio:1/1;object-fit:cover;background:var(--xcell-n-50);transition:opacity .15s var(--xcell-ease)}
.xcell-mm__preview-img[hidden]{display:none}
.xcell-mm__preview-label{position:absolute;left:0;right:0;bottom:0;padding:18px 12px 9px;font-size:12.5px;font-weight:600;line-height:1.25;color:#fff;background:linear-gradient(to top,rgba(8,11,18,.72),rgba(8,11,18,0))}
.xcell-mm__preview-label:empty{display:none}
/* Compatibility card — grows with its content (and may scroll) up to the space left
   in the panel; "See all" still opens the full modal. */
.xcell-mm__compat{display:flex;flex-direction:column;gap:7px;min-height:0;
  background:var(--xcell-mm-search-bg);border:1px solid var(--xcell-mm-panel-border);border-radius:16px;padding:9px 14px;box-sizing:border-box}
/* Compatibility only renders when the hovered model actually has codes. */
.xcell-mm__compat[hidden]{display:none}
.xcell-mm__compat-head{display:flex;align-items:center;gap:8px;line-height:1;min-height:16px}
.xcell-mm__compat-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--xcell-mm-panel-heading);flex:none}
.xcell-mm__compat-model{font-size:11px;font-weight:600;color:var(--xcell-mm-panel-muted,#8b919a);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xcell-mm__compat-model:empty{display:none}
.xcell-mm__compat-model{font-size:12.5px;font-weight:600;color:var(--xcell-mm-accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xcell-mm__compat-model:empty{display:none}
.xcell-mm__compat-more{flex:none;margin-inline-start:auto;border:0;background:transparent;cursor:pointer;font:inherit;font-size:11.5px;font-weight:700;color:var(--xcell-mm-accent);text-decoration:underline;padding:0;white-space:nowrap}
/* Body grows with the pills up to a cap, then scrolls; "See all" surfaces the rest. */
.xcell-mm__compat-body{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;max-height:var(--xcell-mm-compat-maxh,46vh);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--xcell-mm-panel-border) transparent}
.xcell-mm__compat-hint{font-size:12.5px;color:var(--xcell-mm-panel-heading);font-style:italic}
.xcell-mm__compat-pill{font-size:12px;font-weight:600;line-height:1;padding:5px 10px;border-radius:9999px;white-space:nowrap;height:24px;display:inline-flex;align-items:center;
  background:var(--xcell-mm-panel-bg);border:1px solid var(--xcell-mm-panel-border);color:var(--xcell-mm-panel-text)}
@media(max-width:900px){.xcell-mm__compat{max-width:100%}}

/* ===== Compatibility "See all" modal ===== */
.xcell-mm__compat-modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:24px}
.xcell-mm__compat-modal[hidden]{display:none}
.xcell-mm__compat-modal-backdrop{position:absolute;inset:0;background:rgba(14,17,22,.5)}
.xcell-mm__compat-modal-box{position:relative;z-index:1;width:680px;max-width:100%;max-height:86vh;display:flex;flex-direction:column;
  background:var(--xcell-mm-panel-bg);color:var(--xcell-mm-panel-text);border:1px solid var(--xcell-mm-panel-border);border-radius:16px;box-shadow:0 24px 60px rgba(14,17,22,.35)}
.xcell-mm__compat-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--xcell-mm-panel-border)}
.xcell-mm__compat-modal-title{font-size:14px;font-weight:700}
.xcell-mm__compat-modal-close{border:0;background:transparent;cursor:pointer;font-size:22px;line-height:1;color:var(--xcell-mm-panel-heading)}
.xcell-mm__compat-modal-close:hover{color:var(--xcell-mm-accent)}
.xcell-mm__compat-modal-tools{display:flex;align-items:center;gap:10px;padding:12px 18px 0}
.xcell-mm__compat-modal-search{flex:1;height:38px;border:1px solid var(--xcell-mm-search-border);border-radius:9999px;background:var(--xcell-mm-search-bg);color:var(--xcell-mm-search-text);padding:0 16px;font:inherit;font-size:13px;outline:0}
.xcell-mm__compat-modal-search:focus{border-color:var(--xcell-mm-search-focus)}
.xcell-mm__compat-modal-search::placeholder{color:var(--xcell-mm-search-text);opacity:.55}
.xcell-mm__compat-modal-hint{font-size:11px;color:var(--xcell-mm-panel-heading);white-space:nowrap}
.xcell-mm__compat-modal-body{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;padding:14px 18px 18px;overflow-y:auto;overscroll-behavior:contain}
.xcell-mm__compat-modal-empty{font-size:13px;color:var(--xcell-mm-panel-heading);font-style:italic}
/* Copyable pills (modal + card). */
.xcell-mm__compat-pill{cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.xcell-mm__compat-pill:hover{border-color:var(--xcell-mm-accent)}
.xcell-mm__compat-pill.is-copied{background:var(--xcell-mm-accent);border-color:var(--xcell-mm-accent);color:#fff}

/* Search match highlight + "this category has a match" marker on the bar. */
.xcell-mm__link .xcell-mm__label{display:inline}
.xcell-mm__hl{background:var(--xcell-mm-accent);color:#fff;border-radius:3px;padding:0 3px;font-weight:600;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.xcell-mm__top{position:relative}
.xcell-mm__li.is-match>.xcell-mm__top::after{content:"";position:absolute;top:9px;inset-inline-end:3px;width:6px;height:6px;border-radius:50%;background:var(--xcell-mm-accent)}

/* ===== "+N more" overflow panel ===== */
.xcell-mm__li--more .xcell-mm__top{font-weight:500;color:var(--xcell-n-500)}
.xcell-mm__li--more .xcell-mm__top:hover{color:var(--xcell-red-600)}
.xcell-mm__overflow-list{list-style:none;margin:0;padding:0;columns:2;gap:16px;column-gap:24px}
.xcell-mm__overflow-link{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--xcell-ink-700);padding:5px 0;text-decoration:none}
.xcell-mm__overflow-link:hover{color:var(--xcell-red-600)}
.xcell-mm__overflow-link img{width:26px;height:26px;border-radius:var(--xcell-mm-thumb-radius,6px);object-fit:cover;flex:none;background:var(--xcell-n-50);border:1px solid var(--xcell-n-100)}

/* ===== Responsive adjustments for new features ===== */
@media(max-width:782px){
  .xcell-mm:not(.xcell-mm--custom-bp) .xcell-mm__isearch{display:none}
}

@media (prefers-reduced-motion: reduce){
  .xcell-mm--autohide,.xcell-mm__panel,.xcell-mm__overlay,.xcell-mm__drawer,.xcell-mm__doverlay,.xcell-mm__chev,.xcell-mm__tab,.xcell-mm__plp-thumb,.xcell-mm__plp-circ,.xcell-mm__rail-item,.xcell-mm__isearch{transition:none}
}

/* ===== RTL =====
   Margins/paddings/insets above already use logical properties; what's left is
   the physically-positioned drawer (transforms can't be logical) and the
   directional glyphs. */
/* Drawer: the default (start-edge) drawer docks on the right and slides in from
   the right in RTL; the --drawer-right (end-edge) variant mirrors to the left. */
[dir=rtl] .xcell-mm__drawer{left:auto;right:0;transform:translateX(100%);box-shadow:-6px 0 24px rgba(0,0,0,.2)}
[dir=rtl] .xcell-mm--drawer-right .xcell-mm__drawer{right:auto;left:0;transform:translateX(-100%);box-shadow:6px 0 24px rgba(0,0,0,.2)}
/* Must come after both RTL placement rules: equal specificity, last one wins. */
[dir=rtl] .xcell-mm__drawer.is-open{transform:none}
/* Forward arrows (view-all, PLP rail) and the drawer Back chevron are SVGs —
   text shaping never touches them, so RTL must flip them here. The drawer row
   caret (›) is deliberately NOT flipped: it is a Bidi_Mirrored character alone
   in its own flex item (= its own bidi paragraph), so the text engine already
   renders it as ‹ under dir=rtl. A scaleX(-1) on it DOES apply (flex items are
   blockified, transformable boxes) and flipped the mirrored glyph back to the
   wrong direction — the pre-1.25.0 bug caught by the menu-wireframe baseline. */
[dir=rtl] .xcell-mm__viewall svg,
[dir=rtl] .xcell-mm__rail-item svg,
[dir=rtl] .xcell-mm__dback svg{transform:scaleX(-1)}