:root {
  --accent-rgb: 212 175 55;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  min-height: 100vh;

  background:
    radial-gradient(
      circle at top,
      #10162a 0%,
      #060810 45%,
      #020305 100%
    );

  color: white;

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


/* STORE */

.store {
  width: min(1100px, 92%);
  margin: 0 auto;
  padding: 60px 0 80px;
}


/* HEADER */

.store-header {
  position: relative;
  text-align: center;
  margin-bottom: 55px;
}

.brand {
  margin: 0 0 8px;

  color: rgb(var(--accent-rgb));

  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.28em;
}

.store-header h1 {
  margin: 0;

  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 0.18em;
}

.back-link {
  position: absolute;
  left: 0;
  top: 10px;

  color: #8c96ad;

  text-decoration: none;

  font-size: 0.7rem;
  letter-spacing: 0.12em;
}

.back-link:hover {
  color: white;
}


/* PRODUCTS */

.products {
  display: grid;

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

  gap: 22px;
}


/* CARD */

.product-card {
  overflow: hidden;

  border: 1px solid rgb(var(--accent-rgb) / 0.22);
  border-radius: 18px;

  background: rgba(10, 15, 30, 0.72);

  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.22);
}


/* PRODUCT IMAGE AREA */

.product-visual {
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(
      circle,
      rgb(var(--accent-rgb) / 0.22),
      rgb(var(--accent-rgb) / 0.03) 45%,
      transparent 70%
    );
}

.product-symbol {
  font-size: 5rem;

  color: rgb(var(--accent-rgb));

  text-shadow:
    0 0 35px
    rgb(var(--accent-rgb) / 0.65);
}

.lightning-symbol {
  width: 72px;
  height: 100px;

  fill: none;

  stroke: rgb(var(--accent-rgb));
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;

  filter:
    drop-shadow(
      0 0 6px
      rgb(var(--accent-rgb) / 0.9)
    )
    drop-shadow(
      0 0 18px
      rgb(var(--accent-rgb) / 0.5)
    );
}

.premium-mark {
  font-size: 6rem;
  font-weight: 200;

  color: rgb(var(--accent-rgb));

  text-shadow:
    0 0 35px
    rgb(var(--accent-rgb) / 0.55);
}

/* PRODUCT INFO */

.product-info {
  padding: 24px;
}

.product-type {
  color: rgb(var(--accent-rgb) / 0.75);

  font-size: 0.62rem;
  font-weight: 600;

  letter-spacing: 0.18em;
}

.product-info h2 {
  margin: 8px 0 10px;

  font-size: 1.05rem;
  font-weight: 600;

  letter-spacing: 0.06em;
}

.product-info p {
  min-height: 44px;

  margin: 0 0 24px;

  color: #929aad;

  font-size: 0.85rem;
  line-height: 1.6;
}

.coming-soon {
  display: inline-block;

  padding: 8px 11px;

  border:
    1px solid
    rgb(var(--accent-rgb) / 0.25);

  border-radius: 8px;

  color: rgb(var(--accent-rgb));

  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}


/* MOBILE */

@media (max-width: 750px) {

  .store {
    width: min(94%, 680px);
    min-height: 100vh;

    display: flex;
    flex-direction: column;

    padding: 42px 0 60px;
  }

  .store-header {
    margin-bottom: 22px;
  }

  .back-link {
    position: static;
    display: block;

    margin-bottom: 14px;

    text-align: left;
  }

  .brand {
    font-size: 0.58rem;
  }

  .store-header h1 {
    font-size: 1.55rem;
  }

  .products {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .product-card {
    display: grid;

    grid-template-columns:
      110px 1fr;

    align-items: center;

    min-height: 150px;
  }

  .product-visual {
    height: 100%;
    min-height: 150px;
  }

  .product-info {
    padding: 18px 16px 18px 6px;
  }

  .product-info h2 {
    margin: 5px 0 6px;

    font-size: 0.92rem;
  }

  .product-info p {
    min-height: 0;

    margin: 0 0 12px;

    font-size: 0.74rem;
    line-height: 1.4;
  }

  .product-type {
    font-size: 0.54rem;
  }

  .coming-soon {
    padding: 6px 8px;

    font-size: 0.52rem;
  }

  .lightning-symbol {
    width: 42px;
    height: 62px;
  }

  .premium-mark {
    font-size: 3.4rem;
  }

  .product-symbol {
    font-size: 3rem;
  }

}