/* v112 — responsive hardening pass.
   Loaded last on purpose: this file only fixes cross-page layout collisions and
   mobile min-content overflow without changing catalogue data or app logic. */

/* Grid/flex children must be allowed to shrink. This prevents a long chip/title
   from widening the whole page on phones. */
#app,
#app > main,
.container,
.productPage,
.productIntro,
.premiumIntro,
.introCopy,
.purchase,
.flowHead,
.variantGrid,
.selectedSummary,
.ab-game-intro,
.ab-game-intro-copy,
.ab-game-facts,
.un-root,
.un-layout,
.un-main,
.un-card,
.un-side-card{
  min-width:0;
}

.productPage,
.productIntro,
.premiumIntro,
.introCopy,
.purchase,
.ab-game-intro,
.ab-game-intro-copy,
.un-root{
  max-width:100%;
}

/* The old 1fr track kept its min-content width and pushed Steam/generic product
   pages outside the real viewport. minmax(0,1fr) is the correct shrinkable track. */
.premiumIntro{
  grid-template-columns:150px minmax(0,1fr);
}

/* Shared shell used width:auto!important for direct breadcrumb SVGs. On the
   unlock page that turned a 13px chevron into a full-width square. */
.siteBreadcrumb > svg,
.un-breadcrumb.siteBreadcrumb > .mx-icon{
  width:13px!important;
  min-width:13px!important;
  max-width:13px!important;
  height:13px!important;
  min-height:13px!important;
  max-height:13px!important;
  flex:0 0 13px!important;
}
.un-breadcrumb.siteBreadcrumb > .mx-icon{
  transform:rotate(-90deg)!important;
}

/* Keep media and form contents inside their own cards. */
.productPage img,
.productPage video,
.productPage canvas,
.ab-page img,
.ab-page video,
.un-root img,
.un-root video{
  max-width:100%;
}
.productPage :is(input,select,textarea,button),
.un-root :is(input,select,textarea,button){
  min-width:0;
}

@media(max-width:760px){
  .premiumIntro{
    grid-template-columns:105px minmax(0,1fr);
  }
}

@media(max-width:640px){
  /* Trust/fact chips are information, not a carousel. Show them all cleanly
     instead of leaving the final chip visually cut at the right edge. */
  .productIntro .trustRow,
  .premiumIntro .trustRow,
  .ab-game-facts,
  .un-hero-tags{
    display:flex!important;
    flex-wrap:wrap!important;
    overflow:visible!important;
    max-width:100%!important;
    padding-right:0!important;
    padding-bottom:0!important;
    overscroll-behavior:auto!important;
  }
  .productIntro .trustRow > span,
  .premiumIntro .trustRow > span,
  .ab-game-facts > span,
  .un-hero-tags > span{
    flex:0 1 auto!important;
    min-width:0!important;
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere;
  }
  .productIntro .trustRow > span b,
  .premiumIntro .trustRow > span b,
  .ab-game-facts > span b,
  .un-hero-tags > span b{
    min-width:0!important;
    max-width:100%!important;
    white-space:normal!important;
  }

  /* Albion/WoW shared intro uses the same defensive shrink rule. */
  .ab-game-intro{
    grid-template-columns:82px minmax(0,1fr)!important;
  }
  .ab-game-intro-copy{
    overflow:visible;
  }

  /* Unlock page: compact breadcrumb and hero with no accidental oversized icon. */
  .un-breadcrumb.siteBreadcrumb{
    width:100%!important;
    min-height:28px!important;
    overflow:hidden!important;
  }
  .un-breadcrumb.siteBreadcrumb > [aria-current]{
    min-width:0!important;
    max-width:calc(100% - 90px)!important;
  }
  .un-hero > div:first-child{
    min-width:0;
  }
}

@media(max-width:520px){
  .premiumIntro{
    grid-template-columns:82px minmax(0,1fr)!important;
    align-items:start;
  }
  .productLogo{
    max-width:82px;
  }
  .introCopy{
    width:100%;
    overflow:visible;
  }
  /* Override the older late rule that changed the chip row back to nowrap. */
  .productIntro .trustRow,
  .premiumIntro .trustRow{
    flex-wrap:wrap!important;
    overflow:visible!important;
  }

  .un-tabs{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px;
    align-items:stretch;
  }
  .un-tabs :is(button,a){
    width:100%;
    min-width:0;
    padding-inline:9px;
  }
  .un-tabs a{
    margin-left:0;
  }
}

@media(max-width:380px){
  .premiumIntro{
    grid-template-columns:72px minmax(0,1fr)!important;
    gap:11px!important;
  }
  .productLogo{
    width:72px!important;
    height:72px!important;
    max-width:72px;
  }
  .introCopy h1{
    font-size:18px!important;
    line-height:1.15;
  }
  .official{
    max-width:100%;
    white-space:normal;
    line-height:1.25;
  }
  .un-games{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
}

/* v113 — mobile feature-chip layout.
   The v109 chip system looked good on desktop but on phones the hero copy column
   became too narrow: badges wrapped into random 2+1 / 1+2 rows and looked broken.
   Use a predictable two-column mobile grid and let the odd final item occupy the
   full row. This applies to the shared MARKET chip families, not to catalogue rails. */
@media(max-width:640px){
  .productIntro .trustRow,
  .premiumIntro .trustRow,
  .checkoutPerks,
  .ab-game-facts,
  .un-hero-tags{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-items:stretch!important;
    gap:6px!important;
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
    padding:0!important;
  }

  .productIntro .trustRow>span,
  .premiumIntro .trustRow>span,
  .checkoutPerks>span,
  .ab-game-facts>span,
  .un-hero-tags>span{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    min-height:30px!important;
    height:auto!important;
    padding:6px 8px!important;
    gap:6px!important;
    justify-content:center!important;
    text-align:center!important;
    font-size:9px!important;
    line-height:1.15!important;
    white-space:normal!important;
    overflow:hidden!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    border-radius:9px!important;
  }

  .productIntro .trustRow>span b,
  .premiumIntro .trustRow>span b,
  .checkoutPerks>span b,
  .ab-game-facts>span b,
  .un-hero-tags>span b{
    min-width:0!important;
    max-width:100%!important;
    white-space:normal!important;
    line-height:1.15!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }

  .productIntro .trustRow>span:last-child:nth-child(odd),
  .premiumIntro .trustRow>span:last-child:nth-child(odd),
  .checkoutPerks>span:last-child:nth-child(odd),
  .ab-game-facts>span:last-child:nth-child(odd),
  .un-hero-tags>span:last-child:nth-child(odd){
    grid-column:1 / -1!important;
  }

  .productIntro .trustRow>span svg,
  .premiumIntro .trustRow>span svg,
  .checkoutPerks>span svg,
  .ab-game-facts>span svg,
  .un-hero-tags>span svg{
    width:13px!important;
    height:13px!important;
    min-width:13px!important;
    flex:0 0 13px!important;
  }

  /* Status badge is allowed to wrap, but must stay inside the copy column. */
  .productIntro .official,
  .premiumIntro .official,
  .ab-game-badge,
  .wc-game-badge{
    max-width:100%!important;
    min-width:0!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    line-height:1.15!important;
  }
}

@media(max-width:520px){
  /* On generic/Steam/social product heroes the facts live inside the narrow
     text column beside the logo. Give the facts the full hero width below it. */
  .premiumIntro{
    --v113-intro-logo:82px;
    --v113-intro-gap:13px;
  }
  .premiumIntro .trustRow{
    width:calc(100% + var(--v113-intro-logo) + var(--v113-intro-gap))!important;
    max-width:none!important;
    margin-left:calc((var(--v113-intro-logo) + var(--v113-intro-gap)) * -1)!important;
    margin-top:11px!important;
  }

  /* Checkout chips are already full-card width; keep them as an even 2xN grid. */
  .checkoutPerks{
    margin:12px 0!important;
  }

  /* Albion uses the same pill language. Two equal cells avoid an accidental
     tiny orphan chip at the right edge. */
  .ab-game-facts{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:380px){
  .premiumIntro{
    --v113-intro-logo:72px;
    --v113-intro-gap:11px;
  }
  .productIntro .trustRow>span,
  .premiumIntro .trustRow>span,
  .checkoutPerks>span,
  .ab-game-facts>span,
  .un-hero-tags>span{
    padding:6px 6px!important;
    font-size:8.5px!important;
  }
}

/* v184 — Albion mobile intro: keep the approved cover untouched and reserve its full column. */
@media(max-width:640px){
  .ab-page .ab-game-intro{
    grid-template-columns:150px minmax(0,1fr)!important;
    column-gap:12px!important;
  }
  .ab-page .ab-game-intro-copy{
    grid-column:2!important;
    min-width:0!important;
    margin-left:0!important;
    transform:none!important;
  }
}
@media(max-width:390px){
  .ab-page .ab-game-intro{
    grid-template-columns:138px minmax(0,1fr)!important;
    column-gap:10px!important;
  }
}