/* Layout additions on top of the page's own <style>. The 1200px page cap, the fixed-width grids for Public
   Buildings and the storefronts, and the smaller Shops panel height were rolled back 2026-09-26 (user: the
   pictures had become too small to see); every tile is sized by the page's panel-height rules again. */
.content-container { margin-top: 30px; }
/* The building and its four columns of parts are ~9 panel heights wide: at most 143px keeps entrance / exit /
   wheelchair ramp in the building's row on any window down to ~800px. */
#buildings-view { --panel-height: clamp(80px, 10.3vw, 143px); }
@media (max-width: 860px) { #buildings-view { --panel-height: clamp(62px, 9.6vw, 90px); } }
.pill-navigation { gap: 10px; }
.pill-btn { box-shadow: none; transition: background 120ms ease, border-color 120ms ease; }
.pill-btn.active { box-shadow: 0 2px 6px rgba(52, 80, 111, .18); }
.pill-btn:focus-visible { outline: 3px solid #34506f; outline-offset: 3px; }
/* Shops: market + mall, the supermarket band, then the storefronts, each a centred wrapping row of tiles at
   their natural (panel-height) size */
#shops-view { gap: 28px; }
.shopping-scenes { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px 24px; width: 100%; }
/* tighter part spacing so market + mall (with its larger food court) share a row down to ~1250px */
.shopping-scenes > .pair-group { gap: 16px; }
.supermarket-scene { width: 100%; padding: 24px 0; border-top: 1px solid #d8dce0; border-bottom: 1px solid #d8dce0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 40px; }
/* the grocery store sits to the left of the supermarket group, so that group no longer takes a row of its own */
.supermarket-scene > .pair-group.full-row { flex-basis: auto; }
/* ~12% under the page panel height, so the épicerie column fits beside the supermarket group down to ~1000px */
.supermarket-scene { --panel-height: clamp(85px, 10.25vw, 133px); column-gap: 32px; }
@media (max-width: 900px) { .supermarket-scene { --panel-height: clamp(66px, 11.6vw, 104px); } }
.storefront-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 30px; width: 100%; }
/* the storefronts drawn large (user: bigger); scaled with the window so 12 of them keep 4 + 4 + 4 from ~1024px up */
.storefront-grid { --panel-height: clamp(134px, 14.4vw, 210px); }
@media (max-width: 900px) { .storefront-grid { --panel-height: clamp(104px, 17.4vw, 156px); } }
@media (max-width: 700px) { .storefront-grid { --panel-height: clamp(87px, 26.6vw, 126px); } }
/* Parks & Squares and Cemetery drawn larger (user): as big as keeps the park, and the cemetery, in one row
   with their parts from ~700px up (the park group is ~5.3 panel heights wide, the cemetery ~7) */
#parks-view { --panel-height: clamp(110px, 14vw, 190px); gap: 28px 36px; }
#cemetery-view { --panel-height: clamp(96px, 13vw, 190px); }
@media (max-width: 700px) { #cemetery-view { --panel-height: clamp(62px, 12vw, 90px); } }
#industry-view { --panel-height: clamp(70px, 9.5vw, 120px); }
@media (max-width: 600px) {
  .pill-navigation { gap: 8px; padding-top: 16px; }
  .pill-btn { padding: 9px 14px; font-size: 14px; }
  .content-container { margin-top: 24px; }
  .shopping-scenes { gap: 24px; }
  #shops-view, #parks-view, #industry-view { --panel-height: clamp(62px, 19vw, 90px); }
}
/* the épicerie with the magasin bio under it, as one column beside the supermarket group */
.supermarket-scene > .gallery-item.stack { display: flex; flex-direction: column; align-items: center; gap: 18px; }
/* the bulk section (with its bin and scoop) under the produce section: a notch smaller so the column stays narrow */
.bulk-group { gap: 10px; }
.bulk-group { --panel-height: calc(clamp(85px, 10.25vw, 133px) * 0.65); }
@media (max-width: 900px) { .bulk-group { --panel-height: calc(clamp(66px, 11.6vw, 104px) * 0.65); } }
/* the barrel with the metal drum beside it, under the warehouse's pallet */
.side-by-side { display: flex; align-items: flex-end; gap: 10px; }
/* in a language where the épicerie and the magasin bio are both hidden (American English), drop their empty column so
   it takes no gap and the supermarket group stays centred */
.supermarket-scene > .gallery-item.stack:not(:has(> .img-wrap:not([style*="display: none"]))) { display: none; }