/* Acro Aluminum product tab system
   Applies the dark navy tabs, Acro blue accent line, hover/shadow effects,
   and mobile 2-column tab grids across product pages.
*/
:root{
    --acro-tab-navy:#1f2f36;
    --acro-tab-navy-hover:#233746;
    --acro-tab-accent:#0087c9;
    --acro-tab-text:#172532;
    --acro-tab-border:#e4eaf0;
    --acro-tab-soft:#f8fafc;
}

/* Top product/series buttons */
.product-series-tabs-wrap{
    position:sticky!important;
    position:-webkit-sticky!important;
    top:var(--acro-product-tabs-top,90px)!important;
    z-index:10050!important;
    background:rgba(255,255,255,.94)!important;
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(226,232,240,.9)!important;
    margin-bottom:24px;
}
.product-series-tabs{
    width:fit-content;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    padding:14px 0;
}
.product-series-tabs a{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--acro-tab-soft);
    color:var(--acro-tab-text);
    text-decoration:none!important;
    padding:12px 20px;
    border-radius:3px;
    border:1px solid var(--acro-tab-border);
    font-weight:700;
    line-height:1.2;
    white-space:nowrap;
    transition:background .22s ease,color .22s ease,box-shadow .22s ease,transform .22s ease,border-color .22s ease;
    box-shadow:0 4px 12px rgba(15,25,35,.07);
}
.product-series-tabs a:before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:3px;
    background:transparent;
    transition:background .22s ease;
}
.product-series-tabs a:hover,
.product-series-tabs a:focus{
    background:var(--acro-tab-navy);
    border-color:var(--acro-tab-navy);
    color:#fff!important;
    transform:translateY(-2px);
    box-shadow:0 12px 24px rgba(31,47,54,.20);
}
.product-series-tabs a:hover:before,
.product-series-tabs a:focus:before{
    background:var(--acro-tab-accent);
}
.product-series-tabs a:active{
    transform:translateY(0);
    box-shadow:0 6px 14px rgba(31,47,54,.16);
}

/* Resource/content tabs */
.acro-product-resources{
    margin:42px auto 46px;
    max-width:100%;
}
.acro-resource-tabs{
    display:flex;
    align-items:stretch;
    gap:6px;
    border-bottom:1px solid #cbd5e1;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding:0;
}
.acro-resource-tab{
    position:relative;
    border:1px solid #e6ebf0;
    border-bottom:0;
    background:var(--acro-tab-soft);
    color:var(--acro-tab-text);
    min-height:62px;
    padding:0 24px;
    font:inherit;
    font-size:15.5px;
    line-height:1;
    font-weight:700;
    cursor:pointer;
    white-space:nowrap;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:background .22s ease,color .22s ease,border-color .22s ease,box-shadow .22s ease,transform .22s ease;
    box-shadow:0 3px 10px rgba(15,25,35,.055);
}
.acro-resource-tab:before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:3px;
    background:transparent;
    transition:background .22s ease;
}
.acro-resource-tab:hover,
.acro-resource-tab:focus{
    background:#f1f4f7;
    color:var(--acro-tab-navy-hover);
    border-color:#d7dee6;
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(31,47,54,.16);
}
.acro-resource-tab:hover:before,
.acro-resource-tab:focus:before{
    background:var(--acro-tab-accent);
}
.acro-resource-tab.active{
    background:var(--acro-tab-navy);
    border-color:var(--acro-tab-navy);
    color:#fff!important;
    box-shadow:0 12px 26px rgba(31,47,54,.22);
}
.acro-resource-tab.active:before{
    background:var(--acro-tab-accent);
}
.acro-resource-tab:active{
    transform:translateY(0);
    box-shadow:0 6px 14px rgba(31,47,54,.16);
}
.acro-resource-panel{
    background:#fff;
    padding:34px 34px 30px;
    border:1px solid #e4eaf0;
    border-top:0;
    box-shadow:0 12px 32px rgba(21,41,78,.055);
}

/* Mobile: make tabs visible instead of sideways scrolling */
@media(max-width:767px){
    .product-series-tabs-wrap{
        top:var(--acro-product-tabs-top,0px)!important;
    }
    .product-series-tabs{
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr));
        width:100%!important;
        gap:10px!important;
        overflow:visible!important;
        padding:12px 0!important;
        scrollbar-width:auto!important;
    }
    .product-series-tabs::-webkit-scrollbar{
        display:none;
    }
    .product-series-tabs a{
        width:100%!important;
        min-height:46px!important;
        padding:10px 8px!important;
        font-size:13.5px!important;
        flex:auto!important;
        text-align:center!important;
        white-space:normal!important;
        box-shadow:0 4px 12px rgba(15,25,35,.08)!important;
    }
    .product-series-tabs a:hover,
    .product-series-tabs a:focus{
        transform:translateY(-2px)!important;
        box-shadow:0 8px 18px rgba(31,47,54,.18)!important;
    }
    .product-series-tabs a:active{
        transform:translateY(0)!important;
        box-shadow:0 5px 12px rgba(31,47,54,.14)!important;
    }
    .acro-resource-tabs{
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:1px!important;
        overflow:visible!important;
        border-bottom:0!important;
        padding:0!important;
    }
    .acro-resource-tab{
        min-height:52px!important;
        padding:10px 8px!important;
        font-size:13.5px!important;
        line-height:1.2!important;
        white-space:normal!important;
        text-align:center!important;
        flex:auto!important;
        border:1px solid #e6ebf0!important;
        box-shadow:0 3px 9px rgba(15,25,35,.06)!important;
    }
    .acro-resource-tab:hover,
    .acro-resource-tab:focus{
        transform:translateY(-2px)!important;
        box-shadow:0 9px 20px rgba(31,47,54,.18)!important;
    }
    .acro-resource-tab.active{
        box-shadow:0 9px 20px rgba(31,47,54,.20)!important;
    }
    .acro-resource-tab:active{
        transform:translateY(0)!important;
        box-shadow:0 5px 12px rgba(31,47,54,.14)!important;
    }
    .acro-resource-panel{
        border-top:1px solid #e4eaf0!important;
        padding:30px 24px 28px!important;
    }
}