/*
 * Mzya Shopping Frontend UI Layer — Phase UI-1A
 * Scope: storefront/customer frontend visual normalization only.
 * Rules:
 * - Do not move business logic into CSS.
 * - Do not edit Webkul/vendor core.
 * - Keep page-specific CSS for layout exceptions only.
 * - This file is loaded last to unify tokens, cards, buttons, controls, pills, and mobile rhythm.
 */

:root {
    --mzya-blue: #2d5893;
    --mzya-blue-dark: #2d5893;
    --mzya-teal: #628e92;
    --mzya-gold: #e4a224;
    --mzya-rust: #b85b34;

    --mzya-text: #0f2544;
    --mzya-text-strong: #071f3f;
    --mzya-muted: #667085;
    --mzya-border: #dbe6f1;
    --mzya-border-soft: rgba(45, 88, 147, 0.12);
    --mzya-surface: #ffffff;
    --mzya-surface-soft: #f7fafc;
    --mzya-surface-warm: #fbf8f1;

    --mzya-radius-xs: 8px;
    --mzya-radius-sm: 10px;
    --mzya-radius-md: 14px;
    --mzya-radius-lg: 18px;
    --mzya-radius-xl: 22px;

    --mzya-shadow-xs: 0 4px 14px rgba(15, 37, 68, 0.045);
    --mzya-shadow-sm: 0 10px 26px rgba(15, 37, 68, 0.06);
    --mzya-shadow-md: 0 18px 46px rgba(15, 37, 68, 0.08);

    --mzya-control-height: 42px;
    --mzya-control-height-mobile: 40px;
    --mzya-button-height: 44px;
    --mzya-button-height-mobile: 42px;
}

/* ---------- Base safety ---------- */
html {
    -webkit-text-size-adjust: 100%;
}

body {
    color: var(--mzya-text);
}

#app,
#app * {
    -webkit-tap-highlight-color: transparent;
}

main {
    color: var(--mzya-text);
}

main img,
main svg,
main video {
    max-width: 100%;
}

/* ---------- Shared card language ---------- */
:where(
    .mzya-account-card,
    .mzya-account-form-card,
    .mzya-address-card,
    .mzya-order-card,
    .mzya-account-datagrid-card,
    .mzya-orders-list-card,
    .mzya-rma-datagrid-card,
    .mzya-rma-order-card,
    .mzya-dashboard-panel,
    .mzya-dashboard-stat-card,
    .mzya-dashboard-welcome-strip,
    .mzya-product-card,
    .mzya-product-list-card,
    .mzya-pdp-side-card,
    .mzya-pdp-plain-section,
    .mzya-pdp-reviews-shell,
    .mzya-help-card,
    .mzya-ui-card
) {
    border-color: var(--mzya-border-soft) !important;
    border-radius: var(--mzya-radius-xs) !important;
    background-color: var(--mzya-surface) !important;
    box-shadow: var(--mzya-shadow-sm) !important;
}

/* Inner blocks should feel like sections, not extra cards with heavy borders. */
:where(
    .mzya-account-card,
    .mzya-account-form-card,
    .mzya-order-card,
    .mzya-account-datagrid-card,
    .mzya-rma-datagrid-card,
    .mzya-rma-order-card,
    .mzya-dashboard-panel,
    .mzya-pdp-side-card,
    .mzya-pdp-plain-section
) :where(.mzya-ui-inner, .mzya-account-summary-card, .mzya-rma-step, .mzya-pdp-side-split-item) {
    border-color: rgba(45, 88, 147, 0.10) !important;
    background: var(--mzya-surface-soft) !important;
    box-shadow: none !important;
}

/* ---------- Shared button language ---------- */
:where(
    .mzya-account-primary-button,
    .mzya-account-content .primary-button,
    .mzya-account-page .primary-button,
    .mzya-account-empty__button,
    .mzya-rma-action-button,
    .mzya-new-conversation-button,
    .mzya-communication-start-strip__button,
    .mzya-pdp-buy-btn,
    .mzya-product-card__cta
) {
    min-height: var(--mzya-button-height) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 1px solid var(--mzya-blue) !important;
    border-radius: var(--mzya-radius-xs) !important;
    background: var(--mzya-blue) !important;
    color: #ffffff !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
    text-decoration: none !important;
    box-shadow: 0 12px 24px rgba(45, 88, 147, 0.18) !important;
    transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease !important;
}

:where(
    .mzya-account-primary-button,
    .mzya-account-content .primary-button,
    .mzya-account-page .primary-button,
    .mzya-account-empty__button,
    .mzya-rma-action-button,
    .mzya-new-conversation-button,
    .mzya-communication-start-strip__button,
    .mzya-pdp-buy-btn,
    .mzya-product-card__cta
):hover:not(:disabled) {
    background: var(--mzya-blue-dark) !important;
    border-color: var(--mzya-blue-dark) !important;
    box-shadow: 0 14px 28px rgba(23, 61, 110, 0.22) !important;
    transform: translateY(-1px);
}

:where(
    .mzya-account-secondary-button,
    .mzya-account-content .secondary-button,
    .mzya-account-page .secondary-button,
    .mzya-account-empty__button--ghost,
    .mzya-account-danger-outline-button,
    .mzya-pdp-cart-btn,
    .mzya-pdp-side-seller-action,
    .mzya-datagrid-page-button
) {
    min-height: var(--mzya-button-height) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 1px solid rgba(45, 88, 147, 0.24) !important;
    border-radius: var(--mzya-radius-xs) !important;
    background: #ffffff !important;
    color: var(--mzya-blue) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    text-decoration: none !important;
    box-shadow: var(--mzya-shadow-xs) !important;
}

:where(
    .mzya-account-secondary-button,
    .mzya-account-content .secondary-button,
    .mzya-account-page .secondary-button,
    .mzya-account-empty__button--ghost,
    .mzya-pdp-cart-btn,
    .mzya-pdp-side-seller-action,
    .mzya-datagrid-page-button
):hover:not(:disabled) {
    border-color: rgba(45, 88, 147, 0.42) !important;
    background: #f5f8fc !important;
    color: var(--mzya-blue-dark) !important;
}

:where(button, a, input, select, textarea):disabled,
:where(button, a).is-disabled {
    cursor: not-allowed !important;
    opacity: 0.58 !important;
    transform: none !important;
}

/* ---------- Form/control language ---------- */
:where(
    .mzya-account-content,
    .mzya-account-page,
    .mzya-rma-page,
    .mzya-rma-create-page,
    .mzya-pdp-options-block,
    .mzya-pdp-cta
) :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    border: 1px solid var(--mzya-border) !important;
    border-radius: var(--mzya-radius-xs) !important;
    background-color: #ffffff !important;
    color: var(--mzya-text) !important;
    box-shadow: none !important;
    outline: none !important;
}

:where(
    .mzya-account-content,
    .mzya-account-page,
    .mzya-rma-page,
    .mzya-rma-create-page,
    .mzya-pdp-options-block,
    .mzya-pdp-cta
) :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
    border-color: rgba(45, 88, 147, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(45, 88, 147, 0.10) !important;
}

/* ---------- Badge/pill language ---------- */
:where(
    .mzya-dashboard-status-pill,
    .mzya-product-card__badge,
    .mzya-product-card__rating-pill,
    .mzya-account-nav__badge,
    .mzya-rma-status-badge,
    .mzya-ui-pill
) {
    border-radius: 8pxx !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}

/* ---------- Product cards: consistent frontend commerce feel ---------- */
.mzya-product-card {
    overflow: hidden !important;
}

.mzya-product-card__icon-btn,
.mzya-pdp-utility-btn {
    border: 1px solid rgba(45, 88, 147, 0.12) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    color: var(--mzya-text) !important;
    box-shadow: 0 8px 20px rgba(15, 37, 68, 0.08) !important;
}

.mzya-product-card__icon-btn.is-active,
.mzya-pdp-utility-btn.icon-heart-fill {
    color: #dc2626 !important;
}


/* ---------- Mobile foundation ---------- */
@media (max-width: 767px) {
    body {
        background: #ffffff !important;
    }

    #app,
    main {
        max-width: 100vw;
        overflow-x: clip;
    }

    main .container {
        width: 100% !important;
        max-width: 100% !important;
    }

    :where(
        .mzya-account-card,
        .mzya-account-form-card,
        .mzya-address-card,
        .mzya-order-card,
        .mzya-account-datagrid-card,
        .mzya-orders-list-card,
        .mzya-rma-datagrid-card,
        .mzya-rma-order-card,
        .mzya-dashboard-panel,
        .mzya-dashboard-stat-card,
        .mzya-dashboard-welcome-strip,
        .mzya-product-card,
        .mzya-product-list-card,
        .mzya-pdp-side-card,
        .mzya-pdp-plain-section,
        .mzya-pdp-reviews-shell
    ) {
        border-radius: var(--mzya-radius-lg) !important;
        box-shadow: 0 8px 22px rgba(15, 37, 68, 0.055) !important;
    }

    :where(
        .mzya-account-primary-button,
        .mzya-account-secondary-button,
        .mzya-account-danger-button,
        .mzya-account-content .primary-button,
        .mzya-account-content .secondary-button,
        .mzya-account-page .primary-button,
        .mzya-account-page .secondary-button,
        .mzya-rma-action-button,
        .mzya-new-conversation-button,
        .mzya-communication-start-strip__button,
        .mzya-pdp-cart-btn,
        .mzya-pdp-buy-btn,
        .mzya-product-card__cta,
        .mzya-datagrid-page-button
    ) {
        min-height: var(--mzya-button-height-mobile) !important;
        border-radius: var(--mzya-radius-xs) !important;
        font-size: 13px !important;
    }

    /* Customer account mobile nav: no more horizontal-scroll tab rail. */
    .mzya-account-nav__list {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
        overflow: visible !important;
        padding: 2px 0 8px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        scrollbar-width: none !important;
        scroll-snap-type: none !important;
    }

    .mzya-account-nav__link {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 38px !important;
        padding: 9px 10px !important;
        border: 1px solid rgba(45, 88, 147, 0.14) !important;
        border-radius: 8pxx !important;
        background: #ffffff !important;
        color: var(--mzya-blue-dark) !important;
        box-shadow: 0 8px 18px rgba(15, 37, 68, 0.045) !important;
    }

    .mzya-account-nav__link.is-active {
        border-color: var(--mzya-blue) !important;
        background: var(--mzya-blue) !important;
        color: #ffffff !important;
        box-shadow: 0 10px 22px rgba(45, 88, 147, 0.18) !important;
    }

    .mzya-account-nav__link.is-active::before {
        display: none !important;
    }

    .mzya-account-nav__label {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 12px !important;
        font-weight: 850 !important;
    }

    .mzya-account-nav__icon {
        width: 16px !important;
        min-width: 16px !important;
        font-size: 15px !important;
    }

    /* Datagrid wrappers: keep inside viewport until Phase UI-2 converts them into true cards. */
    .mzya-account-datagrid-card,
    .mzya-orders-list-card,
    .mzya-rma-datagrid-card,
    .mzya-rma-order-card {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .mzya-account-datagrid-card :where(.table-responsive, .overflow-x-auto, [class*="overflow-x"]),
    .mzya-orders-list-card :where(.table-responsive, .overflow-x-auto, [class*="overflow-x"]),
    .mzya-rma-datagrid-card :where(.table-responsive, .overflow-x-auto, [class*="overflow-x"]),
    .mzya-rma-order-card :where(.table-responsive, .overflow-x-auto, [class*="overflow-x"]) {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .mzya-datagrid-page-button {
        min-height: 34px !important;
        padding-inline: 12px !important;
        border-radius: 8pxx !important;
    }

    .mzya-account-page-header,
    .mzya-account-page-header--hero {
        margin-bottom: 12px !important;
    }

    .mzya-account-title,
    .mzya-dashboard-header h1,
    .mzya-dashboard-page h1 {
        color: var(--mzya-text-strong) !important;
        letter-spacing: -0.02em !important;
    }

    /* PDP/action controls should share the same mobile rhythm. */
    .mzya-pdp-cta {
        gap: 8px !important;
    }

    .mzya-pdp-qty {
        min-height: var(--mzya-button-height-mobile) !important;
        border-color: rgba(45, 88, 147, 0.18) !important;
        border-radius: var(--mzya-radius-xs) !important;
        box-shadow: none !important;
    }

    .mzya-pdp-cart-btn,
    .mzya-pdp-buy-btn {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Remove heavy nested looks on small screens. */
    :where(.mzya-account-content, .mzya-account-page, .mzya-rma-page, .mzya-rma-create-page)
        :where(.border, [class*="border-"]) {
        border-color: rgba(45, 88, 147, 0.12) !important;
    }
}

/* ---------- RTL polish ---------- */
[dir="rtl"] :where(.mzya-account-nav__link, .mzya-product-card__seller-overlay, .mzya-pdp-side-card) {
    text-align: right;
}

[dir="rtl"] :where(.mzya-account-nav__link-left, .mzya-account-nav__link-right) {
    direction: rtl;
}

/*
 * Phase UI-1B — Customer frontend unification: account controls, double borders, mobile rhythm.
 * This section is CSS-only and intentionally loaded after the old page CSS.
 */

/* Account/frontend cards added after the initial foundation pass. */
:where(
    .mzya-account-address-card,
    .mzya-account-table-card,
    .mzya-account-profile-card,
    .mzya-profile-overview-card,
    .mzya-profile-danger-zone,
    .mzya-dashboard-empty,
    .mzya-mobile-info-card,
    .mzya-mobile-record-card,
    .mzya-order-overview-card,
    .mzya-order-info-card,
    .mzya-order-progress-panel,
    .mzya-order-summary-hero,
    .mzya-chat-panel,
    .mzya-conversation-list,
    .mzya-communication-start-strip,
    .mzya-start-conversation-panel,
    .mzya-start-seller-card,
    .mzya-rma-card,
    .mzya-rma-form-shell,
    .mzya-rma-detail-shell,
    .mzya-rma-help,
    .mzya-review-card,
    .mzya-wishlist-item,
    .mzya-following-card,
    .mzya-notification-card
) {
    border: 1px solid var(--mzya-border-soft) !important;
    border-radius: var(--mzya-radius-lg) !important;
    background: var(--mzya-surface) !important;
    box-shadow: var(--mzya-shadow-sm) !important;
}

/* Shared account action button additions. */
:where(
    .mzya-orders-action,
    .mzya-start-store-link,
    .mzya-invoice-download,
    .mzya-account-danger-button
) {
    min-height: var(--mzya-button-height) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: var(--mzya-radius-xs) !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
    text-decoration: none !important;
}

.mzya-orders-action,
.mzya-start-store-link,
.mzya-invoice-download {
    border: 1px solid rgba(45, 88, 147, 0.22) !important;
    background: #ffffff !important;
    color: var(--mzya-blue) !important;
    box-shadow: var(--mzya-shadow-xs) !important;
}

.mzya-account-danger-button {
    border: 1px solid var(--mzya-rust) !important;
    background: var(--mzya-rust) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(184, 91, 52, 0.16) !important;
}

/* Pills/statuses use one visual grammar. */
:where(
    .mzya-account-pill,
    .mzya-status-pill,
    .mzya-order-status-pill,
    .mzya-orders-status,
    .mzya-rma-id-chip,
    .mzya-rma-order-chip,
    .mzya-rma-status-pill,
    .mzya-address-card__badge
) {
    border-radius: 8pxx !important;
    font-weight: 850 !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
}

.mzya-rma-id-chip,
.mzya-rma-order-chip,
.mzya-account-pill {
    border: 1px solid rgba(228, 162, 36, 0.22) !important;
    background: rgba(228, 162, 36, 0.14) !important;
    color: #7a4b08 !important;
}

/* Form rows and field display blocks should be calm, not boxed twice. */
:where(
    .mzya-account-field-value,
    .mzya-rma-info-item,
    .mzya-order-summary-row,
    .mzya-order-info-card,
    .mzya-account-summary-card,
    .mzya-dashboard-order-row,
    .mzya-conversation-item,
    .mzya-chat-row
) {
    border-color: rgba(45, 88, 147, 0.10) !important;
}

@media (max-width: 767px) {
    /* Keep account pages aligned and prevent inherited max-md margins from making screens feel squeezed. */
    .mzya-account-content,
    .mzya-account-page,
    .mzya-dashboard-page,
    .mzya-orders-page,
    .mzya-rma-page,
    .mzya-rma-create-page,
    .mzya-rma-view-page,
    .mzya-addresses-page {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        margin-inline: 10px !important;
        padding-inline: 0 !important;
    }

    .mzya-account-page-header {
        gap: 10px !important;
        align-items: flex-start !important;
    }

    .mzya-account-back {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        place-items: center !important;
        border: 1px solid rgba(45, 88, 147, 0.14) !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        color: var(--mzya-blue) !important;
        box-shadow: var(--mzya-shadow-xs) !important;
    }

    .mzya-account-title {
        font-size: 22px !important;
        line-height: 1.12 !important;
        font-weight: 700 !important;
    }

    .mzya-account-subtitle {
        margin-top: 3px !important;
        color: var(--mzya-muted) !important;
        font-size: 12.5px !important;
        line-height: 1.45 !important;
    }

    /* Account navigation becomes a clean wrapped control, not a horizontal scrolling rail. */
    .mzya-account-nav.panel-side,
    .mzya-account-nav {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 12px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .mzya-account-nav__hero,
    .mzya-account-nav__section-title,
    .mzya-account-nav__arrow,
    .mzya-account-nav__badge:empty {
        display: none !important;
    }

    .mzya-account-nav__list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .mzya-account-nav__link {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 40px !important;
        padding: 9px 10px !important;
        border: 1px solid rgba(45, 88, 147, 0.16) !important;
        border-radius: 8pxx !important;
        background: #ffffff !important;
        color: var(--mzya-blue-dark) !important;
        box-shadow: 0 8px 16px rgba(15, 37, 68, 0.045) !important;
        overflow: hidden !important;
    }

    .mzya-account-nav__link-left,
    .mzya-account-nav__link-right {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .mzya-account-nav__link.is-active {
        border-color: var(--mzya-blue) !important;
        background: var(--mzya-blue) !important;
        color: #ffffff !important;
    }

    .mzya-account-nav__link.is-active * {
        color: #ffffff !important;
    }

    .mzya-account-nav__icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 18px !important;
        min-width: 18px !important;
        height: 18px !important;
        font-size: 15px !important;
    }

    .mzya-account-nav__label {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 12px !important;
        font-weight: 500 !important;
    }

    /* Outer cards own the border; child wrappers must not create a second card border. */
    .mzya-account-datagrid-card,
    .mzya-rma-datagrid-card,
    .mzya-orders-list-card,
    .mzya-orders-mobile-list-card,
    .mzya-rma-order-card,
    .mzya-rma-form-shell,
    .mzya-chat-panel,
    .mzya-conversation-list {
        padding: 10px !important;
        border: 1px solid var(--mzya-border-soft) !important;
        border-radius: var(--mzya-radius-lg) !important;
        background: #ffffff !important;
        box-shadow: 0 8px 22px rgba(15, 37, 68, 0.055) !important;
        overflow: hidden !important;
    }

    .mzya-account-datagrid-card > div,
    .mzya-rma-datagrid-card > div,
    .mzya-orders-list-card > div,
    .mzya-rma-order-card > div,
    .mzya-rma-form-shell > div,
    .mzya-chat-panel > div,
    .mzya-conversation-list > div {
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .mzya-account-datagrid-card .mzya-datagrid-toolbar,
    .mzya-rma-datagrid-card .mzya-datagrid-toolbar,
    .mzya-account-datagrid-card [class*="toolbar"],
    .mzya-rma-datagrid-card [class*="toolbar"] {
        margin: 0 0 10px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .mzya-account-datagrid-card .mzya-datagrid-footer,
    .mzya-rma-datagrid-card .mzya-datagrid-footer,
    .mzya-account-datagrid-card [class*="footer"],
    .mzya-rma-datagrid-card [class*="footer"] {
        margin-top: 10px !important;
        padding: 8px 10px !important;
        border: 0 !important;
        border-radius: var(--mzya-radius-xs) !important;
        background: var(--mzya-surface-soft) !important;
        box-shadow: none !important;
    }

    /* Orders already have a mobile card template; make it the reference style. */
    .mzya-orders-mobile-list-card {
        display: block !important;
    }

    .mzya-orders-mobile-list-card .mzya-order-mobile-card {
        display: block !important;
        width: 100% !important;
        padding: 14px !important;
        border: 1px solid rgba(45, 88, 147, 0.12) !important;
        border-radius: var(--mzya-radius-lg) !important;
        background: #ffffff !important;
        color: var(--mzya-text) !important;
        box-shadow: none !important;
        text-decoration: none !important;
    }

    .mzya-orders-mobile-list-card .mzya-order-mobile-card + .mzya-order-mobile-card {
        margin-top: 10px !important;
    }

    .mzya-orders-mobile-list-card .mzya-order-mobile-card__top {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    .mzya-orders-mobile-list-card .mzya-order-mobile-card__top > div {
        min-width: 0 !important;
    }

    .mzya-orders-mobile-list-card .mzya-order-mobile-card__label,
    .mzya-orders-mobile-list-card .mzya-order-mobile-card__meta span {
        color: var(--mzya-muted) !important;
        font-size: 11px !important;
        font-weight: 800 !important;
    }

    .mzya-orders-mobile-list-card .mzya-orders-order-ref {
        display: block !important;
        margin-top: 3px !important;
        color: var(--mzya-blue-dark) !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        overflow-wrap: anywhere !important;
    }

    .mzya-orders-mobile-list-card .mzya-order-mobile-card__meta {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-top: 12px !important;
        padding: 10px !important;
        border: 0 !important;
        border-radius: var(--mzya-radius-xs) !important;
        background: var(--mzya-surface-soft) !important;
    }

    .mzya-orders-mobile-list-card .mzya-order-mobile-card__meta strong {
        display: block !important;
        margin-top: 3px !important;
        color: var(--mzya-text-strong) !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
    }

    .mzya-orders-mobile-list-card .mzya-order-mobile-card__footer {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-top: 12px !important;
        padding: 10px 12px !important;
        border: 1px solid rgba(45, 88, 147, 0.12) !important;
        border-radius: var(--mzya-radius-xs) !important;
        background: rgba(45, 88, 147, 0.06) !important;
        color: var(--mzya-blue) !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
    }

    .mzya-orders-status,
    .mzya-orders-status span,
    .mzya-rma-status-pill,
    .mzya-rma-status-pill span {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 24px !important;
        padding: 5px 9px !important;
        border-radius: 8pxx !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
    }

    /* RMA tables remain functional but stop looking like raw desktop tables. Real mobile cards come in the next phase. */
    .mzya-rma-page .mzya-rma-table-shell,
    .mzya-rma-create-page .mzya-rma-table-shell,
    .mzya-rma-page .mzya-rma-modern-table-wrap,
    .mzya-rma-create-page .mzya-rma-modern-table-wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: var(--mzya-radius-xs) !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .mzya-rma-modern-table {
        min-width: 600px !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        overflow: hidden !important;
        border: 1px solid rgba(45, 88, 147, 0.10) !important;
        border-radius: var(--mzya-radius-xs) !important;
        background: #ffffff !important;
    }

    .mzya-rma-modern-table thead th {
        background: var(--mzya-surface-soft) !important;
        color: var(--mzya-blue-dark) !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        border-bottom: 1px solid rgba(45, 88, 147, 0.10) !important;
    }

    .mzya-rma-modern-table tbody td {
        background: #ffffff !important;
        border-bottom: 1px solid rgba(45, 88, 147, 0.08) !important;
        color: var(--mzya-text) !important;
    }

    .mzya-rma-modern-table tbody tr:last-child td {
        border-bottom: 0 !important;
    }

    .mzya-rma-hero-note,
    .mzya-rma-step,
    .mzya-rma-help,
    .mzya-start-conversation-limits,
    .mzya-start-message-privacy,
    .mzya-mobile-info-card {
        border: 1px solid rgba(45, 88, 147, 0.10) !important;
        border-radius: var(--mzya-radius-lg) !important;
        background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%) !important;
        box-shadow: none !important;
    }

    .mzya-rma-step__number,
    .mzya-account-summary-card__icon,
    .mzya-communication-start-strip__icon,
    .mzya-dashboard-welcome-strip__avatar,
    .mzya-profile-avatar {
        box-shadow: none !important;
    }

    /* Controls inside account pages: one border, one height, one radius. */
    .mzya-account-content :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
    .mzya-account-page :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
    .mzya-rma-page :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
    .mzya-rma-create-page :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
        min-height: var(--mzya-control-height-mobile) !important;
        border: 1px solid var(--mzya-border) !important;
        border-radius: var(--mzya-radius-xs) !important;
        background: #ffffff !important;
        box-shadow: none !important;
    }

    .mzya-account-content :where(input[type="checkbox"], input[type="radio"]),
    .mzya-account-page :where(input[type="checkbox"], input[type="radio"]) {
        border-color: rgba(45, 88, 147, 0.30) !important;
        box-shadow: none !important;
    }

    /* Kill the most common double-border visual without removing functional layout. */
    .mzya-account-content :where(.ring-1, .ring, [class*="ring-"]),
    .mzya-account-page :where(.ring-1, .ring, [class*="ring-"]) {
        --tw-ring-color: rgba(45, 88, 147, 0.10) !important;
    }

    .mzya-account-content :where([class*="shadow"], .shadow, .shadow-sm, .shadow-md, .shadow-lg),
    .mzya-account-page :where([class*="shadow"], .shadow, .shadow-sm, .shadow-md, .shadow-lg) {
        box-shadow: none !important;
    }

    .mzya-account-content > :where(.mzya-account-card, .mzya-account-form-card, .mzya-account-datagrid-card, .mzya-dashboard-panel),
    .mzya-account-page > :where(.mzya-account-card, .mzya-account-form-card, .mzya-account-datagrid-card, .mzya-dashboard-panel) {
        box-shadow: 0 8px 22px rgba(15, 37, 68, 0.055) !important;
    }
}

@media (min-width: 768px) {
    /* Desktop gets the same visual language, but no mobile layout changes. */
    .mzya-account-datagrid-card > div,
    .mzya-rma-datagrid-card > div {
        box-shadow: none !important;
    }
}

/*
 * Phase UI-1C — Unified frontend control system.
 * Scope: visual/UI normalization only. No logic, no JS, no controller changes.
 * Purpose: make buttons, inputs, selects, tabs, badges, toolbars, and option chips share one Mzya grammar.
 */

/* ---------- Global frontend control tokens ---------- */
:root {
    --mzya-control-border: rgba(45, 88, 147, 0.18);
    --mzya-control-border-hover: rgba(45, 88, 147, 0.34);
    --mzya-control-border-focus: rgba(45, 88, 147, 0.58);
    --mzya-control-bg: #ffffff;
    --mzya-control-bg-soft: #f7faff;
    --mzya-control-placeholder: #98a6b6;
    --mzya-control-ring: 0 0 0 3px rgba(45, 88, 147, 0.10);
    --mzya-control-shadow: 0 8px 18px rgba(15, 37, 68, 0.045);
    --mzya-control-shadow-hover: 0 10px 22px rgba(15, 37, 68, 0.065);
}

/* ---------- Button system: one shape, one rhythm ---------- */
main :where(
    .primary-button,
    .secondary-button,
    .mzya-account-primary-button,
    .mzya-account-secondary-button,
    .mzya-account-danger-button,
    .mzya-account-danger-outline-button,
    .mzya-product-card__cta,
    .mzya-product-list-card__cta,
    .mzya-pdp-cart-btn,
    .mzya-pdp-buy-btn,
    .mzya-pdp-side-seller-action,
    .mzya-rma-action-button,
    .mzya-new-conversation-button,
    .mzya-communication-start-strip__button,
    .mzya-start-store-link,
    .mzya-help-button,
    .mzya-store-follow-button,
    .mzya-carousel-view-all,
    .mzya-catalog-filter-btn,
    .mzya-datagrid-filter-toggle,
    .mzya-datagrid-page-button
) {
    min-height: var(--mzya-button-height) !important;
    border-radius: var(--mzya-radius-xs) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 1.1 !important;
    text-decoration: none !important;
}

main :where(.primary-button, .mzya-ui-primary, .mzya-account-primary-button, .mzya-product-card__cta, .mzya-product-list-card__cta, .mzya-pdp-buy-btn, .mzya-rma-action-button, .mzya-new-conversation-button, .mzya-communication-start-strip__button) {
    color: #ffffff !important;
}

main :where(.primary-button, .mzya-ui-primary, .mzya-account-primary-button, .mzya-product-card__cta, .mzya-product-list-card__cta, .mzya-pdp-buy-btn, .mzya-rma-action-button, .mzya-new-conversation-button, .mzya-communication-start-strip__button):hover:not(:disabled) {
    border-color: var(--mzya-blue-dark) !important;
    background: var(--mzya-blue-dark) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 28px rgba(23, 61, 110, 0.22) !important;
}

main :where(.secondary-button, .mzya-ui-secondary, .mzya-account-secondary-button, .mzya-account-danger-outline-button, .mzya-pdp-cart-btn, .mzya-pdp-side-seller-action, .mzya-start-store-link, .mzya-help-button, .mzya-carousel-view-all, .mzya-catalog-filter-btn, .mzya-datagrid-filter-toggle, .mzya-datagrid-page-button) {
    border: 1px solid var(--mzya-control-border) !important;
    background: #ffffff !important;
    color: var(--mzya-blue) !important;
    box-shadow: var(--mzya-control-shadow) !important;
}

main :where(.secondary-button, .mzya-ui-secondary, .mzya-account-secondary-button, .mzya-account-danger-outline-button, .mzya-pdp-cart-btn, .mzya-pdp-side-seller-action, .mzya-start-store-link, .mzya-help-button, .mzya-carousel-view-all, .mzya-catalog-filter-btn, .mzya-datagrid-filter-toggle, .mzya-datagrid-page-button):hover:not(:disabled) {
    border-color: var(--mzya-control-border-hover) !important;
    background: var(--mzya-control-bg-soft) !important;
    color: var(--mzya-blue-dark) !important;
    box-shadow: var(--mzya-control-shadow-hover) !important;
}

main :where(.mzya-account-danger-button, .mzya-ui-danger) {
    border: 1px solid var(--mzya-rust) !important;
    background: var(--mzya-rust) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(184, 91, 52, 0.16) !important;
}

main :where(.mzya-account-danger-outline-button) {
    border-color: rgba(184, 91, 52, 0.32) !important;
    color: var(--mzya-rust) !important;
}

/* Icon-only controls must be compact and not inherit full button width/height. */
main :where(.mz-icon-button, .mzya-product-card__icon-btn, .mzya-pdp-utility-btn, .mzya-account-back, .mzya-address-card__menu {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(45, 88, 147, 0.14) !important;
    border-radius: 8pxx !important;
    background: rgba(255, 255, 255, 0.96) !important;
    color: var(--mzya-text) !important;
    box-shadow: var(--mzya-control-shadow) !important;
}

/* ---------- Inputs, selects, textareas ---------- */
main :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="color"]),
    select,
    textarea,
    .mzya-search-input,
    .mzya-mobile-search-input,
    .mzya-store-login-input,
    .mzya-start-message-textarea,
    .mzya-datagrid-page-input
) {
    min-height: var(--mzya-control-height) !important;
    border: 1px solid var(--mzya-control-border) !important;
    border-radius: var(--mzya-radius-xs) !important;
    background-color: var(--mzya-control-bg) !important;
    color: var(--mzya-text) !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease !important;
}

main :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="color"]),
    select,
    textarea,
    .mzya-search-input,
    .mzya-mobile-search-input,
    .mzya-store-login-input,
    .mzya-start-message-textarea,
    .mzya-datagrid-page-input
):hover:not(:disabled) {
    border-color: var(--mzya-control-border-hover) !important;
}

main :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="color"]),
    select,
    textarea,
    .mzya-search-input,
    .mzya-mobile-search-input,
    .mzya-store-login-input,
    .mzya-start-message-textarea,
    .mzya-datagrid-page-input
):focus {
    border-color: var(--mzya-control-border-focus) !important;
    box-shadow: var(--mzya-control-ring) !important;
}

main :where(input, textarea)::placeholder {
    color: var(--mzya-control-placeholder) !important;
}

main :where(select) {
    cursor: pointer !important;
}

main :where(textarea) {
    min-height: 96px !important;
    line-height: 1.5 !important;
    resize: vertical;
}

/* Checkbox/radio visual rhythm: keep native logic, only normalize size/accent. */
main :where(input[type="checkbox"], input[type="radio"]) {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    accent-color: var(--mzya-blue) !important;
    border-color: var(--mzya-control-border) !important;
    cursor: pointer !important;
}

main :where(label, .label) {
    color: var(--mzya-text-strong);
}

/* ---------- Select-like dropdown toggles ---------- */
main :where(
    .mzya-v4-menu-select,
    .mzya-store-mobile-select,
    .mzya-store-drawer-selects select,
    .cat-hamburger-dropdown,
    [class*="dropdown-toggle"]
) {
    min-height: var(--mzya-control-height) !important;
    color: var(--mzya-text) !important;
    box-shadow: var(--mzya-control-shadow) !important;
}

main :where(.mzya-topbar-dropdown-toggle, .mzya-store-native-dropdown-toggle, .mzya-v4-menu-select, .mzya-store-mobile-select, .cat-hamburger-dropdown, [class*="dropdown-toggle"]):hover {
    border-color: var(--mzya-control-border-hover) !important;
    background: var(--mzya-control-bg-soft) !important;
}

/* ---------- Tabs, segmented controls, and option chips ---------- */
main :where(
    .mzya-account-tabs,
    .mzya-order-tabs,
    .mzya-store-tabs,
    .mzya-store-mobile-menu-pills,
    .mzya-tab-products-showcase,
    .mzya-pdp-chip-options,
    .mzya-pdp-dropdown-chip-options
) {
    border: 1px solid rgba(45, 88, 147, 0.12) !important;
    border-radius: var(--mzya-radius-lg) !important;
    background: rgba(247, 250, 252, 0.85) !important;
    box-shadow: none !important;
}

main :where(
    .mzya-account-tabs a,
    .mzya-account-tabs button,
    .mzya-order-tabs a,
    .mzya-order-tabs button,
    .mzya-store-tabs a,
    .mzya-store-tabs button,
    .mzya-store-mobile-menu-pills a,
    .mzya-store-mobile-menu-pills button,
    .mzya-content-tab-head button,
    .mzya-tab-products-showcase button,
    .mzya-pdp-chip-options button,
    .mzya-pdp-dropdown-chip-options button,
    .seller-tab-button
) {
    min-height: 38px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

/* Bagisto configurable options: normalize selected state without changing Vue behavior. */
main :where([class*="is-selected"], .is-selected) {
    border-color: var(--mzya-blue) !important;
}

/* ---------- Badges and status labels ---------- */
main :where(
    .mzya-pill,
    .mzya-store-pill,
    .mzya-account-pill,
    .mzya-status-pill,
    .mzya-order-status-pill,
    .mzya-orders-status,
    .mzya-rma-status-pill,
    .mzya-product-card__badge,
    .mzya-product-card__rating-pill,
    .mz-section-badge,
    .mz-default-badge,
    .mz-cart-pill,
    .label-completed,
    .label-pending,
    .label-closed,
    .label-processing,
    .label-canceled,
    .label-info
) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    min-height: 24px !important;
    padding: 5px 9px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

main :where(.label-completed, .mzya-status-pill--success) {
    border: 1px solid rgba(22, 163, 74, 0.18) !important;
    background: rgba(22, 163, 74, 0.12) !important;
    color: #166534 !important;
}

main :where(.label-pending, .label-processing, .mzya-status-pill--warning) {
    border: 1px solid rgba(228, 162, 36, 0.22) !important;
    background: rgba(228, 162, 36, 0.16) !important;
    color: #7a4b08 !important;
}

main :where(.label-canceled, .mzya-status-pill--danger) {
    border: 1px solid rgba(184, 91, 52, 0.22) !important;
    background: rgba(184, 91, 52, 0.12) !important;
    color: #8f3419 !important;
}

main :where(.label-closed, .label-info, .mzya-status-pill--info) {
    border: 1px solid rgba(45, 88, 147, 0.18) !important;
    background: rgba(45, 88, 147, 0.10) !important;
    color: var(--mzya-blue-dark) !important;
}

/* ---------- Datagrid/search/filter controls ---------- */
main :where(.mzya-datagrid-toolbar, .mzya-catalog-toolbar, .mzya-account-datagrid-card [class*="toolbar"], .mzya-rma-datagrid-card [class*="toolbar"]) {
    gap: 8px !important;
}

main :where(.mzya-datagrid-page-input) {
    max-width: 72px !important;
    min-height: 36px !important;
    text-align: center !important;
    font-weight: 850 !important;
}

main :where(.mzya-datagrid-filter-toggle.is-active, .mzya-catalog-filter-btn.is-active) {
    border-color: var(--mzya-blue) !important;
    background: rgba(45, 88, 147, 0.10) !important;
    color: var(--mzya-blue-dark) !important;
}

/* ---------- Card anti-double-border rule ---------- */
main :where(
    .mzya-account-card,
    .mzya-account-form-card,
    .mzya-account-table-card,
    .mzya-account-profile-card,
    .mzya-dashboard-panel,
    .mzya-orders-list-card,
    .mzya-order-overview-card,
    .mzya-order-info-card,
    .mzya-rma-card,
    .mzya-rma-form-shell,
    .mzya-rma-detail-shell,
    .mzya-chat-panel,
    .mzya-conversation-list,
    .mzya-pdp-side-card,
    .mzya-pdp-plain-section,
    .mzya-store-card,
    .mzya-products-panel-card
) :where(.rounded-xl.border, .rounded-2xl.border, .rounded-lg.border) {
    border-color: rgba(45, 88, 147, 0.10) !important;
    box-shadow: none !important;
}

/* ---------- Mobile refinements for the unified controls ---------- */
@media (max-width: 767px) {
    main :where(
        .primary-button,
        .secondary-button,
        .mzya-account-primary-button,
        .mzya-account-secondary-button,
        .mzya-account-danger-button,
        .mzya-account-danger-outline-button,
        .mzya-product-card__cta,
        .mzya-product-list-card__cta,
        .mzya-pdp-cart-btn,
        .mzya-pdp-buy-btn,
        .mzya-pdp-side-seller-action,
        .mzya-rma-action-button,
        .mzya-new-conversation-button,
        .mzya-communication-start-strip__button,
        .mzya-start-store-link,
        .mzya-help-button,
        .mzya-store-follow-button,
        .mzya-carousel-view-all,
        .mzya-catalog-filter-btn,
        .mzya-datagrid-filter-toggle,
        .mzya-datagrid-page-button
    ) {
        min-height: var(--mzya-button-height-mobile) !important;
        border-radius: var(--mzya-radius-xs) !important;
        font-size: 12.5px !important;
    }

    main :where(
        input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="color"]),
        select,
        textarea,
        .mzya-search-input,
        .mzya-mobile-search-input,
        .mzya-store-login-input,
        .mzya-start-message-textarea,
        .mzya-datagrid-page-input,
        .mzya-topbar-dropdown-toggle,
        .mzya-store-native-dropdown-toggle,
        .mzya-v4-menu-select,
        .mzya-store-mobile-select,
        .cat-hamburger-dropdown
    ) {
        min-height: var(--mzya-control-height-mobile) !important;
        border-radius: var(--mzya-radius-xs) !important;
        font-size: 12.5px !important;
    }

    main :where(.mzya-account-tabs, .mzya-order-tabs, .mzya-store-tabs, .mzya-store-mobile-menu-pills, .mzya-content-tab-head, .mzya-tab-products-showcase) {
        padding: 4px !important;
        overflow-x: visible !important;
    }

    main :where(.mzya-account-tabs a, .mzya-account-tabs button, .mzya-order-tabs a, .mzya-order-tabs button, .mzya-store-tabs a, .mzya-store-tabs button, .seller-tab-button) {
        min-height: 36px !important;
        padding-inline: 10px !important;
        font-size: 12px !important;
    }

    main :where(.mzya-search-input, .mzya-mobile-search-input) {
        box-shadow: none !important;
    }

    main :where(.mzya-product-card__icon-btn, .mzya-pdp-utility-btn, .mz-icon-button) {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
    }

    main :where(.mzya-datagrid-toolbar, .mzya-catalog-toolbar) {
        align-items: stretch !important;
    }
}

/* ---------- RTL safety for controls ---------- */
[dir="rtl"] main :where(input, textarea, select) {
    text-align: right;
}

[dir="rtl"] main :where(.mzya-search-input, .mzya-mobile-search-input) {
    text-align: right;
}

[dir="rtl"] main :where(.primary-button, .secondary-button, .mzya-account-primary-button, .mzya-account-secondary-button, .mzya-pdp-cart-btn, .mzya-pdp-buy-btn) {
    direction: rtl;
}


/*
 * Phase UI-2A — Frontend mobile account cards.
 * Scope: customer/frontend visual structure only. No controller, route, or datagrid data logic changes.
 * Purpose: replace mobile RMA table feel with real cards and continue unifying account controls.
 */
@media (max-width: 767px) {
    /* Account navigation: keep it clean and readable without horizontal rail. */
    .mzya-account-nav__list {
        gap: 7px !important;
    }

    .mzya-account-nav__link {
        min-height: 38px !important;
        padding: 8px 9px !important;
    }

    .mzya-account-nav__label {
        font-size: 11.5px !important;
    }

    .mzya-account-nav__badge {
        min-width: 19px !important;
        min-height: 19px !important;
        padding: 3px 6px !important;
        font-size: 10px !important;
    }

    /* Datagrid chrome: one card only, no nested scrollbars when mobile cards are used. */
    .mzya-orders-mobile-list-card,
    .mzya-rma-datagrid-card,
    .mzya-rma-order-card {
        padding: 10px !important;
        overflow: visible !important;
    }

    .mzya-orders-mobile-list-card :where(.overflow-x-auto, [class*="overflow-x"]),
    .mzya-rma-datagrid-card :where(.overflow-x-auto, [class*="overflow-x"]),
    .mzya-rma-order-card :where(.overflow-x-auto, [class*="overflow-x"]) {
        max-width: 100% !important;
        overflow-x: visible !important;
    }

    .mzya-orders-mobile-list-card :where(table),
    .mzya-rma-datagrid-card :where(table.max-md\:hidden),
    .mzya-rma-order-card :where(table.max-md\:hidden) {
        display: none !important;
    }

    /* Orders mobile cards: less table-like, more commerce-app card. */
    .mzya-orders-mobile-list-card .mzya-order-mobile-card {
        padding: 13px !important;
        border-color: rgba(45, 88, 147, 0.11) !important;
        background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
        box-shadow: none !important;
    }

    .mzya-orders-mobile-list-card .mzya-order-mobile-card__meta {
        grid-template-columns: 1fr 1fr !important;
        background: #f6f9fc !important;
    }

    .mzya-orders-mobile-list-card .mzya-order-mobile-card__footer {
        border: 0 !important;
        background: rgba(45, 88, 147, 0.07) !important;
        color: var(--mzya-blue-dark) !important;
        box-shadow: none !important;
    }

    /* RMA mobile cards. */
    .mzya-rma-mobile-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .mzya-rma-mobile-card {
        display: block !important;
        width: 100% !important;
        padding: 13px !important;
        border: 1px solid rgba(45, 88, 147, 0.12) !important;
        border-radius: var(--mzya-radius-lg) !important;
        background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
        color: var(--mzya-text) !important;
        text-decoration: none !important;
        box-shadow: none !important;
    }

    .mzya-rma-mobile-card__top {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    .mzya-rma-mobile-card__label,
    .mzya-rma-mobile-card__meta span {
        display: block !important;
        color: var(--mzya-muted) !important;
        font-size: 11px !important;
        font-weight: 850 !important;
        line-height: 1.2 !important;
    }

    .mzya-rma-mobile-card__value,
    .mzya-rma-mobile-card__meta strong {
        display: block !important;
        margin-top: 4px !important;
        color: var(--mzya-text-strong) !important;
        font-size: 13px !important;
        font-weight: 950 !important;
        line-height: 1.25 !important;
        overflow-wrap: anywhere !important;
    }

    .mzya-rma-mobile-card__meta {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-top: 12px !important;
        padding: 10px !important;
        border: 0 !important;
        border-radius: var(--mzya-radius-xs) !important;
        background: var(--mzya-surface-soft) !important;
    }

    .mzya-rma-mobile-card__meta-wide {
        grid-column: 1 / -1 !important;
    }

    .mzya-rma-mobile-card__footer {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        margin-top: 12px !important;
        padding: 10px 12px !important;
        border: 0 !important;
        border-radius: var(--mzya-radius-xs) !important;
        background: rgba(45, 88, 147, 0.07) !important;
        color: var(--mzya-blue-dark) !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
    }

    .mzya-rma-mobile-card--selectable .mzya-rma-mobile-card__footer {
        background: var(--mzya-blue) !important;
        color: #ffffff !important;
    }

    .mzya-rma-mobile-card--selectable .mzya-rma-mobile-card__footer * {
        color: #ffffff !important;
    }

    /* Table shells stay for desktop only; mobile should not show horizontal-scroll table UI. */
    .mzya-rma-table-shell.max-md\:hidden,
    .mzya-rma-modern-table-wrap.max-md\:hidden {
        display: none !important;
    }

    .mzya-rma-empty-inline {
        padding: 18px !important;
        border: 1px solid rgba(45, 88, 147, 0.10) !important;
        border-radius: var(--mzya-radius-lg) !important;
        background: #ffffff !important;
        text-align: center !important;
    }

    /* Footer/pagination controls inside datagrids should look like controls, not another card. */
    .mzya-rma-datagrid-card :where([class*="pagination"], [class*="footer"]),
    .mzya-rma-order-card :where([class*="pagination"], [class*="footer"]),
    .mzya-orders-mobile-list-card :where([class*="pagination"], [class*="footer"]) {
        max-width: 100% !important;
        overflow: visible !important;
    }
}


/*
 * Phase UI-2B — Fix mobile datagrid clipping and make Orders/RMA fully responsive.
 * Scope: frontend/customer pages only. UI-only; no checkout/product/seller logic.
 */
@media (max-width: 767px) {
    html,
    body,
    #app,
    main {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .mzya-account-content,
    .mzya-account-page,
    .mzya-orders-page,
    .mzya-rma-page,
    .mzya-rma-create-page {
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    .mzya-account-content :where(*),
    .mzya-account-page :where(*),
    .mzya-orders-page :where(*),
    .mzya-rma-page :where(*),
    .mzya-rma-create-page :where(*) {
        box-sizing: border-box;
    }

    .mzya-account-datagrid-card,
    .mzya-orders-list-card,
    .mzya-orders-mobile-list-card,
    .mzya-rma-datagrid-card,
    .mzya-rma-order-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .mzya-orders-mobile-list-card > *,
    .mzya-rma-datagrid-card > *,
    .mzya-rma-order-card > *,
    .mzya-orders-mobile-list-card :where([class*="datagrid"], [class*="Datagrid"], [data-grid-wrapper], section, div, form),
    .mzya-rma-datagrid-card :where([class*="datagrid"], [class*="Datagrid"], [data-grid-wrapper], section, div, form),
    .mzya-rma-order-card :where([class*="datagrid"], [class*="Datagrid"], [data-grid-wrapper], section, div, form) {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .mzya-orders-mobile-list-card :where(.overflow-x-auto, .overflow-auto, [class*="overflow-x"], [class*="min-w"], [style*="min-width"]),
    .mzya-rma-datagrid-card :where(.overflow-x-auto, .overflow-auto, [class*="overflow-x"], [class*="min-w"], [style*="min-width"]),
    .mzya-rma-order-card :where(.overflow-x-auto, .overflow-auto, [class*="overflow-x"], [class*="min-w"], [style*="min-width"]) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    .mzya-orders-mobile-list-card :where(table, thead, tbody, tr, th, td),
    .mzya-rma-datagrid-card :where(table, thead, tbody, tr, th, td),
    .mzya-rma-order-card :where(table, thead, tbody, tr, th, td) {
        max-width: 100% !important;
    }

    /* RMA now has real mobile cards. The desktop table must never create a mobile horizontal scrollbar. */
    .mzya-rma-table-shell.max-md\:hidden,
    .mzya-rma-table-shell.max-md\:hidden * {
        display: none !important;
    }

    .mzya-rma-mobile-list {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    .mzya-rma-mobile-card,
    .mzya-order-mobile-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .mzya-rma-mobile-card__top,
    .mzya-rma-mobile-card__meta,
    .mzya-rma-mobile-card__footer,
    .mzya-order-mobile-card__top,
    .mzya-order-mobile-card__meta,
    .mzya-order-mobile-card__footer {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .mzya-rma-mobile-card__top > *,
    .mzya-rma-mobile-card__meta > *,
    .mzya-order-mobile-card__top > *,
    .mzya-order-mobile-card__meta > * {
        min-width: 0 !important;
    }

    .mzya-rma-mobile-card__value,
    .mzya-rma-mobile-card__meta :where(strong, span),
    .mzya-order-mobile-card__meta :where(strong, span),
    .mzya-orders-order-ref,
    .mzya-rma-order-chip,
    .mzya-rma-id-chip {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        white-space: normal !important;
    }

    .mzya-rma-status-pill,
    .mzya-orders-status {
        max-width: 100% !important;
        white-space: normal !important;
    }

    .mzya-rma-mobile-card__footer,
    .mzya-order-mobile-card__footer,
    .mzya-rma-action-button,
    .mzya-orders-action {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Datagrid top/bottom controls must fit the card instead of forcing table width. */
    .mzya-orders-mobile-list-card :where(select, button, input, [role="button"]),
    .mzya-rma-datagrid-card :where(select, button, input, [role="button"]),
    .mzya-rma-order-card :where(select, button, input, [role="button"]) {
        max-width: 100% !important;
    }

    .mzya-orders-mobile-list-card :where([class*="toolbar"], [class*="pagination"], [class*="footer"]),
    .mzya-rma-datagrid-card :where([class*="toolbar"], [class*="pagination"], [class*="footer"]),
    .mzya-rma-order-card :where([class*="toolbar"], [class*="pagination"], [class*="footer"]) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .mzya-orders-mobile-list-card :where([class*="footer"]),
    .mzya-rma-datagrid-card :where([class*="footer"]),
    .mzya-rma-order-card :where([class*="footer"]) {
        border-radius: var(--mzya-radius-xs) !important;
    }

    .mzya-rma-create-page .mzya-rma-mobile-card__meta {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    @media (max-width: 380px) {
        .mzya-rma-mobile-card__meta,
        .mzya-rma-create-page .mzya-rma-mobile-card__meta,
        .mzya-order-mobile-card__meta {
            grid-template-columns: 1fr !important;
        }
    }
}

/*
 * Phase UI-2C — Compact mobile account datagrids.
 * Goal: remove double-card feeling, reduce wasted padding, and simplify toolbar/pagination chrome.
 * Scope: frontend/customer account Orders + RMA mobile views only. UI-only.
 */
@media (max-width: 767px) {
    .mzya-orders-page .mzya-account-page-header,
    .mzya-rma-page .mzya-account-page-header,
    .mzya-rma-create-page .mzya-account-page-header {
        margin-bottom: 10px !important;
    }

    .mzya-orders-page .mzya-account-title,
    .mzya-rma-page .mzya-account-title,
    .mzya-rma-create-page .mzya-account-title {
        font-size: 21px !important;
        line-height: 1.12 !important;
    }

    .mzya-orders-page .mzya-account-subtitle,
    .mzya-rma-page .mzya-account-subtitle,
    .mzya-rma-create-page .mzya-account-subtitle {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    .mzya-rma-steps {
        display: grid !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
    }

    .mzya-rma-step,
    .mzya-rma-hero-note {
        padding: 10px 12px !important;
        border: 1px solid rgba(45, 88, 147, 0.10) !important;
        border-radius: 6px !important;
        background: #ffffff !important;
        box-shadow: none !important;
    }

    .mzya-rma-step__number {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        font-size: 12px !important;
    }

    .mzya-rma-step__title,
    .mzya-account-section-title {
        font-size: 13px !important;
        line-height: 1.2 !important;
    }

    .mzya-rma-step__text {
        margin-top: 2px !important;
        font-size: 11.5px !important;
        line-height: 1.35 !important;
    }

    .mzya-orders-mobile-list-card,
    .mzya-rma-datagrid-card,
    .mzya-rma-order-card {
        padding: 8px !important;
        border: 1px solid rgba(45, 88, 147, 0.10) !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        box-shadow: none !important;
    }

    .mzya-rma-order-card > .border-b {
        margin: 0 0 8px !important;
        padding: 0 !important;
        border-bottom: 0 !important;
    }

    .mzya-orders-mobile-list-card .mzya-order-mobile-card,
    .mzya-rma-mobile-card {
        padding: 10px !important;
        border: 0 !important;
        border-radius: 13px !important;
        background: #ffffff !important;
        box-shadow: none !important;
    }

    .mzya-orders-mobile-list-card .mzya-order-mobile-card + .mzya-order-mobile-card,
    .mzya-rma-mobile-card + .mzya-rma-mobile-card {
        margin-top: 0 !important;
        border-top: 1px solid rgba(45, 88, 147, 0.10) !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }

    .mzya-order-mobile-card__top,
    .mzya-rma-mobile-card__top {
        gap: 8px !important;
    }

    .mzya-orders-mobile-list-card .mzya-order-mobile-card__label,
    .mzya-rma-mobile-card__label,
    .mzya-orders-mobile-list-card .mzya-order-mobile-card__meta span,
    .mzya-rma-mobile-card__meta span {
        font-size: 10.5px !important;
        line-height: 1.15 !important;
    }

    .mzya-orders-mobile-list-card .mzya-orders-order-ref,
    .mzya-rma-mobile-card__value,
    .mzya-rma-mobile-card__meta strong,
    .mzya-orders-mobile-list-card .mzya-order-mobile-card__meta strong {
        font-size: 12.5px !important;
        line-height: 1.2 !important;
    }

    .mzya-orders-mobile-list-card .mzya-order-mobile-card__meta,
    .mzya-rma-mobile-card__meta {
        gap: 6px !important;
        margin-top: 8px !important;
        padding: 8px !important;
        border: 0 !important;
        border-radius: 11px !important;
        background: #f7fafc !important;
    }

    .mzya-orders-mobile-list-card .mzya-order-mobile-card__footer,
    .mzya-rma-mobile-card__footer {
        min-height: 34px !important;
        margin-top: 8px !important;
        padding: 8px 10px !important;
        border: 0 !important;
        border-radius: 11px !important;
        background: rgba(45, 88, 147, 0.055) !important;
        box-shadow: none !important;
        font-size: 12px !important;
    }

    .mzya-rma-mobile-card--selectable .mzya-rma-mobile-card__footer {
        background: var(--mzya-blue) !important;
        color: #ffffff !important;
    }

    .mzya-orders-status,
    .mzya-rma-status-pill,
    .mzya-rma-status-pill span,
    .mzya-orders-status span {
        min-height: 22px !important;
        padding: 4px 7px !important;
        font-size: 10px !important;
        line-height: 1.05 !important;
    }

    /* Toolbar: one calm row, no boxed wrappers around boxed controls. */
    .mzya-orders-mobile-list-card :where([class*="toolbar"], [class*="header"]),
    .mzya-rma-datagrid-card :where([class*="toolbar"], [class*="header"]),
    .mzya-rma-order-card :where([class*="toolbar"], [class*="header"]) {
        gap: 6px !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .mzya-orders-mobile-list-card :where(select, input, button, [role="button"]),
    .mzya-rma-datagrid-card :where(select, input, button, [role="button"]),
    .mzya-rma-order-card :where(select, input, button, [role="button"]) {
        min-height: 34px !important;
        border-radius: 11px !important;
        font-size: 11.5px !important;
    }

    .mzya-orders-mobile-list-card :where(select),
    .mzya-rma-datagrid-card :where(select),
    .mzya-rma-order-card :where(select) {
        width: auto !important;
        min-width: 62px !important;
        padding-inline: 10px !important;
    }

    .mzya-orders-mobile-list-card .mzya-datagrid-filter-toggle,
    .mzya-rma-datagrid-card .mzya-datagrid-filter-toggle,
    .mzya-rma-order-card .mzya-datagrid-filter-toggle {
        width: auto !important;
        min-width: 34px !important;
        padding-inline: 10px !important;
        white-space: nowrap !important;
    }

    /* Pagination: compact controls instead of a second card with nested labels. */
    .mzya-orders-mobile-list-card :where([class*="pagination"], [class*="footer"]),
    .mzya-rma-datagrid-card :where([class*="pagination"], [class*="footer"]),
    .mzya-rma-order-card :where([class*="pagination"], [class*="footer"]) {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        margin-top: 8px !important;
        padding: 8px !important;
        border: 0 !important;
        border-radius: 12px !important;
        background: #f7fafc !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .mzya-orders-mobile-list-card :where([class*="pagination"], [class*="footer"]) :where(button, a, input, select),
    .mzya-rma-datagrid-card :where([class*="pagination"], [class*="footer"]) :where(button, a, input, select),
    .mzya-rma-order-card :where([class*="pagination"], [class*="footer"]) :where(button, a, input, select) {
        min-width: 34px !important;
        width: auto !important;
        min-height: 32px !important;
        height: 32px !important;
        padding: 0 9px !important;
        border-radius: 10px !important;
        box-shadow: none !important;
    }

    .mzya-orders-mobile-list-card :where([class*="pagination"], [class*="footer"]) :where(label, .mzya-datagrid-page-label--hidden),
    .mzya-rma-datagrid-card :where([class*="pagination"], [class*="footer"]) :where(label, .mzya-datagrid-page-label--hidden),
    .mzya-rma-order-card :where([class*="pagination"], [class*="footer"]) :where(label, .mzya-datagrid-page-label--hidden) {
        display: none !important;
    }

    .mzya-orders-mobile-list-card :where([class*="pagination"], [class*="footer"]) :where(p, span, div),
    .mzya-rma-datagrid-card :where([class*="pagination"], [class*="footer"]) :where(p, span, div),
    .mzya-rma-order-card :where([class*="pagination"], [class*="footer"]) :where(p, span, div) {
        font-size: 11px !important;
        line-height: 1.2 !important;
    }

    .mzya-orders-mobile-list-card :where([class*="pagination"], [class*="footer"]) [aria-current="page"],
    .mzya-rma-datagrid-card :where([class*="pagination"], [class*="footer"]) [aria-current="page"],
    .mzya-rma-order-card :where([class*="pagination"], [class*="footer"]) [aria-current="page"] {
        background: var(--mzya-blue) !important;
        color: #ffffff !important;
        border-color: var(--mzya-blue) !important;
    }

    .mzya-account-nav__list {
        gap: 6px !important;
    }

    .mzya-account-nav__link {
        min-height: 36px !important;
        padding: 8px 9px !important;
        box-shadow: none !important;
    }
}


/*
 * Phase UI-2D — Compact customer Orders/RMA mobile cards + control clipping guard.
 * Goal: flatter launch-ready mobile UI, no status/control escaping the card, less nested chrome.
 * Scope: frontend/customer Orders + RMA only. UI-only.
 */
@media (max-width: 767px) {
    .mzya-orders-page,
    .mzya-rma-page,
    .mzya-rma-create-page {
        overflow-x: hidden !important;
    }

    .mzya-orders-mobile-list-card,
    .mzya-rma-datagrid-card,
    .mzya-rma-order-card {
        padding: 6px !important;
        border: 1px solid rgba(45, 88, 147, 0.08) !important;
        border-radius: 6px !important;
        background: #ffffff !important;
        box-shadow: none !important;
    }

    .mzya-orders-mobile-list-card .mzya-order-mobile-card,
    .mzya-rma-mobile-card {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 9px 4px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    .mzya-orders-mobile-list-card .mzya-order-mobile-card:first-child,
    .mzya-rma-mobile-card:first-child {
        padding-top: 4px !important;
    }

    .mzya-orders-mobile-list-card .mzya-order-mobile-card + .mzya-order-mobile-card,
    .mzya-rma-mobile-card + .mzya-rma-mobile-card {
        margin-top: 0 !important;
        border-top: 1px solid rgba(45, 88, 147, 0.08) !important;
    }

    .mzya-order-mobile-card__top,
    .mzya-rma-mobile-card__top {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 5px !important;
        align-items: start !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .mzya-order-mobile-card__top > *,
    .mzya-rma-mobile-card__top > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .mzya-orders-status,
    .mzya-rma-status-pill {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-align: start !important;
    }

    .mzya-orders-status :where(.label-pending, .label-processing, .label-info, .label-completed, .label-success, .label-canceled, .label-cancelled, .label-closed, .label-active, .label-warning, .label-inactive, [class*="label-"]),
    .mzya-rma-status-pill :where(.label-pending, .label-processing, .label-info, .label-completed, .label-success, .label-canceled, .label-cancelled, .label-closed, .label-active, .label-warning, .label-inactive, [class*="label-"]),
    .mzya-orders-status > span,
    .mzya-rma-status-pill > span,
    .mzya-orders-status > p,
    .mzya-rma-status-pill > p {
        display: inline-flex !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 20px !important;
        padding: 3px 7px !important;
        border: 0 !important;
        border-radius: 8pxx !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        text-align: start !important;
        line-height: 1.1 !important;
        font-size: 10px !important;
    }

    .mzya-orders-status :where(p, span),
    .mzya-rma-status-pill :where(p, span) {
        margin: 0 !important;
    }

    .mzya-order-mobile-card__meta,
    .mzya-rma-mobile-card__meta {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin-top: 7px !important;
        padding: 7px 8px !important;
        border: 0 !important;
        border-radius: 10px !important;
        background: #f8fafc !important;
        box-shadow: none !important;
    }

    .mzya-order-mobile-card__meta > *,
    .mzya-rma-mobile-card__meta > * {
        min-width: 0 !important;
    }

    .mzya-order-mobile-card__meta :where(span, strong),
    .mzya-rma-mobile-card__meta :where(span, strong),
    .mzya-orders-order-ref,
    .mzya-rma-mobile-card__value {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        white-space: normal !important;
    }

    .mzya-order-mobile-card__footer,
    .mzya-rma-mobile-card__footer {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: unset !important;
        margin-top: 7px !important;
        padding: 7px 0 0 !important;
        border: 0 !important;
        border-top: 1px solid rgba(45, 88, 147, 0.08) !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--mzya-blue-dark) !important;
        font-size: 11.5px !important;
        line-height: 1.2 !important;
    }

    .mzya-rma-mobile-card--selectable .mzya-rma-mobile-card__footer {
        justify-content: center !important;
        min-height: 34px !important;
        padding: 8px 10px !important;
        border-top: 0 !important;
        border-radius: 10px !important;
        background: var(--mzya-blue) !important;
        color: #ffffff !important;
    }

    .mzya-orders-mobile-list-card :where(.datagrid-header, .datagrid-toolbar, [class*="toolbar"]),
    .mzya-rma-datagrid-card :where(.datagrid-header, .datagrid-toolbar, [class*="toolbar"]),
    .mzya-rma-order-card :where(.datagrid-header, .datagrid-toolbar, [class*="toolbar"]) {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px !important;
        margin: 0 0 7px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .mzya-orders-mobile-list-card :where(select, input, button, [role="button"]),
    .mzya-rma-datagrid-card :where(select, input, button, [role="button"]),
    .mzya-rma-order-card :where(select, input, button, [role="button"]) {
        max-width: 100% !important;
        min-height: 32px !important;
        border-radius: 10px !important;
        font-size: 11px !important;
        line-height: 1.1 !important;
    }

    .mzya-orders-mobile-list-card .mzya-datagrid-filter-toggle,
    .mzya-rma-datagrid-card .mzya-datagrid-filter-toggle,
    .mzya-rma-order-card .mzya-datagrid-filter-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 34px !important;
        max-width: 100% !important;
        padding-inline: 9px !important;
        white-space: nowrap !important;
    }

    .mzya-orders-mobile-list-card :where([class*="pagination"]),
    .mzya-rma-datagrid-card :where([class*="pagination"]),
    .mzya-rma-order-card :where([class*="pagination"]) {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 6px !important;
        padding: 6px 0 0 !important;
        border: 0 !important;
        border-top: 1px solid rgba(45, 88, 147, 0.08) !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    .mzya-orders-mobile-list-card .mzya-datagrid-page-label--hidden,
    .mzya-rma-datagrid-card .mzya-datagrid-page-label--hidden,
    .mzya-rma-order-card .mzya-datagrid-page-label--hidden,
    .mzya-orders-mobile-list-card [data-mzya-hide-page-label="1"],
    .mzya-rma-datagrid-card [data-mzya-hide-page-label="1"],
    .mzya-rma-order-card [data-mzya-hide-page-label="1"] {
        display: none !important;
    }

    .mzya-orders-mobile-list-card :where([class*="pagination"]) :where(button, a, input, select),
    .mzya-rma-datagrid-card :where([class*="pagination"]) :where(button, a, input, select),
    .mzya-rma-order-card :where([class*="pagination"]) :where(button, a, input, select) {
        min-width: 32px !important;
        width: auto !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 8px !important;
        border-radius: 9px !important;
        box-shadow: none !important;
    }

    @media (max-width: 380px) {
        .mzya-order-mobile-card__meta,
        .mzya-rma-mobile-card__meta {
            grid-template-columns: 1fr !important;
        }
    }
}

/*
 * Phase UI-2E — Orders/RMA mobile layout guard.
 * Goal: prevent status chips and datagrid controls from escaping the card, while keeping the UI flatter.
 * Scope: frontend/customer Orders + RMA mobile only. UI-only.
 */
@media (max-width: 767px) {
    .mzya-orders-page .mzya-account-datagrid-card,
    .mzya-orders-page .mzya-orders-list-card,
    .mzya-orders-page .mzya-orders-mobile-list-card,
    .mzya-rma-page .mzya-rma-datagrid-card,
    .mzya-rma-create-page .mzya-rma-order-card,
    .mzya-rma-create-page .mzya-rma-datagrid-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        padding: 8px !important;
        border: 1px solid rgba(45, 88, 147, 0.08) !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        box-shadow: none !important;
    }

    .mzya-orders-page .mzya-order-mobile-card,
    .mzya-rma-page .mzya-rma-mobile-card,
    .mzya-rma-create-page .mzya-rma-mobile-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        padding: 10px 2px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .mzya-orders-page .mzya-order-mobile-card + .mzya-order-mobile-card,
    .mzya-rma-page .mzya-rma-mobile-card + .mzya-rma-mobile-card,
    .mzya-rma-create-page .mzya-rma-mobile-card + .mzya-rma-mobile-card {
        margin-top: 0 !important;
        border-top: 1px solid rgba(45, 88, 147, 0.08) !important;
    }

    .mzya-orders-page .mzya-order-mobile-card__top,
    .mzya-rma-page .mzya-rma-mobile-card__top,
    .mzya-rma-create-page .mzya-rma-mobile-card__top {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .mzya-orders-page .mzya-order-mobile-card__top > *,
    .mzya-rma-page .mzya-rma-mobile-card__top > *,
    .mzya-rma-create-page .mzya-rma-mobile-card__top > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .mzya-orders-page .mzya-order-mobile-card__status-row,
    .mzya-rma-page .mzya-rma-mobile-card__status-row,
    .mzya-rma-create-page .mzya-rma-mobile-card__status-row {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-top: 6px !important;
        overflow: hidden !important;
    }

    .mzya-orders-page .mzya-orders-status,
    .mzya-rma-page .mzya-rma-status-pill,
    .mzya-rma-create-page .mzya-rma-status-pill {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-align: start !important;
    }

    .mzya-orders-page .mzya-orders-status :where(p, span, [class*="label-"]),
    .mzya-rma-page .mzya-rma-status-pill :where(p, span, [class*="label-"]),
    .mzya-rma-create-page .mzya-rma-status-pill :where(p, span, [class*="label-"]),
    .mzya-orders-page .mzya-orders-status > :where(p, span),
    .mzya-rma-page .mzya-rma-status-pill > :where(p, span),
    .mzya-rma-create-page .mzya-rma-status-pill > :where(p, span) {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 20px !important;
        height: auto !important;
        padding: 3px 8px !important;
        border: 0 !important;
        border-radius: 8pxx !important;
        font-size: 10.5px !important;
        font-weight: 600 !important;
        line-height: 1.15 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        text-align: center !important;
    }

    .mzya-orders-page .mzya-order-mobile-card__meta,
    .mzya-rma-page .mzya-rma-mobile-card__meta,
    .mzya-rma-create-page .mzya-rma-mobile-card__meta {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-top: 7px !important;
        padding: 7px 8px !important;
        border: 0 !important;
        border-radius: 10px !important;
        background: #f8fafc !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    .mzya-orders-page .mzya-order-mobile-card__meta > *,
    .mzya-rma-page .mzya-rma-mobile-card__meta > *,
    .mzya-rma-create-page .mzya-rma-mobile-card__meta > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .mzya-orders-page .mzya-order-mobile-card__meta :where(span, strong),
    .mzya-rma-page .mzya-rma-mobile-card__meta :where(span, strong),
    .mzya-rma-create-page .mzya-rma-mobile-card__meta :where(span, strong),
    .mzya-orders-page .mzya-orders-order-ref,
    .mzya-rma-page .mzya-rma-mobile-card__value,
    .mzya-rma-create-page .mzya-rma-mobile-card__value {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
    }

    .mzya-orders-page .mzya-order-mobile-card__footer,
    .mzya-rma-page .mzya-rma-mobile-card__footer,
    .mzya-rma-create-page .mzya-rma-mobile-card__footer {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-top: 7px !important;
        padding: 7px 0 0 !important;
        border: 0 !important;
        border-top: 1px solid rgba(45, 88, 147, 0.08) !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    .mzya-rma-create-page .mzya-rma-mobile-card--selectable .mzya-rma-mobile-card__footer {
        justify-content: center !important;
        min-height: 34px !important;
        padding: 8px 10px !important;
        border-top: 0 !important;
        border-radius: 10px !important;
        background: var(--mzya-blue) !important;
        color: #ffffff !important;
    }

    .mzya-orders-page .mzya-orders-mobile-list-card :where([class*="toolbar"], [class*="pagination"], [class*="footer"]),
    .mzya-rma-page .mzya-rma-datagrid-card :where([class*="toolbar"], [class*="pagination"], [class*="footer"]),
    .mzya-rma-create-page .mzya-rma-order-card :where([class*="toolbar"], [class*="pagination"], [class*="footer"]),
    .mzya-rma-create-page .mzya-rma-datagrid-card :where([class*="toolbar"], [class*="pagination"], [class*="footer"]) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .mzya-orders-page .mzya-datagrid-filter-toggle,
    .mzya-rma-page .mzya-datagrid-filter-toggle,
    .mzya-rma-create-page .mzya-datagrid-filter-toggle {
        max-width: 92px !important;
        min-width: 34px !important;
        padding-inline: 8px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .mzya-orders-page :where([class*="pagination"]) :where(label, [data-mzya-hide-page-label="1"], .mzya-datagrid-page-label--hidden),
    .mzya-rma-page :where([class*="pagination"]) :where(label, [data-mzya-hide-page-label="1"], .mzya-datagrid-page-label--hidden),
    .mzya-rma-create-page :where([class*="pagination"]) :where(label, [data-mzya-hide-page-label="1"], .mzya-datagrid-page-label--hidden) {
        display: none !important;
    }

    @media (max-width: 380px) {
        .mzya-orders-page .mzya-order-mobile-card__meta,
        .mzya-rma-page .mzya-rma-mobile-card__meta,
        .mzya-rma-create-page .mzya-rma-mobile-card__meta {
            grid-template-columns: 1fr !important;
        }
    }
}
/* Stores filter drawer — Mzya brand surface */
.mzya-stores-safe-panel {
    background: radial-gradient(circle at 22% 18%, rgba(192, 205, 207, 0.42), transparent 34%), linear-gradient(135deg, #fff8f1 55%, #ffffff 98%, #eef6f6 800%) !important;
    border-color: var(--mzya-border, rgba(226, 232, 240, .95));
    box-shadow: var(--mzya-shadow-sm, 0 18px 42px rgba(15, 23, 42, .05));
    isolation: isolate;
}
/*
 * Mzya category child images — normal by default, drawing effect on hover.
 * Scope: category children grid only.
 */
:root {
    --mzya-category-hover-bg: 237 241 242;
}

main .mzya-category-children-grid a:has(> img) {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 9999px !important;
    background: rgb(var(--mzya-category-hover-bg)) !important;
    isolation: isolate !important;
    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        background-color 220ms ease;
}

/* Default: normal image */
main .mzya-category-children-grid a:has(> img) > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 7px !important;
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    transition:
        filter 240ms ease,
        opacity 240ms ease,
        transform 240ms ease,
        padding 240ms ease;
}

/* Remove previous overlay if it exists */
main .mzya-category-children-grid a:has(> img)::after {
    display: none !important;
}

/* Hover: soft drawing / sketch effect */
main .mzya-category-children-grid a:has(> img):hover {
    background: rgb(var(--mzya-category-hover-bg)) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgb(15 37 68 / 0.08);
}

main .mzya-category-children-grid a:has(> img):hover > img {
    filter:
        grayscale(1)
        contrast(1.2)
        brightness(0.9)
        saturate(0) !important;
    opacity: 0.72 !important;
    mix-blend-mode: multiply !important;
    transform: scale(1.04);
    padding: 9px !important;
}