/* =========================================================
   Sears India - WordPress Header
   Migrated from original index.html
   ========================================================= */

#siteHeader {
    background: linear-gradient(
        180deg,
        rgba(255,255,255,.95) 0%,
        rgba(243,248,255,.90) 55%,
        rgba(234,242,255,.85) 100%
    );
    box-shadow: 0 2px 18px rgba(11,87,208,.08);
}

#siteHeader.is-scrolled {
    box-shadow: 0 8px 26px rgba(11,87,208,.14);
}

#siteHeader.home-header {
    background: #FFFFFF;
    box-shadow: none;
}

#siteHeader.home-header.is-scrolled {
    box-shadow: 0 4px 16px rgba(15,23,42,.06);
}

.home-nav {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 1540px;
    margin: 0 auto;
    padding: 0 56px;
    height: 64px;
}

@media (min-width:768px) {
    .home-nav {
        height: 86px;
    }
}

@media (max-width:1100px) {
    .home-nav {
        padding: 0 32px;
    }
}

@media (max-width:640px) {
    .home-nav {
        padding: 0 20px;
    }
}

@media (min-width:1024px) and (max-width:1100px) {
    .home-nav {
        padding: 0 24px;
    }
}

.home-logo-link {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.home-logo-img {
    height: 34px;
    width: auto;
}

@media (min-width:768px) {
    .home-logo-img {
        height: 40px;
    }
}

.home-nav-links {
    white-space: nowrap;
    margin-left: 16px;
    gap: 18px !important;
}

@media (min-width:1280px) {
    .home-nav-links {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        margin-left: 0;
        gap: 28px !important;
    }
}

.home-search {
    margin-left: auto;
}

@media (min-width:1024px) and (max-width:1279px) {
    .home-search {
        width: 150px !important;
    }
}

.home-right-icons {
    margin-left: 16px;
}

@media (max-width:1023px) {
    .home-right-icons {
        margin-left: auto;
    }
}

.nav-underline {
    position: relative;
}

.nav-underline.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    width: 100%;
    height: 4px;
    background: linear-gradient(
        90deg,
        #2563EB,
        #38BDF8
    );
    border-radius: 2px;
    transform: translateX(-50%) scaleX(1);
    transform-origin: center;
    opacity: 1;
    animation: navUnderlineIn .45s cubic-bezier(.4,0,.2,1);
}

@keyframes navUnderlineIn {
    from {
        opacity: 0;
        transform: translateX(-50%) scaleX(.3);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) scaleX(1);
    }
}

.nav-underline:not(.active)::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    width: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        #2563EB,
        #38BDF8
    );
    border-radius: 2px;
    transform: translateX(-50%);
    transition: width .25s cubic-bezier(.4,0,.2,1);
}

.nav-underline:not(.active):hover::before {
    width: 70%;
}

.dropdown-arrow {
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}

.has-dropdown:hover .dropdown-arrow,
.has-dropdown:focus-within .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown {
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition:
        opacity .25s cubic-bezier(.4,0,.2,1),
        transform .25s cubic-bezier(.4,0,.2,1),
        visibility .25s;
}

.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#siteHeader :where(a,button):focus-visible {
    outline: 3px solid #0043c8;
    outline-offset: 2px;
    border-radius: 2px;
}

.logo-badge {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: linear-gradient(
        135deg,
        #071A52 0%,
        #103C8B 45%,
        #2563EB 80%,
        #1e6fd9 100%
    );
    box-shadow:
        0 10px 26px -10px rgba(7,26,82,.45),
        0 0 22px rgba(56,189,248,.28),
        inset 0 1px 0 rgba(255,255,255,.28),
        inset 0 0 0 1px rgba(255,255,255,.08);
    transition: box-shadow .3s ease;
}

.logo-badge::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,.22) 0%,
        rgba(255,255,255,0) 45%
    );
    pointer-events: none;
}

.logo-badge::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 35%;
    height: 100%;
    background: linear-gradient(
        115deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.35) 50%,
        rgba(255,255,255,0) 100%
    );
    transform: skewX(-18deg);
    animation: logoShine 13s ease-in-out infinite;
    pointer-events: none;
}

.group:hover .logo-badge {
    box-shadow:
        0 14px 32px -10px rgba(7,26,82,.55),
        0 0 28px rgba(56,189,248,.4),
        inset 0 1px 0 rgba(255,255,255,.32),
        inset 0 0 0 1px rgba(255,255,255,.1);
}

@keyframes logoShine {
    0% {
        left: -60%;
    }

    8% {
        left: 140%;
    }

    100% {
        left: 140%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .logo-badge::after {
        animation: none !important;
    }
}

/* Mobile menu */
#mnav {
    position: relative;
    z-index: 49;
}

#mnav.hidden {
    display: none;
}

@media (min-width:1024px) {
    #mnav {
        display: none !important;
    }
}

/* Original Sears header layout */
#siteHeader{background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(243,248,255,.90) 55%,rgba(234,242,255,.85) 100%);box-shadow:0 2px 18px rgba(11,87,208,.08);}
#siteHeader.is-scrolled{box-shadow:0 8px 26px rgba(11,87,208,.14);}
#siteHeader.home-header{background:#FFFFFF;box-shadow:none;}
#siteHeader.home-header.is-scrolled{box-shadow:0 4px 16px rgba(15,23,42,.06);}
.home-nav{position:relative;display:flex;align-items:center;max-width:1540px;margin:0 auto;padding:0 56px;height:64px;}
@media (min-width:768px){.home-nav{height:86px;}}
@media (max-width:1100px){.home-nav{padding:0 32px;}}
@media (max-width:640px){.home-nav{padding:0 20px;}}
.home-logo-link{display:flex;align-items:center;flex-shrink:0;}
.home-logo-img{height:34px;width:auto;}
@media (min-width:768px){.home-logo-img{height:40px;}}
.home-nav-links{white-space:nowrap;margin-left:16px;gap:18px!important;}
@media (min-width:1280px){.home-nav-links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin-left:0;gap:28px!important;}}
.home-search{margin-left:auto;}
@media (min-width:1024px) and (max-width:1279px){.home-search{width:150px!important;}}
.home-right-icons{margin-left:16px;}
@media (max-width:1023px){.home-right-icons{margin-left:auto;}}
@media (min-width:1024px) and (max-width:1100px){.home-nav{padding:0 24px;}}
