/* ==========================================================================
   LAYOUT — container, grid, sections, header, footer
   ========================================================================== */

/* --------------------------------------------------------------------------
   CONTAINER
   -------------------------------------------------------------------------- */
.container,
.container-fluid {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter-half);
}
@media (min-width: 576px)  { .container { max-width: var(--container-sm); } }
@media (min-width: 768px)  { .container { max-width: var(--container-md); } }
@media (min-width: 992px)  { .container { max-width: var(--container-lg); } }
@media (min-width: 1200px) { .container { max-width: var(--container-xl); } }
@media (min-width: 1400px) { .container { max-width: var(--container-2xl); } }

/* Always the widest measure, no breakpoint steps */
.container-wide {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter-half);
}
.container-narrow {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--gutter-half);
}

/* --------------------------------------------------------------------------
   SECTION
   -------------------------------------------------------------------------- */
.section { padding-block: var(--section-py); }
.section--sm    { padding-block: var(--section-py-sm); }
.section--top   { padding-block: var(--section-py) 0; }
.section--bottom{ padding-block: 0 var(--section-py); }
.section--tint  { background-color: var(--color-surface-tint); }
.section--alt   { background-color: var(--color-surface-alt); }
/* A band that is deliberately the opposite of the page. Surface and content are
   one pair (--color-inverse-*), so the dark scheme moves them together instead
   of inverting the ground out from under hardcoded white text. */
.section--dark  {
  background-color: var(--color-inverse-surface);
  color: var(--color-inverse-content);
}
.section--dark :is(h1,h2,h3,h4,h5,h6) { color: var(--color-inverse-heading); }

/* --------------------------------------------------------------------------
   GRID — 12 columns, gutter-driven
   -------------------------------------------------------------------------- */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(var(--gutter-half) * -1);
}
.row > * {
  padding-inline: var(--gutter-half);
  width: 100%;
}
.row--tight { --gutter-half: 8px; }
.row--loose { --gutter-half: 15px; }

.col      { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1  { flex: 0 0 auto; width: 8.3333%; }
.col-2  { flex: 0 0 auto; width: 16.6667%; }
.col-3  { flex: 0 0 auto; width: 25%; }
.col-4  { flex: 0 0 auto; width: 33.3333%; }
.col-5  { flex: 0 0 auto; width: 41.6667%; }
.col-6  { flex: 0 0 auto; width: 50%; }
.col-7  { flex: 0 0 auto; width: 58.3333%; }
.col-8  { flex: 0 0 auto; width: 66.6667%; }
.col-9  { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.3333%; }
.col-11 { flex: 0 0 auto; width: 91.6667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

@media (min-width: 576px) {
  .col-sm-3 { flex: 0 0 auto; width: 25%; }
  .col-sm-4 { flex: 0 0 auto; width: 33.3333%; }
  .col-sm-6 { flex: 0 0 auto; width: 50%; }
  .col-sm-12{ flex: 0 0 auto; width: 100%; }
}
@media (min-width: 768px) {
  .col-md-2 { flex: 0 0 auto; width: 16.6667%; }
  .col-md-3 { flex: 0 0 auto; width: 25%; }
  .col-md-4 { flex: 0 0 auto; width: 33.3333%; }
  .col-md-6 { flex: 0 0 auto; width: 50%; }
  .col-md-8 { flex: 0 0 auto; width: 66.6667%; }
  .col-md-9 { flex: 0 0 auto; width: 75%; }
  .col-md-12{ flex: 0 0 auto; width: 100%; }
}
@media (min-width: 992px) {
  .col-lg-2 { flex: 0 0 auto; width: 16.6667%; }
  .col-lg-3 { flex: 0 0 auto; width: 25%; }
  .col-lg-4 { flex: 0 0 auto; width: 33.3333%; }
  .col-lg-5 { flex: 0 0 auto; width: 41.6667%; }
  .col-lg-6 { flex: 0 0 auto; width: 50%; }
  .col-lg-7 { flex: 0 0 auto; width: 58.3333%; }
  .col-lg-8 { flex: 0 0 auto; width: 66.6667%; }
  .col-lg-9 { flex: 0 0 auto; width: 75%; }
}
@media (min-width: 1200px) {
  .col-xl-2 { flex: 0 0 auto; width: 16.6667%; }
  .col-xl-3 { flex: 0 0 auto; width: 25%; }
  .col-xl-4 { flex: 0 0 auto; width: 33.3333%; }
  .col-xl-6 { flex: 0 0 auto; width: 50%; }
  .col-xl-8 { flex: 0 0 auto; width: 66.6667%; }
  .col-xl-9 { flex: 0 0 auto; width: 75%; }
}

/* --------------------------------------------------------------------------
   AUTO GRID — preferred for product / category listings.
   Set --min to control the responsive breakpoint without media queries.
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(auto-fill, minmax(var(--min, 220px), 1fr));
}
.grid--products   { --min: 220px; }
.grid--categories { --min: 150px; }
.grid--features   { --min: 260px; }
.grid--tight { gap: var(--space-4); }

/* Two offer cards per row on a phone, not one.
   `auto-fill` with a 220px floor resolves to a single column at 375px, which
   turned the browse page into a scroll of one card at a time - measured at
   5,707px for the front page. The card is the unit this site is a grid of, so
   below the small breakpoint the column count is stated rather than inferred. */
@media (max-width: 575px) {
  .grid--products   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Fixed column counts when the design demands them */
.grid-2 { display: grid; gap: var(--gutter); grid-template-columns: repeat(2, 1fr); }
.grid-3 { display: grid; gap: var(--gutter); grid-template-columns: repeat(3, 1fr); }
.grid-4 { display: grid; gap: var(--gutter); grid-template-columns: repeat(4, 1fr); }
.grid-5 { display: grid; gap: var(--gutter); grid-template-columns: repeat(5, 1fr); }
.grid-6 { display: grid; gap: var(--gutter); grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1199px) {
  .grid-6 { grid-template-columns: repeat(4, 1fr); }
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .grid-3, .grid-4, .grid-5, .grid-6 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
}

/* Content + sidebar shell */
.shell {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 280px minmax(0, 1fr);
}
/* Sidebar on the inline-end side. Grid tracks already follow the writing mode,
   so this needs no [dir] rule — the columns swap themselves. */
.shell--end { grid-template-columns: minmax(0, 1fr) 280px; }
@media (max-width: 991px) {
  .shell, .shell--end { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: var(--z-sticky);
  background: var(--color-surface);
}

/* Thin promo strip above the header. Inverse pair, not white-over-heading:
   the old pairing went to 1.10:1 the moment --color-heading inverted for dark. */
.topbar {
  background: var(--color-inverse-surface);
  color: var(--color-inverse-content);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 40px;
  flex-wrap: wrap;
}
.topbar a { color: inherit; }
.topbar a:hover { color: var(--color-accent); }

/* The colour-scheme control. It lives in the strip beside the language switch
   because it is the same kind of thing — a display preference, not navigation —
   and the two read as a pair there.

   Bare: no fill, no border, inheriting the strip's own colour. A button drawn as
   a button in a 32px strip would outweigh everything else in it, and this is the
   least important control on the page until the moment somebody wants it. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
}
.theme-toggle:hover { color: var(--color-accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.theme-toggle__icon { font-size: 14px; }
/* The label is the state, not the action, so it is the first thing to go when
   the strip runs out of room — the icon still says which state it is in. */
@media (max-width: 575px) {
  .theme-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .theme-toggle__icon { font-size: 16px; }
}

/* The slogan is the first thing to go on a phone. The strip has to keep the
   support number and the language switch — those are functions — and a tagline
   is not worth 8px of a viewport that has 812 of them. */
@media (max-width: 767px) {
  .topbar__inner { min-height: 32px; font-size: var(--fs-xs); }
  .topbar__tagline { display: none; }
}

/* Main bar: logo | search | actions */
.header-main {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  min-height: var(--header-height);
  border-bottom: 1px solid var(--color-border-soft);
}
.header-main__search { flex: 1 1 auto; min-width: 0; }
.header-main__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
/* The city scope, beside the account icon.

   It sits on the main bar rather than in the topbar strip because it narrows
   CONTENT — the colour scheme up there narrows nothing, it only changes how the
   same page looks. Drawn bare for the same reason the toggle is: three controls
   in a row, and only one of them can be the loud one.

   A native select, not a popover. The list is every city in the country grouped
   by governorate, and the platform's own picker beats anything hand-rolled here
   on the phones this site mostly runs on. Its chevron and its RTL mirror come
   from forms.css and bidi.css, so nothing physical is written below.

   `max-width` and the ellipsis are the whole reason this is not just a select:
   a long city name would otherwise push the search pill about until the bar
   reflowed, and the bar's width is not the city's business.

   Every rule for the select is written as `.city-picker .city-picker__select`,
   and the doubled class is not an accident. forms.css styles the bare `select`
   element and is linked AFTER this file, so `select:hover` and `select:focus`
   outrank a single class here whatever the order — one class would lose the
   transparent border on hover, and the focus ring below would never appear. */
.city-picker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  max-width: 190px;
}
.city-picker__icon {
  flex-shrink: 0;
  font-size: 16px;
  color: var(--color-meta);
}
.city-picker .city-picker__select {
  width: auto;              /* forms.css gives every control 100%; this one is sized by the bar */
  height: 40px;
  min-width: 0;
  /* Both axes, and the block one is not optional. forms.css pads every control
     12px top and bottom, and with border-box a 40px box has 14px left for a
     20.8px line — the label rendered cut off through the middle. Zero here and
     the select centres its own text in the height, which is what the height was
     for. Anything that sets `height` on a control in this file owes it this. */
  padding-block: 0;
  padding-inline: var(--space-2) var(--space-8);
  border-color: transparent;
  background-color: transparent;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-overflow: ellipsis;
}
.city-picker .city-picker__select:hover {
  border-color: transparent;
  background-color: var(--color-surface-alt);
}
/* Restated, because the rule above outranks the one in forms.css that would
   otherwise draw it. A control with no border has no other way to say it has
   the keyboard. */
.city-picker .city-picker__select:focus {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

/* In the drawer it is the widest thing on screen rather than the narrowest, and
   it gets its border back: there is nothing beside it to be quieter than, and a
   borderless select in a panel of links does not read as a control at all. */
.city-picker--drawer {
  display: flex;
  max-width: none;
  margin-block-end: var(--space-5);
}
.city-picker--drawer .city-picker__select,
.city-picker--drawer .city-picker__select:hover {
  flex: 1 1 auto;
  height: 44px;
  border-color: var(--color-border);
  background-color: var(--color-surface);
}

/*
   Two rows on a small screen — logo and actions, then the search — and every
   value in here is the smallest one that still leaves a 44px tap target.

   It was 142px measured at 375px wide, on top of a 68px bottom bar: a quarter
   of the viewport spent before any content, on the device most of this site's
   traffic arrives on. This is that, trimmed to roughly 100.
*/
@media (max-width: 991px) {
  .header-main {
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-block: var(--space-2);
    min-height: 0;
  }
  .header-main__search { order: 3; flex-basis: 100%; }
  .site-logo { font-size: var(--fs-h5); }
}

/*
   On a phone the header drops to ONE row: the logo and the search, and nothing
   else.

   The account link and the category menu are not lost — they are the two things
   the bottom bar already carries, and carrying them twice cost a whole 44px row
   at the top of every page. Below 768px is exactly where `.mobile-bar` appears,
   so the two rules are the same decision written in two files.

   Measured at 375px: 151px of header before this, 90 after.
*/
@media (max-width: 767px) {
  .header-main__actions { display: none; }
  .header-main__search { order: 0; flex: 1 1 180px; flex-basis: 180px; }
  .site-logo { min-width: 0; }
  .site-logo > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  letter-spacing: var(--ls-tight);
}
.site-logo:hover { color: var(--color-primary); }
.site-logo svg { color: var(--color-primary); }

/* The uploaded mark, capped rather than sized: a deployment's logo is whatever
   shape it is, and the header decides the height. */
.site-logo__mark { max-height: 40px; width: auto; }
@media (max-width: 991px) { .site-logo__mark { max-height: 32px; } }

/* Nav bar below the main header */
.header-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 56px;
}

.site-header--sticky {
  position: sticky;
  top: 0;
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-surface-alt);
  color: var(--color-body);
}
.site-footer--dark {
  background: var(--color-inverse-surface);
  color: var(--color-inverse-content);
}
.site-footer--dark :is(h1,h2,h3,h4,h5,h6),
.site-footer--dark .footer-widget__title { color: var(--color-inverse-heading); }
.site-footer--dark a { color: inherit; }
.site-footer--dark a:hover { color: var(--color-accent); }
.site-footer--dark .footer-bottom { border-top-color: var(--color-inverse-border); }

.footer-top {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  padding-block: var(--space-11);
}
.footer-widget__title {
  margin-bottom: var(--space-5);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  color: var(--color-heading);
}
.footer-menu { list-style: none; margin: 0; padding: 0; }
.footer-menu li { margin-bottom: var(--space-3); }
.footer-menu a { color: inherit; }
.footer-menu a:hover { color: var(--color-primary); padding-inline-start: var(--space-1); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-base);
}

/* Sticky mobile action bar */
.mobile-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-sticky);
  display: none;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-soft);
  box-shadow: 0 -4px 20px rgb(0 0 0 / 6%);
}
.mobile-bar__inner {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}
.mobile-bar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-body);
}
.mobile-bar a.is-active { color: var(--color-primary); }
@media (max-width: 767px) {
  .mobile-bar { display: block; }
  body.has-mobile-bar { padding-bottom: calc(var(--mobile-bar-height) + var(--space-1)); }

  /*
     The offer page stands the navigation bar down.

     That page pins its outbound actions to the foot of the viewport — call,
     WhatsApp, directions, website — and those are the only measured outcome the
     platform has. Two fixed bars stacked at the bottom of a 375px screen is a
     quarter of it spent on chrome, so the specific one wins and the general one
     steps aside; the same four destinations are a tap away in the header's menu
     and at the top of the page.
  */
  body.has-offer-actions .mobile-bar { display: none; }

  /* …and pays for the taller bar it put there instead. The action bar holds two
     full-height buttons rather than four icon columns, so it stands clear of
     `--mobile-bar-height`; without this the last thing on the page sits under
     it. */
  body.has-offer-actions { padding-bottom: calc(var(--mobile-bar-height) + var(--space-6)); }
}