/* ==========================================================================
   MegaPets 2.0 — Mini Catalog Sidebar

   File:
   assets/css/frontend.css

   Ownership:
   - Astra owns desktop container and column geometry above 1240px.
   - WooCommerce owns product data and image markup.
   - MegaPets owns component presentation and the shared tablet/mobile dock.

   Responsive contract:
   - 1241px and wider: desktop sidebar catalog.
   - 1240px and narrower: the same bottom-docked layout on tablet and phone.
   Keep these values synchronized with assets/js/frontend.js and the image
   sizes hint in includes/frontend.php.
   ========================================================================== */

body.mp-mini-catalog-sidebar-page
#secondary
.widget_mp_mini_catalog_sidebar,
body.mp-mini-catalog-sidebar-page
#secondary
.widget_mp_mini_catalog_sidebar * {
    box-sizing: border-box;
}

body.mp-mini-catalog-sidebar-page
#secondary
.widget_mp_mini_catalog_sidebar {
    width: 100%;
    margin: 0;
}

.mp-mini-catalog-sidebar {
    --mp-mini-catalog-image-width: 96px;
    --mp-mini-catalog-image-ratio: 3 / 2;
    --mp-mini-catalog-intro-height: 117px;
    --mp-mini-catalog-row-height: 84px;
    --mp-mini-catalog-products-reference-height: 672px;
    --mp-mini-catalog-action-size: 32px;
    --mp-mini-catalog-offer-surface: rgb(250 246 242);

    /* Desktop: reveal one light thumb colour only on hover or focus. */
    --mp-scrollbar-track-color: transparent;
    --mp-scrollbar-thumb-color: transparent;
    --mp-scrollbar-thumb-hover-color: rgb(199 154 87 / 42%);
    --mp-scrollbar-thumb-active-color: rgb(199 154 87 / 42%);

    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    overflow: hidden;
    border:
        var(--mp-border-width)
        solid
        var(--mp-color-border-subtle);
    border-radius: var(--mp-radius);
    background: var(--mp-color-surface);
    color: var(--mp-color-grey);
    font-family: var(--mp-font-body);
    box-shadow: none;
}

.mp-mini-catalog-sidebar__intro {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: flex-start;
    min-height: var(--mp-mini-catalog-intro-height);
    padding: 0 14px 13px;
    border-bottom:
        var(--mp-standard-separator-line-thickness)
        solid
        var(--mp-standard-separator-line-color);
}

.mp-mini-catalog-sidebar__intro-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    min-width: 0;
}

.mp-mini-catalog-sidebar__category-link,
.mp-mini-catalog-sidebar__category-link:visited,
.mp-mini-catalog-sidebar__category-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-height: 47px;
    padding: 10px 0 9px;
    border: 0;
    background: transparent;
    color: var(--mp-color-dark);
    text-decoration: none;
    box-shadow: none;
    transition:
        color
        var(--mp-duration-fast)
        var(--mp-ease);
}

.mp-mini-catalog-sidebar__category-link:hover,
.mp-mini-catalog-sidebar__category-link:focus-visible,
.mp-mini-catalog-sidebar__category-link:active {
    border: 0;
    background: transparent;
    color: var(--mp-color-gold-dark);
    text-decoration: none;
    box-shadow: none;
}

.mp-mini-catalog-sidebar__category-link:focus-visible,
.mp-mini-catalog-sidebar__product-link:focus-visible,
.mp-mini-catalog-sidebar__add-to-cart:focus-visible,
.mp-mini-catalog-sidebar__view-product:focus-visible,
button.mp-mini-catalog-sidebar__mobile-pin:focus-visible {
    outline:
        var(--mp-border-width)
        solid
        var(--mp-color-border-interactive);
    outline-offset: -3px;
}

.mp-mini-catalog-sidebar__category-copy {
    display: flex;
    align-items: baseline;
    min-width: 0;
    gap: 0.28em;
}

.mp-mini-catalog-sidebar__category-prefix,
.mp-mini-catalog-sidebar__category-label {
    font-size: 12.5px;
    line-height: 1.35;
    font-weight: var(--mp-font-weight-semibold);
    letter-spacing: 0.012em;
}

.mp-mini-catalog-sidebar__category-prefix {
    flex: 0 0 auto;
}

.mp-mini-catalog-sidebar__category-label {
    min-width: 0;
}

.mp-mini-catalog-sidebar__category-arrow {
    --mp-premium-arrow-standard-glyph-size: 1.55em;

    font-size: 18px;
}

button.mp-mini-catalog-sidebar__mobile-pin {
    display: none;
    place-items: center;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    margin: 0;
    padding: 0;
    border:
        var(--mp-border-width)
        solid
        var(--mp-mini-control-secondary-border-color);
    border-radius: var(--mp-radius-small);
    background: var(--mp-mini-control-secondary-background);
    color: var(--mp-mini-control-secondary-icon-color);
    line-height: 1;
    box-shadow: var(--mp-mini-control-secondary-shadow);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        border-color
        var(--mp-duration-fast)
        var(--mp-ease),
        background-color
        var(--mp-duration-fast)
        var(--mp-ease),
        color
        var(--mp-duration-fast)
        var(--mp-ease);
}

button.mp-mini-catalog-sidebar__mobile-pin:hover,
button.mp-mini-catalog-sidebar__mobile-pin:focus-visible {
    border-color:
        var(
            --mp-mini-control-secondary-border-color-active
        );
    background:
        var(
            --mp-mini-control-secondary-background-active
        );
    color:
        var(
            --mp-mini-control-secondary-icon-color-active
        );
}

button.mp-mini-catalog-sidebar__mobile-pin:active {
    border-color:
        var(
            --mp-mini-control-secondary-border-color-active
        );
    background:
        var(
            --mp-mini-control-secondary-background-active
        );
    color:
        var(
            --mp-mini-control-secondary-icon-color-active
        );
}

.mp-mini-catalog-sidebar__pin-icon {
    display: block;
    width: 20px;
    height: 20px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform-origin: center;
    transition:
        transform
        var(--mp-duration-normal)
        var(--mp-ease);
}

/*
 * The pin and Astra arrow form one filled secondary-control icon series.
 * The pin body is a compact currentColor silhouette; only its stem stays
 * outlined. Both parts therefore follow the shared idle and active colors.
 */

.mp-mini-catalog-sidebar__pin-icon > path:first-child {
    fill: currentColor;
    stroke: none;
}

.mp-mini-catalog-sidebar__pin-icon > path:last-child {
    fill: none;
    stroke: currentColor;
}

/*
 * Pin positions: the collapsed catalog leans left; the expanded catalog
 * leans right. A straight pin is intentionally avoided in both states.
 */

button.mp-mini-catalog-sidebar__mobile-pin[
    aria-expanded="true"
]
.mp-mini-catalog-sidebar__pin-icon {
    transform: rotate(45deg);
}

.mp-mini-catalog-sidebar[
    data-mp-mini-catalog-mobile-collapsed="true"
]
.mp-mini-catalog-sidebar__pin-icon {
    transform: rotate(-45deg);
}

.mp-mini-catalog-sidebar__tagline {
    position: relative;
    max-width: 25ch;
    margin: 0;
    padding-top: 12px;
    color: var(--mp-color-brown-chocolate);
    font-family: var(--mp-font-accent);
    font-size: var(--mp-quote-font-size);
    line-height: 1.45;
    font-style: italic;
}

.mp-mini-catalog-sidebar__tagline::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 42px;
    height:
        var(
            --mp-standard-separator-line-thickness
        );
    background:
        var(
            --mp-standard-separator-line-color
        );
    pointer-events: none;
}

.mp-mini-catalog-sidebar__products {
    flex: 0 1 auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
}

.mp-mini-catalog-sidebar__scroll-indicator {
    display: none;
}

.mp-mini-catalog-sidebar__products--empty {
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
    justify-content: stretch;
    overflow: hidden;
    scrollbar-gutter: auto;
}

.mp-mini-catalog-sidebar__placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 240px;
    padding: 24px 18px;
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            var(--mp-color-surface) 0%,
            var(--mp-color-background-soft) 100%
        );
}

.mp-mini-catalog-sidebar__placeholder img {
    display: block;
    width: min(100%, 240px);
    height: auto;
    max-height: 100%;
    margin: 0;
    object-fit: contain;
}

.mp-mini-catalog-sidebar__status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.mp-mini-catalog-sidebar__products > [role="listitem"] {
    margin: 0;
}

.mp-mini-catalog-sidebar__product {
    position: relative;
    min-height: var(--mp-mini-catalog-row-height);
    border: 0;
    border-bottom:
        var(--mp-standard-separator-line-thickness)
        solid
        var(--mp-standard-separator-line-color);
    border-radius: 0;
    background: transparent;
    color: var(--mp-color-grey);
    transition:
        color
        var(--mp-duration-fast)
        var(--mp-ease),
        background-color
        var(--mp-duration-fast)
        var(--mp-ease);
}

.mp-mini-catalog-sidebar__product-link,
.mp-mini-catalog-sidebar__product-link:visited {
    display: grid;
    grid-template-columns:
        var(--mp-mini-catalog-image-width)
        minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    min-height: var(--mp-mini-catalog-row-height);
    padding: 9px 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    text-decoration: none;
    box-shadow: none;
}

.mp-mini-catalog-sidebar__products
> [role="listitem"]:last-child
.mp-mini-catalog-sidebar__product {
    border-bottom: 0;
}

.mp-mini-catalog-sidebar__product:hover {
    background: var(--mp-color-background-soft);
    color: var(--mp-color-dark);
}

.mp-mini-catalog-sidebar__product-link:hover,
.mp-mini-catalog-sidebar__product-link:focus-visible {
    color: inherit;
    text-decoration: none;
    box-shadow: none;
}

.mp-mini-catalog-sidebar__product-link:active {
    background: var(--mp-color-cream);
    color: var(--mp-color-dark);
}

.mp-mini-catalog-sidebar__image {
    display: block;
    width: var(--mp-mini-catalog-image-width);
    aspect-ratio:
        var(--mp-mini-catalog-image-ratio);
    overflow: hidden;
    border:
        var(--mp-border-width)
        solid
        var(--mp-color-border-subtle);
    border-radius: var(--mp-radius-small);
    background: var(--mp-color-background-soft);
}

.mp-mini-catalog-sidebar__image img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
}

.mp-mini-catalog-sidebar__product-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 5px;
}

.mp-mini-catalog-sidebar__product-title {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font-family: var(--mp-font-body);
    font-size: 12px;
    line-height: 1.38;
    font-weight: var(--mp-font-weight-medium);
}

.mp-mini-catalog-sidebar__product-title-main,
.mp-mini-catalog-sidebar__product-title-sub {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
}

.mp-mini-catalog-sidebar__product-title-main {
    line-clamp: 2;
    -webkit-line-clamp: 2;
}

.mp-mini-catalog-sidebar__product-title--split
.mp-mini-catalog-sidebar__product-title-main {
    line-clamp: 1;
    -webkit-line-clamp: 1;
}

.mp-mini-catalog-sidebar__product-title-sub {
    margin-top: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    letter-spacing: normal;
    text-transform: none;
    line-clamp: 1;
    -webkit-line-clamp: 1;
}

.mp-mini-catalog-sidebar__price {
    min-width: 0;
    color: var(--mp-color-gold-dark);
    font-family: var(--mp-font-body);
    font-size: 12px;
    line-height: 1.25;
    font-weight: var(--mp-font-weight-semibold);
}

.mp-mini-catalog-sidebar__product-meta {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        var(--mp-mini-catalog-action-size);
    align-items: center;
    gap: 8px;
    min-height: var(--mp-mini-catalog-action-size);
}

.mp-mini-catalog-sidebar__product-action-space {
    display: block;
    width: var(--mp-mini-catalog-action-size);
    height: var(--mp-mini-catalog-action-size);
}

.mp-mini-catalog-sidebar__price del {
    color: var(--mp-color-grey);
    opacity: 0.58;
}

.mp-mini-catalog-sidebar__price ins {
    text-decoration: none;
}

.mp-mini-catalog-sidebar__product-action {
    position: absolute;
    z-index: 2;
    right: 12px;
    bottom: 9px;
    display: block;
    width: var(--mp-mini-catalog-action-size);
    height: var(--mp-mini-catalog-action-size);
}

.mp-mini-catalog-sidebar__cart-control {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.mp-mini-catalog-sidebar__product-action
.mp-mini-catalog-sidebar__add-to-cart.button,
.mp-mini-catalog-sidebar__product-action
.mp-mini-catalog-sidebar__add-to-cart.button:visited,
.mp-mini-catalog-sidebar__view-product,
.mp-mini-catalog-sidebar__view-product:visited {
    display: grid;
    place-items: center;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border:
        var(--mp-border-width)
        solid
        var(--mp-color-border-interactive);
    border-radius: var(--mp-radius-small);
    text-decoration: none;
    box-shadow: none;
    transition:
        background
        var(--mp-duration-fast)
        var(--mp-ease),
        border-color
        var(--mp-duration-fast)
        var(--mp-ease),
        color
        var(--mp-duration-fast)
        var(--mp-ease);
}

.mp-mini-catalog-sidebar__product-action
.mp-mini-catalog-sidebar__add-to-cart.button,
.mp-mini-catalog-sidebar__product-action
.mp-mini-catalog-sidebar__add-to-cart.button:visited {
    background: var(--mp-color-surface);
    color: transparent;
    font-size: 0;
    line-height: 0;
}

.mp-mini-catalog-sidebar__product-action
.mp-mini-catalog-sidebar__add-to-cart.button:hover,
.mp-mini-catalog-sidebar__product-action
.mp-mini-catalog-sidebar__add-to-cart.button:focus-visible {
    border-color: var(--mp-color-gold-dark);
    background: var(--mp-color-cream);
    color: transparent;
}

.mp-mini-catalog-sidebar__product-action
.mp-mini-catalog-sidebar__add-to-cart.button:active {
    border:
        var(--mp-border-width)
        solid
        var(--mp-color-gold-dark);
    background: var(--mp-color-background-soft);
}

.mp-mini-catalog-sidebar__cart-visual {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    color: var(--mp-color-gold-dark);
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition:
        color 0.25s ease,
        transform 0.35s var(--mp-ease);
}

.mp-mini-catalog-sidebar__cart-icon {
    display: block;
    width: 18px;
    height: 18px;
}

.mp-mini-catalog-sidebar__product-action
.mp-mini-catalog-sidebar__add-to-cart.button.loading,
.mp-mini-catalog-sidebar__product-action
.mp-mini-catalog-sidebar__add-to-cart.button.added {
    padding: 0;
    border:
        var(--mp-border-width)
        solid
        var(--mp-color-gold-dark);
    opacity: 1;
}

.mp-mini-catalog-sidebar__view-product,
.mp-mini-catalog-sidebar__view-product:visited {
    background: var(--mp-color-surface);
    color: var(--mp-color-gold-dark);
}

.mp-mini-catalog-sidebar__view-product:hover,
.mp-mini-catalog-sidebar__view-product:focus-visible {
    border-color: var(--mp-color-gold-dark);
    background: var(--mp-color-cream);
    color: var(--mp-color-gold-dark);
}

.mp-mini-catalog-sidebar__view-product:active {
    background: var(--mp-color-background-soft);
}

.mp-mini-catalog-sidebar__view-product-arrow {
    --mp-premium-arrow-standard-glyph-size: 1.6em;

    font-size: 18px;
    opacity: 1;
}

body.mp-mini-catalog-sidebar-page
#secondary
.widget_mp_mini_catalog_sidebar
.mp-mini-catalog-sidebar__product-action
a.added_to_cart.wc-forward {
    display: none;
}

/*
 * Astra owns the desktop catalog columns, global sidebar spacing and desktop
 * sticky behavior. MegaPets keeps the product list independently scrollable
 * and docks this same component on mobile without cloning its contents.
 */

@media (min-width: 1241px) {

    .mp-mini-catalog-sidebar {
        --mp-mini-catalog-intro-height: 115px;
        --mp-mini-catalog-row-height: 88px;

        height:
            calc(
                var(--mp-mini-catalog-intro-height)
                + var(--mp-mini-catalog-products-reference-height)
            );
        max-height: 70vh;
        max-height: 70dvh;
    }

    .mp-mini-catalog-sidebar__products {
        flex: 1 1 auto;
        height:
            var(
                --mp-mini-catalog-products-reference-height
            );
        min-height: 0;
        max-height: none;
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-gutter: stable;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
    }

    .mp-mini-catalog-sidebar__category-link,
    .mp-mini-catalog-sidebar__category-link:visited,
    .mp-mini-catalog-sidebar__category-heading {
        color: var(--mp-color-brown-chocolate);
    }

    .mp-mini-catalog-sidebar__category-prefix,
    .mp-mini-catalog-sidebar__category-label {
        font-size: var(--mp-compact-heading-font-size);
        text-transform: uppercase;
    }

    .mp-mini-catalog-sidebar__tagline::before {
        top: -8px;
    }

    .mp-mini-catalog-sidebar__product {
        width:
            calc(
                100% + var(--mp-scrollbar-size)
            );
        background:
            var(--mp-mini-catalog-offer-surface);
    }

    .mp-mini-catalog-sidebar__product:hover {
        background: var(--mp-color-page);
        color: var(--mp-color-dark);
    }

    .mp-mini-catalog-sidebar__product:has(
        :is(
            .mp-mini-catalog-sidebar__product-link,
            .mp-mini-catalog-sidebar__view-product,
            .mp-mini-catalog-sidebar__add-to-cart
        ):active
    ) {
        background: var(--mp-color-background-soft);
        color: var(--mp-color-dark);
    }

    .mp-mini-catalog-sidebar__product-link,
    .mp-mini-catalog-sidebar__product-link:visited {
        min-height: var(--mp-mini-catalog-row-height);
        padding: 11px 19px;
    }

    .mp-mini-catalog-sidebar__product-link:active {
        background: transparent;
    }

    .mp-mini-catalog-sidebar__product-action {
        right: 19px;
        bottom: 11px;
    }

    .mp-mini-catalog-sidebar__product-action
    .mp-mini-catalog-sidebar__add-to-cart.button,
    .mp-mini-catalog-sidebar__product-action
    .mp-mini-catalog-sidebar__add-to-cart.button:visited,
    .mp-mini-catalog-sidebar__product-action
    .mp-mini-catalog-sidebar__add-to-cart.button:hover,
    .mp-mini-catalog-sidebar__product-action
    .mp-mini-catalog-sidebar__add-to-cart.button:focus-visible,
    .mp-mini-catalog-sidebar__product-action
    .mp-mini-catalog-sidebar__add-to-cart.button:active,
    .mp-mini-catalog-sidebar__view-product,
    .mp-mini-catalog-sidebar__view-product:visited,
    .mp-mini-catalog-sidebar__view-product:hover,
    .mp-mini-catalog-sidebar__view-product:focus-visible,
    .mp-mini-catalog-sidebar__view-product:active {
        background: transparent;
    }
}

/*
 * MegaPets docks the secondary-column catalog at the shared 1240px tablet
 * breakpoint and turns it into the same compact horizontal list used on
 * phones. Once the catalog is fixed to the viewport, Astra's desktop sidebar
 * column must be released so it cannot squeeze the main interactive tool.
 */

@media (max-width: 1240px) {

    body.mp-mini-catalog-sidebar-page
    .site-content > .ast-container {
        display: block;
    }

    body.mp-mini-catalog-sidebar-page
    #primary,
    body.mp-mini-catalog-sidebar-page
    #secondary {
        float: none;
        width: 100%;
        max-width: 100%;
    }

    body.mp-mini-catalog-sidebar-page.ast-right-sidebar
    #primary {
        padding-right: 0;
        border-right: 0;
    }

    body.mp-mini-catalog-sidebar-page.ast-left-sidebar
    #primary {
        padding-left: 0;
        border-left: 0;
    }

    body.mp-mini-catalog-sidebar-page
    #secondary {
        margin: 0;
        padding: 0;
        border: 0;
    }

    body.mp-mini-catalog-sidebar-page
    #secondary .sidebar-main {
        position: static !important;
        top: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /*
     * The mobile catalog is one edge-to-edge bottom strip. The pin belongs to
     * its header, so the products keep the full viewport width. Astra keeps
     * ownership of its scroll-to-top control; MegaPets only aligns that native
     * control above the pin.
     */

    body.mp-mini-catalog-sidebar-page {
        /*
         * Keep a 42px touch target while painting a lighter 38px square.
         * The two 2px insets retain a 4px visual gap between controls.
         * The shared shadow follows the painted surface, not the transparent
         * touch-target inset.
         */
        --mp-mini-catalog-mobile-control-size: 42px;
        --mp-mini-catalog-mobile-control-visual-inset: 2px;
        --mp-mini-catalog-mobile-control-gap: 0px;
        /*
         * Includes the former 6px products lead so the label is centered in
         * the complete visible band above the first offer. Total dock height
         * and the offer position stay unchanged.
         */
        --mp-mini-catalog-mobile-header-height: 36px;
        --mp-mini-catalog-mobile-offer-surface:
            rgb(255 255 255 / 54%);
        --mp-mini-catalog-mobile-control-bottom:
            env(safe-area-inset-bottom, 0px);
        --mp-mini-catalog-mobile-control-right:
            max(
                8px,
                env(safe-area-inset-right, 0px)
            );
        --mp-mini-catalog-mobile-scroll-top-bottom:
            calc(
                var(--mp-mini-catalog-mobile-control-bottom)
                + var(--mp-mini-catalog-mobile-control-size)
            );
    }

    .mp-mini-catalog-sidebar {
        /*
         * The 108 × 72px image keeps the premium 3:2 proportion and remains
         * flush with the full offer height. The narrower image gives the next
         * offer a clearer entrance without taking space away from the copy.
         */
        --mp-mini-catalog-image-width: 108px;
        --mp-scrollbar-size: 4px;
        --mp-scrollbar-track-color:
            rgb(255 255 255 / 58%);
        --mp-scrollbar-thumb-color:
            rgb(199 154 87 / 58%);
        --mp-scrollbar-thumb-hover-color:
            rgb(199 154 87 / 58%);
        --mp-scrollbar-thumb-active-color:
            rgb(199 154 87 / 58%);
        --mp-mini-catalog-offer-inset-left:
            max(12px, env(safe-area-inset-left, 0px));
        --mp-mini-catalog-offer-inset-right:
            max(12px, env(safe-area-inset-right, 0px));
        --mp-mini-catalog-scroll-inset-left:
            max(20px, env(safe-area-inset-left, 0px));
        --mp-mini-catalog-scroll-inset-right:
            max(20px, env(safe-area-inset-right, 0px));
        --mp-mini-catalog-scroll-track-width:
            calc(
                100%
                - var(--mp-mini-catalog-scroll-inset-left)
                - var(--mp-mini-catalog-scroll-inset-right)
            );

        position: fixed;
        z-index: 9990;
        right: 0;
        bottom: 0;
        left: 0;
        box-sizing: border-box;
        width: auto;
        max-width: none;
        max-height: min(46vh, 320px);
        max-height: min(46dvh, 320px);
        margin: 0;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 0;
        background: var(--mp-global-color-background-brand);
        overflow: visible;
        box-shadow:
            0 -8px 24px
            rgb(62 50 37 / 12%);
    }

    .mp-mini-catalog-sidebar[
        data-mp-mini-catalog-mobile-collapsed="true"
    ] {
        height: 0;
        min-height: 0;
        max-height: 0;
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
        pointer-events: none;
    }

    .mp-mini-catalog-sidebar__intro {
        position: relative;
        min-height: 0;
        padding:
            0
            calc(
                var(
                    --mp-mini-catalog-mobile-control-right
                )
                + var(
                    --mp-mini-catalog-mobile-control-size
                )
                + 4px
            )
            0
            max(12px, env(safe-area-inset-left, 0px));
        border-bottom: 0;
        background: var(--mp-global-color-background-brand);
    }

    .mp-mini-catalog-sidebar__intro-head {
        display: block;
        min-height:
            var(
                --mp-mini-catalog-mobile-header-height
            );
    }

    .mp-mini-catalog-sidebar__category-link,
    .mp-mini-catalog-sidebar__category-link:visited,
    .mp-mini-catalog-sidebar__category-heading {
        min-height:
            var(
                --mp-mini-catalog-mobile-header-height
            );
        padding: 0;
        color: var(--mp-color-gold-dark);
    }

    .mp-mini-catalog-sidebar__category-link,
    .mp-mini-catalog-sidebar__category-link:visited {
        display: flex;
        align-items: center;
        width: 100%;
        height:
            var(
                --mp-mini-catalog-mobile-header-height
            );
        max-width: 100%;
        gap: 5px;
    }

    .mp-mini-catalog-sidebar__category-prefix,
    .mp-mini-catalog-sidebar__category-label {
        color: inherit;
        font-family: var(--mp-premium-italic-font-family);
        font-size: var(--mp-premium-italic-font-size);
        line-height: 1;
        font-weight: var(--mp-premium-italic-font-weight);
        font-style: var(--mp-premium-italic-font-style);
        letter-spacing:
            var(--mp-premium-italic-letter-spacing);
        white-space: nowrap;
        text-transform: none;
        text-overflow: ellipsis;
        transition:
            color
            var(--mp-duration-fast)
            var(--mp-ease);
    }

    .mp-mini-catalog-sidebar__category-label {
        flex: 0 1 auto;
        overflow: hidden;
    }

    .mp-mini-catalog-sidebar__category-arrow {
        font-size: 15px;
    }

    button.mp-mini-catalog-sidebar__mobile-pin {
        display: grid;
        position: absolute;
        z-index: 3;
        top: 0;
        right:
            var(
                --mp-mini-catalog-mobile-control-right
            );
        width:
            var(
                --mp-mini-catalog-mobile-control-size
            );
        min-width:
            var(
                --mp-mini-catalog-mobile-control-size
            );
        height:
            var(
                --mp-mini-catalog-mobile-control-size
            );
        min-height:
            var(
                --mp-mini-catalog-mobile-control-size
            );
        border:
            var(
                --mp-mini-catalog-mobile-control-visual-inset
            )
            solid
            transparent;
        border-radius:
            calc(
                var(--mp-radius-small)
                + var(
                    --mp-mini-catalog-mobile-control-visual-inset
                )
            );
        outline:
            var(--mp-border-width)
            solid
            var(
                --mp-mini-control-secondary-border-color
            );
        outline-offset: -3px;
        box-shadow: none;
        filter:
            drop-shadow(
                var(
                    --mp-mini-control-secondary-shadow
                )
            );
        pointer-events: auto;
        transform: translateY(-50%);
    }

    button.mp-mini-catalog-sidebar__mobile-pin[
        aria-expanded
    ] {
        border-color: transparent;
        background-clip: padding-box;
    }

    button.mp-mini-catalog-sidebar__mobile-pin[
        aria-expanded="true"
    ] {
        outline-color:
            var(
                --mp-mini-control-secondary-border-color-active
            );
        background-color:
            var(
                --mp-mini-control-secondary-background-active
            );
        color:
            var(
                --mp-mini-control-secondary-icon-color-active
            );
    }

    button.mp-mini-catalog-sidebar__mobile-pin[
        aria-expanded="false"
    ],
    button.mp-mini-catalog-sidebar__mobile-pin[
        aria-expanded="false"
    ]:hover,
    button.mp-mini-catalog-sidebar__mobile-pin[
        aria-expanded="false"
    ]:focus,
    button.mp-mini-catalog-sidebar__mobile-pin[
        aria-expanded="false"
    ]:focus-visible,
    button.mp-mini-catalog-sidebar__mobile-pin[
        aria-expanded="false"
    ]:active {
        outline-color:
            var(
                --mp-mini-control-secondary-border-color
            );
        background-color:
            var(
                --mp-mini-control-secondary-background
            );
        color:
            var(
                --mp-mini-control-secondary-icon-color
            );
    }

    .mp-mini-catalog-sidebar__pin-icon {
        width: 20px;
        height: 19px;
    }

    .mp-mini-catalog-sidebar__tagline {
        display: none;
    }

    .mp-mini-catalog-sidebar__products {
        /*
         * The scrollport starts on the left content line and reaches the
         * right viewport edge, so the next offer continues cleanly beneath
         * that edge. End padding keeps the final offer fully reachable. The
         * visual indicator is separate, so it can keep reliable side insets.
         */
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 210px;
        gap: 8px;
        height: auto;
        min-height: 0;
        max-height: none;
        margin:
            0
            0
            6px
            var(--mp-mini-catalog-offer-inset-left);
        padding:
            0
            var(--mp-mini-catalog-offer-inset-right)
            0
            0;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        scrollbar-gutter: auto;
        overscroll-behavior-x: none;
        -webkit-overflow-scrolling: touch;
    }

    .mp-mini-catalog-sidebar[
        data-mp-mini-catalog-scroll-indicator-ready="true"
    ]
    .mp-mini-catalog-sidebar__products.mp-premium-scrollbar {
        scrollbar-width: none;
    }

    .mp-mini-catalog-sidebar[
        data-mp-mini-catalog-scroll-indicator-ready="true"
    ]
    .mp-mini-catalog-sidebar__products.mp-premium-scrollbar::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .mp-mini-catalog-sidebar[
        data-mp-mini-catalog-scroll-indicator-ready="true"
    ]
    .mp-mini-catalog-sidebar__scroll-indicator {
        position: relative;
        display: block;
        align-self: flex-start;
        width: var(--mp-mini-catalog-scroll-track-width);
        max-width: var(--mp-mini-catalog-scroll-track-width);
        height: 4px;
        margin:
            0
            0
            max(8px, env(safe-area-inset-bottom, 0px))
            var(--mp-mini-catalog-scroll-inset-left);
        overflow: hidden;
        border-radius: var(--mp-radius-pill);
        background: var(--mp-scrollbar-track-color);
        pointer-events: none;
    }

    .mp-mini-catalog-sidebar__scroll-indicator.is-static {
        visibility: hidden;
    }

    .mp-mini-catalog-sidebar__scroll-indicator-thumb {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        max-width: 100%;
        height: 100%;
        border-radius: inherit;
        background: var(--mp-scrollbar-thumb-color);
    }

    .mp-mini-catalog-sidebar__products--empty {
        display: flex;
        min-height: 180px;
        margin: 0;
        padding: 0;
        overflow: hidden;
        scroll-snap-type: none;
    }

    .mp-mini-catalog-sidebar__placeholder {
        min-height: 180px;
        padding: 16px;
    }

    .mp-mini-catalog-sidebar__placeholder img {
        width: min(100%, 210px);
        max-height: 180px;
    }

    .mp-mini-catalog-sidebar__products
    > [role="listitem"] {
        scroll-snap-align: start;
    }

    .mp-mini-catalog-sidebar__product,
    .mp-mini-catalog-sidebar__products
    > [role="listitem"]:last-child
    .mp-mini-catalog-sidebar__product {
        min-height: 74px;
        overflow: hidden;
        border:
            var(--mp-border-width)
            solid
            var(--mp-color-border-subtle);
        border-radius:
            var(--mp-radius-small);
        background:
            var(
                --mp-mini-catalog-mobile-offer-surface
            );
        transition:
            border-color
            var(--mp-duration-fast)
            var(--mp-ease),
            background-color
            var(--mp-duration-fast)
            var(--mp-ease),
            color
            var(--mp-duration-fast)
            var(--mp-ease);
    }

    .mp-mini-catalog-sidebar__product:hover {
        background:
            var(
                --mp-mini-catalog-mobile-offer-surface
            );
    }

    .mp-mini-catalog-sidebar__product:is(
        :has(
            .mp-mini-catalog-sidebar__product-link:active
        ),
        .mp-is-navigating
    ) {
        border-color:
            var(--mp-color-border-interactive);
        background: var(--mp-color-surface);
        transition-duration: 0s;
    }

    .mp-mini-catalog-sidebar__product-link:active {
        background: transparent;
    }

    .mp-mini-catalog-sidebar__product-link {
        align-items: stretch;
        gap: 8px;
        height: 72px;
        min-height: 72px;
        padding: 0 5px 0 0;
        -webkit-tap-highlight-color: transparent;
    }

    .mp-mini-catalog-sidebar__image {
        height: 100%;
        border-width: 0 var(--mp-border-width) 0 0;
        border-radius: 0;
        background: var(--mp-color-surface);
    }

    .mp-mini-catalog-sidebar__image img {
        object-fit: cover;
        object-position: center;
    }

    .mp-mini-catalog-sidebar__product-copy {
        display: flex;
        justify-content: flex-start;
        align-self: stretch;
        gap: 2px;
        padding: 4px 0 5px;
    }

    .mp-mini-catalog-sidebar__product-title {
        display: -webkit-box;
        overflow: hidden;
        font-size: 11.5px;
        line-height: 1.34;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .mp-mini-catalog-sidebar__price {
        display: block;
        width: 100%;
        font-size: 11.5px;
        line-height: 1.2;
        font-variant-numeric: tabular-nums;
        text-align: left;
        white-space: nowrap;
    }

    .mp-mini-catalog-sidebar__product-meta {
        display: block;
        min-height: 0;
        margin-top: auto;
    }

    .mp-mini-catalog-sidebar__product-action-space,
    .mp-mini-catalog-sidebar__product-action {
        display: none;
    }

    /*
     * Collapsing removes only the catalog content. The pin leaves the header
     * and moves to the lower-right tower slot, so the visitor always sees
     * where the catalog went and can restore it with one tap.
     */

    .mp-mini-catalog-sidebar[
        data-mp-mini-catalog-mobile-collapsed="true"
    ]
    .mp-mini-catalog-sidebar__intro {
        height: 0;
        min-height: 0;
        padding: 0;
        overflow: visible;
    }

    .mp-mini-catalog-sidebar[
        data-mp-mini-catalog-mobile-collapsed="true"
    ]
    .mp-mini-catalog-sidebar__intro-head {
        display: block;
        height: 0;
    }

    .mp-mini-catalog-sidebar[
        data-mp-mini-catalog-mobile-collapsed="true"
    ]
    button.mp-mini-catalog-sidebar__mobile-pin {
        position: fixed;
        z-index: 9992;
        top: auto;
        right:
            var(
                --mp-mini-catalog-mobile-control-right
            );
        bottom:
            var(
                --mp-mini-catalog-mobile-control-bottom
            );
        transform: none;
    }

    .mp-mini-catalog-sidebar[
        data-mp-mini-catalog-mobile-collapsed="true"
    ]
    .mp-mini-catalog-sidebar__category-link,
    .mp-mini-catalog-sidebar[
        data-mp-mini-catalog-mobile-collapsed="true"
    ]
    .mp-mini-catalog-sidebar__category-heading,
    .mp-mini-catalog-sidebar[
        data-mp-mini-catalog-mobile-collapsed="true"
    ]
    .mp-mini-catalog-sidebar__tagline,
    .mp-mini-catalog-sidebar[
        data-mp-mini-catalog-mobile-collapsed="true"
    ]
    .mp-mini-catalog-sidebar__products,
    .mp-mini-catalog-sidebar[
        data-mp-mini-catalog-mobile-collapsed="true"
    ]
    .mp-mini-catalog-sidebar__scroll-indicator,
    .mp-mini-catalog-sidebar[
        data-mp-mini-catalog-mobile-collapsed="true"
    ]
    .mp-mini-catalog-sidebar__status {
        display: none;
    }

    /*
     * Astra keeps ownership of the scroll action and visibility state.
     * MegaPets changes only the mobile geometry and visual language on pages
     * where the mini catalog exists.
     */

    body.mp-mini-catalog-sidebar-page
    #ast-scroll-top {
        --mp-premium-arrow-standard-glyph-size: 2em;

        position: fixed;
        z-index: 9991;
        right:
            var(
                --mp-mini-catalog-mobile-control-right
            );
        left: auto;
        bottom:
            calc(
                var(
                    --mp-mini-catalog-mobile-scroll-top-bottom
                )
                + var(--mp-mini-catalog-mobile-control-gap)
            );
        box-sizing: border-box;
        width:
            var(
                --mp-mini-catalog-mobile-control-size
            );
        height:
            var(
                --mp-mini-catalog-mobile-control-size
            );
        padding: 0;
        border:
            var(
                --mp-mini-catalog-mobile-control-visual-inset
            )
            solid
            transparent;
        border-radius:
            calc(
                var(--mp-radius-small)
                + var(
                    --mp-mini-catalog-mobile-control-visual-inset
                )
            );
        background-color:
            var(
                --mp-mini-control-secondary-background
            );
        background-clip: padding-box;
        color:
            var(
                --mp-mini-control-secondary-icon-color
            );
        font-size: 15px;
        line-height:
            calc(
                var(
                    --mp-mini-catalog-mobile-control-size
                )
                - var(
                    --mp-mini-catalog-mobile-control-visual-inset
                )
                - var(
                    --mp-mini-catalog-mobile-control-visual-inset
                )
            );
        outline:
            var(--mp-border-width)
            solid
            var(
                --mp-mini-control-secondary-border-color
            );
        outline-offset: -3px;
        text-align: center;
        box-shadow: none;
        filter:
            drop-shadow(
                var(
                    --mp-mini-control-secondary-shadow
                )
            );
        -webkit-tap-highlight-color: transparent;
    }

    /*
     * Astra keeps the button, visibility and scroll behavior. MegaPets only
     * replaces its native arrow artwork with the shared filled premium glyph.
     */

    body.mp-mini-catalog-sidebar-page
    #ast-scroll-top
    .ast-icon.icon-arrow {
        display: none;
    }

    body.mp-mini-catalog-sidebar-page
    #ast-scroll-top::before {
        content:
            var(
                --mp-premium-arrow-standard-symbol
            );
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        color: inherit;
        font-family:
            var(
                --mp-premium-arrow-standard-font-family
            );
        font-size:
            var(
                --mp-premium-arrow-standard-glyph-size,
                1.75em
            );
        font-style: normal;
        font-weight:
            var(
                --mp-premium-arrow-standard-font-weight
            );
        line-height: 1;
        opacity:
            var(
                --mp-premium-arrow-standard-opacity
            );
        pointer-events: none;
        transform:
            translate(-50%, -50%)
            rotate(-90deg)
            translateY(
                var(
                    --mp-premium-arrow-standard-optical-offset-y
                )
            )
            translateX(0);
        transform-origin: center;
        transition:
            color
                var(
                    --mp-premium-arrow-standard-motion-duration
                )
                var(
                    --mp-premium-arrow-standard-motion-easing
                ),
            opacity
                var(
                    --mp-premium-arrow-standard-motion-duration
                )
                var(
                    --mp-premium-arrow-standard-motion-easing
                ),
            transform
                var(
                    --mp-premium-arrow-standard-motion-duration
                )
                var(
                    --mp-premium-arrow-standard-motion-easing
                );
    }

    body.mp-mini-catalog-sidebar-page
    #ast-scroll-top:is(
        :focus-visible,
        :active,
        .mp-is-scrolling-to-top
    ) {
        outline-color:
            var(
                --mp-mini-control-secondary-border-color-active
            );
        background-color:
            var(
                --mp-mini-control-secondary-background-active
            );
        color:
            var(
                --mp-mini-control-secondary-icon-color-active
            );
    }

    body.mp-mini-catalog-sidebar-page
    #ast-scroll-top:is(
        :focus-visible,
        :active,
        .mp-is-scrolling-to-top
    )::before {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            rotate(-90deg)
            translateY(
                var(
                    --mp-premium-arrow-standard-optical-offset-y
                )
            )
            translateX(
                var(
                    --mp-premium-arrow-standard-motion-distance
                )
            );
    }
}

/*
 * Desktop offer controls retain their feedback while navigation or an AJAX
 * cart request is in progress. Mobile hides these controls and owns its row
 * feedback inside the mobile media block above.
 */

@media (min-width: 1241px) {

    .mp-mini-catalog-sidebar__product.mp-is-navigating,
    .mp-mini-catalog-sidebar__product:has(
        .mp-mini-catalog-sidebar__add-to-cart.loading
    ) {
        background: var(--mp-color-surface);
        color: var(--mp-color-dark);
    }

    .mp-mini-catalog-sidebar__product:is(
        :has(
            :is(
                .mp-mini-catalog-sidebar__product-link,
                .mp-mini-catalog-sidebar__view-product
            ):active
        ),
        .mp-is-navigating
    )
    .mp-mini-catalog-sidebar__product-action
    :is(
        .mp-mini-catalog-sidebar__add-to-cart.button,
        .mp-mini-catalog-sidebar__view-product
    ) {
        background:
            var(--mp-mini-catalog-offer-surface);
    }

    .mp-mini-catalog-sidebar__product:has(
        .mp-mini-catalog-sidebar__add-to-cart.loading
    )
    .mp-mini-catalog-sidebar__product-action
    .mp-mini-catalog-sidebar__add-to-cart.button {
        background: var(--mp-color-surface);
    }
}

/*
 * Touch browsers can keep :hover after a tap. Restrict the persistent hover
 * treatment to devices that actually have a precise pointing device.
 */

@media
    (max-width: 1240px)
    and (hover: hover)
    and (pointer: fine) {

    body.mp-mini-catalog-sidebar-page
    #ast-scroll-top:hover {
        outline-color:
            var(
                --mp-mini-control-secondary-border-color-active
            );
        background-color:
            var(
                --mp-mini-control-secondary-background-active
            );
        color:
            var(
                --mp-mini-control-secondary-icon-color-active
            );
    }

    body.mp-mini-catalog-sidebar-page
    #ast-scroll-top:hover::before {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            rotate(-90deg)
            translateY(
                var(
                    --mp-premium-arrow-standard-optical-offset-y
                )
            )
            translateX(
                var(
                    --mp-premium-arrow-standard-motion-distance
                )
            );
    }

    .mp-mini-catalog-sidebar__product:hover {
        background: var(--mp-color-surface);
    }
}

@media (max-width: 544px) {

    .mp-mini-catalog-sidebar__products--empty {
        min-height: 156px;
    }

    .mp-mini-catalog-sidebar__placeholder {
        min-height: 156px;
        padding: 12px;
    }

    .mp-mini-catalog-sidebar__placeholder img {
        width: min(100%, 190px);
        max-height: 156px;
    }
}