/* PC header basket: orange Lottie cart with count in the top bar, recorded laptop loop next to "Basket". */
.site-header .header-basket-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    overflow: visible;
}

/* Negative margins keep each link's flow height at the old 18px icon, so the header does not grow.
   Before the script wraps it, the static SVG itself holds the same invisible box, so nothing flashes or shifts. */
.site-header a.header-top-basket-link:not(.header-util-link) > svg,
.site-header .header-basket-icon--lottie {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    margin: -8px -4px;
}

/* The laptop drawing leaves ~8px of transparent padding on its right; pull the label in over it. */
.site-header a.header-util-link.header-top-basket-link > svg,
.site-header .header-basket-icon--video {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    margin: -17px -8px -17px -2px;
}

.site-header a.header-top-basket-link > svg {
    visibility: hidden;
}

.site-header .header-util-link.header-top-basket-link {
    color: #ff7a00;
}

.site-header .header-util-link.header-top-basket-link:hover {
    color: #e56d00;
    opacity: 1;
}

/* The static SVG is only a fallback for when the animation fails or is too slow to load. */
.site-header .header-basket-icon > svg {
    display: none;
    width: 22px;
    height: 22px;
}

.site-header .header-basket-icon.is-anim-fallback:not(.is-anim-ready) > svg {
    display: block;
}

.site-header .header-basket-lottie,
.site-header .header-basket-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.site-header .header-basket-video {
    object-fit: contain;
    background: transparent;
}

.site-header .header-basket-lottie svg {
    width: 100% !important;
    height: 100% !important;
    stroke: none;
}

.site-header .header-basket-icon.is-anim-ready .header-basket-lottie,
.site-header .header-basket-icon.is-anim-ready .header-basket-video {
    opacity: 1;
}

.site-header .header-top-links .header-top-basket-badge {
    box-sizing: border-box;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 1.5px solid #ff7a00;
    border-radius: 999px;
    background: #ffffff;
    color: #26366d;
    font: 700 11px/1 Inter, Arial, sans-serif;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.18);
}

/* The drawn cart spans roughly x 4px-30px of the 34px icon box; the badge starts past its right edge. */
.site-header .header-top-links .header-top-basket-badge {
    z-index: 1;
    top: -6px;
    left: calc(100% + 3px);
    right: auto;
}