html,
body {
  margin: 0;
  overflow-x: clip;
}

@media (max-width: 768px) {
  header {
    padding: 10px 14px !important;
    column-gap: 10px !important;
    row-gap: 6px !important;
  }

  header > a:first-child {
    min-width: 0;
    font-size: 18px !important;
    line-height: 1.1;
  }

  header > a:first-child > div:first-child {
    flex: 0 0 36px;
  }

  header > a:first-child > div:last-child {
    font-size: 16px !important;
    line-height: 1.05;
  }

  header > div:last-child {
    margin-left: auto;
  }

  header > div:last-child > span {
    display: none !important;
  }

  header > div:last-child a,
  header > a:last-child {
    padding: 10px 13px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }

  header nav {
    display: flex !important;
    order: 3;
    width: 100%;
    gap: 20px !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 2px 0;
    scrollbar-width: none;
  }

  header nav::-webkit-scrollbar {
    display: none;
  }

  header nav a {
    display: inline-flex;
    align-items: center;
    min-width: max-content;
    min-height: 40px;
  }

  section[style*="display:flex"] {
    flex-direction: column !important;
  }

  section > div[style*="padding:78px 56px"] {
    padding: 52px 18px !important;
  }

  image-slot[style*="height:580px"],
  image-slot[style*="height:460px"],
  image-slot[style*="height:430px"],
  image-slot[style*="height:360px"] {
    height: min(82vw, 360px) !important;
  }

  [style*="grid-auto-rows"] {
    grid-auto-rows: 190px !important;
  }

  [style*="grid-column"],
  [style*="grid-row"] {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  [style*="display:flex"][style*="gap:14px"] {
    flex-wrap: wrap !important;
  }

  iframe {
    width: 100%;
    min-height: 300px;
  }

  img,
  svg,
  video {
    max-width: 100%;
  }
}

@media (max-width: 420px) {
  h1 {
    overflow-wrap: anywhere;
  }

  section [style*="display:flex"][style*="gap:14px"] > a {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* Keep the map's directions pill clear of the floating order button.
   Both sit bottom-right, so they collide at ANY width once the map's
   bottom edge lines up with the viewport bottom -- not just on phones,
   which is what the old max-width:768px version of this rule missed. */
.map-cta {
  right: auto !important;
  left: 16px !important;
  bottom: 16px !important;
}

/* -- Mobile tightening -------------------------------------------------
   Desktop section padding (54-64px) and column gaps (40-48px) read too airy
   on a phone.

   The attribute selectors carry a space after the colon because that is how
   the style attribute reads AT RUNTIME: the source HTML writes
   "padding:64px 44px", but the browser reserialises the attribute (spaces
   added, hex colours turned into rgb()) as soon as anything touches
   el.style, and [style*=...] matches the serialised value. Confirmed in-page
   2026-09-09: #food resolves to padding-top 40px, so these DO apply. Both
   forms are listed so the rules also survive a bundler that never triggers
   the reserialisation. Never key one of these selectors on a hex colour.

   Longhand padding-top/bottom keeps the 18px sides from the head rule.     */
@media (max-width: 768px) {
  section[style*="padding:64px 44px"], section[style*="padding: 64px 44px"] { padding-top: 40px !important; padding-bottom: 40px !important; }
  section[style*="padding:60px 44px"], section[style*="padding: 60px 44px"] { padding-top: 40px !important; padding-bottom: 40px !important; }
  section[style*="padding:54px 44px 60px"], section[style*="padding: 54px 44px 60px"] { padding-top: 28px !important; padding-bottom: 38px !important; }
  section[style*="padding:20px 44px 60px"], section[style*="padding: 20px 44px 60px"] { padding-top: 6px !important; padding-bottom: 38px !important; }
  section[style*="padding:0px 44px 60px"], section[style*="padding: 0px 44px 60px"] { padding-top: 0 !important; padding-bottom: 38px !important; }
  section[style*="padding:36px 44px"], section[style*="padding: 36px 44px"] { padding-top: 22px !important; padding-bottom: 22px !important; }
  section[style*="padding:26px 44px"], section[style*="padding: 26px 44px"] { padding-top: 16px !important; padding-bottom: 16px !important; }
  section[style*="padding:44px;"], section[style*="padding: 44px;"] { padding-top: 30px !important; padding-bottom: 30px !important; }

  /* Pull stacked columns and card grids closer together */
  [style*="gap:40px"], [style*="gap: 40px"] { gap: 20px !important; }
  [style*="gap:44px"], [style*="gap: 44px"] { gap: 20px !important; }
  [style*="gap:48px"], [style*="gap: 48px"] { gap: 22px !important; }
  [style*="gap:36px"], [style*="gap: 36px"] { gap: 20px !important; }

  /* Trim the large heading-to-content gaps */
  [style*="margin-bottom:56px"], [style*="margin-bottom: 56px"] { margin-bottom: 26px !important; }
  [style*="margin-bottom:44px"], [style*="margin-bottom: 44px"] { margin-bottom: 24px !important; }
  [style*="margin-bottom:40px"], [style*="margin-bottom: 40px"] { margin-bottom: 22px !important; }
  [style*="margin-bottom:36px"], [style*="margin-bottom: 36px"] { margin-bottom: 20px !important; }

  /* The rounded "Family time" panel is heavily padded for desktop */
  [style*="padding:48px"], [style*="padding: 48px"] { padding: 24px !important; }
}

/* ---------------------------------------------------------------
   Photo grids (home "Say cheese(cake)!" + /gallery)
   The head rule collapses every inline grid to a single column, which
   turns these real shop photos into 200px letterbox strips. Two columns
   reads far better on a phone, and the portrait shots (.tall) keep their
   double-height cell so they aren't cropped to a sliver.               */
@media (max-width: 768px) {
  .photo-grid { column-count: 2 !important; column-gap: 8px !important; }
  .photo-grid > img { margin: 0 0 8px !important; border-width: 3px !important; }
  
  
}

/* ---------------------------------------------------------------
   Page-hero captions (/menu /cakes /gallery /contact /about)
   Every interior banner is 1600x592, so at 375px wide it renders only
   ~138px tall -- far shorter than the caption stacked inside it, and the
   badge + h1 + strapline spilled out over the artwork. On a phone the
   caption drops out of the overlay and becomes a solid block beneath the
   banner instead: the whole banner stays visible (the /contact shopfront
   sign in particular would lose its roundel to a cover-crop) and the
   heading gets the room it needs.                                      */
@media (max-width: 768px) {
  .page-hero .overlay {
    position: static !important;
    inset: auto !important;
    background: #2F2226 !important;
    padding: 20px 18px 24px !important;
  }
}

/* ---------------------------------------------------------------
   Home "facts" strip (.facts-strip)
   Desktop lays six facts in one centred flex row separated by bullet divs.
   On a phone every fact wrapped onto its own line AND each separator became
   a line of its own -- eleven rows, a stray dot above five of them, and a
   maroon band ~440px tall. The separators are decoration for the one-line
   desktop layout only, so they are dropped here and the facts become a
   compact two-column grid carrying their own bullet markers.

   Targeted by CLASS, not by [style*=...]: the browser reserialises the inline
   style attribute once anything touches el.style, so "background:#552C33"
   becomes "background: rgb(85, 44, 51)" at runtime and a hex-based attribute
   selector never matches. Verified in-page 2026-09-09 (0 elements matched
   [style*="#"], 126 matched [style*="rgb("]).                             */
@media (max-width: 768px) {
  .facts-strip {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 12px 16px !important;
    padding: 20px 18px !important;
  }

  /* the "*" divider divs -- decoration, not content */
  .facts-strip > div:not([style*="font-weight"]) {
    display: none !important;
  }

  .facts-strip > div[style*="font-weight"] {
    font-size: 13.5px !important;
    line-height: 1.3;
    padding-left: 13px;
    position: relative;
  }

  .facts-strip > div[style*="font-weight"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #E0C98F;
  }
}

@media (max-width: 380px) {
  .facts-strip { gap: 10px 12px !important; }
}

/* ---------------------------------------------------------------
   Header brand: Fresh Roast ring + "Cafe Royal" wordmark (2026-09-10).
   The ring replaced the small cup chip as the main logo, so it needs room:
   the lettering is illegible much below ~44px. The wordmark SVG is
   277:80, so every height below keeps that ratio. The mid-width step
   stops the logo, five nav links and the order button crowding one row
   between the 768px mobile layout and a full desktop.                   */
@media (min-width: 769px) and (max-width: 1040px) {
  header .brand-ring { width: 52px !important; height: 52px !important; }
  header .brand-word { width: 111px !important; height: 32px !important; margin-left: 8px !important; }
}
@media (max-width: 768px) {
  header .brand-ring { width: 44px !important; height: 44px !important; }
  header .brand-word { width: 90px !important; height: 26px !important; margin-left: 7px !important; }
}
@media (max-width: 360px) {
  header .brand-word { width: 76px !important; height: 22px !important; }
}

/* ---------------------------------------------------------------
   Current page in the header nav (2026-09-15). Each page marks its own
   link aria-current="page"; a cream pill makes it obvious. The negative
   margin cancels the padding so the words stay where they were.       */
header nav a[aria-current="page"],
header nav a.nav-active {
  color: #6D3B44 !important;
  background: #F4E7C4;
  padding: 6px 12px;
  margin: 0 -12px;
  border-radius: 999px;
  font-weight: 800;
}
/* Home hero: "Collect in store" and "Delivery" rows line their buttons up. */
.hero-delivery > span:first-child { min-width: 152px; }
@media (max-width: 768px) {
  header nav { padding-left: 8px !important; padding-right: 8px !important; }
  header nav a[aria-current="page"],
  header nav a.nav-active { padding: 0 10px; margin: 0 -10px; }
  .hero-delivery > span:first-child { min-width: 0; width: 100%; }
}