
#cacar-spec-nav{
    --cacar-black:#171717;
    --cacar-text:#252525;
    --cacar-muted:#77736f;
    --cacar-line:#e2dfda;
    --cacar-gold:#a1744d;
    --cacar-soft:#faf9f7;

    display:block !important;
    width:100% !important;
    max-width:980px !important;

    margin:0 auto 38px !important;
    padding:36px 18px 30px !important;

    background:#ffffff !important;

    box-sizing:border-box !important;
    clear:both !important;

    font-family:Arial,Helvetica,sans-serif !important;
}

#cacar-spec-nav *,
#cacar-spec-nav *::before,
#cacar-spec-nav *::after{
    box-sizing:border-box !important;
}


/* ==================================================
   HEADER
================================================== */

#cacar-spec-nav .csn-head{
    display:flex !important;
    width:100% !important;

    margin:0 !important;
    padding:0 0 15px !important;

    align-items:flex-end !important;
    justify-content:space-between !important;

    gap:24px !important;

    border-bottom:1px solid var(--cacar-line) !important;
}

#cacar-spec-nav .csn-head-main{
    display:block !important;

    width:auto !important;
    max-width:650px !important;

    margin:0 !important;
    padding:0 !important;
}

#cacar-spec-nav .csn-eyebrow{
    display:block !important;

    margin:0 0 7px !important;
    padding:0 !important;

    color:var(--cacar-gold) !important;

    font-size:10px !important;
    line-height:1.3 !important;

    font-weight:700 !important;
    letter-spacing:1.8px !important;

    text-transform:uppercase !important;
}

#cacar-spec-nav .csn-title{
    display:block !important;

    margin:0 0 6px !important;
    padding:0 !important;

    color:var(--cacar-black) !important;

    font-size:26px !important;
    line-height:1.2 !important;

    font-weight:700 !important;

    text-align:left !important;
}

#cacar-spec-nav .csn-intro{
    display:block !important;

    margin:0 !important;
    padding:0 !important;

    color:var(--cacar-muted) !important;

    font-size:13px !important;
    line-height:1.5 !important;

    font-weight:400 !important;

    text-align:left !important;
}


/* ==================================================
   VIEW ALL — OUTSIDE GRID
================================================== */

#cacar-spec-nav .csn-view-all{
    display:inline-flex !important;

    flex:0 0 auto !important;

    margin:0 0 2px !important;
    padding:0 !important;

    align-items:center !important;
    justify-content:center !important;

    gap:9px !important;

    color:var(--cacar-black) !important;

    background:transparent !important;
    border:0 !important;

    font-size:9px !important;
    line-height:1.3 !important;

    font-weight:700 !important;

    letter-spacing:.75px !important;

    text-decoration:none !important;
    text-transform:uppercase !important;

    white-space:nowrap !important;

    box-shadow:none !important;
}

#cacar-spec-nav .csn-view-all-arrow{
    display:inline-block !important;

    color:var(--cacar-gold) !important;

    font-size:16px !important;
    line-height:1 !important;

    font-weight:400 !important;
}


/* ==================================================
   STRICT 4-COLUMN GRID
================================================== */

#cacar-spec-nav .csn-grid{
    display:grid !important;

    width:100% !important;

    margin:0 !important;
    padding:0 !important;

    grid-template-columns:repeat(4,minmax(0,1fr)) !important;

    column-gap:0 !important;
    row-gap:0 !important;
}


/* ==================================================
   SPECIFICATION ITEM
================================================== */

#cacar-spec-nav .csn-item{
    position:relative !important;

    display:flex !important;

    width:100% !important;
    min-width:0 !important;

    min-height:118px !important;

    margin:0 !important;
    padding:17px 14px 15px !important;

    flex-direction:column !important;

    align-items:center !important;
    justify-content:center !important;

    background:#ffffff !important;

    border:0 !important;
    border-bottom:1px solid var(--cacar-line) !important;

    color:var(--cacar-text) !important;

    text-align:center !important;
    text-decoration:none !important;

    box-shadow:none !important;

    transition:
        background-color .2s ease,
        color .2s ease !important;
}


/* ==================================================
   DESKTOP DIVIDERS
================================================== */

/* First row */

#cacar-spec-nav .csn-item:nth-child(1),
#cacar-spec-nav .csn-item:nth-child(2),
#cacar-spec-nav .csn-item:nth-child(3){
    border-right:1px solid var(--cacar-line) !important;
}


/* Second row */

#cacar-spec-nav .csn-item:nth-child(5),
#cacar-spec-nav .csn-item:nth-child(6){
    border-right:1px solid var(--cacar-line) !important;
}


/* ==================================================
   ICON
================================================== */

#cacar-spec-nav .csn-icon{
    display:flex !important;

    width:44px !important;
    height:44px !important;

    margin:0 0 11px !important;
    padding:0 !important;

    align-items:center !important;
    justify-content:center !important;

    color:var(--cacar-gold) !important;
}

#cacar-spec-nav .csn-icon svg{
    display:block !important;

    width:41px !important;
    height:41px !important;

    margin:0 !important;
    padding:0 !important;

    fill:none !important;

    stroke:currentColor !important;
    stroke-width:1.35 !important;

    stroke-linecap:round !important;
    stroke-linejoin:round !important;

    overflow:visible !important;
}


/* ==================================================
   LABEL
================================================== */

#cacar-spec-nav .csn-name{
    display:block !important;

    width:100% !important;

    margin:0 !important;
    padding:0 !important;

    color:var(--cacar-text) !important;

    font-size:13px !important;
    line-height:1.35 !important;

    font-weight:500 !important;

    text-align:center !important;

    word-break:normal !important;
}


/* ==================================================
   GOLD DETAIL
================================================== */

#cacar-spec-nav .csn-item::after{
    content:"" !important;

    position:absolute !important;

    bottom:-1px !important;
    left:50% !important;

    width:30px !important;
    height:1px !important;

    background:var(--cacar-gold) !important;

    transform:translateX(-50%) !important;

    opacity:.6 !important;
}


/* ==================================================
   EMPTY STRUCTURE CELLS
================================================== */

#cacar-spec-nav .csn-empty{
    display:block !important;

    width:100% !important;
    min-width:0 !important;

    min-height:118px !important;

    margin:0 !important;
    padding:0 !important;

    background:#ffffff !important;

    border:0 !important;
    border-bottom:1px solid var(--cacar-line) !important;

    pointer-events:none !important;
}

#cacar-spec-nav .csn-empty:first-of-type{
    border-right:1px solid var(--cacar-line) !important;
}


/* ==================================================
   HOVER
================================================== */

@media (hover:hover) and (pointer:fine){

    #cacar-spec-nav .csn-item:hover{
        background:var(--cacar-soft) !important;
    }

    #cacar-spec-nav .csn-item:hover .csn-icon{
        color:#805936 !important;
    }

    #cacar-spec-nav .csn-item:hover .csn-name{
        color:var(--cacar-black) !important;
    }

    #cacar-spec-nav .csn-view-all:hover{
        color:var(--cacar-gold) !important;
    }
}


/* ==================================================
   MOBILE VIEW ALL
================================================== */

#cacar-spec-nav .csn-mobile-footer{
    display:none !important;
}


/* ==================================================
   TABLET / MOBILE
================================================== */

@media screen and (max-width:760px){

    #cacar-spec-nav{
        margin-bottom:30px !important;

        padding:30px 14px 27px !important;
    }

    #cacar-spec-nav .csn-head{
        display:block !important;

        margin:0 !important;
        padding-bottom:15px !important;
    }

    #cacar-spec-nav .csn-title{
        font-size:23px !important;
        line-height:1.22 !important;
    }

    #cacar-spec-nav .csn-intro{
        font-size:12.5px !important;
    }

    #cacar-spec-nav .csn-view-all{
        display:none !important;
    }


    /* Mobile = 2 columns */

    #cacar-spec-nav .csn-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

    #cacar-spec-nav .csn-item{
        min-height:112px !important;

        padding:15px 11px 14px !important;

        border-right:0 !important;
        border-bottom:1px solid var(--cacar-line) !important;
    }


    /* Reset desktop dividers */

    #cacar-spec-nav .csn-item:nth-child(1),
    #cacar-spec-nav .csn-item:nth-child(2),
    #cacar-spec-nav .csn-item:nth-child(3),
    #cacar-spec-nav .csn-item:nth-child(5),
    #cacar-spec-nav .csn-item:nth-child(6){
        border-right:0 !important;
    }


    /* Mobile left-column divider */

    #cacar-spec-nav .csn-item:nth-child(odd){
        border-right:1px solid var(--cacar-line) !important;
    }


    /* Hide structural cells on mobile */

    #cacar-spec-nav .csn-empty{
        display:none !important;
    }

    #cacar-spec-nav .csn-icon{
        width:40px !important;
        height:40px !important;

        margin-bottom:10px !important;
    }

    #cacar-spec-nav .csn-icon svg{
        width:38px !important;
        height:38px !important;
    }

    #cacar-spec-nav .csn-name{
        font-size:12.5px !important;
    }


    /* Mobile View All */

    #cacar-spec-nav .csn-mobile-footer{
        display:block !important;

        width:100% !important;

        margin:20px 0 0 !important;
        padding:0 !important;

        text-align:left !important;
    }

    #cacar-spec-nav .csn-mobile-all{
        display:inline-flex !important;

        min-height:42px !important;

        margin:0 !important;
        padding:0 16px !important;

        align-items:center !important;
        justify-content:center !important;

        color:var(--cacar-black) !important;

        background:#ffffff !important;

        border:1px solid #777 !important;

        font-size:10px !important;
        line-height:1.3 !important;

        font-weight:700 !important;

        letter-spacing:.45px !important;

        text-decoration:none !important;
        text-transform:uppercase !important;

        border-radius:0 !important;

        box-shadow:none !important;
    }
}


/* ==================================================
   VERY SMALL MOBILE
================================================== */

@media screen and (max-width:360px){

    #cacar-spec-nav{
        padding-left:12px !important;
        padding-right:12px !important;
    }

    #cacar-spec-nav .csn-item{
        min-height:108px !important;

        padding-left:9px !important;
        padding-right:9px !important;
    }

    #cacar-spec-nav .csn-name{
        font-size:12px !important;
    }
}

