/**
 * HPD Floating Categories
 * Desktop Shopping Navigation
 *
 * Hardware Parts Direct
 */


/* =========================================================
   FLOATING NAVIGATION
   ========================================================= */

.hpd-floating-categories {
    position: fixed;

    /*
     * Keep the rail well to the left of the main HPD content.
     * This creates clear visual separation from the catalog.
     */
    left: max(18px, calc((100vw - 1080px) / 2 - 205px));

    /*
     * Starting position below the HPD header area.
     */
    top: 100px;

    width: 104px;

    z-index: 800;

    box-sizing: border-box;

    /*
     * Allow the full rail to remain usable on shorter screens.
     */
    max-height: calc(100vh - 150px);
    overflow-y: auto;

    scrollbar-width: none;
}

.hpd-floating-categories::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   VERTICAL RAIL
   ========================================================= */

.hpd-floating-categories__rail {
    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 7px;

    width: 100%;
}


/* =========================================================
   CATEGORY CARD
   ========================================================= */

.hpd-floating-category-card {
    box-sizing: border-box;

    display: block;

    width: 94px;

    padding: 5px 5px 6px;

    background: #ffffff;

    border: 2px solid #ff8a00;
    border-radius: 14px;

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

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

    cursor: pointer;
}


/* =========================================================
   CATEGORY IMAGE
   ========================================================= */

.hpd-floating-category-card img {
    display: block;

    width: 68px;
    height: 68px;

    max-width: none;

    margin: 0 auto 3px;

    object-fit: cover;

    border-radius: 50%;
}


/* =========================================================
   CATEGORY LABEL
   ========================================================= */

.hpd-floating-category-card span {
    display: block;

    margin: 0;

    color: #0e2a47 !important;

    font-size: 10px;
    font-weight: 600;
    line-height: 1.1;

    text-align: center;

    text-decoration: none !important;
}


/* =========================================================
   HOVER
   ORANGE → HPD NAVY
   ========================================================= */

.hpd-floating-category-card:hover {
    border-color: #0e2a47;

    box-shadow:
        0 4px 10px rgba(14, 42, 71, .16);

    transform: none;

    text-decoration: none !important;
}

.hpd-floating-category-card:hover span {
    color: #0e2a47 !important;
}


/* =========================================================
   KEYBOARD ACCESSIBILITY
   ========================================================= */

.hpd-floating-category-card:focus-visible {
    outline: 2px solid #0e2a47;
    outline-offset: 3px;
}


/* =========================================================
   RESPONSIVE DESKTOP SAFETY

   Hide the rail when there is not enough horizontal room.
   This prevents it from touching or covering the catalog.
   ========================================================= */

@media (max-width: 1280px) {

    .hpd-floating-categories {
        display: none !important;
    }

}


/* =========================================================
   TABLET + MOBILE
   ========================================================= */

@media (max-width: 980px) {

    .hpd-floating-categories {
        display: none !important;
    }

}