/**
 * Quick Order List - page styles
 *
 * Author: MJ Bomar
 * Version: 2.2.0
 *
 * What this file does, in plain English:
 * All the looks for the Quick Order List page. As of 2.0.0 that means the
 * grocery-list design: the search box and category chips up top (dressed the
 * same as the Shop page's filter bar chips), the "Retail products" and
 * "Professional products" dividers, the rose category headers, the product
 * cards (two side by side on desktop, one wide on phones), the size dropdown,
 * the quantity selector, the Add to Cart button and its little count badge,
 * the Out of Stock and Call to Order labels, and the floating cart bar at
 * the bottom.
 *
 * One thing worth knowing: the products are still table rows underneath
 * (tr.quick-order-row), because the license and 12-month restriction scripts
 * find and hide rows by that markup. This file turns the table into a card
 * grid purely with CSS, so those scripts never notice the difference.
 *
 * Changelog:
 * - 2.2.0 (2026-07-16): Search box polish from MJ's second test round. The
 *   magnifying glass moved to the right side of the box and became a real
 *   tappable button, matching the Shop page's search. On phones, tapping
 *   the collapsed search now opens it across the WHOLE bar (the chips step
 *   aside while it is open) instead of only into the leftover space next
 *   to them, so it reads like the desktop search.
 * - 2.1.0 (2026-07-16): Four fixes from MJ's first test round. The floating
 *   bar's View Cart button was invisible (white on white): the bar lives
 *   outside the page's main container, and the color values were only
 *   defined on the container, so the button's purple resolved to nothing.
 *   The palette now applies to the bar too. On phones, the quantity selector
 *   and the Add to Cart button were overlapping because the quantity was
 *   squeezed into the narrow photo column; the quantity now spans to the
 *   button and both get their own room. The phone search box now slides
 *   open (a real animation on its width) the moment it is tapped, handled
 *   with the page script, instead of only widening once you typed. And the
 *   chip row gained scroll arrows plus chip-snapping, and the page script
 *   now sizes the row to end exactly on a whole chip, so nothing shows
 *   half a chip and it is obvious there are more categories to scroll to.
 * - 2.0.0 (2026-07-16): The grocery-list redesign. Everything above is new;
 *   the pieces that carried over unchanged in spirit (size dropdown, quantity
 *   selector, floating bar, count badges, Out of Stock labels) got re-dressed
 *   to match. The old table-and-columns layout and its responsive overrides
 *   are gone. Colors come from the site palette: our purple #371D4F, plum
 *   #783687, the checkout chips' beige #EEEBE6 and lavender #D8C7DC.
 * - 1.1.0 (2026-07-12): Added a header and removed styles for things that
 *   were not on the page (the old product-filters area, its category and sort
 *   dropdowns, and the product-price cell the table never rendered).
 * - 1.0.0: Original version (no header back then).
 */

/* ==========================================================================
   The page's colors and sizes, in one place. These are the site's own
   palette values, the same ones the checkout chips and the Shop filter bar
   use, so this page finally speaks the same language as the rest of the
   site.
   ========================================================================== */
/* The floating cart bar renders outside the main container (it is the page
   section right after it), so it is named here too; without this the bar's
   purples and sizes resolve to nothing and its button paints invisible. */
.woo-quick-order-list,
.floating-cart-summary {
    --qol-purple: #371D4F;
    --qol-plum: #783687;
    --qol-viva: #B07EB2;
    --qol-lavender: #D8C7DC;
    --qol-rose: #EEEBE6;
    --qol-charcoal: #1F1F1F;
    --qol-hairline: #E4E0DA;
    --qol-muted: #7A7570;
    --qol-card-bg: #FFFFFF;
    --qol-control-h: 44px;
    font-family: var(--wp--preset--font-family--s-hne), sans-serif;
    color: var(--qol-charcoal);
}

/* Keeps the page content at a comfortable reading width. This class lives on
   the page's own wrapper block in the editor, same as always. */
.quick-order-wrapper {
    width: min(1024px, calc(100% - 3rem));
    margin-inline: auto;
}

/* ==========================================================================
   The aisle bar: search box + category chips. The page script pins it just
   under the site header once you scroll past it (the same trick the Shop
   filter bar uses), and a placeholder div holds its spot so the page never
   jumps. The chips are dressed exactly like the Shop filter bar chips:
   beige, no border, soft shadow, lavender when active.
   ========================================================================== */
.qol-aisle-bar {
    padding: 10px 0 12px;
    border-bottom: 1px solid var(--qol-hairline);
    background: #fff;
}

.qol-aisle-inner {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* While pinned, the bar stretches across the screen and its inner content
   stays lined up with the page column. The page script sets the top offset
   to the header's live bottom edge, so the condensing header never leaves a
   gap. */
.qol-aisle-bar.qol-aisle-bar-fixed {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 40;
    padding-left: 16px;
    padding-right: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}

.qol-aisle-bar.qol-aisle-bar-fixed .qol-aisle-inner {
    max-width: 1024px;
    margin-inline: auto;
}

/* The search box: same chip shell as the rest of the bar, with the
   magnifying glass and the words living inside it. Turns lavender while
   typing, like the Shop bar's search. */
.qol-aisle-search {
    flex: 0 0 200px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--qol-rose);
    border: 1px solid transparent;
    border-radius: 8px;
    height: var(--qol-control-h);
    padding: 0 4px 0 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .10);
    transition: background .15s ease, box-shadow .15s ease;
    color: var(--qol-plum);
    cursor: text;
}

.qol-aisle-search:focus-within {
    background: var(--qol-lavender);
    box-shadow: 0 0 0 2px rgba(55, 29, 79, .12), 0 6px 18px rgba(0, 0, 0, .12);
}

/* The magnifying glass button on the right of the box, matching the Shop
   page's search. Tapping it searches (the page script wires it up), and on
   phones it also pops the collapsed box open. */
.qol-search-go {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: 0;
    border-radius: 8px;
    color: var(--qol-plum);
    cursor: pointer;
    padding: 0;
}

.qol-search-go:focus-visible {
    outline: 2px solid var(--qol-purple);
    outline-offset: -2px;
}

.qol-aisle-search input {
    border: 0;
    background: transparent;
    outline: none;
    width: 100%;
    font-family: var(--wp--preset--font-family--s-hne), sans-serif;
    font-size: .95rem;
    font-weight: 300;
    color: var(--qol-charcoal);
}

/* Hide the little x some browsers draw inside search boxes; the box is small
   and the x crowds the text. Clearing with the keyboard still works. */
.qol-aisle-search input::-webkit-search-cancel-button {
    display: none;
}

/* The chip row scrolls sideways when there are more chips than room, with
   the scrollbar hidden so it reads as a clean strip. On phones this is the
   normal way to use it: thumb through the categories. */
.qol-aisle-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 6px 2px;
    margin: -6px 0;
    /* Swipes and arrow clicks settle on whole chips instead of stopping
       mid-chip. The scroll padding matches the row's own side padding so
       the snap point is the true start of the row; without it the row
       nudges itself a couple of pixels on load. */
    scroll-snap-type: x proximity;
    scroll-padding-inline: 2px;
}

.qol-aisle-chips::-webkit-scrollbar {
    display: none;
}

.qol-aisle-chips .qol-aisle-chip {
    scroll-snap-align: start;
}

/* The scroll arrows on the ends of the chip row. The page script adds them,
   shows the right one while there are more chips off screen that way, and
   the left one once you have scrolled. They make it obvious the row keeps
   going, which a clean cut edge did not. */
.qol-chip-arrow {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--qol-hairline);
    border-radius: 999px;
    background: #fff;
    color: var(--qol-plum);
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .10);
    transition: background .15s ease;
    padding: 0;
}

.qol-chip-arrow:hover {
    background: var(--qol-lavender);
}

.qol-chip-arrow:focus-visible {
    outline: 2px solid var(--qol-purple);
    outline-offset: 2px;
}

.qol-chip-arrow.qol-arrow-hidden {
    display: none;
}

.qol-aisle-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--qol-rose);
    border: 1px solid transparent;
    border-radius: 8px;
    height: var(--qol-control-h);
    padding: 0 14px;
    font-size: .88rem;
    font-weight: 300;
    color: var(--qol-charcoal);
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .10);
    transition: background .15s ease, box-shadow .15s ease;
}

.qol-aisle-chip:hover {
    background: var(--qol-lavender);
    color: var(--qol-charcoal);
}

/* The chip for the section currently on screen: lavender with the soft glow,
   exactly like a chosen chip at checkout. The page script moves this class
   as you scroll. */
.qol-aisle-chip.qol-chip-active {
    background: var(--qol-lavender);
    box-shadow: 0 0 0 2px rgba(55, 29, 79, .12), 0 6px 18px rgba(0, 0, 0, .12);
    color: var(--qol-purple);
    font-weight: 600;
}

.qol-aisle-chip:focus-visible {
    outline: 2px solid var(--qol-purple);
    outline-offset: 2px;
}

/* The little product count inside each chip. */
.qol-chip-count {
    font-size: .72rem;
    background: #fff;
    border-radius: 999px;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: var(--qol-plum);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   The table becomes a card grid. The table element itself just flows like a
   normal block; the body becomes a two-column grid on desktop and one column
   on smaller screens. The header and category rows span the full width, and
   each product row becomes a card.
   ========================================================================== */
.quick-order-table {
    display: block;
    width: 100%;
    border-collapse: separate;
}

.quick-order-table tbody {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media screen and (max-width: 899px) {
    .quick-order-table tbody {
        grid-template-columns: 1fr;
    }
}

/* ---------- The "Retail products" / "Professional products" dividers ---------- */
.qol-half-row {
    grid-column: 1 / -1;
    display: block;
    margin-top: 26px;
}

.qol-half-row td {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0;
    border: 0;
}

.qol-half-label {
    font-size: .78rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--qol-plum);
    white-space: nowrap;
}

/* The thin line that runs from the label to the page edge. */
.qol-half-row td::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--qol-hairline);
}

/* ---------- Category header rows ---------- */
.qol-cat-row {
    grid-column: 1 / -1;
    display: block;
    margin-top: 10px;
    /* When a chip jumps here, land with breathing room below the pinned
       aisle bar and the site header instead of underneath them. The page
       script fine-tunes the exact scroll spot; this is the no-script
       fallback. */
    scroll-margin-top: 160px;
}

.qol-cat-row td {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--qol-rose);
    border: 0;
    border-radius: 8px;
    padding: 9px 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

.qol-cat-title {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--qol-purple);
    margin: 0;
    letter-spacing: .01em;
    font-family: var(--wp--preset--font-family--s-hne), sans-serif;
}

.qol-cat-count {
    font-size: .75rem;
    color: var(--qol-plum);
    background: #fff;
    border-radius: 999px;
    padding: 2px 9px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ---------- Product cards ---------- */
/* Each row lays out as: photo down the left, name on top, and the size,
   quantity, and Add to Cart controls in a line beneath the name. */
tr.quick-order-row {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) auto auto;
    grid-template-areas:
        "img details details details"
        "img size    qty     add";
    gap: 8px 12px;
    align-items: center;
    background: var(--qol-card-bg);
    border: 1px solid var(--qol-hairline);
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
    transition: background .2s ease, border-color .2s ease;
}

/* A card with something already in the cart wears a light lavender wash so
   what you have picked up reads at a glance, like items checked off a list.
   The page script toggles this class from the cart. */
tr.quick-order-row.qol-in-cart {
    background: linear-gradient(0deg, rgba(216, 199, 220, .25), rgba(216, 199, 220, .25)), var(--qol-card-bg);
    border-color: var(--qol-lavender);
}

/* All cells stop acting like table cells; the card's grid places them. */
tr.quick-order-row td {
    display: block;
    padding: 0;
    border: 0;
    min-width: 0;
}

/* Product photo, top-left, spanning both card rows. */
.product-image {
    grid-area: img;
    align-self: start;
}

.product-image a {
    display: block;
}

.product-image img {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: 8px;
    background: var(--qol-rose);
    display: block;
}

/* Name and the View details link. */
.product-details {
    grid-area: details;
    align-self: end;
}

.product-title {
    font-weight: 600;
    font-size: .98rem;
    color: var(--qol-charcoal);
}

/* The little "New" pill next to the title for New Products items. */
.qol-pill-new {
    display: inline-block;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 2px 8px;
    margin-left: 6px;
    background: var(--qol-viva);
    color: #fff;
    vertical-align: 2px;
}

.product-details a.view-details {
    display: block;
    margin-top: 2px;
    font-size: .8rem;
    color: var(--qol-plum);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.product-details a.view-details:hover {
    color: var(--qol-purple);
}

/* ---------- The controls line: size, quantity, add ---------- */
.product-size {
    grid-area: size;
}

.product-quantity {
    grid-area: qty;
}

.product-add-to-cart {
    grid-area: add;
    display: flex;
    align-items: center;
    gap: 2px;
}

/* The size dropdown (and the price text for simple products). Scoped to the
   page container; the old file styled every <select> bare, which was fine
   only because this stylesheet loads on this page alone. Scoping keeps us
   honest either way. */
.woo-quick-order-list select.product-size-dropdown {
    width: 100%;
    height: var(--qol-control-h);
    box-sizing: border-box;
    border: 1px solid var(--qol-hairline);
    border-radius: 8px;
    background-color: #fff;
    padding: 0 32px 0 10px;
    font-family: var(--wp--preset--font-family--s-hne), sans-serif;
    font-size: .9rem;
    font-weight: 300;
    color: var(--qol-charcoal) !important;
    -webkit-text-fill-color: var(--qol-charcoal) !important; /* iOS Safari */
    appearance: none;
    -webkit-appearance: none;
    /* Our own dropdown arrow, in plum, since the native one goes away with
       appearance:none. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='%23783687'%3E%3Cpolygon points='0,2 10,2 5,9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 11px;
}

.woo-quick-order-list select.product-size-dropdown:hover {
    border-color: var(--qol-lavender);
}

.woo-quick-order-list select.product-size-dropdown:focus {
    border-color: var(--qol-viva);
    outline: none;
}

.product-size-dropdown option {
    color: var(--qol-charcoal);
    font-family: var(--wp--preset--font-family--s-hne), sans-serif;
}

/* Sold-out or Call to Order sizes gray out in the list. */
.product-size-dropdown option:disabled,
.product-size-dropdown option.qol-soldout {
    color: #9a9a9a;
}

/* Simple products show their price where the dropdown would be. */
.simple-product-price {
    display: inline-flex;
    align-items: center;
    height: var(--qol-control-h);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* What logged-out visitors see in the size/price spot. */
.login-required {
    display: inline-flex;
    align-items: center;
    min-height: var(--qol-control-h);
    font-size: .85rem;
    color: var(--qol-muted);
}

/* ---------- Quantity selector ---------- */
.wc-block-components-quantity-selector {
    display: flex;
    align-items: center;
    border: 1px solid var(--qol-hairline);
    border-radius: 8px;
    background-color: #fff;
    height: var(--qol-control-h);
    overflow: hidden;
}

.wc-block-components-quantity-selector__input {
    width: 44px;
    height: 100%;
    text-align: center;
    font-size: .95rem;
    border: none;
    background-color: #fff;
    appearance: textfield;
    -moz-appearance: textfield;
    font-family: var(--wp--preset--font-family--s-hne), sans-serif;
    font-variant-numeric: tabular-nums;
}

.wc-block-components-quantity-selector__input::-webkit-inner-spin-button {
    display: none;
}

.wc-block-components-quantity-selector__button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 100%;
    background-color: #F9F9F9;
    color: var(--qol-plum);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    font-family: var(--wp--preset--font-family--s-hne), sans-serif;
}

.wc-block-components-quantity-selector__button:hover {
    background-color: var(--qol-rose);
}

/* Grayed-out quantity controls for unavailable simple products. */
.qol-qty-disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* ---------- Add to Cart button and friends ---------- */
.woo-quick-order-list .button.add-to-cart {
    background-color: var(--qol-purple);
    color: #fff;
    border: none;
    border-radius: 8px;
    height: var(--qol-control-h);
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    font-weight: 400;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease;
}

.woo-quick-order-list .button.add-to-cart:hover {
    background-color: var(--qol-plum);
    color: #fff;
}

.woo-quick-order-list .button.add-to-cart:focus-visible {
    outline: 2px solid var(--qol-plum);
    outline-offset: 2px;
}

/* The X that removes this product from the cart. Hidden until the cart has
   the product; the page script shows it. */
.remove-from-cart {
    font-size: 1.05rem;
    color: var(--qol-plum);
    padding: 6px;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
}

.remove-from-cart:hover {
    color: var(--qol-purple);
}

/* Out of Stock / Call to Order labels for simple products, sitting where the
   Add to Cart button would be. Call to Order wears lavender so it reads as
   "there is still a way", plain gray means gone. */
.qol-out-of-stock-label {
    display: inline-flex;
    align-items: center;
    height: var(--qol-control-h);
    padding: 0 14px;
    border-radius: 8px;
    background: var(--qol-rose);
    color: var(--qol-muted);
    font-weight: 600;
    font-size: .85rem;
    white-space: nowrap;
}

.qol-call-to-order-label {
    background: var(--qol-lavender);
    color: var(--qol-purple);
}

/* The "please pick a size / quantity" note the page script drops in. */
.quick-order-error-message {
    font-family: var(--wp--preset--font-family--s-hne), sans-serif;
    font-size: 12px;
    color: red;
    margin-top: 4px;
}

/* Shown by the page script when a search matches nothing. */
.qol-empty-search {
    text-align: center;
    color: var(--qol-muted);
    padding: 40px 0;
    font-size: .95rem;
}

/* ---------- The page script's hide switches ---------- */
/* A card the search filtered out. */
tr.quick-order-row.qol-search-hidden {
    display: none !important;
}

/* A category header (or a whole Retail/Professional divider) whose products
   are all hidden, by a search or by the restriction scripts. The page script
   toggles these so nobody sees an empty shelf. */
.qol-cat-row.qol-section-hidden,
.qol-half-row.qol-section-hidden {
    display: none !important;
}

/* The matching chip disappears with its section. */
.qol-aisle-chip.qol-chip-hidden {
    display: none;
}

/* ---------- Phone layout ---------- */
/* One card per row happens at 899px up above. Inside the card, the controls
   get their own full-width line under the photo and name, so every tap
   target stays big. */
@media screen and (max-width: 560px) {
    tr.quick-order-row {
        grid-template-columns: 64px minmax(0, 1fr) auto;
        /* The quantity spans across to the button so the stepper never gets
           squeezed into the narrow photo column (that squeeze is what made
           the button overlap the plus sign in the first test round). */
        grid-template-areas:
            "img  details details"
            "size size    size"
            "qty  qty     add";
    }

    .product-image img {
        width: 64px;
        height: 64px;
    }

    .product-details {
        align-self: center;
    }

    /* The stepper keeps its natural size on the left of its line... */
    .product-quantity .wc-block-components-quantity-selector {
        width: fit-content;
    }

    /* ...and the button fills whatever is left on the right. */
    .product-add-to-cart {
        justify-content: stretch;
    }

    .product-add-to-cart .button.add-to-cart {
        flex: 1;
    }

    /* On a phone the search box sits collapsed to just the magnifying glass.
       Tapping it slides it open across the whole bar (the page script adds
       the class on tap, the width change here is what animates, and the
       chips step aside below); it slides shut on tap-away when empty. */
    .qol-aisle-search {
        flex: 1 1 auto;
        max-width: 44px;
        padding: 0;
        justify-content: center;
        transition: max-width .25s ease, background .15s ease, box-shadow .15s ease;
    }

    .qol-aisle-search.qol-search-open {
        max-width: 100%;
        padding: 0 4px 0 12px;
        justify-content: flex-start;
    }

    .qol-aisle-search:not(.qol-search-open) input {
        width: 0;
        padding: 0;
    }

    /* While the search is open it gets the whole bar to itself: the chips
       and their arrows sit out until it closes, so the box opens full width
       like the desktop search instead of squeezing in next to them. */
    .qol-aisle-search.qol-search-open ~ .qol-aisle-chips,
    .qol-aisle-search.qol-search-open ~ .qol-chip-arrow {
        display: none;
    }
}

/* ==========================================================================
   The floating cart bar at the bottom. Same bones and class names as always
   (the page script fills the count and total), re-dressed as a white card
   with the purple View Cart button.
   ========================================================================== */
.floating-cart-summary {
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    border: 1px solid var(--qol-hairline);
    padding: 12px 16px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(55, 29, 79, .22);
    z-index: 999;
    display: none;
    align-items: center;
    gap: 18px;
    min-width: min(430px, calc(100vw - 32px));
    box-sizing: border-box;
    font-family: var(--wp--preset--font-family--s-hne), sans-serif;
}

.floating-cart-summary .cart-summary-left {
    flex: 1;
}

.floating-cart-summary .cart-items-count {
    font-weight: 600;
    color: var(--qol-purple);
    font-variant-numeric: tabular-nums;
}

.floating-cart-summary .cart-total-amount {
    font-variant-numeric: tabular-nums;
}

.floating-cart-summary .extra-charges-text {
    font-size: .72rem;
    color: var(--qol-muted);
    margin: 2px 0 0;
}

.floating-cart-summary .view-cart-button {
    background-color: var(--qol-purple);
    color: #fff;
    height: var(--qol-control-h);
    padding: 0 18px;
    border-radius: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    transition: background .15s ease;
}

.floating-cart-summary .view-cart-button:hover {
    background-color: var(--qol-plum);
    color: #fff;
}

/* ==========================================================================
   The cart quantity badge on the Add to Cart buttons (the little number
   dot). Same classes as before; the badge script creates these elements.
   ========================================================================== */
.qol-badge-anchor {
    position: relative;
    overflow: visible;
}

.qol-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--qol-viva);
    color: #ffffff;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    font-weight: 600;
    display: none; /* hidden until qty > 0 */
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

/* Respect the visitor's reduced-motion setting: the page still works the
   same, transitions just stop animating. */
@media (prefers-reduced-motion: reduce) {
    .woo-quick-order-list *,
    .floating-cart-summary {
        transition: none !important;
    }
}