/* v147 — compact game/service family pages inspired by the supplied reference.
   Applies only to the generic catalogue family pages and Steam Direct.
   Albion / WoWcircle keep their dedicated layouts. */

.familyPageV147{
  width:min(100% - 40px,700px)!important;
  max-width:700px!important;
  padding-bottom:84px;
}
.familyPageV147 .familyCrumb,
.familyPageV147>.crumb{
  margin:18px 0 16px;
  min-height:24px;
  font-size:11px;
}
.familyPageV147 .familyCrumb button,
.familyPageV147>.crumb button{font-size:11px}

.familyPageV147 .familyHeroV147,
.familyPageV147 .premiumIntro{
  grid-template-columns:124px minmax(0,1fr)!important;
  gap:20px!important;
  align-items:center;
  margin:0 0 12px;
  padding:0!important;
}
.familyPageV147 .productLogo{
  width:124px!important;
  height:124px!important;
  max-width:124px!important;
  border-radius:14px!important;
  border:1px solid rgba(125,144,171,.12)!important;
  background:#171c25!important;
  box-shadow:none!important;
}
.familyPageV147 .productLogo>img,
.familyPageV147 .productLogo>.fallback,
.familyPageV147 .productLogo>.catalogServiceFallback,
.familyPageV147 .productLogo>.giftFallback{
  width:100%;height:100%;object-fit:cover;
}
.familyPageV147 .introCopy .eyebrow{
  margin-bottom:4px;
  color:#687789;
  font-size:8px;
  letter-spacing:.15em;
}
.familyPageV147 .introCopy h1{
  margin:0 0 7px;
  font-size:20px!important;
  line-height:1.16;
  letter-spacing:-.3px;
  color:#edf3f9;
}
.familyPageV147 .official{
  min-height:24px;
  padding:4px 9px!important;
  gap:5px!important;
  border:1px solid rgba(167,151,255,.2);
  border-radius:999px!important;
  background:linear-gradient(90deg,rgba(135,124,241,.82),rgba(238,125,158,.82))!important;
  box-shadow:none!important;
  font-size:9px!important;
  line-height:1;
}
.familyOfficialIcon{width:12px;height:12px}
.familyPageV147 .introCopy p{
  max-width:none;
  margin:8px 0 8px;
  color:#a0adbd;
  font-size:11px;
  line-height:1.46;
}
.familyPageV147 .trustRow{gap:5px!important}
.familyPageV147 .trustRow span{
  min-height:25px;
  padding:4px 7px!important;
  border-color:rgba(128,145,167,.1)!important;
  border-radius:8px!important;
  background:#151a22!important;
  font-size:8.5px!important;
}
.familyPageV147 .trustRow b{font-size:8.5px!important;font-weight:650}
.familyPageV147 .trustRow .chipSvg{width:11px!important;height:11px!important}

.familyMiniNote{
  display:grid;
  grid-template-columns:31px minmax(0,1fr);
  gap:9px;
  align-items:center;
  margin:10px 0 13px;
  padding:7px 0;
  color:#758294;
  font-size:9.5px;
  line-height:1.45;
}
.familyMiniNote p{margin:0}
.familyMiniNote b{color:#9eabb9;font-weight:650}
.familyMiniArt{
  width:31px;height:31px;
  display:grid;place-items:center;
  overflow:hidden;
  border:1px solid rgba(127,145,170,.1);
  border-radius:7px;
  background:#171d26;
}
.familyMiniArt>img,.familyMiniArt>.fallback,.familyMiniArt>.catalogServiceFallback{width:100%;height:100%;object-fit:cover}

.familyPageV147 .familyVariantsPanel,
.familyPageV147 .steamCheckout{
  padding:14px!important;
  border:1px solid rgba(126,144,168,.09)!important;
  border-radius:10px!important;
  background:#171b23!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.familyPageV147 .flowHead{
  align-items:center;
  padding:0 0 11px;
  border-color:rgba(126,144,168,.08);
}
.familyPageV147 .flowHead small{
  font-size:8px!important;
  letter-spacing:.12em;
  color:#657284;
}
.familyPageV147 .flowHead h2{
  margin-top:2px;
  font-size:13px!important;
  font-weight:700;
}
.familyPageV147 .sortBadge{
  padding:4px 7px!important;
  border-radius:7px!important;
  border-color:rgba(61,130,210,.15)!important;
  background:#142032!important;
  color:#75a9e5!important;
  font-size:8px!important;
}
.familyPageV147 .stepLabel{margin:12px 0 7px!important;gap:7px}
.familyPageV147 .stepLabel>span{
  width:20px!important;height:20px!important;
  border-radius:6px!important;
  background:#1c2a3b!important;
  color:#7fb5ef!important;
  font-size:9px!important;
}
.familyPageV147 .stepLabel b{font-size:10.5px!important}
.familyPageV147 .stepLabel small{font-size:9px!important}

.familyPageV147 .regionTabs{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px!important;
  overflow:visible!important;
}
.familyPageV147 .regionTabs button,
.familyPageV147 .steamCurrencyTabs button{
  min-width:0!important;
  min-height:48px;
  padding:8px 10px!important;
  border-radius:8px!important;
  border-color:rgba(126,144,168,.1)!important;
  background:#151a22!important;
  box-shadow:none!important;
}
.familyPageV147 .regionTabs button.active,
.familyPageV147 .steamCurrencyTabs button.active{
  border-color:rgba(55,135,231,.55)!important;
  background:#152236!important;
}

.familyPageV147 .familyVariantGrid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:5px!important;
}
.familyPageV147 .familyVariantCard{
  position:relative;
  min-height:63px!important;
  padding:8px 10px!important;
  gap:9px!important;
  border-radius:7px!important;
  border:1px solid rgba(126,144,168,.07)!important;
  background:#161a22!important;
  box-shadow:none!important;
  transform:none!important;
}
.familyPageV147 .familyVariantCard:hover{
  border-color:rgba(78,141,215,.25)!important;
  background:#181e27!important;
}
.familyPageV147 .familyVariantCard.selected{
  border-color:rgba(48,134,237,.48)!important;
  background:#172131!important;
  box-shadow:inset 0 0 0 1px rgba(48,134,237,.08)!important;
}
.familyPageV147 .variantThumb{
  width:38px;height:38px;
  flex:0 0 38px;
  display:grid;place-items:center;
  align-self:center;
  overflow:hidden;
  border:1px solid rgba(130,148,171,.08);
  border-radius:7px;
  background:#1a2029;
}
.familyPageV147 .variantThumb>img,
.familyPageV147 .variantThumb>.fallback,
.familyPageV147 .variantThumb>.catalogServiceFallback{width:100%;height:100%;object-fit:cover}
.familyPageV147 .variantText b{
  font-size:10.5px!important;
  line-height:1.25;
  color:#e8eef5;
}
.familyPageV147 .variantText small{
  max-width:170px;
  margin-top:2px!important;
  color:#647286!important;
  font-size:8px!important;
}
.familyPageV147 .deliveryBadge{display:none!important}
.familyPageV147 .variantPrice{padding-right:5px}
.familyPageV147 .variantPrice strong{font-size:10.5px!important;font-weight:650}
.familyPageV147 .variantPrice small{margin-top:2px!important;font-size:7.5px!important}
.familyPageV147 .variantSelectedMark{
  position:absolute;right:4px;top:4px;
  width:14px;height:14px;
  display:grid;place-items:center;
  opacity:0;
  border-radius:50%;
  background:#2686ef;
  color:#fff;
  font-size:8px;
  transition:opacity .14s ease;
}
.familyPageV147 .familyVariantCard.selected .variantSelectedMark{opacity:1}
.familyPageV147 .familyVariantCard>.check{display:none!important}
.familyPageV147 .showAllBtn{
  margin-top:8px!important;
  min-width:150px!important;
  padding:7px 13px!important;
  border-radius:8px!important;
  font-size:9px;
}

.familyPageV147 .familyCheckoutPanel{
  display:block;
  margin-top:10px!important;
  padding:14px!important;
  border:1px solid rgba(126,144,168,.09);
  border-radius:10px;
  background:#171b23;
  box-shadow:none;
}
.familyPageV147 .familyCheckoutPanel .checkoutDivider{display:none}
.familyPageV147 .familyCheckoutPanel .stepLabel{margin-top:0!important}
.familyPageV147 .checkoutPlaceholder{
  margin:0;
  padding:12px 6px;
  border-top:0;
  font-size:10px;
}
.familyPageV147 .selectedSummary{
  margin:0 0 10px;
  padding:9px 10px!important;
  border-radius:8px!important;
  border-color:rgba(126,144,168,.08)!important;
  background:#141920!important;
}
.familyPageV147 .selectedSummary b{font-size:10.5px!important}
.familyPageV147 .selectedSummary span,
.familyPageV147 .selectedSummary small{font-size:8px!important}
.familyPageV147 .selectedSummary strong{font-size:14px!important}
.familyPageV147 .fulfillmentInfo,
.familyPageV147 .noFields,
.familyPageV147 .contactBlock,
.familyPageV147 .agreement,
.familyPageV147 .quantityBlock,
.familyPageV147 .steamLoginHint{
  border-radius:8px!important;
}
.familyPageV147 .checkoutField>span b,
.familyPageV147 .contactTitle b{font-size:9.5px!important}
.familyPageV147 .checkoutField>span small,
.familyPageV147 .checkoutField>small,
.familyPageV147 .contactTitle small{font-size:8px!important}
.familyPageV147 .checkoutField input,
.familyPageV147 .checkoutField select,
.familyPageV147 .contactInput,
.familyPageV147 .contactSelectBtn{
  height:43px!important;
  border-radius:8px!important;
  background:#11161e!important;
  font-size:10.5px!important;
}
.familyPageV147 .agreement{
  margin:10px 0!important;
  padding:9px 10px!important;
  font-size:8.5px!important;
}
.familyPageV147 .checkoutPerks{
  gap:5px!important;
  margin:9px 0!important;
}
.familyPageV147 .checkoutPerks span{
  padding:4px 7px!important;
  border-radius:8px!important;
  background:#141920!important;
  font-size:8px!important;
}
.familyPageV147 .buyNow{
  height:46px!important;
  border-radius:9px!important;
  font-size:12px!important;
  box-shadow:none!important;
}
.familyPageV147 .seoFamilyInfo{margin-top:18px}

/* Service placeholders: neutral themed artwork when no uploaded/provider image exists. */
.catalogServiceFallback,
.catalogGameFallback{
  box-sizing:border-box;
  width:100%;height:100%;
  place-items:center;
}
.catalogGameFallback{
  display:grid;
  color:#c5d0de;
  background:linear-gradient(145deg,#252c37,#171c24);
  font-size:12px;
  font-weight:800;
  letter-spacing:.03em;
}
.catalogServiceFallback{
  position:relative;
  display:grid;
  grid-template-rows:1fr auto;
  gap:2px;
  padding:13%;
  overflow:hidden;
  color:#dce6f3;
  background:linear-gradient(145deg,#212936,#151a22);
}
.catalogServiceFallback:before{
  content:"";
  position:absolute;
  width:70%;height:70%;
  right:-24%;top:-20%;
  border-radius:50%;
  background:rgba(92,145,211,.11);
}
.catalogServiceGlyph{display:grid;place-items:center;align-self:end;z-index:1}
.catalogServiceIcon{width:42%;height:42%;min-width:14px;min-height:14px;color:#8db9ea}
.catalogServiceFallback small{
  z-index:1;
  align-self:end;
  justify-self:center;
  font-size:clamp(5px,1.1vw,8px);
  font-weight:800;
  letter-spacing:.13em;
  color:#718197;
}
.serviceTheme-ai{background:linear-gradient(145deg,#24253b,#161824)}
.serviceTheme-ai .catalogServiceIcon{color:#aa9bf2}
.serviceTheme-secure{background:linear-gradient(145deg,#1d302d,#151d1d)}
.serviceTheme-secure .catalogServiceIcon{color:#77b9a7}
.serviceTheme-social{background:linear-gradient(145deg,#1d2938,#151a22)}
.serviceTheme-social .catalogServiceIcon{color:#75ace6}
.serviceTheme-work{background:linear-gradient(145deg,#2b2822,#191814)}
.serviceTheme-work .catalogServiceIcon{color:#d3b475}
.serviceTheme-media{background:linear-gradient(145deg,#30212b,#1b151b)}
.serviceTheme-media .catalogServiceIcon{color:#d58eaf}

/* Per-variant media editor in admin. */
.selectedProductMediaV147{margin-bottom:16px}
.adminFamilyCoverActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.adminVariantMediaHead{
  display:flex;justify-content:space-between;align-items:end;gap:12px;
  margin:16px 0 9px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.adminVariantMediaHead h3{margin:0 0 3px;font-size:15px}
.adminVariantMediaHead p{margin:0;color:var(--muted);font-size:10px}
.adminVariantMediaList{
  display:grid;
  gap:7px;
  max-height:560px;
  overflow:auto;
  padding-right:4px;
}
.adminVariantMediaRow{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto auto;
  gap:10px;
  align-items:center;
  padding:8px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface2);
}
.adminVariantMediaArt{
  width:48px;height:48px;
  display:grid;place-items:center;
  overflow:hidden;
  border-radius:9px;
  border:1px solid var(--line);
  background:#151a22;
}
.adminVariantMediaArt>img,
.adminVariantMediaArt>.fallback,
.adminVariantMediaArt>.catalogServiceFallback{width:100%;height:100%;object-fit:cover}
.adminVariantMediaInfo{display:grid;gap:2px;min-width:0}
.adminVariantMediaInfo b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adminVariantMediaInfo small{color:var(--muted);font-size:9px}
.adminVariantMediaInfo span{color:#617085;font-size:8px}

@media(max-width:760px){
  .familyPageV147{width:min(100% - 20px,700px)!important}
  .familyPageV147 .familyHeroV147,
  .familyPageV147 .premiumIntro{grid-template-columns:96px minmax(0,1fr)!important;gap:14px!important}
  .familyPageV147 .productLogo{width:96px!important;height:96px!important;max-width:96px!important}
  .familyPageV147 .introCopy h1{font-size:18px!important}
  .adminVariantMediaRow{grid-template-columns:42px minmax(0,1fr) auto}
  .adminVariantMediaArt{width:42px;height:42px}
  .adminVariantMediaRow>.dangerGhost{grid-column:2/-1;justify-self:start}
}
@media(max-width:560px){
  .familyPageV147{width:min(100% - 16px,700px)!important}
  .familyPageV147 .familyHeroV147,
  .familyPageV147 .premiumIntro{
    grid-template-columns:76px minmax(0,1fr)!important;
    gap:11px!important;
    align-items:start;
  }
  .familyPageV147 .productLogo{width:76px!important;height:76px!important;max-width:76px!important;border-radius:11px!important}
  .familyPageV147 .introCopy h1{font-size:16px!important}
  .familyPageV147 .introCopy p{font-size:9.5px;line-height:1.4}
  .familyPageV147 .official{min-height:20px;padding:3px 7px!important;font-size:8px!important}
  .familyPageV147 .trustRow{
    width:calc(100% + 87px)!important;
    margin-left:-87px!important;
    margin-top:9px!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  .familyPageV147 .trustRow>span:last-child:nth-child(odd){grid-column:auto!important}
  .familyMiniNote{margin-top:7px}
  .familyPageV147 .familyVariantsPanel,
  .familyPageV147 .familyCheckoutPanel,
  .familyPageV147 .steamCheckout{padding:10px!important}
  .familyPageV147 .flowHead{display:flex!important}
  .familyPageV147 .flowHead h2{font-size:11.5px!important}
  .familyPageV147 .sortBadge{margin-top:0!important;white-space:nowrap}
  .familyPageV147 .familyVariantGrid{grid-template-columns:1fr 1fr!important;gap:4px!important}
  .familyPageV147 .familyVariantCard{min-height:58px!important;padding:7px!important;gap:7px!important}
  .familyPageV147 .variantThumb{width:34px;height:34px;flex-basis:34px}
  .familyPageV147 .variantText b{font-size:9px!important}
  .familyPageV147 .variantText small{display:none}
  .familyPageV147 .variantPrice strong{font-size:9px!important}
  .familyPageV147 .variantPrice small{display:none}
  .familyPageV147 .regionTabs{grid-template-columns:1fr 1fr!important}
  .familyPageV147 .inlineFields{grid-template-columns:1fr!important}
  .adminVariantMediaRow{grid-template-columns:40px minmax(0,1fr);align-items:start}
  .adminVariantMediaArt{width:40px;height:40px}
  .adminVariantMediaRow>.adminUploadBtn,
  .adminVariantMediaRow>.dangerGhost{grid-column:2;justify-self:start}
}
@media(max-width:400px){
  .familyPageV147 .familyVariantGrid{grid-template-columns:1fr!important}
  .familyPageV147 .regionTabs{grid-template-columns:1fr!important}
  .familyPageV147 .trustRow{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .familyPageV147 .trustRow>span:last-child:nth-child(odd){grid-column:1/-1!important}
}


/* v148 — readability + restored matte gradient chips + convenient region selectors */
.familyPageV147{
  width:min(100% - 40px,720px)!important;
  max-width:720px!important;
}
.familyPageV147 .familyCrumb,
.familyPageV147>.crumb{font-size:12px!important}
.familyPageV147 .familyHeroV147,
.familyPageV147 .premiumIntro{grid-template-columns:132px minmax(0,1fr)!important;gap:22px!important}
.familyPageV147 .productLogo{width:132px!important;height:132px!important;max-width:132px!important;border-radius:16px!important}
.familyPageV147 .introCopy .eyebrow{margin-bottom:6px;font-size:9px!important}
.familyPageV147 .introCopy h1{margin:0 0 10px;font-size:28px!important;line-height:1.16!important}
.familyPageV147 .official{min-height:28px!important;padding:5px 11px!important;gap:7px!important;font-size:11px!important;font-weight:700!important}
.familyPageV147 .introCopy p{margin:10px 0 12px;font-size:14px!important;line-height:1.6!important;color:#afbccb!important}
.familyPageV147 .trustRow,
.familyPageV147 .checkoutPerks{display:flex!important;flex-wrap:wrap!important;gap:8px!important}
.familyPageV147 .trustRow span,
.familyPageV147 .checkoutPerks span{
  --ss-chip-bg:linear-gradient(135deg,#623044 0%,#4d3559 48%,#34415e 100%);
  position:relative;display:inline-flex!important;align-items:center!important;gap:9px!important;min-height:38px!important;padding:8px 13px!important;border:0!important;border-radius:10px!important;background:var(--ss-chip-bg)!important;background-size:165% 165%!important;color:#f7f9fc!important;font-size:12px!important;font-weight:600!important;line-height:1.22!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;overflow:hidden!important}
.familyPageV147 .trustRow span::before,
.familyPageV147 .checkoutPerks span::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,rgba(255,255,255,.055),rgba(255,255,255,0) 38%,rgba(255,255,255,.025) 72%,rgba(255,255,255,0))}
.familyPageV147 .trustRow span:nth-child(2),
.familyPageV147 .checkoutPerks span:nth-child(2){--ss-chip-bg:linear-gradient(135deg,#35466b 0%,#433963 48%,#353f61 100%)}
.familyPageV147 .trustRow span:nth-child(3),
.familyPageV147 .checkoutPerks span:nth-child(3){--ss-chip-bg:linear-gradient(135deg,#245247 0%,#2a4c58 50%,#334262 100%)}
.familyPageV147 .trustRow span:nth-child(4),
.familyPageV147 .checkoutPerks span:nth-child(4){--ss-chip-bg:linear-gradient(135deg,#65472d 0%,#5a3b45 48%,#45395e 100%)}
.familyPageV147 .trustRow .chipSvg,
.familyPageV147 .checkoutPerks .chipSvg{width:15px!important;height:15px!important;min-width:15px!important;position:relative;z-index:1;color:#f6f8fc!important}
.familyPageV147 .trustRow b,
.familyPageV147 .checkoutPerks b{font-size:12px!important;font-weight:600!important;position:relative;z-index:1;color:inherit!important}
.familyMiniNote{grid-template-columns:42px minmax(0,1fr)!important;gap:11px!important;margin:12px 0 15px!important;padding:10px 0!important;font-size:11.5px!important;line-height:1.52!important}
.familyMiniArt{width:42px!important;height:42px!important;border-radius:10px!important}
.familyPageV147 .familyVariantsPanel,
.familyPageV147 .steamCheckout,
.familyPageV147 .familyCheckoutPanel{padding:18px!important;border-radius:14px!important}
.familyPageV147 .flowHead{padding:0 0 14px!important}
.familyPageV147 .flowHead small{font-size:10px!important}
.familyPageV147 .flowHead h2{font-size:18px!important}
.familyPageV147 .sortBadge{font-size:10px!important;padding:6px 10px!important;border-radius:8px!important}
.familyPageV147 .stepLabel{margin:14px 0 9px!important}
.familyPageV147 .stepLabel>span{width:22px!important;height:22px!important;font-size:10px!important}
.familyPageV147 .stepLabel b{font-size:14px!important;line-height:1.25!important}
.familyPageV147 .stepLabel small{font-size:10px!important}
.familyPageV147 .regionTabs{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
.familyPageV147 .regionTabs button,
.familyPageV147 .steamCurrencyTabs button{min-height:58px!important;padding:10px 12px!important;border-radius:10px!important}
.familyPageV147 .regionTabs button span,
.familyPageV147 .steamCurrencyTabs button span{font-size:13px!important}
.familyPageV147 .regionTabs button small,
.familyPageV147 .steamCurrencyTabs button small{font-size:10px!important}
.familyPageV147 .regionSelectWrap,
.familyPageV147 .steamModeSwitch{display:grid;gap:7px;margin:0 0 10px}
.familyPageV147 .regionSelectTitle,
.familyPageV147 .steamModeSwitch>span{font-size:11px;color:#8f9eb1;font-weight:650}
.familyPageV147 .regionSelectShell,
.familyPageV147 .steamModeSwitchShell{position:relative}
.familyPageV147 .regionSelect,
.familyPageV147 .steamModeSwitch select{width:100%;height:48px;padding:0 42px 0 14px;border:1px solid rgba(127,146,170,.16);border-radius:10px;background:linear-gradient(180deg,#141a22,#10151d);color:#edf3f9;font-size:14px;outline:0;appearance:none}
.familyPageV147 .regionSelectShell::after,
.familyPageV147 .steamModeSwitchShell::after{content:'▾';position:absolute;right:14px;top:50%;transform:translateY(-50%);color:#8ea2bc;font-size:14px;pointer-events:none}
.familyPageV147 .familyVariantGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
.familyPageV147 .familyVariantCard{min-height:78px!important;padding:10px 12px!important;gap:10px!important;border-radius:10px!important}
.familyPageV147 .variantThumb{width:44px!important;height:44px!important;flex-basis:44px!important;border-radius:9px!important}
.familyPageV147 .variantText b{font-size:13px!important;line-height:1.26!important}
.familyPageV147 .variantText small{font-size:10px!important;max-width:none!important}
.familyPageV147 .variantPrice strong{font-size:13px!important}
.familyPageV147 .variantPrice small{font-size:9px!important}
.familyPageV147 .selectedSummary{padding:12px 13px!important;border-radius:10px!important}
.familyPageV147 .selectedSummary b{font-size:13px!important}
.familyPageV147 .selectedSummary span,
.familyPageV147 .selectedSummary small{font-size:10px!important}
.familyPageV147 .selectedSummary strong{font-size:18px!important}
.familyPageV147 .checkoutField>span b,
.familyPageV147 .contactTitle b{font-size:12px!important}
.familyPageV147 .checkoutField>span small,
.familyPageV147 .checkoutField>small,
.familyPageV147 .contactTitle small{font-size:10px!important}
.familyPageV147 .checkoutField input,
.familyPageV147 .checkoutField select,
.familyPageV147 .contactInput,
.familyPageV147 .contactSelectBtn{height:46px!important;font-size:14px!important}
.familyPageV147 .agreement{margin:12px 0!important;padding:12px!important;font-size:12px!important;line-height:1.48!important}
.familyPageV147 .buyNow{height:50px!important;font-size:15px!important}
.familyPageV147 .checkoutPlaceholder{font-size:12px!important}
.familyPageV147 .checkoutPlaceholder small{font-size:11px!important}
@media(max-width:760px){
  .familyPageV147{width:min(100% - 18px,720px)!important}
  .familyPageV147 .familyHeroV147,
  .familyPageV147 .premiumIntro{grid-template-columns:108px minmax(0,1fr)!important;gap:16px!important}
  .familyPageV147 .productLogo{width:108px!important;height:108px!important;max-width:108px!important}
  .familyPageV147 .introCopy h1{font-size:22px!important}
  .familyPageV147 .introCopy p{font-size:13px!important}
  .familyPageV147 .regionTabs{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:560px){
  .familyPageV147 .familyHeroV147,
  .familyPageV147 .premiumIntro{grid-template-columns:82px minmax(0,1fr)!important;gap:12px!important}
  .familyPageV147 .productLogo{width:82px!important;height:82px!important;max-width:82px!important;border-radius:13px!important}
  .familyPageV147 .introCopy h1{font-size:18px!important}
  .familyPageV147 .introCopy p{font-size:12px!important;line-height:1.5!important}
  .familyPageV147 .trustRow{width:100%!important;margin-left:0!important;margin-top:10px!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .familyPageV147 .trustRow span,
  .familyPageV147 .checkoutPerks span{min-height:40px!important;height:auto!important;padding:8px 10px!important;font-size:11px!important;white-space:normal!important}
  .familyPageV147 .familyVariantsPanel,
  .familyPageV147 .familyCheckoutPanel,
  .familyPageV147 .steamCheckout{padding:12px!important}
  .familyPageV147 .familyVariantGrid{grid-template-columns:1fr!important;gap:6px!important}
  .familyPageV147 .familyVariantCard{min-height:72px!important}
  .familyPageV147 .variantText b{font-size:12px!important}
  .familyPageV147 .variantText small{display:block!important;font-size:10px!important}
  .familyPageV147 .variantPrice strong{font-size:12px!important}
  .familyPageV147 .checkoutField input,
  .familyPageV147 .checkoutField select,
  .familyPageV147 .contactInput,
  .familyPageV147 .contactSelectBtn,
  .familyPageV147 .regionSelect,
  .familyPageV147 .steamModeSwitch select{height:44px!important;font-size:13px!important}
}


/* v149 — richer game placeholders for missing provider images */
.catalogGameFallback{
  position:relative;
  display:grid;
  grid-template-rows:1fr auto;
  align-items:center;
  justify-items:center;
  gap:3px;
  padding:14% 10%;
  overflow:hidden;
  text-align:center;
  color:#eef4fb;
  background:linear-gradient(145deg,#242d39,#171c24);
}
.catalogGameFallback::before{
  content:"";
  position:absolute;
  inset:auto -18% -24% auto;
  width:72%;height:72%;
  border-radius:50%;
  background:rgba(109,139,196,.14);
  filter:blur(1px);
}
.catalogGameFallback::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,0) 38%,rgba(255,255,255,.025) 75%,rgba(255,255,255,0));
}
.catalogGameFallback b,
.catalogGameFallback small{position:relative;z-index:1}
.catalogGameFallback b{
  display:block;
  max-width:100%;
  font-size:clamp(12px,2.2vw,24px);
  line-height:1;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.catalogGameFallback small{
  display:block;
  max-width:100%;
  font-size:clamp(6px,1vw,10px);
  line-height:1.15;
  font-weight:700;
  color:#b8c7d8;
  letter-spacing:.03em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.gameTheme-shooter{background:linear-gradient(145deg,#36233c,#221c2d 46%,#171c24)}
.gameTheme-shooter::before{background:rgba(227,102,146,.16)}
.gameTheme-fantasy{background:linear-gradient(145deg,#20344a,#252f46 46%,#171c24)}
.gameTheme-fantasy::before{background:rgba(89,150,233,.16)}
.gameTheme-sandbox{background:linear-gradient(145deg,#263229,#25362f 46%,#171c24)}
.gameTheme-sandbox::before{background:rgba(104,197,142,.15)}
.familyPageV147 .productLogo>.catalogGameFallback{padding:16% 12%}
.familyPageV147 .productLogo>.catalogGameFallback b{font-size:clamp(20px,2.4vw,32px)}
.familyPageV147 .productLogo>.catalogGameFallback small{font-size:clamp(9px,1vw,12px)}
.familyMiniArt>.catalogGameFallback{padding:10%}
.familyMiniArt>.catalogGameFallback b{font-size:clamp(9px,1vw,14px)}
.familyMiniArt>.catalogGameFallback small{font-size:clamp(4px,.6vw,7px)}
.familyPageV147 .variantThumb>.catalogGameFallback{padding:10% 8%}
.familyPageV147 .variantThumb>.catalogGameFallback b{font-size:clamp(8px,1vw,12px)}
.familyPageV147 .variantThumb>.catalogGameFallback small{font-size:clamp(4px,.55vw,6px)}


/* v150 — hero alignment refinement + breadcrumb moved into the content column */
.familyPageV147 .familyCrumb,
.familyPageV147>.crumb{
  margin:12px 0 14px calc(132px + 22px) !important;
  max-width:calc(100% - 154px);
}
.familyPageV147 .familyHeroV147,
.familyPageV147 .premiumIntro{
  align-items:start !important;
}
.familyPageV147 .introCopy{
  padding-top:2px;
}
.familyPageV147 .familyMiniNote{
  margin-top:10px !important;
}
@media(max-width:760px){
  .familyPageV147 .familyCrumb,
  .familyPageV147>.crumb{
    margin-left:calc(108px + 16px) !important;
    max-width:calc(100% - 124px);
  }
}
@media(max-width:560px){
  .familyPageV147 .familyCrumb,
  .familyPageV147>.crumb{
    margin:10px 0 12px calc(82px + 12px) !important;
    max-width:calc(100% - 94px);
  }
}


/* v151 — reference-style hero + bottom-only perk chips + richer mini copy */
.familyPageV147 .familyCrumb,
.familyPageV147>.crumb{
  margin:10px 0 12px calc(132px + 22px) !important;
  max-width:calc(100% - 154px);
  opacity:.92;
}
.familyPageV147 .introCopy .eyebrow{
  margin-bottom:7px !important;
  font-size:10px !important;
  letter-spacing:.18em !important;
  color:#6c7786 !important;
}
.familyPageV147 .familyHeroV147,
.familyPageV147 .premiumIntro{
  margin-bottom:8px !important;
  align-items:start !important;
}
.familyPageV147 .introCopy{
  display:block;
  padding-top:1px;
}
.familyPageV147 .familyHeroV147 .trustRow,
.familyPageV147 .premiumIntro .trustRow{
  display:none !important;
}
.familyPageV147 .introCopy h1{
  margin-bottom:8px !important;
}
.familyPageV147 .introCopy p{
  margin:12px 0 0 !important;
  max-width:640px;
}
.familyPageV147 .familyMiniNote{
  display:grid !important;
  grid-template-columns:42px minmax(0,1fr) !important;
  gap:12px !important;
  align-items:start !important;
  margin:12px 0 16px !important;
  padding:0 !important;
  color:#90a0b2 !important;
  background:transparent !important;
  border:none !important;
}
.familyPageV147 .familyMiniBody{
  display:grid;
  gap:9px;
}
.familyPageV147 .familyMiniText{
  margin:0 !important;
  font-size:12px !important;
  line-height:1.55 !important;
  color:#8d9bac !important;
}
.familyPageV147 .familyMiniText b{
  color:#c6d2df !important;
  font-weight:700 !important;
}
.familyPageV147 .familyMiniPerks{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.familyPageV147 .familyMiniPerks span{
  --ss-chip-bg:linear-gradient(135deg,#623044 0%,#4d3559 48%,#34415e 100%);
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:38px;
  padding:8px 13px;
  border:0;
  border-radius:10px;
  background:var(--ss-chip-bg);
  color:#f7f9fc;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
  overflow:hidden;
}
.familyPageV147 .familyMiniPerks span::before{
  content:"";
  position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(110deg,rgba(255,255,255,.055),rgba(255,255,255,0) 38%,rgba(255,255,255,.025) 72%,rgba(255,255,255,0));
}
.familyPageV147 .familyMiniPerks span:nth-child(2){--ss-chip-bg:linear-gradient(135deg,#35466b 0%,#433963 48%,#353f61 100%)}
.familyPageV147 .familyMiniPerks span:nth-child(3){--ss-chip-bg:linear-gradient(135deg,#245247 0%,#2a4c58 50%,#334262 100%)}
.familyPageV147 .familyMiniPerks .chipSvg{width:15px;height:15px;min-width:15px;position:relative;z-index:1;color:#f6f8fc}
.familyPageV147 .familyMiniPerks b{font-size:12px;font-weight:600;position:relative;z-index:1;color:inherit}
@media(max-width:760px){
  .familyPageV147 .familyCrumb,
  .familyPageV147>.crumb{margin-left:calc(108px + 16px) !important;max-width:calc(100% - 124px)}
}
@media(max-width:560px){
  .familyPageV147 .familyCrumb,
  .familyPageV147>.crumb{margin:10px 0 12px calc(82px + 12px) !important;max-width:calc(100% - 94px)}
  .familyPageV147 .familyMiniNote{grid-template-columns:36px minmax(0,1fr) !important;gap:10px !important}
  .familyPageV147 .familyMiniArt{width:36px !important;height:36px !important}
  .familyPageV147 .familyMiniText{font-size:11px !important;line-height:1.5 !important}
  .familyPageV147 .familyMiniPerks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .familyPageV147 .familyMiniPerks span{min-height:40px;padding:8px 10px}
  .familyPageV147 .familyMiniPerks>span:last-child:nth-child(odd){grid-column:1/-1}
}

/* v154 — breadcrumbs back to the natural left edge */
.familyPageV147 .familyCrumb,
.familyPageV147>.crumb{
  margin:10px 0 12px 0 !important;
  max-width:none !important;
}
@media(max-width:760px){
  .familyPageV147 .familyCrumb,
  .familyPageV147>.crumb{
    margin:10px 0 12px 0 !important;
    max-width:none !important;
  }
}
@media(max-width:560px){
  .familyPageV147 .familyCrumb,
  .familyPageV147>.crumb{
    margin:10px 0 12px 0 !important;
    max-width:none !important;
  }
}


/* v157 — shared type-based product thumbs to avoid one image per each item */
.familyPageV147 .variantThumb{
  position:relative;
}
.familyPageV147 .variantThumbImg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.familyPageV147 .variantThumbShade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(6,10,18,0) 35%,rgba(6,10,18,.72) 100%);
  pointer-events:none;
}
.familyPageV147 .variantThumbBadge{
  position:absolute;
  left:4px;
  right:4px;
  bottom:4px;
  z-index:2;
  height:14px;
  padding:0 4px;
  border-radius:5px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:7px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#f6f8fc;
  background:rgba(11,16,25,.72);
  backdrop-filter:blur(4px);
}
.familyPageV147 .variantThumb-pass .variantThumbBadge{background:linear-gradient(135deg,rgba(120,71,174,.9),rgba(95,67,148,.9))}
.familyPageV147 .variantThumb-currency .variantThumbBadge{background:linear-gradient(135deg,rgba(43,118,231,.9),rgba(54,87,182,.9))}
.familyPageV147 .variantThumb-extra .variantThumbBadge{background:linear-gradient(135deg,rgba(69,121,110,.92),rgba(52,85,121,.9))}
.familyPageV147 .variantThumb>.catalogGameFallback,
.familyPageV147 .variantThumb>.catalogServiceFallback,
.familyPageV147 .variantThumb>.fallback{width:100%;height:100%;object-fit:cover}
.familyPageV147 .variantThumb-pass>.catalogGameFallback{background:linear-gradient(145deg,#3d2850,#241f34 46%,#171c24)}
.familyPageV147 .variantThumb-currency>.catalogGameFallback{background:linear-gradient(145deg,#20344a,#253858 46%,#171c24)}
.familyPageV147 .variantThumb-extra>.catalogGameFallback{background:linear-gradient(145deg,#25332e,#263a39 46%,#171c24)}


/* v158 — admin: one shared image per product type */
.adminVariantGroupList{display:grid;gap:10px;margin-top:10px}
.adminVariantGroupCard{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px;border:1px solid rgba(126,144,168,.12);border-radius:12px;background:#151a22}
.adminVariantGroupArt{position:relative;width:76px;height:76px;overflow:hidden;border-radius:11px;border:1px solid rgba(126,144,168,.12);background:#1a2029}
.adminVariantGroupArt>img,.adminVariantGroupArt>.fallback,.adminVariantGroupArt>.catalogGameFallback,.adminVariantGroupArt>.catalogServiceFallback{width:100%;height:100%;object-fit:cover}
.adminVariantGroupTag{position:absolute;left:6px;bottom:6px;z-index:3;padding:3px 6px;border-radius:6px;background:rgba(10,15,23,.78);color:#edf4fb;font-size:8px;font-weight:850;letter-spacing:.08em}
.adminVariantGroupInfo{min-width:0;display:grid;gap:3px}.adminVariantGroupInfo>b{font-size:13px;color:#eaf1f8}.adminVariantGroupInfo>small{font-size:10px;color:#7f8da0}.adminVariantGroupInfo>p{margin:2px 0 0;font-size:10px;line-height:1.4;color:#9ba9ba}.adminVariantGroupInfo>em{font-style:normal;font-size:9px;color:#657487;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adminVariantGroupActions{display:flex;gap:7px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
@media(max-width:720px){.adminVariantGroupCard{grid-template-columns:64px minmax(0,1fr)}.adminVariantGroupArt{width:64px;height:64px}.adminVariantGroupActions{grid-column:2;justify-content:flex-start}}