/* Orange Lottie cart with white count badge, matching the PC header top-bar cart. Mounted by cart-lottie-icon.js,
   which also sets html.cart-lottie-js / html.cart-lottie-header so the static cart is never painted before the Lottie one. */
.cart-lottie-host {
    position: relative;
}

.cart-lottie-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    overflow: visible;
}

/* The static svg is only a fallback: shown when the animation fails or takes longer than 4s. */
.cart-lottie-host .cart-lottie-icon > svg {
    width: 22px;
    height: 22px;
    color: #ff7a00;
    visibility: hidden;
}

.cart-lottie-host .cart-lottie-icon.is-anim-failed > svg {
    visibility: visible;
}

.cart-lottie-host .cart-lottie-player {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    pointer-events: none;
}

.cart-lottie-host .cart-lottie-icon.is-anim-ready .cart-lottie-player {
    opacity: 1;
    transition: opacity 0.15s ease;
}

.cart-lottie-host .cart-lottie-icon .cart-lottie-player svg {
    width: 100% !important;
    height: 100% !important;
    stroke: none;
}

/* The drawn cart spans roughly the middle 76% of the icon box; with the box's side margins pulled in, the badge starts just past its right edge. */
.cart-lottie-host .cart-lottie-badge {
    box-sizing: border-box;
    position: absolute;
    z-index: 1;
    top: -6px;
    left: calc(100% + 3px);
    right: auto;
    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;
    text-align: center;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.18);
}

/* Shared PC header top bar (pages loading cart-lottie-icon.js with data-header-cart).
   Negative margins keep the link at the old 18px icon height so the bar does not grow; before mount the hidden
   static svg reserves the same 26x18 footprint so neighbouring items do not move. */
html.cart-lottie-header .site-header .header-top-links a.header-top-basket-link:not(.header-util-link) > svg {
    width: 26px;
    height: 18px;
    visibility: hidden;
}

.site-header .header-top-links .cart-lottie-host .cart-lottie-icon {
    margin: -8px -4px;
}

html.cart-lottie-header .site-header .header-top-links a.header-top-basket-link:not(.header-util-link) .header-top-basket-badge {
    box-sizing: border-box;
    z-index: 1;
    top: -6px;
    left: calc(100% + 3px);
    right: auto;
    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);
}

/* Product "Build your order" popup header. Before mount the hidden static svg reserves the mounted 30x40 footprint. */
html.cart-lottie-js #orderPopup .pc-product-flow-help .pc-flow-basket[data-cart-lottie] {
    width: auto;
    height: 40px;
    margin-right: 24px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #ff7a00;
}

html.cart-lottie-js #orderPopup .pc-product-flow-help .pc-flow-basket[data-cart-lottie]:hover {
    background: transparent;
}

html.cart-lottie-js #orderPopup .pc-product-flow-help .pc-flow-basket[data-cart-lottie] > svg {
    width: 30px;
    height: 40px;
    visibility: hidden;
}

#orderPopup .pc-product-flow-help .pc-flow-basket.cart-lottie-host .cart-lottie-icon {
    width: 40px;
    height: 40px;
    margin: 0 -5px;
}

html.cart-lottie-js #orderPopup .pc-product-flow-help .pc-flow-basket [data-cart-lottie-badge] {
    box-sizing: border-box;
    position: absolute;
    z-index: 1;
    display: inline-flex;
    top: 1px;
    left: calc(100% + 3px);
    right: auto;
    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);
}

html.cart-lottie-js #orderPopup .pc-product-flow-help .pc-flow-basket [data-cart-lottie-badge][hidden] {
    display: none;
}