/* Potaffle website. Colours and type from Yazeed's homepage draft (2026-11-08). */

/* DM Serif Display has one weight; declaring the whole range keeps the browser from faking a bold. */
@font-face { font-family: 'DM Serif Display'; src: url(/assets/fonts/dm-serif-display-latin.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lalezar'; src: url(/assets/fonts/lalezar-arabic.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Archivo'; src: url(/assets/fonts/archivo-latin.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; src: url(/assets/fonts/archivo-latin-ext.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Almarai'; src: url(/assets/fonts/almarai-400-arabic.woff2) format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Almarai'; src: url(/assets/fonts/almarai-700-arabic.woff2) format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Almarai'; src: url(/assets/fonts/almarai-800-arabic.woff2) format('woff2'); font-weight: 800; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }

:root {
  --ink: #1F1C1C;
  --cream: #F6ECD8;
  --paper: #FFFBF2;
  --gold: #E8A427;
  --gold-hover: #F2B640;
  --brown: #8A5A12;
  --red: #A62B24;
  --line: #E4D6BA;
  --line-strong: #C9B994;
  --body: #4A4038;
  --muted: #6B5E4E;
  --dark-card: #2A2523;
  --dark-line: #3A322C;
  --dark-body: #D9CDB8;
  --dark-muted: #B3A797;
  --gold-line: #6E5A34;
  --gutter: clamp(20px, 5.5vw, 80px);
  --section: clamp(72px, 9vw, 112px);
  --display: 'DM Serif Display', 'Lalezar', Georgia, serif;
  --display-ar: 'Lalezar', 'DM Serif Display', Georgia, serif; /* Arabic titles (Yazeed, 2026-11-14); one weight, declared for all so it is never faked bold */
  --sans: 'Archivo', 'Almarai', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --arabic: 'Almarai', 'Archivo', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
[lang="ar"] { font-family: var(--arabic); }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1.08; letter-spacing: 0; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
[id] { scroll-margin-top: 24px; }

.skip { position: absolute; inset-inline-start: 8px; top: 8px; transform: translateY(-200%); background: var(--gold); color: var(--ink); padding: 10px 16px; border-radius: 999px; font-weight: 700; z-index: 10; }
.skip:focus { transform: none; }

.wrap { max-width: 1440px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.dark { background: var(--ink); color: var(--cream); }

.eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--brown); }
.dark .eyebrow, .eyebrow.on-dark { color: var(--gold); }
.h-xl { font-size: clamp(42px, 5.8vw, 84px); line-height: 1.04; letter-spacing: -.005em; }
.h-lg { font-size: clamp(34px, 4vw, 58px); }
.h-md { font-size: clamp(26px, 2.5vw, 34px); }
.lead { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.65; color: var(--body); }
.dark .lead { color: var(--dark-body); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 14px 28px; border-radius: 999px; font-weight: 700; font-size: 17px; line-height: 1.1; transition: background .15s, color .15s; }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-hover); }
.btn-line { border: 2px solid var(--gold-line); color: var(--cream); font-weight: 600; }
.btn-line:hover { background: rgba(246, 236, 216, .08); }
.btn-ink { background: var(--ink); color: var(--cream); }
.btn-ink:hover { background: #3A322C; }
.btns { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.wa-icon { width: 20px; height: 20px; flex: none; }
.text-link { font-weight: 700; color: var(--brown); }
.text-link:hover { color: var(--ink); }

/* Vegetarian marks */
.veg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: none; }
.veg-pill { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--line-strong); font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.veg-pill [lang="ar"] { letter-spacing: 0; text-transform: none; font-weight: 700; font-size: 14px; }
.dark .veg-pill { border-color: var(--gold-line); color: var(--dark-body); }

/* ---------- Header ---------- */
.site-header { background: var(--ink); color: var(--cream); border-bottom: 1px solid var(--dark-line); position: relative; z-index: 2; }
.has-hero .site-header { position: absolute; inset: 0 0 auto; background: transparent; border-bottom-color: rgba(246, 236, 216, .14); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 20px; padding-bottom: 20px; }
.logo img { height: 60px; width: auto; }
.main-nav { display: flex; gap: 40px; font-size: 16px; font-weight: 600; letter-spacing: .06em; }
.main-nav a:hover, .footer-nav a:hover, .footer-legal a:hover { color: var(--gold); }
.main-nav a[aria-current="page"] { color: var(--gold); }

/* ---------- Hero ---------- */
.hero { position: relative; color: var(--cream); background: var(--ink) url(/assets/img/storefront-night.webp) center 60% / cover no-repeat; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(31, 28, 28, .94) 0%, rgba(31, 28, 28, .8) 45%, rgba(31, 28, 28, .42) 100%); }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-top: 168px; padding-bottom: 104px; }
.hero-copy { display: flex; flex-direction: column; gap: 28px; }
.hero-copy .h-xl span { color: var(--gold); }
.hero-copy .lead { max-width: 540px; font-size: clamp(18px, 1.5vw, 21px); color: var(--dark-body); }
.hero-points { display: flex; flex-wrap: wrap; gap: 14px 28px; font-size: 14px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--dark-muted); }
.hero-points span { display: inline-flex; align-items: center; gap: 10px; }
.hero-photos { position: relative; height: 620px; }
.hero-photos .p-fries { position: absolute; right: 0; top: 0; width: 78%; height: 520px; object-fit: cover; border-radius: 28px; box-shadow: 0 30px 60px rgba(0, 0, 0, .45); }
.hero-photos .p-waffle { position: absolute; left: 0; bottom: 0; width: 60%; height: 300px; object-fit: cover; border-radius: 24px; border: 8px solid var(--ink); box-shadow: 0 30px 60px rgba(0, 0, 0, .45); }
.stamp { position: absolute; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.stamp-price { right: 28px; bottom: 36px; width: 150px; height: 150px; background: var(--red); color: var(--cream); transform: rotate(-10deg); }
.stamp-price small { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.stamp-price b { font-family: var(--display); font-weight: 700; font-size: 48px; line-height: 1; }
.stamp-veg { left: 8%; top: 26px; width: 156px; height: 156px; background: var(--cream); color: var(--ink); border: 3px solid var(--gold); outline: 2px dashed var(--brown); outline-offset: -12px; transform: rotate(8deg); gap: 2px; box-shadow: 0 20px 40px rgba(0, 0, 0, .35); }
.stamp-veg b { font-family: var(--display); font-weight: 700; font-size: 38px; line-height: .95; }
.stamp-veg small { font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.stamp-veg [lang="ar"] { font-size: 16px; font-weight: 800; color: var(--brown); }

/* ---------- Sections ---------- */
.section { padding-top: var(--section); padding-bottom: var(--section); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-bottom: 52px; }
.section-head .h-lg { margin-top: 14px; }
.section-head > p { max-width: 460px; font-size: 18px; line-height: 1.6; color: var(--muted); }
.dark .section-head > p { color: var(--dark-body); }

.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 24px; padding: 36px; display: flex; flex-direction: column; gap: 16px; transition: transform .15s; }
a.card:hover { transform: translateY(-3px); }
.card.dark { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.card .num { font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--brown); }
.card.dark .num, .card.dark .more { color: var(--gold); }
.card p { color: var(--muted); }
.card.dark p { color: var(--dark-body); }
.card .more { margin-top: auto; font-weight: 700; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.split > img { width: 100%; height: 640px; object-fit: cover; border-radius: 28px; }
.split > img.photo-hamdan { object-position: 0% 20%; } /* his face is at the top left of the fryer photo (2026-11-15): crop from the right and bottom */
.stack { display: flex; flex-direction: column; gap: 26px; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.mini { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 26px; }
.mini h3 { font-family: var(--display); font-size: 23px; line-height: 1.2; }
.mini p { margin-top: 10px; font-size: 16px; color: var(--muted); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--dark-line); border: 1px solid var(--dark-line); border-radius: 20px; overflow: hidden; }
.facts div { background: var(--ink); padding: 22px 24px; }
.facts b { display: block; font-family: var(--display); font-weight: 700; font-size: 23px; color: var(--gold); line-height: 1.1; }
.facts span { font-size: 15px; color: var(--dark-muted); }

/* ---------- Sauces ---------- */
.sauces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 32px; }
.sauce { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.sauce-disc { --c: var(--gold); width: 168px; height: 168px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 70%, white), var(--c) 62%); box-shadow: inset 0 -10px 24px rgba(0, 0, 0, .18), 0 18px 36px rgba(31, 28, 28, .18); display: grid; place-items: center; overflow: hidden; outline: 1.5px solid var(--c); outline-offset: 7px; margin-bottom: 10px; }
.sauce-disc img { width: 100%; height: 100%; object-fit: cover; }
.sauce-initial { font-family: var(--display); font-weight: 700; font-size: 72px; line-height: 1; color: rgba(255, 251, 242, .92); text-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.sauce-disc.light .sauce-initial { color: rgba(31, 28, 28, .72); text-shadow: none; }
.sauce h3 { font-size: clamp(24px, 2.1vw, 30px); }
.sauce .alt { font-family: var(--arabic); font-size: 16px; color: var(--muted); }
.dark .sauce .alt { color: var(--dark-muted); }
/* Sauce tags on the menu (2026-11-13): what makes a sauce special as filled chips, then Vegetarian and Egg-free as
   soft chips with a tick on their own row, so every sauce reads the same way. */
.sauce-tags { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 6px; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; font-size: 11px; font-weight: 800; line-height: 1.1; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.chips-feature { min-height: 26px; }
.chips-feature .chip { background: var(--gold); color: var(--ink); }
.chips-feature .chip-spicy { background: #B7302A; color: var(--cream); }
.chips-diet .chip { background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--ink); padding: 6px 11px 6px 9px; }
.chips-diet .chip svg { width: 12px; height: 12px; flex: none; color: var(--brown); }
.dark .chips-diet .chip { background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--cream); }
.dark .chips-diet .chip svg { color: var(--gold); }
html[lang="ar"] .chip { letter-spacing: 0; text-transform: none; font-size: 13px; font-weight: 700; }
.sauces.compact { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px 20px; }
.sauces.compact .sauce-disc { width: 112px; height: 112px; outline-offset: 5px; }
.sauces.compact .sauce-initial { font-size: 48px; }
.sauces.compact h3 { font-size: 20px; }

/* ---------- Bands ---------- */
.band-gold { background: var(--gold); }
.band-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; align-items: center; padding-top: 72px; padding-bottom: 72px; }
.band-grid .lead { color: var(--ink); margin-top: 18px; max-width: 620px; }
.who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.who div { background: var(--ink); color: var(--cream); border-radius: 20px; padding: 24px; }
.who b { display: block; font-size: 18px; }
.who span { display: block; font-size: 15px; color: var(--dark-muted); margin-top: 6px; }
.who .wide { grid-column: span 2; }

/* ---------- Story ---------- */
.story img { object-position: center 40%; height: 600px; }
/* Our story top (fourth version, 2026-11-13): founder and how it started as photo-and-text pairs on cream,
   then one line about the prices on a dark band, in the site's white (cream). */
.story-split + .story-split { border-top: 1px solid var(--line); }
.split.img-right > img { order: 2; }
.band-quote { padding-top: clamp(56px, 7vw, 88px); padding-bottom: clamp(56px, 7vw, 88px); text-align: center; }
.band-quote p { max-width: 920px; margin: 0 auto; font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3vw, 40px); line-height: 1.3; color: var(--ink); }
.dark .band-quote p { color: var(--cream); }
html[lang="ar"] .band-quote p { font-family: var(--display-ar); line-height: 1.7; }
/* Pillars (2026-11-13): no cards, a centred row of icon and title. */
.section-head.pillars-head { justify-content: center; align-items: center; text-align: center; }
.pillars-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; max-width: 1100px; margin: 0 auto; }
.pillar { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.pillar h3 { font-size: clamp(22px, 2vw, 27px); line-height: 1.25; max-width: 220px; }
.pillar-icon { width: 76px; height: 76px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--ink); }
.pillar-icon svg { width: 38px; height: 38px; }
@media (max-width: 900px) { .pillars-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 16px; } }
@media (max-width: 640px) { .pillar-icon { width: 64px; height: 64px; } .pillar-icon svg { width: 32px; height: 32px; } .pillar h3 { font-size: 20px; } }

/* ---------- Testimonials (home and Our story) ---------- */
/* The carousel never widens the page: the section clips sideways (clip where supported, hidden before that), and the
   viewport is paint-contained, which Safari on iPhone also respects (Yazeed, 2026-11-15: the page could be moved sideways
   on phones). The review pop-up is in the top layer, so none of this clips it. */
.testimonials { position: relative; max-width: 100%; overflow: hidden; overflow-x: clip; }
.testimonials + .section:not(.dark) { border-top: 1px solid var(--line); }
.t-viewport { position: relative; max-width: 1600px; margin: -16px auto -48px; padding: 16px 0 48px; overflow: hidden; contain: paint; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.t-track { display: flex; width: max-content; animation: t-scroll var(--dur, 48s) linear infinite; }
[dir="rtl"] .t-track { animation-name: t-scroll-rtl; }
.t-viewport:hover .t-track, .t-viewport:focus-within .t-track, .t-viewport.is-paused .t-track { animation-play-state: paused; }
@keyframes t-scroll { to { transform: translateX(-50%); } }
@keyframes t-scroll-rtl { to { transform: translateX(50%); } }
.t-set { display: flex; gap: 20px; padding-inline-end: 20px; }
.t-card { flex: none; width: 340px; margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.t-stars { display: flex; gap: 3px; color: var(--gold); }
.t-stars svg { width: 20px; height: 20px; }
.t-stars .off { color: var(--line-strong); }
.t-card blockquote { margin: 0; flex: 1; }
.t-card p { font-size: 17px; line-height: 1.6; color: var(--body); }
.t-card figcaption { font-weight: 700; font-size: 16px; }
@media (max-width: 640px) { .t-card { width: 280px; padding: 24px; } }
@media (prefers-reduced-motion: reduce) {
  .t-viewport { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; padding: 0 var(--gutter) 8px; scroll-padding-inline: var(--gutter); }
  .t-track { animation: none; }
  .t-set[aria-hidden] { display: none; }
  .t-card { scroll-snap-align: start; }
}
.story-pillars { border-top: 1px solid var(--line); }
.story-pillars { background: var(--cream); }
.story-visit .section-head { margin-bottom: 40px; }
/* Loyalty points (2026-11-13): two big offer tickets, ink and gold, with a dashed tear line. */
.loyalty-head { max-width: 760px; margin: 0 auto 48px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.loyalty-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 940px; margin: 0 auto; }
.ticket { --pad: 28px; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px var(--pad) 40px; border-radius: 28px; background: var(--ink); color: var(--cream); box-shadow: 0 22px 44px rgba(31, 28, 28, .16); overflow: hidden; }
.ticket-big { font-family: var(--display); font-weight: 700; font-size: clamp(42px, 5vw, 68px); line-height: 1; color: var(--gold); white-space: nowrap; }
.ticket-every { position: relative; align-self: stretch; margin-top: 28px; padding-top: 24px; border-top: 2px dashed var(--gold-line); font-size: clamp(20px, 2vw, 24px); font-weight: 800; }
/* Two half-circle notches at the ends of the tear line. */
.ticket-every::before, .ticket-every::after { content: ""; position: absolute; top: -16px; width: 30px; height: 30px; border-radius: 50%; background: var(--cream); }
.ticket-every::before { left: calc(-1 * var(--pad) - 15px); }
.ticket-every::after { right: calc(-1 * var(--pad) - 15px); }
.ticket-or { margin-top: 8px; font-size: 15px; color: var(--dark-muted); }
.ticket-gold { background: var(--gold); color: var(--ink); }
.ticket-gold .ticket-big { color: var(--ink); }
.ticket-gold .ticket-every { border-top-color: rgba(31, 28, 28, .35); }
.ticket-gold .ticket-or { color: var(--brown); }
.loyalty-rule { max-width: 640px; margin: 28px auto 0; text-align: center; font-size: 15px; color: var(--muted); }
html[lang="ar"] .ticket-big { font-family: var(--display-ar); line-height: 1.3; }
@media (max-width: 640px) {
  .loyalty-cards { grid-template-columns: 1fr; gap: 16px; }
  .ticket { --pad: 20px; padding: 36px var(--pad) 30px; }
}
/* The four pillars inside the home page's "Who is Hamdan?" block: smaller than on Our story. */
.pillars-row.pillars-compact { max-width: none; margin: 8px 0 0; gap: 24px 12px; }
.pillars-compact .pillar { gap: 12px; }
.pillars-compact .pillar-icon { width: 60px; height: 60px; }
.pillars-compact .pillar-icon svg { width: 30px; height: 30px; }
.pillars-compact .pillar h3 { font-size: 17px; }
/* Footer legal lines on the English pages: small and muted, one per line. */
.footer-lines { font-size: 13px; line-height: 1.7; color: var(--dark-muted); }
.pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 8px; }
.pillars div { border-top: 2px solid var(--ink); padding-top: 16px; }
.pillars b { font-size: 18px; }
.pillars p { margin-top: 8px; font-size: 16px; color: var(--muted); }

/* ---------- Visit ---------- */
.visit-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; }
.visit-grid .ar-place { font-family: var(--arabic); font-size: 22px; color: var(--dark-muted); }
.visit-grid > .stack > img { width: 100%; height: 420px; object-fit: cover; object-position: center 35%; border-radius: 24px; }
.visit-grid > .stack > img.photo-night { object-position: 80% 55%; } /* the shop is on the right of the night photo */
.panel { background: var(--dark-card); border-radius: 24px; padding: 36px; }
.hours { margin-top: 22px; }
.hours div { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid #3F3733; font-size: 18px; }
.hours b { font-weight: 700; }
.hours .closed { color: #E07A72; }
.panel .sub { font-size: 15px; color: var(--dark-muted); margin-top: 6px; }
.panel-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--cream); padding: 0 0 40px; }
.footer-veg { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 12px; padding: 22px 0; border-top: 1px solid var(--dark-line); border-bottom: 1px solid var(--dark-line); font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); text-align: center; }
.footer-veg [lang="ar"] { letter-spacing: 0; font-size: 15px; }
.footer-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: 32px 0 24px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 12px 32px; font-size: 15px; font-weight: 600; }
.footer-legal { display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: var(--dark-muted); border-top: 1px solid var(--dark-line); padding-top: 24px; }
.footer-legal nav { display: flex; flex-wrap: wrap; gap: 8px 24px; font-weight: 600; color: var(--dark-body); }

/* ---------- Menu page ---------- */
.page-hero { padding-top: clamp(64px, 8vw, 104px); padding-bottom: clamp(48px, 6vw, 72px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.page-hero .lead { max-width: 640px; }
.page-hero .veg-pill { align-self: center; }
/* 404: the Arabic line under the title, with more room above the buttons (Yazeed, 2026-11-15). Background: the home
   hero's night photo, with the header over it (has-hero); the overlay is even, since the text is centred. */
.nf-hero::before { background: radial-gradient(ellipse at 50% 55%, rgba(31, 28, 28, .82) 0%, rgba(31, 28, 28, .9) 60%, rgba(31, 28, 28, .95) 100%); }
.nf-hero .page-hero { position: relative; min-height: min(100svh, 820px); justify-content: center; padding-top: 168px; padding-bottom: 104px; }
.not-found .btns { justify-content: center; margin-top: 16px; }
.hero-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ornament { display: flex; align-items: center; gap: 16px; color: var(--gold); font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: .04em; }
.ornament::before, .ornament::after { content: ""; width: 64px; height: 1px; background: currentColor; opacity: .6; }
.course { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.course.flip > img { order: 2; }
.course > img { width: 100%; height: clamp(380px, 52vw, 720px); object-fit: cover; border-radius: 28px; }
/* A wide photo on the menu (the sugar waffle, the fries with sauces) keeps its own shape (from its width and height
   attributes) instead of being cut to the tall frame. */
.course > img.landscape { height: auto; }
.course .stack { gap: 22px; }
.course .h-lg { font-size: clamp(38px, 4.6vw, 68px); }
.price-line { display: flex; align-items: baseline; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line-strong); }
.dark .price-line { border-top-color: var(--gold-line); }
.price-line small { font-size: 13px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.dark .price-line small { color: var(--dark-muted); }
.price-line b { font-family: var(--display); font-weight: 700; font-size: 38px; line-height: 1; }
.dark .price-line b { color: var(--gold); }
.sauce-note { max-width: 760px; margin: 72px auto 0; text-align: center; border-top: 1px solid var(--gold-line); border-bottom: 1px solid var(--gold-line); padding: 32px 8px; }
.sauce-note h3 { font-size: 26px; color: var(--gold); }
.sauce-note p { margin-top: 12px; color: var(--dark-body); font-size: 18px; }
.sauce-note .fine { margin-top: 12px; font-size: 15px; color: var(--dark-muted); }

/* ---------- Legal pages ---------- */
.legal { max-width: 820px; padding-top: clamp(56px, 7vw, 96px); padding-bottom: var(--section); }
.legal h1 { font-size: clamp(36px, 4.6vw, 58px); }
.legal .updated { margin-top: 14px; color: var(--muted); font-size: 15px; }
.legal h2 { font-size: clamp(23px, 2.4vw, 29px); margin-top: 44px; }
.legal p, .legal li { color: var(--body); }
.legal p { margin-top: 14px; }
.legal ul, .legal ol { margin: 14px 0 0; padding-inline-start: 22px; }
.legal li + li { margin-top: 8px; }
.legal a:not(.btn):not(.addr-link) { color: var(--brown); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.legal .box { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 24px 28px; margin-top: 24px; }
.legal .box p:first-child { margin-top: 0; }
.legal .btns { margin-top: 20px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .sauces.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .main-nav { gap: 28px; }
}
@media (max-width: 900px) {
  .hero-grid, .split, .course, .visit-grid, .band-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero-grid { padding-top: 150px; padding-bottom: 72px; }
  .hero-photos { height: auto; aspect-ratio: 1 / 1; max-height: 560px; }
  .hero-photos .p-fries { height: 84%; }
  .hero-photos .p-waffle { height: 48%; }
  .split > img, .story img { height: auto; aspect-ratio: 4 / 5; max-height: 640px; }
  .split.img-last > img { order: 2; }
  .split.img-right > img { order: 0; }
  .course.flip > img { order: 0; }
  .course > img { height: auto; aspect-ratio: 4 / 3; }
  .three { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 36px; }
  .sauces { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 20px; }
  .visit-grid > .stack > img { height: auto; aspect-ratio: 4 / 3; }
}
/* Tablets: logo, menu and language switch need about 920px on one row; below that the menu takes its own row under
   the logo, as on phones, instead of breaking "Our story" over two lines (2026-11-15). */
.main-nav a, .nav-points { white-space: nowrap; }
@media (max-width: 920px) {
  .header-row { flex-wrap: wrap; row-gap: 14px; }
  .main-nav { order: 3; width: 100%; gap: 32px; align-items: center; }
  .hero-grid { padding-top: 180px; } /* the two-row header is taller; keep the same room under it as on phones */
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .header-row { flex-wrap: wrap; row-gap: 12px; padding-top: 14px; padding-bottom: 14px; }
  .logo img { height: 46px; }
  .main-nav { order: 3; width: 100%; justify-content: space-between; gap: 12px; font-size: 15px; letter-spacing: .04em; }
  .main-nav a { padding: 6px 0; }
  .btn-wa { min-height: 44px; padding: 10px 18px; font-size: 15px; }
  .hero-grid { padding-top: 156px; }
  .stamp-price { width: 112px; height: 112px; right: 10px; bottom: 18px; }
  .stamp-price b { font-size: 34px; }
  .stamp-price small { font-size: 10px; }
  .stamp-veg { width: 118px; height: 118px; top: 10px; left: 2%; outline-offset: -9px; }
  .stamp-veg b { font-size: 29px; }
  .stamp-veg small { font-size: 9px; }
  .stamp-veg [lang="ar"] { font-size: 13px; }
  .duo, .pillars, .who { grid-template-columns: minmax(0, 1fr); }
  .who .wide { grid-column: auto; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 28px; }
  .panel { padding: 26px 22px; }
  .hours div { font-size: 16px; }
  .sauces.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sauce-disc { width: 132px; height: 132px; }
  .sauce-initial { font-size: 56px; }
  .btns .btn { flex: 1 1 auto; }
}

/* Arabic lines inside English blocks stay aligned with the English text, as in the draft. */
[dir="ltr"] .ar-place, [dir="ltr"] .who [dir="rtl"] { text-align: left; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }

/* ---------- Header extras ---------- */
.header-end { display: flex; align-items: center; gap: 18px; }
.lang-switch { display: flex; border: 1.5px solid var(--gold-line); border-radius: 999px; padding: 3px; }
.lang-switch a { min-width: 40px; min-height: 36px; display: grid; place-items: center; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--dark-body); }
.lang-switch a:hover { color: var(--gold); }
.lang-switch a[aria-current] { background: var(--cream); color: var(--ink); }
.addr { font-style: normal; color: var(--dark-body); line-height: 1.7; }
.addr a { color: var(--gold); }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.faq .h-lg { margin-top: 14px; }
.faq-item { border-top: 1px solid var(--line-strong); }
.faq-item:last-child { border-bottom: 1px solid var(--line-strong); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--display); font-size: 30px; line-height: 1; color: var(--brown); transition: transform .2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item h3 { font-family: var(--sans); font-weight: 700; font-size: 19px; line-height: 1.4; }
.faq-item p { padding-bottom: 22px; color: var(--body); max-width: 680px; }

/* ---------- Arabic, right to left ---------- */
html[lang="ar"] body { font-family: var(--arabic); line-height: 1.9; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { font-family: var(--display-ar); font-weight: 700; line-height: 1.5; letter-spacing: 0; }
html[lang="ar"] .h-xl { font-size: clamp(38px, 5.2vw, 76px); line-height: 1.4; }
html[lang="ar"] .h-lg { font-size: clamp(32px, 3.8vw, 54px); }
html[lang="ar"] .course .h-lg { font-size: clamp(36px, 4.4vw, 64px); }
html[lang="ar"] .eyebrow, html[lang="ar"] .hero-points, html[lang="ar"] .veg-pill, html[lang="ar"] .footer-veg, html[lang="ar"] .stamp small, html[lang="ar"] .price-line small, html[lang="ar"] .main-nav { letter-spacing: 0; }
html[lang="ar"] .eyebrow { font-size: 16px; }
html[lang="ar"] .lead { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.95; }
html[lang="ar"] .hero-copy .lead { font-size: clamp(19px, 1.6vw, 22px); }
html[lang="ar"] .hero-points { font-size: 16px; }
html[lang="ar"] .faq-item h3 { font-family: var(--arabic); font-size: 20px; }
html[lang="ar"] .legal h2 { font-size: clamp(30px, 3.2vw, 40px); }
html[lang="ar"] .stamp-veg b { font-size: 30px; line-height: 1.3; }
html[lang="ar"] .stamp-price b { font-size: 42px; }
html[lang="ar"] .price-line b { font-size: 36px; }
html[lang="ar"] .sauce-initial, html[lang="ar"] .ornament { font-family: var(--display); }
html[dir="rtl"] .hero::before { background: linear-gradient(260deg, rgba(31, 28, 28, .94) 0%, rgba(31, 28, 28, .8) 45%, rgba(31, 28, 28, .42) 100%); }
html[dir="rtl"] .card .more, html[dir="rtl"] .text-link { unicode-bidi: plaintext; }
.lang-switch a[lang="ar"] { font-family: var(--sans); }

@media (max-width: 900px) {
  .faq { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 640px) {
  .header-end { gap: 10px; }
  .lang-switch a { min-width: 34px; padding: 0 6px; font-size: 12px; }
  .btn-wa span { display: none; }
  .btn-wa { padding: 10px 14px; }
  html[lang="ar"] .main-nav { font-size: 16px; }
}
html[lang="ar"] .stamp-veg small { font-size: 22px; font-weight: 800; line-height: 1.2; }
.stamp-veg [lang="en"] { font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--brown); }
html[lang="ar"] .stamp-price small { font-size: 15px; }
html[lang="ar"] .who span[lang="en"] { font-family: var(--sans); }

/* ---------- Social icons (footer and Find us) ---------- */
.socials { display: flex; gap: 10px; align-items: center; }
.social-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--gold-line); color: var(--cream); transition: color .15s, border-color .15s; }
.social-icon:hover { color: var(--gold); border-color: var(--gold); }
.social-icon svg { width: 20px; height: 20px; }
.lang-switch a[lang="ar"] { letter-spacing: 0; font-family: var(--arabic); font-size: 14px; }
/* Long German words ("Nutzungsbedingungen") must not push the page sideways on a phone. */
.legal h1, .legal h2 { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 640px) {
  .main-nav { gap: 8px; font-size: 14px; letter-spacing: 0; }
  .main-nav a { white-space: nowrap; }
}

/* ---------- Find us ---------- */
.visit-grid > img { width: 100%; height: 100%; min-height: 380px; max-height: 520px; object-fit: cover; object-position: center 35%; border-radius: 24px; }
/* The shared location block: light cards on cream (Find us), dark cards inside a .dark section (Our story). */
.visit-block .ar-place { color: var(--muted); }
.visit-block .addr { color: var(--body); font-size: 18px; }
.visit-block .addr a:not(.addr-link) { color: var(--brown); }
.visit-block .visit-cards { gap: 20px; }
.visit-block .panel { background: var(--paper); border: 1px solid var(--line); }
.visit-block .panel .sub { color: var(--muted); }
.visit-block .hours div { border-top-color: var(--line); }
.visit-block .hours .closed { color: var(--red); }
.follow-list { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.follow-list .social-icon { width: 56px; height: 56px; background: var(--ink); border-color: var(--ink); color: var(--gold); }
.follow-list .social-icon svg { width: 24px; height: 24px; }
.follow-list a.social-icon:hover { background: var(--brown); border-color: var(--brown); color: var(--cream); }
.dark .visit-block .ar-place { color: var(--dark-muted); }
.dark .visit-block .addr { color: var(--dark-body); }
.dark .visit-block .addr a:not(.addr-link) { color: var(--gold); }
.dark .visit-block .panel { background: var(--dark-card); border-color: var(--dark-line); }
.dark .visit-block .panel .sub { color: var(--dark-muted); }
.dark .visit-block .hours div { border-top-color: #3F3733; }
.dark .visit-block .hours .closed { color: #E07A72; }
.dark .follow-list .social-icon { background: transparent; border-color: var(--gold-line); color: var(--cream); }
.dark .follow-list a.social-icon:hover { background: transparent; border-color: var(--gold); color: var(--gold); }
.follow-list .social-icon.pending { opacity: .35; }
@media (max-width: 900px) { .visit-grid > img { height: auto; min-height: 0; aspect-ratio: 4 / 3; } }
/* Almarai sits low next to the Latin labels: lift the Arabic label to the same line. */
.lang-switch a[lang="ar"] { line-height: 1; padding-bottom: 3px; }
/* The waffle price tag sits on the waffle photo, gold so it reads apart from the red fries tag. */
.stamp-waffle { right: auto; left: 46%; bottom: 196px; background: var(--gold); color: var(--ink); transform: rotate(9deg); width: 128px; height: 128px; }
.stamp-waffle b { font-size: 40px; }
@media (max-width: 900px) { .stamp-waffle { bottom: auto; top: 50%; } }
@media (max-width: 640px) { .stamp-waffle { width: 96px; height: 96px; left: 32%; top: 40%; } .stamp-waffle b { font-size: 28px; } .stamp-waffle small { font-size: 9px; } }
html[lang="ar"] .stamp-waffle b { font-size: 30px; }
@media (max-width: 640px) { html[lang="ar"] .stamp-waffle b { font-size: 22px; } html[lang="ar"] .stamp-waffle small { font-size: 12px; } }
.story-pillars + .testimonials { border-top: 1px solid var(--line); }

/* ---------- Motion and hover (Yazeed, 2026-11-14) ----------
   Scroll-in: the script in the footer gives page blocks the class "rv" and adds "in" when they come into view, then
   removes both, so the hover transitions below are not overridden. Nothing is hidden without JavaScript or with
   prefers-reduced-motion. Hover effects use the separate translate / scale / rotate properties, so they never undo
   an element's own transform (the tilted hero stamps). */
.rv { opacity: 0; translate: 0 28px; transition: opacity .7s ease, translate .8s cubic-bezier(.2, .7, .2, 1), scale .8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--rv-d, 0ms); }
.rv.in { opacity: 1; translate: 0 0; }
.stamp.rv { translate: 0 0; scale: .6; }
.stamp.rv.in { scale: 1; }

/* Navigation: an underline grows on hover; the current page is gold with a gold underline. */
.main-nav a, .footer-nav a { background: linear-gradient(currentColor, currentColor) no-repeat 50% 100% / 0 2px; padding-bottom: 6px; transition: color .2s, background-size .25s ease; }
.main-nav a:hover, .footer-nav a:hover { background-size: 100% 2px; }
.main-nav a[aria-current="page"], .footer-nav a[aria-current="page"] { color: var(--gold); background-size: 100% 2px; }

/* Buttons lift a little. A disabled button stays put and looks switched off. */
.btn { transition: background .15s, color .15s, translate .2s ease, box-shadow .2s ease; }
.btn:not(:disabled):hover { translate: 0 -2px; box-shadow: 0 10px 22px rgba(31, 28, 28, .18); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn[aria-disabled="true"]:hover { translate: none; box-shadow: none; }
.loyalty-btns { display: flex; justify-content: center; margin-top: 28px; }

/* "Read our story": a text link with an arrow; the underline appears on hover and the arrow moves on. */
.link-arrow { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding-bottom: 6px; font-weight: 700; font-size: 18px; color: var(--ink); background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 2px; transition: background-size .3s ease, color .2s; }
[dir="rtl"] .link-arrow { background-position: 100% 100%; }
.link-arrow .arr { transition: translate .25s ease; }
.link-arrow:hover { color: var(--brown); background-size: 100% 2px; }
.link-arrow:hover .arr { translate: 6px 0; }
[dir="rtl"] .link-arrow .arr { display: inline-block; transform: scaleX(-1); }
[dir="rtl"] .link-arrow:hover .arr { translate: -6px 0; }

/* Addresses: every one is a link to Google Maps; it lights up on hover. */
/* They look like plain text (Yazeed, 2026-11-14): no underline, no link colour; only the hover highlight shows. */
a.addr-link { color: inherit; text-decoration: none; border-radius: 6px; transition: background .2s, color .2s, box-shadow .2s; }
a.addr-link { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
a.addr-link:hover { background: color-mix(in srgb, var(--gold) 38%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 38%, transparent); color: var(--ink); }
.dark a.addr-link:hover, .site-footer a.addr-link:hover { background: color-mix(in srgb, var(--gold) 24%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 24%, transparent); }
.dark a.addr-link:hover, .site-footer a.addr-link:hover { color: var(--cream); }

/* Opening hours: the whole row lights up on hover. */
.hours div { padding-inline: 12px; margin-inline: -12px; border-radius: 10px; transition: background .2s; }
.hours div:hover { background: color-mix(in srgb, var(--gold) 32%, transparent); }
.dark .hours div:hover { background: color-mix(in srgb, var(--gold) 20%, transparent); }
.hours div:hover + div { border-top-color: transparent; }
.hours div:hover b:not(.closed) { color: var(--brown); }
.dark .hours div:hover b:not(.closed) { color: var(--gold); }

/* Hero: the stamps grow (and keep their tilt); the three small tags grow too. */
.stamp { transition: scale .3s cubic-bezier(.34, 1.56, .64, 1); cursor: default; }
.stamp:hover { scale: 1.1; }
.hero-points > span { transition: scale .25s cubic-bezier(.34, 1.56, .64, 1), color .2s; }
.hero-points > span:hover { scale: 1.08; color: var(--gold); }
.veg-pill { transition: scale .25s cubic-bezier(.34, 1.56, .64, 1), border-color .2s; }
.veg-pill:hover { scale: 1.05; border-color: var(--gold); }

/* Cards lift with a soft shadow. */
.card, .mini, .who > div, .t-card, .panel { transition: translate .25s ease, box-shadow .25s ease, border-color .25s; }
.card:hover, .mini:hover, .who > div:hover, .t-card:hover { translate: 0 -6px; box-shadow: 0 18px 36px rgba(31, 28, 28, .14); }
a.card:hover { transform: none; }
.mini:hover { border-color: var(--gold); }
.facts div { transition: background .2s; }
.facts div:hover { background: var(--dark-card); }
.facts b { transition: scale .25s cubic-bezier(.34, 1.56, .64, 1); transform-origin: left center; }
[dir="rtl"] .facts b { transform-origin: right center; }
.facts div:hover b { scale: 1.12; }

/* Sauces turn slowly all the time (Yazeed, 2026-11-14), each starting at a different point so they don't move in step;
   they grow a little on hover. Still with prefers-reduced-motion. */
@keyframes sauce-spin { to { rotate: 360deg; } }
.sauce-disc img { animation: sauce-spin 24s linear infinite; }
.sauce:nth-child(2) .sauce-disc img { animation-delay: -4s; }
.sauce:nth-child(3) .sauce-disc img { animation-delay: -9s; }
.sauce:nth-child(4) .sauce-disc img { animation-delay: -13s; }
.sauce:nth-child(5) .sauce-disc img { animation-delay: -17s; }
.sauce:nth-child(6) .sauce-disc img { animation-delay: -21s; }
.sauce:nth-child(even) .sauce-disc img { animation-direction: reverse; }
.sauce-disc { transition: scale .3s ease; }
.sauce:hover .sauce-disc { scale: 1.06; }
.chip { transition: scale .2s cubic-bezier(.34, 1.56, .64, 1); }
.chip:hover { scale: 1.08; }

/* Loyalty tickets: lift and tip like a ticket being picked up; the offer grows. */
.ticket { transition: translate .3s cubic-bezier(.34, 1.56, .64, 1), rotate .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s; }
.ticket:hover { translate: 0 -8px; rotate: -2deg; box-shadow: 0 30px 56px rgba(31, 28, 28, .26); }
.ticket-gold:hover { rotate: 2deg; }
.ticket-big { transition: scale .3s cubic-bezier(.34, 1.56, .64, 1); }
.ticket:hover .ticket-big { scale: 1.07; }

/* Pillars: the icon pops and tips. */
.pillar-icon { transition: scale .3s cubic-bezier(.34, 1.56, .64, 1), rotate .3s ease; }
.pillar:hover .pillar-icon { scale: 1.12; rotate: -10deg; }

/* Social icons lift. */
.social-icon { transition: color .15s, border-color .15s, background .15s, translate .2s ease; }
a.social-icon:hover { translate: 0 -3px; }

/* FAQ: the question turns brown on hover. */
.faq-item summary h3 { transition: color .2s; }
.faq-item summary:hover h3 { color: var(--brown); }
.faq-item summary:hover::after { color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; translate: none; scale: none; }
  .sauce-disc img { animation: none; }
  .stamp:hover, .hero-points > span:hover, .veg-pill:hover, .chip:hover, .ticket:hover .ticket-big, .facts div:hover b, .pillar:hover .pillar-icon, .sauce:hover .sauce-disc { scale: none; rotate: none; }
  .card:hover, .mini:hover, .who > div:hover, .t-card:hover, .ticket:hover, .btn:not(:disabled):hover, a.social-icon:hover, .link-arrow:hover .arr { translate: none; rotate: none; }
}
@media print { .rv { opacity: 1; translate: none; scale: none; } }

/* ---------- Ongoing animation (Yazeed, 2026-11-14) ---------- */
/* Hero: the 100% vegetarian stamp is stamped onto the photo again and again (Yazeed, 2026-11-14): it lifts up big,
   comes down hard, squashes a little and settles. It starts once the scroll-in is done (.rv gone); hovering holds it. */
@keyframes stamp-down {
  0%, 30%, 100% { scale: 1; box-shadow: 0 20px 40px rgba(0, 0, 0, .35); }
  9% { scale: 1.09; box-shadow: 0 30px 50px rgba(0, 0, 0, .32); }
  17% { scale: .97; box-shadow: 0 10px 20px rgba(0, 0, 0, .42); }
  23% { scale: 1.01; }
}
.stamp-veg:not(.rv) { animation: stamp-down 3.5s cubic-bezier(.5, 0, .5, 1) infinite; animation-delay: 1s; }
.stamp-veg:not(.rv):hover { animation: none; scale: 1.1; }

/* Loyalty: sparkles burst out of the tickets onto the page, from all four edges, so they catch the eye. They sit on a
   wrapper around each ticket because the ticket itself clips its edges (for the notches). */
.ticket-wrap { position: relative; display: flex; }
.ticket-wrap > .ticket { flex: 1; }
.loyalty { overflow-x: clip; }
.sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.sparkles i { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; background: var(--gold); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); filter: drop-shadow(0 0 5px rgba(232, 164, 39, .7)); opacity: 0; animation: sparkle-out 2s cubic-bezier(.2, .7, .3, 1) infinite; }
.sparkles i:nth-child(1) { left: 8%;  top: 0;    --dx: -26px; --dy: -46px; animation-delay: 0s; }
.sparkles i:nth-child(2) { left: 55%; top: 0;    --dx: 10px;  --dy: -54px; animation-delay: .9s; width: 21px; height: 21px; }
.sparkles i:nth-child(3) { left: 100%; top: 22%; --dx: 50px;  --dy: -18px; animation-delay: .4s; }
.sparkles i:nth-child(4) { left: 100%; top: 78%; --dx: 46px;  --dy: 24px;  animation-delay: 1.6s; width: 34px; height: 34px; }
.sparkles i:nth-child(5) { left: 88%; top: 100%; --dx: 22px;  --dy: 48px;  animation-delay: 1.1s; width: 21px; height: 21px; }
.sparkles i:nth-child(6) { left: 30%; top: 100%; --dx: -14px; --dy: 52px;  animation-delay: 2s; }
.sparkles i:nth-child(7) { left: 0;   top: 64%;  --dx: -50px; --dy: 16px;  animation-delay: .6s; width: 23px; height: 23px; }
.sparkles i:nth-child(8) { left: 0;   top: 14%;  --dx: -44px; --dy: -26px; animation-delay: 1.9s; width: 18px; height: 18px; }
.ticket-wrap + .ticket-wrap .sparkles i { background: var(--brown); filter: drop-shadow(0 0 5px rgba(232, 164, 39, .8)); }
@keyframes sparkle-out {
  0% { translate: 0 0; scale: 0; opacity: 0; rotate: 0deg; }
  20% { scale: 1.1; opacity: 1; }
  100% { translate: var(--dx) var(--dy); scale: .2; opacity: 0; rotate: 160deg; }
}

@media (prefers-reduced-motion: reduce) {
  .stamp, .sparkles i { animation: none !important; }
  .sparkles { display: none; }
}

/* Belgian flag before "Original Belgian Recipe" in the hero (Yazeed, 2026-11-14). The stripes keep their order
   (black at the pole) in Arabic too. */
.hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; }
.flag-be { width: 27px; height: 18px; flex: none; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px rgba(246, 236, 216, .25); }

/* Loyalty title: "free fries" and "free waffles" pulse and change colour all the time, taking turns (Yazeed, 2026-11-14).
   The words are marked in strings.<lang>.loyalty_title with <span class="offer-word">. */
/* One 4 s beat for the whole section: the tickets swing from one side to the other every 2 s, and each word pulses
   as the swing turns: "free fries" at 0 s, "free waffles" at 2 s. The sparkles repeat every 2 s too. */
.offer-word { display: inline-block; color: var(--brown); animation: offer-word 4s ease-in-out infinite; animation-delay: -2s; }
.offer-word + .offer-word { animation-delay: 0s; }
@keyframes offer-word { 0%, 30%, 70%, 100% { scale: 1; color: var(--brown); } 50% { scale: 1.07; color: var(--red); } }
@media (prefers-reduced-motion: reduce) { .offer-word { animation: none; } }
/* Loyalty tickets rock gently left and right all the time, in opposite directions (Yazeed, 2026-11-14). On hover they
   pause where they are and lift. */
@keyframes ticket-rock { 0%, 100% { rotate: -1.5deg; } 50% { rotate: 1.5deg; } }
.ticket { animation: ticket-rock 4s ease-in-out infinite; }
.ticket-gold { animation-delay: -2s; }
.ticket:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ticket { animation: none; } }


/* Phones and tablets: the hero photo shows its right side, where the shop is, instead of the street in the middle
   (Yazeed, 2026-11-14). */
@media (max-width: 900px) { .hero { background-position: 88% 60%; } }

/* ---------- "Coming soon" (Yazeed, 2026-11-14) ---------- */
/* Language switch on the English pages: the Arabic button is greyed out, with a small two-line tag beside it that
   points at it. A click opens the Arabic message. */
.lang-switch .lang-soon { min-width: 40px; min-height: 36px; display: grid; place-items: center; padding: 0 10px 3px; border: 0; border-radius: 999px; background: none; font: 700 14px/1 var(--arabic); color: var(--dark-muted); opacity: .5; cursor: pointer; transition: opacity .2s, color .2s; }
.lang-switch .lang-soon:hover, .lang-switch .lang-soon:focus-visible { opacity: .85; color: var(--gold); }
.soon-tag { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 4px 8px 5px; border-radius: 8px; background: color-mix(in srgb, var(--gold) 16%, transparent); border: 1px solid var(--gold-line); color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1.15; white-space: nowrap; margin-inline-end: -8px; }
.soon-tag [lang="ar"] { font-family: var(--arabic); font-size: 11px; letter-spacing: 0; text-transform: none; }
.soon-tag::after { content: ""; position: absolute; inset-inline-end: -5px; top: 50%; width: 8px; height: 8px; margin-top: -4px; background: inherit; border: inherit; border-width: 1px 1px 0 0; rotate: 45deg; background-color: #2E2620; }
[dir="rtl"] .soon-tag::after { rotate: -135deg; }

/* "Your points" in the header and footer navigation: a pill that looks switched off; a click explains it is coming. */
.nav-points, .footer-points { display: inline-flex; align-items: center; gap: 7px; font: inherit; letter-spacing: inherit; color: var(--dark-muted); background: none; cursor: pointer; transition: color .2s, border-color .2s, opacity .2s; }
.nav-points { padding: 6px 13px 6px 11px; margin-block: -6px; border: 1.5px dashed var(--gold-line); border-radius: 999px; opacity: .75; }
.nav-points svg, .footer-points svg { width: 15px; height: 15px; flex: none; color: var(--gold); opacity: .7; }
.nav-points:hover, .nav-points:focus-visible { opacity: 1; color: var(--cream); border-color: var(--gold); }
.footer-points { padding: 0 0 6px; border: 0; opacity: .7; }
.footer-points:hover, .footer-points:focus-visible { opacity: 1; color: var(--gold); }
@media (max-width: 640px) {
  /* Phones: the tag becomes a one-line badge on top of the switch, so the logo and the switch stay on one row. */
  .header-end { position: relative; }
  .soon-tag { position: absolute; top: -10px; inset-inline-start: -4px; z-index: 1; flex-direction: row; gap: 4px; padding: 2px 6px 3px; margin: 0; border-radius: 999px; font-size: 7.5px; background: #3A2E22; }
  .soon-tag [lang="ar"] { font-size: 9px; }
  .soon-tag::after { display: none; }
  .nav-points { padding: 4px 9px 4px 8px; gap: 5px; }
  .nav-points svg { width: 13px; height: 13px; }
}

/* Pop-up messages (<dialog class="modal">, src/partials/modals.html): a dark card with the logo mark, a big gold title
   and one gold button, over a dimmed, blurred page. It pops in; Esc, the button, the x or a click outside closes it. */
dialog.modal { padding: 0; border: 0; background: transparent; max-width: min(440px, calc(100vw - 32px)); width: 100%; overflow: visible; color: var(--cream); }
dialog.modal::backdrop { background: rgba(20, 17, 16, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 40px 32px 32px; text-align: center; background: radial-gradient(120% 80% at 50% 0%, #3A2E22 0%, var(--ink) 60%); border: 1px solid var(--gold-line); border-radius: 28px; box-shadow: 0 40px 80px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06); }
.modal-card p { color: var(--dark-body); font-size: 17px; line-height: 1.7; max-width: 340px; }
.modal-card .modal-note { margin-top: -6px; font-size: 13px; color: var(--dark-muted); }
.modal-card .btn { margin-top: 8px; min-width: 140px; }
.modal-mark { width: 72px; height: 72px; filter: drop-shadow(0 8px 18px rgba(232, 164, 39, .35)); animation: modal-mark 2.4s ease-in-out infinite; }
.modal-title { font-family: var(--display); font-size: 46px; line-height: 1.05; color: var(--gold); }
html[lang="ar"] .modal-title, dialog.modal[lang="ar"] .modal-title { font-family: var(--display-ar); font-size: 54px; line-height: 1.3; }
dialog.modal[lang="ar"] .modal-card p { font-family: var(--arabic); }
.modal-x { position: absolute; top: 14px; inset-inline-end: 14px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(246, 236, 216, .08); color: var(--cream); font-size: 22px; line-height: 1; cursor: pointer; transition: background .2s; }
.modal-x:hover { background: rgba(246, 236, 216, .16); }
dialog.modal[open] .modal-card { animation: modal-pop .38s cubic-bezier(.34, 1.56, .64, 1); }
dialog.modal[open]::backdrop { animation: modal-fade .25s ease; }
@keyframes modal-pop { from { opacity: 0; scale: .88; translate: 0 14px; } to { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-mark { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -5px; rotate: -4deg; } }
@media (prefers-reduced-motion: reduce) { dialog.modal[open] .modal-card, dialog.modal[open]::backdrop, .modal-mark { animation: none; } }

/* ---------- Reviews: cards open the full review (Yazeed, 2026-11-15) ---------- */
.t-card { cursor: pointer; }
.t-card:hover { border-color: var(--gold); }
.t-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.t-card .t-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.t-card blockquote[dir="rtl"] { text-align: right; }
.t-card blockquote[dir="ltr"] { text-align: left; }
.t-more { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: -4px; font-size: 13px; font-weight: 700; color: var(--brown); }
.t-more .arr { transition: translate .2s ease; }
.t-card:hover .t-more .arr, .t-card:focus-visible .t-more .arr { translate: 4px 0; }
[dir="rtl"] .t-more .arr { display: inline-block; transform: scaleX(-1); }
[dir="rtl"] .t-card:hover .t-more .arr { translate: -4px 0; }
html[lang="ar"] .t-more { font-size: 14px; }
.t-full { display: none; }

/* The pop-up matches the cards: paper, a thin line border, the 24px corner, the card's type. */
dialog.review-modal { max-width: min(560px, calc(100vw - 32px)); color: var(--ink); }
.review-card { position: relative; display: flex; flex-direction: column; gap: 16px; max-height: min(80vh, 720px); overflow-y: auto; overscroll-behavior: contain; padding: 32px 28px 28px; background: var(--paper); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 40px 80px rgba(0, 0, 0, .35); }
.review-card .modal-x { background: rgba(31, 28, 28, .06); color: var(--ink); }
.review-card .modal-x:hover { background: rgba(31, 28, 28, .12); }
.review-body { display: flex; flex-direction: column; gap: 14px; }
.review-body p { font-size: 17px; line-height: 1.7; color: var(--body); }
.review-body[dir="rtl"] { text-align: right; font-family: var(--arabic); }
.review-body[dir="ltr"] { text-align: left; font-family: var(--sans); }
.review-name { font-weight: 700; font-size: 16px; }
dialog.review-modal[open] .review-card { animation: modal-pop .32s cubic-bezier(.34, 1.56, .64, 1); }
html.review-open, html.review-open body { overflow: hidden; }
@media (max-width: 640px) { .review-card { padding: 28px 22px 22px; } }
@media (prefers-reduced-motion: reduce) { dialog.review-modal[open] .review-card { animation: none; } }

/* Reviews carousel as a scroll strip (the script in src/partials/testimonials.html moves it; Yazeed, 2026-11-15). The
   scrollbar is hidden; sideways swipes stay inside the strip instead of moving the page or going back a page. */
.t-viewport.is-scroller { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; }
.t-viewport.is-scroller::-webkit-scrollbar { display: none; }
.t-viewport.is-scroller .t-track { animation: none; }
.t-viewport.is-dragging, .t-viewport.is-dragging .t-card { cursor: grabbing; user-select: none; -webkit-user-select: none; }
/* Safety net (Yazeed, 2026-11-15: the page could be moved sideways on his phone; no cause found at 320 to 430 px):
   the page itself never scrolls sideways. clip, unlike hidden, keeps sticky positioning working. */
html { overflow-x: clip; }