/* rpgcreator.net — additions on top of the compiled design stylesheet. */

.panel{
  background:var(--card);
  border:1px solid color-mix(in oklab, var(--bronze) 20%, transparent);
  border-radius:.25rem;
  padding:2rem;
}
@media (min-width:768px){ .panel{padding:3rem} }

.pair{display:grid;grid-template-columns:1fr;gap:3rem}
@media (min-width:768px){ .pair{grid-template-columns:1fr 1fr} }

.price{font-family:"Cinzel Decorative",serif;font-size:3rem;line-height:1;color:var(--bronze)}

.deal{list-style:none;margin:0;padding:0}
.deal li{position:relative;padding:.75rem 0 .75rem 2rem;color:color-mix(in oklab, var(--parchment) 70%, transparent)}
.deal li::before{content:"\2726";position:absolute;left:0;top:.75rem;color:var(--bronze)}
.deal strong{color:var(--parchment);font-weight:500}

.link-quiet{
  color:color-mix(in oklab, var(--parchment) 60%, transparent);
  text-decoration:none;
  border-bottom:1px solid color-mix(in oklab, var(--bronze) 40%, transparent);
  padding-bottom:2px;
  transition:color .2s ease,border-color .2s ease;
}
.link-quiet:hover{color:var(--bronze);border-color:var(--bronze)}

.form-msg{min-height:1.4em;margin-top:.75rem;font-size:.875rem;color:color-mix(in oklab, var(--parchment) 60%, transparent)}

.trio{display:grid;grid-template-columns:1fr;gap:3rem}
@media (min-width:768px){ .trio{grid-template-columns:repeat(3,1fr)} }

.buy-grid{display:grid;grid-template-columns:1fr;gap:3rem;align-items:center}
@media (min-width:768px){ .buy-grid{grid-template-columns:minmax(0,320px) 1fr;gap:4rem} }

.deal.mb-12{margin-bottom:3rem}