/* =========================================================
   Mzya Shopping — Rebuilt Frontend Final CSS
   Generated consolidation: replaces css/v2 tokens/components/frontend
   for non-account rebuilt views.
========================================================= */



/* === 1. Tokens === */
/* =========================================================
   Mzya V2 — Design Tokens
   Role: single source of truth for brand colors, spacing,
   radius, shadows, typography and component sizing.
   No page-specific selectors here.
========================================================= */
:root {
    /* Brand */
    --mzya-v2-blue: #2d5893;
    --mzya-v2-blue-700: #214777;
    --mzya-v2-blue-800: #17365f;
    --mzya-v2-blue-soft: #eef5ff;

    --mzya-v2-teal: #628e92;
    --mzya-v2-teal-700: #4f777b;
    --mzya-v2-teal-soft: #eef7f7;

    --mzya-v2-gold: #e4a224;
    --mzya-v2-gold-700: #b97905;
    --mzya-v2-gold-soft: #fff7e7;

    --mzya-v2-rust: #b85b34;
    --mzya-v2-rust-700: #923f22;
    --mzya-v2-rust-soft: #fff1eb;

    /* Semantic colors */
    --mzya-v2-success: #0f9f6e;
    --mzya-v2-success-soft: #eafaf3;
    --mzya-v2-warning: #b97905;
    --mzya-v2-warning-soft: #fff7e7;
    --mzya-v2-danger: #b85b34;
    --mzya-v2-danger-soft: #fff1eb;
    --mzya-v2-info: #2d5893;
    --mzya-v2-info-soft: #eef5ff;

    /* Text */
    --mzya-v2-ink: #08284a;
    --mzya-v2-text: #1d3557;
    --mzya-v2-muted: #60708a;
    --mzya-v2-faint: #8da0b6;
    --mzya-v2-inverse: #ffffff;

    /* Surfaces */
    --mzya-v2-page: #f7fafc;
    --mzya-v2-surface: #ffffff;
    --mzya-v2-surface-soft: #f4f8fc;
    --mzya-v2-surface-warm: #fffaf1;
    --mzya-v2-border: #dbe5f1;
    --mzya-v2-border-soft: #edf2f7;
    --mzya-v2-border-strong: #bfd0e4;

    /* Typography */
    --mzya-v2-font: var(--mzya-font-sans, 'Jost', 'DroidKufi', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif);
    --mzya-v2-fs-2xs: 10px;
    --mzya-v2-fs-xs: 11px;
    --mzya-v2-fs-sm: 12px;
    --mzya-v2-fs-md: 13px;
    --mzya-v2-fs-base: 14px;
    --mzya-v2-fs-lg: 16px;
    --mzya-v2-fs-xl: 20px;
    --mzya-v2-fs-2xl: 24px;
    --mzya-v2-lh-tight: 1.15;
    --mzya-v2-lh-base: 1.45;

    /* Spacing scale */
    --mzya-v2-space-1: 4px;
    --mzya-v2-space-2: 8px;
    --mzya-v2-space-3: 12px;
    --mzya-v2-space-4: 16px;
    --mzya-v2-space-5: 20px;
    --mzya-v2-space-6: 24px;
    --mzya-v2-space-8: 32px;
    --mzya-v2-mobile-gutter: 12px;

    /* Radius */
    --mzya-v2-radius-xs: 8px;
    --mzya-v2-radius-sm: 10px;
    --mzya-v2-radius-md: 14px;
    --mzya-v2-radius-lg: 18px;
    --mzya-v2-radius-xl: 22px;
    --mzya-v2-radius-pill: var(--mzya-v2-radius-sm);

    /* Shadows */
    --mzya-v2-shadow-xs: 0 1px 2px rgba(8, 40, 74, .04);
    --mzya-v2-shadow-sm: 0 8px 20px rgba(8, 40, 74, .06);
    --mzya-v2-shadow-md: 0 14px 36px rgba(8, 40, 74, .08);

    /* Controls */
    --mzya-v2-control-h-xs: 30px;
    --mzya-v2-control-h-sm: 36px;
    --mzya-v2-control-h: 42px;
    --mzya-v2-control-h-lg: 48px;
    --mzya-v2-control-px: 14px;
    --mzya-v2-focus-ring: 0 0 0 3px rgba(45, 88, 147, .14);

    /* Layout */
    --mzya-v2-container: 1320px;
    --mzya-v2-container-pad: 24px;
}

@media (max-width: 767px) {
    :root {
        --mzya-v2-container-pad: 12px;
        --mzya-v2-control-h: 40px;
        --mzya-v2-control-h-lg: 44px;
    }
}

/* === 2. Components === */
/* =========================================================
   Mzya V2 — Component System
   Role: reusable class-based UI controls.
   Rule: Blades should use these classes instead of repeating
   random Tailwind border/radius/shadow combinations.
========================================================= */

/* ---------- Scope helpers ---------- */
.mzya-v2,
.mzya-v2 * ,
.mzya-v2-scope,
.mzya-v2-scope * {
    box-sizing: border-box;
}

.mzya-v2,
.mzya-v2-scope {
    color: var(--mzya-v2-ink);
    font-family: var(--mzya-v2-font);
}

.mzya-v2 img,
.mzya-v2 svg,
.mzya-v2-scope img,
.mzya-v2-scope svg {
    max-width: 100%;
}

.mzya-v2 a,
.mzya-v2-scope a {
    text-decoration: none;
}

/* ---------- Page/layout primitives ---------- */
.mzya-v2-container {
    width: min(100%, var(--mzya-v2-container));
    margin-inline: auto;
    padding-inline: var(--mzya-v2-container-pad);
}

.mzya-v2-stack {
    display: grid;
    gap: var(--mzya-v2-space-4);
}

.mzya-v2-stack-sm { gap: var(--mzya-v2-space-2); }
.mzya-v2-stack-lg { gap: var(--mzya-v2-space-6); }

.mzya-v2-row {
    display: flex;
    align-items: center;
    gap: var(--mzya-v2-space-3);
    min-width: 0;
}

.mzya-v2-row-wrap { flex-wrap: wrap; }
.mzya-v2-row-between { justify-content: space-between; }

.mzya-v2-grid {
    display: grid;
    gap: var(--mzya-v2-space-4);
}

.mzya-v2-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mzya-v2-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mzya-v2-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 767px) {
    .mzya-v2-grid-2,
    .mzya-v2-grid-3,
    .mzya-v2-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* ---------- Typography ---------- */
.mzya-v2-title {
    margin: 0;
    color: var(--mzya-v2-ink);
    font-size: clamp(20px, 5vw, 28px);
    font-weight: 950;
    line-height: var(--mzya-v2-lh-tight);
}

.mzya-v2-subtitle {
    margin: 4px 0 0;
    color: var(--mzya-v2-muted);
    font-size: var(--mzya-v2-fs-md);
    font-weight: 700;
    line-height: var(--mzya-v2-lh-base);
}

.mzya-v2-text-muted {
    color: var(--mzya-v2-muted);
}

/* ---------- Cards ---------- */
.mzya-v2-card {
    min-width: 0;
    border: 1px solid var(--mzya-v2-border);
    border-radius: var(--mzya-v2-radius-lg);
    background: var(--mzya-v2-surface);
    box-shadow: var(--mzya-v2-shadow-xs);
}

.mzya-v2-card-flat {
    border-color: var(--mzya-v2-border-soft);
    box-shadow: none;
}

.mzya-v2-card-soft {
    border-color: var(--mzya-v2-border-soft);
    background: var(--mzya-v2-surface-soft);
    box-shadow: none;
}

.mzya-v2-card-header,
.mzya-v2-card-body,
.mzya-v2-card-footer {
    min-width: 0;
    padding: var(--mzya-v2-space-4);
}

.mzya-v2-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mzya-v2-space-3);
    border-bottom: 1px solid var(--mzya-v2-border-soft);
}

.mzya-v2-card-footer {
    border-top: 1px solid var(--mzya-v2-border-soft);
}

.mzya-v2-card-title {
    margin: 0;
    color: var(--mzya-v2-ink);
    font-size: var(--mzya-v2-fs-lg);
    font-weight: 950;
    line-height: var(--mzya-v2-lh-tight);
}

@media (max-width: 767px) {
    .mzya-v2-card-header,
    .mzya-v2-card-body,
    .mzya-v2-card-footer {
        padding: var(--mzya-v2-space-3);
    }
}

/* ---------- Buttons ---------- */
.mzya-v2-btn {
    display: inline-flex;
    min-width: 0;
    min-height: var(--mzya-v2-control-h);
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 var(--mzya-v2-control-px);
    border: 1px solid transparent;
    border-radius: var(--mzya-v2-radius-sm);
    font: inherit;
    font-size: var(--mzya-v2-fs-md);
    font-weight: 900;
    line-height: 1.1;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
    white-space: nowrap;
}

.mzya-v2-btn:hover { transform: translateY(-1px); }
.mzya-v2-btn:focus-visible { outline: none; box-shadow: var(--mzya-v2-focus-ring); }
.mzya-v2-btn[disabled],
.mzya-v2-btn.is-disabled {
    cursor: not-allowed;
    opacity: .55;
    transform: none;
}

.mzya-v2-btn-primary {
    border-color: var(--mzya-v2-blue);
    background: var(--mzya-v2-blue);
    color: #fff !important;
}
.mzya-v2-btn-primary:hover { background: var(--mzya-v2-blue-700); border-color: var(--mzya-v2-blue-700); }

.mzya-v2-btn-secondary {
    border-color: var(--mzya-v2-border);
    background: #fff;
    color: var(--mzya-v2-blue) !important;
}
.mzya-v2-btn-secondary:hover { border-color: var(--mzya-v2-blue); background: var(--mzya-v2-blue-soft); }

.mzya-v2-btn-soft {
    border-color: transparent;
    background: var(--mzya-v2-blue-soft);
    color: var(--mzya-v2-blue) !important;
}

.mzya-v2-btn-ghost {
    border-color: transparent;
    background: transparent;
    color: var(--mzya-v2-blue) !important;
}

.mzya-v2-btn-danger {
    border-color: var(--mzya-v2-rust);
    background: var(--mzya-v2-rust);
    color: #fff !important;
}

.mzya-v2-btn-danger-outline {
    border-color: rgba(184, 91, 52, .38);
    background: #fff;
    color: var(--mzya-v2-rust) !important;
}

.mzya-v2-btn-sm {
    min-height: var(--mzya-v2-control-h-sm);
    padding-inline: 12px;
    font-size: var(--mzya-v2-fs-sm);
}

.mzya-v2-btn-lg {
    min-height: var(--mzya-v2-control-h-lg);
    padding-inline: 18px;
    font-size: var(--mzya-v2-fs-base);
}

.mzya-v2-btn-block { width: 100%; }

.mzya-v2-icon-btn {
    width: var(--mzya-v2-control-h);
    min-width: var(--mzya-v2-control-h);
    padding: 0;
}

@media (max-width: 480px) {
    .mzya-v2-btn-mobile-block { width: 100%; }
}

/* ---------- Form controls ---------- */
.mzya-v2-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.mzya-v2-label {
    color: var(--mzya-v2-ink);
    font-size: var(--mzya-v2-fs-sm);
    font-weight: 900;
    line-height: 1.25;
}

.mzya-v2-hint,
.mzya-v2-error {
    margin: 0;
    font-size: var(--mzya-v2-fs-xs);
    font-weight: 700;
    line-height: 1.35;
}

.mzya-v2-hint { color: var(--mzya-v2-muted); }
.mzya-v2-error { color: var(--mzya-v2-danger); }

.mzya-v2-control,
.mzya-v2-input,
.mzya-v2-select,
.mzya-v2-textarea {
    width: 100%;
    min-height: var(--mzya-v2-control-h);
    border: 1px solid var(--mzya-v2-border) !important;
    border-radius: var(--mzya-v2-radius-sm) !important;
    background: #fff !important;
    color: var(--mzya-v2-ink) !important;
    font: inherit;
    font-size: var(--mzya-v2-fs-md);
    font-weight: 700;
    line-height: 1.2;
    box-shadow: none !important;
}

.mzya-v2-input,
.mzya-v2-select,
.mzya-v2-control { padding: 0 12px; }
.mzya-v2-textarea { min-height: 96px; padding: 10px 12px; resize: vertical; }

.mzya-v2-control:focus,
.mzya-v2-input:focus,
.mzya-v2-select:focus,
.mzya-v2-textarea:focus {
    border-color: rgba(45, 88, 147, .58) !important;
    outline: none !important;
    box-shadow: var(--mzya-v2-focus-ring) !important;
}

.mzya-v2-control[disabled],
.mzya-v2-input[disabled],
.mzya-v2-select[disabled],
.mzya-v2-textarea[disabled] {
    cursor: not-allowed;
    background: var(--mzya-v2-surface-soft) !important;
    color: var(--mzya-v2-muted) !important;
}

.mzya-v2-check,
.mzya-v2-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--mzya-v2-text);
    font-size: var(--mzya-v2-fs-md);
    font-weight: 800;
}

.mzya-v2-check input,
.mzya-v2-radio input {
    width: 18px;
    height: 18px;
    accent-color: var(--mzya-v2-blue);
}

/* ---------- Badges / pills ---------- */
.mzya-v2-badge {
    display: inline-flex;
    max-width: 100%;
    min-height: 24px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 9px;
    border: 1px solid transparent;
    border-radius: var(--mzya-v2-radius-pill);
    font-size: var(--mzya-v2-fs-xs);
    font-weight: 950;
    line-height: 1.1;
    text-align: center;
    overflow-wrap: anywhere;
}

.mzya-v2-badge-info { background: var(--mzya-v2-info-soft); color: var(--mzya-v2-info); }
.mzya-v2-badge-success { background: var(--mzya-v2-success-soft); color: var(--mzya-v2-success); }
.mzya-v2-badge-warning { background: var(--mzya-v2-warning-soft); color: var(--mzya-v2-warning); }
.mzya-v2-badge-danger { background: var(--mzya-v2-danger-soft); color: var(--mzya-v2-danger); }
.mzya-v2-badge-neutral { background: var(--mzya-v2-surface-soft); color: var(--mzya-v2-muted); border-color: var(--mzya-v2-border-soft); }

/* ---------- Tabs / chips ---------- */
.mzya-v2-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.mzya-v2-tab {
    display: inline-flex;
    min-height: var(--mzya-v2-control-h-sm);
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--mzya-v2-border);
    border-radius: var(--mzya-v2-radius-pill);
    background: #fff;
    color: var(--mzya-v2-text);
    font-size: var(--mzya-v2-fs-sm);
    font-weight: 900;
    white-space: nowrap;
}

.mzya-v2-tab.is-active,
.mzya-v2-tab[aria-current="page"] {
    border-color: var(--mzya-v2-blue);
    background: var(--mzya-v2-blue);
    color: #fff;
}

.mzya-v2-chip {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid var(--mzya-v2-border-soft);
    border-radius: var(--mzya-v2-radius-pill);
    background: var(--mzya-v2-surface-soft);
    color: var(--mzya-v2-text);
    font-size: var(--mzya-v2-fs-xs);
    font-weight: 900;
}

/* ---------- Toolbars ---------- */
.mzya-v2-toolbar {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--mzya-v2-space-3);
    padding: var(--mzya-v2-space-3);
    border: 1px solid var(--mzya-v2-border-soft);
    border-radius: var(--mzya-v2-radius-md);
    background: var(--mzya-v2-surface);
}

.mzya-v2-toolbar-group {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .mzya-v2-toolbar {
        align-items: stretch;
        flex-direction: column;
        padding: var(--mzya-v2-space-2);
    }

    .mzya-v2-toolbar-group {
        width: 100%;
    }
}

/* ---------- Tables / mobile cards ---------- */
.mzya-v2-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--mzya-v2-border);
    border-radius: var(--mzya-v2-radius-lg);
    background: #fff;
}

.mzya-v2-table {
    width: 100%;
    border-collapse: collapse;
}

.mzya-v2-table th,
.mzya-v2-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--mzya-v2-border-soft);
    color: var(--mzya-v2-text);
    font-size: var(--mzya-v2-fs-md);
    text-align: start;
}

.mzya-v2-table th {
    color: var(--mzya-v2-ink);
    font-size: var(--mzya-v2-fs-sm);
    font-weight: 950;
    background: var(--mzya-v2-surface-soft);
}

.mzya-v2-mobile-list {
    display: grid;
    gap: var(--mzya-v2-space-3);
}

.mzya-v2-mobile-card {
    display: grid;
    gap: var(--mzya-v2-space-3);
    min-width: 0;
    padding: var(--mzya-v2-space-3);
    border: 1px solid var(--mzya-v2-border);
    border-radius: var(--mzya-v2-radius-lg);
    background: #fff;
    box-shadow: var(--mzya-v2-shadow-xs);
}

.mzya-v2-mobile-card-header,
.mzya-v2-mobile-card-actions {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--mzya-v2-space-2);
}

.mzya-v2-mobile-card-title {
    min-width: 0;
    color: var(--mzya-v2-ink);
    font-size: var(--mzya-v2-fs-base);
    font-weight: 950;
    overflow-wrap: anywhere;
}

.mzya-v2-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.mzya-v2-meta-item {
    min-width: 0;
    padding: 8px;
    border-radius: var(--mzya-v2-radius-sm);
    background: var(--mzya-v2-surface-soft);
}

.mzya-v2-meta-label {
    display: block;
    color: var(--mzya-v2-muted);
    font-size: var(--mzya-v2-fs-2xs);
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.mzya-v2-meta-value {
    display: block;
    margin-top: 3px;
    color: var(--mzya-v2-ink);
    font-size: var(--mzya-v2-fs-sm);
    font-weight: 950;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

@media (max-width: 420px) {
    .mzya-v2-meta-grid { grid-template-columns: 1fr; }

    .mzya-v2-mobile-card-header,
    .mzya-v2-mobile-card-actions {
        align-items: stretch;
        flex-direction: column;
    }
}

/* ---------- Pagination ---------- */
.mzya-v2-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mzya-v2-space-3);
    padding-top: var(--mzya-v2-space-3);
    border-top: 1px solid var(--mzya-v2-border-soft);
}

.mzya-v2-pagination-list {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.mzya-v2-page-link {
    display: inline-flex;
    min-width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mzya-v2-border);
    border-radius: var(--mzya-v2-radius-sm);
    background: #fff;
    color: var(--mzya-v2-text);
    font-size: var(--mzya-v2-fs-sm);
    font-weight: 900;
}

.mzya-v2-page-link.is-active {
    border-color: var(--mzya-v2-blue);
    background: var(--mzya-v2-blue);
    color: #fff;
}

/* ---------- Alerts / empty states ---------- */
.mzya-v2-alert {
    display: grid;
    gap: 4px;
    padding: var(--mzya-v2-space-3);
    border: 1px solid var(--mzya-v2-border);
    border-radius: var(--mzya-v2-radius-md);
    background: #fff;
    color: var(--mzya-v2-text);
}

.mzya-v2-alert-info { border-color: rgba(45, 88, 147, .18); background: var(--mzya-v2-info-soft); }
.mzya-v2-alert-warning { border-color: rgba(228, 162, 36, .35); background: var(--mzya-v2-warning-soft); }
.mzya-v2-alert-danger { border-color: rgba(184, 91, 52, .28); background: var(--mzya-v2-danger-soft); }
.mzya-v2-alert-success { border-color: rgba(15, 159, 110, .25); background: var(--mzya-v2-success-soft); }

.mzya-v2-empty {
    display: grid;
    place-items: center;
    gap: var(--mzya-v2-space-3);
    min-height: 160px;
    padding: var(--mzya-v2-space-6);
    border: 1px dashed var(--mzya-v2-border-strong);
    border-radius: var(--mzya-v2-radius-lg);
    background: #fff;
    text-align: center;
}

.mzya-v2-empty-title {
    margin: 0;
    color: var(--mzya-v2-ink);
    font-size: var(--mzya-v2-fs-lg);
    font-weight: 950;
}

.mzya-v2-empty-text {
    margin: 0;
    color: var(--mzya-v2-muted);
    font-size: var(--mzya-v2-fs-md);
    font-weight: 700;
}

/* ---------- Avatar/media ---------- */
.mzya-v2-avatar {
    display: inline-grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: var(--mzya-v2-radius-md);
    background: var(--mzya-v2-blue-soft);
    color: var(--mzya-v2-blue);
    font-size: var(--mzya-v2-fs-base);
    font-weight: 950;
    overflow: hidden;
}

.mzya-v2-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- Utilities ---------- */
.mzya-v2-hidden-mobile { display: initial; }
.mzya-v2-only-mobile { display: none; }
.mzya-v2-min-0 { min-width: 0; }
.mzya-v2-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mzya-v2-break { overflow-wrap: anywhere; word-break: break-word; }

@media (max-width: 767px) {
    .mzya-v2-hidden-mobile { display: none !important; }
    .mzya-v2-only-mobile { display: initial !important; }
}

/* === 3. Rebuilt Frontend === */
/* =========================================================
   Mzya V2 — Frontend Area Helpers
   Role: safe class-based layout helpers for future rebuilt
   frontend pages: listing, PDP, cart/checkout.
   This file should not style legacy pages unless their Blade
   uses mzya-v2-* classes.
========================================================= */

.mzya-v2-page {
    min-width: 0;
    overflow-x: clip;
    background: var(--mzya-v2-page);
    color: var(--mzya-v2-ink);
}

.mzya-v2-page-header {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--mzya-v2-space-4);
    margin-bottom: var(--mzya-v2-space-4);
}

.mzya-v2-section {
    display: grid;
    gap: var(--mzya-v2-space-4);
    min-width: 0;
}

.mzya-v2-section + .mzya-v2-section {
    margin-top: var(--mzya-v2-space-6);
}

.mzya-v2-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--mzya-v2-space-2);
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .mzya-v2-page-header {
        display: grid;
        gap: var(--mzya-v2-space-3);
        margin-bottom: var(--mzya-v2-space-3);
    }

    .mzya-v2-actions {
        justify-content: stretch;
    }

    .mzya-v2-actions .mzya-v2-btn {
        flex: 1 1 auto;
    }
}