/* ==========================================================================
   Cart UI
   Loaded after style.css and responsive.css, so plain selectors here win
   without needing !important. Selector depth matches the theme where it has
   to override a theme rule.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Deal / bundle badges. These live on both the cart page line and the
   drop-down line, so they belong in a stylesheet rather than in a <style>
   block inside one of the partials.
   -------------------------------------------------------------------------- */
.cart_item_deal { margin-top: 8px; }

.cart_item_deal_tag {
    background: #ec1f24;
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 2px 7px;
    text-transform: uppercase;
}

.cart_item_deal_list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
}

.cart_item_deal_list li {
    color: #4b5563;
    font-size: 12.5px;
    line-height: 1.6;
}

.mini_cart_deal { margin: 4px 0 2px; }

/* --------------------------------------------------------------------------
   In-flight rows. Applied while a quantity or remove request is running so a
   fast double-tap cannot put two conflicting quantities on the wire.
   -------------------------------------------------------------------------- */
.wrap-items.is-busy {
    opacity: .55;
    pointer-events: none;
}

/* A stepper at quantity 1 cannot go lower; the button says so. */
.cart_item_qty button[disabled],
.mini_cart_qty button[disabled] {
    cursor: not-allowed;
    opacity: .4;
}

.cart_item_qty button[disabled]:hover,
.mini_cart_qty button[disabled]:hover {
    background: #f5f6f8;
    border-color: #eceff3;
    color: #20242c;
}

/* A bundle's quantity is not the stepper's to change, so it reads as a value. */
.cart_item_qty.is-fixed,
.mini_cart_qty.is-fixed { gap: 0; }

.cart_item_qty_fixed,
.mini_cart_qty_fixed {
    background: #f5f6f8;
    border: 1px solid #eceff3;
    border-radius: 4px;
    color: #20242c;
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    line-height: 30px;
    padding: 0 12px;
}

/* --------------------------------------------------------------------------
   Drop-down position on touch screens.

   The theme already pins the open panel to the viewport with BOTH left and
   right set, so it cannot overflow at any header height - but only below
   768px, while the tap-to-open handler runs all the way up to 991px. Between
   those two widths the panel had no open state at all and could only be
   reached by hovering, which a touch device never does. This fills that band.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
    .mini__cart.mobile-cart-open .mini_cart_box {
        background: #fff;
        border: 1px solid #eeeeee;
        border-radius: 6px;
        box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
        display: block;
        left: auto;
        right: 10px;
        max-height: calc(100vh - 92px);
        opacity: 1 !important;
        overflow-y: auto;
        pointer-events: auto;
        position: fixed;
        transform: scaleY(1) !important;
        transform-origin: top right;
        visibility: visible !important;
        width: 360px;
        z-index: 10001;
    }
}

/* The panel is fixed, so its `top` has to come from where the icon actually
   is - a hardcoded offset drifts as the header grows. main.js measures it. */
@media (max-width: 991px) {
    .mini__cart.mobile-cart-open .mini_cart_box {
        top: 66px;
        /* The theme leaves the open panel at z-index 1002, under the
           back-to-top button's 9999 - which is why the button was painting on
           top of the basket total. */
        z-index: 10001;
    }
}

/* ==========================================================================
   Back-to-top button
   ========================================================================== */

/* The theme ships this as a flat 40px square pinned to the bottom-right
   corner. Rounded, centred and given some depth, it reads as a control
   rather than a stray block of colour.
   `display` is deliberately not declared here - bundle.css keeps the button
   hidden until the plugin fades it in. The icon is centred with line-height
   rather than flex for the same reason: that fade writes an inline
   `display: block`, which no stylesheet rule can override. */
#scrollUp {
    background: #ec1f24;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(236, 31, 36, .32);
    color: #fff;
    font-size: 18px;
    height: 44px;
    line-height: 44px;
    right: 16px;
    text-align: center;
    transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
    width: 44px;
    /* Clear the chat launcher, and the home indicator on notched phones. */
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}

#scrollUp:hover,
#scrollUp:focus-visible {
    background: #c81319;
    box-shadow: 0 8px 22px rgba(236, 31, 36, .42);
    color: #fff;
    transform: translateY(-2px);
}

#scrollUp:active { transform: translateY(0); }

/* The open mini-cart covers nearly the whole screen on a phone, and the
   button lands squarely on the basket total. There is nothing to scroll back
   to while the panel is up, so it steps out of the way. */
body.mini-cart-open #scrollUp {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

@media (max-width: 767px) {
    #scrollUp {
        font-size: 16px;
        height: 40px;
        line-height: 40px;
        right: 12px;
        width: 40px;
    }
}

/* ==========================================================================
   Mini-cart total
   ========================================================================== */

/* The total is the number the shopper is looking for, so it gets its own
   band rather than a bare row on a divider. The right-hand gutter keeps the
   amount clear of anything floating in that corner. */
.mini_cart_box .price_content {
    background: #faf9f7;
    border: 1px solid #f0ede8;
    border-radius: 8px;
    margin-bottom: 14px;
    padding: 12px 14px;
}

.mini_cart_box .cart-total-price {
    align-items: baseline;
    gap: 12px;
}

.mini_cart_box .cart-total-price span.label {
    color: #6b7280;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* display:block, not flex - flex would split the currency symbol and the
   amount into two items and the gap would push them apart: "£ 132.81". */
.mini_cart_box .cart-total-price span.value {
    display: block;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.01em;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .mini_cart_box .price_content {
        margin-bottom: 12px;
        padding: 12px;
    }

    .mini_cart_box .cart-total-price span.value { font-size: 18px; }
}