/*  Aseer Time - the public menu.

    No framework. A menu is a list of names and numbers with pictures next to
    some of them; that is a few kilobytes of CSS, not a few hundred, and there
    is nothing here to keep updated.

    Two things are worth knowing before reading further:

    1. Both languages are always in the markup; `body.lang-en` and
       `body.lang-ar` hide one of them. Nothing is re-rendered to switch
       language, and the search box can match an Arabic name while the page
       is being read in English.

    2. `body.lang-ar` also flips the document direction, so everything below
       uses logical properties - margin-inline-start rather than margin-left -
       and the layout mirrors itself for nothing.
*/

:root {
    /*  The company's own colours, read off aseertime.com rather than guessed:
        the red is #d12027, the cream behind their pages is #f4f1ea, their
        text is #212121 on #464646. Their headings are Barlow Condensed and
        their Arabic is Tajawal.  */

    --red: #d12027;
    --red-dark: #a5171d;
    --maroon: #8f1226;
    --ink: #212121;
    --muted: #464646;
    --bg: #f4f1ea;
    --card: #fff;
    --line: #ddd8cd;
    --shadow: 0 6px 22px rgba(33, 33, 33, .09);
    --radius: 14px;
    --max: 1180px;

    --head: "Barlow Condensed", "Arial Narrow", "Segoe UI", sans-serif;
    --body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --arabic: Tajawal, "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    /* The header and the category bar are both sticky, so an anchor has to
       clear them or it lands underneath. */
    scroll-padding-top: 150px;
}

/*  The page is a column with the footer at the end of it, and the middle
    grows to fill whatever is left. On a short page - the landing page is
    three cards now - the footer sits at the bottom of the window instead of
    floating halfway up it with cream underneath. On a long one it does what
    it always did and waits below the content. */
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 16px/1.55 "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans Arabic", sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

img { max-width: 100%; display: block; }
h2, h3 { margin: 0; }

/* The brand sets its headings in Barlow Condensed - tall, narrow and upper
   case. Only the headings; body text stays in the system face, which reads
   better at 13px on a phone in a car park. */
.cathead h2, .sec h3, .logo, .langs button, .navin a, #branches h3 { font-family: var(--head); }
a { color: inherit; }

/* ---------------------------------------------------------------- language */

/*  One language at a time. Both are in the markup on every page - that is
    what lets the search box match an Arabic name while the page is being read
    in English - and one of them is hidden here.  */

body.lang-en .ar,
body.lang-ar .en { display: none !important; }

body.lang-ar { direction: rtl; }
body.lang-ar .nms,
body.lang-ar .desc { text-align: right; }

.nm { display: block; }
.ar { font-family: var(--arabic); }

/* ------------------------------------------------------------------ header */

header.top {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--red);
    color: #fff;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .18);
}

.bar {
    max-width: var(--max);
    margin: 0 auto;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.logo {
    display: flex;
    align-items: center;
    gap: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    font-size: 19px;
    text-decoration: none;
}

/* The company's own mark - aseertime_white_logo.svg - drawn in white, on
   the red header it belongs on. Every page uses this one file. */
.logo img { height: 42px; width: auto; display: block; }

.logo small {
    display: block;
    font-weight: 500;
    font-size: 12px;
    opacity: .9;
    letter-spacing: 0;
}

.grow { flex: 1; }

.search { position: relative; }

.search input {
    width: 230px;
    max-width: 46vw;
    padding: 9px 14px 9px 36px;
    border-radius: 999px;
    border: 0;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font: inherit;
    font-size: 14px;
    outline: none;
}

.search input::placeholder { color: rgba(255, 255, 255, .75); }
.search input:focus { background: rgba(255, 255, 255, .26); }

.search svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    opacity: .8;
}

body.lang-ar .search input { padding: 9px 36px 9px 14px; }
body.lang-ar .search svg { left: auto; right: 12px; }

.langs {
    display: flex;
    background: rgba(255, 255, 255, .16);
    border-radius: 999px;
    padding: 3px;
}

.langs button {
    border: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 13px;
    border-radius: 999px;
    cursor: pointer;
    opacity: .85;
}

.langs button.on { background: #fff; color: var(--red); opacity: 1; }

/* ------------------------------------------------------------- top nav

   The pages, in the header. There was a row of category chips under it once;
   the categories are on the menu page itself, which is where somebody looking
   for a drink already is.
*/

/*  Five pages ride in the header now, so the nav is allowed to wrap - a
    second tidy row beats one row pushing out of the screen.  */
.topnav { display: flex; flex-wrap: wrap; gap: 6px 22px; font-family: var(--head); font-size: 16px; letter-spacing: .5px; text-transform: uppercase; }
.topnav a { text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; opacity: .92; }
.topnav a:hover { border-bottom-color: #fff; opacity: 1; }

/* ---------------------------------------------------------------- the menu */

main {
    /*  The middle of the column: it takes the slack, which is what pushes
        the footer down to the bottom of a short page. `width` rather than
        `max-width` alone, because a flex child will not centre itself on
        `margin: auto` without one. */
    flex: 1 0 auto;
    width: 100%;
    max-width: var(--max);
    box-sizing: border-box;
    margin: 0 auto;
    padding: 26px 18px 70px;
}

.crumb { margin: 0 0 14px; font-size: 14px; }
.crumb a { text-decoration: none; color: var(--red-dark); font-weight: 600; }

.cat { margin: 0 0 42px; }

.cathead {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--red);
}

.cathead .ic { font-size: 27px; }

.cathead h2 {
    font-size: 25px;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.cathead h2 .ar { font-size: 22px; text-transform: none; }



.sec { margin: 0 0 30px; }

.sec h3 {
    font-size: 15px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--red-dark);
    margin-bottom: 12px;
    display: flex;
    gap: 10px;
    align-items: baseline;
    flex-wrap: wrap;
}

.sec h3 .ar {
    color: var(--muted);
    letter-spacing: 0;
    text-transform: none;
    font-size: 14px;
}

.note { margin: -6px 0 12px; font-size: 13px; color: var(--muted); }

/* ----------------------------------------------------------------- cards */

.grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
}

/*  The menu card: one photograph, and the words standing on it.

    The picture is the whole card rather than a square with a white slab of
    text under it - which is how a menu is read now, and it lets a phone
    show two real photographs where it used to show two thumbnails and a
    lot of paper. The name and the prices sit on a scrim dark enough to
    carry white type over the brightest red in the photography.  */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    /*  The photograph is a square at the top, shown whole and untouched;
        below it a dark foot carries the name and the prices, and grows to
        fit them. The two meet in a short fade at the foot of the picture -
        the shadow under the cup - so the card still reads as one dark
        object with a drink standing in it, but nothing is ever written
        across the fruit. Overlaying the words on the photo looked right
        and read wrong: the type sat on the one part of the shot with
        something in it.  */
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(120, 60, 50, .08);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.card:hover { border-color: #e6c3c4; }

.card:hover { transform: translateY(-4px); box-shadow: 0 20px 38px rgba(120, 60, 50, .22); }

/*  The scrim. Transparent at the top so the drink is untouched, and nearly
    solid where the type sits - one gradient rather than a box, so there is
    no line across the picture.  */
/*  The frame is the shape of the photography - 4:3, a shot on a light
    backdrop - so the picture fills it edge to edge with nothing left over
    to fill, and its white backdrop runs straight into the white card.  */
.ph { position: relative; aspect-ratio: 4 / 3; background: #fff; overflow: hidden; }

/*  Nothing is laid over the photograph - not a fade, not a scrim. It ends
    on a clean line and the words sit below it on white. Every version that
    touched the picture covered the one part of it with something in it.  */

/*  contain, not cover: the product photos are not square and carry the
    brand's red diagonal in the artwork itself. cover was cropping the top
    of the cup and slicing the red corner unevenly from card to card;
    contain shows each photo whole - and the frame is filled behind it by
    a soft blur of the same photo, so a landscape shot on a grey backdrop
    fills the square with its own grey rather than sitting in white
    gutters. Nothing is cropped; nothing is empty.  */
.ph img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    transition: transform .4s ease;
}

.card:hover .ph img { transform: scale(1.06); }

/*  No blurred fill behind the picture. On product shots with a white or
    grey backdrop it only ever showed as a smear along one edge.  */

/*  The drawn stand-in, on an item with no photograph yet. A warm wash
    rather than flat cream, so the scrim over its foot looks deliberate
    instead of like a grey smudge.  */
.ph-stand { background: var(--bg); border-bottom: 1px solid var(--line); }
.ph-stand img { padding: 18%; }

.card .body {
    position: relative;
    z-index: 1;
    flex: 1;
    padding: 8px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--ink);
    background: #fff;
}

/* The prices hold the foot of the card whatever the words above them do. */
.card .prices { margin-top: auto; padding-top: 2px; }

.nms { position: relative; }

/*  The name in the brand's own condensed face, the size a name deserves
    when it is the only text on a photograph.  */
.nms .en {
    font-family: var(--head);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: .45px;
    text-transform: uppercase;
    line-height: 1.06;
}

.nms .ar { font-size: 16.5px; font-weight: 700; line-height: 1.3; color: var(--red-dark); }

/*  Two lines of description at most. The rest is in the item popup, which
    is one press away - a card that grows to fit its longest sentence makes
    a ragged grid of everything around it.  */
.desc {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.desc .ar { display: block; }

.prices {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    margin-top: auto;
}

/*  The prices as one small ticket: each size is a column - the letter in
    red caps over the number in the heading face - and a hairline divides
    the columns. Quieter than a row of solid red pills, and the numbers,
    which are what a menu is read for, get the size and the ink. */
.prices {
    border: 1.5px solid #f0cfd0;
    border-radius: 12px;
    /*  The hairlines between columns are this background showing through
        a 1px gap - so a card with five sizes that wraps onto a second row
        gets its lines drawn in both directions, with nothing to hand-tune. */
    background: var(--line);
    width: fit-content;
    overflow: hidden;
    box-shadow: 0 1px 5px rgba(209, 32, 39, .08);
    transition: border-color .15s ease;
}

.card:hover .prices { border-color: var(--red); }

.price {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 14px 7px;
    flex: 1 1 auto;
    background: #fff;
    color: var(--ink);
}

/*  "30 pcs" is a label as much as "L" is. It sits on one line whatever its
    length - the old fixed disc was where a two-word size spilled out. */
.price i {
    font-style: normal;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .9px;
    text-transform: uppercase;
    color: var(--red);
    white-space: nowrap;
}

.price b {
    font-family: var(--head);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .5px;
}

/* One price, no printed size: the number alone, evenly padded. */
.price.lone { padding: 9px 16px; }

/*  On a menu card the prices are a list, the way a printed menu sets
    them: one line per size, the size on the left in small caps, the price
    on the right in the heading face, a dotted leader between. Five sizes
    read as five lines, not five look-alike chips - and a single price is
    simply one bold number.

    Scoped to the card so the ticket stays itself in the branch directory's
    list rows.  */
.card .prices {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    width: 100%;
}

.card:hover .prices { border-color: transparent; }

.card .price {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    padding: 2px 0;
    background: none;
    border: 0;
    color: var(--ink);
}

.card .price i {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--muted);
}

/*  A long size - "Bottle 1000 ml" - may wrap onto a second line; it may
    never push the number off the card, which is what happened on a phone
    when the label refused to break. The number itself never wraps and
    never shrinks: it is what the card is read for.  */
.card .price i { min-width: 0; white-space: normal; }
.card .price b { flex: 0 0 auto; white-space: nowrap; }

/* The leader: dots from the label to the price. */
.card .price i::after {
    content: '';
    flex: 1;
    border-bottom: 2px dotted #d9d4c8;
    margin-bottom: 4px;
    min-width: 12px;
}

.card .price b {
    font-family: var(--head);
    font-size: 17px;
    line-height: 1;
    letter-spacing: .3px;
    color: var(--red-dark);
}

.card .price.lone { padding: 2px 0; }
.card .price.lone b { font-size: 19px; }

/* ------------------------------------------------------------- price lists */

.list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
}

.row:last-child { border-bottom: 0; }
.row:nth-child(odd) { background: #fffdfc; }
.rowmain { flex: 1; min-width: 0; }
.row .prices { margin: 0; }

/* ------------------------------------------------------------------ chips */

.chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.chip {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 15px;
    font-size: 13.5px;
    box-shadow: 0 2px 8px rgba(120, 60, 50, .06);
}

.chip .en { font-weight: 600; }
.chip .ar { color: var(--red); font-size: 13px; }

.badge {
    display: inline-block;
    margin-inline-start: 7px;
    background: #111;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    padding: 2px 7px;
    border-radius: 5px;
    vertical-align: middle;
}


/* --------------------------------------------------------------- branches */

#branches .region { margin-bottom: 26px; }

#branches h3 {
    font-size: 16px;
    color: var(--red);
    margin-bottom: 10px;
    display: flex;
    gap: 10px;
    align-items: baseline;
}

/* The directory uses the same card as the map page - see "the branch cards"
   further down. Only the grid around it belongs here. */
.branches {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
}

.tels { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }

.tel {
    font-size: 12.5px;
    text-decoration: none;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px 10px;
    font-variant-numeric: tabular-nums;
    /* A phone number reads left to right even when the page does not. */
    direction: ltr;
}

.tel.wa { background: #e8f8ee; border-color: #bfe8cf; color: #137a3c; }
.tel:hover { border-color: var(--red); color: var(--red); }

/* --------------------------------------------------------------- contact */

.contact {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
}

.fields {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.contact label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
}

.contact label.wide { margin-top: 14px; }


.contact input,
.contact textarea {
    display: block;
    width: 100%;
    margin-top: 5px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    color: var(--ink);
    background: #fffdfc;
}

.contact input:focus,
.contact textarea:focus { outline: 2px solid var(--red); outline-offset: 1px; }

/*  The honeypot. Off-screen rather than display:none - some robots skip what
    is hidden, and this one is meant to be filled in.

    Clipped rather than pushed to left: -9999px. In a right-to-left page that
    negative offset is not "off-screen" at all: it becomes ten thousand pixels
    of scrollable overflow, and the whole page opens scrolled away from its
    own content. Clipping has no direction to get wrong.  */

.hp {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.actions { display: flex; align-items: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }

.send {
    background: var(--red);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 10px 26px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.send:hover { background: var(--red-dark); }
.send[disabled] { opacity: .6; cursor: default; }

.says { margin: 0; font-size: 13px; color: var(--muted); }
.says.bad { color: var(--red-dark); }
.says.good { color: #137a3c; }

/* ----------------------------------------------------------------- footer */

footer { background: var(--ink); color: #f4ece9; margin-top: 20px; }

.footin {
    max-width: var(--max);
    margin: 0 auto;
    padding: 30px 18px 22px;
    font-size: 13.5px;
}

/*  One level row - mark, links, icons - everything centred on the same
    line, and the small print below a rule of its own. */
.foot-top {
    display: flex;
    align-items: center;
    gap: 16px 30px;
    flex-wrap: wrap;
}

.foot-mark { height: 42px; width: auto; display: block; }

.foot-nav {
    display: flex;
    align-items: center;
    gap: 8px 24px;
    flex-wrap: wrap;
    margin-inline: auto;
}

/*  The links in the footer's own off-white, not a lightened red - that
    read as pink on the dark ground. The red waits for the hover.  */
.foot-nav a {
    color: #f4ece9;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s ease;
}

.foot-nav a:hover { color: #ff9d97; text-decoration: underline; }

.foot-base {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255, 255, 255, .14);
    margin-top: 22px;
    padding-top: 16px;
    font-size: 12.5px;
}

.vat { margin: 0; opacity: .75; }
.cright { margin: 0; opacity: .55; }

/*  On a phone the row cannot be a row - stack it, everything centred, the
    rule and the small print centred under it. */
@media (max-width: 640px) {
    .foot-top { flex-direction: column; text-align: center; }
    .foot-nav { justify-content: center; margin-inline: 0; }
    .foot-base { flex-direction: column; text-align: center; gap: 6px; }
}

.noresults { display: none; text-align: center; padding: 50px 10px; color: var(--muted); }

.empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty h2 { color: var(--ink); margin-bottom: 10px; }
.empty code { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }

.to-top {
    position: fixed;
    inset-inline-end: 20px;
    bottom: 20px;
    z-index: 30;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    font-size: 18px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
    cursor: pointer;
}

.to-top.on { opacity: 1; pointer-events: auto; }

/* With the Order online button in the corner, the back-to-top steps up. */
.order-wrap ~ .to-top { bottom: 86px; }

/* ============================================================================
   Order online - the floating button and the panel of delivery apps.
============================================================================ */

.order-fab {
    position: fixed;
    inset-inline-end: 20px;
    bottom: 20px;
    z-index: 31;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 50px;
    padding: 0 20px 0 14px;
    border: 0;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-family: var(--head);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    box-shadow: 0 10px 26px rgba(209, 32, 39, .42);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.order-fab .ar { font-family: var(--arabic, inherit); text-transform: none; font-size: 16px; }
.order-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(209, 32, 39, .5); }
.order-fab.open { background: var(--red-dark); }

/* A scooter, in a white circle. */
.order-fab-ic {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background: #fff url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d12027' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='5.5' cy='17.5' r='2.5'/><circle cx='18.5' cy='17.5' r='2.5'/><path d='M8 17.5h8l1.5-5.5h2.5M14 6h3l2 6M3 12h7l2-4H5'/></svg>") center / 18px no-repeat;
    animation: order-nudge 4s ease-in-out infinite;
}

@keyframes order-nudge {
    0%, 85%, 100% { transform: none; }
    90% { transform: translateX(3px); }
    95% { transform: translateX(-2px); }
}

@media (prefers-reduced-motion: reduce) { .order-fab-ic { animation: none; } }

.order-back {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(20, 8, 6, .55);
    backdrop-filter: blur(3px);
    display: grid;
    place-items: end end;
    padding: 0 20px 82px;
}

.order-back[hidden] { display: none; }

.order-panel {
    position: relative;
    width: min(380px, 100%);
    background: #fff;
    border-radius: 22px;
    padding: 22px 22px 18px;
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .5);
    animation: order-pop .22s cubic-bezier(.3, 1.3, .5, 1);
}

@keyframes order-pop {
    from { transform: translateY(14px) scale(.96); opacity: 0; }
    to { transform: none; opacity: 1; }
}

.order-close {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: var(--bg);
    color: var(--ink);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.order-close:hover { background: var(--red); color: #fff; }

.order-kicker {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .9px;
    text-transform: uppercase;
    color: var(--red-dark);
}

.order-panel h3 {
    margin: 0 0 4px;
    font-family: var(--head);
    font-size: 26px;
    text-transform: uppercase;
    letter-spacing: .4px;
    line-height: 1;
}

.order-panel h3 .ar { text-transform: none; font-size: 24px; }
.order-sub { margin: 0 0 14px; font-size: 13px; color: var(--muted); }

/*  Scrolls down only when there are more apps than fit; never sideways.
    A tile slides 3px on hover, and a list that may scroll one way is
    allowed to scroll the other too - which drew a scrollbar under one
    tile. Room for the slide is kept in the padding instead. */
.order-list {
    list-style: none;
    margin: 0 -4px;
    padding: 2px 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: min(52vh, 440px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}

.order-app {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 9px 12px 9px 9px;
    border: 1.5px solid var(--line);
    border-radius: 16px;
    text-decoration: none;
    color: var(--ink);
    background: #fffdfc;
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.order-app:hover, .order-app:focus-visible {
    transform: translateX(3px);
    border-color: var(--red);
    box-shadow: 0 6px 18px rgba(120, 60, 50, .12);
    outline: none;
}

body.lang-ar .order-app:hover { transform: translateX(-3px); }

.order-tile {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #fff;
    font-family: var(--head);
    font-size: 24px;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}

.order-tile.light { color: #26231e; }
.order-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

.order-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.order-name b { font-size: 15px; font-weight: 700; }
.order-name small { font-size: 12px; color: var(--muted); }
.order-go { font-size: 24px; color: var(--red); line-height: 1; }
body.lang-ar .order-go { transform: scaleX(-1); }

/* On a phone: a shorter button, and the panel becomes a bottom sheet. */
@media (max-width: 640px) {
    .order-fab { height: 46px; padding: 0 16px 0 11px; font-size: 15px; inset-inline-end: 14px; bottom: 14px; }
    .order-wrap ~ .to-top { bottom: 74px; inset-inline-end: 14px; }
    .order-back { place-items: end center; padding: 0; }

    .order-panel {
        width: 100%;
        border-radius: 22px 22px 0 0;
        padding-bottom: max(18px, env(safe-area-inset-bottom));
        animation: sheet-up .25s ease-out;
    }
}

/* ------------------------------------------------------------------ phone */

@media (max-width: 640px) {
    .bar { padding: 10px 12px; gap: 10px; }
    .topnav { width: 100%; order: 3; gap: 4px 14px; font-size: 14px; justify-content: flex-start; }
    .topnav a { white-space: nowrap; }
    .logo { font-size: 16px; }
    .logo small { display: none; }
    main { padding: 18px 12px 60px; }
    .cathead h2 { font-size: 20px; }
    /*  Two real photographs across a phone rather than three thumbnails -
        the card is a picture now, and a picture wants the width.  */
    .grid { grid-template-columns: repeat(auto-fill, minmax(min(160px, 47%), 1fr)); gap: 12px; }
    .card .body { padding: 0 11px 12px; gap: 6px; }
    .nms .en { font-size: 16.5px; }
    .nms .ar { font-size: 15px; }
    /*  The list runs the full width of the foot: no side padding, a
        quieter label, and the number stays 16px - readable at arm's length. */
    .card .price { padding: 2px 0 3px; gap: 5px; }
    .card .price i { font-size: 10.5px; letter-spacing: .3px; gap: 5px; }
    .card .price i::after { min-width: 6px; }
    .card .price b { font-size: 16px; }
    .card .price.lone b { font-size: 18px; }
    .search input { width: 150px; }
}

/* ------------------------------------------------------------------ print */

@media print {
    header.top, .to-top, footer, #contact { display: none; }
    body { background: #fff; }
    .card, .list, .branches li { box-shadow: none; break-inside: avoid; }
}

/* ---------------------------------------------------------------- sign in

   The panel's own front door. It borrows the site's colours rather than the
   panel's, because it is the last public page before the private ones and it
   is reached from the website. `ViewData["Bare"]` drops the menu chrome
   around it - there is nothing to search on this page.
*/

.auth-wrap {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    min-height: 100vh;
    align-items: stretch;
}

.auth-side {
    background: var(--red);
    color: #fff;
    padding: 46px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
}

.auth-logo { text-decoration: none; color: #fff; }
.auth-logo img { height: 52px; width: auto; display: block; }

.auth-side h2 { font-size: 30px; line-height: 1.25; margin: 10px 0 0; font-weight: 700; }
.auth-side h2 span { opacity: .85; }
.auth-side p { margin: 0; opacity: .92; max-width: 44ch; }
.auth-side ul { margin: 6px 0 0; padding-inline-start: 20px; opacity: .9; font-size: 14px; }
.auth-side li { margin-bottom: 5px; }

.auth-form {
    display: grid;
    place-items: center;
    padding: 40px 24px;
    background: var(--bg);
}

.auth-card {
    width: 100%;
    max-width: 380px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px;
}

.auth-card h1 { margin: 0 0 4px; font-size: 24px; }
.auth-card > p { margin: 0 0 18px; color: var(--muted); font-size: 14px; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }

.field input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    background: #fffdfc;
}

.field input:focus { outline: 2px solid var(--red); outline-offset: 1px; }

.auth-card .btn,
.auth-card button[type="submit"] {
    width: 100%;
    background: var(--red);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 11px 20px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.auth-card button[type="submit"]:hover { background: var(--red-dark); }

.remember { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 4px 0 16px; }
.remember input { width: auto; }
.remember .hint { color: var(--muted); font-size: 12px; }

.alert { border-radius: 10px; padding: 10px 12px; font-size: 13.5px; margin-bottom: 14px; }
.alert-success { background: #e8f8ee; border: 1px solid #bfe8cf; color: #137a3c; }
.alert-danger { background: #fdecea; border: 1px solid #f6c9c4; color: var(--red-dark); }

.text-danger { color: var(--red-dark); font-size: 12.5px; display: block; margin-top: 4px; }
.auth-foot { margin-top: 16px; font-size: 12.5px; color: var(--muted); }
.auth-foot a { color: var(--red-dark); }

@media (max-width: 860px) {
    .auth-wrap { grid-template-columns: 1fr; }
    .auth-side { padding: 30px 22px; }
    .auth-side h2 { font-size: 23px; }
    .auth-side ul { display: none; }
}

/* The sign-in form's own checkbox row and the muted note under it. */
.check { display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: start; margin: 4px 0 18px; }
.check input { margin-top: 3px; }
.check label { font-size: 13.5px; }
.check small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.text-muted { color: var(--muted); }
.text-muted a, a.text-muted { color: var(--red-dark); text-decoration: none; }
.credit { margin-top: 18px; font-size: 12px; color: var(--muted); }

/* The credit line's WhatsApp mark. Without a size an inline SVG takes the
   width it is given, which on a narrow card is all of it. */
.credit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.credit a { display: inline-flex; align-items: center; gap: 5px; color: #137a3c; text-decoration: none; }
.credit a.credit-brand { color: inherit; }
.credit a.credit-brand:hover { text-decoration: underline; }
.credit svg { width: 15px; height: 15px; flex: 0 0 15px; fill: currentColor; }

/* Both languages on one button need something between them. */

/* ------------------------------------------------------- the menu as a PDF

   Two things, and they are not the same thing. The viewer is for reading it
   now; the download is for having it later. So the download is a button of
   its own rather than something buried in the browser's PDF toolbar, which
   looks different in every browser and is hidden in most.
*/

.pdfbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 18px;
}

/* The size, said on the button itself. */
.pdfbar .btn small {
    display: inline-block;
    margin-inline-start: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    opacity: .8;
}

.pdfwhen { font-size: 12.5px; color: var(--muted); margin-inline-start: 4px; }

.pdftitle {
    font-family: var(--head);
    font-size: 26px;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 0 auto 0 0;
}

body.lang-ar .pdftitle { margin: 0 0 0 auto; }

.pdfview {
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    background: var(--card);
    box-shadow: 0 18px 40px -26px rgba(17, 17, 17, .45);
}

/* Tall on purpose: a menu page is portrait, and a short frame makes every
   reader scroll inside a scrolling page, which is the worst of both. */
.pdfview object { display: block; width: 100%; height: 82vh; min-height: 520px; border: 0; }

/*  Full screen inside the application. The frame breaks out of main's
    reading column to the viewport's own edges, and its height is whatever
    the window has left under the header and the button bar - so the page
    IS the viewer, with the site's header still standing above it. The
    negative bottom margin swallows main's usual footer gap.  */
.pdfview-full {
    width: 100vw;
    margin-inline-start: calc(50% - 50vw);
    margin-bottom: -70px;
    border-radius: 0;
    border-inline: 0;
}

.pdfview-full object { height: max(480px, calc(100dvh - 185px)); }

/*  What the browser shows when it will not draw a PDF in a page - most
    phones. It is the menu, not an apology, so it gets the same care: the
    scans, stacked, at reading width. */
.pdffall { padding: 22px 16px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.pdffall p { max-width: 60ch; text-align: center; color: var(--muted); font-size: 13.5px; margin: 0; }

.pdffall img {
    width: min(1000px, 100%);
    height: auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(120, 60, 50, .18);
}

.pdffall-lone { padding: 26px 0 0; }

@media (max-width: 860px) {
    .pdfview object { height: 70vh; }
    .pdfview-full object { height: max(420px, calc(100dvh - 240px)); }
    .pdfbar .btn { flex: 1 1 auto; text-align: center; }
    .pdftitle { flex: 1 1 100%; }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/*  Printing the PDF page. The viewer itself cannot be printed from the page
    around it - a browser prints its own PDF reader, not the document inside
    an <object> - so printing here gives the scans, one to a sheet, and the
    buttons and the frame go. Somebody who wants a printed menu is better
    served by the download and their reader's own print, which is what the
    Open in a new tab button is for. */
@media print {
    .pdfbar, .pagehead p, .crumbs, .cathead { display: none; }
    .pdfview { border: 0; border-radius: 0; box-shadow: none; }
    .pdfview object { display: none; }
    .pdffall { padding: 0; gap: 0; }
    .pdffall p { display: none; }
    .pdffall img { width: 100% !important; border-radius: 0; box-shadow: none; break-after: page; }
    @page { size: letter landscape; margin: 0; }
}

/* ------------------------------------------------------- the three doors

   Location, Menu, Branch. Ordinary anchors, so they work with no JavaScript
   and can be opened in a new tab; the cards are only what they look like.
*/

.anchor { display: block; height: 0; scroll-margin-top: 150px; }

.jump {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin: 26px 0 30px;
}

.jump-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    /* Nothing sits under them now, so they can afford the extra height. */
    padding: 20px;
    box-shadow: var(--shadow);
    text-decoration: none;
    transition: transform .16s, box-shadow .16s, border-color .16s;
}

.jump-card:hover {
    transform: translateY(-2px);
    border-color: var(--red);
    box-shadow: 0 14px 30px rgba(33, 33, 33, .14);
}

.jump-ic {
    flex: 0 0 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--bg);
    font-size: 22px;
}

.jump-text { flex: 1; min-width: 0; }
.jump-text b { display: block; font-family: var(--head); font-size: 19px; letter-spacing: .4px; }
.jump-text .ar { color: var(--red); font-size: 16px; }
.jump-text small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.jump-go { color: var(--red); font-size: 19px; }
body.lang-ar .jump-go { transform: scaleX(-1); }

/* ------------------------------------------------------- the area chooser */

/*  The emirate chooser. It used to have the map under it holding it apart
    from the branches; the map is below them now, so the gap has to be its
    own - otherwise the chooser and the first row of cards read as one block
    and it is not clear which of the two is doing the narrowing. */
/*  The region chooser: a row of pills, the count worn as a small badge,
    the chosen one in the brand red. It scrolls sideways on a phone rather
    than wrapping into a block of buttons.  */
.areas {
    display: flex;
    gap: 8px;
    margin: 0 0 18px;
    overflow-x: auto;
    padding: 2px 2px 8px;
    scrollbar-width: none;
}

.areas::-webkit-scrollbar { display: none; }

.area {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    font: inherit;
    background: var(--card);
    border: 1.5px solid var(--line);
    border-radius: 999px;
    padding: 8px 8px 8px 15px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}

.area:hover { border-color: var(--red); transform: translateY(-1px); }
.area.on { background: var(--red); border-color: var(--red); color: #fff; }
.area b { font-family: var(--head); font-size: 17px; letter-spacing: .4px; text-transform: uppercase; white-space: nowrap; }
.area .ar { font-size: 15px; text-transform: none; }

/* The count, as a small disc. */
.area small {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--bg);
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.area.on small { background: rgba(255, 255, 255, .22); color: #fff; }


/* ------------------------------------------------------- the landing page

   The landing page is the three doors and nothing above them, so there is
   no hero to style here any more. */

.kicker { font-family: var(--head); font-size: 17px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--red); margin: 0 0 6px; }

/* ------------------------------------------------------- the landing page

   The three doors, with the company's own photography around them. Every
   picture here is cut out on transparency - the cups, the shopfront, the two
   moments - so none of them needs a frame or a crop: they stand on the cream
   and on the red the way they stand on aseertime.com.

   Nothing above the doors is taller than a screen, so the doors are still
   the first thing anybody scrolls to.
*/

.hero {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 30px;
    align-items: center;
    padding: 10px 0 26px;
}

.hero-kick {
    font-family: var(--head);
    font-size: 16px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--red);
    margin: 0 0 8px;
}

.hero h1 {
    font-family: var(--head);
    font-size: clamp(34px, 4.6vw, 56px);
    line-height: 1.04;
    letter-spacing: .4px;
    margin: 0;
    text-transform: uppercase;
}

.hero h1 .ar { text-transform: none; font-size: .82em; line-height: 1.3; }

/* The brand's own wave, used as the rule under the headline. */
.zig { width: 150px; height: auto; margin: 16px 0 20px; opacity: .95; }
body.lang-ar .zig { transform: scaleX(-1); }

.hero-go { display: flex; flex-wrap: wrap; gap: 10px; }

.btn {
    display: inline-block;
    font-family: var(--head);
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 999px;
    padding: 12px 26px;
    border: 2px solid transparent;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
}

.btn:hover { transform: translateY(-2px); }
.btn-red { background: var(--red); color: #fff; border-color: var(--red); }
.btn-red:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }
.btn-ghost { color: var(--ink); border-color: var(--line); background: var(--card); }
.btn-ghost:hover { border-color: var(--red); color: var(--red); }
.btn-white { background: #fff; color: var(--red); border-color: #fff; }
.btn-white:hover { background: var(--bg); color: var(--red-dark); }

.hero-count {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    margin: 24px 0 0;
    padding: 0;
}

.hero-count b {
    display: block;
    font-family: var(--head);
    font-size: 30px;
    line-height: 1;
    color: var(--red);
}

.hero-count span { font-size: 12.5px; color: var(--muted); }

/* No card, no crop, no shadow on the box - only under the cups themselves. */
.hero-shot img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 26px rgba(33, 33, 33, .18));
}

/* ------------------------------------------------------------- the slides

   The panel's pictures, turned through by site.js one every three seconds.
   Stacked and crossfaded rather than slid: a fade never shows half of two
   pictures, and it costs one property. The box keeps a steady shape so the
   page does not jump as pictures of different heights take their turn. */

.hero-slides {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 18px 40px -22px rgba(33, 33, 33, .4);
    background: var(--card);
}

.hero-slides img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .8s ease;
}

.hero-slides img.on { opacity: 1; }

.slide-dots {
    position: absolute;
    inset-inline: 0;
    bottom: 12px;
    display: flex;
    justify-content: center;
    gap: 7px;
}

.slide-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: background .3s, transform .3s;
}

.slide-dots span.on { background: var(--red); transform: scale(1.25); }

@media (prefers-reduced-motion: reduce) {
    .hero-slides img { transition: none; }
}


/* --------------------------------------------------------------- the bands

   Two, and no more: one to the branch list, one to the storefront. The
   storefront is otherwise the only page on this site with nothing linking
   to it.
*/

.band {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 34px;
    align-items: center;
    border-radius: 22px;
    padding: 34px 40px;
    margin: 34px 0 0;
}

.band-cream { background: var(--card); border: 1px solid var(--line); grid-template-columns: 1.2fr .8fr; }
.band-red { background: var(--red); color: #fff; }
.band-red h2, .band-red p { color: #fff; }

.band h2 {
    font-family: var(--head);
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin: 0 0 10px;
}

.band h2 .ar { text-transform: none; }
.band p { margin: 0 0 18px; font-size: 14px; line-height: 1.7; max-width: 56ch; }
.band-red p { opacity: .93; }

/*  The shopfront is drawn with a lot of transparent air around it, so it is
    capped and centred rather than filled to the column - otherwise it sets
    the height of the band and leaves a field of empty red under the text. */
.band-shot { width: 100%; max-width: 270px; height: auto; justify-self: center; }

/* Two circles, the second dropped a little so they read as a pair rather
   than as a row. */
.band-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: center; }
.band-pair img { width: 100%; height: auto; }
.band-pair img:last-child { transform: translateY(18px); }

@media (max-width: 860px) {
    .hero { grid-template-columns: 1fr; gap: 6px; }
    .hero-shot { order: -1; }
    .band, .band-cream { grid-template-columns: 1fr; padding: 26px 22px; }
    .band-shot { max-width: 320px; margin: 0 auto; }
    .band-pair img:last-child { transform: none; }
}

/* ------------------------------------------------- page heads and crumbs */

.crumbs { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.crumbs a { color: var(--red-dark); text-decoration: none; font-weight: 600; }

.pagehead { margin-bottom: 22px; padding-bottom: 16px; border-bottom: 3px solid var(--red); }
.pagehead h1 { font-family: var(--head); font-size: clamp(28px, 4vw, 40px); text-transform: uppercase; letter-spacing: .6px; margin: 0; }
.pagehead p { margin: 8px 0 0; color: var(--muted); font-size: 14px; max-width: 70ch; }

.pagefoot { margin-top: 30px; font-size: 14px; }
.pagefoot a { color: var(--red-dark); font-weight: 600; text-decoration: none; }

/* --------------------------------------------------------------- the map

   Our own, drawn by Leaflet on OpenStreetMap tiles, with a pin per branch.
   The tiles are the only third party this page talks to; drop the map from
   Location.cshtml and the page is still every branch with working
   directions links.

   `.mapframe` holds either that or - on a site whose branch coordinates
   have not been filled in yet - the Google frame it falls back to.
*/

/* ----------------------------------------------------------------------------
   The Location page: list beside map.
---------------------------------------------------------------------------- */

.locate-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 18px; }
.locate-head .kicker { margin-bottom: 4px; color: var(--red); font-size: 15px; }
.locate-head p:not(.kicker) { font-size: 15px; }

/* The list is the page; each branch's map lives in its popup. */
.locate .mapall { margin: 4px 0 26px; }

.mapframe {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: 0 18px 40px -26px rgba(17, 17, 17, .45);
    background: var(--card);
    margin: 20px 0 26px;
}

.mapframe iframe,
.mapframe #ourmap { display: block; width: 100%; height: 460px; border: 0; }

/* --------------------------------------------------------------- our pins

   The marker is drawn rather than loaded - an SVG in a div - so there is no
   image to fetch, it wears the brand's red, and the one being looked at can
   be grown by adding a class. */

.pin-mark svg { fill: var(--red); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.pin-mark svg circle { fill: #fff; }
.pin-mark { transition: transform .15s ease; transform-origin: 50% 100%; }
.pin-mark-on { z-index: 1000 !important; }
.pin-mark-on svg { fill: var(--red-dark); }
.pin-mark-on { transform: scale(1.28); }

.pin-pop { font-family: inherit; min-width: 170px; }
.pin-pop b { display: block; font-family: var(--head); font-size: 18px; text-transform: uppercase; letter-spacing: .3px; }
.pin-pop span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 5px; line-height: 1.6; }
.pin-pop small { display: block; font-size: 12px; font-weight: 600; margin-top: 6px; }

/* The position the pin is standing on, written out so it can be read back
   or copied. Always left to right - a coordinate is not Arabic. */
.pin-geo {
    display: block;
    direction: ltr;
    unicode-bidi: isolate;
    margin-top: 8px;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 11.5px;
    color: var(--muted);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 5px 8px;
    user-select: all;
}

.pin-pop a {
    display: inline-block;
    margin-top: 10px;
    background: var(--red);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 999px;
    padding: 6px 13px;
}

.pin-pop a:hover { background: var(--red-dark); color: #fff; }

/* Leaflet writes its own defaults; these only put it in the site's face. */
.leaflet-container { font: inherit; background: #e8e5dd; }
.leaflet-popup-content-wrapper { border-radius: 12px; }
.leaflet-popup-content { margin: 13px 15px; }

/* The map draws over the sticky header without this. */
.leaflet-pane, .leaflet-top, .leaflet-bottom { z-index: 4; }

/* The way out to Google's own app, where a whole emirate shows at once. */
.mapall { margin: -14px 0 24px; }

.mapall a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--muted);
    text-decoration: none;
    border: 1px solid var(--line);
    background: var(--card);
    border-radius: 999px;
    padding: 8px 15px;
}

.mapall a:hover { border-color: var(--red); color: var(--red); }
.mapall b { color: var(--ink); }
.mapall a:hover b { color: var(--red); }

/* Said plainly when some branches have no position yet. */
.mapgap { font-size: 12.5px; color: var(--muted); margin: -14px 0 22px; }

.mapall a::after {
    content: '';
    width: 12px;
    height: 12px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464646' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M14 4h6v6'/><path d='M20 4 11 13'/><path d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/></svg>");
}


/* ------------------------------------------------------- the branch cards

   One card per branch, shared by the map page and the directory. The two
   pages are the same twenty-seven shops seen two ways, so they are the same
   card: only what fills it differs.

   On the map page the body is a button - pressing it moves the map above -
   and the numbers shrink to two round buttons, because that page is for
   finding a place. In the directory the body is a plain block and the
   numbers are printed in full, because that page is for ringing one.

   Either way the foot is ordinary links, so navigation works with the
   script missing and every button can be opened in a new tab.

   The card is deliberately quiet until it is wanted: a hairline border, a
   shadow only on hover, and the red ring reserved for the one being shown.
*/

.pins {
    list-style: none;
    /* Room under them for the map, which now follows rather than precedes. */
    margin: 0 0 30px;
    padding: 0;
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
}

.bcard {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(17, 17, 17, .04);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.bcard:hover {
    transform: translateY(-3px);
    border-color: #cdc6b6;
    box-shadow: 0 20px 36px -22px rgba(17, 17, 17, .42);
}

/* The one the map is showing. */
.bcard.on {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(209, 32, 39, .12), 0 20px 36px -22px rgba(209, 32, 39, .5);
}

.bcard::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    background: var(--red);
    opacity: 0;
    transition: opacity .18s ease;
}

.bcard.on::before { opacity: 1; }

/* The body: a button on the map page, a plain block in the directory. */
/*  A column that starts at the top. A button centres whatever is inside it,
    which is why a short card's heading used to sit lower than its taller
    neighbour's - every region line and Open now badge lines up now.  */
.pin-pick, .bc-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    flex: 1 1 auto;
    text-align: start;
    padding: 18px 18px 16px;
}

.pin-pick > .bc-hours, .pin-pick > .bc-tel { align-self: flex-start; }
.pin-pick > .bc-see { margin-top: auto; padding-top: 12px; }

.pin-pick {
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.bc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 22px;
    margin-bottom: 9px;
}

.bc-region {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Open or shut, worked out in Gulf time when the page loads. Empty until
   the script fills it in, and empty is invisible. */
.bc-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f1efe8;
    color: var(--muted);
    white-space: nowrap;
}

.bc-state:empty { display: none; }

.bc-state::before {
    content: '';
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.bc-state.is-open { background: #e9f8ef; color: #137a3c; }
.bc-state.is-shut { background: #fdeceb; color: #b0272c; }

/* ----------------------------------------------------------------------------
   Opening soon - a branch that is signed but not trading yet.

   An announcement, not a status. It wears the brand's own red rather than
   the green and red of open-or-shut: a dark glossy pill in the heading face,
   a gold spark that breathes, and a light that sweeps across it every few
   seconds. It is the one bold thing on the card; the rest stays quiet.
---------------------------------------------------------------------------- */

.bc-soon {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-inline-start: auto;
    overflow: hidden;
    isolation: isolate;
    font-family: var(--head);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1;
    text-transform: uppercase;
    padding: 6px 13px 6px 10px;
    border-radius: 999px;
    background: linear-gradient(120deg, var(--maroon) 0%, var(--red) 55%, #e8434a 100%);
    color: #fff;
    white-space: nowrap;
    box-shadow: 0 8px 18px -8px rgba(165, 23, 29, .7), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.bc-soon .ar { font-family: var(--arabic); font-size: 13.5px; font-weight: 700; }

/* The spark: a four-point star in gold, breathing. */
.bc-soon::before {
    content: '';
    flex: 0 0 13px;
    width: 13px;
    height: 13px;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f3c86b'><path d='M12 2c.6 5.4 4.6 9.4 10 10-5.4.6-9.4 4.6-10 10-.6-5.4-4.6-9.4-10-10 5.4-.6 9.4-4.6 10-10z'/></svg>") center / contain no-repeat;
    filter: drop-shadow(0 0 3px rgba(243, 200, 107, .75));
    animation: soon-spark 2.8s ease-in-out infinite;
}

/* The light that sweeps across. Behind the words, above the red. */
.bc-soon::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .42) 50%, transparent 75%);
    transform: translateX(-130%);
    animation: soon-sweep 3.6s ease-in-out infinite;
}

@keyframes soon-spark {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
    50%      { transform: scale(.72) rotate(25deg); opacity: .7; }
}

@keyframes soon-sweep {
    0%        { transform: translateX(-130%); }
    45%, 100% { transform: translateX(130%); }
}

/*  On a card the pill grows into a strip across the top edge, under the
    rounded corners, with a gold hairline beneath it: the first thing seen
    on the card, before the region or the name. The body makes room for it
    below. Worn by the directory card and the map card alike.  */
.bcard.is-soon .bc-soon {
    position: absolute;
    top: 0;
    inset-inline: 0;
    z-index: 1;
    justify-content: center;
    margin: 0;
    padding: 9px 14px;
    border-radius: 0;
    border-bottom: 2px solid #f3c86b;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}

.bcard.is-soon .pin-pick, .bcard.is-soon .bc-body { padding-top: 54px; }

.bcard.is-soon {
    border-color: #f0d7d8;
    background: linear-gradient(rgba(209, 32, 39, .06), transparent 110px), var(--card);
}

.bcard.is-soon .navs { background: #fdf6f4; border-top-color: #f0dfdb; }
.bcard.is-soon:hover { border-color: #e3b3b5; box-shadow: 0 20px 36px -22px rgba(165, 23, 29, .45); }

/*  On the directory, where a card has no numbers yet, the note sits in the
    row the numbers would fill. The map page carries the same note hidden,
    for its popup, and the hidden attribute still wins there.  */
.tels .bc-soon-note {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--maroon);
}

/* Hours that have not started yet: said, but quietly. */
.bc-will { color: var(--muted); font-weight: 600; }
.bc-will::before { opacity: .65; }

/* The week's hours in the branch popup, with today marked. */
.sheet-state { margin: 6px 0 10px; }

.sheet-week {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 14px;
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fffdfc;
    font-size: 12.5px;
}

.sheet-week .wk-row { display: contents; }
.sheet-week .wk-day { color: var(--muted); font-weight: 600; }
.sheet-week .wk-hrs { color: var(--ink); direction: ltr; text-align: start; }
.sheet-week .wk-row.today .wk-day, .sheet-week .wk-row.today .wk-hrs { color: var(--red-dark); font-weight: 700; }
body.lang-ar .sheet-week .wk-hrs { direction: rtl; }

/*  The same news opens the branch popup: a banner above the region line,
    with "Opening soon" as its title, the note under it, the spark beside and
    the same sweep of light. Inside the region line's small caps, so it
    resets that type for itself.  */
.sheet-soon {
    position: relative;
    display: grid;
    grid-template-columns: 18px 1fr;
    column-gap: 10px;
    row-gap: 3px;
    align-items: start;
    margin: 0 0 14px;
    /* Room at the end for the sheet's close button, which sits over it. */
    padding: 13px 48px 13px 15px;
    border-radius: 14px;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(120deg, var(--maroon), var(--red) 70%, #e8434a);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.5;
    box-shadow: 0 12px 26px -14px rgba(165, 23, 29, .7), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.sheet-soon > .en, .sheet-soon > .ar, .sheet-soon-title { grid-column: 2; }

.sheet-soon-title {
    font-family: var(--head);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    line-height: 1.05;
}

.sheet-soon-title .ar { font-family: var(--arabic); font-size: 17px; }

.sheet-soon::before {
    content: '';
    grid-row: 1 / span 2;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f3c86b'><path d='M12 2c.6 5.4 4.6 9.4 10 10-5.4.6-9.4 4.6-10 10-.6-5.4-4.6-9.4-10-10 5.4-.6 9.4-4.6 10-10z'/></svg>") center / contain no-repeat;
    filter: drop-shadow(0 0 4px rgba(243, 200, 107, .75));
    animation: soon-spark 2.8s ease-in-out infinite;
}

.sheet-soon::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
    transform: translateX(-130%);
    animation: soon-sweep 4.2s ease-in-out infinite;
}

/* A slow ring on the dot, only where a shop is actually open now. */
.bc-state.is-open::before { animation: livedot 2.4s ease-out infinite; }

@keyframes livedot {
    0%   { box-shadow: 0 0 0 0 rgba(19, 122, 60, .55); }
    70%  { box-shadow: 0 0 0 7px rgba(19, 122, 60, 0); }
    100% { box-shadow: 0 0 0 0 rgba(19, 122, 60, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .bc-state.is-open::before { animation: none; }
    .bc-soon::before, .bc-soon::after, .sheet-soon::before, .sheet-soon::after { animation: none; }
    .bc-soon::after, .sheet-soon::after { display: none; }
    .bcard, .bcard:hover { transition: none; transform: none; }
}

.bcard b {
    display: block;
    font-family: var(--head);
    font-size: 24px;
    line-height: 1.08;
    letter-spacing: .4px;
    text-transform: uppercase;
}

/*  The address is written right-to-left, which is what `dir` is for, but it
    is still a line in a card that reads left-to-right - so it starts where
    every other line in the card starts rather than flush against the far
    edge. In Arabic the whole card turns over and it lines up again. */
.bcard .pin-ar {
    display: block;
    font-family: var(--arabic);
    font-size: 13px;
    color: var(--muted);
    margin: 7px 0 0;
    line-height: 1.75;
}

body.lang-en .bcard .pin-ar { text-align: left; }

.bc-hours {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 12px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
}

/* Clock times read left to right whichever way the page does. */
.bc-hours .en { direction: ltr; }

.bc-hours::before {
    content: '';
    flex: 0 0 13px;
    width: 13px;
    height: 13px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464646' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>");
}

/*  The branch's own numbers, printed on the card. dir=ltr in the markup -
    a phone number reads left to right in either language.  */
.bc-tel {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 8px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
}

body.lang-ar .bc-tel { justify-content: flex-end; }

.bc-tel::before {
    content: '';
    flex: 0 0 13px;
    width: 13px;
    height: 13px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464646' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.13.96.36 1.9.7 2.8a2 2 0 0 1-.45 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.45c.9.34 1.84.57 2.8.7a2 2 0 0 1 1.7 2.05Z'/></svg>");
}

/*  The number under its word on the sheet's Call and WhatsApp tiles. */
.tile-num {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 600;
    opacity: .75;
    direction: ltr;
    unicode-bidi: isolate;
}

.bc-see {
    display: block;
    margin-top: 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color .18s ease;
}

.bc-see::after { content: ' \2192'; }
.bcard:hover .bc-see, .bcard.on .bc-see { color: var(--red); }
body.lang-ar .bc-see::after { content: ' \2190'; }


/* ------------------------------------------------------------ the card foot */

.navs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0 18px 16px;
    background: transparent;
}

.navs-maps, .navs-talk { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

.nav-btn {
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 13px;
    color: var(--ink);
    background: var(--card);
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.nav-btn:hover { border-color: var(--ink); color: var(--ink); background: #fff; }

/* Directions is the one people came for, so it is the only filled one. */
.nav-go { background: var(--red); border-color: var(--red); color: #fff; }
.nav-go:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }

/* A number is a round button with its own icon rather than a word: which
   one answers on WhatsApp is clear at a glance, and it costs no width. */
.icb {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--line);
    background: var(--card);
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.icb::before {
    content: '';
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.icb:hover { transform: translateY(-2px); }

.icb-wa { background: #e9f8ef; border-color: #c3e9d2; }
.icb-wa:hover { border-color: #137a3c; }
.icb-call:hover { border-color: var(--red); }

/* Our own map page, opened on this branch - the one link a phone's map app
   cannot give, so it gets the pin. */
.icb-pin { background: #fdf1f1; border-color: #f0cfd0; }
.icb-pin:hover { border-color: var(--red); }

.icb-pin::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d12027'><path d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z'/></svg>"); }

.icb-wa::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23137a3c'><path d='M12.04 2c-5.5 0-9.96 4.46-9.96 9.96 0 1.76.46 3.48 1.34 5L2 22l5.16-1.35a9.9 9.9 0 0 0 4.88 1.25h.01c5.5 0 9.96-4.46 9.96-9.96S17.54 2 12.04 2Zm0 18.2h-.01a8.2 8.2 0 0 1-4.19-1.15l-.3-.18-3.06.8.82-2.98-.2-.31a8.24 8.24 0 1 1 6.94 3.82Zm4.52-6.16c-.25-.13-1.47-.72-1.69-.8-.23-.09-.39-.13-.56.12s-.64.8-.79.97c-.14.16-.29.18-.54.06-.25-.13-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.01-.38.11-.5.11-.11.25-.29.37-.44.13-.15.17-.25.25-.42.08-.17.04-.31-.02-.44-.06-.12-.56-1.35-.77-1.85-.2-.48-.4-.42-.56-.43h-.48c-.16 0-.43.06-.65.31-.22.25-.85.83-.85 2.03s.87 2.35.99 2.51c.12.17 1.71 2.61 4.14 3.66.58.25 1.03.4 1.38.51.58.19 1.11.16 1.53.1.47-.07 1.47-.6 1.67-1.18.21-.58.21-1.07.15-1.18-.06-.11-.22-.17-.47-.29Z'/></svg>"); }

.icb-call::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d12027'><path d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.58.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.46.57 3.58.11.35.03.74-.25 1.02l-2.22 2.2Z'/></svg>"); }

@media (max-width: 860px) {
    .mapframe iframe { height: 330px; }
    .pins { grid-template-columns: 1fr; }
}


/* --------------------------------------------------- the number's own icon

   A mobile answers on WhatsApp and a landline is dialled, so each says which
   it is before it is tapped rather than after. Inline SVG in the stylesheet:
   no icon font, no sprite, and it inherits nothing it should not.
*/

.tel { display: inline-flex; align-items: center; gap: 6px; }

.tel::before {
    content: '';
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.tel.wa::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23137a3c'><path d='M12.04 2c-5.5 0-9.96 4.46-9.96 9.96 0 1.76.46 3.48 1.34 5L2 22l5.16-1.35a9.9 9.9 0 0 0 4.88 1.25h.01c5.5 0 9.96-4.46 9.96-9.96S17.54 2 12.04 2Zm0 18.2h-.01a8.2 8.2 0 0 1-4.19-1.15l-.3-.18-3.06.8.82-2.98-.2-.31a8.24 8.24 0 1 1 6.94 3.82Zm4.52-6.16c-.25-.13-1.47-.72-1.69-.8-.23-.09-.39-.13-.56.12s-.64.8-.79.97c-.14.16-.29.18-.54.06-.25-.13-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.01-.38.11-.5.11-.11.25-.29.37-.44.13-.15.17-.25.25-.42.08-.17.04-.31-.02-.44-.06-.12-.56-1.35-.77-1.85-.2-.48-.4-.42-.56-.43h-.48c-.16 0-.43.06-.65.31-.22.25-.85.83-.85 2.03s.87 2.35.99 2.51c.12.17 1.71 2.61 4.14 3.66.58.25 1.03.4 1.38.51.58.19 1.11.16 1.53.1.47-.07 1.47-.6 1.67-1.18.21-.58.21-1.07.15-1.18-.06-.11-.22-.17-.47-.29Z'/></svg>"); }
.tel:not(.wa):not(.map)::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23464646'><path d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.58.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.46.57 3.58.11.35.03.74-.25 1.02l-2.22 2.2Z'/></svg>"); }

/* The map link is neither. */
.tel.map::before { display: none; }

/* The same two icons on the location page's buttons. */
.nav-call { display: inline-flex; align-items: center; gap: 6px; }

.nav-call::before {
    content: '';
    flex: 0 0 13px;
    width: 13px;
    height: 13px;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23137a3c'><path d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.58.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.46.57 3.58.11.35.03.74-.25 1.02l-2.22 2.2Z'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
}

.nav-wa { display: inline-flex; align-items: center; gap: 6px; background: #e8f8ee; border-color: #bfe8cf; color: #137a3c; }

.nav-wa::before {
    content: '';
    flex: 0 0 13px;
    width: 13px;
    height: 13px;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23137a3c'><path d='M12.04 2c-5.5 0-9.96 4.46-9.96 9.96 0 1.76.46 3.48 1.34 5L2 22l5.16-1.35a9.9 9.9 0 0 0 4.88 1.25h.01c5.5 0 9.96-4.46 9.96-9.96S17.54 2 12.04 2Zm0 18.2h-.01a8.2 8.2 0 0 1-4.19-1.15l-.3-.18-3.06.8.82-2.98-.2-.31a8.24 8.24 0 1 1 6.94 3.82Zm4.52-6.16c-.25-.13-1.47-.72-1.69-.8-.23-.09-.39-.13-.56.12s-.64.8-.79.97c-.14.16-.29.18-.54.06-.25-.13-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.01-.38.11-.5.11-.11.25-.29.37-.44.13-.15.17-.25.25-.42.08-.17.04-.31-.02-.44-.06-.12-.56-1.35-.77-1.85-.2-.48-.4-.42-.56-.43h-.48c-.16 0-.43.06-.65.31-.22.25-.85.83-.85 2.03s.87 2.35.99 2.51c.12.17 1.71 2.61 4.14 3.66.58.25 1.03.4 1.38.51.58.19 1.11.16 1.53.1.47-.07 1.47-.6 1.67-1.18.21-.58.21-1.07.15-1.18-.06-.11-.22-.17-.47-.29Z'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
}

/* The crumb separator points the way the page reads. */
body.lang-ar .crumbs span[aria-hidden] { transform: scaleX(-1); display: inline-block; }

/* ============================================================================
   Careers - /careers and each role's own page.
   The same cream-and-red the rest of the site wears; nothing here introduces
   a new colour.
============================================================================ */

.job-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.jf-search { flex: 1 1 260px; }

.job-filters input[type="search"],
.job-filters select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    background: #fffdfc;
}

.job-filters select { width: auto; min-width: 170px; }
.job-filters input:focus, .job-filters select:focus { outline: 2px solid var(--red); outline-offset: 1px; }

.job-count { margin: 0 0 14px; color: var(--muted); font-size: 13px; }

/*  Two cards a row on a desktop, one on a phone - a single column of
    full-width cards on a wide screen is mostly empty card.  */
.jobs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(460px, 100%), 1fr));
    gap: 14px;
    margin-bottom: 30px;
    align-items: stretch;
}

.jobs .job { display: flex; flex-direction: column; }
.jobs .job .job-foot { margin-top: auto; padding-top: 14px; }

.job {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px 22px;
}

.job-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }

.job h2 { margin: 0 0 4px; font-family: var(--head); font-size: 22px; text-transform: uppercase; letter-spacing: .4px; }
.job h2 a { color: inherit; text-decoration: none; }
.job h2 a:hover { color: var(--red); }

.job-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: 13px; }
.job-meta span::before { content: "\2022"; margin-inline-end: 6px; color: var(--red); }
.job-meta span:first-child::before { content: none; margin: 0; }

.job-flag {
    background: var(--red);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 4px 11px;
    white-space: nowrap;
}

.job > p { margin: 10px 0 0; color: #4d473d; font-size: 14px; max-width: 78ch; }

/* The careers badges: quiet cream chips, not the menu's black one. */
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.badges .badge {
    margin: 0;
    background: var(--bg);
    color: var(--red-dark);
    border: 1px solid var(--line);
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    padding: 4px 11px;
}

.job-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.job-posted { color: var(--muted); font-size: 12.5px; }

.job.compact { padding: 16px 18px; }
.job.compact h2 { font-size: 18px; }
.job-link { color: var(--red-dark); font-weight: 700; font-size: 13.5px; text-decoration: none; }
.job-link:hover { text-decoration: underline; }

.job-empty {
    background: #fff;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    padding: 30px;
    text-align: center;
    margin-bottom: 30px;
}

.job-empty h3 { margin: 0 0 6px; font-family: var(--head); font-size: 20px; text-transform: uppercase; }
.job-empty p { margin: 0 0 14px; color: var(--muted); font-size: 14px; }

.btn-line {
    display: inline-block;
    border: 1.5px solid var(--red);
    color: var(--red-dark);
    background: transparent;
    border-radius: 999px;
    padding: 9px 20px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.btn-line:hover { background: var(--red); color: #fff; }

/* ------------------------------------------------- one role's own page */

.job-page { display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: start; margin-bottom: 30px; }

.job-block { margin-bottom: 22px; }
.job-block h2 { font-family: var(--head); font-size: 21px; text-transform: uppercase; letter-spacing: .4px; margin: 0 0 10px; }

.ticks { list-style: none; margin: 0; padding: 0; }

.ticks li {
    position: relative;
    padding-inline-start: 26px;
    margin-bottom: 8px;
    font-size: 14.5px;
    color: #3d3a33;
}

.ticks li::before {
    content: "\2713";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    color: var(--red);
    font-weight: 700;
}

.job-facts {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
    position: sticky;
    top: 86px;
}

.job-facts h3 { margin: 0 0 12px; font-family: var(--head); font-size: 18px; text-transform: uppercase; }
.job-facts dl { margin: 0 0 12px; }
.job-facts dl > div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; }
.job-facts dt { color: var(--muted); }
.job-facts dd { margin: 0; font-weight: 700; text-align: end; }
.job-facts .btn { display: block; text-align: center; margin-top: 12px; }

.alsohead { font-family: var(--head); font-size: 22px; text-transform: uppercase; margin: 0 0 14px; }

/* --------------------------------------------------------- the apply form */

.talent { margin: 34px 0 10px; }

.talent-head { margin-bottom: 16px; border-bottom: 3px solid var(--red); padding-bottom: 12px; }
.talent-head h2 { font-family: var(--head); font-size: clamp(22px, 3vw, 30px); text-transform: uppercase; margin: 0; }
.talent-head p { margin: 6px 0 0; color: var(--muted); font-size: 14px; max-width: 70ch; }

.apply-box {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 26px 30px;
}

.apply-box h3 { margin: 0 0 4px; font-family: var(--head); font-size: 21px; text-transform: uppercase; }
.apply-for { margin: 0 0 14px; color: var(--muted); font-size: 13.5px; }

.apply-box .field.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.apply-box .field.two > div { min-width: 0; }

/*  On a wide screen the form works in two columns throughout: the CV drop
    beside the link-and-note stack, so the box earns its width.  */
@media (min-width: 900px) {
    .apply-box form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; }
    .apply-box form > * { grid-column: 1 / -1; }
    .apply-box form > .field.two { grid-column: 1 / -1; }
    .apply-box form > .field:has(#aCv) { grid-column: 1; }
    .apply-box form > .field:has(#aCvUrl),
    .apply-box form > .field:has(#aMessage) { grid-column: 2; }
    .apply-box form > .field:has(#aCvUrl) { margin-bottom: 8px; }
}

.apply-box textarea {
    width: 100%;
    min-height: 90px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    background: #fffdfc;
    resize: vertical;
}

.apply-box textarea:focus { outline: 2px solid var(--red); outline-offset: 1px; }

.apply-box input.invalid, .apply-box textarea.invalid { border-color: var(--red); }

.req { color: var(--red); }

.field-error { display: block; color: var(--red-dark); font-size: 12.5px; margin-top: 4px; min-height: 0; }
.field-error:empty { display: none; }

.field-hint { color: var(--muted); font-size: 12px; margin-top: 4px; }

.form-note { display: none; border-radius: 10px; padding: 10px 12px; font-size: 13.5px; margin-bottom: 14px; }
.form-note.show { display: block; }
.form-note.good { background: #e8f8ee; border: 1px solid #bfe8cf; color: #137a3c; }
.form-note.bad { background: #fdecea; border: 1px solid #f6c9c4; color: var(--red-dark); }

/* The CV drop zone. The real input stays in the page for keyboards and
   screen readers; this is only its clothes. */
.cv-drop {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1.5px dashed var(--line);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    background: #fffdfc;
    position: relative;
}

.cv-drop:hover, .cv-drop.over { border-color: var(--red); background: #fff8f5; }

.cv-drop input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.cv-icon { font-size: 22px; }
.cv-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cv-words strong { font-size: 14px; word-break: break-word; }
.cv-words small { color: var(--muted); font-size: 12px; }

.cv-clear {
    margin-inline-start: auto;
    border: 0;
    background: var(--bg);
    color: var(--red-dark);
    width: 28px;
    height: 28px;
    border-radius: 999px;
    font-size: 16px;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.apply-privacy { margin: 14px 0 0; color: var(--muted); font-size: 12px; max-width: 60ch; }

.also-open { margin-top: 34px; }

@media (max-width: 860px) {
    .job-page { grid-template-columns: 1fr; }
    .job-facts { position: static; }
    .apply-box .field.two { grid-template-columns: 1fr; }
}

/* ============================================================================
   The social icons in the footer, from Setup -> Social media.
============================================================================ */

.socials { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }

.social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    transition: background .15s ease, transform .15s ease;
}

.social:hover { background: rgba(255, 255, 255, .28); transform: translateY(-1px); }
.social svg { width: 18px; height: 18px; fill: currentColor; }

/* ============================================================================
   The videos page - YouTube framed wide, Instagram reels framed tall.
============================================================================ */

.vids { margin-bottom: 34px; }

.vids-head {
    font-family: var(--head);
    font-size: clamp(20px, 3vw, 26px);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 3px solid var(--red);
}

.vid-grid { display: grid; gap: 18px; }
.vid-wide { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.vid-tall { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.vid {
    margin: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.vid-frame { position: relative; background: #000; }
.vid-16x9 { aspect-ratio: 16 / 9; }
.vid-9x16 { aspect-ratio: 9 / 14; }

.vid-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.vid figcaption { padding: 10px 14px 12px; font-size: 13.5px; font-weight: 600; }

/* The brand's own play button on a YouTube thumbnail - the player, its logo
   and everything else only arrive when this is pressed. */
.vid-frame[data-embed] { cursor: pointer; }
.vid-frame[data-embed] img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.vid-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 62px;
    height: 62px;
    border: 0;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .55);
    transition: transform .18s ease, background .18s ease;
}

.vid-frame[data-embed]:hover .vid-play { transform: scale(1.08); background: var(--red-dark); }
.vid-play svg { width: 26px; height: 26px; fill: currentColor; margin-inline-start: 3px; }

/* The video lightbox - the whole screen goes dark and the player fills it. */
.vid-lightbox {
    position: fixed;
    inset: 0;
    z-index: 4000;
    background: rgba(10, 8, 7, .94);
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity .2s ease;
}

.vid-lightbox.show { opacity: 1; }

.vid-stage {
    position: relative;
    width: min(96vw, 1200px);
    aspect-ratio: 16 / 9;
    max-height: 88vh;
    overflow: hidden;
    border-radius: 10px;
    background: #000;
}

/*  The frame is drawn 30% taller than the window it shows through and
    centred, so the strips where the player writes its own name at the top
    and draws its bar at the bottom sit outside the visible area. The video
    itself is letterboxed inside the frame at exactly the window's height,
    so none of the picture is lost - only the chrome. pointer-events off
    keeps hover from waking any overlay; the dark around it still closes.  */
.vid-stage iframe {
    position: absolute;
    left: 0;
    top: -15%;
    width: 100%;
    height: 130%;
    border: 0;
    pointer-events: none;
}

.vid-close {
    position: absolute;
    top: 14px;
    inset-inline-end: 18px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.vid-close:hover { background: var(--red); }

body.vid-locked { overflow: hidden; }

/* ============================================================================
   The item popup - tap a menu card and the item opens large, with arrows
   onward, suggestions from the same category, and the trail of this visit.
============================================================================ */

.grid .card { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.grid .card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -14px rgba(33, 33, 33, .35); }

.mv-back {
    position: fixed;
    inset: 0;
    z-index: 3500;
    background: rgba(20, 14, 12, .55);
    backdrop-filter: blur(3px);
    display: grid;
    /*  One track exactly as wide as the space. Left to size itself the
        track grew to fit the card, and a card wider than the screen then
        sat against the left edge with its right side off the phone.  */
    grid-template-columns: 100%;
    place-items: center;
    padding: 18px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.mv-back.show { opacity: 1; pointer-events: auto; }

.mv-card {
    position: relative;
    width: 100%;
    max-width: 880px;
    max-height: 90vh;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5);
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    overflow: hidden;
    transform: translateY(16px) scale(.97);
    transition: transform .25s cubic-bezier(.3, 1.3, .5, 1);
}

.mv-back.show .mv-card { transform: none; }

/*  The photo is the whole left half - and shown whole. Nothing is cropped:
    the picture sits complete in the pane, and the pane fills itself
    behind it with a soft blur of the same photo, so a wide shot in a tall
    pane reads as one full picture rather than a photo in a cream box.
    The image is pinned to the pane rather than sizing it, so a tall photo
    cannot stretch the popup past the screen. */
.mv-shot { background: var(--bg); min-height: 380px; position: relative; overflow: hidden; }

.mv-shot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.mv-shot::before {
    content: '';
    position: absolute;
    inset: -12%;
    background: var(--shot, none) center / cover no-repeat;
    filter: blur(28px) saturate(1.15);
    opacity: .85;
}

/* The drawn stand-in, on an item with no photograph, at a sane size. */
.mv-shot img[src$="menu-placeholder.svg"] { padding: 18%; }

.mv-body { padding: 26px 28px 22px; overflow-y: auto; max-height: 90vh; }

.mv-cat {
    margin: 0 0 6px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--red-dark);
}

.mv-badge {
    background: var(--red);
    color: #fff;
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 11px;
    margin-inline-start: 6px;
    text-transform: none;
    letter-spacing: .3px;
}

.mv-name { margin: 0 0 8px; font-family: var(--head); font-size: clamp(24px, 3vw, 32px); text-transform: uppercase; letter-spacing: .5px; }
.mv-desc { margin: 0 0 14px; color: var(--muted); font-size: 14.5px; max-width: 48ch; }
.mv-desc[hidden] { display: none; }

.mv-prices { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

.mv-price {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    border: 1.5px solid #f0cfd0;
    border-radius: 12px;
    padding: 9px 17px 10px;
    background: #fff;
    box-shadow: 0 1px 5px rgba(209, 32, 39, .08);
}

.mv-price i {
    font-style: normal;
    color: var(--red);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .9px;
    text-transform: uppercase;
    white-space: nowrap;
}

.mv-price b { font-family: var(--head); font-size: 20px; font-weight: 700; line-height: 1; }
.mv-price em { font-style: normal; color: var(--muted); font-size: 11.5px; }

.mv-more { border-top: 1px dashed var(--line); padding-top: 12px; margin-top: 4px; }
.mv-more-head { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.mv-more-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }

.mv-thumb {
    flex: 0 0 86px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    padding: 0 0 6px;
    cursor: pointer;
    overflow: hidden;
    font: inherit;
    text-align: center;
}

.mv-thumb:hover { border-color: var(--red); }
.mv-thumb img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: var(--bg); display: block; margin-bottom: 5px; }
.mv-thumb span { display: block; font-size: 11px; font-weight: 600; padding: 0 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mv-close {
    position: absolute;
    top: 12px;
    inset-inline-end: 14px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(33, 33, 33, .55);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.mv-close:hover { background: var(--red); }

.mv-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(33, 33, 33, .45);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.mv-arrow:hover { background: var(--red); }
.mv-prev { inset-inline-start: 12px; }
.mv-next { inset-inline-end: 12px; }

@media (max-width: 720px) {
    .mv-back { padding: 10px; }
    .mv-card { grid-template-columns: 1fr; max-height: 94vh; overflow-y: auto; display: block; border-radius: 16px; }

    /*  The photo pane is the shape of the photographs - 4:3 - so the
        picture fills it exactly and no cream shows under it; on a short
        screen it is capped at half the height and the picture sits whole
        in the blur of itself. */
    .mv-shot { min-height: 0; height: auto; aspect-ratio: 4 / 3; max-height: 48vh; }
    .mv-body { max-height: none; overflow: visible; padding: 18px 18px 16px; }
    .mv-name { font-size: 24px; }
    .mv-desc { font-size: 14px; }

    /* The size tiles share each line out between them and sit a little lighter. */
    .mv-prices { gap: 7px; margin-bottom: 14px; }
    .mv-price { flex: 1 1 auto; padding: 7px 12px 8px; }
    .mv-price b { font-size: 18px; }

    /* The arrows ride the middle of the photo pane, whatever its height. */
    .mv-arrow { top: min(36vw, 24vh); width: 36px; height: 36px; }
}

/* ============================================================================
   The review QR - a star on the branch card opens this branch's own Google
   review form as a code a phone camera reads.
============================================================================ */

/*  A button, but dressed exactly like its anchor neighbours: the same
    36px circle, a soft tint, and the icon drawn by ::before - not a text
    glyph, whose baseline sat it off-centre.  */
.icb-star {
    padding: 0;
    margin: 0;
    font: inherit;
    line-height: 0;
    color: inherit;
    background: #fdf4e3;
    border: 1px solid #eed9a9;
    cursor: pointer;
    appearance: none;
}

.icb-star:hover { border-color: #e2851b; }

.icb-star::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e2851b'><path d='M12 2l2.92 6.26 6.87.6-5.2 4.53 1.55 6.72L12 16.9l-6.14 3.2 1.55-6.71-5.2-4.53 6.87-.6L12 2Z'/></svg>"); }

/*  hidden must win over the grid below, or an invisible overlay sits on
    the whole page eating every click.  */
.qr-back[hidden] { display: none; }

.qr-back {
    position: fixed;
    inset: 0;
    z-index: 3600;
    background: rgba(20, 14, 12, .55);
    backdrop-filter: blur(3px);
    display: grid;
    place-items: center;
    padding: 18px;
}

.qr-card {
    position: relative;
    width: min(340px, 92vw);
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5);
    padding: 24px 26px 22px;
    text-align: center;
}

.qr-brand {
    margin: 0 0 2px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--red-dark);
}

.qr-card h3 { margin: 0 0 14px; font-family: var(--head); font-size: 21px; text-transform: uppercase; }

.qr-box {
    width: 210px;
    height: 210px;
    margin: 0 auto 12px;
    padding: 10px;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.qr-box svg { width: 100%; height: 100%; display: block; }

.qr-hint { margin: 0 0 14px; color: var(--muted); font-size: 12.5px; }
.qr-open { display: inline-block; }

/*  Call or WhatsApp? - the same card as the QR, with two big buttons. */
.ask-back { z-index: 3700; }
.ask-card { width: min(360px, 92vw); }
.ask-card h3 { margin-bottom: 4px; }

.ask-num {
    margin: 0 0 16px;
    font-family: var(--head);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--ink);
}

.ask-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.ask-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px 12px;
    border-radius: 14px;
    border: 1.5px solid var(--line);
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    transition: transform .12s ease, border-color .15s ease;
}

.ask-btn:hover { transform: translateY(-1px); }
.ask-btn .ar { font-family: var(--arabic); }

.ask-ic { width: 30px; height: 30px; background: center / 26px no-repeat; }

.ask-call { background: #fdecec; border-color: #f3c6c8; color: var(--red-dark); }
.ask-call:hover { border-color: var(--red); }
.ask-call .ask-ic { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d12027'><path d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.58.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.46.57 3.58.11.35.03.74-.25 1.02l-2.22 2.2Z'/></svg>"); }

.ask-wa { background: #e9f8ef; border-color: #c3e9d2; color: #137a3c; }
.ask-wa:hover { border-color: #137a3c; }
.ask-wa .ask-ic { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23137a3c'><path d='M12.04 2c-5.5 0-9.96 4.46-9.96 9.96 0 1.76.46 3.48 1.34 5L2 22l5.16-1.35a9.9 9.9 0 0 0 4.88 1.25h.01c5.5 0 9.96-4.46 9.96-9.96S17.54 2 12.04 2Zm0 18.2h-.01a8.2 8.2 0 0 1-4.19-1.15l-.3-.18-3.06.8.82-2.98-.2-.31a8.24 8.24 0 1 1 6.94 3.82Zm4.52-6.16c-.25-.13-1.47-.72-1.69-.8-.23-.09-.39-.13-.56.12s-.64.8-.79.97c-.14.16-.29.18-.54.06-.25-.13-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.01-.38.11-.5.11-.11.25-.29.37-.44.13-.15.17-.25.25-.42.08-.17.04-.31-.02-.44-.06-.12-.56-1.35-.77-1.85-.2-.48-.4-.42-.56-.43h-.48c-.16 0-.43.06-.65.31-.22.25-.85.83-.85 2.03s.87 2.35.99 2.51c.12.17 1.71 2.61 4.14 3.66.58.25 1.03.4 1.38.51.58.19 1.11.16 1.53.1.47-.07 1.47-.6 1.67-1.18.21-.58.21-1.07.15-1.18-.06-.11-.22-.17-.47-.29Z'/></svg>"); }

.qr-close {
    position: absolute;
    top: 10px;
    inset-inline-end: 12px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: var(--bg);
    color: var(--ink);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.qr-close:hover { background: var(--red); color: #fff; }

/* ----------------------------------------------------------------------------
   Best sellers - the strip at the top of the menu, and the star that marks
   a starred item wherever else it appears.
---------------------------------------------------------------------------- */

/* The strip's own heading rules itself off in gold rather than the brand
   red, so it reads as the shop recommending rather than as one more
   category. */
.cat.best .cathead { border-bottom-color: #e2a51b; }
.cat.best .cathead .ic { color: #e2a51b; }
.cat.best .cat-count { border-color: #eed9a9; background: #fdf4e3; color: #8a6100; }

/*  A starred card carries the star itself - in the strip, where every card
    has one, and down in its own category, where it is the thing that makes
    somebody stop.  */
.card.top { position: relative; }

.card.top::before {
    content: '\2605';
    position: absolute;
    z-index: 3;
    top: 9px;
    inset-inline-end: 9px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #fff;
    color: #e2a51b;
    font-size: 14px;
    line-height: 27px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(120, 60, 50, .22);
}

/* Which category this one was lifted out of - a way back to more like it. */
.card .from {
    display: block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    margin-bottom: -2px;
}

.card .from:hover { color: var(--red); text-decoration: underline; }

/* The popup says it too. */
.mv-badge.mv-top { background: #fdf4e3; border-color: #eed9a9; color: #8a6100; }

/* ----------------------------------------------------------------------------
   Folding categories - the heading is the switch.
---------------------------------------------------------------------------- */

.cathead[data-fold] { cursor: pointer; user-select: none; }
.cathead[data-fold]:hover h2 { color: var(--red-dark); }

.cat-count {
    margin-inline-start: auto;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 700;
    border-radius: 999px;
    padding: 3px 11px;
}

/* ----------------------------------------------------------------------------
   The category bar - every category as a pill in one row under the header,
   the row stuck there while the menu scrolls beneath it. Tap a pill and the
   page goes to that category; scroll the page and the pill of whatever is
   under the finger lights up. On a phone it is the way a menu of two
   hundred items stays one tap deep. `--hdr` is the header's height, set by
   the page, so the bar sits exactly under it however the header wraps.
---------------------------------------------------------------------------- */

.catbar {
    position: sticky;
    top: var(--hdr, 0px);
    z-index: 30;
    background: var(--bg);
    /*  Edge to edge, whatever the page's column is: the bar is pulled out
        to the window's sides and its row is pushed back in to the column,
        so the pills line up with the content and the strip does not.  */
    margin: 0 calc(50% - 50vw) 18px;
    padding: 10px calc(50vw - 50%);
    border-bottom: 1px solid var(--line);
    transition: box-shadow .2s ease;
}

/*  50vw counts the scrollbar and the column does not, so the bar can poke a
    few pixels past the window; clip stops that from becoming a sideways
    scroll. `clip` rather than `hidden`, which would turn main into a scroll
    box and unstick the bar. */
body.menu-page main { overflow-x: clip; }

.catbar.stuck { box-shadow: 0 6px 16px rgba(33, 33, 33, .10); }

.catbar-in {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 2px;
    margin: -2px;
    scroll-snap-type: x proximity;
}

.catbar-in::-webkit-scrollbar { display: none; }

.catpill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
    text-decoration: none;
    font-family: var(--head);
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.2;
    scroll-snap-align: center;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.catpill .cp-ic { font-size: 17px; line-height: 1; }
.catpill .ar { font-family: var(--arabic); text-transform: none; font-size: 15px; letter-spacing: 0; }
.catpill:hover { border-color: var(--red); color: var(--red-dark); }
.catpill.on { background: var(--red); border-color: var(--red); color: #fff; }
.catpill.best .cp-ic { color: #e2a51b; }
.catpill.best.on .cp-ic { color: #fff; }
.catpill:focus-visible { outline: 2px solid var(--red-dark); outline-offset: 2px; }

/*  The section list. Tap a category pill and its sections drop down from
    the bar as a white sheet: the category's name as a heading, then every
    section as a chip with its count, all of them visible at once - a list
    to pick from, not a strip to hunt along. The one on screen is lit. */
.catpill.has-subs::after {
    content: '';
    width: 6px;
    height: 6px;
    margin-inline-start: 2px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: .55;
    transition: transform .2s ease;
}

.catpill.has-subs[aria-expanded="true"]::after { transform: translateY(1px) rotate(225deg); opacity: 1; }

/*  In the bar, not over the page: it stays open while the reader wants
    it, so it pushes the menu down rather than covering it. */
.secmenu {
    margin-top: 10px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    animation: secmenu-in .18s ease-out;
}

.secmenu[hidden] { display: none; }

@keyframes secmenu-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

.secmenu-in { padding: 12px 16px 14px; }

.secmenu-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-family: var(--head);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--ink);
}

.secmenu-head .ar { font-family: var(--arabic); text-transform: none; letter-spacing: 0; }

.secmenu-head small {
    font-family: var(--body);
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 1px 9px;
    letter-spacing: 0;
}

.secmenu-close {
    margin-inline-start: auto;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: var(--bg);
    color: var(--muted);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}

.secmenu-close:hover { background: var(--red); color: #fff; }

.secmenu-wrap { display: flex; flex-wrap: wrap; gap: 8px; }

.secpill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.secpill .ar { font-family: var(--arabic); font-size: 14px; }
.secpill small { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.secpill:hover { border-color: var(--red); color: var(--red-dark); }
.secpill.on { background: var(--red); border-color: var(--red); color: #fff; }
.secpill.on small { color: rgba(255, 255, 255, .8); }
.secpill:focus-visible { outline: 2px solid var(--red-dark); outline-offset: 2px; }

/* The search shortcut lives in the bar on a phone only. */
.cp-search { display: none; padding: 7px 11px; cursor: pointer; font: inherit; }
.cp-search svg { display: block; }

@media (max-width: 640px) {
    .catbar { padding-top: 8px; padding-bottom: 8px; margin-bottom: 14px; }
    .catpill { padding: 7px 12px; font-size: 14.5px; gap: 6px; }
    .catpill .cp-ic { font-size: 16px; }
    .cp-search { display: inline-flex; }
    /*  On a phone the bar must leave the menu most of the screen, so a
        long list scrolls inside its own box. */
    .secmenu { margin-top: 8px; }
    .secmenu-in { padding: 9px 12px 11px; max-height: 30vh; overflow-y: auto; }
    .secmenu-head { font-size: 16px; }
    .secmenu-wrap { gap: 7px; }
    .secpill { padding: 7px 12px; font-size: 13px; }

    /*  On a phone the red header is a third of the screen once its nav
        wraps. On the menu page it scrolls away and the category bar takes
        the top edge instead - the categories are what a thumb needs while
        reading a menu, and the search is one tap away in the bar. */
    body.menu-page header.top { position: static; }
    body.menu-page .catbar { top: 0; }
}

/*  Collapse all / expand all - one press for the whole accordion. Quiet
    pill buttons kept to the end of the line, where the per-category
    chevrons already live, so the two controls read as one family.  */
.foldbar {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 0 0 18px;
}

.foldall {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: var(--muted);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 15px;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

.foldall:hover { color: var(--red-dark); border-color: var(--red); }

.foldall > span[aria-hidden] { color: var(--red); font-size: 9px; }

.cat-fold {
    color: var(--red);
    font-size: 14px;
    transform: rotate(90deg);
    transition: transform .25s ease;
}

.cat.shut .cat-fold { transform: rotate(0deg); }
.cat.shut .catbody { display: none; }
.cat.shut { margin-bottom: 10px; }

/* ============================================================================
   The branch action sheet - tap a branch, get everything in one place:
   WhatsApp, a call, directions in three apps, the review QR. A bottom sheet
   on a phone, a card on a desktop.
============================================================================ */

/* With the sheet wired, the Directions/Apple/Waze row steps back - the
   sheet offers all three, larger. The talking buttons stay on the card:
   a WhatsApp or a call is one tap, and should not need the sheet opened
   first. They sit outside the card's big button, so pressing one talks
   rather than opening the sheet. */
body.has-sheet .pins .navs-maps { display: none; }
body.has-sheet .pins .navs { justify-content: flex-start; }

/*  On the location cards the talking buttons carry their number, so the
    circle stretches into a pill: icon, then the number it reaches. The
    review star has no number and stays a circle.  */
.navs-talk { gap: 6px; }
.navs-talk .icb { width: 30px; height: 30px; }

.navs-talk .icb[data-num] {
    display: inline-flex;
    align-items: center;
    width: auto;
    height: 30px;
    border-radius: 999px;
    padding: 0 10px 0 8px;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    direction: ltr;
    white-space: nowrap;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
}

.navs-talk .icb-wa[data-num]:hover { border-color: #137a3c; color: #137a3c; }
.navs-talk .icb-call[data-num]:hover { border-color: var(--red); color: var(--red-dark); }
.navs-talk .icb-star { background: #fff; }

.sheet-back[hidden] { display: none; }

.sheet-back {
    position: fixed;
    inset: 0;
    z-index: 3600;
    background: rgba(20, 14, 12, .55);
    backdrop-filter: blur(3px);
    display: grid;
    place-items: center;
    padding: 18px;
}

.sheet {
    position: relative;
    width: min(560px, 94vw);
    max-height: 92vh;
    overflow-y: auto;
    /* A thin scrollbar that sits inside the rounded card, not a grey gutter
       down its edge. */
    scrollbar-width: thin;
    scrollbar-color: #d6d0c4 transparent;
    scrollbar-gutter: stable;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5);
    padding: 22px 24px 20px;
}

.sheet::-webkit-scrollbar { width: 6px; }
.sheet::-webkit-scrollbar-track { background: transparent; margin: 14px 0; }
.sheet::-webkit-scrollbar-thumb { background: #d6d0c4; border-radius: 6px; }
.sheet::-webkit-scrollbar-thumb:hover { background: var(--red); }

/* The branch on the map, inside the sheet. */
.sheet-map {
    height: 240px;
    margin: 0 0 12px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--bg);
}

.sheet-map[hidden] { display: none; }
.sheet-map iframe { display: block; width: 100%; height: 100%; border: 0; }

.sheet-region {
    margin: 0 0 2px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--red-dark);
    min-height: 0;
}

.sheet h3 { margin: 0 0 4px; font-family: var(--head); font-size: 23px; text-transform: uppercase; }
.sheet-addr { margin: 0 0 16px; color: var(--muted); font-size: 13px; }

.sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.sheet-grid:empty { display: none; margin: 0; }

.sheet-label {
    margin: 0 0 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--muted);
}

.sheet-maps { display: grid; gap: 8px; margin-bottom: 14px; }

.sheet-tile {
    display: grid;
    place-items: center;
    padding: 12px 10px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    background: #fffdfc;
    font: inherit;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    color: var(--ink);
    cursor: pointer;
    transition: transform .12s ease, border-color .12s ease;
}

.sheet-tile:hover { transform: translateY(-1px); border-color: var(--red); }

.sheet-wa { background: #e9f8ef; border-color: #c3e9d2; color: #137a3c; }
.sheet-tel { background: #fdf1f1; border-color: #f0cfd0; color: var(--red-dark); }

/*  Each tile wears its own mark - the WhatsApp glyph in WhatsApp's green,
    a handset in the brand's dark red - drawn inline like every other icon
    on the site, nothing fetched.  */
/*  The WhatsApp and Call tiles are one line each - icon, word, number -
    rather than a tall block apiece, so two numbers cost the sheet a row
    and the map gets the room.  */
.sheet-wa, .sheet-tel {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    font-size: 12.5px;
    text-align: start;
    min-width: 0;
}

.sheet-wa .tile-num, .sheet-tel .tile-num {
    margin: 0 0 0 auto;
    font-size: 12.5px;
    opacity: .85;
    white-space: nowrap;
}

.sheet-wa::before, .sheet-tel::before {
    content: '';
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.sheet-wa::before {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23137a3c'><path d='M12.04 2c-5.5 0-9.96 4.46-9.96 9.96 0 1.76.46 3.48 1.34 5L2 22l5.16-1.35a9.9 9.9 0 0 0 4.88 1.25h.01c5.5 0 9.96-4.46 9.96-9.96S17.54 2 12.04 2Zm0 18.2h-.01a8.2 8.2 0 0 1-4.19-1.15l-.3-.18-3.06.8.82-2.98-.2-.31a8.24 8.24 0 1 1 6.94 3.82Zm4.52-6.16c-.25-.13-1.47-.72-1.69-.8-.23-.09-.39-.13-.56.12s-.64.8-.79.97c-.14.16-.29.18-.54.06-.25-.13-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.01-.38.11-.5.11-.11.25-.29.37-.44.13-.15.17-.25.25-.42.08-.17.04-.31-.02-.44-.06-.12-.56-1.35-.77-1.85-.2-.48-.4-.42-.56-.43h-.48c-.16 0-.43.06-.65.31-.22.25-.85.83-.85 2.03s.87 2.35.99 2.51c.12.17 1.71 2.61 4.14 3.66.58.25 1.03.4 1.38.51.58.19 1.11.16 1.53.1.47-.07 1.47-.6 1.67-1.18.21-.58.21-1.07.15-1.18-.06-.11-.22-.17-.47-.29Z'/></svg>");
}

.sheet-tel::before {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a5171d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.13.96.36 1.9.7 2.8a2 2 0 0 1-.45 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.45c.9.34 1.84.57 2.8.7a2 2 0 0 1 1.7 2.05Z'/></svg>");
}
.sheet-go { background: var(--red); border-color: var(--red); color: #fff; }
.sheet-go:hover { border-color: var(--red-dark); background: var(--red-dark); }

.sheet-foot { display: grid; }
.sheet-foot:empty { display: none; }
.sheet-review { background: #fdf4e3; border-color: #eed9a9; color: #8a6100; }

.sheet-close { z-index: 2; }

/*  On a phone the sheet stands at the bottom, the way phone sheets do,
    and slides up.  */
@media (max-width: 640px) {
    .sheet-back { place-items: end center; padding: 0; }

    /*  One tile per line on a phone: two side by side left no room for a
        number, and the numbers ran into each other.  */
    .sheet-grid { grid-template-columns: 1fr; }

    .sheet {
        width: 100%;
        border-radius: 20px 20px 0 0;
        padding-bottom: max(20px, env(safe-area-inset-bottom));
        animation: sheet-up .25s ease-out;
    }
}

@keyframes sheet-up {
    from { transform: translateY(40px); opacity: .4; }
    to { transform: none; opacity: 1; }
}

/* ============================================================================
   Export PDF, on the menu page

   The menu is copied onto a stage of fixed width at the very top of the
   document, behind a curtain, and photographed there. Everything a phone's
   stylesheet would change about a card is pinned back to the desktop value
   with !important, so the stage measures the same on every screen - and the
   same as html2canvas's own copy of it, which is laid out at desktop width.
   ======================================================================== */

.pdfstage {
    position: absolute;
    top: 0;
    left: 0;
    width: 1240px;
    background: #fff;
    color: var(--ink);
    padding: 0 0 8px;
    z-index: 0;
}

.pdfcurtain {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(255, 255, 255, .96);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 600;
    color: var(--red-dark);
}

.pdfcurtain > div { display: flex; align-items: center; gap: 12px; }

.pdfcurtain .spin {
    width: 22px;
    height: 22px;
    border: 3px solid #f3c9cb;
    border-top-color: var(--red);
    border-radius: 50%;
    animation: pdfspin .8s linear infinite;
}

@keyframes pdfspin { to { transform: rotate(360deg); } }

.pdfstage .pdfhead {
    background: var(--red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
    margin: 0 0 28px;
}

.pdfstage .pdfhead img, .pdfstage .pdfhead svg { height: 50px; width: auto; display: block; }
.pdfstage .pdfhead .t { text-align: end; font-family: var(--head); font-size: 26px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; line-height: 1.1; }
.pdfstage .pdfhead .t small { display: block; font: 600 13px/1.4 var(--body); letter-spacing: .2px; text-transform: none; opacity: .92; }

.pdfstage .cat { margin: 0 32px 40px !important; }
.pdfstage .cat .catbody { display: block !important; }
.pdfstage .cat-fold { display: none !important; }
.pdfstage .cathead { cursor: default; margin: 0 0 16px !important; padding-bottom: 12px !important; }
.pdfstage .cathead h2 { font-size: 25px !important; }
.pdfstage .cathead h2 .ar { font-size: 22px !important; }
.pdfstage .sec { margin: 0 0 30px !important; }
.pdfstage .grid { grid-template-columns: repeat(5, 1fr) !important; gap: 16px !important; }
.pdfstage .card { transform: none !important; box-shadow: 0 2px 8px rgba(120, 60, 50, .1) !important; break-inside: avoid; }
.pdfstage .card .ph img { transform: none !important; }
/*  html2canvas cannot draw a line clamp, and clips a box short - so the
    description is left unclipped here and shortened to two lines' worth of
    words by the script instead. */
.pdfstage .desc { display: block !important; max-height: none !important; overflow: visible !important; }
.pdfstage .card .body { padding: 8px 16px 16px !important; gap: 6px !important; }
.pdfstage .nms .en { font-size: 19px !important; }
.pdfstage .nms .ar { font-size: 16.5px !important; }
.pdfstage .card .price { padding: 2px 0 !important; gap: 6px !important; }
.pdfstage .card .price i { font-size: 11.5px !important; letter-spacing: .8px !important; gap: 6px !important; }
.pdfstage .card .price i::after { min-width: 12px !important; }
.pdfstage .card .price b { font-size: 17px !important; }
.pdfstage .card .price.lone b { font-size: 19px !important; }

.pdfstage .pdffoot {
    margin: 0 32px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 12.5px;
    color: var(--muted);
}

/* The button beside Collapse all / Expand all. */
.foldall.pdfall { color: #fff; background: var(--red); border-color: var(--red); }
.foldall.pdfall > span[aria-hidden] { color: #fff; font-size: 13px; }
.foldall.pdfall:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }
.foldall[disabled] { opacity: .7; cursor: default; }

/* ============================================================================
   The shield: pictures that cannot be dragged, selected or saved the easy
   way, and a page that prints blank. See js/shield.js.
   ======================================================================== */

main img, .mv-shot img, .ph img {
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;   /* no long-press "save image" sheet on iPhone */
}

.img-veil {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: transparent;
}

/* The curtain: down whenever the page is not the thing in front. */
.shield-curtain {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--red);
    color: #fff;
    text-align: center;
    font-weight: 700;
}
.shield-curtain img { display: block; margin: 0 auto 18px; width: 120px; height: 120px; }
.shield-curtain p { margin: 4px 0; font-size: 16px; }
html.curtained .shield-curtain { display: flex; }
html.curtained body > :not(.shield-curtain) { visibility: hidden; }

/* The veil must not swallow the tap that opens a card's popup: it passes it on. */
.card .img-veil { pointer-events: none; }

@media print {
    html.no-print body { display: none !important; }
}

/* The sealed pictures are drawn on canvases; they dress exactly like the images they stand for. */
.ph canvas.sealed { width: 100%; height: 100%; object-fit: contain; position: relative; display: block; transition: transform .4s ease; }
.card:hover .ph canvas.sealed { transform: scale(1.06); }
.mv-shot canvas.sealed { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.mv-thumb canvas.sealed { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: var(--bg); display: block; margin-bottom: 5px; }
.pdfstage .card .ph canvas.sealed { transform: none !important; }
main canvas.sealed, .mv-shot canvas.sealed { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }