/* =========================================================
   StallionSite Commerce
   Product UI System
   ========================================================= */

:root {
    --commerce-navy: #081426;
    --commerce-navy-2: #102b50;
    --commerce-navy-3: #16365f;
    --commerce-blue: #2f6df6;
    --commerce-blue-soft: #4f8cff;
    --commerce-cyan: #68d8ff;
    --commerce-text: #0d1726;
    --commerce-text-soft: #405168;
    --commerce-muted: #738197;
    --commerce-bg: #f5f8fc;
    --commerce-surface: #ffffff;
    --commerce-surface-soft: #f8faff;
    --commerce-border: #e2e9f3;
    --commerce-success: #238b60;
    --commerce-success-bg: #eaf8f2;
    --commerce-warning: #a66b08;
    --commerce-warning-bg: #fff5df;
    --commerce-danger: #d8454d;
    --commerce-danger-bg: #fff0f1;
    --commerce-radius-sm: 12px;
    --commerce-radius: 18px;
    --commerce-radius-lg: 26px;
    --commerce-radius-xl: 32px;
    --commerce-shadow-sm: 0 8px 24px rgba(8, 20, 38, .05);
    --commerce-shadow: 0 18px 50px rgba(8, 20, 38, .08);
    --commerce-shadow-lg: 0 28px 80px rgba(8, 20, 38, .12);
    --commerce-gradient: linear-gradient( 135deg, #2f6df6 0%, #4f8cff 58%, #68d8ff 100% );
    --commerce-ease: cubic-bezier(.2, .7, .2, 1);
}


/* =========================================================
   Base
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--commerce-bg);
}

body.commerce-body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', sans-serif;
    color: var(--commerce-text);
    background: radial-gradient( circle at 15% 0%, rgba(79, 140, 255, .07), transparent 26% ), var(--commerce-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
    font: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   Product Shell
   ========================================================= */

.commerce-shell-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* Header */

.commerce-shell-header {
    position: relative;
    z-index: 50;
    min-height: 76px;
    display: flex;
    align-items: center;
    background: radial-gradient( circle at 72% 0%, rgba(79, 140, 255, .18), transparent 34% ), linear-gradient( 120deg, #081426, #0c1d35 56%, #102b50 );
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 12px 38px rgba(8, 20, 38, .16);
}

    .commerce-shell-header .commerce-shell-container {
        min-height: 76px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
    }


/* Brand */

.commerce-brand {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    color: #fff;
}

.commerce-brand-logo {
    display: inline-flex;
    align-items: center;
}

    .commerce-brand-logo img {
        width: 143px;
        height: auto;
        display: block;
    }

.commerce-brand-divider {
    width: 1px;
    height: 26px;
    background: rgba(255, 255, 255, .22);
}

.commerce-brand-product {
    color: rgba(255, 255, 255, .88);
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.02em;
}


/* Account */

.commerce-account {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.commerce-account-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.25;
}

.commerce-account-label {
    color: rgba(255, 255, 255, .48);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.commerce-account-name {
    max-width: 180px;
    overflow: hidden;
    color: rgba(255, 255, 255, .92);
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.commerce-account-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient( 135deg, rgba(79, 140, 255, .96), rgba(104, 216, 255, .9) );
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 800;
}


/* Main */

.commerce-shell-main {
    width: 100%;
    flex: 1;
}


/* Footer */

.commerce-shell-footer {
    margin-top: auto;
    background: rgba(255, 255, 255, .7);
    border-top: 1px solid var(--commerce-border);
}

.commerce-footer-inner {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: var(--commerce-muted);
    font-size: 12px;
}


/* =========================================================
   Page Structure
   ========================================================= */

.commerce-page {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
    padding: 54px 0 80px;
}

.commerce-page-narrow {
    width: min(880px, calc(100% - 40px));
}


/* Hero */

.commerce-page-head {
    max-width: 760px;
    margin-bottom: 34px;
}

.commerce-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    color: var(--commerce-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

    .commerce-eyebrow::before {
        content: '';
        width: 21px;
        height: 2px;
        background: var(--commerce-blue);
        border-radius: 999px;
    }

.commerce-title {
    margin: 0 0 13px;
    color: var(--commerce-navy);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(34px, 4vw, 50px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.045em;
}

.commerce-lead {
    max-width: 700px;
    margin: 0;
    color: var(--commerce-muted);
    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   Cards
   ========================================================= */

.commerce-card {
    background: var(--commerce-surface);
    border: 1px solid var(--commerce-border);
    border-radius: var(--commerce-radius-lg);
    box-shadow: var(--commerce-shadow);
    padding: 28px;
}

.commerce-card-soft {
    background: linear-gradient( 180deg, #ffffff, #f8faff );
}

.commerce-card-title {
    margin: 0 0 8px;
    color: var(--commerce-navy);
    font-family: 'Manrope', sans-serif;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.025em;
}

.commerce-card-subtitle {
    margin: 0;
    color: var(--commerce-muted);
    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   Forms
   ========================================================= */

.commerce-form {
    display: grid;
    gap: 20px;
}

.commerce-field {
    display: grid;
    gap: 7px;
}

.commerce-label {
    color: var(--commerce-text);
    font-size: 13px;
    font-weight: 700;
}

.commerce-input,
.commerce-select,
.commerce-textarea {
    width: 100%;
    padding: 14px 15px;
    color: var(--commerce-text);
    background: #fff;
    border: 1px solid var(--commerce-border);
    border-radius: 13px;
    outline: none;
    font-size: 14px;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

    .commerce-input:hover,
    .commerce-select:hover,
    .commerce-textarea:hover {
        border-color: #cad7e7;
    }

    .commerce-input:focus,
    .commerce-select:focus,
    .commerce-textarea:focus {
        border-color: var(--commerce-blue-soft);
        box-shadow: 0 0 0 4px rgba(47, 109, 246, .09);
    }

.commerce-hint {
    color: var(--commerce-muted);
    font-size: 11px;
    line-height: 1.5;
}


/* =========================================================
   Buttons
   ========================================================= */

.commerce-btn {
    appearance: none;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 20px;
    color: #fff;
    background: var(--commerce-gradient);
    border: 0;
    border-radius: 14px;
    box-shadow: 0 13px 30px rgba(47, 109, 246, .22);
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    transition: transform .2s var(--commerce-ease), box-shadow .2s ease;
}

    .commerce-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 17px 36px rgba(47, 109, 246, .29);
    }

    .commerce-btn:active {
        transform: translateY(0);
    }


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 700px) {

    .commerce-shell-container {
        width: min(100% - 28px, 1180px);
    }

    .commerce-shell-header,
    .commerce-shell-header .commerce-shell-container {
        min-height: 68px;
    }

    .commerce-brand {
        gap: 10px;
    }

    .commerce-brand-logo img {
        width: 118px;
    }

    .commerce-brand-divider {
        height: 22px;
    }

    .commerce-brand-product {
        font-size: 14px;
    }

    .commerce-account-copy {
        display: none;
    }

    .commerce-account-avatar {
        width: 35px;
        height: 35px;
        flex-basis: 35px;
    }

    .commerce-page,
    .commerce-page-narrow {
        width: min(100% - 28px, 1120px);
        padding: 36px 0 60px;
    }

    .commerce-page-head {
        margin-bottom: 26px;
    }

    .commerce-title {
        font-size: 32px;
    }

    .commerce-lead {
        font-size: 14px;
    }

    .commerce-card {
        padding: 20px;
        border-radius: 21px;
    }

    .commerce-footer-inner {
        min-height: 72px;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        text-align: center;
    }
}
/* =========================================================
   CREATE STORE / ONBOARDING
   ========================================================= */

.commerce-onboarding {
    width: 100%;
    padding: 46px 22px 72px;
}

.commerce-onboarding-shell {
    width: min(1180px, 100%);
    min-height: 690px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(340px, .88fr) minmax(520px, 1.32fr);
    overflow: hidden;
    background: var(--commerce-surface);
    border: 1px solid rgba(8, 20, 38, .08);
    border-radius: 30px;
    box-shadow: 0 28px 80px rgba(8, 20, 38, .12);
}


/* =========================================================
   LEFT PANEL
   ========================================================= */

.commerce-onboarding-aside {
    position: relative;
    min-height: 100%;
    overflow: hidden;
    color: #fff;
    background: radial-gradient( circle at 75% 14%, rgba(79, 140, 255, .34), transparent 30% ), radial-gradient( circle at 4% 96%, rgba(104, 216, 255, .13), transparent 28% ), linear-gradient( 145deg, #071426 0%, #0a1d37 54%, #123765 100% );
}

.commerce-onboarding-grid-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .32;
    background-image: linear-gradient( rgba(255,255,255,.035) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.035) 1px, transparent 1px );
    background-size: 54px 54px;
    mask-image: linear-gradient( to bottom, #000, transparent 88% );
}

.commerce-onboarding-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(4px);
    pointer-events: none;
}

.commerce-glow-one {
    width: 300px;
    height: 300px;
    top: -160px;
    right: -130px;
    background: rgba(79, 140, 255, .18);
}

.commerce-glow-two {
    width: 240px;
    height: 240px;
    bottom: -120px;
    left: -130px;
    background: rgba(104, 216, 255, .10);
}

.commerce-onboarding-aside-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 52px 46px;
}

.commerce-product-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 36px;
    color: #a8c6ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.commerce-kicker-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--commerce-cyan);
    box-shadow: 0 0 0 5px rgba(104, 216, 255, .1);
}

.commerce-onboarding-aside h1 {
    max-width: 430px;
    margin: 0;
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(38px, 3.5vw, 53px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.055em;
}

    .commerce-onboarding-aside h1 span {
        color: #8fb8ff;
    }

.commerce-onboarding-intro {
    max-width: 430px;
    margin: 20px 0 35px;
    color: rgba(255, 255, 255, .67);
    font-size: 15px;
    line-height: 1.75;
}

.commerce-onboarding-benefits {
    display: grid;
    gap: 22px;
}

.commerce-benefit {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    align-items: flex-start;
}

.commerce-benefit-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ec0ff;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 13px;
    font-size: 15px;
}

.commerce-benefit strong {
    display: block;
    margin-bottom: 3px;
    color: #fff;
    font-size: 14px;
}

.commerce-benefit span {
    display: block;
    color: rgba(255,255,255,.56);
    font-size: 12px;
    line-height: 1.55;
}

.commerce-feature-note {
    margin-top: auto;
    padding-top: 34px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: rgba(255,255,255,.68);
    font-size: 12px;
    line-height: 1.6;
}

    .commerce-feature-note i {
        margin-top: 3px;
        color: #72d6ff;
    }


/* =========================================================
   RIGHT PANEL
   ========================================================= */

.commerce-onboarding-main {
    padding: 42px 48px 46px;
    background: linear-gradient( 180deg, #ffffff 0%, #fbfcff 100% );
}


/* Progress */

.commerce-onboarding-progress {
    display: flex;
    align-items: center;
    margin-bottom: 42px;
}

.commerce-progress-item {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
}

    .commerce-progress-item > span {
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #8b98aa;
        background: #f3f6fa;
        border: 1px solid #e1e8f2;
        border-radius: 50%;
        font-size: 11px;
        font-weight: 800;
    }

    .commerce-progress-item div {
        display: grid;
        gap: 1px;
    }

    .commerce-progress-item strong {
        color: #617086;
        font-size: 11px;
        font-weight: 800;
    }

    .commerce-progress-item small {
        color: #9aa6b5;
        font-size: 9px;
    }

    .commerce-progress-item.is-active > span {
        color: #fff;
        background: var(--commerce-gradient);
        border-color: transparent;
        box-shadow: 0 7px 18px rgba(47,109,246,.25);
    }

    .commerce-progress-item.is-active strong {
        color: var(--commerce-navy);
    }

.commerce-progress-line {
    flex: 1;
    min-width: 22px;
    max-width: 56px;
    height: 1px;
    margin: 0 12px;
    background: #dfe6f0;
}


/* Heading */

.commerce-form-heading {
    margin-bottom: 32px;
}

.commerce-form-step {
    display: block;
    margin-bottom: 8px;
    color: var(--commerce-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.commerce-form-heading h2 {
    margin: 0 0 8px;
    color: var(--commerce-navy);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(27px, 3vw, 36px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.045em;
}

.commerce-form-heading p {
    max-width: 580px;
    margin: 0;
    color: var(--commerce-muted);
    font-size: 13px;
    line-height: 1.6;
}


/* Form */

.commerce-create-form {
    display: grid;
    gap: 22px;
}

.commerce-form-section {
    padding: 22px;
    background: #fff;
    border: 1px solid var(--commerce-border);
    border-radius: 20px;
}

.commerce-form-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.commerce-section-icon {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--commerce-blue);
    background: #edf3ff;
    border-radius: 12px;
    font-size: 13px;
}

.commerce-form-section-head h3 {
    margin: 0 0 2px;
    color: var(--commerce-navy);
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.commerce-form-section-head p {
    margin: 0;
    color: var(--commerce-muted);
    font-size: 11px;
}


/* Fields */

.commerce-field {
    margin-bottom: 18px;
}

    .commerce-field:last-child {
        margin-bottom: 0;
    }

.commerce-field-label {
    display: block;
    margin-bottom: 7px;
    color: var(--commerce-text);
    font-size: 11px;
    font-weight: 800;
}

.commerce-input-shell {
    position: relative;
}

    .commerce-input-shell > i {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #8493a8;
        font-size: 13px;
    }

.commerce-field-input {
    width: 100%;
    height: 48px;
    padding: 0 15px 0 42px;
    color: var(--commerce-text);
    background: #ffffff;
    border: 1.5px solid #cfdbea;
    border-radius: 13px;
    outline: none;
    font-size: 13px;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

    .commerce-field-input::placeholder {
        color: #a4afbd;
    }

    .commerce-field-input:hover {
        border-color: #c6d4e5;
    }

    .commerce-field-input:focus {
        background: #fff;
        border-color: var(--commerce-blue-soft);
        box-shadow: 0 0 0 4px rgba(47,109,246,.08);
    }

.commerce-field-help {
    margin-top: 6px;
    color: #8a97a8;
    font-size: 11px;
}


/* Plans */

.commerce-plan-selector {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 10px;
}

.commerce-plan {
    position: relative;
    cursor: pointer;
}

    .commerce-plan input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

.commerce-plan-inner {
    position: relative;
    min-height: 142px;
    display: flex;
    flex-direction: column;
    padding: 17px;
    overflow: hidden;
    background: #fbfcfe;
    border: 1.5px solid #dfe7f1;
    border-radius: 16px;
    transition: transform .2s var(--commerce-ease), border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.commerce-plan:hover .commerce-plan-inner {
    transform: translateY(-2px);
    border-color: #bdcee4;
    box-shadow: var(--commerce-shadow-sm);
}

.commerce-plan input:checked + .commerce-plan-inner {
    background: linear-gradient( 180deg, #f8fbff, #eef5ff );
    border-color: var(--commerce-blue);
    box-shadow: 0 0 0 3px rgba(47,109,246,.08);
}

.commerce-plan-check {
    position: absolute;
    top: 11px;
    right: 11px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--commerce-blue);
    border-radius: 50%;
    opacity: 0;
    transform: scale(.72);
    transition: opacity .18s ease, transform .18s ease;
    font-size: 8px;
}

.commerce-plan input:checked +
.commerce-plan-inner
.commerce-plan-check {
    opacity: 1;
    transform: scale(1);
}

.commerce-plan-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding-right: 17px;
    margin-bottom: auto;
}

.commerce-plan-title {
    color: var(--commerce-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.commerce-plan-price {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    color: var(--commerce-navy);
}

    .commerce-plan-price strong {
        font-size: 15px;
        font-weight: 800;
    }

    .commerce-plan-price small {
        color: var(--commerce-muted);
        font-size: 8px;
        font-weight: 600;
    }

.commerce-plan-capacity {
    margin-top: 18px;
    color: var(--commerce-navy);
    font-family: 'Manrope', sans-serif;
    font-size: 30px;
    font-weight: 800;
    line-height: .95;
    letter-spacing: -.05em;
}

.commerce-plan-caption {
    margin-top: 5px;
    color: var(--commerce-muted);
    font-size: 10px;
}


/* Included message */

.commerce-plan-message {
    margin-top: 14px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 11px 13px;
    color: #52647a;
    background: #f5f8fc;
    border-radius: 11px;
    font-size: 10px;
    line-height: 1.5;
}

    .commerce-plan-message i {
        margin-top: 2px;
        color: var(--commerce-blue);
    }


/* Validation */

.commerce-validation-summary:empty,
.commerce-validation-summary.validation-summary-valid {
    display: none;
}

.commerce-validation-summary {
    padding: 12px 14px;
    color: var(--commerce-danger);
    background: var(--commerce-danger-bg);
    border: 1px solid #f1cfd2;
    border-radius: 12px;
    font-size: 11px;
}

    .commerce-validation-summary ul {
        margin: 0;
        padding-left: 18px;
    }

.commerce-field-error {
    display: block;
    margin-top: 5px;
    color: var(--commerce-danger);
    font-size: 10px;
}


/* Submit */

.commerce-onboarding-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 2px;
}

.commerce-submit-note {
    max-width: 360px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--commerce-muted);
    font-size: 11px;
    line-height: 1.5;
}

    .commerce-submit-note i {
        margin-top: 2px;
        color: var(--commerce-success);
    }

.commerce-primary-action {
    min-width: 188px;
    height: 49px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 19px;
    color: #fff;
    background: var(--commerce-gradient);
    border: 0;
    border-radius: 14px;
    box-shadow: 0 13px 30px rgba(47,109,246,.24);
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    transition: transform .2s var(--commerce-ease), box-shadow .2s ease;
}

    .commerce-primary-action:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 37px rgba(47,109,246,.30);
    }

    .commerce-primary-action i {
        transition: transform .2s ease;
    }

    .commerce-primary-action:hover i {
        transform: translateX(3px);
    }


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width: 980px) {

    .commerce-onboarding-shell {
        grid-template-columns: 1fr;
    }

    .commerce-onboarding-aside {
        min-height: auto;
    }

    .commerce-onboarding-aside-content {
        padding: 40px;
    }

    .commerce-feature-note {
        margin-top: 32px;
    }

    .commerce-onboarding-main {
        padding: 38px 40px 42px;
    }
}


@media(max-width: 650px) {

    .commerce-onboarding {
        padding: 20px 12px 40px;
    }

    .commerce-onboarding-shell {
        border-radius: 22px;
        box-shadow: 0 18px 50px rgba(8,20,38,.09);
    }

    .commerce-onboarding-aside-content {
        padding: 32px 24px;
    }

    .commerce-onboarding-aside h1 {
        font-size: 35px;
    }

    .commerce-onboarding-intro {
        font-size: 13px;
    }

    .commerce-onboarding-benefits {
        gap: 17px;
    }

    .commerce-onboarding-main {
        padding: 28px 18px 32px;
    }

    .commerce-progress-item div {
        display: none;
    }

    .commerce-progress-line {
        max-width: none;
    }

    .commerce-onboarding-progress {
        margin-bottom: 30px;
    }

    .commerce-form-section {
        padding: 18px;
        border-radius: 17px;
    }

    .commerce-plan-selector {
        grid-template-columns: 1fr;
    }

    .commerce-plan-inner {
        min-height: auto;
    }

    .commerce-plan-capacity {
        margin-top: 24px;
    }

    .commerce-onboarding-submit {
        flex-direction: column;
        align-items: stretch;
    }

    .commerce-submit-note {
        max-width: none;
    }

    .commerce-primary-action {
        width: 100%;
    }
}

.commerce-plan-inner {
    min-height: 168px;
    cursor: pointer;
}

.commerce-plan-select-state {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    color: #738197;
    font-size: 10px;
    font-weight: 700;
}

.commerce-plan-radio {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #b9c7d9;
    border-radius: 50%;
    background: #fff;
    transition: .18s ease;
}

    .commerce-plan-radio::after {
        content: '';
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #fff;
        transform: scale(0);
        transition: transform .18s ease;
    }

.commerce-plan input:checked +
.commerce-plan-inner {
    border-color: var(--commerce-blue);
    background: linear-gradient( 180deg, #f8fbff 0%, #edf4ff 100% );
    box-shadow: 0 0 0 3px rgba(47, 109, 246, .10), 0 12px 26px rgba(47, 109, 246, .09);
}

    .commerce-plan input:checked +
    .commerce-plan-inner
    .commerce-plan-radio {
        border-color: var(--commerce-blue);
        background: var(--commerce-blue);
    }

        .commerce-plan input:checked +
        .commerce-plan-inner
        .commerce-plan-radio::after {
            transform: scale(1);
        }

    .commerce-plan input:checked +
    .commerce-plan-inner
    .commerce-plan-select-text {
        color: var(--commerce-blue);
    }

        .commerce-plan input:checked +
        .commerce-plan-inner
        .commerce-plan-select-text::after {
            content: ' selected';
        }

.commerce-input-shell,
.commerce-phone-number-wrap,
.commerce-country-select-wrap {
    transition: box-shadow .2s ease, border-color .2s ease;
}

.commerce-field-input {
    box-shadow: inset 0 1px 2px rgba(8, 20, 38, .02);
}

    .commerce-field-input:hover {
        border-color: #aebfd5;
    }

    .commerce-field-input:focus {
        border-color: var(--commerce-blue);
        box-shadow: 0 0 0 4px rgba(47, 109, 246, .09);
    }

.commerce-phone-field {
    display: grid;
    grid-template-columns: 185px minmax(0, 1fr);
    gap: 9px;
}

.commerce-country-select-wrap {
    position: relative;
}

.commerce-country-select {
    width: 100%;
    height: 48px;
    padding: 0 34px 0 13px;
    appearance: none;
    color: var(--commerce-text);
    background: #fff;
    border: 1.5px solid #cfdbea;
    border-radius: 13px;
    outline: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}

.commerce-country-select-wrap > i {
    position: absolute;
    top: 50%;
    right: 13px;
    transform: translateY(-50%);
    color: #8291a5;
    pointer-events: none;
    font-size: 9px;
}

.commerce-country-select:focus {
    border-color: var(--commerce-blue);
    box-shadow: 0 0 0 4px rgba(47,109,246,.09);
}

.commerce-phone-number-wrap {
    position: relative;
}

    .commerce-phone-number-wrap > i {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #34a853;
        font-size: 14px;
    }

    .commerce-phone-number-wrap
    .commerce-field-input {
        padding-left: 42px;
    }

@media(max-width: 650px) {

    .commerce-phone-field {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   GLOBAL COMMERCE LOADING STATE
   ========================================================= */

.commerce-submit-normal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
}


.commerce-submit-loading {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 11px;
}


/*
   Universal loading behavior.

   Any Commerce button that receives .is-loading
   and contains the standard normal/loading spans
   now behaves exactly like Create Store.
*/

button.is-loading .commerce-submit-normal,
a.is-loading .commerce-submit-normal {
    display: none;
}


button.is-loading .commerce-submit-loading,
a.is-loading .commerce-submit-loading {
    display: inline-flex;
}


/* Disabled/loading button state */

button.is-loading,
button:disabled.is-loading {
    cursor: wait;
    opacity: .78;
    transform: none !important;
}


/* Spinner */

.commerce-spinner {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    border: 2px solid rgba(255,255,255,.38);
    border-top-color: #fff;
    border-radius: 50%;
    animation: commerce-spin .7s linear infinite;
}


@keyframes commerce-spin {

    to {
        transform: rotate(360deg);
    }
}

@keyframes commerce-spin {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   PAYMENT / ACTIVATION
   ========================================================= */

.commerce-payment-page {
    width: 100%;
    padding: 46px 22px 72px;
}

.commerce-payment-shell {
    width: min(1120px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(8,20,38,.08);
    border-radius: 30px;
    box-shadow: 0 28px 80px rgba(8,20,38,.12);
}


/* Left */

.commerce-payment-aside {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: radial-gradient( circle at 75% 12%, rgba(79,140,255,.32), transparent 30% ), linear-gradient( 145deg, #071426, #0a1d37 55%, #123765 );
}

.commerce-payment-aside-content {
    position: relative;
    z-index: 2;
    min-height: 670px;
    display: flex;
    flex-direction: column;
    padding: 48px 40px;
}

.commerce-payment-aside h1 {
    margin: 0;
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: 42px;
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -.05em;
}

    .commerce-payment-aside h1 span {
        color: #8fb8ff;
    }

.commerce-payment-aside > div > p {
    margin: 18px 0 30px;
    color: rgba(255,255,255,.65);
    font-size: 13px;
    line-height: 1.7;
}


/* Store summary */

.commerce-payment-store {
    padding: 18px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 17px;
}

    .commerce-payment-store > span {
        display: block;
        margin-bottom: 5px;
        color: rgba(255,255,255,.42);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .12em;
    }

    .commerce-payment-store > strong {
        display: block;
        color: #fff;
        font-family: 'Manrope', sans-serif;
        font-size: 18px;
    }

    .commerce-payment-store > div {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 8px;
        color: rgba(255,255,255,.58);
        font-size: 10px;
    }

    .commerce-payment-store i {
        width: 3px;
        height: 3px;
        background: #6fb8ff;
        border-radius: 50%;
    }


/* Renewal recommendation */

.commerce-payment-recommendation {
    margin-top: auto;
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 12px;
    padding: 16px;
    background: rgba(104,216,255,.07);
    border: 1px solid rgba(104,216,255,.13);
    border-radius: 15px;
}

    .commerce-payment-recommendation > i {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #7edcff;
        background: rgba(104,216,255,.09);
        border-radius: 11px;
    }

    .commerce-payment-recommendation strong {
        display: block;
        margin-bottom: 3px;
        color: #fff;
        font-size: 11px;
    }

    .commerce-payment-recommendation span {
        display: block;
        color: rgba(255,255,255,.55);
        font-size: 9px;
        line-height: 1.55;
    }


/* Right */

.commerce-payment-main {
    padding: 42px 46px 48px;
    background: linear-gradient( 180deg, #fff, #fbfcff );
}

.commerce-payment-form {
    display: grid;
    gap: 20px;
}


/* Completed progress */

.commerce-progress-item.is-complete > span {
    color: #fff;
    background: var(--commerce-success);
    border-color: transparent;
}

.commerce-progress-line.is-complete {
    background: var(--commerce-success);
}


/* Month selector */

.commerce-month-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
}

.commerce-month-option {
    position: relative;
    cursor: pointer;
}

    .commerce-month-option input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .commerce-month-option > span {
        min-height: 78px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #fbfcfe;
        border: 1.5px solid #dbe5f0;
        border-radius: 14px;
        transition: .2s ease;
    }

    .commerce-month-option strong {
        color: var(--commerce-navy);
        font-family: 'Manrope', sans-serif;
        font-size: 23px;
        line-height: 1;
    }

    .commerce-month-option small {
        margin-top: 5px;
        color: var(--commerce-muted);
        font-size: 9px;
    }

    .commerce-month-option:hover > span {
        border-color: #b8cae0;
    }

    .commerce-month-option input:checked + span {
        color: var(--commerce-blue);
        background: #eef5ff;
        border-color: var(--commerce-blue);
        box-shadow: 0 0 0 3px rgba(47,109,246,.08);
    }

        .commerce-month-option input:checked +
        span strong {
            color: var(--commerce-blue);
        }


/* Renewal tip */

.commerce-renewal-tip {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 10px 12px;
    color: #5d6e84;
    background: #f6f9fd;
    border-radius: 10px;
    font-size: 9px;
    line-height: 1.5;
}

    .commerce-renewal-tip i {
        margin-top: 2px;
        color: #e3a11f;
    }


/* Total */

.commerce-payment-total {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

    .commerce-payment-total > div {
        min-height: 115px;
        padding: 17px;
        background: #f8faff;
        border: 1px solid #e1e9f3;
        border-radius: 15px;
    }

    .commerce-payment-total span {
        display: block;
        color: var(--commerce-muted);
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .07em;
    }

    .commerce-payment-total > div:first-child > strong {
        display: block;
        margin: 10px 0 6px;
        color: var(--commerce-navy);
        font-family: 'Manrope', sans-serif;
        font-size: 42px;
        font-weight: 800;
        line-height: .95;
        letter-spacing: -.045em;
    }

    .commerce-payment-total small {
        color: var(--commerce-muted);
        font-size: 10.5px;
    }


/* Whish */

.commerce-whish-number strong {
    display: block;
    margin: 10px 0 9px;
    color: var(--commerce-navy);
    font-size: 15px;
}

.commerce-whish-number button {
    padding: 7px 10px;
    color: var(--commerce-blue);
    background: #edf3ff;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 10.5px;
    font-weight: 800;
}


/* Receipt uploader */

.commerce-receipt-upload {
    min-height: 165px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    background: #fafcff;
    border: 1.5px dashed #b8c9de;
    border-radius: 16px;
    transition: .2s ease;
}

    .commerce-receipt-upload:hover {
        background: #f6f9ff;
        border-color: var(--commerce-blue-soft);
    }

    .commerce-receipt-upload.has-file {
        background: #f0faf6;
        border-style: solid;
        border-color: #78c6a5;
    }

    .commerce-receipt-upload input {
        display: none;
    }

.commerce-upload-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    color: var(--commerce-blue);
    background: #edf3ff;
    border-radius: 11px;
}

.commerce-receipt-upload.has-file
.commerce-upload-icon {
    color: var(--commerce-success);
    background: var(--commerce-success-bg);
}

.commerce-receipt-upload strong {
    color: var(--commerce-navy);
    font-size: 11px;
}

.commerce-receipt-upload > span:not(.commerce-upload-icon) {
    margin-top: 4px;
    color: var(--commerce-muted);
    font-size: 9px;
}

.commerce-upload-button {
    margin-top: 12px !important;
    padding: 7px 12px;
    color: var(--commerce-blue) !important;
    background: #edf3ff;
    border-radius: 8px;
    font-weight: 800;
}


/* Optional note */

.commerce-payment-note-field {
    margin-top: 16px;
}

.commerce-optional {
    margin-left: 5px;
    color: var(--commerce-muted);
    font-size: 9px;
    font-weight: 500;
}

.commerce-payment-note {
    width: 100%;
    min-height: 78px;
    padding: 12px 13px;
    resize: vertical;
    color: var(--commerce-text);
    background: #fff;
    border: 1.5px solid #cfdbea;
    border-radius: 12px;
    outline: none;
    font-size: 11px;
}

    .commerce-payment-note:focus {
        border-color: var(--commerce-blue);
        box-shadow: 0 0 0 4px rgba(47,109,246,.08);
    }


/* Submit */

.commerce-payment-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}


/* WhatsApp fallback */

.commerce-whatsapp-fallback {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 18px;
    background: #f3faf6;
    border: 1px solid #d4eadc;
    border-radius: 14px;
}

.commerce-whatsapp-fallback-copy {
    display: flex;
    align-items: center;
    gap: 11px;
}

.commerce-whatsapp-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: #1f9d63;
    border-radius: 10px;
    font-size: 15px;
    box-shadow: 0 6px 14px rgba(31, 157, 99, .18);
}

    .commerce-whatsapp-icon i {
        line-height: 1;
    }

.commerce-whatsapp-fallback-copy strong {
    display: block;
    margin-bottom: 2px;
    color: #183b2b;
    font-size: 12px;
    font-weight: 800;
}

.commerce-whatsapp-fallback-copy span {
    display: block;
    color: #577064;
    font-size: 11px;
    line-height: 1.5;
}

.commerce-whatsapp-fallback > a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 13px;
    color: #fff;
    background: #1f9d63;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 800;
    transition: .2s ease;
}

    .commerce-whatsapp-fallback > a:hover {
        background: #168451;
        transform: translateY(-1px);
    }


/* Under review */

.commerce-payment-review {
    padding: 36px 4px 20px;
}

.commerce-review-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    color: var(--commerce-blue);
    background: #edf3ff;
    border-radius: 17px;
    font-size: 20px;
}

.commerce-review-status {
    display: inline-flex;
    margin-bottom: 14px;
    padding: 6px 9px;
    color: #9b690f;
    background: #fff4db;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.commerce-payment-review h2 {
    margin: 0 0 8px;
    color: var(--commerce-navy);
    font-family: 'Manrope', sans-serif;
    font-size: 30px;
    letter-spacing: -.04em;
}

.commerce-payment-review > p {
    max-width: 570px;
    margin: 0;
    color: var(--commerce-muted);
    font-size: 12px;
    line-height: 1.7;
}

.commerce-review-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
    margin-top: 28px;
}

    .commerce-review-summary > div {
        padding: 15px;
        background: #f8faff;
        border: 1px solid #e2eaf3;
        border-radius: 13px;
    }

    .commerce-review-summary span {
        display: block;
        margin-bottom: 4px;
        color: var(--commerce-muted);
        font-size: 8px;
        text-transform: uppercase;
        letter-spacing: .07em;
    }

    .commerce-review-summary strong {
        color: var(--commerce-navy);
        font-size: 11px;
    }

.commerce-review-time {
    margin-top: 16px;
    color: var(--commerce-muted);
    font-size: 9px;
}


/* Responsive */

@media(max-width: 900px) {

    .commerce-payment-shell {
        grid-template-columns: 1fr;
    }

    .commerce-payment-aside-content {
        min-height: auto;
    }

    .commerce-payment-recommendation {
        margin-top: 30px;
    }
}

@media(max-width: 650px) {

    .commerce-payment-page {
        padding: 20px 12px 40px;
    }

    .commerce-payment-shell {
        border-radius: 22px;
    }

    .commerce-payment-aside-content {
        padding: 32px 24px;
    }

    .commerce-payment-aside h1 {
        font-size: 34px;
    }

    .commerce-payment-main {
        padding: 28px 18px 32px;
    }

    .commerce-month-options {
        grid-template-columns: repeat(2, 1fr);
    }

    .commerce-payment-total {
        grid-template-columns: 1fr;
    }

    .commerce-payment-submit,
    .commerce-whatsapp-fallback {
        flex-direction: column;
        align-items: stretch;
    }

    .commerce-review-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}

.commerce-renewal-tip {
    margin-top: 14px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 13px 14px;
    color: #465a72;
    background: #f4f8fd;
    border: 1px solid #e2eaf4;
    border-radius: 12px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.55;
}

    .commerce-renewal-tip i {
        margin-top: 3px;
        color: #d99512;
        font-size: 13px;
    }

.commerce-payment-methods {
    margin-top: 18px;
}

.commerce-payment-method-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 18px;
    border: 1px solid #dbe4f0;
    border-radius: 16px;
    background: #ffffff;
    cursor: default;
    position: relative;
}

    .commerce-payment-method-card input {
        display: none;
    }

    .commerce-payment-method-card.is-active {
        border-color: #6ea8ff;
        box-shadow: 0 0 0 3px rgba(76, 127, 255, 0.08);
        background: #f8fbff;
    }

.commerce-payment-method-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #f3f7ff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 52px;
    overflow: hidden;
}

    .commerce-payment-method-icon img {
        width: 30px;
        height: 30px;
        object-fit: contain;
    }

.commerce-payment-method-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .commerce-payment-method-content strong {
        font-size: 16px;
        font-weight: 800;
        color: #0f172a;
    }

    .commerce-payment-method-content span {
        font-size: 13px;
        color: #5f6f86;
        line-height: 1.45;
    }

.commerce-payment-method-check {
    margin-left: auto;
    color: #3b82f6;
    font-size: 20px;
}

.commerce-payment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 18px;
}

.commerce-payment-total-card,
.commerce-payment-account-card {
    padding: 22px;
    border: 1px solid #dbe4f0;
    border-radius: 18px;
    background: #fbfcff;
}

.commerce-card-label {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6a7a92;
}

.commerce-amount-line {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    color: #08152f;
    line-height: 1;
}

.commerce-amount-currency {
    font-size: 26px;
    font-weight: 700;
    margin-top: 9px;
}

.commerce-amount-major {
    font-size: 54px;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.commerce-amount-minor {
    font-size: 22px;
    font-weight: 700;
    margin-top: 10px;
    color: #5d6c85;
}

.commerce-amount-breakdown {
    margin-top: 12px;
    font-size: 14px;
    color: #617089;
    font-weight: 600;
}

.commerce-payment-account-number {
    font-size: 28px;
    font-weight: normal;
    letter-spacing: -0.02em;
    color: #08152f;
    margin-bottom: 14px;
}

.commerce-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid #dbe4f0;
    border-radius: 12px;
    background: #eef4ff;
    color: #2e5cff;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

    .commerce-copy-btn:hover {
        background: #e6efff;
    }

@media (max-width: 900px) {
    .commerce-payment-grid {
        grid-template-columns: 1fr;
    }

    .commerce-amount-major {
        font-size: 46px;
    }

    .commerce-payment-account-number {
        font-size: 24px;
    }
}

.commerce-payment-method-icon {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px;
    background: #fff;
    border: 1px solid #e3e9f2;
    border-radius: 14px;
}

    .commerce-payment-method-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }




/* =========================================================
   PENDING PAYMENT · TWO-STEP ACTIVATION FLOW
   ========================================================= */

.commerce-payment-flow-tabs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin: 4px 0 24px;
    padding: 14px;
    background: #f7f9fd;
    border: 1px solid var(--commerce-border);
    border-radius: 16px;
    scroll-margin-top: 24px;
}

.commerce-payment-flow-step {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    opacity: .58;
    transition: opacity .2s ease;
}

.commerce-payment-flow-step.is-active,
.commerce-payment-flow-step.is-complete {
    opacity: 1;
}

.commerce-flow-step-number {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #62738a;
    background: #fff;
    border: 1px solid #d7e1ed;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 900;
    transition: .2s ease;
}

.commerce-payment-flow-step.is-active .commerce-flow-step-number {
    color: #fff;
    background: var(--commerce-blue);
    border-color: var(--commerce-blue);
    box-shadow: 0 0 0 4px rgba(47,109,246,.09);
}

.commerce-payment-flow-step.is-complete .commerce-flow-step-number {
    color: #fff;
    background: var(--commerce-success);
    border-color: var(--commerce-success);
}

.commerce-payment-flow-step strong {
    display: block;
    color: var(--commerce-navy);
    font-size: 11.5px;
    font-weight: 800;
}

.commerce-payment-flow-step small {
    display: block;
    margin-top: 2px;
    color: var(--commerce-muted);
    font-size: 9px;
    line-height: 1.35;
}

.commerce-flow-connector {
    height: 2px;
    background: #dce5ef;
    border-radius: 999px;
    transition: background .2s ease;
}

.commerce-flow-connector.is-complete {
    background: var(--commerce-success);
}

.commerce-payment-step-panel {
    display: none;
}

.commerce-payment-step-panel.is-active {
    display: block;
    animation: commercePaymentStepIn .22s ease both;
}

/* Keep the payment cards visually separated inside each step panel. */
.commerce-payment-step-panel.is-active > .commerce-form-section + .commerce-form-section {
    margin-top: 18px;
}

@keyframes commercePaymentStepIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.commerce-payment-step-intro {
    margin-bottom: 20px;
    padding: 0 2px;
}

.commerce-payment-step-intro > span {
    display: inline-block;
    margin-bottom: 7px;
    color: var(--commerce-blue);
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .09em;
}

.commerce-payment-step-intro h3 {
    margin: 0 0 6px;
    color: var(--commerce-navy);
    font-family: 'Manrope', sans-serif;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -.035em;
}

.commerce-payment-step-intro p {
    max-width: 610px;
    margin: 0;
    color: var(--commerce-muted);
    font-size: 11.5px;
    line-height: 1.65;
}

.commerce-whish-payment-section {
    margin-bottom: 0;
}

.commerce-payment-checkpoint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 18px;
    padding: 18px;
    background: linear-gradient(135deg, #f6f9ff, #fbfdff);
    border: 1px solid #dbe6f3;
    border-radius: 16px;
}

.commerce-payment-checkpoint-copy {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.commerce-payment-checkpoint-copy > .commerce-checkpoint-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--commerce-blue);
    background: #eaf1ff;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1;
}

.commerce-checkpoint-icon i {
    display: block;
    line-height: 1;
}

.commerce-payment-checkpoint-copy strong {
    display: block;
    margin-bottom: 3px;
    color: var(--commerce-navy);
    font-size: 11.5px;
    font-weight: 800;
}

.commerce-payment-checkpoint-copy > div > span {
    display: block;
    color: var(--commerce-muted);
    font-size: 10px;
    line-height: 1.5;
}

.commerce-payment-completed-action {
    flex: 0 0 auto;
    min-width: 220px;
}

.commerce-payment-completed-action > span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.commerce-receipt-payment-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 18px;
    padding: 10px;
    background: #f7f9fd;
    border: 1px solid var(--commerce-border);
    border-radius: 15px;
}

.commerce-receipt-payment-summary > div {
    min-width: 0;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #e6edf5;
    border-radius: 11px;
}

.commerce-receipt-payment-summary span {
    display: block;
    margin-bottom: 4px;
    color: var(--commerce-muted);
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.commerce-receipt-payment-summary strong {
    display: block;
    overflow: hidden;
    color: var(--commerce-navy);
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.commerce-receipt-option-card {
    padding: 20px;
    background: #fff;
    border: 1px solid var(--commerce-border);
    border-radius: 17px;
}

.commerce-receipt-option-card.is-primary {
    border-color: #cfdcf0;
    box-shadow: 0 10px 26px rgba(8,20,38,.035);
}

.commerce-receipt-option-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.commerce-receipt-option-number {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--commerce-blue);
    background: #edf3ff;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 900;
}

.commerce-receipt-option-head > div {
    min-width: 0;
}

.commerce-receipt-option-head strong {
    display: block;
    margin-bottom: 2px;
    color: var(--commerce-navy);
    font-size: 12px;
    font-weight: 800;
}

.commerce-receipt-option-head div > span {
    display: block;
    color: var(--commerce-muted);
    font-size: 10px;
    line-height: 1.45;
}

.commerce-receipt-option-badge {
    margin-left: auto;
    padding: 5px 8px;
    color: var(--commerce-blue);
    background: #edf3ff;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.commerce-receipt-submit-row {
    margin-top: 18px;
}

.commerce-receipt-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 17px 0;
    color: #8895a8;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .1em;
}

.commerce-receipt-divider::before,
.commerce-receipt-divider::after {
    content: '';
    height: 1px;
    flex: 1;
    background: #e3eaf3;
}

.commerce-receipt-divider span {
    padding: 0 12px;
}

.commerce-whatsapp-receipt-card {
    background: #f5fbf8;
    border-color: #d3eadc;
}

.commerce-whatsapp-option-number {
    color: #fff;
    background: #1f9d63;
    font-size: 16px;
}

.commerce-whatsapp-receipt-action {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    color: #fff;
    background: #1f9d63;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 800;
    transition: .2s ease;
}

.commerce-whatsapp-receipt-action:hover {
    color: #fff;
    background: #168451;
    transform: translateY(-1px);
}

.commerce-whatsapp-receipt-note {
    margin: 10px 2px 0;
    color: #587064;
    font-size: 9.5px;
    line-height: 1.55;
}

.commerce-payment-back-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 17px;
    padding: 8px 2px;
    color: #66768a;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
}

.commerce-payment-back-button:hover {
    color: var(--commerce-blue);
}

@media (max-width: 700px) {
    .commerce-payment-flow-tabs {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .commerce-flow-connector {
        width: 2px;
        height: 18px;
        margin-left: 16px;
    }

    .commerce-payment-checkpoint {
        flex-direction: column;
        align-items: stretch;
    }

    .commerce-payment-completed-action {
        width: 100%;
        min-width: 0;
    }

    .commerce-receipt-payment-summary {
        grid-template-columns: 1fr;
    }

    .commerce-receipt-option-head {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .commerce-receipt-option-badge {
        margin-left: 46px;
    }

    .commerce-receipt-submit-row {
        flex-direction: column;
        align-items: stretch;
    }
}

/* =========================================================
   COMMERCE ADMIN
   ========================================================= */

.commerce-admin-body {
    margin: 0;
    min-height: 100vh;
    background: #f4f7fb;
    font-family: 'Inter', sans-serif;
    color: var(--commerce-text);
}

.commerce-admin-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 235px minmax(0, 1fr);
}


/* Sidebar */

.commerce-admin-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 25px 18px 18px;
    color: #fff;
    background: radial-gradient( circle at 30% 0%, rgba(79,140,255,.17), transparent 28% ), linear-gradient( 180deg, #071426, #091b33 60%, #0c284a );
    border-right: 1px solid rgba(255,255,255,.07);
}


.commerce-admin-brand {
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 8px 22px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

    .commerce-admin-brand img {
        width: 105px;
        height: auto;
    }

    .commerce-admin-brand > span {
        width: 1px;
        height: 24px;
        background: rgba(255,255,255,.2);
    }

    .commerce-admin-brand strong {
        color: rgba(255,255,255,.9);
        font-family: 'Manrope', sans-serif;
        font-size: 13px;
    }

    .commerce-admin-brand small {
        margin-left: auto;
        padding: 4px 6px;
        color: #9cc1ff;
        background: rgba(79,140,255,.12);
        border: 1px solid rgba(79,140,255,.15);
        border-radius: 6px;
        font-size: 7px;
        font-weight: 800;
        letter-spacing: .07em;
    }


/* Nav */

.commerce-admin-nav {
    display: grid;
    gap: 5px;
    padding-top: 22px;
}

    .commerce-admin-nav a {
        min-height: 43px;
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 0 12px;
        color: rgba(255,255,255,.57);
        border-radius: 11px;
        font-size: 12px;
        font-weight: 650;
        transition: .18s ease;
    }

        .commerce-admin-nav a > i {
            width: 17px;
            color: rgba(255,255,255,.42);
            text-align: center;
            font-size: 12px;
        }

        .commerce-admin-nav a:hover {
            color: #fff;
            background: rgba(255,255,255,.055);
        }

        .commerce-admin-nav a.active {
            color: #fff;
            background: linear-gradient( 135deg, rgba(47,109,246,.27), rgba(79,140,255,.13) );
            border: 1px solid rgba(111,160,255,.16);
        }

            .commerce-admin-nav a.active > i {
                color: #8eb7ff;
            }

        .commerce-admin-nav a small {
            margin-left: auto;
            font-size: 7px;
            text-transform: uppercase;
            letter-spacing: .06em;
        }

        .commerce-admin-nav a.is-disabled {
            cursor: default;
            opacity: .43;
        }


/* Sidebar bottom */

.commerce-admin-sidebar-footer {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.07);
}

    .commerce-admin-sidebar-footer a {
        display: flex;
        align-items: center;
        gap: 9px;
        color: rgba(255,255,255,.46);
        font-size: 10px;
    }


/* Workspace */

.commerce-admin-workspace {
    min-width: 0;
}


/* Topbar */

.commerce-admin-topbar {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 32px;
    background: rgba(255,255,255,.92);
    border-bottom: 1px solid #e3eaf3;
    backdrop-filter: blur(15px);
}

    .commerce-admin-topbar > div:first-child {
        display: grid;
        gap: 1px;
    }

.commerce-admin-topbar-label {
    color: var(--commerce-muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.commerce-admin-topbar > div:first-child strong {
    color: var(--commerce-navy);
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
}


/* User */

.commerce-admin-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .commerce-admin-user > div {
        display: grid;
        gap: 1px;
        text-align: right;
    }

    .commerce-admin-user small {
        color: var(--commerce-muted);
        font-size: 8px;
    }

    .commerce-admin-user strong {
        max-width: 180px;
        overflow: hidden;
        color: var(--commerce-navy);
        font-size: 10px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .commerce-admin-user > span {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        background: var(--commerce-gradient);
        border-radius: 11px;
        font-size: 11px;
        font-weight: 800;
    }


/* Main */

.commerce-admin-main {
    padding: 34px 32px 60px;
}


/* Shared page head */

.commerce-admin-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
}

.commerce-admin-page-head-copy span {
    display: block;
    margin-bottom: 5px;
    color: var(--commerce-blue);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.commerce-admin-page-head h1 {
    margin: 0;
    color: var(--commerce-navy);
    font-family: 'Manrope', sans-serif;
    font-size: 30px;
    letter-spacing: -.04em;
}

.commerce-admin-page-head p {
    margin: 7px 0 0;
    color: var(--commerce-muted);
    font-size: 11px;
}


/* Stats */

.commerce-admin-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

.commerce-admin-stat {
    padding: 18px;
    background: #fff;
    border: 1px solid #e1e9f3;
    border-radius: 16px;
}

.commerce-admin-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
}

    .commerce-admin-stat-top > span:first-child {
        color: var(--commerce-muted);
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .07em;
    }

.commerce-admin-stat-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--commerce-blue);
    background: #edf3ff;
    border-radius: 9px;
    font-size: 10px;
}

.commerce-admin-stat strong {
    display: block;
    color: var(--commerce-navy);
    font-family: 'Manrope', sans-serif;
    font-size: 27px;
    line-height: 1;
}

.commerce-admin-stat small {
    display: block;
    margin-top: 5px;
    color: var(--commerce-muted);
    font-size: 8px;
}


/* Panel */

.commerce-admin-panel {
    background: #fff;
    border: 1px solid #e1e9f3;
    border-radius: 18px;
    box-shadow: 0 10px 32px rgba(8,20,38,.035);
    overflow: hidden;
}

.commerce-admin-panel-head {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 20px;
    border-bottom: 1px solid #e8eef5;
}

    .commerce-admin-panel-head h2 {
        margin: 0;
        color: var(--commerce-navy);
        font-family: 'Manrope', sans-serif;
        font-size: 13px;
    }

    .commerce-admin-panel-head p {
        margin: 3px 0 0;
        color: var(--commerce-muted);
        font-size: 9px;
    }


/* Table */

.commerce-admin-table-wrap {
    overflow-x: auto;
}

.commerce-admin-table {
    width: 100%;
    min-width: 880px;
    border-collapse: collapse;
}

    .commerce-admin-table th {
        padding: 11px 18px;
        text-align: left;
        color: #8996a7;
        background: #fafbfd;
        border-bottom: 1px solid #e7edf5;
        font-size: 8px;
        font-weight: 800;
        letter-spacing: .07em;
        text-transform: uppercase;
    }

    .commerce-admin-table td {
        padding: 15px 18px;
        border-bottom: 1px solid #edf1f6;
        vertical-align: middle;
        font-size: 10px;
    }

    .commerce-admin-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .commerce-admin-table tbody tr {
        transition: background .15s ease;
    }

        .commerce-admin-table tbody tr:hover {
            background: #fafcff;
        }


/* Store */

.commerce-admin-store-cell {
    display: flex;
    align-items: center;
    gap: 11px;
}

.commerce-admin-store-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--commerce-blue);
    background: #edf3ff;
    border-radius: 10px;
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 800;
}

.commerce-admin-store-cell strong {
    display: block;
    color: var(--commerce-navy);
    font-size: 10px;
}

.commerce-admin-store-cell small {
    display: block;
    margin-top: 2px;
    color: var(--commerce-muted);
    font-size: 8px;
}


/* Status */

.commerce-admin-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800;
}

    .commerce-admin-status::before {
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 50%;
    }

    .commerce-admin-status.active {
        color: #197044;
        background: #eaf8f1;
    }

        .commerce-admin-status.active::before {
            background: #2aa66c;
        }

    .commerce-admin-status.pending {
        color: #96640d;
        background: #fff5df;
    }

        .commerce-admin-status.pending::before {
            background: #d99b2a;
        }

    .commerce-admin-status.grace {
        color: #9a5e09;
        background: #fff2e0;
    }

        .commerce-admin-status.grace::before {
            background: #e5901c;
        }

    .commerce-admin-status.suspended {
        color: #9f373d;
        background: #fff0f1;
    }

        .commerce-admin-status.suspended::before {
            background: #d94b53;
        }


/* Action */

.commerce-admin-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 31px;
    padding: 0 11px;
    color: var(--commerce-blue);
    background: #edf3ff;
    border-radius: 8px;
    font-size: 8px;
    font-weight: 800;
    transition: .16s ease;
}

    .commerce-admin-action:hover {
        color: #fff;
        background: var(--commerce-blue);
    }


/* Responsive */

@media(max-width: 900px) {

    .commerce-admin-shell {
        grid-template-columns: 1fr;
    }

    .commerce-admin-sidebar {
        position: relative;
        width: 100%;
        height: auto;
        padding: 15px;
        flex-direction: row;
        align-items: center;
    }

    .commerce-admin-brand {
        padding: 0;
        border: 0;
    }

    .commerce-admin-nav {
        margin-left: auto;
        display: flex;
        padding: 0;
    }

    .commerce-admin-sidebar-footer {
        display: none;
    }

    .commerce-admin-nav a {
        min-height: 36px;
    }

        .commerce-admin-nav a span,
        .commerce-admin-nav a small {
            display: none;
        }

    .commerce-admin-topbar {
        padding: 0 20px;
    }

    .commerce-admin-main {
        padding: 28px 18px 50px;
    }

    .commerce-admin-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 520px) {

    .commerce-admin-brand img {
        width: 92px;
    }

    .commerce-admin-brand strong {
        font-size: 11px;
    }

    .commerce-admin-stats {
        grid-template-columns: 1fr 1fr;
    }

    .commerce-admin-stat {
        padding: 14px;
    }
}


/* =========================================================
   ADMIN STORE DETAIL
   ========================================================= */

.commerce-admin-detail-grid {
    display: grid;
    grid-template-columns: minmax(280px, .75fr) minmax(420px, 1.25fr);
    gap: 18px;
    align-items: start;
}

    .commerce-admin-detail-grid > div {
        display: grid;
        gap: 18px;
    }


/* Summary */

.commerce-admin-summary-body {
    padding: 7px 20px 16px;
}

.commerce-admin-summary-row {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid #edf1f6;
}

    .commerce-admin-summary-row:last-child {
        border-bottom: 0;
    }

    .commerce-admin-summary-row span {
        color: var(--commerce-muted);
        font-size: 9px;
    }

    .commerce-admin-summary-row strong {
        max-width: 60%;
        color: var(--commerce-navy);
        font-size: 9px;
        text-align: right;
    }


/* Plan */

.commerce-admin-current-plan {
    padding: 24px 20px;
}

    .commerce-admin-current-plan > span {
        display: block;
        color: var(--commerce-blue);
        font-size: 9px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .08em;
    }

    .commerce-admin-current-plan strong {
        display: block;
        margin: 7px 0 6px;
        color: var(--commerce-navy);
        font-family: 'Manrope', sans-serif;
        font-size: 29px;
        letter-spacing: -.04em;
    }

    .commerce-admin-current-plan small {
        color: var(--commerce-muted);
        font-size: 9px;
    }


/* Form */

.commerce-admin-form-body {
    display: grid;
    gap: 18px;
    padding: 22px;
}

.commerce-admin-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.commerce-admin-input,
.commerce-admin-select,
.commerce-admin-textarea {
    width: 100%;
    padding: 12px 13px;
    color: var(--commerce-text);
    background: #fff;
    border: 1.5px solid #d6e0ec;
    border-radius: 11px;
    outline: none;
    font-size: 10px;
    transition: .18s ease;
}

.commerce-admin-input,
.commerce-admin-select {
    height: 42px;
}

.commerce-admin-textarea {
    min-height: 90px;
    resize: vertical;
}

    .commerce-admin-input:focus,
    .commerce-admin-select:focus,
    .commerce-admin-textarea:focus {
        border-color: var(--commerce-blue);
        box-shadow: 0 0 0 3px rgba(47,109,246,.08);
    }


/* Money input */

.commerce-admin-money-input {
    height: 42px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #fff;
    border: 1.5px solid #d6e0ec;
    border-radius: 11px;
}

    .commerce-admin-money-input:focus-within {
        border-color: var(--commerce-blue);
        box-shadow: 0 0 0 3px rgba(47,109,246,.08);
    }

    .commerce-admin-money-input span {
        width: 36px;
        flex: 0 0 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--commerce-muted);
        background: #f6f8fb;
        border-right: 1px solid #e0e7f0;
        font-size: 10px;
        font-weight: 800;
    }

    .commerce-admin-money-input input {
        min-width: 0;
        flex: 1;
        height: 100%;
        padding: 0 12px;
        color: var(--commerce-text);
        background: transparent;
        border: 0;
        outline: 0;
        font-size: 10px;
    }


/* Note */

.commerce-admin-form-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 11px 12px;
    color: #5c6f86;
    background: #f5f8fc;
    border-radius: 10px;
    font-size: 9px;
    line-height: 1.5;
}

    .commerce-admin-form-note i {
        margin-top: 2px;
        color: var(--commerce-blue);
    }


/* Primary */

.commerce-admin-primary-action {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #fff;
    background: var(--commerce-gradient);
    border: 0;
    border-radius: 12px;
    box-shadow: 0 12px 27px rgba(47,109,246,.21);
    cursor: pointer;
    font-size: 10px;
    font-weight: 800;
}

    .commerce-admin-primary-action:disabled {
        cursor: wait;
        opacity: .76;
    }


/* Alerts */

.commerce-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 13px;
    margin-bottom: 18px;
    border-radius: 11px;
    font-size: 10px;
}

.commerce-alert-success {
    color: #197044;
    background: #eaf8f1;
    border: 1px solid #cbe9db;
}


@media(max-width: 850px) {

    .commerce-admin-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media(max-width: 520px) {

    .commerce-admin-page-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .commerce-admin-form-grid {
        grid-template-columns: 1fr;
    }
}

.commerce-admin-search {
    position: relative;
    width: 260px;
    height: 38px;
    display: flex;
    align-items: center;
}

    .commerce-admin-search > i {
        position: absolute;
        left: 12px;
        color: #8b99aa;
        font-size: 10px;
        pointer-events: none;
    }

    .commerce-admin-search input {
        width: 100%;
        height: 100%;
        padding: 0 35px 0 32px;
        color: var(--commerce-text);
        background: #f8fafd;
        border: 1.5px solid #dce5ef;
        border-radius: 10px;
        outline: none;
        font-size: 10px;
        transition: .18s ease;
    }

        .commerce-admin-search input::placeholder {
            color: #9ba7b6;
        }

        .commerce-admin-search input:focus {
            background: #fff;
            border-color: var(--commerce-blue);
            box-shadow: 0 0 0 3px rgba(47,109,246,.07);
        }

    .commerce-admin-search button {
        position: absolute;
        right: 7px;
        width: 25px;
        height: 25px;
        display: none;
        align-items: center;
        justify-content: center;
        color: #7d8998;
        background: transparent;
        border: 0;
        border-radius: 7px;
        cursor: pointer;
        font-size: 9px;
    }

        .commerce-admin-search button:hover {
            background: #edf2f8;
        }

    .commerce-admin-search.has-value button {
        display: flex;
    }

.commerce-admin-search-empty {
    display: none;
    padding: 52px 20px;
    text-align: center;
    color: var(--commerce-muted);
}

    .commerce-admin-search-empty i {
        display: block;
        margin-bottom: 10px;
        color: #9aabc0;
        font-size: 20px;
    }

    .commerce-admin-search-empty strong {
        display: block;
        margin-bottom: 4px;
        color: var(--commerce-navy);
        font-size: 11px;
    }

    .commerce-admin-search-empty span {
        font-size: 9px;
    }

@media(max-width: 650px) {

    .commerce-admin-panel-head {
        align-items: flex-start;
        flex-direction: column;
        padding: 16px;
    }

    .commerce-admin-search {
        width: 100%;
    }
}

/* =========================================================
   COMMERCE AUTH
   Login / Register
   ========================================================= */

.commerce-auth-page {
    min-height: calc(100vh - 140px);
    display: flex;
    align-items: center;
}


/* Shell */

.commerce-auth-shell {
    min-height: 650px;
}

.commerce-login-shell {
    min-height: 610px;
}


/* Right side */

.commerce-auth-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 46px;
    padding-bottom: 46px;
}


/* Heading */

.commerce-auth-heading {
    margin-bottom: 29px;
}


/* Form */

.commerce-auth-form {
    width: 100%;
}


/*
    Authentication is intentionally NOT wrapped
    in another card.

    The entire right side is already its surface.
*/

.commerce-auth-fields {
    display: grid;
    gap: 20px;
    margin-top: 2px;
}


    /* Remove inherited section spacing */

    .commerce-auth-fields .commerce-field {
        margin: 0;
    }


/* Name row */

.commerce-auth-name-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}


    .commerce-auth-name-grid .commerce-field {
        min-width: 0;
        margin: 0;
    }


    /*
    Explicit equal label height prevents one field
    from dropping below the other.
*/

    .commerce-auth-name-grid .commerce-field-label {
        min-height: 17px;
        display: flex;
        align-items: center;
    }


/* Labels */

.commerce-auth-fields .commerce-field-label {
    margin-bottom: 7px;
    color: var(--commerce-text);
    font-size: 11px;
    font-weight: 800;
}


/* Inputs */

.commerce-auth-fields .commerce-field-input {
    height: 50px;
    background: #fff;
    border: 1.5px solid #cfdbea;
    font-size: 12px;
}


    .commerce-auth-fields .commerce-field-input:hover {
        border-color: #acbfd7;
    }


    .commerce-auth-fields .commerce-field-input:focus {
        border-color: var(--commerce-blue);
        box-shadow: 0 0 0 4px rgba(47, 109, 246, .08);
    }


/* Input icons */

.commerce-auth-fields .commerce-input-shell > i {
    color: #8496ad;
}


/* Help */

.commerce-auth-fields .commerce-field-help {
    margin-top: 6px;
    color: #7d8ba0;
    font-size: 10.5px;
    line-height: 1.5;
}


/* Validation */

.commerce-auth-fields .commerce-field-error {
    min-height: 0;
    margin-top: 5px;
    color: var(--commerce-danger);
    font-size: 10px;
    line-height: 1.4;
}


    .commerce-auth-fields
    .commerce-field-error:empty {
        display: none;
    }


/* Submit */

.commerce-auth-action {
    width: 100%;
    min-height: 50px;
    margin-top: 4px;
    font-size: 11px;
}


/* Login options */

.commerce-auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: -2px;
}


.commerce-auth-remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--commerce-muted);
    cursor: pointer;
    font-size: 10.5px;
}


    .commerce-auth-remember input {
        width: 15px;
        height: 15px;
        margin: 0;
        accent-color: var(--commerce-blue);
        cursor: pointer;
    }


.commerce-auth-forgot {
    color: var(--commerce-blue);
    font-size: 10.5px;
    font-weight: 700;
}


    .commerce-auth-forgot:hover {
        text-decoration: underline;
    }


/* Login/Register switch */

.commerce-auth-switch {
    margin-top: 4px;
    color: var(--commerce-muted);
    text-align: center;
    font-size: 10.5px;
    line-height: 1.6;
}


    .commerce-auth-switch a {
        margin-left: 2px;
        color: var(--commerce-blue);
        font-weight: 800;
    }


        .commerce-auth-switch a:hover {
            text-decoration: underline;
        }


/* =========================================================
   AUTH RESPONSIVE
   ========================================================= */

@media(max-width: 980px) {

    .commerce-auth-page {
        min-height: auto;
    }

    .commerce-auth-shell,
    .commerce-login-shell {
        min-height: auto;
    }
}


@media(max-width: 650px) {

    .commerce-auth-main {
        padding: 31px 20px 34px;
    }


    .commerce-auth-heading {
        margin-bottom: 25px;
    }


    .commerce-auth-fields {
        gap: 17px;
    }


    .commerce-auth-name-grid {
        grid-template-columns: 1fr;
        gap: 17px;
    }


        .commerce-auth-name-grid
        .commerce-field-label {
            min-height: auto;
        }


    .commerce-auth-options {
        align-items: flex-start;
    }
}

/* =========================================================
   COMMERCE ACCOUNT DROPDOWN
   ========================================================= */

.commerce-account-menu {
    position: relative;
}


/* Avatar button */

button.commerce-account-avatar {
    padding: 0;
    border: 0;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}

    button.commerce-account-avatar:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 28px rgba(0,0,0,.22);
    }

    button.commerce-account-avatar:focus-visible {
        outline: 2px solid rgba(104,216,255,.9);
        outline-offset: 3px;
    }


/* Dropdown */

.commerce-account-dropdown {
    position: absolute;
    top: calc(100% + 13px);
    right: 0;
    width: 265px;
    padding: 9px;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-7px) scale(.98);
    transform-origin: top right;
    background: rgba(255,255,255,.98);
    border: 1px solid #e0e7f0;
    border-radius: 16px;
    box-shadow: 0 22px 60px rgba(8,20,38,.19);
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
    z-index: 1000;
}


.commerce-account-menu.is-open
.commerce-account-dropdown {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}


/* Arrow */

.commerce-account-dropdown::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 14px;
    width: 11px;
    height: 11px;
    background: #fff;
    border-left: 1px solid #e0e7f0;
    border-top: 1px solid #e0e7f0;
    transform: rotate(45deg);
}


/* User section */

.commerce-dropdown-user {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 40px minmax(0,1fr);
    gap: 11px;
    align-items: center;
    padding: 10px 10px 7px;
}


.commerce-dropdown-avatar {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--commerce-gradient);
    border-radius: 12px;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 800;
}


.commerce-dropdown-user strong {
    display: block;
    overflow: hidden;
    color: var(--commerce-navy);
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.commerce-dropdown-user span {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: var(--commerce-muted);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Role */

.commerce-dropdown-role {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px 10px;
    color: #607087;
    font-size: 8px;
    font-weight: 700;
}


    .commerce-dropdown-role > span {
        width: 6px;
        height: 6px;
        background: var(--commerce-success);
        border-radius: 50%;
        box-shadow: 0 0 0 3px rgba(35,139,96,.09);
    }


/* Divider */

.commerce-dropdown-divider {
    height: 1px;
    margin: 6px 3px;
    background: #e9eef5;
}


/* Menu items */

.commerce-dropdown-item {
    width: 100%;
    min-height: 39px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 11px;
    color: #405168;
    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 650;
    text-align: left;
    transition: background .15s ease, color .15s ease;
}


    .commerce-dropdown-item i {
        width: 15px;
        color: #8997aa;
        font-size: 10px;
        text-align: center;
        transition: color .15s ease;
    }


    .commerce-dropdown-item:hover {
        color: var(--commerce-navy);
        background: #f3f7fc;
    }


        .commerce-dropdown-item:hover i {
            color: var(--commerce-blue);
        }


/* Logout */

.commerce-dropdown-logout-form {
    margin: 0;
}


.commerce-dropdown-logout {
    color: #a7454a;
}


    .commerce-dropdown-logout i {
        color: #c15c62;
    }


    .commerce-dropdown-logout:hover {
        color: #a33138;
        background: #fff1f2;
    }


        .commerce-dropdown-logout:hover i {
            color: #bb3c44;
        }


/* Anonymous StallionSite link */

.commerce-public-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    color: rgba(255,255,255,.74);
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    transition: .18s ease;
}


    .commerce-public-back:hover {
        color: #fff;
        background: rgba(255,255,255,.06);
        border-color: rgba(255,255,255,.18);
    }


/* Mobile */

@media(max-width: 650px) {

    .commerce-account-copy {
        display: none;
    }

    .commerce-account-dropdown {
        position: fixed;
        top: 72px;
        right: 14px;
        width: min(285px, calc(100vw - 28px));
    }
}

.commerce-whatsapp-fallback
.commerce-whatsapp-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: #1f9d63;
    border-radius: 11px;
}

    .commerce-whatsapp-fallback
    .commerce-whatsapp-icon i {
        color: #ffffff;
        font-size: 20px;
        line-height: 1;
        width: auto;
        height: auto;
        margin: 0;
    }


/* =========================================================
   ADMIN PAYMENT REVIEW
   ========================================================= */

.commerce-admin-payment-review {
    margin-bottom: 22px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #dce6f1;
    border-radius: 20px;
    box-shadow: 0 12px 36px rgba(8,20,38,.05);
}


/* Head */

.commerce-admin-payment-review-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    padding: 24px;
    background: linear-gradient( 135deg, #fbfdff, #f5f9ff );
    border-bottom: 1px solid #e4ebf4;
}


.commerce-admin-review-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding: 6px 9px;
    color: #93620d;
    background: #fff3d7;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}


.commerce-admin-payment-review-head h2 {
    margin: 0 0 5px;
    color: var(--commerce-navy);
    font-family: 'Manrope', sans-serif;
    font-size: 20px;
    letter-spacing: -.03em;
}


.commerce-admin-payment-review-head p {
    max-width: 560px;
    margin: 0;
    color: var(--commerce-muted);
    font-size: 10px;
    line-height: 1.6;
}


/* Amount */

.commerce-admin-review-amount {
    flex: 0 0 auto;
    text-align: right;
}


    .commerce-admin-review-amount > span {
        display: block;
        margin-bottom: 5px;
        color: var(--commerce-muted);
        font-size: 8px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .07em;
    }


    .commerce-admin-review-amount strong {
        color: var(--commerce-navy);
        font-family: 'Manrope', sans-serif;
        font-size: 32px;
        font-weight: 800;
        letter-spacing: -.045em;
    }


/* Body */

.commerce-admin-review-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, .75fr);
    gap: 22px;
    padding: 24px;
}


/* Details */

.commerce-admin-review-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid #e3eaf3;
    border-radius: 15px;
    overflow: hidden;
}


.commerce-admin-review-detail {
    min-height: 72px;
    padding: 15px;
    border-bottom: 1px solid #e8eef5;
}


    .commerce-admin-review-detail:nth-child(odd) {
        border-right: 1px solid #e8eef5;
    }


    .commerce-admin-review-detail:nth-last-child(-n+2) {
        border-bottom: 0;
    }


    .commerce-admin-review-detail span {
        display: block;
        margin-bottom: 6px;
        color: var(--commerce-muted);
        font-size: 8px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .07em;
    }


    .commerce-admin-review-detail strong {
        display: block;
        color: var(--commerce-navy);
        font-size: 10px;
        line-height: 1.5;
        word-break: break-word;
    }


/* Receipt */

.commerce-admin-receipt {
    min-width: 0;
    padding: 15px;
    background: #f8faff;
    border: 1px solid #e0e8f2;
    border-radius: 15px;
}


.commerce-admin-receipt-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}


    .commerce-admin-receipt-head span {
        display: block;
        color: var(--commerce-navy);
        font-size: 10px;
        font-weight: 800;
    }


    .commerce-admin-receipt-head small {
        display: block;
        margin-top: 2px;
        color: var(--commerce-muted);
        font-size: 8px;
    }


    .commerce-admin-receipt-head > a {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        color: var(--commerce-blue);
        font-size: 8px;
        font-weight: 800;
    }


/* Image */

.commerce-admin-receipt-image {
    position: relative;
    min-height: 210px;
    max-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e0e8f1;
    border-radius: 12px;
}


    .commerce-admin-receipt-image img {
        width: 100%;
        max-height: 360px;
        display: block;
        object-fit: contain;
    }


    .commerce-admin-receipt-image > span {
        position: absolute;
        left: 50%;
        bottom: 12px;
        transform: translateX(-50%);
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 10px;
        color: #fff;
        background: rgba(8,20,38,.78);
        border-radius: 8px;
        opacity: 0;
        font-size: 8px;
        font-weight: 700;
        transition: opacity .18s ease;
    }


    .commerce-admin-receipt-image:hover > span {
        opacity: 1;
    }


/* PDF */

.commerce-admin-pdf-receipt {
    min-height: 150px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 18px;
    background: #fff;
    border: 1px solid #e0e8f1;
    border-radius: 12px;
}


    .commerce-admin-pdf-receipt > span {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #d84949;
        background: #fff0f0;
        border-radius: 12px;
        font-size: 17px;
    }


    .commerce-admin-pdf-receipt > div {
        min-width: 0;
        flex: 1;
    }


    .commerce-admin-pdf-receipt strong {
        display: block;
        color: var(--commerce-navy);
        font-size: 10px;
    }


    .commerce-admin-pdf-receipt small {
        display: block;
        margin-top: 3px;
        color: var(--commerce-muted);
        font-size: 8px;
    }


    .commerce-admin-pdf-receipt > i {
        color: var(--commerce-blue);
        font-size: 10px;
    }


/* Actions */

.commerce-admin-review-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    background: #fafbfd;
    border-top: 1px solid #e5ebf3;
}


.commerce-admin-review-form {
    margin: 0;
}


.commerce-admin-reject-payment,
.commerce-admin-approve-payment {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 15px;
    border-radius: 10px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 800;
    transition: .18s ease;
}


.commerce-admin-reject-payment {
    color: #a43f45;
    background: #fff;
    border: 1px solid #ebcfd2;
}


    .commerce-admin-reject-payment:hover {
        background: #fff1f2;
        border-color: #e6b9bd;
    }


.commerce-admin-approve-payment {
    min-width: 168px;
    color: #fff;
    background: var(--commerce-gradient);
    border: 0;
    box-shadow: 0 10px 25px rgba(47,109,246,.20);
}


    .commerce-admin-approve-payment:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 30px rgba(47,109,246,.27);
    }


    .commerce-admin-approve-payment:disabled {
        cursor: wait;
        opacity: .75;
        transform: none;
    }


/* Error */

.commerce-admin-alert-danger {
    color: #9f363d;
    background: #fff0f1;
    border: 1px solid #efcdd0;
}


/* Responsive */

@media(max-width: 850px) {

    .commerce-admin-review-grid {
        grid-template-columns: 1fr;
    }
}


@media(max-width: 600px) {

    .commerce-admin-payment-review-head {
        flex-direction: column;
    }

    .commerce-admin-review-amount {
        text-align: left;
    }

    .commerce-admin-review-details {
        grid-template-columns: 1fr;
    }

    .commerce-admin-review-detail:nth-child(odd) {
        border-right: 0;
    }

    .commerce-admin-review-detail:nth-last-child(2) {
        border-bottom: 1px solid #e8eef5;
    }

    .commerce-admin-review-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .commerce-admin-review-form,
    .commerce-admin-reject-payment,
    .commerce-admin-approve-payment {
        width: 100%;
    }
}



/* =========================================================
   ADMIN RECEIPT UPLOAD
   ========================================================= */

.commerce-admin-receipt-upload {
    min-height: 78px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    cursor: pointer;
    background: #f8fafd;
    border: 1.5px dashed #c8d5e5;
    border-radius: 12px;
    transition: .18s ease;
}


    .commerce-admin-receipt-upload:hover {
        background: #f4f8ff;
        border-color: var(--commerce-blue-soft);
    }


    .commerce-admin-receipt-upload.has-file {
        background: #f1faf6;
        border-style: solid;
        border-color: #8bcdb0;
    }


    .commerce-admin-receipt-upload input {
        display: none;
    }


.commerce-admin-upload-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--commerce-blue);
    background: #edf3ff;
    border-radius: 10px;
    font-size: 12px;
}


.commerce-admin-receipt-upload.has-file
.commerce-admin-upload-icon {
    color: var(--commerce-success);
    background: var(--commerce-success-bg);
}


.commerce-admin-receipt-upload > div {
    min-width: 0;
    flex: 1;
}


.commerce-admin-receipt-upload strong {
    display: block;
    margin-bottom: 3px;
    color: var(--commerce-navy);
    font-size: 10px;
}


.commerce-admin-receipt-upload > div > span {
    display: block;
    overflow: hidden;
    color: var(--commerce-muted);
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.commerce-admin-upload-action {
    flex: 0 0 auto;
    padding: 7px 9px;
    color: var(--commerce-blue);
    background: #edf3ff;
    border-radius: 8px;
    font-size: 8px;
    font-weight: 800;
}

.commerce-admin-alert-warning {
    color: #8a5c0b;
    background: #fff5df;
    border: 1px solid #efdfb7;
}

/* =========================================================
   MERCHANT NAVIGATION
   ========================================================= */

.commerce-shell-header-inner {
    position: relative;
}

.commerce-merchant-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    margin-right: 20px;
}

    .commerce-merchant-nav a {
        position: relative;
        padding: 10px 11px;
        color: rgba(255,255,255,.56);
        border-radius: 9px;
        font-size: 10px;
        font-weight: 700;
        transition: color .18s ease, background .18s ease;
    }

        .commerce-merchant-nav a:hover {
            color: #fff;
            background: rgba(255,255,255,.05);
        }

        .commerce-merchant-nav a.active {
            color: #fff;
            background: rgba(79,140,255,.13);
        }

            .commerce-merchant-nav a.active::after {
                content: '';
                position: absolute;
                left: 11px;
                right: 11px;
                bottom: 4px;
                height: 2px;
                background: var(--commerce-cyan);
                border-radius: 99px;
            }


/* =========================================================
   MERCHANT DASHBOARD
   ========================================================= */

.commerce-dashboard {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 46px 0 76px;
}


/* Header */

.commerce-dashboard-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 27px;
}

.commerce-dashboard-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: var(--commerce-blue);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.commerce-dashboard-head h1 {
    margin: 0;
    color: var(--commerce-navy);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(31px, 4vw, 42px);
    line-height: 1.08;
    letter-spacing: -.045em;
}

    .commerce-dashboard-head h1 span {
        color: var(--commerce-blue);
    }

.commerce-dashboard-head p {
    margin: 8px 0 0;
    color: var(--commerce-muted);
    font-size: 12px;
}

.commerce-dashboard-head-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.commerce-dashboard-primary-btn,
.commerce-dashboard-secondary-btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border-radius: 11px;
    font-size: 9px;
    font-weight: 800;
    transition: .18s ease;
}

.commerce-dashboard-primary-btn {
    color: #fff;
    background: var(--commerce-gradient);
    box-shadow: 0 10px 25px rgba(47,109,246,.19);
}

    .commerce-dashboard-primary-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 13px 29px rgba(47,109,246,.26);
    }

.commerce-dashboard-secondary-btn {
    color: #52637a;
    background: #fff;
    border: 1px solid #dce5ef;
}

    .commerce-dashboard-secondary-btn:hover {
        color: var(--commerce-blue);
        border-color: #b7cae1;
    }


/* =========================================================
   STORE CARD
   ========================================================= */

.commerce-dashboard-store-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 22px;
    margin-bottom: 17px;
    background: linear-gradient( 135deg, #ffffff, #f8fbff );
    border: 1px solid #dfe7f1;
    border-radius: 18px;
    box-shadow: 0 11px 32px rgba(8,20,38,.045);
}

.commerce-dashboard-store-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.commerce-dashboard-store-avatar {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    background: var(--commerce-gradient);
    border-radius: 14px;
    font-family: 'Manrope', sans-serif;
    font-size: 17px;
    font-weight: 800;
}

    .commerce-dashboard-store-avatar img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

.commerce-dashboard-store-copy {
    min-width: 0;
}

.commerce-dashboard-store-name {
    display: flex;
    align-items: center;
    gap: 9px;
}

    .commerce-dashboard-store-name h2 {
        margin: 0;
        color: var(--commerce-navy);
        font-family: 'Manrope', sans-serif;
        font-size: 17px;
        letter-spacing: -.025em;
    }

.commerce-dashboard-store-copy p {
    margin: 4px 0 0;
    color: var(--commerce-muted);
    font-size: 9px;
}

.commerce-dashboard-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 7px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}

    .commerce-dashboard-status i {
        width: 5px;
        height: 5px;
        border-radius: 50%;
    }

    .commerce-dashboard-status.active {
        color: #167045;
        background: #eaf8f1;
    }

        .commerce-dashboard-status.active i {
            background: #29a66d;
        }

    .commerce-dashboard-status.warning {
        color: #90600c;
        background: #fff5df;
    }

        .commerce-dashboard-status.warning i {
            background: #d69a29;
        }

    .commerce-dashboard-status.danger {
        color: #a23c43;
        background: #fff0f1;
    }

        .commerce-dashboard-status.danger i {
            background: #d84b53;
        }


/* Store metadata */

.commerce-dashboard-store-meta {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 30px;
}

    .commerce-dashboard-store-meta div {
        display: grid;
        gap: 3px;
    }

    .commerce-dashboard-store-meta span {
        color: var(--commerce-muted);
        font-size: 7px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .commerce-dashboard-store-meta strong {
        color: var(--commerce-navy);
        font-size: 10px;
    }


/* =========================================================
   DASHBOARD STATS
   ========================================================= */

.commerce-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 12px;
    margin-bottom: 17px;
}

.commerce-dashboard-stat {
    min-width: 0;
    padding: 18px;
    background: #fff;
    border: 1px solid #e0e8f2;
    border-radius: 16px;
}

.commerce-dashboard-stat-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 15px;
}

.commerce-dashboard-stat-icon {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 10px;
}

    .commerce-dashboard-stat-icon.blue {
        color: #2f6df6;
        background: #edf3ff;
    }

    .commerce-dashboard-stat-icon.purple {
        color: #7657d8;
        background: #f2efff;
    }

    .commerce-dashboard-stat-icon.cyan {
        color: #1687a8;
        background: #ebfaff;
    }

    .commerce-dashboard-stat-icon.green {
        color: #27825b;
        background: #edf9f3;
    }

.commerce-dashboard-stat-label {
    color: var(--commerce-muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.commerce-dashboard-stat-value {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

    .commerce-dashboard-stat-value strong {
        color: var(--commerce-navy);
        font-family: 'Manrope', sans-serif;
        font-size: 27px;
        line-height: 1;
        letter-spacing: -.045em;
    }

    .commerce-dashboard-stat-value > span {
        color: var(--commerce-muted);
        font-size: 10px;
        font-weight: 600;
    }

.commerce-dashboard-plan-value strong,
.commerce-dashboard-date-value strong {
    font-size: 22px;
}

.commerce-dashboard-progress {
    height: 5px;
    margin-top: 15px;
    overflow: hidden;
    background: #edf1f6;
    border-radius: 999px;
}

    .commerce-dashboard-progress span {
        height: 100%;
        display: block;
        background: var(--commerce-gradient);
        border-radius: 999px;
    }

.commerce-dashboard-stat-foot {
    margin-top: 10px;
    color: var(--commerce-muted);
    font-size: 8px;
}


/* =========================================================
   DASHBOARD PANELS
   ========================================================= */

.commerce-dashboard-bottom-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 17px;
    align-items: stretch;
}

    .commerce-dashboard-bottom-grid > .commerce-dashboard-panel {
        height: 100%;
    }

.commerce-dashboard-panel {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e0e8f2;
    border-radius: 17px;
}

.commerce-dashboard-panel-head {
    min-height: 65px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 0 19px;
    border-bottom: 1px solid #e9eef5;
}

    .commerce-dashboard-panel-head h2 {
        margin: 0;
        color: var(--commerce-navy);
        font-family: 'Manrope', sans-serif;
        font-size: 13px;
    }

    .commerce-dashboard-panel-head p {
        margin: 3px 0 0;
        color: var(--commerce-muted);
        font-size: 8px;
    }


/* Actions */

.commerce-dashboard-actions {
    padding: 7px;
}

.commerce-dashboard-action {
    min-height: 68px;
    display: grid;
    grid-template-columns: 38px 1fr auto;
    gap: 11px;
    align-items: center;
    padding: 9px 11px;
    border-radius: 12px;
    transition: background .16s ease;
}

    .commerce-dashboard-action:hover {
        background: #f7faff;
    }

.commerce-dashboard-action-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--commerce-blue);
    background: #edf3ff;
    border-radius: 11px;
    font-size: 11px;
}

.commerce-dashboard-action strong {
    display: block;
    color: var(--commerce-navy);
    font-size: 10px;
}

.commerce-dashboard-action div > span {
    display: block;
    margin-top: 3px;
    color: var(--commerce-muted);
    font-size: 8px;
}

.commerce-dashboard-action > i {
    color: #a0adbd;
    font-size: 9px;
    transition: transform .16s ease, color .16s ease;
}

.commerce-dashboard-action:hover > i {
    color: var(--commerce-blue);
    transform: translateX(2px);
}


/* Setup */

.commerce-dashboard-setup-percent {
    color: var(--commerce-blue);
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
}

.commerce-dashboard-setup-progress {
    height: 5px;
    margin: 16px 19px 5px;
    overflow: hidden;
    background: #edf1f6;
    border-radius: 999px;
}

    .commerce-dashboard-setup-progress span {
        height: 100%;
        display: block;
        background: var(--commerce-gradient);
        border-radius: inherit;
    }

.commerce-dashboard-checklist {
    padding: 7px 13px 13px;
}

.commerce-dashboard-check {
    min-height: 55px;
    display: grid;
    grid-template-columns: 29px 1fr;
    gap: 10px;
    align-items: center;
    padding: 7px;
    border-radius: 10px;
}

    .commerce-dashboard-check > span {
        width: 29px;
        height: 29px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #8c9bad;
        background: #f0f3f7;
        border-radius: 50%;
        font-size: 8px;
    }

    .commerce-dashboard-check.is-complete > span {
        color: #fff;
        background: var(--commerce-success);
    }

    .commerce-dashboard-check strong {
        display: block;
        color: var(--commerce-navy);
        font-size: 9px;
    }

    .commerce-dashboard-check small {
        display: block;
        margin-top: 2px;
        color: var(--commerce-muted);
        font-size: 7.5px;
    }


/* =========================================================
   DASHBOARD RESPONSIVE
   ========================================================= */

@media(max-width: 1000px) {

    .commerce-merchant-nav {
        display: none;
    }

    .commerce-dashboard-stats {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .commerce-dashboard-bottom-grid {
        grid-template-columns: 1fr;
    }
}


@media(max-width: 760px) {

    .commerce-dashboard {
        width: min(100% - 28px, 1180px);
        padding: 32px 0 55px;
    }

    .commerce-dashboard-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .commerce-dashboard-head-actions {
        width: 100%;
    }

    .commerce-dashboard-primary-btn,
    .commerce-dashboard-secondary-btn {
        flex: 1;
    }

    .commerce-dashboard-store-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .commerce-dashboard-store-meta {
        width: 100%;
        grid-template-columns: repeat(3,1fr);
        gap: 15px;
    }
}


@media(max-width: 520px) {

    .commerce-dashboard-stats {
        grid-template-columns: 1fr 1fr;
    }

    .commerce-dashboard-stat {
        padding: 14px;
    }

    .commerce-dashboard-store-meta {
        grid-template-columns: 1fr 1fr;
    }

    .commerce-dashboard-head-actions {
        flex-direction: column;
    }

    .commerce-dashboard-primary-btn,
    .commerce-dashboard-secondary-btn {
        width: 100%;
    }
}


/* =========================================================
   DRAGGABLE CATEGORY MANAGER
   ========================================================= */

.commerce-category-list-container {
    min-width: 0;
}


/* Header */

.commerce-category-list-head {
    display: grid;
    grid-template-columns: 36px minmax(240px, 1fr) 145px 125px 90px;
    gap: 12px;
    align-items: center;
    min-height: 38px;
    padding: 0 17px;
    color: #8997aa;
    background: #fafbfd;
    border-bottom: 1px solid #e8eef5;
    font-size: 7.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}


/* Sortable list */

.commerce-category-sortable-list {
    position: relative;
}


    .commerce-category-sortable-list.is-saving-order::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 3px;
        height: 100%;
        background: var(--commerce-blue);
        animation: commerce-category-saving .8s ease infinite alternate;
    }


@keyframes commerce-category-saving {
    from {
        opacity: .25;
    }

    to {
        opacity: 1;
    }
}


/* Row */

.commerce-category-item {
    display: grid;
    grid-template-columns: 36px minmax(240px, 1fr) 145px 125px 90px;
    gap: 12px;
    align-items: center;
    min-height: 70px;
    padding: 9px 17px;
    background: #fff;
    border-bottom: 1px solid #edf1f6;
    transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}


    .commerce-category-item:last-child {
        border-bottom: 0;
    }


    .commerce-category-item:hover {
        background: #fbfcff;
    }


/* Drag handle */

.commerce-category-drag-handle {
    width: 30px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #a4b0bf;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: grab;
    touch-action: none;
    font-size: 12px;
    transition: color .15s ease, background .15s ease;
}


    .commerce-category-drag-handle:hover {
        color: var(--commerce-blue);
        background: #edf3ff;
    }


    .commerce-category-drag-handle:active {
        cursor: grabbing;
    }


/* Drag states */

.commerce-category-drag-ghost {
    opacity: .35;
    background: #edf4ff;
}


.commerce-category-drag-chosen {
    background: #fff;
    box-shadow: 0 15px 45px rgba(8,20,38,.13);
}


.commerce-category-dragging {
    background: #fff;
    border: 1px solid #cfdced;
    border-radius: 13px;
    box-shadow: 0 18px 55px rgba(8,20,38,.18);
}


.commerce-category-is-sorting {
    user-select: none;
}


/* Category name */

.commerce-category-name-cell {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}


.commerce-category-icon {
    width: 37px;
    height: 37px;
    flex: 0 0 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--commerce-blue);
    background: #edf3ff;
    border-radius: 10px;
    font-size: 11px;
}


.commerce-category-name-cell > div {
    min-width: 0;
}


.commerce-category-name-cell strong {
    display: block;
    overflow: hidden;
    color: var(--commerce-navy);
    font-size: 10.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.commerce-category-name-cell small {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: #98a5b6;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Products */

.commerce-category-product-count {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: var(--commerce-muted);
    font-size: 8px;
}


    .commerce-category-product-count strong {
        color: var(--commerce-navy);
        font-size: 10px;
    }


/* Visibility */

.commerce-category-status {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 8px;
    font-weight: 800;
    transition: opacity .15s ease, transform .15s ease;
}


    .commerce-category-status:hover {
        transform: translateY(-1px);
    }


    .commerce-category-status:disabled {
        opacity: .55;
        cursor: wait;
        transform: none;
    }


    .commerce-category-status > i {
        width: 5px;
        height: 5px;
        border-radius: 50%;
    }


    .commerce-category-status.active {
        color: #197044;
        background: #eaf8f1;
    }


        .commerce-category-status.active > i {
            background: #29a66d;
        }


    .commerce-category-status.inactive {
        color: #68778a;
        background: #edf1f5;
    }


        .commerce-category-status.inactive > i {
            background: #8e9bab;
        }


/* Actions */

.commerce-category-actions {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
}


.commerce-category-action {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 9px;
    transition: .15s ease;
}


    .commerce-category-action.edit {
        color: #687a90;
    }


        .commerce-category-action.edit:hover {
            color: var(--commerce-blue);
            background: #edf3ff;
            border-color: #dbe5f3;
        }


    .commerce-category-action.delete {
        color: #a86469;
    }


        .commerce-category-action.delete:hover {
            color: #b13940;
            background: #fff0f1;
            border-color: #efd4d6;
        }


/* =========================================================
   DELETE MODAL
   ========================================================= */

.commerce-delete-modal {
    width: min(430px, 100%);
}


.commerce-delete-modal-body {
    padding: 33px 27px 24px;
    text-align: center;
}


.commerce-delete-modal-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    color: #b53d44;
    background: #fff0f1;
    border-radius: 14px;
    font-size: 17px;
}


.commerce-delete-modal-body h2 {
    margin: 0 0 7px;
    color: var(--commerce-navy);
    font-family: 'Manrope', sans-serif;
    font-size: 19px;
    letter-spacing: -.03em;
}


.commerce-delete-modal-body p {
    max-width: 340px;
    margin: 0 auto;
    color: var(--commerce-muted);
    font-size: 10px;
    line-height: 1.65;
}


.commerce-category-delete-confirm {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    color: #fff;
    background: #b64148;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 800;
}


    .commerce-category-delete-confirm:hover {
        background: #a9343b;
    }


    .commerce-category-delete-confirm:disabled {
        opacity: .65;
        cursor: wait;
    }


/* =========================================================
   TOAST
   ========================================================= */

.commerce-toast {
    position: fixed;
    right: 22px;
    bottom: 22px;
    min-width: 230px;
    max-width: 360px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    visibility: hidden;
    opacity: 0;
    color: #1b5e3e;
    background: rgba(242,251,247,.98);
    border: 1px solid #cce8da;
    border-radius: 13px;
    box-shadow: 0 18px 45px rgba(8,20,38,.14);
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    font-size: 9.5px;
    font-weight: 700;
    z-index: 8000;
}


    .commerce-toast.is-visible {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }


.commerce-toast-icon {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--commerce-success);
    border-radius: 8px;
    font-size: 8px;
}


.commerce-toast.is-error {
    color: #8f3339;
    background: rgba(255,245,246,.99);
    border-color: #ebcdd0;
}


    .commerce-toast.is-error
    .commerce-toast-icon {
        background: #bb444b;
    }


/* =========================================================
   MOBILE CATEGORY LIST
   ========================================================= */

@media(max-width: 760px) {

    .commerce-category-list-head {
        display: none;
    }


    .commerce-category-item {
        grid-template-columns: 30px minmax(0, 1fr) auto;
        grid-template-areas:
            "drag name actions"
            "drag products status";
        row-gap: 7px;
        min-height: 84px;
        padding: 11px 13px;
    }


    .commerce-category-drag-handle {
        grid-area: drag;
        align-self: stretch;
        height: auto;
    }


    .commerce-category-name-cell {
        grid-area: name;
    }


    .commerce-category-product-count {
        grid-area: products;
        padding-left: 48px;
    }


    .commerce-category-status {
        grid-area: status;
        justify-self: end;
    }


    .commerce-category-actions {
        grid-area: actions;
    }


    .commerce-toast {
        left: 14px;
        right: 14px;
        bottom: 14px;
        max-width: none;
    }
}

/* =========================================================
   MERCHANT MANAGER PAGES
   ========================================================= */

.commerce-manager-page {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 44px 0 76px;
}


/* Page heading */

.commerce-manager-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 25px;
}

    .commerce-manager-head h1 {
        margin: 0;
        color: var(--commerce-navy);
        font-family: 'Manrope', sans-serif;
        font-size: 34px;
        font-weight: 800;
        letter-spacing: -.045em;
    }

    .commerce-manager-head p {
        margin: 7px 0 0;
        color: var(--commerce-muted);
        font-size: 11px;
    }


/* Alerts */

.commerce-manager-alert {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    margin-bottom: 17px;
    border-radius: 12px;
    font-size: 10px;
    line-height: 1.5;
}

    .commerce-manager-alert.success {
        color: #197044;
        background: #eaf8f1;
        border: 1px solid #cce9dc;
    }

    .commerce-manager-alert.error {
        color: #9f373d;
        background: #fff0f1;
        border: 1px solid #efcdd0;
    }


/* =========================================================
   CATEGORY SUMMARY
   ========================================================= */

.commerce-category-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 11px;
    margin-bottom: 17px;
}

    .commerce-category-summary > div {
        padding: 15px 17px;
        background: #fff;
        border: 1px solid #e0e8f2;
        border-radius: 14px;
    }

    .commerce-category-summary span {
        display: block;
        margin-bottom: 8px;
        color: var(--commerce-muted);
        font-size: 7.5px;
        font-weight: 800;
        letter-spacing: .07em;
        text-transform: uppercase;
    }

    .commerce-category-summary strong {
        color: var(--commerce-navy);
        font-family: 'Manrope', sans-serif;
        font-size: 22px;
        line-height: 1;
    }


/* =========================================================
   MANAGER PANEL
   ========================================================= */

.commerce-manager-panel {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e0e8f2;
    border-radius: 18px;
    box-shadow: 0 10px 32px rgba(8,20,38,.035);
}

.commerce-manager-panel-head {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 20px;
    border-bottom: 1px solid #e9eef5;
}

    .commerce-manager-panel-head h2 {
        margin: 0;
        color: var(--commerce-navy);
        font-family: 'Manrope', sans-serif;
        font-size: 13px;
    }

    .commerce-manager-panel-head p {
        margin: 3px 0 0;
        color: var(--commerce-muted);
        font-size: 8.5px;
    }


/* =========================================================
   SEARCH
   ========================================================= */

.commerce-manager-search {
    position: relative;
    width: 250px;
    height: 38px;
    display: flex;
    align-items: center;
}

    .commerce-manager-search > i {
        position: absolute;
        left: 12px;
        color: #8797aa;
        font-size: 10px;
        pointer-events: none;
    }

    .commerce-manager-search input {
        width: 100%;
        height: 100%;
        padding: 0 36px 0 32px;
        color: var(--commerce-text);
        background: #f8fafd;
        border: 1.5px solid #dbe4ef;
        border-radius: 10px;
        outline: none;
        font-size: 10px;
        transition: .18s ease;
    }

        .commerce-manager-search input:focus {
            background: #fff;
            border-color: var(--commerce-blue);
            box-shadow: 0 0 0 3px rgba(47,109,246,.07);
        }

    .commerce-manager-search button {
        position: absolute;
        right: 7px;
        width: 25px;
        height: 25px;
        display: none;
        align-items: center;
        justify-content: center;
        color: #7f8d9e;
        background: transparent;
        border: 0;
        border-radius: 7px;
        cursor: pointer;
        font-size: 9px;
    }

    .commerce-manager-search.has-value button {
        display: flex;
    }

    .commerce-manager-search button:hover {
        background: #edf2f8;
    }


/* =========================================================
   CATEGORY TABLE
   ========================================================= */

.commerce-category-table-wrap {
    overflow-x: auto;
}

.commerce-category-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

    .commerce-category-table th {
        padding: 11px 17px;
        color: #8997aa;
        background: #fafbfd;
        border-bottom: 1px solid #e8eef5;
        text-align: left;
        font-size: 7.5px;
        font-weight: 800;
        letter-spacing: .07em;
        text-transform: uppercase;
    }

    .commerce-category-table td {
        padding: 14px 17px;
        border-bottom: 1px solid #edf1f6;
        vertical-align: middle;
        font-size: 10px;
    }

    .commerce-category-table tbody tr:last-child td {
        border-bottom: 0;
    }

.commerce-category-row {
    transition: background .15s ease;
}

    .commerce-category-row:hover {
        background: #fbfcff;
    }

.commerce-category-order-column {
    width: 88px;
}


/* Order */

.commerce-category-order {
    display: flex;
    gap: 4px;
}

.commerce-category-order-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6f8095;
    background: #f4f7fa;
    border: 1px solid #e0e7f0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 8px;
    transition: .15s ease;
}

    .commerce-category-order-btn:hover:not(:disabled) {
        color: var(--commerce-blue);
        background: #edf3ff;
        border-color: #cfdbeb;
    }

    .commerce-category-order-btn:disabled {
        opacity: .35;
        cursor: default;
    }


/* Name */

.commerce-category-name-cell {
    display: flex;
    align-items: center;
    gap: 11px;
}

.commerce-category-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--commerce-blue);
    background: #edf3ff;
    border-radius: 10px;
    font-size: 11px;
}

.commerce-category-name-cell strong {
    display: block;
    color: var(--commerce-navy);
    font-size: 10px;
}

.commerce-category-name-cell small {
    display: block;
    margin-top: 3px;
    color: #98a5b6;
    font-size: 8px;
}


/* Product count */

.commerce-category-product-count {
    color: #586a81;
    font-size: 9px;
    font-weight: 600;
}


/* Status */

.commerce-category-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font-size: 8px;
    font-weight: 800;
}

    .commerce-category-status > i {
        width: 5px;
        height: 5px;
        border-radius: 50%;
    }

    .commerce-category-status.active {
        color: #197044;
        background: #eaf8f1;
    }

        .commerce-category-status.active > i {
            background: #29a66d;
        }

    .commerce-category-status.inactive {
        color: #68778a;
        background: #edf1f5;
    }

        .commerce-category-status.inactive > i {
            background: #8e9bab;
        }


/* Actions */

.commerce-category-actions {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
}

.commerce-category-action {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 9px;
    transition: .15s ease;
}

    .commerce-category-action.edit {
        color: #6a7b91;
    }

        .commerce-category-action.edit:hover {
            color: var(--commerce-blue);
            background: #edf3ff;
            border-color: #dbe5f3;
        }

    .commerce-category-action.delete {
        color: #a86569;
    }

        .commerce-category-action.delete:hover {
            color: #b13940;
            background: #fff0f1;
            border-color: #efd4d6;
        }

.commerce-inline-form {
    margin: 0;
}


/* =========================================================
   EMPTY STATES
   ========================================================= */

.commerce-manager-empty,
.commerce-manager-search-empty {
    text-align: center;
}

.commerce-manager-empty {
    padding: 65px 20px 70px;
}

.commerce-manager-empty-icon {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    color: var(--commerce-blue);
    background: #edf3ff;
    border-radius: 15px;
    font-size: 18px;
}

.commerce-manager-empty h2 {
    margin: 0 0 7px;
    color: var(--commerce-navy);
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
}

.commerce-manager-empty p {
    max-width: 390px;
    margin: 0 auto 18px;
    color: var(--commerce-muted);
    font-size: 10px;
    line-height: 1.6;
}

.commerce-manager-search-empty {
    display: none;
    padding: 50px 20px;
}

    .commerce-manager-search-empty > i {
        display: block;
        margin-bottom: 9px;
        color: #9aabc0;
        font-size: 18px;
    }

    .commerce-manager-search-empty strong {
        display: block;
        color: var(--commerce-navy);
        font-size: 10px;
    }

    .commerce-manager-search-empty span {
        display: block;
        margin-top: 4px;
        color: var(--commerce-muted);
        font-size: 8px;
    }


/* =========================================================
   COMMERCE MODALS
   ========================================================= */

.commerce-modal-open {
    overflow: hidden;
}

.commerce-modal-backdrop {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    visibility: hidden;
    opacity: 0;
    background: rgba(4, 13, 25, .55);
    backdrop-filter: blur(5px);
    pointer-events: none;
    transition: opacity .18s ease, visibility .18s ease;
    z-index: 5000;
}

    .commerce-modal-backdrop.is-open {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

.commerce-modal {
    width: min(470px, 100%);
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 20px;
    box-shadow: 0 30px 90px rgba(4,13,25,.28);
    transform: translateY(10px) scale(.985);
    transition: transform .18s ease;
}

.commerce-modal-backdrop.is-open
.commerce-modal {
    transform: translateY(0) scale(1);
}

.commerce-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 21px 22px 18px;
    border-bottom: 1px solid #e8eef5;
}

    .commerce-modal-head > div > span {
        display: block;
        margin-bottom: 5px;
        color: var(--commerce-blue);
        font-size: 8px;
        font-weight: 800;
        letter-spacing: .09em;
        text-transform: uppercase;
    }

    .commerce-modal-head h2 {
        margin: 0;
        color: var(--commerce-navy);
        font-family: 'Manrope', sans-serif;
        font-size: 19px;
        letter-spacing: -.03em;
    }

    .commerce-modal-head p {
        margin: 5px 0 0;
        color: var(--commerce-muted);
        font-size: 9px;
    }

.commerce-modal-close {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #728197;
    background: #f3f6f9;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    font-size: 10px;
}

    .commerce-modal-close:hover {
        color: var(--commerce-navy);
        background: #eaf0f6;
    }

.commerce-modal-body {
    padding: 22px;
}

.commerce-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding: 15px 22px;
    background: #fafbfd;
    border-top: 1px solid #e8eef5;
}

.commerce-modal-secondary {
    min-height: 42px;
    padding: 0 14px;
    color: #5c6d82;
    background: #fff;
    border: 1px solid #dae3ed;
    border-radius: 10px;
    cursor: pointer;
    font-size: 9px;
    font-weight: 800;
}

    .commerce-modal-secondary:hover {
        background: #f5f7fa;
    }


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width: 760px) {

    .commerce-manager-page {
        width: min(100% - 28px, 1180px);
        padding: 32px 0 55px;
    }

    .commerce-manager-head {
        align-items: flex-start;
        flex-direction: column;
    }

        .commerce-manager-head >
        .commerce-dashboard-primary-btn {
            width: 100%;
        }

    .commerce-category-summary {
        grid-template-columns: 1fr 1fr;
    }

    .commerce-manager-panel-head {
        align-items: flex-start;
        flex-direction: column;
        padding: 16px;
    }

    .commerce-manager-search {
        width: 100%;
    }
}


@media(max-width: 500px) {

    .commerce-category-summary {
        grid-template-columns: 1fr 1fr;
    }

    .commerce-modal-backdrop {
        align-items: flex-end;
        padding: 10px;
    }

    .commerce-modal {
        width: 100%;
        border-radius: 20px 20px 14px 14px;
    }
}

.commerce-manager-head-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

@media(max-width: 760px) {

    .commerce-manager-head-actions {
        width: 100%;
    }

        .commerce-manager-head-actions
        .commerce-dashboard-primary-btn,
        .commerce-manager-head-actions
        .commerce-dashboard-secondary-btn {
            flex: 1;
        }
}


/* =========================================================
   COMMERCE BUTTON NORMALIZATION
   ========================================================= */

.commerce-dashboard-primary-btn,
button.commerce-dashboard-primary-btn,
a.commerce-dashboard-primary-btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    margin: 0;
    color: #fff;
    background: var(--commerce-gradient);
    border: 0;
    outline: 0;
    border-radius: 11px;
    box-shadow: 0 10px 25px rgba(47,109,246,.19);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}


    .commerce-dashboard-primary-btn:hover:not(:disabled) {
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 13px 29px rgba(47,109,246,.26);
    }


    .commerce-dashboard-primary-btn:focus-visible {
        outline: 3px solid rgba(47,109,246,.18);
        outline-offset: 2px;
    }


    .commerce-dashboard-primary-btn:disabled {
        opacity: .68;
        cursor: wait;
        transform: none;
        box-shadow: 0 7px 18px rgba(47,109,246,.14);
    }



.commerce-dashboard-secondary-btn,
button.commerce-dashboard-secondary-btn,
a.commerce-dashboard-secondary-btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    margin: 0;
    color: #52637a;
    background: #fff;
    border: 1px solid #dce5ef;
    outline: 0;
    border-radius: 11px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}


    .commerce-dashboard-secondary-btn:hover:not(:disabled) {
        color: var(--commerce-blue);
        background: #fbfdff;
        border-color: #b7cae1;
        transform: translateY(-1px);
    }


    .commerce-dashboard-secondary-btn:focus-visible {
        outline: 3px solid rgba(47,109,246,.10);
        outline-offset: 2px;
    }

/* =========================================================
   DASHBOARD CATEGORIES
   ========================================================= */

.commerce-dashboard-category-panel {
    margin-bottom: 17px;
    overflow: visible;
    background: #fff;
    border: 1px solid #e0e8f2;
    border-radius: 17px;
    box-shadow: 0 8px 28px rgba(8,20,38,.025);
}


.commerce-dashboard-category-panel-head {
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 19px;
    border-bottom: 1px solid #e9eef5;
}


.commerce-dashboard-category-kicker {
    display: block;
    margin-bottom: 3px;
    color: var(--commerce-blue);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}


.commerce-dashboard-category-panel-head h2 {
    margin: 0;
    color: var(--commerce-navy);
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
}


.commerce-dashboard-category-panel-head p {
    margin: 3px 0 0;
    color: var(--commerce-muted);
    font-size: 8.5px;
}


.commerce-dashboard-category-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}



/* =========================================================
   CATEGORY GRID
   ========================================================= */

.commerce-dashboard-category-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
    padding: 17px;
}



/* =========================================================
   CATEGORY CARD
   ========================================================= */

.commerce-dashboard-category-card {
    position: relative;
    min-width: 0;
    background: #fbfcff;
    border: 1px solid #e0e8f2;
    border-radius: 14px;
    transition: border-color .17s ease, box-shadow .17s ease, transform .17s ease;
}


    .commerce-dashboard-category-card:hover {
        z-index: 3;
        border-color: #c7d7e9;
        box-shadow: 0 11px 27px rgba(8,20,38,.08);
        transform: translateY(-2px);
    }


.commerce-dashboard-category-card-link {
    position: relative;
    min-height: 130px;
    display: flex;
    flex-direction: column;
    padding: 15px;
    color: inherit;
}


.commerce-dashboard-category-card-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--commerce-blue);
    background: #edf3ff;
    border-radius: 10px;
    font-size: 11px;
}


.commerce-dashboard-category-card-copy {
    min-width: 0;
    margin-top: auto;
    padding-top: 18px;
}


    .commerce-dashboard-category-card-copy strong {
        display: block;
        overflow: hidden;
        color: var(--commerce-navy);
        font-size: 10.5px;
        font-weight: 800;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    .commerce-dashboard-category-card-copy span {
        display: block;
        margin-top: 3px;
        color: var(--commerce-muted);
        font-size: 8px;
    }


.commerce-dashboard-category-arrow {
    position: absolute;
    right: 14px;
    bottom: 16px;
    color: #9eabba;
    font-size: 8px;
    transition: transform .16s ease, color .16s ease;
}


.commerce-dashboard-category-card:hover
.commerce-dashboard-category-arrow {
    color: var(--commerce-blue);
    transform: translateX(2px);
}



/* Hidden status */

.commerce-dashboard-category-hidden {
    position: absolute;
    top: 13px;
    right: 13px;
    padding: 4px 7px;
    color: #67778b;
    background: #edf1f5;
    border-radius: 999px;
    font-size: 6.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}



/* =========================================================
   EDGE DRAG HANDLE
   ========================================================= */

.commerce-dashboard-category-drag {
    position: absolute;
    top: 50%;
    left: -10px;
    width: 27px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    color: #73849a;
    background: #fff;
    border: 1px solid #d8e2ed;
    border-radius: 9px;
    box-shadow: 0 6px 18px rgba(8,20,38,.11);
    cursor: grab;
    appearance: none;
    -webkit-appearance: none;
    transform: translate(-4px, -50%);
    transition: visibility .14s ease, opacity .14s ease, transform .14s ease, color .14s ease, border-color .14s ease;
    z-index: 10;
}


.commerce-dashboard-category-card:hover
.commerce-dashboard-category-drag {
    visibility: visible;
    opacity: 1;
    transform: translate(0, -50%);
}


.commerce-dashboard-category-drag:hover {
    color: var(--commerce-blue);
    border-color: #b9cee6;
}


.commerce-dashboard-category-drag:active {
    cursor: grabbing;
}



/* Sort states */

.commerce-dashboard-category-drag-ghost {
    opacity: .30;
    background: #edf4ff;
}


.commerce-dashboard-category-drag-chosen {
    z-index: 100;
    border-color: #afc8e8;
    box-shadow: 0 18px 50px rgba(8,20,38,.16);
    transform: scale(1.015);
}


.commerce-dashboard-category-dragging {
    background: #fff;
    box-shadow: 0 22px 60px rgba(8,20,38,.20);
}


.commerce-category-is-sorting {
    user-select: none;
}



/* =========================================================
   ORDER STATUS
   ========================================================= */

.commerce-dashboard-category-order-status {
    min-height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #8b98a9;
    background: #fafbfd;
    border-top: 1px solid #edf1f6;
    border-radius: 0 0 17px 17px;
    font-size: 7.5px;
    transition: color .15s ease, background .15s ease;
}


    .commerce-dashboard-category-order-status.is-saving {
        color: var(--commerce-blue);
        background: #f6f9ff;
    }


    .commerce-dashboard-category-order-status.is-saved {
        color: #24734d;
        background: #f2faf6;
    }



/* =========================================================
   EMPTY CATEGORY STATE
   ========================================================= */

.commerce-dashboard-category-empty-wide {
    width: calc(100% - 34px);
    min-height: 105px;
    display: grid;
    grid-template-columns: 46px 1fr auto;
    gap: 14px;
    align-items: center;
    margin: 17px;
    padding: 16px 18px;
    color: var(--commerce-text);
    background: #fbfcff;
    border: 1.5px dashed #cfdbe8;
    border-radius: 14px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    font-family: 'Inter', sans-serif;
    text-align: left;
    transition: background .17s ease, border-color .17s ease, transform .17s ease;
}


    .commerce-dashboard-category-empty-wide:hover {
        background: #f7faff;
        border-color: #b8cee6;
        transform: translateY(-1px);
    }


.commerce-dashboard-category-empty-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--commerce-blue);
    background: #edf3ff;
    border-radius: 13px;
    font-size: 14px;
}


.commerce-dashboard-category-empty-wide strong {
    display: block;
    color: var(--commerce-navy);
    font-size: 11px;
}


.commerce-dashboard-category-empty-wide > div > span {
    display: block;
    margin-top: 4px;
    color: var(--commerce-muted);
    font-size: 8.5px;
}


.commerce-dashboard-category-empty-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 11px;
    color: var(--commerce-blue);
    background: #edf3ff;
    border-radius: 9px;
    font-size: 8px;
    font-weight: 800;
}



/* Dashboard quick action button */

button.commerce-dashboard-action {
    width: 100%;
    border: 0;
    outline: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    font-family: 'Inter', sans-serif;
    text-align: left;
}



/* =========================================================
   TOUCH
   ========================================================= */

@media (hover: none) {

    .commerce-dashboard-category-drag {
        left: -5px;
        visibility: visible;
        opacity: .62;
        transform: translate(0, -50%);
    }
}



/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width: 1000px) {

    .commerce-dashboard-category-list {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
}


@media(max-width: 700px) {

    .commerce-dashboard-category-panel-head {
        align-items: flex-start;
        flex-direction: column;
    }


    .commerce-dashboard-category-head-actions {
        width: 100%;
    }


        .commerce-dashboard-category-head-actions > * {
            flex: 1;
        }


    .commerce-dashboard-category-list {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 9px;
        padding: 14px;
    }


    .commerce-dashboard-category-empty-wide {
        width: calc(100% - 28px);
        grid-template-columns: 42px 1fr;
        margin: 14px;
    }


    .commerce-dashboard-category-empty-action {
        grid-column: 1 / -1;
        justify-content: center;
    }
}


@media(max-width: 430px) {

    .commerce-dashboard-category-list {
        grid-template-columns: 1fr;
    }
}

.commerce-manager-head-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}


@media(max-width: 760px) {

    .commerce-manager-head-actions {
        width: 100%;
    }


        .commerce-manager-head-actions > .commerce-dashboard-primary-btn,
        .commerce-manager-head-actions > .commerce-dashboard-secondary-btn {
            flex: 1;
        }
}


/* =========================================================
   PRODUCT MANAGER
   ========================================================= */

.commerce-manager-alert.warning {
    color: #865a0c;
    background: #fff6e2;
    border: 1px solid #efdfb9;
}


/* =========================================================
   PRODUCT SUMMARY
   ========================================================= */

.commerce-product-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 17px;
}

    .commerce-product-summary > div {
        min-width: 0;
        padding: 16px 17px;
        background: #fff;
        border: 1px solid #e0e8f2;
        border-radius: 14px;
    }

        .commerce-product-summary > div > span:first-child {
            display: block;
            margin-bottom: 8px;
            color: var(--commerce-muted);
            font-size: 7.5px;
            font-weight: 800;
            letter-spacing: .07em;
            text-transform: uppercase;
        }

        .commerce-product-summary > div > strong {
            display: flex;
            align-items: baseline;
            gap: 4px;
            color: var(--commerce-navy);
            font-family: 'Manrope', sans-serif;
            font-size: 22px;
            line-height: 1;
        }

            .commerce-product-summary > div > strong small {
                color: #8a98aa;
                font-family: 'Inter', sans-serif;
                font-size: 9px;
                font-weight: 700;
            }

        .commerce-product-summary > div > small {
            display: block;
            margin-top: 7px;
            color: var(--commerce-muted);
            font-size: 7.5px;
        }

.commerce-product-storage-progress {
    height: 4px;
    margin-top: 10px;
    overflow: hidden;
    background: #edf1f5;
    border-radius: 999px;
}

    .commerce-product-storage-progress span {
        height: 100%;
        display: block;
        background: var(--commerce-gradient);
        border-radius: inherit;
        transition: width .25s ease;
    }


/* =========================================================
   PRODUCT TOOLBAR
   ========================================================= */

.commerce-product-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.commerce-product-filter {
    height: 38px;
    min-width: 165px;
    padding: 0 32px 0 11px;
    color: #53647a;
    background: #f8fafd;
    border: 1.5px solid #dbe4ef;
    border-radius: 10px;
    outline: 0;
    cursor: pointer;
    font-size: 9px;
}

    .commerce-product-filter:focus {
        background: #fff;
        border-color: var(--commerce-blue);
        box-shadow: 0 0 0 3px rgba(47,109,246,.07);
    }


/* =========================================================
   PRODUCT LIST
   ========================================================= */

.commerce-product-list {
    min-width: 0;
}

.commerce-product-list-head,
.commerce-product-row {
    display: grid;
    grid-template-columns: minmax(260px, 1.6fr) minmax(130px, .8fr) minmax(120px, .7fr) 85px 110px;
    gap: 14px;
    align-items: center;
}

.commerce-product-list-head {
    min-height: 38px;
    padding: 0 18px;
    color: #8997aa;
    background: #fafbfd;
    border-bottom: 1px solid #e8eef5;
    font-size: 7.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.commerce-product-row {
    min-height: 79px;
    padding: 10px 18px;
    background: #fff;
    border-bottom: 1px solid #edf1f6;
    transition: background .15s ease;
}

    .commerce-product-row:last-child {
        border-bottom: 0;
    }

    .commerce-product-row:hover {
        background: #fbfcff;
    }

.commerce-product-cell-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.commerce-product-thumb {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #94a4b7;
    background: #f0f4f8;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    font-size: 15px;
}

    .commerce-product-thumb img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

.commerce-product-cell-main > div:last-child {
    min-width: 0;
}

.commerce-product-cell-main strong {
    display: block;
    overflow: hidden;
    color: var(--commerce-navy);
    font-size: 10.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.commerce-product-cell-main small {
    display: block;
    margin-top: 4px;
    color: var(--commerce-muted);
    font-size: 7.5px;
}

.commerce-product-featured {
    color: #a47415 !important;
}

    .commerce-product-featured i {
        margin-right: 3px;
    }

.commerce-product-category-cell {
    overflow: hidden;
    color: #56687f;
    font-size: 9px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.commerce-product-price-cell strong {
    display: block;
    color: var(--commerce-navy);
    font-size: 10px;
}

.commerce-product-price-cell small {
    display: block;
    margin-top: 3px;
    color: #9a6970;
    font-size: 8px;
    text-decoration: line-through;
}

.commerce-product-image-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #68798f;
    font-size: 9px;
}

    .commerce-product-image-count i {
        color: #9aa8b8;
    }

.commerce-product-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 7.5px;
    font-weight: 800;
}

    .commerce-product-status i {
        width: 5px;
        height: 5px;
        border-radius: 50%;
    }

    .commerce-product-status.available {
        color: #197044;
        background: #eaf8f1;
    }

        .commerce-product-status.available i {
            background: #29a66d;
        }

    .commerce-product-status.unavailable {
        color: #68778a;
        background: #edf1f5;
    }

        .commerce-product-status.unavailable i {
            background: #8e9bab;
        }


/* =========================================================
   PRODUCT DRAWER
   ========================================================= */

.commerce-product-drawer-open {
    overflow: hidden;
}

.commerce-product-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 6990;
    visibility: hidden;
    opacity: 0;
    background: rgba(4,13,25,.48);
    backdrop-filter: blur(3px);
    pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease;
}

    .commerce-product-drawer-backdrop.is-open {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

.commerce-product-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 7000;
    width: min(690px, 100vw);
    height: 100vh;
    visibility: hidden;
    background: #f6f9fc;
    box-shadow: -25px 0 70px rgba(4,13,25,.19);
    transform: translateX(102%);
    transition: transform .28s var(--commerce-ease), visibility .28s ease;
}

    .commerce-product-drawer.is-open {
        visibility: visible;
        transform: translateX(0);
    }

    .commerce-product-drawer form {
        height: 100%;
        display: grid;
        grid-template-rows: auto 1fr auto;
    }


/* Drawer header */

.commerce-product-drawer-head {
    min-height: 94px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    padding: 21px 24px 18px;
    background: #fff;
    border-bottom: 1px solid #e0e7f0;
}

    .commerce-product-drawer-head > div > span {
        display: block;
        margin-bottom: 4px;
        color: var(--commerce-blue);
        font-size: 7.5px;
        font-weight: 800;
        letter-spacing: .09em;
        text-transform: uppercase;
    }

    .commerce-product-drawer-head h2 {
        margin: 0;
        color: var(--commerce-navy);
        font-family: 'Manrope', sans-serif;
        font-size: 21px;
        letter-spacing: -.035em;
    }

    .commerce-product-drawer-head p {
        margin: 4px 0 0;
        color: var(--commerce-muted);
        font-size: 8.5px;
    }

.commerce-product-drawer-close {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    color: #718197;
    background: #f2f5f8;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    appearance: none;
    font-size: 10px;
}

    .commerce-product-drawer-close:hover {
        color: var(--commerce-navy);
        background: #e9eef4;
    }


/* Drawer body */

.commerce-product-drawer-body {
    min-height: 0;
    overflow-y: auto;
    padding: 18px;
}


/* =========================================================
   PRODUCT FORM SECTIONS
   ========================================================= */

.commerce-product-form-section {
    margin-bottom: 13px;
    padding: 19px;
    background: #fff;
    border: 1px solid #dfe7f1;
    border-radius: 16px;
}

    .commerce-product-form-section:last-child {
        margin-bottom: 0;
    }

.commerce-product-form-section-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 18px;
}

    .commerce-product-form-section-head > div {
        min-width: 0;
    }

    .commerce-product-form-section-head h3 {
        margin: 0;
        color: var(--commerce-navy);
        font-family: 'Manrope', sans-serif;
        font-size: 12px;
    }

    .commerce-product-form-section-head p {
        margin: 3px 0 0;
        color: var(--commerce-muted);
        font-size: 8px;
    }

.commerce-product-image-counter {
    margin-left: auto;
    padding: 5px 7px;
    color: #65758a;
    background: #f0f4f8;
    border-radius: 7px;
    font-size: 7px;
    font-weight: 800;
}


/* =========================================================
   IMAGE DROPZONE
   ========================================================= */

.commerce-product-image-dropzone {
    width: 100%;
    min-height: 112px;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 13px;
    align-items: center;
    padding: 16px;
    color: inherit;
    background: #fbfcff;
    border: 1.5px dashed #cbd9e8;
    border-radius: 13px;
    cursor: pointer;
    appearance: none;
    text-align: left;
    transition: background .17s ease, border-color .17s ease, transform .17s ease;
}

    .commerce-product-image-dropzone:hover,
    .commerce-product-image-dropzone.is-dragging {
        background: #f5f9ff;
        border-color: #9ebbe3;
    }

    .commerce-product-image-dropzone.is-dragging {
        transform: scale(.997);
    }

    .commerce-product-image-dropzone > span:first-child {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--commerce-blue);
        background: #edf3ff;
        border-radius: 12px;
        font-size: 14px;
    }

    .commerce-product-image-dropzone strong {
        display: block;
        color: var(--commerce-navy);
        font-size: 10px;
    }

    .commerce-product-image-dropzone small {
        display: block;
        margin-top: 4px;
        color: var(--commerce-muted);
        font-size: 8px;
    }

.commerce-product-image-browse {
    padding: 8px 10px;
    color: var(--commerce-blue);
    background: #edf3ff;
    border-radius: 9px;
    font-size: 8px;
    font-weight: 800;
}


/* =========================================================
   IMAGE PREVIEWS
   ========================================================= */

.commerce-product-image-preview-section {
    margin-top: 13px;
}

.commerce-product-image-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 8px;
    color: var(--commerce-muted);
    font-size: 7px;
}

.commerce-product-image-previews {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 8px;
}

.commerce-product-image-preview {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #eef2f6;
    border: 1px solid #dce4ed;
    border-radius: 11px;
    cursor: default;
}

    .commerce-product-image-preview img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

.commerce-product-image-primary {
    position: absolute;
    left: 6px;
    bottom: 6px;
    padding: 4px 6px;
    color: #fff;
    background: rgba(8,20,38,.78);
    border-radius: 6px;
    font-size: 6px;
    font-weight: 800;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
}

.commerce-product-image-remove,
.commerce-product-image-drag {
    position: absolute;
    width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    visibility: hidden;
    opacity: 0;
    color: #fff;
    background: rgba(8,20,38,.75);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    appearance: none;
    transition: opacity .14s ease;
}

.commerce-product-image-remove {
    top: 6px;
    right: 6px;
}

.commerce-product-image-drag {
    top: 6px;
    left: 6px;
    cursor: grab;
}

    .commerce-product-image-drag:active {
        cursor: grabbing;
    }

.commerce-product-image-preview:hover
.commerce-product-image-remove,
.commerce-product-image-preview:hover
.commerce-product-image-drag {
    visibility: visible;
    opacity: 1;
}

.commerce-product-image-ghost {
    opacity: .3;
}

.commerce-product-image-chosen {
    box-shadow: 0 12px 30px rgba(8,20,38,.18);
}

.commerce-product-compression-note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 11px;
    color: #627389;
    font-size: 7.5px;
    line-height: 1.5;
}

    .commerce-product-compression-note i {
        margin-top: 1px;
        color: var(--commerce-blue);
    }


/* =========================================================
   CATEGORY
   ========================================================= */

.commerce-product-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.commerce-product-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    color: var(--commerce-blue);
    background: transparent;
    border: 0;
    cursor: pointer;
    appearance: none;
    font-size: 7.5px;
    font-weight: 800;
}

.commerce-product-select-wrap {
    position: relative;
}

    .commerce-product-select-wrap > i:first-child {
        position: absolute;
        top: 50%;
        left: 13px;
        z-index: 2;
        color: #8292a6;
        font-size: 9px;
        transform: translateY(-50%);
        pointer-events: none;
    }

    .commerce-product-select-wrap > i:last-child {
        position: absolute;
        top: 50%;
        right: 13px;
        color: #8292a6;
        font-size: 8px;
        transform: translateY(-50%);
        pointer-events: none;
    }

.commerce-product-select {
    width: 100%;
    height: 44px;
    padding: 0 35px 0 36px;
    color: var(--commerce-text);
    background: #fff;
    border: 1.5px solid #cfdbea;
    border-radius: 11px;
    outline: none;
    appearance: none;
    cursor: pointer;
    font-size: 10px;
}

    .commerce-product-select:focus {
        border-color: var(--commerce-blue);
        box-shadow: 0 0 0 4px rgba(47,109,246,.07);
    }

.commerce-product-quick-category {
    display: none;
    grid-template-columns: 1fr auto;
    gap: 7px;
    margin-top: 8px;
}

    .commerce-product-quick-category.is-open {
        display: grid;
    }


/* Spinner used on light secondary button */

.commerce-spinner-blue {
    border-color: rgba(47,109,246,.22);
    border-top-color: var(--commerce-blue);
}


/* =========================================================
   TEXTAREA
   ========================================================= */

.commerce-product-textarea {
    width: 100%;
    min-height: 108px;
    padding: 12px 13px;
    resize: vertical;
    color: var(--commerce-text);
    background: #fff;
    border: 1.5px solid #cfdbea;
    border-radius: 11px;
    outline: none;
    font-size: 10px;
    line-height: 1.55;
}

    .commerce-product-textarea:focus {
        border-color: var(--commerce-blue);
        box-shadow: 0 0 0 4px rgba(47,109,246,.07);
    }

.commerce-product-character-count {
    margin-top: 5px;
    color: #9aa7b7;
    font-size: 7px;
    text-align: right;
}


/* =========================================================
   PRICE
   ========================================================= */

.commerce-product-price-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
}

.commerce-product-money-input {
    height: 44px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #fff;
    border: 1.5px solid #cfdbea;
    border-radius: 11px;
    transition: border-color .17s ease, box-shadow .17s ease;
}

    .commerce-product-money-input:focus-within {
        border-color: var(--commerce-blue);
        box-shadow: 0 0 0 4px rgba(47,109,246,.07);
    }

    .commerce-product-money-input span {
        height: 100%;
        display: flex;
        align-items: center;
        padding: 0 11px;
        color: #687a90;
        background: #f6f8fb;
        border-right: 1px solid #e1e7ef;
        font-size: 8px;
        font-weight: 800;
    }

    .commerce-product-money-input input {
        min-width: 0;
        flex: 1;
        height: 100%;
        padding: 0 11px;
        color: var(--commerce-text);
        background: transparent;
        border: 0;
        outline: 0;
        font-size: 11px;
    }


/* =========================================================
   TOGGLES
   ========================================================= */

.commerce-product-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    min-height: 64px;
    padding: 9px 2px;
    cursor: pointer;
    border-bottom: 1px solid #edf1f5;
}

    .commerce-product-toggle-row:last-child {
        border-bottom: 0;
    }

    .commerce-product-toggle-row > div {
        min-width: 0;
    }

    .commerce-product-toggle-row strong {
        display: block;
        color: var(--commerce-navy);
        font-size: 9.5px;
    }

    .commerce-product-toggle-row div span {
        display: block;
        margin-top: 3px;
        color: var(--commerce-muted);
        font-size: 7.5px;
    }

    .commerce-product-toggle-row input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

.commerce-product-toggle {
    position: relative;
    width: 38px;
    height: 22px;
    flex: 0 0 38px;
    background: #dce3eb;
    border-radius: 999px;
    transition: background .18s ease;
}

    .commerce-product-toggle i {
        position: absolute;
        top: 3px;
        left: 3px;
        width: 16px;
        height: 16px;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 2px 5px rgba(8,20,38,.16);
        transition: transform .18s ease;
    }

.commerce-product-toggle-row input:checked + .commerce-product-toggle {
    background: var(--commerce-blue);
}

    .commerce-product-toggle-row input:checked + .commerce-product-toggle i {
        transform: translateX(16px);
    }


/* =========================================================
   FORM ERROR
   ========================================================= */

.commerce-product-create-error {
    display: none;
    margin: 4px 0 13px;
    padding: 11px 12px;
    color: #9b343b;
    background: #fff0f1;
    border: 1px solid #efcfd2;
    border-radius: 10px;
    font-size: 8.5px;
    line-height: 1.5;
}

    .commerce-product-create-error:not(:empty) {
        display: block;
    }


/* =========================================================
   DRAWER FOOTER
   ========================================================= */

.commerce-product-drawer-footer {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 20px;
    background: rgba(255,255,255,.97);
    border-top: 1px solid #dfe6ef;
    backdrop-filter: blur(12px);
}

    .commerce-product-drawer-footer > div:last-child {
        display: flex;
        align-items: center;
        gap: 8px;
    }

.commerce-product-drawer-footer-note {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--commerce-muted);
    font-size: 7px;
}

    .commerce-product-drawer-footer-note i {
        color: var(--commerce-blue);
    }


/* =========================================================
   TOUCH
   ========================================================= */

@media (hover: none) {

    .commerce-product-image-remove,
    .commerce-product-image-drag {
        visibility: visible;
        opacity: .85;
    }
}


/* =========================================================
   RESPONSIVE PRODUCTS
   ========================================================= */

@media(max-width: 900px) {

    .commerce-product-summary {
        grid-template-columns: 1fr 1fr;
    }

    .commerce-product-list-head {
        display: none;
    }

    .commerce-product-row {
        grid-template-columns: minmax(0,1fr) auto;
        grid-template-areas:
            "main status"
            "category price"
            "images price";
        gap: 7px 14px;
        padding: 13px;
    }

    .commerce-product-cell-main {
        grid-area: main;
    }

    .commerce-product-category-cell {
        grid-area: category;
        padding-left: 66px;
    }

    .commerce-product-price-cell {
        grid-area: price;
        align-self: center;
        text-align: right;
    }

    .commerce-product-image-count {
        grid-area: images;
        padding-left: 66px;
    }

    .commerce-product-row > div:last-child {
        grid-area: status;
        justify-self: end;
    }
}


@media(max-width: 760px) {

    .commerce-product-toolbar {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

        .commerce-product-toolbar
        .commerce-manager-search,
        .commerce-product-filter {
            width: 100%;
        }

    .commerce-product-image-previews {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
}


@media(max-width: 600px) {

    .commerce-product-drawer {
        width: 100%;
    }

    .commerce-product-drawer-head {
        min-height: 84px;
        padding: 17px;
    }

    .commerce-product-drawer-body {
        padding: 12px;
    }

    .commerce-product-form-section {
        padding: 15px;
    }

    .commerce-product-drawer-footer {
        align-items: stretch;
        flex-direction: column;
        padding: 10px 12px;
    }

    .commerce-product-drawer-footer-note {
        display: none;
    }

    .commerce-product-drawer-footer > div:last-child {
        width: 100%;
    }

    .commerce-product-drawer-footer
    .commerce-dashboard-primary-btn,
    .commerce-product-drawer-footer
    .commerce-dashboard-secondary-btn {
        flex: 1;
    }

    .commerce-product-image-dropzone {
        grid-template-columns: 40px 1fr;
    }

    .commerce-product-image-browse {
        grid-column: 1 / -1;
        text-align: center;
    }

    .commerce-product-price-grid {
        grid-template-columns: 1fr;
    }
}


@media(max-width: 470px) {

    .commerce-product-summary {
        grid-template-columns: 1fr 1fr;
    }

    .commerce-product-image-previews {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

/* =========================================================
   PRODUCTS V2
   EDIT / INVENTORY / AVAILABILITY / ACTIONS
   ========================================================= */


/* =========================================================
   PRODUCT LIST - SIX COLUMNS
   ========================================================= */

.commerce-product-list-head,
.commerce-product-row {
    grid-template-columns: minmax(245px, 1.55fr) minmax(120px, .75fr) minmax(110px, .7fr) minmax(105px, .7fr) minmax(105px, .68fr) 76px;
}


/* =========================================================
   CLICKABLE PRODUCT CELL
   ========================================================= */

.commerce-product-main-button {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    outline: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    font-family: 'Inter', sans-serif;
    text-align: left;
}


    .commerce-product-main-button:hover
    strong {
        color: var(--commerce-blue);
    }


    .commerce-product-main-button > div:last-child {
        min-width: 0;
    }


    .commerce-product-main-button strong {
        display: block;
        overflow: hidden;
        color: var(--commerce-navy);
        font-size: 10.5px;
        text-overflow: ellipsis;
        white-space: nowrap;
        transition: color .15s ease;
    }


    .commerce-product-main-button small {
        display: block;
        margin-top: 4px;
        color: var(--commerce-muted);
        font-size: 7.5px;
    }


/* =========================================================
   INVENTORY
   ========================================================= */

.commerce-product-stock {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 7.5px;
    font-weight: 750;
}


    .commerce-product-stock.tracked {
        color: #405d77;
        background: #eef5fb;
    }


        .commerce-product-stock.tracked i {
            color: #5b83a8;
        }


    .commerce-product-stock.out {
        color: #9a5d18;
        background: #fff4df;
    }


        .commerce-product-stock.out i {
            color: #bd7b2c;
        }


    .commerce-product-stock.untracked {
        color: #7b899a;
        background: #f0f3f6;
    }


/* =========================================================
   QUICK AVAILABILITY
   ========================================================= */

.commerce-product-availability {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    margin: 0;
    border: 0;
    border-radius: 999px;
    outline: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    font-family: 'Inter', sans-serif;
    font-size: 7.5px;
    font-weight: 800;
    transition: opacity .15s ease, transform .15s ease;
}


    .commerce-product-availability:hover:not(:disabled) {
        transform: translateY(-1px);
    }


    .commerce-product-availability:disabled {
        opacity: .5;
        cursor: wait;
    }


    .commerce-product-availability > i {
        width: 5px;
        height: 5px;
        border-radius: 50%;
    }


    .commerce-product-availability.available {
        color: #197044;
        background: #eaf8f1;
    }


        .commerce-product-availability.available > i {
            background: #29a66d;
        }


    .commerce-product-availability.hidden {
        color: #69788b;
        background: #edf1f5;
    }


        .commerce-product-availability.hidden > i {
            background: #8998aa;
        }


/* =========================================================
   ROW ACTIONS
   ========================================================= */

.commerce-product-row-actions {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
}


.commerce-product-row-action {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    font-size: 9px;
    transition: .15s ease;
}


    .commerce-product-row-action.edit {
        color: #687a90;
    }


        .commerce-product-row-action.edit:hover {
            color: var(--commerce-blue);
            background: #edf3ff;
            border-color: #dbe5f3;
        }


    .commerce-product-row-action.delete {
        color: #a86469;
    }


        .commerce-product-row-action.delete:hover {
            color: #b13940;
            background: #fff0f1;
            border-color: #efd4d6;
        }


    .commerce-product-row-action.is-busy {
        opacity: .45;
        cursor: wait;
    }


/* =========================================================
   SEARCHABLE CATEGORY
   ========================================================= */

.commerce-product-category-select-shell {
    position: relative;
}


    .commerce-product-category-select-shell > i {
        position: absolute;
        top: 50%;
        left: 13px;
        z-index: 5;
        color: #8292a6;
        font-size: 9px;
        transform: translateY(-50%);
        pointer-events: none;
    }


.commerce-product-filter-select {
    width: 190px;
}


/* =========================================================
   QUANTITY FIELD
   ========================================================= */

.commerce-product-quantity-wrap {
    display: none;
    margin-top: 13px;
    padding-top: 15px;
    border-top: 1px solid #edf1f5;
}


    .commerce-product-quantity-wrap.is-visible {
        display: block;
    }


.commerce-product-number-input {
    width: 190px;
    height: 44px;
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    overflow: hidden;
    background: #fff;
    border: 1.5px solid #cfdbea;
    border-radius: 11px;
    transition: border-color .17s ease, box-shadow .17s ease;
}


    .commerce-product-number-input:focus-within {
        border-color: var(--commerce-blue);
        box-shadow: 0 0 0 4px rgba(47,109,246,.07);
    }


    .commerce-product-number-input button {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        color: #6b7c91;
        background: #f6f8fb;
        border: 0;
        cursor: pointer;
        appearance: none;
        font-size: 8px;
    }


        .commerce-product-number-input button:first-child {
            border-right: 1px solid #e1e7ef;
        }


        .commerce-product-number-input button:last-child {
            border-left: 1px solid #e1e7ef;
        }


        .commerce-product-number-input button:hover {
            color: var(--commerce-blue);
            background: #edf3ff;
        }


    .commerce-product-number-input input {
        min-width: 0;
        width: 100%;
        height: 100%;
        padding: 0 8px;
        color: var(--commerce-navy);
        background: transparent;
        border: 0;
        outline: 0;
        font-size: 11px;
        font-weight: 750;
        text-align: center;
        appearance: textfield;
    }


        .commerce-product-number-input
        input::-webkit-inner-spin-button,
        .commerce-product-number-input
        input::-webkit-outer-spin-button {
            margin: 0;
            appearance: none;
        }


/* =========================================================
   FIX DEFAULT RED ERROR BOX
   ========================================================= */

/*
 * Old implementation depended on :not(:empty).
 * Whitespace inside the div can make CSS consider it non-empty.
 *
 * New system is explicit.
 */

.commerce-product-create-error {
    display: none !important;
    margin: 4px 0 13px;
    padding: 11px 12px;
    color: #9b343b;
    background: #fff0f1;
    border: 1px solid #efcfd2;
    border-radius: 10px;
    font-size: 8.5px;
    line-height: 1.5;
}


    .commerce-product-create-error.has-error {
        display: block !important;
    }


    /*
 * Neutralize previous :not(:empty) rule
 * in case it remains higher in commerce.css.
 */

    .commerce-product-create-error:not(:empty) {
        display: none !important;
    }


    .commerce-product-create-error.has-error:not(:empty) {
        display: block !important;
    }


/* =========================================================
   PRODUCT DELETE
   ========================================================= */

.commerce-product-delete-confirm {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    margin: 0;
    color: #fff;
    background: #b64148;
    border: 0;
    border-radius: 11px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 800;
    transition: background .16s ease, opacity .16s ease;
}


    .commerce-product-delete-confirm:hover:not(:disabled) {
        background: #a9343b;
    }


    .commerce-product-delete-confirm:disabled {
        opacity: .65;
        cursor: wait;
    }


/* =========================================================
   SELECT2 FILTER
   ========================================================= */

#productCategoryFilter +
.select2-container {
    width: 190px !important;
}


    #productCategoryFilter +
    .select2-container
    .select2-selection--single {
        height: 38px;
        display: flex;
        align-items: center;
        padding: 0 29px 0 10px;
        background: #f8fafd;
        border: 1.5px solid #dbe4ef;
        border-radius: 10px;
    }


    #productCategoryFilter +
    .select2-container
    .select2-selection__rendered {
        padding: 0 !important;
        color: #53647a;
        font-size: 9px;
        line-height: normal;
    }


/* =========================================================
   RESPONSIVE PRODUCT V2
   ========================================================= */

@media(max-width: 1000px) {

    .commerce-product-list-head {
        display: none;
    }


    .commerce-product-row {
        grid-template-columns: minmax(0,1fr) auto;
        grid-template-areas:
            "product actions"
            "category availability"
            "price inventory";
        gap: 8px 14px;
        padding: 13px;
    }


    .commerce-product-main-button {
        grid-area: product;
    }


    .commerce-product-category-cell {
        grid-area: category;
        padding-left: 66px;
    }


    .commerce-product-price-cell {
        grid-area: price;
        padding-left: 66px;
    }


    .commerce-product-row > div:nth-child(4) {
        grid-area: inventory;
        justify-self: end;
    }


    .commerce-product-row > div:nth-child(5) {
        grid-area: availability;
        justify-self: end;
    }


    .commerce-product-row-actions {
        grid-area: actions;
        justify-self: end;
    }
}


@media(max-width: 760px) {

    #productCategoryFilter +
    .select2-container {
        width: 100% !important;
    }


    .commerce-product-number-input {
        width: 100%;
    }
}


@media(max-width: 520px) {

    .commerce-product-row {
        grid-template-columns: minmax(0,1fr) auto;
        grid-template-areas:
            "product actions"
            "category category"
            "price price"
            "inventory availability";
    }


    .commerce-product-category-cell,
    .commerce-product-price-cell {
        padding-left: 0;
    }
}


/* =========================================================
   PRODUCT SELLING UNIT
   ========================================================= */

.commerce-product-selling-unit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 7px;
}


.commerce-product-unit-option {
    position: relative;
    cursor: pointer;
}


    .commerce-product-unit-option input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }


    .commerce-product-unit-option > span {
        min-height: 61px;
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 10px 11px;
        color: #607187;
        background: #fbfcfe;
        border: 1.5px solid #dce5ef;
        border-radius: 11px;
        transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
    }


    .commerce-product-unit-option:hover > span {
        color: var(--commerce-blue);
        background: #f7faff;
        border-color: #bfd1e6;
        transform: translateY(-1px);
    }


    .commerce-product-unit-option
    input:checked + span {
        color: var(--commerce-blue);
        background: #edf4ff;
        border-color: #8fb2e4;
        box-shadow: 0 0 0 3px rgba(47,109,246,.07);
    }


    .commerce-product-unit-option
    span > i {
        width: 24px;
        flex: 0 0 24px;
        text-align: center;
        font-size: 11px;
    }


    .commerce-product-unit-option strong {
        font-size: 8.5px;
        font-weight: 800;
    }


/* =========================================================
   ORDER INCREMENT
   ========================================================= */

.commerce-product-step-wrap {
    display: none;
    margin-top: 14px;
    padding-top: 15px;
    border-top: 1px solid #edf1f5;
}


    .commerce-product-step-wrap.is-visible {
        display: block;
    }


.commerce-product-step-input {
    width: 220px;
    height: 44px;
    display: grid;
    grid-template-columns: 1fr auto;
    overflow: hidden;
    background: #fff;
    border: 1.5px solid #cfdbea;
    border-radius: 11px;
    transition: border-color .17s ease, box-shadow .17s ease;
}


    .commerce-product-step-input:focus-within {
        border-color: var(--commerce-blue);
        box-shadow: 0 0 0 4px rgba(47,109,246,.07);
    }


    .commerce-product-step-input input {
        min-width: 0;
        width: 100%;
        height: 100%;
        padding: 0 12px;
        color: var(--commerce-navy);
        background: transparent;
        border: 0;
        outline: 0;
        font-size: 11px;
        font-weight: 700;
    }


    .commerce-product-step-input > span {
        min-width: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 10px;
        color: #5e7087;
        background: #f5f7fa;
        border-left: 1px solid #e1e7ef;
        font-size: 8px;
        font-weight: 800;
    }


/* =========================================================
   SELLING PRICE EXPLANATION
   ========================================================= */

.commerce-product-price-explanation {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 13px;
    padding: 10px 11px;
    color: #607187;
    background: #f7f9fc;
    border: 1px solid #e4eaf1;
    border-radius: 10px;
    font-size: 7.5px;
    line-height: 1.5;
}


    .commerce-product-price-explanation i {
        margin-top: 1px;
        color: var(--commerce-blue);
    }


/* =========================================================
   PRODUCT LIST UNIT
   ========================================================= */

.commerce-product-unit-cell strong {
    display: block;
    color: var(--commerce-navy);
    font-size: 9px;
    font-weight: 800;
}


.commerce-product-unit-cell small {
    display: block;
    margin-top: 3px;
    color: var(--commerce-muted);
    font-size: 7px;
    white-space: nowrap;
}


/* Old inventory styles are no longer used */

.commerce-product-stock {
    display: none;
}


@media(max-width: 600px) {

    .commerce-product-selling-unit-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }


    .commerce-product-step-input {
        width: 100%;
    }
}
/* =========================================================
   DASHBOARD CATEGORY PRODUCT DRAWER
   ========================================================= */

/* Category cards are now buttons instead of navigation links. */
button.commerce-dashboard-category-card-link,
.commerce-dashboard-category-browse {
    width: 100%;
    margin: 0;
    border: 0;
    outline: 0;
    background: transparent;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    font-family: 'Inter', sans-serif;
    text-align: left;
}

    button.commerce-dashboard-category-card-link:focus-visible {
        outline: 3px solid rgba(47,109,246,.12);
        outline-offset: -3px;
        border-radius: 13px;
    }

.commerce-category-products-drawer-open {
    overflow: hidden;
}


/* =========================================================
   BACKDROP / SHELL
   ========================================================= */

.commerce-category-products-backdrop {
    position: fixed;
    inset: 0;
    z-index: 7040;
    visibility: hidden;
    opacity: 0;
    background: rgba(4,13,25,.46);
    backdrop-filter: blur(3px);
    pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease;
}

    .commerce-category-products-backdrop.is-open {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

.commerce-category-products-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 7050;
    width: min(760px, 100vw);
    height: 100vh;
    height: 100dvh;
    display: grid;
    grid-template-rows: auto auto minmax(0,1fr) auto;
    visibility: hidden;
    overflow: hidden;
    color: var(--commerce-text);
    background: #f5f8fc;
    box-shadow: -28px 0 80px rgba(4,13,25,.20);
    transform: translateX(102%);
    transition: transform .28s var(--commerce-ease), visibility .28s ease;
}

    .commerce-category-products-drawer.is-open {
        visibility: visible;
        transform: translateX(0);
    }


/* =========================================================
   HEADER
   ========================================================= */

.commerce-category-products-head {
    min-height: 104px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    padding: 22px 24px 18px;
    background: #fff;
    border-bottom: 1px solid #e2e9f2;
}

.commerce-category-products-head-copy {
    min-width: 0;
}

.commerce-category-products-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--commerce-blue);
    font-size: 7.5px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.commerce-category-products-title-row {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

    .commerce-category-products-title-row h2 {
        min-width: 0;
        margin: 0;
        overflow: hidden;
        color: var(--commerce-navy);
        font-family: 'Manrope', sans-serif;
        font-size: 23px;
        font-weight: 800;
        letter-spacing: -.035em;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.commerce-category-products-head-copy > p {
    margin: 5px 0 0;
    color: var(--commerce-muted);
    font-size: 9px;
}

.commerce-category-products-visibility {
    flex: 0 0 auto;
    align-items: center;
    padding: 5px 7px;
    color: #69788b;
    background: #edf1f5;
    border-radius: 999px;
    font-size: 6.5px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.commerce-category-products-close {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    color: #718197;
    background: #f2f5f8;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    font-size: 11px;
    transition: color .16s ease, background .16s ease, transform .16s ease;
}

    .commerce-category-products-close:hover {
        color: var(--commerce-navy);
        background: #e8eef5;
        transform: translateY(-1px);
    }


/* =========================================================
   SEARCH TOOLBAR
   ========================================================= */

.commerce-category-products-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 18px;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid #e5ebf3;
    backdrop-filter: blur(12px);
}

.commerce-category-products-search {
    position: relative;
    min-width: 0;
    flex: 1;
}

    .commerce-category-products-search > i {
        position: absolute;
        top: 50%;
        left: 13px;
        color: #8594a7;
        font-size: 9px;
        transform: translateY(-50%);
        pointer-events: none;
    }

    .commerce-category-products-search input {
        width: 100%;
        height: 40px;
        padding: 0 38px 0 35px;
        color: var(--commerce-text);
        background: #f8fafd;
        border: 1.5px solid #dbe4ee;
        border-radius: 11px;
        outline: 0;
        font-size: 9px;
        transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
    }

        .commerce-category-products-search input::placeholder {
            color: #98a5b5;
        }

        .commerce-category-products-search input:focus {
            background: #fff;
            border-color: var(--commerce-blue);
            box-shadow: 0 0 0 3px rgba(47,109,246,.07);
        }

        .commerce-category-products-search input:disabled {
            cursor: default;
            opacity: .62;
        }

    .commerce-category-products-search button {
        position: absolute;
        top: 50%;
        right: 8px;
        width: 27px;
        height: 27px;
        display: none;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        color: #7f8da0;
        background: transparent;
        border: 0;
        border-radius: 7px;
        cursor: pointer;
        appearance: none;
        transform: translateY(-50%);
    }

        .commerce-category-products-search button.is-visible {
            display: flex;
        }

        .commerce-category-products-search button:hover {
            color: var(--commerce-navy);
            background: #edf1f5;
        }

.commerce-category-products-showing {
    flex: 0 0 auto;
    color: #8290a2;
    font-size: 7.5px;
    font-weight: 700;
    white-space: nowrap;
}


/* =========================================================
   BODY
   ========================================================= */

.commerce-category-products-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 17px 18px 24px;
}

.commerce-category-products-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
}


/* =========================================================
   MINI STORE PRODUCT CARD
   ========================================================= */

.commerce-category-product-card {
    min-width: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e0e8f1;
    border-radius: 16px;
    box-shadow: 0 5px 18px rgba(8,20,38,.025);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

    .commerce-category-product-card:hover {
        border-color: #bfd0e3;
        box-shadow: 0 14px 32px rgba(8,20,38,.09);
        transform: translateY(-2px);
    }

.commerce-category-product-image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #eef2f6;
    border-bottom: 1px solid #e8edf4;
}

    .commerce-category-product-image > img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        transition: transform .25s ease;
    }

.commerce-category-product-card:hover
.commerce-category-product-image > img {
    transform: scale(1.025);
}

.commerce-category-product-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ba9b8;
    background: linear-gradient(145deg, #f2f5f8, #e9eef4);
    font-size: 22px;
}

.commerce-category-product-status {
    position: absolute;
    left: 9px;
    top: 9px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(8,20,38,.08);
    backdrop-filter: blur(8px);
    font-size: 6.5px;
    font-weight: 800;
}

    .commerce-category-product-status > i {
        width: 4px;
        height: 4px;
        border-radius: 50%;
    }

    .commerce-category-product-status.available {
        color: #176841;
        background: rgba(235,249,242,.94);
    }

        .commerce-category-product-status.available > i {
            background: #2da66f;
        }

    .commerce-category-product-status.hidden {
        color: #667588;
        background: rgba(241,244,247,.94);
    }

        .commerce-category-product-status.hidden > i {
            background: #8492a3;
        }

.commerce-category-product-featured {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9f6a0b;
    background: rgba(255,247,225,.95);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(8,20,38,.07);
    backdrop-filter: blur(8px);
    font-size: 8px;
}

.commerce-category-product-copy {
    padding: 13px 14px 12px;
}

.commerce-category-product-name {
    display: block;
    min-height: 30px;
    overflow: hidden;
    color: var(--commerce-navy);
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.commerce-category-product-price {
    min-height: 30px;
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 7px;
}

    .commerce-category-product-price strong {
        color: var(--commerce-navy);
        font-size: 11px;
        font-weight: 800;
    }

    .commerce-category-product-price small {
        color: #9b6a70;
        font-size: 7.5px;
        text-decoration: line-through;
    }

.commerce-category-product-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 9px;
    padding-top: 9px;
    color: #78889b;
    border-top: 1px solid #edf1f5;
    font-size: 7px;
}

    .commerce-category-product-foot i {
        color: #9ca9b8;
        font-size: 7px;
        transition: color .16s ease, transform .16s ease;
    }

.commerce-category-product-card:hover
.commerce-category-product-foot i {
    color: var(--commerce-blue);
    transform: translateX(2px);
}


/* =========================================================
   LOADING SKELETON
   ========================================================= */

.commerce-category-products-skeleton {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
}

.commerce-category-product-skeleton-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e3eaf2;
    border-radius: 16px;
}

    .commerce-category-product-skeleton-card > span {
        display: block;
        aspect-ratio: 4 / 3;
        background: #eef2f6;
    }

    .commerce-category-product-skeleton-card > div {
        display: grid;
        gap: 8px;
        padding: 14px;
    }

    .commerce-category-product-skeleton-card i {
        position: relative;
        display: block;
        height: 9px;
        overflow: hidden;
        background: #edf1f5;
        border-radius: 999px;
    }

        .commerce-category-product-skeleton-card i:nth-child(1) {
            width: 72%;
        }

        .commerce-category-product-skeleton-card i:nth-child(2) {
            width: 43%;
        }

        .commerce-category-product-skeleton-card i:nth-child(3) {
            width: 56%;
        }

    .commerce-category-product-skeleton-card > span,
    .commerce-category-product-skeleton-card i {
        position: relative;
        overflow: hidden;
    }

        .commerce-category-product-skeleton-card > span::after,
        .commerce-category-product-skeleton-card i::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient( 90deg, transparent, rgba(255,255,255,.72), transparent );
            transform: translateX(-100%);
            animation: commerce-category-drawer-shimmer 1.25s infinite;
        }

@keyframes commerce-category-drawer-shimmer {
    to {
        transform: translateX(100%);
    }
}


/* =========================================================
   EMPTY / ERROR STATES
   ========================================================= */

.commerce-category-products-state {
    min-height: 390px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 22px;
    text-align: center;
}

    .commerce-category-products-state > span:first-child {
        width: 54px;
        height: 54px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 13px;
        color: var(--commerce-blue);
        background: #edf3ff;
        border-radius: 16px;
        font-size: 17px;
    }

    .commerce-category-products-state h3 {
        margin: 0;
        color: var(--commerce-navy);
        font-family: 'Manrope', sans-serif;
        font-size: 16px;
        font-weight: 800;
        letter-spacing: -.025em;
    }

    .commerce-category-products-state p {
        max-width: 330px;
        margin: 7px 0 15px;
        color: var(--commerce-muted);
        font-size: 9px;
        line-height: 1.55;
    }

.commerce-category-products-error > span:first-child {
    color: #b44047;
    background: #fff0f1;
}


/* =========================================================
   FOOTER
   ========================================================= */

.commerce-category-products-footer {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    background: rgba(255,255,255,.97);
    border-top: 1px solid #dfe6ef;
    backdrop-filter: blur(12px);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width: 620px) {

    .commerce-category-products-head {
        min-height: 92px;
        padding: 18px 16px 15px;
    }

    .commerce-category-products-title-row h2 {
        font-size: 20px;
    }

    .commerce-category-products-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 6px;
        padding: 10px 12px;
    }

    .commerce-category-products-showing {
        padding-left: 2px;
    }

    .commerce-category-products-body {
        padding: 12px 12px 20px;
    }

    .commerce-category-products-grid,
    .commerce-category-products-skeleton {
        gap: 8px;
    }

    .commerce-category-product-card,
    .commerce-category-product-skeleton-card {
        border-radius: 13px;
    }

    .commerce-category-product-copy {
        padding: 10px 10px 9px;
    }

    .commerce-category-product-name {
        min-height: 28px;
        font-size: 9.5px;
    }

    .commerce-category-products-footer {
        padding: 10px 12px;
    }

        .commerce-category-products-footer > * {
            flex: 1;
        }
}

@media(max-width: 390px) {

    .commerce-category-products-grid,
    .commerce-category-products-skeleton {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   COMMERCE PRODUCT OPTIONS
   Simple one-group option editor.
   ========================================================= */

.commerce-product-options-section {
    overflow: visible;
}

.commerce-product-options-editor {
    margin-top: 16px;
    padding: 18px;
    background: linear-gradient(180deg,#fbfcff,#f7f9fd);
    border: 1px solid #e2e9f3;
    border-radius: 18px;
}

    .commerce-product-options-editor[hidden] {
        display: none !important;
    }

.commerce-product-option-presets,
.commerce-product-option-values-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
}

    .commerce-product-option-presets > div,
    .commerce-product-option-values-head > div {
        min-width: 0;
    }

    .commerce-product-option-presets strong,
    .commerce-product-option-values-head strong {
        display: block;
        color: var(--commerce-text);
        font-size: 12px;
        font-weight: 800;
    }

    .commerce-product-option-presets span,
    .commerce-product-option-values-head span {
        display: block;
        margin-top: 3px;
        color: var(--commerce-muted);
        font-size: 10.5px;
        line-height: 1.45;
    }

.commerce-product-option-preset {
    min-height: 38px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    color: var(--commerce-blue);
    background: #fff;
    border: 1px solid #dce6f4;
    border-radius: 11px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

    .commerce-product-option-preset:hover {
        background: #f7faff;
        border-color: #bcd0ef;
        transform: translateY(-1px);
    }

.commerce-product-option-values-head {
    padding-top: 17px;
    border-top: 1px solid #e8edf5;
}

.commerce-product-option-values {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.commerce-product-option-value-row {
    display: grid;
    grid-template-columns: 34px minmax(150px,1fr) minmax(145px,190px) 38px;
    align-items: center;
    gap: 9px;
    padding: 9px;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 13px;
    transition: border-color .16s ease, box-shadow .16s ease;
}

    .commerce-product-option-value-row:focus-within {
        border-color: #bdd0ee;
        box-shadow: 0 0 0 4px rgba(47,109,246,.06);
    }

.commerce-product-option-value-order {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9aa7b8;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .05em;
}

.commerce-product-option-value-field {
    min-width: 0;
}

    .commerce-product-option-value-field > input {
        width: 100%;
        min-height: 40px;
        padding: 0 11px;
        color: var(--commerce-text);
        background: #fbfcfe;
        border: 1px solid #e2e9f3;
        border-radius: 10px;
        outline: 0;
        font-size: 12px;
        font-weight: 700;
    }

        .commerce-product-option-value-field > input:focus {
            border-color: var(--commerce-blue-soft);
            box-shadow: 0 0 0 3px rgba(47,109,246,.07);
        }

    .commerce-product-option-value-field small {
        display: none;
    }

.commerce-product-option-adjustment {
    min-width: 0;
    min-height: 40px;
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: center;
    overflow: hidden;
    background: #fbfcfe;
    border: 1px solid #e2e9f3;
    border-radius: 10px;
}

    .commerce-product-option-adjustment > span {
        padding-left: 10px;
        color: #728096;
        font-size: 10px;
        font-weight: 800;
        white-space: nowrap;
    }

    .commerce-product-option-adjustment input {
        min-width: 0;
        width: 100%;
        height: 38px;
        padding: 0 9px 0 6px;
        color: var(--commerce-text);
        background: transparent;
        border: 0;
        outline: 0;
        font-size: 12px;
        font-weight: 750;
    }

.commerce-product-option-value-remove {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9b6670;
    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: color .16s ease, background .16s ease;
}

    .commerce-product-option-value-remove:hover {
        color: var(--commerce-danger);
        background: var(--commerce-danger-bg);
    }

.commerce-product-options-editor > .commerce-field-error {
    margin-top: 10px;
}

@media (max-width: 760px) {
    .commerce-product-options-editor {
        padding: 15px;
        border-radius: 15px;
    }

    .commerce-product-option-presets,
    .commerce-product-option-values-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }

    .commerce-product-option-value-row {
        grid-template-columns: 28px minmax(0,1fr) 36px;
    }

    .commerce-product-option-adjustment {
        grid-column: 2 / 3;
    }

    .commerce-product-option-value-remove {
        grid-column: 3;
        grid-row: 1 / span 2;
        align-self: center;
    }
}

@media (max-width: 480px) {
    .commerce-product-option-value-row {
        grid-template-columns: minmax(0,1fr) 36px;
        padding: 10px;
    }

    .commerce-product-option-value-order {
        display: none;
    }

    .commerce-product-option-value-field,
    .commerce-product-option-adjustment {
        grid-column: 1;
    }

    .commerce-product-option-value-remove {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}


/* =========================================================
   PRODUCT OPTIONS V1.1
   Progressive multi-option editor. The merchant sees only
   the controls they need, with a maximum of three groups.
   ========================================================= */

.commerce-product-options-editor-multi {
    display: grid;
    gap: 16px;
    padding: 16px;
}

.commerce-product-options-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

    .commerce-product-options-toolbar > div {
        min-width: 0;
    }

    .commerce-product-options-toolbar strong {
        display: block;
        color: var(--commerce-text);
        font-size: 12px;
        font-weight: 850;
    }

    .commerce-product-options-toolbar span {
        display: block;
        margin-top: 3px;
        color: var(--commerce-muted);
        font-size: 10.5px;
        line-height: 1.45;
    }

.commerce-product-option-add-group {
    min-height: 38px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 13px;
    color: var(--commerce-blue);
    background: #fff;
    border: 1px solid #d9e4f3;
    border-radius: 11px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 850;
    transition: .16s ease;
}

    .commerce-product-option-add-group:hover {
        border-color: #b8cceb;
        background: #f8fbff;
        transform: translateY(-1px);
    }

    .commerce-product-option-add-group[hidden] {
        display: none !important;
    }

.commerce-product-option-groups {
    display: grid;
    gap: 12px;
}

.commerce-product-option-group {
    padding: 16px;
    background: #fff;
    border: 1px solid #dfe7f2;
    border-radius: 15px;
    box-shadow: 0 8px 24px rgba(8,20,38,.035);
}

.commerce-product-option-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 13px;
    border-bottom: 1px solid #edf1f6;
}

    .commerce-product-option-group-head > div {
        min-width: 0;
    }

    .commerce-product-option-group-head span {
        display: block;
        margin-bottom: 3px;
        color: var(--commerce-blue);
        font-size: 8.5px;
        font-weight: 900;
        letter-spacing: .09em;
        text-transform: uppercase;
    }

    .commerce-product-option-group-head strong {
        display: block;
        overflow: hidden;
        color: var(--commerce-text);
        font-size: 13px;
        font-weight: 850;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.commerce-product-option-group-remove {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9b6670;
    background: transparent;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
}

    .commerce-product-option-group-remove:hover {
        color: var(--commerce-danger);
        background: var(--commerce-danger-bg);
    }

.commerce-product-option-group-name {
    display: grid;
    gap: 7px;
    margin-top: 14px;
}

    .commerce-product-option-group-name > label {
        color: var(--commerce-text);
        font-size: 11px;
        font-weight: 800;
    }

.commerce-product-option-group-presets {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 11px;
    padding: 10px 11px;
    background: #f8faff;
    border: 1px solid #e8eef7;
    border-radius: 11px;
}

    .commerce-product-option-group-presets > span {
        color: var(--commerce-muted);
        font-size: 10px;
        line-height: 1.4;
    }

.commerce-product-option-preset-compact {
    min-height: 32px;
    padding: 0 10px;
    font-size: 9.5px;
}

.commerce-product-option-group .commerce-product-option-values-head {
    margin-top: 14px;
    padding-top: 14px;
}

.commerce-product-options-editor-multi > .commerce-field-error {
    margin: 0;
}

.commerce-product-options-editor-multi.has-multiple-groups .commerce-product-option-group {
    border-color: #d7e3f2;
}

@media (max-width: 760px) {
    .commerce-product-options-toolbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .commerce-product-option-add-group {
        width: 100%;
    }

    .commerce-product-option-group {
        padding: 14px;
    }

    .commerce-product-option-group-presets {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .commerce-product-options-editor-multi {
        padding: 12px;
    }

    .commerce-product-option-group {
        padding: 12px;
        border-radius: 13px;
    }

    .commerce-product-option-preset-compact {
        width: 100%;
    }
}


/* =========================================================
   COMMERCE ORDERS V1
   ========================================================= */

.commerce-orders-page {
    width: min(1180px,calc(100% - 40px));
    margin: 0 auto;
    padding: 46px 0 80px;
}

.commerce-orders-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
}

    .commerce-orders-head > div:first-child {
        min-width: 0;
    }

.commerce-orders-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 18px;
    color: var(--commerce-muted);
    font-size: 11px;
    font-weight: 750;
}

    .commerce-orders-back:hover {
        color: var(--commerce-blue);
    }

.commerce-orders-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: var(--commerce-blue);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.commerce-orders-head h1 {
    margin: 0;
    color: var(--commerce-navy);
    font-family: 'Manrope',sans-serif;
    font-size: clamp(36px,5vw,54px);
    letter-spacing: -.05em;
}

.commerce-orders-head p {
    max-width: 680px;
    margin: 10px 0 0;
    color: var(--commerce-muted);
    font-size: 14px;
    line-height: 1.65;
}

.commerce-orders-view-store {
    min-height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 15px;
    color: var(--commerce-text-soft);
    background: var(--commerce-surface);
    border: 1px solid var(--commerce-border);
    border-radius: 13px;
    box-shadow: var(--commerce-shadow-sm);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.commerce-orders-summary {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 12px;
    margin-top: 30px;
}

.commerce-orders-summary-card {
    min-height: 94px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 17px;
    color: var(--commerce-text);
    background: var(--commerce-surface);
    border: 1px solid var(--commerce-border);
    border-radius: 17px;
    cursor: pointer;
    box-shadow: 0 7px 20px rgba(8,20,38,.035);
    text-align: left;
    transition: .16s ease;
}

    .commerce-orders-summary-card:hover {
        transform: translateY(-1px);
        border-color: #cbd8e8;
    }

    .commerce-orders-summary-card.is-active {
        background: linear-gradient(180deg,#fff,#f7faff);
        border-color: rgba(47,109,246,.34);
        box-shadow: 0 10px 26px rgba(47,109,246,.08);
    }

    .commerce-orders-summary-card span {
        color: var(--commerce-muted);
        font-size: 10px;
        font-weight: 750;
    }

    .commerce-orders-summary-card strong {
        color: var(--commerce-navy);
        font-family: 'Manrope',sans-serif;
        font-size: 27px;
        letter-spacing: -.04em;
    }

.commerce-orders-panel {
    margin-top: 18px;
    overflow: hidden;
    background: var(--commerce-surface);
    border: 1px solid var(--commerce-border);
    border-radius: 22px;
    box-shadow: var(--commerce-shadow-sm);
}

.commerce-orders-toolbar {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--commerce-border);
}

.commerce-orders-search {
    width: min(420px,100%);
    min-height: 44px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 9px;
    padding: 0 11px;
    color: var(--commerce-muted);
    background: var(--commerce-surface-soft);
    border: 1px solid var(--commerce-border);
    border-radius: 12px;
}

    .commerce-orders-search input {
        min-width: 0;
        width: 100%;
        color: var(--commerce-text);
        background: transparent;
        border: 0;
        outline: 0;
        font-size: 12px;
    }

    .commerce-orders-search > button {
        width: 27px;
        height: 27px;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        color: var(--commerce-muted);
        background: transparent;
        border: 0;
        border-radius: 8px;
        cursor: pointer;
    }

        .commerce-orders-search > button.is-visible {
            opacity: 1;
            pointer-events: auto;
        }

#commerceOrdersShowing {
    color: var(--commerce-muted);
    font-size: 10px;
    font-weight: 750;
    white-space: nowrap;
}

.commerce-orders-list {
    display: grid;
}

.commerce-order-row {
    width: 100%;
    min-height: 83px;
    display: grid;
    grid-template-columns: minmax(220px,1.4fr) 105px 125px 110px 18px;
    align-items: center;
    gap: 16px;
    padding: 13px 17px;
    color: var(--commerce-text);
    background: #fff;
    border: 0;
    border-bottom: 1px solid var(--commerce-border);
    cursor: pointer;
    text-align: left;
    transition: background .14s ease;
}

    .commerce-order-row:last-child {
        border-bottom: 0;
    }

    .commerce-order-row:hover {
        background: #f9fbff;
    }

.commerce-order-row-main {
    min-width: 0;
}

    .commerce-order-row-main > span,
    .commerce-order-row-main > strong,
    .commerce-order-row-main > small,
    .commerce-order-row-date > strong,
    .commerce-order-row-date > small,
    .commerce-order-row-total > strong {
        display: block;
    }

.commerce-order-row-number {
    margin-bottom: 3px;
    color: var(--commerce-blue);
    font-size: 8.5px;
    font-weight: 850;
    letter-spacing: .06em;
}

.commerce-order-row-main > strong {
    overflow: hidden;
    color: var(--commerce-navy);
    font-family: 'Manrope',sans-serif;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.commerce-order-row-main > small,
.commerce-order-row-date > small {
    margin-top: 4px;
    color: var(--commerce-muted);
    font-size: 8.5px;
}

.commerce-order-row-date > strong,
.commerce-order-row-total > strong {
    color: var(--commerce-text-soft);
    font-size: 10px;
}

.commerce-order-row-total {
    text-align: right;
}

.commerce-order-status {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 8.5px;
    font-weight: 850;
    white-space: nowrap;
}

    .commerce-order-status.new {
        color: #1d5dc0;
        background: #eaf2ff;
    }

    .commerce-order-status.confirmed {
        color: #6550bd;
        background: #f0edff;
    }

    .commerce-order-status.preparing {
        color: #9b630c;
        background: #fff4dc;
    }

    .commerce-order-status.ready {
        color: #187253;
        background: #e9f8f1;
    }

    .commerce-order-status.completed {
        color: #506174;
        background: #eef2f6;
    }

    .commerce-order-status.cancelled {
        color: #af343c;
        background: #fff0f1;
    }

.commerce-order-row-arrow {
    color: #a5b1c0;
    font-size: 8px;
}

.commerce-orders-empty,
.commerce-orders-no-results {
    min-height: 310px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px;
    text-align: center;
}

    .commerce-orders-empty > span {
        width: 58px;
        height: 58px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
        color: var(--commerce-blue);
        background: #eef4ff;
        border-radius: 18px;
        font-size: 20px;
    }

    .commerce-orders-empty h2 {
        margin: 0;
        color: var(--commerce-navy);
        font-family: 'Manrope',sans-serif;
        font-size: 18px;
    }

    .commerce-orders-empty p,
    .commerce-orders-no-results span {
        max-width: 360px;
        margin: 7px 0 0;
        color: var(--commerce-muted);
        font-size: 11px;
        line-height: 1.6;
    }

    .commerce-orders-empty a {
        margin-top: 16px;
        color: var(--commerce-blue);
        font-size: 10px;
        font-weight: 800;
    }

.commerce-orders-no-results {
    min-height: 220px;
    color: var(--commerce-muted);
}

    .commerce-orders-no-results i {
        margin-bottom: 10px;
        color: var(--commerce-blue);
        font-size: 20px;
    }

    .commerce-orders-no-results strong {
        color: var(--commerce-navy);
        font-size: 13px;
    }


/* Order detail drawer */

.commerce-order-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 149;
    opacity: 0;
    background: rgba(7,18,34,.44);
    backdrop-filter: blur(2px);
    transition: opacity .18s ease;
}

    .commerce-order-drawer-backdrop.is-open {
        opacity: 1;
    }

.commerce-order-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 150;
    width: min(520px,100%);
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border-left: 1px solid var(--commerce-border);
    box-shadow: -22px 0 70px rgba(8,20,38,.19);
    transform: translateX(102%);
    transition: transform .21s cubic-bezier(.22,.75,.24,1);
}

    .commerce-order-drawer.is-open {
        transform: translateX(0);
    }

body.commerce-order-drawer-open {
    overflow: hidden;
}

.commerce-order-drawer-head {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 15px 18px 15px 22px;
    border-bottom: 1px solid var(--commerce-border);
}

    .commerce-order-drawer-head span {
        color: var(--commerce-blue);
        font-size: 8.5px;
        font-weight: 850;
        letter-spacing: .09em;
        text-transform: uppercase;
    }

    .commerce-order-drawer-head h2 {
        margin: 3px 0 0;
        color: var(--commerce-navy);
        font-family: 'Manrope',sans-serif;
        font-size: 24px;
        letter-spacing: -.04em;
    }

    .commerce-order-drawer-head button {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--commerce-muted);
        background: #fff;
        border: 1px solid var(--commerce-border);
        border-radius: 11px;
        cursor: pointer;
    }

.commerce-order-drawer-loading,
.commerce-order-drawer-error {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 30px;
    color: var(--commerce-muted);
    font-size: 11px;
}

.commerce-order-drawer-error {
    color: var(--commerce-danger);
    text-align: center;
}

.commerce-order-drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px 18px 28px;
    overflow-y: auto;
}

.commerce-order-detail-status-card {
    display: grid;
    grid-template-columns: minmax(0,1fr) 150px auto;
    align-items: end;
    gap: 10px;
    padding: 15px;
    background: #f8faff;
    border: 1px solid var(--commerce-border);
    border-radius: 15px;
}

    .commerce-order-detail-status-card > div > span,
    .commerce-order-detail-status-card label > span {
        display: block;
        margin-bottom: 5px;
        color: var(--commerce-muted);
        font-size: 8px;
        font-weight: 750;
    }

    .commerce-order-detail-status-card > div > strong {
        color: var(--commerce-navy);
        font-family: 'Manrope',sans-serif;
        font-size: 17px;
    }

    .commerce-order-detail-status-card select {
        width: 100%;
        min-height: 39px;
        padding: 0 10px;
        color: var(--commerce-text);
        background: #fff;
        border: 1px solid var(--commerce-border);
        border-radius: 10px;
        outline: 0;
        font-size: 10px;
    }

#commerceOrderStatusSave {
    min-height: 39px;
    padding: 0 12px;
    color: #fff;
    background: var(--commerce-blue);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    font-size: 9px;
    font-weight: 800;
}

.commerce-order-status-save-loading {
    display: none;
    align-items: center;
    gap: 6px;
}

#commerceOrderStatusSave.is-loading .commerce-order-status-save-normal {
    display: none;
}

#commerceOrderStatusSave.is-loading .commerce-order-status-save-loading {
    display: inline-flex;
}

.commerce-order-detail-section {
    margin-top: 13px;
    padding: 17px;
    background: #fff;
    border: 1px solid var(--commerce-border);
    border-radius: 15px;
}

.commerce-order-detail-label {
    display: block;
    margin-bottom: 12px;
    color: var(--commerce-blue);
    font-size: 8.5px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.commerce-order-customer-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
}

    .commerce-order-customer-grid small,
    .commerce-order-customer-grid strong,
    .commerce-order-address small,
    .commerce-order-address strong {
        display: block;
    }

    .commerce-order-customer-grid small,
    .commerce-order-address small {
        color: var(--commerce-muted);
        font-size: 8px;
    }

    .commerce-order-customer-grid strong,
    .commerce-order-address strong {
        margin-top: 3px;
        color: var(--commerce-text);
        font-size: 10.5px;
        line-height: 1.45;
    }

.commerce-order-address {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--commerce-border);
}

    .commerce-order-address a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 9px;
        color: var(--commerce-blue);
        font-size: 9px;
        font-weight: 800;
    }

.commerce-order-detail-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

    .commerce-order-detail-section-head .commerce-order-detail-label {
        margin-bottom: 0;
    }

    .commerce-order-detail-section-head > strong {
        color: var(--commerce-muted);
        font-size: 8.5px;
    }

.commerce-order-detail-items {
    margin-top: 10px;
}

.commerce-order-detail-item {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--commerce-border);
}

    .commerce-order-detail-item > div strong,
    .commerce-order-detail-item > div span,
    .commerce-order-detail-item > div small {
        display: block;
    }

    .commerce-order-detail-item > div strong {
        color: var(--commerce-navy);
        font-size: 10.5px;
    }

    .commerce-order-detail-item > div span,
    .commerce-order-detail-item > div small {
        margin-top: 3px;
        color: var(--commerce-muted);
        font-size: 8.5px;
    }

.commerce-order-detail-item-total {
    color: var(--commerce-text);
    font-size: 10px;
    white-space: nowrap;
}

.commerce-order-detail-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding-top: 13px;
}

    .commerce-order-detail-total span {
        color: var(--commerce-muted);
        font-size: 9px;
        font-weight: 750;
    }

    .commerce-order-detail-total strong {
        color: var(--commerce-navy);
        font-family: 'Manrope',sans-serif;
        font-size: 17px;
    }

#commerceOrderNote {
    margin: 0;
    color: var(--commerce-text-soft);
    font-size: 10px;
    line-height: 1.6;
    white-space: pre-wrap;
}


/* Dashboard order visibility */

.commerce-dashboard-action-orders {
    position: relative;
}

.commerce-dashboard-order-count {
    min-width: 27px;
    height: 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--commerce-blue);
    border-radius: 999px;
    font-size: 9px;
}

.commerce-dashboard-recent-orders {
    margin-top: 22px;
    padding: 0;
    background: var(--commerce-surface);
    border: 1px solid var(--commerce-border);
    border-radius: 22px;
    box-shadow: var(--commerce-shadow-sm);
}

.commerce-dashboard-orders-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--commerce-blue);
    font-size: 10px;
    font-weight: 800;
}

.commerce-dashboard-orders-empty {
    min-height: 90px;
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 17px;
    padding: 15px;
    color: var(--commerce-muted);
    background: var(--commerce-surface-soft);
    border: 1px dashed var(--commerce-border);
    border-radius: 14px;
}

    .commerce-dashboard-orders-empty > span {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--commerce-blue);
        background: #edf4ff;
        border-radius: 11px;
    }

    .commerce-dashboard-orders-empty strong,
    .commerce-dashboard-orders-empty small {
        display: block;
    }

    .commerce-dashboard-orders-empty strong {
        color: var(--commerce-navy);
        font-size: 11px;
    }

    .commerce-dashboard-orders-empty small {
        margin-top: 3px;
        font-size: 9px;
    }

.commerce-dashboard-orders-list {
    padding: 17px;
    display: grid;
    gap: 8px;
    margin-top: 0;
}

.commerce-dashboard-order-row {
    min-height: 70px;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto 12px;
    align-items: center;
    gap: 15px;
    padding: 11px 13px;
    background: var(--commerce-surface-soft);
    border: 1px solid var(--commerce-border);
    border-radius: 13px;
    transition: .15s ease;
}

    .commerce-dashboard-order-row:hover {
        background: #fff;
        border-color: #cbd8e8;
        transform: translateY(-1px);
    }

.commerce-dashboard-order-main {
    min-width: 0;
}

    .commerce-dashboard-order-main small,
    .commerce-dashboard-order-main strong,
    .commerce-dashboard-order-main span {
        display: block;
    }

    .commerce-dashboard-order-main small {
        color: var(--commerce-blue);
        font-size: 8px;
        font-weight: 850;
    }

    .commerce-dashboard-order-main strong {
        margin-top: 2px;
        overflow: hidden;
        color: var(--commerce-navy);
        font-size: 10.5px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .commerce-dashboard-order-main span {
        margin-top: 3px;
        color: var(--commerce-muted);
        font-size: 8.5px;
    }

.commerce-dashboard-order-value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

    .commerce-dashboard-order-value > strong {
        color: var(--commerce-text);
        font-size: 10px;
    }

.commerce-dashboard-order-status {
    min-height: 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 7.5px;
    font-weight: 850;
}

    .commerce-dashboard-order-status.new {
        color: #1d5dc0;
        background: #eaf2ff;
    }

    .commerce-dashboard-order-status.confirmed {
        color: #6550bd;
        background: #f0edff;
    }

    .commerce-dashboard-order-status.preparing {
        color: #9b630c;
        background: #fff4dc;
    }

    .commerce-dashboard-order-status.ready {
        color: #187253;
        background: #e9f8f1;
    }

    .commerce-dashboard-order-status.completed {
        color: #506174;
        background: #eef2f6;
    }

    .commerce-dashboard-order-status.cancelled {
        color: #af343c;
        background: #fff0f1;
    }

.commerce-dashboard-order-row > i {
    color: #a3afbd;
    font-size: 8px;
}


@media(max-width: 760px) {
    .commerce-orders-page {
        width: min(100% - 24px,1180px);
        padding-top: 30px;
    }

    .commerce-orders-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }

    .commerce-orders-summary {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 8px;
    }

    .commerce-orders-summary-card {
        min-height: 82px;
        padding: 14px;
    }

        .commerce-orders-summary-card strong {
            font-size: 23px;
        }

    .commerce-orders-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    .commerce-orders-search {
        width: 100%;
    }

    .commerce-order-row {
        grid-template-columns: minmax(0,1fr) auto 14px;
        gap: 10px;
        padding: 13px;
    }

    .commerce-order-row-date,
    .commerce-order-row-total {
        display: none;
    }

    .commerce-order-status {
        justify-self: end;
    }

    .commerce-order-drawer {
        width: 100%;
        border-left: 0;
    }

    .commerce-order-drawer-head {
        padding-top: max(13px,env(safe-area-inset-top));
    }

    .commerce-order-detail-status-card {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    #commerceOrderStatusSave {
        min-height: 43px;
    }

    .commerce-dashboard-recent-orders {
        padding: 18px;
    }

        .commerce-dashboard-recent-orders .commerce-dashboard-panel-head {
            align-items: flex-start;
            flex-direction: column;
            gap: 8px;
        }
}

@media(max-width: 460px) {
    .commerce-order-customer-grid {
        grid-template-columns: 1fr;
    }

    .commerce-dashboard-order-row {
        grid-template-columns: minmax(0,1fr) 12px;
    }

    .commerce-dashboard-order-value {
        display: none;
    }
}


/* =========================================================
   ORDERS V1.1 POLISH
   Consistent actions, reliable hidden states and quick status.
   ========================================================= */

/* Author display rules must never override the hidden attribute. */
.commerce-order-row[hidden],
.commerce-orders-no-results[hidden],
.commerce-order-drawer-loading[hidden],
.commerce-order-drawer-error[hidden],
.commerce-order-drawer-body[hidden],
.commerce-order-drawer-backdrop[hidden],
.commerce-order-address[hidden],
#commerceOrderLocation[hidden],
#commerceOrderTotalWrap[hidden],
#commerceOrderNoteWrap[hidden] {
    display: none !important;
}

/* Status and next action share one compact table cell. */
.commerce-order-row {
    grid-template-columns: minmax(220px,1.4fr) 105px 125px minmax(190px,auto) 18px;
}

.commerce-order-row-status-actions {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.commerce-order-quick-status-slot {
    flex: 0 0 auto;
    display: inline-flex;
}

.commerce-order-quick-status {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 9px;
    color: var(--commerce-blue);
    background: #f2f6ff;
    border: 1px solid #d4e1f7;
    border-radius: 9px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    font-family: 'Inter', sans-serif;
    font-size: 8px;
    font-weight: 800;
    white-space: nowrap;
    transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease, opacity .16s ease;
}

    .commerce-order-quick-status:hover:not(:disabled) {
        color: #fff;
        background: var(--commerce-blue);
        border-color: var(--commerce-blue);
        transform: translateY(-1px);
    }

    .commerce-order-quick-status:disabled {
        opacity: .62;
        cursor: wait;
    }

    .commerce-order-quick-status.has-error {
        color: var(--commerce-danger);
        background: var(--commerce-danger-bg);
        border-color: #efcdd0;
    }

    .commerce-order-quick-status > i {
        font-size: 7px;
    }

/* Use the exact same primary action language used elsewhere in Commerce. */
#commerceOrderStatusSave.commerce-dashboard-primary-btn {
    min-height: 42px;
    padding: 0 14px;
    color: #fff;
    background: var(--commerce-gradient);
    border: 0;
    border-radius: 11px;
    box-shadow: 0 10px 25px rgba(47,109,246,.19);
    font-size: 9px;
    font-weight: 800;
}

    #commerceOrderStatusSave.commerce-dashboard-primary-btn:hover:not(:disabled) {
        box-shadow: 0 13px 29px rgba(47,109,246,.26);
    }

.commerce-order-status-save-normal,
.commerce-order-status-save-loading {
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.commerce-order-status-save-normal {
    display: inline-flex;
}

#commerceOrderStatusSave.is-loading .commerce-order-status-save-normal {
    display: none;
}

#commerceOrderStatusSave.is-loading .commerce-order-status-save-loading {
    display: inline-flex;
}

/* Recent Orders uses the same secondary button as Manage categories. */
.commerce-dashboard-recent-orders
.commerce-dashboard-panel-head > .commerce-dashboard-secondary-btn {
    flex: 0 0 auto;
}

@media(max-width: 760px) {
    .commerce-order-row {
        grid-template-columns: minmax(0,1fr) auto 14px;
    }

    .commerce-order-row-status-actions {
        justify-self: end;
        gap: 6px;
    }

    .commerce-order-quick-status {
        min-height: 28px;
        padding: 0 8px;
        font-size: 7.5px;
    }

    .commerce-dashboard-recent-orders
    .commerce-dashboard-panel-head > .commerce-dashboard-secondary-btn {
        width: auto;
        flex: 0 0 auto;
    }
}

@media(max-width: 520px) {
    .commerce-order-row-status-actions {
        align-items: flex-end;
        flex-direction: column;
        gap: 5px;
    }

    .commerce-order-quick-status {
        min-height: 27px;
    }
}


/* =========================================================
   COMMERCE ADMIN - ACTIONABLE PAYMENT REQUESTS
   ========================================================= */

.commerce-admin-nav a {
    position: relative;
}

    .commerce-admin-nav a small.commerce-admin-nav-count {
        min-width: 20px;
        height: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 6px;
        margin-left: auto;
        color: #fff;
        background: #d94b53;
        border: 1px solid rgba(255,255,255,.16);
        border-radius: 999px;
        box-shadow: 0 5px 14px rgba(217,75,83,.24);
        font-size: 8px;
        font-weight: 850;
        letter-spacing: 0;
        line-height: 1;
        text-transform: none;
    }

.commerce-admin-request-alert {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
    padding: 14px 15px;
    background: linear-gradient(135deg,#fff9ec,#fffdf8);
    border: 1px solid #efd9aa;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(125,81,14,.05);
}

.commerce-admin-request-alert-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9a650d;
    background: #ffedc8;
    border-radius: 11px;
    font-size: 13px;
}

.commerce-admin-request-alert-copy {
    min-width: 0;
    flex: 1;
}

    .commerce-admin-request-alert-copy strong {
        display: block;
        color: var(--commerce-navy);
        font-family: 'Manrope',sans-serif;
        font-size: 11px;
    }

    .commerce-admin-request-alert-copy span {
        display: block;
        margin-top: 3px;
        color: #7c6a4c;
        font-size: 9px;
        line-height: 1.45;
    }

.commerce-admin-request-alert-action {
    min-height: 34px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 11px;
    color: #fff;
    background: #a96d0d;
    border-radius: 9px;
    font-size: 8px;
    font-weight: 850;
    transition: .16s ease;
}

    .commerce-admin-request-alert-action:hover {
        color: #fff;
        background: #8f5b09;
        transform: translateY(-1px);
    }

.commerce-admin-table {
    min-width: 1040px;
}

.commerce-store-row.has-request td {
    background: #fffdf8;
}

    .commerce-store-row.has-request td:first-child {
        box-shadow: inset 3px 0 0 #d99b2a;
    }

.commerce-store-row.has-request:hover td {
    background: #fffaf0;
}

.commerce-admin-request-cell {
    min-width: 132px;
}

.commerce-admin-request-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    border-radius: 999px;
    font-size: 7.5px;
    font-weight: 850;
    white-space: nowrap;
}

    .commerce-admin-request-badge.activation {
        color: #25629b;
        background: #eaf3ff;
    }

    .commerce-admin-request-badge.renewal {
        color: #8e610c;
        background: #fff3d8;
    }

    .commerce-admin-request-badge.upgrade {
        color: #6650a8;
        background: #f1edff;
    }

.commerce-admin-request-cell > small {
    display: block;
    margin-top: 4px;
    color: var(--commerce-muted);
    font-size: 7px;
    white-space: nowrap;
}

.commerce-admin-request-none {
    color: #a1acba;
    font-size: 8px;
}

.commerce-admin-action.is-attention {
    color: #85570a;
    background: #fff0cf;
    border: 1px solid #ecd39d;
}

    .commerce-admin-action.is-attention:hover {
        color: #fff;
        background: #a96d0d;
        border-color: #a96d0d;
    }

@media(max-width: 900px) {
    .commerce-admin-nav a small.commerce-admin-nav-count {
        position: absolute;
        top: -4px;
        right: -4px;
        min-width: 16px;
        height: 16px;
        display: inline-flex;
        padding: 0 4px;
        font-size: 7px;
    }
}

@media(max-width: 650px) {
    .commerce-admin-request-alert {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .commerce-admin-request-alert-copy {
        flex: 1 1 calc(100% - 55px);
    }

    .commerce-admin-request-alert-action {
        width: 100%;
    }
}


/* =========================================================
   MERCHANT SUBSCRIPTION LIFECYCLE ALERT
   ========================================================= */

.commerce-lifecycle-alert {
    position: relative;
    z-index: 20;
    width: 100%;
    border-bottom: 1px solid transparent;
}

    .commerce-lifecycle-alert.warning {
        color: #6f4d13;
        background: linear-gradient(135deg,#fff9ea,#fffdf6);
        border-bottom-color: #ecd8aa;
    }

    .commerce-lifecycle-alert.danger {
        color: #7f3338;
        background: linear-gradient(135deg,#fff3f4,#fff9f9);
        border-bottom-color: #efc9cd;
    }

.commerce-lifecycle-alert-inner {
    width: min(1180px, calc(100% - 40px));
    min-height: 62px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}

.commerce-lifecycle-alert-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 12px;
}

.commerce-lifecycle-alert.warning
.commerce-lifecycle-alert-icon {
    color: #8d6110;
    background: #ffedc3;
}

.commerce-lifecycle-alert.danger
.commerce-lifecycle-alert-icon {
    color: #a34249;
    background: #ffe0e3;
}

.commerce-lifecycle-alert-copy {
    min-width: 0;
    flex: 1;
}

    .commerce-lifecycle-alert-copy strong {
        display: block;
        color: var(--commerce-navy);
        font-family: 'Manrope', sans-serif;
        font-size: 10px;
        font-weight: 800;
    }

    .commerce-lifecycle-alert-copy span {
        display: block;
        margin-top: 2px;
        color: inherit;
        font-size: 8.5px;
        line-height: 1.45;
    }

.commerce-lifecycle-alert-action {
    min-height: 32px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 11px;
    color: #fff;
    border-radius: 9px;
    font-size: 8px;
    font-weight: 850;
    transition: .16s ease;
}

.commerce-lifecycle-alert.warning
.commerce-lifecycle-alert-action {
    background: #9b6912;
}

.commerce-lifecycle-alert.danger
.commerce-lifecycle-alert-action {
    background: #a9444c;
}

.commerce-lifecycle-alert-action:hover {
    color: #fff;
    filter: brightness(.92);
    transform: translateY(-1px);
}

@media(max-width: 650px) {
    .commerce-lifecycle-alert-inner {
        width: min(100% - 28px, 1180px);
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 12px 0;
    }

    .commerce-lifecycle-alert-copy {
        flex: 1 1 calc(100% - 50px);
    }

    .commerce-lifecycle-alert-action {
        width: 100%;
    }
}

/* =========================================================
   PRODUCTS - PRICING FIELD ALIGNMENT
   Keep Regular price and Sale price on identical rows.
   ========================================================= */

.commerce-product-price-grid > .commerce-field {
    grid-template-rows: 18px 44px auto;
    align-content: start;
    margin-bottom: 0;
}

.commerce-product-price-grid .commerce-product-label-row {
    height: 18px;
    min-height: 18px;
}

.commerce-product-price-grid .commerce-field-label {
    margin-bottom: 0;
}

.commerce-product-price-grid .commerce-product-money-input {
    height: 44px;
}

/* =========================================================
   COMMERCE PASSWORD RECOVERY
   ========================================================= */

.commerce-auth-state {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}

.commerce-auth-state-icon {
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
    color: var(--commerce-blue);
    background: #edf3ff;
    border: 1px solid #dce8fb;
    border-radius: 19px;
    box-shadow: 0 12px 28px rgba(47,109,246,.10);
    font-size: 21px;
}

.commerce-auth-state-icon-success {
    color: var(--commerce-success);
    background: var(--commerce-success-bg);
    border-color: #cfeadd;
    box-shadow: 0 12px 28px rgba(35,139,96,.08);
}

.commerce-auth-state h2 {
    margin: 0 0 10px;
    color: var(--commerce-navy);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(28px,3vw,36px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.045em;
}

.commerce-auth-state > p {
    max-width: 470px;
    margin: 0 auto;
    color: var(--commerce-muted);
    font-size: 13px;
    line-height: 1.7;
}

.commerce-auth-state-note {
    max-width: 470px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 24px auto 0;
    padding: 13px 14px;
    color: #5c6f87;
    background: #f7faff;
    border: 1px solid #e0e8f3;
    border-radius: 12px;
    font-size: 10.5px;
    line-height: 1.6;
    text-align: left;
}

.commerce-auth-state-note > i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--commerce-blue);
}

.commerce-auth-state-note-danger {
    color: #8e3d43;
    background: var(--commerce-danger-bg);
    border-color: #f1cfd2;
}

.commerce-auth-state-note-danger > i {
    color: var(--commerce-danger);
}

.commerce-auth-state-action {
    width: 100%;
    max-width: 310px;
    min-height: 50px;
    margin: 26px auto 0;
    font-size: 11px;
}

.commerce-auth-state .commerce-auth-switch {
    margin-top: 16px;
}

.commerce-auth-invalid-link {
    width: 100%;
}

.commerce-auth-invalid-link .commerce-auth-state-note {
    max-width: none;
    margin-top: 14px;
}

.commerce-auth-invalid-link .commerce-auth-state-action {
    max-width: none;
}

@media(max-width:650px) {
    .commerce-auth-state-icon {
        width: 56px;
        height: 56px;
        border-radius: 17px;
        font-size: 19px;
    }

    .commerce-auth-state-action {
        max-width: none;
    }
}


/* =========================================================
   COMMERCE 3-DAY TRIAL
   ========================================================= */

.commerce-trial-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin: 18px 0 24px;
    padding: 17px 18px;
    border: 1px solid #cfe0ff;
    border-radius: 16px;
    background: linear-gradient(135deg, #f7faff 0%, #eef5ff 100%);
    box-shadow: 0 12px 30px rgba(27, 76, 154, .06);
}

.commerce-trial-banner.is-expired {
    border-color: #ead7d9;
    background: linear-gradient(135deg, #fffafa 0%, #fff4f4 100%);
}

.commerce-trial-banner-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #2f6df6;
    background: #fff;
    border: 1px solid #dce8ff;
    border-radius: 13px;
    box-shadow: 0 8px 20px rgba(47, 109, 246, .10);
}

.commerce-trial-banner.is-expired .commerce-trial-banner-icon {
    color: #b34a54;
    border-color: #efd8db;
    box-shadow: 0 8px 20px rgba(179, 74, 84, .08);
}

.commerce-trial-banner-copy {
    min-width: 0;
}

.commerce-trial-banner-copy > span {
    display: block;
    margin-bottom: 3px;
    color: #2f6df6;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.commerce-trial-banner.is-expired .commerce-trial-banner-copy > span {
    color: #b34a54;
}

.commerce-trial-banner-copy > strong {
    display: block;
    color: #17253b;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 800;
}

.commerce-trial-banner-copy > p {
    margin: 3px 0 0;
    color: #66778e;
    font-size: 10.5px;
    line-height: 1.55;
}

.commerce-trial-banner-action {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    white-space: nowrap;
    color: #fff;
    background: var(--commerce-gradient);
    border-radius: 11px;
    box-shadow: 0 9px 22px rgba(47, 109, 246, .18);
    font-size: 9.5px;
    font-weight: 800;
    text-decoration: none;
}

.commerce-trial-banner.is-expired .commerce-trial-banner-action {
    background: #17253b;
    box-shadow: 0 9px 22px rgba(23, 37, 59, .14);
}

@media(max-width: 720px) {
    .commerce-trial-banner {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .commerce-trial-banner-action {
        grid-column: 1 / -1;
        width: 100%;
    }
}

/* =========================================================
   PENDING PAYMENT · V6 FOCUSED PAYMENT UX
   ========================================================= */

/* Keep the checkout focused. The local 2-step indicator is enough. */
.commerce-payment-heading {
    margin-bottom: 22px;
}

.commerce-payment-heading p {
    max-width: 540px;
}

/* A lightweight stepper avoids adding another large card to the payment page. */
.commerce-payment-flow-tabs {
    grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
    gap: 10px;
    margin: 0 0 22px;
    padding: 0 2px 18px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #e6edf5;
    border-radius: 0;
}

.commerce-flow-step-number {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
}

.commerce-payment-flow-step strong {
    font-size: 11px;
}

.commerce-payment-flow-step small {
    font-size: 8.5px;
}

/* Preserve clear breathing room between each decision block. */
.commerce-payment-step-panel.is-active > .commerce-form-section + .commerce-form-section {
    margin-top: 18px;
}

/* The section header already creates spacing; don't double it below. */
.commerce-payment-methods,
.commerce-payment-grid {
    margin-top: 0;
}

/* Make the actual send-payment instruction the visual destination of Step 1. */
.commerce-whish-payment-section {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border-color: #cfddf0;
    box-shadow: 0 10px 26px rgba(25, 66, 130, .035);
}

.commerce-payment-method-card {
    padding: 16px 17px;
}

.commerce-payment-method-content span {
    font-size: 11.5px;
}

.commerce-copy-btn {
    padding: 8px 11px;
}

.commerce-payment-checkpoint {
    margin-top: 18px;
    padding: 16px 17px;
}

.commerce-payment-checkpoint-copy > div > span {
    max-width: 280px;
}

.commerce-payment-step-intro-receipt {
    margin-bottom: 18px;
}

.commerce-payment-step-intro-receipt h3 {
    margin-bottom: 5px;
}

.commerce-whatsapp-receipt-card .commerce-receipt-option-head {
    margin-bottom: 14px;
}

@media (max-width: 700px) {
    .commerce-payment-flow-tabs {
        grid-template-columns: 1fr;
        padding-bottom: 14px;
    }

    .commerce-payment-checkpoint-copy > div > span {
        max-width: none;
    }
}
/* =========================================================
   COMMERCE HEADER SETTINGS TRIGGER
   Clear merchant controls without changing the dropdown itself.
   ========================================================= */

button.commerce-account-trigger {
    width: auto;
    min-width: 50px;
    height: 38px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 11px;
    color: rgba(255,255,255,.94);
    background: rgba(255,255,255,.075);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px;
    box-shadow: 0 7px 20px rgba(0,0,0,.12);
    font-family: inherit;
    transition:
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

button.commerce-account-trigger:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.25);
    box-shadow: 0 10px 26px rgba(0,0,0,.18);
}

.commerce-account-menu.is-open
button.commerce-account-trigger {
    color: #fff;
    background: rgba(79,140,255,.22);
    border-color: rgba(143,184,255,.42);
    box-shadow:
        0 10px 28px rgba(0,0,0,.17),
        0 0 0 3px rgba(79,140,255,.08);
}

.commerce-account-trigger-gear {
    font-size: 14px;
    line-height: 1;
}

.commerce-account-trigger-chevron {
    font-size: 7px;
    line-height: 1;
    opacity: .58;
    transition:
        transform .18s ease,
        opacity .18s ease;
}

button.commerce-account-trigger:hover
.commerce-account-trigger-chevron {
    opacity: .9;
}

.commerce-account-menu.is-open
.commerce-account-trigger-chevron {
    opacity: .9;
    transform: rotate(180deg);
}

@media(max-width: 700px) {
    button.commerce-account-trigger {
        min-width: 47px;
        height: 36px;
        padding: 0 10px;
        gap: 6px;
    }

    .commerce-account-trigger-gear {
        font-size: 13px;
    }
}
/* =========================================================
   PAYMENT METHODS
   Whish available now + card payments coming soon.
   ========================================================= */

.commerce-payment-methods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.commerce-payment-method-card {
    min-width: 0;
}

.commerce-payment-method-card.is-coming-soon {
    color: #7d8999;
    background: #f8fafc;
    border-color: #e2e8f0;
    box-shadow: none;
    cursor: not-allowed;
}

.commerce-payment-method-card.is-coming-soon
.commerce-payment-method-icon {
    color: #8795a8;
    background: #eef2f6;
}

.commerce-payment-method-card-icon {
    font-size: 20px;
}

.commerce-payment-method-card.is-coming-soon
.commerce-payment-method-content strong {
    color: #526174;
}

.commerce-payment-method-card.is-coming-soon
.commerce-payment-method-content span {
    color: #8a96a6;
}

.commerce-payment-method-badge {
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    padding: 5px 9px;
    color: #6d7888;
    background: #edf1f5;
    border: 1px solid #dfe5ec;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
    white-space: nowrap;
}

.commerce-payment-methods-compact {
    margin: 4px 0 16px;
    gap: 9px;
}

.commerce-payment-methods-compact
.commerce-payment-method-card {
    gap: 11px;
    padding: 12px 13px;
    border-radius: 13px;
}

.commerce-payment-methods-compact
.commerce-payment-method-icon {
    width: 39px;
    height: 39px;
    flex-basis: 39px;
    border-radius: 11px;
}

.commerce-payment-methods-compact
.commerce-payment-method-icon img {
    width: 24px;
    height: 24px;
}

.commerce-payment-methods-compact
.commerce-payment-method-card-icon {
    font-size: 16px;
}

.commerce-payment-methods-compact
.commerce-payment-method-content strong {
    font-size: 12px;
}

.commerce-payment-methods-compact
.commerce-payment-method-content span {
    font-size: 10px;
}

.commerce-payment-methods-compact
.commerce-payment-method-check {
    font-size: 15px;
}

.commerce-payment-methods-compact
.commerce-payment-method-badge {
    min-height: 24px;
    padding: 4px 7px;
    font-size: 7.5px;
}

@media(max-width: 700px) {
    .commerce-payment-methods {
        grid-template-columns: 1fr;
    }

    .commerce-payment-method-badge {
        font-size: 8px;
    }
}
/* =========================================================
   PAYMENT UI REFINEMENT
   Compact payment controls + selector-style payment methods.
   ========================================================= */

/*
 * Payment methods behave like a proper selector list.
 * This applies to activation, renewal and upgrade flows so
 * the interaction pattern stays consistent as more methods arrive.
 */
.commerce-payment-methods {
    grid-template-columns: 1fr;
    gap: 9px;
}

/* Pending Payment only: tighten oversized elements without
   changing the overall two-column activation layout. */
.commerce-payment-page-refined .commerce-payment-main {
    padding: 36px 42px 42px;
}

.commerce-payment-page-refined .commerce-form-heading h2 {
    font-size: clamp(25px, 2.5vw, 32px);
}

.commerce-payment-page-refined .commerce-form-heading p {
    font-size: 13px;
    line-height: 1.6;
}

.commerce-payment-page-refined .commerce-form-step {
    font-size: 10.5px;
}

.commerce-payment-page-refined .commerce-payment-flow-step small {
    font-size: 9.5px;
}

.commerce-payment-page-refined .commerce-form-section {
    padding: 19px 20px;
}

.commerce-payment-page-refined .commerce-form-section-head {
    margin-bottom: 16px;
}

.commerce-payment-page-refined .commerce-form-section-head p {
    font-size: 12px;
    line-height: 1.5;
}

/* Duration selector */
.commerce-payment-page-refined .commerce-month-option > span {
    min-height: 64px;
    border-radius: 13px;
}

.commerce-payment-page-refined .commerce-month-option strong {
    font-size: 20px;
}

.commerce-payment-page-refined .commerce-month-option small {
    margin-top: 4px;
    font-size: 10px;
}

/* Payment methods: compact rows, designed to become switchable later. */
.commerce-payment-page-refined .commerce-payment-method-card {
    gap: 13px;
    padding: 12px 14px;
    border-radius: 14px;
}

.commerce-payment-page-refined .commerce-payment-method-icon {
    width: 43px;
    height: 43px;
    flex-basis: 43px;
    padding: 7px;
    border-radius: 11px;
}

.commerce-payment-page-refined .commerce-payment-method-icon img {
    width: 100%;
    height: 100%;
}

.commerce-payment-page-refined .commerce-payment-method-card-icon {
    font-size: 17px;
}

.commerce-payment-page-refined .commerce-payment-method-content strong {
    font-size: 14px;
}

.commerce-payment-page-refined .commerce-payment-method-content span {
    font-size: 12px;
}

.commerce-payment-page-refined .commerce-payment-method-check {
    font-size: 17px;
}

.commerce-payment-page-refined .commerce-payment-method-badge {
    min-height: 25px;
    padding: 4px 8px;
    font-size: 8.5px;
}

/* Payment amount / Whish account cards */
.commerce-payment-page-refined .commerce-payment-total-card,
.commerce-payment-page-refined .commerce-payment-account-card {
    padding: 17px 18px;
    border-radius: 15px;
}

.commerce-payment-page-refined .commerce-card-label {
    margin-bottom: 10px;
    font-size: 11px;
}

.commerce-payment-page-refined .commerce-amount-currency {
    margin-top: 7px;
    font-size: 22px;
}

.commerce-payment-page-refined .commerce-amount-major {
    font-size: 46px;
}

.commerce-payment-page-refined .commerce-amount-minor {
    margin-top: 8px;
    font-size: 19px;
}

.commerce-payment-page-refined .commerce-amount-breakdown {
    margin-top: 9px;
    font-size: 12.5px;
}

.commerce-payment-page-refined .commerce-payment-account-number {
    margin-bottom: 11px;
    font-size: 24px;
}

.commerce-payment-page-refined .commerce-copy-btn {
    font-size: 12px;
}

/* Keep meaningful helper copy readable. */
.commerce-payment-page-refined .commerce-payment-checkpoint-copy > div > span {
    font-size: 10.5px;
}

@media(max-width: 650px) {
    .commerce-payment-page-refined .commerce-payment-main {
        padding: 28px 18px 32px;
    }

    .commerce-payment-page-refined .commerce-form-heading h2 {
        font-size: 27px;
    }

    .commerce-payment-page-refined .commerce-form-section {
        padding: 17px;
    }
}

/* =========================================================
   SUBSCRIPTION PAYMENT MODAL V2
   Keep the Subscription page focused on the decision.
   Payment happens in a dedicated two-step modal.
   ========================================================= */

.commerce-subscription-payment-continue {
    min-height: 46px;
    justify-content: center;
    gap: 10px;
}

.commerce-subscription-payment-card {
    width: min(660px, calc(100vw - 32px));
    max-height: min(840px, calc(100vh - 40px));
    padding: 0;
    overflow: hidden;
}

.commerce-subscription-payment-card > form {
    max-height: min(840px, calc(100vh - 40px));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.commerce-subscription-payment-head {
    padding: 28px 30px 22px;
    background:
        linear-gradient(180deg, #fff 0%, #fbfcff 100%);
    border-bottom: 1px solid var(--commerce-border);
}

.commerce-subscription-payment-kicker {
    display: block;
    margin-bottom: 7px;
    color: var(--commerce-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.commerce-subscription-payment-head h2 {
    margin: 0;
    color: var(--commerce-navy);
    font-family: 'Manrope', sans-serif;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.04em;
}

.commerce-subscription-payment-head > p {
    margin: 7px 0 0;
    color: var(--commerce-muted);
    font-size: 12px;
    line-height: 1.5;
}

.commerce-subscription-payment-progress {
    display: flex;
    align-items: center;
    margin-top: 22px;
}

.commerce-subscription-payment-progress-item {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #8794a6;
}

.commerce-subscription-payment-progress-item > span {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #7f8ca0;
    background: #f3f6fa;
    border: 1px solid #dfe6ef;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
}

.commerce-subscription-payment-progress-item > div {
    display: grid;
    gap: 1px;
}

.commerce-subscription-payment-progress-item strong {
    color: #637186;
    font-size: 11px;
    font-weight: 800;
}

.commerce-subscription-payment-progress-item small {
    color: #98a3b2;
    font-size: 9px;
}

.commerce-subscription-payment-progress-item.is-active > span {
    color: #fff;
    background: var(--commerce-gradient);
    border-color: transparent;
    box-shadow: 0 7px 18px rgba(47,109,246,.20);
}

.commerce-subscription-payment-progress-item.is-active strong {
    color: var(--commerce-navy);
}

.commerce-subscription-payment-progress-item.is-complete > span {
    color: #fff;
    background: var(--commerce-success);
    border-color: transparent;
}

.commerce-subscription-payment-progress-item.is-complete > span {
    font-size: 0;
}

.commerce-subscription-payment-progress-item.is-complete > span::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-size: 10px;
    font-weight: 900;
}

.commerce-subscription-payment-progress-line {
    width: 46px;
    height: 1px;
    margin: 0 13px;
    background: #dfe6ef;
}

.commerce-subscription-payment-step {
    display: grid;
    gap: 14px;
    padding: 22px 30px 28px;
}

/*
 * The payment flow uses the native hidden attribute to switch
 * between Pay and Send receipt. Keep hidden steps out of layout
 * even though the visible step uses display:grid.
 */
.commerce-subscription-payment-step[hidden] {
    display: none !important;
}

.commerce-subscription-payment-section {
    padding: 16px;
    background: #fff;
    border: 1px solid var(--commerce-border);
    border-radius: 16px;
}

.commerce-subscription-payment-section-head {
    margin-bottom: 13px;
}

.commerce-subscription-payment-section-head span {
    display: block;
    margin-bottom: 3px;
    color: var(--commerce-blue);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.commerce-subscription-payment-section-head strong {
    display: block;
    color: var(--commerce-navy);
    font-size: 13px;
    font-weight: 800;
}

.commerce-subscription-payment-card
.commerce-payment-methods {
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 0;
}

.commerce-subscription-payment-card
.commerce-payment-method-card {
    min-height: 60px;
    padding: 10px 12px;
}

.commerce-subscription-payment-card
.commerce-payment-method-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
}

.commerce-subscription-payment-card
.commerce-payment-method-content strong {
    font-size: 12px;
}

.commerce-subscription-payment-card
.commerce-payment-method-content span {
    font-size: 10px;
}

.commerce-subscription-payment-summary {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 10px;
}

.commerce-subscription-payment-total,
.commerce-subscription-payment-account {
    min-height: 116px;
    padding: 16px;
    background: #f8faff;
    border: 1px solid #e1e9f3;
    border-radius: 14px;
}

.commerce-subscription-payment-total > span,
.commerce-subscription-payment-account > span {
    display: block;
    color: var(--commerce-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.commerce-subscription-payment-total > strong {
    display: block;
    margin: 7px 0 5px;
    color: var(--commerce-navy);
    font-family: 'Manrope', sans-serif;
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
}

.commerce-subscription-payment-total > small {
    color: var(--commerce-muted);
    font-size: 10px;
}

.commerce-subscription-payment-account > strong {
    display: block;
    margin: 9px 0 10px;
    color: var(--commerce-navy);
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.025em;
}

.commerce-subscription-payment-account
.commerce-subscription-copy-btn {
    width: auto;
}

.commerce-subscription-payment-action {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 14px 13px 16px;
    background: #f8fbff;
    border: 1px solid #dce7f4;
    border-radius: 15px;
}

.commerce-subscription-payment-action > div {
    min-width: 0;
}

.commerce-subscription-payment-action strong {
    display: block;
    margin-bottom: 2px;
    color: var(--commerce-navy);
    font-size: 11px;
    font-weight: 800;
}

.commerce-subscription-payment-action span {
    display: block;
    color: var(--commerce-muted);
    font-size: 9.5px;
    line-height: 1.45;
}

.commerce-subscription-payment-action
.commerce-dashboard-primary-btn {
    flex: 0 0 auto;
    min-height: 42px;
}

.commerce-subscription-payment-step-two-head {
    display: grid;
    grid-template-columns: 43px minmax(0,1fr);
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 2px;
}

.commerce-subscription-payment-step-icon {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--commerce-blue);
    background: #edf3ff;
    border-radius: 13px;
    font-size: 15px;
}

.commerce-subscription-payment-step-two-head > div > span {
    display: block;
    margin-bottom: 3px;
    color: var(--commerce-blue);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.commerce-subscription-payment-step-two-head h3 {
    margin: 0 0 4px;
    color: var(--commerce-navy);
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.025em;
}

.commerce-subscription-payment-step-two-head p {
    margin: 0;
    color: var(--commerce-muted);
    font-size: 11px;
    line-height: 1.55;
}

.commerce-subscription-payment-upload {
    min-height: 120px;
}

.commerce-subscription-payment-final-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.commerce-subscription-payment-final-actions
.commerce-dashboard-primary-btn,
.commerce-subscription-payment-final-actions
.commerce-dashboard-secondary-btn {
    min-height: 44px;
}

@media(max-width: 700px) {
    .commerce-subscription-payment-card {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
        border-radius: 20px;
    }

    .commerce-subscription-payment-card > form {
        max-height: calc(100vh - 20px);
    }

    .commerce-subscription-payment-head {
        padding: 24px 20px 19px;
    }

    .commerce-subscription-payment-head h2 {
        padding-right: 30px;
        font-size: 24px;
    }

    .commerce-subscription-payment-step {
        padding: 18px 20px 22px;
    }

    .commerce-subscription-payment-progress-item small {
        display: none;
    }

    .commerce-subscription-payment-progress-line {
        flex: 1;
        width: auto;
        min-width: 25px;
        margin: 0 10px;
    }

    .commerce-subscription-payment-summary {
        grid-template-columns: 1fr;
    }

    .commerce-subscription-payment-total,
    .commerce-subscription-payment-account {
        min-height: auto;
    }

    .commerce-subscription-payment-action {
        align-items: stretch;
        flex-direction: column;
    }

    .commerce-subscription-payment-action
    .commerce-dashboard-primary-btn {
        width: 100%;
    }

    .commerce-subscription-payment-final-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .commerce-subscription-payment-final-actions
    .commerce-dashboard-primary-btn,
    .commerce-subscription-payment-final-actions
    .commerce-dashboard-secondary-btn {
        width: 100%;
    }
}

/* =========================================================
   AJAX PAYMENT SUBMISSION STATES
   Errors and success remain inside the open payment modal.
   ========================================================= */

.commerce-subscription-payment-inline-feedback {
    padding: 11px 13px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
}

.commerce-subscription-payment-inline-feedback.danger {
    color: #a52f39;
    background: var(--commerce-danger-bg);
    border: 1px solid #f0cbd0;
}

.commerce-subscription-payment-inline-feedback.success {
    color: #176c4a;
    background: var(--commerce-success-bg);
    border: 1px solid #cce9dc;
}

.commerce-subscription-payment-success {
    place-items: center;
    padding: 42px 34px 36px;
    text-align: center;
}

.commerce-subscription-payment-success-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    color: #fff;
    background: var(--commerce-success);
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(35,139,96,.18);
    font-size: 20px;
}

.commerce-subscription-payment-success > div > span {
    display: block;
    margin: 10px 0 5px;
    color: var(--commerce-success);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.commerce-subscription-payment-success h3 {
    margin: 0;
    color: var(--commerce-navy);
    font-family: 'Manrope', sans-serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.03em;
}

.commerce-subscription-payment-success p {
    max-width: 470px;
    margin: 8px auto 22px;
    color: var(--commerce-muted);
    font-size: 12px;
    line-height: 1.65;
}

.commerce-subscription-upgrade-success {
    display: grid;
}

.commerce-subscription-upgrade-success[hidden],
.commerce-subscription-payment-success[hidden] {
    display: none !important;
}

@media(max-width: 650px) {
    .commerce-subscription-payment-success {
        padding: 36px 22px 28px;
    }

    .commerce-subscription-payment-success h3 {
        font-size: 20px;
    }
}

/* =========================================================
   MERCHANT READABILITY AUDIT
   Raise meaningful operational copy without making the UI bulky.
   Customer-facing storefront typography is intentionally untouched.
   ========================================================= */

/* ---------- Dashboard ---------- */

.commerce-dashboard-eyebrow {
    font-size: 10px;
}

.commerce-dashboard-primary-btn,
.commerce-dashboard-secondary-btn {
    font-size: 10.5px;
}

.commerce-dashboard-store-copy p {
    font-size: 10.5px;
}

.commerce-dashboard-status {
    font-size: 8.5px;
}

.commerce-dashboard-store-meta span {
    font-size: 8.5px;
}

.commerce-dashboard-store-meta strong {
    font-size: 11px;
}

.commerce-dashboard-stat-label {
    font-size: 9.5px;
}

.commerce-dashboard-stat-value > span {
    font-size: 10.5px;
}

.commerce-dashboard-stat-foot {
    font-size: 9.5px;
}

.commerce-dashboard-panel-head p {
    font-size: 9.5px;
    line-height: 1.45;
}

.commerce-dashboard-action strong {
    font-size: 11px;
}

.commerce-dashboard-action div > span {
    font-size: 9.5px;
    line-height: 1.45;
}

.commerce-dashboard-check > span {
    font-size: 9px;
}

.commerce-dashboard-check strong {
    font-size: 10.5px;
}

.commerce-dashboard-check small {
    font-size: 9px;
    line-height: 1.4;
}


/* ---------- Categories ---------- */

.commerce-category-list-head {
    font-size: 8.75px;
}

.commerce-category-name-cell strong {
    font-size: 11.5px;
}

.commerce-category-name-cell small {
    font-size: 9px;
}

.commerce-category-product-count {
    font-size: 9px;
}

.commerce-category-product-count strong {
    font-size: 10.5px;
}

.commerce-category-status {
    font-size: 9px;
}


/* ---------- Products list ---------- */

.commerce-product-summary > div > span:first-child,
.commerce-product-summary > div > small {
    font-size: 9px;
}

.commerce-product-summary > div > strong small {
    font-size: 9.5px;
}

.commerce-product-filter {
    font-size: 10.5px;
}

.commerce-product-list-head {
    font-size: 8.75px;
}

.commerce-product-cell-main strong,
.commerce-product-main-button strong {
    font-size: 11.5px;
}

.commerce-product-cell-main small,
.commerce-product-main-button small {
    font-size: 9px;
}

.commerce-product-category-cell {
    font-size: 10px;
}

.commerce-product-price-cell strong {
    font-size: 11px;
}

.commerce-product-price-cell small {
    font-size: 9px;
}

.commerce-product-image-count {
    font-size: 10px;
}

.commerce-product-status,
.commerce-product-stock,
.commerce-product-availability {
    font-size: 9px;
}


/* ---------- Product drawer ---------- */

.commerce-product-drawer-head > div > span {
    font-size: 9px;
}

.commerce-product-drawer-head p {
    font-size: 10.5px;
    line-height: 1.5;
}

.commerce-product-form-section-head h3 {
    font-size: 13px;
}

.commerce-product-form-section-head p {
    font-size: 10px;
    line-height: 1.45;
}

.commerce-product-image-counter,
.commerce-product-image-preview-head {
    font-size: 8.5px;
}

.commerce-product-image-dropzone strong {
    font-size: 11px;
}

.commerce-product-image-dropzone small {
    font-size: 9.5px;
}

.commerce-product-image-browse {
    font-size: 9.5px;
}

.commerce-product-compression-note {
    font-size: 9px;
    line-height: 1.45;
}

.commerce-product-inline-link {
    font-size: 9px;
}

.commerce-product-select,
.commerce-product-textarea {
    font-size: 11px;
}

.commerce-product-character-count {
    font-size: 8.5px;
}

.commerce-product-money-input span {
    font-size: 9px;
}

.commerce-product-toggle-row strong {
    font-size: 10.5px;
}

.commerce-product-toggle-row div span {
    font-size: 9px;
    line-height: 1.45;
}

.commerce-product-create-error {
    font-size: 9.5px;
}

.commerce-product-drawer-footer-note {
    font-size: 9px;
    line-height: 1.45;
}


/* ---------- Orders list ---------- */

.commerce-order-row-number {
    font-size: 9.5px;
}

.commerce-order-row-main > small,
.commerce-order-row-date > small {
    font-size: 9.5px;
}

.commerce-order-row-date > strong,
.commerce-order-row-total > strong {
    font-size: 11px;
}

.commerce-order-status {
    font-size: 9.5px;
}

.commerce-orders-empty p,
.commerce-orders-no-results span {
    font-size: 12px;
}


/* ---------- Order drawer ---------- */

.commerce-order-drawer-head span {
    font-size: 9.5px;
}

.commerce-order-drawer-loading,
.commerce-order-drawer-error {
    font-size: 12px;
}

.commerce-order-detail-status-card > div > span,
.commerce-order-detail-status-card label > span {
    font-size: 9px;
}

.commerce-order-detail-status-card select {
    font-size: 11px;
}

.commerce-order-detail-label {
    font-size: 9.5px;
}

.commerce-order-customer-grid small,
.commerce-order-address small {
    font-size: 9px;
}

.commerce-order-customer-grid strong,
.commerce-order-address strong {
    font-size: 11.5px;
}

.commerce-order-address a {
    font-size: 10px;
}

.commerce-order-detail-section-head > strong {
    font-size: 9.5px;
}

.commerce-order-detail-item > div strong {
    font-size: 11.5px;
}

.commerce-order-detail-item > div span,
.commerce-order-detail-item > div small {
    font-size: 9.5px;
}

.commerce-order-detail-item-total {
    font-size: 11px;
}

.commerce-order-detail-total span {
    font-size: 10px;
}


/* ---------- Subscription payment modal ---------- */

.commerce-subscription-payment-progress-item small {
    font-size: 10px;
}

.commerce-subscription-payment-section-head span,
.commerce-subscription-payment-total > span,
.commerce-subscription-payment-account > span {
    font-size: 10px;
}

.commerce-subscription-payment-action span {
    font-size: 10.5px;
}

.commerce-subscription-payment-step-two-head > div > span {
    font-size: 10px;
}

.commerce-subscription-payment-step-two-head p {
    font-size: 11.5px;
}


/* ---------- Small screens ---------- */

@media(max-width: 650px) {
    .commerce-dashboard-primary-btn,
    .commerce-dashboard-secondary-btn {
        font-size: 11px;
    }

    .commerce-product-cell-main strong,
    .commerce-product-main-button strong,
    .commerce-category-name-cell strong {
        font-size: 12px;
    }

    .commerce-order-row-main > strong {
        font-size: 12.5px;
    }
}

/* =========================================================
   COMMERCE REALTIME NOTIFICATIONS
   ========================================================= */

.commerce-notification-menu { position: relative; flex: 0 0 auto; }

.commerce-notification-trigger {
    position: relative;
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
    color: rgba(255,255,255,.92);
    background: rgba(255,255,255,.075);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 7px 20px rgba(0,0,0,.12);
    font-size: 14px;
    transition: .18s ease;
}

.commerce-notification-trigger:hover,
.commerce-notification-menu.is-open .commerce-notification-trigger {
    color: #fff;
    background: rgba(79,140,255,.20);
    border-color: rgba(143,184,255,.38);
    box-shadow: 0 10px 27px rgba(0,0,0,.16), 0 0 0 3px rgba(79,140,255,.07);
}

.commerce-notification-badge {
    position: absolute; top: -5px; right: -6px;
    min-width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 5px;
    color: #fff; background: #e34c55;
    border: 2px solid #0c1d35; border-radius: 999px;
    font-size: 8px; font-weight: 850; line-height: 1;
}

.commerce-notification-badge[hidden],
.commerce-notification-empty[hidden],
.commerce-notification-toast[hidden] { display: none !important; }

.commerce-notification-dropdown {
    position: absolute; top: calc(100% + 12px); right: 0; z-index: 120;
    width: min(390px,calc(100vw - 28px));
    overflow: hidden;
    opacity: 0; visibility: hidden;
    color: var(--commerce-text); background: #fff;
    border: 1px solid var(--commerce-border); border-radius: 18px;
    box-shadow: 0 24px 65px rgba(8,20,38,.18);
    transform: translateY(-5px) scale(.985);
    transform-origin: top right;
    transition: .16s ease;
}

.commerce-notification-menu.is-open .commerce-notification-dropdown {
    opacity: 1; visibility: visible; transform: translateY(0) scale(1);
}

.commerce-notification-head {
    min-height: 66px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; padding: 15px 16px 13px;
    border-bottom: 1px solid var(--commerce-border);
}

.commerce-notification-head strong {
    display: block; color: var(--commerce-navy);
    font-family: 'Manrope',sans-serif; font-size: 14px; font-weight: 800;
}

.commerce-notification-head span {
    display: block; margin-top: 3px; color: var(--commerce-muted); font-size: 9.5px;
}

.commerce-notification-mark-all {
    flex: 0 0 auto; padding: 6px 8px;
    color: var(--commerce-blue); background: transparent; border: 0;
    border-radius: 8px; cursor: pointer; font-size: 9px; font-weight: 800;
}

.commerce-notification-mark-all:hover:not(:disabled) { background: #f1f5ff; }
.commerce-notification-mark-all:disabled { opacity: .38; cursor: default; }

.commerce-notification-list {
    max-height: min(430px,60vh); overflow-y: auto; overscroll-behavior: contain;
}

.commerce-notification-item {
    width: 100%; min-height: 74px;
    display: grid; grid-template-columns: 38px minmax(0,1fr) 8px;
    align-items: center; gap: 11px; padding: 12px 15px;
    color: var(--commerce-text); background: #fff;
    border: 0; border-bottom: 1px solid #edf1f6;
    cursor: pointer; text-align: left; font-family: inherit;
}

.commerce-notification-item:hover { background: #f8faff; }

.commerce-notification-item.is-unread {
    background: linear-gradient(90deg,rgba(47,109,246,.065),rgba(255,255,255,.95) 56%);
}

.commerce-notification-icon {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--commerce-blue); background: #edf3ff;
    border-radius: 11px; font-size: 13px;
}

.commerce-notification-copy { min-width: 0; }
.commerce-notification-copy strong,
.commerce-notification-copy span,
.commerce-notification-copy small { display: block; }

.commerce-notification-copy strong {
    overflow: hidden; color: var(--commerce-navy);
    font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap;
}

.commerce-notification-copy span {
    margin-top: 3px; overflow: hidden; color: var(--commerce-text-soft);
    font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap;
}

.commerce-notification-copy small {
    margin-top: 4px; color: var(--commerce-muted); font-size: 8.5px;
}

.commerce-notification-unread-dot {
    width: 7px; height: 7px; opacity: 0;
    background: var(--commerce-blue); border-radius: 50%;
}

.commerce-notification-item.is-unread .commerce-notification-unread-dot { opacity: 1; }

.commerce-notification-empty {
    min-height: 175px; display: grid; place-items: center; align-content: center;
    padding: 24px; color: var(--commerce-muted); text-align: center;
}

.commerce-notification-empty > i { margin-bottom: 10px; color: #9aa8ba; font-size: 22px; }
.commerce-notification-empty strong { color: var(--commerce-navy); font-size: 11px; }
.commerce-notification-empty span { max-width: 230px; margin-top: 5px; font-size: 9.5px; line-height: 1.5; }

.commerce-notification-footer-link {
    min-height: 43px; display: flex; align-items: center; justify-content: center;
    gap: 8px; color: var(--commerce-blue); background: #fbfcff;
    border-top: 1px solid var(--commerce-border); font-size: 9.5px; font-weight: 800;
}

.commerce-notification-toast {
    position: fixed; right: 22px; bottom: 22px; z-index: 250;
    width: min(410px,calc(100vw - 28px)); min-height: 76px;
    display: grid; grid-template-columns: 42px minmax(0,1fr) auto 28px;
    align-items: center; gap: 11px; padding: 12px 12px 12px 13px;
    opacity: 0; color: var(--commerce-text); background: rgba(255,255,255,.98);
    border: 1px solid var(--commerce-border); border-radius: 16px;
    box-shadow: 0 24px 65px rgba(8,20,38,.20);
    transform: translateY(14px); transition: .2s ease;
}

.commerce-notification-toast.is-visible { opacity: 1; transform: translateY(0); }

.commerce-notification-toast-icon {
    width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
    color: var(--commerce-blue); background: #edf3ff; border-radius: 12px; font-size: 14px;
}

.commerce-notification-toast-copy { min-width: 0; }
.commerce-notification-toast-copy strong,
.commerce-notification-toast-copy span { display: block; }
.commerce-notification-toast-copy strong { color: var(--commerce-navy); font-size: 11.5px; font-weight: 800; }
.commerce-notification-toast-copy span {
    margin-top: 3px; overflow: hidden; color: var(--commerce-muted);
    font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap;
}

#commerceNotificationToastAction {
    min-height: 34px; display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; padding: 0 10px; color: #fff; background: var(--commerce-blue);
    border: 0; border-radius: 9px; cursor: pointer; font-size: 9px; font-weight: 800;
}

.commerce-notification-toast-close {
    width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0; color: #8694a8; background: transparent; border: 0;
    border-radius: 8px; cursor: pointer; font-size: 10px;
}

.commerce-order-row.is-realtime-new {
    animation: commerceRealtimeOrderArrival 1.15s var(--commerce-ease) both;
}

@keyframes commerceRealtimeOrderArrival {
    0% { opacity: .55; background: rgba(47,109,246,.13); transform: translateY(-8px); }
    38% { opacity: 1; background: rgba(47,109,246,.08); transform: translateY(0); }
    100% { background: transparent; }
}

@media(max-width: 700px) {
    .commerce-account-copy { display: none; }
    .commerce-notification-trigger { width: 36px; height: 36px; }

    .commerce-notification-dropdown {
        position: fixed; top: 68px; right: 10px; left: 10px;
        width: auto; max-height: calc(100dvh - 84px);
    }

    .commerce-notification-list { max-height: calc(100dvh - 255px); }

    .commerce-notification-toast {
        right: 10px; bottom: max(10px,env(safe-area-inset-bottom));
        width: calc(100vw - 20px); grid-template-columns: 38px minmax(0,1fr) auto;
    }

    .commerce-notification-toast-icon { width: 38px; height: 38px; }
    .commerce-notification-toast-close { position: absolute; top: 5px; right: 5px; }
    #commerceNotificationToastAction { margin-right: 20px; }
}

/* =========================================================
   COMMERCE NOTIFICATION SOUND
   Quiet settings-row treatment matching the rest of the menu.
   ========================================================= */

.commerce-settings-sound {
    min-height: 40px;
    display: grid;
    grid-template-columns: 20px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    color: var(--commerce-text);
    border-radius: 9px;
    font-size: 10.5px;
    font-weight: 700;
    transition:
        background .15s ease;
}

.commerce-settings-sound:hover {
    background: #f5f8fc;
}

.commerce-settings-sound > i {
    width: 20px;
    color: #71839a;
    text-align: center;
    font-size: 10px;
    transition:
        color .15s ease;
}

.commerce-settings-sound:hover > i {
    color: var(--commerce-blue);
}

.commerce-settings-sound > span {
    min-width: 0;
    color: var(--commerce-navy);
}

.commerce-notification-sound-toggle {
    position: relative;
    width: 32px;
    height: 18px;
    flex: 0 0 32px;
    padding: 0;
    background: #d4dde8;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition:
        background .18s ease,
        box-shadow .18s ease;
}

.commerce-notification-sound-toggle > span {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(8,20,38,.18);
    transition:
        transform .18s var(--commerce-ease);
}

.commerce-notification-sound-toggle.is-on {
    background: var(--commerce-blue);
    box-shadow: none;
}

.commerce-notification-sound-toggle.is-on > span {
    transform: translateX(14px);
}

.commerce-notification-sound-toggle:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(47,109,246,.14);
}

@media(max-width: 700px) {
    .commerce-settings-sound {
        min-height: 42px;
        font-size: 11px;
    }
}

/* Subtle grouping line above notification preferences. */
.commerce-settings-divider {
    height: 1px;
    margin: 7px 8px;
    background: var(--commerce-border);
}