/* The storefront design system - tokens and the components every page shares.
 *
 * Loaded by the storefront shell, so it is the ONE place the visual language is defined.
 * `storefront-menu.css` and `storefront-pages.css` hold page layout and consume these;
 * neither defines a colour, a radius or a shadow of its own any more. That is the whole
 * point of this file: the menu and the checkout were drifting into two styles.
 *
 * Brand identity is unchanged - white surfaces, `--brand` (#0052ff) for every primary
 * action. The sophistication comes from surfaces, elevation and spacing rather than from
 * new colours. There are no new hues here: every tint below is the existing blue at low
 * opacity, so the palette cannot drift away from the product.
 *
 * INDUSTRY NEUTRAL. Nothing here assumes what a tenant sells. A card holds a name, an
 * optional line, a price and one action, and that shape is as true of "Wash & Fold, per
 * kg" as of a dosa or a haircut.
 */

:root {
  /* -- page measures: THREE, and every page picks one ---------------------------
   *
   * Storefront pages carried their own pixel numbers - 520, 620, 640, 860 - so the
   * margins changed as a customer moved between them, and on a wide monitor a 620px
   * column left most of the screen empty. Three named intents instead, so a page says
   * what KIND of page it is and the numbers stay in one file.
   *
   * `min(..., 100%)` rather than a bare pixel value: the measure collapses on a phone
   * without needing a media query, so the gutter below is the only thing controlling
   * the edge and it is the same on every page and every screen.
   *
   * NOT `--sf-measure`. That is the menu column's own measure, which its furniture -
   * the category bubble, the basket bar - is positioned from; it lives in
   * storefront-menu.css and is guarded against being defined twice.
   */
  --sf-page-wide: min(1100px, 100%);    /* grids and lists: room results, catalogues */
  --sf-page: min(760px, 100%);          /* one column of reading: a booking, an order */
  --sf-page-form: min(560px, 100%);     /* a single form: sign in, choose an outlet */

  /* The same edge everywhere. Scales with the viewport so a phone gets a real margin
   * and a monitor does not get a canyon. */
  --sf-gutter-x: clamp(16px, 4vw, 32px);

  /* -- surfaces: white first, tinted only where a section needs separating ------ */
  --sf-surface: #ffffff;
  --sf-sunken: #f7f9fc;                 /* page-level ground behind cards */
  --sf-tint: rgba(0, 82, 255, .035);    /* the brand, barely there */
  --sf-tint-strong: rgba(0, 82, 255, .07);

  /* -- lines: two weights, so hierarchy does not depend on colour -------------- */
  --sf-line: #e8ecf3;
  --sf-line-strong: #d4dbe6;

  /* -- elevation: three steps and no more. A shadow on everything is noise ----- */
  --sf-shadow-1: 0 1px 2px rgba(16, 32, 64, .04), 0 1px 3px rgba(16, 32, 64, .05);
  --sf-shadow-2: 0 2px 4px rgba(16, 32, 64, .04), 0 6px 16px rgba(16, 32, 64, .08);
  --sf-shadow-3: 0 8px 24px rgba(16, 32, 64, .10), 0 2px 6px rgba(16, 32, 64, .06);

  /* -- radius scale ------------------------------------------------------------ */
  --sf-r-sm: 8px;
  --sf-r-md: 12px;
  --sf-r-lg: 16px;
  --sf-r-pill: 999px;

  /* -- spacing scale. Every margin in the storefront is one of these ----------- */
  --sf-1: 4px;
  --sf-2: 8px;
  --sf-3: 12px;
  --sf-4: 16px;
  --sf-5: 24px;
  --sf-6: 32px;
  --sf-7: 48px;

  /* -- motion: quick enough to feel immediate, never a wait ------------------- */
  --sf-fast: 120ms;
  --sf-base: 180ms;
  --sf-ease: cubic-bezier(.2, 0, .2, 1);

  --sf-focus: 0 0 0 3px rgba(0, 82, 255, .22);

  /* -- status colours ---------------------------------------------------------
   * The only hues outside the brand, and they earn it: these say what happened to an
   * order, which blue cannot. Defined here so the chips, the life track and anything
   * later all read the same green for "good news". */
  --sf-ok-bg: #dcfce7;      --sf-ok-ink: #166534;   /* ready, done, good news */
  --sf-wait-bg: #fef3c7;    --sf-wait-ink: #92400e; /* the outlet has to act */
  --sf-act-bg: #fed7aa;     --sf-act-ink: #9a3412;  /* the CUSTOMER has to act */
  --sf-live-bg: #dbeafe;    --sf-live-ink: #1e40af; /* under way */
  --sf-quiet-bg: #f1f5f9;   --sf-quiet-ink: #475569;/* neutral, never alarming */
  --sf-danger-ink: #9a3412; --sf-danger-line: #f0b9a4;
}

/* Anyone who has asked their system not to animate gets no animation. */
@media (prefers-reduced-motion: reduce) {
  :root { --sf-fast: 0ms; --sf-base: 0ms; }
}

/* -- the ambient ground ------------------------------------------------------- */

/* A very soft blue wash at the top of the page, fading to white well before the content
 * ends. It gives the storefront a sense of place without becoming "a gradient page" -
 * below roughly 480px it is pure white and every card sits on paper. */
body.sf-body {
  background:
    linear-gradient(180deg, var(--sf-tint-strong) 0, rgba(0, 82, 255, 0) 420px),
    var(--sf-surface);
  background-repeat: no-repeat;
}

/* -- cards: the one surface treatment ----------------------------------------- */

.sf-card {
  background: var(--sf-surface);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-r-lg);
  box-shadow: var(--sf-shadow-1);
}

/* Lift only where a card is a target. A card that merely groups information does not
 * move under the cursor, because movement is a promise that something will happen. */
.sf-card--interactive {
  transition: box-shadow var(--sf-base) var(--sf-ease),
              border-color var(--sf-base) var(--sf-ease),
              transform var(--sf-base) var(--sf-ease);
}
@media (hover: hover) {
  .sf-card--interactive:hover {
    box-shadow: var(--sf-shadow-2);
    border-color: var(--sf-line-strong);
    transform: translateY(-2px);
  }
}

/* -- buttons: the existing .btn, given a press and a focus ring --------------- */

.btn {
  border-radius: var(--sf-r-sm);
  transition: background var(--sf-fast) var(--sf-ease),
              box-shadow var(--sf-fast) var(--sf-ease),
              transform var(--sf-fast) var(--sf-ease);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--sf-focus); }

/* The primary action carries a restrained vertical gradient - enough to read as a raised
 * surface, not enough to read as decoration. */
.btn--primary {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0));
  box-shadow: var(--sf-shadow-1);
}
.btn--primary:hover { box-shadow: var(--sf-shadow-2); }

/* -- search: one field, used wherever a storefront searches ------------------- */

.sf-search { position: relative; display: block; }
.sf-search__input {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: .95rem;
  padding: 11px 40px 11px 40px;
  background: var(--sf-surface);
  border: 1px solid var(--sf-line-strong);
  border-radius: var(--sf-r-md);
  box-shadow: var(--sf-shadow-1);
  transition: border-color var(--sf-fast) var(--sf-ease),
              box-shadow var(--sf-fast) var(--sf-ease);
}
.sf-search__input:focus {
  outline: none;
  border-color: var(--brand, #0052ff);
  box-shadow: var(--sf-focus);
}
.sf-search__icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--muted, #6b7787);
  pointer-events: none;
}
.sf-search__clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; cursor: pointer;
  color: var(--muted, #6b7787); font-size: 1.1rem; line-height: 1;
  padding: 6px 8px; border-radius: var(--sf-r-sm);
}
.sf-search__clear:hover { background: var(--sf-tint-strong); }
.sf-search__clear[hidden] { display: none; }

/* -- horizontal chip navigation ---------------------------------------------- */

/* Scrolls rather than wraps, so a tenant with twenty categories gets a strip rather than
 * five stacked lines pushing the catalogue off the screen. */
.sf-cats {
  display: flex; gap: var(--sf-2);
  overflow-x: auto; scrollbar-width: none;
  padding: var(--sf-2) 0;
  margin: 0; list-style: none;
  scroll-snap-type: x proximity;
}
.sf-cats::-webkit-scrollbar { display: none; }

.sf-cats__item { scroll-snap-align: start; flex: 0 0 auto; }
.sf-cats__btn {
  font: inherit; font-size: .88rem; font-weight: 600;
  white-space: nowrap; cursor: pointer;
  padding: 8px 14px;
  border: 1px solid var(--sf-line-strong);
  border-radius: var(--sf-r-pill);
  background: var(--sf-surface);
  color: var(--body, #33404f);
  transition: background var(--sf-fast) var(--sf-ease),
              border-color var(--sf-fast) var(--sf-ease),
              color var(--sf-fast) var(--sf-ease);
}
.sf-cats__btn:hover { border-color: var(--sf-line-strong); background: var(--sf-tint); }
.sf-cats__btn:focus-visible { outline: none; box-shadow: var(--sf-focus); }

/* The selected state is filled, not merely tinted: a strip of pale chips with one
 * slightly paler is not an answer to "where am I". */
.sf-cats__btn[aria-current="true"] {
  background: var(--brand, #0052ff);
  border-color: var(--brand, #0052ff);
  color: #fff;
}
.sf-cats__count { opacity: .62; font-weight: 500; margin-left: 5px; }

/* -- a section of the page --------------------------------------------------- */

/* Rhythm from spacing and weight rather than a rule under every heading. */
.sf-block { margin-top: var(--sf-6); }
.sf-block__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sf-3); margin-bottom: var(--sf-3);
}
.sf-block__title {
  font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--ink, #0b1220); margin: 0;
}
.sf-block__meta { font-size: .84rem; color: var(--muted, #6b7787); white-space: nowrap; }
.sf-block__sub { font-size: .88rem; color: var(--muted, #6b7787); margin: 2px 0 0; }

/* -- an image that failed, or was never there -------------------------------- */

/* NOT a broken-image icon. The storefront's own placeholder: a tinted panel with the
 * item's initial, which reads as "no picture" rather than "this page is broken".
 * The image system itself - uploads, sizes, storage - is untouched; this is only what is
 * shown when the browser has nothing to draw. */
.sf-thumb {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--sf-tint-strong), var(--sf-tint));
  border-radius: var(--sf-r-md);
  display: flex; align-items: center; justify-content: center;
  color: rgba(0, 82, 255, .42);
  font-weight: 700; letter-spacing: -.02em;
  flex: 0 0 auto;
}
.sf-thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Set by the script when a real image fails to load, so the initial underneath shows
 * through instead of a torn-page glyph. */
.sf-thumb img.is-broken { display: none; }

/* -- contextual back navigation ---------------------------------------------- */

/* The shape the order tracking page already used, promoted into the system so every page
 * that needs one looks the same. A LINK, not a button: it goes somewhere, it is not the
 * page's action, and a filled blue control here would compete with Checkout or Place order
 * for the press a customer actually came to make.
 *
 * Deliberately quiet. Its job is to be findable without being the thing you notice first.
 */
.sf-back {
  display: inline-flex; align-items: center; gap: var(--sf-2);
  /* A real touch target without looking like a button - the padding is the target, the
   * negative left margin keeps the text optically aligned with the heading below it. */
  padding: 6px 8px; margin: 0 0 var(--sf-2) -8px;
  border-radius: var(--sf-r-sm);
  font-size: .88rem; font-weight: 500;
  color: var(--muted, #6b7787);
  transition: color var(--sf-fast) var(--sf-ease),
              background var(--sf-fast) var(--sf-ease);
}
.sf-back:hover { color: var(--brand, #0052ff); background: var(--sf-tint); text-decoration: none; }
.sf-back:focus-visible { outline: none; box-shadow: var(--sf-focus); }
.sf-back__arrow { font-size: 1rem; line-height: 1; }

@media (prefers-reduced-motion: reduce) { .sf-back { transition: none; } }


/* -- the page column, one rule for every storefront page ----------------------------
 *
 * The shell sets `max-width` from each page's own block; this is the horizontal padding,
 * which used to come from `.wrap`'s generic `--pad` and therefore differed from the
 * marketing site's. Set here so the storefront's edge is the storefront's own.
 */
.sf-body .wrap { padding-left: var(--sf-gutter-x); padding-right: var(--sf-gutter-x); }

/* -- a grid of cards, used wherever several things are offered side by side ---------
 *
 * `auto-fill` with a minimum, so the same rule gives one column on a phone, two on a
 * tablet and three on a monitor without a media query per breakpoint - which is how the
 * page stays consistent across screen sizes rather than being tuned for one.
 */
.sf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--sf-3, 12px);
  align-items: start;
}

/* A photograph in a card. Fixed display box with `cover`, so a portrait photograph and a
 * landscape one make cards the same height instead of one card a thousand pixels tall.
 * Display only - nothing about the stored file, its dimensions or its resolution changes.
 */
.sf-card__photo {
  display: block; width: 100%; height: 190px; object-fit: cover;
  border-radius: var(--sf-r-md, 8px); background: var(--sf-sunken);
}