/*
 * PartsDone Header Mega Menu
 * Clean final version.
 *
 * Features preserved:
 * - Sticky Hyvä/Magento header, not fixed
 * - Existing Hyvä logo/search/account/cart blocks
 * - Existing FitmentPro consolidated header vehicle block
 * - Content-width header/category/dropdown alignment
 * - Category image mega menu
 * - Initial letters for categories without images
 */

/* ------------------------------
   Header shell / sticky behavior
------------------------------ */

.page-wrapper {
    padding-top: 0 !important;
}

.page-wrapper > header.page-header,
header.page-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    width: 100% !important;
    background: #fff !important;
}

#header.pd-stage2-header {
    width: 100% !important;
    background: #fff !important;
    border-bottom: 0 !important;
}

/* ------------------------------
   Main header row
------------------------------ */

.pd-stage2-header,
.pd-stage2-header *,
.pd-hmm,
.pd-hmm * {
    box-sizing: border-box;
}

.pd-stage2-main {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    gap: 0 !important;
}

.pd-stage2-logo {
    flex: 0 0 auto !important;
    min-width: 0 !important;
}

.pd-stage2-logo img {
    max-height: 56px !important;
    width: auto !important;
}

/* Desktop search: fills available space until vehicle/profile/cart controls */
.pd-stage2-search {
    flex: 1 1 auto !important;
    max-width: none !important;
    min-width: 320px !important;
    margin-left: 2rem !important;
    margin-right: 2rem !important;
}

.pd-stage2-search .container,
.pd-stage2-search search,
.pd-stage2-search form {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pd-stage2-search .form-input,
.pd-stage2-search input[type="search"],
.pd-stage2-search button[type="submit"] {
    height: 44px !important;
    min-height: 44px !important;
}

.pd-stage2-search kbd {
    display: none !important;
}

/* Right-side controls */
.pd-stage2-actions {
    margin-left: 0 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.5rem !important;
    min-width: 0 !important;
}

/* Hide mobile search toggle on desktop */
@media (min-width: 1024px) {
    .pd-stage2-actions button[aria-label="Toggle search form"] {
        display: none !important;
    }
}

/* Match desktop controls to search height */
@media (min-width: 1024px) {
    .pd-stage2-fitment {
        align-items: center !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .pd-stage2-fitment button,
    .pd-stage2-fitment a,
    .pd-stage2-fitment .btn,
    .pd-stage2-fitment .button,
    .pd-stage2-actions > a,
    .pd-stage2-actions > button:not([aria-label="Toggle search form"]),
    #menu-cart-icon {
        height: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .pd-stage2-actions > a,
    .pd-stage2-actions > button:not([aria-label="Toggle search form"]),
    #menu-cart-icon {
        width: 44px !important;
        min-width: 44px !important;
        padding: 0 !important;
    }

    .pd-stage2-fitment button,
    .pd-stage2-fitment a,
    .pd-stage2-fitment .btn,
    .pd-stage2-fitment .button {
        width: auto !important;
        min-width: auto !important;
        padding-left: 0.875rem !important;
        padding-right: 0.875rem !important;
        white-space: nowrap !important;
    }
}

/* ------------------------------
   Category row
------------------------------ */

.pd-stage2-category-row {
    width: 100% !important;
    background: #fff !important;
    border: 0 !important;
}

.pd-stage2-category-row .pd-hmm {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
    position: relative !important;

    /* Must match template classes: px-4 sm:px-6 lg:px-6 */
    --pd-hmm-container-gutter: 1rem;
}

@media (min-width: 640px) {
    .pd-stage2-category-row .pd-hmm {
        --pd-hmm-container-gutter: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .pd-stage2-category-row .pd-hmm {
        --pd-hmm-container-gutter: 1.5rem;
    }
}

.pd-hmm-row {
    position: relative;
    width: 100% !important;
    min-height: 46px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex;
    align-items: stretch;
    justify-content: center !important;
    gap: 0.25rem;
    border: 0 !important;
}

.pd-hmm-item {
    display: flex;
    align-items: stretch;
}

.pd-hmm-link {
    position: relative;
    min-height: 46px;
    padding: 0 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
}

.pd-hmm-link:hover {
    color: #2563eb !important;
    text-decoration: none;
}

.pd-hmm-link::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0;
    height: 2px;
    background: #2563eb !important;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 150ms ease;
}

.pd-hmm-item:hover .pd-hmm-link::after,
.pd-hmm-item:focus-within .pd-hmm-link::after {
    transform: scaleX(1);
}

.pd-hmm-item:hover .pd-hmm-link,
.pd-hmm-item:focus-within .pd-hmm-link {
    color: #2563eb !important;
}

/* ------------------------------
   Category dropdown
------------------------------ */

.pd-stage2-category-row .pd-hmm-mega {
    position: absolute;
    top: 46px;
    left: calc(var(--pd-hmm-container-gutter) * -1) !important;
    right: calc(var(--pd-hmm-container-gutter) * -1) !important;
    width: calc(100% + (var(--pd-hmm-container-gutter) * 2)) !important;
    max-width: none !important;
    background: #fff !important;
    color: inherit;
    font-family: inherit;
    border-top: 0 !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
    z-index: 50;
}

.pd-hmm-item:hover .pd-hmm-mega,
.pd-hmm-item:focus-within .pd-hmm-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.pd-hmm-mega-inner {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 1.5rem 1.5rem 1.75rem !important;
}

.pd-hmm-title {
    margin-bottom: 1.25rem;
    font-family: inherit;
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 700;
    color: inherit;
}

.pd-hmm-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 1.5rem 1.25rem;
}


.pd-hmm-image {
    width: 122px;
    height: 74px;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-hmm-image img {
    display: block;
    max-width: 122px;
    max-height: 74px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.pd-hmm-image-fallback {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: rgb(75 85 99) !important;
    font-weight: 700 !important;
    font-size: 1.75rem !important;
    letter-spacing: 0.03em !important;
}

.pd-hmm-image-fallback span {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* ------------------------------
   Responsive refinements
------------------------------ */

@media (max-width: 1280px) {
    .pd-stage2-search {
        min-width: 280px !important;
        margin-left: 1.25rem !important;
        margin-right: 1.25rem !important;
    }

    .pd-stage2-fitment button,
    .pd-stage2-fitment a,
    .pd-stage2-fitment .btn,
    .pd-stage2-fitment .button {
        padding-left: 0.625rem !important;
        padding-right: 0.625rem !important;
    }
}

@media (max-width: 1023px) {
    .pd-stage2-main {
        justify-content: space-between !important;
        gap: 0.75rem !important;
    }

    .pd-stage2-search,
    .pd-stage2-category-row,
    .pd-hmm {
        display: none !important;
    }
}


/* ------------------------------
   Hyvä native-dialog category drawer
------------------------------ */

/*
 * Mirrors Hyvä cart drawer:
 * - Native <dialog>
 * - h-full / max-h-full
 * - x-htmldialog
 * - closeby="any"
 * - btn bg-transparent border-transparent p-2 close button
 */

body.pd-sidecat-open {
    overflow: hidden;
}

/* Desktop category bar launcher */
.pd-hmm-row {
    justify-content: flex-start !important;
}

.pd-hmm-side-toggle {
    min-height: 46px;
    margin-right: 0.75rem;
    padding: 0 1rem 0 0;
    border: 0;
    border-right: 1px solid rgb(229 231 235);
    background: transparent;
    color: rgb(17 24 39);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.25;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    white-space: nowrap;
    cursor: pointer;
}

.pd-hmm-side-toggle:hover,
.pd-hmm-side-toggle:focus-visible {
    color: #2563eb;
}

.pd-hmm-side-icon {
    width: 18px;
    height: 14px;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
}

.pd-hmm-side-icon span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

/* Native dialog panel */
.pd-sidecat-dialog {
    padding: 1rem;
    border: 0;
    background: #fff;
    color: rgb(17 24 39);
    box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.05), 0 20px 40px rgba(17, 24, 39, 0.22);
    overflow: hidden;
}

.pd-sidecat-dialog::backdrop {
    background: rgba(17, 24, 39, 0.5);
}

/* Match Hyvä drawer header feel */
.pd-sidecat-dialog-header {
    flex: 0 0 auto;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgb(229 231 235);
}

.pd-sidecat-dialog-subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.25;
    color: rgb(107 114 128);
}

/* Body scrolls, panel stays full height */
.pd-sidecat-dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    margin-left: -0.25rem;
    margin-right: -0.25rem;
    padding-top: 0.75rem;
    padding-right: 0.25rem;
    padding-left: 0.25rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Category rows */
.pd-sidecat-item {
    margin: 0;
}

.pd-sidecat-details {
    border-bottom: 1px solid rgb(243 244 246);
}

.pd-sidecat-details > summary {
    list-style: none;
}

.pd-sidecat-details > summary::-webkit-details-marker {
    display: none;
}

.pd-sidecat-row {
    min-height: 58px;
    padding: 0.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgb(17 24 39);
    text-decoration: none;
    cursor: pointer;
}

.pd-sidecat-row:hover,
.pd-sidecat-row:focus {
    background: rgb(249 250 251);
    color: #2563eb;
    text-decoration: none;
}

.pd-sidecat-thumb {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 0.375rem;
    background: rgb(249 250 251);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pd-sidecat-thumb img {
    display: block;
    max-width: 44px;
    max-height: 44px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.pd-sidecat-initials {
    color: rgb(75 85 99);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.pd-sidecat-name {
    min-width: 0;
    flex: 1 1 auto;
    font-size: 0.9375rem;
    line-height: 1.25;
    font-weight: 600;
}

.pd-sidecat-arrow {
    flex: 0 0 auto;
    color: rgb(107 114 128);
    font-size: 1.5rem;
    line-height: 1;
    transition: transform 150ms ease;
}

.pd-sidecat-details[open] > .pd-sidecat-row .pd-sidecat-arrow {
    transform: rotate(90deg);
}

.pd-sidecat-children {
    padding: 0 0 0.5rem 3.75rem;
}

.pd-sidecat-view-all {
    margin: 0.25rem 0 0.375rem;
    display: inline-flex;
    color: #2563eb;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}

.pd-sidecat-view-all:hover,
.pd-sidecat-view-all:focus {
    text-decoration: underline;
}

.pd-sidecat-children .pd-sidecat-row {
    min-height: 48px;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.pd-sidecat-children .pd-sidecat-thumb {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
}

.pd-sidecat-children .pd-sidecat-thumb img {
    max-width: 34px;
    max-height: 34px;
}

.pd-sidecat-children .pd-sidecat-name {
    font-size: 0.875rem;
    font-weight: 500;
}

.pd-sidecat-level-2 .pd-sidecat-children,
.pd-sidecat-level-3 .pd-sidecat-children,
.pd-sidecat-level-4 .pd-sidecat-children {
    padding-left: 2.75rem;
}

/*
 * Mobile:
 * - Category drawer opens from top-left header button.
 * - Hide duplicate category-bar launcher.
 * - Leave overlay area on the right for easy closing.
 */
@media (max-width: 1023px) {
    .pd-stage2-category-row.hidden,
    .pd-stage2-category-row,
    .pd-hmm {
        display: block !important;
    }

    .pd-stage2-category-row {
        height: 0 !important;
        min-height: 0 !important;
        overflow: visible !important;
        border: 0 !important;
    }

    .pd-hmm {
        height: 0 !important;
        min-height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        overflow: visible !important;
    }

    .pd-hmm-row {
        display: none !important;
    }

    .pd-sidecat-dialog-header {
        padding-bottom: 0.875rem;
    }

    .pd-sidecat-dialog-body {
        padding-top: 0.5rem;
    }

    .pd-sidecat-row {
        min-height: 56px;
    }
}


/*
 * Match Hyvä My Cart drawer width:
 * cart drawer uses w-[480px] md:w-[640px].
 * This keeps the category drawer the same width, mirrored from the left.
 */
.pd-sidecat-dialog {
    max-width: 100vw !important;
}

@media (max-width: 1023px) {
    .pd-sidecat-dialog {
        max-width: 100vw !important;
        margin-left: 0 !important;
        margin-right: auto !important;
    }
}


/* Keep the desktop category dropdown above normal page content. */
.pd-stage2-category-row .pd-hmm-mega {
    z-index: 50 !important;
}

/* Native dialog still appears above the header because <dialog> uses the browser top layer. */
.pd-sidecat-dialog {
    z-index: 9999;
}

/* Sidebar search */
.pd-sidecat-search {
    flex: 0 0 auto;
    padding: 1rem 0 0.875rem;
    border-bottom: 1px solid rgb(229 231 235);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pd-sidecat-search-input {
    width: 100%;
    min-width: 0;
    height: 44px;
}

.pd-sidecat-search-clear {
    height: 44px;
    padding: 0 0.75rem;
    border: 1px solid rgb(229 231 235);
    border-radius: 0.375rem;
    background: #fff;
    color: rgb(55 65 81);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.pd-sidecat-search-clear:hover,
.pd-sidecat-search-clear:focus {
    background: rgb(239 246 255);
    border-color: rgb(191 219 254);
    color: #2563eb;
}

/* Search result and current category states */
.pd-sidecat-search-hit {
    background: rgb(239 246 255) !important;
    color: #2563eb !important;
}

.pd-sidecat-current {
    background: rgb(239 246 255) !important;
    color: #2563eb !important;
    font-weight: 700 !important;
}

.pd-sidecat-current .pd-sidecat-name {
    font-weight: 700 !important;
}

.pd-sidecat-no-results {
    padding: 1.5rem 0.75rem;
    color: rgb(107 114 128);
    font-size: 0.9375rem;
    text-align: center;
}

/* Make search/header spacing feel consistent on mobile */
@media (max-width: 1023px) {
    .pd-sidecat-search {
        padding-top: 0.875rem;
        padding-bottom: 0.75rem;
    }

    .pd-sidecat-search-input,
    .pd-sidecat-search-clear {
        height: 42px;
    }
}

@media(max-width:1023px){
    #header .pd-stage2-actions{
        position:relative!important;
        z-index:120!important;
        overflow:visible!important;
    }

    #header .pd-stage2-customer{
        position:relative!important;
        z-index:160!important;
    }

    #header .pd-stage2-customer nav[aria-labelledby="customer-menu"]{
        z-index:170!important;
    }

    .pd-stage2-mobile-vehicle{
        position:relative!important;
        z-index:10!important;
        transform:none!important;
        will-change:auto!important;
        overflow:visible!important;
    }
}

@media(min-width:1024px){
    .pd-stage2-mobile-vehicle{
        display:none!important;
    }
}
:root {
    --pd-header-anchor-offset: 132px;
}

html {
    scroll-padding-top: var(--pd-header-anchor-offset) !important;
}

:target {
    scroll-margin-top: var(--pd-header-anchor-offset) !important;
}

[x-cloak] {
    display: none !important;
}

@media (min-width: 1024px) {
    .pd-stage2-category-row,
    .pd-stage2-category-row .pd-hmm,
    .pd-hmm-row {
        overflow: visible !important;
    }

    .pd-stage2-category-row .pd-hmm {
        --pd-hmm-container-gutter: 1.5rem;
    }

    .pd-hmm-row {
        position: relative !important;
        display: flex !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 0.25rem !important;
        isolation: isolate;
    }

    .pd-hmm-side-toggle {
        flex: 0 0 auto !important;
        margin-right: 0.5rem !important;
        padding-right: 0.875rem !important;
    }

    .pd-hmm-category-carousel {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        min-height: 46px;
        display: flex !important;
        align-items: stretch !important;
        position: relative !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /*
     * The initial category row is measured automatically before first paint.
     * Only labels that fit the real viewport are revealed, avoiding both the
     * extra far-right item flash and the empty-row delay.
     */

    .pd-hmm-carousel-viewport {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .pd-hmm-carousel-track {
        min-height: 46px;
        display: flex !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        gap: 0.25rem !important;
        width: max-content !important;
        max-width: none !important;
        background: transparent !important;
        box-shadow: none !important;
        opacity: 1;
        transform: translateX(0);
        transition: none !important;
        will-change: opacity, transform;
    }

    .pd-hmm-category-carousel.is-measuring .pd-hmm-carousel-track {
        visibility: hidden !important;
    }

    .pd-hmm-category-carousel.is-measuring .pd-hmm-carousel-item.is-pd-hmm-hidden {
        display: flex !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .pd-hmm-category-carousel.is-changing-forward .pd-hmm-carousel-track {
        animation: pdHmmCarouselPageInForward 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .pd-hmm-category-carousel.is-changing-backward .pd-hmm-carousel-track {
        animation: pdHmmCarouselPageInBackward 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    @media (prefers-reduced-motion: reduce) {
        .pd-hmm-category-carousel.is-changing-forward .pd-hmm-carousel-track,
        .pd-hmm-category-carousel.is-changing-backward .pd-hmm-carousel-track {
            animation-duration: 1ms !important;
        }
    }

    @keyframes pdHmmCarouselPageInForward {
        0% {
            opacity: 0.45;
            transform: translateX(18px);
        }
        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes pdHmmCarouselPageInBackward {
        0% {
            opacity: 0.45;
            transform: translateX(-18px);
        }
        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .pd-hmm-carousel-item {
        display: flex !important;
        flex: 0 0 auto !important;
        width: max-content !important;
        min-width: max-content !important;
        max-width: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /*
     * The early bootstrap measures the real rendered labels and viewport before
     * first paint. Keep every item measurable but paint-hidden until that
     * automatic measurement marks only the items that safely fit.
     */
    .pd-hmm-category-carousel:not(.is-ready) .pd-hmm-carousel-item {
        display: flex !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .pd-hmm-category-carousel.is-bootstrap-ready:not(.is-ready):not(.is-measuring)
    .pd-hmm-carousel-item:not(.is-pd-hmm-bootstrap-visible) {
        display: none !important;
    }

    .pd-hmm-category-carousel.is-bootstrap-ready:not(.is-ready):not(.is-measuring)
    .pd-hmm-carousel-item.is-pd-hmm-bootstrap-visible {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .pd-hmm-category-carousel.is-measuring .pd-hmm-carousel-item {
        display: flex !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .pd-hmm-carousel-item.is-pd-hmm-hidden {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .pd-hmm-carousel-link,
    .pd-hmm-carousel-link .pd-hmm-link-text,
    .pd-hmm-link,
    .pd-hmm-link-text {
        width: max-content !important;
        min-width: max-content !important;
        max-width: none !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .pd-hmm-carousel-btn {
        flex: 0 0 34px !important;
        width: 34px !important;
        min-width: 34px !important;
        min-height: 46px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: rgb(17 24 39) !important;
        box-shadow: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-family: inherit !important;
        font-size: 1.75rem !important;
        font-weight: 400 !important;
        line-height: 1 !important;
        cursor: pointer !important;
        z-index: 3;
        transition: color 150ms ease, opacity 150ms ease;
    }

    .pd-hmm-carousel-btn:not([disabled]):hover,
    .pd-hmm-carousel-btn:not([disabled]):focus-visible {
        color: #2563eb !important;
        background: transparent !important;
        box-shadow: none !important;
        outline: none;
    }

    .pd-hmm-carousel-btn[disabled] {
        visibility: visible !important;
        opacity: 0.28 !important;
        color: #9ca3af !important;
        background: transparent !important;
        box-shadow: none !important;
        pointer-events: auto !important;
        cursor: default !important;
    }

    .pd-hmm-carousel-btn[disabled]:hover,
    .pd-hmm-carousel-btn[disabled]:focus-visible {
        color: #9ca3af !important;
        background: transparent !important;
        box-shadow: none !important;
        outline: none;
    }

    /* Full-width mega panel is outside the carousel viewport so it cannot be clipped. */
    .pd-hmm-mega-layer {
        position: absolute;
        top: 46px;
        left: calc(var(--pd-hmm-container-gutter, 1.5rem) * -1) !important;
        right: calc(var(--pd-hmm-container-gutter, 1.5rem) * -1) !important;
        width: calc(100% + (var(--pd-hmm-container-gutter, 1.5rem) * 2)) !important;
        z-index: 60;
        pointer-events: none;
    }

    .pd-hmm-mega-layer .pd-hmm-mega {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        transition: none !important;
    }

    .pd-hmm-mega-inner {
        max-height: calc(100vh - var(--pd-header-anchor-offset) - 18px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .pd-hmm-title-row {
        margin-bottom: 1.125rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .pd-hmm-title-row .pd-hmm-title {
        margin-bottom: 0 !important;
    }

    .pd-hmm-grid {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
        gap: 1rem 1rem !important;
    }

    .pd-hmm-subgroup {
        min-width: 0;
        padding: 0.75rem;
        border: 1px solid rgb(243 244 246);
        border-radius: 0.625rem;
        background: #fff;
    }

    .pd-hmm-subgroup:hover {
        border-color: rgb(219 234 254);
        background: rgb(249 250 251);
    }

    .pd-hmm-subgroup-head {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        color: rgb(17 24 39);
        text-decoration: none;
    }

    .pd-hmm-subgroup-head:hover,
    .pd-hmm-subgroup-head:focus {
        color: #2563eb;
        text-decoration: none;
    }

    .pd-hmm-subgroup-head .pd-hmm-image {
        width: 64px !important;
        height: 42px !important;
        flex: 0 0 64px;
    }

    .pd-hmm-subgroup-head .pd-hmm-image img {
        max-width: 64px !important;
        max-height: 42px !important;
    }

    .pd-hmm-subgroup-head .pd-hmm-image-fallback {
        width: 64px !important;
        height: 42px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.125rem !important;
    }

    .pd-hmm-subgroup-title {
        min-width: 0;
        color: inherit;
        font-size: 0.925rem;
        line-height: 1.25;
        font-weight: 700;
    }

    .pd-hmm-sublinks {
        margin-top: 0.625rem;
        padding-top: 0.625rem;
        border-top: 1px solid rgb(243 244 246);
        display: grid;
        gap: 0.25rem;
    }

    .pd-hmm-sublink {
        padding: 0.25rem 0;
        color: rgb(55 65 81);
        font-size: 0.8125rem;
        line-height: 1.25;
        text-decoration: none;
    }

    .pd-hmm-sublink:hover,
    .pd-hmm-sublink:focus {
        color: #2563eb;
        text-decoration: underline;
    }

}

@media (min-width: 1280px) {
    .pd-hmm-grid {
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
    }
}

@media (max-width: 1023px) {
    .pd-hmm-category-carousel,
    .pd-hmm-mega-layer {
        display: none !important;
    }
}

/*
 * Hyvä positions the cart Summary wrapper at top: 1rem on desktop. Offset that
 * existing sticky wrapper by the measured sticky-header height instead, while
 * keeping the same approximate spacing below the header.
 */
@media (min-width: 1024px) {
    body.checkout-cart-index .cart-form .card.lg\:sticky {
        top: var(--pd-header-anchor-offset) !important;
    }
}

/* Share the same theme language as PartsDone LayeredNav. */
.pd-sidecat-dialog {
    --pd-sidecat-primary: var(--color-primary, #e42e2d);
    --pd-sidecat-primary-soft: color-mix(in srgb, var(--pd-sidecat-primary) 9%, white);
    --pd-sidecat-border: var(--color-gray-200, #e5e7eb);
    --pd-sidecat-border-strong: var(--color-gray-300, #d1d5db);
    --pd-sidecat-surface: var(--color-white, #fff);
    --pd-sidecat-surface-hover: var(--color-gray-50, #f9fafb);
    --pd-sidecat-text: var(--color-gray-900, #111827);
    --pd-sidecat-muted: var(--color-gray-600, #4b5563);

    /*
     * Match Hyvä's real cart drawer behavior on narrow screens:
     * w-[480px] / md:w-[640px], capped to leave a 2rem edge gap.
     */
    width: 480px !important;
    max-width: calc(100% - 2rem) !important;
    color: var(--pd-sidecat-text);
}

@media (min-width: 768px) {
    .pd-sidecat-dialog {
        width: 640px !important;
        max-width: calc(100% - 2rem) !important;
    }
}

.pd-sidecat-search-input {
    border: 1px solid var(--pd-sidecat-border-strong) !important;
    border-radius: .625rem !important;
    background: var(--pd-sidecat-surface) !important;
    color: var(--pd-sidecat-text) !important;
    box-shadow: none !important;
}

.pd-sidecat-search-input:hover {
    border-color: var(--pd-sidecat-border-strong) !important;
}

.pd-sidecat-search-input:focus {
    border-color: var(--pd-sidecat-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pd-sidecat-primary) 15%, transparent) !important;
}

.pd-sidecat-search-clear {
    border-color: var(--pd-sidecat-border) !important;
    border-radius: .625rem !important;
    background: var(--pd-sidecat-surface) !important;
    color: var(--pd-sidecat-muted) !important;
}

.pd-sidecat-search-clear:hover,
.pd-sidecat-search-clear:focus-visible {
    border-color: var(--pd-sidecat-primary) !important;
    background: var(--pd-sidecat-surface) !important;
    color: var(--pd-sidecat-primary) !important;
    outline: none !important;
}

.pd-sidecat-row:hover,
.pd-sidecat-row:focus-visible {
    background: var(--pd-sidecat-surface-hover);
    color: var(--pd-sidecat-text);
    outline: none;
}

.pd-sidecat-row:focus-visible,
.pd-sidecat-shop-all:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--pd-sidecat-primary) 45%, transparent);
    outline-offset: 1px;
}

.pd-sidecat-view-all {
    color: var(--pd-sidecat-primary);
}

.pd-sidecat-search-hit,
.pd-sidecat-current {
    background: var(--pd-sidecat-primary-soft) !important;
    color: var(--pd-sidecat-text) !important;
}

/* Shop is the root; expose it as a compact all-products action. */
.pd-sidecat-shop-all {
    min-height: 3.5rem;
    margin: 0 0 .75rem;
    padding: .5rem .625rem;
    border: 1px solid var(--pd-sidecat-border);
    border-radius: .75rem;
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) 1rem;
    align-items: center;
    gap: .625rem;
    background: var(--pd-sidecat-surface);
    color: var(--pd-sidecat-text);
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.pd-sidecat-shop-all:hover {
    border-color: var(--pd-sidecat-border);
    background: var(--pd-sidecat-surface-hover);
    color: var(--pd-sidecat-text);
    text-decoration: none;
}

.pd-sidecat-shop-all.pd-sidecat-current {
    border-color: color-mix(in srgb, var(--pd-sidecat-primary) 20%, var(--pd-sidecat-border));
}


.pd-sidecat-shop-all-copy {
    min-width: 0;
    display: grid;
    gap: .1rem;
}

.pd-sidecat-shop-all-copy strong {
    color: var(--pd-sidecat-primary);
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 700;
}


.pd-sidecat-shop-all-arrow {
    color: var(--pd-sidecat-muted);
    font-size: 1.5rem;
    line-height: 1;
}


/*
 * Shop is a navigation destination, not a visual category level in the drawer.
 * Its direct children are rendered as the primary browse rows, matching the
 * category hierarchy and visual language used by PartsDone LayeredNav.
 */
.pd-sidecat-shop-all {
    min-height: 4rem;
    margin: 0 0 .25rem;
    padding: .4rem .5rem;
    border: 0;
    border-bottom: 1px solid var(--pd-sidecat-border);
    border-radius: .75rem;
    grid-template-columns: 3.25rem minmax(0, 1fr) 1.25rem;
    gap: .75rem;
    background: transparent;
}

.pd-sidecat-shop-all:hover,
.pd-sidecat-shop-all:focus-visible {
    border-color: var(--pd-sidecat-border);
    background: var(--pd-sidecat-surface-hover);
}


.pd-sidecat-shop-all-copy strong {
    color: var(--pd-sidecat-text);
    font-size: .9375rem;
    line-height: 1.25rem;
}

.pd-sidecat-shop-all:hover .pd-sidecat-shop-all-copy strong,
.pd-sidecat-shop-all:focus-visible .pd-sidecat-shop-all-copy strong,
.pd-sidecat-shop-all.pd-sidecat-current .pd-sidecat-shop-all-copy strong {
    color: var(--pd-sidecat-primary);
}

/* Direct Shop children are the drawer's visible top level, without card boxes. */
.pd-sidecat-primary {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

.pd-sidecat-primary > .pd-sidecat-details {
    border-bottom: 1px solid var(--pd-sidecat-border);
}

.pd-sidecat-primary > .pd-sidecat-details > .pd-sidecat-row,
.pd-sidecat-primary > .pd-sidecat-row {
    min-height: 4rem;
    padding: .4rem .5rem;
    border-radius: .75rem;
}

.pd-sidecat-primary > .pd-sidecat-details > .pd-sidecat-row .pd-sidecat-thumb,
.pd-sidecat-primary > .pd-sidecat-row .pd-sidecat-thumb {
    width: 3.25rem;
    height: 3.25rem;
    flex-basis: 3.25rem;
    padding: .2rem;
    border: 1px solid color-mix(in srgb, var(--pd-sidecat-border) 85%, #cbd5e1);
    border-radius: .8rem;
    background: radial-gradient(circle at 32% 24%, #fff 0, #fff 38%, #f8fafc 100%);
    box-shadow: 0 3px 10px rgb(15 23 42 / .09);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.pd-sidecat-primary > .pd-sidecat-details > .pd-sidecat-row:hover .pd-sidecat-thumb,
.pd-sidecat-primary > .pd-sidecat-details > .pd-sidecat-row:focus-visible .pd-sidecat-thumb,
.pd-sidecat-primary > .pd-sidecat-row:hover .pd-sidecat-thumb,
.pd-sidecat-primary > .pd-sidecat-row:focus-visible .pd-sidecat-thumb {
    border-color: color-mix(in srgb, var(--pd-sidecat-primary) 38%, var(--pd-sidecat-border));
    box-shadow: 0 6px 16px rgb(15 23 42 / .12);
    transform: translateY(-1px) scale(1.025);
}

.pd-sidecat-primary > .pd-sidecat-details > .pd-sidecat-row .pd-sidecat-name,
.pd-sidecat-primary > .pd-sidecat-row .pd-sidecat-name {
    font-size: .9375rem;
    line-height: 1.25rem;
    font-weight: 700;
}

.pd-sidecat-primary > .pd-sidecat-details > .pd-sidecat-children {
    position: relative;
    margin: 0 0 .375rem 1.75rem;
    padding: .125rem 0 .25rem 1rem;
    border-left: 1px solid var(--pd-sidecat-border);
}

.pd-sidecat-primary > .pd-sidecat-details > .pd-sidecat-children > .pd-sidecat-view-all {
    margin: .25rem .5rem .375rem;
}

/* Shop is a plain top-bar link. Its children are the actual mega-menu owners. */
.pd-hmm-carousel-item-level-1 .pd-hmm-link {
    font-weight: 600;
}

.pd-hmm-carousel-item-level-2 .pd-hmm-link {
    font-weight: 600;
    color: inherit;
}

.pd-hmm-carousel-item-level-2 .pd-hmm-link:hover,
.pd-hmm-carousel-item-level-2:focus-within .pd-hmm-link {
    color: inherit;
}

@media (max-width: 639px) {
    .pd-sidecat-shop-all {
        grid-template-columns: 2.85rem minmax(0, 1fr) 1.125rem;
    }

    .pd-sidecat-primary > .pd-sidecat-details > .pd-sidecat-row .pd-sidecat-thumb,
    .pd-sidecat-primary > .pd-sidecat-row .pd-sidecat-thumb {
        width: 2.85rem;
        height: 2.85rem;
        flex-basis: 2.85rem;
    }
}

/*
 * The live 390px diagnostic measured Hyvä's cart at 358px with a 32px gap.
 * Keep the category drawer mirrored from the left with the same cap.
 */
.pd-sidecat-dialog {
    max-width: calc(100% - 2rem) !important;
}

/*
 * Match LayeredNav's frameless category artwork. Keep dimensions and layout,
 * but remove the decorative card treatment from every category thumbnail.
 */
.pd-sidecat-dialog .pd-sidecat-thumb,
.pd-sidecat-primary > .pd-sidecat-details > .pd-sidecat-row .pd-sidecat-thumb,
.pd-sidecat-primary > .pd-sidecat-row .pd-sidecat-thumb {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.pd-sidecat-primary > .pd-sidecat-details > .pd-sidecat-row:hover .pd-sidecat-thumb,
.pd-sidecat-primary > .pd-sidecat-details > .pd-sidecat-row:focus-visible .pd-sidecat-thumb,
.pd-sidecat-primary > .pd-sidecat-row:hover .pd-sidecat-thumb,
.pd-sidecat-primary > .pd-sidecat-row:focus-visible .pd-sidecat-thumb {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.pd-hmm,
.pd-sidecat-dialog {
    --pd-hmm-shop-blue: #2563eb;
}

/*
 * Shop All remains fixed outside the carousel, but uses the exact visual
 * language of a normal carousel category: plain text, no button background,
 * and the standard blue underline on hover/focus.
 */
.pd-hmm-shop-fixed-item {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
}

.pd-hmm-shop-link {
    min-height: 46px;
    padding: 0 1rem;
    border: 0 !important;
    border-right: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: none !important;
}

.pd-hmm-shop-fixed-item:hover .pd-hmm-shop-link,
.pd-hmm-shop-fixed-item:focus-within .pd-hmm-shop-link,
.pd-hmm-shop-link:hover,
.pd-hmm-shop-link:focus-visible {
    color: var(--pd-hmm-shop-blue) !important;
    background: transparent !important;
    text-decoration: none;
    outline: none;
    box-shadow: none !important;
}

/* Preserve the requested blue hover language for Shop All Categories. */
.pd-sidecat-shop-all:hover .pd-sidecat-shop-all-copy strong,
.pd-sidecat-shop-all:focus-visible .pd-sidecat-shop-all-copy strong,
.pd-sidecat-shop-all:hover .pd-sidecat-shop-all-arrow,
.pd-sidecat-shop-all:focus-visible .pd-sidecat-shop-all-arrow {
    color: var(--pd-hmm-shop-blue) !important;
}

.pd-sidecat-shop-all:focus-visible {
    outline-color: color-mix(in srgb, var(--pd-hmm-shop-blue) 45%, transparent) !important;
}

@media (max-width: 1023px) {
    .pd-hmm-shop-fixed-item {
        display: none !important;
    }
}
/* Text-only Shop All Categories action in the sidebar. */
.pd-sidecat-shop-all {
    min-height: 3.25rem;
    grid-template-columns: minmax(0, 1fr) 1.25rem !important;
    gap: .75rem;
    padding: .625rem .75rem;
}

.pd-sidecat-shop-all-copy {
    display: block;
}

.pd-sidecat-shop-all-copy strong {
    display: block;
}

/*
 * PD_GDS_A7_4_1B_HEADER_CONTROL_TOKEN_BRIDGE
 *
 * Integrates HeaderMegaMenu controls with the centralized PartsDone design
 * tokens while retaining their existing component classes, dimensions,
 * layout behavior, Alpine bindings and JavaScript hooks.
 */

.pd-sidecat-search-input {
    height: var(--pd-gds-control-height-md, 44px);
    min-height: var(--pd-gds-control-height-md, 44px);
    border-color: var(--pd-gds-color-border, #d1d5db) !important;
    background: var(--pd-gds-color-surface, #ffffff) !important;
    color: var(--pd-gds-color-text, #111827) !important;
    font-family: var(--pd-gds-font-family, inherit);
}

.pd-sidecat-search-input:hover {
    border-color: var(--pd-gds-color-border, #d1d5db) !important;
}

.pd-sidecat-search-input:focus {
    border-color: var(--pd-gds-color-focus, #1f48c5) !important;
    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--pd-gds-color-focus, #1f48c5) 15%,
            transparent
        ) !important;
}

.pd-sidecat-search-clear {
    height: var(--pd-gds-control-height-md, 44px);
    min-height: var(--pd-gds-control-height-md, 44px);
    padding-inline: var(--pd-gds-space-3, 0.75rem);
    border-color: var(--pd-gds-color-border, #d1d5db) !important;
    background: var(--pd-gds-color-surface, #ffffff) !important;
    color: var(--pd-gds-color-text-muted, #6b7280) !important;
    font-family: var(--pd-gds-font-family, inherit);
    font-weight: var(--pd-gds-font-weight-semibold, 600);
}

.pd-sidecat-search-clear:hover,
.pd-sidecat-search-clear:focus-visible {
    border-color: var(--pd-gds-color-primary, #1f48c5) !important;
    background: var(--pd-gds-color-surface, #ffffff) !important;
    color: var(--pd-gds-color-primary, #1f48c5) !important;
}

.pd-hmm-side-toggle {
    color: var(--pd-gds-color-text, #111827);
    font-family: var(--pd-gds-font-family, inherit);
    font-weight: var(--pd-gds-font-weight-bold, 700);
}

.pd-hmm-side-toggle:hover,
.pd-hmm-side-toggle:focus-visible {
    color: var(--pd-gds-color-primary, #1f48c5);
}

@media (max-width: 1023px) {
    .pd-sidecat-search-input,
    .pd-sidecat-search-clear {
        height: 42px;
        min-height: 42px;
    }
}