/* Scoped by the MK SMART-only layout extension. DIMASMART and backend unaffected. */
html[data-mks-design="live"] {
    --mks-yellow: #ffd000;
    --mks-dark: #111b25;
    --mks-gray: #f4f5f5;
    --mks-border: #dce1e3;
    --mks-muted: #626c73;
    scroll-padding-top: 110px;
}
html[data-mks-design="live"] body { background: var(--mks-gray); color: #17232c; }
.mks-live-design { font-family: Arial, Helvetica, sans-serif; background: var(--mks-gray); color: #17232c; }
.mks-live-design > main { min-height: 45vh; background: var(--mks-gray); }
.mks-live-design > .mkp-header { overflow: visible; isolation: auto; flex-shrink: 0; background: #fff; }
.mks-live-design > .mkp-footer { overflow: visible; flex-shrink: 0; background: var(--mks-dark); color: #fff; }
.mks-live-footer .mkp-footer-logo { background: transparent; padding: 0; border-radius: 0; }
.mks-live-design .mkp-nav a[aria-current="page"]::after { transform: scaleX(1); }
/* A drawn outline arrow avoids iOS turning the old character into a blue emoji. */
.mks-link-arrow { display: inline-block; width: 1.1em; height: 1.1em; flex: 0 0 auto; vertical-align: -.16em; overflow: visible; color: inherit; pointer-events: none; }
.mkp-button .mks-link-arrow { width: 1.15em; height: 1.15em; }
.mks-live-design > main > .container,
.mks-live-design .mks-contact-page > .s_text_block > .container,
.mks-live-design .mks-helpdesk-form { max-width: 1280px; width: calc(100% - 112px); padding-left: 0; padding-right: 0; }
.mks-live-design > main > .container { padding-top: 45px; padding-bottom: 65px; }
.mks-live-design h1,.mks-live-design h2,.mks-live-design h3,.mks-live-design h4 { font-family: Arial, Helvetica, sans-serif; letter-spacing: -.035em; }
.mks-live-design > main h1:not(.mkp h1) { font-weight: 400; }
.mks-live-design .btn { border-radius: 28px; font-weight: 600; padding: 12px 22px; box-shadow: none; }
.mks-live-design .btn-sm { padding: 7px 14px; font-size: 13px; }
.mks-live-design .btn-primary,.mks-live-design .btn-fill-primary {
    --btn-bg: var(--mks-yellow); --btn-border-color: var(--mks-yellow); --btn-color: var(--mks-dark);
    --btn-hover-bg: #eebf00; --btn-hover-border-color: #eebf00; --btn-hover-color: var(--mks-dark);
    --btn-active-bg: #eebf00; --btn-active-color: var(--mks-dark);
    color: var(--mks-dark)!important; background: var(--mks-yellow)!important; border-color: var(--mks-yellow)!important;
}
.mks-live-design .btn-primary:hover,.mks-live-design .btn-primary:focus { background: #eebf00!important; border-color: #eebf00!important; }
.mks-live-design .btn-outline-primary { color: var(--mks-dark); border-color: #6b747b; background: transparent; }
.mks-live-design .btn-outline-primary:hover,.mks-live-design .btn-outline-primary.active { background: var(--mks-yellow); color: var(--mks-dark); border-color: var(--mks-yellow); }
.mks-live-design .text-primary { color: #806400!important; }
.mks-live-design .btn-link { color: #263c4b; }
.mks-live-design .bg-primary { background-color: var(--mks-dark)!important; }
.mks-live-design .text-bg-primary { background-color: var(--mks-yellow)!important; color: var(--mks-dark)!important; }
.mks-live-design .form-control,.mks-live-design .form-select { border: 1px solid #cdd5d9; background-color: #fff; color: #17232c; border-radius: 9px; min-height: 48px; padding: 11px 14px; box-shadow: none; }
.mks-live-design .form-control:focus,.mks-live-design .form-select:focus { border-color: #9e7f00; box-shadow: 0 0 0 3px #ffd00029; }
.mks-live-design .form-control.is-invalid { border-color: var(--danger,#dc3545); }
.mks-live-design .form-check-input:checked { background-color: #8d7000; border-color: #8d7000; }
.mks-live-design .input-group > .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.mks-live-design .input-group > .btn:last-child { border-radius: 0 9px 9px 0; }
.mks-live-design a:focus-visible,.mks-live-design button:focus-visible { outline: 3px solid #9c7900; outline-offset: 4px; }
.mks-live-design .s_website_form_label,.mks-live-design .form-label { font-size: 14px; font-weight: 600; }
.mks-live-design .s_website_form_mark { color: #806400; }
.mks-live-design .s_website_form_send span { margin-left: 20px; }
.mks-live-design .card { border-radius: 15px; border-color: var(--mks-border); overflow: clip; }
.mks-live-design .card-header { background: #edf0f1; border-color: var(--mks-border); }
.mks-live-design .breadcrumb { font-size: 13px; color: var(--mks-muted); }
.mks-live-design .page-link { color: var(--mks-dark); }
.mks-live-design .page-item.active .page-link { background: var(--mks-yellow); border-color: var(--mks-yellow); color: var(--mks-dark); }

/* Editorial page introductions mirror the spacious homepage. */
.mks-live-design .mks-page-intro { padding: 28px 0 66px; background: #ecefef; border-bottom: 1px solid #dfe5e7; }
.mks-page-intro .mks-breadcrumb { display: inline-flex; gap: 14px; align-items: center; color: #677279; font-size: 11px; letter-spacing: .02em; }
.mks-page-intro .mks-breadcrumb span { color: #a2aaaf; }
.mks-intro-grid { display: grid; grid-template-columns: 1fr 230px; gap: 70px; align-items: center; padding-top: 45px; }
.mks-intro-grid .mkp-eyebrow { display: block; color: #6e5700; margin-bottom: 18px; font-size: 10px; letter-spacing: .13em; }
.mks-page-intro h1 { font-size: clamp(38px,4.4vw,62px); font-weight: 400; line-height: 1.05; max-width: 800px; }
.mks-page-intro p { max-width: 700px; margin-top: 24px; font-size: 18px; color: #637079; line-height: 1.65; }
.mks-intro-symbol { width: 180px; height: 180px; border-radius: 50%; background: var(--mks-yellow); display: flex; align-items: center; justify-content: center; position: relative; justify-self: center; }
.mks-intro-symbol::after { content: ""; position: absolute; inset: -18px; border: 1px solid #cdd5d8; border-radius: 50%; }
.mks-intro-symbol i { font-size: 62px; color: var(--mks-dark); }
.mks-small-label { display: block; color: #786000; font-size: 10px; font-weight: 700; letter-spacing: .13em; margin-bottom: 18px; }

/* Contact: retain the native Odoo form and its signed fields. */
.mks-live-design .mks-contact-page > .s_text_block { padding: 70px 0 85px!important; background: var(--mks-gray); }
.mks-live-design .mks-contact-page .s_website_form > .container { padding: 0; }
.mks-live-design .mks-contact-page .mks-form-intro { font-size: 18px; color: #626c73; margin-bottom: 30px; max-width: 620px; }
.mks-live-design #contactus_form { background: #fff; padding: 30px; border: 1px solid var(--mks-border); border-radius: 16px; }
.mks-live-design #contactus_form textarea { min-height: 165px; }
.mks-live-design #contactus_form .s_website_form_submit { text-align: left!important; }
.mks-live-design .mks-contact-card { background: var(--mks-dark); color: #fff; padding: 35px 30px; border-radius: 17px; }
.mks-live-design .mks-contact-card .mks-small-label { color: var(--mks-yellow); }
.mks-live-design .mks-contact-card h2 { color: #fff; font-size: 35px; line-height: 1.1; font-weight: 400; margin: 0 0 22px; }
.mks-live-design .mks-contact-card p { color: #bbc9d2; line-height: 1.65; font-size: 15px; margin-bottom: 25px; }
.mks-contact-detail { display: block; border-top: 1px solid #ffffff26; padding: 18px 0 3px; margin-top: 16px; color: #fff!important; text-decoration: none; overflow-wrap: anywhere; }
.mks-contact-detail span { display: block; color: #bbc9d2; font-size: 12px; margin-bottom: 5px; }
.mks-contact-detail strong { font-size: 17px; font-weight: 400; }
.mks-support-note { border: 1px solid var(--mks-border); border-radius: 15px; padding: 27px; margin-top: 24px; background: #fff; }
.mks-support-note h3 { font-size: 23px; font-weight: 400; line-height: 1.15; margin-bottom: 15px; }
.mks-support-note p { color: #626c73; font-size: 15px; line-height: 1.65; }
.mks-support-note a { font-size: 14px; color: #263c4b; text-decoration: none; font-weight: 600; }

/* Assistance and native ticket forms. */
.mks-service-heading { position: relative; padding: 15px 0 35px; }
.mks-service-heading h2 { font-size: 40px; line-height: 1.08; font-weight: 400; }
.mks-service-heading a { color: #263c4b; position: absolute; right: 0; bottom: 40px; font-size: 15px; }
.mks-live-design .team_card { box-shadow: none!important; background: #fff; border: 1px solid #dce1e3!important; transition: transform .2s,border-color .2s; }
.mks-live-design .team_card:hover { transform: translateY(-5px); border-color: #aa8700!important; }
.mks-team-art { height: 175px; background: #e5eaec; position: relative; overflow: hidden; }
.mks-team-number { position: absolute; left: 25px; top: 20px; color: #71828d; font-size: 13px; }
.mks-team-art .fa { position: absolute; width: 98px; height: 98px; background: var(--mks-yellow); color: var(--mks-dark); border-radius: 50%; display: grid; place-items: center; font-size: 37px; right: 30px; bottom: 25px; }
.mks-team-art::after { content: ""; position: absolute; width: 155px; height: 155px; border: 1px solid #b9c6cc; border-radius: 50%; right: 0; bottom: -4px; }
.mks-live-design .team_card .card-body { padding: 24px; min-height: 210px; }
.mks-live-design .team_card h2 { font-size: 25px; line-height: 1.16; font-weight: 400!important; margin: 0 0 28px!important; }
.mks-team-cta { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 14px; margin-top: auto; color: #344b59; }
.mks-team-cta span { font-size: 23px; }
.mks-live-design .mks-helpdesk-form { padding-top: 50px; padding-bottom: 65px; margin-top: 0!important; }
.mks-live-design .mks-helpdesk-form #helpdesk_section { background: #fff; border: 1px solid var(--mks-border); border-radius: 16px; padding: 15px; }
.mks-live-design .mks-helpdesk-form h2 { font-weight: 400; font-size: 25px; margin-bottom: 25px; }
.mks-live-design .mks-helpdesk-form #right-column .mks-support-note { margin-top: 54px; }
.mks-live-design .mks-helpdesk-form #about_team { width: 100%!important; float: none!important; }
.mks-live-design .mks-helpdesk-form textarea { min-height: 180px; }

/* Appointments: native booking controls remain in place when configured. */
.mks-live-design .mks-appointment-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; padding-top: 65px; padding-bottom: 75px; max-width: 1280px; width: calc(100% - 112px); }
/* Odoo's container clearfix pseudo-elements must not occupy grid cells. */
.mks-live-design #wrap .mks-appointment-intro::before,.mks-live-design #wrap .mks-appointment-intro::after { content: none; }
.mks-appointment-copy h2 { font-size: 43px; line-height: 1.05; font-weight: 400; margin-bottom: 25px; }
.mks-appointment-copy p { color: #626c73; line-height: 1.7; font-size: 17px; margin-bottom: 27px; }
.mks-appointment-steps { padding: 10px 0; }
.mks-appointment-steps article { display: grid; grid-template-columns: 40px 1fr; gap: 18px; margin-bottom: 28px; }
.mks-appointment-steps article > span { color: #806400; font-size: 14px; padding-top: 5px; }
.mks-appointment-steps h3 { font-size: 23px; font-weight: 400; margin-bottom: 10px; }
.mks-appointment-steps p { color: #626c73; font-size: 16px; line-height: 1.6; }
.mks-live-design .o_appointment_index:has(.mks-appointment-intro) .o_appointment_not_found { display: none; }
.mks-live-design .o_appointment_index:has(.mks-appointment-intro) .o_appointment_choice { padding: 0; margin: 0; }
.mks-live-design .o_appointment_choice { padding-top: 30px; padding-bottom: 60px; }
.mks-live-design .o_appointment_choice .card { box-shadow: none!important; background: #fff; }

/* Customer portal, quotations, legal information and confirmation screens. */
.mks-live-design .o_portal_wrap { padding-top: 35px; padding-bottom: 60px; }
.mks-live-design .o_portal_wrap h1 { font-size: clamp(30px,3.5vw,46px); line-height: 1.1; margin-bottom: 24px; }
.mks-live-design .o_portal_wrap .table { background: #fff; color: #17232c; border-color: var(--mks-border); }
.mks-live-design .o_portal_wrap .table > thead { background: #e9edef; font-size: 13px; }
.mks-live-design .o_portal_wrap .table th,.mks-live-design .o_portal_wrap .table td { padding: 15px 12px; }
.mks-live-design .o_portal_wrap .table a { color: #334f60; }
.mks-live-design .o_portal_docs .o_portal_index_card { border: 1px solid var(--mks-border); border-radius: 14px; background: #fff; }
.mks-live-design .o_portal_docs .o_portal_index_card:hover { border-color: #a78918; }
/* First-party outline symbols, confined to the MK SMART portal. */
.mks-live-design .o_portal_docs .mks-portal-icon {
    width: 52px; height: 52px; min-width: 52px; flex: 0 0 52px;
    display: flex!important; align-items: center; justify-content: center;
    align-self: center!important; border-radius: 15px;
    color: var(--mks-dark); background: #fff3b3; border: 1px solid #f0dc83;
    transition: background-color .18s ease, border-color .18s ease;
}
.mks-live-design .o_portal_docs .mks-portal-glyph { display: block; width: 28px; height: 28px; flex: 0 0 auto; }
.mks-live-design .o_portal_index_card > a:hover .mks-portal-icon,
.mks-live-design .o_portal_index_card > a:focus-visible .mks-portal-icon { background: var(--mks-yellow); border-color: var(--mks-yellow); }
@media (max-width: 575.98px) {
    .mks-live-design .o_portal_docs .mks-portal-icon { width: 46px; height: 46px; min-width: 46px; flex-basis: 46px; border-radius: 13px; }
    .mks-live-design .o_portal_docs .mks-portal-glyph { width: 25px; height: 25px; }
}
.mks-live-design .o_portal_sidebar .card { background: #fff; }
.mks-live-design .o_portal_chatter { background: #fff; border: 1px solid var(--mks-border); border-radius: 15px; padding: 25px; }
.mks-live-design .o_portal_navbar { background: transparent!important; border-bottom: 1px solid var(--mks-border); padding-bottom: 20px; }
.mks-live-design[data-mks-path="/terms"] > main > #wrap,
.mks-live-design[data-mks-path="/cookie-policy"] > main > #wrap { max-width: 1120px; margin: 55px auto 70px; width: calc(100% - 70px); background: #fff; border-radius: 18px; padding: 42px; line-height: 1.85; border: 1px solid var(--mks-border); }
.mks-live-design[data-mks-path="/terms"] h1,.mks-live-design[data-mks-path="/cookie-policy"] h1 { font-size: clamp(28px,3.5vw,45px); margin-bottom: 30px; }
.mks-live-design[data-mks-path$="-submitted"] > main,.mks-live-design[data-mks-path="/contactus-thank-you"] > main { padding: 55px 0; }
.mks-live-design .oe_website_login_container { max-width: 520px; width: calc(100% - 40px); margin: 65px auto 75px; padding: 40px; background: #fff; border: 1px solid var(--mks-border); border-radius: 18px; }
.mks-live-design .oe_login_form,.mks-live-design .oe_signup_form,.mks-live-design .oe_reset_password_form { max-width: none; margin: 0; }
.mks-live-design .oe_login_buttons { padding-top: 25px!important; }
.mks-login-heading { text-align: left; margin-bottom: 32px; }
.mks-login-heading h1 { font-size: 38px; font-weight: 400; line-height: 1.1; }
.mks-login-heading p { font-size: 15px; color: #68777f; line-height: 1.65; margin: 16px 0 0; }
.mks-live-design #products_grid .oe_product_cart { border: 1px solid var(--mks-border); border-radius: 15px; overflow: hidden; background: #fff; }
.mks-live-design .oe_product_cart .o_wsale_product_information { padding: 20px; }
.mks-live-design #products_grid_before { background: transparent; }

/* Native Odoo editorial pages: the same visual language, no stock case studies. */
.mks-services-content { max-width: 1180px; width: calc(100% - 80px); margin: 0 auto; padding: 60px 0 75px; }
.mks-services-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.mks-service-card { display: flex; flex-direction: column; border: 1px solid var(--mks-border); border-radius: 16px; background: #fff; padding: 30px; color: #17232c; text-decoration: none; }
.mks-service-card:hover { border-color: #967600; color: #17232c; }
.mks-service-card .fa { color: #8a6c00; font-size: 28px; margin-bottom: 24px; }
.mks-service-card h2 { font-size: 25px; line-height: 1.16; margin-bottom: 18px; }
.mks-service-card p { color: #626c73; line-height: 1.65; font-size: 15px; }
.mks-service-card span { margin-top: auto; padding-top: 15px; font-weight: 600; }
.mks-service-editorial { display: grid; grid-template-columns: minmax(0,2fr) minmax(240px,1fr); gap: 65px; }
.mks-service-editorial article section { margin-bottom: 40px; }
.mks-service-editorial h2 { font-size: 30px; font-weight: 400; margin-bottom: 18px; }
.mks-service-editorial p { line-height: 1.85; color: #4f5f69; }
.mks-service-editorial aside { align-self: start; padding: 30px; border-radius: 16px; background: #111b25; color: #fff; }
.mks-service-editorial aside h2,.mks-service-editorial aside h3 { color: #fff; }
.mks-service-editorial aside p { color: #bdcbd3; }
.mks-service-editorial aside a:not(.btn) { color: #ffd000; overflow-wrap: anywhere; }
.mks-service-editorial details { border-top: 1px solid var(--mks-border); padding: 20px 0; }
.mks-service-editorial summary { cursor: pointer; font-weight: 600; }
.mks-service-editorial details p { margin: 15px 0 0; }
.mks-services-related { border-top: 1px solid var(--mks-border); padding-top: 35px; margin-top: 40px; }
.mks-services-related a { display: inline-block; margin: 8px 20px 8px 0; color: #394e5b; }
@media(max-width:900px) { .mks-services-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .mks-service-editorial { gap:35px; } }
@media(max-width:700px) { .mks-services-content { width:calc(100% - 40px); padding:35px 0 45px; } .mks-services-grid,.mks-service-editorial { grid-template-columns:1fr; gap:24px; } .mks-service-card { padding:25px; } }

@media(max-width:1050px) {
    .mks-live-design > main > .container,.mks-live-design .mks-contact-page > .s_text_block > .container,.mks-live-design .mks-helpdesk-form,.mks-live-design .mks-appointment-intro { width: calc(100% - 70px); }
    .mks-intro-grid { grid-template-columns: 1fr 150px; gap: 40px; }
    .mks-intro-symbol { width: 120px; height: 120px; }
    .mks-intro-symbol i { font-size: 45px; }
    .mks-live-design .mks-appointment-intro { gap: 45px; }
}
@media(max-width:700px) {
    html[data-mks-design="live"] { scroll-padding-top: 85px; }
    .mks-live-design > main > .container,.mks-live-design .mks-contact-page > .s_text_block > .container,.mks-live-design .mks-helpdesk-form,.mks-live-design .mks-appointment-intro { width: calc(100% - 40px); }
    .mks-live-design .mks-page-intro { padding: 23px 0 38px; }
    .mks-intro-grid { grid-template-columns: 1fr; gap: 25px; padding-top: 32px; }
    .mks-page-intro h1 { font-size: 39px; }
    .mks-page-intro p { font-size: 16px; margin-top: 22px; }
    .mks-intro-symbol { display: none; }
    .mks-live-design .mks-contact-page > .s_text_block { padding: 36px 0 45px!important; }
    .mks-live-design #contactus_form { padding: 22px 17px; }
    .mks-live-design .mks-contact-page .mks-form-intro { font-size: 16px; }
    .mks-live-design .mks-contact-card { padding: 30px 24px; }
    .mks-service-heading h2 { font-size: 33px; }
    .mks-service-heading a { display: inline-block; position: static; margin-top: 18px; }
    .mks-live-design > main > .container { padding-top: 28px; padding-bottom: 40px; }
    .mks-live-design .team_card .card-body { min-height: 175px; }
    .mks-team-art { height: 155px; }
    .mks-live-design .mks-helpdesk-form { padding-top: 30px; padding-bottom: 40px; }
    .mks-live-design .mks-helpdesk-form > .row > .col-md-8 { padding-left: 12px!important; }
    .mks-live-design .mks-helpdesk-form .container { padding: 0; }
    .mks-live-design .mks-helpdesk-form #helpdesk_section { padding: 12px 20px; }
    .mks-live-design .mks-helpdesk-form #right-column .mks-support-note { margin-top: 20px; }
    .mks-live-design .s_website_form_label { max-width: 100%; }
    .mks-live-design .mks-appointment-intro { grid-template-columns: 1fr; gap: 30px; padding-top: 40px; padding-bottom: 35px; }
    .mks-appointment-copy h2 { font-size: 35px; }
    .mks-appointment-copy p { font-size: 16px; }
    .mks-live-design .oe_website_login_container { margin: 36px auto 45px; padding: 28px 23px; }
    .mks-login-heading h1 { font-size: 33px; }
    .mks-live-design .o_portal_wrap { padding-top: 20px; }
    .mks-live-design .o_portal_chatter { padding: 16px; }
    .mks-live-design .o_portal_wrap .table th,.mks-live-design .o_portal_wrap .table td { padding: 12px 8px; }
    .mks-live-design[data-mks-path="/terms"] > main > #wrap,.mks-live-design[data-mks-path="/cookie-policy"] > main > #wrap { margin: 30px auto 40px; width: calc(100% - 30px); padding: 24px; }
}
@media(prefers-reduced-motion:reduce) { .mks-live-design .team_card { transition: none; } }
@media print { .mks-live-header,.mks-live-footer { display: none!important; } .mks-live-design { background: white; } }