/* Al Mousalli portal: the shared top bar (front page + inner pages) and the campaign look of "Main Menu" and
   "Our Branches" (body.ms-inner). Cart, checkout and the rest of the portal keep the theme's styling.
   The front-page rules of the top bar are approved: change them only on purpose. */

/* ── Shared top bar: logo | links | language + call to order ── */
.ms-top { position: relative; z-index: 60; display: flex; align-items: center; gap: clamp(12px, 2.2vw, 30px); min-height: 80px; padding: 0 clamp(14px, 3vw, 44px); }
.ms-top--hero { position: fixed; top: 0; inset-inline: 0; min-height: 0; padding-block: 12px; background: linear-gradient(180deg, rgba(15, 7, 15, .92), rgba(15, 7, 15, .55) 72%, rgba(15, 7, 15, 0)); }
.ms-top__logo { display: block; flex: none; }
.ms-top__logo img { display: block; height: 56px; width: auto; max-width: none; }
.ms-top__nav { display: flex; align-items: center; gap: 6px; margin-inline-start: clamp(8px, 2.5vw, 40px); }
.ms-top__end { display: flex; align-items: center; gap: 12px; margin-inline-start: auto; }
.ms-top__link, .ms-top__lang, .ms-top__call { text-decoration: none; font: 700 1.05rem/1 Bahij, Tahoma, "Muli", sans-serif; white-space: nowrap; transition: background .25s, color .25s, border-color .25s, transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; }
/* hero (front page): pill buttons over the scene */
.ms-top--hero .ms-top__link { display: inline-block; padding: .64rem 1.35rem; border: 2px solid rgba(255, 255, 255, .55); border-radius: 999px; color: #fff; }
.ms-top--hero .ms-top__link:hover, .ms-top--hero .ms-top__link:focus-visible { border-color: #f8d30c; color: #f8d30c; transform: translateY(-2px); }
.ms-top--hero .ms-top__link.is-active { background: #f8d30c; border-color: #f8d30c; color: #2a0d30; }
.ms-top--hero .ms-top__link.is-active:hover { background: transparent; color: #f8d30c; }
.ms-top__lang { display: inline-block; padding: .55rem 1.05rem; border: 2px solid rgba(255, 255, 255, .4); border-radius: 999px; color: #fff; font-size: .95rem; background: rgba(15, 7, 15, .25); }
.ms-top__lang:hover, .ms-top__lang:focus-visible { border-color: #f8d30c; color: #f8d30c; }
.ms-top__lang-short { display: none; }
.ms-top__call { display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 1.3rem; border-radius: 999px; background: #f8d30c; color: #2a0d30; font-weight: 800; box-shadow: 0 6px 16px rgba(248, 211, 12, .35); }
.ms-top__call:hover, .ms-top__call:focus-visible { background: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(248, 211, 12, .45); }
.ms-top__call svg { flex: none; }
.ms-top__progress { position: absolute; inset-inline: 0; bottom: -4px; height: 4px; background: #fff; transform: scaleX(0); transform-origin: left; pointer-events: none; }
html[dir="rtl"] .ms-top__progress { transform-origin: right; }
.ms-top--hero .ms-top__progress { display: none; }
@media (max-width: 991px) { .ms-top__call-text { display: none; } .ms-top__call { padding: .7rem; } }
@media (max-width: 700px) {
  .ms-top { gap: 8px; }
  .ms-top__logo img { height: 40px; }
  .ms-top__lang-long { display: none; }
  .ms-top__lang-short { display: inline; }
  .ms-top__lang { padding: .5rem .75rem; }
  .ms-top--hero { padding: 10px 12px; min-height: 0; }
  .ms-top--hero .ms-top__call { display: none; }
  .ms-top--hero .ms-top__link { padding: .5rem .85rem; font-size: .95rem; }
}

/* ═════════════ Inner pages (Main Menu, Our Branches): body.ms-inner ═════════════
   One campaign colour for the top bar, hero and footer: the aubergine of the campaign's studio backdrop.
   Yellow is the accent, lilac the caption outline; the page body stays light. */

body.ms-portal {
  --ms-studio: #2d1631; --ms-yellow: #f8d30c; --ms-lilac: #b66ebd; --ms-ink: #2d1631; --ms-muted: #7a6680;
  --ms-line: #ece1f0; --ms-paper: #fbf8fc; --ms-ease: cubic-bezier(.2, .7, .2, 1);
  --ms-font: Bahij, Tahoma, "Muli", sans-serif;
}
body.ms-inner {
  --ms-top-h: 72px; --ms-chips-h: 72px;
  background: var(--ms-paper) !important;
}
.ms-sr { position: absolute !important; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The theme's header, title strip and white preloader give way to the campaign top bar + hero */
body.ms-inner header.header, body.ms-inner #page-title, body.ms-inner .preloader { display: none !important; }
body.ms-inner .layout-wrap.sticky-header { padding-top: 0 !important; }
body.ms-inner #wrapper, body.ms-inner .layout-wrap, body.ms-inner #content-wide-top, body.ms-inner #page-wrapper { background: transparent !important; }

/* ── Solid top bar (inner pages, and the front page since 2026-10-17): aubergine, compacts once you scroll (topbar.js) ── */
.ms-top--solid { position: sticky; top: 0; height: 96px; min-height: 0; background: var(--ms-studio); box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
  transition: height .45s var(--ms-ease), box-shadow .45s; }
.ms-top--solid.is-scrolled { height: 72px; box-shadow: 0 14px 34px rgba(24, 9, 28, .3); }
.ms-top--solid.ms-top--fixed { position: fixed; top: 0; inset-inline: 0; } /* front page: over the scene */
.ms-top--solid .ms-top__logo img { height: 72px; transition: height .45s var(--ms-ease); }
.ms-top--solid.is-scrolled .ms-top__logo img { height: 56px; }
.ms-top--solid .ms-top__nav { gap: 4px; }
.ms-top--solid .ms-top__link { position: relative; display: inline-block; padding: .75rem 1.05rem; color: rgba(255, 255, 255, .82); font-size: 1.12rem; }
.ms-top--solid .ms-top__link::after { content: ""; position: absolute; inset-inline: 1.05rem; bottom: .25rem; height: 3px; border-radius: 3px; background: var(--ms-yellow);
  transform: scaleX(0); transition: transform .45s var(--ms-ease); }
.ms-top--solid .ms-top__link:hover, .ms-top--solid .ms-top__link:focus-visible { color: #fff; }
.ms-top--solid .ms-top__link:hover::after, .ms-top--solid .ms-top__link:focus-visible::after, .ms-top--solid .ms-top__link.is-active::after { transform: scaleX(1); }
.ms-top--solid .ms-top__link.is-active { color: var(--ms-yellow); }
.ms-top--solid .ms-top__lang { background: transparent; border-color: rgba(255, 255, 255, .28); }
.ms-top--solid .ms-top__call { box-shadow: none; }
/* Latin-only bits: the theme forces Bahij (serif Latin glyphs) on everything in Arabic */
.ms-top--solid .ms-top__lang, .ms-top--solid .ms-top__lang span, .ms-top--solid .ms-top__call-text { font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; font-weight: 700; letter-spacing: .02em; }
/* …except the "ع" in the phone circle on English pages: those fonts have no Arabic, so each phone fell back to its own font, low in the circle.
   The site's Arabic font, lifted onto the letter's own centre (Arabic fonts keep room above the letters for vowel marks). */
@media (max-width: 700px) { /* the short label only exists on phones */
  .ms-top--solid .ms-top__lang[lang="ar"] .ms-top__lang-short { display: block; font: 700 1.05rem/1 Bahij, Tahoma, sans-serif !important; letter-spacing: 0; transform: translateY(-.18em); }
}
.ms-top--solid .ms-top__progress { bottom: 0; height: 3px; background: var(--ms-yellow); }
@media (max-width: 700px) {
  body.ms-inner { --ms-top-h: 60px; --ms-chips-h: 62px; }
  .ms-top--solid { height: 64px; padding: 0 12px; gap: 6px; }
  .ms-top--solid.is-scrolled { height: 60px; }
  .ms-top--solid .ms-top__logo img, .ms-top--solid.is-scrolled .ms-top__logo img { height: 44px; }
  .ms-top--solid .ms-top__nav { margin-inline-start: 2px; gap: 0; }
  .ms-top--solid .ms-top__link { padding: .6rem .5rem; font-size: .92rem; }
  .ms-top--solid .ms-top__link::after { inset-inline: .5rem; bottom: .1rem; height: 2px; }
  .ms-top--solid .ms-top__end { gap: 6px; }
  .ms-top--solid .ms-top__lang { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; font-size: .85rem; }
  .ms-top--solid .ms-top__call { width: 36px; height: 36px; padding: 0; justify-content: center; }
}
@media (max-width: 370px) { .ms-top--solid .ms-top__call { display: none; } }
/* Tablets and desktop: the content in the footer's 1240px container. Logo | the two links, centred in a quiet capsule | language + call.
   The call button stays the only solid yellow; the current page is a yellow tint. */
@media (min-width: 768px) {
  .ms-top--solid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    padding-inline: max(clamp(20px, 4vw, 48px), calc((100% - 1240px) / 2 + clamp(20px, 4vw, 48px))); }
  .ms-top--solid .ms-top__logo { justify-self: start; }
  .ms-top--solid .ms-top__end { justify-self: end; margin: 0; }
  .ms-top--solid .ms-top__nav { justify-self: center; gap: 4px; margin: 0; padding: 5px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; background: rgba(255, 255, 255, .05); }
  .ms-top--solid .ms-top__link { padding: .7rem 1.45rem; border-radius: 999px; transition: color .25s, background .25s; }
  .ms-top--solid .ms-top__link::after { display: none; }
  .ms-top--solid .ms-top__link:hover, .ms-top--solid .ms-top__link:focus-visible { background: rgba(255, 255, 255, .08); }
  .ms-top--solid .ms-top__link.is-active { background: rgba(248, 211, 12, .14); color: var(--ms-yellow); }
}

/* ── First section: the two campaign posters (أنا الموصلي → إحنا الموصلي), 3 seconds each.
   Pure CSS, so it runs before this server's slow scripts arrive. Track = poster 1, poster 2, poster 1 again (seamless loop). ── */
.ms-hero { position: relative; z-index: 5; background: var(--ms-studio); }
.ms-slider { --s: -1; --h: min(calc(100vw * 1285 / 1660), 72vh, 640px); position: relative; height: var(--h); overflow: hidden; }
html[dir="rtl"] .ms-slider { --s: 1; }
.ms-slider__track { display: flex; width: 300%; height: 100%; animation: ms-slide 6s infinite; }
.ms-slide { position: relative; flex: 0 0 33.3333%; height: 100%; margin: 0; overflow: hidden; }
/* on wide screens the poster sits in the middle; the sides continue its own edge colours (sampled from the artwork) */
.ms-slide--campaign-1 { background: linear-gradient(180deg, #231524 0%, #2c162f 25%, #29162c 50%, #211421 75%, #35173b 100%); }
.ms-slide--campaign-2 { background: linear-gradient(180deg, #171215 0%, #191217 25%, #181216 50%, #151112 75%, #1a1319 100%); }
.ms-slide__img { position: relative; display: block; width: auto; height: 100%; max-width: 100%; margin: 0 auto; object-fit: contain; }
@media (min-width: 900px) {
  .ms-slide__img { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); }
}
.ms-slider__dots { position: absolute; bottom: 14px; left: 50%; display: flex; gap: 8px; transform: translateX(-50%); }
.ms-slider__dots i { display: block; width: 9px; height: 9px; border-radius: 9px; background: rgba(255, 255, 255, .45); }
.ms-slider__dots b { position: absolute; top: 0; inset-inline-start: 0; width: 9px; height: 9px; border-radius: 9px; background: var(--ms-yellow); animation: ms-slide-dot 6s infinite; }
@keyframes ms-slide {
  0%, 40% { transform: translateX(0); }
  50%, 90% { transform: translateX(calc(var(--s) * 33.3333%)); }
  100% { transform: translateX(calc(var(--s) * 66.6667%)); }
}
@keyframes ms-slide-dot {
  0%, 40%, 100% { transform: translateX(0); }
  50%, 90% { transform: translateX(calc(var(--s) * -17px)); }
}
@media (prefers-reduced-motion: reduce) {
  /* the posters still change every 3 seconds, without sliding */
  .ms-slider__track, .ms-slider__dots b { animation-timing-function: step-end; }
}

/* ── Front page (body.ms-front): the top bar and the posters slider filling the rest of the screen, nothing else.
   The theme's old landing (logo + two tiles) and white preloader stay hidden. ── */
body.ms-front .main-page-container, body.ms-front .pattern, body.ms-front .preloader { display: none !important; }
body.ms-front { --ms-bar-h: 96px; --ms-vh: 100vh; padding-top: 0 !important; background: var(--ms-studio) !important; }
@supports (height: 100svh) { body.ms-front { --ms-vh: 100svh; } }
@media (max-width: 700px) { body.ms-front { --ms-bar-h: 64px; } }
body.ms-front .ms-slider { --h: max(320px, calc(var(--ms-vh) - var(--ms-bar-h))); }
/* Tablets and desktop: the posters alone, centred, full height (the top bar already links both pages). */
.ms-hero__ctas { display: none; }
/* Phones: the two portal pages as two yellow buttons side by side, half the width each, in a band under the poster
   (over it they would cover poster 1's logo). */
@media (max-width: 700px) {
  body.ms-front .ms-slider { --ms-cta-h: 108px; }
  body.ms-front .ms-slide { padding-bottom: var(--ms-cta-h); }
  .ms-hero__ctas { position: absolute; z-index: 2; inset-inline: 16px; bottom: 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ms-hero__btn { display: flex; align-items: center; justify-content: center; height: 54px; padding: 0 10px; border-radius: 999px; background: var(--ms-yellow); color: var(--ms-studio) !important;
    font: 800 1.1rem/1 var(--ms-font); text-align: center; text-decoration: none; box-shadow: 0 10px 24px rgba(0, 0, 0, .35); -webkit-tap-highlight-color: transparent;
    transition: transform .2s var(--ms-ease), background .25s; }
  .ms-hero__btn:active { background: #fff; transform: scale(.97); }
  .ms-hero__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
}
/* portrait screens: the whole poster, centred, its top and bottom edges fading into the slide's own colours */
@media (max-aspect-ratio: 1/1) {
  body.ms-front .ms-slide { display: flex; align-items: center; }
  body.ms-front .ms-slide__img { width: 100%; height: auto;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%); }
}

/* Room under the posters */
body.ms-inner #page-title + #content-wide-top, body.ms-inner #page-title + #page-wrapper { padding-top: 28px; }

/* ── Promo slider: a centred carousel (portal-inner.js re-initialises it; .ms-promo-on once that worked) ── */
body.ms-inner #block-views-block-main-menu-slide-block-1 { position: relative; padding: 4px 0 6px; margin: 0; overflow-x: clip; }
body.ms-inner #block-views-block-main-menu-slide-block-1 .owl-item-cont, body.ms-inner #block-views-block-main-menu-slide-block-1 .owl-item-cont .views-field,
body.ms-inner #block-views-block-main-menu-slide-block-1 .owl-item-cont .field-content { display: block !important; width: 100%; }
/* margin-inline stays auto: the theme caps .container-wrap at 1600px and it must stay centred */
body.ms-inner #block-views-block-main-menu-slide-block-1 .container-wrap, body.ms-inner #block-views-block-main-menu-slide-block-1 .block-content { padding: 0 !important; margin-block: 0 !important; }
body.ms-inner #block-views-block-main-menu-slide-block-1 .owl-item-cont { overflow: hidden; border-radius: 26px; background: #efe6f2; box-shadow: 0 16px 36px rgba(45, 22, 49, .14);
  transition: transform .9s var(--ms-ease), opacity .9s, box-shadow .9s; }
body.ms-inner #block-views-block-main-menu-slide-block-1 .owl-item-cont img { display: block; width: 100%; height: auto; aspect-ratio: 800 / 451; object-fit: cover; border-radius: 0; transition: transform 1.4s var(--ms-ease); }
/* Before any script runs (this server serves them slowly), the slides already sit in the carousel's final layout,
   so nothing jumps when owl takes over: slide 1 in the centre, its neighbours peeking. */
body.ms-inner #block-views-block-main-menu-slide-block-1 .owl-carousel:not(.owl-loaded) { display: flex !important; justify-content: center; gap: 30px; padding: 18px 0 51px; direction: ltr; }
body.ms-inner #block-views-block-main-menu-slide-block-1 .owl-carousel:not(.owl-loaded) > .owl-item-cont { flex: 0 0 calc(100% / 2.3 - 30px); }
body.ms-inner #block-views-block-main-menu-slide-block-1 .owl-carousel:not(.owl-loaded) > .owl-item-cont:nth-child(3) { order: -1; }
body.ms-inner #block-views-block-main-menu-slide-block-1 .owl-carousel:not(.owl-loaded) > .owl-item-cont:not(:first-child) { transform: scale(.86); opacity: .45; }
@media (max-width: 1199px) {
  body.ms-inner #block-views-block-main-menu-slide-block-1 .owl-carousel:not(.owl-loaded) { gap: 22px; }
  body.ms-inner #block-views-block-main-menu-slide-block-1 .owl-carousel:not(.owl-loaded) > .owl-item-cont { flex-basis: calc(100% / 1.7 - 22px); }
}
@media (max-width: 767px) {
  body.ms-inner #block-views-block-main-menu-slide-block-1 .owl-carousel:not(.owl-loaded) { gap: 14px; padding: 10px 0 39px; }
  body.ms-inner #block-views-block-main-menu-slide-block-1 .owl-carousel:not(.owl-loaded) > .owl-item-cont { flex-basis: calc(100% / 1.2 - 14px); }
}
.ms-promo-on .owl-carousel { direction: ltr; }
.ms-promo-on .owl-stage-outer { padding: 18px 0 34px; }
/* The theme reveals its product carousels' buttons on hover (stage padding-bottom +100px, margin-bottom -100px, arrows -51px):
   with this carousel's own padding that nets -34px, so the filter below jumped up on hover and back down on leave. Keep the layout still. */
.ms-promo-on .owl-slider-wrapper:hover .owl-stage-outer { padding-bottom: 34px; margin-bottom: 0; }
.ms-promo-on .owl-slider-wrapper:hover .owl-nav { transform: translateY(-50%); }
.ms-promo-on .owl-item:not(.center) .owl-item-cont { transform: scale(.86); opacity: .45; box-shadow: 0 8px 20px rgba(45, 22, 49, .1); }
.ms-promo-on .owl-item.center .owl-item-cont { box-shadow: 0 30px 60px rgba(45, 22, 49, .26); }
.ms-promo-on .owl-item.center .owl-item-cont:hover img { transform: scale(1.05); }
.ms-promo-on .owl-nav { position: absolute; top: calc(50% - 20px); inset-inline: 0; display: flex; justify-content: space-between; margin: 0 !important; padding-inline: clamp(10px, 6vw, 110px);
  transform: translateY(-50%); pointer-events: none; }
.ms-promo-on .owl-nav.disabled { display: none; }
.ms-promo-on .owl-nav button.owl-prev, .ms-promo-on .owl-nav button.owl-next { position: static !important; display: grid !important; place-items: center; width: 54px !important; height: 54px !important; margin: 0 !important;
  padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: #fff !important; color: var(--ms-ink) !important; opacity: 1 !important; pointer-events: auto; cursor: pointer;
  box-shadow: 0 12px 28px rgba(45, 22, 49, .22); transition: transform .35s var(--ms-ease), background .25s !important; }
.ms-promo-on .owl-nav button:hover, .ms-promo-on .owl-nav button:focus-visible { background: var(--ms-yellow) !important; transform: scale(1.08); }
.ms-promo-on .owl-nav button svg { display: block; }
.ms-promo-on .owl-dots { display: flex !important; justify-content: center; gap: 8px; margin: 0 !important; }
.ms-promo-on .owl-dots .owl-dot { padding: 0 !important; background: none !important; border: 0 !important; }
.ms-promo-on .owl-dots .owl-dot span { display: block; width: 9px; height: 9px; margin: 0 !important; border-radius: 9px; background: rgba(45, 22, 49, .18) !important; transition: width .45s var(--ms-ease), background .3s; }
.ms-promo-on .owl-dots .owl-dot.active span { width: 32px; background: var(--ms-yellow) !important; }
@media (max-width: 767px) {
  .ms-promo-on .owl-stage-outer, .ms-promo-on .owl-slider-wrapper:hover .owl-stage-outer { padding: 10px 0 22px; }
  .ms-promo-on .owl-nav { display: none !important; }
  body.ms-inner #block-views-block-main-menu-slide-block-1 .owl-item-cont { border-radius: 18px; }
}

/* ── Category filter: a frosted bar under the top bar. Main categories, then (once one is picked) its sub-categories ── */
/* !important: the theme's script pins this block with inline position:fixed and pads the body */
body.ms-inner { padding-top: 0 !important; }
body.ms-inner .ms-chipsbar, body.ms-inner .ms-chipsbar.is-fixed { position: sticky !important; top: var(--ms-top-h) !important; left: auto !important; right: auto !important; z-index: 50 !important;
  margin: 0 !important; padding: 12px 0; background: rgba(251, 248, 252, .9) !important; -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--ms-line); }
body.ms-inner #block-exposedformproductsblock-1 { scroll-margin-top: var(--ms-top-h); } /* after picking a category the page lands here */
body.ms-inner .ms-chipsbar .block, body.ms-inner .ms-chipsbar .container-wrap, body.ms-inner .ms-chipsbar .block-content { margin-block: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
body.ms-inner #views-exposed-form-products-block-1 { flex-wrap: wrap; justify-content: center; margin: 0 !important; }
/* !important: a theme rule keeps the fieldset at its content width (flex: 0 0 auto), which breaks the swipeable rows */
body.ms-inner #views-exposed-form-products-block-1 > fieldset, body.ms-inner #child-category-wrapper-hierarchical_category_filter { flex: 1 1 100% !important; width: 100% !important; min-width: 0 !important; max-width: 100%; }
body.ms-inner #views-exposed-form-products-block-1 fieldset, body.ms-inner #views-exposed-form-products-block-1 .fieldset-wrapper { margin: 0 !important; padding: 0 !important; border: 0 !important; }
body.ms-inner #views-exposed-form-products-block-1 .fieldset-wrapper { position: relative; }
body.ms-inner #views-exposed-form-products-block-1 legend { display: none; }
body.ms-inner #views-exposed-form-products-block-1 .form-checkboxes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0 16px !important; }
body.ms-inner #views-exposed-form-products-block-1 .form-item { display: block !important; float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; background: transparent !important; box-shadow: none !important; }
body.ms-inner #views-exposed-form-products-block-1 input.form-checkbox { position: absolute; opacity: 0; pointer-events: none; }

/* Main categories (+ the "all" chip that portal-inner.js adds) */
body.ms-inner #views-exposed-form-products-block-1 label.option, body.ms-inner .ms-cat-all { display: inline-flex; align-items: center; margin: 0; padding: .62rem 1.25rem; background: #fff;
  border: 1.5px solid var(--ms-line); border-radius: 999px; color: var(--ms-ink) !important; font: 700 1rem/1.1 var(--ms-font); white-space: nowrap; text-decoration: none; cursor: pointer;
  box-shadow: 0 2px 8px rgba(45, 22, 49, .04); transition: transform .35s var(--ms-ease), background .25s, border-color .25s, color .25s, box-shadow .35s; }
body.ms-inner #views-exposed-form-products-block-1 label.option::before, body.ms-inner #views-exposed-form-products-block-1 label.option::after { display: none !important; }
/* The theme makes the chip row a scroll box: a chip lifted on hover got its top cut off (and its shadow clipped) in the sticky bar.
   The row may overflow now, and hover only recolours: nothing moves in a sticky toolbar. */
body.ms-inner #views-exposed-form-products-block-1 [id^="edit-hierarchical-category-filter"] { overflow: visible !important; }
body.ms-inner #views-exposed-form-products-block-1 label.option:hover, body.ms-inner .ms-cat-all:hover { border-color: var(--ms-lilac); background: #faf5fb; }
body.ms-inner #views-exposed-form-products-block-1 input:checked + label.option, body.ms-inner .ms-cat-all.is-on { background: var(--ms-studio); border-color: var(--ms-studio); color: var(--ms-yellow) !important;
  box-shadow: 0 10px 22px rgba(45, 22, 49, .26); }
body.ms-inner #views-exposed-form-products-block-1 input:focus-visible + label.option, body.ms-inner .ms-cat-all:focus-visible { outline: 3px solid var(--ms-yellow); outline-offset: 2px; }

/* Sub-categories: a lighter, smaller second row, set off by a dashed rule */
body.ms-inner #child-category-wrapper-hierarchical_category_filter:not(:has(input)) { display: none; } /* empty until a category with sub-categories is picked */
body.ms-inner #child-category-wrapper-hierarchical_category_filter { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e3d4e9; }
body.ms-inner #child-category-wrapper-hierarchical_category_filter .form-checkboxes { gap: 8px; }
body.ms-inner #child-category-wrapper-hierarchical_category_filter label.option { padding: .42rem 1rem; background: #f4ecf7; border-color: transparent; font-size: .9rem; font-weight: 700; box-shadow: none; }
body.ms-inner #child-category-wrapper-hierarchical_category_filter label.option:hover { background: #ecdff1; border-color: transparent; box-shadow: none; }
body.ms-inner #child-category-wrapper-hierarchical_category_filter input:checked + label.option { background: var(--ms-yellow); border-color: var(--ms-yellow); color: var(--ms-ink) !important;
  box-shadow: 0 8px 18px rgba(248, 211, 12, .35); }

/* Phones and tablets: the bar is one button (rendered by the module) that opens every category in a sheet */
.ms-cats-btn { display: none; }
@media (max-width: 1199px) {
  body.ms-inner .ms-chipsbar { padding: 8px 12px; }
  /* fieldset.form-item: it is also a .form-item, which the rule above shows */
  body.ms-inner #views-exposed-form-products-block-1 > fieldset.form-item, body.ms-inner #views-exposed-form-products-block-1 #child-category-wrapper-hierarchical_category_filter { display: none !important; }
  .ms-cats-btn { display: flex; flex: 1 1 100%; align-items: center; gap: 10px; width: 100%; max-width: 560px; height: 48px; margin: 0 auto; padding: 0 10px 0 12px; border: 1.5px solid var(--ms-line);
    border-radius: 16px; background: #fff; color: var(--ms-ink); font: 800 .98rem/1 var(--ms-font); text-align: start; cursor: pointer; box-shadow: 0 6px 18px rgba(45, 22, 49, .08);
    transition: border-color .25s, box-shadow .3s; }
  html[dir="rtl"] .ms-cats-btn { padding: 0 12px 0 10px; }
  .ms-cats-btn:hover, .ms-cats-btn[aria-expanded="true"] { border-color: var(--ms-lilac); box-shadow: 0 10px 24px rgba(45, 22, 49, .14); }
  .ms-cats-btn:focus-visible { outline: 3px solid var(--ms-yellow); outline-offset: 2px; }
  .ms-cats-btn__icon { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--ms-studio); color: var(--ms-yellow); }
  .ms-cats-btn__label { flex: none; }
  .ms-cats-btn__now { overflow: hidden; min-width: 0; margin-inline-start: auto; padding: .32rem .75rem; border-radius: 999px; background: var(--ms-yellow); color: var(--ms-ink); font-size: .84rem;
    white-space: nowrap; text-overflow: ellipsis; }
  .ms-cats-btn__now:empty { display: none; }
  .ms-cats-btn__chev { flex: none; color: var(--ms-muted); transition: transform .3s var(--ms-ease); }
  .ms-cats-btn[aria-expanded="true"] .ms-cats-btn__chev { transform: rotate(180deg); }
}

/* The categories sheet: every category and sub-category as a big tap target */
.ms-sheet { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; justify-content: center; visibility: hidden; pointer-events: none; font-family: var(--ms-font);
  transition: visibility 0s linear .45s; }
.ms-sheet.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.ms-sheet__backdrop { position: absolute; inset: 0; background: rgba(24, 9, 28, .55); opacity: 0; transition: opacity .35s; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.ms-sheet.is-open .ms-sheet__backdrop { opacity: 1; }
.ms-sheet__panel { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: 82vh; padding-bottom: env(safe-area-inset-bottom); background: #fff;
  border-radius: 26px 26px 0 0; box-shadow: 0 -20px 50px rgba(24, 9, 28, .3); transform: translateY(100%); transition: transform .45s var(--ms-ease); }
.ms-sheet.is-open .ms-sheet__panel { transform: none; }
.ms-sheet__grab { width: 44px; height: 5px; margin: 10px auto 0; border-radius: 5px; background: #e2d6e6; }
.ms-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px 8px; }
.ms-sheet__title { margin: 0 !important; color: var(--ms-ink) !important; font: 800 1.3rem/1.2 var(--ms-font) !important; }
.ms-sheet__close { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: #f4ecf7; color: var(--ms-ink); font: 400 1.5rem/1 Arial, sans-serif; cursor: pointer; }
.ms-sheet__list { display: grid; gap: 6px; padding: 4px 14px 20px; overflow-y: auto; overscroll-behavior: contain; }
.ms-sheet__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 16px; border: 0; border-radius: 16px; background: transparent;
  color: var(--ms-ink); font: 700 1.02rem/1.35 var(--ms-font); text-align: start; cursor: pointer; transition: background .2s, color .2s; }
.ms-sheet__item::after { content: ""; flex: none; width: 22px; height: 22px; border: 2px solid #d9cbe0; border-radius: 50%; }
.ms-sheet__item:hover { background: #f7f1f9; }
.ms-sheet__item[aria-pressed="true"] { background: var(--ms-studio); color: var(--ms-yellow); }
.ms-sheet__item[aria-pressed="true"]::after { border-color: var(--ms-yellow);
  background: var(--ms-yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232d1631' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 14px no-repeat; }
.ms-sheet__item--sub { width: calc(100% - 22px); margin-inline-start: 22px; padding: 11px 16px; background: #faf6fb; font-size: .94rem; }
.ms-sheet__item--sub[aria-pressed="true"] { background: var(--ms-yellow); color: var(--ms-ink); }
.ms-sheet__item--sub[aria-pressed="true"]::after { border-color: var(--ms-ink);
  background: var(--ms-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f8d30c' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 14px no-repeat; }
.ms-sheet__item:focus-visible, .ms-sheet__close:focus-visible { outline: 3px solid var(--ms-yellow); outline-offset: 2px; }
.ms-sheet__item.is-loading::after { border-color: currentColor; border-top-color: transparent; background: none; animation: ms-spin .7s linear infinite; }
@keyframes ms-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ms-sheet__panel, .ms-sheet__backdrop { transition: none; } }

/* ── Products ── */
body.ms-inner #page-wrapper { padding-top: 34px; }
body.ms-inner .product-teaser-wrap { height: 100%; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
body.ms-inner #block-views-block-products-block-1 .grid-item { margin-bottom: 26px; }
body.ms-inner .product-teaser { position: relative; height: 100%; overflow: hidden; border: 0 !important; border-radius: 24px !important; background: #fff;
  box-shadow: 0 1px 0 rgba(45, 22, 49, .04), 0 12px 32px rgba(45, 22, 49, .07); transition: transform .5s var(--ms-ease), box-shadow .5s; }
body.ms-inner .product-teaser::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 4px; background: var(--ms-yellow); transform: scaleX(0); transition: transform .5s var(--ms-ease); }
body.ms-inner .product-teaser:hover { transform: translateY(-8px); box-shadow: 0 28px 54px rgba(45, 22, 49, .16); }
body.ms-inner .product-teaser:hover::after { transform: scaleX(1); }
body.ms-inner .product-teaser .post-image { margin: 0 !important; padding: 16px 16px 6px; background: radial-gradient(circle at 50% 60%, #f2e4f6 0, #faf4fb 45%, #fff 72%); }
body.ms-inner .product-teaser .post-image img { transition: transform .9s var(--ms-ease); }
body.ms-inner .product-teaser:hover .post-image img { transform: scale(1.07) rotate(-1.5deg); }
body.ms-inner .product-meta-wrap { padding: 4px 20px 20px !important; }
body.ms-inner .product-title, body.ms-inner .product-title .field { color: var(--ms-ink) !important; font: 800 1.08rem/1.4 var(--ms-font) !important; }
body.ms-inner .product-description, body.ms-inner .product-description * { color: var(--ms-muted) !important; font-size: .86rem !important; line-height: 1.65 !important; }
body.ms-inner .product-price .field-price { display: inline; padding: 0 .1em; background: linear-gradient(transparent 58%, rgba(248, 211, 12, .6) 58%); color: var(--ms-ink) !important;
  font: 800 1.15rem/1.3 var(--ms-font) !important; }
body.ms-inner .button--add-to-cart { width: 42px !important; height: 42px !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; cursor: pointer;
  text-indent: -999px; overflow: hidden; color: transparent !important;
  background: linear-gradient(#f8d30c, #f8d30c) center / 15px 2.5px no-repeat, linear-gradient(#f8d30c, #f8d30c) center / 2.5px 15px no-repeat, #2d1631 !important;
  box-shadow: 0 8px 18px rgba(45, 22, 49, .25); transition: transform .45s var(--ms-ease), box-shadow .4s !important; }
body.ms-inner .button--add-to-cart:hover, body.ms-inner .button--add-to-cart:focus-visible { transform: rotate(90deg) scale(1.1);
  background: linear-gradient(#2d1631, #2d1631) center / 15px 2.5px no-repeat, linear-gradient(#2d1631, #2d1631) center / 2.5px 15px no-repeat, #f8d30c !important;
  box-shadow: 0 0 0 6px rgba(248, 211, 12, .3), 0 10px 20px rgba(45, 22, 49, .2); }
body.ms-inner .button--add-to-cart:active { transform: scale(.9); }
body.ms-inner .product-select .button { border-radius: 999px !important; background: var(--ms-studio) !important; color: #fff !important; border: 0 !important; }
@media (max-width: 575px) {
  body.ms-inner #block-views-block-products-block-1 .grid-wrapper { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 !important; padding: 0 2px; }
  body.ms-inner #block-views-block-products-block-1 .grid-wrapper > * { width: auto !important; max-width: none !important; flex: none !important; margin: 0 !important; padding: 0 !important; }
  body.ms-inner .product-teaser { border-radius: 18px !important; }
  body.ms-inner .product-teaser .post-image { padding: 10px 10px 2px; }
  body.ms-inner .product-meta-wrap { padding: 2px 12px 14px !important; }
  body.ms-inner .product-title, body.ms-inner .product-title .field { font-size: .95rem !important; }
  body.ms-inner .product-description, body.ms-inner .product-description * { font-size: .76rem !important; line-height: 1.5 !important; }
  body.ms-inner .product-price .field-price { font-size: 1rem !important; }
  body.ms-inner .button--add-to-cart { width: 36px !important; height: 36px !important; }
}

/* ── Pager ── */
body.ms-inner .pager__items { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0 10px; padding: 0; }
body.ms-inner .pager__item { margin: 0; padding: 0; list-style: none; }
body.ms-inner .pager__item a { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 16px; border: 1.5px solid var(--ms-line); border-radius: 999px; background: #fff;
  color: var(--ms-ink) !important; font: 800 1rem/1 var(--ms-font); text-decoration: none; transition: transform .35s var(--ms-ease), border-color .25s, background .25s, color .25s; }
body.ms-inner .pager__item a:hover { transform: translateY(-2px); border-color: var(--ms-lilac); }
body.ms-inner .pager__item.is-active a { background: var(--ms-studio) !important; border-color: var(--ms-studio) !important; color: var(--ms-yellow) !important; }

/* ── Cart ── */
/* relative (not sticky): on phones a sticky cart parked over the contact button at the end of the page */
body.ms-inner .custom-cart { position: relative !important; top: auto !important; overflow: hidden; border: 0 !important; border-radius: 24px; background: #fff; box-shadow: 0 18px 44px rgba(45, 22, 49, .11); }
body.ms-inner .header-cart { position: relative; padding: 22px 24px 20px !important; border: 0 !important; background: var(--ms-studio) !important; }
body.ms-inner .header-cart::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 4px; background: var(--ms-yellow); }
body.ms-inner .header-cart h2 { margin: 0 0 4px; color: var(--ms-yellow) !important; font: 800 1.55rem/1.2 var(--ms-font) !important; }
body.ms-inner .header-cart small { color: rgba(255, 255, 255, .72) !important; font-size: .88rem; }
body.ms-inner .cart-items { position: relative; height: auto !important; min-height: 130px; max-height: 42vh; overflow-y: auto; }
body.ms-inner .custom-cart.is-empty .cart-items::before { content: ""; position: absolute; inset: 0; background: url("../img/lantern.webp") center / auto 70px no-repeat; opacity: .22; }
body.ms-inner .cart-total { position: static !important; display: flex; align-items: center; justify-content: space-between; padding: 16px 24px !important; border-top: 1px dashed var(--ms-line); background: var(--ms-paper) !important; }
body.ms-inner .cart-total span { color: var(--ms-muted) !important; font: 700 1rem var(--ms-font); }
body.ms-inner .cart-total strong { color: var(--ms-ink) !important; font: 800 1.25rem var(--ms-font); }
body.ms-inner .cart-action { margin-top: 14px; }
body.ms-inner .cart-action .order-button { display: flex !important; align-items: center; justify-content: center; gap: 10px; width: 100% !important; padding: 15px 20px !important; border: 0 !important;
  border-radius: 999px !important; background: var(--ms-yellow) !important; color: var(--ms-ink) !important; font: 800 1.05rem/1.2 var(--ms-font); text-decoration: none;
  box-shadow: 0 12px 26px rgba(248, 211, 12, .38); transition: transform .35s var(--ms-ease), box-shadow .35s, background .25s; }
body.ms-inner .cart-action .order-button:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(248, 211, 12, .5); }
body.ms-inner .cart-action .order-button .icon-phone, body.ms-inner .cart-action .order-button i { color: var(--ms-ink) !important; background: transparent !important; }

/* ── Phones: floating cart button + the cart in a bottom sheet (portal-inner.js moves it there; desktop keeps the sidebar) ── */
.ms-cartfab { display: none; }
@media (max-width: 767px) {
  .ms-cart-sheet .sidebar .block-custom-cart-block { display: none; } /* emptied: its content is in the sheet */
  .ms-cart-sheet .ms-foot__bar { padding-bottom: 96px; } /* the button never covers the credit */
  .ms-cartfab { position: fixed; z-index: 900; bottom: calc(16px + env(safe-area-inset-bottom)); inset-inline-start: 16px; display: inline-flex; align-items: center; gap: 12px;
    height: 60px; min-width: 60px; padding: 0; padding-inline: 14px 20px; border: 2px solid var(--ms-yellow); border-radius: 999px; background: var(--ms-studio); color: #fff;
    font: 800 1.05rem/1 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; cursor: pointer; box-shadow: 0 14px 34px rgba(45, 22, 49, .38), 0 4px 10px rgba(45, 22, 49, .2);
    -webkit-tap-highlight-color: transparent; transition: transform .35s var(--ms-ease), box-shadow .3s; }
  .ms-cartfab.is-empty { justify-content: center; width: 60px; padding: 0; }
  .ms-cartfab:active { transform: scale(.94); }
  .ms-cartfab:focus-visible { outline: 3px solid var(--ms-yellow); outline-offset: 3px; }
  .ms-cartfab__icon { position: relative; display: grid; place-items: center; color: var(--ms-yellow); }
  .ms-cartfab__count { position: absolute; top: -10px; inset-inline-end: -12px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--ms-yellow); color: var(--ms-studio);
    font: 800 .8rem/22px "Segoe UI", Roboto, Arial, sans-serif; text-align: center; box-shadow: 0 0 0 2px var(--ms-studio); }
  .ms-cartfab.is-empty .ms-cartfab__count { display: none; }
  .ms-cartfab__total { direction: ltr; white-space: nowrap; letter-spacing: .01em; }
  .ms-cartfab.is-bump { animation: ms-cart-bump .8s var(--ms-ease) .35s 2; }

  /* the sheet: the cart's own aubergine header on top, items scroll, total + order button stay at the bottom */
  body.ms-inner .ms-sheet--cart .ms-sheet__panel { max-height: 88vh; overflow: hidden; }
  body.ms-inner .ms-sheet--cart .ms-sheet__grab { position: absolute; z-index: 2; top: 0; left: 50%; margin: 9px 0 0 -22px; background: rgba(255, 255, 255, .35); }
  body.ms-inner .ms-sheet--cart .ms-sheet__close { position: absolute; z-index: 2; top: 18px; inset-inline-end: 14px; background: rgba(255, 255, 255, .14); color: #fff; }
  .ms-sheet__body { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
  body.ms-inner .ms-sheet--cart .custom-cart { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow: hidden; border: 0 !important; border-radius: 0; box-shadow: none; }
  html[dir="ltr"] body.ms-inner .ms-sheet--cart .custom-cart { direction: ltr; } /* the site's cart.css makes it RTL in every language */
  body.ms-inner .ms-sheet--cart .header-cart { padding: 28px 20px 18px !important; padding-inline-end: 64px !important; }
  body.ms-inner .ms-sheet--cart .cart-items { flex: 1 1 auto; min-height: 0; max-height: none; padding: 4px 18px !important; overflow-y: auto; overscroll-behavior: contain; transition: opacity .25s; }
  body.ms-inner .ms-sheet--cart .custom-cart.is-empty .cart-items { min-height: 150px; }
  body.ms-inner .ms-sheet--cart .cart-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px; margin: 0; padding: 14px 0; border-bottom: 1px solid var(--ms-line); }
  body.ms-inner .ms-sheet--cart .cart-item:last-child { border-bottom: 0; }
  body.ms-inner .ms-sheet--cart .cart-right { width: auto; }
  body.ms-inner .ms-sheet--cart .cart-right p { color: var(--ms-ink) !important; font: 700 .98rem/1.35 var(--ms-font) !important; }
  body.ms-inner .ms-sheet--cart .cart-left { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: #f4ecf7; direction: ltr; flex-direction: row-reverse; } /* − qty + */
  body.ms-inner .ms-sheet--cart .cart-left button { display: grid; place-items: center; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--ms-studio);
    font: 800 1.15rem/1 Arial, sans-serif; cursor: pointer; box-shadow: 0 1px 3px rgba(45, 22, 49, .14); }
  body.ms-inner .ms-sheet--cart .cart-left .qty { min-width: 24px; color: var(--ms-ink); font: 800 .98rem/1 "Segoe UI", Roboto, Arial, sans-serif; text-align: center; }
  body.ms-inner .ms-sheet--cart .cart-price strong, body.ms-inner .ms-sheet--cart .cart-total strong { direction: ltr; unicode-bidi: isolate; } /* "3.75 JD", not "JD 3.75" */
  body.ms-inner .ms-sheet--cart .cart-price strong { color: var(--ms-ink); font: 800 .95rem/1 "Segoe UI", Roboto, Arial, sans-serif; white-space: nowrap; }
  body.ms-inner .ms-sheet--cart div.remove-item { display: contents; }
  body.ms-inner .ms-sheet--cart button.remove-item { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #b3a1ba;
    font: 400 1.45rem/1 Arial, sans-serif; cursor: pointer; transition: background .25s, color .25s; }
  body.ms-inner body.ms-inner .ms-sheet--cart button.remove-item:hover, body.ms-inner .ms-sheet--cart button.remove-item:focus-visible { background: #fdecec; color: #c62828; }
  body.ms-inner .ms-sheet--cart .cart-total { flex: none; }
  body.ms-inner .ms-sheet--cart .cart-action { margin: 0; padding: 12px 16px 16px; border-top: 1px solid var(--ms-line); background: #fff; }
  body.ms-inner .ms-sheet--cart.is-busy .cart-items { opacity: .45; pointer-events: none; }
  .ms-sheet.is-instant .ms-sheet__panel, .ms-sheet.is-instant .ms-sheet__backdrop { transition: none; }
}
@keyframes ms-cart-bump { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.16); } 60% { transform: scale(.94); } }
@media (prefers-reduced-motion: reduce) { .ms-cartfab { transition: none; } }
@media (min-width: 992px) {
  body.ms-inner .sidebar .region-sidebar-second { position: sticky; top: calc(var(--ms-top-h) + var(--ms-chips-h) + 20px); }
}

/* ── Branches ── */
body.ms-inner #block-views-block-branches-block-1 .grid-wrapper { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; margin: 0 !important; }
body.ms-inner #block-views-block-branches-block-1 .grid-wrapper > * { width: auto !important; max-width: none !important; flex: none !important; margin: 0 !important; padding: 0 !important; }
body.ms-inner #block-views-block-branches-block-1 .views-field, body.ms-inner #block-views-block-branches-block-1 .field-content { display: block; height: 100%; }
body.ms-inner .branch, body.ms-inner .branch-name { height: 100%; margin: 0; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
body.ms-inner .branch-name a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; height: 100%; min-height: 158px; padding: 22px 16px;
  border: 0 !important; border-radius: 24px !important; background: #fff !important; color: var(--ms-ink) !important; font: 800 1.05rem/1.45 var(--ms-font) !important; text-align: center; text-decoration: none;
  box-shadow: 0 12px 30px rgba(45, 22, 49, .07); transition: transform .45s var(--ms-ease), background .3s, color .3s, box-shadow .45s; }
body.ms-inner .branch-name a::before { content: ""; flex: none; width: 54px; height: 54px; border-radius: 50%; transition: transform .45s var(--ms-ease);
  background: var(--ms-yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232d1631' d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / 26px no-repeat; }
body.ms-inner .branch-name a:hover, body.ms-inner .branch-name a:focus-visible { transform: translateY(-6px); background: var(--ms-studio) !important; color: #fff !important; box-shadow: 0 24px 46px rgba(45, 22, 49, .24); }
body.ms-inner .branch-name a:hover::before { transform: translateY(-3px) scale(1.06); }
body.ms-inner #block-maps { margin: 46px 0 !important; }
body.ms-inner #block-maps iframe { display: block; width: 100%; border: 0; border-radius: 28px; background: #eee6f0; box-shadow: 0 26px 60px rgba(45, 22, 49, .16); }
body.ms-inner #block-customerrecommended { text-align: center; }
body.ms-inner #block-customerrecommended .block-title { position: relative; display: inline-block; margin: 0 0 14px; padding-bottom: 14px; color: var(--ms-ink) !important; font: 800 clamp(1.7rem, 3vw, 2.4rem)/1.2 var(--ms-font) !important; }
body.ms-inner #block-customerrecommended .block-title::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 56px; height: 5px; margin-left: -28px; border-radius: 5px; background: var(--ms-yellow); }
body.ms-inner #block-customerrecommended p { color: var(--ms-muted) !important; font-size: 1rem; }
body.ms-inner #block-views-block-customer-recommended-block-1 .grid-item { margin-bottom: 20px; }
body.ms-inner .custoomer-card { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 100%; padding: 30px 24px !important; border: 0 !important;
  border-radius: 24px !important; background: #fff !important; text-decoration: none; box-shadow: 0 14px 34px rgba(45, 22, 49, .08); transition: transform .45s var(--ms-ease), box-shadow .45s; }
body.ms-inner .custoomer-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(45, 22, 49, .16); }
body.ms-inner .customer-number { color: var(--ms-ink) !important; font: 800 2.6rem/1 var(--ms-font) !important; }
.ms-stars { --p: 100%; display: block; font-size: 1.25rem; line-height: 1; letter-spacing: 4px; color: transparent;
  background: linear-gradient(90deg, var(--ms-yellow) var(--p), #e7dcea var(--p)); -webkit-background-clip: text; background-clip: text; }
@media (max-width: 575px) {
  body.ms-inner #block-views-block-branches-block-1 .grid-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  body.ms-inner .branch-name a { min-height: 132px; padding: 18px 10px; font-size: .95rem !important; border-radius: 20px !important; }
  body.ms-inner .branch-name a::before { width: 46px; height: 46px; background-size: 22px; }
  body.ms-inner #block-maps iframe { height: 360px; border-radius: 20px; }
}

/* ── Footer (module template, replaces the theme's here): aubergine like the top bar.
   Desktop: logo + call to order | quick links | contact | follow; tablet: logo and call on top, three columns under;
   phones: logo + social icons, a full-width call button, then links | contact. ── */
body.ms-inner footer.footer { display: none !important; }
.ms-foot { position: relative; isolation: isolate; overflow: hidden; margin-top: 72px; border-top: 4px solid var(--ms-yellow); background: var(--ms-studio); color: rgba(255, 255, 255, .78); font-family: var(--ms-font); }
/* the calligraphy is a corner piece (cut on its right and bottom edges): always the bottom-right corner, in both languages */
.ms-foot__mark { position: absolute; z-index: -1; right: 0; bottom: 0; width: min(40vw, 620px); height: auto; max-width: none; opacity: .09; pointer-events: none; }
.ms-foot__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr;
  grid-template-areas: "logo links contact follow" "call links contact follow"; align-items: start; gap: 22px 48px; max-width: 1240px; margin: 0 auto;
  padding: 64px clamp(20px, 4vw, 48px) 56px; }
.ms-foot__logo { grid-area: logo; justify-self: start; display: block; transition: opacity .25s; }
.ms-foot__logo:hover { opacity: .85; }
.ms-foot__logo img { display: block; width: auto; height: 72px; max-width: none; }
.ms-foot__call { grid-area: call; justify-self: start; display: inline-flex; align-items: center; gap: .55rem; padding: .8rem 1.35rem; border-radius: 999px; background: var(--ms-yellow);
  color: var(--ms-studio) !important; font: 800 1rem/1 var(--ms-font); text-decoration: none; transition: background .25s, transform .35s var(--ms-ease); }
.ms-foot__call:hover, .ms-foot__call:focus-visible { background: #fff; transform: translateY(-2px); }
.ms-foot__call svg { flex: none; }
.ms-foot .ms-foot__call bdi { font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; font-weight: 700; letter-spacing: .02em; }
.ms-foot__col--links { grid-area: links; }
.ms-foot__col--contact { grid-area: contact; }
.ms-foot__col--follow { grid-area: follow; }
.ms-foot__col { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 6px; }
.ms-foot .ms-foot__label { position: relative; margin: 0 0 6px !important; padding-bottom: 12px; color: #fff !important; font: 800 1.05rem/1.2 var(--ms-font) !important; }
.ms-foot .ms-foot__label::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 28px; height: 3px; border-radius: 3px; background: var(--ms-yellow); }
.ms-foot__link { position: relative; padding-bottom: 2px; color: rgba(255, 255, 255, .78) !important; font: 600 1rem/1.3 var(--ms-font); text-decoration: none; transition: color .25s; }
.ms-foot__link::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1.5px; border-radius: 2px; background: var(--ms-yellow); transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ms-ease); }
html[dir="ltr"] .ms-foot__link::after { transform-origin: left; }
.ms-foot__link:hover, .ms-foot__link:focus-visible { color: #fff !important; }
.ms-foot__link:hover::after, .ms-foot__link:focus-visible::after { transform: scaleX(1); }
.ms-foot__contact { display: inline-flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .78) !important; font: 600 .98rem/1.3 var(--ms-font); text-decoration: none; transition: color .25s; }
.ms-foot__contact:hover, .ms-foot__contact:focus-visible { color: #fff !important; }
.ms-foot__contact svg { flex: none; color: var(--ms-yellow); }
.ms-foot .ms-foot__contact bdi { font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; font-weight: 600; letter-spacing: .02em; }
.ms-foot__social { display: flex; gap: 10px; }
.ms-foot__social a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; background: rgba(255, 255, 255, .06); color: #fff !important;
  transition: background .25s, border-color .25s, color .25s, transform .35s var(--ms-ease); }
.ms-foot__social a:hover, .ms-foot__social a:focus-visible { border-color: var(--ms-yellow); background: var(--ms-yellow); color: var(--ms-studio) !important; transform: translateY(-3px); }
/* bottom bar: rights at the start, the credit at the end, lined up with the columns above */
.ms-foot__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 20px max(clamp(20px, 4vw, 48px), calc((100% - 1240px) / 2 + clamp(20px, 4vw, 48px))); background: rgba(0, 0, 0, .14); }
.ms-foot .ms-foot__rights { margin: 0 !important; color: rgba(255, 255, 255, .58) !important; font: 600 .88rem/1.4 var(--ms-font) !important; }
.ms-foot .ms-foot__bar a { color: rgba(255, 255, 255, .58) !important; font: 600 .85rem/1.2 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; letter-spacing: .02em; text-decoration: none; transition: color .25s; }
.ms-foot .ms-foot__bar a:hover { color: var(--ms-yellow) !important; }
.ms-foot a:focus-visible { outline: 3px solid var(--ms-yellow); outline-offset: 3px; }
@media (max-width: 991px) {
  .ms-foot__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; grid-template-areas: "logo logo call" "links contact follow"; gap: 36px 28px; padding-top: 52px; }
  .ms-foot__call { justify-self: end; align-self: center; }
  .ms-foot__logo img { height: 64px; }
}
@media (max-width: 767px) {
  .ms-foot { margin-top: 56px; }
  .ms-foot__inner { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-areas: "logo follow" "call call" "links contact"; gap: 24px 20px; padding: 40px 20px 36px; }
  .ms-foot__logo { align-self: center; }
  .ms-foot__logo img { height: 52px; }
  .ms-foot__call { justify-self: stretch; justify-content: center; padding: 1rem; font-size: 1.05rem; }
  .ms-foot__col--follow { justify-self: end; align-self: center; padding-top: 0; }
  .ms-foot__col--follow .ms-foot__label { display: none; }
  .ms-foot__col--links, .ms-foot__col--contact { padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); }
  .ms-foot__contact { font-size: .9rem; }
  .ms-foot__bar { flex-direction: column; justify-content: center; gap: 6px; padding-block: 18px; text-align: center; }
  .ms-foot__mark { width: 92vw; opacity: .07; }
}

/* Reveal-on-scroll elements start visible; portal-inner.js hides them only when it can also reveal them */
@media (prefers-reduced-motion: reduce) {
  .ms-top--solid, .ms-top--solid .ms-top__logo img, body.ms-inner .product-teaser, body.ms-inner .branch-name a { transition: none; }
}