* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #101b1e;
  color: #f4f0df;
  font:
    16px/1.5 Arial,
    sans-serif;
  overflow: hidden;
}
#map {
  position: fixed;
  inset: 0;
}
header {
  position: fixed;
  top: 32px;
  left: 40px;
  right: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  font-size: 28px;
  font-weight: 700;
}
.brandmark {
  display: grid;
  place-items: center;
  border: 1px solid #b08d54;
  width: 36px;
  height: 42px;
  color: #ed8738;
  font-style: italic;
}
.brandline {
  width: 1px;
  height: 24px;
  background: #e2c39355;
  margin: 0 12px;
}
.eyebrow,
.demo,
.kicker {
  font-size: 12px;
  letter-spacing: 2px;
}
.demo {
  border: 1px solid #b59c6855;
  padding: 8px 12px;
  background: #0c171baa;
}
.intro {
  position: fixed;
  left: 40px;
  top: 140px;
  pointer-events: none;
}
h1 {
  font:
    500 44px/1.12 Georgia,
    serif;
  letter-spacing: -1px;
  margin: 18px 0;
}
h1 em {
  font-style: normal;
  color: #ebaa67;
}
.kicker {
  color: #d2b779;
}
.intro p {
  color: #c0c4b8;
  font-size: 14px;
}
.map-controls {
  position: fixed;
  right: 32px;
  bottom: 92px;
  display: grid;
  gap: 6px;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid #ffa852;
  outline-offset: 3px;
}
.map-controls button {
  background: #152020de;
  border: 1px solid #887b5d80;
  width: 46px;
  height: 46px;
  font-size: 26px;
  border-radius: 3px;
}
.map-controls button:hover {
  background: #3d3d2e;
}
.map-controls button[aria-pressed="true"] {
  color: #ffad68;
  border-color: #ffad68;
}
footer {
  position: fixed;
  bottom: 24px;
  left: 40px;
  right: 40px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #aeb8b8;
}
footer a {
  color: #c8c6ac;
}
#loader {
  position: fixed;
  inset: 0;
  background: #101b1e;
  display: grid;
  place-content: center;
  text-align: center;
  transition: opacity 0.6s;
}
.loader-logo {
  width: min(300px, 70vw);
  height: auto;
  margin: 0 auto 26px;
}
#loader p {
  color: #d5c495;
}
@media (max-width: 700px) {
  header {
    top: 20px;
    left: 20px;
    right: 20px;
  }
  .brand {
    font-size: 24px;
  }
  .brandline,
  .eyebrow {
    display: none;
  }
  .demo {
    font-size: 10px;
    letter-spacing: 1px;
  }
  .intro {
    left: 20px;
    top: 94px;
  }
  h1 {
    font-size: 30px;
    margin: 12px 0;
  }
  .intro p {
    font-size: 13px;
  }
  .kicker {
    font-size: 10px;
  }
  .map-controls {
    right: 16px;
    bottom: 86px;
  }
  footer {
    left: 20px;
    right: 20px;
    bottom: 16px;
    display: block;
    font-size: 11px;
  }
  footer span {
    display: block;
    max-width: 250px;
    margin-bottom: 5px;
  }
}
#map canvas {
  display: block;
  touch-action: none;
  cursor: grab;
}
header,
.intro,
footer,
.weather-widget,
.map-controls,
#store-panel {
  z-index: 3;
}
header {
  pointer-events: none;
}
header a {
  pointer-events: auto;
}
header .brand img {
  width: 164px;
  height: auto;
}
.intro {
  filter: drop-shadow(0 2px 12px #101b1e);
}
.intro strong {
  font-weight: 600;
  color: #ede4cd;
}
.intro p span {
  margin: 0 10px;
  color: #988562;
}
.intro .kicker {
  letter-spacing: 2.5px;
}
.intro h1 {
  font-size: 46px;
  line-height: 1.08;
}
.intro:before {
  content: "";
  position: absolute;
  inset: -60px -60px -30px -40px;
  background: radial-gradient(ellipse at 20% 35%, #111e22b0, transparent 75%);
  z-index: -1;
}
.intro:after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: #e5a64a;
  margin-top: 24px;
}
.weather-widget {
  position: fixed;
  bottom: 85px;
  left: 40px;
  width: 310px;
  background: linear-gradient(120deg, #112020ed, #18282ae8);
  border: 1px solid #cdb17444;
  padding: 17px 19px;
  border-radius: 4px;
  box-shadow: 0 15px 50px #0002;
  backdrop-filter: blur(10px);
}
.weather-widget > div {
  display: flex;
  align-items: center;
  gap: 13px;
}
.weather-widget .weather-symbol {
  font: 34px Georgia;
  color: #f6c66e;
}
.weather-widget #weather-tag {
  font-size: 10px;
  letter-spacing: 1.4px;
  color: #b9c7c5;
}
.weather-widget #weather-tag.live {
  color: #e8c775;
}
.weather-widget p {
  margin: 3px 0;
  font-size: 14px;
  color: #f0ecdc;
}
.weather-widget small,
.weather-widget a {
  display: block;
  font-size: 11px;
  color: #a1b2b3;
  margin-top: 8px;
}
.weather-widget a {
  text-decoration: none;
  margin-top: 2px;
}
#weather-toggle {
  margin-left: auto;
  flex-shrink: 0;
  border: 1px solid #86907855;
  color: #efc779;
  background: #13292a;
  width: 32px;
  height: 32px;
  font-size: 19px;
  border-radius: 50%;
}
#weather-toggle[aria-pressed="false"] {
  opacity: 0.45;
}
#city-labels {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.city-label {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: auto;
  white-space: nowrap;
  border: 1px solid #d5b97644;
  border-radius: 2px;
  background: #102021dd;
  color: #f0e7cc;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 18px;
  box-shadow: 0 2px 8px #0004;
  backdrop-filter: blur(3px);
}
.city-label:hover,
.city-label:focus-visible {
  background: #d4a95c;
  color: #152022;
  border-color: #fbd990;
  z-index: 10;
}
.city-label span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-left: 6px;
  padding: 0 4px;
  min-width: 18px;
  line-height: 18px;
  background: #d6af55;
  color: #182122;
  border-radius: 2px;
  font-size: 11px;
  font-weight: bold;
}
#store-panel {
  position: fixed;
  right: 98px;
  top: 115px;
  width: 330px;
  max-height: calc(100vh - 210px);
  max-height: calc(100dvh - 210px);
  overflow: auto;
  background: #142326ed;
  border: 1px solid #bd9e5e88;
  box-shadow: 0 20px 70px #0007;
  border-radius: 5px;
  backdrop-filter: blur(15px);
}
#store-panel[hidden] {
  display: none;
}
.store-photo {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
  filter: saturate(0.75);
}
.panel-close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 34px;
  height: 34px;
  background: #0d1a1de8;
  border: 1px solid #9a8e6a;
  color: #fff;
  font-size: 26px;
  border-radius: 50%;
  z-index: 2;
}
.panel-body {
  padding: 22px;
}
.panel-body .kicker {
  font-size: 10px;
  letter-spacing: 1.5px;
}
.panel-body h2 {
  font:
    26px/1.16 Georgia,
    serif;
  margin: 12px 0 18px;
  color: #fff3d5;
}
.address {
  color: #c4cdca;
  font-size: 14px;
  line-height: 1.6;
  margin: 16px 0;
}
.siblings {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.siblings button {
  font-size: 12px;
  border: 1px solid #596359;
  background: #1d3030;
  padding: 6px 8px;
  border-radius: 2px;
}
.siblings button.active {
  border-color: #e9b352;
  color: #f9cd80;
  background: #403d29;
}
.shop-weather {
  font-size: 14px;
  border-top: 1px solid #76806444;
  padding-top: 13px;
  color: #d3dfdf;
}
.shop-weather > span {
  color: #f2ca7b;
  font-size: 20px;
  margin-right: 5px;
}
.shop-weather small {
  display: block;
  font-size: 10px;
  color: #98aaaa;
  margin-top: 4px;
}
.store-actions {
  display: flex;
  gap: 8px;
  margin: 18px 0;
}
.store-actions a {
  display: block;
  padding: 11px 12px;
  font-size: 14px;
  text-decoration: none;
  border-radius: 3px;
}
.store-actions .primary {
  background: #e5b557;
  color: #162023;
  font-weight: bold;
  flex: 1;
  text-align: center;
}
.store-actions .phone {
  border: 1px solid #899277;
  color: #e6e5d3;
}
details {
  border-top: 1px solid #74816f44;
  padding: 12px 0;
  font-size: 13px;
}
summary {
  cursor: pointer;
}
.hours {
  margin-top: 12px;
}
.hours > div {
  display: flex;
  justify-content: space-between;
  color: #c0cfcb;
  padding: 3px 0;
}
.panel-source {
  color: #8fa4a6;
  font-size: 10px;
  margin: 10px 0 0;
}
.has-selection .intro {
  opacity: 0.3;
}
.map-controls {
  z-index: 4;
}
.map-controls button {
  border-color: #ab935655;
}
.credits {
  position: fixed;
  right: 40px;
  bottom: 45px;
  font-size: 10px;
  color: #819899;
  z-index: 3;
}
.credits a {
  color: inherit;
  text-decoration: none;
}
.compass {
  position: fixed;
  right: 44px;
  top: 113px;
  z-index: 2;
  display: grid;
  place-items: center;
  color: #dbc48c;
  font: 12px Georgia;
  gap: 5px;
  pointer-events: none;
}
.compass:after {
  content: "✧";
  font-size: 45px;
  color: #bda46a;
}
.has-selection .weather-widget {
  opacity: 0.55;
}
.mobile-hint {
  display: none;
}
#loader a {
  color: #eac373;
  margin-top: 14px;
}
#loader button {
  background: #d1ac60;
  color: #162125;
  border: 0;
  padding: 10px;
}
footer {
  gap: 20px;
  line-height: 1.5;
}
footer span {
  max-width: 580px;
}
#loader {
  z-index: 20;
}
.demo {
  color: #d2c393;
}
.scene-note {
  display: block;
  font-size: 10px;
  color: #819899;
  letter-spacing: 0;
  margin-top: 7px;
}
.map-controls button {
  transition:
    background 0.2s,
    transform 0.2s;
}
.map-controls button:active {
  transform: scale(0.94);
}
@media (min-width: 1500px) {
  .intro {
    top: 175px;
  }
  .intro h1 {
    font-size: 56px;
  }
}
@media (max-width: 700px) {
  header .brand img {
    width: 138px;
  }
  .intro {
    top: 92px;
  }
  .intro h1 {
    font-size: 30px;
  }
  .intro:after {
    margin-top: 15px;
  }
  .intro .kicker {
    font-size: 10px;
    letter-spacing: 1.4px;
  }
  .intro p {
    font-size: 13px;
  }
  .weather-widget {
    left: 16px;
    bottom: 98px;
    width: 265px;
    padding: 11px 13px;
  }
  .weather-widget p {
    font-size: 12px;
  }
  .weather-widget #weather-tag {
    font-size: 9px;
    letter-spacing: 1px;
  }
  .weather-widget small,
  .weather-widget a {
    font-size: 10px;
    margin-top: 5px;
  }
  .weather-widget .weather-symbol {
    font-size: 28px;
  }
  .weather-widget > div {
    gap: 9px;
  }
  .city-label {
    font-size: 11px;
    padding: 3px 6px;
    line-height: 16px;
  }
  .city-label span {
    font-size: 10px;
    line-height: 15px;
    min-width: 15px;
  }
  .map-controls button {
    width: 40px;
    height: 40px;
  }
  .map-controls {
    bottom: 102px;
    right: 15px;
    gap: 4px;
  }
  .credits {
    right: 20px;
    bottom: 71px;
    font-size: 9px;
  }
  .compass {
    right: 27px;
    top: 90px;
    font-size: 10px;
  }
  .compass:after {
    font-size: 35px;
  }
  .has-selection .intro,
  .has-selection .weather-widget {
    display: none;
  }
  #store-panel {
    top: auto;
    left: 12px;
    right: 12px;
    bottom: 14px;
    width: auto;
    max-height: 49vh;
    max-height: 49dvh;
    border-radius: 10px;
  }
  .store-photo {
    float: right;
    width: 100px;
    height: 100px;
    margin: 16px 16px 0 12px;
    border-radius: 5px;
  }
  .panel-body {
    padding: 18px;
  }
  .panel-body h2 {
    font-size: 23px;
    max-width: 220px;
    margin: 10px 0;
  }
  .panel-close {
    top: 7px;
    right: 7px;
  }
  .store-actions {
    margin: 12px 0;
  }
  .address {
    margin: 12px 0;
  }
  .has-selection footer,
  .has-selection .credits {
    display: none;
  }
  .has-selection .map-controls {
    bottom: calc(49vh + 25px);
    bottom: calc(49dvh + 25px);
  }
  .panel-source {
    font-size: 10px;
  }
  .scene-note {
    max-width: 210px;
    font-size: 9px;
  }
  .weather-widget a {
    margin-top: 1px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}
/* Detailed city maps and branded shop models. */
.city-explorer {
  position: fixed;
  left: 40px;
  top: 116px;
  z-index: 5;
  width: 275px;
  pointer-events: none;
}
.city-explorer[hidden],
.city-marker-layer[hidden],
.city-leaders[hidden],
.map-toast[hidden] {
  display: none;
}
.city-back {
  pointer-events: auto;
  border: 1px solid #ba9b5755;
  color: #dfc482;
  background: #132428e8;
  padding: 9px 13px;
  font-size: 14px;
  border-radius: 3px;
}
.city-title {
  font:
    42px/1.05 Georgia,
    serif;
  color: #f6e7c8;
  margin: 24px 0 10px;
  letter-spacing: -1px;
}
.city-subtitle {
  font-size: 14px;
  color: #bbceca;
  margin: 0 0 23px;
}
.city-shop-list {
  display: grid;
  gap: 8px;
  pointer-events: auto;
}
.city-shop-button {
  display: flex;
  text-align: left;
  align-items: flex-start;
  gap: 11px;
  border: 1px solid #a1ad8b44;
  background: #14292be8;
  padding: 14px 12px;
  color: #e5e9db;
  border-radius: 4px;
  backdrop-filter: blur(12px);
  line-height: 1.35;
}
.city-shop-button > b {
  font:
    21px Georgia,
    serif;
  color: #e7ba54;
  border-right: 1px solid #a1ad8b44;
  padding-right: 11px;
}
.city-shop-button > span {
  font-size: 14px;
  font-weight: 600;
}
.city-shop-button small {
  display: block;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 400;
  color: #aebdb6;
  margin-top: 6px;
}
.city-shop-button:hover,
.city-shop-button.selected {
  border-color: #f8c347;
  background: #343e2ce8;
}
.city-mode .intro {
  display: none;
}
.city-mode .weather-widget {
  bottom: 87px;
}
.city-mode .weather-widget p {
  font-size: 13px;
}
.city-marker-layer,
.city-leaders {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.city-marker-layer {
  z-index: 4;
}
.city-store-marker {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 205px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid #dabb66;
  background: #102024ee;
  color: #f7efd6;
  border-radius: 4px;
  box-shadow: 0 3px 16px #0005;
  pointer-events: auto;
  line-height: 1.3;
  font-size: 14px;
  backdrop-filter: blur(5px);
}
.city-store-marker > b {
  font: 18px Georgia;
  color: #f8ca57;
  border-right: 1px solid #b29b6255;
  padding-right: 8px;
}
.city-store-marker.selected,
.city-store-marker:hover {
  background: #dab448;
  color: #111d1e;
  border-color: #ffdc78;
}
.city-store-marker.selected > b,
.city-store-marker:hover > b {
  color: #1b2523;
}
.street-label {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 12px;
  color: #172728;
  text-shadow:
    0 1px 2px #d9e1c5e0,
    0 0 4px #d9e1c5;
  white-space: nowrap;
  letter-spacing: 0.15px;
  font-weight: 600;
  pointer-events: none;
}
.highway-label {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  background: #2d685ddd;
  border: 1px solid #c0d3a6aa;
  color: #f6eed9;
  border-radius: 3px;
  font-size: 11px;
  font-weight: bold;
  padding: 1px 5px;
  pointer-events: none;
  box-shadow: 0 1px 5px #0004;
}
.road-legend {
  position: fixed;
  bottom: 67px;
  left: 40px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #adb9b1;
  font-size: 11px;
  pointer-events: none;
}
.road-legend i {
  color: #83947f;
  font-style: normal;
}
.road-sample {
  display: inline-block;
  width: 24px;
  height: 5px;
  border-top: 1px solid #e7d29a;
  border-bottom: 1px solid #e7d29a;
  background: #657168;
}
.map-toast {
  position: fixed;
  top: 98px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  background: #142627f2;
  border: 1px solid #dbc17988;
  padding: 12px 22px;
  border-radius: 4px;
  box-shadow: 0 8px 24px #0003;
  font-size: 14px;
  color: #f7e6b9;
  max-width: calc(100vw - 32px);
}
.city-mode #store-panel {
  z-index: 7;
}
.city-mode .compass {
  top: 117px;
}
.city-mode .map-controls {
  z-index: 6;
}
.city-mode.has-selection .city-explorer {
  opacity: 1;
}
.city-mode.has-selection .weather-widget {
  display: none;
}
.city-mode .city-shop-list {
  max-height: calc(100vh - 460px);
  max-height: calc(100dvh - 460px);
  overflow: auto;
}
.city-mode.has-selection .road-legend {
  display: none;
}
@media (max-width: 900px) and (min-width: 701px) {
  .city-explorer {
    left: 24px;
    width: 225px;
  }
  .city-title {
    font-size: 34px;
  }
  #store-panel {
    right: 75px;
    width: 290px;
  }
}
@media (max-width: 700px) {
  .city-explorer {
    left: 18px;
    right: 18px;
    top: 84px;
    width: auto;
  }
  .city-title {
    font-size: 27px;
    margin: 14px 0 5px;
  }
  .city-subtitle {
    font-size: 12px;
    margin: 0;
  }
  .city-back {
    font-size: 12px;
    padding: 6px 10px;
  }
  .city-shop-list {
    position: fixed;
    bottom: 52px;
    left: 14px;
    right: 64px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    max-height: 142px !important;
  }
  .city-shop-button {
    padding: 9px 8px;
    gap: 7px;
    min-height: 49px;
  }
  .city-shop-button > b {
    font-size: 17px;
    padding-right: 7px;
  }
  .city-shop-button > span {
    font-size: 12px;
  }
  .city-shop-button small {
    display: none;
  }
  .city-mode.has-selection .city-shop-list {
    display: none;
  }
  .city-mode .weather-widget {
    display: none;
  }
  .city-mode .road-legend {
    bottom: 23px;
    left: 16px;
    font-size: 9px;
    gap: 5px;
  }
  .city-mode footer {
    display: none;
  }
  .city-mode .credits {
    right: 16px;
    bottom: 6px;
    font-size: 8px;
  }
  .city-mode .map-controls {
    bottom: 61px;
  }
  .city-mode.has-selection .map-controls {
    bottom: calc(49vh + 25px);
    bottom: calc(49dvh + 25px);
  }
  .city-store-marker {
    max-width: 165px;
    font-size: 12px;
    padding: 7px 8px;
    gap: 6px;
  }
  .city-store-marker > b {
    font-size: 16px;
    padding-right: 6px;
  }
  .street-label {
    font-size: 10px;
  }
  .city-mode .compass {
    top: 88px;
  }
  .map-toast {
    top: 200px;
    text-align: center;
    font-size: 13px;
  }
  .road-legend {
    left: 16px;
    bottom: 83px;
    font-size: 9px;
  }
  .highway-label {
    font-size: 9px;
    padding: 1px 4px;
  }
  .city-mode.has-selection .credits {
    display: none;
  }
  .city-mode .scene-note {
    display: none;
  }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .city-mode.has-selection .city-shop-list {
    display: none;
  }
  .city-mode.has-selection .city-explorer {
    top: 88px;
  }
  .city-mode.has-selection .city-title {
    font-size: 26px;
    margin: 14px 0 8px;
  }
}
/* Store silhouettes and their shared type key. */
[data-kind="tesco"] {
  --type-color: #8cbbe6;
}
[data-kind="auchan"] {
  --type-color: #e68e92;
}
[data-kind="mall"] {
  --type-color: #bca1ee;
}
[data-kind="street"] {
  --type-color: #e6b37c;
}
[data-kind="hub"] {
  --type-color: #f3d262;
}
.city-label[data-kind] {
  border-left: 3px solid var(--type-color);
}
.city-label[data-kind]:before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--type-color);
  margin-right: 6px;
  border-radius: 1px;
}
.city-label[data-kind="mall"]:before {
  transform: rotate(45deg);
}
.city-label[data-kind="tesco"]:before,
.city-label[data-kind="auchan"]:before {
  width: 10px;
  height: 5px;
}
.city-shop-button[data-kind],
.city-store-marker[data-kind] {
  border-left: 4px solid var(--type-color);
}
.city-shop-button[data-kind] > b,
.city-store-marker[data-kind] > b {
  color: var(--type-color);
}
.store-kind-chip {
  display: inline-block;
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--type-color);
  color: var(--type-color);
  border-radius: 4px;
  background: #0c15184d;
}
.store-type-legend {
  position: fixed;
  left: 40px;
  bottom: 252px;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px 13px;
  width: 310px;
  padding: 13px 14px;
  background: #172121df;
  border: 1px solid #a8ac7c38;
  border-radius: 5px;
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.store-type-legend > span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: #e4e9dc;
}
.store-type-legend i {
  font: 700 10px Arial;
  color: #172124;
  background: var(--type-color);
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 2px;
}
.store-type-legend small {
  grid-column: 1/-1;
  color: #94a5a0;
  font-size: 10px;
  margin-top: 1px;
}
.shopping .store-type-legend,
.has-selection .store-type-legend,
.city-mode .store-type-legend {
  display: none;
}
body.shopping #map:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 43%, transparent 53%, #30211323 100%);
  mix-blend-mode: multiply;
}
.store-photo {
  filter: saturate(0.95);
}
@media (max-width: 700px) {
  .store-type-legend {
    left: 16px;
    bottom: 228px;
    width: 235px;
    gap: 6px;
    padding: 9px 10px;
  }
  .store-type-legend > span {
    font-size: 9px;
    gap: 5px;
  }
  .store-type-legend i {
    width: 16px;
    height: 16px;
    font-size: 9px;
  }
  .store-type-legend small {
    font-size: 9px;
  }
}
.city-label[data-kind]:before {
  content: attr(data-type-symbol);
  width: 14px;
  height: 14px;
  font-size: 9px;
  font-weight: bold;
  line-height: 14px;
  text-align: center;
  color: #172124;
  vertical-align: 1px;
  transform: none;
  border-radius: 2px;
}
.city-label[data-kind="tesco"]:before,
.city-label[data-kind="auchan"]:before {
  width: 16px;
  height: 14px;
}
.city-label[data-kind="mall"]:before {
  transform: none;
}