/* ==========================================================================
   AR26 — brand pages. Every brand sets its palette and type as custom
   properties on <body> (see header-brand.php / inc/data.php).
   ========================================================================== */

body.is-brand { background: var(--b-bg); color: var(--b-ink); font-family: var(--b-body); }
.b-wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
.b-section { padding: clamp(90px, 10vw, 130px) 0; }

/* Display type */
.b-title, .b-h2, .b-order__title, .b-dish__name, .b-header__name, .b-feed__handle, .b-story__lead {
	font-family: var(--b-display); font-weight: var(--b-weight); text-transform: var(--b-transform); letter-spacing: var(--b-tracking);
}
.b-eyebrow { margin: 0 0 24px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--b-hero-accent); }
[lang="ar"] .b-eyebrow, [dir="rtl"] .b-eyebrow { letter-spacing: 0; font-size: 18px; font-weight: 700; text-transform: none; color: var(--b-accent); }
.b-lead { margin: 0 0 18px; max-width: 500px; font-size: 19px; font-weight: 300; line-height: 1.7; }
.b-muted { opacity: .7; }
.b-h2 { margin: 0 0 22px; font-size: clamp(46px, 5.4vw, 84px); line-height: .95; color: var(--b-primary); }
[dir="rtl"] .b-h2 { line-height: 1.15; }

/* Strip + header */

.b-header { --h-bg: color-mix(in srgb, var(--b-bg) 92%, transparent); --h-ink: var(--b-ink); position: sticky; top: 0; z-index: 50; background: var(--h-bg); color: var(--h-ink); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid color-mix(in srgb, var(--h-ink) 10%, transparent); transition: transform .7s var(--ease); }
.b-header.is-hidden { transform: translateY(-100%); }
.b-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; min-height: 76px; padding-top: 10px; padding-bottom: 10px; }
.b-header__brand { justify-self: start; display: flex; align-items: center; gap: 14px; min-width: 0; text-decoration: none; }
.b-header__logo { display: block; width: auto; }
.b-header__logo--round, .b-header__logo--round-top { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px color-mix(in srgb, var(--b-primary) 25%, transparent); }
.b-header__logo--round-top { object-position: top; }
.b-header__logo--mark { height: 34px; max-width: 220px; object-fit: contain; }
.brand-zebda-w-mraba .b-header__logo--mark { height: 44px; }
.b-header__logo--wide { height: 40px; }
.b-header__logo--wide-lime { height: 44px; padding: 11px 14px; background: var(--b-accent); }
.b-header__logo--crest { height: 56px; border-radius: 6px; }
.b-header__name { font-size: 24px; line-height: 1; color: var(--b-primary); white-space: nowrap; }
.brand-baba-hendi .b-header__name { text-transform: uppercase; letter-spacing: .02em; font-size: 22px; }
.b-nav { display: flex; align-items: center; gap: 34px; }
.bn { position: relative; padding: 10px 0; color: var(--h-ink); text-decoration: none; font-size: 14px; font-weight: 500; letter-spacing: .01em; }
[dir="rtl"] .bn { letter-spacing: 0; font-size: 16px; font-weight: 700; text-transform: none; }
.bn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease-io); }
.bn:hover::after { transform: scaleX(1); transform-origin: left; }

/* Link back to the group */
.b-end { justify-self: end; display: flex; align-items: center; gap: 18px; }
.b-house { display: inline-flex; align-items: center; gap: 12px; padding-inline-end: 18px; border-inline-end: 1px solid color-mix(in srgb, var(--h-ink) 16%, transparent); color: var(--h-ink); text-decoration: none; }
.b-house img { display: block; height: 30px; width: auto; transition: transform .6s var(--ease); }
.b-house span { font: 500 10.5px/1.35 'Manrope', sans-serif; letter-spacing: .14em; text-transform: uppercase; opacity: .7; transition: opacity .4s; }
.b-house:hover span { opacity: 1; }
.b-house:hover img { transform: scale(1.06); }

/* Order call to action in the header */
.b-cta { position: relative; display: inline-flex; align-items: center; gap: 14px; height: 48px; padding: 0 6px 0 24px; border-radius: var(--b-radius); background: var(--b-primary); color: var(--b-on-primary); text-decoration: none; font: 600 14px/1 var(--b-body); letter-spacing: .02em; overflow: hidden; isolation: isolate; box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--b-primary) 80%, transparent); }
[dir="rtl"] .b-cta { padding: 0 24px 0 6px; font-size: 15px; font-weight: 700; letter-spacing: 0; }
.b-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--b-accent); transform: translateY(101%); transition: transform .6s var(--ease-io); }
.b-cta:hover::before { transform: none; }
.b-cta:hover { color: var(--b-accent-ink); }
.b-cta__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--b-radius); background: var(--b-accent); color: var(--b-accent-ink); transition: background .6s var(--ease-io), color .6s var(--ease-io); }
.b-cta:hover .b-cta__icon { background: var(--b-primary); color: var(--b-on-primary); }
.brand-senorima .b-cta, .brand-senorima .b-cta__icon { border-radius: 0; }
.b-header--custom .b-header__name { color: var(--h-ink); }
.brand-jack-and-the-greens .b-cta { background: var(--b-accent); color: var(--b-accent-ink); box-shadow: none; }
.brand-jack-and-the-greens .b-cta__icon { background: var(--b-dark); color: var(--b-accent); }
.brand-jack-and-the-greens .b-cta::before { background: #F7F6EE; }
.brand-jack-and-the-greens .b-cta:hover .b-cta__icon { background: var(--b-primary); color: #F7F6EE; }
@media (max-width: 860px) {
	.b-header__inner { grid-template-columns: minmax(0, 1fr) auto; min-height: 64px; gap: 12px; }
	.b-nav { display: none; }
	.b-header__logo--round, .b-header__logo--round-top { width: 42px; height: 42px; }
	.b-header__logo--mark { height: 26px; max-width: 170px; }
	.brand-zebda-w-mraba .b-header__logo--mark { height: 36px; }
	.b-header__logo--crest { height: 46px; }
	.b-header__name { font-size: 19px; }
	.brand-baba-hendi .b-header__name { font-size: 18px; }
	.b-cta { height: 42px; gap: 10px; padding-left: 18px; font-size: 13px; }
	[dir="rtl"] .b-cta { padding: 0 18px 0 5px; font-size: 14px; }
	.b-cta__icon { width: 32px; height: 32px; }
	.b-end { gap: 12px; }
	.b-house { padding-inline-end: 0; border: 0; }
	.b-house span { display: none; }
	.b-house img { height: 24px; }
}

/* Brand buttons: shared .btn system, brand colours */
.btn--b-primary { --b-bg: var(--b-primary); --b-fg: var(--b-on-primary); --b-acc: var(--b-accent); --b-icon: var(--b-accent-ink); --b-hover: var(--b-accent-ink); }
.btn--b-accent { --b-bg: var(--b-accent); --b-fg: var(--b-accent-ink); --b-acc: var(--b-primary); --b-icon: var(--b-on-primary); --b-hover: var(--b-on-primary); }
.btn--b-line { --b-bg: transparent; --b-fg: var(--b-hero-ink); --b-acc: var(--b-hero-ink); --b-icon: var(--b-hero-bg); --b-hover: var(--b-hero-bg); --b-border: color-mix(in srgb, var(--b-hero-ink) 45%, transparent); }
.btn--wide { grid-column: 1 / -1; justify-content: space-between; }
[dir="rtl"] .btn { font-family: var(--b-body); font-size: 16px; font-weight: 700; }
.b-menu .btn--b-accent, .b-order .btn--b-accent { --b-acc: var(--b-bg); }
.brand-jack-and-the-greens .b-menu .btn--b-primary { --b-acc: var(--b-ink); --b-icon: var(--b-accent); --b-hover: var(--b-accent); }

/* Hero */
.b-hero { background: var(--b-hero-bg); color: var(--b-hero-ink); overflow: hidden; }
.b-hero__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 60px; padding-top: clamp(70px, 8vw, 110px); padding-bottom: clamp(80px, 9vw, 120px); }
.b-hero__inner--center { justify-content: center; text-align: center; }
.b-hero__inner--center .b-lead { margin-left: auto; margin-right: auto; }
.b-hero__inner--center .b-btns { justify-content: center; }
.b-hero__text { flex: 1 1 520px; min-width: 0; }
.b-hero__crest { width: min(360px, 70vw); margin: 0 auto 30px; mix-blend-mode: multiply; }
.b-title { margin: 0; font-size: clamp(62px, 8.6vw, 136px); line-height: .9; }
[dir="rtl"] .b-title { line-height: 1.12; }
.b-title__accent { font-style: normal; color: var(--b-hero-accent); }
.brand-jack-and-the-greens .b-title__accent { font-weight: 500; }
.brand-senorima .b-title__accent { font-style: italic; }
.b-hero .b-lead { margin-top: 30px; }
.b-alt { margin: 6px 0 0; font-family: 'Almarai', sans-serif; font-weight: 800; font-size: 26px; color: var(--b-hero-accent); }
.b-btns { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }

.b-hero__media { flex: 1 1 420px; min-width: 0; position: relative; min-height: 520px; display: flex; justify-content: center; align-items: center; }
.b-hero__img { border-radius: 14px; box-shadow: 0 34px 60px rgba(0, 0, 0, .28); object-fit: cover; aspect-ratio: 4 / 5; }
.b-hero__media--1 .b-hero__img--0 { width: 76%; transform: rotate(3deg); border: 12px solid var(--b-bg); border-radius: 4px; }
.brand-lo2met-nawal .b-hero__media--1 .b-hero__img--0 { border-radius: 260px 260px 14px 14px; transform: none; border: 0; }
.b-hero__media--2 .b-hero__img { position: absolute; width: 54%; }
.b-hero__media--2 .b-hero__img--0 { left: 4%; top: 0; transform: rotate(-3deg); }
.b-hero__media--2 .b-hero__img--1 { right: 2%; bottom: 0; transform: rotate(4deg); }
.b-badge { position: absolute; left: 0; bottom: 0; width: 170px; height: 170px; }
[dir="rtl"] .b-badge { left: auto; right: 0; }
.b-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.b-badge circle { fill: var(--b-accent); }
.b-badge text { font: 500 14px 'Manrope', sans-serif; letter-spacing: 4px; fill: var(--b-accent-ink); }
.b-badge__logo { position: absolute; left: 22%; top: 22%; width: 56% !important; height: 56% !important; border-radius: 50%; object-fit: cover; background: var(--b-bg); }
.b-badge__logo.brand-logo--wide, .b-badge__logo.brand-logo--wide-lime { object-fit: contain; padding: 10px; }
@media (max-width: 700px) {
	.b-hero__media { min-height: 420px; }
	.b-badge { width: 120px; height: 120px; }
}

/* Ticker */
.b-ticker { background: var(--b-primary); padding: 20px 0; overflow: hidden; }
.brand-baba-hendi .b-ticker, .brand-jack-and-the-greens .b-ticker { background: var(--b-accent); }
.b-ticker__group { display: flex; align-items: center; gap: 42px; padding-inline-end: 42px; white-space: nowrap; font-family: var(--b-display); font-weight: var(--b-weight); text-transform: uppercase; font-size: clamp(26px, 2.6vw, 36px); color: var(--b-on-primary); }
.brand-baba-hendi .b-ticker__group, .brand-jack-and-the-greens .b-ticker__group { color: var(--b-accent-ink); }
.b-ticker__group i { font-style: normal; font-size: .6em; opacity: .7; }
html[dir="rtl"]:not(.motion-ready) .b-ticker__track { animation-name: ar26-marquee-rtl; }
@keyframes ar26-marquee-rtl { to { transform: translateX(50%); } }

/* Dishes */
.b-dishes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 28px; margin-top: 50px; }
.b-dish { text-align: center; text-decoration: none; color: inherit; }
.b-dish__ring { display: block; padding: 8px; border-radius: 50%; background: var(--b-accent); transition: transform .9s var(--ease); }
.b-dish:nth-child(2n) .b-dish__ring { background: var(--b-primary); }
.brand-senorima .b-dish__ring, .brand-zebda-w-mraba .b-dish__ring { border-radius: 24px; }
.b-dish__ring img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: inherit; }
.b-dish:hover .b-dish__ring { transform: rotate(-8deg) scale(1.05); }
.b-dish__name { display: block; margin-top: 20px; font-size: 26px; line-height: 1.1; }

/* Story */
.b-story__inner { display: flex; flex-wrap: wrap; gap: 60px; align-items: center; max-width: 1120px; }
.b-story__img { flex: 0 1 400px; width: 400px; max-width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; box-shadow: 0 30px 60px rgba(31, 58, 42, .25); }
.b-story__inner > div { flex: 1 1 420px; min-width: 0; }
.b-story__lead { margin: 0 0 22px; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.7; color: var(--b-dark); }

/* Menu */
.b-menu { background: var(--b-dark); color: var(--b-bg); }
.brand-jack-and-the-greens .b-menu { background: var(--b-surface); color: var(--b-ink); }
.b-menu .b-h2 { color: inherit; }
.b-menu .b-eyebrow { color: var(--b-accent); }
.brand-jack-and-the-greens .b-menu .b-eyebrow { color: var(--b-primary); }
.brand-lo2met-nawal .b-menu .b-eyebrow { color: #F4C9CF; }
.b-menu__inner { display: flex; flex-wrap: wrap; gap: 70px; align-items: center; }
.b-menu__intro { flex: 1 1 380px; min-width: 0; }
.b-menu__tabs { display: flex; flex-direction: column; gap: 10px; margin: 30px 0 34px; }
.b-menu__tab {
	font-family: 'Manrope', sans-serif;
	display: flex; align-items: center; gap: 18px; width: 100%; min-height: 56px; padding: 12px 22px; text-align: start;
	border-radius: var(--b-radius); border: 1.5px solid color-mix(in srgb, currentColor 28%, transparent); background: transparent; color: inherit;
	font-size: 14px; letter-spacing: .04em; cursor: pointer; transition: background .5s, color .5s, border-color .5s;
}
.b-menu__tab b { font-family: var(--b-display); font-size: 22px; }
.b-menu__tab[aria-selected="true"] { background: var(--b-accent); color: var(--b-accent-ink); border-color: var(--b-accent); }
.brand-jack-and-the-greens .b-menu__tab[aria-selected="true"] { background: var(--b-primary); color: var(--b-on-primary); border-color: var(--b-primary); }
.b-menu__tab:not([aria-selected="true"]):hover { border-color: currentColor; }
.b-menu__stage { flex: 1 1 520px; min-width: 0; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: center; }
.b-menu__page { grid-area: 1 / 1; width: 100%; max-width: 620px; box-shadow: 0 40px 80px rgba(0, 0, 0, .4); opacity: 0; visibility: hidden; transition: opacity .7s var(--ease), transform .9s var(--ease), visibility .7s; transform: translateY(24px) scale(.97); }
.brand-jack-and-the-greens .b-menu__page { max-width: 420px; border-radius: 14px; }
.b-menu__page.is-active { opacity: 1; visibility: visible; transform: none; }
.b-menu__placeholder {
	width: 100%; max-width: 520px; aspect-ratio: 1 / 1.3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
	border: 1.5px dashed color-mix(in srgb, currentColor 40%, transparent); border-radius: 18px; text-align: center; padding: 30px;
}
.b-menu__placeholder .brand-logo--round, .b-menu__placeholder .brand-logo--round-top { width: 140px; height: 140px; }
.b-menu__placeholder .brand-logo--crest { width: 220px; mix-blend-mode: normal; border-radius: 10px; }
.b-menu__placeholder .brand-logo--wide { background: #fff; padding: 14px 18px; border-radius: 8px; height: 76px; }
.b-menu__placeholder span { font-family: var(--b-display); font-size: 26px; }

/* Instagram */
.b-feed { background: var(--b-surface); }
.brand-jack-and-the-greens .b-feed, .brand-lo2met-nawal .b-feed { background: var(--b-bg); }
.b-feed__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 44px; }
.b-feed__id { display: flex; align-items: center; gap: 20px; min-width: 0; max-width: 100%; }
.b-feed__id > div { min-width: 0; }
.b-feed__handle { overflow-wrap: anywhere; }
@media (max-width: 600px) { .b-feed__id .brand-logo { display: none; } }
.b-feed__id .brand-logo--round, .b-feed__id .brand-logo--round-top { width: 80px; height: 80px; border: 3px solid var(--b-primary); }
.b-feed__handle { margin: 0; font-size: clamp(30px, 3.4vw, 44px); color: var(--b-primary); text-transform: none; }
.b-feed__id p { margin: 6px 0 0; font-size: 16px; font-weight: 300; }
.ig-grid--brand .ig-tile { border-radius: 8px; }
.ig-grid--brand a.ig-tile::after { background: color-mix(in srgb, var(--b-primary) 78%, transparent); color: var(--b-on-primary); }
[dir="rtl"] .ig-grid--brand a.ig-tile::after { letter-spacing: 0; font: 800 16px/1 var(--b-body); text-transform: none; }

/* Order */
.b-order { background: var(--b-order-bg); color: var(--b-on-primary); padding: clamp(90px, 10vw, 120px) 0; }
.brand-jack-and-the-greens .b-order { color: #F7F6EE; }
.b-order__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 56px; }
.b-order__inner > div:first-child { flex: 1 1 440px; min-width: 0; }
.b-order__title { margin: 0 0 22px; font-size: clamp(54px, 6.4vw, 100px); line-height: .92; }
[dir="rtl"] .b-order__title { line-height: 1.15; }
.b-order__title span { color: var(--b-accent); }
.brand-lo2met-nawal .b-order__title span { color: #F4C9CF; }
.brand-zebda-w-mraba .b-order__title span { color: #CFE0F3; }
.brand-senorima .b-order__title span { color: #E7D9B6; font-style: italic; }
.b-order__phone { display: inline-block; margin-top: 10px; font-family: var(--b-display); font-size: 32px; color: inherit; text-decoration: none; }
.b-order__links { flex: 1 1 520px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.dp--brand {
	border-radius: var(--b-radius); min-height: 64px; padding: 18px 26px; font-family: var(--b-display); font-weight: var(--b-weight);
	color: inherit; border: 1.5px solid color-mix(in srgb, currentColor 40%, transparent); background: color-mix(in srgb, currentColor 6%, transparent);
	text-transform: var(--b-transform);
}
.brand-lo2met-nawal .dp--brand { font-family: 'Manrope', sans-serif; font-weight: 500; }
.dp--brand::before { background: var(--b-bg); }
.dp--brand:hover { color: var(--b-ink); border-color: var(--b-bg); }
.dp--brand small { margin-left: 0; margin-inline-start: auto; }
.dp--brand.is-pending:hover { color: inherit; }

/* Footer */
.b-footer { background: #16040A; color: #D9CBBE; padding: 50px 0; }
.b-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.b-footer__group { display: flex; align-items: center; gap: 18px; text-decoration: none; }
.b-footer__group img { height: 50px; width: auto; }
.b-footer__group span { font-size: 13px; color: #C8AD7F; }
.b-footer__brands { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.b-footer__brands a { color: #D9CBBE; text-decoration: none; font-family: 'Bodoni Moda', serif; font-size: 19px; }
.b-footer__brands a:hover { color: #E5C987; font-style: italic; }
.b-footer__copy { font-size: 12px; color: #9E8D80; }

@media (max-width: 600px) {
	.b-dishes { display: flex; gap: 16px; margin: 32px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
	.b-dishes::-webkit-scrollbar { display: none; }
	.b-dish { flex: 0 0 40%; scroll-snap-align: start; }
	.b-dish__name { font-size: 19px; margin-top: 14px; }
}

/* Ticker track */
.b-ticker__track { display: flex; width: max-content; will-change: transform; }
html:not(.motion-ready) .b-ticker__track { animation: ar26-marquee 40s linear infinite; }
@keyframes ar26-marquee { to { transform: translateX(-50%); } }

@media (max-width: 600px) {
}

/* Order: delivery partners, kept small */
.b-avail { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 18px 20px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: 16px; }
.brand-senorima .b-avail { border-radius: 0; }
.b-avail__label { font: 600 11px/1.3 'Manrope', sans-serif; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
[dir="rtl"] .b-avail__label { font: 700 14px/1.3 var(--b-body); letter-spacing: 0; text-transform: none; }
.otiles { display: flex; flex-wrap: wrap; gap: 8px; }
.otile { display: block; width: 84px; border-radius: 9px; transition: transform .5s var(--ease); }
.otile .ptile { border-radius: 9px; box-shadow: none; }
a.otile:hover { transform: translateY(-3px); }
@media (max-width: 600px) {
	.b-avail { padding: 14px; }
	.otiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; gap: 6px; }
	.otile { width: auto; }
}
.b-order__links { grid-template-columns: 1fr !important; gap: 14px; }
[dir="rtl"] .b-house { padding: 0 0 0 18px; border: 0; border-left: 1px solid color-mix(in srgb, var(--h-ink) 16%, transparent); }
@media (max-width: 860px) { [dir="rtl"] .b-house { padding: 0; border: 0; } }
@media (max-width: 600px) {
	.b-menu__tabs { flex-direction: row; gap: 8px; margin: 22px 0 24px; overflow-x: auto; scrollbar-width: none; }
	.b-menu__tabs::-webkit-scrollbar { display: none; }
	.b-menu__tab { flex: none; width: auto; min-height: 46px; padding: 8px 16px; gap: 10px; white-space: nowrap; }
	.ig-grid--brand > :nth-child(n+5) { display: none; }
	.b-section { padding-top: 64px; padding-bottom: 64px; }
}
.b-house img { filter: brightness(.6) saturate(1.25) contrast(1.15); }
.brand-jack-and-the-greens .b-house img { filter: none; }