/* SebaChat mega menu (2026-09-27). Tokens follow design system "sebachat-fashion". */
.sx-mega {
  --mx-ink: #111111; --mx-soft: #6F6A64; --mx-faint: #A39D96; --mx-accent: #F15A3A; --mx-accent2: #C7431F;
  --mx-border: #E8E5E0; --mx-tint: #FDF0EB; --mx-surface: #FFFFFF;
  gap: 4px !important;
}
.sx-top { position: static; }
.sx-top__btn {
  font: inherit; font-weight: 600; font-size: 14px; line-height: 1.2;
  background: none; border: 0; padding: 9px 14px; border-radius: 999px; cursor: pointer;
  color: var(--mx-ink); display: inline-flex; gap: 6px; align-items: center;
}
.sx-top__btn:hover { background: #F3F1EE; }
.sx-top__btn:focus-visible { outline: 2px solid var(--mx-accent); outline-offset: 2px; }
.sx-top.is-open .sx-top__btn { background: var(--mx-tint); color: var(--mx-accent2); }
.sx-top.is-pinned .sx-top__btn { box-shadow: inset 0 0 0 1.5px var(--mx-accent); }
.sx-car { font-size: 10px; transition: transform .2s; }
.sx-top.is-open .sx-car { transform: rotate(180deg); }

.sx-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--mx-surface); border-top: 1px solid var(--mx-border);
  box-shadow: 0 24px 40px -24px rgba(17, 17, 17, .28);
  z-index: 1000; max-height: calc(100vh - 90px); overflow: auto;
}
.sx-panel[hidden] { display: none; }
.sx-panel__in { max-width: 1240px; margin: 0 auto; padding: 22px 20px 22px; display: grid; gap: 18px; }
.sx-panel__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sx-panel__head span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mx-soft); font-weight: 700; }
.sx-mega a.sx-viewall { font-weight: 700; color: var(--mx-accent); font-size: 14px; padding: 0; }
.sx-mega a.sx-viewall:hover { color: var(--mx-accent2); }
.sx-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 20px 28px; }
.sx-mega a.sx-col__h {
  display: flex; justify-content: space-between; gap: 8px; font-weight: 700; font-size: 15px;
  color: var(--mx-ink); padding: 0 0 6px; border-bottom: 1px solid var(--mx-border); margin-bottom: 6px;
}
.sx-n { font-weight: 500; color: var(--mx-faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.sx-col ul { list-style: none; margin: 0; padding: 0; }
.sx-col li { margin: 0; }
.sx-mega .sx-col li a { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; color: var(--mx-soft); font-size: 14px; font-weight: 500; }
.sx-mega .sx-col li.sx-l4 a { padding-left: 14px; font-size: 13px; }
.sx-mega .sx-col li.sx-l4 a > span:first-child::before { content: "\2514\00a0"; color: var(--mx-faint); }
.sx-mega .sx-col li a.sx-all { font-size: 12.5px; font-weight: 700; color: var(--mx-ink); margin-top: 2px; }
.sx-mega a.sx-col__h:hover, .sx-mega .sx-col li a:hover { color: var(--mx-accent); }

@media (max-width: 900px) {
  .seba-nav.sx-mega.is-open {
    display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; padding: 0; gap: 0 !important;
    max-height: calc(100vh - 140px); overflow: auto;
  }
  .sx-top { border-bottom: 1px solid var(--mx-border); }
  .sx-top__btn { width: 100%; justify-content: space-between; border-radius: 0; padding: 14px 20px; font-weight: 700; font-size: 15px; }
  .sx-top.is-pinned .sx-top__btn { box-shadow: none; }
  .sx-panel { position: static; box-shadow: none; border: 0; max-height: none; overflow: visible; }
  .sx-panel__in { padding: 4px 0 10px; gap: 0; }
  .sx-panel__head { padding: 8px 20px 8px 32px; }
  .sx-panel__head span { display: none; }
  .sx-cols { display: block; }
  .sx-mega a.sx-col__h { border: 0; margin: 0; padding: 9px 20px 9px 32px; font-size: 14px; }
  .sx-mega .sx-col li a { padding: 7px 20px 7px 48px; }
  .sx-mega .sx-col li.sx-l4 a { padding-left: 62px; }
}
@media (prefers-reduced-motion: reduce) { .sx-car { transition: none; } }