/* ------------------------------------------------------------
 * shell.css — page chrome on every view: announce bar, header, nav,
 * mobile menu, search overlay, loader, page banner, footer, floating actions.
 * ------------------------------------------------------------ */

.mkr-skip { position: absolute; inset-inline-start: 12px; inset-block-start: -80px; z-index: 10000; background: var(--mkr-ink); color: var(--mkr-bg); padding: 10px 18px; border-radius: 999px; }
.mkr-skip:focus { inset-block-start: 12px; color: var(--mkr-bg); }
.mkr-page { min-block-size: 100vh; display: flex; flex-direction: column; }
.mkr-main { flex: 1 0 auto; outline: 0; }

/* ================================================================== Announce bar */
.mkr-announce { background: var(--mkr-ink); color: var(--mkr-bg); font-size: 13px; font-weight: 300; }
.mkr-announce__in { min-block-size: 40px; display: flex; align-items: center; justify-content: center; gap: 28px; }
.mkr-announce__in .mkr-diamond { inline-size: 5px; block-size: 5px; }
@media (max-width: 900px) {
	.mkr-announce__in { gap: 0; }
	.mkr-announce__item:not(:first-child), .mkr-announce__in .mkr-diamond { display: none; }
	.mkr-announce { font-size: 11px; }
	.mkr-announce__in { min-block-size: 32px; }
}

/* ================================================================== Header */
.mkr-header { position: relative; z-index: 60; background: var(--mkr-bg); }
.mkr-header-sticky .mkr-header { position: sticky; inset-block-start: 0; transition: transform .45s var(--mkr-ease-out), box-shadow .3s; }
.mkr-header.is-scrolled { box-shadow: 0 10px 30px -24px rgba(var(--mkr-ink-rgb), .5); }
.mkr-header-sticky .mkr-header.is-scrolled { transform: translateY(calc(-1 * var(--mkr-topbar-h, 0px))); }
.mkr-header-sticky .mkr-header.is-hidden { transform: translateY(-100%); }
.mkr-mast { border-block-end: 1px solid var(--mkr-line); }
.mkr-mast__in { min-block-size: 96px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; }

.mkr-logo { display: inline-flex; align-items: center; }
.mkr-logo__img { block-size: var(--mkr-logo-h); inline-size: auto; transition: block-size .35s var(--mkr-ease-out); }

.mkr-logo__text { font-size: 28px; font-weight: 700; color: var(--mkr-ink); }

.mkr-nav { justify-self: center; position: relative; }
.mkr-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(20px, 2.4vw, 40px); }
.mkr-nav__list > li { position: relative; }
.mkr-nav__list > li > a { display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; font-size: 15px; font-weight: 500; color: var(--mkr-ink); }
.mkr-nav__list > li > a:hover,
.mkr-nav__list > li.current-menu-item > a,
.mkr-nav__list > li.current-menu-ancestor > a { color: var(--mkr-primary); }
.mkr-nav__list > li > a::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 4px; block-size: 1.5px; background: var(--mkr-primary); transform: scaleX(0); transition: transform .35s var(--mkr-ease-out); }
.mkr-nav__list > li > a:hover::after, .mkr-nav__list > li.current-menu-item > a::after { transform: scaleX(1); }
.mkr-nav .sub-menu { list-style: none; margin: 0; padding: 12px; position: absolute; inset-block-start: 100%; inset-inline-start: -12px; min-inline-size: 220px; background: var(--mkr-paper); border-radius: var(--mkr-r-s); box-shadow: var(--mkr-shadow-m); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .3s var(--mkr-ease-out), visibility .25s; }
.mkr-nav li:hover > .sub-menu, .mkr-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.mkr-nav .sub-menu a { display: block; padding: 10px 14px; border-radius: 10px; color: var(--mkr-ink); font-size: 14px; }
.mkr-nav .sub-menu a:hover { background: #f6eee3; color: var(--mkr-primary); }

.mkr-actions { display: flex; align-items: center; gap: 6px; }
.mkr-iconbtn { position: relative; inline-size: 44px; block-size: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--mkr-ink); display: inline-flex; align-items: center; justify-content: center; transition: background-color .25s, color .25s; }
.mkr-iconbtn:hover { background: rgba(var(--mkr-ink-rgb), .06); color: var(--mkr-ink); }
.mkr-iconbtn--solid { background: var(--mkr-ink); color: var(--mkr-bg); }
.mkr-iconbtn--solid:hover { background: var(--mkr-primary); color: #fff; }
.mkr-iconbtn__badge { position: absolute; inset-block-start: -2px; inset-inline-end: -2px; min-inline-size: 18px; block-size: 18px; padding-inline: 4px; border-radius: 9px; background: var(--mkr-primary); color: #fff; font-size: 11px; line-height: 18px; text-align: center; font-weight: 500; }
.mkr-lang a { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: 10px; font-family: var(--mkr-font-num); font-size: 15px; color: var(--mkr-ink); }
.mkr-lang a[lang="ar"] { font-family: var(--mkr-font); font-size: 14px; }
.mkr-burger { display: none; }

@media (max-width: 1100px) {
	.mkr-nav { display: none; }
	.mkr-burger { display: inline-flex; }
	.mkr-mast__in { grid-template-columns: auto 1fr auto; min-block-size: 64px; gap: 8px; }
	.mkr-logo { justify-self: center; grid-column: 2; }
	.mkr-burger { grid-column: 1; grid-row: 1; }
	.mkr-actions { grid-column: 3; }
	.mkr-logo__img { block-size: var(--mkr-logo-h-m); }
	.mkr-actions .mkr-lang { display: none; }
}

/* ================================================================== Mobile menu (drawer) */
.mkr-mobile { position: fixed; inset: 0; z-index: 90; visibility: hidden; }
.mkr-mobile.is-open { visibility: visible; }
.mkr-mobile__bg { position: absolute; inset: 0; background: rgba(var(--mkr-ink-rgb), .5); opacity: 0; transition: opacity .35s; }
.mkr-mobile.is-open .mkr-mobile__bg { opacity: 1; }
.mkr-mobile__panel { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: min(420px, 100%); background: var(--mkr-bg); display: flex; flex-direction: column; overflow-y: auto; transform: translateX(calc(-100% * var(--mkr-dir))); transition: transform .5s var(--mkr-ease-out); }
[dir="rtl"] .mkr-mobile__panel { transform: translateX(100%); }
.mkr-mobile.is-open .mkr-mobile__panel { transform: none; }
.mkr-mobile__top { display: flex; align-items: center; justify-content: space-between; min-block-size: 64px; padding-inline: 10px; border-block-end: 1px solid var(--mkr-line); }
.mkr-mobile__top .mkr-logo__img { block-size: 44px; }
.mkr-mobile__body { padding: 24px 20px 32px; display: flex; flex-direction: column; gap: 22px; }
.mkr-mobile__label { font-size: 12px; color: var(--mkr-primary); font-weight: 500; }
.mkr-mobile__cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mkr-mobile__cat { min-block-size: 86px; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; font-size: 16px; font-weight: 600; background: var(--mkr-sand); color: var(--mkr-ink); }
.mkr-mobile__cat .mkr-num { font-size: 12px; font-weight: 400; opacity: .8; }
.mkr-mobile__cat:nth-child(6n+2), .mkr-mobile__cat:nth-child(6n+5) { background: var(--mkr-ink); color: var(--mkr-bg); }
.mkr-mobile__cat:nth-child(6n+3) { background: var(--mkr-primary); color: #fff; }
.mkr-mobile__cat:nth-child(6n+4) { background: var(--mkr-paper); }
.mkr-mobile__cat:hover { color: inherit; filter: brightness(1.05); }
.mkr-mobile__list { list-style: none; margin: 0; padding: 0; }
.mkr-mobile__list a { display: flex; align-items: center; justify-content: space-between; min-block-size: 56px; border-block-end: 1px solid var(--mkr-line); font-size: 17px; font-weight: 500; color: var(--mkr-ink); }
.mkr-mobile__list a::after { content: "←"; color: var(--mkr-primary); }
[dir="ltr"] .mkr-mobile__list a::after { content: "→"; }
.mkr-mobile__list .sub-menu { list-style: none; padding-inline-start: 14px; margin: 0; }
.mkr-mobile__list .sub-menu a { font-size: 15px; font-weight: 400; }
.mkr-mobile__olive { position: absolute; inset-block-end: -10px; inset-inline-end: -40px; inline-size: 240px; opacity: .45; }
.mkr-menu-open { overflow: hidden; }

/* ================================================================== Search overlay */
.mkr-search { position: fixed; inset: 0; z-index: 95; visibility: hidden; }
.mkr-search.is-open { visibility: visible; }
.mkr-search__bg { position: absolute; inset: 0; background: rgba(var(--mkr-ink-rgb), .55); opacity: 0; transition: opacity .3s; }
.mkr-search.is-open .mkr-search__bg { opacity: 1; }
.mkr-search__panel { position: relative; background: var(--mkr-sand); border-radius: 0 0 var(--mkr-r-stage) var(--mkr-r-stage); padding-block: clamp(40px, 6vw, 72px) 40px; transform: translateY(-100%); transition: transform .5s var(--mkr-ease-out); overflow: hidden; }
.mkr-search.is-open .mkr-search__panel { transform: none; }
.mkr-search__olive { position: absolute; inset-block-start: -30px; inset-inline-end: -30px; inline-size: 280px; transform: rotate(-20deg); opacity: .8; }
.mkr-search__close { position: absolute; inset-block-start: 16px; inset-inline-start: 16px; }
.mkr-search__label { display: block; font-size: 13px; color: var(--mkr-primary); font-weight: 500; margin-block-end: 16px; }
.mkr-searchform { position: relative; max-inline-size: 880px; }
.mkr-searchform input[type="search"] { inline-size: 100%; block-size: clamp(64px, 6vw, 84px); border-radius: 999px; border: 0; background: var(--mkr-paper); padding-inline: 32px 150px; font-size: clamp(18px, 2vw, 26px); font-weight: 500; color: var(--mkr-ink); box-shadow: var(--mkr-shadow-m); }
.mkr-searchform input::placeholder { color: #a79a8c; font-weight: 300; }
.mkr-searchform button { position: absolute; inset-inline-end: 10px; inset-block: 10px; padding-inline: 28px; border-radius: 999px; border: 0; background: var(--mkr-primary); color: #fff; font-weight: 600; }
.mkr-search__pops { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-block-start: 20px; font-size: 13px; color: var(--mkr-muted); position: relative; }
.mkr-search__pops .mkr-chip { border-color: rgba(var(--mkr-ink-rgb), .2); min-block-size: 38px; }

/* ================================================================== Loader — «مكارم» embroidered in a hoop
 * Layers: crimson (behind) + ivory linen (front, holds the stage). Exit = an iris through the hoop: the ivory opens
 * first, the crimson follows, so a crimson thread ring runs along the edge. Page changes close the iris again. */
@property --mkr-iris { syntax: "<length>"; inherits: true; initial-value: 0px; }
.mkr-loader { display: none; }
.mkr-js .mkr-loader { --mkr-iris: 0px; display: block; position: fixed; inset: 0; z-index: 9999; transition: --mkr-iris 1.2s var(--mkr-ease-io); animation: mkr-loader-failsafe .01s linear 7s forwards; }
@keyframes mkr-loader-failsafe { to { visibility: hidden; opacity: 0; } }
.mkr-loader__ink, .mkr-loader__red { position: absolute; inset: 0; }
.mkr-loader__ink {
	-webkit-mask: radial-gradient(circle at var(--mkr-cx, 50%) var(--mkr-cy, 50%), transparent var(--mkr-iris), #000 calc(var(--mkr-iris) + .5px));
	mask: radial-gradient(circle at var(--mkr-cx, 50%) var(--mkr-cy, 50%), transparent var(--mkr-iris), #000 calc(var(--mkr-iris) + .5px));
}
/* the crimson thread ring at the edge of the opening (a few % behind the ivory) */
.mkr-loader__red {
	background: var(--mkr-primary);
	-webkit-mask: radial-gradient(circle at var(--mkr-cx, 50%) var(--mkr-cy, 50%), transparent calc(var(--mkr-iris) * .965 - 3px), #000 calc(var(--mkr-iris) * .965 - 2.5px));
	mask: radial-gradient(circle at var(--mkr-cx, 50%) var(--mkr-cy, 50%), transparent calc(var(--mkr-iris) * .965 - 3px), #000 calc(var(--mkr-iris) * .965 - 2.5px));
}
.mkr-loader__ink {
	display: flex; align-items: center; justify-content: center;
	background-color: var(--mkr-bg);
	background-image:
		radial-gradient(ellipse 70% 60% at 50% 46%, rgba(255, 253, 249, .75), rgba(255, 253, 249, 0) 70%),
		repeating-linear-gradient(0deg, rgba(var(--mkr-ink-rgb), .022) 0 1px, transparent 1px 3px),
		repeating-linear-gradient(90deg, rgba(var(--mkr-ink-rgb), .018) 0 1px, transparent 1px 3px);
}
.mkr-js.mkr-loaded .mkr-loader { --mkr-iris: 85vmax; }
.mkr-loader.is-done { display: none; }
.mkr-loader-quick .mkr-loader__stage { display: none; }

.mkr-loader__stage {
	--hoop: min(74vmin, 460px);
	display: flex; flex-direction: column; align-items: center; gap: 18px;
	transition: opacity .45s var(--mkr-ease-out), transform .6s var(--mkr-ease-out), filter .45s;
}
.mkr-loader.is-leaving .mkr-loader__stage { opacity: 0; transform: scale(1.06); filter: blur(3px); }
.mkr-loader__hoop { position: relative; inline-size: var(--hoop); block-size: var(--hoop); display: grid; place-items: center; }
/* the stretched fabric inside the hoop */
.mkr-loader__hoop::before {
	content: ""; position: absolute; inset: 6.5%; border-radius: 50%;
	background: radial-gradient(circle at 50% 40%, rgba(255, 253, 249, .95), rgba(255, 253, 249, .55) 70%, rgba(255, 253, 249, .2));
	box-shadow: inset 0 0 0 1px rgba(var(--mkr-ink-rgb), .05), inset 0 18px 40px -26px rgba(var(--mkr-primary-rgb), .35), 0 30px 60px -40px rgba(var(--mkr-ink-rgb), .45);
	opacity: 0; transform: scale(.94); animation: mkr-l-fade .9s var(--mkr-ease-out) .15s forwards;
}
.mkr-loader__ring { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
.mkr-l-ring { fill: none; stroke: var(--mkr-ink); stroke-width: 1.15; stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg); transform-origin: 120px 120px; animation: mkr-l-draw 1.1s var(--mkr-ease-io) forwards; }
.mkr-l-ring--in { stroke-width: .6; opacity: .55; animation-delay: .12s; }
.mkr-l-track { fill: none; stroke: rgba(var(--mkr-primary-rgb), .26); stroke-width: 1.6; stroke-dasharray: .7 1.3; opacity: 0; animation: mkr-l-fade .6s ease .5s forwards; }
.mkr-l-prog { fill: none; stroke: var(--mkr-primary); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--mkr-p, 0) * 100); transform: rotate(-90deg); transform-origin: 120px 120px; }
.mkr-l-clasp { fill: var(--mkr-ink); opacity: 0; transform: translateY(-4px); animation: mkr-l-in .5s var(--mkr-ease-out) .75s forwards; }

.mkr-loader__logo { position: relative; inline-size: 66%; block-size: auto; overflow: visible; }
.mkr-l-thread { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mkr-l-draw .45s var(--mkr-ease-out) .15s forwards; }
.mkr-l-thread--r { animation-delay: .25s; }
.mkr-l-dia path, .mkr-l-dots path, .mkr-l-word path { transform-box: fill-box; transform-origin: center; }
.mkr-l-dia path { transform: scale(0); animation: mkr-l-pop .42s cubic-bezier(.3, 1.6, .5, 1) forwards; animation-delay: calc(.58s + var(--i) * 90ms); }
.mkr-l-dia path.is-l { animation-delay: calc(.48s + var(--i) * 90ms); }
.mkr-l-satin line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mkr-l-draw .46s var(--mkr-ease-out) forwards, mkr-l-close .4s var(--mkr-ease-io) 1.22s forwards; animation-delay: calc(.32s + var(--i) * 8ms), 1.22s; }
.mkr-l-ink { opacity: 0; animation: mkr-l-fade .45s ease 1.36s forwards; }
.mkr-l-needle { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mkr-l-draw .55s var(--mkr-ease-io) .98s forwards; }
.mkr-l-needle--2 { animation-delay: 1.1s; }
.mkr-l-dots path { opacity: 0; transform: scale(.2) rotate(-25deg); animation: mkr-l-land .5s cubic-bezier(.3, 1.5, .5, 1) forwards; animation-delay: calc(1.22s + var(--i) * 80ms); }
.mkr-l-word path { opacity: 0; transform: translateY(40%); animation: mkr-l-in .55s var(--mkr-ease-out) forwards; animation-delay: calc(1.3s + var(--i) * 50ms); }
.mkr-loader__count { margin: 0; font-family: var(--mkr-font-num); font-size: 13px; letter-spacing: .14em; color: var(--mkr-muted); opacity: 0; animation: mkr-l-fade .6s ease .35s forwards; }
.mkr-loader__count b { display: inline-block; min-inline-size: 2.2ch; font-weight: 500; color: var(--mkr-ink); text-align: end; }
.mkr-loader__count i { font-style: normal; margin-inline-start: 2px; }
@keyframes mkr-l-draw { to { stroke-dashoffset: 0; } }
@keyframes mkr-l-close { to { stroke-width: 26; } }
@keyframes mkr-l-fade { to { opacity: 1; transform: none; } }
@keyframes mkr-l-in { to { opacity: 1; transform: none; } }
@keyframes mkr-l-pop { to { transform: scale(1); } }
@keyframes mkr-l-land { to { opacity: 1; transform: none; } }

/* Page change: the hoop closes over the page, then the next page opens it again */
.mkr-leaving .mkr-loader, .mkr-leaving .mkr-loader.is-done { display: block; }
.mkr-js.mkr-leaving .mkr-loader { --mkr-iris: 0px; transition-duration: .62s; }
.mkr-leaving .mkr-loader__stage { display: none; }

/* ================================================================== Page banner (automatic, for plain pages) */
.mkr-banner { padding-block-start: 20px; }
.mkr-banner__in { position: relative; overflow: hidden; border-radius: var(--mkr-r-stage); background: var(--mkr-sand); min-block-size: clamp(260px, 26vw, 360px); display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 30%, 420px); align-items: center; gap: 32px; padding: clamp(24px, 3vw, 32px); padding-inline-start: clamp(28px, 6vw, 96px); }
.mkr-banner__text { display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 2; padding-block: 24px; }
.mkr-banner__title { font-size: clamp(36px, 4.4vw, 64px); }
.mkr-banner__sub { font-size: 17px; color: var(--mkr-body); max-inline-size: 56ch; }
.mkr-banner .mkr-frame { block-size: 100%; min-block-size: 220px; }
@media (max-width: 760px) { .mkr-banner__in { grid-template-columns: 1fr; } .mkr-banner .mkr-frame { min-block-size: 180px; } }

.mkr-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: var(--mkr-muted); margin: 0; padding: 0; list-style: none; }
.mkr-crumbs a { color: inherit; }
.mkr-crumbs a:hover { color: var(--mkr-primary); }
.mkr-crumbs li + li::before { content: "/"; margin-inline-end: 10px; opacity: .6; }
.mkr-crumbs [aria-current] { color: var(--mkr-ink); }

/* ================================================================== Footer */
.mkr-pay { display: flex; align-items: center; gap: 8px; }
.mkr-pay span { border: 1px solid #4a4340; border-radius: 6px; padding: 3px 8px; font: italic 700 12px/1.4 Arial, sans-serif; color: var(--mkr-bg); display: inline-flex; align-items: center; }
.mkr-pay i { inline-size: 14px; block-size: 14px; border-radius: 50%; background: #eb001b; display: inline-block; }
.mkr-pay i + i { background: #f79e1b; margin-inline-start: -6px; opacity: .9; }
@media (max-width: 900px) {
}

/* ================================================================== Floating actions */
.mkr-wa { position: fixed; inset-block-end: 24px; inset-inline-end: 24px; z-index: 50; inline-size: 60px; block-size: 60px; border-radius: 50%; background: var(--mkr-wa); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 14px 30px -10px rgba(var(--mkr-ink-rgb), .45); transition: transform .3s var(--mkr-ease-out); }
.mkr-wa:hover { color: #fff; transform: translateY(-4px) scale(1.04); }
.mkr-top { position: fixed; inset-block-end: 96px; inset-inline-end: 30px; z-index: 50; inline-size: 48px; block-size: 48px; border-radius: 50%; border: 0; background: var(--mkr-ink); color: var(--mkr-bg); display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s, transform .3s var(--mkr-ease-out); }
.mkr-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 760px) { .mkr-wa { inline-size: 54px; block-size: 54px; inset-block-end: 16px; inset-inline-end: 16px; } .mkr-top { inset-block-end: 82px; inset-inline-end: 20px; } }

/* The thread — thin crimson line running down the page at the inline-start edge */
.mkr-thread { position: absolute; inset-block: 0; inset-inline-start: clamp(14px, 2.6vw, 44px); inline-size: 1px; pointer-events: none; z-index: 1; }
.mkr-thread::before { content: ""; position: absolute; inset: 0; background: var(--mkr-primary); opacity: .18; }
.mkr-thread::after { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: calc(var(--mkr-scroll, 0) * 100%); background: var(--mkr-primary); opacity: .6; }
@media (max-width: 1100px) { .mkr-thread { display: none; } }

/* Test-mode ribbon (Launch center) — a thin bar above everything, never over content */
.mkr-testribbon { display: flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 30px; padding: 4px 16px; background: #f6d77a; color: #141414; font-size: 12px; font-weight: 500; text-align: center; }


/* ------------------------------------------------ Footer — soft dark panel in the Makarem identity */
.mkr-footer { margin-block-start: auto; padding: 0 clamp(8px, 1.4vw, 20px) clamp(8px, 1.4vw, 20px); background: transparent; }
.mkr-footer__panel { position: relative; overflow: hidden; isolation: isolate; border-radius: clamp(26px, 3vw, 40px); background: radial-gradient(120% 90% at 85% 0%, #2a1a1a 0%, rgba(42, 26, 26, 0) 55%), linear-gradient(180deg, #171313 0%, #120f0f 100%); color: #cfc4b6; padding-block: clamp(44px, 5vw, 72px) 22px; }
.mkr-footer__panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(224, 137, 142, .06) 1px, transparent 1.2px); background-size: 22px 22px; mask-image: linear-gradient(180deg, #000 0%, transparent 60%); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 60%); }
.mkr-footer__olive { position: absolute; z-index: -1; inset-block-start: 40px; inset-inline-end: -70px; inline-size: 340px; opacity: .1; transform: scaleX(-1); }
.mkr-footer__mark { position: absolute; z-index: -1; inset-inline: 0; inset-block-end: -.18em; text-align: center; font-family: var(--mkr-font-num); font-size: clamp(90px, 17vw, 260px); line-height: 1; letter-spacing: .08em; color: transparent; -webkit-text-stroke: 1px rgba(242, 233, 222, .07); pointer-events: none; user-select: none; white-space: nowrap; direction: ltr; }
.mkr-footer__top { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; padding-block-end: clamp(34px, 4vw, 52px); }
.mkr-footer__band { inline-size: min(360px, 70%); opacity: .75; }
.mkr-footer__tagline { margin: 0; max-inline-size: 30ch; text-wrap: balance; font-size: clamp(26px, 3.2vw, 44px); line-height: 1.35; font-weight: 600; color: #F2E9DE; }
.mkr-footer__tagline em { font-style: normal; font-weight: 300; color: var(--mkr-rose); }
.mkr-footer__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.mkr-footer__cta { display: inline-flex; align-items: center; gap: 10px; min-block-size: 50px; padding-inline: 22px; border-radius: 999px; border: 1px solid rgba(242, 233, 222, .22); color: #F2E9DE; font-size: 14px; font-weight: 500; transition: background-color .3s, border-color .3s, color .3s, transform .35s var(--mkr-ease-out); }
.mkr-footer__cta:hover { color: #141414; background: #F2E9DE; border-color: #F2E9DE; transform: translateY(-2px); }
.mkr-footer__cta--wa { background: rgba(31, 143, 78, .16); border-color: rgba(31, 143, 78, .55); }
.mkr-footer__cta--wa:hover { background: #1F8F4E; border-color: #1F8F4E; color: #fff; }
.mkr-footer__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); gap: clamp(26px, 3.4vw, 52px); padding-block: clamp(34px, 4vw, 48px); border-block: 1px solid transparent; border-image: repeating-linear-gradient(90deg, rgba(242, 233, 222, .18) 0 7px, transparent 7px 13px) 1; }
.mkr-footer__grid.has-branches { grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, .8fr)) minmax(0, 1.2fr) minmax(0, 1fr); }
.mkr-footer__brand { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.mkr-footer .mkr-logo__img { block-size: 76px; inline-size: auto; }
.mkr-footer__about { margin: 0; font-size: 13px; line-height: 2; max-inline-size: 300px; color: #b9ada0; }
.mkr-footer__social { display: flex; gap: 8px; }
.mkr-footer__social a { inline-size: 40px; block-size: 40px; border-radius: 50%; border: 1px solid rgba(242, 233, 222, .18); display: inline-flex; align-items: center; justify-content: center; color: #e9dfd2; transition: background-color .3s, border-color .3s, color .3s, transform .35s var(--mkr-ease-out); }
.mkr-footer__social a:hover { background: var(--mkr-primary); border-color: var(--mkr-primary); color: #fff; transform: translateY(-3px); }
.mkr-footer__title { position: relative; display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 15px; font-weight: 600; color: #F2E9DE; }
.mkr-footer__title::before { content: ""; inline-size: 7px; block-size: 7px; background: var(--mkr-primary); transform: rotate(45deg); flex-shrink: 0; }
.mkr-footer__menu, .mkr-footer__branches ul, .mkr-footer__contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; font-size: 14px; }
.mkr-footer__menu a, .mkr-footer__contact a, .mkr-footer__branches a { position: relative; color: #cfc4b6; transition: color .25s; }
.mkr-footer__menu a { display: inline-block; }
.mkr-footer__menu a::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: -3px; inline-size: 100%; block-size: 1px; background: var(--mkr-rose); transform: scaleX(0); transform-origin: var(--mkr-fo, right); transition: transform .4s var(--mkr-ease-out); }
[dir="ltr"] .mkr-footer__menu a::after { --mkr-fo: left; }
.mkr-footer__menu a:hover, .mkr-footer__contact a:hover, .mkr-footer__branches a:hover { color: #fff; }
.mkr-footer__menu a:hover::after { transform: scaleX(1); }
.mkr-footer__branches a { display: flex; flex-direction: column; gap: 2px; }
.mkr-footer__bname { font-size: 14px; }
.mkr-footer__bhours { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #8f847a; }
.mkr-footer__bhours::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: #6b625b; }
.mkr-footer__bhours.is-open { color: #8fd1a4; }
.mkr-footer__bhours.is-open::before { background: #3fb76b; box-shadow: 0 0 0 3px rgba(63, 183, 107, .18); }
.mkr-footer__contact a { display: inline-flex; align-items: center; gap: 10px; }
.mkr-footer__ic { inline-size: 32px; block-size: 32px; border-radius: 50%; background: rgba(242, 233, 222, .07); display: inline-flex; align-items: center; justify-content: center; color: var(--mkr-rose); flex-shrink: 0; transition: background-color .3s, color .3s; }
.mkr-footer__contact a:hover .mkr-footer__ic { background: var(--mkr-primary); color: #fff; }
.mkr-footer__contact .ltr { direction: ltr; unicode-bidi: isolate; }
.mkr-footer__mail { overflow-wrap: anywhere; font-size: 13px; }
.mkr-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; padding-block-start: 22px; font-size: 12px; color: #8f847a; }
.mkr-footer__bottom a { color: #cfc4b6; }
.mkr-footer__bottom a:hover { color: #fff; }
.mkr-footer__badges { display: inline-flex; align-items: center; gap: 12px; }
.mkr-footer__local { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(242, 233, 222, .14); color: #cfc4b6; }
.mkr-footer__local .mkr-icon { color: var(--mkr-rose); fill: var(--mkr-rose); }
.mkr-footer .mkr-pay span { border-color: rgba(242, 233, 222, .25); background: #F2E9DE; color: #1a1f71; }
@media (max-width: 1200px) {
	.mkr-footer__grid, .mkr-footer__grid.has-branches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mkr-footer__brand { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
	.mkr-footer__about { flex: 1 1 280px; }
}
@media (max-width: 760px) {
	.mkr-footer { padding: 0 8px 8px; }
	.mkr-footer__grid, .mkr-footer__grid.has-branches { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 18px; }
	.mkr-footer__brand { flex-direction: column; align-items: flex-start; }
	.mkr-footer__about { flex: none; }
	.mkr-footer__branches, .mkr-footer__col:last-child { grid-column: 1 / -1; }
	.mkr-footer__branches ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
	.mkr-footer__bottom { flex-direction: column; text-align: center; }
	.mkr-footer__cta { flex: 1 1 100%; justify-content: center; }
}