:root{
    --accent:#f4511e;
    --dark:#111111;
    --text:#222222;
    --muted:#666666;
    --light:#f7f7f7;
    --border:#dddddd;
    --white:#fff;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    overflow-y:scroll;
}

body{
    margin:0;
    font-family:"Inter",Arial,Helvetica,sans-serif;
    color:var(--text);
    line-height:1.65;
    background:#fff;
}

a{
    color:inherit;
    text-decoration:none;
}

.container{
    width: 97%;
    max-width: 1700px;
    margin-left: auto;
    margin-right: auto;
}

/* =========================================================
   HEADER
========================================================= */

.site-header{
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(255,255,255,.98);
    border-bottom:none;
}

.nav{
    position:relative;
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.logo{
    flex-shrink:0;
    font-size:25px;
    font-weight:800;
    letter-spacing:-1px;
}

.logo span{
    color:var(--accent);
}

.nav nav{
    display:flex;
    gap:24px;
    align-items:center;
}

.nav nav a{
    font-weight:600;
    font-size:14px;
}

.nav nav a:hover{
    color:var(--accent);
}

.menu-toggle{
    display:none;
    background:none;
    border:0;
    outline:0;
    font-size:25px;
    cursor:pointer;
    padding:4px;
}



/* =========================================================
   HEADER SUBNAV
========================================================= */

.header-subnav{
    position:relative;
    z-index:100;
    background:var(--dark);
}

.header-subnav-inner{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:28px;
    min-height:42px;
}

.header-subnav a{
    font-size:13px;
    font-weight:700;
    color:#eeeeee;
    text-transform:uppercase;
    transition:color .2s ease;
}

.header-subnav a:hover{
    color:var(--accent);
}


/* =========================================================
   SHOP BY BRANDS DROPDOWN
========================================================= */

.brands-dropdown{
    position:static;
    z-index:1001;
}

.brands-dropdown-btn{
    display:flex;
    align-items:center;

    min-height:42px;
    padding:0;
    margin:0;

    border:0;
    outline:0;
    background:transparent;

    color:#eeeeee;

    font-family:inherit;
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;

    cursor:pointer;
    pointer-events:auto;

    user-select:none;
    -webkit-user-select:none;

    transition:color .2s ease;
}

.brands-dropdown-btn:hover{
    color:var(--accent);
}

.brands-dropdown-btn:focus{
    outline:none;
    color:#fff;
}

.brands-dropdown-btn:active{
    color:var(--accent);
}


/* =========================================================
   BRANDS MEGA MENU
   FULL-WIDTH BACKGROUND
========================================================= */

.brands-dropdown-menu{
    position:absolute;
    top:100%;
    left:50%;

    width:100vw;
    max-width:100vw;
    max-height:calc(100vh - 114px);

    overflow-y:auto;
    overflow-x:hidden;

    padding:22px 0;
    margin:0;

    background:linear-gradient(
        180deg,
        rgba(18,18,18,.98) 0%,
        rgba(12,12,12,.98) 100%
    );

    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.08);
    border-left:0;
    border-right:0;
    border-radius:0;

    box-shadow:0 12px 30px rgba(0,0,0,.35);

    display:block;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transform:translate(-50%,-6px);

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;

    z-index:99999;
}

.brands-dropdown-menu::before{
    content:"";
    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:2px;

    background:linear-gradient(
        90deg,
        transparent 0%,
        var(--accent) 50%,
        transparent 100%
    );

    opacity:.8;
    pointer-events:none;
}

.brands-dropdown.is-open .brands-dropdown-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate(-50%,0);
}


/* =========================================================
   BRAND LIST CONTAINER
   10 BRANDS PER ROW ON DESKTOP
========================================================= */

#header-brand-list{
    display:grid;

    grid-template-columns:repeat(10,minmax(0,1fr));
    grid-template-rows:none;
    grid-auto-flow:row;

    column-gap:12px;
    row-gap:6px;

    width:97%;
    max-width:1700px;

    margin-left:auto;
    margin-right:auto;

    box-sizing:border-box;
}


/* =========================================================
   BRAND LINKS
   ONE LINE PER BRAND
========================================================= */

#header-brand-list a{
    position:relative;

    display:block;
    min-width:0;

    padding:6px 9px;

    border:1px solid transparent;
    border-radius:5px;

    color:#f5f5f5;

    font-size:13px;
    font-weight:500;
    line-height:1.3;

    text-transform:uppercase;
    text-decoration:none;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

    cursor:pointer;
    pointer-events:auto;

    transition:
        background .15s ease,
        color .15s ease,
        border-color .15s ease,
        padding-left .15s ease,
        transform .15s ease;
}

#header-brand-list a:hover{
    background:linear-gradient(
        90deg,
        rgba(244,81,30,.18),
        rgba(244,81,30,.05)
    );

    border-color:rgba(244,81,30,.25);
    color:#fff;

    padding-left:13px;
    transform:translateX(2px);
}

#header-brand-list a::before{
    content:"";

    position:absolute;
    left:0;
    top:50%;

    width:2px;
    height:0;

    background:var(--accent);
    border-radius:2px;

    transform:translateY(-50%);
    transition:height .15s ease;
}

#header-brand-list a:hover::before{
    height:65%;
}

.brands-dropdown-empty{
    grid-column:1 / -1;

    padding:20px;

    color:#999;
    text-align:center;
    font-size:12px;
}


/* =========================================================
   VIEW ALL BRANDS
========================================================= */

.brands-dropdown-menu .category-dropdown-footer{
    width:97%;
    max-width:1700px;

    margin:14px auto 0;
    padding-top:14px;

    border-top:1px solid rgba(255,255,255,.10);
    text-align:center;
}

.brands-dropdown-menu .category-dropdown-footer .view-all-category{
    display:block !important;

    width:25% !important;
    margin:0 auto !important;

    padding:5px 8px !important;

    background:#f4511e !important;
    color:#fff !important;

    text-align:center !important;
    text-decoration:none !important;

    font-size:9px !important;
    font-weight:600 !important;
    line-height:1.3 !important;

    border:1px solid #f4511e !important;
    border-radius:4px !important;

    white-space:nowrap !important;
    transform:none !important;

    transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease !important;
}

.brands-dropdown-menu .category-dropdown-footer .view-all-category:hover,
.brands-dropdown-menu .category-dropdown-footer .view-all-category:focus,
.brands-dropdown-menu .category-dropdown-footer .view-all-category:active{
    background:#d94012 !important;
    color:#fff !important;
    border-color:#d94012 !important;

    padding:5px 8px !important;
    transform:none !important;

    box-shadow:0 3px 8px rgba(0,0,0,.25) !important;
}

.brands-dropdown-menu .category-dropdown-footer .view-all-category::before,
.brands-dropdown-menu .category-dropdown-footer .view-all-category::after{
    display:none !important;
    content:none !important;

    width:0 !important;
    height:0 !important;
}




/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px){

    #header-brand-list{
        grid-template-columns:repeat(2,minmax(0,1fr));
        grid-template-rows:none;
        grid-auto-flow:row;

        column-gap:8px;
        row-gap:6px;

        width:92%;
    }

    #header-brand-list a{
        padding:6px;
        font-size:9px;
    }

    #header-brand-list a:hover{
        padding-left:8px;
    }

    .brands-dropdown-menu{
        padding:16px 0;
    }

    .brands-dropdown-menu .category-dropdown-footer{
        width:92%;
    }

    .brands-dropdown-menu .category-dropdown-footer .view-all-category{
        width:60% !important;
    }
}



/* =========================================================
   HERO
========================================================= */

.hero{
    position:relative;
    overflow:hidden;
    padding:90px 0;
    background:#000;
}

.hero-slider{
    position:absolute;
    inset:0;

    display:flex;

    width:300%;

    animation:heroSlide 24s linear infinite;
}

.hero-slide{
    position:relative;

    width:33.333333%;
    height:100%;

    flex-shrink:0;

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.cover3{
    background-image:url("/assets/images/cover3.jpg");
}

.cover6{
    background-image:url("/assets/images/cover6.jpg");
}

.hero-slide::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,1) 0%,
            rgba(0,0,0,.92) 35%,
            rgba(0,0,0,.68) 70%,
            rgba(0,0,0,.58) 85%,
            rgba(0,0,0,.82) 100%
        );
}

.hero-grid{
    position:relative;

    z-index:3;

    display:grid;

    grid-template-columns:1.35fr .65fr;

    gap:60px;

    align-items:center;
}

@keyframes heroSlide{

    0%,35%{
        transform:translateX(-66.666666%);
    }

    50%,85%{
        transform:translateX(-33.333333%);
    }

    100%{
        transform:translateX(0);
    }
}

h1{
    font-size:clamp(38px,6vw,64px);
    line-height:1.05;
    letter-spacing:-2px;
    margin:8px 0 22px;
    color:var(--dark);
}

h2{
    font-size:32px;
    line-height:1.2;
    color:var(--dark);
}

h3{
    line-height:1.25;
    color:var(--dark);
}

.hero h1{
    color:#ffffff;
}

.hero-text,
.lead{
    font-size:18px;
    color:var(--muted);
    max-width:720px;
}

.hero .button{
    background:#fc5203;
    color:#ffffff;
    border:1px solid #fc5203;
    border-radius:9999px;
    transition:all .25s ease;
}

.hero .button:hover{
    background:#fc5203;
    color:#ffffff;
    border-color:#fc5203;
    border-radius:9999px;
    transform:scale(1.06);

    box-shadow:
        0 6px 18px rgba(244,127,24,.35);
}

.eyebrow{
    font-size:12px;
    font-weight:800;
    letter-spacing:1.5px;
    color:var(--accent);
    margin:0;
}

.button{
    display:inline-block;
    background:var(--dark);
    color:#fff;
    padding:13px 22px;
    border-radius:8px;
    font-weight:700;
    margin-top:12px;
}

.button:hover{
    background:var(--accent);
}

.button.small{
    padding:8px 13px;
    font-size:12px;
}

.hero-card{
    background:rgba(255,255,255,.75);
    border:1px solid rgba(255,255,255,.8);
    padding:16px;
    border-radius:17px;
    overflow:hidden;
}

.hero-card-image{
    width:100%;
    height:210px;
    object-fit:cover;
    display:block;
    border-radius:11px;
}

.hero-card-content{
    padding:10px 4px 2px;
}

.hero-card-content h2{
    font-size:30px;
    margin:3px 0 5px;
}

.hero-card-content p:not(.eyebrow){
    font-size:15px;
    line-height:1.4;
    color:#555;
    margin:0 0 7px;
}

.hero-card-content .eyebrow{
    font-size:12px;
    margin:0;
    color:var(--accent);
}

.hero-icon{
    font-size:40px;
    color:var(--accent);
}


/* =========================================================
   SECTIONS
========================================================= */

.section{
    padding:30px 0;
}

.muted{
    background:var(--light);
}

.section-heading{
    display:flex;
    justify-content:space-between;
    align-items:end;
    margin-bottom:30px;
}


/* =========================================================
   CATEGORY / BRAND PAGE HEADINGS
========================================================= */

#page-eyebrow{
    margin:0 0 8px;
    font-size:12px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:1.6px;
    text-transform:uppercase;
    color:var(--accent);
}

#category-title {
    margin: 0;
    font-size: 36px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.8px;
    color: var(--dark);
    text-transform: capitalize;
}

#category-description{
    margin:12px 0 20px;
    max-width:700px;
    font-size:16px;
    line-height:1.6;
    font-weight:400;
    color:var(--muted);
}



/* =========================================================
   PRODUCT CONDITION
========================================================= */

.product-condition{
    display:block;
    margin-top:8px;
    margin-bottom:4px;
    color:#f4511e;
    font-size:11px;
    font-weight:650;
    line-height:1.2;
}


/* =========================================================
   PRODUCTS
========================================================= */

.product-grid{
    display:grid;

    grid-template-columns:
        repeat(6,minmax(0,1fr));

    gap:20px;

    align-items:start;
}

.product-card{
    width:100%;
    min-width:0;

    border:1px solid var(--border);
    border-radius:14px;
    overflow:hidden;
    background:#fff;

    transition:.2s ease;
}

.product-card:hover{
    border-color:var(--accent);
    transform:translateY(-3px);

    box-shadow:
        0 8px 20px rgba(0,0,0,.08);
}

.product-image{
    width:100%;
    aspect-ratio:1/1;

    background:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    color:#777;
    font-size:12px;
    font-weight:700;

    padding:10px;
}

.product-image img{
    width:100%;
    height:100%;

    object-fit:contain;
    display:block;
}

.product-body{
    padding:12px;
}

.product-body h3{
    font-size:14px;
    line-height:1.35;

    margin:7px 0 8px;

    height:61px;
    min-height:61px;

    overflow:hidden;

    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:4;
    line-clamp:4;
}

.product-price{
    font-family:"Inter",Arial,sans-serif;

    font-size:15px;
    font-weight:600;

    color:#111111;

    line-height:1.2;

    margin:8px 0 14px;
}

.tag{
    display:inline-block;

    font-size:10px;
    font-weight:800;

    text-transform:uppercase;

    color:var(--accent);

    letter-spacing:.8px;
}

/* =========================================================
   RESPONSIVE PRODUCT GRID
========================================================= */

@media (max-width:1400px){
    .product-grid{
        grid-template-columns:repeat(5,minmax(0,1fr));
        gap:18px;
    }
}

@media (max-width:1100px){
    .product-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:16px;
    }
}

@media (max-width:800px){
    .product-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:14px;
    }
}

@media (max-width:550px){
    .product-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }

    .product-body{
        padding:10px;
    }

    .product-body h3{
        font-size:13px;
    }

    .product-price{
        font-size:14px;
    }
}

/* =========================================================
   CATEGORY PAGE ONLY
========================================================= */

.categories-page .category-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-top: 30px;
    align-items: stretch;
}

.category-view-all {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 25px auto 0;
    text-align: center;
}

.categories-page .category-card {
    min-width: 0;
    min-height: 180px;
    padding: 20px 14px;

    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;

    text-align: center;
    text-decoration: none;

    transition:
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.categories-page .category-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
}

.categories-page .category-card .category-icon {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;
    background: #fff0e9;
    color: var(--accent);
    font-size: 25px;
}

.categories-page .category-card strong {
    display: block;
    width: 100%;
    min-height: 42px;
    overflow-wrap: anywhere;

    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
    color: var(--dark);
    text-align: center;
}

.categories-page .category-card .category-count {
    margin-top: auto;
    font-size: 13px;
    line-height: 20px;
    color: var(--muted);
}

.categories-page .category-card:hover strong {
    color: var(--accent);
}

.categories-page .category-view-all {
    text-align: center;
    margin-top: 25px;
}

.categories-page .category-back {
    margin-top: 30px;
    text-align: center;
}

@media (max-width: 1000px) {
    .categories-page .category-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .categories-page .category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .categories-page .category-card {
        padding: 18px 10px;
    }
}

@media (max-width: 560px) {
    .categories-page .category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-top: 22px;
    }

    .categories-page .category-card {
        min-height: 165px;
        padding: 16px 8px;
        gap: 9px;
    }

    .categories-page .category-card .category-icon {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
        font-size: 22px;
    }

    .categories-page .category-card strong {
        min-height: 40px;
        font-size: 14px;
    }

    .categories-page .category-card .category-count {
        font-size: 12px;
    }
}

/* =========================================================
   SEARCH BAR
========================================================= */

.header-search{
    flex:1 1 auto;
    max-width:750px;
    min-width:0;
}

.search-box{
    height:38px;

    border:1px solid #d8d8d8;
    border-radius:10px;

    display:flex;
    align-items:center;

    padding:0 13px;

    background:#f7f7f7;

    transition:.2s ease;
}

.search-box:focus-within{
    border-color:#c8c8c8;
    background:#f5f5f5;

    box-shadow:
        0 0 0 2px rgba(0,0,0,.05);
}

.search-icon{
    width:16px;
    height:16px;

    border:2px solid #f4511e;
    border-radius:50%;

    display:block;

    position:relative;
    font-size:0;

    margin-right:10px;
    flex-shrink:0;
}

.search-icon:after{
    content:"";

    position:absolute;

    width:7px;
    height:2px;

    background:#f4511e;

    right:-5px;
    bottom:-3px;

    transform:rotate(45deg);

    border-radius:2px;
}

.search-box input{
    width:100%;
    height:100%;

    border:0;
    outline:0;

    background:transparent;

    font-family:"Inter",Arial,sans-serif;

    font-size:13px;
    font-weight:500;

    color:#222;
}

.search-box input::placeholder{
    font-family:"Inter",Arial,sans-serif;

    font-size:13px;
    font-weight:500;

    color:#777;

    opacity:1;
}

.search-slide{
    animation:searchSlide .3s ease;
}

@keyframes searchSlide{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }
}



/* =========================================================
   BRAND EMPTY STATE
========================================================= */

.brands-empty{
    width:100%;

    grid-column:1 / -1;

    padding:30px 24px;

    border:1px solid var(--border);
    border-radius:12px;

    background:#fff;

    color:var(--muted);

    text-align:center;

    font-size:14px;
    line-height:1.6;
}

.brands-empty strong{
    display:block;

    margin-bottom:5px;

    color:var(--dark);

    font-size:16px;
    font-weight:700;
}


/* =========================================================
   BRAND GRID
========================================================= */

.brand-grid{
    display:grid;

    grid-template-columns:
        repeat(6,minmax(0,1fr));

    gap:14px;

    margin-top:30px;
}


/* =========================================================
   BRAND CARD
========================================================= */

.brand-card{
    width:100%;
    min-height:85px;
    height:85px;

    padding:10px 14px;

    border:0;
    border-radius:8px;

    background:#fff;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    text-decoration:none;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.brand-card:hover{
    border:0;
    box-shadow:none;
    transform:translateY(-3px);
}


/* =========================================================
   BRAND NAME
========================================================= */

.brand-logo{
    width:100%;
    height:auto;
    min-height:40px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.brand-logo strong{
    font-size:15px;
    line-height:1.25;
    font-weight:600;

    color:var(--dark);

    text-align:center;
    letter-spacing:-0.1px;
}

.brand-card:hover .brand-logo strong{
    color:var(--accent);
}

.brand-logo img{
    max-width:110px;
    max-height:55px;

    width:auto;
    height:auto;

    object-fit:contain;
    filter:none;
}

.brand-card span{
    font-size:12px;
    font-weight:500;
    color:#555;
}


/* =========================================================
   CATEGORY / BRAND TABLET
========================================================= */

@media(max-width:1000px){

    .category-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

    .brand-grid{
        grid-template-columns:
            repeat(4,minmax(0,1fr));
    }

}


/* =========================================================
   CONTENT
========================================================= */

.content-narrow{
    width:65%;
    text-align:left;
}

.article{
    max-width:820px;
}

.guide-links{
    display:grid;
    gap:12px;
    margin-top:25px;
}

.guide-links a{
    padding:16px 18px;

    border:1px solid var(--border);
    border-radius:10px;

    font-weight:700;
}

.guide-links a:hover{
    border-color:var(--accent);
    color:var(--accent);
}

.article h1{
    font-size:48px;
}

.article h2{
    font-size:27px;
    margin-top:40px;
}

.article-meta{
    color:var(--muted);
}

.notice{
    margin-top:35px;

    padding:18px;

    border-left:4px solid var(--accent);

    background:#fff3ed;
}



/* WHITE HEADER BACKGROUND */

.site-header{
    background:#ffffff;
}

/* USA FLAG */

.usa-flag{
    width:24px;
    height:auto;
    display:block;
    object-fit:contain;
    margin-right:8px;
}

/* ABOUT LINK */

.nav nav a{
    color:#222222;
    font-weight:600;
    font-size:14px;
    transition:color .2s ease;
}

.nav nav a:hover{
    color:var(--accent);
}


/* =========================================================
   SERVERS MEGA MENU
========================================================= */

.servers-dropdown{
    position:static;
    z-index:1001;
}

.servers-dropdown-btn{
    display:flex;
    align-items:center;

    min-height:42px;

    padding:0;

    border:0;
    outline:0;

    background:transparent;

    color:#eeeeee;

    font-family:inherit;

    font-size:13px;
    font-weight:700;

    text-transform:uppercase;

    cursor:pointer;

    transition:color .2s ease;
}

.servers-dropdown-btn:hover{
    color:var(--accent);
}

.servers-mega-menu{
    position:absolute;

    top:100%;
    left:50%;

    width:100vw;

    max-height:calc(100vh - 114px);

    overflow-y:auto;

    padding:
        20px
        max(4%,calc((100% - 1120px) / 2));

    background:
        linear-gradient(
            180deg,
            rgba(18,18,18,.98) 0%,
            rgba(12,12,12,.98) 100%
        );

    border-top:
        1px solid rgba(255,255,255,.08);

    border-bottom:
        1px solid rgba(255,255,255,.08);

    box-shadow:
        0 12px 30px rgba(0,0,0,.3);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transform:translate(-50%,-6px);

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;

    z-index:99999;
}

.servers-mega-menu::before{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:2px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            var(--accent) 50%,
            transparent 100%
        );

    opacity:.8;
}

.servers-dropdown.is-open .servers-mega-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate(-50%,0);
}

.servers-mega-menu [hidden] {
    display: none !important;
}


/* =========================================================
   FEATURED SERVER CARDS
========================================================= */

.servers-mega-featured{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:14px;

    padding-bottom:18px;

    border-bottom:
        1px solid rgba(255,255,255,.1);
}

.servers-mega-card{
    display:block;

    overflow:hidden;

    border:
        1px solid rgba(255,255,255,.12);

    border-radius:8px;

    background:#1b1b1b;

    transition:
        border-color .2s ease,
        transform .2s ease;
}

.servers-mega-card:hover{
    border-color:var(--accent);
    transform:translateY(-2px);
}

.servers-mega-card-image{
    width:100%;
    height:105px;

    background:#ffffff;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    padding:4px;
}

.servers-mega-card-image img{
    width:100%;
    height:100%;

    object-fit:contain;
    display:block;

    transform:scale(1.8);

    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag:none;
}

.servers-mega-card-title{
    padding:9px 10px;

    color:#fff;

    font-size:12px;
    font-weight:700;
    line-height:1.3;
}


/* =========================================================
   SERVER BRAND TABS
========================================================= */

.servers-mega-brands{
    display:flex;
    flex-wrap:wrap;

    gap:4px;

    padding:14px 0;
}

.serversMega-brandTab{
    border:0;

    background:transparent;

    color:#eeeeee;

    font-family:inherit;

    font-size:13px;
    font-weight:700;

    cursor:pointer;

    padding:10px 14px;
    margin:0;

    transition:
        background .2s ease,
        color .2s ease;
}

.serversMega-brandTab:hover{
    background:
        rgba(244,81,30,.15);

    color:#ffffff;
}

.serversMega-brandTab.is-active{
    background:var(--accent);
    color:#ffffff;
}


/* =========================================================
   BRAND PANELS
========================================================= */

.server-brand-panel{
    display:none;
}

.server-brand-panel.is-active{
    display:block;
}


/* =========================================================
   SERVER TYPE BAR
========================================================= */

.servers-mega-server-types{
    display:flex;

    width:100%;

    gap:0;

    margin:0 0 16px;
    padding:0;

    border-bottom:
        1px solid rgba(255,255,255,.12);
}

.serversMega-typeTab{
    flex:0 0 auto;

    border:0;

    border-bottom:
        2px solid transparent;

    background:transparent;

    color:#999999;

    padding:8px 18px;

    margin:0;

    border-radius:0;

    font-family:inherit;

    font-size:11px;
    font-weight:800;

    text-transform:uppercase;

    cursor:pointer;

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease;
}

.serversMega-typeTab:hover{
    color:#ffffff;

    background:
        rgba(255,255,255,.04);
}

.serversMega-typeTab.is-active{
    color:#ffffff;

    background:
        rgba(244,81,30,.12);

    border-bottom-color:
        var(--accent);
}


/* =========================================================
   SERVER TYPE PANELS
========================================================= */

.serversMega-serverTypePanel{
    display:none;

    grid-template-columns:
        repeat(5,minmax(0,1fr));

    gap:28px;

    width:100%;

    padding:0 0 18px;
}

.serversMega-serverTypePanel.is-active{
    display:grid;
}


/* =========================================================
   SERVER GENERATIONS
========================================================= */

.serversMega-serverTypePanel
.servers-mega-generation{
    min-width:0;
}

.serversMega-serverTypePanel
.servers-mega-generation h4{
    margin:0 0 7px;

    padding:0 0 6px;

    color:#ffffff;

    font-size:11px;
    font-weight:800;

    text-transform:uppercase;

    border-bottom:
        1px solid rgba(255,255,255,.12);
}

.serversMega-serverTypePanel
.servers-mega-generation a{
    display:block;

    padding:4px 7px;

    border-radius:4px;

    color:#bbbbbb;

    font-size:11px;
    font-weight:600;

    line-height:1.35;

    transition:
        background .15s ease,
        color .15s ease,
        padding-left .15s ease;
}

.serversMega-serverTypePanel
.servers-mega-generation a:hover{
    background:var(--accent);
    color:#ffffff;
    padding-left:11px;
}


/* =========================================================
   SERVER FOOTER
========================================================= */

.servers-mega-footer{
    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:6px 14px;

    padding-top:14px;

    border-top:
        1px solid rgba(255,255,255,.1);
}

.servers-mega-footer span{
    color:#888888;

    font-size:11px;
    font-weight:700;

    text-transform:uppercase;
}

.servers-mega-footer a{
    color:#bbbbbb;

    font-size:11px;
    font-weight:600;
}

.servers-mega-footer a:hover{
    color:var(--accent);
}

.servers-mega-menu::-webkit-scrollbar{
    width:6px;
}

.servers-mega-menu::-webkit-scrollbar-track{
    background:
        rgba(255,255,255,.04);
}

.servers-mega-menu::-webkit-scrollbar-thumb{
    background:
        rgba(255,255,255,.25);

    border-radius:10px;
}

.servers-mega-menu::-webkit-scrollbar-thumb:hover{
    background:
        rgba(255,255,255,.4);
}


/* VIEW ALL SERVERS */
.servers-mega-view-all {
    display: flex;
    justify-content: center;
    padding: 10px 16px;
    border-top: 1px solid #333;
    background: #111;
}

.servers-mega-view-all a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 14px;
    color: #fff;
    background: #f4511e;
    border: 1px solid #f4511e;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.3;
    transition: background-color .2s ease,
                border-color .2s ease,
                box-shadow .2s ease;
}

.servers-mega-view-all a:hover {
    color: #fff;
    background: #d93e10;
    border-color: #d93e10;
    box-shadow: 0 2px 8px rgba(244, 81, 30, .25);
}

.servers-mega-view-all a span {
    display: inline-block;
    font-size: 14px;
    transition: transform .2s ease;
}

.servers-mega-view-all a:hover span {
    transform: translateX(3px);
}

.servers-mega-view-all a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}



/* =========================================================
   FEATURED SERVER HARDWARE SECTION
========================================================= */

.featured-server-section{
    display:flex;

    align-items:center;

    min-height:210px;

    background:
        radial-gradient(
            circle at 50% 0%,
            #eeeeee 0%,
            #f5f5f5 45%,
            #ffffff 100%
        );

    border-top:1px solid #e5e5e5;
    border-bottom:1px solid #e5e5e5;
}



/* =========================================================
   FEATURED PRODUCT CAROUSEL
========================================================= */

.featured-carousel{
    position:relative;
    width:100%;
}

#featured-products{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:20px;
    scroll-behavior:smooth;
    cursor:grab;
    scrollbar-width:none;
    user-select:none;
    -webkit-user-select:none;
    padding:6px 4px 10px;
    margin:-6px -4px -10px;
}

#featured-products::-webkit-scrollbar{
    display:none;
}

#featured-products:active{
    cursor:grabbing;
}

/* Desktop: 6 product cards visible */
#featured-products .product-card{
    flex:0 0 calc((100% - 100px) / 6);
    min-width:0;
    box-sizing:border-box;
    user-select:none;
    -webkit-user-select:none;
}

#featured-products img{
    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag:none;
    pointer-events:none;
}

/* Tablet: 4 cards visible */
@media (max-width:1200px){
    #featured-products .product-card{
        flex-basis:calc((100% - 60px) / 4);
    }
}

/* Small tablet: 3 cards visible */
@media (max-width:800px){
    #featured-products .product-card{
        flex-basis:calc((100% - 40px) / 3);
    }
}

/* Mobile: 2 cards visible */
@media (max-width:560px){
    #featured-products .product-card{
        flex-basis:calc((100% - 20px) / 2);
    }
}



/* =========================================================
   FEATURED CAROUSEL ARROWS
========================================================= */

.featured-arrow{
    position:absolute;

    top:50%;

    transform:translateY(-50%);

    z-index:5;

    width:32px;
    height:32px;

    border:1px solid #dddddd;

    border-radius:50%;

    background:#ffffff;
    color:#222222;

    font-size:17px;
    line-height:32px;

    display:flex;
    align-items:center;
    justify-content:center;

    text-align:center;

    cursor:pointer;

    transition:.2s ease;

    padding:0;
}

.featured-arrow:hover{
    background:#f4511e;
    border-color:#f4511e;
    color:#ffffff;
}

.featured-arrow-left{
    left:-16px;
}

.featured-arrow-right{
    right:-16px;
}


/* =========================================================
   VIEW MORE CATEGORIES BUTTON
========================================================= */

#view-more-categories{
    padding:8px 13px !important;

    font-size:12px !important;

    font-family:inherit;
    font-weight:700;
    line-height:normal;

    border:0 !important;
    outline:none !important;

    box-shadow:none !important;

    appearance:none;
    -webkit-appearance:none;
}

#view-more-categories:hover,
#view-more-categories:focus,
#view-more-categories:active{
    padding:8px 13px !important;

    border:0 !important;
    outline:none !important;

    box-shadow:none !important;

    transform:none !important;
}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media(max-width:800px){

    .nav{
        min-height:72px;
    }

    .menu-toggle{
        display:block;
    }

    .nav nav{
        display:none;

        position:absolute;

        top:72px;

        left:0;
        right:0;

        background:#fff;

        padding:18px 4%;

        border-bottom:1px solid var(--border);

        flex-direction:column;

        align-items:flex-start;

        gap:14px;

        z-index:1000;
    }

    .nav.open nav{
        display:flex;
    }

    .header-search{
        max-width:none;
        flex:1;
    }

    .hero{
        padding:60px 0;
    }

    .hero-grid,
    .product-grid,
    .footer-grid{
        grid-template-columns:1fr;
    }

    .product-image{
        aspect-ratio:1/1;
    }

    .product-body{
        padding:15px;
    }

    .product-body h3{
        font-size:14px;

        height:38px;
        min-height:38px;
    }

    .article h1{
        font-size:38px;
    }

    .section{
        padding:55px 0;
    }


    /* =====================================================
       CATEGORY / BRAND PAGE HEADINGS
    ===================================================== */

    #page-eyebrow{
        margin-bottom:7px;

        font-size:11px;

        letter-spacing:1.4px;
    }

    #category-title{
        font-size:30px;

        line-height:1.15;

        letter-spacing:-0.5px;
    }

    #category-description{
        margin-top:10px;

        font-size:15px;

        line-height:1.55;
    }


    /* =====================================================
       MOBILE CATEGORY / BRAND GRID
    ===================================================== */

    .category-grid,
    .brand-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:16px;
    }

    .category-card{
        min-height:130px;
        padding:20px;
    }

    .category-card strong{
        font-size:16px;
    }

    .brand-card{
        min-height:130px;
        padding:20px;
    }

    .brand-logo{
        min-height:60px;
    }

    .brand-logo strong{
        font-size:20px;
    }


    /* =====================================================
       MOBILE SUBNAV
    ===================================================== */

    .header-subnav-inner{
        gap:18px;

        overflow-x:auto;

        white-space:nowrap;
    }

    .header-subnav-inner::-webkit-scrollbar{
        display:none;
    }


    /* =====================================================
       MOBILE CATEGORY DROPDOWN
    ===================================================== */

    .subnav-dropdown-menu{
        position:fixed;

        top:114px;

        left:4%;

        width:92%;

        min-width:0;
        max-width:none;

        max-height:70vh;

        padding:18px;

        display:block;

        border:
            1px solid
            rgba(255,255,255,.10);

        border-radius:8px;

        transform:translateY(-6px);
    }

    .subnav-dropdown.is-open
    .subnav-dropdown-menu{
        transform:translateY(0);
    }


    /* =====================================================
       MOBILE CATEGORY LIST
    ===================================================== */

    .category-list{
        display:grid;

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        grid-template-rows:none;

        grid-auto-flow:row;

        column-gap:18px;
        row-gap:8px;

        width:100%;
        min-width:0;
    }

    .category-list a{
        display:flex;
        align-items:center;

        width:100%;
        min-width:0;
        min-height:34px;

        padding:6px 8px;

        font-size:10px;
        line-height:1.3;

        white-space:normal;

        overflow-wrap:break-word;
        word-break:normal;
    }


    /* =====================================================
       MOBILE VIEW ALL
    ===================================================== */

    .category-dropdown-footer{
        margin-top:14px;
        padding-top:12px;
    }

    .category-dropdown-footer .view-all-category{
        width:70% !important;
    }


    /* =====================================================
       MOBILE BRANDS DROPDOWN
    ===================================================== */

    .brands-dropdown-menu{
        position:fixed;

        top:114px;

        left:4%;

        width:92%;

        min-width:0;
        max-width:none;

        max-height:70vh;

        padding:18px;

        border:
            1px solid
            rgba(255,255,255,.10);

        border-radius:8px;

        transform:translateY(-6px);
    }

    .brands-dropdown.is-open
    .brands-dropdown-menu{
        transform:translateY(0);
    }

    .brands-dropdown-menu a{
        white-space:normal;
    }


    /* =====================================================
       MOBILE FEATURED ARROWS
    ===================================================== */

    .featured-arrow{
        width:30px;
        height:30px;
        font-size:16px;
    }

    .featured-arrow-left{
        left:-6px;
    }

    .featured-arrow-right{
        right:-6px;
    }


    /* =====================================================
       MOBILE SERVERS MEGA MENU
    ===================================================== */

    .servers-mega-menu{
        position:fixed;

        top:114px;

        left:4%;

        width:92%;

        max-height:70vh;

        padding:14px;

        transform:translateY(-5px);
    }

    .servers-dropdown.is-open
    .servers-mega-menu{
        transform:translateY(0);
    }

    .servers-mega-featured{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .serversMega-serverTypePanel{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:20px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:500px){

    .subnav-dropdown-menu{
        padding:16px;
        border-radius:7px;
    }

    .category-list{
        grid-template-columns:1fr;

        grid-template-rows:none;

        grid-auto-flow:row;

        row-gap:10px;
    }

    .category-list a{
        min-height:34px;

        font-size:11px;

        padding:8px 10px;
    }

    .category-dropdown-footer{
        margin-top:14px;
        padding-top:12px;
    }

    .category-dropdown-footer .view-all-category{
        width:90% !important;

        font-size:10px !important;

        padding:5px 12px !important;
    }


    /* =====================================================
       SMALL MOBILE CATEGORY / BRAND CARDS
    ===================================================== */

    .category-grid,
    .brand-grid{
        grid-template-columns:1fr;

        gap:14px;
    }

    .category-card{
        min-height:110px;
        padding:18px;
    }

    .brand-card{
        min-height:110px;
        padding:18px;
    }


    /* =====================================================
       SMALL MOBILE BRANDS
    ===================================================== */

    .brands-dropdown-menu{
        grid-template-columns:1fr;

        grid-auto-flow:row;

        row-gap:10px;

        padding:16px;

        border-radius:7px;
    }

    .brands-dropdown-menu a{
        font-size:11px;
        padding:8px 10px;
    }


    /* =====================================================
       SMALL MOBILE SERVERS
    ===================================================== */

    .servers-mega-featured{
        grid-template-columns:1fr;
    }

    .serversMega-serverTypePanel{
        grid-template-columns:1fr;
    }

    .serversMega-typeTab{
        padding:8px 12px;
    }

}


/* HOMEPAGE FEATURED CATEGORY ICONS ONLY */

.homepage-featured-categories .homepage-icon-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.homepage-featured-categories .homepage-icon-card {
    min-width: 0;
    min-height: 145px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 10px;
    text-align: center;
    text-decoration: none;
}

.homepage-featured-categories .homepage-category-icon {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: #fff0e9;
    color: #f4511e;
    font-size: 30px;
    transition: background 0.2s ease, color 0.2s ease;
}

.homepage-featured-categories .homepage-icon-card strong {
    font-size: 13px;
    line-height: 1.45;
}

.homepage-featured-categories .homepage-icon-card:hover
.homepage-category-icon {
    background: #f4511e;
    color: #fff;
}

@media (max-width: 768px) {
    .homepage-featured-categories .homepage-icon-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .homepage-featured-categories .homepage-icon-card {
        min-height: 125px;
    }
}

@media (max-width: 420px) {
    .homepage-featured-categories .homepage-icon-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}





/* =========================================================
   BLOG SECTION — GRABBABLE + AUTO-SLIDING CAROUSEL
========================================================= */

.blog-section {
    padding-top: 40px;
    padding-bottom: 50px;
}

.blog-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 25px;
}

.blog-heading h2 {
    margin: 0 0 10px;
    color: var(--dark);
}

.blog-heading .lead {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

/* HORIZONTAL BLOG CAROUSEL */

.blog-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    align-items: stretch;

    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;

    padding: 6px 4px 12px;
    margin: -6px -4px -12px;

    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-x pan-y;
}

.blog-grid::-webkit-scrollbar {
    display: none;
}

.blog-grid:active,
.blog-grid.is-dragging {
    cursor: grabbing;
}

.blog-grid.is-dragging {
    scroll-snap-type: none;
    scroll-behavior: auto;
}

/* DESKTOP — 4 CARDS VISIBLE */

.blog-grid .blog-card {
    display: flex;
    flex: 0 0 calc((100% - 60px) / 4);
    flex-direction: column;

    min-width: 0;
    overflow: hidden;

    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;

    scroll-snap-align: start;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.blog-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .08);
}

/* LANDSCAPE ARTICLE IMAGES */

.blog-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f5f5f5;
}

.blog-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;

    transition: transform .3s ease;
}

.blog-card:hover .blog-image img {
    transform: scale(1.04);
}

/* ARTICLE CONTENT */

.blog-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
}

.blog-category {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.blog-content h3 {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 1.4;
}

.blog-content h3 a {
    color: var(--dark);
    text-decoration: none;
    transition: color .2s ease;
}

.blog-content h3 a:hover {
    color: var(--accent);
}

.blog-content p {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.blog-read-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.blog-read-more:hover {
    gap: 11px;
}

.blog-read-more span {
    display: inline-block;
    transition: transform .2s ease;
}

.blog-read-more:hover span {
    transform: translateX(2px);
}

/* TABLET — 2 CARDS VISIBLE */

@media (max-width: 1000px) {
    .blog-grid .blog-card {
        flex-basis: calc((100% - 20px) / 2);
    }
}

/* MOBILE — 1 CARD PLUS A PREVIEW OF THE NEXT */

@media (max-width: 600px) {
    .blog-section {
        padding-top: 30px;
        padding-bottom: 35px;
    }

    .blog-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }

    .blog-grid {
        gap: 14px;
    }

    .blog-grid .blog-card {
        flex-basis: 85%;
    }

    .blog-content {
        padding: 18px;
    }

    .blog-content h3 {
        font-size: 17px;
    }
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
    .blog-card,
    .blog-image img,
    .blog-read-more,
    .blog-read-more span {
        transition: none;
    }

    .blog-grid {
        scroll-behavior: auto;
    }

    .blog-card:hover {
        transform: none;
    }

    .blog-card:hover .blog-image img {
        transform: none;
    }
}



/* =========================================================
   WISHLIST HEART BUTTON
========================================================= */

.wishlist-button {
    position: absolute;
    top: 9px;
    right: 9px;
    z-index: 5;
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    color: #777;
    cursor: pointer;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.08);
    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.wishlist-button svg {
    display: block;
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    margin: 0;
    transition: filter 0.2s ease, transform 0.2s ease;
}

.wishlist-button:hover {
    color: #f4511e;
    background: #fff5f0;
    border-color: rgba(244, 81, 30, 0.2);
    box-shadow: 0 3px 10px rgba(244, 81, 30, 0.18);
    transform: translateY(-1px);
}

.wishlist-button.is-saved {
    color: #f4511e;
    background: #fff0e9;
    border-color: rgba(244, 81, 30, 0.25);
    box-shadow: 0 2px 9px rgba(244, 81, 30, 0.2);
}

.wishlist-button.is-saved svg {
    filter: drop-shadow(0 1px 2px rgba(244, 81, 30, 0.18));
    animation: heart-save 0.28s ease-out;
}

.wishlist-button:active {
    transform: scale(0.9);
}

.wishlist-button:focus-visible {
    outline: 2px solid #f4511e;
    outline-offset: 3px;
}

.product-card {
    position: relative;
}

@keyframes heart-save {
    0% {
        transform: scale(0.7);
    }

    65% {
        transform: scale(1.18);
    }

    100% {
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wishlist-button,
    .wishlist-button svg {
        transition: none;
        animation: none;
    }
}


/* =========================================================
   SAVED ITEMS HEADER LINK AND COUNT BADGE
========================================================= */

.saved-items-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    color: #333;
    text-decoration: none;
    transition: color 0.2s ease;
}

.saved-items-link:hover {
    color: #f4511e;
}

.saved-items-link svg {
    display: block;
    width: 21px;
    height: 21px;
}

.saved-items-link [data-wishlist-count]:not([hidden]) {
    position: absolute;
    top: 0;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 10px;
    background: #f4511e;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}


/* =========================================================
   CLEAR ALL SAVED ITEMS BUTTON
========================================================= */

.clear-saved-items {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 13px;
    border: 1px solid #f0d5ce;
    border-radius: 7px;
    background: #fff;
    color: #d94324;
    font-family: inherit;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.clear-saved-items:hover {
    background: #fff1ed;
    border-color: #f4511e;
    box-shadow: 0 2px 7px rgba(244, 81, 30, 0.1);
}

.clear-saved-items:focus-visible {
    outline: 2px solid #f4511e;
    outline-offset: 3px;
}

.clear-saved-items:active {
    background: #ffe5dc;
}

.clear-saved-items svg {
    display: block;
    flex-shrink: 0;
}


/* =========================================================
   SAVED ITEMS RESPONSIVE STYLES
========================================================= */

@media (max-width: 420px) {
    .saved-items-toolbar {
        align-items: flex-start;
        gap: 12px;
    }

    .clear-saved-items {
        padding: 8px 10px;
        font-size: 11px;
    }
}


/* =========================================================
   REDUCED MOTION ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .clear-saved-items,
    .saved-items-link {
        transition: none;
    }
}


/* =========================================================
   CLEAR ALL BUTTON BELOW SAVED PRODUCTS
========================================================= */

.saved-items-clear-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 30px 0 10px;
}

.clear-saved-items {
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border: 1px solid #f0d5ce;
    border-radius: 7px;
    background: #fff;
    color: #d94324;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.clear-saved-items:not([hidden]) {
    display: inline-flex;
}

.clear-saved-items:hover {
    background: #fff1ed;
    border-color: #f4511e;
}

@media (max-width: 420px) {
    .saved-items-clear-wrapper {
        margin-top: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .clear-saved-items {
        transition: none;
    }
}



/* =========================================================
   SAVED ITEMS — MATCH EXISTING PRODUCT CARDS
========================================================= */

.saved-items-grid,
#saved-items-grid,
#wishlist-products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.saved-items-grid .product-card,
#saved-items-grid .product-card,
#wishlist-products .product-card {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    transition: .2s ease;
}

.saved-items-grid .product-card:hover,
#saved-items-grid .product-card:hover,
#wishlist-products .product-card:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
}

.saved-items-grid .product-image,
#saved-items-grid .product-image,
#wishlist-products .product-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
}

.saved-items-grid .product-image img,
#saved-items-grid .product-image img,
#wishlist-products .product-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.saved-items-grid .product-body,
#saved-items-grid .product-body,
#wishlist-products .product-body {
    padding: 17px;
}

.saved-items-grid .product-body h3,
#saved-items-grid .product-body h3,
#wishlist-products .product-body h3 {
    height: 61px;
    min-height: 61px;
    margin: 7px 0 8px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    font-size: 15px;
    line-height: 1.35;
}

.saved-items-grid .product-condition,
#saved-items-grid .product-condition,
#wishlist-products .product-condition {
    display: block;
    margin-top: 8px;
    margin-bottom: 4px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.2;
}

.saved-items-grid .product-price,
#saved-items-grid .product-price,
#wishlist-products .product-price {
    margin: 8px 0 14px;
    color: #111;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
}

.saved-items-grid .wishlist-button,
#saved-items-grid .wishlist-button,
#wishlist-products .wishlist-button {
    position: absolute;
    top: 9px;
    right: 9px;
    z-index: 5;
}

@media (max-width: 1000px) {
    .saved-items-grid,
    #saved-items-grid,
    #wishlist-products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .saved-items-grid,
    #saved-items-grid,
    #wishlist-products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .saved-items-grid .product-body,
    #saved-items-grid .product-body,
    #wishlist-products .product-body {
        padding: 15px;
    }

    .saved-items-grid .product-body h3,
    #saved-items-grid .product-body h3,
    #wishlist-products .product-body h3 {
        height: 38px;
        min-height: 38px;
        font-size: 14px;
    }
}



/* =========================================================
   BROWSE PRODUCTS / ADVANCED FILTER LINK
========================================================= */

.advanced-filter-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;
    min-height: 42px;
    padding: 0;
    margin: 0;

    color: #eeeeee;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;

    border: 0;
    border-radius: 0;
    background: transparent;

    transition: color 0.2s ease;
}

.advanced-filter-link:hover,
.advanced-filter-link:focus-visible {
    color: var(--accent);
    background: transparent;
}

.advanced-filter-link svg {
    display: none;
}

#servers-mega-menu [hidden] {
    display: none !important;
}




/* =========================================================
   FEATURED STORAGE CAROUSEL — 6 CARDS / 12 PRODUCTS
========================================================= */

.storage-carousel {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: visible;
}

/* Horizontal scrolling area */
#featured-storage-products {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 20px;

    width: 100%;
    min-width: 0;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;

    padding: 8px 4px 16px;
    margin: 0;
    box-sizing: border-box;
}

#featured-storage-products::-webkit-scrollbar {
    display: none;
}

/* Desktop: 6 visible cards */
#featured-storage-products .product-card {
    flex: 0 0 calc((100% - 100px) / 6);
    width: calc((100% - 100px) / 6);
    min-width: 0;
    max-width: none;
    box-sizing: border-box;

    scroll-snap-align: start;
}

/* Tablet: 4 visible cards */
@media (max-width: 1200px) {
    #featured-storage-products .product-card {
        flex-basis: calc((100% - 60px) / 4);
        width: calc((100% - 60px) / 4);
    }
}

/* Small tablet: 3 visible cards */
@media (max-width: 900px) {
    #featured-storage-products .product-card {
        flex-basis: calc((100% - 40px) / 3);
        width: calc((100% - 40px) / 3);
    }
}

/* Mobile: 2 visible cards */
@media (max-width: 560px) {
    #featured-storage-products {
        gap: 14px;
    }

    #featured-storage-products .product-card {
        flex-basis: calc((100% - 14px) / 2);
        width: calc((100% - 14px) / 2);
    }
}



/* SHOP ALL PRODUCTS */
.shop-all-products-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    color: #fff;
    background: var(--accent, #f4511e);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 5px;
    transition: background .25s ease, transform .25s ease,
                box-shadow .25s ease;
}

.shop-all-products-link:hover {
    background: #d94012;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(244, 81, 30, .22);
}



/* =========================================================
   SERVER MODEL PAGE — FINAL TYPOGRAPHY OVERRIDES
========================================================= */

.server-page .server-page-header h1{
    font-size:32px !important;
    font-weight:600 !important;
    line-height:1.3 !important;
    letter-spacing:-0.5px !important;
}

.server-page .server-page-header p:not(.eyebrow){
    font-size:13px !important;
    font-weight:500 !important;
    line-height:1.6 !important;
}

.server-page .generation-title h2{
    font-size:16px !important;
    font-weight:600 !important;
    line-height:1.4 !important;
}

.server-page .model-card{
    font-size:13px !important;
    font-weight:500 !important;
}

.server-page .model-card span:first-child{
    color:inherit;
    font-size:13px !important;
    font-weight:500 !important;
}

.server-page .model-card span:last-child{
    flex-shrink:0;
    margin-left:10px;
    color:#999;
    font-size:18px !important;
    font-weight:400 !important;
}

.server-page .model-card:hover span{
    color:var(--accent);
}

@media(max-width:800px){
    .server-page .server-page-header h1{
        font-size:30px !important;
    }
}

.no-products-found {
    grid-column: 1 / -1;
    width: 100%;
    padding: 55px 20px;
    text-align: center;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 16px;
}

.no-products-found > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 18px;
    border-radius: 18px;
    background: #fff0e9;
    color: #f4511e;
    font-size: 26px;
}

.no-products-found h3 {
    margin: 0 0 10px;
    color: #222;
    font-size: 22px;
}

.no-products-found p {
    max-width: 440px;
    margin: 0 auto 22px;
    color: #666;
    font-size: 14px;
    line-height: 1.7;
}

.no-products-found .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}