/* 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;
    }
}

/* Account menu only. The SVGs below are copied directly from the existing
   My Account sidebar icon artwork in asetek-v2/style.css (white 1.8px strokes).
   A monochrome filter makes them legible on this existing white popover.
   The Cart hover and mobile header are untouched. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .ar-hp--account .ar-hp__account-nav a.ar-hp__nav-link {
        display: flex !important;
        align-items: center;
        gap: 12px;
    }
    .ar-hp--account .ar-hp__account-nav a.ar-hp__nav-link::before {
        content: "";
        display: block;
        flex: 0 0 19px;
        width: 19px;
        height: 19px;
        background-image: var(--ar-account-nav-icon, none);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 19px 19px;
        filter: brightness(0);
    }
    .ar-hp--account .ar-hp__account-nav a.ar-hp__nav-link--orders {
        --ar-account-nav-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%225%22%20width%3D%2214%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M9%205V3h6v2M8%2011h8M8%2015h6%22%2F%3E%3C%2Fsvg%3E");
    }
    .ar-hp--account .ar-hp__account-nav a.ar-hp__nav-link--edit-address {
        --ar-account-nav-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m4%2010%208-7%208%207v11H4z%22%2F%3E%3Cpath%20d%3D%22M9%2021v-7h6v7%22%2F%3E%3C%2Fsvg%3E");
    }
    .ar-hp--account .ar-hp__account-nav a.ar-hp__nav-link--payment-methods {
        --ar-account-nav-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%2010h18M7%2015h4%22%2F%3E%3C%2Fsvg%3E");
    }
    .ar-hp--account .ar-hp__account-nav a.ar-hp__nav-link--edit-account {
        --ar-account-nav-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M4%2021c0-4%203.6-7%208-7s8%203%208%207%22%2F%3E%3C%2Fsvg%3E");
    }
    .ar-hp--account .ar-hp__account-nav a.ar-hp__nav-link--customer-logout {
        --ar-account-nav-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%203H5a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h5M14%207l5%205-5%205M19%2012H9%22%2F%3E%3C%2Fsvg%3E");
    }
}