/* ===================== MEGA MENU ===================== */
.nps-mega {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--nps-white);
    box-shadow: var(--nps-shadow-lg);
    border-top: 3px solid var(--nps-orange);
    border-radius: 0 0 var(--nps-radius-lg) var(--nps-radius-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity var(--nps-transition), transform var(--nps-transition), visibility var(--nps-transition);
    z-index: var(--nps-z-megamenu);
    padding: 22px 0 26px;
}
.nps-has-mega:hover > .nps-mega,
.nps-has-mega.is-open > .nps-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nps-mega__panel--image {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 28px;
    align-items: start;
}

/* Narrower hero for busy menus (Dog) */
.nps-mega__panel--dense {
    grid-template-columns: 200px 1fr;
    gap: 22px;
}
.nps-mega--wide .nps-container {
    max-width: 1180px;
}

/* Left visual — fixed square, does not stretch with tall menus */
.nps-mega__visual {
    position: relative;
    border-radius: var(--nps-radius-lg);
    overflow: hidden;
    background: linear-gradient(160deg, var(--nps-bg-soft), #fff);
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    min-height: 0;
    align-self: start;
    display: flex;
    align-items: flex-end;
    box-shadow: var(--nps-shadow-sm);
}
.nps-mega__visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.nps-mega__visual-cta {
    position: relative;
    width: 100%;
    padding: 16px;
    background: linear-gradient(0deg, rgba(0,0,0,.72), transparent);
    color: #fff;
}
.nps-mega__visual-cta span {
    display: block;
    font-size: var(--nps-fs-xl);
    font-weight: var(--nps-font-weight-bold);
}
.nps-mega__visual-cta a {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--nps-yellow);
    font-size: var(--nps-fs-sm);
    font-weight: var(--nps-font-weight-medium);
}

/* Right columns — wrap into tidy rows */
.nps-mega__cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 22px;
    align-content: start;
}
.nps-mega__cols--dense {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 18px;
}
.nps-mega__col {
    min-width: 0;
    padding: 10px 12px 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, #fffaf6 0%, #ffffff 70%);
    border: 1px solid var(--nps-border);
}
.nps-mega__panel--dog .nps-mega__col:nth-child(1),
.nps-mega__panel--dog .nps-mega__col:nth-child(2) {
    background: linear-gradient(180deg, #fff4ec 0%, #ffffff 65%);
    border-color: color-mix(in srgb, var(--nps-orange) 22%, var(--nps-border));
}
.nps-mega__col-title {
    font-size: 0.92rem;
    color: var(--nps-red);
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--nps-bg-soft);
    line-height: 1.25;
}
.nps-mega__col-title a { color: inherit; }
.nps-mega__col-title a:hover { color: var(--nps-orange); }
.nps-mega__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.nps-mega__list a {
    color: var(--nps-text-soft);
    font-size: 0.8125rem;
    line-height: 1.35;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    transition: color var(--nps-transition), transform var(--nps-transition);
}
.nps-mega__list a::before {
    content: "";
    width: 13px; height: 13px;
    flex-shrink: 0;
    background-color: var(--nps-lime);
    -webkit-mask: var(--nps-paw) center / contain no-repeat;
            mask: var(--nps-paw) center / contain no-repeat;
    transform: rotate(-18deg) scale(.85);
    transition: transform var(--nps-transition), background-color var(--nps-transition);
}
.nps-mega__list a:hover {
    color: var(--nps-orange);
    transform: translateX(3px);
}
.nps-mega__list a:hover::before {
    background-color: var(--nps-orange);
    transform: rotate(0) scale(1.1);
}
.nps-mega__col-all {
    display: inline-block;
    margin-top: 8px;
    font-size: var(--nps-fs-xs);
    font-weight: var(--nps-font-weight-medium);
    color: var(--nps-orange);
}
.nps-mega__col-all:hover {
    color: var(--nps-red);
}

/* Brands panel */
.nps-mega__brands-title {
    font-size: var(--nps-fs-md);
    color: var(--nps-red);
    margin: 0 0 16px;
}
.nps-mega__brands {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}
.nps-mega__empty {
    margin: 0;
    color: var(--nps-text-muted);
    font-size: var(--nps-fs-sm);
    grid-column: 1 / -1;
}
.nps-brand-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nps-bg-soft);
    border: 1px solid var(--nps-border);
    border-radius: var(--nps-radius);
    height: 64px;
    padding: 8px;
    transition: transform var(--nps-transition), box-shadow var(--nps-transition), border-color var(--nps-transition);
}
.nps-brand-chip:hover {
    transform: translateY(-3px);
    box-shadow: var(--nps-shadow);
    border-color: var(--nps-orange);
}
.nps-brand-chip img { max-height: 44px; width: auto; object-fit: contain; }
.nps-brand-chip__text {
    font-size: var(--nps-fs-sm);
    font-weight: var(--nps-font-weight-medium);
    color: var(--nps-text-soft);
    text-align: center;
}
.nps-mega__brands-all {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: 18px;
    color: var(--nps-orange);
    font-weight: var(--nps-font-weight-medium);
    font-size: var(--nps-fs-sm);
}

@media (max-width: 1100px) {
    .nps-mega__panel--image { grid-template-columns: 200px 1fr; }
    .nps-mega__panel--dense { grid-template-columns: 160px 1fr; }
    .nps-mega__cols,
    .nps-mega__cols--dense {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 860px) {
    .nps-mega {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        padding: 0 0 0 14px;
        display: none;
    }
    .nps-has-mega.is-open > .nps-mega { display: block; }
    .nps-mega__panel--image,
    .nps-mega__panel--dense { grid-template-columns: 1fr; }
    .nps-mega__visual { display: none; }
    .nps-mega__cols,
    .nps-mega__cols--dense { grid-template-columns: 1fr; gap: 10px; }
    .nps-nav__list { flex-direction: column; align-items: stretch; }
    .nps-nav__link { justify-content: space-between; }
}