:root {
    --ma-ink: #102033;
    --ma-muted: #66758a;
    --ma-line: #d5eaff;
    --ma-line-strong: #a8d8ff;
    --ma-paper: #ffffff;
    --ma-soft: #f3faff;
    --ma-soft-blue: #eaf7ff;
    --ma-sky: #18a8ff;
    --ma-blue: #0877e8;
    --ma-blue-dark: #0758c8;
    --ma-green: #18a058;
    --ma-amber: #f4a62a;
    --ma-red: #ff3f56;
    --ma-shadow: 0 18px 40px rgba(7, 88, 200, .10);
    --ma-shadow-soft: 0 10px 26px rgba(16, 32, 51, .07);
}

body.el-body,
body.ec-body,
body.eco-body,
body.ss-body,
body.ss-product-body,
body.em-body,
body.emd-body,
body.mas-body {
    color: var(--ma-ink);
    background:
        linear-gradient(180deg, #eaf8ff 0, #f8fcff 300px, #ffffff 100%);
    font-family: "ZehnPro", "Inter", "Segoe UI", Arial, sans-serif;
    letter-spacing: 0;
}

body.el-body *,
body.ec-body *,
body.eco-body *,
body.ss-body *,
body.ss-product-body *,
body.em-body *,
body.emd-body *,
body.mas-body * {
    letter-spacing: 0;
}

.el-topbar,
.ec-topbar,
.eco-topbar,
.ss-topbar,
.ss-product-topbar,
.emd-topbar,
.em-topbar {
    border-color: rgba(168, 216, 255, .82);
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 8px 24px rgba(7, 88, 200, .06);
}

.el-brand > span,
.ec-brand > span,
.emd-brand > span,
.em-brand > span,
.emd-avatar {
    background: linear-gradient(135deg, var(--ma-sky), var(--ma-blue-dark));
    color: #fff;
}

.el-utility-strip,
.ec-branch-strip,
.ec-promo-strip {
    border-color: rgba(168, 216, 255, .72);
    background: rgba(235, 248, 255, .9);
    color: var(--ma-muted);
}

.el-utility-strip > a,
.ec-promo-strip strong,
.em-switch,
.ec-footer a {
    color: var(--ma-blue-dark);
}

.el-branch-pill,
.ec-branch-pill {
    border: 1px solid #c7e7ff;
    background: #f2faff;
    color: var(--ma-blue-dark);
}

.el-branch-pill strong,
.ec-branch-pill strong {
    color: var(--ma-ink);
}

.el-nav a.active,
.el-nav a:hover,
.ec-nav a:hover,
.ec-nav a.is-active,
.el-auth-link,
.ec-auth-link {
    color: var(--ma-blue-dark) !important;
    background: #eaf7ff;
}

.el-top-search input,
.el-search input,
.ec-searchbar,
.em-forms input,
.eco-points input,
.eco-empty input,
.ss-manual-row input,
.ss-form-grid input,
.ss-note-field textarea,
.ss-product-actionbar input,
.ss-cart-tools input,
.ec-field-grid input,
.ec-delivery-box input,
.ec-notes textarea,
.ec-region-modal-grid select,
.ec-region-modal-grid input {
    border-color: var(--ma-line);
    background: #ffffff;
    color: var(--ma-ink);
}

.el-top-search input:focus,
.el-search input:focus,
.em-forms input:focus,
.eco-points input:focus,
.eco-empty input:focus,
.ss-manual-row input:focus,
.ss-form-grid input:focus,
.ss-note-field textarea:focus,
.ss-product-actionbar input:focus,
.ec-field-grid input:focus,
.ec-delivery-box input:focus,
.ec-notes textarea:focus,
.ec-qty-row input:focus,
.ec-region-modal-grid select:focus,
.ec-region-modal-grid input:focus {
    border-color: var(--ma-sky);
    box-shadow: 0 0 0 3px rgba(24, 168, 255, .16);
}

.el-top-search button,
.el-search button,
.el-primary-action,
.el-floating-scan,
.ec-promo-strip a,
.ec-btn-primary,
.eco-payment > button,
.eco-empty button,
.ss-scan-actions button,
.ss-manual-row button,
.ss-checkout-button,
.ss-submit,
.ss-primary-link,
.ss-product-actionbar button,
.em-forms button,
.em-current button,
.emd-hero-actions a:first-child,
.mas-actions a:first-child {
    background: linear-gradient(135deg, var(--ma-sky), var(--ma-blue));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 12px 24px rgba(8, 119, 232, .22);
}

.el-top-search button:hover,
.el-search button:hover,
.el-floating-scan:hover,
.ec-btn-primary:hover,
.eco-payment > button:hover,
.ss-submit:hover,
.ss-primary-link:hover,
.em-forms button:hover,
.mas-actions a:first-child:hover {
    background: linear-gradient(135deg, #35b6ff, var(--ma-blue-dark));
}

.el-main-carousel,
.el-support-banners a,
.el-wireframe-note,
.el-promo-band article,
.el-today-promos,
.el-today-grid article,
.el-category-strip a,
.el-deals,
.el-product-card,
.el-empty,
.ec-card-shell,
.ec-checkout-card,
.ec-main-media,
.ec-branch-panel > div,
.ec-branch-panel [data-branch-option],
.eco-alert,
.eco-empty,
.eco-summary,
.eco-payment,
.eco-member,
.eco-choice,
.eco-points,
.eco-pay-options label,
.ss-scan-stage,
.ss-cart-section,
.ss-checkout-panel form,
.ss-key-features,
.ss-receipt-summary,
.ss-staff-receipt,
.ss-items,
.ss-pickup-note,
.ss-product-popup-card,
.em-copy,
.em-forms form,
.em-current,
.em-alert,
.emd-hero,
.emd-kpis article,
.emd-panel,
.emd-product,
.emd-promo,
.mas-copy,
.mas-qr {
    border-color: var(--ma-line);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, .96);
    box-shadow: var(--ma-shadow-soft);
}

.el-main-carousel,
.ec-card-shell,
.ec-checkout-card,
.eco-summary,
.eco-payment,
.ss-scan-stage,
.ss-cart-section,
.em-copy,
.em-forms form,
.emd-hero,
.mas-copy,
.mas-qr {
    box-shadow: var(--ma-shadow);
}

.el-hero-slide::after {
    background: linear-gradient(90deg, rgba(7, 88, 200, .72), rgba(24, 168, 255, .20) 68%, rgba(255, 255, 255, .04));
}

.el-hero-slide p,
.el-section-head p,
.el-product-body small,
.el-today-grid span,
.el-category-strip span,
.ec-category,
.ec-gallery-trust span,
.ec-sku-copy span,
.ec-price-area small,
.ec-quick-spec-grid span,
.ec-spec-list span,
.ec-checkout-head span,
.eco-topbar span,
.eco-product span,
.eco-choice span,
.eco-member span,
.eco-points span,
.ss-stage-head span,
.ss-section-title span,
.ss-panel-head span,
.ss-receipt-hero p,
.ss-staff-receipt span,
.em-copy > span,
.emd-hero span,
.emd-panel-head span,
.emd-kpis span,
.emd-promo span,
.mas-copy > span {
    color: var(--ma-blue-dark);
}

.el-hero-slide a,
.el-pagination a,
.ec-btn-outline,
.eco-home,
.eco-payment > a,
.ss-scan-actions button:nth-child(2),
.ss-secondary-link,
.mas-actions a,
.emd-topbar a,
.emd-topbar button,
.emd-hero-actions a {
    border-color: var(--ma-line-strong);
    background: #fff;
    color: var(--ma-blue-dark);
}

.el-hero-dots button.is-active,
.ec-tabs button.is-active,
.ec-shop-tabs a.is-active,
.ec-shop-tabs a:hover {
    border-color: var(--ma-sky);
}

.el-support-banners a::after {
    background: linear-gradient(180deg, rgba(7, 88, 200, 0), rgba(7, 88, 200, .72));
}

.el-promo-band article,
.el-category-strip a,
.el-product-card,
.ec-quick-spec-grid div,
.ec-description-box,
.ec-doc-grid a,
.eco-product-mark,
.ss-cart-item,
.ss-cart-image {
    background: linear-gradient(180deg, #ffffff, #f6fbff);
}

.el-product-image,
.ec-main-media,
.ss-popup-image {
    background: linear-gradient(180deg, #f6fbff, #eaf7ff);
}

.el-product-image span,
.ec-image-placeholder {
    background: linear-gradient(135deg, var(--ma-sky), var(--ma-blue-dark));
}

.el-product-body strong,
.ec-price-main,
.ec-checkout-head strong,
.eco-lines .grand strong,
.ss-cart-total strong,
.ss-product-popup-line strong,
.emd-kpis strong,
.emd-wallet strong {
    color: var(--ma-blue);
}

.el-today-grid article {
    border-left: 3px solid var(--ma-red);
}

.el-promo-band article:nth-child(2),
.emd-promo,
.ss-pickup-note,
.eco-alert {
    background: #effaf2;
}

.el-promo-band article:nth-child(2) strong,
.ec-stock-badge.is-ready,
.emd-status,
.eco-alert,
.ss-pickup-note strong {
    color: var(--ma-green) !important;
}

.ec-stock-badge.is-ready,
.ec-member-chip,
.eco-member,
.em-current {
    border-color: #bdeecf;
    background: #effaf2;
}

.ec-stock-badge.is-empty,
.eco-alert.error,
.em-alert.error {
    border-color: #ffd0d7;
    background: #fff4f6;
    color: #be123c;
}

.ec-pack-price,
.ec-pickup-box,
.ec-auth-push,
.ec-tabs button.is-active,
.ec-pills button.is-active,
.ec-gallery-trust span,
.ec-shipping-hint,
.eco-pay-options label:has(input:checked),
.ss-choice-group label:has(input:checked) {
    border-color: var(--ma-line-strong);
    background: #eef8ff;
    color: var(--ma-blue-dark);
}

.ec-price-main {
    letter-spacing: 0;
}

.ec-product-title-card h1,
.ec-price-main {
    letter-spacing: 0;
}

.ec-choice-block label:has(input:checked),
.ec-method-btn.is-active,
.ec-shipping-option:hover,
.ec-shipping-option.is-active {
    border-color: var(--ma-sky);
    background: #eef8ff;
    box-shadow: 0 0 0 3px rgba(24, 168, 255, .12);
}

.ec-qty-row button,
.ec-branch-change,
.ec-region-open-btn,
.ec-check-ongkir-modal,
.ss-section-title button,
.ss-cart-tools button,
.ss-popup-actions a,
.ss-popup-actions button {
    border-color: var(--ma-line-strong);
    background: #fff;
    color: var(--ma-blue-dark);
}

.ec-delivery-title strong,
.ec-delivery-summary-card strong,
.ec-shipping-dialog > header strong,
.eco-choice strong,
.eco-member strong,
.ss-cart-copy strong,
.ss-product-popup-top strong,
.emd-panel-head strong {
    color: var(--ma-ink);
}

.ec-footer,
.el-pagination strong,
.ss-empty-cart,
.emd-empty {
    border-color: var(--ma-line);
}

.emd-wallet,
.ss-receipt-hero {
    background: linear-gradient(145deg, var(--ma-blue-dark), #0197f6);
    color: #fff;
    box-shadow: 0 20px 46px rgba(7, 88, 200, .22);
}

.emd-wallet span {
    color: #dff5ff;
}

.ss-success-mark {
    background: #33d17a;
    box-shadow: 0 14px 30px rgba(24, 160, 88, .25);
}

.ss-success-mark::before {
    border-color: #fff;
}

.mas-code {
    background: #063a7a;
    color: #dff5ff;
}

.ma-bottom-nav {
    display: none;
}

.ma-nav-icon {
    position: relative;
    width: 22px;
    height: 22px;
    display: inline-block;
    color: currentColor;
}

.ma-nav-icon::before,
.ma-nav-icon::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
}

.ma-nav-icon.is-home::before {
    left: 3px;
    top: 9px;
    width: 16px;
    height: 11px;
    border: 2px solid currentColor;
    border-top: 0;
    border-radius: 3px;
}

.ma-nav-icon.is-home::after {
    left: 4px;
    top: 3px;
    width: 14px;
    height: 14px;
    border-left: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: rotate(45deg);
}

.ma-nav-icon.is-grid::before {
    inset: 3px;
    border: 2px solid currentColor;
    border-radius: 4px;
    box-shadow: 8px 0 0 -2px currentColor, 0 8px 0 -2px currentColor, 8px 8px 0 -2px currentColor;
}

.ma-nav-icon.is-scan::before {
    inset: 2px;
    border: 2px solid currentColor;
    border-radius: 6px;
    clip-path: polygon(0 0, 40% 0, 40% 18%, 18% 18%, 18% 40%, 0 40%, 0 0, 60% 0, 100% 0, 100% 40%, 82% 40%, 82% 18%, 60% 18%, 60% 0, 100% 60%, 100% 100%, 60% 100%, 60% 82%, 82% 82%, 82% 60%, 100% 60%, 40% 100%, 0 100%, 0 60%, 18% 60%, 18% 82%, 40% 82%, 40% 100%);
}

.ma-nav-icon.is-scan::after {
    left: 7px;
    top: 10px;
    width: 8px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.ma-nav-icon.is-cart::before {
    left: 4px;
    top: 7px;
    width: 15px;
    height: 10px;
    border: 2px solid currentColor;
    border-top: 0;
    border-radius: 3px;
}

.ma-nav-icon.is-cart::after {
    left: 6px;
    top: 18px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 8px 0 0 currentColor;
}

.ma-nav-icon.is-user::before {
    left: 7px;
    top: 3px;
    width: 8px;
    height: 8px;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.ma-nav-icon.is-user::after {
    left: 4px;
    bottom: 2px;
    width: 14px;
    height: 8px;
    border: 2px solid currentColor;
    border-radius: 10px 10px 4px 4px;
}

@media (max-width: 820px) {
    body:has(.ma-bottom-nav) {
        padding-bottom: 88px;
    }

    .ma-bottom-nav {
        position: fixed;
        left: 50%;
        bottom: 10px;
        z-index: 100;
        width: min(520px, calc(100% - 20px));
        height: 68px;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: center;
        transform: translateX(-50%);
        border: 1px solid rgba(168, 216, 255, .92);
        border-radius: 8px;
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 18px 40px rgba(7, 88, 200, .18);
        backdrop-filter: blur(18px);
    }

    .ma-nav-item {
        min-width: 0;
        min-height: 58px;
        display: grid;
        justify-items: center;
        align-content: center;
        gap: 3px;
        color: #7b8794;
        font-size: 10px;
        font-weight: 900;
        text-decoration: none;
    }

    .ma-nav-item strong {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 10px;
        line-height: 1.1;
    }

    .ma-nav-item.is-active {
        color: var(--ma-blue);
    }

    .ma-nav-item.is-featured {
        transform: translateY(-15px);
        color: #fff;
    }

    .ma-nav-item.is-featured .ma-nav-icon {
        width: 58px;
        height: 58px;
        display: grid;
        place-items: center;
        border: 5px solid #f2faff;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--ma-sky), var(--ma-blue));
        box-shadow: 0 14px 28px rgba(8, 119, 232, .28);
    }

    .ma-nav-item.is-featured .ma-nav-icon::before,
    .ma-nav-item.is-featured .ma-nav-icon::after {
        transform: scale(1.15);
    }

    .ma-nav-item.is-featured strong {
        color: var(--ma-blue);
        font-weight: 950;
    }

    .el-floating-scan {
        display: none;
    }
}

@media (max-width: 560px) {
    .el-shell,
    main,
    .eco-shell,
    .emd-shell,
    .em-shell,
    .mas-shell {
        width: min(100% - 20px, 520px);
    }

    .el-topbar,
    .ec-topbar {
        gap: 9px;
    }

    .el-main-carousel {
        aspect-ratio: 1.35 / 1;
    }

    .el-product-card {
        grid-template-columns: 108px minmax(0, 1fr);
    }

    .ec-quick-spec-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 2026-05-21 loyalty receipt QRIS compact + download */
.ss-loyalty-order-body {
    background: linear-gradient(180deg, #e8f8ff 0%, #f8fcff 100%);
}

.ss-loyalty-receipt-page {
    max-width: 414px;
    padding: 10px 10px 82px;
}

.ss-loyalty-receipt-page .ss-receipt-hero {
    padding: 18px 12px;
    border-radius: 18px;
}

.ss-loyalty-receipt-page .ss-success-mark {
    width: 44px;
    height: 44px;
    border-radius: 14px;
}

.ss-loyalty-receipt-page .ss-success-mark::before {
    left: 12px;
    top: 20px;
    width: 20px;
    height: 10px;
}

.ss-loyalty-receipt-page .ss-receipt-hero p {
    margin: 10px 0 3px;
    font-size: 10px;
}

.ss-loyalty-receipt-page .ss-receipt-hero h1 {
    font-size: clamp(24px, 7.4vw, 34px);
    line-height: 1;
}

.ss-loyalty-receipt-page .ss-receipt-hero strong {
    margin-top: 7px;
    font-size: 23px;
}

.ss-loyalty-receipt-page .ss-receipt-summary {
    margin-top: 9px;
    border-radius: 16px;
}

.ss-loyalty-receipt-page .ss-receipt-summary div {
    padding: 9px 10px;
}

.ss-loyalty-receipt-page .ss-receipt-summary span {
    font-size: 9.5px;
}

.ss-loyalty-receipt-page .ss-receipt-summary strong {
    font-size: 12px;
}

.ss-qris-receipt {
    display: grid;
    gap: 8px;
    margin-top: 9px;
    padding: 12px;
    border-radius: 18px;
    text-align: center;
}

.ss-qris-receipt strong {
    margin-top: 1px;
    font-size: 15px;
}

.ss-qris-receipt .ss-midtrans-qr {
    width: min(210px, 66vw);
    margin-top: 2px;
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 14px 28px rgba(5,43,85,.10);
}

.ss-qris-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 2px;
}

.ss-qris-actions a,
.ss-qris-actions button {
    min-height: 38px;
    border: 0;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 11px;
    font-weight: 950;
}

.ss-qris-actions a {
    background: #052b55;
    color: #fff;
}

.ss-qris-actions button {
    background: #e8f8ff;
    color: #052b55;
}

.ss-qris-receipt small {
    color: #718299;
    font-size: 10px;
    line-height: 1.3;
    font-weight: 750;
}

@media (max-height: 760px) {
    .ss-loyalty-receipt-page .ss-items,
    .ss-loyalty-receipt-page .ss-pickup-note {
        display: none;
    }
    .ss-loyalty-receipt-page {
        padding-bottom: 72px;
    }
    .ss-qris-receipt .ss-midtrans-qr {
        width: min(188px, 58vw);
    }
}

/* 2026-05-21 loyalty receipt one-screen compact polish */
.ss-loyalty-order-body .ma-bottom-nav {
    min-height: calc(58px + env(safe-area-inset-bottom, 0px));
    padding-top: 5px;
}

.ss-loyalty-receipt-page {
    padding: 8px 10px calc(66px + env(safe-area-inset-bottom, 0px));
}

.ss-loyalty-receipt-page .ss-receipt-hero {
    padding: 14px 10px;
    border-radius: 17px;
}

.ss-loyalty-receipt-page .ss-success-mark {
    width: 38px;
    height: 38px;
    border-radius: 13px;
}

.ss-loyalty-receipt-page .ss-success-mark::before {
    left: 10px;
    top: 17px;
    width: 18px;
    height: 9px;
}

.ss-loyalty-receipt-page .ss-receipt-hero p {
    margin: 7px 0 2px;
    font-size: 9px;
}

.ss-loyalty-receipt-page .ss-receipt-hero h1 {
    font-size: clamp(21px, 6.5vw, 29px);
}

.ss-loyalty-receipt-page .ss-receipt-hero strong {
    margin-top: 5px;
    font-size: 21px;
}

.ss-loyalty-receipt-page .ss-receipt-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-top: 7px;
    border-radius: 16px;
}

.ss-loyalty-receipt-page .ss-receipt-summary div {
    padding: 7px 9px;
}

.ss-loyalty-receipt-page .ss-receipt-summary div:nth-child(odd) {
    border-right: 1px solid rgba(5, 43, 85, .08);
}

.ss-loyalty-receipt-page .ss-receipt-summary span {
    font-size: 8.5px;
}

.ss-loyalty-receipt-page .ss-receipt-summary strong {
    font-size: 11px;
    line-height: 1.15;
}

.ss-loyalty-receipt-page .ss-staff-receipt {
    margin-top: 7px;
    padding: 10px;
    border-radius: 17px;
}

.ss-loyalty-receipt-page .ss-staff-receipt strong {
    font-size: 14px;
}

.ss-loyalty-receipt-page .ss-order-qr,
.ss-qris-receipt .ss-midtrans-qr {
    width: min(168px, 50vw);
    max-height: 168px;
    object-fit: contain;
    margin-top: 2px;
    padding: 7px;
    border-radius: 15px;
}

.ss-loyalty-receipt-page .ss-staff-receipt p {
    margin-top: 4px;
    font-size: 10px;
}

.ss-qris-actions a,
.ss-qris-actions button {
    min-height: 34px;
    border-radius: 12px;
    font-size: 10px;
}

.ss-qris-receipt small {
    font-size: 9px;
}

@media (max-height: 700px) {
    .ss-loyalty-receipt-page .ss-items,
    .ss-loyalty-receipt-page .ss-pickup-note,
    .ss-loyalty-receipt-page .ss-primary-link,
    .ss-loyalty-receipt-page .ss-secondary-link {
        display: none;
    }
    .ss-loyalty-receipt-page .ss-order-qr,
    .ss-qris-receipt .ss-midtrans-qr {
        width: min(150px, 45vw);
        max-height: 150px;
    }
}

/* Midtrans e-wallet receipt block */
.ss-wallet-payment {
    display: grid;
    justify-items: center;
    gap: 8px;
    margin: 12px auto;
    padding: 16px;
    width: min(260px, 90%);
    border-radius: 20px;
    background: #f6fcff;
    border: 1px solid rgba(20,156,232,.18);
}
.ss-wallet-payment img {
    width: 132px;
    height: 52px;
    object-fit: contain;
    background: #fff;
    border-radius: 12px;
    padding: 5px 8px;
}
.ss-wallet-payment strong {
    color: #052b55;
    font-weight: 950;
}
.ss-wallet-payment span {
    color: #718299;
    font-size: 12px;
    font-weight: 800;
}