/* Asetek Racing(TM) - Account and cart desktop hover previews.
   Entirely separate from the existing mobile header, Smart Search Insights
   and the WooCommerce side-cart. The JavaScript inserts the panels on desktop. */

.ar-hp[hidden] { display: none !important; }

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .header__actions > a.ar-hp__trigger {
        cursor: pointer;
    }

    .ar-hp {
        position: fixed !important;
        top: 0;
        left: 0;
        right: auto;
        display: block;
        box-sizing: border-box;
        z-index: 2147482000 !important;
        width: 298px;
        max-width: calc(100vw - 24px);
        max-height: min(78vh, 570px);
        overflow: auto;
        overscroll-behavior: contain;
        padding: 0;
        margin: 0;
        border: 1px solid #E9E9E9;
        border-radius: 2px;
        background: #FFFFFF !important;
        color: #181818 !important;
        text-align: left;
        font-family: inherit;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.45;
        opacity: 1;
        visibility: visible;
        box-shadow: 0 12px 35px rgba(0, 0, 0, .24);
    }

    .ar-hp--cart { width: 350px; }
    .ar-hp *, .ar-hp *::before, .ar-hp *::after { box-sizing: border-box; }
    .ar-hp a {
        text-decoration: none !important;
        color: #151515 !important;
        background: transparent;
    }
    .ar-hp a:hover { color: #E52421 !important; }
    .ar-hp a:focus-visible {
        outline: 2px solid #E52421 !important;
        outline-offset: -2px;
    }
    .ar-hp__loading, .ar-hp__error {
        padding: 22px 19px;
        color: #444444 !important;
    }

    /* Account identity */
    .ar-hp__identity {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 102px;
        padding: 18px;
        border-bottom: 1px solid #EFEFEF;
    }
    .ar-hp__avatar {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        overflow: hidden;
        border-radius: 50%;
        background: #EEEEEE;
    }
    .ar-hp__avatar img {
        display: block;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50%;
        object-fit: cover;
    }
    .ar-hp__identity-copy { display: block; min-width: 0; overflow-wrap: anywhere; }
    .ar-hp__customer-name {
        display: block;
        font-size: 14px;
        line-height: 1.35;
        font-weight: 700;
        color: #111111 !important;
    }
    .ar-hp__customer-email {
        display: block;
        margin-top: 3px;
        font-size: 12px;
        color: #666666 !important;
    }
    .ar-hp__guest-heading {
        padding: 20px 18px 16px;
        font-weight: 700;
        color: #111111;
        border-bottom: 1px solid #EFEFEF;
    }
    .ar-hp__account-nav { display: flex; flex-direction: column; padding: 8px 0; }
    .ar-hp .ar-hp__account-nav a {
        display: block !important;
        width: 100%;
        padding: 10px 18px !important;
        margin: 0 !important;
        min-height: 39px;
        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 1.4;
        border: 0;
        border-radius: 0;
        background: #FFFFFF !important;
        color: #161616 !important;
    }
    .ar-hp .ar-hp__account-nav a:hover,
    .ar-hp .ar-hp__account-nav a:focus-visible {
        background: #F4F4F4 !important;
        color: #E52421 !important;
    }

    /* Cart preview */
    .ar-hp__items {
        display: block;
        list-style: none;
        margin: 0 !important;
        padding: 0 16px !important;
        max-height: min(38vh, 310px);
        overflow-y: auto;
    }
    .ar-hp__item {
        display: grid;
        grid-template-columns: 58px minmax(0, 1fr) 22px;
        align-items: center;
        gap: 12px;
        margin: 0 !important;
        padding: 16px 0 !important;
        border-bottom: 1px solid #EFEFEF;
        background: #FFFFFF !important;
    }
    .ar-hp__item:last-child { border-bottom: 0; }
    .ar-hp__thumb {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 58px;
        height: 63px;
        overflow: hidden;
        background: #F7F7F7;
    }
    .ar-hp__thumb img {
        display: block;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain;
    }
    .ar-hp__product-copy { min-width: 0; overflow-wrap: anywhere; }
    .ar-hp .ar-hp__product-name {
        display: block;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.33;
        color: #111111 !important;
    }
    .ar-hp .ar-hp__product-name:hover { color: #E52421 !important; }
    .ar-hp__quantity { display: block; margin-top: 4px; font-size: 12px; color: #333333; }
    .ar-hp__quantity .amount { color: #333333 !important; }
    .ar-hp__variation { margin-top: 4px; color: #555555; font-size: 11px; }
    .ar-hp__variation dl,
    .ar-hp__variation dt,
    .ar-hp__variation dd { margin: 0; padding: 0; font-size: inherit; }
    .ar-hp__variation p { margin: 0; }

    .ar-hp a.ar-hp__remove {
        display: flex !important;
        align-items: center;
        justify-content: center;
        align-self: center;
        width: 24px !important;
        min-width: 24px;
        height: 30px !important;
        padding: 0 !important;
        margin: 0 !important;
        color: #111111 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        font-size: 0 !important;
        line-height: 1 !important;
    }
    .ar-hp a.ar-hp__remove:hover { color: #E52421 !important; }
    .ar-hp__remove svg { display: block; }

    .ar-hp__totals {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: baseline;
        column-gap: 8px;
        padding: 13px 17px 12px;
        border-top: 1px solid #EFEFEF;
        color: #171717;
        font-size: 12px;
    }
    .ar-hp__subtotal-label { font-weight: 700; text-transform: uppercase; }
    .ar-hp__subtotal-value { justify-self: end; font-weight: 700; color: #111111; }
    .ar-hp__subtotal-value .amount { color: #111111 !important; }
    .ar-hp__tax-info { justify-self: end; white-space: nowrap; font-size: 10px; color: #666666; }
    .ar-hp__cart-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 16px 18px; }
    .ar-hp a.ar-hp__button,
    .ar-hp a.ar-hp__button:hover {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 10px 8px !important;
        background: #E52421 !important;
        border: 1px solid #E52421 !important;
        border-radius: 0 !important;
        color: #FFFFFF !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.2;
        text-align: center;
        text-transform: uppercase;
        text-decoration: none !important;
        opacity: 1;
    }
    .ar-hp a.ar-hp__button:hover,
    .ar-hp a.ar-hp__button:focus-visible { background: #B91F1D !important; border-color: #B91F1D !important; }
    .ar-hp__empty { padding: 24px 20px 22px; text-align: center; }
    .ar-hp__empty p { margin: 0 0 12px; color: #222222 !important; }
    .ar-hp a.ar-hp__shop-link { font-size: 13px; text-decoration: underline !important; }
}

@media (max-width: 1023px), (hover: none), (pointer: coarse) {
    .ar-hp { display: none !important; }
}

/* v2: display the existing side-cart's price markup cleanly in the hover panel. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .ar-hp .ar-hp__quantity .item-price,
    .ar-hp .ar-hp__quantity .quantity {
        display: inline !important;
        position: static !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        background: none !important;
        border: 0 !important;
        color: #333333 !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
    .ar-hp .ar-hp__quantity .item-price .amount,
    .ar-hp .ar-hp__quantity .item-price .woocommerce-Price-amount {
        color: #333333 !important;
        font-size: inherit !important;
    }
    .ar-hp__totals .ar-hp__tax-info {
        font-weight: 500;
    }
}