/* Elite Mall Homepage V4 — Departments Hover Navigation R2
   Bespoke presentation layer. CSS owns desktop hover/focus visibility.
   If JavaScript fails, the menu still works with pointer hover and keyboard focus. */

.h4-departments{
    display:block;
    position:relative;
    z-index:92;
    height:44px;
    border-top:1px solid #f0e7df;
    border-bottom:1px solid #e7ddd3;
    background:#fff;
}
.h4-departments__inner{
    position:relative;
    display:flex;
    align-items:stretch;
    height:43px;
    gap:14px;
}
.h4-departments__all{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:0 4px 0 0;
    color:#2d2119;
    text-decoration:none;
    font-size:12px;
    font-weight:850;
    letter-spacing:.01em;
    white-space:nowrap;
}
.h4-departments__all>span{
    display:grid;
    place-items:center;
    width:26px;
    height:26px;
    border:1px solid #ead8c7;
    border-radius:8px;
    color:#a85c13;
    background:#fffaf4;
}
.h4-departments__all svg{width:15px;height:15px}
.h4-departments__tabs{
    min-width:0;
    flex:1 1 auto;
    display:flex;
    align-items:stretch;
    justify-content:flex-start;
    gap:2px;
}
.h4-departments__item{
    position:static;
    min-width:0;
    display:flex;
    align-items:stretch;
}
.h4-departments__tab{
    position:relative;
    min-width:0;
    display:flex;
    align-items:center;
    padding:0 14px;
    color:#34271f;
    text-decoration:none;
    font-size:12.5px;
    font-weight:700;
    line-height:1;
    white-space:nowrap;
    transition:color .14s ease, background-color .14s ease;
}
.h4-departments__tab::after{
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    bottom:0;
    height:2px;
    border-radius:2px 2px 0 0;
    background:#c96b12;
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .14s ease;
}
.h4-departments__item:hover>.h4-departments__tab,
.h4-departments__item:focus-within>.h4-departments__tab,
.h4-departments__item.is-touch-open>.h4-departments__tab{
    color:#a64f08;
    background:#fffaf5;
}
.h4-departments__item:hover>.h4-departments__tab::after,
.h4-departments__item:focus-within>.h4-departments__tab::after,
.h4-departments__item.is-touch-open>.h4-departments__tab::after{
    transform:scaleX(1);
}

/* Closed by default. This is deliberately independent of JavaScript. */
.h4-departments-panel{
    display:block;
    position:absolute;
    z-index:1000;
    left:0;
    right:0;
    top:100%;
    max-height:min(560px,calc(100vh - 190px));
    overflow:auto;
    padding:20px 24px 24px;
    border:1px solid #e7ddd3;
    border-top:2px solid #c96b12;
    border-radius:0 0 14px 14px;
    background:#fff;
    box-shadow:0 24px 48px rgba(39,26,17,.16);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-5px);
    transition:opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
}
.h4-departments__item:hover>.h4-departments-panel,
.h4-departments__item:focus-within>.h4-departments-panel,
.h4-departments__item.is-touch-open>.h4-departments-panel{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
    transition-delay:0s;
}
.h4-departments-panel__head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:18px;
    padding-bottom:13px;
    border-bottom:1px solid #efe7df;
}
.h4-departments-panel__head>div small{
    display:block;
    margin-bottom:4px;
    color:#a9682b;
    font-size:9px;
    font-weight:900;
    letter-spacing:.14em;
}
.h4-departments-panel__head>div strong{
    color:#211813;
    font-size:18px;
    font-weight:850;
    line-height:1.1;
}
.h4-departments-panel__head>a{
    flex:0 0 auto;
    color:#a9560d;
    text-decoration:none;
    font-size:11.5px;
    font-weight:850;
}
.h4-departments-panel__head>a:hover,
.h4-departments-panel__head>a:focus-visible{
    color:#7c3900;
    text-decoration:underline;
    text-underline-offset:3px;
}
.h4-departments-panel__groups{
    column-count:4;
    column-gap:34px;
}
.h4-departments-panel__group{
    break-inside:avoid;
    display:block;
    margin:0 0 22px;
    padding:0;
}
.h4-departments-panel__group-title{
    display:block;
    margin:0 0 7px;
    padding:0 0 7px;
    border-bottom:1px solid #f1ebe5;
    color:#2b211a;
    text-decoration:none;
    font-size:11px;
    font-weight:900;
    line-height:1.25;
    letter-spacing:.025em;
    text-transform:uppercase;
}
.h4-departments-panel__group-title:hover,
.h4-departments-panel__group-title:focus-visible{
    color:#a9560d;
}
.h4-departments-panel__link{
    display:block;
    padding:4px 0;
    color:#66594f;
    text-decoration:none;
    font-size:12px;
    font-weight:500;
    line-height:1.35;
    transition:color .12s ease, transform .12s ease;
}
.h4-departments-panel__link:hover,
.h4-departments-panel__link:focus-visible{
    color:#a9560d;
    transform:translateX(2px);
    outline:none;
}

@media(max-width:1180px) and (min-width:901px){
    .h4-departments__inner{gap:7px}
    .h4-departments__all strong{display:none}
    .h4-departments__tab{padding:0 9px;font-size:11.5px}
    .h4-departments__tab::after{left:9px;right:9px}
    .h4-departments-panel{padding-left:20px;padding-right:20px}
    .h4-departments-panel__groups{column-count:3;column-gap:26px}
}

@media(max-width:900px){
    .h4-departments{display:none!important}
}

@media(prefers-reduced-motion:reduce){
    .h4-departments__tab,
    .h4-departments__tab::after,
    .h4-departments-panel,
    .h4-departments-panel__link{transition:none!important}
}