// shop-nav.jsx v2, Layer 2 (Per-shop nav).
//
// Desktop (≥1024px): editorial inline bar, no pill chrome.
//   [Shop wordmark · accent color] | [inline nav with hover underline] [CTA]
//
// Mobile (≤1023px): own row stacked under <GlobalNav /> compact bar.
//   Tapping the wordmark row expands an inline accordion below with all
//   shop items + nested expand for dropdown items + sticky CTA at bottom.
//   (Hamburger in <GlobalNav /> opens its own full-screen Mall takeover.)
//
// Usage:
//   <ShopNav config={SHOP_CONFIG} />

// Current-page detection, matches a dropdown item href to the current page
// by trailing filename (dev .html) or clean folder (deploy). Hash/query ignored.
const __snCurFile = () => { try { return (location.pathname.split('/').filter(Boolean).pop() || '').toLowerCase(); } catch (e) { return ''; } };
const __snHrefCur = (href) => {
  if (!href || href === '#' || href.startsWith('#')) return false;
  const f = (href.split('#')[0].split('?')[0].split('/').filter(Boolean).pop() || '').toLowerCase();
  const c = __snCurFile();
  return !!f && !!c && f === c;
};
// True if the item itself OR any nested dropdown child matches the current page.
const __snItemCur = (item) => {
  if (!item) return false;
  if (__snHrefCur(item.href)) return true;
  const scan = (arr) => Array.isArray(arr) && arr.some((x) => x && (__snHrefCur(x.href) || scan(x.items) || scan(x.groups) || scan(x.columns) || scan(x.sections) || (x.mega && scan(x.mega.sections))));
  return scan(item.items) || scan(item.groups) || scan(item.columns) || scan(item.sections) || (item.mega && scan(item.mega.sections));
};

const ShopNav = ({ config }) => {
  const {
    wordmark,
    accent = '#A4B6FF', accentInk = '#0f172a',
    accentGrad,
    bg, scheme = 'dark',
    homeHref = '/',
    items = [],
    cta,
  } = config;

  const isDark = scheme === 'dark';
  const ink         = isDark ? '#ffffff' : '#0f172a';
  const inkMuted    = isDark ? 'rgba(255,255,255,0.72)' : '#475569';
  const inkSubtle   = isDark ? 'rgba(255,255,255,0.45)' : '#94a3b8';
  const dividerCol  = isDark ? 'rgba(255,255,255,0.10)' : 'rgba(15,23,42,0.08)';
  const finalBg     = bg || (isDark ? '#0F0A18' : '#ffffff');

  // Desktop dropdown state
  const [ddOpen, setDdOpen] = React.useState(null);
  const ddRef = React.useRef(null);
  const ddCloseTimer = React.useRef(null);

  const openDd = (k) => {
    if (ddCloseTimer.current) { clearTimeout(ddCloseTimer.current); ddCloseTimer.current = null; }
    setDdOpen(k);
  };
  const scheduleCloseDd = () => {
    if (ddCloseTimer.current) clearTimeout(ddCloseTimer.current);
    ddCloseTimer.current = setTimeout(() => setDdOpen(null), 220);
  };
  const cancelCloseDd = () => {
    if (ddCloseTimer.current) { clearTimeout(ddCloseTimer.current); ddCloseTimer.current = null; }
  };

  React.useEffect(() => {
    const onDoc = (e) => {
      if (ddRef.current && !ddRef.current.contains(e.target)) setDdOpen(null);
    };
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, []);

  // Mobile expand state
  const [mobileExpanded, setMobileExpanded] = React.useState(false);
  const [expandedSubKey, setExpandedSubKey] = React.useState(null);

  React.useEffect(() => {
    if (!mobileExpanded) setExpandedSubKey(null);
  }, [mobileExpanded]);

  // ──────────────── Desktop: editorial inline item (Version C-α) ────────────────
  // Active = permanent accent + 2px accent underline. Hover/dropdown-open
  // tints text to accent. No bg pill, no edge underline animation.
  const DesktopItem = ({ item }) => {
    const hasDD = !!item.dropdown;
    const isOpen = hasDD && ddOpen === item.dropdown;
    const [hover, setHover] = React.useState(false);
    const isActive = item.active || __snItemCur(item);
    const tinted = isActive || hover || isOpen;
    return (
      <a
        href={item.href || '#'}
        onMouseEnter={() => { setHover(true); if (hasDD) openDd(item.dropdown); }}
        onMouseLeave={() => setHover(false)}
        onClick={(e) => { if (hasDD) { e.preventDefault(); setDdOpen(isOpen ? null : item.dropdown); } }}
        style={{
          position: 'relative',
          padding: '6px 0',
          display: 'inline-flex', alignItems: 'center', gap: 6,
          fontSize: 13.5, fontWeight: isActive ? 600 : 500,
          color: isActive ? ink : (tinted ? accent : inkMuted),
          textDecoration: 'none', cursor: 'pointer',
          fontFamily: "'Noto Sans HK','Noto Sans TC',sans-serif",
          whiteSpace: 'nowrap', transition: 'color .15s',
        }}
      >
        {item.label}
        {hasDD && (
          <svg width="9" height="9" viewBox="0 0 10 10" style={{
            opacity: 0.65,
            transform: isOpen ? 'rotate(180deg)' : 'rotate(0)',
            transition: 'transform .18s', flexShrink: 0,
          }}>
            <path d="M2 4l3 3 3-3" stroke="currentColor" strokeWidth="1.6" fill="none"
              strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        )}
        {isActive && (
          <span style={{
            position: 'absolute', left: 0, right: 0, bottom: 0, height: 2,
            background: accent, borderRadius: 2,
          }}/>
        )}
      </a>
    );
  };

  // ──────────────── Desktop dropdown sheet ────────────────
  // Two shapes:
  //  (a) simple list, pass `items: [{title, desc, href, ext}]`
  //  (b) sectioned mega, pass `mega: { width?, sections: [{eyebrow, columns: [{h4, items: [{title, sub, href, flag, ext}]}]}] }`
  const ShopDropdownSheet = ({ dropdownKey, items: ddItems, mega, eyebrow }) => {
    const open = ddOpen === dropdownKey;
    const isMega = !!mega;
    const totalCols = isMega
      ? mega.sections.reduce((s, sec) => s + (sec.columns?.length || 0), 0)
      : 0;

    const cardCommon = {
      background: isDark ? '#1A1107' : '#ffffff',
      border: `1px solid ${isDark ? 'rgba(255,255,255,0.10)' : 'rgba(15,23,42,0.08)'}`,
      borderRadius: 14,
      boxShadow: isDark ? '0 24px 56px rgba(0,0,0,0.55)' : '0 8px 32px rgba(15,23,42,0.09)',
      padding: isMega ? 12 : 10,
    };

    return (
      <div
        onMouseEnter={cancelCloseDd}
        onMouseLeave={scheduleCloseDd}
        style={{
          position: 'absolute', top: '100%',
          // Mega sheet centers under nav; simple sheet right-aligns
          ...(isMega
            ? { left: '50%', transform: `translate(-50%, ${open ? 0 : -8}px)` }
            : { right: 0, transform: `translateY(${open ? 0 : -8}px)` }),
          paddingTop: 4,
          width: isMega
            ? 'max-content'
            : (ddItems.length > 4 ? 440 : 300),
          maxWidth: 'calc(100vw - 48px)',
          opacity: open ? 1 : 0,
          pointerEvents: open ? 'auto' : 'none',
          transition: 'opacity .18s ease, transform .18s ease',
          zIndex: 200,
        }}
      >
        <div style={cardCommon}>
          {isMega ? (
            <div style={{ display: 'flex', gap: 18 }}>
              {mega.sections.map((sec, si) => (
                <div key={si} style={{
                  paddingLeft: si > 0 ? 18 : 0,
                  borderLeft: si > 0 ? `1px solid ${dividerCol}` : 'none',
                  display: 'flex', flexDirection: 'column', gap: 10,
                }}>
                  <div style={{
                    fontFamily: "'Chakra Petch','Noto Sans HK',sans-serif",
                    fontSize: 10.5, fontWeight: 700, letterSpacing: 1.4,
                    color: accent, padding: '2px 10px 0',
                  }}>{sec.eyebrow}</div>
                  <div style={{ display: 'grid', gridTemplateColumns: `repeat(${sec.columns.length}, 188px)`, gap: 14 }}>
                    {sec.columns.map((col, ci) => (
                      <div key={ci} style={{ minWidth: 0 }}>
                        {sec.eyebrow !== 'CDN' && (
                        <div style={{
                          fontFamily: "'Chakra Petch','Noto Sans HK',sans-serif",
                          fontSize: 10, fontWeight: 700, letterSpacing: 1.6,
                          color: accent, textTransform: 'uppercase',
                          padding: '2px 10px 6px',
                          borderBottom: `1px solid ${dividerCol}`,
                          marginBottom: 2,
                        }}>{col.h4}</div>
                        )}
                        <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                          {col.items.map((it, ii) => {
                            const isCur = it.active || __snHrefCur(it.href);
                            return (
                            <a key={ii} href={it.href || '#'} aria-current={isCur ? 'page' : undefined} style={{
                              display: 'flex', alignItems: 'center', gap: 6,
                              padding: '6px 10px', borderRadius: 8, cursor: 'pointer',
                              textDecoration: 'none', transition: 'background .12s',
                              fontSize: 13.5, lineHeight: 1.25,
                              color: isCur ? accent : ink, fontWeight: isCur ? 700 : 600,
                              background: isCur ? `${accent}1A` : 'transparent',
                              boxShadow: isCur ? `inset 2px 0 0 ${accent}` : 'none',
                            }}
                              onMouseEnter={(e) => { if (!isCur) e.currentTarget.style.background = isDark ? 'rgba(255,255,255,0.06)' : 'rgba(15,23,42,0.04)'; }}
                              onMouseLeave={(e) => { if (!isCur) e.currentTarget.style.background = 'transparent'; }}>
                              {it.title}
                              {it.ext && <span style={{ color: inkMuted, fontSize: 11, marginLeft: 4 }}>↗</span>}
                            </a>
                            );
                          })}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <React.Fragment>
              <div style={{
                fontFamily: "'Chakra Petch','Noto Sans HK',sans-serif",
                fontSize: 10.5, fontWeight: 700, letterSpacing: 1.4,
                color: accent, padding: '6px 10px 10px',
              }}>{eyebrow}</div>
              <div style={{
                display: 'grid',
                gridTemplateColumns: ddItems.length > 4 ? 'repeat(2, 1fr)' : '1fr',
                gap: 2,
              }}>
                {ddItems.map((it, i) => {
                  const isCur = it.active || __snHrefCur(it.href);
                  return (
                  <a key={i} href={it.href || '#'} aria-current={isCur ? 'page' : undefined} style={{
                    display: 'flex', alignItems: 'center', gap: 6,
                    padding: '6px 10px', borderRadius: 8, cursor: 'pointer',
                    textDecoration: 'none', transition: 'background .12s',
                    fontSize: 13.5, fontWeight: isCur ? 700 : 600, color: isCur ? accent : ink,
                    background: isCur ? (isDark ? 'rgba(255,255,255,0.08)' : `${accent}1A`) : 'transparent',
                    boxShadow: isCur ? `inset 2px 0 0 ${accent}` : 'none',
                  }}
                    onMouseEnter={(e) => e.currentTarget.style.background =
                      isCur ? (isDark ? 'rgba(255,255,255,0.12)' : `${accent}26`) : (isDark ? 'rgba(255,255,255,0.06)' : 'rgba(15,23,42,0.04)')}
                    onMouseLeave={(e) => e.currentTarget.style.background =
                      isCur ? (isDark ? 'rgba(255,255,255,0.08)' : `${accent}1A`) : 'transparent'}>
                    {it.title}
                    {it.ext && <span style={{ color: inkMuted, fontSize: 11 }}>↗</span>}
                  </a>
                  );
                })}
              </div>
            </React.Fragment>
          )}
        </div>
      </div>
    );
  };

  return (
    <React.Fragment>
      {/* ============ Desktop Layer 2 (≥1024px) ============ */}
      <header
        ref={ddRef}
        className="ud-l2"
        style={{
          position: 'sticky', top: 0, left: 0, right: 0, zIndex: 100,
          background: finalBg,
          borderBottom: accentGrad ? 'none' : `2px solid ${accent}`,
          color: ink,
        }}
      >
        <div className="container ud-l2-inner" style={{
          height: 56,
          display: 'flex', alignItems: 'center', gap: 32,
        }}>
          {/* LEFT, shop wordmark */}
          <a href={homeHref} style={{
            display: 'inline-flex', alignItems: 'baseline',
            textDecoration: 'none', padding: '4px 0', flexShrink: 0,
          }}>
            <span style={{
              fontFamily: "'Chakra Petch','Noto Sans HK',sans-serif",
              fontSize: 20, fontWeight: 700, letterSpacing: -0.2, lineHeight: 1, color: accent,
            }}>{wordmark}</span>
          </a>

          {/* Spacer pushes nav + CTA to the right */}
          <div style={{ flex: 1 }} />

          {/* RIGHT, nav items + CTA */}
          <div
            onMouseLeave={scheduleCloseDd}
            style={{
              display: 'flex', alignItems: 'center', gap: 26,
            }}>
            {items.map((it, i) => <DesktopItem key={i} item={it} />)}
          </div>

          {cta && (
            <a href={cta.href} data-cta={cta.dataCta || 'contact-sales'} style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              fontSize: 13.5, fontWeight: 600, color: accent,
              textDecoration: 'none',
              fontFamily: "'Noto Sans HK','Noto Sans TC',sans-serif",
              flexShrink: 0,
            }}>
              {cta.label}
              <svg width="12" height="12" viewBox="0 0 12 12">
                <path d="M2 6h7M6 3l3 3-3 3" stroke="currentColor" strokeWidth="1.6"
                  fill="none" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </a>
          )}
        </div>

        {/* Dropdowns anchored to the L2 header (full width) so mega menu centers
            on the page, not on the items cluster. */}
        {items.filter((it) => it.dropdown).map((it) => (
          <ShopDropdownSheet
            key={it.dropdown}
            dropdownKey={it.dropdown}
            items={it.items || []}
            mega={it.mega}
            eyebrow={`${it.label} · UD ${wordmark}`}
          />
        ))}
      </header>

      {/* ============ Mobile Layer 2, accordion row (≤1023px) ============ */}
      <header
        className="ud-l2-mobile"
        style={{
          display: 'none',
          position: 'sticky', top: 0, left: 0, right: 0, zIndex: 100,
          background: finalBg,
          borderBottom: accentGrad ? 'none' : `2px solid ${accent}`,
          color: ink,
        }}
      >
        {/* Trigger row */}
        <div
          className="ud-l2-mobile-trigger"
          style={{
            width: '100%',
            height: 56,
            display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
            color: ink,
          }}
        >
          <a href={homeHref} aria-label={wordmark + ' 首頁'} style={{
            display: 'inline-flex', alignItems: 'baseline', flexGrow: 1, textDecoration: 'none',
            fontFamily: "'Chakra Petch','Noto Sans HK',sans-serif",
            fontSize: 20, fontWeight: 700, letterSpacing: -0.2, color: accent,
          }}>
            {wordmark}
          </a>
          <button
            onClick={() => setMobileExpanded((v) => !v)}
            aria-expanded={mobileExpanded}
            aria-label="展開選單"
            style={{
              width: 40, height: 40, flexShrink: 0,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              background: 'transparent', border: 'none', cursor: 'pointer', padding: 0,
            }}
          >
            <svg width="18" height="18" viewBox="0 0 18 18" style={{
              color: ink, opacity: 0.7,
              transform: mobileExpanded ? 'rotate(180deg)' : 'rotate(0)',
              transition: 'transform .25s',
            }}>
              <path d="M4 7l5 5 5-5" stroke="currentColor" strokeWidth="1.8"
                fill="none" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </button>
        </div>

        {/* Expand body */}
        <div style={{
          maxHeight: mobileExpanded ? '80vh' : 0,
          opacity: mobileExpanded ? 1 : 0,
          overflow: mobileExpanded ? 'auto' : 'hidden',
          transition: 'max-height .35s ease, opacity .25s ease',
          borderTop: mobileExpanded ? `1px solid ${dividerCol}` : 'none',
        }}>
          <div className="ud-l2-mobile-body" style={{
            paddingTop: 4, paddingBottom: 16,
            display: 'flex', flexDirection: 'column',
            background: isDark ? 'rgba(0,0,0,0.20)' : 'rgba(15,23,42,0.02)',
          }}>
            {items.map((it, i) => {
              const hasMega = !!it.mega && Array.isArray(it.mega.sections);
              const hasSubs = hasMega || (!!it.dropdown && Array.isArray(it.items) && it.items.length > 0);
              const subKey = 'sub-' + i;
              const subOpen = expandedSubKey === subKey;
              const itCur = __snItemCur(it);
              // For mega, flatten sections → columns into one ordered render plan
              const megaColumns = hasMega
                ? it.mega.sections.flatMap((sec) =>
                    sec.columns.map((col) => ({ eyebrow: sec.eyebrow, h4: col.h4, items: col.items }))
                  )
                : null;
              return (
                <div key={i} style={{ borderBottom: `1px solid ${dividerCol}` }}>
                  {hasSubs ? (
                    <React.Fragment>
                      <button
                        onClick={() => setExpandedSubKey(subOpen ? null : subKey)}
                        aria-expanded={subOpen}
                        aria-current={itCur ? 'true' : undefined}
                        style={{
                          width: '100%', textAlign: 'left',
                          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                          padding: '16px 0', background: 'transparent', border: 'none',
                          cursor: 'pointer', color: itCur ? accent : ink,
                          fontFamily: "'Noto Sans HK','Noto Sans TC',sans-serif",
                          fontSize: 17, fontWeight: itCur ? 700 : 600,
                        }}>
                        {it.label}
                        <svg width="14" height="14" viewBox="0 0 14 14" style={{
                          opacity: 0.7,
                          transform: subOpen ? 'rotate(180deg)' : 'rotate(0)',
                          transition: 'transform .2s',
                        }}>
                          <path d="M3 5l4 4 4-4" stroke="currentColor" strokeWidth="1.8"
                            fill="none" strokeLinecap="round" strokeLinejoin="round" />
                        </svg>
                      </button>
                      <div style={{
                        maxHeight: subOpen ? 2000 : 0,
                        opacity: subOpen ? 1 : 0,
                        overflow: 'hidden',
                        transition: 'max-height .35s ease, opacity .2s ease',
                      }}>
                        {hasMega ? (
                          <div style={{ padding: '4px 0 14px', display: 'flex', flexDirection: 'column', gap: 14 }}>
                            {megaColumns.map((col, ci) => {
                              const prev = megaColumns[ci - 1];
                              const showEyebrow = !prev || prev.eyebrow !== col.eyebrow;
                              return (
                                <div key={ci}>
                                  {showEyebrow && (
                                    <div style={{
                                      fontFamily: "'Chakra Petch','Noto Sans HK',sans-serif",
                                      fontSize: 13, fontWeight: 800, letterSpacing: 1.6,
                                      color: accent, padding: '2px 0 8px',
                                    }}>{col.eyebrow}</div>
                                  )}
                                  {col.eyebrow !== 'CDN' && (
                                  <div style={{
                                    fontSize: 13, fontWeight: 700, letterSpacing: 0.8,
                                    color: inkMuted, textTransform: 'uppercase',
                                    margin: '6px 0 6px',
                                  }}>{col.h4}</div>
                                  )}
                                  <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                                    {col.items.map((sub, si) => {
                                      const subCur = __snHrefCur(sub.href);
                                      return (
                                      <a key={si} href={sub.href || '#'} aria-current={subCur ? 'page' : undefined} style={{
                                        display: 'block',
                                        padding: '11px 12px', borderRadius: 10,
                                        background: subCur ? `${accent}1A` : (isDark ? 'rgba(255,255,255,0.05)' : 'rgba(15,23,42,0.04)'),
                                        boxShadow: subCur ? `inset 2px 0 0 ${accent}` : 'none',
                                        textDecoration: 'none', color: subCur ? accent : ink,
                                      }}>
                                        <span style={{ fontSize: 14.5, fontWeight: subCur ? 700 : 600 }}>
                                          {sub.title}
                                          {sub.ext && <span style={{ color: inkMuted, fontSize: 13, marginLeft: 4 }}>↗</span>}
                                        </span>
                                      </a>
                                      );
                                    })}
                                  </div>
                                </div>
                              );
                            })}
                          </div>
                        ) : (
                          <div style={{
                            padding: '4px 0 14px',
                            display: 'flex', flexDirection: 'column', gap: 4,
                          }}>
                            {it.items.map((sub, si) => {
                              const subCur = __snHrefCur(sub.href);
                              return (
                              <a key={si} href={sub.href || '#'} aria-current={subCur ? 'page' : undefined} style={{
                                display: 'flex', flexDirection: 'column', gap: 4,
                                padding: '11px 12px', borderRadius: 10,
                                background: subCur ? `${accent}1A` : (isDark ? 'rgba(255,255,255,0.05)' : 'rgba(15,23,42,0.04)'),
                                boxShadow: subCur ? `inset 2px 0 0 ${accent}` : 'none',
                                textDecoration: 'none', color: subCur ? accent : ink,
                              }}>
                                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                                  <span style={{ fontSize: 14.5, fontWeight: subCur ? 700 : 600 }}>{sub.title}</span>
                                  {sub.ext && <span style={{ color: inkMuted, fontSize: 13 }}>↗</span>}
                                </div>
                                {sub.desc && (
                                  <span style={{ fontSize: 13, color: inkMuted, lineHeight: 1.45 }}>
                                    {sub.desc}
                                  </span>
                                )}
                              </a>
                              );
                            })}
                          </div>
                        )}
                      </div>
                    </React.Fragment>
                  ) : (
                    <a href={it.href || '#'} aria-current={itCur ? 'page' : undefined} style={{
                      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                      padding: '16px 0', fontSize: 17, fontWeight: itCur ? 700 : 600, color: itCur ? accent : ink,
                      textDecoration: 'none',
                      fontFamily: "'Noto Sans HK','Noto Sans TC',sans-serif",
                    }}>
                      {it.label}
                      <span style={{ color: itCur ? accent : inkSubtle, fontSize: 16 }}>→</span>
                    </a>
                  )}
                </div>
              );
            })}

            {cta && (
              <a href={cta.href} data-cta={cta.dataCta || 'contact-sales'} style={{
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
                marginTop: 14, padding: '14px 18px', borderRadius: 12,
                background: accentGrad || accent, color: accentInk, border: 'none', cursor: 'pointer',
                textDecoration: 'none', fontSize: 15, fontWeight: 700, letterSpacing: 0.3,
                fontFamily: "'Noto Sans HK','Noto Sans TC',sans-serif",
                boxShadow: `0 8px 22px ${accent}40`,
              }}>
                {cta.label}
                <span style={{ fontFamily: "'Chakra Petch',sans-serif" }}>→</span>
              </a>
            )}
          </div>
        </div>
      </header>

      {/* Responsive */}
      <style>{`
        /* Horizontal padding now comes from the shared .container class. */
        /* Mobile L2 trigger + body mirror the .container responsive padding
           so the wordmark/links align with page content at every width. */
        .ud-l2-mobile-trigger, .ud-l2-mobile-body {
          padding-left: var(--pad-d); padding-right: var(--pad-d);
        }
        @media (max-width: 1024px) {
          .ud-l2-mobile-trigger, .ud-l2-mobile-body {
            padding-left: var(--pad-t); padding-right: var(--pad-t);
          }
        }
        @media (max-width: 640px) {
          .ud-l2-mobile-trigger, .ud-l2-mobile-body {
            padding-left: var(--pad-m); padding-right: var(--pad-m);
          }
        }
        @media (max-width: 1180px) {
          .ud-l2 .ud-l2-inner { height: 52px !important; gap: 24px !important; }
          .ud-l2 .ud-l2-inner > a span { font-size: 18px !important; }
          .ud-l2 .ud-l2-inner > div { gap: 20px !important; }
        }
        @media (max-width: 1023px) {
          .ud-l2 { display: none !important; }
          .ud-l2-mobile { display: block !important; }
        }
        ${accentGrad ? `.ud-l2::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:${accentGrad};pointer-events:none}.ud-l2-mobile{position:relative}.ud-l2-mobile::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:${accentGrad};pointer-events:none}` : ''}
      `}</style>
    </React.Fragment>
  );
};

window.ShopNav = ShopNav;