/* maksoftbg theme - presentation only. Ported from the demo at
   themes/ms/base/maksoftbg/demo/*.html, retargeted at the block/hook markup
   the CMS actually renders (see pages/*.php, blocks/*.php). */

:root {
    --mk-red: var(--ms-color-primary, #d71920);
    --mk-ink: #25282d;
    --mk-soft: #f7f8fa;
    --mk-line: #e8eaed;
}

body.maksoftbg-theme {
    color: var(--mk-ink);
    background: #fff;
}

.mk-wrap {
    width: 100%;
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.text-mk, body.maksoftbg-theme a.text-mk { color: var(--mk-red) !important; }
.bg-soft { background: var(--mk-soft); }

.btn-mk, a.btn-mk {
    background: var(--mk-red);
    border-color: var(--mk-red);
    color: #fff;
}
.btn-mk:hover, a.btn-mk:hover {
    background: #b91218;
    border-color: #b91218;
    color: #fff;
}

.mk-section-kicker, .mk-section-title small {
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--mk-red);
}

/* ---------- Header ---------- */

.mk-topbar {
    background: #f8f9fa;
    border-bottom: 1px solid var(--mk-line);
    font-size: .875rem;
    padding: .45rem 0;
}
.mk-topbar__links a { color: #5f6368; text-decoration: none; margin-right: .25rem; }
.mk-topbar__links a:hover { color: var(--mk-red); }

/* Same circular treatment as .mk-icon-btn / .ms-user-action, so the social
   icons don't look like a mismatched size sitting inline with them in
   .mk-header-actions. */
.mk-topbar__social a {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mk-line);
    border-radius: 50%;
    background: #fff;
    color: #333;
    text-decoration: none;
    font-size: 1rem;
}
.mk-topbar__social a:hover { color: var(--mk-red); border-color: #f2b8ba; }

/* login-modal.php's trigger is 42px everywhere else it's used; shrunk here
   to match the other 38px circles in this same row. */
.mk-header-actions .ms-login-trigger { width: 38px; height: 38px; font-size: 18px; }
.mk-header-actions .ms-login-widget { z-index: 4; }
body.maksoftbg-theme > .mk-login-modal-overlay {
    z-index: 200000;
}

.mk-header .navbar-brand.mk-logo img { max-height: 44px; }

/*
 * Three-row desktop header: utility, identity/search/actions, primary menu.
 * Mobile keeps only the identity row and opens one offcanvas with two tabs.
 */
.mk-header-actions { flex-wrap: nowrap; }

/* Logo+topMenu and the icon/CTA/toggler cluster wrap onto their own line
   below ~576px (.navbar's own flex-wrap:wrap on .mk-wrap handles that), but
   the cluster's own content - search/account/question/CTA/toggler, all
   nowrap - can still overflow its line on the narrowest phones. Shrink the
   CTA and gaps first, then drop the least essential icon rather than let the
   toggler clip off-screen. */
@media (max-width: 480px) {
    .mk-header-actions { gap: 6px; }
    .mk-header-actions .btn-mk { padding: .4rem .85rem; font-size: .85rem; }
}
@media (max-width: 380px) {
    .mk-header-actions .mk-question-btn { display: none; }
}

.mk-mainnav-bar {
    /* Falls back to a light gray, not white, so the bar reads as a distinct
       strip under .mk-header-bar even on a site that never configured
       --ms-color-bg (var()'s fallback only applies when the property is
       unset - it still respects a real configured color). */
    background: var(--ms-color-bg, var(--mk-soft));
    /* Bootstrap's .navbar rule itself sets padding-top/bottom via
       --bs-navbar-padding-y regardless of collapse state - without this
       override that padding alone rendered a colored strip even while
       .navbar-collapse was display:none on mobile. */
    padding-top: 0;
    padding-bottom: 0;
}
.mk-mainnav-bar .navbar-collapse { padding: .15rem 0; }
.mk-primary-menu .nav-link { padding-top: .4rem; padding-bottom: .4rem; }

/* Logo/topMenu column and the icon/CTA/toggler cluster both stay their
   natural width; the site title takes whatever is left between them and
   clamps to 2 lines instead of growing the bar's height when it's long. */
.mk-site-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 .5rem;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.25;
    color: #6c757d !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.mk-icon-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mk-line);
    border-radius: 50%;
    color: #333;
    text-decoration: none;
    background: #fff;
    font-size: 1rem;
}
.mk-icon-btn:hover { color: var(--mk-red); border-color: #f2b8ba; }

.mk-primary-menu .nav-link { color: var(--mk-ink); font-weight: 600; }
.mk-primary-menu .nav-link:hover { color: var(--mk-red); }
.mk-primary-menu .dropdown-item:hover,
.mk-primary-menu .dropdown-item:focus { color: var(--mk-red); background: var(--mk-soft); }

/*
 * Top-level menu links stay real <a href> links - no data-bs-toggle="dropdown"
 * on them (see layout/header.php) - so a click navigates to the parent page.
 * The submenu opens on hover/focus (desktop) through the caret-only
 * .mk-dropdown-toggle button (mobile, no hover) below, same split
 * themes/ms/base/flatdesign uses (.flat-dropdown-toggle).
 */
.mk-dropdown-toggle {
    display: none;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.mk-dropdown-toggle::after {
    content: "";
    display: inline-block;
    width: .5em;
    height: .5em;
    border-right: .12em solid currentColor;
    border-bottom: .12em solid currentColor;
    transform: rotate(45deg);
    transition: transform .15s ease;
}
.mk-primary-menu .nav-item.open > .mk-dropdown-toggle::after { transform: rotate(-135deg); }

@media (min-width: 992px) {
    .mk-primary-menu .nav-item.dropdown {
        display: flex;
        align-items: center;
    }
    .mk-primary-menu .nav-item.dropdown > .nav-link {
        padding-right: .25rem;
    }
    .mk-primary-menu .nav-item.dropdown > .mk-dropdown-toggle {
        display: inline-flex;
        width: 28px;
        height: 40px;
        align-items: center;
        justify-content: center;
        margin-left: -.2rem;
    }
    .mk-primary-menu .nav-item.dropdown > .dropdown-menu {
        top: 100%;
        bottom: auto;
        max-height: calc(100vh - 170px);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        scrollbar-gutter: stable;
        -webkit-overflow-scrolling: touch;
    }
    .mk-primary-menu .nav-item.dropdown:hover > .dropdown-menu,
    .mk-primary-menu .nav-item.dropdown:focus-within > .dropdown-menu,
    .mk-primary-menu .nav-item.dropdown.open > .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}

@media (max-width: 991.98px) {
    .mk-primary-menu .nav-item.dropdown {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }
    .mk-primary-menu .nav-item.dropdown .nav-link { flex: 1 1 auto; }
    .mk-dropdown-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        flex: 0 0 auto;
    }
    .mk-primary-menu .dropdown-menu {
        display: none;
        position: static;
        float: none;
        width: 100%;
        margin: 0;
        padding: 0 0 .5rem 1rem;
        border: 0;
        box-shadow: none;
        background: transparent;
    }
    .mk-primary-menu .nav-item.open > .dropdown-menu { display: block; }
}

.mk-search-panel .btn-mk { border: 0; }

/* User-actions partial (cart/liked/favorites/compare) restyled to the
   theme's circular outline look. */
.ms-user-actions { gap: 8px !important; }
.ms-user-action {
    width: 38px !important;
    height: 38px !important;
    border: 1px solid var(--mk-line);
    border-radius: 50%;
    color: #333 !important;
}
.ms-user-action:hover, .ms-user-action-active { color: var(--mk-red) !important; border-color: #f2b8ba; }
.ms-user-actions-bootstrap-icons .ms-user-action-icon { font-size: 20px !important; }
.ms-user-action-count { background: var(--mk-red) !important; }

/* ---------- Page hero / main image ---------- */

.mk-page-title { font-weight: 700; }

.mk-main-image {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    background: #f1f3f5;
    min-height: 300px;
}
.mk-main-image img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; display: block; }
.mk-image-like {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .94);
    border: 0;
    box-shadow: 0 .3rem 1rem rgba(0, 0, 0, .12);
    color: #333;
}
.mk-image-like:hover, .mk-image-like.active { color: var(--mk-red); }

/* page.breadcrumbs.html (get_pNavigation()) is a flat run of <a> links
   joined by "&nbsp;/&nbsp;", not a Bootstrap <ol class="breadcrumb"> list -
   styled as plain inline text/links rather than assuming that markup. When
   logged in with edit rights it also carries " [ Add | Edit ] Name, Logout"
   appended to the same string - the bold tag around the name is legacy
   markup, kept as-is rather than restyled, so it stays recognisable as the
   same admin affordance across every Maksoft theme. */
.mk-breadcrumb { color: #6c757d; }
.mk-breadcrumb a { color: #6c757d; text-decoration: none; }
.mk-breadcrumb a:hover { color: var(--mk-red); text-decoration: underline; }
.mk-breadcrumb a.selected { color: var(--mk-ink); font-weight: 600; }
.mk-breadcrumb b { color: var(--mk-ink); }

/* ---------- PageFlow blocks ---------- */

.mk-pageflow { border-radius: 1.25rem; padding: 1.4rem 1.5rem; }
.mk-pf-problem { background: #fff5f5; border-left: 4px solid #dc3545; }
.mk-pf-solution { background: #f3f7ff; border-left: 4px solid #4f74c8; }
.mk-pf-benefits { background: #f6fbf7; border-left: 4px solid #4b9a66; }
.mk-pf-proof { background: #fffaf0; border-left: 4px solid #d5a43c; }
.mk-pf-action { background: linear-gradient(135deg, #fff4f4, #fff); border: 1px solid #f4c8ca; }

/* ---------- Subpages grid (rendered by hook('sub_pages') through this
   theme's own blocks/subpages.php - a flat, photo-less tile grid matching
   demo/maksoft_homepage.html's div#products, since real subpages on this
   site carry no photo). ---------- */

.mk-product-tile {
    display: block;
    background: var(--mk-soft);
    border: 1px solid var(--mk-line);
    border-radius: 1rem;
    padding: 1.1rem 1.25rem;
    color: var(--mk-ink);
    text-decoration: none;
    transition: .2s;
}
.mk-product-tile:hover { transform: translateY(-2px); border-color: #f0b7b9; color: var(--mk-ink); }
.mk-product-tile strong { display: block; font-size: 1rem; }
.mk-product-tile small { font-size: .82rem; }
/*
 * Site's own configured "more" label (Sites.MoreText, via
 * ms_maksoftbg_more_text() - an arrow-only glyph on this site, real text on
 * others), a visual affordance only - the whole tile is already the <a>, so
 * this is a <span>, never a nested link.
 */
.mk-product-tile__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: .75rem;
    padding: .35rem 1rem;
    border: 1px solid var(--mk-line);
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--mk-ink);
    background: #fff;
}
.mk-product-tile:hover .mk-product-tile__cta { border-color: #f0b7b9; color: var(--mk-red); }
/*
 * aspect-ratio + object-fit:contain, not a fixed height + object-fit:cover -
 * a fixed height cropped every image to whatever rectangle the box happened
 * to be, regardless of the photo's own proportions (the "everything comes
 * out square" complaint). 4/3 fits typical product photography without
 * letterboxing most of them; contain never crops or upscales past the
 * image's own resolution, so a source that is only as big as some other
 * page's small "preview" cap (see ms_maksoftbg_card_image_data()) shows at
 * its real size on --mk-soft instead of being stretched and going soft.
 */
.mk-product-tile__image { display: block; position: relative; margin: -1.1rem -1.25rem .75rem; border-radius: 1rem 1rem 0 0; overflow: hidden; aspect-ratio: 4 / 3; background: var(--mk-soft); }
.mk-product-tile__image img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.mk-product-tile__price {
    position: absolute;
    left: .6rem;
    bottom: .6rem;
    background: rgba(27, 27, 27, .86);
    color: #fff;
    border-radius: .7rem;
    padding: .3rem .55rem;
    font-size: .78rem;
    font-weight: 700;
}

/*
 * Subpage tiles that DO carry a photo - title-bar-over-photo, matching
 * themes/ms/base/flatdesign's generic subpages renderer (.subpage-title /
 * .subpage-image in its theme.css): a full-width colored title bar above a
 * natural, uncropped photo inside a bordered/shadowed card, rather than this
 * theme's own flat .mk-product-tile (still used for the photo-less case).
 */
.mk-subpage-card {
    display: block;
    background: rgba(255, 255, 255, .82);
    border: 1px solid var(--mk-line);
    border-radius: .75rem;
    overflow: hidden;
    color: var(--mk-ink);
    text-decoration: none;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .08);
    transition: .2s;
}
.mk-subpage-card:hover { transform: translateY(-2px); color: var(--mk-ink); box-shadow: 0 6px 16px rgba(0, 0, 0, .12); }
.mk-subpage-card__title {
    display: block;
    background: rgba(231, 229, 230, .94);
    color: var(--mk-ink);
    border-bottom: 1px solid rgba(92, 44, 55, .12);
    padding: .8rem 1rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
}
.mk-subpage-card__title:hover { color: var(--mk-red); }
.mk-subpage-card__image { display: block; position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--mk-soft); }
.mk-subpage-card__image-link { display: block; width: 100%; height: 100%; }
.mk-subpage-card__image img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.mk-subpage-card__price {
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 2;
    left: .55rem;
    bottom: .55rem;
    width: min(36%, 6.25rem);
    background: rgba(255, 255, 255, .84);
    color: var(--mk-ink);
    border: 1px solid rgba(92, 44, 55, .12);
    border-radius: .75rem;
    padding: .24rem .3rem;
    box-shadow: 0 .25rem .8rem rgba(0, 0, 0, .1);
    backdrop-filter: blur(5px);
}
.mk-subpage-card__price-old {
    display: block;
    padding: .05rem .05rem .22rem;
    color: #8a8d92;
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    text-decoration: line-through;
    text-decoration-color: var(--mk-red);
}
.mk-subpage-card__price-part {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .03rem;
    padding: .18rem .05rem;
    text-align: center;
}
.mk-subpage-card__price-part + .mk-subpage-card__price-part {
    border-top: 1px solid rgba(92, 44, 55, .12);
}
.mk-subpage-card__price-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .22rem;
}
.mk-subpage-card__price-part i { color: #52565c; font-size: .95rem; line-height: 1; }
.mk-subpage-card__price-part strong { font-size: .84rem; line-height: 1.1; }
.mk-subpage-card__price-part small { color: #60646a; font-size: .54rem; line-height: 1.12; }
.mk-subpage-card__price-value,
.mk-subpage-card__price-total strong { color: var(--mk-red); }
.mk-subpage-card__price-total strong { font-size: 1rem; }
.mk-subpage-card__offer {
    position: absolute;
    z-index: 2;
    right: .55rem;
    bottom: .55rem;
    display: flex;
    width: min(46%, 9rem);
    min-height: 2.65rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .06rem;
    padding: .3rem .48rem;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: .75rem;
    background: rgba(215, 25, 32, .9);
    box-shadow: 0 .25rem .8rem rgba(0, 0, 0, .14);
    color: #fff;
    text-align: center;
    text-decoration: none;
    backdrop-filter: blur(5px);
}
.mk-subpage-card__offer strong { font-size: .78rem; line-height: 1.08; }
.mk-subpage-card__offer small { color: rgba(255, 255, 255, .86); font-size: .55rem; line-height: 1.12; }
.mk-subpage-card__offer:hover { background: #b91218; color: #fff; }
.mk-subpage-card__like {
    z-index: 3;
    top: .55rem;
    right: .55rem;
    width: 38px;
    height: 38px;
    cursor: pointer;
}
.mk-subpage-card__like[data-mk-like-busy="1"] { opacity: .6; pointer-events: none; }
.mk-subpage-card__body { display: block; padding: .9rem 1rem; }
.mk-subpage-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: .6rem;
    padding: .3rem .9rem;
    border: 1px solid var(--mk-line);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--mk-ink);
    background: var(--mk-soft);
}
.mk-subpage-card:hover .mk-subpage-card__cta { border-color: #f0b7b9; color: var(--mk-red); }

/* ---------- Calculator (web/admin/Templates/maksoft.net/code/print.php +
   print_calc.php - legacy markup, given a presentable frame here) ---------- */

.mk-calculate-anchor { scroll-margin-top: 110px; }
.mk-calculator-section { background: var(--mk-soft); border-radius: 1.25rem; }
.mk-calculator-section #page_prices { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.mk-calculator-section #page_prices th,
.mk-calculator-section #page_prices td { padding: .5rem .65rem; border-bottom: 1px solid var(--mk-line); text-align: left; }
.mk-calculator-section select,
.mk-calculator-section input[type="number"],
.mk-calculator-section input[type="text"],
.mk-calculator-section input[type="email"] {
    border: 1px solid var(--mk-line);
    border-radius: .5rem;
    padding: .5rem .65rem;
    margin-bottom: .5rem;
}
.mk-calculator-section .slider { width: 100%; }
.mk-calculator-section select,
.mk-calculator-section input[type="number"],
.mk-calculator-section input[type="text"],
.mk-calculator-section input[type="email"] {
    font-size: 1rem;
}
.mk-calculator-section label { font-weight: 600; margin-bottom: .35rem; display: inline-block; }

/*
 * Quantity slider - print_calc.php's #sliderRange, a plain native
 * <input type="range"> (no JS slider library is involved anywhere in this
 * codebase, see explore notes). The legacy admin skin drew its thumb as the
 * browser default circle; this recreates that as a large red dial carrying
 * the maksoft mark, matching the brand.
 *
 * maksoft-favicon-32.png is the site's real favicon (CMS-managed, admin can
 * replace it any time - see img/23/png/favicon/32/unnamed.png) and is kept
 * as an unmodified copy; it is not referenced here or anywhere else in this
 * theme's CSS. maksoft-favicon-32-white.png is a separate, one-off derived
 * asset - the same mark recolored to solid white so it reads against this
 * red thumb - made for this rule only. A CMS favicon change will not update
 * it automatically.
 *
 * Every vendor pseudo-element is repeated per prefix because a browser
 * drops the whole rule the instant one
 * ::-webkit-/::-moz-/::-ms- selector in it does not exist for that engine.
 */
.mk-calculator-section input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    margin: 1.4rem 0;
    border-radius: 999px;
    background: var(--mk-line);
    cursor: pointer;
}
.mk-calculator-section input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    background: var(--mk-line);
}
.mk-calculator-section input[type="range"]::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: var(--mk-line);
}
.mk-calculator-section input[type="range"]::-ms-track {
    height: 8px;
    border-radius: 999px;
    background: var(--mk-line);
    border-color: transparent;
    color: transparent;
}
.mk-calculator-section input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 38px;
    height: 38px;
    margin-top: -15px;
    border-radius: 50%;
    border: 3px solid #fff;
    background: var(--mk-red) url('/themes/ms/base/maksoftbg/assets/img/maksoft-favicon-32-white.png') center / 60% no-repeat;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .28);
    cursor: pointer;
}
.mk-calculator-section input[type="range"]::-moz-range-thumb {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 3px solid #fff;
    background: var(--mk-red) url('/themes/ms/base/maksoftbg/assets/img/maksoft-favicon-32-white.png') center / 60% no-repeat;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .28);
    cursor: pointer;
}
.mk-calculator-section input[type="range"]::-ms-thumb {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 3px solid #fff;
    background: var(--mk-red) url('/themes/ms/base/maksoftbg/assets/img/maksoft-favicon-32-white.png') center / 60% no-repeat;
    cursor: pointer;
}
.mk-calculator-section input[type="range"]:focus { outline: none; }
.mk-calculator-section input[type="range"]:focus::-webkit-slider-thumb { box-shadow: 0 0 0 .2rem rgba(215, 25, 32, .25); }
.mk-calculator-section input[type="range"]:focus::-moz-range-thumb { box-shadow: 0 0 0 .2rem rgba(215, 25, 32, .25); }

/*
 * "Калкулатор цена и тегло" - web/admin/Templates/maksoft.net/cal/calc.php,
 * pulled in per-page through admin-authored pages.PHPcode (hook('phpcode'),
 * see pages/default.php / pages/home.php), so it renders bare inside
 * .mk-wrap with no theme container of its own. That file defines the
 * calculation logic only (quantity/print/discount math, the weight formula,
 * the AJAX "Запази цена" quote) and is deliberately left untouched - it
 * writes plain <table class="border_table"> rows and Bootstrap 2 sizing
 * classes (.input-mini/-small/-medium/-large, .well, .btn-warning) that
 * Bootstrap 5 does not style at all, so every rule below styles that markup
 * from the outside instead. Scoped to .mk-wrap since .border_table is a
 * generic legacy class name that could in principle appear elsewhere.
 */
.mk-wrap table.border_table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0 0 1.5rem;
    background: #fff;
    border: 1px solid var(--mk-line);
    border-radius: 1rem;
    overflow: hidden;
}
.mk-wrap table.border_table thead th {
    background: var(--mk-red);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    text-align: left;
    padding: .85rem 1.1rem;
}
.mk-wrap table.border_table tbody td {
    padding: .6rem 1.1rem;
    border-top: 1px solid var(--mk-line);
    vertical-align: middle;
}
.mk-wrap table.border_table tbody tr:first-child td { border-top: 0; }
.mk-wrap table.border_table tbody td[align="right"] {
    font-weight: 600;
    color: var(--mk-ink);
    white-space: nowrap;
}
.mk-wrap table.border_table tfoot td { padding: .85rem 1.1rem; }

.mk-wrap table.border_table input[type="text"],
.mk-wrap table.border_table input[type="email"],
.mk-wrap table.border_table select,
.mk-wrap table.border_table textarea {
    border: 1px solid var(--mk-line);
    border-radius: .6rem;
    padding: .45rem .7rem;
    font-size: .95rem;
    background: var(--mk-soft);
}
.mk-wrap table.border_table input:focus,
.mk-wrap table.border_table select:focus,
.mk-wrap table.border_table textarea:focus {
    outline: none;
    border-color: #f0b7b9;
    box-shadow: 0 0 0 .2rem rgba(215, 25, 32, .12);
    background: #fff;
}
.mk-wrap table.border_table textarea { width: 100%; max-width: 420px; }

/* Bigger, theme-consistent dropdowns for the calculator's Prepress/Print/UV/
   window selects - plain OS selects otherwise carry a tiny native arrow that
   reads as an afterthought next to the rest of this theme's icon language. */
.mk-wrap table.border_table select,
.mk-calculator-section select {
    font-size: 1.05rem;
    padding: .55rem 2.3rem .55rem .85rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23d71920'%3E%3Cpath d='M8 11 3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .8rem center;
    background-size: 14px 14px;
}

/* Bootstrap 2's own width scale for these classes - Bootstrap 5 never
   defines them, so plain-width inputs shrank to whatever the browser
   default gave them.

   Selects are sized by their longest option (width:auto) with a floor, so a
   long label such as the Prepress "PDF" choice is never clipped; the floor
   keeps short lists from collapsing. Text inputs get a fixed width sized for
   the largest value they hold: .input-mini is one shared width for the
   5-6 character values (unit price / total / weight), #disc a 2-3 character
   percentage; both drop the side padding so the digits get the room.
   #disc and the staff-only qty input carry an inline width from calc.php, so
   those two need !important. */
.mk-wrap table.border_table select                { width: auto; max-width: 100%; }
.mk-wrap table.border_table select.input-mini     { min-width: 5rem; }
.mk-wrap table.border_table select.input-small    { min-width: 8rem; }
.mk-wrap table.border_table select.input-medium   { min-width: 10rem; }
.mk-wrap table.border_table select.input-large    { min-width: 16rem; }
.mk-wrap table.border_table input.input-mini      { width: 5rem; padding-left: .4rem; padding-right: .4rem; }
.mk-wrap table.border_table input#disc            { width: 3.25rem !important; padding-left: .4rem; padding-right: .4rem; text-align: right; }
.mk-wrap table.border_table input[name="qty"]     { width: 6.5rem !important; }

.mk-wrap table.border_table .btn,
.mk-wrap table.border_table button.btn {
    border-radius: 999px;
    padding: .6rem 1.6rem;
    font-weight: 600;
    border: 0;
}
.mk-wrap table.border_table .btn-warning { background: var(--mk-red); color: #fff; }
.mk-wrap table.border_table .btn-warning:hover { background: #b91218; color: #fff; }

/*
 * print_calc.php card - the "calculate price for ..." calculator that
 * code/print.php includes when a page carries a print option table. Same look
 * as the cal/calc.php card above: red title bar, right-aligned label column,
 * controls on hairline-separated rows. Every hook is a class added to
 * print_calc.php's own markup (.mk-calc*); its ids, names and inline handlers
 * are untouched, so the calculation JS is unaffected. The selects keep their
 * inline width:100% / background from the legacy file - the rules here only
 * lay them out.
 */
.mk-calculator-section .mk-calc {
    background: #fff;
    border: 1px solid var(--mk-line);
    border-radius: 1rem;
    overflow: hidden;
    margin: 0 0 1.5rem;
}
.mk-calculator-section .mk-calc__title {
    margin: 0;
    background: var(--mk-red);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    padding: .85rem 1.1rem;
}
.mk-calculator-section .mk-calc__row {
    display: grid;
    grid-template-columns: minmax(7rem, 30%) 1fr;
    column-gap: 1.25rem;
    align-items: center;
    padding: .65rem 1.1rem;
    border-top: 1px solid var(--mk-line);
}
.mk-calculator-section .mk-calc__title + .mk-calc__row { border-top: 0; }
.mk-calculator-section .mk-calc__label {
    margin: 0;
    display: block;
    text-align: left;
    font-weight: 600;
    color: var(--mk-ink);
}
.mk-calculator-section .mk-calc__label::after { content: ":"; }
.mk-calculator-section .mk-calc__ctl { min-width: 0; }
.mk-calculator-section .mk-calc__row--note { padding-top: .35rem; padding-bottom: .35rem; border-top: 0; }
.mk-calculator-section .mk-calc__row--note .mk-calc__ctl { grid-column: 2; }
.mk-calculator-section .mk-calc__row--note p { margin: 0; color: #5b6068; font-size: .95rem; }
.mk-calculator-section .mk-calc select,
.mk-calculator-section .mk-calc input[type="number"] { margin: 0; background-color: var(--mk-soft); }
.mk-calculator-section .mk-calc select { width: 100%; min-width: 16rem; max-width: 100%; }
.mk-calculator-section .mk-calc select:focus,
.mk-calculator-section .mk-calc input[type="number"]:focus {
    outline: none;
    border-color: #f0b7b9;
    box-shadow: 0 0 0 .2rem rgba(215, 25, 32, .12);
    background-color: #fff;
}

/* Quantity: number box first, slider fills the rest; the box takes 5 digits plus the spinner. */
.mk-calculator-section .mk-calc__ctl--qty { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.mk-calculator-section .mk-calc .slidecontainer { flex: 1 1 14rem; min-width: 0; }
.mk-calculator-section .mk-calc input[type="range"] { margin: .9rem 0; }
.mk-calculator-section .mk-calc input[type="number"] { flex: 0 0 auto; width: 6.5rem; }

/* Price table - header row and total row, no outer frame (the card has it). */
.mk-calculator-section .mk-calc__tablewrap { overflow-x: auto; }
.mk-calculator-section .mk-calc #page_prices { width: 100%; margin: 0; border-collapse: collapse; }
.mk-calculator-section .mk-calc #page_prices th,
.mk-calculator-section .mk-calc #page_prices td {
    padding: .6rem .8rem;
    border-top: 1px solid var(--mk-line);
    border-bottom: 0;
    vertical-align: middle;
}
.mk-calculator-section .mk-calc #page_prices th {
    background: var(--mk-soft);
    font-weight: 700;
    white-space: nowrap;
}
.mk-calculator-section .mk-calc #page_prices th:first-child,
.mk-calculator-section .mk-calc #page_prices td:first-child { padding-left: 1.1rem; }
.mk-calculator-section .mk-calc #page_prices th:last-child,
.mk-calculator-section .mk-calc #page_prices td:last-child { padding-right: 1.1rem; }
.mk-calculator-section .mk-calc #page_prices th:nth-child(n+2),
.mk-calculator-section .mk-calc #page_prices td:nth-child(n+2) { text-align: right; white-space: nowrap; }
.mk-calculator-section .mk-calc #page_prices p { margin: 0; }
/* The product select carries an inline width:100%; let it take the width of
   its longest option so a description is never clipped, and let the table
   wrapper scroll sideways on a narrow screen instead. */
.mk-calculator-section .mk-calc #page_prices td select { margin: 0; width: auto !important; min-width: 0; max-width: none; }
.mk-calculator-section .mk-calc #page_prices output { font-variant-numeric: tabular-nums; }
/* !important beats the inline #d9edf7 kept in the markup for other templates. */
.mk-calculator-section .mk-calc__total { background: rgba(217, 24, 46, .07) !important; font-weight: 700; }
.mk-calculator-section .mk-calc__total td { border-top-color: #f0b7b9; }

.mk-calculator-section .mk-calc .outputs {
    padding: .85rem 1.1rem;
    border-top: 1px solid var(--mk-line);
    background: var(--mk-soft);
}
.mk-calculator-section .mk-calc .outputs p { margin: .2rem 0; }
.mk-calculator-section .mk-calc #hideshow { margin: 0; padding: 0 1.1rem; border: 0; background: none; }
.mk-calculator-section .mk-calc #hideshow p { margin: 0; }
.mk-calculator-section .mk-calc #hideshow output { display: block; }
.mk-calculator-section .mk-calc #hideshow output:not(:empty) { padding: .8rem 0; color: var(--mk-red); font-weight: 600; }

@media (max-width: 575.98px) {
    .mk-calculator-section .mk-calc__row { grid-template-columns: 1fr; row-gap: .35rem; }
    .mk-calculator-section .mk-calc__label { text-align: left; }
    .mk-calculator-section .mk-calc__row--note .mk-calc__ctl { grid-column: 1; }
    .mk-calculator-section .mk-calc select { min-width: 0; }
}

/*
 * Quote form (web/admin/Templates/maksoft.net/code/print.php) - the notice and
 * the "request an offer" card under the calculator. print.php marks its own
 * markup with .mk-quote-notice / .mk-quote / .mk-quote__*; the labels and the
 * card title are display:none inline there so other templates that include
 * the same file keep their current look, hence the !important un-hiding here.
 */
.mk-calculator-section .mk-quote-notice {
    --mk-green: #1f9d57;
    position: relative;
    margin: 0 0 1.5rem;
    padding: 1.1rem 4rem 1.1rem 1.25rem;
    color: #0d4a2a;
    background: linear-gradient(135deg, #e4f7ec 0%, #c8f0d9 100%);
    border: 1px solid #8ad9ad;
    border-left: 6px solid var(--mk-green);
    border-radius: 1rem;
    line-height: 1.5;
    cursor: default;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.mk-calculator-section .mk-quote-notice .fa { color: var(--mk-green); margin-right: .25rem; }
.mk-calculator-section .mk-quote-notice b { color: #08331d; }
/* Arrow pointing down at the form below. */
.mk-calculator-section .mk-quote-notice::after {
    content: "\2193";
    position: absolute;
    right: 1.25rem;
    top: 50%;
    margin-top: -1.35rem;
    width: 2.7rem;
    height: 2.7rem;
    line-height: 2.7rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    background: var(--mk-green);
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(31, 157, 87, .4);
}
.mk-calculator-section .mk-quote-notice:hover {
    transform: translateY(-3px);
    background: linear-gradient(135deg, #d5f5e2 0%, #a9e8c4 100%);
    border-color: var(--mk-green);
    box-shadow: 0 10px 28px rgba(31, 157, 87, .30);
}
.mk-calculator-section .mk-quote-notice:hover::after { animation: mk-quote-nudge .8s ease-in-out infinite; }
.mk-calculator-section .mk-quote-notice:hover .fa-spin { animation-duration: .7s; }
/* The card below lights up while the notice is hovered. */
.mk-calculator-section .mk-quote-notice + .mk-quote { transition: box-shadow .25s ease, border-color .25s ease; }
.mk-calculator-section .mk-quote-notice:hover + .mk-quote {
    border-color: #1f9d57;
    box-shadow: 0 0 0 4px rgba(31, 157, 87, .22), 0 12px 32px rgba(31, 157, 87, .18);
}
@keyframes mk-quote-nudge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
    .mk-calculator-section .mk-quote-notice,
    .mk-calculator-section .mk-quote-notice + .mk-quote { transition: none; }
    .mk-calculator-section .mk-quote-notice:hover { transform: none; }
    .mk-calculator-section .mk-quote-notice:hover::after,
    .mk-calculator-section .mk-quote-notice:hover .fa-spin { animation: none; }
}

.mk-calculator-section .mk-quote {
    background: #fff;
    border: 1px solid var(--mk-line);
    border-radius: 1rem;
    overflow: hidden;
    margin: 0 0 1.5rem;
}
.mk-calculator-section .mk-quote__title {
    display: block !important;
    margin: 0;
    background: var(--mk-red);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    padding: .85rem 1.1rem;
}
.mk-calculator-section .mk-quote .form-group,
.mk-calculator-section .mk-quote__footer {
    display: grid;
    grid-template-columns: minmax(7rem, 30%) 1fr;
    column-gap: 1.25rem;
    align-items: center;
    margin: 0;
    padding: .65rem 1.1rem;
    border-top: 1px solid var(--mk-line);
}
.mk-calculator-section .mk-quote__title + .form-group { border-top: 0; }
.mk-calculator-section .mk-quote__label {
    display: block !important;
    margin: 0;
    font-size: 1rem;
    text-align: right;
    font-weight: 600;
    color: var(--mk-ink);
}
.mk-calculator-section .mk-quote__label::after { content: ":"; }
.mk-calculator-section .mk-quote .input-group,
.mk-calculator-section .mk-quote__ctl { display: block; width: 100%; max-width: 34rem; min-width: 0; position: relative; }
.mk-calculator-section .mk-quote__footer { padding-top: .9rem; padding-bottom: 1.1rem; background: var(--mk-soft); }

/* Fields: same soft fill and radius as the calculator selects; the icon sits
   inside the right edge of the field instead of over the text. Specificity is
   raised with #form because the older zebra rules above are long selectors. */
.mk-calculator-section #form .mk-quote .form-group .form-control {
    background: var(--mk-soft);
    border: 1px solid var(--mk-line);
    border-radius: .6rem;
    min-height: 0;
    padding: .55rem 2.9rem .55rem .9rem;
    font-size: 1rem;
    width: 100%;
}
.mk-calculator-section #form .mk-quote .form-group textarea.form-control { min-height: 7.5rem; padding-top: .7rem; }
.mk-calculator-section #form .mk-quote .form-group .form-control:focus {
    background: #fff;
    border-color: #f0b7b9;
    box-shadow: 0 0 0 .2rem rgba(215, 25, 32, .12);
}
.mk-calculator-section .mk-quote .input-group-addon {
    left: auto;
    right: .35rem;
    top: 0;
    bottom: 0;
    width: 2.4rem;
    font-size: 1.1rem;
    opacity: .85;
}
.mk-calculator-section .mk-quote .form-group:has(textarea) .input-group-addon { bottom: auto; top: .5rem; height: 2rem; }
.mk-calculator-section .mk-quote > br { display: none; }
.mk-calculator-section .mk-quote__captcha .g-recaptcha { margin: 0; }
.mk-calculator-section .mk-quote__footer .btn-success { margin: 0; }

@media (max-width: 575.98px) {
    .mk-calculator-section .mk-quote .form-group,
    .mk-calculator-section .mk-quote__footer { grid-template-columns: 1fr; row-gap: .35rem; }
    .mk-calculator-section .mk-quote__label { text-align: left; }
    .mk-calculator-section .mk-quote__spacer { display: none; }
    .mk-calculator-section .mk-quote-notice { padding-right: 1.25rem; padding-bottom: 4.2rem; }
    .mk-calculator-section .mk-quote-notice::after { top: auto; bottom: 1rem; margin-top: 0; }
}

/* #offer_mail / #submit_offer already carry their own inline border-radius
   from calc.php - only laid out here, not fought over color/radius. */
#offer_form { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1.25rem; padding: 1rem 1.1rem; background: var(--mk-soft); border-radius: 1rem; }
#offer_form input#offer_mail { flex: 1 1 240px; min-width: 200px; padding: .8rem 1.1rem; border: 1px solid var(--mk-line); font-size: 1.05rem; }
#offer_form .fa,
#offer_form i.fa { font-size: 1.7rem !important; color: var(--mk-red); }

/*
 * "Запази цена" (#submit_offer) - the AJAX button that writes a mail_offers
 * row (fak/mail_offer.php). Only visible to logged-in staff (AccessLevel>=1,
 * see print_calc.php/calc.php's own gate around it) while it is used for
 * admin-authored offers; that gate is untouched here - this only makes the
 * button itself bigger and harder to miss, as asked. font-size/padding need
 * !important because calc.php/print_calc.php already set a smaller
 * font-size inline and inline styles otherwise win over this stylesheet.
 */
#offer_form #submit_offer,
#offer_form input#submit_offer {
    padding: .95rem 2.4rem !important;
    font-size: 1.2rem !important;
    font-weight: 700;
    letter-spacing: .01em;
    border: 0;
    box-shadow: 0 4px 14px rgba(196, 22, 28, .35);
    transition: transform .15s ease, box-shadow .15s ease;
    cursor: pointer;
}
#offer_form #submit_offer:hover,
#offer_form input#submit_offer:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(196, 22, 28, .45);
}

.mk-wrap .well {
    background: var(--mk-soft);
    border: 1px solid var(--mk-line);
    border-radius: 1rem;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.25rem;
}
.mk-wrap .well ul { margin: 0; padding-left: 1.1rem; }

/* ---------- Home: swiper card rail (featured-default.php) ---------- */

.mk-card { border: 1px solid var(--mk-line); border-radius: 1.1rem; background: #fff; overflow: hidden; height: 100%; }
.mk-card__image { height: 190px; overflow: hidden; }
.mk-card__image img { width: 100%; height: 100%; object-fit: cover; }
.mk-card__body { padding: 1rem 1.1rem; }
.mk-card__title { font-size: 1rem; font-weight: 700; margin-bottom: .4rem; }
.mk-card__title a { color: inherit; text-decoration: none; }
.mk-card__excerpt { color: #6c757d; font-size: .875rem; margin-bottom: .5rem; }
.mk-card__cta { color: var(--mk-red); font-weight: 600; text-decoration: none; font-size: .875rem; }
.mk-card-swiper { padding-bottom: 2.5rem; }
.mk-card-swiper .swiper-button-next,
.mk-card-swiper .swiper-button-prev { color: var(--mk-red); }

/* ---------- Home: funnel hero / vision (featured-page-funnel.php) --- */

.mk-hero { background: linear-gradient(135deg, #fff 0%, #f8f9fb 70%, #fff6f6 100%); }
.mk-hero-min { min-height: 520px; }
.mk-hero-visual {
    min-height: 360px;
    border-radius: 1.5rem;
    background-size: cover;
    background-position: center;
    background-color: #ddd;
}
.mk-result-strip { border-radius: 1.5rem; background: linear-gradient(135deg, #fff, #f5f7fa); }
.mk-vision-media img, .mk-vision-media iframe { width: 100%; height: 100%; object-fit: cover; border: 0; }

/* ---------- Home: pain / selectable cards (featured-page-listing.php) ---- */

.mk-pain-swiper .swiper-slide { height: auto; }
.mk-select-card {
    cursor: pointer;
    border: 1px solid var(--mk-line);
    border-radius: 1rem;
    background: #fff;
    padding: 1rem;
    height: 100%;
    text-decoration: none;
    color: inherit;
    transition: .2s;
    display: block;
}
.mk-select-card:hover { border-color: #f0a4a7; }
.mk-select-card.active { background: var(--mk-red); border-color: var(--mk-red); color: #fff; }
.mk-select-card.active .text-secondary { color: rgba(255, 255, 255, .78) !important; }

/* ---------- Home: shop masonry (featured-shop-listing.php) -------------- */

.mk-masonry { columns: 1; column-gap: 1rem; }
.mk-masonry-item {
    break-inside: avoid;
    margin-bottom: 1rem;
    position: relative;
    border-radius: 1.25rem;
    overflow: hidden;
    min-height: 220px;
    background: #ddd;
    display: block;
}
.mk-masonry-item img,
.mk-masonry-item__link { width: 100%; height: 100%; display: block; }
.mk-masonry-item img { object-fit: cover; min-height: 220px; }
.mk-masonry-item--tall img { min-height: 340px; }
.mk-masonry-item--short img { min-height: 180px; }
.mk-masonry-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.1rem;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .8) 70%);
    color: #fff;
}

/* ---------- Home: shop catalog card + sub-rail (featured-shop-listing.php,
   [SHOP_LISTING] variant - children with both a photo and their own
   children) ---------- */

.mk-catalog-card { border: 1px solid var(--mk-line); border-radius: 1.2rem; background: #fff; overflow: hidden; }
.mk-catalog-hero { height: 170px; object-fit: cover; width: 100%; display: block; }
.mk-sub-swiper { padding-bottom: 1.5rem; }
.mk-sub-item { display: block; text-decoration: none; color: inherit; background: var(--mk-soft); border-radius: .9rem; overflow: hidden; border: 1px solid var(--mk-line); }
.mk-sub-item img { width: 100%; height: 82px; object-fit: cover; }
.mk-sub-item__label { padding: .55rem .65rem; font-size: .78rem; font-weight: 700; }

/* ---------- Home: testimonials (featured-testimonial-listing.php) ------- */

.mk-quote-panel { border-radius: 1.25rem; }
.mk-quote { font-size: 1.2rem; line-height: 1.55; }

/* ---------- Home: CTA goal band (featured-offer-funnel.php) -------- */

.mk-cta-band { background: linear-gradient(135deg, #fff4f4, #fff); }
.mk-goal-btn.active { background: var(--mk-red) !important; color: #fff !important; border-color: var(--mk-red) !important; }

/* ---------- Footer ---------- */

.mk-info-line {
    box-sizing: border-box;
    position: relative;
    z-index: 1020;
    height: 34px;
    overflow: hidden;
    border-top: 1px solid #dde0e3;
    border-bottom: 1px solid #d4d7da;
    background: rgba(255, 255, 255, .97);
    color: #41464b;
    box-shadow: 0 -3px 12px rgba(24, 29, 34, .08);
}
.mk-info-line.is-sticky-ready {
    position: fixed;
    right: 0;
    bottom: var(--mk-info-line-bottom, 0px);
    left: 0;
}
.mk-info-line__viewport {
    height: 100%;
    overflow: hidden;
}
.mk-info-line__text {
    display: inline-block;
    min-width: max-content;
    padding-left: 100%;
    white-space: nowrap;
    font-size: .86rem;
    font-weight: 600;
    line-height: 32px;
    animation: mk-info-line-marquee 24s linear infinite;
    will-change: transform;
}
.mk-info-line:hover .mk-info-line__text { animation-play-state: paused; }

@keyframes mk-info-line-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
    .mk-info-line__viewport {
        display: flex;
        align-items: center;
        padding: 0 15px;
    }
    .mk-info-line__text {
        display: block;
        min-width: 0;
        overflow: hidden;
        padding-left: 0;
        text-overflow: ellipsis;
        animation: none;
        will-change: auto;
    }
}

.mk-footer-cta { background: #202124; color: #fff; }
.mk-footer-cta a { color: #fff; }

.mk-contact-toggle { flex-shrink: 0; }
.mk-contact-toggle[aria-expanded="true"] { background: #fff; color: var(--mk-ink); }

/*
 * web/forms/main_form.php's Bootstrap-styled branch (Template > 215) is
 * written against Bootstrap 3/4 classes - .form-group, .input-group-addon -
 * this theme runs Bootstrap 5, which dropped both (.form-group is gone,
 * .input-group-addon became .input-group-text). Rather than fork that
 * shared, already-working form include for one theme, these rules just
 * give the old classes the Bootstrap 5 look directly. The same markup
 * pattern is also what web/admin/Templates/maksoft.net/code/print.php's
 * quote-request form (embedded in .mk-calculator-section) renders, so both
 * targets share one set of rules rather than duplicating them.
 *
 * .input-group-addon is unpositioned content in Bootstrap 5 (no matching
 * class), so it is pinned over the input's own left padding instead of
 * fighting Bootstrap 5's flex .input-group layout - the input reserves the
 * space with padding-left, the icon sits centered in that space. Zebra
 * striping alternates by .form-group's position among its siblings - close
 * enough for a readability aid; the few pages with a non-form-group sibling
 * mid-form (e.g. the tshirt options include) just repeat a shade once.
 */
.mk-contact-form .bootstrapform { max-width: 560px; }
/* In the calculator section the wrapper carries the calculator card and the
   quote-form card, which use the full width like cal/calc.php's cards do. */
.mk-calculator-section .bootstrapform { max-width: none; }
.mk-contact-form .form-group,
.mk-calculator-section .form-group { margin-bottom: 1rem; }
.mk-contact-form .input-group,
.mk-calculator-section .input-group { position: relative; }
.mk-contact-form .input-group-addon,
.mk-calculator-section .input-group-addon {
    position: absolute;
    left: 4px;
    top: 4px;
    bottom: 4px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mk-red);
    font-size: 1.35rem;
    pointer-events: none;
    z-index: 2;
}
.mk-contact-form .input-group .form-control,
.mk-calculator-section .input-group .form-control {
    padding-left: 3.5rem;
}
.mk-contact-form .form-control,
.mk-contact-form textarea.form-control,
.mk-calculator-section .bootstrapform .form-control,
.mk-calculator-section .bootstrapform textarea.form-control {
    background: #fff;
    border: 1px solid var(--mk-line);
    border-radius: 1rem;
    padding: .75rem 1rem;
    font-size: 1rem;
    min-height: 52px;
}
.mk-contact-form textarea.form-control,
.mk-calculator-section .bootstrapform textarea.form-control { padding-top: .9rem; min-height: 130px; }
.mk-contact-form .form-control:focus,
.mk-calculator-section .bootstrapform .form-control:focus {
    border-color: #f0b7b9;
    box-shadow: 0 0 0 .2rem rgba(215, 25, 32, .12);
}
/* Zebra striping for readability, alternating by field position. */
.mk-contact-form .form-group:nth-of-type(odd) .form-control,
.mk-calculator-section .bootstrapform .form-group:nth-of-type(odd) .form-control { background: var(--mk-soft); }
.mk-contact-form .form-group:nth-of-type(even) .form-control,
.mk-calculator-section .bootstrapform .form-group:nth-of-type(even) .form-control { background: #fff; }
.mk-contact-form .btn-success,
.mk-calculator-section .bootstrapform .btn-success {
    background: var(--mk-red);
    border-color: var(--mk-red);
    border-radius: 999px;
    padding: .75rem 2rem;
}
.mk-contact-form .btn-success:hover,
.mk-calculator-section .bootstrapform .btn-success:hover { background: #b91218; border-color: #b91218; }
.mk-contact-form .g-recaptcha,
.mk-calculator-section .g-recaptcha { margin: .75rem 0; transform-origin: left top; }
.mk-contact-form em { color: rgba(255, 255, 255, .65); font-size: .8rem; }
.mk-call-mobile { color: #fff; text-decoration: none; font-weight: 600; }
.mk-footer-link { color: #6c757d; text-decoration: none; }
.mk-footer-link:hover { color: var(--mk-red); }

/*
 * Footer columns - accordion on mobile, plain columns on desktop.
 * Mirrors flatdesign's .flat-footer-col pattern (assets/css/theme.css),
 * renamed to .mk-footer-col. initFooterAccordion() in theme.js only marks a
 * column .is-collapsible once JS has actually run and the column has real
 * panel content - without JS, or with an empty panel, everything just stays
 * visible, exactly the flatdesign fallback.
 */
.mk-footer-col__head {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 0 12px;
}

.mk-footer-col__toggle {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-align: left;
}

.mk-footer-col__toggle:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.mk-footer-col__label { display: block; min-width: 0; }

/* Three-line marker, drawn in CSS so the footer needs no icon font. */
.mk-footer-col__icon {
    display: none;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -1px;
    width: 22px;
    height: 2px;
    background: currentColor;
}
.mk-footer-col__icon:before,
.mk-footer-col__icon:after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
}
.mk-footer-col__icon:before { top: -6px; }
.mk-footer-col__icon:after { top: 6px; }

.mk-footer-col__panel > *:last-child { margin-bottom: 0; }

@media (min-width: 768px) {
    /* The heading is a button only so mobile can toggle it. */
    .mk-footer-col__toggle { cursor: default; pointer-events: none; }
}

@media (max-width: 767.98px) {
    .mk-footer-cols { --bs-gutter-y: 0; }
    .mk-footer-cols > [class*="col-"] { padding-top: 0; }

    .mk-footer-col { border-bottom: 1px solid var(--mk-line); }
    .mk-footer-col:first-child { border-top: 1px solid var(--mk-line); }

    .mk-footer-col__head { margin: 0; padding: 15px 0; }
    .mk-footer-col.is-collapsible .mk-footer-col__head { padding-right: 38px; }
    .mk-footer-col.is-collapsible .mk-footer-col__toggle { cursor: pointer; }
    .mk-footer-col.is-collapsible .mk-footer-col__icon { display: block; }

    .mk-footer-col__panel { padding-bottom: 18px; }

    /* Collapsed only once the runtime has taken the column over. */
    .mk-footer-col.is-collapsible .mk-footer-col__panel { display: none; }
    .mk-footer-col.is-collapsible.is-open .mk-footer-col__panel { display: block; }
}

@media (min-width: 768px) {
    .mk-masonry { columns: 2; }
}
@media (min-width: 1200px) {
    .mk-masonry { columns: 3; }
}

@media (max-width: 767.98px) {
    .mk-main-image, .mk-main-image img { min-height: 220px; }
    .mk-subpages-section .subpage-image-wrap { height: 150px; }
    .mk-hero-min { min-height: auto; }
    .mk-hero-visual { min-height: 260px; }
}


/* ---------- Corporate logistics frame ---------- */

body.maksoftbg-theme {
    background-color: #fff;
    background-image: url("../img/world-map-light.webp");
    background-repeat: repeat-y;
    background-position: 50% 0;
    background-size: 1920px auto;
}
.maksoftbg-theme main { position: relative; z-index: 1; }
.maksoftbg-theme main > section,
.maksoftbg-theme main > .mk-wrap { background-color: rgba(255, 255, 255, .68); }

.mk-header {
    --mk-header-map: url("../img/world-map-light.webp");
    position: sticky;
    top: 0;
    z-index: 1030;
    background-image: var(--mk-header-map);
    background-position: 50% var(--mk-map-shift, 0px);
    background-size: 1920px auto;
    box-shadow: 0 4px 18px rgba(24, 29, 34, .06);
}
.mk-header-scroll-progress {
    position: absolute;
    z-index: 5;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(93, 98, 103, .78), rgba(190, 194, 197, .88));
    pointer-events: none;
}
.mk-header-scroll-progress__value {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(130, 38, 43, .82), var(--mk-red));
    transform: scaleX(var(--mk-scroll-progress, 0));
    transform-origin: right center;
    transition: transform .08s linear;
    will-change: transform;
}
.mk-topbar {
    position: relative;
    z-index: 1;
    min-height: 34px;
    padding: .38rem 0;
    background: rgba(238, 241, 243, .76);
    backdrop-filter: blur(4px);
}
.mk-topbar__eyebrow {
    max-width: 300px;
    overflow: hidden;
    color: var(--mk-ink);
    font-size: .78rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mk-topbar__social a {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
}
.mk-header-bar {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, .68);
    backdrop-filter: blur(6px);
}
.mk-header-main {
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 24px;
}
.mk-header .navbar-brand.mk-logo {
    margin: 0;
    flex: 0 0 auto;
}
.mk-header .navbar-brand.mk-logo img {
    display: block;
    width: auto;
    max-width: 210px;
    max-height: 48px;
}
.mk-header-search {
    flex: 1 1 420px;
    max-width: 560px;
    height: 44px;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(33, 37, 41, .04);
    border-radius: 999px;
    background: rgba(238, 240, 242, .94);
}
.mk-header-search__submit {
    width: 48px;
    height: 100%;
    border: 0;
    background: transparent;
    color: var(--mk-red);
    font-size: 1.15rem;
}
.mk-header-search__input {
    width: 100%;
    height: 100%;
    padding: 0 18px 0 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--mk-ink);
}
.mk-header-phone {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--mk-ink);
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
}
.mk-header-phone:hover { color: var(--mk-red); }
.mk-mainnav-bar {
    position: relative;
    z-index: 1;
    background: rgba(238, 241, 243, .76);
    backdrop-filter: blur(4px);
    border-top: 1px solid rgba(255, 255, 255, .75);
}
.mk-mainnav-bar .mk-wrap { padding-top: 0; padding-bottom: 0; }
.mk-mainnav-bar .mk-primary-menu {
    width: 100%;
    gap: clamp(10px, 2.2vw, 34px);
}
.mk-mainnav-bar .nav-link {
    position: relative;
    padding: .72rem .35rem;
}
.mk-mainnav-bar .nav-link:after {
    content: "";
    position: absolute;
    right: .35rem;
    bottom: 5px;
    left: .35rem;
    height: 2px;
    background: var(--mk-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease;
}
.mk-mainnav-bar .nav-link:hover:after,
.mk-mainnav-bar .nav-link:focus:after { transform: scaleX(1); }

/* Product categories: compact IconRegistry-backed items in one swipeable row. */
.mk-category-rail {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-top: 1px solid rgba(232, 234, 237, .82);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(6px);
}
.mk-category-rail__track {
    display: flex;
    align-items: flex-start;
    gap: clamp(8px, 1.25vw, 18px);
    padding-top: 9px;
    padding-bottom: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.mk-category-rail__track::-webkit-scrollbar { display: none; }
.mk-category-rail__item {
    width: clamp(68px, 7.4vw, 86px);
    min-width: clamp(68px, 7.4vw, 86px);
    color: #4f555b;
    text-align: center;
    text-decoration: none;
    scroll-snap-align: start;
}
.mk-category-rail__icon {
    display: flex;
    width: 38px;
    height: 38px;
    margin: 0 auto 5px;
    align-items: center;
    justify-content: center;
    border: 1px solid #dfe2e5;
    border-radius: 50%;
    background: #f7f8f9;
    color: #777d83;
    font-size: 19px;
    line-height: 1;
    transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.mk-category-rail__icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}
.mk-category-rail__initial {
    color: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}
.mk-category-rail__title {
    display: -webkit-box;
    min-height: 2.4em;
    overflow: hidden;
    color: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.mk-category-rail__item:hover,
.mk-category-rail__item:focus { color: #292d31; }
.mk-category-rail__item:hover .mk-category-rail__icon,
.mk-category-rail__item:focus .mk-category-rail__icon {
    border-color: #b9bec3;
    background: #fff;
    color: #555b61;
}

.mk-menu-trigger {
    position: relative;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mk-ink);
}
.mk-menu-trigger--utility span {
    display: block;
    width: 25px;
    height: 2px;
    margin: 5px auto;
    background: currentColor;
}
.mk-menu-trigger--utility span:first-child,
.mk-menu-trigger--utility span:last-child { box-shadow: -7px 0 0 var(--mk-red); }
.mk-menu-trigger--products { font-size: 1.55rem; }
.mk-menu-trigger__tick {
    position: absolute;
    right: 6px;
    top: 8px;
    width: 10px;
    height: 2px;
    background: var(--mk-red);
}
.mk-mobile-menu { width: min(88vw, 390px); }
.mk-mobile-menu__header {
    min-height: 72px;
    background: rgba(255, 255, 255, .95) url("../img/world-map-light.webp") 50% 0 / auto 230px no-repeat;
}
.mk-mobile-menu__mark {
    display: block;
    width: 54px;
    height: 5px;
    border-radius: 999px;
    background: rgba(215, 25, 32, .72);
    box-shadow: 17px 8px 0 rgba(215, 25, 32, .28);
}
.mk-mobile-search {
    display: flex;
    height: 48px;
    margin: 14px;
    border-radius: 999px;
    background: #f0f1f2;
}
.mk-mobile-search button {
    width: 48px;
    border: 0;
    background: transparent;
    color: var(--mk-red);
    font-size: 1.2rem;
}
.mk-mobile-search input {
    width: calc(100% - 48px);
    border: 0;
    outline: 0;
    background: transparent;
}
.mk-mobile-menu__tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--mk-line);
    border-bottom: 1px solid var(--mk-line);
}
.mk-mobile-menu__tabs button {
    position: relative;
    min-height: 48px;
    border: 0;
    background: #f8f9fa;
    color: #74777a;
    font-weight: 700;
}
.mk-mobile-menu__tabs button.active {
    background: #fff;
    color: var(--mk-ink);
}
.mk-mobile-menu__tabs button.active:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: var(--mk-red);
}
.mk-mobile-menu__pane:not(.active) { display: none; }
.mk-mobile-menu__item {
    position: relative;
    border-bottom: 1px solid var(--mk-line);
}
.mk-mobile-menu__item > a {
    display: block;
    min-height: 52px;
    padding: 15px 54px 15px 20px;
    color: var(--mk-ink);
    font-weight: 650;
    text-decoration: none;
}
.mk-mobile-menu__item > a:hover { color: var(--mk-red); }
.mk-mobile-menu__item > .mk-dropdown-toggle {
    position: absolute;
    right: 4px;
    top: 4px;
}
.mk-mobile-submenu {
    display: none;
    padding: 0 18px 12px 32px;
}
.mk-mobile-submenu.show { display: block; }
.mk-mobile-menu__item > .mk-dropdown-toggle:not(.collapsed)::after { transform: rotate(-135deg); }
@media (hover: hover) {
    .mk-mobile-menu__item.has-children:hover > .mk-mobile-submenu {
        display: block;
    }
}
.mk-mobile-submenu a {
    display: block;
    padding: 9px 0;
    color: #5f6368;
    text-decoration: none;
}
.mk-mobile-menu__actions {
    display: grid;
    gap: 1px;
    margin-top: 14px;
    background: var(--mk-line);
}
.mk-mobile-menu__actions a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: #fff;
    color: var(--mk-ink);
    text-decoration: none;
}
.mk-mobile-social,
.mk-mobile-user-actions,
.mk-mobile-account-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mk-mobile-social {
    padding: 16px 18px;
    border-bottom: 1px solid var(--mk-line);
}
.mk-mobile-social a,
.mk-mobile-user-actions a,
.mk-mobile-account-actions .mk-icon-btn,
.mk-mobile-account-actions .ms-login-trigger {
    position: relative;
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #dfe2e5;
    border-radius: 50%;
    background: rgba(255, 255, 255, .88);
    color: var(--mk-ink);
    text-decoration: none;
}
.mk-mobile-menu__shared {
    position: sticky;
    z-index: 3;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px 14px;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid var(--mk-line);
    background: rgba(244, 246, 247, .96);
    box-shadow: 0 -8px 20px rgba(25, 28, 31, .06);
}
.mk-mobile-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--mk-ink);
    font-weight: 700;
    text-decoration: none;
}
.mk-mobile-phone i { color: var(--mk-red); }
.mk-mobile-user-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-wrap: wrap;
}
.mk-mobile-account-actions {
    grid-column: 2;
    grid-row: 1;
}
.mk-mobile-user-actions a:hover,
.mk-mobile-account-actions a:hover,
.mk-mobile-social a:hover { color: var(--mk-red); }
.mk-mobile-action-count {
    position: absolute;
    right: -3px;
    bottom: -3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--mk-red);
    color: #fff;
    font-size: 10px;
    line-height: 17px;
    text-align: center;
}

.mk-footer { background: #fff; }
.mk-footer-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 64px;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
    background: #25282b;
}
.mk-footer-cta:before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    background-image: url("../img/logistics-footer.webp");
    background-repeat: repeat-y;
    background-position: 50% var(--mk-footer-map-shift, 0px);
    background-size: 1920px auto;
    filter: grayscale(1) brightness(1.90) contrast(.88);
    opacity: 1;
}
.mk-footer-cta:after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: rgba(25, 28, 31, .58);
}
.mk-footer-cta__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    min-height: 42px;
}
.mk-footer-cta h2 {
    margin: 0;
    font-size: 1.05rem;
    white-space: nowrap;
}
.mk-footer-cta .mk-contact-toggle {
    padding: .44rem 1.35rem;
    white-space: nowrap;
}
.mk-contact-form-collapse.show,
.mk-contact-form-collapse.collapsing { padding-bottom: 14px; }
.mk-contact-channels {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-width: 0;
}
.mk-contact-channel {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    font-size: 1.05rem;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.mk-contact-channel:hover,
.mk-contact-channel:focus-visible {
    border-color: #fff;
    background: rgba(255, 255, 255, .18);
    transform: translateY(-1px);
}
.mk-footer-cta .mk-contact-channel--phone { color: #39d353; }
.mk-footer-cta .mk-contact-channel--viber { color: #8f7cf7; }
.mk-footer-cta .mk-contact-channel--whatsapp { color: #25d366; }
.mk-footer-cta .mk-contact-channel--location { color: #ff5a5f; }
.mk-footer-cta .mk-contact-channel--chatgpt { color: #19c39a; }
.mk-footer > .mk-wrap { background: #fff; }

/* Product price table: match the neutral subpage-card title treatment. */
.maksoftbg-theme .ms-price-add-to-cart-table thead th {
    background: rgba(231, 229, 230, .94) !important;
    color: #34383c !important;
    border-color: rgba(255, 255, 255, .92) !important;
}
.maksoftbg-theme .ms-price-add-to-cart-table thead .ms-price-add-to-cart-table__unit-price {
    color: var(--mk-red) !important;
}
.maksoftbg-theme .ms-price-add-to-cart-table__unit-price .ms-price,
.maksoftbg-theme .ms-price-add-to-cart-table__unit-price .ms-price strong {
    color: var(--mk-red);
}
.maksoftbg-theme .ms-price-add-to-cart-table__total-value {
    color: #34383c;
    font-weight: 700;
}
.maksoftbg-theme .ms-price-add-to-cart-table__qty input {
    min-width: 4.2rem;
}

@media (max-width: 767.98px) {
    .maksoftbg-theme .ms-price-add-to-cart-table,
    .maksoftbg-theme .ms-price-add-to-cart-table tbody,
    .maksoftbg-theme .ms-price-add-to-cart-table tr,
    .maksoftbg-theme .ms-price-add-to-cart-table td {
        display: block;
        width: 100%;
    }
    .maksoftbg-theme .ms-price-add-to-cart-table colgroup,
    .maksoftbg-theme .ms-price-add-to-cart-table thead {
        display: none;
    }
    .maksoftbg-theme .ms-price-add-to-cart-table td {
        box-sizing: border-box;
        text-align: right !important;
    }
    .maksoftbg-theme .ms-price-add-to-cart-table td:before {
        content: attr(data-label);
        float: left;
        margin-right: .75rem;
        color: #596168;
        font-weight: 600;
    }
    .maksoftbg-theme .ms-price-add-to-cart-table__action form {
        display: inline-block;
    }
}

@media (max-width: 991.98px) {
    .mk-header {
        background-position: 50% 0;
        background-size: auto 250px;
    }
    .mk-header-main {
        min-height: 68px;
        justify-content: space-between;
        gap: 8px;
    }
    .mk-header .navbar-brand.mk-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    .mk-header .navbar-brand.mk-logo img {
        max-width: 175px;
        max-height: 40px;
    }
    .mk-header-bar { background: rgba(255, 255, 255, .62); }
    .mk-category-rail__track {
        gap: 6px;
        padding-top: 8px;
        padding-bottom: 7px;
    }
    .mk-category-rail__item {
        width: 72px;
        min-width: 72px;
    }
    .mk-category-rail__icon {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
}

@media (max-width: 767.98px) {
    body.maksoftbg-theme {
        background-size: auto 520px;
        background-position: 50% 0;
    }
    .mk-header-scroll-progress {
        height: 2px;
    }
    .mk-info-line {
        height: 32px;
    }
    .mk-info-line__text {
        font-size: .8rem;
        line-height: 30px;
    }
    .mk-footer-cta {
        min-height: 52px;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    .mk-footer-cta:before { background-size: auto 520px; }
    .mk-footer-cta__row {
        gap: 5px;
        min-height: 36px;
    }
    .mk-footer-cta h2 { font-size: .72rem; }
    .mk-contact-toggle {
        padding: .34rem .58rem !important;
        font-size: .72rem;
    }
    .mk-contact-channels {
        gap: 5px;
    }
    .mk-contact-channel {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
        font-size: .9rem;
    }
    .mk-footer > .mk-wrap { padding-top: 12px !important; padding-bottom: 12px !important; }
}

@media (max-width: 390px) {
    .mk-footer-cta__row { gap: 4px; }
    .mk-footer-cta h2 { font-size: .66rem; }
    .mk-footer-cta .mk-contact-toggle {
        padding: .3rem .45rem !important;
        font-size: .66rem;
    }
    .mk-contact-channels { gap: 3px; }
    .mk-contact-channel {
        width: 27px;
        height: 27px;
        flex-basis: 27px;
        font-size: .82rem;
    }
}

/* Legacy editor content and PageURL/PHPcode embeds may carry fixed pixel
 * dimensions. On portrait phones they must shrink inside the page wrapper
 * instead of widening the document and creating a horizontal scrollbar. */
@media (max-width: 767.98px) and (orientation: portrait) {
    body.maksoftbg-theme {
        overflow-x: hidden;
        overflow-x: clip;
    }
    .maksoftbg-theme main .mk-wrap {
        box-sizing: border-box;
        min-width: 0;
        max-width: 100%;
    }
    .maksoftbg-theme main .mk-wrap iframe,
    .maksoftbg-theme main .mk-wrap video,
    .maksoftbg-theme main .mk-wrap embed,
    .maksoftbg-theme main .mk-wrap object,
    .maksoftbg-theme main .mk-wrap canvas,
    .maksoftbg-theme main .mk-wrap svg,
    .maksoftbg-theme main .mk-wrap img,
    .maksoftbg-theme main .mk-wrap [width],
    .maksoftbg-theme main .mk-wrap [style*="width"] {
        box-sizing: border-box;
        max-width: 100% !important;
    }
    .maksoftbg-theme main .mk-wrap [style*="min-width"] {
        min-width: 0 !important;
    }
    .maksoftbg-theme main .mk-wrap iframe {
        display: block;
    }
    .maksoftbg-theme main .mk-wrap iframe[src*="youtube.com"],
    .maksoftbg-theme main .mk-wrap iframe[src*="youtube-nocookie.com"],
    .maksoftbg-theme main .mk-wrap iframe[src*="youtu.be"] {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
    }
}

/* Keep responsive search suggestions in the offcanvas document flow,
   directly above the primary navigation links. */
.mk-mobile-menu .ms-suggest--mobile {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    margin: 0 14px 14px;
    z-index: 1;
}
.mk-mobile-menu .ms-suggest--mobile .ms-suggest__list {
    max-height: min(42vh, 320px);
    border-color: var(--mk-line);
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(22, 26, 30, .10);
}