/* 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: 66px; --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: 84px; 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: 66px; 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: 56px; transition: height .45s var(--ms-ease); }
.ms-top--solid.is-scrolled .ms-top__logo img { height: 44px; }
.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; }
.ms-top--solid .ms-top__progress { bottom: 0; height: 3px; background: var(--ms-yellow); }
@media (max-width: 700px) {
  body.ms-inner { --ms-top-h: 56px; --ms-chips-h: 62px; }
  .ms-top--solid { height: 60px; padding: 0 12px; gap: 6px; }
  .ms-top--solid.is-scrolled { height: 56px; }
  .ms-top--solid .ms-top__logo img, .ms-top--solid.is-scrolled .ms-top__logo img { height: 34px; }
  .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; } }

/* ── Campaign hero: copy | the family under a moving stage light ── */
.ms-hero { position: relative; z-index: 5; isolation: isolate; background: var(--ms-studio); color: #fff; overflow-x: clip; font-family: var(--ms-font); }
.ms-hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: clamp(350px, 31vw, 460px); max-width: 1520px; margin: 0 auto;
  padding-inline-start: clamp(20px, 5vw, 88px); }
.ms-hero__copy { position: relative; z-index: 2; align-self: center; padding-block: 40px 84px; }
.ms-hero__ehna { display: block; width: clamp(170px, 17vw, 270px); height: auto; max-width: none; margin: 0 0 18px; filter: drop-shadow(0 8px 26px rgba(248, 211, 12, .22)); }
.ms-hero__title { margin: 0 0 20px; padding-bottom: .1em; overflow: hidden; font: 800 clamp(2.1rem, 4.1vw, 3.5rem)/1.12 var(--ms-font) !important; color: #fff !important; letter-spacing: 0; }
.ms-hero__title span { display: inline-block; color: inherit !important; font: inherit !important; }
/* All lines share one grid cell, so the box is as tall as the longest line (no overlap when one wraps) */
.ms-hero__says { display: grid; max-width: 34rem; }
.ms-hero__line { grid-area: 1 / 1; align-self: center; display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .7rem; margin: 0; opacity: 0; visibility: hidden;
  font: 700 clamp(1.05rem, 1.45vw, 1.32rem)/1.55 var(--ms-font); color: #fbf0ff;
  --o: var(--ms-lilac); text-shadow: 2px 0 0 var(--o), -2px 0 0 var(--o), 0 2px 0 var(--o), 0 -2px 0 var(--o), 1.4px 1.4px 0 var(--o), -1.4px 1.4px 0 var(--o), 1.4px -1.4px 0 var(--o), -1.4px -1.4px 0 var(--o), 0 4px 18px rgba(15, 4, 20, .7); }
.ms-hero__line.is-on { opacity: 1; visibility: visible; }
.ms-hero__line > span { display: inline-block; }
html[dir="ltr"] .ms-hero__line { justify-content: flex-end; }
.ms-hero__stamp { display: block; flex: none; height: 2.8em; width: auto; max-width: none; filter: drop-shadow(0 0 16px rgba(248, 211, 12, .4)); }
.ms-hero__crumbs { display: flex; align-items: center; gap: .65rem; margin-top: 22px; font: 600 .92rem/1.2 var(--ms-font); color: rgba(255, 255, 255, .6); }
.ms-hero__crumbs a { color: #fff !important; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); padding-bottom: 2px; transition: color .25s, border-color .25s; }
.ms-hero__crumbs a:hover, .ms-hero__crumbs a:focus-visible { color: var(--ms-yellow) !important; border-color: var(--ms-yellow); }
.ms-hero__sep { width: 6px; height: 6px; border-radius: 50%; background: var(--ms-yellow); }

.ms-hero__photo { position: relative; min-height: 100%; }
.ms-hero__frame { position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(180deg, #000 70%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(180deg, #000 70%, transparent 100%); mask-composite: intersect; }
.ms-hero__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 48% 22%; transform-origin: 50% 60%; }
.ms-hero__light { --lx: 50%; --ly: 45%; --lw: 160%; --lh: 220%; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse var(--lw) var(--lh) at var(--lx) var(--ly), transparent 0 32%, rgba(22, 9, 26, .74) 100%); }
.ms-hero__pager { position: absolute; z-index: 2; bottom: 56px; left: 50%; display: flex; direction: rtl; /* story order: right to left, as in the photo */ gap: 10px; margin: 0; padding: 0; list-style: none; transform: translateX(-50%); }
.ms-hero__pager li { list-style: none; margin: 0; }
.ms-hero__pager button { display: block; width: 12px; height: 12px; padding: 0; border: 2px solid rgba(255, 255, 255, .6); border-radius: 6px; background: transparent; cursor: pointer;
  transition: width .45s var(--ms-ease), background .3s, border-color .3s; }
.ms-hero__pager button:hover { border-color: var(--ms-yellow); }
.ms-hero__pager button.is-lit { width: 30px; background: var(--ms-yellow); border-color: var(--ms-yellow); }
.ms-hero__pager button:focus-visible, .ms-hero a:focus-visible { outline: 3px solid var(--ms-yellow); outline-offset: 3px; }
.ms-hero:not(.is-live) .ms-hero__pager { display: none; }

/* The campaign lettering on a yellow band, across the hero's edge */
.ms-band { --mh: 32px; position: relative; z-index: 3; height: 56px; margin: -28px -3vw -28px; overflow: hidden; background: var(--ms-yellow); transform: rotate(-1.2deg);
  box-shadow: 0 14px 30px rgba(45, 22, 49, .2); }
html[dir="rtl"] .ms-band { transform: rotate(1.2deg); }
.ms-band__track { position: absolute; top: 0; bottom: 0; left: -640px; width: calc(100% + 1280px); background: var(--ms-studio); will-change: transform;
  -webkit-mask: url("../img/marquee.webp") 0 50% / auto var(--mh) repeat-x; mask: url("../img/marquee.webp") 0 50% / auto var(--mh) repeat-x; }

@media (max-width: 767px) {
  .ms-hero__inner { display: flex; flex-direction: column-reverse; min-height: 0; padding: 0; }
  .ms-hero__photo { height: 240px; min-height: 0; }
  .ms-hero__frame { -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%); mask-image: linear-gradient(180deg, #000 58%, transparent 100%); }
  .ms-hero__img { object-position: 48% 26%; }
  .ms-hero__copy { margin-top: -46px; padding: 0 20px 58px; }
  .ms-hero__ehna { width: 150px; margin-bottom: 10px; }
  .ms-hero__title { font-size: 2rem !important; margin-bottom: 12px; }
  .ms-hero__line { font-size: 1rem; gap: .1rem .5rem; }
  .ms-hero__crumbs { margin-top: 14px; font-size: .85rem; }
  .ms-hero__pager { top: 14px; bottom: auto; }
  .ms-band { --mh: 24px; height: 44px; margin: -22px -4vw -22px; }
}

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

/* ── 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; }
.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 { 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; }
body.ms-inner #views-exposed-form-products-block-1 label.option:hover, body.ms-inner .ms-cat-all:hover { transform: translateY(-2px); border-color: var(--ms-lilac); box-shadow: 0 10px 20px rgba(45, 22, 49, .1); }
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 ── */
body.ms-inner .custom-cart { 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 { 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; }
@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: the same aubergine as the top bar, with the campaign's yellow line ── */
body.ms-inner footer.footer { position: relative; margin-top: 70px; background: var(--ms-studio) !important; background-image: none !important; }
body.ms-inner footer.footer::before { top: 0 !important; height: 6px !important; background: var(--ms-yellow) !important; background-image: none !important; }
body.ms-inner .footer-data-container { border-bottom-color: rgba(255, 255, 255, .14) !important; }
body.ms-inner #block-socialmedia a { display: grid !important; place-items: center; background: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(255, 255, 255, .2) !important; color: #fff !important;
  transition: background .25s, transform .35s var(--ms-ease), border-color .25s !important; }
body.ms-inner #block-socialmedia a i, body.ms-inner #block-socialmedia path { color: #fff !important; }
body.ms-inner #block-socialmedia a:hover { background: var(--ms-yellow) !important; border-color: var(--ms-yellow) !important; transform: translateY(-3px); }
body.ms-inner #block-socialmedia a:hover i, body.ms-inner #block-socialmedia a:hover path { color: var(--ms-studio) !important; }
body.ms-inner footer.footer a:hover { color: var(--ms-yellow) !important; }

/* 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; }
}