/* * ========================================================== * MBK ACCOUNT FOUNDATION * ========================================================== */ .mbk-account-shell { width: 100%; } .mbk-account-auth { width: 100%; } .mbk-account-dashboard { width: 100%; } .mbk-account-dashboard-inner { max-width: 1200px; margin: 0 auto; padding: 32px 24px; } .mbk-account-eyebrow { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .mbk-account-dashboard h1 { margin: 0; } .mbk-account-dashboard-intro { margin-top: 8px; } @media (max-width: 900px) { .mbk-account-dashboard-inner { padding: 24px 16px; } } /* * ========================================================== * V3.8.7 — MERCI BOKKU AUTHENTICATION UI * ========================================================== */ .mbk-auth-page { width: 100%; min-height: 650px; display: flex; justify-content: center; align-items: center; padding: 56px 20px; background: radial-gradient( circle at 10% 10%, rgba(255, 146, 0, .10), transparent 35% ), radial-gradient( circle at 90% 90%, rgba(34, 139, 84, .10), transparent 35% ), #f7faf8; box-sizing: border-box; } .mbk-auth-card { width: min(100%, 920px); padding: 42px; border: 1px solid rgba(25, 60, 45, .10); border-radius: 28px; background: rgba(255,255,255,.96); box-shadow: 0 24px 70px rgba(20,50,35,.12); box-sizing: border-box; } /* ---------------------------------------------------------- BRAND ---------------------------------------------------------- */ .mbk-auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 34px; } .mbk-auth-logo { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: #f58220; color: #fff; font-size: 15px; font-weight: 900; } .mbk-auth-brand strong { display: block; color: #17241d; font-size: 17px; font-weight: 900; } .mbk-auth-brand span { display: block; margin-top: 2px; color: #718077; font-size: 11px; } /* ---------------------------------------------------------- HEADING ---------------------------------------------------------- */ .mbk-auth-heading { max-width: 650px; margin-bottom: 28px; } .mbk-auth-kicker { display: block; margin-bottom: 8px; color: #f58220; font-size: 11px; font-weight: 900; letter-spacing: .14em; } .mbk-auth-heading h1 { margin: 0; color: #17241d; font-size: clamp(28px, 4vw, 42px); line-height: 1.08; font-weight: 900; } .mbk-auth-heading p { max-width: 580px; margin: 12px 0 0; color: #68756e; font-size: 14px; line-height: 1.6; } /* ---------------------------------------------------------- LOGIN / REGISTER SWITCH ---------------------------------------------------------- */ .mbk-auth-switch { display: inline-flex; padding: 5px; margin-bottom: 30px; border-radius: 14px; background: #eef3ef; } .mbk-auth-switch button { min-height: 42px; padding: 0 20px; border: 0; border-radius: 10px; background: transparent; color: #66736c; font-size: 13px; font-weight: 800; cursor: pointer; transition: background .2s ease, color .2s ease, box-shadow .2s ease; } .mbk-auth-switch button.is-active { background: #fff; color: #17241d; box-shadow: 0 3px 12px rgba(0,0,0,.08); } /* ---------------------------------------------------------- WOOCOMMERCE AUTH FORMS ---------------------------------------------------------- */ .mbk-auth-forms #customer_login { display: block !important; margin: 0 !important; } .mbk-auth-forms .u-column1, .mbk-auth-forms .u-column2 { width: 100% !important; float: none !important; margin: 0 !important; } .mbk-auth-forms .u-column2 { display: none; } .mbk-auth-forms #customer_login.mbk-show-register .u-column1 { display: none; } .mbk-auth-forms #customer_login.mbk-show-register .u-column2 { display: block; } /* WooCommerce headings */ .mbk-auth-forms h2 { margin: 0 0 20px !important; color: #17241d !important; font-size: 22px !important; font-weight: 900 !important; } /* Form */ .mbk-auth-forms form { margin: 0 !important; padding: 0 !important; border: 0 !important; } .mbk-auth-forms .woocommerce-form-row { margin-bottom: 17px !important; } .mbk-auth-forms label { display: block !important; margin-bottom: 7px !important; color: #26332c !important; font-size: 12px !important; font-weight: 800 !important; } .mbk-auth-forms input.input-text { width: 100% !important; min-height: 52px !important; padding: 0 15px !important; border: 1px solid #dce5df !important; border-radius: 12px !important; background: #fff !important; color: #17241d !important; font-size: 14px !important; box-sizing: border-box !important; outline: none !important; transition: border-color .2s ease, box-shadow .2s ease; } .mbk-auth-forms input.input-text:focus { border-color: #f58220 !important; box-shadow: 0 0 0 4px rgba(245,130,32,.10) !important; } /* Buttons */ .mbk-auth-forms button.button { min-height: 52px !important; padding: 0 24px !important; border: 0 !important; border-radius: 12px !important; background: #f58220 !important; color: #fff !important; font-size: 14px !important; font-weight: 900 !important; cursor: pointer !important; } .mbk-auth-forms button.button:hover { background: #dc6f12 !important; } /* Remember me */ .mbk-auth-forms .woocommerce-form-login__rememberme { display: inline-flex !important; align-items: center !important; gap: 7px !important; margin-right: 12px !important; } .mbk-auth-forms .woocommerce-form-login__rememberme input { width: auto !important; min-height: auto !important; } /* Lost password */ .mbk-auth-forms .woocommerce-LostPassword { margin-top: 12px !important; } .mbk-auth-forms .woocommerce-LostPassword a { color: #17844b !important; font-size: 12px !important; font-weight: 800 !important; } /* Notices */ .mbk-auth-forms .woocommerce-notices-wrapper { margin-bottom: 20px; } /* ---------------------------------------------------------- BENEFITS ---------------------------------------------------------- */ .mbk-auth-benefits { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 30px; padding-top: 22px; border-top: 1px solid #edf1ee; color: #68756e; font-size: 11px; font-weight: 700; } /* ---------------------------------------------------------- MOBILE ---------------------------------------------------------- */ @media (max-width: 700px) { .mbk-auth-page { min-height: auto; padding: 20px 12px 35px; } .mbk-auth-card { padding: 25px 18px; border-radius: 20px; } .mbk-auth-brand { margin-bottom: 25px; } .mbk-auth-heading h1 { font-size: 28px; } .mbk-auth-switch { display: flex; width: 100%; } .mbk-auth-switch button { flex: 1; padding: 0 10px; } .mbk-auth-benefits { flex-direction: column; gap: 8px; } } /* * ========================================================== * V3.8.7.3 — REAL MERCI BOKKU LOGO * ========================================================== */ .mbk-auth-logo { overflow: hidden !important; padding: 7px !important; box-sizing: border-box !important; } .mbk-auth-logo img { display: block !important; width: 100% !important; height: 100% !important; object-fit: contain !important; border: 0 !important; } /* * ========================================================== * V3.8.8 — AUTHENTICATION UI REDESIGN * ========================================================== */ .mbk-auth-page { width: 100% !important; min-height: 760px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 42px 20px !important; box-sizing: border-box !important; background: radial-gradient( circle at 15% 20%, rgba(245,130,32,.09), transparent 30% ), radial-gradient( circle at 85% 80%, rgba(23,132,75,.09), transparent 32% ), #f8faf9 !important; } .mbk-auth-layout { width: min(100%, 1180px) !important; display: grid !important; grid-template-columns: minmax(340px, .9fr) minmax(460px, 1.1fr) !important; min-height: 650px !important; overflow: hidden !important; border-radius: 28px !important; background: #fff !important; box-shadow: 0 25px 80px rgba(20,50,35,.12) !important; border: 1px solid rgba(25,60,45,.08) !important; } /* ========================================================== LEFT VISUAL PANEL ========================================================== */ .mbk-auth-visual { position: relative !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; min-height: 650px !important; padding: 42px !important; box-sizing: border-box !important; background: radial-gradient( circle at 20% 80%, rgba(245,130,32,.18), transparent 35% ), linear-gradient( 145deg, #f5faf7 0%, #eef6f1 100% ) !important; } .mbk-auth-visual-content { position: relative !important; z-index: 2 !important; } .mbk-auth-visual .mbk-auth-brand { margin-bottom: 72px !important; } .mbk-auth-visual .mbk-auth-kicker { margin-bottom: 14px !important; } .mbk-auth-visual h1 { margin: 0 !important; color: #17241d !important; font-size: clamp(34px, 4vw, 48px) !important; line-height: 1.03 !important; font-weight: 800 !important; } .mbk-auth-visual h1 strong { color: #f15f22 !important; } .mbk-auth-visual-intro { max-width: 410px !important; margin: 18px 0 34px !important; color: #59665f !important; font-size: 14px !important; line-height: 1.65 !important; } /* Benefits */ .mbk-auth-benefit-list { display: flex !important; flex-direction: column !important; gap: 20px !important; } .mbk-auth-benefit { display: flex !important; align-items: center !important; gap: 13px !important; } .mbk-auth-benefit-icon { width: 38px !important; height: 38px !important; flex: 0 0 38px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; background: #fff !important; color: #17844b !important; font-size: 18px !important; box-shadow: 0 5px 15px rgba(20,50,35,.08) !important; } .mbk-auth-benefit:nth-child(2) .mbk-auth-benefit-icon, .mbk-auth-benefit:nth-child(4) .mbk-auth-benefit-icon { color: #f58220 !important; } .mbk-auth-benefit strong { display: block !important; color: #17241d !important; font-size: 12px !important; font-weight: 800 !important; } .mbk-auth-benefit small { display: block !important; margin-top: 3px !important; color: #758079 !important; font-size: 11px !important; } /* Decorative bottom */ .mbk-auth-visual-decoration { position: absolute !important; right: -50px !important; bottom: -70px !important; width: 280px !important; height: 280px !important; border-radius: 50% !important; background: radial-gradient( circle, rgba(245,130,32,.22), rgba(245,130,32,.04) 55%, transparent 56% ) !important; } .mbk-auth-visual-decoration span { position: absolute !important; border-radius: 50% !important; border: 1px solid rgba(23,132,75,.15) !important; } .mbk-auth-visual-decoration span:nth-child(1) { inset: 40px !important; } .mbk-auth-visual-decoration span:nth-child(2) { inset: 70px !important; } .mbk-auth-visual-decoration span:nth-child(3) { inset: 100px !important; } /* ========================================================== RIGHT AUTH CARD ========================================================== */ .mbk-auth-card { width: 100% !important; min-height: 650px !important; padding: 54px 58px 28px !important; border: 0 !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; box-sizing: border-box !important; } .mbk-auth-mobile-brand { display: none !important; } .mbk-auth-card .mbk-auth-heading { max-width: none !important; margin-bottom: 22px !important; } .mbk-auth-card .mbk-auth-heading h2 { margin: 0 !important; color: #17241d !important; font-size: 30px !important; line-height: 1.1 !important; font-weight: 900 !important; } .mbk-auth-card .mbk-auth-heading p { margin: 9px 0 0 !important; color: #758079 !important; font-size: 13px !important; } /* Switch */ .mbk-auth-card .mbk-auth-switch { margin-bottom: 30px !important; } /* Form sizing */ .mbk-auth-forms .woocommerce-form-row { margin-bottom: 18px !important; } .mbk-auth-forms input.input-text { min-height: 54px !important; border-radius: 10px !important; } .mbk-auth-forms button.button { min-height: 52px !important; border-radius: 10px !important; } /* Footer */ .mbk-auth-card-footer { display: flex !important; flex-wrap: wrap !important; gap: 8px 22px !important; margin-top: 38px !important; padding-top: 20px !important; border-top: 1px solid #edf1ee !important; color: #718077 !important; font-size: 10px !important; font-weight: 700 !important; } /* ========================================================== MOBILE / APP ========================================================== */ @media (max-width: 900px) { .mbk-auth-page { min-height: auto !important; padding: 20px 12px 32px !important; background: #f8faf9 !important; } .mbk-auth-layout { display: block !important; width: 100% !important; min-height: auto !important; border-radius: 22px !important; box-shadow: 0 12px 40px rgba(20,50,35,.08) !important; } .mbk-auth-visual { display: none !important; } .mbk-auth-card { min-height: auto !important; padding: 26px 20px 22px !important; border-radius: 22px !important; } .mbk-auth-mobile-brand { display: flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; margin-bottom: 34px !important; text-align: left !important; } .mbk-auth-mobile-brand .mbk-auth-logo { width: 42px !important; height: 42px !important; border-radius: 12px !important; } .mbk-auth-mobile-brand strong { display: block !important; color: #17241d !important; font-size: 14px !important; font-weight: 900 !important; } .mbk-auth-mobile-brand span { display: block !important; margin-top: 2px !important; color: #718077 !important; font-size: 9px !important; } .mbk-auth-card .mbk-auth-heading { text-align: center !important; } .mbk-auth-card .mbk-auth-kicker { margin-bottom: 10px !important; } .mbk-auth-card .mbk-auth-heading h2 { font-size: 25px !important; } .mbk-auth-card .mbk-auth-heading p { font-size: 12px !important; } .mbk-auth-card .mbk-auth-switch { display: flex !important; width: 100% !important; box-sizing: border-box !important; margin-top: 22px !important; } .mbk-auth-card .mbk-auth-switch button { flex: 1 !important; } .mbk-auth-forms h2 { font-size: 20px !important; } .mbk-auth-card-footer { justify-content: center !important; text-align: center !important; gap: 7px 14px !important; margin-top: 28px !important; } } /* ========================================================== SMALL PHONES ========================================================== */ @media (max-width: 420px) { .mbk-auth-page { padding: 10px 8px 24px !important; } .mbk-auth-card { padding: 22px 16px 18px !important; } .mbk-auth-mobile-brand { margin-bottom: 28px !important; } .mbk-auth-forms input.input-text { min-height: 50px !important; } .mbk-auth-forms button.button { width: 100% !important; } } /* * ========================================================== * V3.8.9 — AUTH PAGE POLISH * ========================================================== */ /* ---------------------------------------------------------- REMOVE GENERIC WOOCOMMERCE PAGE TITLE ---------------------------------------------------------- */ body.mbk-account-page .woocommerce > h1:first-child, body.mbk-account-page .woocommerce-page > h1:first-child, body.mbk-account-page .woocommerce h1.entry-title, body.mbk-account-page .entry-title { display: none !important; } /* ---------------------------------------------------------- REMOVE THE EXTRA PAGE-LEVEL TOP SPACE ---------------------------------------------------------- */ body.mbk-account-page .site-main, body.mbk-account-page #primary, body.mbk-account-page .woocommerce { margin-top: 0 !important; padding-top: 0 !important; } /* ---------------------------------------------------------- AUTH SHELL ---------------------------------------------------------- */ body.mbk-account-page .mbk-account-shell { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 28px 24px 60px !important; box-sizing: border-box !important; } /* ---------------------------------------------------------- AUTH PAGE BACKGROUND ---------------------------------------------------------- */ body.mbk-account-page .mbk-auth-page { width: 100% !important; max-width: 1180px !important; margin: 0 auto !important; padding: 0 !important; box-sizing: border-box !important; } /* ---------------------------------------------------------- MAIN AUTH CARD ---------------------------------------------------------- */ body.mbk-account-page .mbk-auth-card { width: 100% !important; max-width: 100% !important; min-height: 0 !important; margin: 0 !important; border-radius: 26px !important; overflow: hidden !important; box-sizing: border-box !important; } /* ---------------------------------------------------------- DESKTOP AUTH FORM AREA ---------------------------------------------------------- */ @media (min-width: 901px) { body.mbk-account-page .mbk-auth-card { display: grid !important; grid-template-columns: minmax(390px, 0.82fr) minmax(500px, 1.18fr) !important; align-items: stretch !important; } body.mbk-account-page .mbk-auth-forms { min-width: 0 !important; padding: 48px 52px 34px !important; box-sizing: border-box !important; } body.mbk-account-page .mbk-auth-benefits { min-width: 0 !important; min-height: 560px !important; box-sizing: border-box !important; } body.mbk-account-page .mbk-auth-heading h1 { margin-top: 8px !important; } } /* ---------------------------------------------------------- TRUST / BENEFITS FOOTER ---------------------------------------------------------- */ body.mbk-account-page .mbk-auth-benefits-footer { width: 100% !important; box-sizing: border-box !important; overflow: visible !important; } body.mbk-account-page .mbk-auth-benefits-footer > * { box-sizing: border-box !important; } /* ---------------------------------------------------------- AUTH FORM SPACING ---------------------------------------------------------- */ body.mbk-account-page .mbk-auth-heading { margin-bottom: 22px !important; } body.mbk-account-page .mbk-auth-switch { margin-bottom: 34px !important; } body.mbk-account-page .mbk-auth-forms form { margin-bottom: 0 !important; } /* ---------------------------------------------------------- FORM FIELDS ---------------------------------------------------------- */ body.mbk-account-page .mbk-auth-forms .woocommerce-form-row { margin-bottom: 18px !important; } body.mbk-account-page .mbk-auth-forms input.input-text { min-height: 48px !important; box-sizing: border-box !important; } /* ---------------------------------------------------------- LOGIN ACTION AREA ---------------------------------------------------------- */ body.mbk-account-page .woocommerce-form-login .form-row:last-of-type { margin-bottom: 8px !important; } /* ---------------------------------------------------------- MOBILE / APP ---------------------------------------------------------- */ @media (max-width: 900px) { body.mbk-account-page .mbk-account-shell { padding: 14px 14px 32px !important; } body.mbk-account-page .mbk-auth-page { max-width: 100% !important; } body.mbk-account-page .mbk-auth-card { display: block !important; border-radius: 22px !important; } body.mbk-account-page .mbk-auth-benefits { min-height: 0 !important; } body.mbk-account-page .mbk-auth-forms { padding: 28px 22px 24px !important; box-sizing: border-box !important; } body.mbk-account-page .mbk-auth-heading h1 { font-size: 28px !important; line-height: 1.12 !important; } body.mbk-account-page .mbk-auth-heading p { font-size: 13px !important; line-height: 1.55 !important; } } /* ---------------------------------------------------------- VERY SMALL APP SCREENS ---------------------------------------------------------- */ @media (max-width: 480px) { body.mbk-account-page .mbk-account-shell { padding: 8px 8px 24px !important; } body.mbk-account-page .mbk-auth-card { border-radius: 18px !important; } body.mbk-account-page .mbk-auth-forms { padding: 24px 18px 20px !important; } } /* * ========================================================== * V3.8.10 — AUTH PANEL ALIGNMENT * ========================================================== */ /* ---------------------------------------------------------- AUTH CARD — PREVENT INTERNAL OVERFLOW ---------------------------------------------------------- */ body.mbk-account-page .mbk-auth-card { overflow: hidden !important; } body.mbk-account-page .mbk-auth-forms { min-width: 0 !important; width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; } /* ---------------------------------------------------------- AUTH SWITCH ---------------------------------------------------------- */ body.mbk-account-page .mbk-auth-switch { display: flex !important; align-items: stretch !important; width: 100% !important; max-width: 360px !important; min-width: 0 !important; margin: 0 0 32px 0 !important; padding: 4px !important; box-sizing: border-box !important; overflow: hidden !important; border-radius: 13px !important; } body.mbk-account-page .mbk-auth-switch button { flex: 1 1 50% !important; width: 50% !important; min-width: 0 !important; max-width: 50% !important; margin: 0 !important; padding: 11px 14px !important; box-sizing: border-box !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; border: 0 !important; cursor: pointer !important; } /* ---------------------------------------------------------- AUTH HEADING ---------------------------------------------------------- */ body.mbk-account-page .mbk-auth-heading { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } body.mbk-account-page .mbk-auth-heading h1, body.mbk-account-page .mbk-auth-heading p { max-width: 100% !important; overflow-wrap: break-word !important; } /* ---------------------------------------------------------- FORMS ---------------------------------------------------------- */ body.mbk-account-page .mbk-auth-forms form { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } body.mbk-account-page .mbk-auth-forms .form-row, body.mbk-account-page .mbk-auth-forms .woocommerce-form-row { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } body.mbk-account-page .mbk-auth-forms input.input-text { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* ---------------------------------------------------------- LOGIN ACTIONS ---------------------------------------------------------- */ body.mbk-account-page .woocommerce-form-login .form-row:last-of-type { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px !important; } body.mbk-account-page .woocommerce-form-login__submit { flex: 0 0 auto !important; } /* ---------------------------------------------------------- BENEFITS / TRUST AREA ---------------------------------------------------------- */ body.mbk-account-page .mbk-auth-benefits { position: relative !important; min-width: 0 !important; overflow: hidden !important; } body.mbk-account-page .mbk-auth-benefits-footer { position: relative !important; width: 100% !important; margin: 0 !important; padding: 16px 24px !important; box-sizing: border-box !important; overflow: hidden !important; } body.mbk-account-page .mbk-auth-benefits-footer > * { max-width: 100% !important; box-sizing: border-box !important; } /* ---------------------------------------------------------- DESKTOP RIGHT PANEL ---------------------------------------------------------- */ @media (min-width: 901px) { body.mbk-account-page .mbk-auth-forms { padding: 46px 48px 30px !important; } body.mbk-account-page .mbk-auth-switch { align-self: flex-start !important; } } /* ---------------------------------------------------------- MOBILE ---------------------------------------------------------- */ @media (max-width: 900px) { body.mbk-account-page .mbk-auth-switch { max-width: 100% !important; } body.mbk-account-page .mbk-auth-switch button { font-size: 13px !important; } body.mbk-account-page .mbk-auth-benefits-footer { padding: 14px 18px !important; } } /* ---------------------------------------------------------- SMALL MOBILE ---------------------------------------------------------- */ @media (max-width: 480px) { body.mbk-account-page .mbk-auth-switch { width: 100% !important; } body.mbk-account-page .mbk-auth-switch button { padding: 10px 8px !important; font-size: 12px !important; } } /* * ========================================================== * V3.8.11 — DEDICATED AUTHENTICATION EXPERIENCE * ========================================================== */ /* ========================================================== 1. REMOVE STOREFRONT HEADER + FOOTER ========================================================== */ body.mbk-auth-screen .elementor-location-header, body.mbk-auth-screen .elementor-location-footer, body.mbk-auth-screen .site-header, body.mbk-auth-screen .site-footer { display: none !important; } /* * Prevent Elementor/theme spacing that was created for * the normal storefront header/footer. */ body.mbk-auth-screen { padding-top: 0 !important; } body.mbk-auth-screen .site-main, body.mbk-auth-screen #primary, body.mbk-auth-screen .elementor-location-single, body.mbk-auth-screen .woocommerce { margin-top: 0 !important; padding-top: 0 !important; } /* ========================================================== 2. AUTH PAGE SHOULD OWN THE ENTIRE VIEW ========================================================== */ body.mbk-auth-screen .mbk-account-shell { min-height: 100vh !important; width: 100% !important; margin: 0 !important; padding: 32px 24px 48px !important; box-sizing: border-box !important; display: flex !important; align-items: flex-start !important; justify-content: center !important; } /* ========================================================== 3. DESKTOP AUTH CARD ========================================================== */ @media (min-width: 901px) { body.mbk-auth-screen .mbk-auth-page { width: 100% !important; max-width: 1180px !important; margin: 0 auto !important; } body.mbk-auth-screen .mbk-auth-card { width: 100% !important; box-sizing: border-box !important; } } /* ========================================================== 4. AUTH SWITCH — TRUE TWO-COLUMN CONTROL ========================================================== */ body.mbk-account-page .mbk-auth-switch { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; width: 100% !important; max-width: 360px !important; min-width: 0 !important; box-sizing: border-box !important; padding: 4px !important; margin: 0 0 32px 0 !important; overflow: visible !important; border-radius: 13px !important; } body.mbk-account-page .mbk-auth-switch button { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 11px 12px !important; box-sizing: border-box !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; flex: none !important; } /* ========================================================== 5. RIGHT AUTH PANEL MUST NOT CLIP THE SWITCH ========================================================== */ body.mbk-account-page .mbk-auth-forms { overflow: visible !important; min-width: 0 !important; box-sizing: border-box !important; } /* ========================================================== 6. LOST PASSWORD PAGE ========================================================== */ body.mbk-lost-password-screen .mbk-account-shell { align-items: flex-start !important; } body.mbk-lost-password-screen .mbk-auth-lost-password { max-width: 620px !important; margin: 40px auto 0 !important; border-radius: 24px !important; box-sizing: border-box !important; } body.mbk-lost-password-screen .mbk-auth-lost-password .mbk-auth-forms { width: 100% !important; padding: 48px !important; box-sizing: border-box !important; } /* * WooCommerce lost-password form. */ body.mbk-lost-password-screen .woocommerce-ResetPassword { width: 100% !important; max-width: 100% !important; margin: 0 !important; } body.mbk-lost-password-screen .woocommerce-ResetPassword .form-row { width: 100% !important; box-sizing: border-box !important; } body.mbk-lost-password-screen .woocommerce-ResetPassword input.input-text { width: 100% !important; min-height: 50px !important; box-sizing: border-box !important; } /* ========================================================== 7. MOBILE — PRESERVE CURRENT GOOD EXPERIENCE ========================================================== */ @media (max-width: 900px) { body.mbk-auth-screen .mbk-account-shell { min-height: 100vh !important; padding: 12px 10px 28px !important; } body.mbk-account-page .mbk-auth-switch { width: 100% !important; max-width: 100% !important; } body.mbk-lost-password-screen .mbk-auth-lost-password { width: 100% !important; margin: 12px auto 0 !important; } body.mbk-lost-password-screen .mbk-auth-lost-password .mbk-auth-forms { padding: 28px 20px !important; } } /* ========================================================== 8. VERY SMALL MOBILE ========================================================== */ @media (max-width: 480px) { body.mbk-account-page .mbk-auth-switch button { padding: 10px 8px !important; font-size: 12px !important; } } /* * ========================================================== * V3.8.12.2 — DESKTOP AUTH SWITCH FINAL OVERRIDE * ========================================================== * * Purpose: * - Restore the complete two-button auth switch on desktop. * - Prevent the second button from being pushed outside * the authentication card. * - Preserve the existing mobile implementation. * ========================================================== */ /* ---------------------------------------------------------- DESKTOP ONLY ---------------------------------------------------------- */ @media (min-width: 901px) { body.mbk-account-page .mbk-auth-card .mbk-auth-switch { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-auto-flow: column !important; width: 360px !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; margin: 0 0 32px 0 !important; padding: 4px !important; box-sizing: border-box !important; position: static !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; overflow: hidden !important; flex: none !important; align-self: flex-start !important; } body.mbk-account-page .mbk-auth-card .mbk-auth-switch > button { display: flex !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: auto !important; min-height: 42px !important; margin: 0 !important; padding: 0 12px !important; box-sizing: border-box !important; position: static !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; flex: none !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: clip !important; border: 0 !important; border-radius: 10px !important; cursor: pointer !important; } body.mbk-account-page .mbk-auth-card .mbk-auth-switch > button[data-mbk-auth-tab="login"] { grid-column: 1 !important; } body.mbk-account-page .mbk-auth-card .mbk-auth-switch > button[data-mbk-auth-tab="register"] { grid-column: 2 !important; } } /* * ---------------------------------------------------------- * HARD RESET POSSIBLE WOOCOMMERCE/THEME BUTTON WIDTHS * ---------------------------------------------------------- */ @media (min-width: 901px) { body.mbk-account-page .mbk-auth-switch button[data-mbk-auth-tab] { float: none !important; margin-left: 0 !important; margin-right: 0 !important; box-shadow: none; } body.mbk-account-page .mbk-auth-switch button[data-mbk-auth-tab].is-active { box-shadow: 0 3px 12px rgba(0,0,0,.08) !important; } } /* * ---------------------------------------------------------- * IMPORTANT: * Do not alter the existing mobile auth switch. * ---------------------------------------------------------- */ /* * ========================================================== * V3.8.12.3 — DESKTOP AUTH SWITCH UI FIX * ========================================================== * * Desktop target: * * ┌──────────────────────────────────────────────┐ * │ Se connecter | Créer un compte │ * └──────────────────────────────────────────────┘ * * The switch must: * * - remain inside the right authentication panel * - use the complete available content width * - contain two equal buttons * - stay in normal document flow * - never overflow horizontally * - never be positioned independently * * Mobile is intentionally untouched. * ========================================================== */ @media (min-width: 901px) { /* ------------------------------------------------------ AUTH CARD ------------------------------------------------------ */ body.mbk-account-page .mbk-auth-card { min-width: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } /* ------------------------------------------------------ RIGHT-SIDE AUTH CONTENT ------------------------------------------------------ */ body.mbk-account-page .mbk-auth-card .mbk-auth-forms { width: 100% !important; max-width: 620px !important; min-width: 0 !important; box-sizing: border-box !important; overflow: visible !important; } /* ------------------------------------------------------ AUTH SWITCH ------------------------------------------------------ */ body.mbk-account-page .mbk-auth-card .mbk-auth-switch { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-rows: 1fr !important; grid-auto-flow: unset !important; align-items: stretch !important; justify-items: stretch !important; align-self: stretch !important; width: 100% !important; max-width: 620px !important; min-width: 0 !important; height: auto !important; margin: 0 0 38px 0 !important; padding: 4px !important; box-sizing: border-box !important; position: static !important; inset: auto !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; overflow: hidden !important; border-radius: 14px !important; } /* ------------------------------------------------------ BOTH SWITCH BUTTONS ------------------------------------------------------ */ body.mbk-account-page .mbk-auth-card .mbk-auth-switch button { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 50px !important; min-height: 50px !important; margin: 0 !important; padding: 0 18px !important; box-sizing: border-box !important; border: 0 !important; border-radius: 11px !important; background: transparent !important; color: #66736c !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; position: static !important; inset: auto !important; transform: none !important; flex: none !important; cursor: pointer !important; } /* ------------------------------------------------------ ACTIVE BUTTON ------------------------------------------------------ */ body.mbk-account-page .mbk-auth-card .mbk-auth-switch button.is-active { background: #ffffff !important; color: #17241d !important; box-shadow: 0 3px 12px rgba(0,0,0,.08) !important; } /* ------------------------------------------------------ HOVER ------------------------------------------------------ */ body.mbk-account-page .mbk-auth-card .mbk-auth-switch button:not(.is-active):hover { background: rgba(255,255,255,.55) !important; color: #17241d !important; } /* ------------------------------------------------------ FORM CONTENT MUST START BELOW SWITCH ------------------------------------------------------ */ body.mbk-account-page .mbk-auth-card .mbk-auth-forms #customer_login { width: 100% !important; max-width: 620px !important; min-width: 0 !important; margin: 0 !important; box-sizing: border-box !important; } } /* * ========================================================== * V3.8.12.4 — DESKTOP AUTH CARD FLOW FIX * ========================================================== * * ROOT CAUSE: * The desktop auth card is allowing the auth switch to * participate in an incorrect horizontal layout. * * FIX: * Make the authentication card a normal vertical flow. * * Required desktop structure: * * MON ESPACE * Bon retour * Connectez-vous... * * ┌────────────────────────────────────┐ * │ Se connecter | Créer un compte │ * └────────────────────────────────────┘ * * Se connecter * Identifiant... * * Mobile remains untouched. * ========================================================== */ @media (min-width: 901px) { /* ====================================================== 1. AUTH CARD — FORCE VERTICAL DOCUMENT FLOW ====================================================== */ body.mbk-account-page .mbk-auth-card { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; min-width: 0 !important; width: 100% !important; max-width: none !important; box-sizing: border-box !important; position: relative !important; overflow: hidden !important; } /* ====================================================== 2. HEADING — NORMAL FLOW ====================================================== */ body.mbk-account-page .mbk-auth-card .mbk-auth-heading { display: block !important; position: static !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 0 22px 0 !important; padding: 0 !important; box-sizing: border-box !important; transform: none !important; } /* ====================================================== 3. AUTH SWITCH — DIRECTLY BELOW HEADING ====================================================== */ body.mbk-account-page .mbk-auth-card .mbk-auth-switch { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-rows: auto !important; grid-auto-flow: row !important; position: static !important; inset: auto !important; transform: none !important; float: none !important; clear: both !important; align-self: flex-start !important; justify-self: auto !important; order: 0 !important; flex: 0 0 auto !important; width: 360px !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; margin: 0 0 32px 0 !important; padding: 4px !important; box-sizing: border-box !important; overflow: hidden !important; border-radius: 13px !important; } /* ====================================================== 4. BOTH BUTTONS — EQUAL COLUMNS ====================================================== */ body.mbk-account-page .mbk-auth-card .mbk-auth-switch button { display: flex !important; align-items: center !important; justify-content: center !important; position: static !important; inset: auto !important; float: none !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: auto !important; min-height: 42px !important; margin: 0 !important; padding: 10px 12px !important; box-sizing: border-box !important; flex: none !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: clip !important; border: 0 !important; border-radius: 10px !important; cursor: pointer !important; transform: none !important; } /* ====================================================== 5. AUTH FORMS — ALSO NORMAL FLOW ====================================================== */ body.mbk-account-page .mbk-auth-card .mbk-auth-forms { display: block !important; position: static !important; order: 0 !important; flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; box-sizing: border-box !important; transform: none !important; } /* ====================================================== 6. CARD FOOTER — NORMAL FLOW ====================================================== */ body.mbk-account-page .mbk-auth-card .mbk-auth-card-footer { position: static !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin-top: 38px !important; transform: none !important; } } /* * ========================================================== * V3.8.12.4 — ACTIVE TAB * ========================================================== */ @media (min-width: 901px) { body.mbk-account-page .mbk-auth-card .mbk-auth-switch button.is-active { background: #ffffff !important; color: #17241d !important; box-shadow: 0 3px 12px rgba(0,0,0,.08) !important; } } /* * ========================================================== * V3.8.12.4 — REGISTER STATE * ========================================================== */ @media (min-width: 901px) { body.mbk-account-page .mbk-auth-forms #customer_login.mbk-show-register .u-column2 { display: block !important; } body.mbk-account-page .mbk-auth-forms #customer_login.mbk-show-register .u-column1 { display: none !important; } } /* * ========================================================== * V3.8.13 — REGISTRATION STATE * ========================================================== */ /* ---------------------------------------------------------- ACCESSIBILITY STATE ---------------------------------------------------------- */ body.mbk-account-page .mbk-auth-switch button[aria-selected="true"] { background: #ffffff !important; color: #17241d !important; box-shadow: 0 3px 12px rgba(0,0,0,.08) !important; } /* ---------------------------------------------------------- REGISTRATION FORM ---------------------------------------------------------- */ body.mbk-account-page .mbk-auth-forms #customer_login.mbk-show-register .u-column2 { display: block !important; } body.mbk-account-page .mbk-auth-forms #customer_login.mbk-show-register .u-column1 { display: none !important; } /* ---------------------------------------------------------- LOGIN FORM ---------------------------------------------------------- */ body.mbk-account-page .mbk-auth-forms #customer_login:not(.mbk-show-register) .u-column1 { display: block !important; } body.mbk-account-page .mbk-auth-forms #customer_login:not(.mbk-show-register) .u-column2 { display: none !important; } /* ---------------------------------------------------------- REGISTER HEADING ---------------------------------------------------------- */ body.mbk-account-page .mbk-auth-forms #customer_login.mbk-show-register .u-column2 > h2 { margin-bottom: 20px !important; } /* ---------------------------------------------------------- REGISTER PRIVACY TEXT ---------------------------------------------------------- */ body.mbk-account-page .mbk-auth-forms .woocommerce-privacy-policy-text { margin: 18px 0 !important; color: #718077 !important; font-size: 11px !important; line-height: 1.65 !important; } body.mbk-account-page .mbk-auth-forms .woocommerce-privacy-policy-text a { color: #17844b !important; font-weight: 800 !important; } /* ---------------------------------------------------------- REGISTRATION SUBMIT ---------------------------------------------------------- */ body.mbk-account-page .mbk-auth-forms .woocommerce-form-register .woocommerce-form-register__submit { width: 100% !important; margin-top: 4px !important; } /* ---------------------------------------------------------- REGISTER EXPLANATION ---------------------------------------------------------- */ body.mbk-account-page .mbk-auth-forms .woocommerce-form-register > p:not(.woocommerce-form-row):not(.form-row) { color: #718077 !important; font-size: 12px !important; line-height: 1.6 !important; } /* ---------------------------------------------------------- MOBILE — PRESERVE EXISTING EXPERIENCE ---------------------------------------------------------- */ @media (max-width: 900px) { body.mbk-account-page .mbk-auth-forms #customer_login.mbk-show-register .u-column2 { width: 100% !important; } } /* * ========================================================== * V3.8.14 — MERCI BOKKU PASSWORD RECOVERY EXPERIENCE * ========================================================== * * Uses the same visual language as login / registration. * Mobile inherits the existing responsive authentication * experience. * ========================================================== */ /* ========================================================== LOST PASSWORD — DESKTOP ========================================================== */ @media (min-width: 901px) { body.mbk-lost-password-screen .mbk-auth-layout { width: min(100%, 1180px) !important; display: grid !important; grid-template-columns: minmax(390px, .82fr) minmax(500px, 1.18fr) !important; min-height: 650px !important; overflow: hidden !important; border-radius: 28px !important; background: #fff !important; box-shadow: 0 25px 80px rgba(20,50,35,.12) !important; border: 1px solid rgba(25,60,45,.08) !important; } body.mbk-lost-password-screen .mbk-auth-lost-password { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; min-width: 0 !important; width: 100% !important; min-height: 650px !important; padding: 48px 52px 34px !important; box-sizing: border-box !important; overflow: hidden !important; } body.mbk-lost-password-screen .mbk-auth-lost-password .mbk-auth-heading { width: 100% !important; max-width: 620px !important; margin: 0 0 34px !important; } body.mbk-lost-password-screen .mbk-auth-lost-password .mbk-auth-heading h2 { margin: 8px 0 10px !important; font-size: 32px !important; line-height: 1.08 !important; } body.mbk-lost-password-screen .mbk-auth-lost-password .mbk-auth-heading p { margin: 0 !important; color: #758079 !important; font-size: 13px !important; line-height: 1.6 !important; } body.mbk-lost-password-screen .mbk-auth-lost-password .mbk-auth-forms { width: 100% !important; max-width: 620px !important; min-width: 0 !important; padding: 0 !important; box-sizing: border-box !important; } body.mbk-lost-password-screen .woocommerce-ResetPassword { width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } body.mbk-lost-password-screen .woocommerce-ResetPassword > p:first-child { margin: 0 0 24px !important; color: #68756e !important; font-size: 13px !important; line-height: 1.65 !important; } body.mbk-lost-password-screen .woocommerce-ResetPassword .form-row { width: 100% !important; margin: 0 0 20px !important; padding: 0 !important; } body.mbk-lost-password-screen .woocommerce-ResetPassword label { display: block !important; margin: 0 0 7px !important; color: #26332c !important; font-size: 12px !important; font-weight: 800 !important; } body.mbk-lost-password-screen .woocommerce-ResetPassword input.input-text { width: 100% !important; min-height: 54px !important; padding: 0 15px !important; box-sizing: border-box !important; border: 1px solid #dce5df !important; border-radius: 12px !important; background: #fff !important; color: #17241d !important; font-size: 14px !important; outline: none !important; } body.mbk-lost-password-screen .woocommerce-ResetPassword input.input-text:focus { border-color: #f58220 !important; box-shadow: 0 0 0 4px rgba(245,130,32,.10) !important; } body.mbk-lost-password-screen .woocommerce-ResetPassword button.button { width: 100% !important; min-height: 54px !important; padding: 0 24px !important; border: 0 !important; border-radius: 12px !important; background: #f58220 !important; color: #fff !important; font-size: 14px !important; font-weight: 900 !important; cursor: pointer !important; } body.mbk-lost-password-screen .woocommerce-ResetPassword button.button:hover { background: #dc6f12 !important; } body.mbk-lost-password-screen .mbk-auth-lost-password-return { width: 100% !important; max-width: 620px !important; margin: 22px 0 0 !important; } body.mbk-lost-password-screen .mbk-auth-lost-password-return a { color: #17844b !important; font-size: 12px !important; font-weight: 800 !important; text-decoration: none !important; } body.mbk-lost-password-screen .mbk-auth-lost-password-return a:hover { text-decoration: underline !important; } body.mbk-lost-password-screen .mbk-auth-lost-password .mbk-auth-card-footer { margin-top: auto !important; } } /* ========================================================== LOST PASSWORD — MOBILE ========================================================== */ @media (max-width: 900px) { body.mbk-lost-password-screen .mbk-auth-layout { display: block !important; width: 100% !important; min-height: auto !important; } body.mbk-lost-password-screen .mbk-auth-visual { display: none !important; } body.mbk-lost-password-screen .mbk-auth-lost-password { width: 100% !important; min-height: auto !important; padding: 28px 20px 24px !important; box-sizing: border-box !important; } body.mbk-lost-password-screen .mbk-auth-lost-password .mbk-auth-heading h2 { font-size: 25px !important; line-height: 1.12 !important; } body.mbk-lost-password-screen .mbk-auth-lost-password .mbk-auth-heading p { font-size: 12px !important; } body.mbk-lost-password-screen .woocommerce-ResetPassword { width: 100% !important; } body.mbk-lost-password-screen .woocommerce-ResetPassword input.input-text { min-height: 52px !important; } body.mbk-lost-password-screen .woocommerce-ResetPassword button.button { width: 100% !important; min-height: 52px !important; } body.mbk-lost-password-screen .mbk-auth-lost-password-return { margin: 18px 0 0 !important; text-align: center !important; } body.mbk-lost-password-screen .mbk-auth-card-footer { justify-content: center !important; text-align: center !important; gap: 7px 14px !important; margin-top: 28px !important; } } @media (max-width: 480px) { body.mbk-lost-password-screen .mbk-auth-lost-password { padding: 22px 16px 18px !important; } body.mbk-lost-password-screen .mbk-auth-lost-password .mbk-auth-heading h2 { font-size: 22px !important; } } /* * ========================================================== * V3.8.14 MARKER * ========================================================== */ /* * ========================================================== * V3.8.23 — PASSWORD RESET SUCCESS EXPERIENCE * ========================================================== */ body.mbk-lost-password-screen .mbk-reset-success { width:100%; max-width:560px; margin:0 auto; padding:44px 42px 42px; box-sizing:border-box; text-align:center; background:#ffffff; border:1px solid #e6ece8; border-radius:24px; box-shadow: 0 24px 70px rgba(23,37,31,.08); } body.mbk-lost-password-screen .mbk-reset-success-icon { width:64px; height:64px; margin:0 auto 22px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#eef8ef; color:#72a82d; font-family:Arial,Helvetica,sans-serif; font-size:30px; font-weight:800; line-height:1; } body.mbk-lost-password-screen .mbk-reset-success-kicker { display:block; margin:0 0 10px; color:#f58220; font-size:12px; line-height:1.4; font-weight:800; letter-spacing:1.8px; text-transform:uppercase; } body.mbk-lost-password-screen .mbk-reset-success h2 { margin:0 0 16px; color:#17251f; font-size:30px; line-height:1.18; font-weight:800; letter-spacing:-.6px; } body.mbk-lost-password-screen .mbk-reset-success-lead { margin:0 auto 24px; max-width:470px; color:#596a62; font-size:16px; line-height:1.7; } body.mbk-lost-password-screen .mbk-reset-success-note { display:flex; flex-direction:column; gap:5px; margin:0 0 18px; padding:18px 20px; text-align:left; background:#f5f8f6; border:1px solid #e3ebe6; border-radius:14px; } body.mbk-lost-password-screen .mbk-reset-success-note strong { color:#17251f; font-size:14px; line-height:1.4; } body.mbk-lost-password-screen .mbk-reset-success-note span { color:#687870; font-size:14px; line-height:1.55; } body.mbk-lost-password-screen .mbk-reset-success-wait { margin:0 0 28px; color:#687870; font-size:14px; line-height:1.6; } body.mbk-lost-password-screen .mbk-reset-success-wait strong { color:#17251f; } body.mbk-lost-password-screen .mbk-reset-success-button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 28px; border-radius:12px; background:#f58220; color:#ffffff !important; font-size:15px; font-weight:800; line-height:1; text-decoration:none !important; transition: transform .18s ease, box-shadow .18s ease; } body.mbk-lost-password-screen .mbk-reset-success-button:hover { color:#ffffff !important; transform:translateY(-1px); box-shadow: 0 10px 24px rgba(245,130,32,.22); } /* * Hide WooCommerce's default success-message * presentation when our branded message is used. */ body.mbk-lost-password-screen .woocommerce-notices-wrapper .woocommerce-message:has(+ .mbk-reset-success) { display:none; } @media (max-width:767px) { body.mbk-lost-password-screen .mbk-reset-success { max-width:none; padding:34px 24px 32px; border-radius:20px; } body.mbk-lost-password-screen .mbk-reset-success h2 { font-size:26px; } body.mbk-lost-password-screen .mbk-reset-success-lead { font-size:15px; } body.mbk-lost-password-screen .mbk-reset-success-button { width:100%; box-sizing:border-box; } } /* * ========================================================== * V3.8.24 — REAL PASSWORD RESET SUCCESS STATE * ========================================================== */ /* * ---------------------------------------------------------- * SUCCESS NOTICE CONTAINER * ---------------------------------------------------------- */ body.mbk-lost-password-screen.mbk-password-reset-success .woocommerce-notices-wrapper .woocommerce-message { padding:0 !important; margin:0 0 30px !important; border:0 !important; background:transparent !important; box-shadow:none !important; color:inherit !important; } /* * Remove WooCommerce's default success icon/pseudo-element. */ body.mbk-lost-password-screen.mbk-password-reset-success .woocommerce-notices-wrapper .woocommerce-message::before { display:none !important; content:none !important; } /* * ---------------------------------------------------------- * SUCCESS CARD * ---------------------------------------------------------- */ body.mbk-lost-password-screen.mbk-password-reset-success .mbk-reset-success-content { width:100%; max-width:560px; margin:0 auto; padding:42px 40px; box-sizing:border-box; text-align:center; background:#ffffff; border:1px solid #e5ece8; border-radius:24px; box-shadow: 0 20px 60px rgba(23,37,31,.08); } /* * ---------------------------------------------------------- * SUCCESS ICON * ---------------------------------------------------------- */ body.mbk-lost-password-screen.mbk-password-reset-success .mbk-reset-success-icon { width:64px; height:64px; margin:0 auto 20px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#eef8ef; color:#72a82d; font-family:Arial,Helvetica,sans-serif; font-size:30px; font-weight:800; line-height:1; } /* * ---------------------------------------------------------- * KICKER * ---------------------------------------------------------- */ body.mbk-lost-password-screen.mbk-password-reset-success .mbk-reset-success-kicker { display:block; margin:0 0 10px; color:#f58220; font-size:12px; line-height:1.4; font-weight:800; letter-spacing:1.8px; text-transform:uppercase; } /* * ---------------------------------------------------------- * TITLE * ---------------------------------------------------------- */ body.mbk-lost-password-screen.mbk-password-reset-success .mbk-reset-success-content h2 { margin:0 0 16px; color:#17251f; font-size:30px; line-height:1.2; font-weight:800; letter-spacing:-.5px; } /* * ---------------------------------------------------------- * LEAD * ---------------------------------------------------------- */ body.mbk-lost-password-screen.mbk-password-reset-success .mbk-reset-success-lead { max-width:470px; margin:0 auto 24px; color:#596a62; font-size:16px; line-height:1.7; } /* * ---------------------------------------------------------- * INFO BOX * ---------------------------------------------------------- */ body.mbk-lost-password-screen.mbk-password-reset-success .mbk-reset-success-note { display:flex; flex-direction:column; gap:5px; margin:0 0 18px; padding:18px 20px; text-align:left; background:#f5f8f6; border:1px solid #e3ebe6; border-radius:14px; } body.mbk-lost-password-screen.mbk-password-reset-success .mbk-reset-success-note strong { color:#17251f; font-size:14px; line-height:1.4; } body.mbk-lost-password-screen.mbk-password-reset-success .mbk-reset-success-note span { color:#687870; font-size:14px; line-height:1.55; } /* * ---------------------------------------------------------- * WAIT MESSAGE * ---------------------------------------------------------- */ body.mbk-lost-password-screen.mbk-password-reset-success .mbk-reset-success-wait { margin:0 0 28px; color:#687870; font-size:14px; line-height:1.6; } body.mbk-lost-password-screen.mbk-password-reset-success .mbk-reset-success-wait strong { color:#17251f; } /* * ---------------------------------------------------------- * RETURN BUTTON * ---------------------------------------------------------- */ body.mbk-lost-password-screen.mbk-password-reset-success .mbk-reset-success-button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 28px; border-radius:12px; background:#f58220; color:#ffffff !important; font-size:15px; font-weight:800; line-height:1; text-decoration:none !important; box-shadow:none; transition: transform .18s ease, box-shadow .18s ease; } body.mbk-lost-password-screen.mbk-password-reset-success .mbk-reset-success-button:hover { color:#ffffff !important; transform:translateY(-1px); box-shadow: 0 10px 24px rgba(245,130,32,.22); } /* * ---------------------------------------------------------- * HIDE THE RESET FORM ONLY AFTER SUCCESS * ---------------------------------------------------------- */ body.mbk-lost-password-screen.mbk-password-reset-success .woocommerce-ResetPassword { display:none !important; } /* * Also remove the return/footer elements belonging * to the form because the success card has its own CTA. */ body.mbk-lost-password-screen.mbk-password-reset-success .mbk-auth-lost-password-return, body.mbk-lost-password-screen.mbk-password-reset-success .mbk-auth-card-footer { display:none !important; } /* * ---------------------------------------------------------- * MOBILE * ---------------------------------------------------------- */ @media (max-width:767px) { body.mbk-lost-password-screen.mbk-password-reset-success .mbk-reset-success-content { padding:34px 24px; border-radius:20px; } body.mbk-lost-password-screen.mbk-password-reset-success .mbk-reset-success-content h2 { font-size:26px; } body.mbk-lost-password-screen.mbk-password-reset-success .mbk-reset-success-lead { font-size:15px; } body.mbk-lost-password-screen.mbk-password-reset-success .mbk-reset-success-button { width:100%; box-sizing:border-box; } } /* * ========================================================== * V3.9.0 — MERCI BOKKU CUSTOMER DASHBOARD * ========================================================== */ body.mbk-account-page { --mbk-green: #16834a; --mbk-green-dark: #0d5c35; --mbk-green-soft: #eaf7ef; --mbk-orange: #f28a18; --mbk-orange-soft: #fff2e3; --mbk-pink-soft: #fff0f1; --mbk-ink: #173127; --mbk-muted: #72817a; --mbk-border: #e7ece9; --mbk-bg: #f7faf8; } .mbk-account-dashboard { width: 100%; background: var(--mbk-bg); color: var(--mbk-ink); min-height: 700px; } .mbk-dashboard-shell { width: 100%; max-width: 1540px; margin: 0 auto; display: grid; grid-template-columns: 265px minmax(0, 1fr); min-height: 720px; } .mbk-dashboard-sidebar { background: #fff; border-right: 1px solid var(--mbk-border); padding: 28px 18px; display: flex; flex-direction: column; box-sizing: border-box; } .mbk-dashboard-profile { display: flex; align-items: center; gap: 12px; padding: 4px 8px 24px; border-bottom: 1px solid var(--mbk-border); } .mbk-dashboard-avatar, .mbk-dashboard-avatar img { width: 52px; height: 52px; border-radius: 50%; } .mbk-dashboard-avatar { flex: 0 0 52px; overflow: hidden; background: var(--mbk-green-soft); } .mbk-dashboard-avatar-image { display: block; object-fit: cover; } .mbk-dashboard-profile-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .mbk-dashboard-profile-copy strong { font-size: 14px; color: var(--mbk-ink); } .mbk-dashboard-profile-copy small { color: var(--mbk-muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; } .mbk-dashboard-profile-copy span { display: inline-flex; align-self: flex-start; margin-top: 5px; padding: 4px 7px; border-radius: 999px; background: var(--mbk-green-soft); color: var(--mbk-green-dark); font-size: 9px; font-weight: 700; } .mbk-dashboard-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 22px; } .mbk-dashboard-nav-item { display: flex; align-items: center; gap: 11px; min-height: 43px; padding: 0 11px; border-radius: 11px; color: #53625b; text-decoration: none !important; font-size: 13px; font-weight: 600; transition: .2s ease; } .mbk-dashboard-nav-item:hover, .mbk-dashboard-nav-item.is-active { background: var(--mbk-green-soft); color: var(--mbk-green-dark); } .mbk-dashboard-nav-icon { width: 22px; text-align: center; font-size: 17px; } .mbk-dashboard-nav-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; justify-content: center; align-items: center; border-radius: 999px; background: var(--mbk-orange); color: #fff; font-size: 10px; } .mbk-dashboard-sidebar-footer { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--mbk-border); display: grid; gap: 5px; } .mbk-dashboard-help, .mbk-dashboard-logout { min-height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 11px; border-radius: 10px; text-decoration: none !important; font-size: 12px; font-weight: 600; } .mbk-dashboard-help { color: var(--mbk-green-dark); } .mbk-dashboard-logout { color: #d45a4d; } .mbk-dashboard-main { min-width: 0; } .mbk-dashboard-topbar { height: 76px; padding: 0 30px; display: flex; align-items: center; gap: 20px; background: #fff; border-bottom: 1px solid var(--mbk-border); box-sizing: border-box; } .mbk-dashboard-mobile-brand { display: none; } .mbk-dashboard-search { flex: 1; max-width: 620px; height: 42px; display: flex; align-items: center; gap: 9px; padding: 0 14px; background: #f7f9f8; border: 1px solid var(--mbk-border); border-radius: 12px; } .mbk-dashboard-search span { color: var(--mbk-muted); font-size: 20px; } .mbk-dashboard-search input { width: 100%; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 12px; color: var(--mbk-ink); } .mbk-dashboard-top-actions { margin-left: auto; display: flex; align-items: center; gap: 7px; } .mbk-dashboard-top-actions a, .mbk-dashboard-top-actions button { position: relative; width: 39px; height: 39px; border: 0; border-radius: 10px; background: transparent; display: inline-flex; justify-content: center; align-items: center; color: var(--mbk-ink); text-decoration: none !important; cursor: pointer; } .mbk-dashboard-top-actions a:hover, .mbk-dashboard-top-actions button:hover { background: var(--mbk-green-soft); } .mbk-dashboard-top-actions b { position: absolute; top: 2px; right: 1px; min-width: 15px; height: 15px; padding: 0 3px; display: inline-flex; justify-content: center; align-items: center; border-radius: 999px; background: var(--mbk-orange); color: #fff; font-size: 8px; } .mbk-dashboard-top-user { display: flex; align-items: center; gap: 9px; color: var(--mbk-ink); text-decoration: none !important; font-size: 12px; font-weight: 700; } .mbk-dashboard-top-user img { width: 38px; height: 38px; border-radius: 50%; } .mbk-dashboard-top-user small { color: var(--mbk-muted); } .mbk-dashboard-content { padding: 32px; } .mbk-dashboard-welcome { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin-bottom: 25px; } .mbk-account-eyebrow { margin: 0 0 8px; color: var(--mbk-green); font-size: 10px; font-weight: 800; letter-spacing: .14em; } .mbk-dashboard-welcome h1 { margin: 0; color: var(--mbk-ink); font-size: clamp(26px, 3vw, 38px); line-height: 1.1; } .mbk-dashboard-welcome p { margin: 8px 0 0; color: var(--mbk-muted); font-size: 13px; } .mbk-dashboard-member-summary { min-width: 340px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--mbk-border); border: 1px solid var(--mbk-border); border-radius: 15px; overflow: hidden; } .mbk-dashboard-member-summary > div { padding: 14px 16px; background: #fff; } .mbk-dashboard-member-summary small { display: block; margin-bottom: 4px; color: var(--mbk-muted); font-size: 10px; } .mbk-dashboard-member-summary strong { font-size: 14px; } .mbk-orange-text { color: var(--mbk-orange); } .mbk-dashboard-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; } .mbk-dashboard-kpi { min-height: 116px; padding: 18px; display: flex; align-items: center; gap: 13px; border: 1px solid var(--mbk-border); border-radius: 16px; background: #fff; text-decoration: none !important; box-shadow: 0 5px 22px rgba(20,50,35,.035); box-sizing: border-box; } .mbk-dashboard-kpi-icon { width: 48px; height: 48px; flex: 0 0 48px; display: flex; align-items: center; justify-content: center; border-radius: 14px; font-size: 21px; } .kpi-green .mbk-dashboard-kpi-icon { background: var(--mbk-green-soft); color: var(--mbk-green); } .kpi-orange .mbk-dashboard-kpi-icon { background: var(--mbk-orange-soft); color: var(--mbk-orange); } .kpi-pink .mbk-dashboard-kpi-icon { background: var(--mbk-pink-soft); color: #d95b67; } .mbk-dashboard-kpi div { min-width: 0; display: flex; flex-direction: column; } .mbk-dashboard-kpi small { color: var(--mbk-muted); font-size: 10px; } .mbk-dashboard-kpi strong { margin: 2px 0; color: var(--mbk-ink); font-size: 25px; } .mbk-dashboard-kpi em { color: var(--mbk-green); font-style: normal; font-size: 10px; font-weight: 700; } .mbk-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr); gap: 18px; } .mbk-dashboard-panel { background: #fff; border: 1px solid var(--mbk-border); border-radius: 17px; box-shadow: 0 5px 22px rgba(20,50,35,.035); } .mbk-dashboard-panel-head { padding: 19px 20px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--mbk-border); } .mbk-dashboard-panel-head h2 { margin: 0; color: var(--mbk-ink); font-size: 16px; } .mbk-dashboard-panel-head a { color: var(--mbk-green); font-size: 11px; font-weight: 700; text-decoration: none !important; } .mbk-dashboard-order { min-height: 76px; padding: 12px 20px; display: grid; grid-template-columns: 48px minmax(120px, 1fr) auto auto auto; align-items: center; gap: 13px; border-bottom: 1px solid #f0f3f1; } .mbk-dashboard-order:last-child { border-bottom: 0; } .mbk-dashboard-order-thumb { width: 48px; height: 48px; display: flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 11px; background: #f4f7f5; } .mbk-dashboard-order-thumb img { width: 100%; height: 100%; object-fit: cover; } .mbk-dashboard-order-thumb span { color: var(--mbk-green); font-weight: 800; } .mbk-dashboard-order-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .mbk-dashboard-order-info strong { color: var(--mbk-ink); font-size: 12px; } .mbk-dashboard-order-info small { color: var(--mbk-muted); font-size: 10px; } .mbk-dashboard-status { padding: 5px 8px; border-radius: 999px; font-size: 9px; font-weight: 700; white-space: nowrap; } .mbk-dashboard-status.is-success { background: var(--mbk-green-soft); color: var(--mbk-green-dark); } .mbk-dashboard-status.is-warning { background: var(--mbk-orange-soft); color: #b76405; } .mbk-dashboard-status.is-danger { background: #fff0f1; color: #c34e5a; } .mbk-dashboard-status.is-muted { background: #f1f3f2; color: #65706b; } .mbk-dashboard-order-total { color: var(--mbk-ink); font-size: 11px; white-space: nowrap; } .mbk-dashboard-order-action { color: var(--mbk-green); font-size: 10px; font-weight: 700; white-space: nowrap; text-decoration: none !important; } .mbk-dashboard-empty { padding: 55px 20px; text-align: center; } .mbk-dashboard-empty > span { display: block; margin-bottom: 8px; font-size: 30px; } .mbk-dashboard-empty strong { display: block; font-size: 14px; } .mbk-dashboard-empty p { margin: 6px 0 15px; color: var(--mbk-muted); font-size: 11px; } .mbk-dashboard-empty a { color: var(--mbk-green); font-size: 11px; font-weight: 700; text-decoration: none !important; } .mbk-dashboard-right-column { display: grid; align-content: start; gap: 18px; } .mbk-dashboard-quick-grid { padding: 15px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .mbk-dashboard-quick-grid a { min-height: 74px; padding: 10px; display: flex; flex-direction: column; justify-content: center; gap: 7px; border: 1px solid var(--mbk-border); border-radius: 12px; color: var(--mbk-ink); text-decoration: none !important; } .mbk-dashboard-quick-grid a:hover { border-color: rgba(22,131,74,.3); background: var(--mbk-green-soft); } .mbk-dashboard-quick-grid span { color: var(--mbk-green); font-size: 18px; } .mbk-dashboard-quick-grid strong { font-size: 10px; } .mbk-dashboard-loyalty { position: relative; overflow: hidden; padding: 22px; border-radius: 18px; background: radial-gradient(circle at 100% 100%, rgba(242,138,24,.32), transparent 40%), linear-gradient(135deg, #0d5c35, #16834a); color: #fff; } .mbk-dashboard-loyalty-crown { position: absolute; top: 17px; right: 20px; font-size: 28px; opacity: .8; } .mbk-dashboard-loyalty small { font-size: 9px; font-weight: 800; letter-spacing: .12em; opacity: .72; } .mbk-dashboard-loyalty h2 { max-width: 220px; margin: 8px 0; color: #fff; font-size: 19px; } .mbk-dashboard-loyalty p { max-width: 260px; margin: 0 0 15px; color: rgba(255,255,255,.78); font-size: 10px; line-height: 1.6; } .mbk-dashboard-progress { width: 100%; height: 6px; margin-bottom: 13px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.18); } .mbk-dashboard-progress span { display: block; height: 100%; border-radius: inherit; background: var(--mbk-orange); } .mbk-dashboard-loyalty ul { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 6px; } .mbk-dashboard-loyalty li { font-size: 10px; color: rgba(255,255,255,.9); } .mbk-dashboard-loyalty > a { display: inline-flex; padding: 8px 12px; border-radius: 9px; background: #fff; color: var(--mbk-green-dark); font-size: 10px; font-weight: 800; text-decoration: none !important; } .mbk-dashboard-recommendations { margin-top: 18px; padding: 20px; border: 1px solid var(--mbk-border); border-radius: 17px; background: #fff; } .mbk-dashboard-recommendations .mbk-dashboard-panel-head { padding: 0 0 16px; border-bottom: 0; } .mbk-dashboard-recommendations .mbk-dashboard-panel-head h2 { margin: 0; } .mbk-dashboard-recommendations .mbk-dashboard-panel-head p { margin: 5px 0 0; color: var(--mbk-muted); font-size: 11px; } .mbk-dashboard-recommendation-placeholder { min-height: 125px; padding: 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-radius: 14px; background: linear-gradient(135deg, rgba(22,131,74,.06), rgba(242,138,24,.07)); border: 1px dashed rgba(22,131,74,.25); box-sizing: border-box; } .mbk-dashboard-recommendation-placeholder > div { display: flex; flex-direction: column; gap: 5px; } .mbk-dashboard-recommendation-placeholder > div > span { color: var(--mbk-orange); font-size: 22px; } .mbk-dashboard-recommendation-placeholder strong { font-size: 13px; } .mbk-dashboard-recommendation-placeholder p { margin: 0; color: var(--mbk-muted); font-size: 10px; } .mbk-dashboard-recommendation-placeholder > a { flex: 0 0 auto; padding: 10px 14px; border-radius: 10px; background: var(--mbk-orange); color: #fff; font-size: 10px; font-weight: 800; text-decoration: none !important; } .mbk-dashboard-mobile-nav { display: none; } @media (max-width: 1150px) { .mbk-dashboard-shell { grid-template-columns: 225px minmax(0, 1fr); } .mbk-dashboard-content { padding: 24px; } .mbk-dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mbk-dashboard-welcome { align-items: stretch; flex-direction: column; } .mbk-dashboard-member-summary { min-width: 0; } .mbk-dashboard-order { grid-template-columns: 48px minmax(0, 1fr) auto; } .mbk-dashboard-status { grid-column: 2; justify-self: start; } .mbk-dashboard-order-total { grid-column: 3; grid-row: 1 / span 2; } .mbk-dashboard-order-action { grid-column: 2; } } @media (max-width: 850px) { .mbk-dashboard-shell { display: block; } .mbk-dashboard-sidebar { display: none; } .mbk-dashboard-topbar { height: 64px; padding: 0 15px; gap: 10px; } .mbk-dashboard-mobile-brand { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; } .mbk-dashboard-mobile-brand img { width: 29px; height: 29px; } .mbk-dashboard-mobile-brand strong { color: var(--mbk-green-dark); font-size: 12px; } .mbk-dashboard-search { max-width: none; height: 38px; } .mbk-dashboard-search input { font-size: 10px; } .mbk-dashboard-top-actions { margin-left: 0; } .mbk-dashboard-top-actions a, .mbk-dashboard-top-actions button { width: 32px; height: 32px; } .mbk-dashboard-top-user { display: none; } .mbk-dashboard-content { padding: 18px 14px 90px; } .mbk-dashboard-grid { grid-template-columns: 1fr; } .mbk-dashboard-mobile-nav { position: fixed; z-index: 9999; left: 10px; right: 10px; bottom: 10px; height: 64px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; padding: 4px; border: 1px solid rgba(20,50,35,.08); border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: 0 12px 35px rgba(20,50,35,.16); backdrop-filter: blur(14px); } .mbk-dashboard-mobile-nav a { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 55px; color: var(--mbk-muted); text-decoration: none !important; border-radius: 13px; } .mbk-dashboard-mobile-nav a.is-active { color: var(--mbk-green); background: var(--mbk-green-soft); } .mbk-dashboard-mobile-nav span { font-size: 17px; line-height: 1; } .mbk-dashboard-mobile-nav small { font-size: 8px; font-weight: 700; } } @media (max-width: 620px) { .mbk-dashboard-mobile-brand strong { display: none; } .mbk-dashboard-search { flex: 1; } .mbk-dashboard-top-actions { gap: 0; } .mbk-dashboard-top-actions button { display: none; } .mbk-dashboard-welcome h1 { font-size: 27px; } .mbk-dashboard-member-summary { grid-template-columns: 1fr 1fr; } .mbk-dashboard-kpis { grid-template-columns: 1fr 1fr; gap: 9px; } .mbk-dashboard-kpi { min-height: 104px; padding: 12px; gap: 8px; } .mbk-dashboard-kpi-icon { width: 38px; height: 38px; flex-basis: 38px; border-radius: 11px; font-size: 17px; } .mbk-dashboard-kpi strong { font-size: 21px; } .mbk-dashboard-kpi small { font-size: 9px; } .mbk-dashboard-kpi em { font-size: 8px; } .mbk-dashboard-order { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 9px; padding: 12px 13px; } .mbk-dashboard-order-thumb { width: 42px; height: 42px; } .mbk-dashboard-order-info strong { font-size: 10px; } .mbk-dashboard-order-info small { font-size: 8px; } .mbk-dashboard-order-total { font-size: 9px; } .mbk-dashboard-order-action { font-size: 8px; } .mbk-dashboard-status { font-size: 8px; } .mbk-dashboard-recommendation-placeholder { flex-direction: column; align-items: flex-start; } .mbk-dashboard-recommendation-placeholder > a { width: 100%; text-align: center; box-sizing: border-box; } } /* * ========================================================== * V3.9.7 — MERCI BOKKU DASHBOARD CANONICAL LAYOUT * ========================================================== * * One authoritative responsive layout. * * Actual dashboard structure: * * .mbk-account-dashboard * └── .mbk-dashboard-shell * ├── .mbk-dashboard-sidebar * └── .mbk-dashboard-main * * Actual dashboard content: * * .mbk-dashboard-kpis * .mbk-dashboard-grid * * No duplicate structural overrides. * ========================================================== */ /* ========================================================== * ACCOUNT APPLICATION * ========================================================== */ body.woocommerce-account .mbk-account-dashboard { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================================== * SAFE ASTRA CONTENT WIDTH * ========================================================== * * Scope this to the website content area only. * Do not modify header/footer containers. * ========================================================== */ @media (min-width: 921px) { body.woocommerce-account .site-content > .ast-container { width: 100% !important; max-width: 1440px !important; padding-left: 24px !important; padding-right: 24px !important; box-sizing: border-box !important; } body.woocommerce-account .site-content #primary, body.woocommerce-account .site-content .content-area, body.woocommerce-account .site-content .site-main { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } body.woocommerce-account .site-content .ast-woocommerce-container { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } } /* ========================================================== * MAIN APPLICATION SHELL * ========================================================== */ body.woocommerce-account .mbk-dashboard-shell { width: min(1400px, calc(100vw - 48px)) !important; max-width: 1400px !important; margin-left: auto !important; margin-right: auto !important; display: grid !important; grid-template-columns: 280px minmax(0, 1fr) !important; gap: 28px !important; align-items: start !important; box-sizing: border-box !important; } /* ========================================================== * SIDEBAR * ========================================================== */ body.woocommerce-account .mbk-dashboard-sidebar { width: 280px !important; min-width: 280px !important; max-width: 280px !important; box-sizing: border-box !important; position: sticky !important; top: 24px !important; } /* ========================================================== * MAIN * ========================================================== */ body.woocommerce-account .mbk-dashboard-main { width: 100% !important; min-width: 0 !important; max-width: none !important; box-sizing: border-box !important; } /* ========================================================== * INTERNAL TOPBAR * ========================================================== */ body.woocommerce-account .mbk-dashboard-topbar { width: 100% !important; box-sizing: border-box !important; } /* ========================================================== * DASHBOARD CONTENT * ========================================================== */ body.woocommerce-account .mbk-dashboard-content { width: 100% !important; max-width: none !important; box-sizing: border-box !important; } /* ========================================================== * WELCOME AREA * ========================================================== */ body.woocommerce-account .mbk-dashboard-welcome { width: 100% !important; box-sizing: border-box !important; } /* ========================================================== * MEMBER SUMMARY * ========================================================== */ body.woocommerce-account .mbk-dashboard-member-summary { max-width: 420px; box-sizing: border-box !important; } /* ========================================================== * KPI GRID * * IMPORTANT: * Actual class is .mbk-dashboard-kpis * ========================================================== */ body.woocommerce-account .mbk-dashboard-kpis { width: 100% !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px !important; box-sizing: border-box !important; } /* ========================================================== * KPI CARDS * ========================================================== */ body.woocommerce-account .mbk-dashboard-kpi { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* ========================================================== * LOWER DASHBOARD GRID * * IMPORTANT: * Actual class is .mbk-dashboard-grid * ========================================================== */ body.woocommerce-account .mbk-dashboard-grid { width: 100% !important; display: grid !important; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr) !important; gap: 18px !important; align-items: start !important; box-sizing: border-box !important; } /* ========================================================== * PANELS * ========================================================== */ body.woocommerce-account .mbk-dashboard-panel { width: 100% !important; min-width: 0 !important; max-width: none !important; box-sizing: border-box !important; } /* ========================================================== * RECOMMENDATIONS * ========================================================== */ body.woocommerce-account .mbk-dashboard-recommendations { width: 100% !important; max-width: none !important; box-sizing: border-box !important; } /* ========================================================== * LAPTOP * ========================================================== */ @media (min-width: 921px) and (max-width: 1199px) { body.woocommerce-account .mbk-dashboard-shell { width: calc(100vw - 32px) !important; grid-template-columns: 240px minmax(0, 1fr) !important; gap: 20px !important; } body.woocommerce-account .mbk-dashboard-sidebar { width: 240px !important; min-width: 240px !important; max-width: 240px !important; } body.woocommerce-account .mbk-dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body.woocommerce-account .mbk-dashboard-grid { grid-template-columns: minmax(0, 1fr) !important; } } /* ========================================================== * TABLET / MOBILE * ========================================================== */ @media (max-width: 920px) { body.woocommerce-account .mbk-dashboard-shell { width: 100% !important; max-width: none !important; margin: 0 !important; display: block !important; } body.woocommerce-account .mbk-dashboard-sidebar { display: none !important; } body.woocommerce-account .mbk-dashboard-main { width: 100% !important; min-width: 0 !important; } body.woocommerce-account .mbk-dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; } body.woocommerce-account .mbk-dashboard-grid { grid-template-columns: 1fr !important; } } /* ========================================================== * SMALL MOBILE * ========================================================== */ @media (max-width: 480px) { body.woocommerce-account .mbk-dashboard-shell { width: 100% !important; padding: 0 12px !important; } body.woocommerce-account .mbk-dashboard-kpis { gap: 10px !important; } body.woocommerce-account .mbk-dashboard-content { padding-left: 14px !important; padding-right: 14px !important; } } /* ========================================================== * NO HORIZONTAL OVERFLOW * ========================================================== */ body.woocommerce-account .mbk-account-dashboard, body.woocommerce-account .mbk-dashboard-shell, body.woocommerce-account .mbk-dashboard-main { overflow-x: clip !important; } /* * ========================================================== * V3.9.7 END * ========================================================== */ /* * ========================================================== * V3.9.8 — REMOVE WOOCOMMERCE ACCOUNT COLUMN CONSTRAINT * ========================================================== * * The dashboard itself is correctly sized internally. * * The remaining restriction comes from WooCommerce's * .woocommerce-MyAccount-content wrapper, which normally * reserves approximately 68% of the account page for endpoint * content. * * Merci Bokku replaces that architecture with its own complete * application shell. * * Therefore the WooCommerce account content column must become * the full available content width. * * Header and footer are NOT modified. * ========================================================== */ @media (min-width: 921px) { /* ------------------------------------------------------ * REMOVE WOOCOMMERCE DEFAULT ACCOUNT FLOAT/COLUMN * ------------------------------------------------------ */ body.woocommerce-account.logged-in .woocommerce-MyAccount-content { float: none !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ------------------------------------------------------ * REMOVE POSSIBLE WOOCOMMERCE ACCOUNT NAV COLUMN * * MBK dashboard contains its own sidebar. * ------------------------------------------------------ */ body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation { display: none !important; } /* ------------------------------------------------------ * WOOCOMMERCE ACCOUNT WRAPPER * ------------------------------------------------------ */ body.woocommerce-account.logged-in .woocommerce { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; display: block !important; } /* ------------------------------------------------------ * ASTRA WOOCOMMERCE CONTAINER * ------------------------------------------------------ */ body.woocommerce-account.logged-in .ast-woocommerce-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ------------------------------------------------------ * ACCOUNT DASHBOARD * ------------------------------------------------------ */ body.woocommerce-account.logged-in .mbk-account-dashboard { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ------------------------------------------------------ * DASHBOARD SHELL * ------------------------------------------------------ */ body.woocommerce-account.logged-in .mbk-dashboard-shell { width: min( 1400px, calc(100vw - 48px) ) !important; max-width: 1400px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } } /* * ========================================================== * V3.9.8 — TABLET * ========================================================== */ @media (min-width: 768px) and (max-width: 920px) { body.woocommerce-account.logged-in .woocommerce-MyAccount-content { float: none !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation { display: none !important; } body.woocommerce-account.logged-in .woocommerce { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } } /* * ========================================================== * V3.9.8 — MOBILE * ========================================================== * * Preserve the mobile version which is already working well. * ========================================================== */ @media (max-width: 767px) { body.woocommerce-account.logged-in .woocommerce-MyAccount-content { float: none !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation { display: none !important; } body.woocommerce-account.logged-in .woocommerce { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } } /* * ========================================================== * V3.9.8 END * ========================================================== */ /* * ========================================================== * V3.9.9 — TRUE VIEWPORT-WIDTH ACCOUNT APPLICATION * ========================================================== * * V3.9.8 correctly removed the WooCommerce account-column * restriction, but the entire MBK dashboard is still nested * inside the theme's constrained content container. * * The dashboard is an application-style interface and must * therefore break out of that container. * * IMPORTANT: * - Header remains untouched. * - Footer remains untouched. * - Only the MBK dashboard breaks out. * - Desktop gets the full available viewport. * - Mobile keeps its existing layout. * ========================================================== */ /* ========================================================== * DESKTOP APPLICATION BREAKOUT * ========================================================== */ @media (min-width: 921px) { body.woocommerce-account.logged-in .mbk-account-dashboard { /* * Break out of Astra / WooCommerce's centered * content container. */ width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding: 0 !important; box-sizing: border-box !important; overflow: visible !important; } /* ------------------------------------------------------ * CANONICAL APPLICATION WIDTH * ------------------------------------------------------ */ body.woocommerce-account.logged-in .mbk-account-dashboard .mbk-dashboard-shell { width: calc(100vw - 48px) !important; max-width: 1440px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; display: grid !important; grid-template-columns: 280px minmax(0, 1fr) !important; gap: 28px !important; align-items: start !important; } /* ------------------------------------------------------ * MAIN DASHBOARD * ------------------------------------------------------ */ body.woocommerce-account.logged-in .mbk-account-dashboard .mbk-dashboard-main { width: 100% !important; min-width: 0 !important; max-width: none !important; box-sizing: border-box !important; } /* ------------------------------------------------------ * KPI ROW * ------------------------------------------------------ */ body.woocommerce-account.logged-in .mbk-account-dashboard .mbk-dashboard-kpis { width: 100% !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px !important; box-sizing: border-box !important; } /* ------------------------------------------------------ * LOWER CONTENT * ------------------------------------------------------ */ body.woocommerce-account.logged-in .mbk-account-dashboard .mbk-dashboard-grid { width: 100% !important; display: grid !important; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr) !important; gap: 18px !important; box-sizing: border-box !important; } /* ------------------------------------------------------ * ALL DASHBOARD PANELS STAY INSIDE THE GRID * ------------------------------------------------------ */ body.woocommerce-account.logged-in .mbk-account-dashboard .mbk-dashboard-panel { width: 100% !important; min-width: 0 !important; max-width: none !important; box-sizing: border-box !important; } /* ------------------------------------------------------ * RECOMMENDATIONS * ------------------------------------------------------ */ body.woocommerce-account.logged-in .mbk-account-dashboard .mbk-dashboard-recommendations { width: 100% !important; max-width: none !important; box-sizing: border-box !important; } } /* * ========================================================== * LAPTOP * ========================================================== */ @media (min-width: 921px) and (max-width: 1199px) { body.woocommerce-account.logged-in .mbk-account-dashboard .mbk-dashboard-shell { width: calc(100vw - 32px) !important; grid-template-columns: 240px minmax(0, 1fr) !important; gap: 20px !important; } body.woocommerce-account.logged-in .mbk-account-dashboard .mbk-dashboard-sidebar { width: 240px !important; min-width: 240px !important; max-width: 240px !important; } body.woocommerce-account.logged-in .mbk-account-dashboard .mbk-dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body.woocommerce-account.logged-in .mbk-account-dashboard .mbk-dashboard-grid { grid-template-columns: minmax(0, 1fr) !important; } } /* * ========================================================== * MOBILE * ========================================================== * * Do NOT use viewport breakout here. * The current mobile dashboard is already behaving correctly. * ========================================================== */ @media (max-width: 920px) { body.woocommerce-account.logged-in .mbk-account-dashboard { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; box-sizing: border-box !important; } } /* * ========================================================== * V3.9.9 END * ========================================================== */ /* * ========================================================== * V3.9.10 — COMPACT DESKTOP VERTICAL RHYTHM * ========================================================== * * The horizontal application structure is now correct. * * This version removes legacy artificial heights from the * desktop dashboard and lets the actual content determine * the vertical layout. * * IMPORTANT: * - Does NOT change desktop width. * - Does NOT change sidebar width. * - Does NOT change header/footer. * - Does NOT change mobile layout. * - Orders, quick actions and loyalty determine the natural * height of the dashboard grid. * ========================================================== */ @media (min-width: 921px) { /* ------------------------------------------------------ * APPLICATION HEIGHT * ------------------------------------------------------ */ body.woocommerce-account.logged-in .mbk-account-dashboard { min-height: 0 !important; height: auto !important; } body.woocommerce-account.logged-in .mbk-dashboard-shell { min-height: 0 !important; height: auto !important; align-items: start !important; } body.woocommerce-account.logged-in .mbk-dashboard-main { min-height: 0 !important; height: auto !important; } body.woocommerce-account.logged-in .mbk-dashboard-content { min-height: 0 !important; height: auto !important; } /* ------------------------------------------------------ * KPI AREA * ------------------------------------------------------ */ body.woocommerce-account.logged-in .mbk-dashboard-kpis { min-height: 0 !important; height: auto !important; } /* ------------------------------------------------------ * LOWER GRID * ------------------------------------------------------ */ body.woocommerce-account.logged-in .mbk-dashboard-grid { min-height: 0 !important; height: auto !important; align-items: start !important; } /* ------------------------------------------------------ * RECENT ORDERS PANEL * ------------------------------------------------------ */ body.woocommerce-account.logged-in .mbk-dashboard-orders { min-height: 0 !important; height: auto !important; align-self: start !important; } /* ------------------------------------------------------ * EMPTY ORDERS STATE * * Give the empty state enough breathing room without * allowing legacy 500–700px dashboard heights to survive. * ------------------------------------------------------ */ body.woocommerce-account.logged-in .mbk-dashboard-orders .mbk-dashboard-empty { min-height: 220px !important; height: auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } /* ------------------------------------------------------ * QUICK ACTIONS * ------------------------------------------------------ */ body.woocommerce-account.logged-in .mbk-dashboard-quick { min-height: 0 !important; height: auto !important; align-self: start !important; } /* ------------------------------------------------------ * RIGHT COLUMN * ------------------------------------------------------ */ body.woocommerce-account.logged-in .mbk-dashboard-right-column { min-height: 0 !important; height: auto !important; align-self: start !important; } /* ------------------------------------------------------ * LOYALTY * ------------------------------------------------------ */ body.woocommerce-account.logged-in .mbk-dashboard-loyalty { min-height: 0 !important; height: auto !important; align-self: start !important; } /* ------------------------------------------------------ * RECOMMENDATIONS * ------------------------------------------------------ */ body.woocommerce-account.logged-in .mbk-dashboard-recommendations { min-height: 0 !important; height: auto !important; margin-top: 18px !important; } } /* * ========================================================== * V3.9.10 END * ========================================================== */ /* * ========================================================== * V3.11.3.5 — DASHBOARD RECOMMENDATION CARDS * ========================================================== * * Styles the products returned by the existing * MBK Homepage Engine. * * No recommendation logic is changed here. */ /* ========================================================== * RECOMMENDATION SECTION * ========================================================== */ body.woocommerce-account .mbk-dashboard-recommendations { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* ========================================================== * PRODUCT GRID * ========================================================== */ body.woocommerce-account .mbk-dashboard-recommendation-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================================== * PRODUCT CARD * ========================================================== */ body.woocommerce-account .mbk-dashboard-recommendation-card { position: relative !important; display: flex !important; flex-direction: column !important; min-width: 0 !important; overflow: hidden !important; background: #ffffff !important; border: 1px solid #e7eee9 !important; border-radius: 16px !important; box-sizing: border-box !important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important; } body.woocommerce-account .mbk-dashboard-recommendation-card:hover { transform: translateY(-2px) !important; border-color: #d8e7dd !important; box-shadow: 0 8px 24px rgba(0, 70, 35, .08) !important; } /* ========================================================== * PRODUCT LINK * ========================================================== */ body.woocommerce-account .mbk-dashboard-recommendation-link { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-width: 0 !important; color: inherit !important; text-decoration: none !important; background: transparent !important; } body.woocommerce-account .mbk-dashboard-recommendation-link:hover { color: inherit !important; text-decoration: none !important; } /* ========================================================== * PRODUCT IMAGE AREA * ========================================================== */ body.woocommerce-account .mbk-dashboard-recommendation-media { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 190px !important; padding: 16px !important; background: #f8faf8 !important; box-sizing: border-box !important; overflow: hidden !important; } body.woocommerce-account .mbk-dashboard-recommendation-image { display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; object-fit: contain !important; object-position: center !important; margin: 0 !important; border-radius: 8px !important; } /* ========================================================== * SALE BADGE * ========================================================== */ body.woocommerce-account .mbk-dashboard-sale-badge { position: absolute !important; top: 12px !important; left: 12px !important; z-index: 2 !important; display: inline-flex !important; align-items: center !important; min-height: 24px !important; padding: 4px 8px !important; border-radius: 6px !important; background: #ff6b00 !important; color: #ffffff !important; font-size: 10px !important; font-weight: 700 !important; line-height: 1 !important; } /* ========================================================== * PRODUCT BODY * ========================================================== */ body.woocommerce-account .mbk-dashboard-recommendation-body { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-width: 0 !important; padding: 14px !important; box-sizing: border-box !important; } /* ========================================================== * PRODUCT NAME * ========================================================== */ body.woocommerce-account .mbk-dashboard-recommendation-body h3 { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; min-height: 38px !important; margin: 0 0 8px !important; color: #10251b !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.45 !important; } /* ========================================================== * RATING * ========================================================== */ body.woocommerce-account .mbk-dashboard-recommendation-meta { display: flex !important; align-items: center !important; gap: 5px !important; min-height: 18px !important; margin-bottom: 8px !important; } body.woocommerce-account .mbk-dashboard-recommendation-meta span { color: #ff6b00 !important; font-size: 12px !important; font-weight: 600 !important; } body.woocommerce-account .mbk-dashboard-recommendation-meta small { color: #7b8780 !important; font-size: 10px !important; } /* ========================================================== * PRICE * ========================================================== */ body.woocommerce-account .mbk-dashboard-recommendation-price { margin-top: auto !important; color: #10251b !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.35 !important; } body.woocommerce-account .mbk-dashboard-recommendation-price del { margin-right: 5px !important; color: #9ba49f !important; font-size: 10px !important; font-weight: 400 !important; } body.woocommerce-account .mbk-dashboard-recommendation-price ins { color: #ff6b00 !important; text-decoration: none !important; } /* ========================================================== * ADD TO CART * ========================================================== */ body.woocommerce-account .mbk-dashboard-recommendation-cart { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 38px !important; margin: 0 14px 14px !important; padding: 8px 12px !important; border-radius: 9px !important; background: #ff7a00 !important; color: #ffffff !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1.2 !important; text-align: center !important; text-decoration: none !important; box-sizing: border-box !important; transition: background .2s ease, transform .2s ease !important; } body.woocommerce-account .mbk-dashboard-recommendation-cart:hover { background: #e96800 !important; color: #ffffff !important; text-decoration: none !important; transform: translateY(-1px) !important; } /* ========================================================== * EMPTY STATE * ========================================================== */ body.woocommerce-account .mbk-dashboard-recommendation-placeholder { width: 100% !important; box-sizing: border-box !important; } /* ========================================================== * TABLET * ========================================================== */ @media (min-width: 768px) and (max-width: 1199px) { body.woocommerce-account .mbk-dashboard-recommendation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* ========================================================== * MOBILE * ========================================================== */ @media (max-width: 767px) { body.woocommerce-account .mbk-dashboard-recommendation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } body.woocommerce-account .mbk-dashboard-recommendation-media { height: 145px !important; padding: 10px !important; } body.woocommerce-account .mbk-dashboard-recommendation-body { padding: 10px !important; } body.woocommerce-account .mbk-dashboard-recommendation-body h3 { font-size: 11px !important; line-height: 1.4 !important; min-height: 31px !important; margin-bottom: 6px !important; } body.woocommerce-account .mbk-dashboard-recommendation-meta { margin-bottom: 5px !important; } body.woocommerce-account .mbk-dashboard-recommendation-price { font-size: 12px !important; } body.woocommerce-account .mbk-dashboard-recommendation-cart { min-height: 34px !important; margin: 0 10px 10px !important; padding: 7px 8px !important; font-size: 10px !important; } body.woocommerce-account .mbk-dashboard-sale-badge { top: 8px !important; left: 8px !important; padding: 3px 6px !important; font-size: 8px !important; } } /* ========================================================== * VERY SMALL MOBILE * ========================================================== */ @media (max-width: 380px) { body.woocommerce-account .mbk-dashboard-recommendation-grid { gap: 8px !important; } body.woocommerce-account .mbk-dashboard-recommendation-media { height: 125px !important; } } /* * ========================================================== * V3.12.1 — MERCI BOKKU ORDERS PAGE * ========================================================== */ body.woocommerce-account .mbk-orders-main { min-width: 0; } body.woocommerce-account .mbk-orders-content { padding: 32px 34px 50px; } body.woocommerce-account .mbk-orders-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; } body.woocommerce-account .mbk-orders-header h1 { margin: 6px 0 8px; font-size: clamp(30px, 3vw, 46px); line-height: 1.05; letter-spacing: -0.035em; } body.woocommerce-account .mbk-orders-header p { margin: 0; color: #718078; } body.woocommerce-account .mbk-orders-shop-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 12px; background: #ff7900; color: #fff !important; text-decoration: none !important; font-weight: 700; } body.woocommerce-account .mbk-orders-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-bottom: 22px; } body.woocommerce-account .mbk-orders-summary > div { padding: 20px 22px; border: 1px solid #e8eee9; border-radius: 16px; background: #fff; } body.woocommerce-account .mbk-orders-summary small { display: block; margin-bottom: 7px; color: #7b8780; } body.woocommerce-account .mbk-orders-summary strong { display: block; color: #10201a; font-size: 23px; } body.woocommerce-account .mbk-orders-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } body.woocommerce-account .mbk-orders-filters a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border: 1px solid #e1e9e3; border-radius: 999px; background: #fff; color: #53635a; text-decoration: none !important; font-size: 13px; font-weight: 700; } body.woocommerce-account .mbk-orders-filters a.is-active { border-color: #16854f; background: #e9f7ef; color: #087b45; } body.woocommerce-account .mbk-orders-list { overflow: hidden; border: 1px solid #e6ece8; border-radius: 18px; background: #fff; } body.woocommerce-account .mbk-orders-list-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; border-bottom: 1px solid #edf1ee; } body.woocommerce-account .mbk-orders-list-header h2 { margin: 0; font-size: 18px; color: #10201a; } body.woocommerce-account .mbk-orders-list-header span { color: #748078; font-size: 13px; } body.woocommerce-account .mbk-orders-items { display: grid; gap: 0; } body.woocommerce-account .mbk-order-card { padding: 22px; border-bottom: 1px solid #edf1ee; } body.woocommerce-account .mbk-order-card:last-child { border-bottom: 0; } body.woocommerce-account .mbk-order-card-top, body.woocommerce-account .mbk-order-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 18px; } body.woocommerce-account .mbk-order-card-top > div { display: grid; gap: 4px; } body.woocommerce-account .mbk-order-card-top small, body.woocommerce-account .mbk-order-card-bottom small { color: #89948e; font-size: 11px; } body.woocommerce-account .mbk-order-card-top strong { color: #10201a; font-size: 16px; } body.woocommerce-account .mbk-order-card-top span:not(.mbk-order-status) { color: #7b8780; font-size: 12px; } body.woocommerce-account .mbk-order-status { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 10px; border-radius: 999px; background: #eef4ef; color: #087b45; font-size: 11px; font-weight: 800; } body.woocommerce-account .mbk-order-status-pending, body.woocommerce-account .mbk-order-status-on-hold { background: #fff4e7; color: #c96a00; } body.woocommerce-account .mbk-order-status-cancelled, body.woocommerce-account .mbk-order-status-failed, body.woocommerce-account .mbk-order-status-refunded { background: #fff0f1; color: #c84852; } body.woocommerce-account .mbk-order-products { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 20px 0; } body.woocommerce-account .mbk-order-product { display: flex; align-items: center; gap: 9px; min-width: 190px; max-width: 290px; } body.woocommerce-account .mbk-order-product-image { width: 54px; height: 54px; flex: 0 0 54px; overflow: hidden; border-radius: 10px; background: #f5f8f6; } body.woocommerce-account .mbk-order-product-image img { display: block; width: 100%; height: 100%; object-fit: cover; } body.woocommerce-account .mbk-order-product > div:last-child { min-width: 0; } body.woocommerce-account .mbk-order-product strong { display: block; overflow: hidden; color: #203129; font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } body.woocommerce-account .mbk-order-product small { display: block; margin-top: 3px; color: #89948e; font-size: 11px; } body.woocommerce-account .mbk-order-more-items { color: #087b45; font-size: 12px; font-weight: 700; } body.woocommerce-account .mbk-order-card-bottom { padding-top: 16px; border-top: 1px solid #f0f3f1; } body.woocommerce-account .mbk-order-card-bottom > div { display: grid; gap: 3px; } body.woocommerce-account .mbk-order-card-bottom strong { color: #10201a; font-size: 17px; } body.woocommerce-account .mbk-order-card-bottom a { color: #087b45 !important; text-decoration: none !important; font-weight: 800; font-size: 13px; } body.woocommerce-account .mbk-orders-empty { display: flex; min-height: 330px; align-items: center; justify-content: center; flex-direction: column; padding: 40px 24px; text-align: center; } body.woocommerce-account .mbk-orders-empty-icon { margin-bottom: 14px; font-size: 38px; } body.woocommerce-account .mbk-orders-empty h3 { margin: 0 0 7px; color: #10201a; font-size: 18px; } body.woocommerce-account .mbk-orders-empty p { max-width: 420px; margin: 0 0 18px; color: #7b8780; } body.woocommerce-account .mbk-orders-empty a { color: #087b45 !important; text-decoration: none !important; font-weight: 800; } /* * ---------------------------------------------------------- * MOBILE * ---------------------------------------------------------- */ @media (max-width: 899px) { body.woocommerce-account .mbk-orders-content { padding: 22px 14px 34px; } body.woocommerce-account .mbk-orders-header { display: block; margin-bottom: 18px; } body.woocommerce-account .mbk-orders-header h1 { font-size: 30px; } body.woocommerce-account .mbk-orders-shop-button { width: 100%; margin-top: 16px; } body.woocommerce-account .mbk-orders-summary { grid-template-columns: 1fr 1fr; } body.woocommerce-account .mbk-orders-summary > div { padding: 14px; } body.woocommerce-account .mbk-orders-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } body.woocommerce-account .mbk-orders-filters::-webkit-scrollbar { display: none; } body.woocommerce-account .mbk-orders-filters a { flex: 0 0 auto; } body.woocommerce-account .mbk-orders-list-header { padding: 16px; } body.woocommerce-account .mbk-order-card { padding: 16px; } body.woocommerce-account .mbk-order-card-top { align-items: flex-start; } body.woocommerce-account .mbk-order-products { display: grid; grid-template-columns: 1fr; } body.woocommerce-account .mbk-order-product { max-width: none; min-width: 0; } body.woocommerce-account .mbk-order-card-bottom { align-items: flex-start; } body.woocommerce-account .mbk-order-card-bottom a { text-align: right; } } /* * ========================================================== * V3.12.2 — MERCI BOKKU ORDER DETAILS * ========================================================== */ body.woocommerce-account .mbk-order-details-main { min-width: 0 !important; } body.woocommerce-account .mbk-order-details-back { margin-bottom: 18px; } body.woocommerce-account .mbk-order-details-back a { color: #087f4e; font-size: 14px; font-weight: 700; text-decoration: none; } body.woocommerce-account .mbk-order-details-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; } body.woocommerce-account .mbk-order-details-header h1 { margin: 4px 0 6px; font-size: clamp(30px, 4vw, 46px); line-height: 1.05; letter-spacing: -0.04em; } body.woocommerce-account .mbk-order-details-header p { margin: 0; color: #71807b; font-size: 14px; } body.woocommerce-account .mbk-order-details-status { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 16px; border-radius: 999px; background: #edf8f2; color: #087f4e; font-size: 13px; font-weight: 800; white-space: nowrap; } body.woocommerce-account .mbk-order-details-status.is-pending, body.woocommerce-account .mbk-order-details-status.is-hold { background: #fff5e8; color: #d97800; } body.woocommerce-account .mbk-order-details-status.is-cancelled, body.woocommerce-account .mbk-order-details-status.is-failed { background: #fff0f1; color: #d9364f; } body.woocommerce-account .mbk-order-details-status.is-refunded { background: #f1f2f3; color: #687178; } /* * PROGRESS */ body.woocommerce-account .mbk-order-progress { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 24px 20px 20px; margin-bottom: 22px; background: #fff; border: 1px solid #e5ece8; border-radius: 18px; } body.woocommerce-account .mbk-order-progress-line { position: absolute; top: 40px; left: 11%; right: 11%; height: 2px; background: #e7ece9; } body.woocommerce-account .mbk-order-progress-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } body.woocommerce-account .mbk-order-progress-step > span { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #f1f4f2; color: #87918d; font-size: 13px; font-weight: 800; } body.woocommerce-account .mbk-order-progress-step.is-done > span { background: #087f4e; color: #fff; } body.woocommerce-account .mbk-order-progress-step small { max-width: 110px; color: #68756f; font-size: 11px; line-height: 1.3; } /* * CARDS */ body.woocommerce-account .mbk-order-details-card { margin-bottom: 20px; overflow: hidden; background: #fff; border: 1px solid #e5ece8; border-radius: 18px; } body.woocommerce-account .mbk-order-details-card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid #edf1ef; } body.woocommerce-account .mbk-order-details-card-head h2 { margin: 0; font-size: 18px; color: #14241e; } body.woocommerce-account .mbk-order-details-card-head span { color: #7a8580; font-size: 12px; } /* * ITEMS */ body.woocommerce-account .mbk-order-detail-items { padding: 4px 22px; } body.woocommerce-account .mbk-order-detail-item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid #edf1ef; } body.woocommerce-account .mbk-order-detail-item:last-child { border-bottom: 0; } body.woocommerce-account .mbk-order-detail-item-image { width: 72px; height: 72px; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #f5f7f6; } body.woocommerce-account .mbk-order-detail-item-image img { width: 100%; height: 100%; object-fit: cover; } body.woocommerce-account .mbk-order-detail-item-image span { color: #087f4e; font-weight: 900; } body.woocommerce-account .mbk-order-detail-item-info h3 { margin: 0 0 6px; color: #14241e; font-size: 14px; line-height: 1.35; } body.woocommerce-account .mbk-order-detail-item-info span { color: #7b8581; font-size: 12px; } body.woocommerce-account .mbk-order-detail-item-total { color: #14241e; font-size: 14px; white-space: nowrap; } /* * ADDRESS + PAYMENT */ body.woocommerce-account .mbk-order-details-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } body.woocommerce-account .mbk-order-address, body.woocommerce-account .mbk-order-payment-info { padding: 20px 22px; } body.woocommerce-account .mbk-order-address strong, body.woocommerce-account .mbk-order-payment-info strong { display: block; margin-bottom: 8px; color: #14241e; font-size: 14px; } body.woocommerce-account .mbk-order-address div { color: #68756f; font-size: 13px; line-height: 1.65; } body.woocommerce-account .mbk-order-address span { display: block; margin-top: 10px; color: #68756f; font-size: 12px; } body.woocommerce-account .mbk-order-payment-info span { color: #087f4e; font-size: 13px; font-weight: 700; } /* * SUMMARY */ body.woocommerce-account .mbk-order-summary-rows { padding: 10px 22px 18px; } body.woocommerce-account .mbk-order-summary-rows > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 0; color: #68756f; font-size: 13px; } body.woocommerce-account .mbk-order-summary-rows strong { color: #14241e; } body.woocommerce-account .mbk-order-summary-rows .is-discount { color: #087f4e; } body.woocommerce-account .mbk-order-summary-rows .is-total { margin-top: 6px; padding-top: 16px; border-top: 1px solid #e8eeeb; color: #14241e; font-size: 16px; } body.woocommerce-account .mbk-order-summary-rows .is-total strong { color: #087f4e; font-size: 20px; } /* * ACTIONS */ body.woocommerce-account .mbk-order-details-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; } body.woocommerce-account .mbk-order-details-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border-radius: 10px; font-size: 13px; font-weight: 800; text-decoration: none; } body.woocommerce-account .mbk-order-action-primary { background: #ff7900; color: #fff !important; } body.woocommerce-account .mbk-order-action-secondary { background: #fff; border: 1px solid #dfe8e3; color: #087f4e !important; } /* * ERROR */ body.woocommerce-account .mbk-order-details-error { max-width: 640px; margin: 80px auto; padding: 48px 28px; text-align: center; background: #fff; border: 1px solid #e5ece8; border-radius: 20px; } body.woocommerce-account .mbk-order-details-error > span { display: block; margin-bottom: 14px; font-size: 36px; } body.woocommerce-account .mbk-order-details-error h1 { margin: 0 0 8px; color: #14241e; } body.woocommerce-account .mbk-order-details-error p { margin: 0 0 24px; color: #71807b; } body.woocommerce-account .mbk-order-details-error a { color: #087f4e; font-weight: 800; text-decoration: none; } /* * MOBILE */ @media (max-width: 767px) { body.woocommerce-account .mbk-order-details-header { align-items: flex-start; flex-direction: column; gap: 14px; } body.woocommerce-account .mbk-order-details-header h1 { font-size: 30px; } body.woocommerce-account .mbk-order-progress { grid-template-columns: repeat(5, minmax(58px, 1fr)); gap: 2px; padding: 18px 8px 14px; overflow-x: auto; } body.woocommerce-account .mbk-order-progress-line { left: 10%; right: 10%; top: 34px; } body.woocommerce-account .mbk-order-progress-step > span { width: 28px; height: 28px; font-size: 11px; } body.woocommerce-account .mbk-order-progress-step small { font-size: 9px; } body.woocommerce-account .mbk-order-details-columns { grid-template-columns: 1fr; gap: 0; } body.woocommerce-account .mbk-order-detail-item { grid-template-columns: 58px minmax(0, 1fr); gap: 12px; } body.woocommerce-account .mbk-order-detail-item-image { width: 58px; height: 58px; } body.woocommerce-account .mbk-order-detail-item-total { grid-column: 2; justify-self: start; margin-top: -5px; } body.woocommerce-account .mbk-order-details-card-head { padding: 16px; } body.woocommerce-account .mbk-order-detail-items { padding: 4px 16px; } body.woocommerce-account .mbk-order-address, body.woocommerce-account .mbk-order-payment-info { padding: 16px; } body.woocommerce-account .mbk-order-summary-rows { padding: 8px 16px 14px; } body.woocommerce-account .mbk-order-details-actions { flex-direction: column; } body.woocommerce-account .mbk-order-details-actions a { width: 100%; } } /* * V3.12.2 END */ /* * ========================================================== * V3.12.3 — UNIFIED MERCI BOKKU ACCOUNT NAVIGATION * ========================================================== */ /* ---------------------------------------------------------- * Hide WooCommerce's native navigation wrapper. * MBK renders its own navigation directly. * ---------------------------------------------------------- */ body.woocommerce-account .woocommerce-MyAccount-navigation { display: none !important; } /* ---------------------------------------------------------- * MBK ACCOUNT NAVIGATION * ---------------------------------------------------------- */ body.woocommerce-account .mbk-account-navigation { width: 280px; min-width: 280px; flex: 0 0 280px; box-sizing: border-box; background: #ffffff; } body.woocommerce-account .mbk-account-navigation-inner { width: 100%; box-sizing: border-box; padding: 28px 22px 24px; } /* ---------------------------------------------------------- * PROFILE * ---------------------------------------------------------- */ body.woocommerce-account .mbk-account-profile { display: flex; align-items: center; gap: 14px; padding: 0 8px 24px; margin-bottom: 16px; border-bottom: 1px solid #e7eeea; } body.woocommerce-account .mbk-account-avatar { width: 58px; height: 58px; flex: 0 0 58px; border-radius: 50%; overflow: hidden; background: #edf8f2; } body.woocommerce-account .mbk-account-avatar-image { display: block; width: 100%; height: 100%; object-fit: cover; } body.woocommerce-account .mbk-account-profile-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; } body.woocommerce-account .mbk-account-profile-info strong { color: #0b1713; font-size: 14px; line-height: 1.25; font-weight: 700; } body.woocommerce-account .mbk-account-profile-info span { color: #78847f; font-size: 11px; line-height: 1.3; overflow-wrap: anywhere; } body.woocommerce-account .mbk-account-profile-info small { display: inline-flex; align-self: flex-start; margin-top: 3px; padding: 4px 7px; border-radius: 999px; background: #e9f7ef; color: #087b45; font-size: 9px; line-height: 1; font-weight: 700; } /* ---------------------------------------------------------- * MENU * ---------------------------------------------------------- */ body.woocommerce-account .mbk-account-menu { display: flex; flex-direction: column; gap: 4px; } body.woocommerce-account .mbk-account-menu > a { min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 12px; border-radius: 10px; box-sizing: border-box; color: #34413c; text-decoration: none !important; font-size: 13px; font-weight: 600; transition: background .18s ease, color .18s ease, transform .18s ease; } body.woocommerce-account .mbk-account-menu > a:hover { background: #f1f8f4; color: #087b45; } body.woocommerce-account .mbk-account-menu > a.is-active { background: #e6f6ee; color: #087b45; } body.woocommerce-account .mbk-account-menu-icon { width: 22px; min-width: 22px; display: inline-flex; justify-content: center; align-items: center; color: #70817a; font-size: 15px; line-height: 1; } body.woocommerce-account .mbk-account-menu > a.is-active .mbk-account-menu-icon { color: #087b45; } body.woocommerce-account .mbk-account-menu-label { min-width: 0; line-height: 1.3; } /* ---------------------------------------------------------- * FOOTER ACTIONS * ---------------------------------------------------------- */ body.woocommerce-account .mbk-account-navigation-footer { display: flex; flex-direction: column; gap: 5px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #e7eeea; } body.woocommerce-account .mbk-account-navigation-footer a { min-height: 38px; display: flex; align-items: center; gap: 10px; padding: 0 12px; color: #087b45; text-decoration: none !important; font-size: 12px; font-weight: 600; border-radius: 9px; } body.woocommerce-account .mbk-account-navigation-footer a:hover { background: #f3f8f5; } body.woocommerce-account .mbk-account-navigation-footer .mbk-account-logout { color: #e85d4a; } /* ---------------------------------------------------------- * ACCOUNT CONTENT STRUCTURE * * Keep the MBK navigation beside endpoint content. * ---------------------------------------------------------- */ body.woocommerce-account .woocommerce-MyAccount-content { min-width: 0; flex: 1 1 auto; box-sizing: border-box; } /* ---------------------------------------------------------- * MOBILE * ---------------------------------------------------------- */ @media (max-width: 767px) { body.woocommerce-account .mbk-account-navigation { display: none !important; } body.woocommerce-account .woocommerce-MyAccount-content { width: 100% !important; min-width: 0 !important; } } /* ---------------------------------------------------------- * TABLET / SMALL DESKTOP * ---------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1099px) { body.woocommerce-account .mbk-account-navigation { width: 240px; min-width: 240px; flex-basis: 240px; } body.woocommerce-account .mbk-account-navigation-inner { padding-left: 16px; padding-right: 16px; } body.woocommerce-account .mbk-account-menu > a { font-size: 12px; } } /* * ========================================================== * V3.12.3 END * ========================================================== */ /* ========================================================== * MERCI BOKKU ACCOUNT NAVIGATION * V3.12.4.43 * * HARD DESKTOP / MOBILE VISIBILITY CONTROL * ========================================================== */ /* * Desktop and tablet: * The mobile bottom navigation must NEVER be visible. */ @media (min-width: 851px) { body.woocommerce-account .mbk-dashboard-mobile-nav { display: none !important; visibility: hidden !important; pointer-events: none !important; } } /* * Mobile only: * Restore the intended mobile bottom navigation. */ @media (max-width: 850px) { body.woocommerce-account .mbk-dashboard-mobile-nav { display: grid !important; visibility: visible !important; pointer-events: auto !important; } } /* * Safety: * Never allow mobile navigation positioning rules to affect * the desktop account layout. */ @media (min-width: 851px) { body.woocommerce-account .mbk-dashboard-mobile-nav * { pointer-events: none !important; } } /* ========================================================== MERCI BOKKU ACCOUNT RESPONSIVE OVERRIDE V3.12.4.43 The account application switches to the mobile/tablet navigation before the viewport becomes too narrow for the desktop sidebar. ========================================================== */ @media (max-width: 1100px) { body.woocommerce-account .mbk-dashboard-shell { display: block; } body.woocommerce-account .mbk-dashboard-sidebar { display: none; } body.woocommerce-account .mbk-dashboard-main { width: 100%; min-width: 0; } body.woocommerce-account .mbk-dashboard-mobile-nav { position: fixed; z-index: 99999; left: 10px; right: 10px; bottom: 10px; height: 64px; display: grid !important; grid-template-columns: repeat(5, 1fr); align-items: center; padding: 4px; border: 1px solid rgba(20,50,35,.08); border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: 0 12px 35px rgba(20,50,35,.16); backdrop-filter: blur(14px); } body.woocommerce-account .mbk-dashboard-mobile-nav a { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 55px; color: var(--mbk-muted); text-decoration: none !important; border-radius: 13px; } body.woocommerce-account .mbk-dashboard-mobile-nav a.is-active { color: var(--mbk-green); background: var(--mbk-green-soft); } body.woocommerce-account .mbk-dashboard-mobile-nav span { font-size: 17px; line-height: 1; } body.woocommerce-account .mbk-dashboard-mobile-nav small { font-size: 8px; font-weight: 700; } body.woocommerce-account .mbk-dashboard-main, body.woocommerce-account .mbk-orders-main { padding-bottom: 95px; } } @media (min-width: 1101px) { body.woocommerce-account .mbk-dashboard-mobile-nav { display: none !important; } } /* ========================================================== MERCI BOKKU ACCOUNT RESPONSIVE OVERRIDE V3.12.4.43 The account application switches to the mobile/tablet navigation before the viewport becomes too narrow for the desktop sidebar. ========================================================== */ @media (max-width: 1100px) { body.woocommerce-account .mbk-dashboard-shell { display: block; } body.woocommerce-account .mbk-dashboard-sidebar { display: none; } body.woocommerce-account .mbk-dashboard-main { width: 100%; min-width: 0; } body.woocommerce-account .mbk-dashboard-mobile-nav { position: fixed; z-index: 99999; left: 10px; right: 10px; bottom: 10px; height: 64px; display: grid !important; grid-template-columns: repeat(5, 1fr); align-items: center; padding: 4px; border: 1px solid rgba(20,50,35,.08); border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: 0 12px 35px rgba(20,50,35,.16); backdrop-filter: blur(14px); } body.woocommerce-account .mbk-dashboard-mobile-nav a { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 55px; color: var(--mbk-muted); text-decoration: none !important; border-radius: 13px; } body.woocommerce-account .mbk-dashboard-mobile-nav a.is-active { color: var(--mbk-green); background: var(--mbk-green-soft); } body.woocommerce-account .mbk-dashboard-mobile-nav span { font-size: 17px; line-height: 1; } body.woocommerce-account .mbk-dashboard-mobile-nav small { font-size: 8px; font-weight: 700; } body.woocommerce-account .mbk-dashboard-main, body.woocommerce-account .mbk-orders-main { padding-bottom: 95px; } } @media (min-width: 1101px) { body.woocommerce-account .mbk-dashboard-mobile-nav { display: none !important; } } /* MBK ACCOUNT RESPONSIVE CANONICAL V3.12.4.45 START */ /* * Desktop account layout. * * The permanent account sidebar is used only above 1100px. */ @media (min-width: 1101px) { body.woocommerce-account .mbk-dashboard-mobile-nav { display: none !important; visibility: hidden !important; } body.woocommerce-account .mbk-dashboard-sidebar { display: flex; } } /* * Tablet and mobile account layout. * * The desktop sidebar is removed and the fixed * five-item bottom navigation becomes authoritative. */ @media (max-width: 1100px) { body.woocommerce-account .mbk-dashboard-shell { display: block; } body.woocommerce-account .mbk-dashboard-sidebar { display: none !important; } body.woocommerce-account .mbk-dashboard-mobile-nav { display: grid !important; visibility: visible !important; opacity: 1 !important; position: fixed; z-index: 99999; left: 10px; right: 10px; bottom: 10px; height: 64px; grid-template-columns: repeat(5, minmax(0, 1fr)); pointer-events: auto; } body.woocommerce-account .mbk-dashboard-mobile-nav a { display: flex !important; visibility: visible !important; opacity: 1 !important; } body.woocommerce-account .woocommerce-MyAccount-content { width: 100%; float: none; } body.woocommerce-account .mbk-dashboard-content, body.woocommerce-account .mbk-orders-content { padding-bottom: 100px; } } /* * Small phone refinement. */ @media (max-width: 620px) { body.woocommerce-account .mbk-dashboard-mobile-nav { left: 8px; right: 8px; bottom: 8px; } } /* MBK ACCOUNT RESPONSIVE CANONICAL V3.12.4.45 END */