/*
 * SV Stationery Mega Menu — v1.2.0
 * Mega panel: position:fixed + JS .sv-open class (not CSS :hover)
 * Nav link styles: still pure CSS :hover (correct, no conflict)
 * Color: #A50000 · white bg
 * Stationery Venue — Warranty N Support Internet Private Limited
 */

.sv-mm-root *, .sv-mm-root *::before, .sv-mm-root *::after {
    box-sizing: border-box; margin: 0; padding: 0;
}
.sv-mm-root a  { text-decoration: none; color: inherit; }
.sv-mm-root ul { list-style: none; }

/* ── ROOT — full-width breakout from Porto's container ── */
.sv-mm-root {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* ── NAV BAR ── */
.sv-mm-container {
    width: 100%;
    background: #ffffff;
    border-bottom: 2px solid #A50000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    position: relative;
    z-index: 99999;
    overflow: visible;
}

.sv-mm-center {
    max-width: 1200px;
    margin: 0 auto;
}

.sv-mm-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    gap: 10px;
    list-style: none;
}

.sv-mm-item {
    position: static;
    height: 100%;
    display: flex;
    align-items: center;
}

/* ── NAV LINK — pure CSS hover (works fine, stays within LI bounds) ── */
.sv-mm-link {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 18px;
    height: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #333333;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: color .2s, border-color .2s;
    cursor: pointer;
}

/* Link hover — pure CSS is fine here */
.sv-mm-item:hover .sv-mm-link,
.sv-mm-item.sv-open .sv-mm-link {
    color: #A50000;
    border-bottom-color: #A50000;
}

/* Chevron triangle */
.sv-mm-chevron {
    display: inline-block;
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #A50000;
    transition: transform .2s;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Chevron rotates when panel is open (.sv-open set by JS) */
.sv-mm-item.sv-open .sv-mm-chevron {
    transform: rotate(180deg);
}

/* ════════════════════════════════════════════
   MEGA PANEL — position:fixed
   ─────────────────────────────────────────
   Shown via JS .sv-open class, NOT CSS :hover.
   Reason: :hover drops when mouse travels from
   nav item to the fixed-position panel.
   JS mouseenter/leave with 120ms delay keeps
   the panel open as mouse moves to it.
   ─────────────────────────────────────────
   --sv-nav-bottom is set by JS to the exact
   bottom edge of the nav bar in the viewport.
════════════════════════════════════════════ */
.sv-mm-mega {
    position: absolute;
    top: 100%;
    left: 50%;
    right: auto;
    width: min(1124px, calc(100vw - 40px));

    background: #ffffff;
    border-top: 4px solid #A50000;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 10px 40px rgba(165,0,0,0.15);

    padding: 30px;

    display: grid;
    gap: 25px;

    /* Hidden by default — shown via .sv-open (added by JS) */
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 10px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
    z-index: 999999;
}

/* JS adds .sv-open to show the panel */
.sv-mm-mega.sv-open,
.sv-mm-item:hover > .sv-mm-mega,
.sv-mm-item:focus-within > .sv-mm-mega {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* ── Grid columns per menu ── */
.sv-mm-cols-9,
.sv-mm-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sv-mm-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sv-mm-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ── Category headings ── */
.sv-mm-col h3 {
    font-size: 0.85rem;
    text-transform: uppercase;
    color: #A50000;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid #eeeeee;
    font-weight: 800;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.sv-mm-col h3 a { color: #A50000; transition: color .2s; }
.sv-mm-col h3 a:hover { color: #800000; }

.sv-mm-col ul li { margin-bottom: 5px; }
.sv-mm-col ul li a {
    font-size: 0.85rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #555555;
    display: block;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color .2s, background-color .2s;
}
.sv-mm-col ul li a:hover { color: #A50000; background-color: #fff5f5; }

/* ── Ad slot ── */
.sv-mm-ad {
    width: 200px; min-height: 200px;
    border: 1px dashed rgba(165,0,0,.25);
    border-radius: 4px;
    background: #fff5f5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.sv-mm-ad img { width: 100%; height: auto; display: block; }
.sv-mm-ad-label {
    display: none; font-size: 10px; font-weight: 700;
    color: rgba(165,0,0,.4); text-align: center;
    letter-spacing: .5px; padding: 8px;
}
.sv-mm-ad.sv-mm-ad-empty img             { display: none; }
.sv-mm-ad.sv-mm-ad-empty .sv-mm-ad-label { display: block; }
.sv-mm-mega .sv-mm-ad { display: none; }

/* ── Brands panel ── */
.sv-mm-brands-panel { grid-template-columns: 1fr; }
.sv-mm-brands-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px; width: 100%;
}
.sv-mm-brands-grid a {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.9rem; font-weight: 600;
    color: #555555;
    border: 1px solid #eeeeee;
    padding: 10px 8px; border-radius: 4px;
    text-align: center; display: block;
    transition: all .2s;
}
.sv-mm-brands-grid a:hover {
    background: #A50000; color: #ffffff; border-color: #A50000;
}

/* ── Hide on mobile — separate plugin handles this ── */
@media (max-width: 1024px) {
    .sv-mm-root { display: none !important; }
    .sv-mm-mega { display: none !important; }
}