:root {
    --s2-surface  : var(--surface);
    --s2-sunken   : var(--surface-2);
    --s2-ink      : var(--text);
    --s2-body     : var(--text-2);
    --s2-muted    : var(--muted);
    --s2-hairline : var(--border);
    --s2-link     : var(--text);
    --s2-r-sm     : var(--r-sm, 8px);
    --s2-r-lg     : var(--r-lg, 16px);
    --s2-sh-3     : var(--sh-lg);
    --s2-gutter   : 2.4rem;

    --space-1: .4rem;
    --space-2: .8rem;
    --space-3: 1.2rem;
    --space-4: 1.6rem;
    --space-5: 2.4rem;
    --space-6: 3.2rem;

    --dur-fast : .15s;
    --fs-body-sm: 1.35rem;
}
.s2-nav-item { position: relative; }

.s2-nav-item--mega { position: static; }

.s2-hd-nav .s2-hd-in { position: relative; }

.s2-nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 10px var(--space-4);
    border-radius: var(--s2-r-sm);
    font-size: var(--fs-body-sm);
    color: var(--s2-body);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.s2-nav-item:hover > .s2-nav-link,
.s2-nav-item:focus-within > .s2-nav-link { background: var(--s2-sunken); color: var(--s2-ink); }
.s2-nav-link:focus-visible { outline: 2px solid var(--s2-link); outline-offset: -2px; }

.s2-nav-caret { flex: none; color: var(--s2-muted); transition: transform var(--dur) var(--ease); }
.s2-nav-item:hover > .s2-nav-link .s2-nav-caret { transform: rotate(180deg); }

.s2-nav-panel {
    position: absolute;
    top: 100%;
    inset-inline-start: auto;
    inset-inline-end: 0;
    z-index: 30;
    min-width: 24rem;
    max-width: 92vw;
    padding: var(--space-3);
    background: var(--s2-surface);
    border: 1px solid var(--s2-hairline);
    border-radius: var(--s2-r-lg);
    box-shadow: var(--s2-sh-3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.s2-nav-item:hover > .s2-nav-panel,
.s2-nav-item:focus-within > .s2-nav-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.s2-nav-panel--mega {
    inset-inline-end: var(--s2-gutter);
    inset-inline-start: var(--s2-gutter);
    width: auto;
    max-width: none;
    padding: var(--space-5);
}

.s2-mega { position: relative; min-height: 38.4rem; }

.s2-mega-side {
    width: 24.8rem;
    max-height: 38.4rem;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0;

    border-inline-end: 1px solid var(--s2-hairline);
}
.s2-mega-side-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 9px var(--space-3);
    margin-inline-end: var(--space-2);
    border-radius: var(--s2-r-sm);
    font-size: var(--fs-body-sm);
    color: var(--s2-body);
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.s2-mega-side-text { flex: 1; }
.s2-mega-side-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: var(--s2-r-sm);
    background: var(--s2-sunken);
    color: var(--s2-muted);
}
.s2-mega-side-caret {
    flex: none;
    color: var(--s2-muted);
    opacity: 0;
    transform: rotate(90deg) translateY(4px);
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.s2-mega-side-item:hover > .s2-mega-side-link {
    background: var(--s2-sunken);
    color: var(--s2-ink);
}
.s2-mega-side-item:hover > .s2-mega-side-link .s2-mega-side-icon { color: var(--s2-link); }
.s2-mega-side-item:hover > .s2-mega-side-link .s2-mega-side-caret { opacity: 1; transform: rotate(90deg) translateY(0); }

.s2-mega-pane {
    display: none;
    position: absolute;
    inset-block: 0;

    inset-inline-start: 24.8rem;
    inset-inline-end: 0;
    overflow-y: auto;
    padding-inline-start: var(--space-6);
}

.s2-mega-side-item:first-child > .s2-mega-pane { display: block; }
.s2-mega-side:hover .s2-mega-side-item:first-child:not(:hover) > .s2-mega-pane { display: none; }
.s2-mega-side-item:hover > .s2-mega-pane { display: block; }

.s2-mega-pane-head {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
    font-size: var(--fs-body-sm);
    color: var(--s2-link);
    text-decoration: none;
}
.s2-mega-pane-head svg { transform: rotate(90deg); }

.s2-nav-panel--mega::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: -20px;
    height: 20px;
}

.s2-nav-list { list-style: none; margin: 0; padding: 0; }
/* base.css همهٔ <li>ها را inline-block کرده، پس بدونِ این قاعده آیتم‌های
   کشوی ساده (مثلِ «برندها») سه‌تا سه‌تا کنارِ هم می‌افتند. */
.s2-nav-list > li { display: block; width: 100%; }
.s2-nav-list a { white-space: nowrap; }
.s2-nav-list a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 9px var(--space-3);
    border-radius: var(--s2-r-sm);
    font-size: var(--fs-body-sm);
    color: var(--s2-body);
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.s2-nav-list a:hover { background: var(--s2-sunken); color: var(--s2-ink); }

.s2-nav-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5) var(--space-6);
}
@media (max-width: 1279px) {
    .s2-nav-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.s2-nav-col-head {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--fs-body-sm);
    color: var(--s2-ink);
    text-decoration: none;
}
.s2-nav-col-head:hover { color: var(--s2-link); }
.s2-nav-sub { list-style: none; margin: 0; padding: 0; }
.s2-nav-sub a {
    display: block;
    padding: 5px 0;
    font-size: var(--fs-body-sm);
    color: var(--s2-muted);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease);
}
.s2-nav-sub a:hover { color: var(--s2-link); }

.s2-nav-all {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--s2-hairline);
    font-size: var(--fs-body-sm);
    color: var(--s2-link);
    text-decoration: none;
}
.s2-nav-all svg { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
    .s2-nav-panel,
    .s2-nav-caret { transition: none; }
}





.s2-hd-nav-list { display: flex; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }