/*
 * MITZUMA_PLP_STATIC_CSS_V1
 *
 * Static extraction of the 23 existing PLP style partials.
 * Declaration order is intentionally identical to item.phtml.
 * Do not reorder without a visual regression check.
 */

/* =============================================
   SOURCE: mitzuma-card-visual-fix-v3.phtml
   ============================================= */
/*
 * ============================================================
 * MITZUMA PRODUCT CARD - AMAZON STYLE REFINEMENT V3
 * ============================================================
 *
 * - JPEG image stage fills the full card image section
 * - Smaller #f00064 pill CTA
 * - Flexible CTA height
 * - Mobile card clipping removed
 *
 * No Magento product logic is changed here.
 */


/* ------------------------------------------------------------
   1. FULL-WIDTH GREY JPEG IMAGE STAGE

   Phase 26 already adds #f3f3f3 inline ONLY to JPEG/JPG items.
   We use that existing condition so PNG/WebP products are not
   automatically given this grey treatment.
   ------------------------------------------------------------ */

body.catalog-category-view
.product-item
a.product-item-photo[style*="#f3f3f3"],

body.catalogsearch-result-index
.product-item
a.product-item-photo[style*="#f3f3f3"] {

    width: calc(100% + 32px) !important;
    min-width: calc(100% + 32px) !important;

    height: 280px !important;
    min-height: 280px !important;
    max-height: 280px !important;

    margin-top: -16px !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    margin-bottom: 18px !important;

    padding: 18px !important;

    box-sizing: border-box !important;

    background: #f3f3f3 !important;

    border-radius: 6px 6px 0 0 !important;

    overflow: hidden !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* Keep the actual product image centred inside the grey stage */

body.catalog-category-view
.product-item
a.product-item-photo[style*="#f3f3f3"]
.product-image-container,

body.catalogsearch-result-index
.product-item
a.product-item-photo[style*="#f3f3f3"]
.product-image-container {

    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ------------------------------------------------------------
   2. SMALLER AMAZON-STYLE PINK CTA

   Applies to:
   - Shop All Options
   - Add to Cart
   ------------------------------------------------------------ */

body.catalog-category-view
.product-item
a[title^="Shop All Options"],

body.catalog-category-view
.product-item
button[aria-label^="Add to Cart"],

body.catalogsearch-result-index
.product-item
a[title^="Shop All Options"],

body.catalogsearch-result-index
.product-item
button[aria-label^="Add to Cart"] {

    width: calc(100% - 28px) !important;

    min-height: 38px !important;
    height: auto !important;
    max-height: none !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding: 7px 16px !important;

    box-sizing: border-box !important;

    border: 1px solid #f00064 !important;
    border-radius: 9999px !important;

    background: #f00064 !important;

    color: #ffffff !important;

    font-size: 14px !important;
    line-height: 18px !important;
    font-weight: 500 !important;

    text-decoration: none !important;
    text-align: center !important;

    box-shadow: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 7px !important;

    overflow: visible !important;
}


/* Hover state */

body.catalog-category-view
.product-item
a[title^="Shop All Options"]:hover,

body.catalog-category-view
.product-item
button[aria-label^="Add to Cart"]:hover,

body.catalogsearch-result-index
.product-item
a[title^="Shop All Options"]:hover,

body.catalogsearch-result-index
.product-item
button[aria-label^="Add to Cart"]:hover {

    background: #d90059 !important;
    border-color: #d90059 !important;
    color: #ffffff !important;
}


/* ------------------------------------------------------------
   3. ACTION ROW MUST NEVER CROP THE BUTTON
   ------------------------------------------------------------ */

body.catalog-category-view
.product-item
.items-end,

body.catalogsearch-result-index
.product-item
.items-end {

    height: auto !important;
    min-height: 38px !important;
    max-height: none !important;

    flex-basis: auto !important;

    overflow: visible !important;

    align-items: center !important;
}


/* ------------------------------------------------------------
   4. MOBILE FIX

   Your current grid cards use a fixed desktop height.
   On narrow screens this can crop dynamic content/buttons.

   Mobile now grows naturally.
   ------------------------------------------------------------ */

@media (max-width: 767px) {

    body.catalog-category-view
    .product-item,

    body.catalogsearch-result-index
    .product-item {

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;
    }


    /*
     * Smaller grey image stage on phones,
     * but still full-width across the card.
     */

    body.catalog-category-view
    .product-item
    a.product-item-photo[style*="#f3f3f3"],

    body.catalogsearch-result-index
    .product-item
    a.product-item-photo[style*="#f3f3f3"] {

        width: calc(100% + 32px) !important;
        min-width: calc(100% + 32px) !important;

        height: 230px !important;
        min-height: 230px !important;
        max-height: 230px !important;

        margin-top: -16px !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        margin-bottom: 14px !important;

        padding: 14px !important;
    }


    /*
     * Full available mobile width but retain side breathing room.
     * Flexible height means text can never be vertically clipped.
     */

    body.catalog-category-view
    .product-item
    a[title^="Shop All Options"],

    body.catalog-category-view
    .product-item
    button[aria-label^="Add to Cart"],

    body.catalogsearch-result-index
    .product-item
    a[title^="Shop All Options"],

    body.catalogsearch-result-index
    .product-item
    button[aria-label^="Add to Cart"] {

        width: calc(100% - 16px) !important;

        min-height: 40px !important;
        height: auto !important;
        max-height: none !important;

        padding: 8px 12px !important;

        font-size: 13px !important;
        line-height: 18px !important;

        overflow: visible !important;
    }


    body.catalog-category-view
    .product-item
    .items-end,

    body.catalogsearch-result-index
    .product-item
    .items-end {

        min-height: 40px !important;
        height: auto !important;
        max-height: none !important;

        overflow: visible !important;
    }
}

/* =============================================
   SOURCE: mitzuma-card-compact-spacing-v2.phtml
   ============================================= */
/*
 * ==========================================================
 * MITZUMA PRODUCT CARD COMPACT SPACING V2
 * ==========================================================
 */


/* ----------------------------------------------------------
   GAP 1:
   Manufacturer/review row below image.

   When empty it now collapses naturally instead of reserving
   a fixed slot.
   ---------------------------------------------------------- */

body.catalog-category-view
.product-item
.mitzuma-card-meta-row,

body.catalogsearch-result-index
.product-item
.mitzuma-card-meta-row {

    flex: 0 0 auto !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin-top: 0 !important;
    margin-bottom: 2px !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    overflow: visible !important;

    gap: 0 !important;
}


/* Empty children must not reserve space */

body.catalog-category-view
.product-item
.mitzuma-card-meta-row > :empty,

body.catalogsearch-result-index
.product-item
.mitzuma-card-meta-row > :empty {

    display: none !important;
}


/* ----------------------------------------------------------
   GAP 2:
   Product-details / swatch area between title and price.

   No fixed 40px slot anymore.
   Actual swatches can still expand naturally.
   ---------------------------------------------------------- */

body.catalog-category-view
.product-item
.mitzuma-card-details-slot,

body.catalogsearch-result-index
.product-item
.mitzuma-card-details-slot {

    flex: 0 0 auto !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin-top: 0 !important;
    margin-bottom: 3px !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    overflow: visible !important;
}


/* ----------------------------------------------------------
   IMAGE -> TITLE SPACING

   Phase 26C currently leaves a larger margin below the grey
   image stage. Tighten it to resemble the Amazon reference.
   ---------------------------------------------------------- */

body.catalog-category-view
.product-item
a.product-item-photo[style*="#f3f3f3"],

body.catalogsearch-result-index
.product-item
a.product-item-photo[style*="#f3f3f3"] {

    margin-bottom: 7px !important;
}


/* ----------------------------------------------------------
   TITLE -> PRICE

   Prevent accidental extra margins from the title container.
   Keep the existing two-line title allocation.
   ---------------------------------------------------------- */

body.catalog-category-view
.product-item
.product-item-link,

body.catalogsearch-result-index
.product-item
.product-item-link {

    margin-bottom: 0 !important;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 767px) {

    body.catalog-category-view
    .product-item
    .mitzuma-card-meta-row,

    body.catalogsearch-result-index
    .product-item
    .mitzuma-card-meta-row {

        margin-bottom: 2px !important;
    }


    body.catalog-category-view
    .product-item
    .mitzuma-card-details-slot,

    body.catalogsearch-result-index
    .product-item
    .mitzuma-card-details-slot {

        margin-top: 0 !important;
        margin-bottom: 2px !important;
    }


    body.catalog-category-view
    .product-item
    a.product-item-photo[style*="#f3f3f3"],

    body.catalogsearch-result-index
    .product-item
    a.product-item-photo[style*="#f3f3f3"] {

        margin-bottom: 6px !important;
    }
}

/* =============================================
   SOURCE: mitzuma-card-amazon-delivery-styles-v2.phtml
   ============================================= */
/* ==========================================================
   AMAZON-STYLE REVIEW
   ========================================================== */

body.catalog-category-view
.mitzuma-card-amazon-review,

body.catalogsearch-result-index
.mitzuma-card-amazon-review {
    display: flex;
    align-items: center;

    flex: 0 0 20px;

    min-height: 20px;
    max-height: 20px;

    margin: 0 0 6px 0;

    overflow: hidden;
}

body.catalog-category-view
.mitzuma-card-amazon-review a,

body.catalogsearch-result-index
.mitzuma-card-amazon-review a {
    display: inline-flex;
    align-items: center;

    gap: 3px;

    min-width: 0;

    text-decoration: none;

    line-height: 16px;

    white-space: nowrap;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}

.mitzuma-card-review-score {
    color: #0f1111;

    font-size: 12px;
    font-weight: 400;
}

.mitzuma-card-stars {
    position: relative;

    display: inline-block;

    width: 70px;
    height: 16px;

    overflow: hidden;

    font-size: 14px;
    line-height: 16px;
    letter-spacing: -1px;

    white-space: nowrap;
}

.mitzuma-card-stars-bg {
    color: #d5d9d9;
}

.mitzuma-card-stars-fill {
    position: absolute;

    top: 0;
    left: 0;

    display: block;

    overflow: hidden;

    color: #16a34a;

    white-space: nowrap;
}

.mitzuma-card-review-count {
    color: #2162a1;

    font-size: 12px;
    font-weight: 400;
}


/* ==========================================================
   BOB GO DELIVERY LINE
   ========================================================== */

body.catalog-category-view
.mitzuma-card-bobgo-delivery,

body.catalogsearch-result-index
.mitzuma-card-bobgo-delivery {
    display: flex;
    align-items: center;

    gap: 5px;

    flex: 0 0 22px;

    width: 100%;

    min-height: 22px;

    margin: 0 0 6px 0;

    padding: 0 2px;

    overflow: hidden;

    color: #0f1111;

    font-family:
        Montserrat,
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
}

body.catalog-category-view
.mitzuma-card-bobgo-delivery[hidden],

body.catalogsearch-result-index
.mitzuma-card-bobgo-delivery[hidden] {
    display: none !important;
}

.mitzuma-card-delivery-icon {
    flex: 0 0 auto;

    font-size: 13px;
    line-height: 1;
}

.mitzuma-card-delivery-copy {
    display: block;

    min-width: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Mobile */

@media (max-width: 767px) {

    body.catalog-category-view
    .mitzuma-card-amazon-review,

    body.catalogsearch-result-index
    .mitzuma-card-amazon-review {
        min-height: 18px;
        max-height: 18px;

        margin-bottom: 4px;
    }

    body.catalog-category-view
    .mitzuma-card-bobgo-delivery,

    body.catalogsearch-result-index
    .mitzuma-card-bobgo-delivery {
        min-height: 20px;

        margin-bottom: 4px;

        padding-left: 0;
        padding-right: 0;

        font-size: 11px;
        line-height: 16px;
    }

}

/* =============================================
   SOURCE: mitzuma-card-delivery-interactive-v3.phtml
   ============================================= */
/* MITZUMA_CARD_DELIVERY_UI_V4 */

/* ==========================================================
   DELIVERY COMPONENT
   ========================================================== */

body.catalog-category-view
.mitzuma-card-bobgo-delivery,

body.catalogsearch-result-index
.mitzuma-card-bobgo-delivery {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap;

    gap: 6px;

    flex: 0 0 auto !important;

    width: 100%;

    height: auto !important;
    min-height: 34px !important;
    max-height: none !important;

    margin: 4px 0 8px 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    font-family:
        Montserrat,
        Arial,
        Helvetica,
        sans-serif;

    color: #111827;
}


/* ==========================================================
   CHECK DELIVERY PILL
   ========================================================== */

.mitzuma-card-delivery-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    width: auto;
    min-width: 0;

    height: 32px;
    min-height: 32px;

    margin: 0;

    padding: 0 12px;

    border: 1px solid #e2e8f0;
    border-radius: 9999px;

    background: #ffffff;

    color: #334155;

    font-family:
        Montserrat,
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;
    font-weight: 650;
    line-height: 1;

    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04);

    cursor: pointer;

    transition:
        border-color 160ms ease,
        color 160ms ease,
        background-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.mitzuma-card-delivery-trigger:hover {
    border-color: #f00064;

    background: #fff7fb;

    color: #f00064;

    box-shadow:
        0 3px 10px rgba(240, 0, 100, 0.10);

    text-decoration: none;

    transform: translateY(-1px);
}

.mitzuma-card-delivery-trigger:active {
    transform: translateY(0);
}

.mitzuma-card-delivery-trigger svg {
    flex: 0 0 16px;

    width: 16px;
    height: 16px;

    color: #16a34a;

    transition: color 160ms ease;
}

.mitzuma-card-delivery-trigger:hover svg {
    color: #f00064;
}

.mitzuma-card-delivery-trigger[hidden] {
    display: none !important;
}


/* ==========================================================
   POSTCODE FORM
   ========================================================== */

.mitzuma-card-delivery-entry {
    display: flex;
    align-items: center;

    gap: 6px;

    width: 100%;

    padding: 5px;

    border: 1px solid #e2e8f0;
    border-radius: 10px;

    background: #f8fafc;

    box-shadow:
        inset 0 1px 2px rgba(15, 23, 42, 0.02);
}

.mitzuma-card-delivery-entry[hidden] {
    display: none !important;
}

.mitzuma-card-delivery-input {
    flex: 1 1 auto;

    width: 100%;
    min-width: 0;

    height: 34px;
    min-height: 34px;

    margin: 0;

    padding: 6px 10px;

    border: 1px solid #d1d5db;
    border-radius: 7px;

    background: #ffffff;

    color: #111827;

    font-family:
        Montserrat,
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;
    font-weight: 500;
    line-height: 20px;

    box-shadow: none;

    transition:
        border-color 150ms ease,
        box-shadow 150ms ease;
}

.mitzuma-card-delivery-input::placeholder {
    color: #94a3b8;

    opacity: 1;
}

.mitzuma-card-delivery-input:focus {
    border-color: #f00064;

    outline: none;

    box-shadow:
        0 0 0 2px rgba(240, 0, 100, 0.10);
}

.mitzuma-card-delivery-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    height: 34px;
    min-height: 34px;

    margin: 0;

    padding: 0 15px;

    border: 1px solid #f00064;
    border-radius: 9999px;

    background: #f00064;

    color: #ffffff;

    font-family:
        Montserrat,
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;
    font-weight: 700;
    line-height: 1;

    box-shadow:
        0 2px 6px rgba(240, 0, 100, 0.18);

    cursor: pointer;

    transition:
        background-color 150ms ease,
        border-color 150ms ease,
        box-shadow 150ms ease,
        transform 150ms ease;
}

.mitzuma-card-delivery-submit:hover {
    border-color: #d60059;

    background: #d60059;

    box-shadow:
        0 4px 10px rgba(240, 0, 100, 0.22);

    transform: translateY(-1px);
}

.mitzuma-card-delivery-submit:active {
    transform: translateY(0);
}


/* ==========================================================
   DELIVERY RESULT
   ========================================================== */

.mitzuma-card-delivery-copy {
    position: relative;

    display: flex;
    align-items: center;

    flex: 1 1 auto;

    gap: 6px;

    min-width: 0;

    padding: 7px 9px;

    border: 1px solid #dcfce7;
    border-radius: 8px;

    background: #f0fdf4;

    color: #166534;

    font-family:
        Montserrat,
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10.5px;
    font-weight: 650;
    line-height: 15px;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.mitzuma-card-delivery-copy::before {
    content: "";

    flex: 0 0 7px;

    width: 7px;
    height: 7px;

    border-radius: 9999px;

    background: #16a34a;

    box-shadow:
        0 0 0 3px rgba(22, 163, 74, 0.10);
}

.mitzuma-card-delivery-copy:empty {
    display: none;
}


/* ==========================================================
   CHANGE POSTCODE
   ========================================================== */

.mitzuma-card-delivery-change {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    height: 24px;

    margin: 0;

    padding: 0 4px;

    border: 0;

    background: transparent;

    color: #64748b;

    font-family:
        Montserrat,
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9.5px;
    font-weight: 600;
    line-height: 1;

    text-decoration: underline;
    text-underline-offset: 2px;

    cursor: pointer;

    transition: color 150ms ease;
}

.mitzuma-card-delivery-change:hover {
    color: #f00064;
}

.mitzuma-card-delivery-change[hidden] {
    display: none !important;
}


/* ==========================================================
   ERROR MESSAGE
   ========================================================== */

.mitzuma-card-delivery-error {
    flex: 0 0 100%;

    margin-top: 1px;

    padding-left: 3px;

    color: #dc2626;

    font-family:
        Montserrat,
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;
    font-weight: 550;
    line-height: 14px;
}

.mitzuma-card-delivery-error[hidden] {
    display: none !important;
}


/* ==========================================================
   LOADING STATE
   ========================================================== */

.mitzuma-card-delivery-copy:not(:empty) {
    animation:
        mitzumaDeliveryAppear 180ms ease-out;
}

@keyframes mitzumaDeliveryAppear {

    from {
        opacity: 0;
        transform: translateY(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    body.catalog-category-view
    .mitzuma-card-bobgo-delivery,

    body.catalogsearch-result-index
    .mitzuma-card-bobgo-delivery {
        min-height: 30px !important;

        gap: 4px;

        margin-top: 3px !important;
        margin-bottom: 6px !important;
    }

    .mitzuma-card-delivery-trigger {
        height: 30px;
        min-height: 30px;

        padding-left: 10px;
        padding-right: 10px;

        font-size: 10px;
    }

    .mitzuma-card-delivery-trigger svg {
        width: 14px;
        height: 14px;

        flex-basis: 14px;
    }

    .mitzuma-card-delivery-entry {
        gap: 4px;

        padding: 4px;

        border-radius: 8px;
    }

    .mitzuma-card-delivery-input {
        height: 32px;
        min-height: 32px;

        padding-left: 8px;
        padding-right: 8px;

        font-size: 11px;
    }

    .mitzuma-card-delivery-submit {
        height: 32px;
        min-height: 32px;

        padding-left: 11px;
        padding-right: 11px;

        font-size: 10px;
    }

    .mitzuma-card-delivery-copy {
        padding: 6px 7px;

        font-size: 9.5px;
        line-height: 14px;
    }

    .mitzuma-card-delivery-change {
        font-size: 9px;
    }

}

/* =============================================
   SOURCE: mitzuma-card-review-gap-fix-v2.phtml
   ============================================= */
/*
 * Remove the fixed vertical reservation around
 * the category-card review stars.
 */

body.catalog-category-view .mitzuma-card-amazon-review,
body.catalogsearch-result-index .mitzuma-card-amazon-review {
    flex: 0 0 auto !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin-top: 1px !important;
    margin-bottom: 2px !important;

    padding: 0 !important;

    overflow: visible !important;
}

body.catalog-category-view .mitzuma-card-amazon-review a,
body.catalogsearch-result-index .mitzuma-card-amazon-review a {
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 14px !important;
}

body.catalog-category-view .mitzuma-card-review-score,
body.catalog-category-view .mitzuma-card-review-count,
body.catalogsearch-result-index .mitzuma-card-review-score,
body.catalogsearch-result-index .mitzuma-card-review-count {
    line-height: 14px !important;
}

body.catalog-category-view .mitzuma-card-stars,
body.catalogsearch-result-index .mitzuma-card-stars {
    height: 14px !important;
    line-height: 14px !important;
}


/* Keep stars green like the PDP */

body.catalog-category-view .mitzuma-card-stars-fill,
body.catalogsearch-result-index .mitzuma-card-stars-fill {
    color: #16a34a !important;
}


@media (max-width: 767px) {

    body.catalog-category-view .mitzuma-card-amazon-review,
    body.catalogsearch-result-index .mitzuma-card-amazon-review {
        margin-top: 0 !important;
        margin-bottom: 2px !important;
    }

}

/* =============================================
   SOURCE: mitzuma-card-full-width-actions-v1.phtml
   ============================================= */
/*
 * ============================================================
 * MITZUMA PRODUCT CARD
 * FULL-WIDTH LOWER ACTION AREA
 * ============================================================
 *
 * Align:
 * - Bob Go delivery
 * - postcode entry
 * - More Colours area
 * - Add to Cart
 * - Shop All Options
 *
 * to the same left/right card edges.
 */


/* ------------------------------------------------------------
   CTA outer row
   ------------------------------------------------------------ */

body.catalog-category-view
.product-item
div.flex.gap-2.flex-wrap.flex-1.items-end,

body.catalogsearch-result-index
.product-item
div.flex.gap-2.flex-wrap.flex-1.items-end {
    width: 100% !important;
    max-width: 100% !important;

    flex-basis: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* ------------------------------------------------------------
   CTA inner wrapper
   ------------------------------------------------------------ */

body.catalog-category-view
.product-item
div.flex.gap-2.flex-wrap.flex-1.items-end
> .flex-1,

body.catalogsearch-result-index
.product-item
div.flex.gap-2.flex-wrap.flex-1.items-end
> .flex-1 {
    width: 100% !important;
    max-width: 100% !important;

    flex: 1 1 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ------------------------------------------------------------
   ADD TO CART + SHOP ALL OPTIONS
   Override previous narrower Amazon-style width.
   ------------------------------------------------------------ */

body.catalog-category-view
.product-item
a[title^="Shop All Options"],

body.catalog-category-view
.product-item
button[aria-label^="Add to Cart"],

body.catalogsearch-result-index
.product-item
a[title^="Shop All Options"],

body.catalogsearch-result-index
.product-item
button[aria-label^="Add to Cart"] {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    min-height: 40px !important;

    padding-left: 18px !important;
    padding-right: 18px !important;
}


/* ------------------------------------------------------------
   BOB GO AREA
   Match exact CTA width.
   ------------------------------------------------------------ */

body.catalog-category-view
.product-item
.mitzuma-card-bobgo-delivery,

body.catalogsearch-result-index
.product-item
.mitzuma-card-bobgo-delivery {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* Postcode entry panel aligns to CTA */

body.catalog-category-view
.product-item
.mitzuma-card-delivery-entry,

body.catalogsearch-result-index
.product-item
.mitzuma-card-delivery-entry {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;
}


/* Delivery result aligns to CTA */

body.catalog-category-view
.product-item
.mitzuma-card-delivery-copy,

body.catalogsearch-result-index
.product-item
.mitzuma-card-delivery-copy {
    box-sizing: border-box !important;

    max-width: 100% !important;
}


/* ------------------------------------------------------------
   MORE COLOURS ROW
   Keep it on same horizontal axis.
   ------------------------------------------------------------ */

body.catalog-category-view
.product-item
a[href][title="More Colours"],

body.catalogsearch-result-index
.product-item
a[href][title="More Colours"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ------------------------------------------------------------
   MOBILE
   Same edge-to-edge alignment inside card padding.
   ------------------------------------------------------------ */

@media (max-width: 767px) {

    body.catalog-category-view
    .product-item
    a[title^="Shop All Options"],

    body.catalog-category-view
    .product-item
    button[aria-label^="Add to Cart"],

    body.catalogsearch-result-index
    .product-item
    a[title^="Shop All Options"],

    body.catalogsearch-result-index
    .product-item
    button[aria-label^="Add to Cart"] {
        width: 100% !important;
        max-width: 100% !important;

        min-height: 40px !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    body.catalog-category-view
    .product-item
    .mitzuma-card-bobgo-delivery,

    body.catalogsearch-result-index
    .product-item
    .mitzuma-card-bobgo-delivery {
        width: 100% !important;
        max-width: 100% !important;
    }

}

/* =============================================
   SOURCE: mitzuma-card-image-stage-v2.phtml
   ============================================= */
/* ==========================================================
   MITZUMA PRODUCT CARD
   GREY IMAGE STAGE FOR WHITE JPEG BACKGROUNDS
   Desktop + Mobile
   ========================================================== */

/* ----------------------------------------------------------
   1. Outer clickable image block
   ---------------------------------------------------------- */
body.catalog-category-view .product-item .product-item-photo,
body.catalog-category-view .product-item a.product.photo.product-item-photo,
body.catalogsearch-result-index .product-item .product-item-photo,
body.catalogsearch-result-index .product-item a.product.photo.product-item-photo {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    isolation: isolate !important;
    background: transparent !important;
    margin: 0 0 12px 0 !important;
}

/* Grey card behind the image */
body.catalog-category-view .product-item .product-item-photo::before,
body.catalog-category-view .product-item a.product.photo.product-item-photo::before,
body.catalogsearch-result-index .product-item .product-item-photo::before,
body.catalogsearch-result-index .product-item a.product.photo.product-item-photo::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: #e5e7eb !important;
    border-radius: 18px !important;
    z-index: 0 !important;
}

/* ----------------------------------------------------------
   2. Magento image container/wrapper
   ---------------------------------------------------------- */
body.catalog-category-view .product-item .product-image-container,
body.catalogsearch-result-index .product-item .product-image-container {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 250px !important;
    padding: 16px !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

body.catalog-category-view .product-item .product-image-wrapper,
body.catalogsearch-result-index .product-item .product-image-wrapper {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    background: transparent !important;
}

/* ----------------------------------------------------------
   3. Actual product image
   Works best for white-background JPEG files
   ---------------------------------------------------------- */
body.catalog-category-view .product-item .product-image-photo,
body.catalog-category-view .product-item .product-item-photo img,
body.catalogsearch-result-index .product-item .product-image-photo,
body.catalogsearch-result-index .product-item .product-item-photo img {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    background: transparent !important;
    mix-blend-mode: multiply !important;
}

/* ----------------------------------------------------------
   4. Fallback for cases where image is directly inside anchor
   ---------------------------------------------------------- */
body.catalog-category-view .product-item .product-item-photo > img,
body.catalogsearch-result-index .product-item .product-item-photo > img {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    padding: 16px !important;
    box-sizing: border-box !important;
}

/* ----------------------------------------------------------
   5. Make image area consistent and neat on desktop
   ---------------------------------------------------------- */
@media (min-width: 768px) {
    body.catalog-category-view .product-item .product-image-container,
    body.catalogsearch-result-index .product-item .product-image-container {
        min-height: 250px !important;
        padding: 18px !important;
    }

    body.catalog-category-view .product-item .product-item-photo,
    body.catalog-category-view .product-item a.product.photo.product-item-photo,
    body.catalogsearch-result-index .product-item .product-item-photo,
    body.catalogsearch-result-index .product-item a.product.photo.product-item-photo {
        border-radius: 18px !important;
    }

    body.catalog-category-view .product-item .product-item-photo::before,
    body.catalog-category-view .product-item a.product.photo.product-item-photo::before,
    body.catalogsearch-result-index .product-item .product-item-photo::before,
    body.catalogsearch-result-index .product-item a.product.photo.product-item-photo::before {
        border-radius: 18px !important;
    }
}

/* ----------------------------------------------------------
   6. Mobile tuning
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    body.catalog-category-view .product-item .product-image-container,
    body.catalogsearch-result-index .product-item .product-image-container {
        min-height: 185px !important;
        padding: 12px !important;
        aspect-ratio: 1 / 1 !important;
    }

    body.catalog-category-view .product-item .product-item-photo,
    body.catalog-category-view .product-item a.product.photo.product-item-photo,
    body.catalogsearch-result-index .product-item .product-item-photo,
    body.catalogsearch-result-index .product-item a.product.photo.product-item-photo {
        border-radius: 14px !important;
        margin-bottom: 10px !important;
    }

    body.catalog-category-view .product-item .product-item-photo::before,
    body.catalog-category-view .product-item a.product.photo.product-item-photo::before,
    body.catalogsearch-result-index .product-item .product-item-photo::before,
    body.catalogsearch-result-index .product-item a.product.photo.product-item-photo::before {
        border-radius: 14px !important;
    }

    body.catalog-category-view .product-item .product-item-photo > img,
    body.catalogsearch-result-index .product-item .product-item-photo > img {
        padding: 12px !important;
    }
}

/* ----------------------------------------------------------
   7. Optional cleanup for wrappers that may force white bg
   ---------------------------------------------------------- */
body.catalog-category-view .product-item .product-image-container,
body.catalog-category-view .product-item .product-image-wrapper,
body.catalogsearch-result-index .product-item .product-image-container,
body.catalogsearch-result-index .product-item .product-image-wrapper {
    box-shadow: none !important;
    border: 0 !important;
}

/* =============================================
   SOURCE: mitzuma-card-image-stage-refinement-v3.phtml
   ============================================= */
/* ==========================================================
   MITZUMA PRODUCT CARD
   GREY IMAGE STAGE REFINEMENT
   - rounds outer card
   - fills top / side gaps
   - makes grey image area consistent
   ========================================================== */

/* 1. Outer product card */
body.catalog-category-view .products-grid .product-item .product-item-info,
body.catalogsearch-result-index .products-grid .product-item .product-item-info {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

/* 2. Remove inconsistent spacing above / around image block */
body.catalog-category-view .products-grid .product-item .product-item-photo,
body.catalog-category-view .products-grid .product-item a.product.photo.product-item-photo,
body.catalogsearch-result-index .products-grid .product-item .product-item-photo,
body.catalogsearch-result-index .products-grid .product-item a.product.photo.product-item-photo {
    display: block !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #e5e7eb !important;
    border-radius: 22px 22px 0 0 !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

/* disable earlier pseudo-stage so the fill is fully consistent */
body.catalog-category-view .products-grid .product-item .product-item-photo::before,
body.catalog-category-view .products-grid .product-item a.product.photo.product-item-photo::before,
body.catalogsearch-result-index .products-grid .product-item .product-item-photo::before,
body.catalogsearch-result-index .products-grid .product-item a.product.photo.product-item-photo::before {
    content: none !important;
}

/* 3. Grey stage must fill full width and align to the card edges */
body.catalog-category-view .products-grid .product-item .product-image-container,
body.catalogsearch-result-index .products-grid .product-item .product-image-container {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 260px !important;
    margin: 0 !important;
    padding: 18px !important;
    box-sizing: border-box !important;
    background: #e5e7eb !important;
    border-radius: 22px 22px 0 0 !important;
    overflow: hidden !important;
}

/* 4. Inner wrapper also grey so no white strips appear */
body.catalog-category-view .products-grid .product-item .product-image-wrapper,
body.catalogsearch-result-index .products-grid .product-item .product-image-wrapper {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #e5e7eb !important;
    border-radius: 22px 22px 0 0 !important;
    overflow: hidden !important;
}

/* 5. Product image */
body.catalog-category-view .products-grid .product-item .product-image-photo,
body.catalog-category-view .products-grid .product-item .product-item-photo img,
body.catalogsearch-result-index .products-grid .product-item .product-image-photo,
body.catalogsearch-result-index .products-grid .product-item .product-item-photo img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    background: transparent !important;
    mix-blend-mode: multiply !important;
}

/* 6. Keep image section tight to the content below */
body.catalog-category-view .products-grid .product-item .product-item-details,
body.catalogsearch-result-index .products-grid .product-item .product-item-details {
    margin-top: 0 !important;
    padding-top: 14px !important;
}

/* 7. Ensure top corners look clean on wishlist icon overlap */
body.catalog-category-view .products-grid .product-item .action.towishlist,
body.catalogsearch-result-index .products-grid .product-item .action.towishlist {
    z-index: 5 !important;
}

/* 8. Mobile tuning */
@media (max-width: 767px) {
    body.catalog-category-view .products-grid .product-item .product-item-info,
    body.catalogsearch-result-index .products-grid .product-item .product-item-info {
        border-radius: 18px !important;
    }

    body.catalog-category-view .products-grid .product-item .product-item-photo,
    body.catalog-category-view .products-grid .product-item a.product.photo.product-item-photo,
    body.catalogsearch-result-index .products-grid .product-item .product-item-photo,
    body.catalogsearch-result-index .products-grid .product-item a.product.photo.product-item-photo,
    body.catalog-category-view .products-grid .product-item .product-image-container,
    body.catalogsearch-result-index .products-grid .product-item .product-image-container,
    body.catalog-category-view .products-grid .product-item .product-image-wrapper,
    body.catalogsearch-result-index .products-grid .product-item .product-image-wrapper {
        border-radius: 18px 18px 0 0 !important;
    }

    body.catalog-category-view .products-grid .product-item .product-image-container,
    body.catalogsearch-result-index .products-grid .product-item .product-image-container {
        min-height: 190px !important;
        padding: 12px !important;
    }

    body.catalog-category-view .products-grid .product-item .product-item-details,
    body.catalogsearch-result-index .products-grid .product-item .product-item-details {
        padding-top: 12px !important;
    }
}

/* =============================================
   SOURCE: mitzuma-card-image-stage-phase35-v1.phtml
   ============================================= */
/*
 * ============================================================
 * PHASE 35
 * SOFT GREY / EDGE-TO-EDGE PRODUCT CARD
 *
 * Grey: #F8F8F8
 * ============================================================
 */


/* ==========================================================
   1. OUTER PRODUCT CARD
   ========================================================== */

body.catalog-category-view
.products-grid
.product-item,

body.catalogsearch-result-index
.products-grid
.product-item {
    box-sizing: border-box !important;

    padding: 0 !important;

    background: #ffffff !important;

    border: 1px solid #eceff3 !important;
    border-radius: 16px !important;

    overflow: hidden !important;

    box-shadow:
        0 1px 3px rgba(15, 23, 42, 0.06) !important;

    transition:
        box-shadow 180ms ease,
        border-color 180ms ease !important;
}


body.catalog-category-view
.products-grid
.product-item:hover,

body.catalogsearch-result-index
.products-grid
.product-item:hover {
    border-color: #e3e7ec !important;

    box-shadow:
        0 7px 22px rgba(15, 23, 42, 0.09) !important;
}


/* ==========================================================
   2. FULL-BLEED IMAGE STAGE
   Removes the white areas highlighted previously.
   ========================================================== */

body.catalog-category-view
.products-grid
.product-item
.product-item-photo,

body.catalog-category-view
.products-grid
.product-item
a.product.photo.product-item-photo,

body.catalogsearch-result-index
.products-grid
.product-item
.product-item-photo,

body.catalogsearch-result-index
.products-grid
.product-item
a.product.photo.product-item-photo {
    position: relative !important;

    display: block !important;

    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;

    margin:
        0
        0
        0
        0 !important;

    padding: 0 !important;

    background: #F8F8F8 !important;

    border: 0 !important;

    border-radius:
        15px
        15px
        0
        0 !important;

    overflow: hidden !important;

    isolation: isolate !important;
}


/*
 * Disable earlier pseudo-grey layer.
 * The actual image stage now owns the background.
 */

body.catalog-category-view
.products-grid
.product-item
.product-item-photo::before,

body.catalog-category-view
.products-grid
.product-item
a.product.photo.product-item-photo::before,

body.catalogsearch-result-index
.products-grid
.product-item
.product-item-photo::before,

body.catalogsearch-result-index
.products-grid
.product-item
a.product.photo.product-item-photo::before {
    content: none !important;
}


/* ==========================================================
   3. MAGENTO IMAGE CONTAINER
   ========================================================== */

body.catalog-category-view
.products-grid
.product-item
.product-image-container,

body.catalogsearch-result-index
.products-grid
.product-item
.product-image-container {
    display: grid !important;
    place-items: center !important;

    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    padding: 18px !important;

    background: #F8F8F8 !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    overflow: hidden !important;
}


/* ==========================================================
   4. INNER IMAGE WRAPPER
   Prevent white strips from Magento's image wrapper.
   ========================================================== */

body.catalog-category-view
.products-grid
.product-item
.product-image-wrapper,

body.catalogsearch-result-index
.products-grid
.product-item
.product-image-wrapper {
    display: grid !important;
    place-items: center !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #F8F8F8 !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    overflow: hidden !important;
}


/* ==========================================================
   5. PRODUCT IMAGE
   White JPEG blends naturally into #F8F8F8.
   ========================================================== */

body.catalog-category-view
.products-grid
.product-item
.product-image-photo,

body.catalog-category-view
.products-grid
.product-item
.product-item-photo img,

body.catalogsearch-result-index
.products-grid
.product-item
.product-image-photo,

body.catalogsearch-result-index
.products-grid
.product-item
.product-item-photo img {
    display: block !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;

    background: transparent !important;

    mix-blend-mode: multiply !important;

    border: 0 !important;
    box-shadow: none !important;
}


/* ==========================================================
   6. CONTENT PADDING
   We removed p-4 from the outer card.
   Put controlled spacing back ONLY around product content.
   ========================================================== */

body.catalog-category-view
.products-grid
.product-item
> .flex.flex-col.flex-1,

body.catalogsearch-result-index
.products-grid
.product-item
> .flex.flex-col.flex-1 {
    box-sizing: border-box !important;

    width: 100% !important;

    padding:
        14px
        16px
        16px
        16px !important;
}


/* ==========================================================
   7. IMAGE TO TITLE TRANSITION
   ========================================================== */

body.catalog-category-view
.products-grid
.product-item
.product-item-photo
+ .flex.flex-col.flex-1,

body.catalogsearch-result-index
.products-grid
.product-item
.product-item-photo
+ .flex.flex-col.flex-1 {
    margin-top: 0 !important;
}


/* ==========================================================
   8. WISHLIST BUTTON
   Clean floating white control over soft-grey stage.
   ========================================================== */

body.catalog-category-view
.products-grid
.product-item
[data-addto="wishlist"],

body.catalogsearch-result-index
.products-grid
.product-item
[data-addto="wishlist"] {
    z-index: 10 !important;

    background:
        rgba(255, 255, 255, 0.96) !important;

    border:
        1px solid rgba(226, 232, 240, 0.95) !important;

    box-shadow:
        0 2px 8px rgba(15, 23, 42, 0.10) !important;

    backdrop-filter:
        blur(4px);
}


/* ==========================================================
   9. CTA / DELIVERY AREA
   Keep the lower card visually clean and aligned.
   ========================================================== */

body.catalog-category-view
.products-grid
.product-item
.mitzuma-card-bobgo-delivery,

body.catalogsearch-result-index
.products-grid
.product-item
.mitzuma-card-bobgo-delivery {
    width: 100% !important;
    max-width: 100% !important;
}


body.catalog-category-view
.products-grid
.product-item
a[title^="Shop All Options"],

body.catalog-category-view
.products-grid
.product-item
button[aria-label^="Add to Cart"],

body.catalogsearch-result-index
.products-grid
.product-item
a[title^="Shop All Options"],

body.catalogsearch-result-index
.products-grid
.product-item
button[aria-label^="Add to Cart"] {
    width: 100% !important;
    max-width: 100% !important;

    border-radius: 9999px !important;

    box-shadow:
        0 2px 6px rgba(240, 0, 100, 0.12) !important;
}


/* ==========================================================
   10. MOBILE
   ========================================================== */

@media (max-width: 767px) {

    body.catalog-category-view
    .products-grid
    .product-item,

    body.catalogsearch-result-index
    .products-grid
    .product-item {
        padding: 0 !important;

        border-radius: 13px !important;
    }


    body.catalog-category-view
    .products-grid
    .product-item
    .product-item-photo,

    body.catalog-category-view
    .products-grid
    .product-item
    a.product.photo.product-item-photo,

    body.catalogsearch-result-index
    .products-grid
    .product-item
    .product-item-photo,

    body.catalogsearch-result-index
    .products-grid
    .product-item
    a.product.photo.product-item-photo {
        border-radius:
            12px
            12px
            0
            0 !important;
    }


    body.catalog-category-view
    .products-grid
    .product-item
    .product-image-container,

    body.catalogsearch-result-index
    .products-grid
    .product-item
    .product-image-container {
        padding: 12px !important;

        background: #F8F8F8 !important;
    }


    body.catalog-category-view
    .products-grid
    .product-item
    > .flex.flex-col.flex-1,

    body.catalogsearch-result-index
    .products-grid
    .product-item
    > .flex.flex-col.flex-1 {
        padding:
            11px
            12px
            13px
            12px !important;
    }

}

/* =============================================
   SOURCE: mitzuma-card-image-containment-v1.phtml
   ============================================= */
/*
 * ============================================================
 * FINAL PRODUCT IMAGE CONTAINMENT
 *
 * Background: #F9F9F9
 *
 * Fixes:
 * - old negative margins
 * - oversized JPEG stage
 * - image zooming
 * - grey bleeding outside card
 * - mobile overflow
 * ============================================================
 */


/* ==========================================================
   1. OUTER CARD MUST CLIP EVERYTHING
   ========================================================== */

body.catalog-category-view
.products-grid
.product-item,

body.catalogsearch-result-index
.products-grid
.product-item {
    position: relative !important;

    box-sizing: border-box !important;

    padding: 0 !important;

    border-radius: 16px !important;

    overflow: hidden !important;

    background: #ffffff !important;
}


/* ==========================================================
   2. RESET ALL PREVIOUS IMAGE-STAGE EXPANSION
   This specifically neutralises the older:
   width: calc(100% + 32px)
   margin-left/right: -16px
   ========================================================== */

body.catalog-category-view
.products-grid
.product-item
a.product-item-photo,

body.catalog-category-view
.products-grid
.product-item
a.product.photo.product-item-photo,

body.catalogsearch-result-index
.products-grid
.product-item
a.product-item-photo,

body.catalogsearch-result-index
.products-grid
.product-item
a.product.photo.product-item-photo {
    position: relative !important;

    display: block !important;

    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;

    padding: 0 !important;

    transform: none !important;

    background: #F9F9F9 !important;

    border: 0 !important;

    border-radius:
        15px
        15px
        0
        0 !important;

    overflow: hidden !important;

    isolation: isolate !important;
}


/*
 * Also override the old JPEG selector that used inline #f3f3f3.
 */

body.catalog-category-view
.product-item
a.product-item-photo[style*="#f3f3f3"],

body.catalogsearch-result-index
.product-item
a.product-item-photo[style*="#f3f3f3"] {
    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin:
        0
        0
        0
        0 !important;

    padding: 0 !important;

    background: #F9F9F9 !important;

    border-radius:
        15px
        15px
        0
        0 !important;

    overflow: hidden !important;
}


/* ==========================================================
   3. REMOVE OLD PSEUDO GREY LAYER
   ========================================================== */

body.catalog-category-view
.product-item
.product-item-photo::before,

body.catalogsearch-result-index
.product-item
.product-item-photo::before {
    content: none !important;

    display: none !important;
}


/* ==========================================================
   4. IMAGE CONTAINER
   Square stage, fully contained inside card.
   ========================================================== */

body.catalog-category-view
.products-grid
.product-item
.product-image-container,

body.catalogsearch-result-index
.products-grid
.product-item
.product-image-container {
    position: relative !important;

    display: grid !important;
    place-items: center !important;

    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;

    aspect-ratio: 1 / 1 !important;

    margin: 0 !important;

    padding: 20px !important;

    background: #F9F9F9 !important;

    border: 0 !important;
    border-radius: 0 !important;

    overflow: hidden !important;

    box-shadow: none !important;
}


/* ==========================================================
   5. REMOVE MAGENTO RATIO/PADDING HACKS
   ========================================================== */

body.catalog-category-view
.products-grid
.product-item
.product-image-wrapper,

body.catalogsearch-result-index
.products-grid
.product-item
.product-image-wrapper {
    position: relative !important;

    display: grid !important;
    place-items: center !important;

    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;

    height: 100% !important;
    min-height: 0 !important;

    aspect-ratio: 1 / 1 !important;

    margin: 0 !important;

    padding: 0 !important;
    padding-bottom: 0 !important;

    background: #F9F9F9 !important;

    border: 0 !important;
    border-radius: 0 !important;

    overflow: hidden !important;

    box-shadow: none !important;
}


/* ==========================================================
   6. ACTUAL PRODUCT IMAGE
   Important: do NOT force width:100%.
   ========================================================== */

body.catalog-category-view
.products-grid
.product-item
.product-image-photo,

body.catalog-category-view
.products-grid
.product-item
.product-item-photo img,

body.catalogsearch-result-index
.products-grid
.product-item
.product-image-photo,

body.catalogsearch-result-index
.products-grid
.product-item
.product-item-photo img {
    position: static !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    display: block !important;

    box-sizing: border-box !important;

    width: auto !important;
    height: auto !important;

    max-width: 88% !important;
    max-height: 88% !important;

    margin: auto !important;

    padding: 0 !important;

    object-fit: contain !important;
    object-position: center center !important;

    transform: none !important;

    background: transparent !important;

    mix-blend-mode: multiply !important;

    border: 0 !important;

    box-shadow: none !important;
}


/* ==========================================================
   7. DIRECT-IMAGE FALLBACK
   ========================================================== */

body.catalog-category-view
.products-grid
.product-item
.product-item-photo
> img,

body.catalogsearch-result-index
.products-grid
.product-item
.product-item-photo
> img {
    width: auto !important;
    height: auto !important;

    max-width: 88% !important;
    max-height: 88% !important;

    aspect-ratio: auto !important;

    margin: auto !important;

    padding: 0 !important;

    object-fit: contain !important;
}


/* ==========================================================
   8. DESKTOP
   ========================================================== */

@media (min-width: 768px) {

    body.catalog-category-view
    .products-grid
    .product-item
    .product-image-container,

    body.catalogsearch-result-index
    .products-grid
    .product-item
    .product-image-container {
        padding: 18px !important;
    }


    body.catalog-category-view
    .products-grid
    .product-item
    .product-image-photo,

    body.catalog-category-view
    .products-grid
    .product-item
    .product-item-photo img,

    body.catalogsearch-result-index
    .products-grid
    .product-item
    .product-image-photo,

    body.catalogsearch-result-index
    .products-grid
    .product-item
    .product-item-photo img {
        max-width: 86% !important;
        max-height: 86% !important;
    }

}


/* ==========================================================
   9. MOBILE
   Smaller image prevents the zoomed appearance.
   ========================================================== */

@media (max-width: 767px) {

    body.catalog-category-view
    .products-grid
    .product-item,

    body.catalogsearch-result-index
    .products-grid
    .product-item {
        border-radius: 13px !important;

        overflow: hidden !important;
    }


    body.catalog-category-view
    .products-grid
    .product-item
    a.product-item-photo,

    body.catalog-category-view
    .products-grid
    .product-item
    a.product.photo.product-item-photo,

    body.catalogsearch-result-index
    .products-grid
    .product-item
    a.product-item-photo,

    body.catalogsearch-result-index
    .products-grid
    .product-item
    a.product.photo.product-item-photo {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        border-radius:
            12px
            12px
            0
            0 !important;

        overflow: hidden !important;
    }


    body.catalog-category-view
    .products-grid
    .product-item
    .product-image-container,

    body.catalogsearch-result-index
    .products-grid
    .product-item
    .product-image-container {
        width: 100% !important;

        min-height: 0 !important;

        aspect-ratio: 1 / 1 !important;

        padding: 14px !important;

        background: #F9F9F9 !important;

        overflow: hidden !important;
    }


    body.catalog-category-view
    .products-grid
    .product-item
    .product-image-photo,

    body.catalog-category-view
    .products-grid
    .product-item
    .product-item-photo img,

    body.catalogsearch-result-index
    .products-grid
    .product-item
    .product-image-photo,

    body.catalogsearch-result-index
    .products-grid
    .product-item
    .product-item-photo img {
        width: auto !important;
        height: auto !important;

        max-width: 80% !important;
        max-height: 80% !important;

        object-fit: contain !important;

        transform: none !important;
    }

}

/* =============================================
   SOURCE: mitzuma-card-safe-image-centering-v1.phtml
   ============================================= */
/*
 * ============================================================
 * SAFE FINAL PRODUCT IMAGE STAGE
 *
 * Background: #ECECEC
 *
 * NO absolute image positioning.
 * NO translate(-50%, -50%).
 *
 * Uses CSS Grid to centre the existing Magento image safely.
 * ============================================================
 */


/* ==========================================================
   1. OUTER CARD
   ========================================================== */

body.catalog-category-view
.products-grid
.product-item,

body.catalogsearch-result-index
.products-grid
.product-item {
    position: relative !important;

    box-sizing: border-box !important;

    padding: 0 !important;

    background: #ffffff !important;

    border-radius: 16px !important;

    overflow: hidden !important;
}


/* ==========================================================
   2. IMAGE STAGE
   ========================================================== */

body.catalog-category-view
.products-grid
.product-item
a.product-item-photo,

body.catalog-category-view
.products-grid
.product-item
a.product.photo.product-item-photo,

body.catalogsearch-result-index
.products-grid
.product-item
a.product-item-photo,

body.catalogsearch-result-index
.products-grid
.product-item
a.product.photo.product-item-photo {
    position: relative !important;

    display: block !important;

    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #ECECEC !important;

    border: 0 !important;

    border-radius:
        15px
        15px
        0
        0 !important;

    overflow: hidden !important;

    transform: none !important;
}


/* Old JPEG special rule must not expand outside card */

body.catalog-category-view
.product-item
a.product-item-photo[style*="#f3f3f3"],

body.catalogsearch-result-index
.product-item
a.product-item-photo[style*="#f3f3f3"] {
    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #ECECEC !important;

    transform: none !important;

    overflow: hidden !important;
}


/* ==========================================================
   3. MAGENTO IMAGE CONTAINER
   ========================================================== */

body.catalog-category-view
.products-grid
.product-item
.product-image-container,

body.catalogsearch-result-index
.products-grid
.product-item
.product-image-container {
    position: relative !important;

    display: grid !important;

    place-items: center !important;
    justify-items: center !important;
    align-items: center !important;

    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;

    aspect-ratio: 1 / 1 !important;

    margin: 0 !important;

    padding: 18px !important;

    background: #ECECEC !important;

    border: 0 !important;

    overflow: hidden !important;

    box-shadow: none !important;
}


/* ==========================================================
   4. IMAGE WRAPPER
   ========================================================== */

body.catalog-category-view
.products-grid
.product-item
.product-image-wrapper,

body.catalogsearch-result-index
.products-grid
.product-item
.product-image-wrapper {
    position: relative !important;

    display: grid !important;

    place-items: center !important;
    justify-items: center !important;
    align-items: center !important;

    justify-content: center !important;
    align-content: center !important;

    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;

    height: 100% !important;

    margin: 0 !important;

    padding: 0 !important;
    padding-bottom: 0 !important;

    background: #ECECEC !important;

    overflow: hidden !important;

    text-align: center !important;
}


/* ==========================================================
   5. ACTUAL PRODUCT IMAGE
   Keep image in normal flow.
   ========================================================== */

body.catalog-category-view
.products-grid
.product-item
.product-image-photo,

body.catalog-category-view
.products-grid
.product-item
.product-item-photo img,

body.catalogsearch-result-index
.products-grid
.product-item
.product-image-photo,

body.catalogsearch-result-index
.products-grid
.product-item
.product-item-photo img {
    position: static !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    display: block !important;

    box-sizing: border-box !important;

    width: auto !important;
    height: auto !important;

    max-width: 84% !important;
    max-height: 84% !important;

    margin-top: auto !important;
    margin-right: auto !important;
    margin-bottom: auto !important;
    margin-left: auto !important;

    padding: 0 !important;

    object-fit: contain !important;
    object-position: center center !important;

    transform: none !important;

    background: transparent !important;

    mix-blend-mode: multiply !important;

    border: 0 !important;

    box-shadow: none !important;
}


/* ==========================================================
   6. DIRECT IMAGE FALLBACK
   ========================================================== */

body.catalog-category-view
.products-grid
.product-item
.product-item-photo
> img,

body.catalogsearch-result-index
.products-grid
.product-item
.product-item-photo
> img {
    position: static !important;

    width: auto !important;
    height: auto !important;

    max-width: 84% !important;
    max-height: 84% !important;

    margin: auto !important;

    transform: none !important;

    object-fit: contain !important;
    object-position: center center !important;
}


/* ==========================================================
   7. MOBILE
   ========================================================== */

@media (max-width: 767px) {

    body.catalog-category-view
    .products-grid
    .product-item,

    body.catalogsearch-result-index
    .products-grid
    .product-item {
        border-radius: 13px !important;

        overflow: hidden !important;
    }


    body.catalog-category-view
    .products-grid
    .product-item
    a.product-item-photo,

    body.catalogsearch-result-index
    .products-grid
    .product-item
    a.product-item-photo {
        border-radius:
            12px
            12px
            0
            0 !important;

        background: #ECECEC !important;
    }


    body.catalog-category-view
    .products-grid
    .product-item
    .product-image-container,

    body.catalogsearch-result-index
    .products-grid
    .product-item
    .product-image-container {
        padding: 12px !important;

        background: #ECECEC !important;

        place-items: center !important;
    }


    body.catalog-category-view
    .products-grid
    .product-item
    .product-image-wrapper,

    body.catalogsearch-result-index
    .products-grid
    .product-item
    .product-image-wrapper {
        background: #ECECEC !important;

        place-items: center !important;
    }


    body.catalog-category-view
    .products-grid
    .product-item
    .product-image-photo,

    body.catalog-category-view
    .products-grid
    .product-item
    .product-item-photo img,

    body.catalogsearch-result-index
    .products-grid
    .product-item
    .product-image-photo,

    body.catalogsearch-result-index
    .products-grid
    .product-item
    .product-item-photo img {
        position: static !important;

        width: auto !important;
        height: auto !important;

        max-width: 78% !important;
        max-height: 78% !important;

        margin: auto !important;

        transform: none !important;

        object-fit: contain !important;
        object-position: center center !important;
    }

}

/* =============================================
   SOURCE: mitzuma-card-montserrat-typography-v1.phtml
   ============================================= */
/*
 * ============================================================
 * PRODUCT CARD TYPOGRAPHY
 *
 * Titles: Montserrat
 * Prices: Montserrat
 * Price hover: Mitzuma pink #F00064
 * ============================================================
 */


/* ==========================================================
   1. PRODUCT TITLE
   ========================================================== */

body.catalog-category-view
.products-grid
.product-item
a.product-item-link,

body.catalogsearch-result-index
.products-grid
.product-item
a.product-item-link {
    font-family:
        "Montserrat",
        Arial,
        Helvetica,
        sans-serif !important;

    font-style: normal !important;

    /*
     * Retain the strong product-card title treatment.
     */
    font-weight: 700 !important;

    letter-spacing: 0 !important;

    font-synthesis: none;

    text-decoration: none !important;
}


/*
 * Do not change title colour on hover.
 * This keeps the clean dark title treatment.
 */

body.catalog-category-view
.products-grid
.product-item
a.product-item-link:hover,

body.catalogsearch-result-index
.products-grid
.product-item
a.product-item-link:hover {
    text-decoration: none !important;
}


/* ==========================================================
   2. PRICE CONTAINER
   ========================================================== */

body.catalog-category-view
.products-grid
.product-item
.price-box,

body.catalog-category-view
.products-grid
.product-item
.price-container,

body.catalog-category-view
.products-grid
.product-item
.price-wrapper,

body.catalogsearch-result-index
.products-grid
.product-item
.price-box,

body.catalogsearch-result-index
.products-grid
.product-item
.price-container,

body.catalogsearch-result-index
.products-grid
.product-item
.price-wrapper {
    font-family:
        "Montserrat",
        Arial,
        Helvetica,
        sans-serif !important;

    font-style: normal !important;

    font-synthesis: none;
}


/* ==========================================================
   3. ACTUAL PRICE TEXT
   ========================================================== */

body.catalog-category-view
.products-grid
.product-item
.price-box
.price,

body.catalog-category-view
.products-grid
.product-item
.price-container
.price,

body.catalog-category-view
.products-grid
.product-item
.price-wrapper
.price,

body.catalogsearch-result-index
.products-grid
.product-item
.price-box
.price,

body.catalogsearch-result-index
.products-grid
.product-item
.price-container
.price,

body.catalogsearch-result-index
.products-grid
.product-item
.price-wrapper
.price {
    font-family:
        "Montserrat",
        Arial,
        Helvetica,
        sans-serif !important;

    font-style: normal !important;

    font-weight: 500 !important;

    letter-spacing: 0 !important;

    transition:
        color 160ms ease !important;
}


/* ==========================================================
   4. PRICE HOVER -> MITZUMA PINK
   ========================================================== */

body.catalog-category-view
.products-grid
.product-item
.price-box:hover
.price,

body.catalog-category-view
.products-grid
.product-item
.price-container:hover
.price,

body.catalog-category-view
.products-grid
.product-item
.price-wrapper:hover
.price,

body.catalogsearch-result-index
.products-grid
.product-item
.price-box:hover
.price,

body.catalogsearch-result-index
.products-grid
.product-item
.price-container:hover
.price,

body.catalogsearch-result-index
.products-grid
.product-item
.price-wrapper:hover
.price {
    color: #F00064 !important;
}


/* ==========================================================
   5. FINAL / SPECIAL PRICE
   Ensure Magento sale-price structures also use Montserrat.
   ========================================================== */

body.catalog-category-view
.products-grid
.product-item
.special-price,

body.catalog-category-view
.products-grid
.product-item
.final-price,

body.catalogsearch-result-index
.products-grid
.product-item
.special-price,

body.catalogsearch-result-index
.products-grid
.product-item
.final-price {
    font-family:
        "Montserrat",
        Arial,
        Helvetica,
        sans-serif !important;

    font-style: normal !important;
}


/* Special/final price also goes pink on hover */

body.catalog-category-view
.products-grid
.product-item
.price-box:hover
.special-price
.price,

body.catalog-category-view
.products-grid
.product-item
.price-box:hover
.final-price
.price,

body.catalogsearch-result-index
.products-grid
.product-item
.price-box:hover
.special-price
.price,

body.catalogsearch-result-index
.products-grid
.product-item
.price-box:hover
.final-price
.price {
    color: #F00064 !important;
}


/*
 * Old/list price remains muted if a sale product has both prices.
 */

body.catalog-category-view
.products-grid
.product-item
.old-price
.price,

body.catalogsearch-result-index
.products-grid
.product-item
.old-price
.price {
    font-family:
        "Montserrat",
        Arial,
        Helvetica,
        sans-serif !important;

    font-style: normal !important;

    font-weight: 400 !important;
}

/* =============================================
   SOURCE: mitzuma-card-wishlist-ui-v2.phtml
   ============================================= */
/*
 * ============================================================
 * PREMIUM CATEGORY / SEARCH WISHLIST BUTTON
 * ============================================================
 */


/* Main button */

body.catalog-category-view
.products-grid
.product-item
button[data-addto="wishlist"],

body.catalogsearch-result-index
.products-grid
.product-item
button[data-addto="wishlist"] {
    position: absolute !important;

    top: 12px !important;
    right: 12px !important;

    z-index: 30 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 42px !important;
    height: 42px !important;

    min-width: 42px !important;
    min-height: 42px !important;

    margin: 0 !important;
    padding: 0 !important;

    border:
        1px solid rgba(226, 232, 240, 0.95) !important;

    border-radius: 9999px !important;

    background:
        rgba(255, 255, 255, 0.94) !important;

    color: #475569 !important;

    box-shadow:
        0 2px 5px rgba(15, 23, 42, 0.08),
        0 6px 16px rgba(15, 23, 42, 0.06) !important;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    cursor: pointer !important;

    outline: none !important;

    transform: translateY(0) scale(1) !important;

    transition:
        color 160ms ease,
        background-color 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease !important;
}


/* Heart SVG */

body.catalog-category-view
.products-grid
.product-item
button[data-addto="wishlist"] svg,

body.catalogsearch-result-index
.products-grid
.product-item
button[data-addto="wishlist"] svg {
    width: 20px !important;
    height: 20px !important;

    flex: 0 0 20px !important;

    color: currentColor !important;

    stroke: currentColor !important;

    transition:
        color 160ms ease,
        stroke 160ms ease,
        fill 160ms ease,
        transform 160ms ease !important;
}


/* Hover */

body.catalog-category-view
.products-grid
.product-item
button[data-addto="wishlist"]:hover,

body.catalogsearch-result-index
.products-grid
.product-item
button[data-addto="wishlist"]:hover {
    border-color:
        #F00064 !important;

    background:
        #F00064 !important;

    color:
        #ffffff !important;

    box-shadow:
        0 4px 10px rgba(240, 0, 100, 0.18),
        0 8px 22px rgba(240, 0, 100, 0.14) !important;

    transform:
        translateY(-2px)
        scale(1.05) !important;
}


/* Slight heart movement on hover */

body.catalog-category-view
.products-grid
.product-item
button[data-addto="wishlist"]:hover svg,

body.catalogsearch-result-index
.products-grid
.product-item
button[data-addto="wishlist"]:hover svg {
    color: #ffffff !important;
    stroke: #ffffff !important;

    transform:
        scale(1.06) !important;
}


/* Pressed state */

body.catalog-category-view
.products-grid
.product-item
button[data-addto="wishlist"]:active,

body.catalogsearch-result-index
.products-grid
.product-item
button[data-addto="wishlist"]:active {
    transform:
        translateY(0)
        scale(0.96) !important;

    box-shadow:
        0 2px 6px rgba(240, 0, 100, 0.16) !important;
}


/* Keyboard accessibility */

body.catalog-category-view
.products-grid
.product-item
button[data-addto="wishlist"]:focus-visible,

body.catalogsearch-result-index
.products-grid
.product-item
button[data-addto="wishlist"]:focus-visible {
    border-color:
        #F00064 !important;

    box-shadow:
        0 0 0 3px rgba(240, 0, 100, 0.15),
        0 4px 12px rgba(15, 23, 42, 0.10) !important;
}


/* ------------------------------------------------------------
   Small "Save" tooltip on desktop
   ------------------------------------------------------------ */

@media (min-width: 768px) {

    body.catalog-category-view
    .products-grid
    .product-item
    button[data-addto="wishlist"]::after,

    body.catalogsearch-result-index
    .products-grid
    .product-item
    button[data-addto="wishlist"]::after {
        content: "Save";

        position: absolute;

        top: 50%;
        right: calc(100% + 8px);

        transform:
            translateY(-50%)
            translateX(4px);

        padding:
            5px
            8px;

        border-radius:
            6px;

        background:
            #111827;

        color:
            #ffffff;

        font-family:
            "Montserrat",
            Arial,
            Helvetica,
            sans-serif;

        font-size:
            10px;

        font-weight:
            600;

        line-height:
            1;

        white-space:
            nowrap;

        opacity:
            0;

        visibility:
            hidden;

        pointer-events:
            none;

        transition:
            opacity 140ms ease,
            transform 140ms ease,
            visibility 140ms ease;
    }


    body.catalog-category-view
    .products-grid
    .product-item
    button[data-addto="wishlist"]:hover::after,

    body.catalogsearch-result-index
    .products-grid
    .product-item
    button[data-addto="wishlist"]:hover::after {
        opacity: 1;

        visibility:
            visible;

        transform:
            translateY(-50%)
            translateX(0);
    }

}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 767px) {

    body.catalog-category-view
    .products-grid
    .product-item
    button[data-addto="wishlist"],

    body.catalogsearch-result-index
    .products-grid
    .product-item
    button[data-addto="wishlist"] {
        top: 9px !important;
        right: 9px !important;

        width: 36px !important;
        height: 36px !important;

        min-width: 36px !important;
        min-height: 36px !important;

        box-shadow:
            0 2px 8px rgba(15, 23, 42, 0.10) !important;
    }


    body.catalog-category-view
    .products-grid
    .product-item
    button[data-addto="wishlist"] svg,

    body.catalogsearch-result-index
    .products-grid
    .product-item
    button[data-addto="wishlist"] svg {
        width: 18px !important;
        height: 18px !important;

        flex-basis: 18px !important;
    }

}

/* =============================================
   SOURCE: mitzuma-card-title-price-refinement-v1.phtml
   ============================================= */
/*
 * ============================================================
 * PRODUCT TITLE + PRICE REFINEMENT
 *
 * Colour: #444444
 * Font: Montserrat
 * Title: max 3 lines
 * Price hover: #F00064
 * ============================================================
 */


/* ==========================================================
   1. TITLE SLOT
   Increase old 56px / 2-line space to a full 3-line slot.
   ========================================================== */

body.catalog-category-view
.products-grid
.product-item
.mitzuma-card-title-slot,

body.catalogsearch-result-index
.products-grid
.product-item
.mitzuma-card-title-slot {
    display: flex !important;

    align-items: flex-start !important;

    flex:
        0 0 76px !important;

    height:
        76px !important;

    min-height:
        76px !important;

    max-height:
        76px !important;

    margin:
        0 0 6px 0 !important;

    padding:
        0 !important;

    overflow:
        hidden !important;
}


/* ==========================================================
   2. PRODUCT TITLE
   ========================================================== */

body.catalog-category-view
.products-grid
.product-item
a.product-item-link,

body.catalogsearch-result-index
.products-grid
.product-item
a.product-item-link {
    display:
        -webkit-box !important;

    width:
        100% !important;

    height:
        auto !important;

    min-height:
        0 !important;

    max-height:
        75.6px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        hidden !important;

    color:
        #444444 !important;

    font-family:
        "Montserrat",
        Arial,
        Helvetica,
        sans-serif !important;

    font-style:
        normal !important;

    font-weight:
        700 !important;

    line-height:
        1.4 !important;

    letter-spacing:
        0 !important;

    white-space:
        normal !important;

    text-overflow:
        ellipsis !important;

    text-decoration:
        none !important;

    -webkit-box-orient:
        vertical !important;

    -webkit-line-clamp:
        3 !important;

    line-clamp:
        3;
}


/*
 * Keep product title #444444 when hovering.
 */

body.catalog-category-view
.products-grid
.product-item
a.product-item-link:hover,

body.catalogsearch-result-index
.products-grid
.product-item
a.product-item-link:hover {
    color:
        #444444 !important;

    text-decoration:
        none !important;
}


/* ==========================================================
   3. PRICE CONTAINER
   ========================================================== */

body.catalog-category-view
.products-grid
.product-item
.mitzuma-card-price-slot,

body.catalogsearch-result-index
.products-grid
.product-item
.mitzuma-card-price-slot {
    color:
        #444444 !important;

    font-family:
        "Montserrat",
        Arial,
        Helvetica,
        sans-serif !important;

    font-style:
        normal !important;

    transition:
        color 160ms ease !important;
}


/* ==========================================================
   4. ALL NORMAL / FINAL PRICE TEXT
   ========================================================== */

body.catalog-category-view
.products-grid
.product-item
.mitzuma-card-price-slot
.price,

body.catalog-category-view
.products-grid
.product-item
.mitzuma-card-price-slot
.price-box,

body.catalog-category-view
.products-grid
.product-item
.mitzuma-card-price-slot
.price-container,

body.catalog-category-view
.products-grid
.product-item
.mitzuma-card-price-slot
.price-wrapper,

body.catalogsearch-result-index
.products-grid
.product-item
.mitzuma-card-price-slot
.price,

body.catalogsearch-result-index
.products-grid
.product-item
.mitzuma-card-price-slot
.price-box,

body.catalogsearch-result-index
.products-grid
.product-item
.mitzuma-card-price-slot
.price-container,

body.catalogsearch-result-index
.products-grid
.product-item
.mitzuma-card-price-slot
.price-wrapper {
    color:
        #444444 !important;

    font-family:
        "Montserrat",
        Arial,
        Helvetica,
        sans-serif !important;

    font-style:
        normal !important;

    transition:
        color 160ms ease !important;
}


/* ==========================================================
   5. PRICE HOVER -> MITZUMA PINK
   ========================================================== */

body.catalog-category-view
.products-grid
.product-item
.mitzuma-card-price-slot:hover,

body.catalog-category-view
.products-grid
.product-item
.mitzuma-card-price-slot:hover
.price,

body.catalog-category-view
.products-grid
.product-item
.mitzuma-card-price-slot:hover
.price-box,

body.catalog-category-view
.products-grid
.product-item
.mitzuma-card-price-slot:hover
.price-container,

body.catalog-category-view
.products-grid
.product-item
.mitzuma-card-price-slot:hover
.price-wrapper,

body.catalogsearch-result-index
.products-grid
.product-item
.mitzuma-card-price-slot:hover,

body.catalogsearch-result-index
.products-grid
.product-item
.mitzuma-card-price-slot:hover
.price,

body.catalogsearch-result-index
.products-grid
.product-item
.mitzuma-card-price-slot:hover
.price-box,

body.catalogsearch-result-index
.products-grid
.product-item
.mitzuma-card-price-slot:hover
.price-container,

body.catalogsearch-result-index
.products-grid
.product-item
.mitzuma-card-price-slot:hover
.price-wrapper {
    color:
        #F00064 !important;
}


/* ==========================================================
   6. MOBILE
   Keep three-line title but slightly tighter.
   ========================================================== */

@media (max-width: 767px) {

    body.catalog-category-view
    .products-grid
    .product-item
    .mitzuma-card-title-slot,

    body.catalogsearch-result-index
    .products-grid
    .product-item
    .mitzuma-card-title-slot {
        flex-basis:
            72px !important;

        height:
            72px !important;

        min-height:
            72px !important;

        max-height:
            72px !important;

        margin-bottom:
            5px !important;
    }


    body.catalog-category-view
    .products-grid
    .product-item
    a.product-item-link,

    body.catalogsearch-result-index
    .products-grid
    .product-item
    a.product-item-link {
        max-height:
            72px !important;

        line-height:
            1.33 !important;

        -webkit-line-clamp:
            3 !important;

        line-clamp:
            3;
    }

}

/* =============================================
   SOURCE: mitzuma-card-smart-stock-v4.phtml
   ============================================= */
body.catalog-category-view
.products-grid
.product-item
.mitzuma-smart-stock,

body.catalogsearch-result-index
.products-grid
.product-item
.mitzuma-smart-stock {
    display: flex;
    align-items: center;

    width: 100%;

    margin: 0;
    padding: 0;

    font-family:
        "Montserrat",
        Arial,
        Helvetica,
        sans-serif;
}


/* NORMAL STOCK */

.mitzuma-smart-stock__label.in-stock {
    display: inline-flex;
    align-items: center;

    min-height: 30px;

    padding: 5px 12px;

    border: 1px solid #b7ebc6;
    border-radius: 9999px;

    background: #ecfdf3;

    color: #15803d;

    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;

    white-space: nowrap;
}


/* LOW STOCK */

.mitzuma-smart-stock__label.low-stock {
    display: inline-flex;
    align-items: center;

    min-height: 30px;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    color: #B12704;

    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;

    white-space: nowrap;
}


/* TEMPORARILY OUT OF STOCK */

.mitzuma-smart-stock__label.temporarily-out {
    display: inline-flex;
    align-items: center;

    min-height: 30px;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    color: #B12704;

    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;

    white-space: nowrap;
}


@media (max-width: 767px) {

    .mitzuma-smart-stock__label.in-stock,
    .mitzuma-smart-stock__label.low-stock,
    .mitzuma-smart-stock__label.temporarily-out {
        font-size: 11px;
        line-height: 16px;
    }

    .mitzuma-smart-stock__label.in-stock {
        min-height: 28px;

        padding: 4px 9px;
    }

    .mitzuma-smart-stock__label.low-stock,
    .mitzuma-smart-stock__label.temporarily-out {
        min-height: 28px;

        white-space: normal;
    }
}

/* =============================================
   SOURCE: mitzuma-card-in-stock-ui-v1.phtml
   ============================================= */
/*
 * ============================================================
 * PREMIUM IN-STOCK BADGE
 *
 * UI only.
 * Does not change inventory logic.
 * ============================================================
 */


/* ------------------------------------------------------------
   IN STOCK BADGE
   ------------------------------------------------------------ */

body.catalog-category-view
.products-grid
.product-item
.mitzuma-smart-stock__label.in-stock,

body.catalogsearch-result-index
.products-grid
.product-item
.mitzuma-smart-stock__label.in-stock {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: flex-start;

    gap: 7px;

    width: auto;

    min-height: 29px;

    margin: 0;

    padding:
        5px
        11px
        5px
        10px;

    border:
        1px solid #cfe8d6;

    border-radius:
        9999px;

    background:
        #f3fbf5;

    color:
        #176b36;

    font-family:
        "Montserrat",
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        12px;

    font-style:
        normal;

    font-weight:
        600;

    line-height:
        17px;

    letter-spacing:
        0;

    white-space:
        nowrap;

    box-shadow:
        0 1px 2px rgba(22, 101, 52, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
}


/* ------------------------------------------------------------
   AVAILABILITY DOT
   ------------------------------------------------------------ */

body.catalog-category-view
.products-grid
.product-item
.mitzuma-smart-stock__label.in-stock::before,

body.catalogsearch-result-index
.products-grid
.product-item
.mitzuma-smart-stock__label.in-stock::before {
    content: "";

    display: block;

    flex:
        0 0 8px;

    width:
        8px;

    height:
        8px;

    border-radius:
        9999px;

    background:
        #22a447;

    box-shadow:
        0 0 0 3px rgba(34, 164, 71, 0.10);
}


/* ------------------------------------------------------------
   KEEP STOCK ROW NEAT
   ------------------------------------------------------------ */

body.catalog-category-view
.products-grid
.product-item
.mitzuma-smart-stock,

body.catalogsearch-result-index
.products-grid
.product-item
.mitzuma-smart-stock {
    min-height:
        30px;

    align-items:
        center;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 767px) {

    body.catalog-category-view
    .products-grid
    .product-item
    .mitzuma-smart-stock__label.in-stock,

    body.catalogsearch-result-index
    .products-grid
    .product-item
    .mitzuma-smart-stock__label.in-stock {
        gap:
            6px;

        min-height:
            27px;

        padding:
            4px
            9px;

        font-size:
            10.5px;

        line-height:
            15px;
    }


    body.catalog-category-view
    .products-grid
    .product-item
    .mitzuma-smart-stock__label.in-stock::before,

    body.catalogsearch-result-index
    .products-grid
    .product-item
    .mitzuma-smart-stock__label.in-stock::before {
        flex-basis:
            7px;

        width:
            7px;

        height:
            7px;

        box-shadow:
            0 0 0 2px rgba(34, 164, 71, 0.10);
    }

}

/* =============================================
   SOURCE: mitzuma-card-compact-layout-v1.phtml
   ============================================= */
/*
 * ============================================================
 * COMPACT RESPONSIVE PRODUCT CARD LAYOUT
 *
 * - Removes artificial 640px card height
 * - Grid row determines natural card height
 * - Same-row cards still stretch equally
 * - CTA / delivery stay aligned at bottom
 * - Stock row becomes compact
 * ============================================================
 */


/* ==========================================================
   GRID ITEM
   Let CSS Grid determine the natural row height.
   ========================================================== */

body.catalog-category-view
.products-grid > li.flex.flex-col,

body.catalogsearch-result-index
.products-grid > li.flex.flex-col {
    align-self:
        stretch !important;

    min-height:
        0 !important;
}


/* ==========================================================
   PRODUCT CARD
   Fill its grid cell without forcing a 640px minimum.
   ========================================================== */

body.catalog-category-view
.products-grid > li.flex.flex-col > .product-item,

body.catalogsearch-result-index
.products-grid > li.flex.flex-col > .product-item {
    flex:
        1 1 auto !important;

    height:
        auto !important;

    min-height:
        0 !important;

    max-height:
        none !important;
}


/* ==========================================================
   STOCK SLOT
   Previous slot was locked to 48px.
   Make it content-driven instead.
   ========================================================== */

body.catalog-category-view
.products-grid
.product-item
.mitzuma-card-stock-slot,

body.catalogsearch-result-index
.products-grid
.product-item
.mitzuma-card-stock-slot {
    flex:
        0 0 auto !important;

    height:
        auto !important;

    min-height:
        30px !important;

    max-height:
        none !important;

    margin:
        2px 0 8px 0 !important;

    padding:
        0 !important;

    overflow:
        visible !important;

    align-items:
        center !important;

    position:
        relative !important;

    z-index:
        2 !important;
}


/* ==========================================================
   SMART STOCK
   Prevent its wrapper adding unnecessary vertical space.
   ========================================================== */

body.catalog-category-view
.products-grid
.product-item
.mitzuma-smart-stock,

body.catalogsearch-result-index
.products-grid
.product-item
.mitzuma-smart-stock {
    min-height:
        29px !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


/* ==========================================================
   BOTTOM ACTION GROUP
   Keep delivery + CTA together.
   margin-top:auto is deliberately preserved:
   now it only absorbs tiny differences between cards in the
   same row instead of ~100px from the old 640px height.
   ========================================================== */

body.catalog-category-view
.products-grid
.product-item
.mitzuma-card-bottom-action-group,

body.catalogsearch-result-index
.products-grid
.product-item
.mitzuma-card-bottom-action-group {
    width:
        100% !important;

    flex:
        0 0 auto !important;
}


/* ==========================================================
   DELIVERY
   Keep the lower section compact.
   ========================================================== */

body.catalog-category-view
.products-grid
.product-item
.mitzuma-card-bobgo-delivery,

body.catalogsearch-result-index
.products-grid
.product-item
.mitzuma-card-bobgo-delivery {
    flex:
        0 0 auto !important;
}


/* ==========================================================
   MOBILE / TABLET
   Same compact behaviour.
   ========================================================== */

@media (max-width: 767px) {

    body.catalog-category-view
    .products-grid > li.flex.flex-col > .product-item,

    body.catalogsearch-result-index
    .products-grid > li.flex.flex-col > .product-item {
        height:
            auto !important;

        min-height:
            0 !important;

        max-height:
            none !important;
    }


    body.catalog-category-view
    .products-grid
    .product-item
    .mitzuma-card-stock-slot,

    body.catalogsearch-result-index
    .products-grid
    .product-item
    .mitzuma-card-stock-slot {
        min-height:
            28px !important;

        margin:
            2px 0 6px 0 !important;
    }


    body.catalog-category-view
    .products-grid
    .product-item
    .mitzuma-smart-stock,

    body.catalogsearch-result-index
    .products-grid
    .product-item
    .mitzuma-smart-stock {
        min-height:
            27px !important;
    }

}

/* =============================================
   SOURCE: mitzuma-native-pager-ui-v1.phtml
   ============================================= */
/*
 * ============================================================
 * MITZUMA NATIVE PAGINATION
 *
 * Uses Magento's normal URLs and page rendering.
 * No AJAX / no infinite loading.
 * ============================================================
 */


/* ------------------------------------------------------------
   PAGER OUTER AREA
   ------------------------------------------------------------ */

body.catalog-category-view
.toolbar-products
.pages,

body.catalogsearch-result-index
.toolbar-products
.pages {
    display:
        flex !important;

    justify-content:
        center !important;

    align-items:
        center !important;

    width:
        100% !important;

    max-width:
        100% !important;

    margin:
        22px auto 28px !important;

    padding:
        0 12px !important;

    box-sizing:
        border-box !important;

    overflow-x:
        auto !important;

    overflow-y:
        hidden !important;

    scrollbar-width:
        none;

    -webkit-overflow-scrolling:
        touch;
}


body.catalog-category-view
.toolbar-products
.pages::-webkit-scrollbar,

body.catalogsearch-result-index
.toolbar-products
.pages::-webkit-scrollbar {
    display:
        none;
}


/* ------------------------------------------------------------
   INNER PAGE GROUP
   Remove the large rectangular old block.
   ------------------------------------------------------------ */

body.catalog-category-view
.toolbar-products
.pages
.items,

body.catalogsearch-result-index
.toolbar-products
.pages
.items,

body.catalog-category-view
.toolbar-products
.pages
.pages-items,

body.catalogsearch-result-index
.toolbar-products
.pages
.pages-items {
    display:
        inline-flex !important;

    flex-wrap:
        nowrap !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        5px !important;

    width:
        auto !important;

    max-width:
        none !important;

    margin:
        0 !important;

    padding:
        6px !important;

    border:
        1px solid #e2e5e9 !important;

    border-radius:
        14px !important;

    background:
        #ffffff !important;

    box-shadow:
        0 2px 8px rgba(15, 23, 42, 0.06) !important;

    list-style:
        none !important;
}


/* ------------------------------------------------------------
   INDIVIDUAL ITEMS
   ------------------------------------------------------------ */

body.catalog-category-view
.toolbar-products
.pages
.item,

body.catalogsearch-result-index
.toolbar-products
.pages
.item {
    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    flex:
        0 0 auto !important;

    width:
        auto !important;

    height:
        auto !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    background:
        transparent !important;
}


/* ------------------------------------------------------------
   PAGE LINKS / FIRST / LAST / PREVIOUS / NEXT
   ------------------------------------------------------------ */

body.catalog-category-view
.toolbar-products
.pages
.page,

body.catalog-category-view
.toolbar-products
.pages
.action,

body.catalogsearch-result-index
.toolbar-products
.pages
.page,

body.catalogsearch-result-index
.toolbar-products
.pages
.action {
    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        5px !important;

    min-width:
        40px !important;

    height:
        40px !important;

    margin:
        0 !important;

    padding:
        0 12px !important;

    border:
        1px solid transparent !important;

    border-radius:
        9px !important;

    background:
        #ffffff !important;

    color:
        #444444 !important;

    font-family:
        "Montserrat",
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        13px !important;

    font-style:
        normal !important;

    font-weight:
        600 !important;

    line-height:
        1 !important;

    text-decoration:
        none !important;

    white-space:
        nowrap !important;

    box-shadow:
        none !important;

    transition:
        background-color 150ms ease,
        border-color 150ms ease,
        color 150ms ease,
        box-shadow 150ms ease,
        transform 150ms ease !important;
}


/* Remove Magento/Tailwind odd spacing */

body.catalog-category-view
.toolbar-products
.pages
.page > span,

body.catalog-category-view
.toolbar-products
.pages
.action > span,

body.catalogsearch-result-index
.toolbar-products
.pages
.page > span,

body.catalogsearch-result-index
.toolbar-products
.pages
.action > span {
    margin:
        0 !important;
}


/* ------------------------------------------------------------
   HOVER
   Mitzuma pink interaction.
   ------------------------------------------------------------ */

body.catalog-category-view
.toolbar-products
.pages
a.page:hover,

body.catalog-category-view
.toolbar-products
.pages
a.action:hover,

body.catalogsearch-result-index
.toolbar-products
.pages
a.page:hover,

body.catalogsearch-result-index
.toolbar-products
.pages
a.action:hover {
    border-color:
        #f00064 !important;

    background:
        #f00064 !important;

    color:
        #ffffff !important;

    box-shadow:
        0 3px 9px rgba(240, 0, 100, 0.16) !important;

    transform:
        translateY(-1px) !important;
}


/* ------------------------------------------------------------
   CURRENT PAGE
   Dark Mitzuma navy rather than generic blue.
   ------------------------------------------------------------ */

body.catalog-category-view
.toolbar-products
.pages
.item.current
.page,

body.catalog-category-view
.toolbar-products
.pages
.current
.page,

body.catalogsearch-result-index
.toolbar-products
.pages
.item.current
.page,

body.catalogsearch-result-index
.toolbar-products
.pages
.current
.page {
    border-color:
        #203a68 !important;

    background:
        #203a68 !important;

    color:
        #ffffff !important;

    font-weight:
        700 !important;

    box-shadow:
        0 3px 8px rgba(32, 58, 104, 0.18) !important;
}


/* Current page nested elements */

body.catalog-category-view
.toolbar-products
.pages
.current
.page
*,

body.catalogsearch-result-index
.toolbar-products
.pages
.current
.page
* {
    color:
        #ffffff !important;
}


/* ------------------------------------------------------------
   PREVIOUS / NEXT CHEVRONS
   ------------------------------------------------------------ */

body.catalog-category-view
.toolbar-products
.pages
.action.previous,

body.catalog-category-view
.toolbar-products
.pages
.action.next,

body.catalogsearch-result-index
.toolbar-products
.pages
.action.previous,

body.catalogsearch-result-index
.toolbar-products
.pages
.action.next {
    min-width:
        40px !important;

    width:
        40px !important;

    padding:
        0 !important;
}


/* Make SVG/icons inherit state */

body.catalog-category-view
.toolbar-products
.pages
.action
svg,

body.catalogsearch-result-index
.toolbar-products
.pages
.action
svg {
    width:
        17px !important;

    height:
        17px !important;

    color:
        currentColor !important;

    stroke:
        currentColor !important;
}


/* ------------------------------------------------------------
   FOCUS ACCESSIBILITY
   ------------------------------------------------------------ */

body.catalog-category-view
.toolbar-products
.pages
a:focus-visible,

body.catalogsearch-result-index
.toolbar-products
.pages
a:focus-visible {
    outline:
        3px solid rgba(240, 0, 100, 0.16) !important;

    outline-offset:
        2px !important;
}


/* ==========================================================
   MOBILE
   Keep all navigation accessible without the giant pager.
   Horizontal scrolling only if absolutely necessary.
   ========================================================== */

@media (max-width: 767px) {

    body.catalog-category-view
    .toolbar-products
    .pages,

    body.catalogsearch-result-index
    .toolbar-products
    .pages {
        justify-content:
            flex-start !important;

        margin:
            18px auto 22px !important;

        padding:
            0 10px !important;
    }


    body.catalog-category-view
    .toolbar-products
    .pages
    .items,

    body.catalogsearch-result-index
    .toolbar-products
    .pages
    .items,

    body.catalog-category-view
    .toolbar-products
    .pages
    .pages-items,

    body.catalogsearch-result-index
    .toolbar-products
    .pages
    .pages-items {
        gap:
            3px !important;

        margin:
            0 auto !important;

        padding:
            5px !important;

        border-radius:
            12px !important;
    }


    body.catalog-category-view
    .toolbar-products
    .pages
    .page,

    body.catalog-category-view
    .toolbar-products
    .pages
    .action,

    body.catalogsearch-result-index
    .toolbar-products
    .pages
    .page,

    body.catalogsearch-result-index
    .toolbar-products
    .pages
    .action {
        min-width:
            36px !important;

        height:
            36px !important;

        padding:
            0 9px !important;

        border-radius:
            8px !important;

        font-size:
            12px !important;
    }


    body.catalog-category-view
    .toolbar-products
    .pages
    .action.previous,

    body.catalog-category-view
    .toolbar-products
    .pages
    .action.next,

    body.catalogsearch-result-index
    .toolbar-products
    .pages
    .action.previous,

    body.catalogsearch-result-index
    .toolbar-products
    .pages
    .action.next {
        min-width:
            36px !important;

        width:
            36px !important;
    }

}

/* =============================================
   SOURCE: mitzuma-native-pager-edges-v1.phtml
   ============================================= */
/*
 * ============================================================
 * CLEAN BOTTOM PAGINATION
 *
 * Remove:
 * - Items 1-X of X
 * - Show X limiter
 *
 * Add:
 * - First Page
 * - Last Page
 * ============================================================
 */


/* ------------------------------------------------------------
   BOTTOM TOOLBAR ONLY
   ------------------------------------------------------------ */

body.catalog-category-view
.mitzuma-bottom-pager-toolbar,

body.catalogsearch-result-index
.mitzuma-bottom-pager-toolbar {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    grid-template-columns:
        1fr !important;

    width:
        100% !important;

    min-height:
        0 !important;

    margin:
        24px 0 30px !important;

    padding:
        0 !important;

    gap:
        0 !important;

    border:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;
}


/* ------------------------------------------------------------
   REMOVE HIGHLIGHTED LEFT + RIGHT CONTROLS
   ------------------------------------------------------------ */

body.catalog-category-view
.mitzuma-bottom-pager-toolbar
.toolbar-amount,

body.catalog-category-view
.mitzuma-bottom-pager-toolbar
.limiter,

body.catalogsearch-result-index
.mitzuma-bottom-pager-toolbar
.toolbar-amount,

body.catalogsearch-result-index
.mitzuma-bottom-pager-toolbar
.limiter {
    display:
        none !important;
}


/* Hide any leftover limiter labels */

body.catalog-category-view
.mitzuma-bottom-pager-toolbar
.limiter-label,

body.catalog-category-view
.mitzuma-bottom-pager-toolbar
.limiter-text,

body.catalogsearch-result-index
.mitzuma-bottom-pager-toolbar
.limiter-label,

body.catalogsearch-result-index
.mitzuma-bottom-pager-toolbar
.limiter-text {
    display:
        none !important;
}


/* ------------------------------------------------------------
   CENTER PAGER
   ------------------------------------------------------------ */

body.catalog-category-view
.mitzuma-bottom-pager-toolbar
.pages,

body.catalogsearch-result-index
.mitzuma-bottom-pager-toolbar
.pages {
    display:
        flex !important;

    justify-content:
        center !important;

    align-items:
        center !important;

    width:
        auto !important;

    max-width:
        100% !important;

    margin:
        0 auto !important;

    padding:
        0 10px !important;

    overflow-x:
        auto !important;

    overflow-y:
        hidden !important;

    scrollbar-width:
        none;
}


body.catalog-category-view
.mitzuma-bottom-pager-toolbar
.pages::-webkit-scrollbar,

body.catalogsearch-result-index
.mitzuma-bottom-pager-toolbar
.pages::-webkit-scrollbar {
    display:
        none;
}


/* ------------------------------------------------------------
   PAGINATION CAPSULE
   ------------------------------------------------------------ */

body.catalog-category-view
.mitzuma-bottom-pager-toolbar
.pages
.items,

body.catalog-category-view
.mitzuma-bottom-pager-toolbar
.pages
.pages-items,

body.catalogsearch-result-index
.mitzuma-bottom-pager-toolbar
.pages
.items,

body.catalogsearch-result-index
.mitzuma-bottom-pager-toolbar
.pages
.pages-items {
    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    flex-wrap:
        nowrap !important;

    gap:
        4px !important;

    width:
        max-content !important;

    margin:
        0 !important;

    padding:
        5px !important;

    border:
        1px solid #e2e5e9 !important;

    border-radius:
        14px !important;

    background:
        #ffffff !important;

    box-shadow:
        0 2px 9px rgba(15, 23, 42, 0.06) !important;
}


/* ------------------------------------------------------------
   FIRST PAGE / LAST PAGE
   ------------------------------------------------------------ */

body.catalog-category-view
.mitzuma-bottom-pager-toolbar
.mitzuma-page-edge-link,

body.catalogsearch-result-index
.mitzuma-bottom-pager-toolbar
.mitzuma-page-edge-link {
    width:
        auto !important;

    min-width:
        auto !important;

    height:
        40px !important;

    padding:
        0 14px !important;

    border:
        1px solid #e2e5e9 !important;

    border-radius:
        9px !important;

    background:
        #f8fafc !important;

    color:
        #203a68 !important;

    font-family:
        "Montserrat",
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        12px !important;

    font-style:
        normal !important;

    font-weight:
        650 !important;

    line-height:
        1 !important;

    text-decoration:
        none !important;

    white-space:
        nowrap !important;

    transition:
        background-color 150ms ease,
        color 150ms ease,
        border-color 150ms ease,
        box-shadow 150ms ease,
        transform 150ms ease !important;
}


/* Edge hover */

body.catalog-category-view
.mitzuma-bottom-pager-toolbar
a.mitzuma-page-edge-link:hover,

body.catalogsearch-result-index
.mitzuma-bottom-pager-toolbar
a.mitzuma-page-edge-link:hover {
    border-color:
        #f00064 !important;

    background:
        #f00064 !important;

    color:
        #ffffff !important;

    box-shadow:
        0 3px 9px rgba(240, 0, 100, 0.15) !important;

    transform:
        translateY(-1px) !important;
}


/* First/last when already on that page */

body.catalog-category-view
.mitzuma-bottom-pager-toolbar
.mitzuma-page-edge.is-disabled
.mitzuma-page-edge-link,

body.catalogsearch-result-index
.mitzuma-bottom-pager-toolbar
.mitzuma-page-edge.is-disabled
.mitzuma-page-edge-link {
    opacity:
        0.42 !important;

    pointer-events:
        none !important;

    box-shadow:
        none !important;
}


/* ------------------------------------------------------------
   PAGE NUMBER + ARROW SIZE
   ------------------------------------------------------------ */

body.catalog-category-view
.mitzuma-bottom-pager-toolbar
.pages
.page:not(.mitzuma-page-edge-link),

body.catalog-category-view
.mitzuma-bottom-pager-toolbar
.pages
.action,

body.catalogsearch-result-index
.mitzuma-bottom-pager-toolbar
.pages
.page:not(.mitzuma-page-edge-link),

body.catalogsearch-result-index
.mitzuma-bottom-pager-toolbar
.pages
.action {
    min-width:
        40px !important;

    width:
        40px !important;

    height:
        40px !important;

    padding:
        0 !important;

    border-radius:
        9px !important;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 767px) {

    body.catalog-category-view
    .mitzuma-bottom-pager-toolbar,

    body.catalogsearch-result-index
    .mitzuma-bottom-pager-toolbar {
        margin:
            18px 0 24px !important;
    }


    body.catalog-category-view
    .mitzuma-bottom-pager-toolbar
    .pages,

    body.catalogsearch-result-index
    .mitzuma-bottom-pager-toolbar
    .pages {
        justify-content:
            flex-start !important;

        width:
            100% !important;

        padding:
            0 8px !important;
    }


    body.catalog-category-view
    .mitzuma-bottom-pager-toolbar
    .pages
    .items,

    body.catalog-category-view
    .mitzuma-bottom-pager-toolbar
    .pages
    .pages-items,

    body.catalogsearch-result-index
    .mitzuma-bottom-pager-toolbar
    .pages
    .items,

    body.catalogsearch-result-index
    .mitzuma-bottom-pager-toolbar
    .pages
    .pages-items {
        margin:
            0 auto !important;

        gap:
            3px !important;

        padding:
            4px !important;

        border-radius:
            12px !important;
    }


    body.catalog-category-view
    .mitzuma-bottom-pager-toolbar
    .mitzuma-page-edge-link,

    body.catalogsearch-result-index
    .mitzuma-bottom-pager-toolbar
    .mitzuma-page-edge-link {
        height:
            36px !important;

        padding:
            0 10px !important;

        font-size:
            10.5px !important;

        border-radius:
            8px !important;
    }


    body.catalog-category-view
    .mitzuma-bottom-pager-toolbar
    .pages
    .page:not(.mitzuma-page-edge-link),

    body.catalog-category-view
    .mitzuma-bottom-pager-toolbar
    .pages
    .action,

    body.catalogsearch-result-index
    .mitzuma-bottom-pager-toolbar
    .pages
    .page:not(.mitzuma-page-edge-link),

    body.catalogsearch-result-index
    .mitzuma-bottom-pager-toolbar
    .pages
    .action {
        min-width:
            36px !important;

        width:
            36px !important;

        height:
            36px !important;
    }

}

/* =============================================
   SOURCE: mitzuma-card-equal-row-heights-v1.phtml
   ============================================= */
/*
 * ============================================================
 * TRUE EQUAL PRODUCT CARD HEIGHTS
 *
 * No fixed global card height.
 *
 * Instead:
 * - tallest card determines each row height
 * - shorter cards stretch to the same height
 * - works with saleable + out-of-stock products
 * - desktop + tablet + mobile grid
 * ============================================================
 */


/* ------------------------------------------------------------
   PRODUCT LIST
   Ensure grid/flex rows allow children to stretch.
   ------------------------------------------------------------ */

body.catalog-category-view
.products-grid
.product-items,

body.catalogsearch-result-index
.products-grid
.product-items {
    align-items:
        stretch !important;
}


/* ------------------------------------------------------------
   EACH GRID ITEM
   Previous Phase 40 selector was too restrictive.
   Target the LI regardless of the intermediate grid wrapper.
   ------------------------------------------------------------ */

body.catalog-category-view
.products-grid
li.flex.flex-col,

body.catalogsearch-result-index
.products-grid
li.flex.flex-col {
    display:
        flex !important;

    flex-direction:
        column !important;

    align-self:
        stretch !important;

    height:
        auto !important;

    min-height:
        0 !important;

    max-height:
        none !important;
}


/* ------------------------------------------------------------
   ACTUAL CARD
   Form for saleable products.
   Div for unavailable products.

   BOTH now fill the complete grid-row height.
   ------------------------------------------------------------ */

body.catalog-category-view
.products-grid
li.flex.flex-col
> .product-item,

body.catalogsearch-result-index
.products-grid
li.flex.flex-col
> .product-item {
    display:
        flex !important;

    flex-direction:
        column !important;

    flex:
        1 1 auto !important;

    width:
        100% !important;

    height:
        100% !important;

    min-height:
        0 !important;

    max-height:
        none !important;

    box-sizing:
        border-box !important;
}


/* ------------------------------------------------------------
   MAIN CONTENT AREA
   Make the inner content participate in the stretch.
   ------------------------------------------------------------ */

body.catalog-category-view
.products-grid
li.flex.flex-col
> .product-item
> .flex.flex-col.flex-1,

body.catalogsearch-result-index
.products-grid
li.flex.flex-col
> .product-item
> .flex.flex-col.flex-1 {
    display:
        flex !important;

    flex-direction:
        column !important;

    flex:
        1 1 auto !important;

    min-height:
        0 !important;
}


/* ------------------------------------------------------------
   SALEABLE PRODUCT BOTTOM SECTION
   Keep Bob Go + CTA together at the bottom.
   ------------------------------------------------------------ */

body.catalog-category-view
.products-grid
.product-item
.mitzuma-card-bottom-action-group,

body.catalogsearch-result-index
.products-grid
.product-item
.mitzuma-card-bottom-action-group {
    margin-top:
        auto !important;

    flex:
        0 0 auto !important;

    width:
        100% !important;
}


/* ------------------------------------------------------------
   OUT OF STOCK
   The card still stretches to the same row height.

   Keep the stock message positioned naturally below the price;
   we are NOT adding fake buttons or delivery rows.
   ------------------------------------------------------------ */

body.catalog-category-view
.products-grid
.product-item
.mitzuma-smart-stock__label.temporarily-out,

body.catalogsearch-result-index
.products-grid
.product-item
.mitzuma-smart-stock__label.temporarily-out {
    flex:
        0 0 auto !important;
}


/* ------------------------------------------------------------
   MOBILE
   Equal height remains row-based, not globally fixed.
   ------------------------------------------------------------ */

@media (max-width: 767px) {

    body.catalog-category-view
    .products-grid
    li.flex.flex-col,

    body.catalogsearch-result-index
    .products-grid
    li.flex.flex-col {
        align-self:
            stretch !important;

        min-height:
            0 !important;
    }


    body.catalog-category-view
    .products-grid
    li.flex.flex-col
    > .product-item,

    body.catalogsearch-result-index
    .products-grid
    li.flex.flex-col
    > .product-item {
        height:
            100% !important;

        min-height:
            0 !important;

        max-height:
            none !important;
    }

}

/* =============================================
   SOURCE: mitzuma-plp-header-cleanup-v1.phtml
   ============================================= */
/*
 * ============================================================
 * PLP HEADER CLEANUP
 *
 * Remove:
 * - "Shop By" heading (#filters-heading)
 * - top grid/list + sorter toolbar
 *
 * Preserve:
 * - actual layered navigation
 * - product grid
 * - bottom native pager
 * ============================================================
 */


/* SHOP BY */

body.catalog-category-view
#filters-heading,

body.catalogsearch-result-index
#filters-heading {
    display: none !important;

    width: 0 !important;
    height: 0 !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    overflow: hidden !important;
}


/* TOP TOOLBAR MARKED BY JS */

body.catalog-category-view
.toolbar.toolbar-products.mitzuma-plp-top-toolbar-hidden,

body.catalogsearch-result-index
.toolbar.toolbar-products.mitzuma-plp-top-toolbar-hidden {
    display: none !important;

    width: 0 !important;
    height: 0 !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 0 !important;

    border: 0 !important;

    overflow: hidden !important;
}


/*
 * Remove residual spacing before product grid.
 */

body.catalog-category-view
.products.wrapper,

body.catalogsearch-result-index
.products.wrapper {
    margin-top: 0 !important;
}


/* Explicit responsive coverage */

@media (max-width: 1023px) {

    body.catalog-category-view
    #filters-heading,

    body.catalogsearch-result-index
    #filters-heading,

    body.catalog-category-view
    .toolbar.toolbar-products.mitzuma-plp-top-toolbar-hidden,

    body.catalogsearch-result-index
    .toolbar.toolbar-products.mitzuma-plp-top-toolbar-hidden {
        display: none !important;
    }

}

/* =============================================
   SOURCE: mitzuma-plp-constant-spacing-v1.phtml
   ============================================= */
/*
 * ============================================================
 * MITZUMA PLP CONSTANT VERTICAL RHYTHM
 *
 * Desktop: 24px
 * Mobile:  16px
 *
 * Removes inconsistent empty space between breadcrumbs
 * and the filter/product grid.
 * ============================================================
 */


/* ==========================================================
   1. MAIN CATEGORY CONTENT
   Breadcrumbs sit outside this container.
   ========================================================== */

body.catalog-category-view
main#maincontent,

body.catalogsearch-result-index
main#maincontent,

body.catalog-category-view
.page-main,

body.catalogsearch-result-index
.page-main {
    margin-top:
        0 !important;

    padding-top:
        24px !important;
}


/* ==========================================================
   2. REMOVE ANY LEFTOVER PAGE-TITLE SHELL
   The H1 itself was removed in Phase 44.
   ========================================================== */

body.catalog-category-view
.page-title-wrapper,

body.catalogsearch-result-index
.page-title-wrapper {
    display:
        none !important;

    width:
        0 !important;

    height:
        0 !important;

    min-height:
        0 !important;

    max-height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        hidden !important;
}


/* ==========================================================
   3. MAIN COLUMNS
   This is the actual filter + products row.
   ========================================================== */

body.catalog-category-view
main#maincontent
.columns,

body.catalogsearch-result-index
main#maincontent
.columns,

body.catalog-category-view
.page-main
.columns,

body.catalogsearch-result-index
.page-main
.columns {
    margin-top:
        0 !important;

    padding-top:
        0 !important;

    top:
        auto !important;
}


/* ==========================================================
   4. MAIN / SIDEBAR COLUMNS
   Keep their starting positions identical.
   ========================================================== */

body.catalog-category-view
.column.main,

body.catalog-category-view
.sidebar-main,

body.catalog-category-view
.sidebar-additional,

body.catalogsearch-result-index
.column.main,

body.catalogsearch-result-index
.sidebar-main,

body.catalogsearch-result-index
.sidebar-additional {
    margin-top:
        0 !important;

    padding-top:
        0 !important;
}


/* ==========================================================
   5. PRODUCT AREA
   Prevent inherited top margins from creating another gap.
   ========================================================== */

body.catalog-category-view
.products.wrapper,

body.catalog-category-view
.products-grid,

body.catalogsearch-result-index
.products.wrapper,

body.catalogsearch-result-index
.products-grid {
    margin-top:
        0 !important;
}


/* ==========================================================
   6. SEMANTICALLY EMPTY CATEGORY BLOCKS
   JS marks these after checking their actual contents.
   ========================================================== */

body.catalog-category-view
.mitzuma-empty-plp-block,

body.catalogsearch-result-index
.mitzuma-empty-plp-block {
    display:
        none !important;

    width:
        0 !important;

    height:
        0 !important;

    min-height:
        0 !important;

    max-height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    overflow:
        hidden !important;
}


/* ==========================================================
   7. CATEGORY META CONTENT
   If real content exists, keep it, but use controlled spacing.
   ========================================================== */

body.catalog-category-view
.category-view:not(.mitzuma-empty-plp-block),

body.catalogsearch-result-index
.category-view:not(.mitzuma-empty-plp-block) {
    margin-top:
        0 !important;

    margin-bottom:
        20px !important;
}


/* Empty image / description wrappers */

body.catalog-category-view
.category-image.mitzuma-empty-plp-block,

body.catalog-category-view
.category-description.mitzuma-empty-plp-block,

body.catalogsearch-result-index
.category-image.mitzuma-empty-plp-block,

body.catalogsearch-result-index
.category-description.mitzuma-empty-plp-block {
    margin:
        0 !important;

    padding:
        0 !important;
}


/* ==========================================================
   8. PREVIOUSLY HIDDEN TOP TOOLBAR
   Guarantee it cannot reserve space.
   ========================================================== */

body.catalog-category-view
.mitzuma-plp-top-toolbar-hidden,

body.catalogsearch-result-index
.mitzuma-plp-top-toolbar-hidden {
    display:
        none !important;

    position:
        absolute !important;

    width:
        0 !important;

    height:
        0 !important;

    min-height:
        0 !important;

    max-height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        hidden !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    body.catalog-category-view
    main#maincontent,

    body.catalogsearch-result-index
    main#maincontent,

    body.catalog-category-view
    .page-main,

    body.catalogsearch-result-index
    .page-main {
        padding-top:
            16px !important;
    }


    body.catalog-category-view
    .category-view:not(.mitzuma-empty-plp-block),

    body.catalogsearch-result-index
    .category-view:not(.mitzuma-empty-plp-block) {
        margin-bottom:
            16px !important;
    }

}

/* =============================================
   SOURCE: mitzuma-plp-constant-spacing-v2.phtml
   ============================================= */
/*
 * ============================================================
 * MITZUMA PLP CONSTANT SPACING V2
 *
 * Diagnostic-backed fix.
 *
 * Desktop breadcrumb -> catalogue content: 24px
 * Mobile breadcrumb  -> catalogue content: 16px
 *
 * Removes actual Hyva spacing sources:
 * - empty category-view-container
 * - inherited page-main padding
 * - product-list py-8 top padding
 * - layered navigation my-6 top margin
 * - product UL pt-4
 * ============================================================
 */


/* ==========================================================
   1. UNDO PHASE 44B'S BROAD .page-main PADDING
   ========================================================== */

body.catalog-category-view
.page-main,

body.catalogsearch-result-index
.page-main {
    padding-top:
        0 !important;
}


/* ==========================================================
   2. EMPTY CATEGORY VIEW CONTAINER
   JS adds the class only when there is NO visible category
   image / description / CMS content.
   ========================================================== */

body.catalog-category-view
#category-view-container.mitzuma-category-view-empty-v2 {
    display:
        none !important;

    width:
        0 !important;

    height:
        0 !important;

    min-height:
        0 !important;

    max-height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    overflow:
        hidden !important;
}


/*
 * Even when real category content exists, do not allow
 * inherited wrapper padding to create arbitrary whitespace.
 */

body.catalog-category-view
#category-view-container {
    margin-top:
        0 !important;

    padding-top:
        0 !important;

    min-height:
        0 !important;
}


body.catalog-category-view
#category-view-container
> .page-main {
    margin-top:
        0 !important;

    padding-top:
        0 !important;

    min-height:
        0 !important;
}


/* ==========================================================
   3. SINGLE SOURCE OF VERTICAL GAP
   This is now the ONLY deliberate space after breadcrumbs.
   ========================================================== */

body.catalog-category-view
main#maincontent,

body.catalogsearch-result-index
main#maincontent {
    margin-top:
        0 !important;

    padding-top:
        24px !important;
}


/* ==========================================================
   4. COLUMNS START IMMEDIATELY INSIDE MAINCONTENT
   ========================================================== */

body.catalog-category-view
main#maincontent
> .columns,

body.catalogsearch-result-index
main#maincontent
> .columns {
    margin-top:
        0 !important;

    padding-top:
        0 !important;

    row-gap:
        0 !important;
}


/* contentarea is empty on these catalogue pages */

body.catalog-category-view
main#maincontent
> #contentarea:empty,

body.catalogsearch-result-index
main#maincontent
> #contentarea:empty {
    display:
        none !important;

    height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


/* ==========================================================
   5. FILTER SIDEBAR
   Diagnostic found:
       <div class="my-6" role="region" ...>
   Remove that 24px top/bottom margin.
   ========================================================== */

body.catalog-category-view
main#maincontent
.sidebar-main
> div[role="region"],

body.catalogsearch-result-index
main#maincontent
.sidebar-main
> div[role="region"] {
    margin-top:
        0 !important;

    margin-bottom:
        0 !important;
}


/*
 * Shop By heading has already been removed.
 * Guarantee it occupies exactly zero space.
 */

body.catalog-category-view
#filters-heading,

body.catalogsearch-result-index
#filters-heading {
    display:
        none !important;

    height:
        0 !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


/*
 * Hyva filter content previously used mt-4 because it followed
 * the Shop By heading. The heading is gone, so remove that gap.
 */

body.catalog-category-view
#filters-content,

body.catalogsearch-result-index
#filters-content {
    margin-top:
        0 !important;
}


/* ==========================================================
   6. PRODUCT LIST SECTION
   Diagnostic found vendor list.phtml:
       <section class="py-8" id="product-list">

   Keep reasonable bottom spacing but remove top padding.
   ========================================================== */

body.catalog-category-view
#product-list,

body.catalogsearch-result-index
#product-list {
    margin-top:
        0 !important;

    padding-top:
        0 !important;

    padding-bottom:
        32px !important;
}


/* ==========================================================
   7. TOP TOOLBAR
   Already hidden by Phase 43C; ensure absolutely no layout
   space survives while Alpine/JS initialises.
   ========================================================== */

body.catalog-category-view
#product-list
.toolbar-products.mitzuma-plp-top-toolbar-hidden,

body.catalogsearch-result-index
#product-list
.toolbar-products.mitzuma-plp-top-toolbar-hidden {
    display:
        none !important;

    height:
        0 !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


/* ==========================================================
   8. PRODUCT GRID
   Diagnostic found:
       <ul class="mx-auto pt-4 pb-12 ...">

   Remove that additional 16px top padding.
   ========================================================== */

body.catalog-category-view
#product-list
.products-grid
> ul,

body.catalogsearch-result-index
#product-list
.products-grid
> ul {
    margin-top:
        0 !important;

    padding-top:
        0 !important;
}


/* Product wrapper itself adds no extra top space */

body.catalog-category-view
#product-list
.products.wrapper,

body.catalogsearch-result-index
#product-list
.products.wrapper {
    margin-top:
        0 !important;

    padding-top:
        0 !important;
}


/* ==========================================================
   9. MAIN + SIDEBAR MUST SHARE SAME START LINE
   ========================================================== */

body.catalog-category-view
main#maincontent
.sidebar-main,

body.catalog-category-view
main#maincontent
.column.main,

body.catalogsearch-result-index
main#maincontent
.sidebar-main,

body.catalogsearch-result-index
main#maincontent
.column.main {
    margin-top:
        0 !important;

    padding-top:
        0 !important;

    align-self:
        start !important;
}


/* ==========================================================
   10. MOBILE
   ========================================================== */

@media (max-width: 767px) {

    body.catalog-category-view
    main#maincontent,

    body.catalogsearch-result-index
    main#maincontent {
        padding-top:
            16px !important;
    }


    body.catalog-category-view
    #product-list,

    body.catalogsearch-result-index
    #product-list {
        padding-top:
            0 !important;

        padding-bottom:
            24px !important;
    }


    body.catalog-category-view
    #product-list
    .products-grid
    > ul,

    body.catalogsearch-result-index
    #product-list
    .products-grid
    > ul {
        padding-top:
            0 !important;
    }


    body.catalog-category-view
    main#maincontent
    .sidebar-main
    > div[role="region"],

    body.catalogsearch-result-index
    main#maincontent
    .sidebar-main
    > div[role="region"] {
        margin:
            0 !important;
    }

}


/* ==========================================================
   MITZUMA_PLP_RRP_SAVE_V1

   Custom product RRP + SAVE treatment.
   Category and catalog search only.

   Wishlist currently occupies:
       top: 12px
       right: 12px

   SAVE badge deliberately sits to its left.
   ========================================================== */

body.catalog-category-view
.products-grid
.product-item
.mitzuma-save-badge,

body.catalogsearch-result-index
.products-grid
.product-item
.mitzuma-save-badge {
    position: absolute !important;
    top: 12px !important;
    right: 60px !important;
    z-index: 29 !important;

    min-width: 56px;
    height: 42px;
    padding: 4px 8px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    border: 0;
    border-radius: 9px;

    background: #2146CF;
    color: #ffffff;

    box-shadow:
        0 2px 8px
        rgba(15, 23, 42, 0.14);

    font-family: inherit;
    line-height: 1;

    text-align: center;

    pointer-events: none;
}


body.catalog-category-view
.products-grid
.product-item
.mitzuma-save-badge__label,

body.catalogsearch-result-index
.products-grid
.product-item
.mitzuma-save-badge__label {
    display: block;

    font-size: 9px;
    line-height: 10px;
    font-weight: 700;

    letter-spacing: 0.055em;

    color: #ffffff;
}


body.catalog-category-view
.products-grid
.product-item
.mitzuma-save-badge__value,

body.catalogsearch-result-index
.products-grid
.product-item
.mitzuma-save-badge__value {
    display: block;

    margin-top: 2px;

    font-size: 15px;
    line-height: 17px;
    font-weight: 800;

    color: #ffffff;
}


/* RRP line directly above the existing Magento price. */

body.catalog-category-view
.products-grid
.product-item
.mitzuma-card-rrp,

body.catalogsearch-result-index
.products-grid
.product-item
.mitzuma-card-rrp {
    display: flex;
    align-items: center;
    gap: 4px;

    height: 14px;
    min-height: 14px;
    max-height: 14px;

    margin: 0;
    padding: 0;

    overflow: hidden;
    white-space: nowrap;

    color: #64748b;

    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
}


body.catalog-category-view
.products-grid
.product-item
.mitzuma-card-rrp__label,

body.catalogsearch-result-index
.products-grid
.product-item
.mitzuma-card-rrp__label {
    font-weight: 600;
}


body.catalog-category-view
.products-grid
.product-item
.mitzuma-card-rrp__price,

body.catalogsearch-result-index
.products-grid
.product-item
.mitzuma-card-rrp__price {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: currentColor;
}


/*
 * Keep the existing fixed price slot dimensions.
 * RRP uses only a compact 14px line so the approved card
 * structure is not expanded during the first implementation.
 */

body.catalog-category-view
.products-grid
.product-item
.mitzuma-card-price-slot.mitzuma-has-rrp
.price-box,

body.catalogsearch-result-index
.products-grid
.product-item
.mitzuma-card-price-slot.mitzuma-has-rrp
.price-box {
    margin-top: 0 !important;
}


/* Mobile card controls are slightly tighter. */

@media (max-width: 767px) {

    body.catalog-category-view
    .products-grid
    .product-item
    .mitzuma-save-badge,

    body.catalogsearch-result-index
    .products-grid
    .product-item
    .mitzuma-save-badge {
        top: 9px !important;
        right: 54px !important;

        min-width: 52px;
        height: 38px;

        padding:
            3px 6px;
    }


    body.catalog-category-view
    .products-grid
    .product-item
    .mitzuma-save-badge__label,

    body.catalogsearch-result-index
    .products-grid
    .product-item
    .mitzuma-save-badge__label {
        font-size: 8px;
        line-height: 9px;
    }


    body.catalog-category-view
    .products-grid
    .product-item
    .mitzuma-save-badge__value,

    body.catalogsearch-result-index
    .products-grid
    .product-item
    .mitzuma-save-badge__value {
        margin-top: 2px;

        font-size: 14px;
        line-height: 15px;
    }


    body.catalog-category-view
    .products-grid
    .product-item
    .mitzuma-card-rrp,

    body.catalogsearch-result-index
    .products-grid
    .product-item
    .mitzuma-card-rrp {
        font-size: 10px;
        line-height: 13px;

        height: 13px;
        min-height: 13px;
        max-height: 13px;
    }
}



/* ==========================================================
   MITZUMA_PLP_SAVE_TOP_LEFT_EDGE_V1
   SAVE badge attached flush to top-left edge.
   Wishlist remains unchanged at top-right.
   ========================================================== */

body.catalog-category-view
.products-grid
.product-item
.mitzuma-save-badge,

body.catalogsearch-result-index
.products-grid
.product-item
.mitzuma-save-badge {
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    z-index: 31 !important;

    border-radius: 12px 0 9px 0 !important;
    box-shadow: none !important;
}


@media (max-width: 767px) {

    body.catalog-category-view
    .products-grid
    .product-item
    .mitzuma-save-badge,

    body.catalogsearch-result-index
    .products-grid
    .product-item
    .mitzuma-save-badge {
        top: 0 !important;
        left: 0 !important;
        right: auto !important;

        border-radius: 12px 0 8px 0 !important;
        box-shadow: none !important;
    }
}