/* Страницата се отваря от връзка в социална мрежа и в повечето случаи живее
   части от секундата — дотолкова, колкото да отпрати човека в неговия магазин.
   Затова стиловете са малко и стоят отделно: политиката на сайта е
   `style-src 'self'` без 'unsafe-inline', тоест вграден <style> НЕ се прилага
   в production и страницата би се показала гола. */

.get-hero { text-align: center; }
.get-hero img { width: 100%; max-width: 680px; height: auto; border-radius: 1rem; }

.stores { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; margin: 1.75rem 0 .75rem; }
.stores .btn { text-decoration: none; }

.get-note { color: var(--muted); font-size: .9rem; text-align: center; }

.facts { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem 1.5rem; }
.facts li::before { content: "— "; opacity: .6; }

@media (max-width: 600px) { .facts { grid-template-columns: 1fr; } }

/* Двата откроени блока („Наблизо“ и българският) — те са причината човек да
   дочете страницата, затова се отделят от изброяването, а не се сливат с него. */
.highlight {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  margin: 1.75rem 0;
  background: var(--ground-2);
}
.highlight h3 { margin: 0 0 .5rem; font-family: var(--serif); font-size: 1.35rem; }
.highlight p { margin: 0; }

/* Тиретата идват от общия `.facts` в style.css, който ползват и други
   страници — затова се надписват САМО тук, вместо да се пипа общият файл.
   Точката е в златото на логото и подравнява текста на втория ред. */
.facts li { position: relative; padding-left: 1.5rem; }
.facts li::before {
  content: "";
  position: absolute;
  left: .3rem;
  top: .62em;
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: var(--gold);
  opacity: 1;
}