td.BGyellow{font-size:11px;vertical-align:middle;text-align:center; background-color:#FFFDE1; background:#FFFDE1;border-bottom:1px solid #eeeedd;padding:1px}
td.BGmusic,td.BGvideo{font-size:12px;vertical-align:middle;text-align:center; background-color:#E6FFE5;background:#E6FFE5;border-bottom:1px solid #aaccaa}
td.otherHW{font-size:12px;vertical-align:middle;text-align:center; background-color:#E5FDFF; background:#E5FDFF;border-bottom:1px solid #aaccaa}
td.otherSW{font-size:11px;vertical-align:middle;text-align:center; background-color:#E5E6FF; background:#E5E6FF;border-bottom:1px solid #aaaacc}
td.other{font-size:12px;vertical-align:middle;text-align:center; background-color:#FFF7F7; background:#FFF7F7;border-bottom:1px solid #ccaaaa} 
body{text-align:left}
#CategoryType{font-size:16px;font-weight:bold;color:#666;padding:0 0 0 0;margin:0 0 0 0}
#CategoryTop{font-size:16px;font-weight:bold;color:#000077;padding:0 0 0 0;margin:0 0 0 0}
#LatestProductH{font-size:16px;font-weight:bold;color:#000;padding:0 0 0 0;margin:0 0 0 0}
#SubCatBottom{font-size:14px;}




html {
    scroll-behavior: smooth;
}

/*
 * =========================================================
 * GLOBAL BOX SIZING
 * =========================================================
 */

.categorylist-directory,
.categorylist-directory *,
.catmap-view-switch,
.catmap-view-switch *,
.categorylist-empty-controls,
.categorylist-empty-controls * {
    box-sizing: border-box;
}


/*
 * =========================================================
 * TOP NAVIGATION
 * =========================================================
 *
 * View all other categories
 * View all other brands
 */

.catmap-view-switch {
    display: flex;
    gap: 8px;

    width: 100%;

    margin: 12px 0 16px 0;
}


.catmap-view-button {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 1 1 0;

    min-width: 0;
    min-height: 44px;

    padding: 9px 14px;

    background: #f5f7f8;

    border: 1px solid #d5dade;
    border-radius: 8px;

    color: #333333;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;

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

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
}


.catmap-view-button:hover {
    background: #eaf0f3;

    border-color: #b5c0c7;

    color: #222222;

    text-decoration: none;

    transform: translateY(-1px);

    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.08);
}


/*
 * =========================================================
 * CATEGORY DIRECTORY
 * =========================================================
 */

.categorylist-directory {
    width: 100%;

    font-family: Arial, Helvetica, sans-serif;
}


/*
 * =========================================================
 * MASTER CATEGORY GROUP
 * =========================================================
 */

.categorylist-master {
    width: 100%;

    margin: 14px 0 22px 0;
}


/*
 * =========================================================
 * MASTER HEADING
 * =========================================================
 */

.nestedcat-master-heading {
    width: 100%;

    overflow: hidden;

    background: #e9edf0;

    border: 1px solid #cbd2d7;
    border-radius: 8px;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}


.nestedcat-master-heading > a {
    display: flex;
    align-items: center;

    gap: 10px;

    width: 100%;
    min-height: 48px;

    padding: 10px 13px;

    color: #252525;

    text-decoration: none;
}


.nestedcat-master-heading:hover {
    background: #e1e7eb;

    border-color: #b5c0c7;

    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.06);
}


.nestedcat-master-heading:hover > a {
    text-decoration: none;
}


/*
 * Master category name
 */

.nestedcat-master-name {
    flex: 1 1 auto;

    min-width: 0;

    color: #252525;

    font-size: 17px;
    font-weight: 700;
    line-height: 21px;

    overflow-wrap: anywhere;
}


/*
 * Master subcategory count
 *
 * Example:
 * 8 subcategories
 */

.categorylist-master-count {
    flex: 0 0 auto;

    padding: 3px 8px;

    background: #ffffff;

    border: 1px solid #d4d9dd;
    border-radius: 13px;

    color: #666666;

    font-size: 10px;
    font-weight: normal;
    line-height: 16px;

    white-space: nowrap;
}


/*
 * =========================================================
 * MASTER CHILD AREA
 * =========================================================
 */

.categorylist-master-children {
    margin-top: 7px;
}


/*
 * =========================================================
 * CATEGORY ROW
 * =========================================================
 */

.categorylist-item {
    width: auto;

    margin: 5px 0;

    overflow: hidden;

    background: #f5f7f8;

    border: 1px solid #d5dade;
    border-radius: 6px;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
}


.categorylist-item > a {
    display: flex;
    align-items: center;

    gap: 8px;

    width: 100%;
    min-height: 38px;

    padding: 7px 11px;

    color: #333333;

    text-decoration: none;
}


.categorylist-item:hover {
    background: #eaf0f3;

    border-color: #b5c0c7;

    transform: translateX(2px);

    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.06);
}


.categorylist-item:hover > a {
    color: #222222;

    text-decoration: none;
}


/*
 * =========================================================
 * CATEGORY NAME
 * =========================================================
 */

.categorylist-name {
    flex: 1 1 auto;

    min-width: 0;

    color: #333333;

    font-size: 12px;
    font-weight: 600;
    line-height: 17px;

    overflow-wrap: anywhere;
}


/*
 * =========================================================
 * PRODUCT COUNT
 * =========================================================
 */

.categorylist-count {
    flex: 0 0 auto;

    padding: 2px 7px;

    background: #ffffff;

    border: 1px solid #d4d9dd;
    border-radius: 12px;

    color: #666666;

    font-size: 10px;
    font-weight: normal;
    line-height: 15px;

    white-space: nowrap;
}


/*
 * =========================================================
 * DEPTH 1
 * =========================================================
 *
 * Direct subcategory of master.
 */

.categorylist-depth-1 {
    margin-left: 0;

    background: #f3f5f6;
}


.categorylist-depth-1 .categorylist-name {
    font-weight: 600;
}


/*
 * =========================================================
 * DEPTH 2
 * =========================================================
 */

.categorylist-depth-2 {
    margin-left: 24px;

    background: #f8f9fa;
}


.categorylist-depth-2 .categorylist-name {
    font-weight: 500;
}


/*
 * =========================================================
 * DEPTH 3
 * =========================================================
 *
 * Future support if added.
 */

.categorylist-depth-3 {
    margin-left: 48px;

    background: #fbfbfb;
}


.categorylist-depth-3 .categorylist-name {
    font-weight: 400;
}


/*
 * =========================================================
 * DEPTH 4
 * =========================================================
 */

.categorylist-depth-4 {
    margin-left: 72px;

    background: #fdfdfd;
}


.categorylist-depth-4 .categorylist-name {
    font-weight: 400;
}


/*
 * =========================================================
 * DEPTH 5
 * =========================================================
 */

.categorylist-depth-5 {
    margin-left: 96px;

    background: #ffffff;
}


.categorylist-depth-5 .categorylist-name {
    font-weight: 400;
}


/*
 * =========================================================
 * EMPTY CATEGORY BRANCH
 * =========================================================
 *
 * These are hidden initially by both CSS and JavaScript.
 *
 * A category is only marked empty when:
 *
 * - it has no products
 * AND
 * - none of its descendants have products
 */

/*
 * =========================================================
 * EMPTY CATEGORY BRANCHES
 * =========================================================
 */

.categorylist-empty {
    display: none;

    background: #f7f7f7;
    border-color: #e1e1e1;
}


.categorylist-empty .categorylist-name {
    color: #888888;
    font-weight: 400;
}


.categorylist-empty:hover {
    background: #eeeeee;
    border-color: #cccccc;
}


/*
 * Completely empty master category
 */

.categorylist-empty-master {
    display: none;
}


/*
 * ---------------------------------------------------------
 * REVEAL EMPTY CATEGORIES
 * ---------------------------------------------------------
 */

.categorylist-empty.categorylist-empty-visible {
    display: block;
}


.categorylist-empty-master.categorylist-empty-visible {
    display: block;
}


/*
 * =========================================================
 * COMPLETELY EMPTY MASTER
 * =========================================================
 *
 * Hidden if nothing anywhere underneath it has products.
 */

.categorylist-empty-master {
    display: none;
}


/*
 * When JavaScript reveals it, normal master styles apply.
 */


/*
 * =========================================================
 * EMPTY CATEGORY CONTROL
 * =========================================================
 */

.categorylist-empty-controls {
    width: 100%;

    margin: 16px 0 20px 0;
}


/*
 * Full-width button.
 */

.categorylist-empty-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 44px;

    padding: 9px 14px;

    background: #f5f7f8;

    border: 1px solid #d5dade;
    border-radius: 8px;

    color: #555555;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;

    text-align: center;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
}


.categorylist-empty-button:hover {
    background: #e9edf0;

    border-color: #b9c1c7;

    color: #333333;

    transform: translateY(-1px);

    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.07);
}


/*
 * Remove browser-specific button styling.
 */

button.categorylist-empty-button {
    appearance: none;
    -webkit-appearance: none;
}


/*
 * =========================================================
 * OPTIONAL VISUAL DIFFERENCE FOR REVEALED EMPTY ITEMS
 * =========================================================
 *
 * JavaScript sets display:inline/block again, but they
 * retain this lighter appearance.
 */

.categorylist-empty[style*="display: block"],
.categorylist-empty[style*="display: flex"] {
    opacity: 0.82;
}


/*
 * =========================================================
 * RESPONSIVE - MEDIUM
 * =========================================================
 */

@media (max-width: 700px) {

    /*
     * Top buttons
     */

    .catmap-view-switch {
        gap: 6px;
    }


    .catmap-view-button {
        padding: 8px 9px;

        font-size: 11px;
    }


    /*
     * Master
     */

    .nestedcat-master-name {
        font-size: 15px;
    }


    /*
     * Reduce indentation
     */

    .categorylist-depth-2 {
        margin-left: 14px;
    }


    .categorylist-depth-3 {
        margin-left: 28px;
    }


    .categorylist-depth-4 {
        margin-left: 42px;
    }


    .categorylist-depth-5 {
        margin-left: 56px;
    }
}


/*
 * =========================================================
 * RESPONSIVE - SMALL MOBILE
 * =========================================================
 */

@media (max-width: 450px) {

    /*
     * Stack top navigation.
     */

    .catmap-view-switch {
        flex-direction: column;
    }


    .catmap-view-button {
        width: 100%;
    }


    /*
     * Master heading
     */

    .nestedcat-master-heading > a {
        align-items: flex-start;

        flex-wrap: wrap;
    }


    .nestedcat-master-name {
        flex: 1 1 100%;

        font-size: 14px;
    }


    .categorylist-master-count {
        margin-top: 2px;
    }


    /*
     * Smaller category indentation.
     */

    .categorylist-depth-2 {
        margin-left: 10px;
    }


    .categorylist-depth-3 {
        margin-left: 20px;
    }


    .categorylist-depth-4 {
        margin-left: 30px;
    }


    .categorylist-depth-5 {
        margin-left: 40px;
    }


    /*
     * Allow count beneath very long names.
     */

    .categorylist-item > a {
        flex-wrap: wrap;
    }


    .categorylist-count {
        margin-left: auto;
    }


    /*
     * Empty toggle
     */

    .categorylist-empty-button {
        font-size: 11px;
    }
}

/* =========================================================
   PAGE BREADCRUMB
   ========================================================= */
.hardware-breadcrumb{margin:0 0 12px;padding:8px 10px;background:#f7f9fb;border:1px solid #dce3ea;border-radius:8px;color:#687789;font:12px/1.4 Arial,Helvetica,sans-serif}
.hardware-breadcrumb a{color:#245f9b;text-decoration:none}
.hardware-breadcrumb a:hover,.hardware-breadcrumb a:focus{text-decoration:underline}
.hardware-breadcrumb-separator{display:inline-block;padding:0 7px;color:#9aa5af}
.hardware-breadcrumb-current{color:#333;font-weight:bold}

/* =========================================================
   LATEST PRODUCT IMAGE BUTTONS
   Similar visual language to the laptop/computer selectors, but
   product price replaces the count badge.
   ========================================================= */
#LatestProductH{margin:22px 0 11px;padding:0 0 8px;border-bottom:1px solid #dce3ea;color:#173e69;font:bold 18px/1.3 Arial,Helvetica,sans-serif}
.centerDiv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;margin:0 0 18px;align-items:stretch;text-align:left}
.centerDiv .blockDiv{position:relative;float:none;width:auto;height:auto;min-width:0;min-height:190px;margin:0;padding:0;background:#fff;border:1px solid #d9e0e8!important;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.06);text-align:center;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.centerDiv .blockDiv:hover,.centerDiv .blockDiv:focus-within,.centerDiv .blockDiv.is-active{border-color:#7aa7dc!important;box-shadow:0 5px 16px rgba(25,75,130,.16);transform:translateY(-1px)}
.hardware-product-card{position:relative;display:block;width:100%;height:100%;min-height:190px;padding:14px 10px 54px;background:#fff;color:#163a63;text-decoration:none;box-sizing:border-box}
.hardware-product-card:hover,.hardware-product-card:focus{text-decoration:none;outline:0}
.hardware-product-image-area{display:flex;align-items:center;justify-content:center;width:100%;height:128px;overflow:hidden;background:#fff}
.hardware-product-image-area img{display:block;max-width:100%;max-height:128px;width:auto;height:auto;border:0}
.hardware-product-name{position:absolute;left:0;right:0;bottom:0;z-index:2;height:42px;display:flex;align-items:center;justify-content:center;padding:7px 8px;background:#f3f6fa;background:rgba(243,246,250,.97);border-top:1px solid #d9e0e8;color:#163a63;font:12px/1.2 Arial,Helvetica,sans-serif;text-align:center;overflow:hidden;box-sizing:border-box;transition:bottom .18s ease,background-color .18s ease,color .18s ease}
.hardware-product-name strong{margin-right:4px}
.centerDiv .blockDiv:hover .hardware-product-name,.centerDiv .blockDiv:focus-within .hardware-product-name,.centerDiv .blockDiv.is-active .hardware-product-name{bottom:50%;margin-bottom:-21px;background:#dff2df;background:rgba(223,242,223,.97);color:#173f20;border-top:1px solid #b8d9b8;border-bottom:1px solid #b8d9b8}
.hardware-product-price{position:absolute;top:8px;left:8px;z-index:4;display:block;padding:5px 9px;background:#111;color:#fff;border-radius:8px;font:bold 12px/1.25 Arial,Helvetica,sans-serif;white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,.28)}
.hardware-product-price-special{background:#c62828;color:#fff}
.hardware-product-promotion{display:block;margin-left:5px;font-size:10px;font-weight:bold;text-transform:uppercase}

/* Long category description remains below latest products. */
#moresubcatinfo{clear:both;margin-top:16px}

/* Future mobile-ready rules. The legacy outer 760px page still controls the
   actual viewport width today; these become useful when that shell is replaced. */
@media(max-width:600px){
.centerDiv{gap:8px}
.hardware-product-card{min-height:170px;padding-left:7px;padding-right:7px}
.hardware-product-image-area{height:110px}
.hardware-product-image-area img{max-height:110px}
.hardware-product-name{font-size:11px}
.hardware-product-price{top:6px;left:6px;font-size:11px}
}