:root{font-family:Tahoma,Arial,sans-serif;font-size:16px;line-height:1.6;color:#28252a;background:#f4f5f7;--red:#861c32;--muted:#7a7780}*{box-sizing:border-box}body{margin:0}.shell{max-width:660px;margin:auto;background:white;min-height:100vh}header{height:86px;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px}header img{width:155px;max-width:42%}.demo,.since{font-size:.75rem;color:var(--muted);white-space:nowrap}.demo{color:var(--red)}.cover{height:185px;position:relative;overflow:hidden}.cover>img{width:100%;height:100%;object-fit:cover}.cover:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent,#000b)}.cover>div{position:absolute;bottom:20px;right:24px;z-index:1;color:white}.cover strong{color:#edd18a;font-size:1rem}.cover p{margin:5px 0 0;font-size:.875rem}.controls{position:static;background:#fffffff5;backdrop-filter:blur(12px);padding:16px 0 0;border-bottom:1px solid #ecebef}.search{display:flex;align-items:center;gap:12px;margin:0 20px 14px;padding:0 17px;border:1px solid #e5e4e9;border-radius:12px;background:#fafafb}.search span{font-size:1.6rem;color:#98949f}input{min-width:0;width:100%;padding:13px 0;border:0;background:none;font:inherit;font-size:1rem;outline:none}nav{display:flex;gap:22px;overflow:auto;scrollbar-width:none;padding:0 22px}nav button{border:0;border-bottom:3px solid transparent;background:none;white-space:nowrap;padding:9px 0 13px;font:inherit;font-size:.875rem;color:#77737d;cursor:pointer}nav button[aria-pressed=true]{color:var(--red);border-bottom-color:var(--red);font-weight:bold}button:focus-visible,input:focus-visible{outline:2px solid #b9697b;outline-offset:3px}main{padding:0 22px 28px}.intro{display:flex;align-items:center;justify-content:space-between;padding:25px 0 5px}.intro h1{font-size:1.35rem;margin:0;font-weight:bold}.intro span{font-size:.875rem;color:var(--muted)}section{margin:25px 0 42px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px}.section-heading h2{font-size:1.125rem;margin:0;line-height:1.5}.section-count{font-size:.75rem;color:#96929b}.grid{display:flex;flex-direction:column;gap:20px}.card{display:grid;grid-template-columns:132px minmax(0,1fr);gap:0 22px;border:1px solid #e7e4e9;border-radius:18px;overflow:hidden;padding:18px;background:white}.media{width:132px;height:132px;border-radius:11px;position:relative;overflow:hidden;background:#faf8f9;border:1px solid #e7e1e5}.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;font-size:1rem;font-weight:bold;color:var(--red);text-align:center;line-height:1.8;background:#faf8f9}.placeholder[hidden]{display:none}.details{min-width:0;min-height:132px;display:flex;flex-direction:column;justify-content:center}.card-top{display:flex;flex-direction:column;align-items:flex-start;gap:16px}.card h3{font-size:1.125rem;line-height:1.7;margin:0;font-weight:bold}.price{display:flex;align-items:baseline;gap:7px;color:var(--red);font-size:1.3rem;line-height:1.2}.price span{font-size:.9rem;font-weight:normal}.size-prices{display:flex;flex-direction:column;gap:5px;color:var(--red);font-weight:bold;font-size:1rem;margin-top:13px}.choices{grid-column:1/-1;border-top:1px solid #efedf0;margin-top:18px;padding-top:14px}.choice-label{display:block;font-size:.75rem;color:#97919b;margin-bottom:7px}.opts{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;gap:4px 0;color:#66606c;font-size:.9375rem;line-height:1.85}.opts li{display:inline;max-width:100%;overflow-wrap:anywhere}.opts li:not(:last-child):after{content:' / ';color:#c4b9c0;white-space:pre;margin:0 7px}#empty{text-align:center;padding:36px 0;color:var(--muted)}footer{border-top:1px solid #ece9ee;padding:30px 22px 38px;text-align:center}footer img{width:135px}footer p{font-size:.9rem;margin:15px 0 8px}footer small{font-size:.75rem;color:#98919d}@media(max-width:380px){header{padding-inline:18px}.cover>div{right:18px}main{padding-inline:16px}.card{padding:15px;grid-template-columns:108px minmax(0,1fr);gap:0 16px}.media{width:108px;height:120px}.details{min-height:120px}.card h3{font-size:1rem}.price{font-size:1.2rem}.opts{font-size:.9375rem}.search{margin-inline:16px}nav{padding-inline:18px;gap:20px}}@media(min-width:600px){main{padding-inline:30px}.card{grid-template-columns:150px minmax(0,1fr);padding:22px;gap:0 28px}.media{width:150px;height:145px}.details{min-height:145px}.grid{gap:22px}}@media(prefers-reduced-motion:no-preference){nav button{transition:color .15s}}

/* Compact two-column cards; large groups span a full row. */
main{padding-inline:16px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch}.card{display:flex;flex-direction:column;gap:0;padding:0;min-width:0;height:auto;border-radius:14px}.media{width:100%;height:auto;aspect-ratio:1.5;flex:none;border:0;border-radius:0}.details{display:flex;flex-direction:column;min-height:0;padding:12px;justify-content:flex-start;gap:6px;flex:none}.card-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:6px}.card h3{font-size:1rem;line-height:1.5;overflow-wrap:anywhere}.price{font-size:1.1rem;white-space:nowrap;gap:4px}.price span{font-size:.875rem}.description{font-size:.875rem;line-height:1.65;margin:0;color:#827a86}.size-prices{font-size:.875rem;margin:0;gap:2px}.choices{border:0;margin:0;padding:0;min-width:0}.opts{display:flex;flex-wrap:wrap;gap:5px;font-size:.875rem;line-height:1.5}.opts li{display:block;max-width:100%;overflow-wrap:anywhere;white-space:normal;border:1px solid #e3d9e0;border-radius:6px;background:#faf7f9;padding:2px 6px;color:#6f5260}.opts li:not(:last-child):after{content:none}.card-wide{grid-column:1/-1;display:grid;grid-template-columns:112px minmax(0,1fr);align-items:start}.card-wide .media{width:112px;height:112px;aspect-ratio:1}.card-wide .details{padding:10px 12px}.card-wide>.choices{grid-column:1/-1;padding:0 12px 12px}.card-wide.no-image{grid-template-columns:1fr}.card-wide.no-image .media{display:none}.card-wide.no-image .details{padding:12px}.section-heading{margin-bottom:14px}section{margin:24px 0 28px}nav{gap:8px;padding:0 16px 12px}nav button{border:1px solid #ded7dc;border-radius:8px;background:#faf7f9;padding:7px 12px;line-height:1.5;color:#6f5260}nav button[aria-pressed=true]{background:var(--red);color:white;border-color:var(--red)}@media(max-width:380px){main{padding-inline:12px}.grid{gap:10px}.card{padding:0;gap:0}.media{width:100%;height:auto}.details{min-height:0;padding:10px}.card h3{font-size:1rem}.price{font-size:1rem}.card-wide{grid-template-columns:96px minmax(0,1fr)}.card-wide .media{width:96px;height:96px}}@media(min-width:600px){main{padding-inline:24px}.grid{gap:16px}.card{padding:0;gap:0}.media{width:100%;height:auto}.details{min-height:0;padding:14px}.card-wide{grid-template-columns:132px minmax(0,1fr)}.card-wide .media{width:132px;height:132px}.card h3{font-size:1.125rem}}

/* Every dish keeps a media box, including dishes without a photograph. */
.card-wide.no-image{grid-template-columns:112px minmax(0,1fr)}.card-wide.no-image .media{display:block;width:112px;height:112px;aspect-ratio:1}.card-wide.no-image .details{padding:10px 12px}.placeholder{font-size:.875rem;line-height:1.6;overflow-wrap:anywhere;padding:10px}@media(max-width:380px){.card-wide.no-image{grid-template-columns:96px minmax(0,1fr)}.card-wide.no-image .media{width:96px;height:96px}}@media(min-width:600px){.card-wide.no-image{grid-template-columns:132px minmax(0,1fr)}.card-wide.no-image .media{width:132px;height:132px}}

/* Consistent Arabic type scale and readable spacing. */
:root{font-family:Tahoma,Arial,sans-serif;line-height:1.65}input,button{font-family:inherit}.card h3{font-size:1rem;font-weight:700;line-height:1.6;letter-spacing:normal;overflow-wrap:normal;word-break:normal}.card-top{align-items:start;column-gap:8px}.price{font-size:1.0625rem;font-weight:700;line-height:1.6;gap:4px}.price span{font-size:.8125rem;font-weight:400}.description{font-size:.875rem;line-height:1.75;color:#6e6872}.size-prices{font-size:.875rem;line-height:1.7;font-weight:700}.opts{font-size:.875rem;line-height:1.6}.opts li{line-height:1.6;font-weight:400}.placeholder{font-size:.9375rem;line-height:1.7;font-weight:600}.section-heading h2{font-size:1.125rem;line-height:1.6}.intro h1{font-size:1.25rem;line-height:1.6}nav button{font-size:.875rem;line-height:1.6;font-weight:500}nav button[aria-pressed=true]{font-weight:700}.section-count,.intro span{font-size:.8125rem}.search input{font-size:.9375rem;line-height:1.6}@media(max-width:380px){.card h3{font-size:.9375rem}.price{font-size:1rem}.description,.opts,.size-prices{font-size:.875rem}}@media(min-width:600px){.card h3{font-size:1.0625rem}.price{font-size:1.125rem}}

/* Compact horizontal header; options flow immediately underneath. */
.card-wide,.card-wide.no-image{grid-template-columns:80px minmax(0,1fr);align-items:start}.card-wide .media,.card-wide.no-image .media{display:block;width:80px;height:80px;min-height:0;aspect-ratio:1;margin:12px 12px 0 0;border:1px solid #eee9ed;border-radius:8px}.card-wide .details,.card-wide.no-image .details{padding:12px 12px 8px 16px;margin-right:12px;gap:4px}.card-wide>.choices{padding:4px 12px 12px}.card-wide .description{font-size:.875rem;line-height:1.6}.placeholder{font-size:.75rem!important;font-weight:400;color:#8b7c85;line-height:1.5;padding:6px}.card-wide .card-top{column-gap:8px}.card-wide .opts{gap:5px}.card-wide .opts li{font-size:.875rem;padding:2px 7px}@media(max-width:380px){.card-wide,.card-wide.no-image{grid-template-columns:72px minmax(0,1fr)}.card-wide .media,.card-wide.no-image .media{width:72px;height:72px;margin:10px 10px 0 0}.card-wide .details,.card-wide.no-image .details{margin-right:10px;padding:10px 10px 6px 12px}}@media(min-width:600px){.card-wide,.card-wide.no-image{grid-template-columns:96px minmax(0,1fr)}.card-wide .media,.card-wide.no-image .media{width:96px;height:96px}}

/* Show each complete photo inside the existing media frame. */
.media{background:#faf8f9}.media img,.card-wide .media img{object-fit:contain;object-position:center}

/* Landscape media frames, with complete photographs preserved. */
.media{aspect-ratio:16/10}.media img{object-fit:contain;object-position:center}.card-wide,.card-wide.no-image{grid-template-columns:108px minmax(0,1fr)}.card-wide .media,.card-wide.no-image .media{width:108px;height:68px;aspect-ratio:16/10}.card-wide .details,.card-wide.no-image .details{min-height:80px}@media(max-width:380px){.card-wide,.card-wide.no-image{grid-template-columns:92px minmax(0,1fr)}.card-wide .media,.card-wide.no-image .media{width:92px;height:58px}}@media(min-width:600px){.card-wide,.card-wide.no-image{grid-template-columns:128px minmax(0,1fr)}.card-wide .media,.card-wide.no-image .media{width:128px;height:80px}}

.card:not(.card-wide) .media{aspect-ratio:16/10}

/* Rotate the portrait photo itself into the landscape frame. */
.media img.portrait{inset:auto;left:50%;top:50%;width:62.5%;height:160%;max-width:none;transform:translate(-50%,-50%) rotate(90deg);object-fit:contain}.card-wide .media,.card-wide.no-image .media{height:67.5px}@media(max-width:380px){.card-wide .media,.card-wide.no-image .media{height:57.5px}}@media(min-width:600px){.card-wide .media,.card-wide.no-image .media{height:80px}}

/* Fill the photo frames with the original upright crop. */
.media img,.card-wide .media img{inset:0;width:100%;height:100%;transform:none;object-fit:cover;object-position:center}

/* All photo frames use the same responsive width and height. */
.card .media,.card-wide .media,.card-wide.no-image .media{width:var(--photo-width,100%);height:var(--photo-height,auto);min-height:0;aspect-ratio:16/10;margin:0;border:0;border-radius:0}.card-wide,.card-wide.no-image{grid-template-columns:var(--photo-width,50%) minmax(0,1fr)}.card-wide .details,.card-wide.no-image .details{margin:0;padding:12px}.media img,.card-wide .media img{object-fit:cover;object-position:center}

/* Complete restaurant name stays within the mobile cover. */
.cover>div{right:20px;left:20px;bottom:20px;max-width:calc(100% - 40px)}.cover strong{display:block;font-size:1.125rem;line-height:1.6;white-space:normal;overflow-wrap:break-word}.cover p{font-size:.875rem;line-height:1.6}

header{justify-content:center}header img{width:155px;max-width:65%}

#count,.section-count{display:none}

/* A compact, composed opening that leads straight into the menu. */
header{height:76px;padding:12px 20px;border-bottom:1px solid #f1edf0}header img{width:150px;max-width:65%}.cover{height:155px;margin:14px 16px 0;border-radius:16px;background:#302323}.cover>img{object-position:center 46%}.cover:after{background:linear-gradient(180deg,transparent 60%,#0003)}.cover>div:empty{display:none}.controls{padding:14px 0 0;border-bottom:0;background:white;backdrop-filter:none}.search{margin:0 16px 12px;padding-inline:14px;border-radius:10px;background:#faf9fa;border-color:#e4dfe3}.search input{padding-block:11px}.search span{font-size:1.35rem}nav{padding:0 16px 14px;gap:8px;border-bottom:1px solid #eee9ed}nav button{padding:6px 12px;border-radius:8px;font-size:.875rem}.intro{padding:18px 0 0}.intro h1{font-size:1.125rem;color:var(--red)}section{margin:16px 0 26px}.section-heading{margin-bottom:12px}.section-heading h2{font-size:1rem}.grid{gap:12px}.card{border-color:#e6e0e5}.card .description{color:#77707a}@media(max-width:380px){header{height:70px}.cover{margin-inline:12px;height:140px}.search{margin-inline:12px}nav{padding-inline:12px}.intro{padding-top:16px}}@media(min-width:600px){header{height:86px}.cover{margin-inline:24px;height:190px}.search{margin-inline:24px}nav{padding-inline:24px}.intro{padding-top:20px}}

/* Clear hierarchy for menu and section headings. */
.intro{padding:20px 0 12px;border-bottom:1px solid #e8e1e5}.intro h1{font-family:Arial,Tahoma,sans-serif;font-size:1.375rem;line-height:1.4;font-weight:700;color:#28252a;margin:0;letter-spacing:normal}.section-heading{padding:0 0 10px;border-bottom:1px solid #eee8ec;margin-bottom:14px;justify-content:flex-start}.section-heading h2{font-family:Arial,Tahoma,sans-serif;font-size:1.125rem;line-height:1.5;font-weight:700;color:#861c32;margin:0;letter-spacing:normal}section{margin:22px 0 28px}@media(min-width:600px){.intro h1{font-size:1.5rem}.section-heading h2{font-size:1.25rem}}

.filtered .section-heading{display:none}.filtered section{margin-top:16px}

/* Category buttons identify the selected view without repeated headings. */
.intro{display:none}.filtered .section-heading{display:none}.filtered section{margin-top:16px}

@font-face{font-family:Lalezar;src:url('fonts/lalezar.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
.section-heading h2,.intro h1,.card h3,nav button,.placeholder{font-family:Lalezar,Tahoma,sans-serif;font-weight:400;font-synthesis:none;letter-spacing:normal}.section-heading h2{font-size:1.375rem;line-height:1.45}.card h3{font-size:1.1875rem;line-height:1.45}nav button,nav button[aria-pressed=true]{font-family:Lalezar,Tahoma,sans-serif;font-size:1.0625rem;font-weight:400;line-height:1.5}.placeholder{font-size:1rem!important;line-height:1.5}.intro h1{font-size:1.5rem}@media(max-width:380px){.card h3{font-size:1.125rem}}@media(min-width:600px){.card h3{font-size:1.3125rem}}

/* Smaller dish names, closer to the photograph. */
.card h3{font-size:1rem;line-height:1.4;margin:0}.card .details{padding-top:7px}.card-wide .details,.card-wide.no-image .details{padding-top:7px}@media(max-width:380px){.card h3{font-size:.9375rem}}@media(min-width:600px){.card h3{font-size:1.0625rem}}

@font-face{font-family:'Reem Kufi';src:url('fonts/reem-kufi.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}.card h3{font-family:'Reem Kufi',Tahoma,sans-serif;font-weight:400;font-size:1rem;line-height:1.55;font-synthesis:none}@media(max-width:380px){.card h3{font-size:.9375rem}}@media(min-width:600px){.card h3{font-size:1.0625rem}}

/* Simple dish labels; the display face is reserved for section headings. */
.card h3{font-family:Tahoma,Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.6}.placeholder{font-family:Tahoma,Arial,sans-serif;font-weight:400}nav button,nav button[aria-pressed=true]{font-family:Tahoma,Arial,sans-serif;font-size:.875rem;font-weight:400;line-height:1.6}nav button[aria-pressed=true]{font-weight:700}@media(max-width:380px){.card h3{font-size:.9375rem}}@media(min-width:600px){.card h3{font-size:1rem}}

.card h3{font-family:Tahoma,Arial,sans-serif;font-size:1.125rem;font-weight:700;line-height:1.6}@media(max-width:380px){.card h3{font-size:1.0625rem}}@media(min-width:600px){.card h3{font-size:1.1875rem}}

@font-face{font-family:Tajawal;src:url('fonts/tajawal-bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}.card h3{font-family:Tajawal,Tahoma,sans-serif;font-weight:700;font-size:1.125rem;line-height:1.6}@media(max-width:380px){.card h3{font-size:1.0625rem}}@media(min-width:600px){.card h3{font-size:1.1875rem}}

.cover>img{object-position:center center}.cover:after{background:none}

.cover:after{background:linear-gradient(180deg,transparent 40%,rgba(18,8,5,.72))}.cover .hero-caption{right:16px;left:16px;bottom:14px;max-width:none;text-align:center}.cover .hero-caption strong{font-family:Tajawal,Tahoma,sans-serif;font-weight:700;color:#fff6e5;font-size:1.375rem;line-height:1.6;text-shadow:0 2px 6px #0008}@media(min-width:600px){.cover .hero-caption strong{font-size:1.75rem}}
/* Refined spacing and controls, keeping the established image and card sizes. */
.controls{padding-bottom:16px}.search{background:#faf8f9;border-color:#e4dce0}.search:focus-within{border-color:#861c32;box-shadow:0 0 0 3px #861c3210}.search input{font-size:16px}#categories{scrollbar-width:thin;scrollbar-color:#d9c7cf transparent;gap:9px}#categories button{border-radius:12px;background:#faf8f9;border-color:#e5dce1;padding:10px 16px;min-height:44px}#categories button[aria-pressed=true]{background:#861c32;border-color:#861c32;color:white}.section-heading{margin-top:22px;margin-bottom:14px}.section-heading h2{line-height:1.7}.card{border-color:#e9e1e5;border-radius:16px}.card .details{padding-top:10px}.card .description{font-size:15px;line-height:1.8;color:#81727a;margin-top:7px}.opts li{border-color:#e5dce1;background:#faf8f9;font-size:14px;line-height:1.65}.cover{border-radius:18px;overflow:hidden}footer{color:#6f5260;padding-top:28px;padding-bottom:28px}button:focus-visible,input:focus-visible{outline:2px solid #b55970;outline-offset:3px}@media(max-width:380px){#categories button{padding:9px 13px}.card .description{font-size:14px}}


/* One consistent card layout with readable names and a compact price row. */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch}
.card{display:flex;flex-direction:column;grid-column:auto;height:auto;padding:0;gap:0;border:1px solid #eadfe4;border-radius:14px;background:white;overflow:hidden;box-shadow:none}
.card .media{width:100%;height:auto;aspect-ratio:16/10;margin:0;flex:none;border:0;border-radius:0}
.card .details{display:grid;grid-template-rows:44px 36px 34px;height:140px;min-height:0;padding:9px 10px;gap:4px;margin:0}
.card .card-top{display:block;order:0;min-width:0}
.card h3{font-family:Tajawal,Tahoma,sans-serif;font-size:17px;line-height:22px;font-weight:700;color:#38232b;margin:0;width:100%;white-space:normal;word-break:normal;overflow-wrap:normal}
.card .description{order:1;font-size:12px;line-height:18px;color:#84717b;margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.card .price,.card .size-prices{order:2;width:100%;border-top:1px solid #eee5e9;margin:0;padding-top:6px;align-self:stretch}
.card .price{display:flex;justify-content:flex-end;align-items:baseline;gap:4px;font-size:17px;line-height:22px;color:#861c32}
.card .price span{font-size:12px}
.card .size-prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;text-align:left;font-size:13px;line-height:20px}
.size-price{display:flex;align-items:baseline;justify-content:flex-end;gap:4px;white-space:nowrap;min-width:0}
.size-price small{font-size:11px;font-weight:400;color:#84717b}.size-price b{font-size:13px;font-weight:700;color:#861c32}
.card .choices{display:none}
@media(min-width:600px){.card h3{font-size:18px}.card .description{font-size:13px}.size-price small{font-size:12px}.size-price b{font-size:15px}}

/* Natural text flow keeps the name, description and price close together. */
.card .details{display:flex;flex-direction:column;height:auto;min-height:0;padding:10px;gap:0}.card .card-top{flex:none}.card .description{margin-top:4px;flex:none}.card .price,.card .size-prices{margin-top:7px;padding-top:7px;flex:none}.grid{align-items:stretch}.card{height:100%}