:root {
    --mg-navy: #0b4f91;
    --mg-navy-2: #1767ae;
    --mg-copper: #ed1c24;
    --mg-amber: #f28f78;
    --mg-ice: #eef6fc;
    --mg-ink: #12324d;
    --mg-muted: #61758a;
    --mg-line: #d7e6f2;
    --mg-white: #fff;
    --mg-shadow: 0 24px 70px rgba(11, 79, 145, .14);
}

/* Payment bank identity and modal feedback */
.mg-payment-card { --payment-bank: var(--mg-navy-2); }
.mg-card-preview { position: relative; overflow: hidden; background: linear-gradient(135deg,var(--payment-bank),#071d30); transition: background .3s ease; }
.mg-card-preview::after { content: ""; position: absolute; right: -70px; bottom: -80px; width: 220px; height: 220px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; }
.mg-card-preview > * { position: relative; z-index: 1; }
.mg-card-bank { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; margin-top: 18px; }
.mg-card-bank img { max-width: 118px; max-height: 40px; padding: 5px 8px; border-radius: 8px; object-fit: contain; background: rgba(255,255,255,.94); }
.mg-card-bank span { font-size: 12px; font-weight: 800; opacity: .82; text-align: right; }
.mg-installment-heading-brand { min-width: 0; }
.mg-installment-bank-logo { display: grid; flex: 0 0 52px; width: 52px; height: 38px; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb,var(--payment-bank) 22%,#d9e3eb); border-radius: 9px; background: #fff; }
.mg-installment-bank-logo img { width: 100%; height: 100%; padding: 4px; object-fit: contain; }
.mg-installment-bank-logo i { color: var(--payment-bank); }
.mg-installment-heading-copy { display: grid; min-width: 0; gap: 1px; }
.mg-installment-heading-copy strong { overflow: hidden; color: var(--mg-navy); text-overflow: ellipsis; white-space: nowrap; }
.mg-installment-heading-copy em { color: var(--mg-muted); font-size: 11px; font-style: normal; font-weight: 600; }
.mg-installment-option:hover,.mg-installment-option.is-selected { border-color: var(--payment-bank); background: color-mix(in srgb,var(--payment-bank) 7%,#fff); box-shadow: 0 7px 18px color-mix(in srgb,var(--payment-bank) 15%,transparent); }
.mg-installment-option input { accent-color: var(--payment-bank); }
.mg-payment-dialog[hidden] { display: none; }
.mg-payment-dialog { position: fixed; z-index: 99999; inset: 0; display: grid; padding: 20px; place-items: center; opacity: 0; transition: opacity .2s ease; }
.mg-payment-dialog.is-open { opacity: 1; }
.mg-payment-dialog-backdrop { position: absolute; inset: 0; background: rgba(4,20,33,.7); backdrop-filter: blur(7px); }
.mg-payment-dialog-card { position: relative; width: min(440px,100%); padding: 34px; border: 1px solid rgba(13,40,64,.11); border-radius: 24px; background: #fff; box-shadow: 0 30px 90px rgba(4,20,33,.28); text-align: center; transform: translateY(12px) scale(.98); transition: transform .22s ease; }
.mg-payment-dialog.is-open .mg-payment-dialog-card { transform: none; }
.mg-payment-dialog-icon { display: grid; width: 70px; height: 70px; margin: 0 auto 20px; place-items: center; border-radius: 22px; color: #a5232b; background: #fff0f1; font-size: 27px; }
.mg-payment-dialog.is-warning .mg-payment-dialog-icon { color: #8b5b00; background: #fff6d9; }
.mg-payment-dialog.is-success .mg-payment-dialog-icon { color: #14734b; background: #e5f7ef; }
.mg-payment-dialog h2 { margin: 0 0 9px; color: var(--mg-navy); font-size: 27px; }
.mg-payment-dialog p { margin: 0; color: var(--mg-muted); line-height: 1.65; }
.mg-payment-dialog-actions { display: flex; justify-content: center; gap: 10px; margin-top: 25px; }
.mg-payment-dialog-actions button { min-width: 145px; min-height: 48px; border: 0; border-radius: 11px; }
.mg-field .form-control.is-invalid { border-color: #d94c56; box-shadow: 0 0 0 3px rgba(217,76,86,.1); }

/* BIN and installment administration */
.panel-payment-definitions { min-height: calc(100vh - 72px); padding: 42px; background: #f3f7fa; }
.panel-definition-hero { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 34px 38px; border-radius: 24px; color: #fff; background: linear-gradient(125deg,#083e70,#1767ae); box-shadow: 0 20px 50px rgba(11,79,145,.18); }
.panel-definition-hero .panel-eyebrow { color: #ffb5b8; font-size: 12px; font-weight: 900; letter-spacing: .16em; }
.panel-definition-hero h1 { margin: 7px 0; color: #fff; font-size: clamp(30px,4vw,44px); }
.panel-definition-hero p { max-width: 760px; margin: 0; color: rgba(255,255,255,.78); }
.panel-definition-hero-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 10px; }
.panel-definition-hero-actions form { margin: 0; }
.panel-definition-back { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 0; border-radius: 11px; color: var(--mg-navy); background: #fff; font: inherit; font-weight: 900; cursor: pointer; }
.panel-definition-back:hover { color: #fff; background: var(--mg-copper); }
.panel-definition-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin: 22px 0; }
.panel-definition-kpis article { display: flex; align-items: center; gap: 14px; min-height: 104px; padding: 19px; border: 1px solid var(--mg-line); border-radius: 17px; background: #fff; box-shadow: 0 10px 28px rgba(11,79,145,.06); }
.panel-definition-kpis article > span { display: grid; flex: 0 0 46px; width: 46px; height: 46px; place-items: center; border-radius: 14px; color: var(--mg-navy); background: var(--mg-ice); font-size: 19px; }
.panel-definition-kpis small { display: block; color: var(--mg-muted); }
.panel-definition-kpis strong { color: var(--mg-ink); font-size: 25px; }
.panel-definition-tabs { display: flex; gap: 8px; margin-bottom: 18px; padding: 6px; border: 1px solid var(--mg-line); border-radius: 15px; background: #fff; box-shadow: 0 9px 25px rgba(11,79,145,.05); }
.panel-definition-tabs button { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 20px; border: 0; border-radius: 11px; color: var(--mg-muted); background: transparent; font-weight: 900; }
.panel-definition-tabs button span { padding: 2px 8px; border-radius: 99px; background: #eaf1f6; font-size: 11px; }
.panel-definition-tabs button.is-active { color: #fff; background: linear-gradient(135deg,var(--mg-navy-2),var(--mg-navy)); box-shadow: 0 8px 22px rgba(11,79,145,.2); }
.panel-definition-tabs button.is-active span { color: var(--mg-navy); background: #fff; }
.panel-definition-pane { display: grid; gap: 18px; }
.panel-definition-pane[hidden] { display: none; }
.panel-definition-editor,.panel-definition-list { overflow: hidden; border: 1px solid var(--mg-line); border-radius: 20px; background: #fff; box-shadow: 0 14px 38px rgba(11,79,145,.07); }
.panel-definition-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 25px; padding: 25px 27px; border-bottom: 1px solid var(--mg-line); background: linear-gradient(180deg,#fff,#fafdff); }
.panel-definition-heading span,.panel-definition-list-head > div:first-child > span { color: var(--mg-copper); font-size: 11px; font-weight: 900; letter-spacing: .15em; }
.panel-definition-heading h2,.panel-definition-list-head h2 { margin: 4px 0; color: var(--mg-navy); font-size: 25px; }
.panel-definition-heading p { margin: 0; color: var(--mg-muted); }
.panel-definition-reset { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 15px; border: 1px solid var(--mg-line); border-radius: 10px; color: var(--mg-navy); background: #fff; font-weight: 900; }
.panel-definition-reset:hover { color: #fff; border-color: var(--mg-navy-2); background: var(--mg-navy-2); }
.panel-definition-form { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; padding: 27px; }
.panel-definition-form > label { display: grid; align-content: start; gap: 7px; margin: 0; color: var(--mg-navy); font-size: 13px; font-weight: 900; }
.panel-definition-form .span-2 { grid-column: span 2; }
.panel-definition-form input:not([type="checkbox"]):not([type="color"]),.panel-definition-form select { width: 100%; min-height: 48px; padding: 0 13px; border: 1px solid var(--mg-line); border-radius: 10px; color: var(--mg-ink); background: #f9fbfd; outline: none; }
.panel-definition-form input:focus,.panel-definition-form select:focus { border-color: var(--mg-navy-2); box-shadow: 0 0 0 3px rgba(23,103,174,.1); }
.panel-definition-form label > small { color: var(--mg-muted); font-size: 10px; font-weight: 600; }
.panel-color-field { display: grid; grid-template-columns: 50px 1fr; gap: 8px; }
.panel-color-field input[type="color"] { width: 50px; height: 48px; padding: 4px; border: 1px solid var(--mg-line); border-radius: 10px; background: #fff; }
.panel-switch { grid-template-columns: auto 42px minmax(0,1fr) !important; align-items: center !important; padding: 13px; border: 1px solid var(--mg-line); border-radius: 12px; background: #f9fbfd; cursor: pointer; }
.panel-switch > input { position: absolute; opacity: 0; }
.panel-switch > span { position: relative; width: 42px; height: 24px; border-radius: 99px; background: #cbd7df; transition: .2s ease; }
.panel-switch > span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.2); transition: .2s ease; }
.panel-switch > input:checked + span { background: var(--mg-navy-2); }
.panel-switch > input:checked + span::after { transform: translateX(18px); }
.panel-switch div { display: grid; gap: 2px; }
.panel-switch div strong { color: var(--mg-ink); }
.panel-switch div small { color: var(--mg-muted); font-size: 10px; font-weight: 600; }
.panel-definition-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 7px; }
.panel-definition-actions .theme-btn { min-height: 48px; border-radius: 10px; }
.panel-definition-advanced { padding: 14px 16px; border: 1px solid var(--mg-line); border-radius: 12px; background: #f9fbfd; }
.panel-definition-advanced summary { color: var(--mg-navy); font-weight: 900; cursor: pointer; }
.panel-definition-advanced > div { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; margin-top: 15px; }
.panel-definition-advanced label { display: grid; gap: 6px; color: var(--mg-muted); font-size: 11px; }
.panel-definition-list-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 24px 27px; border-bottom: 1px solid var(--mg-line); }
.panel-definition-filters { display: flex; gap: 9px; }
.panel-definition-filters label { position: relative; margin: 0; }
.panel-definition-filters label i { position: absolute; z-index: 1; top: 50%; left: 13px; color: var(--mg-muted); transform: translateY(-50%); }
.panel-definition-filters input,.panel-definition-filters select { min-height: 43px; border: 1px solid var(--mg-line); border-radius: 10px; color: var(--mg-ink); background: #f9fbfd; outline: none; }
.panel-definition-filters input { width: 260px; padding: 0 12px 0 38px; }
.panel-definition-filters select { min-width: 155px; padding: 0 32px 0 12px; }
.panel-definition-table-wrap { max-height: 720px; overflow: auto; }
.panel-definition-table { width: 100%; min-width: 980px; border-collapse: collapse; }
.panel-definition-table thead { position: sticky; z-index: 2; top: 0; }
.panel-definition-table th { padding: 13px 15px; color: var(--mg-muted); background: #f3f7fa; font-size: 10px; letter-spacing: .09em; text-align: left; text-transform: uppercase; }
.panel-definition-table td { padding: 14px 15px; border-top: 1px solid #e8f0f5; color: var(--mg-ink); vertical-align: middle; }
.panel-definition-table tbody tr:hover { background: #fbfdff; }
.panel-definition-table tr[hidden] { display: none; }
.panel-definition-table td > strong,.panel-definition-table td > small { display: block; }
.panel-definition-table td > small { margin-top: 3px; color: var(--mg-muted); font-size: 10px; }
.panel-bin-number { color: var(--mg-navy); font: 900 16px Consolas,monospace; letter-spacing: .08em; }
.panel-bank-cell { display: flex; align-items: center; gap: 10px; min-width: 210px; }
.panel-bank-cell > span { display: grid; flex: 0 0 52px; width: 52px; height: 36px; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb,var(--bank-color) 25%,#dce5eb); border-radius: 8px; color: var(--bank-color); background: #fff; }
.panel-bank-cell img { width: 100%; height: 100%; padding: 4px; object-fit: contain; }
.panel-bank-cell div { display: grid; gap: 2px; }
.panel-bank-cell strong { color: var(--mg-ink); font-size: 12px; }
.panel-bank-cell small { color: var(--mg-muted); font-size: 9px; }
.panel-row-actions { display: flex; gap: 6px; }
.panel-row-actions button { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid var(--mg-line); border-radius: 9px; color: var(--mg-navy); background: #fff; }
.panel-row-actions button:hover { color: #fff; border-color: var(--mg-navy-2); background: var(--mg-navy-2); }
.panel-row-actions button.is-danger { color: #a5232b; }
.panel-row-actions button.is-danger:hover { color: #fff; border-color: #b82d36; background: #b82d36; }
.panel-installment-count { color: var(--mg-navy); font-size: 15px; }
.panel-definition-empty { display: grid; padding: 50px 20px; place-items: center; color: var(--mg-muted); text-align: center; }
.panel-definition-empty[hidden] { display: none; }
.panel-definition-empty i { display: grid; width: 55px; height: 55px; margin-bottom: 12px; place-items: center; border-radius: 17px; color: var(--mg-navy); background: var(--mg-ice); font-size: 22px; }
.panel-definition-empty strong { color: var(--mg-navy); }
.panel-definition-list > footer { padding: 13px 24px; border-top: 1px solid var(--mg-line); color: var(--mg-muted); text-align: right; }
.panel-definition-list > footer strong { color: var(--mg-navy); }
.panel-definition-dialog[hidden] { display: none; }
.panel-definition-dialog { position: fixed; z-index: 99999; inset: 0; display: grid; padding: 20px; place-items: center; opacity: 0; transition: opacity .18s ease; }
.panel-definition-dialog.is-open { opacity: 1; }
.panel-definition-dialog-backdrop { position: absolute; inset: 0; background: rgba(4,20,33,.7); backdrop-filter: blur(7px); }
.panel-definition-dialog > section { position: relative; width: min(430px,100%); padding: 32px; border-radius: 22px; background: #fff; box-shadow: 0 30px 85px rgba(4,20,33,.3); text-align: center; transform: translateY(10px) scale(.98); transition: transform .2s ease; }
.panel-definition-dialog.is-open > section { transform: none; }
.panel-definition-dialog-icon { display: grid; width: 65px; height: 65px; margin: 0 auto 17px; place-items: center; border-radius: 20px; color: var(--mg-navy); background: var(--mg-ice); font-size: 25px; }
.panel-definition-dialog.is-success .panel-definition-dialog-icon { color: #14734b; background: #e5f7ef; }
.panel-definition-dialog.is-error .panel-definition-dialog-icon { color: #a5232b; background: #fff0f1; }
.panel-definition-dialog.is-warning .panel-definition-dialog-icon { color: #8b5b00; background: #fff6d9; }
.panel-definition-dialog h2 { margin: 0 0 8px; color: var(--mg-navy); }
.panel-definition-dialog p { margin: 0; color: var(--mg-muted); line-height: 1.6; }
.panel-definition-dialog > section > div { display: flex; justify-content: center; gap: 9px; margin-top: 23px; }
.panel-definition-dialog .theme-btn { min-width: 120px; min-height: 45px; border-radius: 10px; }

@media (max-width: 1100px) {
    .panel-definition-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .panel-definition-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .panel-definition-list-head,.panel-definition-hero { align-items: flex-start; flex-direction: column; }
    .panel-definition-filters { width: 100%; flex-wrap: wrap; }
}
@media (max-width: 700px) {
    .panel-payment-definitions { padding: 20px 12px; }
    .panel-definition-hero { padding: 26px 22px; }
    .panel-definition-hero-actions { width: 100%; flex-direction: column; align-items: stretch; }
    .panel-definition-hero-actions form { width: 100%; }
    .panel-definition-back { width: 100%; justify-content: center; }
    .panel-definition-kpis,.panel-definition-form { grid-template-columns: 1fr; }
    .panel-definition-form .span-2 { grid-column: auto; }
    .panel-definition-tabs button { flex: 1; padding: 0 8px; font-size: 12px; }
    .panel-definition-heading,.panel-definition-list-head { align-items: stretch; flex-direction: column; }
    .panel-definition-filters { flex-direction: column; }
    .panel-definition-filters label,.panel-definition-filters input,.panel-definition-filters select { width: 100%; }
    .panel-definition-advanced > div { grid-template-columns: 1fr; }
    .panel-definition-actions { flex-direction: column; }
    .panel-definition-actions .theme-btn { width: 100%; }
}

body { color: var(--mg-ink); background: #f8fafb; }
a { text-decoration: none; }

.mg-brand-logo { width: min(360px, 100%); height: auto; display: block; }
.mg-fixed-mobile-brand { display: none; }
.header-middle-logo .mg-brand-logo { width: 350px; }
.mobile-top-brand .mg-brand-logo { width: 210px; }
.footer-logo .mg-brand-logo { width: 330px; padding: 10px 14px; border-radius: 10px; background: #fff; }

.header-top { background: linear-gradient(90deg, #08477f, #1767ae) !important; }
.header-top-list li a i { color: #fff !important; opacity: .82; }
.header-middle { padding: 16px 0 !important; border-bottom: 1px solid var(--mg-line); background: #fff !important; }
.header-middle-line { display: none !important; }
.header-middle-search .search-content { border: 2px solid #cfe1f0 !important; background: #f7fbfe !important; }
.header-middle-search .search-content:focus-within { border-color: var(--mg-navy-2) !important; box-shadow: 0 0 0 4px rgba(23,103,174,.1); }
.header-middle-search .search-btn,
.header-middle-list .list-item { color: var(--mg-navy-2) !important; }
.header-middle-list .list-item { background: var(--mg-ice) !important; }
.header-middle-list .list-item:hover { color: #fff !important; background: var(--mg-copper) !important; }
.navbar .nav-item .nav-link.active,
.navbar .nav-item .nav-link:hover,
.navbar .nav-item:hover .nav-link { color: var(--mg-copper) !important; }
.theme-btn { background: linear-gradient(135deg, var(--mg-navy-2), var(--mg-navy)) !important; }
.theme-btn::before { background: var(--mg-copper) !important; }

.mg-hero {
    position: relative;
    min-height: 680px;
    display: grid;
    align-items: center;
    overflow: hidden;
    color: #fff;
    background: #0b1d2e url('../img/home/mg-isi-hero.png') center/cover no-repeat;
}
.mg-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(6,24,39,.96) 0%, rgba(9,32,51,.88) 38%, rgba(9,32,51,.36) 67%, rgba(9,32,51,.16) 100%);
}
.mg-hero .container { position: relative; z-index: 1; }
.mg-hero-copy { max-width: 680px; padding: 96px 0; }
.mg-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: #ffd29c; font-size: 13px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.mg-eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--mg-copper); }
.mg-hero h1 { margin: 20px 0 18px; color: #fff; font-size: clamp(40px, 4.4vw, 58px); line-height: 1.02; letter-spacing: -.04em; }
.mg-hero p { max-width: 620px; color: rgba(255,255,255,.8); font-size: 19px; line-height: 1.75; }
.mg-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.mg-primary, .mg-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 12px; font-weight: 800; }
.mg-primary { color: #fff; background: linear-gradient(135deg, var(--mg-copper), #c91118); box-shadow: 0 12px 28px rgba(237,28,36,.24); }
.mg-primary:hover { color: #fff; transform: translateY(-2px); }
.mg-secondary { color: #fff; border: 1px solid rgba(255,255,255,.32); background: rgba(255,255,255,.08); backdrop-filter: blur(10px); }
.mg-secondary:hover { color: #fff; border-color: #fff; }
.mg-hero-proof { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 42px; color: rgba(255,255,255,.85); font-weight: 700; }
.mg-hero-proof span { display: inline-flex; align-items: center; gap: 8px; }
.mg-hero-proof i { color: #ffbd73; }

.mg-section { padding: clamp(58px, 6vw, 78px) 0; }
.mg-section-heading { max-width: 760px; margin-bottom: 36px; }
.mg-section-heading span { color: var(--mg-copper); font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.mg-section-heading h2 { margin: 10px 0 12px; color: var(--mg-navy); font-size: clamp(30px, 4vw, 48px); letter-spacing: -.03em; }
.mg-section-heading p { color: var(--mg-muted); font-size: 17px; line-height: 1.7; }
.mg-service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.mg-service-card { position: relative; display: flex; min-height: 350px; flex-direction: column; overflow: hidden; padding: 0; border: 1px solid var(--mg-line); border-radius: 20px; background: #fff; box-shadow: 0 12px 38px rgba(13,40,64,.06); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.mg-service-card:hover { border-color: #aacde6; transform: translateY(-5px); box-shadow: 0 20px 44px rgba(11,79,145,.13); }
.mg-service-visual { position: relative; display: grid; min-height: 178px; place-items: center; overflow: hidden; border-bottom: 1px solid #dceaf3; background: radial-gradient(circle at 50% 45%,#fff 0,#eef7fc 58%,#e2f0f8 100%); isolation: isolate; }
.mg-service-visual::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 4px; background: linear-gradient(90deg,var(--mg-copper),var(--mg-navy-2)); }
.mg-service-visual::after { content: ""; position: absolute; width: 116px; height: 116px; border: 1px solid rgba(23,103,174,.10); border-radius: 50%; background: rgba(255,255,255,.42); z-index: -1; }
.mg-service-visual img { width: 164px; height: 164px; object-fit: contain; filter: drop-shadow(0 12px 13px rgba(7,48,82,.14)); transition: transform .35s ease; }
.mg-service-card:hover .mg-service-visual img { transform: scale(1.055); }
.mg-service-content { display: flex; flex: 1 1 auto; flex-direction: column; padding: 23px 25px 26px; }
.mg-service-card i { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 22px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--mg-navy-2), var(--mg-navy)); }
.mg-service-card h3 { margin: 0 0 7px; color: var(--mg-navy); font-size: 20px; }
.mg-service-card p { margin: 0; color: var(--mg-muted); line-height: 1.65; }
.mg-cta { margin: 0 0 92px; padding: 54px; border-radius: 26px; color: #fff; background: linear-gradient(125deg, var(--mg-navy), #1b4d70); box-shadow: var(--mg-shadow); }
.mg-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.mg-cta h2 { margin: 0 0 10px; color: #fff; font-size: clamp(28px,4vw,44px); }
.mg-cta p { margin: 0; color: rgba(255,255,255,.75); }

.mg-categories .leather-section-heading h2,
.product-area .site-title { color: var(--mg-navy); }
.mg-categories { background: linear-gradient(180deg, #f7fbfe, #fff); }
#cozumler { padding-bottom: 26px; }
.mg-categories > .mg-section { margin: 0; padding-top: 26px; }
.mg-categories:empty,
#urunler:empty,
main.main > section:empty,
main.main > div:empty { display: none !important; }
#urunler > .product-area { padding-top: 52px !important; padding-bottom: 52px !important; }
#urunler > .product-area + .product-area { padding-top: 0 !important; }
.mg-categories .leather-collection-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.mg-categories .leather-collection-card { display: flex; min-height: 0; padding: 0 0 22px; overflow: hidden; border: 1px solid var(--mg-line); border-radius: 18px; color: var(--mg-ink); background: #fff; box-shadow: 0 12px 35px rgba(11,79,145,.08); }
.mg-categories .leather-collection-card::before,
.mg-categories .leather-collection-card::after { display: none; }
.mg-categories .leather-collection-card .mg-category-visual { position: relative; display: grid; width: 100%; height: 185px; margin: 0 0 20px; padding: 18px; place-items: center; overflow: hidden; color: inherit; background: var(--mg-ice); }
.mg-categories .leather-collection-card .mg-category-visual::after { content: ""; position: absolute; top: 0; left: 0; width: 58px; height: 5px; background: linear-gradient(90deg, var(--mg-copper), var(--mg-navy-2)); }
.mg-categories .leather-collection-card .mg-category-visual img { position: static; z-index: 1; width: 100% !important; height: 100% !important; max-width: none; max-height: none; object-fit: contain; transform: none; image-rendering: auto; transition: transform .35s ease; }
.mg-categories .leather-collection-card:hover .mg-category-visual img { transform: scale(1.045); }
.mg-categories .leather-collection-card .mg-category-kicker { margin: 0 22px; color: var(--mg-copper); font-size: 11px; letter-spacing: .12em; }
.mg-categories .leather-collection-card strong { margin: 7px 22px 0; color: var(--mg-navy); font-size: 22px; }
.mg-categories .leather-collection-card small { display: flex; align-items: center; justify-content: space-between; margin: 12px 22px 0; color: var(--mg-muted); }
.mg-categories .leather-collection-card small i { color: var(--mg-copper); }
.mg-categories .leather-collection-card:hover { color: var(--mg-ink); border-color: #aacbe5; transform: translateY(-6px); box-shadow: 0 22px 45px rgba(11,79,145,.14); }

.product-item { border-color: var(--mg-line) !important; background: #fff !important; box-shadow: 0 12px 34px rgba(11,79,145,.07) !important; }
.product-item:hover { border-color: #b5d1e7 !important; box-shadow: 0 20px 42px rgba(11,79,145,.14) !important; }
.product-img { background: var(--mg-ice) !important; }
.product-img img { width: 100% !important; height: 255px !important; object-fit: contain !important; padding: 18px !important; }
.product-item .type { background: var(--mg-navy-2) !important; color: #fff !important; }
.product-item .type.hot,
.product-item .type.discount { background: var(--mg-copper) !important; }
.product-price span { color: var(--mg-navy) !important; font-weight: 900 !important; letter-spacing: -.02em; }
.product-cart-btn { color: var(--mg-navy-2) !important; border-color: #cfe2f1 !important; background: var(--mg-ice) !important; }
.product-cart-btn:hover { color: #fff !important; border-color: var(--mg-copper) !important; background: var(--mg-copper) !important; }
.site-heading-inline .site-title img { display: none; }
.site-heading-inline .site-title::before { content: ""; display: inline-block; width: 7px; height: 32px; border-radius: 99px; background: linear-gradient(180deg, var(--mg-copper), var(--mg-navy-2)); }
.site-breadcrumb { background: linear-gradient(105deg, rgba(5,45,80,.94), rgba(11,79,145,.62)), url('../img/home/mg-isi-hero.png') center 43%/cover no-repeat !important; }
.site-breadcrumb::after { background: linear-gradient(90deg, rgba(5,45,80,.38), rgba(237,28,36,.08) 60%, rgba(5,45,80,.2)) !important; }
.site-breadcrumb .breadcrumb-menu li.active,
.site-breadcrumb .breadcrumb-menu li.active a { color: #ffd0d2 !important; }
.shop-single-price .amount { color: var(--mg-navy) !important; }

.mg-payment-shell { min-height: 100vh; padding: 54px 18px; background: radial-gradient(circle at top left, #fff 0, #edf4f7 45%, #dce9ef 100%); }
.mg-payment-login { max-width: 470px; margin: 0 auto; padding: 42px; border: 1px solid rgba(13,40,64,.1); border-radius: 24px; background: rgba(255,255,255,.94); box-shadow: var(--mg-shadow); }
.mg-payment-login .mg-brand-logo { width: 230px; margin: 0 auto 30px; }
.mg-payment-login h1 { color: var(--mg-navy); font-size: 30px; text-align: center; }
.mg-payment-login .intro { margin: 0 0 28px; color: var(--mg-muted); text-align: center; }
.mg-field { margin-bottom: 18px; }
.mg-field label { display: block; margin-bottom: 7px; color: var(--mg-navy); font-weight: 800; }
.mg-field .form-control { min-height: 50px; border: 1px solid var(--mg-line); border-radius: 12px; }
.mg-field .input-group .form-control { border-radius: 12px 0 0 12px; }
.mg-field .input-group-text { min-width: 48px; justify-content: center; border-color: var(--mg-line); border-radius: 0 12px 12px 0; color: var(--mg-navy); background: var(--mg-ice); font-weight: 900; }
.mg-field-help { display: block; margin-top: 7px; color: var(--mg-muted); font-size: 12px; }
.mg-payment-card { max-width: 1080px; margin: 0 auto; overflow: hidden; border: 1px solid rgba(13,40,64,.1); border-radius: 28px; background: #fff; box-shadow: var(--mg-shadow); }
.mg-payment-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 34px; border-bottom: 1px solid var(--mg-line); }
.mg-payment-head .mg-brand-logo { width: 220px; }
.mg-security { display: inline-flex; align-items: center; gap: 8px; color: #14734b; font-weight: 800; }
.mg-payment-body { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 34px; padding: 38px; }
.mg-payment-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.mg-payment-form .wide { grid-column: 1 / -1; }
.mg-card-preview { min-height: 220px; padding: 28px; border-radius: 22px; color: #fff; background: linear-gradient(135deg,#143b59,#071d30); box-shadow: 0 22px 45px rgba(13,40,64,.22); }
.mg-card-preview small { opacity: .65; letter-spacing: .12em; text-transform: uppercase; }
.mg-card-number { margin: 42px 0 28px; font-size: 23px; letter-spacing: .1em; }
.mg-card-meta { display: flex; justify-content: space-between; gap: 16px; }
.mg-installments { grid-column: 1 / -1; padding: 14px; border: 1px solid #e0ebf4; border-radius: 20px; background: linear-gradient(145deg,#f8fbfe,#fff); box-shadow: inset 0 1px 0 #fff,0 12px 35px rgba(13,40,64,.05); }
.mg-installments table { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
.mg-installments td, .mg-installments th { padding: 12px; border: 0; }
.mg-installments tr { border-radius: 10px; background: var(--mg-ice); }
.mg-pay-submit { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 8px; }
.mg-installment-options { display: grid; grid-template-columns: repeat(auto-fit,minmax(270px,1fr)); gap: 10px; }
.mg-installment-heading { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 12px; padding: 14px 16px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--payment-bank) 20%,var(--mg-line)); border-radius: 16px; color: var(--mg-navy); background: linear-gradient(135deg,color-mix(in srgb,var(--payment-bank) 8%,#fff),#fff 72%); }
.mg-installment-heading::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: linear-gradient(180deg,var(--payment-bank),var(--mg-navy)); }
.mg-installment-heading.is-unverified::before { background: linear-gradient(180deg,#f2a93b,#d47714); }
.mg-installment-heading-brand { display: flex; align-items: center; gap: 11px; }
.mg-installment-heading-status { display: inline-flex; align-items: center; gap: 9px; padding: 8px 11px; border: 1px solid color-mix(in srgb,var(--payment-bank) 14%,var(--mg-line)); border-radius: 12px; color: var(--mg-navy); background: rgba(255,255,255,.82); white-space: nowrap; }
.mg-installment-heading-status > i { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 9px; color: #fff; background: linear-gradient(135deg,var(--payment-bank),var(--mg-navy)); font-size: 12px; }
.mg-installment-heading.is-unverified .mg-installment-heading-status > i { background: linear-gradient(135deg,#f2a93b,#d47714); }
.mg-installment-heading-status > span { display: grid; gap: 1px; }
.mg-installment-heading-status b { color: var(--mg-navy); font-size: 11px; font-weight: 900; }
.mg-installment-heading-status small { color: var(--mg-muted); font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.mg-installment-loading { display: flex; align-items: center; gap: 10px; padding: 18px; border: 1px solid var(--mg-line); border-radius: 12px; color: var(--mg-muted); background: var(--mg-ice); }
.mg-installment-loading i { color: var(--mg-navy-2); }
.mg-installment-option { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 14px; min-height: 92px; padding: 16px 18px; overflow: hidden; border: 1px solid var(--mg-line); border-radius: 17px; background: #fff; cursor: pointer; box-shadow: 0 9px 26px rgba(13,40,64,.055); transition: border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease; }
.mg-installment-option::after { content: ""; position: absolute; right: -28px; bottom: -44px; width: 100px; height: 100px; border: 1px solid color-mix(in srgb,var(--payment-bank) 12%,transparent); border-radius: 50%; pointer-events: none; }
.mg-installment-option:hover, .mg-installment-option.is-selected { border-color: var(--mg-navy-2); background: #eef7ff; box-shadow: 0 7px 18px rgba(11,79,145,.08); }
.mg-installment-option.is-selected { border-color: color-mix(in srgb,var(--payment-bank) 55%,var(--mg-navy)); background: linear-gradient(135deg,color-mix(in srgb,var(--payment-bank) 6%,#fff),#fff 70%); box-shadow: 0 14px 34px color-mix(in srgb,var(--payment-bank) 13%,rgba(13,40,64,.08)); }
.mg-installment-option:hover { transform: translateY(-1px); }
.mg-installment-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mg-installment-radio { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid color-mix(in srgb,var(--payment-bank) 28%,var(--mg-line)); border-radius: 11px; color: #fff; background: #fff; transition: .2s ease; }
.mg-installment-radio i { opacity: 0; transform: scale(.65); transition: .2s ease; }
.mg-installment-option.is-selected .mg-installment-radio { border-color: var(--mg-navy-2); background: linear-gradient(135deg,var(--payment-bank),var(--mg-navy)); box-shadow: 0 7px 18px rgba(11,79,145,.2); }
.mg-installment-option.is-selected .mg-installment-radio i { opacity: 1; transform: none; }
.mg-installment-plan { display: grid; min-width: 0; gap: 1px; }
.mg-installment-plan small { color: var(--mg-muted); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.mg-installment-plan strong { color: var(--mg-navy); font-size: 15px; }
.mg-installment-plan em { color: var(--mg-muted); font-size: 11px; font-style: normal; }
.mg-installment-price { display: grid; gap: 2px; text-align: right; }
.mg-installment-price b { color: var(--mg-navy); font-size: 18px; font-weight: 900; white-space: nowrap; }
.mg-installment-price small { color: var(--mg-muted); font-size: 10px; white-space: nowrap; }
.mg-payment-feedback { display: none; padding: 12px 14px; border-radius: 10px; }
.mg-payment-feedback.is-visible { display: block; }
.mg-payment-feedback.is-error { color: #8f1e25; border: 1px solid #f3c4c8; background: #fff1f2; }
.mg-payment-login.is-success { border-top: 5px solid #16845b; }
.mg-payment-login.is-error { border-top: 5px solid #b33b32; }
.mg-receipt-page { margin: 0; background: #eef3f5; }
.mg-no-print { padding: 16px; text-align: center; }
.mg-pay-submit .theme-btn { min-width: 210px; min-height: 54px; border-radius: 12px; }

.mg-result { max-width: 850px; margin: 40px auto; padding: 42px; border-radius: 24px; background: #fff; box-shadow: var(--mg-shadow); text-align: center; }
.mg-result-icon { display: grid; width: 76px; height: 76px; place-items: center; margin: 0 auto 22px; border-radius: 50%; color: #fff; font-size: 30px; background: #16845b; }
.mg-result.is-error .mg-result-icon { background: #b83b3b; }
.mg-result h1 { color: var(--mg-navy); }
.mg-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }

.mg-receipt { box-sizing: border-box; width: 148mm; min-height: 210mm; margin: 0 auto 24px; padding: 10mm; color: #17242e; background: #fff; box-shadow: 0 18px 45px rgba(10,45,76,.12); font: 11px/1.45 Arial,sans-serif; }
.mg-receipt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 7mm; padding-bottom: 7mm; border-bottom: 2px solid var(--mg-navy); }
.mg-receipt-head img { width: 54mm; height: auto; }
.mg-receipt-title { text-align: right; }
.mg-receipt-title h1 { margin: 0; color: var(--mg-navy); font-size: 18px; line-height: 1.15; }
.mg-receipt-badge { display: inline-block; margin-top: 5px; padding: 4px 8px; border-radius: 99px; color: #fff; background: #16845b; font-size: 9px; font-weight: 800; }
.mg-receipt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm; margin: 8mm 0; }
.mg-receipt-box { min-width: 0; padding: 4.5mm; border: 1px solid var(--mg-line); border-radius: 3mm; }
.mg-receipt-box h2 { margin: 0 0 3mm; color: var(--mg-navy); font-size: 13px; }
.mg-receipt-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 7px; padding: 1.8mm 0; border-bottom: 1px dashed var(--mg-line); }
.mg-receipt-row strong { max-width: 64%; overflow-wrap: anywhere; text-align: right; }
.mg-receipt-total { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 7mm 0; padding: 5mm; border-radius: 3mm; color: #fff; background: var(--mg-navy); }
.mg-receipt-total strong { flex: 0 0 auto; font-size: 20px; }
.mg-receipt-confirmation { margin: 0; color: #526476; font-size: 10.5px; }

.panel-dashboard { padding: 42px; background: #f3f7f9; }
.panel-dashboard-hero { border-radius: 24px; background: linear-gradient(125deg,var(--mg-navy),#1d557b); }
.panel-dashboard-card { border-radius: 16px; border: 1px solid var(--mg-line); background: #fff; }

/* Customer account and checkout */
.commerce-auth-page, .commerce-basket-page { background: #f2f7fb; }
.commerce-auth { min-height: calc(100vh - 150px); padding: 64px 0; background: radial-gradient(circle at 9% 14%,rgba(237,28,36,.08),transparent 28%),linear-gradient(135deg,#edf6fc 0,#f9fbfd 48%,#eaf3fa 100%); }
.commerce-auth-shell { display: grid; grid-template-columns: minmax(0,.9fr) minmax(440px,1.1fr); max-width: 1080px; margin: 0 auto; overflow: hidden; border: 1px solid rgba(11,79,145,.12); border-radius: 28px; background: #fff; box-shadow: 0 28px 75px rgba(11,79,145,.14); }
.commerce-auth-shell-login { max-width: 940px; }
.commerce-auth-intro { position: relative; padding: 54px 46px; overflow: hidden; color: #fff; background: linear-gradient(145deg,#083e70,#1767ae); }
.commerce-auth-intro::after { position: absolute; right: -70px; bottom: -100px; width: 240px; height: 240px; border: 42px solid rgba(255,255,255,.06); border-radius: 50%; content: ""; }
.commerce-auth-eyebrow { color: #ffb0b4; font-size: 12px; font-weight: 900; letter-spacing: .17em; }
.commerce-auth-intro h1 { margin: 14px 0; color: #fff; font-size: clamp(30px,4vw,45px); line-height: 1.08; }
.commerce-auth-intro > p { margin-bottom: 34px; color: rgba(255,255,255,.78); font-size: 16px; }
.commerce-auth-intro ul { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.commerce-auth-intro li, .commerce-auth-security { display: flex; align-items: flex-start; gap: 13px; }
.commerce-auth-intro li > i, .commerce-auth-security > i { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; border-radius: 12px; color: #fff; background: rgba(255,255,255,.13); }
.commerce-auth-intro li span, .commerce-auth-security span { color: rgba(255,255,255,.72); font-size: 13px; }
.commerce-auth-intro li strong, .commerce-auth-security strong { display: block; margin-bottom: 2px; color: #fff; font-size: 14px; }
.commerce-auth-card { padding: 46px; }
.commerce-auth-card header { margin-bottom: 28px; }
.commerce-auth-card header > span, .basket-page-eyebrow { color: var(--mg-copper); font-size: 11px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.commerce-auth-card h2 { margin: 5px 0 3px; color: var(--mg-navy); font-size: 31px; }
.commerce-auth-card header p { margin: 0; color: var(--mg-muted); }
.commerce-auth-card header a, .commerce-consent a, .commerce-account-note a { color: var(--mg-navy-2); font-weight: 800; }
.commerce-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.commerce-field.wide { grid-column: 1/-1; }
.commerce-field label, .guest-order-phone label { display: block; margin-bottom: 7px; color: var(--mg-ink); font-size: 13px; font-weight: 800; }
.commerce-field .form-control, .guest-order-phone .form-control { min-height: 50px; padding: 11px 14px; border: 1px solid #cfdeea; border-radius: 11px; background: #fafdff; }
.commerce-field textarea.form-control { min-height: 90px; }
.commerce-field .form-control:focus, .guest-order-phone .form-control:focus { border-color: var(--mg-navy-2); box-shadow: 0 0 0 4px rgba(23,103,174,.1); }
.commerce-field small, .guest-order-phone small { display: block; margin-top: 6px; color: var(--mg-muted); font-size: 11px; }
.commerce-consent { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0; color: var(--mg-muted); font-size: 13px; cursor: pointer; }
.commerce-consent input { margin-top: 4px; accent-color: var(--mg-navy-2); }
.commerce-auth-submit { width: 100%; min-height: 52px; border-radius: 12px; }
.commerce-form-message { min-height: 25px; padding-top: 12px; text-align: center; }

.commerce-page-hero { padding: 54px 0 46px; color: #fff; background: linear-gradient(125deg,#083e70,#1767ae); }
.commerce-page-hero-compact { padding-block: 38px; }
.commerce-page-hero > .container > span { color: #ffb5b8; font-size: 11px; font-weight: 900; letter-spacing: .18em; }
.commerce-page-hero h1 { margin: 5px 0 8px; color: #fff; font-size: clamp(31px,5vw,50px); }
.commerce-page-hero p { max-width: 700px; margin: 0; color: rgba(255,255,255,.78); }
.commerce-checkout-steps { display: flex; align-items: center; gap: 34px; margin: 26px 0 0; padding: 0; list-style: none; }
.commerce-checkout-steps li { position: relative; display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.58); font-size: 13px; font-weight: 800; }
.commerce-checkout-steps li:not(:last-child)::after { position: absolute; left: calc(100% + 10px); width: 14px; height: 1px; background: rgba(255,255,255,.25); content: ""; }
.commerce-checkout-steps b { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; }
.commerce-checkout-steps .is-active, .commerce-checkout-steps .is-done { color: #fff; }
.commerce-checkout-steps .is-active b { color: var(--mg-navy); border-color: #fff; background: #fff; }
.commerce-checkout-steps .is-done b { border-color: #42d6a0; background: #16845b; }
.commerce-basket-content { padding: 46px 0 80px; }
.commerce-basket-card, .commerce-checkout-card { border: 1px solid var(--mg-line); border-radius: 20px; background: #fff; box-shadow: 0 18px 42px rgba(11,79,145,.08); }
.commerce-basket-card { padding: 28px; }
.basket-page-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-bottom: 20px; border-bottom: 1px solid var(--mg-line); }
.basket-page-head h2 { margin: 3px 0 0; color: var(--mg-navy); font-size: 25px; }
.basket-secondary-link { display: inline-flex; align-items: center; gap: 7px; color: var(--mg-navy-2); font-size: 13px; font-weight: 800; }
.commerce-basket-list { display: grid; gap: 14px; padding-top: 20px; }
.commerce-basket-summary { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 18px; padding: 20px; border: 1px solid var(--mg-line); border-radius: 16px; background: #fafdff; }
.commerce-basket-summary-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 14px; color: #fff; background: var(--mg-navy-2); }
.commerce-basket-summary small, .commerce-basket-summary span { display: block; color: var(--mg-muted); font-size: 11px; }
.commerce-basket-summary strong { display: block; color: var(--mg-navy); font-size: 19px; }
.commerce-status-pill { width: max-content; margin-top: 4px; padding: 3px 8px; border-radius: 99px; color: #087453 !important; background: #e7f7f1; font-weight: 800; }
.commerce-basket-summary-total { text-align: right; }
.commerce-basket-summary .theme-btn { min-height: 44px; padding: 0 17px; border-radius: 10px; }
.basket-empty-state { padding: 55px 24px; text-align: center; }
.basket-empty-icon { display: grid; width: 70px; height: 70px; place-items: center; margin: 0 auto 18px; border-radius: 20px; color: var(--mg-navy-2); background: var(--mg-ice); font-size: 28px; }
.basket-empty-state h3 { color: var(--mg-navy); }
.basket-empty-state p { max-width: 520px; margin: 0 auto 22px; color: var(--mg-muted); }
.commerce-cart-items { display: grid; gap: 14px; padding-top: 20px; }
.commerce-cart-item { display: grid; grid-template-columns: 104px minmax(0,1fr) auto; gap: 16px; padding: 14px; border: 1px solid var(--mg-line); border-radius: 16px; }
.commerce-cart-image { display: grid; width: 104px; height: 104px; place-items: center; overflow: hidden; border-radius: 12px; background: #f4f8fb; }
.commerce-cart-image img { width: 100%; height: 100%; object-fit: contain; }
.commerce-cart-copy small { color: var(--mg-muted); font-size: 11px; }
.commerce-cart-copy h3 { margin: 4px 0 8px; font-size: 16px; line-height: 1.3; }
.commerce-cart-copy h3 a { color: var(--mg-ink); }
.commerce-product-option { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 7px; color: var(--mg-navy); background: var(--mg-ice); font-size: 11px; font-weight: 800; }
.commerce-cart-price { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.commerce-cart-price span { color: var(--mg-muted); font-size: 12px; }
.commerce-cart-price strong { color: var(--mg-navy); }
.commerce-cart-controls { display: grid; grid-template-columns: 64px 38px; align-content: center; align-items: center; gap: 6px; }
.commerce-cart-controls label { grid-column: 1/-1; margin: 0; color: var(--mg-muted); font-size: 10px; font-weight: 800; }
.basket-quantity-input { min-height: 38px; border-radius: 8px; text-align: center; }
.basket-remove-btn { display: grid; width: 38px; height: 38px; place-items: center; border: 0; border-radius: 8px; color: #b02f38; background: #fff0f1; }
.commerce-checkout-card { position: sticky; top: 18px; padding: 27px; }
.commerce-checkout-card h2 { margin: 4px 0 18px; color: var(--mg-navy); font-size: 25px; }
.commerce-checkout-total { display: flex; justify-content: space-between; gap: 12px; padding: 17px 0; border-block: 1px solid var(--mg-line); }
.commerce-checkout-total span { color: var(--mg-muted); }
.commerce-checkout-total strong { color: var(--mg-navy); font-size: 22px; }
.commerce-checkout-assurance { display: flex; gap: 10px; margin: 18px 0; padding: 13px; border-radius: 12px; color: #087453; background: #eaf8f3; }
.commerce-checkout-assurance i { margin-top: 3px; }
.commerce-checkout-assurance strong, .commerce-checkout-assurance small { display: block; }
.commerce-checkout-assurance small { margin-top: 2px; color: #477365; font-size: 10px; }
.guest-order-phone { margin: 18px 0; }
.commerce-pay-button { display: flex; width: 100%; min-height: 52px; align-items: center; justify-content: center; border-radius: 12px; }
.commerce-order-request { width: 100%; margin-top: 10px; padding: 12px; border: 1px solid var(--mg-line); border-radius: 11px; color: var(--mg-navy); background: #fff; font-size: 12px; font-weight: 800; }
.commerce-account-note { margin: 15px 0 0; color: var(--mg-muted); font-size: 11px; line-height: 1.55; }

/* Panel dashboard, stocks and website orders */
.panel-dashboard { min-height: calc(100vh - 72px); }
.panel-dashboard-hero { padding: 40px 44px; color: #fff; box-shadow: 0 20px 48px rgba(11,79,145,.18); }
.panel-dashboard-hero .panel-eyebrow { color: #ffb5b8; font-size: 11px; font-weight: 900; letter-spacing: .18em; }
.panel-dashboard-hero h1 { margin: 7px 0; color: #fff; font-size: 40px; }
.panel-dashboard-hero p { max-width: 760px; margin: 0; color: rgba(255,255,255,.78); }
.panel-dashboard-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-top: 24px; }
.panel-dashboard-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 20px; color: var(--mg-ink); box-shadow: 0 10px 26px rgba(11,79,145,.05); transition: .2s ease; }
.panel-dashboard-card:hover { transform: translateY(-3px); border-color: #aacbe5; box-shadow: 0 16px 34px rgba(11,79,145,.11); }
.panel-card-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(135deg,var(--mg-navy),var(--mg-navy-2)); font-size: 18px; }
.panel-card-copy strong, .panel-card-copy small { display: block; }
.panel-card-copy strong { color: var(--mg-navy); font-size: 15px; }
.panel-card-copy small { margin-top: 3px; color: var(--mg-muted); font-size: 11px; line-height: 1.45; }
.panel-card-arrow { color: var(--mg-copper); }
[data-panel-stock-def] { padding: 34px !important; background: #f3f7fa; }
[data-panel-stock-def] > div { max-width: 1500px; margin: 0 auto; }
[data-panel-stock-def] .site-heading { margin-bottom: 18px; }
[data-panel-stock-def] .site-title-tagline { color: var(--mg-copper); font-size: 12px; font-weight: 900; letter-spacing: .15em; }
[data-panel-stock-def] .login-form { padding: 28px; border: 1px solid var(--mg-line); border-radius: 20px; background: #fff; box-shadow: 0 18px 42px rgba(11,79,145,.08); }
[data-panel-stock-def] .form-group label { color: var(--mg-ink); font-size: 12px; font-weight: 800; }
[data-panel-stock-def] .form-control { border-color: #cfdeea; border-radius: 10px; background: #fbfdff; }
[data-panel-stock-def] textarea.form-control { min-height: 115px; }
[data-panel-stock-def] .panel-action-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 16px 0 24px; }
[data-panel-stock-def] .panel-action-row .theme-btn { width: 100%; min-height: 46px; border-radius: 11px; }
[data-panel-stock-def] .panel-grid-wrap { padding-top: 18px; border-top: 1px solid var(--mg-line); }
.panel-stock-list-alert, .panel-order-alert { display: flex; align-items: center; gap: 9px; padding: 13px 15px; border: 1px solid #f2d282; border-radius: 10px; background: #fff6d9; }

.panel-order-page { min-height: calc(100vh - 72px); padding: 38px; background: #f3f7fa; }
.panel-page-heading, .panel-order-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; max-width: 1500px; margin: 0 auto 22px; }
.panel-page-heading .panel-eyebrow, .panel-order-section-label { color: var(--mg-copper); font-size: 11px; font-weight: 900; letter-spacing: .15em; }
.panel-page-heading h1 { margin: 5px 0; color: var(--mg-navy); font-size: 39px; }
.panel-page-heading p { max-width: 780px; margin: 0; color: var(--mg-muted); }
.panel-order-site-link { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border: 1px solid var(--mg-line); border-radius: 11px; color: var(--mg-navy); background: #fff; font-weight: 800; }
.panel-order-kpis { display: grid; grid-template-columns: repeat(6,1fr); gap: 12px; max-width: 1500px; margin: 0 auto 18px; }
.panel-order-kpis article { display: flex; align-items: center; gap: 10px; padding: 15px; border: 1px solid var(--mg-line); border-radius: 14px; background: #fff; }
.panel-order-kpi-icon { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; border-radius: 11px; color: var(--mg-navy-2); background: var(--mg-ice); }
.panel-order-kpis small, .panel-order-kpis strong { display: block; }
.panel-order-kpis small { color: var(--mg-muted); font-size: 10px; }
.panel-order-kpis strong { color: var(--mg-navy); font-size: 22px; }
.panel-order-workspace { max-width: 1500px; margin: 0 auto; overflow: hidden; border: 1px solid var(--mg-line); border-radius: 20px; background: #fff; box-shadow: 0 18px 42px rgba(11,79,145,.08); }
.panel-order-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; padding: 24px; border-bottom: 1px solid var(--mg-line); }
.panel-order-toolbar h2 { margin: 4px 0; color: var(--mg-navy); font-size: 25px; }
.panel-order-toolbar p { margin: 0; color: var(--mg-muted); font-size: 12px; }
.panel-order-filters { display: flex; gap: 8px; }
.panel-order-filters input, .panel-order-filters select, .panel-order-status-control select { min-height: 40px; padding: 8px 11px; border: 1px solid #cfdeea; border-radius: 9px; background: #fbfdff; }
.panel-order-search { position: relative; }
.panel-order-search i { position: absolute; top: 13px; left: 12px; color: var(--mg-muted); }
.panel-order-search input { min-width: 270px; padding-left: 34px; }
.panel-order-table-wrap { overflow-x: auto; }
.panel-order-table { width: 100%; border-collapse: collapse; }
.panel-order-table th { padding: 13px 15px; color: var(--mg-muted); background: #f4f8fb; font-size: 10px; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.panel-order-table td { padding: 15px; border-top: 1px solid #e8eff4; vertical-align: middle; }
.panel-order-number strong, .panel-order-customer strong, .panel-order-contents strong, .panel-order-total strong { display: block; color: var(--mg-navy); }
.panel-order-number small, .panel-order-customer small, .panel-order-contents small, .panel-order-total small { display: block; color: var(--mg-muted); font-size: 10px; }
.panel-order-source { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 5px; padding: 3px 7px; border-radius: 99px; color: var(--mg-navy); background: var(--mg-ice); font-size: 9px; font-weight: 800; }
.panel-order-customer { max-width: 245px; }
.panel-order-customer a, .panel-order-customer > small { display: block; overflow: hidden; margin-top: 4px; color: var(--mg-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.panel-order-missing-phone { display: inline-flex; gap: 4px; margin-top: 4px; color: #a26a00; font-size: 10px; }
.panel-order-status-control { display: grid; gap: 6px; }
.panel-order-status { display: inline-flex; width: max-content; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 99px; color: var(--mg-navy); background: var(--mg-ice); font-size: 10px; font-weight: 800; }
.panel-order-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.panel-order-status.is-new { color: #9b5700; background: #fff1d7; }
.panel-order-status.is-progress { color: #185fa2; background: #e7f2fd; }
.panel-order-status.is-shipped { color: #7352a7; background: #f0eafd; }
.panel-order-status.is-complete { color: #087453; background: #e6f7f0; }
.panel-order-status.is-cancelled { color: #a42f38; background: #fff0f1; }
.panel-order-actions button { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border: 1px solid var(--mg-line); border-radius: 9px; color: var(--mg-navy); background: #fff; font-size: 11px; font-weight: 800; }
.panel-order-list-footer { display: flex; justify-content: space-between; gap: 12px; padding: 15px 24px; color: var(--mg-muted); background: #f8fbfd; font-size: 11px; }
.panel-order-empty { padding: 55px 24px; text-align: center; }
.panel-order-empty[hidden] { display: none; }
.panel-order-empty > span { display: grid; width: 62px; height: 62px; place-items: center; margin: 0 auto 15px; border-radius: 18px; color: var(--mg-navy-2); background: var(--mg-ice); font-size: 24px; }
.panel-order-empty h3 { color: var(--mg-navy); }
.panel-order-empty p { color: var(--mg-muted); }
.panel-order-detail-modal .modal-content { overflow: hidden; border: 0; border-radius: 18px; }
.panel-order-detail-modal .modal-header { padding: 20px 24px; border-bottom: 1px solid var(--mg-line); }
.panel-order-detail-modal .modal-body { padding: 24px; }
.panel-order-detail-loading, .panel-order-detail-empty { padding: 42px; color: var(--mg-muted); text-align: center; }
.panel-order-detail-list { display: grid; gap: 12px; }
.panel-order-detail-item { display: grid; grid-template-columns: 80px minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 13px; border: 1px solid var(--mg-line); border-radius: 13px; }
.panel-order-detail-item > img { width: 80px; height: 80px; border-radius: 10px; object-fit: contain; background: #f5f8fa; }
.panel-order-detail-copy h3 { margin: 3px 0; color: var(--mg-navy); font-size: 15px; }
.panel-order-detail-copy small, .panel-order-detail-meta { color: var(--mg-muted); font-size: 10px; }
.panel-order-detail-options { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.panel-order-detail-options span { padding: 3px 7px; border-radius: 7px; color: var(--mg-navy); background: var(--mg-ice); font-size: 10px; }

@media (max-width: 1100px) {
    .panel-dashboard-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .panel-order-kpis { grid-template-columns: repeat(3,1fr); }
    .panel-order-toolbar { align-items: stretch; flex-direction: column; }
}
@media (max-width: 767px) {
    .commerce-auth { padding: 24px 12px; }
    .commerce-auth-shell { grid-template-columns: 1fr; }
    .commerce-auth-intro, .commerce-auth-card { padding: 30px 23px; }
    .commerce-form-grid { grid-template-columns: 1fr; }
    .commerce-checkout-steps { gap: 19px; overflow-x: auto; }
    .commerce-basket-summary { grid-template-columns: auto 1fr; }
    .commerce-basket-summary-total { text-align: left; }
    .commerce-basket-summary .theme-btn { grid-column: 1/-1; justify-content: center; }
    .commerce-cart-item { grid-template-columns: 76px minmax(0,1fr); }
    .commerce-cart-image { width: 76px; height: 76px; }
    .commerce-cart-controls { grid-column: 1/-1; grid-template-columns: 1fr 38px; }
    .panel-dashboard, .panel-order-page, [data-panel-stock-def] { padding: 20px 12px !important; }
    .panel-dashboard-grid, .panel-order-kpis { grid-template-columns: 1fr; }
    .panel-page-heading, .panel-order-heading { align-items: stretch; flex-direction: column; }
    .panel-order-filters { flex-direction: column; }
    .panel-order-search input { width: 100%; min-width: 0; }
    .panel-order-table thead { display: none; }
    .panel-order-table, .panel-order-table tbody, .panel-order-table tr, .panel-order-table td { display: block; width: 100%; }
    .panel-order-table tr { padding: 12px; border-top: 1px solid var(--mg-line); }
    .panel-order-table td { display: grid; grid-template-columns: 95px 1fr; padding: 7px; border: 0; }
    .panel-order-table td::before { color: var(--mg-muted); content: attr(data-label); font-size: 10px; font-weight: 800; }
    [data-panel-stock-def] .panel-action-row { grid-template-columns: 1fr; }
}

.panel-payment-page { min-height: calc(100vh - 90px); padding: 42px; background: #f3f7fa; }
.panel-payment-hero { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 34px 38px; border-radius: 24px; color: #fff; background: linear-gradient(125deg,#083e70,#1767ae); box-shadow: 0 20px 50px rgba(11,79,145,.18); }
.panel-payment-hero .panel-eyebrow { color: #ffb5b8; font-size: 12px; font-weight: 900; letter-spacing: .16em; }
.panel-payment-hero h1 { margin: 8px 0 8px; color: #fff; font-size: clamp(30px,4vw,44px); }
.panel-payment-hero p { max-width: 760px; margin: 0; color: rgba(255,255,255,.78); font-size: 16px; }
.panel-payment-primary { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 0 22px; border-radius: 12px; color: var(--mg-navy); background: #fff; font-weight: 900; box-shadow: 0 10px 28px rgba(0,0,0,.13); }
.panel-payment-primary:hover { color: #fff; background: var(--mg-copper); transform: translateY(-2px); }
.panel-payment-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin: 22px 0; }
.panel-payment-kpis article { display: flex; align-items: center; gap: 15px; min-height: 112px; padding: 20px; border: 1px solid var(--mg-line); border-radius: 17px; background: #fff; box-shadow: 0 10px 28px rgba(11,79,145,.06); }
.panel-payment-kpis article > span { display: grid; flex: 0 0 46px; width: 46px; height: 46px; place-items: center; border-radius: 14px; font-size: 19px; }
.panel-payment-kpis article.is-success > span { color: #16734c; background: #e5f7ef; }
.panel-payment-kpis article.is-amount > span { color: var(--mg-navy); background: var(--mg-ice); }
.panel-payment-kpis article.is-pending > span { color: #8b5b00; background: #fff6d9; }
.panel-payment-kpis article.is-failed > span { color: #a5232b; background: #fff0f1; }
.panel-payment-kpis small { display: block; margin-bottom: 4px; color: var(--mg-muted); }
.panel-payment-kpis strong { color: var(--mg-ink); font-size: 24px; }
.panel-payment-workspace { overflow: hidden; border: 1px solid var(--mg-line); border-radius: 20px; background: #fff; box-shadow: 0 14px 38px rgba(11,79,145,.07); }
.panel-payment-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 26px; padding: 26px; border-bottom: 1px solid var(--mg-line); }
.panel-payment-toolbar > div:first-child > span { color: var(--mg-copper); font-size: 11px; font-weight: 900; letter-spacing: .15em; }
.panel-payment-toolbar h2 { margin: 4px 0; color: var(--mg-navy); font-size: 26px; }
.panel-payment-toolbar p { max-width: 690px; margin: 0; color: var(--mg-muted); }
.panel-payment-filters { display: flex; gap: 10px; }
.panel-payment-filters label { position: relative; margin: 0; }
.panel-payment-filters label i { position: absolute; top: 50%; left: 14px; color: var(--mg-muted); transform: translateY(-50%); }
.panel-payment-filters input, .panel-payment-filters select { min-height: 45px; border: 1px solid var(--mg-line); border-radius: 11px; color: var(--mg-ink); background: #f9fbfd; outline: none; }
.panel-payment-filters input { width: 285px; padding: 0 14px 0 40px; }
.panel-payment-filters select { min-width: 160px; padding: 0 34px 0 13px; }
.panel-payment-filters input:focus, .panel-payment-filters select:focus { border-color: var(--mg-navy-2); box-shadow: 0 0 0 3px rgba(23,103,174,.1); }
.panel-payment-table-wrap { overflow-x: auto; }
.panel-payment-table { width: 100%; min-width: 1120px; border-collapse: collapse; }
.panel-payment-table th { padding: 14px 16px; color: var(--mg-muted); background: #f4f8fb; font-size: 11px; letter-spacing: .09em; text-align: left; text-transform: uppercase; }
.panel-payment-table td { padding: 16px; border-top: 1px solid #e8f0f5; vertical-align: middle; }
.panel-payment-table tbody tr:hover { background: #fbfdff; }
.panel-payment-table tr[hidden] { display: none; }
.panel-payment-reference, .panel-payment-customer { display: grid; gap: 3px; }
.panel-payment-reference strong { color: var(--mg-navy); }
.panel-payment-reference small, .panel-payment-reference em, .panel-payment-customer small { color: var(--mg-muted); font-size: 11px; font-style: normal; }
.panel-payment-customer strong { color: var(--mg-ink); }
.panel-payment-pan { display: inline-flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; color: var(--mg-navy); background: var(--mg-ice); font-family: Consolas,monospace; font-size: 12px; font-weight: 800; }
.panel-payment-amount { white-space: nowrap; color: var(--mg-navy); font-size: 16px; }
.panel-payment-installment { white-space: nowrap; color: var(--mg-ink); }
.panel-payment-status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 99px; font-size: 11px; font-weight: 900; white-space: nowrap; }
.panel-payment-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.panel-payment-status.is-success { color: #13704a; background: #e4f7ee; }
.panel-payment-status.is-failed { color: #a5232b; background: #fff0f1; }
.panel-payment-status.is-pending { color: #8b5b00; background: #fff6d9; }
.panel-payment-status.is-processing { color: #1d5f91; background: #e9f4fc; }
.panel-payment-result { display: block; max-width: 170px; margin-top: 5px; overflow: hidden; color: var(--mg-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.panel-payment-receipt { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 9px; color: #fff; background: var(--mg-navy-2); font-size: 12px; font-weight: 900; white-space: nowrap; }
.panel-payment-receipt:hover { color: #fff; background: var(--mg-copper); }
.panel-payment-receipt.is-disabled { color: #94a2ad; background: #edf1f4; cursor: not-allowed; }
.panel-payment-empty { padding: 60px 20px; color: var(--mg-muted); text-align: center; }
.panel-payment-empty[hidden] { display: none; }
.panel-payment-empty > i { display: grid; width: 58px; height: 58px; place-items: center; margin: 0 auto 14px; border-radius: 18px; color: var(--mg-navy); background: var(--mg-ice); font-size: 23px; }
.panel-payment-empty h3 { margin: 0 0 5px; color: var(--mg-navy); }
.panel-payment-empty p { margin: 0; }
.panel-payment-footer { padding: 14px 24px; border-top: 1px solid var(--mg-line); color: var(--mg-muted); text-align: right; }
.panel-payment-footer strong { color: var(--mg-navy); }

@media (max-width: 991px) {
    .mg-service-grid { grid-template-columns: repeat(2,1fr); }
    .mg-payment-body { grid-template-columns: 1fr; }
    .mg-card-preview { order: -1; }
    .mg-cta-inner { align-items: flex-start; flex-direction: column; }
    .mg-categories .leather-collection-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .header-middle-logo .mg-brand-logo { width: 240px; }
    .panel-payment-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .panel-payment-hero, .panel-payment-toolbar { align-items: flex-start; flex-direction: column; }
    .panel-payment-filters { width: 100%; }
    .panel-payment-filters label, .panel-payment-filters input { width: 100%; }
}
@media (max-width: 767px) {
    .mg-hero { min-height: 600px; background-position: 62% center; }
    .mg-hero::before { background: linear-gradient(90deg,rgba(6,24,39,.96),rgba(6,24,39,.72)); }
    .mg-hero-copy { padding: 72px 0; }
    .mg-service-grid, .mg-payment-form { grid-template-columns: 1fr; }
    .mg-payment-form .wide, .mg-installments, .mg-pay-submit { grid-column: auto; }
    .mg-payment-head { align-items: flex-start; flex-direction: column; }
    .mg-payment-body { padding: 24px; }
    .mg-pay-submit { align-items: stretch; flex-direction: column; }
    .mg-cta { padding: 34px 26px; }
    .panel-dashboard { padding: 22px; }
    .mg-categories .leather-collection-grid { grid-template-columns: 1fr; }
    .mg-categories .leather-collection-card .mg-category-visual { height: 210px; }
    .mobile-top-brand { display: none !important; }
    .header-top { padding: 8px 0 !important; }
    .header-top-wrapper .row { row-gap: 5px; }
    .header-top-left .header-top-list li:first-child,
    .header-top-left .header-top-list li.help { display: none; }
    .header-logo-col { flex: 0 0 100%; width: 100%; max-width: 100%; margin-bottom: 12px; }
    .header-middle-logo { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
    .header-middle-logo .navbar-brand { flex: 1 1 auto; max-width: 260px; padding: 0; }
    .header-middle-logo .mg-brand-logo { width: 255px; }
    .header-mobile-search-col { flex: 0 0 62%; width: 62%; max-width: 62%; }
    .header-actions-col { flex: 0 0 38%; width: 38%; max-width: 38%; }
    .header-middle { padding: 13px 0 !important; }
    .mg-installment-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
    .mg-installment-heading-status { white-space: normal; }
    .mg-installment-options { grid-template-columns: 1fr; }
    .mg-installment-option { grid-template-columns: auto minmax(0,1fr); }
    .mg-installment-price { grid-column: 2; text-align: left; }
    .mg-installment-price small { white-space: normal; }
    .panel-payment-page { padding: 20px 12px; }
    .panel-payment-hero { padding: 26px 22px; }
    .panel-payment-primary { width: 100%; }
    .panel-payment-kpis { grid-template-columns: 1fr; }
    .panel-payment-filters { align-items: stretch; flex-direction: column; }
    .panel-payment-filters select { width: 100%; }
}
.mg-payment-card .mg-card-preview { background: linear-gradient(135deg,var(--payment-bank),#071d30); }
.mg-payment-card .mg-installment-option:hover,.mg-payment-card .mg-installment-option.is-selected { border-color: var(--payment-bank); background: color-mix(in srgb,var(--payment-bank) 7%,#fff); box-shadow: 0 7px 18px color-mix(in srgb,var(--payment-bank) 15%,transparent); }
.mg-payment-card .mg-installment-option input { accent-color: var(--payment-bank); }

/* Refresh-free category catalog */
.shop-area[data-async-catalog] { position: relative; isolation: isolate; }
.shop-area[data-async-catalog] [data-catalog-shell] { transition: opacity .2s ease, filter .2s ease; }
.shop-area[data-async-catalog].is-catalog-loading [data-catalog-shell] { opacity: .52; filter: saturate(.75); pointer-events: none; user-select: none; }
.catalog-async-progress { position: absolute; z-index: 35; top: 0; right: 0; left: 0; height: 4px; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.catalog-async-progress span { display: block; width: 38%; height: 100%; border-radius: 99px; background: linear-gradient(90deg,var(--mg-copper),#ff7378,var(--mg-navy-2)); box-shadow: 0 0 14px rgba(237,28,36,.3); transform: translateX(-120%); }
.is-catalog-loading .catalog-async-progress { opacity: 1; }
.is-catalog-loading .catalog-async-progress span { animation: mg-catalog-progress 1.05s ease-in-out infinite; }
@keyframes mg-catalog-progress { 0% { transform: translateX(-120%); } 100% { transform: translateX(365%); } }
.catalog-loading-pill { position: fixed; z-index: 1090; top: 92px; left: 50%; display: flex; min-height: 46px; align-items: center; gap: 11px; padding: 0 18px; border: 1px solid #d6e7f2; border-radius: 999px; color: var(--mg-navy); background: rgba(255,255,255,.96); box-shadow: 0 18px 48px rgba(7,48,82,.18); opacity: 0; pointer-events: none; transform: translate(-50%,-14px); transition: opacity .2s ease,transform .2s ease; backdrop-filter: blur(12px); }
.is-catalog-loading .catalog-loading-pill { opacity: 1; transform: translate(-50%,0); }
.catalog-loading-pill strong { white-space: nowrap; font-size: 13px; }
.catalog-loading-spinner { width: 18px; height: 18px; border: 2px solid #c8dfef; border-top-color: var(--mg-copper); border-radius: 50%; animation: mg-catalog-spin .7s linear infinite; }
@keyframes mg-catalog-spin { to { transform: rotate(360deg); } }
.catalog-async-status { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.catalog-async-toast { position: fixed; z-index: 11050; right: 24px; bottom: 24px; display: flex; max-width: 390px; align-items: center; gap: 11px; padding: 15px 18px; border-radius: 14px; color: #fff; background: #a9252d; box-shadow: 0 20px 50px rgba(41,14,16,.25); opacity: 0; pointer-events: none; transform: translateY(18px); transition: opacity .22s ease,transform .22s ease; }
.catalog-async-toast.is-visible { opacity: 1; transform: translateY(0); }
.catalog-async-toast i { font-size: 18px; }
.shop-item-wrapper.is-catalog-updated { animation: mg-catalog-reveal .42s ease both; }
@keyframes mg-catalog-reveal { from { opacity: .35; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.shop-modern-category-list a,
.shop-inline-brand-filter,
.shop-brand-filter { -webkit-tap-highlight-color: transparent; }
.shop-modern-category-list a:focus-visible,
.shop-inline-brand-filter:focus-visible,
.shop-brand-filter:focus-visible { outline: 3px solid rgba(23,103,174,.2); outline-offset: 2px; }

/* Modern category and brand filters */
.shop-sidebar { padding: 0 !important; background: transparent !important; }
.shop-filter-widget { position: relative; overflow: hidden; padding: 20px !important; border: 1px solid #dce9f2 !important; border-radius: 22px !important; background: rgba(255,255,255,.96) !important; box-shadow: 0 16px 42px rgba(8,62,112,.08); }
.shop-filter-widget::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 4px; background: linear-gradient(90deg,var(--mg-copper),var(--mg-navy-2)); }
.shop-filter-heading { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; margin-bottom: 10px; }
.shop-filter-heading-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 14px; color: var(--mg-navy-2); background: #eaf4fc; font-size: 18px; }
.shop-filter-heading-icon.is-red { color: var(--mg-copper); background: #fff0f1; }
.shop-filter-heading small { display: block; margin-bottom: 2px; color: var(--mg-copper); font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.shop-filter-heading h4 { margin: 0; padding: 0; border: 0; color: var(--mg-navy); font-size: 20px; }
.shop-filter-heading h4::after { display: none; }
.shop-filter-total { display: grid; min-width: 31px; height: 31px; padding: 0 8px; place-items: center; border: 1px solid #d5e5f1; border-radius: 999px; color: var(--mg-navy); background: #f4f9fc; font-size: 12px; font-weight: 900; }
.shop-filter-intro { margin: 0 0 16px; color: var(--mg-muted); font-size: 12px; line-height: 1.55; }
.shop-modern-category-list { gap: 8px !important; }
.shop-modern-category-list .shop-category-link,
.shop-modern-category-list .shop-category-summary { display: grid !important; grid-template-columns: 38px minmax(0,1fr) auto auto; min-height: 66px; gap: 10px; margin: 0 !important; padding: 9px 10px !important; border: 1px solid transparent !important; border-radius: 15px !important; color: var(--mg-ink) !important; background: #f5f8fa !important; }
.shop-modern-category-list .shop-category-link:hover,
.shop-modern-category-list .shop-category-summary:hover,
.shop-modern-category-list .shop-category-link.is-active,
.shop-modern-category-list .shop-category-summary.is-active { border-color: #b9d5e8 !important; color: var(--mg-navy) !important; background: linear-gradient(105deg,#edf7fd,#fff) !important; box-shadow: 0 8px 20px rgba(11,79,145,.08); transform: translateX(2px); }
.shop-filter-item-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: var(--mg-navy-2); background: #e4f1fa; font-size: 16px; transition: .2s ease; }
.shop-category-link:hover .shop-filter-item-icon,
.shop-category-link.is-active .shop-filter-item-icon,
.shop-category-summary:hover .shop-filter-item-icon,
.shop-category-summary.is-active .shop-filter-item-icon { color: #fff; background: linear-gradient(135deg,var(--mg-navy-2),var(--mg-navy)); }
.shop-category-copy { display: flex !important; min-width: 0; flex-direction: column; float: none !important; }
.shop-category-copy b { overflow: hidden; color: inherit; font-size: 14px; font-weight: 900; line-height: 1.25; text-overflow: ellipsis; }
.shop-category-copy small { margin-top: 3px; color: #7a8e9e; font-size: 9px; font-weight: 700; }
.shop-modern-category-list .shop-category-count { display: grid; min-width: 31px; height: 28px; padding: 0 7px; place-items: center; border-radius: 9px; color: var(--mg-copper) !important; background: #fff; font-size: 11px; }
.shop-filter-arrow { color: #8aa1b3; font-size: 10px; }
.shop-modern-category-list .shop-category-summary::after { margin-left: 0; color: #8aa1b3; }
.shop-modern-category-list .shop-subcategory-list { gap: 6px; margin: 7px 0 3px 48px !important; }
.shop-modern-category-list .shop-subcategory-list a { min-height: 42px !important; padding: 8px 10px !important; border: 1px solid #e5edf3; border-radius: 11px !important; color: var(--mg-ink) !important; background: #fff !important; font-size: 12px !important; }
.shop-modern-category-list .shop-subcategory-list a:hover,
.shop-modern-category-list .shop-subcategory-list a.is-active { border-color: #b9d5e8; color: var(--mg-navy) !important; background: #eef7fd !important; }
.shop-modern-category-list .shop-parent-category-link a { color: #fff !important; background: var(--mg-navy-2) !important; }

.shop-category-brand-slot { list-style: none; }
.shop-category-inline-brands { position: relative; margin: 8px 0 4px 30px; padding: 10px 10px 10px 15px; border-left: 2px solid #b9d9ed; border-radius: 0 14px 14px 0; background: linear-gradient(90deg,#f2f9fd,#fff); }
.shop-category-inline-brands::before { content: ""; position: absolute; top: -8px; left: -2px; width: 18px; height: 18px; border-bottom: 2px solid #b9d9ed; border-left: 2px solid #b9d9ed; border-radius: 0 0 0 9px; }
.shop-inline-brand-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; color: var(--mg-navy); }
.shop-inline-brand-heading span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 950; letter-spacing: .04em; }
.shop-inline-brand-heading span i { color: var(--mg-copper); }
.shop-inline-brand-heading small { color: #7b909f; font-size: 8px; font-weight: 800; }
.shop-inline-brand-list { display: grid; gap: 6px; }
.shop-inline-brand-filter { display: grid; grid-template-columns: 29px minmax(0,1fr) auto; align-items: center; width: 100%; min-height: 42px; gap: 8px; padding: 6px 8px; border: 1px solid #e1edf4; border-radius: 11px; color: var(--mg-ink); background: #fff; font-size: 11px; font-weight: 850; text-align: left; transition: .2s ease; }
.shop-inline-brand-filter:hover { border-color: #a9cfe7; color: var(--mg-navy); background: #f7fbfe; transform: translateX(2px); }
.shop-inline-brand-filter.is-active { border-color: var(--mg-navy-2); color: var(--mg-navy); background: #edf7fd; box-shadow: 0 5px 14px rgba(11,79,145,.08); }
.shop-inline-brand-dot { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 9px; color: var(--mg-navy-2); background: #e8f3fa; font-size: 10px; font-weight: 950; }
.shop-inline-brand-filter.is-active .shop-inline-brand-dot { color: #fff; background: linear-gradient(135deg,var(--mg-copper),#c82028); }
.shop-inline-brand-filter > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-inline-brand-filter > small { display: grid; min-width: 24px; height: 23px; padding: 0 5px; place-items: center; border-radius: 7px; color: var(--mg-copper); background: #f3f7f9; font-size: 9px; font-weight: 950; }

.shop-brand-list { display: grid; gap: 8px; }
.shop-brand-filter { position: relative; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; width: 100%; min-height: 58px; gap: 10px; padding: 8px 10px; border: 1px solid #e3edf4; border-radius: 15px; color: var(--mg-ink); background: #fff; text-align: left; transition: .2s ease; }
.shop-brand-filter:hover { border-color: #b9d5e8; background: #f6fbfe; transform: translateX(2px); }
.shop-brand-filter.is-active { border-color: var(--mg-navy-2); color: var(--mg-navy); background: #edf7fd; box-shadow: 0 8px 20px rgba(11,79,145,.08); }
.shop-brand-avatar { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: var(--mg-navy); background: #e8f2f9; font-size: 14px; font-weight: 950; }
.shop-brand-filter.is-active .shop-brand-avatar { color: #fff; background: linear-gradient(135deg,var(--mg-copper),#c82028); }
.shop-brand-copy { display: flex; min-width: 0; flex-direction: column; }
.shop-brand-copy b { overflow: hidden; font-size: 13px; font-weight: 900; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.shop-brand-copy small { margin-top: 3px; color: #7d909f; font-size: 9px; }
.shop-brand-filter > strong { display: grid; min-width: 30px; height: 28px; padding: 0 7px; place-items: center; border-radius: 9px; color: var(--mg-copper); background: #f4f7f9; font-size: 11px; }
.shop-brand-check { position: absolute; top: -4px; right: -4px; display: none; width: 20px; height: 20px; place-items: center; border: 3px solid #fff; border-radius: 50%; color: #fff; background: var(--mg-copper); font-size: 8px; }
.shop-brand-filter.is-active .shop-brand-check { display: grid; }
.brand-filter-empty { margin-top: 20px; padding: 48px 20px; border: 1px dashed #bfd4e3; border-radius: 18px; color: var(--mg-muted); background: #f8fbfd; text-align: center; }
.brand-filter-empty i { display: grid; width: 54px; height: 54px; margin: 0 auto 12px; place-items: center; border-radius: 16px; color: var(--mg-navy); background: #e8f3fa; font-size: 20px; }
.brand-filter-empty h3 { margin: 0 0 5px; color: var(--mg-navy); font-size: 20px; }
.brand-filter-empty p { margin: 0; font-size: 13px; }

/* Product question actions and dialog */
.product-question-card-action { margin-top: 13px; padding-top: 12px; border-top: 1px solid #e7eff5; }
.product-question-trigger { display: flex; align-items: center; width: 100%; gap: 9px; padding: 0; border: 0; color: var(--mg-navy); background: transparent; font-size: 12px; text-align: left; transition: .2s ease; }
.product-question-trigger > span { display: grid; flex: 0 0 31px; width: 31px; height: 31px; place-items: center; border-radius: 10px; color: var(--mg-navy-2); background: #e9f4fb; }
.product-question-trigger b { flex: 1; font-weight: 900; }
.product-question-trigger > i { color: #96a9b7; font-size: 10px; transition: transform .2s ease; }
.product-question-trigger:hover { color: var(--mg-copper); }
.product-question-trigger:hover > span { color: #fff; background: var(--mg-copper); }
.product-question-trigger:hover > i { color: var(--mg-copper); transform: translateX(3px); }
.product-question-detail-callout { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; align-items: center; gap: 16px; margin-top: 22px; padding: 17px; border: 1px solid #cfe1ed; border-radius: 18px; background: linear-gradient(105deg,#eff8fd,#fff); }
.product-question-detail-icon { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 16px; color: #fff; background: linear-gradient(135deg,var(--mg-navy-2),var(--mg-navy)); font-size: 21px; }
.product-question-detail-callout small { display: block; color: var(--mg-copper); font-size: 9px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.product-question-detail-callout strong { display: block; margin: 2px 0; color: var(--mg-navy); font-size: 15px; }
.product-question-detail-callout p { margin: 0; color: var(--mg-muted); font-size: 11px; line-height: 1.5; }
.product-question-detail-callout button { min-height: 42px; padding: 0 15px; border: 0; border-radius: 12px; color: #fff; background: var(--mg-copper); font-size: 11px; font-weight: 900; white-space: nowrap; box-shadow: 0 8px 18px rgba(237,28,36,.16); }
.product-question-detail-callout button i { margin-left: 6px; }
.product-question-detail-callout button:hover { background: var(--mg-navy-2); transform: translateY(-2px); }

html.mg-modal-open { overflow: hidden; }
.mg-question-modal { position: fixed; z-index: 10050; inset: 0; display: grid; padding: 20px; place-items: center; visibility: hidden; opacity: 0; transition: opacity .22s ease,visibility .22s ease; }
.mg-question-modal.is-open { visibility: visible; opacity: 1; }
.mg-question-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(4,25,43,.72); backdrop-filter: blur(7px); }
.mg-question-dialog { position: relative; z-index: 1; width: min(720px,100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: 28px; border: 1px solid rgba(255,255,255,.6); border-radius: 26px; background: #fff; box-shadow: 0 32px 90px rgba(0,24,45,.32); transform: translateY(18px) scale(.98); transition: transform .25s ease; }
.mg-question-modal.is-open .mg-question-dialog { transform: translateY(0) scale(1); }
.mg-question-close { position: absolute; top: 18px; right: 18px; display: grid; width: 38px; height: 38px; place-items: center; border: 0; border-radius: 12px; color: var(--mg-navy); background: #eef5f9; }
.mg-question-close:hover { color: #fff; background: var(--mg-copper); }
.mg-question-dialog-head { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding-right: 36px; }
.mg-question-dialog-icon { display: grid; width: 56px; height: 56px; place-items: center; border-radius: 18px; color: #fff; background: linear-gradient(135deg,var(--mg-copper),#bd1820); font-size: 22px; box-shadow: 0 12px 28px rgba(237,28,36,.18); }
.mg-question-dialog-head small { color: var(--mg-copper); font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.mg-question-dialog-head h2 { margin: 3px 0 4px; color: var(--mg-navy); font-size: 25px; }
.mg-question-dialog-head p { margin: 0; color: var(--mg-muted); font-size: 13px; line-height: 1.55; }
.mg-question-product { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 11px; margin: 22px 0; padding: 12px; border: 1px solid #dbe8f1; border-radius: 15px; background: #f6fafc; }
.mg-question-product > span { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; color: var(--mg-navy-2); background: #e5f2fa; }
.mg-question-product small { display: block; color: var(--mg-muted); font-size: 9px; }
.mg-question-product strong { display: block; max-width: 410px; overflow: hidden; color: var(--mg-navy); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.mg-question-product a { color: var(--mg-navy-2); font-size: 10px; font-weight: 900; }
.mg-question-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.mg-question-field { margin: 0; }
.mg-question-field > span { display: block; margin: 0 0 6px; color: var(--mg-navy); font-size: 11px; font-weight: 900; }
.mg-question-field > span em { color: var(--mg-copper); font-style: normal; }
.mg-question-field input,.mg-question-field textarea { width: 100%; border: 1px solid #d5e4ef; border-radius: 13px; color: var(--mg-ink); background: #fbfdfe; outline: none; transition: .2s ease; }
.mg-question-field input { height: 48px; padding: 0 13px; }
.mg-question-field textarea { min-height: 112px; padding: 12px 13px; resize: vertical; }
.mg-question-field input:focus,.mg-question-field textarea:focus { border-color: var(--mg-navy-2); background: #fff; box-shadow: 0 0 0 4px rgba(23,103,174,.1); }
.mg-question-field > small { display: block; margin-top: 4px; color: var(--mg-muted); font-size: 9px; text-align: right; }
.mg-question-wide { grid-column: 1/-1; }
.mg-question-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.mg-question-feedback { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-size: 12px; font-weight: 800; }
.mg-question-feedback.is-success { color: #13704a; background: #e9f8f0; }
.mg-question-feedback.is-error { color: #a5232b; background: #fff0f1; }
.mg-question-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; }
.mg-question-actions p { max-width: 380px; margin: 0; color: var(--mg-muted); font-size: 10px; line-height: 1.5; }
.mg-question-actions p i { margin-right: 5px; color: #15805a; }
.mg-question-submit { display: inline-flex; min-width: 165px; min-height: 47px; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 13px; color: #fff; background: linear-gradient(135deg,var(--mg-navy-2),#0d4f88); font-size: 12px; font-weight: 900; box-shadow: 0 10px 24px rgba(11,79,145,.18); }
.mg-question-submit:hover { background: var(--mg-copper); transform: translateY(-2px); }
.mg-question-submit:disabled { opacity: .7; cursor: wait; transform: none; }

/* Product question panel */
.panel-question-page { min-height: calc(100vh - 80px); padding: 38px; background: #f2f7fa; }
.panel-question-hero { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 32px 36px; border-radius: 24px; color: #fff; background: linear-gradient(125deg,#082f54,#1767ae); box-shadow: 0 20px 48px rgba(8,62,112,.2); }
.panel-question-hero .panel-eyebrow { color: #ffb3b6; font-size: 11px; font-weight: 900; letter-spacing: .15em; }
.panel-question-hero h1 { margin: 6px 0; color: #fff; font-size: clamp(30px,4vw,44px); }
.panel-question-hero p { max-width: 780px; margin: 0; color: rgba(255,255,255,.78); }
.panel-question-hero > a { display: inline-flex; min-height: 48px; padding: 0 19px; align-items: center; gap: 8px; border-radius: 12px; color: var(--mg-navy); background: #fff; font-weight: 900; white-space: nowrap; }
.panel-question-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; margin: 20px 0; }
.panel-question-kpis article { display: flex; min-height: 104px; align-items: center; gap: 14px; padding: 18px; border: 1px solid #dce8f0; border-radius: 18px; background: #fff; box-shadow: 0 9px 26px rgba(8,62,112,.06); }
.panel-question-kpis article > span { display: grid; width: 45px; height: 45px; place-items: center; border-radius: 14px; font-size: 18px; }
.panel-question-kpis .is-new > span { color: #a5232b; background: #fff0f1; }
.panel-question-kpis .is-progress > span { color: #8b5b00; background: #fff6d9; }
.panel-question-kpis .is-answered > span { color: #13704a; background: #e7f8ef; }
.panel-question-kpis .is-total > span { color: var(--mg-navy); background: #e8f3fa; }
.panel-question-kpis small { display: block; color: var(--mg-muted); }
.panel-question-kpis strong { display: block; color: var(--mg-navy); font-size: 25px; }
.panel-question-workspace { overflow: hidden; border: 1px solid #dbe7ef; border-radius: 22px; background: #fff; box-shadow: 0 14px 38px rgba(8,62,112,.07); }
.panel-question-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 24px; border-bottom: 1px solid #e1eaf0; }
.panel-question-toolbar > div:first-child small { color: var(--mg-copper); font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.panel-question-toolbar h2 { margin: 3px 0; color: var(--mg-navy); font-size: 25px; }
.panel-question-toolbar p { margin: 0; color: var(--mg-muted); font-size: 12px; }
.panel-question-filters { display: flex; gap: 9px; }
.panel-question-filters label { position: relative; margin: 0; }
.panel-question-filters label i { position: absolute; top: 50%; left: 13px; color: #8298a8; transform: translateY(-50%); }
.panel-question-filters input,.panel-question-filters select { min-height: 44px; border: 1px solid #d7e4ed; border-radius: 11px; color: var(--mg-ink); background: #f8fbfd; outline: none; }
.panel-question-filters input { width: 310px; padding: 0 13px 0 38px; }
.panel-question-filters select { min-width: 155px; padding: 0 30px 0 12px; }
.panel-question-token { display: none; }
.panel-question-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; padding: 20px; }
.panel-question-card { overflow: hidden; border: 1px solid #dbe7ef; border-left: 4px solid #8798a5; border-radius: 18px; background: #fff; box-shadow: 0 9px 25px rgba(8,62,112,.055); }
.panel-question-card.is-new { border-left-color: var(--mg-copper); }
.panel-question-card.is-progress { border-left-color: #d59b23; }
.panel-question-card.is-answered { border-left-color: #1b8b63; }
.panel-question-card > header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 17px; border-bottom: 1px solid #e6edf2; background: #f8fbfd; }
.panel-question-product { display: flex; min-width: 0; align-items: center; gap: 10px; }
.panel-question-product > span { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; border-radius: 12px; color: var(--mg-navy-2); background: #e7f3fb; }
.panel-question-product div { min-width: 0; }
.panel-question-product small { display: block; color: #8296a5; font-size: 9px; }
.panel-question-product a { display: block; overflow: hidden; color: var(--mg-navy); font-size: 12px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.panel-question-status { flex: 0 0 auto; padding: 7px 9px; border-radius: 999px; font-size: 9px; font-weight: 900; }
.panel-question-status.is-new { color: #a5232b; background: #fff0f1; }
.panel-question-status.is-progress { color: #8b5b00; background: #fff6d9; }
.panel-question-status.is-answered { color: #13704a; background: #e7f8ef; }
.panel-question-status.is-closed { color: #536674; background: #edf2f5; }
.panel-question-body { padding: 17px; }
.panel-question-customer { display: flex; align-items: center; gap: 10px; }
.panel-question-avatar { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg,var(--mg-copper),#b91920); font-size: 13px; font-weight: 900; }
.panel-question-customer strong { display: block; color: var(--mg-navy); font-size: 13px; }
.panel-question-customer small { display: block; margin-top: 2px; color: var(--mg-muted); font-size: 9px; }
.panel-question-contacts { display: flex; flex-wrap: wrap; gap: 7px; margin: 13px 0; }
.panel-question-contacts a { padding: 6px 9px; border-radius: 9px; color: var(--mg-navy-2); background: #edf6fb; font-size: 10px; font-weight: 800; }
.panel-question-contacts a i { margin-right: 5px; }
.panel-question-card blockquote { margin: 0; padding: 13px 14px; border: 0; border-radius: 12px; color: #314858; background: #f6f8fa; font-size: 12px; line-height: 1.65; }
.panel-question-card > footer { display: grid; grid-template-columns: 150px minmax(0,1fr) auto; align-items: end; gap: 10px; padding: 14px 17px 17px; border-top: 1px solid #e7edf2; }
.panel-question-card > footer label { margin: 0; }
.panel-question-card > footer label > span { display: block; margin-bottom: 5px; color: var(--mg-muted); font-size: 9px; font-weight: 900; }
.panel-question-card select,.panel-question-card textarea { width: 100%; border: 1px solid #d6e3ec; border-radius: 10px; color: var(--mg-ink); background: #fff; outline: none; }
.panel-question-card select { height: 42px; padding: 0 9px; }
.panel-question-card textarea { min-height: 42px; padding: 9px; resize: vertical; }
.panel-question-card > footer button { display: inline-flex; min-height: 42px; align-items: center; gap: 7px; padding: 0 13px; border: 0; border-radius: 10px; color: #fff !important; background: #1767ae !important; font-size: 10px; font-weight: 900; }
.panel-question-card > footer button:hover { background: #ed1c24 !important; }
.panel-question-empty { padding: 60px 20px; color: var(--mg-muted); text-align: center; }
.panel-question-empty i { display: grid; width: 58px; height: 58px; margin: 0 auto 12px; place-items: center; border-radius: 18px; color: var(--mg-navy); background: #eaf4fa; font-size: 22px; }
.panel-question-empty h3 { margin: 0 0 5px; color: var(--mg-navy); }
.panel-question-empty p { margin: 0; }
.panel-question-count { padding: 13px 22px; border-top: 1px solid #e5edf2; color: var(--mg-muted); text-align: right; }
.panel-question-count strong { color: var(--mg-navy); }
.panel-question-toast { position: fixed; z-index: 11000; right: 24px; bottom: 24px; display: flex; max-width: 380px; align-items: center; gap: 10px; padding: 14px 17px; border-radius: 13px; color: #fff; background: #17805b; box-shadow: 0 18px 45px rgba(0,0,0,.2); opacity: 0; pointer-events: none; transform: translateY(18px); transition: .25s ease; }
.panel-question-toast.is-error { background: #b4232b; }
.panel-question-toast.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1199px) {
    .panel-question-list { grid-template-columns: 1fr; }
    .product-question-detail-callout { grid-template-columns: 52px 1fr; }
    .product-question-detail-callout button { grid-column: 1/-1; }
}
@media (max-width: 991px) {
    .shop-filter-widget { padding: 17px !important; }
    .panel-question-page { padding: 22px 13px; }
    .panel-question-hero,.panel-question-toolbar { align-items: flex-start; flex-direction: column; }
    .panel-question-hero > a { width: 100%; justify-content: center; }
    .panel-question-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .panel-question-filters { width: 100%; }
    .panel-question-filters label,.panel-question-filters input { width: 100%; }
}
@media (max-width: 767px) {
    .mg-question-modal { padding: 8px; }
    .mg-question-dialog { max-height: calc(100vh - 16px); padding: 21px 17px; border-radius: 20px; }
    .mg-question-dialog-head { grid-template-columns: 46px 1fr; padding-right: 26px; }
    .mg-question-dialog-icon { width: 46px; height: 46px; border-radius: 14px; }
    .mg-question-dialog-head h2 { font-size: 20px; }
    .mg-question-product { grid-template-columns: 38px 1fr; }
    .mg-question-product > a { grid-column: 2; }
    .mg-question-fields { grid-template-columns: 1fr; }
    .mg-question-wide { grid-column: auto; }
    .mg-question-actions { align-items: stretch; flex-direction: column; }
    .mg-question-submit { width: 100%; }
    .product-question-detail-callout { grid-template-columns: 45px 1fr; }
    .product-question-detail-icon { width: 45px; height: 45px; }
    .panel-question-kpis { grid-template-columns: 1fr; }
    .panel-question-filters { flex-direction: column; }
    .panel-question-filters select { width: 100%; }
    .panel-question-list { padding: 12px; }
    .panel-question-card > footer { grid-template-columns: 1fr; }
    .panel-question-card > footer button { justify-content: center; }
}

/* Corporate contact page */
.about-img img { aspect-ratio: 4 / 3; object-fit: cover; }
.mg-contact-modern { padding: 88px 0 0; background: #fff; }
.mg-contact-grid { display: grid; grid-template-columns: minmax(340px,.92fr) minmax(460px,1.28fr); align-items: stretch; gap: 58px; }
.mg-contact-copy { padding: 10px 0 72px; }
.mg-contact-eyebrow { display: inline-flex; align-items: center; gap: 12px; color: var(--mg-copper); font-size: 12px; font-weight: 900; letter-spacing: .14em; }
.mg-contact-eyebrow::before { content: ""; width: 28px; height: 2px; border-radius: 99px; background: var(--mg-copper); }
.mg-contact-copy h2 { margin: 18px 0 14px; color: #061f35; font-size: clamp(36px,4vw,58px); line-height: 1.02; letter-spacing: -.035em; }
.mg-contact-copy > p { max-width: 470px; margin: 0 0 30px; color: var(--mg-muted); font-size: 16px; line-height: 1.75; }
.mg-contact-list { display: grid; gap: 12px; }
.mg-contact-card { display: flex; min-height: 82px; align-items: center; gap: 15px; padding: 15px 18px; border: 1px solid #e4edf4; border-radius: 15px; background: #f5f8fb; transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.mg-contact-card:hover { border-color: #bfd8eb; box-shadow: 0 12px 28px rgba(11,79,145,.08); transform: translateY(-2px); }
.mg-contact-icon { display: grid; flex: 0 0 46px; width: 46px; height: 46px; place-items: center; border-radius: 13px; color: var(--mg-navy-2); background: #e8f3fb; font-size: 18px; }
.mg-contact-card div { min-width: 0; }
.mg-contact-card small { display: block; margin-bottom: 4px; color: #8293a1; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.mg-contact-card strong,.mg-contact-card address { display: block; margin: 0; color: #092b47; font-size: 14px; font-style: normal; font-weight: 800; line-height: 1.55; }
.mg-contact-card a { color: inherit; }
.mg-contact-card a:hover { color: var(--mg-copper); }
.mg-whatsapp-button { display: inline-flex; min-height: 52px; align-items: center; gap: 9px; margin-top: 24px; padding: 0 21px; border-radius: 11px; color: #fff !important; background: linear-gradient(135deg,#ed1c24,#c9161d); box-shadow: 0 14px 30px rgba(237,28,36,.22); font-size: 14px; font-weight: 900; }
.mg-whatsapp-button:hover { background: linear-gradient(135deg,#1767ae,#0b4f91); transform: translateY(-2px); }
.mg-contact-map-card { min-height: 560px; overflow: hidden; border: 1px solid #e1ebf2; border-radius: 25px; background: #eaf2f7; box-shadow: 0 24px 65px rgba(11,79,145,.14); }
.mg-contact-map-card iframe { display: block; width: 100%; height: 100%; min-height: 560px; border: 0; }
.mg-contact-hours { border-top: 1px solid #dce7ef; background: #f3f7fa; }
.mg-contact-hours > .container { display: flex; min-height: 92px; align-items: center; justify-content: space-between; gap: 24px; }
.mg-contact-hours > .container > div { display: flex; align-items: center; gap: 14px; }
.mg-contact-hours-icon { display: grid; width: 40px; height: 40px; place-items: center; border: 2px solid var(--mg-copper); border-radius: 50%; color: var(--mg-copper); }
.mg-contact-hours strong { display: block; color: #092b47; font-size: 13px; }
.mg-contact-hours small { display: block; margin-top: 3px; color: var(--mg-muted); }
.mg-contact-hours a { color: var(--mg-navy); font-size: 16px; font-weight: 900; }
.mg-contact-hours a:hover { color: var(--mg-copper); }

@media (max-width: 991px) {
    .mg-contact-modern { padding-top: 62px; }
    .mg-contact-grid { grid-template-columns: 1fr; gap: 0; }
    .mg-contact-copy { padding-bottom: 42px; }
    .mg-contact-map-card,.mg-contact-map-card iframe { min-height: 460px; }
    .mg-contact-map-card { margin-bottom: 55px; }
}
@media (max-width: 575px) {
    .mg-contact-modern { padding-top: 46px; }
    .mg-contact-copy h2 { font-size: 38px; }
    .mg-contact-card { align-items: flex-start; }
    .mg-contact-card strong span { display: none; }
    .mg-contact-card strong a { display: block; }
    .mg-contact-map-card,.mg-contact-map-card iframe { min-height: 370px; }
    .mg-contact-hours > .container { align-items: flex-start; flex-direction: column; padding-top: 22px; padding-bottom: 22px; }
}

/* Final responsive shell and home-page rhythm */
@media (max-width: 767px) {
    html,
    body { max-width: 100%; overflow-x: hidden; }

    .header-top { padding: 7px 0 !important; }
    .header-top .container,
    .header-middle .container { max-width: 100%; padding-right: 12px !important; padding-left: 12px !important; }
    .header-top-wrapper { min-height: 34px !important; padding-left: 0 !important; }
    .header-top-wrapper .row { width: 100%; margin: 0 !important; }
    .header-top-left .header-top-list { display: flex !important; width: 100%; align-items: center; justify-content: center; margin: 0 !important; }
    .header-top-left .header-top-list li:first-child,
    .header-top-left .header-top-list li.help { display: none !important; }
    .header-top-list li { padding: 0 !important; }
    .header-top-list li a { font-size: 13px !important; font-weight: 850; }
    .mobile-top-brand { display: none !important; }

    .header-middle { padding: 10px 0 12px !important; }
    .header-middle .row { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 10px; margin: 0 !important; }
    .header-logo-col,
    .header-mobile-search-col { width: 100% !important; max-width: none !important; flex: none !important; margin: 0 !important; padding: 0 !important; }
    .header-middle-logo { display: flex !important; width: 100%; align-items: center !important; justify-content: space-between !important; gap: 12px !important; }
    .header-middle-logo .navbar-brand { display: inline-flex !important; width: 150px !important; max-width: 150px !important; flex: 0 1 150px !important; align-items: center; margin: 0 !important; padding: 0 !important; }
    .header-middle-logo .mg-brand-logo,
    .header-middle-logo .navbar-brand img { width: 142px !important; max-width: 142px !important; height: auto !important; max-height: 38px !important; object-fit: contain; }
    .header-mobile-tools { display: flex !important; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 7px !important; margin-left: auto; }
    .header-mobile-tools .navbar-toggler,
    .header-mobile-tools .theme-toggle { display: inline-flex !important; width: 40px !important; height: 40px !important; min-width: 40px !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; border: 1px solid #d7e6f1 !important; border-radius: 12px !important; color: var(--mg-navy) !important; background: #f3f8fb !important; box-shadow: none !important; }
    .header-mobile-tools .navbar-toggler-mobile-icon { display: inline-flex; width: auto !important; height: auto !important; align-items: center; justify-content: center; background: transparent !important; box-shadow: none !important; }

    .header-mobile-search-col { grid-column: 1; }
    .header-middle-search-mobile { width: 100%; }
    .header-middle-search-mobile .search-content { width: 100%; height: 46px !important; min-height: 46px !important; border: 1px solid #c9deed !important; border-radius: 14px !important; background: #f7fbfe !important; box-shadow: 0 8px 22px rgba(11,79,145,.07) !important; }
    .header-middle-search-mobile .form-control { height: 44px !important; min-height: 44px !important; padding: 0 52px 0 15px !important; color: var(--mg-ink) !important; background: transparent !important; font-size: 14px !important; }
    .header-middle-search-mobile .search-btn { right: 4px !important; width: 38px !important; min-width: 38px !important; height: 38px !important; padding: 0 !important; border-radius: 11px !important; color: #fff !important; background: linear-gradient(135deg,var(--mg-navy-2),var(--mg-navy)) !important; box-shadow: none !important; }
    .header-middle-search-mobile .search-btn span { display: none !important; }

    .main-navigation,
    .main-navigation .navbar:not(.fixed-top),
    .main-navigation .navbar:not(.fixed-top) > .container { height: 0 !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border: 0 !important; }
    .main-navigation .navbar.fixed-top { min-height: 58px !important; padding: 7px 0 !important; background: rgba(255,255,255,.97) !important; backdrop-filter: blur(14px); }
    .main-navigation .navbar.fixed-top > .container { min-height: 44px !important; justify-content: space-between !important; }
    .main-navigation .navbar.fixed-top .mg-fixed-mobile-brand { display: inline-flex !important; width: 128px; max-width: 128px; align-items: center; margin: 0 !important; padding: 0 !important; }
    .main-navigation .navbar.fixed-top .mg-fixed-mobile-brand img { display: block; width: 122px !important; max-width: 122px !important; height: auto !important; max-height: 34px !important; object-fit: contain; }
    .main-navigation .navbar.fixed-top .mobile-menu-right { margin-left: auto !important; }
    .main-navigation .navbar.fixed-top .mobile-menu-right .navbar-toggler,
    .main-navigation .navbar.fixed-top .mobile-menu-right .theme-toggle { width: 40px !important; height: 40px !important; margin: 0 !important; padding: 0 !important; border: 1px solid #d7e6f1 !important; border-radius: 12px !important; color: var(--mg-navy) !important; background: #f3f8fb !important; box-shadow: none !important; }

    .mg-hero { min-height: 0; margin: 0; background-position: 64% center; }
    .mg-hero-copy { padding: 54px 0 58px; }
    .mg-hero h1 { font-size: clamp(34px,10.5vw,43px); line-height: 1.04; overflow-wrap: normal; }
    .mg-hero p { font-size: 16px; line-height: 1.65; }
    .mg-actions { margin-top: 24px; }
    .mg-hero-proof { gap: 12px 18px; margin-top: 28px; font-size: 13px; }

    .mg-section { padding: 44px 0; }
    #cozumler { padding-bottom: 16px; }
    .mg-categories > .mg-section { padding-top: 16px; }
    .mg-section-heading { margin-bottom: 22px; }
    .mg-section-heading h2 { font-size: clamp(29px,8.7vw,38px); }
    .mg-service-grid { grid-template-columns: 1fr; gap: 12px; }
    .mg-service-card { display: grid; grid-template-columns: 112px minmax(0,1fr); min-height: 132px; }
    .mg-service-visual { min-height: 132px; border-right: 1px solid #dceaf3; border-bottom: 0; }
    .mg-service-visual::before { right: auto; width: 4px; height: 100%; }
    .mg-service-visual::after { width: 82px; height: 82px; }
    .mg-service-visual img { width: 108px; height: 108px; }
    .mg-service-content { justify-content: center; padding: 17px 17px 18px; }
    .mg-service-card h3 { font-size: 18px; }
    .mg-service-card p { font-size: 13px; line-height: 1.5; }
    #urunler > .product-area { padding-top: 34px !important; padding-bottom: 34px !important; }
    .mg-cta { margin-bottom: 48px; }
    .catalog-loading-pill { top: 70px; min-height: 42px; padding: 0 15px; }
    .catalog-loading-pill strong { font-size: 12px; }
    .catalog-async-toast { right: 12px; bottom: 16px; left: 12px; max-width: none; }
}

@media (max-width: 390px) {
    .header-middle-logo .navbar-brand { width: 128px !important; max-width: 128px !important; flex-basis: 128px !important; }
    .header-middle-logo .mg-brand-logo,
    .header-middle-logo .navbar-brand img { width: 122px !important; max-width: 122px !important; }
    .header-mobile-tools .navbar-toggler,
    .header-mobile-tools .theme-toggle { width: 38px !important; height: 38px !important; min-width: 38px !important; }
    .mg-service-card { grid-template-columns: 98px minmax(0,1fr); }
    .mg-service-visual img { width: 94px; height: 94px; }
    .mg-service-content { padding: 14px; }
}

@media print {
    @page { size: A5 portrait; margin: 0; }
    body * { visibility: hidden !important; }
    .mg-receipt, .mg-receipt * { visibility: visible !important; }
    .mg-receipt { position: absolute; inset: 0; width: 148mm; min-height: 210mm; margin: 0; box-shadow: none; }
    .no-print, .mg-no-print { display: none !important; }
}