.journalProductPage .journalOptionsPanel {
  display: grid;
  gap: 14px;
  margin: 16px 0 0;
}

.journalProductPage .journalChoice {
  border: 1px solid rgba(71, 160, 190, .5);
  background: linear-gradient(135deg, rgba(8, 47, 65, .96), rgba(8, 24, 39, .98));
  padding: 18px;
}

.journalProductPage .journalChoiceHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  color: #f7f4fb;
}

.journalProductPage .journalChoiceHead strong { font-size: 18px; }
.journalProductPage .journalChoiceHead span {
  color: #aaff2c;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
}

.journalProductPage .journalChoiceGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 10px;
}

.journalProductPage .journalChoiceGrid button {
  min-height: 58px;
  border: 1px solid #28556c;
  background: #061726;
  color: #f7f4fb;
  padding: 11px 13px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.journalProductPage .journalChoiceGrid button:hover,
.journalProductPage .journalChoiceGrid button:focus-visible { border-color: #aaff2c; }

.journalProductPage .journalChoiceGrid button.active {
  border-color: #aaff2c;
  background: linear-gradient(135deg, rgba(170, 255, 44, .18), rgba(121, 55, 190, .25));
  box-shadow: inset 0 0 0 1px #aaff2c;
  color: #fff;
}

.journalProductPage .journalChoice--style button strong,
.journalProductPage .journalChoice--style button small,
.journalProductPage .journalChoice--pages button strong,
.journalProductPage .journalChoice--pages button small,
.journalProductPage .journalChoice--printing button strong,
.journalProductPage .journalChoice--printing button small {
  display: block;
}

.journalProductPage .journalChoice--style button small,
.journalProductPage .journalChoice--pages button small,
.journalProductPage .journalChoice--printing button small {
  margin-top: 4px;
  color: #a9bdc9;
  font-size: 12px;
}

.journalProductPage .journalChoice--style button.active small,
.journalProductPage .journalChoice--pages button.active small,
.journalProductPage .journalChoice--printing button.active small { color: #aaff2c; }

.journalProductPage .journalPricingGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.journalProductPage .journalPricingGrid div {
  border: 1px solid #28556c;
  background: #061726;
  padding: 14px;
}

.journalProductPage .journalPricingGrid strong,
.journalProductPage .journalPricingGrid span { display: block; }
.journalProductPage .journalPricingGrid strong { color: #f7f4fb; }
.journalProductPage .journalPricingGrid span {
  margin-top: 5px;
  color: #aaff2c;
  font-size: 18px;
  font-weight: 800;
}

.journalProductPage .journalB5Pricing > small {
  display: block;
  margin-top: 10px;
  color: #a9bdc9;
}

.journalProductPage .productColorGrid button {
  min-height: 118px;
  align-items: center;
}

.journalProductPage .productColorGrid button img {
  width: 68px;
  height: 82px;
  object-fit: contain;
  flex: 0 0 68px;
}

.journalProductPage .journalSurchargeNote {
  margin: 0;
  color: #a9bdc9;
  font-size: 13px;
}

@media (max-width: 680px) {
  .journalProductPage .journalChoiceGrid { grid-template-columns: 1fr; }
  .journalProductPage .journalPricingGrid { grid-template-columns: 1fr 1fr; }
}