/*
 * Fácil Shop 4.0.0
 * Comercio, carrito, checkout y correcciones responsive finales de Fase 3.
 */

/* --------------------------------------------------------------------------
 * Barra compacta del catálogo
 * -------------------------------------------------------------------------- */
.catalog-results-toolbar.catalog-results-toolbar-app {
    display: grid !important;
    grid-template-columns: minmax(260px, 1fr) auto !important;
    align-items: center !important;
    gap: 18px 28px !important;
    min-width: 0;
}
.catalog-results-toolbar-app .catalog-result-summary {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 0;
}
.catalog-results-toolbar-app .catalog-result-count {
    display: inline-flex;
    width: max-content;
    margin: 0 0 2px;
}
.catalog-results-toolbar-app .catalog-result-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3px !important;
    min-width: 0;
}
.catalog-results-toolbar-app .catalog-result-copy h2,
.catalog-results-toolbar-app .catalog-result-copy small {
    display: block !important;
    grid-column: auto !important;
    width: 100%;
    margin: 0 !important;
    white-space: normal !important;
}
.catalog-results-toolbar-app .catalog-result-copy h2 { line-height: 1.15; }
.catalog-results-toolbar-app .catalog-result-copy small { max-width: 620px; line-height: 1.45; }
.catalog-results-toolbar-app .catalog-toolbar-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: auto !important;
    min-width: 0;
}
.catalog-toolbar-view-field { display: flex !important; align-items: center; }
.catalog-toolbar-view-field > span { display: none !important; }
.catalog-results-toolbar-app .catalog-sort-form {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    width: auto !important;
}
.catalog-results-toolbar-app .catalog-toolbar-field {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    font-size: 0 !important;
}
.catalog-results-toolbar-app .catalog-toolbar-field select {
    min-width: 165px;
    height: 42px;
    font-size: .9rem !important;
}
.catalog-results-toolbar-app .catalog-toolbar-field-compact select { min-width: 76px; }

/* --------------------------------------------------------------------------
 * Cabecera, carrito y menú lateral móvil
 * -------------------------------------------------------------------------- */
.public-cart-button {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 14px;
    background: rgba(255,255,255,.08);
    color: #fff;
}
.public-cart-button svg { width: 22px; height: 22px; fill: currentColor; }
.public-cart-count,
.mobile-cart-bottom b,
.mobile-cart-link b {
    display: none;
    place-items: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--fs-secondary);
    color: #fff;
    font-size: .68rem;
    font-weight: 900;
    line-height: 1;
}
.public-cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    box-shadow: 0 4px 12px rgba(0,0,0,.22);
}
[data-cart-count].has-items { display: grid; }
.mobile-cart-link { align-items: center !important; justify-content: space-between; }
.mobile-cart-bottom { position: relative; }
.mobile-cart-bottom b { position: absolute; top: 3px; right: calc(50% - 22px); }

/* El overlay es únicamente el fondo oscuro; el contenido real es .main-nav. */
@media (max-width: 840px) {
    .site-header { position: sticky !important; top: 0; z-index: 1200 !important; }
    .header-inner { position: relative; grid-template-columns: 46px minmax(0,1fr) auto !important; }
    .mobile-nav-toggle { grid-column: 1; justify-self: start; }
    .public-logo { grid-column: 2; justify-self: center; }
    .public-cart-button { grid-column: 3; width: 40px; height: 40px; flex-basis: 40px; }
    .public-account-menu { display: none !important; }

    .main-nav[data-public-nav] {
        display: flex !important;
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        width: min(88vw, 370px) !important;
        max-width: 100% !important;
        height: 100dvh !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 24px 24px 0 !important;
        background: linear-gradient(180deg, #241957 0%, #15102f 100%) !important;
        box-shadow: 24px 0 70px rgba(11,8,32,.42) !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        transform: translateX(-105%);
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transition: transform .25s ease, opacity .2s ease, visibility .25s;
        z-index: 1220 !important;
    }
    .main-nav[data-public-nav].is-open {
        transform: translateX(0) !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    .mobile-nav-overlay {
        position: fixed !important;
        inset: 0 !important;
        display: block !important;
        background: rgba(8,6,25,.68) !important;
        backdrop-filter: blur(3px);
        z-index: 1190 !important;
    }
    .mobile-nav-overlay[hidden] { display: none !important; }
    .public-nav-open { overflow: hidden !important; }
    .main-nav .mobile-drawer-head,
    .main-nav .main-nav-links,
    .main-nav .mobile-drawer-account,
    .main-nav .mobile-drawer-footer { flex: 0 0 auto; }
    .main-nav .mobile-drawer-head {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 22px 20px 18px;
        border-bottom: 1px solid rgba(255,255,255,.1);
    }
    .main-nav .mobile-drawer-head img { width: min(210px, 65vw); max-height: 48px; object-fit: contain; object-position: left center; }
    .main-nav .mobile-drawer-head button { width: 40px; height: 40px; border: 0; border-radius: 12px; background: rgba(255,255,255,.1); color: #fff; font-size: 1.6rem; }
    .main-nav .main-nav-links { display: grid !important; gap: 6px; padding: 16px 14px !important; }
    .main-nav .main-nav-links a,
    .main-nav .main-nav-links button {
        display: flex !important;
        min-height: 46px;
        align-items: center;
        padding: 11px 14px !important;
        border-radius: 13px;
        color: #fff !important;
        background: transparent;
        text-align: left;
        font-weight: 800;
    }
    .main-nav .main-nav-links a:hover,
    .main-nav .main-nav-links button:hover { background: rgba(255,255,255,.09); }
    .main-nav .mobile-drawer-account { display: grid !important; margin: 0 14px 16px; }
    .main-nav .mobile-drawer-footer { margin-top: auto; }
}

/* --------------------------------------------------------------------------
 * Comercio Fase 4
 * -------------------------------------------------------------------------- */
.commerce-page { min-height: 65vh; background: #f6f7fb; }
.commerce-hero { background: linear-gradient(135deg, #21144f, var(--fs-primary)); color: #fff; }
.commerce-hero-compact { padding: 42px 0; }
.commerce-hero-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.commerce-hero h1 { margin: 5px 0 8px; color: #fff; font-size: clamp(2rem,4vw,3.2rem); }
.commerce-hero p { margin: 0; color: rgba(255,255,255,.76); }
.commerce-section { padding: 42px 0 70px; }
.commerce-notice { margin-bottom: 20px; }
.commerce-card,
.cart-items-panel,
.cart-summary-card,
.checkout-step-card,
.checkout-order-summary {
    border: 1px solid #e5e7ef;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 16px 42px rgba(40,32,89,.07);
}
.commerce-card { padding: 24px; }
.commerce-panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding: 0 0 20px; border-bottom:1px solid #ececf3; }
.commerce-panel-heading span { color:var(--fs-primary);font-size:.76rem;font-weight:900;letter-spacing:.09em; }
.commerce-panel-heading h2 { margin:4px 0 0; }
.commerce-empty-state { padding:70px 24px; text-align:center; border:1px dashed #c9c9da; border-radius:24px; background:#fff; }
.commerce-empty-icon { display:block; font-size:3rem; }
.cart-layout { display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start; }
.cart-items-panel { padding:24px; min-width:0; }
.cart-summary-card { position:sticky;top:92px;padding:24px; }
.cart-item-list { display:grid;gap:14px;margin-top:20px; }
.cart-item-card { display:grid;grid-template-columns:92px minmax(160px,1fr) auto 130px 38px;gap:16px;align-items:center;padding:14px;border:1px solid #e8e8ef;border-radius:18px; }
.cart-item-card.is-unavailable { opacity:.68;background:#fafafa; }
.cart-item-image { display:grid;place-items:center;height:78px;border-radius:14px;background:#f3f3f8;overflow:hidden; }
.cart-item-image img { width:100%;height:100%;object-fit:contain; }
.cart-item-copy h3 { margin:3px 0 6px;font-size:1rem; }
.cart-item-copy small,.cart-item-copy span { display:block; }
.cart-success { color:#168447; }.cart-info{color:#2563eb}.cart-warning{color:#b45309}
.cart-quantity-form { display:flex;flex-direction:column;gap:6px; }
.cart-quantity-form label,.purchase-quantity-control { display:grid;grid-template-columns:34px 52px 34px;align-items:center;border:1px solid #d9d9e4;border-radius:12px;overflow:hidden;background:#fff; }
.cart-quantity-form button,.purchase-quantity-control button { border:0;background:#f2f2f7;height:36px;font-size:1.2rem;cursor:pointer; }
.cart-quantity-form input,.purchase-quantity-control input { width:100%;height:36px;border:0;text-align:center;padding:0;appearance:textfield; }
.cart-update-button { border:0;background:transparent!important;color:var(--fs-primary);font-weight:800;font-size:.75rem; }
.cart-item-price { text-align:right; }.cart-item-price small,.cart-item-price span { display:block;color:var(--fs-muted);font-size:.75rem; }
.cart-item-price strong { display:block;margin:3px 0; }
.cart-remove-form button { display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:10px;background:#fff0f0;color:#c62828;cursor:pointer; }
.cart-remove-form svg { width:18px;fill:currentColor; }
.link-danger { border:0;background:transparent;color:#c62828;font-weight:800;cursor:pointer; }
.cart-coupon-form { margin:20px 0; }.cart-coupon-form label{display:block;font-weight:800;margin-bottom:7px}.cart-coupon-form>div{display:grid;grid-template-columns:1fr auto}.cart-coupon-form input{border-radius:12px 0 0 12px}.cart-coupon-form button{border:0;border-radius:0 12px 12px 0;padding:0 15px;background:var(--fs-primary);color:#fff;font-weight:800}
.cart-coupon-applied { display:flex;justify-content:space-between;gap:12px;padding:12px;border-radius:14px;background:#f1edff; }.cart-coupon-applied strong,.cart-coupon-applied small{display:block}.cart-coupon-applied button{border:0;background:transparent;color:#b91c1c;font-weight:800}.cart-coupon-error{padding:10px;border-radius:12px;background:#fff4e5;color:#9a5800}
.cart-totals { display:grid;gap:12px;margin:22px 0; }.cart-totals div{display:flex;justify-content:space-between;gap:18px}.cart-totals dt,.cart-totals dd{margin:0}.cart-total-row{padding-top:15px;border-top:1px solid #e5e5ed;font-size:1.2rem;font-weight:900}.cart-trust-list{display:grid;gap:7px;margin-top:18px;color:#5d6474;font-size:.8rem}

.checkout-layout { display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start; }
.checkout-steps { display:grid;gap:18px; }
.checkout-step-card { padding:24px; }
.checkout-step-heading { display:flex;gap:14px;align-items:flex-start;margin-bottom:22px; }.checkout-step-heading>span{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#eee9ff;color:var(--fs-primary);font-weight:900}.checkout-step-heading h2{margin:0 0 4px}.checkout-step-heading p{margin:0;color:var(--fs-muted)}
.checkout-form-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px; }.checkout-span-2{grid-column:1/-1}.checkout-save-profile,.checkout-terms{display:flex!important;align-items:flex-start;gap:10px;margin-top:16px}.checkout-save-profile input,.checkout-terms input{width:auto;margin-top:3px}
.checkout-payment-options{display:grid;gap:10px}.checkout-payment-option{display:grid!important;grid-template-columns:auto 44px 1fr auto;align-items:center;gap:12px;padding:14px;border:1px solid #dfdfea;border-radius:16px;cursor:pointer}.checkout-payment-option:has(input:checked){border-color:var(--fs-primary);box-shadow:0 0 0 3px rgba(66,50,137,.1)}.checkout-payment-option input{width:auto}.checkout-payment-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#f2efff}.checkout-payment-option strong,.checkout-payment-option small{display:block}.checkout-payment-option small{color:var(--fs-muted)}.checkout-payment-option i{color:var(--fs-primary);font-style:normal;font-weight:900}.checkout-phase-note{margin-top:18px;padding:14px;border-radius:14px;background:#fff7ed}.checkout-phase-note p{margin:5px 0 0;color:#7c4a12}
.checkout-order-summary { position:sticky;top:92px;padding:24px; }.checkout-summary-items{display:grid;gap:12px;margin:18px 0}.checkout-summary-items article{display:grid;grid-template-columns:50px 1fr auto;gap:10px;align-items:center}.checkout-summary-items img{width:50px;height:50px;object-fit:contain;border-radius:10px;background:#f5f5f8}.checkout-summary-items strong,.checkout-summary-items small{display:block}.checkout-summary-items small{color:var(--fs-muted)}.checkout-coupon-chip{display:flex;justify-content:space-between;padding:10px 12px;border-radius:12px;background:#efeaff;color:var(--fs-primary)}.checkout-confirm-button small{display:block;font-weight:500;opacity:.8}

.phase4-purchase-form { display:grid;gap:14px;margin:18px 0; }.phase4-purchase-form>label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:800}.phase4-purchase-actions{display:grid;gap:10px}.phase4-payment-preview{display:grid;gap:7px;padding:14px;border-radius:14px;background:#f7f6fc}.phase4-payment-preview span{font-size:.86rem;color:#4d5261}

.order-detail-layout,.admin-order-layout { display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start; }.order-detail-main,.admin-order-main{display:grid;gap:20px}.order-status-card{display:flex;align-items:center;justify-content:space-between}.order-status-card h2{margin:4px 0}.order-status-card p{margin:0;color:var(--fs-muted)}.order-product-list{display:grid;gap:12px;margin-top:18px}.order-product-row{display:grid;grid-template-columns:72px 1fr auto;gap:14px;align-items:center;padding:12px;border:1px solid #e7e7ef;border-radius:16px}.order-product-row img{width:72px;height:64px;object-fit:contain;border-radius:12px;background:#f5f5f8}.order-product-row h3{margin:3px 0}.order-product-row small,.order-product-row span{display:block;color:var(--fs-muted)}.order-summary-sticky{position:sticky;top:92px}.order-information-list,.admin-definition-list{display:grid;gap:10px;margin:18px 0}.order-information-list div,.admin-definition-list div{display:grid;grid-template-columns:110px 1fr;gap:12px}.order-information-list dt,.order-information-list dd,.admin-definition-list dt,.admin-definition-list dd{margin:0}.order-information-list dt,.admin-definition-list dt{color:var(--fs-muted)}.order-information-list dd,.admin-definition-list dd{text-align:right;font-weight:700;overflow-wrap:anywhere}.order-timeline,.admin-order-timeline{list-style:none;margin:20px 0 0;padding:0;display:grid}.order-timeline li{position:relative;display:grid;grid-template-columns:20px 1fr;gap:12px;padding:0 0 20px}.order-timeline li:not(:last-child)::before{content:"";position:absolute;left:8px;top:17px;bottom:0;width:2px;background:#e1e1ea}.order-timeline-dot{position:relative;z-index:1;width:18px;height:18px;border:4px solid #fff;border-radius:50%;background:#aaa;box-shadow:0 0 0 2px currentColor}.order-timeline strong,.order-timeline small{display:block}.order-timeline small{color:var(--fs-muted)}.order-timeline p{margin:5px 0 0}.order-cancel-box{margin-top:20px;border-top:1px solid #e6e6ef;padding-top:15px}.order-cancel-box summary{cursor:pointer;color:#b42318;font-weight:800}.order-cancel-box form{display:grid;gap:10px;margin-top:12px}.manual-payment-grid{display:grid;grid-template-columns:180px 1fr;gap:20px;margin-top:18px}.manual-payment-grid>img{width:180px;height:180px;object-fit:contain;border:1px solid #e3e3eb;border-radius:16px}

/* Administración de comercio */
.commerce-admin-guide{display:flex;gap:18px;margin-bottom:18px;padding:16px 20px}.commerce-admin-guide>div{display:grid;gap:3px;flex:1}.commerce-admin-guide span{color:var(--fs-muted)}.order-admin-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.order-admin-overview>div{display:grid;gap:5px}.order-admin-overview small,.order-admin-overview span{color:var(--fs-muted)}.admin-order-timeline{gap:12px}.admin-order-timeline li{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:13px;border:1px solid #e7e7ef;border-radius:14px}.admin-order-timeline small{display:block;color:var(--fs-muted)}.admin-order-timeline p{margin:5px 0 0}.admin-note-form{display:grid;grid-template-columns:180px 1fr auto;gap:12px;align-items:start}.admin-note-list{display:grid;gap:10px;margin-top:18px}.admin-note-list article{padding:14px;border:1px solid #e7e7ef;border-radius:14px}.admin-note-list article>div{display:flex;align-items:center;justify-content:space-between;gap:10px}.admin-note-list p{margin:10px 0}.admin-note-list small{color:var(--fs-muted)}

@media (max-width: 1180px) {
    .catalog-results-toolbar.catalog-results-toolbar-app { grid-template-columns: 1fr !important; }
    .catalog-results-toolbar-app .catalog-toolbar-controls { justify-content:flex-start !important; }
    .cart-layout,.checkout-layout,.order-detail-layout,.admin-order-layout { grid-template-columns:minmax(0,1fr) 320px; }
    .cart-item-card { grid-template-columns:80px minmax(140px,1fr) auto 110px 36px;gap:11px; }
    .order-admin-overview{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 900px) {
    .catalog-results-toolbar-app .catalog-toolbar-controls { flex-wrap:wrap !important; }
    .cart-layout,.checkout-layout,.order-detail-layout,.admin-order-layout { grid-template-columns:1fr; }
    .cart-summary-card,.checkout-order-summary,.order-summary-sticky { position:static; }
    .cart-item-card { grid-template-columns:76px 1fr auto; }.cart-quantity-form{grid-column:2}.cart-item-price{grid-column:3;grid-row:1/3}.cart-remove-form{grid-column:3;grid-row:3}.checkout-form-grid{grid-template-columns:1fr}.checkout-span-2{grid-column:auto}.admin-note-form{grid-template-columns:1fr}.commerce-admin-guide{flex-direction:column}.manual-payment-grid{grid-template-columns:1fr}.manual-payment-grid>img{margin:auto}
}
@media (max-width: 640px) {
    .catalog-results-toolbar.catalog-results-toolbar-app { padding:16px !important; }
    .catalog-results-toolbar-app .catalog-toolbar-controls { display:grid !important;grid-template-columns:1fr auto !important;width:100% !important; }
    .catalog-results-toolbar-app .mobile-filter-button { grid-column:1; }
    .catalog-toolbar-view-field { grid-column:2; }
    .catalog-results-toolbar-app .catalog-sort-form { grid-column:1/-1;display:grid !important;grid-template-columns:1fr 88px !important;width:100% !important; }
    .catalog-results-toolbar-app .catalog-toolbar-field,.catalog-results-toolbar-app .catalog-toolbar-field select { width:100% !important;min-width:0 !important; }
    .commerce-hero-compact{padding:30px 0}.commerce-hero-inner{align-items:flex-start;flex-direction:column}.commerce-section{padding:26px 0 90px}.cart-items-panel,.cart-summary-card,.checkout-step-card,.checkout-order-summary,.commerce-card{padding:17px;border-radius:18px}.cart-item-card{grid-template-columns:66px minmax(0,1fr) 34px;padding:10px}.cart-item-image{height:62px}.cart-item-price{grid-column:2;text-align:left;grid-row:auto}.cart-quantity-form{grid-column:2}.cart-remove-form{grid-column:3;grid-row:1}.cart-quantity-form label{width:max-content}.order-product-row{grid-template-columns:56px 1fr}.order-product-row img{width:56px;height:56px}.order-product-row>strong{grid-column:2;text-align:left}.order-status-card{align-items:flex-start;flex-direction:column}.order-information-list div,.admin-definition-list div{grid-template-columns:1fr}.order-information-list dd,.admin-definition-list dd{text-align:left}.order-admin-overview{grid-template-columns:1fr}.admin-order-timeline li{grid-template-columns:1fr}.public-cart-button{display:grid!important}
}
.commerce-toast-region{position:fixed;top:82px;right:18px;z-index:1800;display:grid;gap:10px;width:min(360px,calc(100vw - 36px))}.commerce-toast{transform:translateY(-8px);opacity:0;padding:13px 16px;border-radius:14px;background:#173f2a;color:#fff;box-shadow:0 16px 36px rgba(0,0,0,.22);font-weight:750;transition:.2s ease}.commerce-toast.is-error{background:#8f1d1d}.commerce-toast.is-visible{transform:translateY(0);opacity:1}

/* --------------------------------------------------------------------------
 * Fácil Shop 4.0.1 — política MFA opcional y autoservicio del cliente.
 * -------------------------------------------------------------------------- */
.customer-security-mfa-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.customer-security-mfa-card .customer-security-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--fs-primary), #6f5ac7);
    color: #fff;
    font-size: .82rem;
    font-weight: 900;
}
.customer-security-mfa-card h2,
.customer-security-mfa-card p { margin: 0; }
.customer-security-mfa-card .button { margin-top: auto; }
.customer-mfa-panel { max-width: 900px; }
.account-security-explainer {
    margin: 18px 0;
    padding: 16px 18px;
    border: 1px solid #e4defb;
    border-radius: 16px;
    background: #f8f6ff;
}
.account-security-explainer.is-success {
    border-color: #bde8ce;
    background: #f0fbf4;
}
.account-security-explainer strong,
.account-security-explainer p { display: block; margin: 0; }
.account-security-explainer p { margin-top: 5px; color: var(--fs-muted); }
.customer-mfa-steps { display: grid; gap: 8px; margin: 18px 0; padding-left: 22px; }
.customer-secret-box { margin: 18px 0; }
.customer-secret-box code,
.customer-technical-details code {
    display: block;
    margin-top: 8px;
    padding: 12px;
    border-radius: 12px;
    background: #151329;
    color: #fff;
    overflow-wrap: anywhere;
}
.customer-technical-details { margin: 14px 0 20px; }
.customer-technical-details summary { cursor: pointer; font-weight: 800; color: var(--fs-primary); }
.customer-mfa-form { max-width: 520px; }
.customer-secondary-form { margin-top: 12px; }
.customer-recovery-codes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0 22px;
}
.customer-recovery-codes code {
    padding: 10px 12px;
    border-radius: 10px;
    background: #f4f2fa;
    text-align: center;
    font-weight: 800;
}
@media (max-width: 640px) {
    .customer-recovery-codes { grid-template-columns: 1fr; }
    .customer-mfa-panel { padding: 18px; }
}