/* Store-promo styles for the SELF-CONTAINED game pages (games/solitaire,
   games/slotcar, games/slotcar3d) that do NOT load css/site.css. These
   mirror the .store-promo / .promo-leaderboard rules in css/site.css — keep
   the two in sync. Composer pages get the rules via site.css instead. */
.store-promo{display:flex;flex-direction:column;align-items:center;gap:7px}
.store-promo__label{
  font-family:var(--font-ui,inherit);font-weight:600;font-size:10px;letter-spacing:.16em;
  color:var(--soft,#a79f93);text-transform:uppercase;text-align:center;
}
.store-promo__frame{
  position:relative;overflow:hidden;border-radius:12px;
  border:1px solid var(--line-2,#d7cdb6);background:var(--card,#faf6ee);max-width:100%;
}
.store-promo--rect .store-promo__frame{width:300px;height:250px}
.store-promo--leader .store-promo__frame{width:728px;height:90px}
.store-promo__item{
  position:absolute;inset:0;display:flex;text-decoration:none;color:inherit;
  opacity:0;visibility:hidden;transition:opacity .5s ease;
}
.store-promo__item.is-active{opacity:1;visibility:visible}
.store-promo__img{overflow:hidden;background:var(--inset,#fcfaf5);flex:none}
/* contain, never cover: whole product always visible for any shape. */
.store-promo__img img{width:100%;height:100%;object-fit:contain;display:block}
.store-promo__body{
  flex:1;min-width:0;display:flex;flex-direction:column;
  gap:3px;padding:11px 13px;
}
.store-promo__eyebrow{
  font-family:var(--font-ui,inherit);font-weight:700;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent,#20507e);
}
.store-promo__name{
  font-family:var(--font-ui,inherit);font-weight:700;font-size:14.5px;line-height:1.25;
  color:var(--ink,#232026);overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.store-promo__price{font-size:13px;font-weight:600;color:var(--muted,#5d5852)}
.store-promo__price b{color:var(--ink,#232026);font-weight:700}
.store-promo__cta{
  align-self:flex-start;font-family:var(--font-ui,inherit);font-weight:700;font-size:12px;
  color:#fff;background:var(--accent,#20507e);padding:6px 12px;border-radius:8px;
  white-space:nowrap;
}
.store-promo__item:hover .store-promo__cta{background:var(--accent-light,#2f6c9e)}
.store-promo__item:hover .store-promo__name{color:var(--accent,#20507e)}
.store-promo--rect .store-promo__item{
  flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:9px;padding:14px 14px 16px;
}
.store-promo--rect .store-promo__img{
  width:118px;height:118px;border-radius:10px;border:1px solid var(--line-2,#d7cdb6);
}
.store-promo--rect .store-promo__body{flex:none;align-items:center;gap:3px;padding:0}
.store-promo--rect .store-promo__eyebrow{display:none}
.store-promo--rect .store-promo__cta{align-self:center;margin-top:5px}
.store-promo--leader .store-promo__item{flex-direction:row;align-items:center}
.store-promo--leader .store-promo__img{width:90px;height:90px}
.store-promo--leader .store-promo__body{
  flex-direction:row;align-items:center;gap:14px;padding:0 16px 0 15px;
}
.store-promo--leader .store-promo__eyebrow{display:none}
.store-promo--leader .store-promo__name{-webkit-line-clamp:2;font-size:15px;flex:1}
.store-promo--leader .store-promo__price{white-space:nowrap}
.store-promo--leader .store-promo__cta{align-self:center}
.promo-leaderboard{margin-top:22px}
.promo-leaderboard:not(:has(.store-promo)){display:none;margin:0}