/* =========================================================
   TARO.TRENDMAP.TECH
   Modern cosmic landing — full visual rebuild
   HTML/JS intentionally untouched
   ========================================================= */

:root {
  --bg: #02040b;
  --surface: rgba(7, 14, 32, .74);
  --surface-strong: rgba(7, 14, 32, .91);
  --surface-soft: rgba(255, 255, 255, .045);

  --text: #f8f8fb;
  --text-soft: rgba(244, 247, 255, .76);
  --text-muted: rgba(228, 234, 247, .56);

  --line: rgba(255, 255, 255, .11);
  --line-hover: rgba(255, 255, 255, .22);

  --gold: #dfc27b;
  --gold-light: #f0daa0;
  --blue: #6faeff;
  --blue-light: #9cc9ff;

  --radius-sm: 16px;
  --radius: 24px;
  --radius-lg: 34px;

  --container: 1180px;

  --shadow:
    0 28px 80px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 255, 255, .035);
}

/* ---------- RESET ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;

  color: var(--text);

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  font-size: 17px;
  line-height: 1.6;

  /*
   * ВАЖНО:
   * НЕ синий фон.
   * Используем настоящий звездно-космический фон проекта.
   */
  background:
    linear-gradient(
      180deg,
      rgba(1, 3, 10, .42) 0%,
      rgba(2, 5, 15, .22) 28%,
      rgba(2, 4, 12, .46) 64%,
      rgba(1, 3, 9, .90) 100%
    ),
    url("/cosmic-background.png")
    center top / cover
    fixed
    no-repeat;

  overflow-x: hidden;
}

/* Мягкое затемнение для читаемости.
   НИКАКИХ искусственных точек / dot-pattern. */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 50% 8%,
      rgba(49, 104, 207, .11),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, .03),
      rgba(0, 0, 0, .26)
    );
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

img {
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

/* =========================================================
   GLOBAL LAYOUT
   ========================================================= */

.wrap {
  width: min(calc(100% - 48px), var(--container));
  margin-inline: auto;

  /*
   * Главное исправление:
   * ВСЯ композиция находится по центру viewport.
   */
  text-align: center;
}

main {
  width: 100%;
}

.section {
  position: relative;
  padding-block: 82px;
}

.section + .section {
  border-top: 1px solid rgba(255, 255, 255, .055);
}

.section h2 {
  max-width: 850px;
  margin: 0 auto 18px;

  font-size: clamp(36px, 4.2vw, 58px);
  line-height: 1.04;
  letter-spacing: -.045em;
  font-weight: 650;

  text-wrap: balance;
}

.section-lead,
.section > p {
  max-width: 730px;
  margin-inline: auto;
}

/* =========================================================
   HERO
   ========================================================= */

.hero {
  min-height: min(820px, 91vh);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding-top: 120px;
  padding-bottom: 112px;

  text-align: center;
}

/* Никаких точек, кружков, псевдозвезд CSS */

.hero::before,
.hero::after {
  display: none !important;
}

.eyebrow {
  margin: 0 0 24px;

  color: var(--gold-light);

  font-size: 15px;
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.hero h1 {
  width: 100%;
  max-width: 1020px;

  margin: 0 auto;

  font-size: clamp(56px, 7.6vw, 104px);
  line-height: .94;
  letter-spacing: -.064em;
  font-weight: 650;

  text-align: center;
  text-wrap: balance;
}

.hero h1 span {
  display: inline-block;

  color: transparent;

  background:
    linear-gradient(
      105deg,
      #ffffff 0%,
      #d9e8ff 32%,
      var(--blue-light) 58%,
      var(--gold-light) 100%
    );

  -webkit-background-clip: text;
  background-clip: text;
}

.hero-lead {
  max-width: 720px;

  margin: 34px auto 0;

  color: var(--text-soft);

  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.55;

  text-align: center;
  text-wrap: balance;
}

.desktop-break {
  display: none;
}

/* =========================================================
   MAIN CTA
   ========================================================= */

.cta,
.filter-button--primary,
.button-primary,
.readings-grid button,
.readings-grid a[class*="button"] {
  min-height: 56px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 15px 28px;

  border: 1px solid rgba(164, 202, 255, .32);
  border-radius: 16px;

  background:
    linear-gradient(
      135deg,
      rgba(90, 157, 255, .96),
      rgba(54, 102, 193, .96)
    );

  color: #fff;

  font-weight: 650;
  font-size: 16px;
  line-height: 1;

  box-shadow:
    0 14px 42px rgba(53, 115, 214, .25),
    inset 0 1px 0 rgba(255, 255, 255, .24);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease,
    filter .2s ease;
}

.cta {
  margin-top: 38px;
}

.cta:hover,
.filter-button--primary:hover,
.button-primary:hover,
.readings-grid button:hover,
.readings-grid a[class*="button"]:hover {
  transform: translateY(-2px);

  border-color: rgba(203, 224, 255, .60);

  box-shadow:
    0 20px 52px rgba(53, 115, 214, .37),
    inset 0 1px 0 rgba(255, 255, 255, .30);

  filter: brightness(1.07);
}

.cta:active,
.filter-button--primary:active,
.button-primary:active,
.readings-grid button:active {
  transform: translateY(0);
}

/* =========================================================
   PRODUCTS / READINGS
   ========================================================= */

#readings,
#products {
  scroll-margin-top: 30px;
}

.readings-grid {
  width: 100%;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 20px;

  margin-top: 46px;

  text-align: center;
}

/*
 * Независимо от того, какой class генерирует app.js,
 * прямой ребенок readings-grid оформляется как карточка.
 */

.readings-grid > * {
  position: relative;

  min-height: 340px;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 36px 34px 32px;

  overflow: hidden;

  border: 1px solid var(--line);
  border-radius: var(--radius);

  background:
    linear-gradient(
      145deg,
      rgba(12, 24, 51, .82),
      rgba(5, 11, 28, .68)
    );

  box-shadow: var(--shadow);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  text-align: center;

  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease;
}

.readings-grid > *::before {
  content: "";

  position: absolute;
  left: 50%;
  top: -110px;

  width: 280px;
  height: 190px;

  transform: translateX(-50%);

  background:
    radial-gradient(
      ellipse,
      rgba(81, 142, 238, .16),
      transparent 68%
    );

  pointer-events: none;
}

.readings-grid > *:hover {
  transform: translateY(-4px);

  border-color: var(--line-hover);

  background:
    linear-gradient(
      145deg,
      rgba(15, 31, 64, .88),
      rgba(6, 13, 32, .74)
    );
}

.readings-grid h2,
.readings-grid h3,
.readings-grid h4 {
  position: relative;

  margin: 0 auto 14px;

  color: #fff;

  font-size: clamp(25px, 2.3vw, 34px);
  line-height: 1.1;
  letter-spacing: -.035em;
  font-weight: 650;

  text-align: center;
  text-wrap: balance;
}

.readings-grid p {
  position: relative;

  max-width: 440px;

  margin: 0 auto 18px;

  color: var(--text-soft);

  font-size: 16px;
  line-height: 1.55;

  text-align: center;
}

.readings-grid ul {
  width: 100%;
  max-width: 410px;

  margin: 4px auto 24px;
  padding: 0;

  list-style: none;

  color: var(--text-soft);

  text-align: center;
}

.readings-grid li {
  margin: 7px 0;

  font-size: 15px;
}

.readings-grid li::before {
  content: "— ";
  color: var(--gold);
}

.readings-grid [class*="price"],
.readings-grid .price,
.readings-grid strong:last-of-type {
  display: block;

  margin-top: auto;
  margin-bottom: 20px;

  color: #fff;

  font-size: clamp(31px, 3vw, 43px);
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: 700;
}

.readings-grid button,
.readings-grid a[class*="button"] {
  width: 100%;
  max-width: 320px;

  margin-top: auto;
}

/* =========================================================
   STEPS
   ========================================================= */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 18px;

  margin-top: 44px;
}

.steps article {
  min-height: 245px;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 32px 28px;

  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 22px;

  background: rgba(5, 12, 29, .61);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  text-align: center;
}

.step-number {
  width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  margin: 0 auto 23px;

  border: 1px solid rgba(218, 190, 121, .28);
  border-radius: 50%;

  background: rgba(218, 190, 121, .07);

  color: var(--gold-light);

  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
}

.steps h3 {
  margin: 0 auto 10px;

  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -.025em;
  font-weight: 650;

  text-align: center;
}

.steps p {
  max-width: 300px;

  margin: 0 auto;

  color: var(--text-soft);

  font-size: 16px;
  line-height: 1.55;

  text-align: center;
}

/* =========================================================
   RESULT
   ========================================================= */

.result {
  width: min(calc(100% - 48px), 1040px);

  margin-block: 26px;

  padding: 64px 54px;

  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--radius-lg);

  background:
    linear-gradient(
      135deg,
      rgba(12, 26, 55, .76),
      rgba(6, 13, 31, .70)
    );

  box-shadow: var(--shadow);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  text-align: center;
}

.result h2 {
  margin-bottom: 25px;
}

.result > div {
  max-width: 720px;

  margin-inline: auto;
}

.result p {
  margin: 0 auto;

  color: var(--text-soft);

  font-size: 17px;
  line-height: 1.68;

  text-align: center;
}

.result .muted {
  margin-top: 20px;

  color: var(--text-muted);

  font-size: 14px;
}

/* =========================================================
   FAQ
   ========================================================= */

.faq {
  max-width: 960px;

  text-align: center;
}

.faq h2 {
  margin-bottom: 38px;
}

.faq details {
  width: 100%;

  margin: 10px auto;

  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 18px;

  background: rgba(5, 12, 28, .68);

  overflow: hidden;

  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
}

.faq summary {
  position: relative;

  padding: 21px 56px 21px 24px;

  cursor: pointer;

  color: #fff;

  font-size: 17px;
  line-height: 1.4;
  font-weight: 600;

  list-style: none;

  text-align: center;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";

  position: absolute;
  right: 22px;
  top: 50%;

  transform: translateY(-50%);

  color: var(--gold-light);

  font-size: 23px;
  font-weight: 300;

  transition: transform .2s ease;
}

.faq details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.faq details p {
  max-width: 690px;

  margin: 0 auto;

  padding: 0 26px 24px;

  color: var(--text-soft);

  font-size: 16px;
  line-height: 1.6;

  text-align: center;
}

.faq a {
  color: var(--blue-light);
}

/* =========================================================
   FINAL CTA
   ========================================================= */

.final-cta {
  min-height: 430px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  border-top: 0 !important;

  text-align: center;
}

.final-cta h2 {
  max-width: 900px;
}

.final-cta .cta {
  margin-top: 30px;
}

/* =========================================================
   FOOTER — КОМПАКТНЫЙ
   ========================================================= */

.site-footer {
  width: min(calc(100% - 48px), var(--container));

  margin-inline: auto;

  padding: 25px 0 22px;

  border-top: 1px solid rgba(255, 255, 255, .10);

  color: rgba(224, 231, 244, .52);

  text-align: center;
}

/*
 * Принципиально:
 * никаких огромных реквизитов.
 */

.footer-top {
  display: block;

  margin: 0;
  padding: 0;
}

.seller-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 4px 12px;

  max-width: 1000px;

  margin: 0 auto 13px;

  color: rgba(222, 229, 243, .53);

  font-size: 12.5px;
  line-height: 1.4;

  text-align: center;
}

.seller-footer p,
.seller-footer span,
.seller-footer a,
.footer-top p {
  display: inline;

  margin: 0 !important;

  padding: 0 !important;

  color: inherit;

  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: 400 !important;

  text-align: center;
}

.seller-footer a:hover {
  color: rgba(255, 255, 255, .82);
}

.footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 5px 18px;

  max-width: 1000px;

  margin: 0 auto;

  text-align: center;
}

.footer-links a {
  color: rgba(230, 235, 246, .66);

  font-size: 12.5px;
  line-height: 1.45;

  transition: color .18s ease;
}

.footer-links a:hover {
  color: #fff;
}

.copyright,
.footer-bottom {
  margin: 12px auto 0 !important;

  color: rgba(226, 232, 243, .37) !important;

  font-size: 11.5px !important;
  line-height: 1.4 !important;

  text-align: center !important;
}

/* =========================================================
   ORDER MODAL
   ========================================================= */

.modal {
  position: fixed;
  inset: 0;

  z-index: 9999;

  display: grid;
  place-items: center;

  padding: 24px;
}

.modal-backdrop {
  position: absolute;
  inset: 0;

  background: rgba(0, 2, 10, .78);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.order-sheet {
  position: relative;
  z-index: 1;

  width: min(100%, 620px);
  max-height: calc(100vh - 48px);

  overflow-y: auto;

  padding: 38px;

  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 28px;

  background:
    linear-gradient(
      150deg,
      rgba(12, 25, 53, .98),
      rgba(4, 10, 25, .98)
    );

  box-shadow:
    0 42px 120px rgba(0, 0, 0, .58);

  text-align: center;
}

.modal-close {
  position: absolute;
  top: 17px;
  right: 17px;

  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border: 1px solid var(--line);
  border-radius: 50%;

  background: rgba(255, 255, 255, .055);

  color: rgba(255, 255, 255, .78);

  font-size: 23px;
  line-height: 1;

  transition:
    background .18s ease,
    color .18s ease;
}

.modal-close:hover {
  background: rgba(255, 255, 255, .10);
  color: #fff;
}

.modal-kicker {
  margin: 0 0 10px;

  color: var(--gold-light);

  font-size: 13px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.order-sheet h2 {
  margin: 0 auto 24px;

  font-size: clamp(34px, 5vw, 48px);
  line-height: 1;
  letter-spacing: -.045em;
}

.order-sheet h2 span {
  color: var(--blue-light);
}

.selected-product {
  margin: 0 auto 24px;
  padding: 14px 18px;

  border: 1px solid var(--line);
  border-radius: 15px;

  background: rgba(255, 255, 255, .035);

  color: var(--text-soft);

  text-align: center;
}

/* ---------- FORM ---------- */

#order-form,
.order-sheet form {
  display: grid;

  gap: 15px;

  text-align: left;
}

#order-form label,
.order-sheet form > label:not(.check) {
  display: grid;

  gap: 7px;

  color: rgba(241, 245, 253, .82);

  font-size: 14px;
  font-weight: 550;

  text-align: left;
}

input,
textarea {
  width: 100%;

  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;

  outline: none;

  background: rgba(255, 255, 255, .052);

  color: #fff;

  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

input {
  min-height: 53px;

  padding: 0 16px;
}

textarea {
  min-height: 120px;

  padding: 14px 16px;

  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: rgba(224, 232, 246, .36);
}

input:focus,
textarea:focus {
  border-color: rgba(120, 179, 255, .56);

  background: rgba(255, 255, 255, .068);

  box-shadow: 0 0 0 4px rgba(91, 153, 240, .10);
}

.check {
  display: grid !important;
  grid-template-columns: 20px 1fr;

  gap: 10px !important;
  align-items: start;

  color: rgba(232, 238, 249, .67) !important;

  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.5;

  text-align: left !important;
}

.check input {
  width: 18px;
  min-height: 18px;
  height: 18px;

  margin: 2px 0 0;

  accent-color: #679eef;
}

.check a {
  color: rgba(169, 207, 255, .92);

  text-decoration: underline;
  text-decoration-color: rgba(169, 207, 255, .25);
  text-underline-offset: 3px;
}

.honey {
  position: absolute !important;
  left: -99999px !important;

  width: 1px !important;
  height: 1px !important;

  opacity: 0 !important;

  pointer-events: none !important;
}

.form-error {
  margin: 0;

  color: #ff9c9c;

  font-size: 14px;

  text-align: center;
}

.button-wide,
.order-sheet button[type="submit"] {
  width: 100%;

  min-height: 56px;

  border: 1px solid rgba(164, 202, 255, .32);
  border-radius: 15px;

  background:
    linear-gradient(
      135deg,
      #609eea,
      #3564b6
    );

  color: #fff;

  font-weight: 650;

  box-shadow:
    0 14px 38px rgba(53, 101, 185, .26);

  transition:
    transform .18s ease,
    filter .18s ease;
}

.button-wide:hover,
.order-sheet button[type="submit"]:hover {
  transform: translateY(-1px);
  filter: brightness(1.07);
}

.form-footnote {
  max-width: 470px;

  margin: 0 auto !important;

  color: rgba(223, 231, 244, .42) !important;

  font-size: 11.5px !important;
  line-height: 1.45 !important;

  text-align: center !important;
}

/* =========================================================
   FALLBACK / OLD CLASSES
   На случай если app.js вставляет старые классы
   ========================================================= */

.product-card,
.trend-card,
.reading-card {
  min-height: 340px;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 36px 32px;

  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;

  background:
    linear-gradient(
      145deg,
      rgba(12, 24, 51, .82),
      rgba(5, 11, 28, .68)
    ) !important;

  text-align: center !important;

  box-shadow: var(--shadow) !important;
}

.product-card *,
.trend-card *,
.reading-card * {
  text-align: center;
}

.product-card button,
.trend-card button,
.reading-card button {
  margin-inline: auto;
}

/* Убираем следы прошлой dashboard-версии, если вдруг остались */

.sidebar,
.sidebar-open,
.topbar,
.status-tabs,
.platform-tabs,
.categories-panel,
.user-card,
.page-head .filters {
  display: none !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

  body {
    background-attachment: scroll;
  }

  .wrap,
  .site-footer {
    width: min(calc(100% - 32px), var(--container));
  }

  .hero {
    min-height: 720px;

    padding-top: 100px;
    padding-bottom: 90px;
  }

  .hero h1 {
    font-size: clamp(48px, 10vw, 76px);
  }

  .readings-grid {
    grid-template-columns: 1fr;
  }

  .readings-grid > * {
    width: min(100%, 650px);

    margin-inline: auto;
  }

  .steps {
    grid-template-columns: 1fr;
  }

  .steps article {
    width: min(100%, 650px);

    min-height: 0;

    margin-inline: auto;
  }

  .result {
    width: min(calc(100% - 32px), 900px);

    padding: 52px 32px;
  }
}

@media (max-width: 600px) {

  body {
    font-size: 16px;
  }

  .wrap,
  .site-footer {
    width: calc(100% - 28px);
  }

  .section {
    padding-block: 58px;
  }

  .hero {
    min-height: 660px;

    padding-top: 82px;
    padding-bottom: 72px;
  }

  .eyebrow {
    margin-bottom: 20px;

    font-size: 12px;
    letter-spacing: .075em;
  }

  .hero h1 {
    max-width: 360px;

    font-size: clamp(43px, 14vw, 58px);
    line-height: .97;
    letter-spacing: -.055em;
  }

  .hero-lead {
    max-width: 340px;

    margin-top: 26px;

    font-size: 17px;
    line-height: 1.5;
  }

  .cta {
    width: min(100%, 320px);

    margin-top: 31px;
  }

  .section h2 {
    max-width: 360px;

    font-size: 36px;
  }

  .section-lead,
  .section > p {
    max-width: 350px;

    font-size: 16px;
  }

  .readings-grid {
    margin-top: 32px;

    gap: 14px;
  }

  .readings-grid > *,
  .product-card,
  .trend-card,
  .reading-card {
    min-height: 0;

    padding: 28px 20px;

    border-radius: 20px !important;
  }

  .readings-grid h2,
  .readings-grid h3,
  .readings-grid h4 {
    font-size: 26px;
  }

  .steps {
    gap: 12px;

    margin-top: 32px;
  }

  .steps article {
    padding: 28px 20px;

    border-radius: 19px;
  }

  .result {
    width: calc(100% - 28px);

    margin-block: 8px;

    padding: 42px 20px;

    border-radius: 22px;
  }

  .result p {
    font-size: 16px;
  }

  .faq summary {
    padding: 19px 50px 19px 18px;

    font-size: 16px;
  }

  .faq details p {
    padding: 0 18px 20px;

    font-size: 15px;
  }

  .final-cta {
    min-height: 340px;
  }

  /* Footer на мобильном остается маленьким */

  .site-footer {
    padding: 20px 0 18px;
  }

  .seller-footer {
    gap: 3px 8px;

    margin-bottom: 11px;

    font-size: 11.5px;
  }

  .footer-links {
    gap: 5px 12px;
  }

  .footer-links a {
    font-size: 11.5px;
  }

  .copyright,
  .footer-bottom {
    font-size: 10.5px !important;
  }

  .modal {
    align-items: end;

    padding: 10px;
  }

  .order-sheet {
    width: 100%;
    max-height: calc(100vh - 20px);

    padding: 31px 18px 22px;

    border-radius: 24px;
  }

  .order-sheet h2 {
    max-width: 310px;

    font-size: 36px;
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}