/* hide mobile quick nav on pay/checkout — v=20261106b */
@media (max-width: 900px) {
  body:has(.checkout-page) .mqn,
  body:has(.checkout-page) .mqn-sheet-root,
  body:has(.checkout-summary) .mqn,
  body:has(.checkout-summary) .mqn-sheet-root,
  body:has(.checkout-pay) .mqn,
  body:has(.checkout-pay) .mqn-sheet-root,
  body:has(.order-pay-page) .mqn,
  body:has(.order-pay-page) .mqn-sheet-root,
  body:has(.pay-flow-card) .mqn,
  body:has(.pay-flow-card) .mqn-sheet-root,
  body:has(.pay-card) .mqn,
  body:has(.pay-card) .mqn-sheet-root,
  .checkout-page .mqn {
    display: none !important;
  }
  body:has(.checkout-page) .checkout-side > .checkout-summary,
  body:has(.checkout-page) .checkout-side > .sticky-card,
  body:has(.checkout-summary) .checkout-side > .checkout-summary,
  body:has(.checkout-summary) .checkout-side > .sticky-card {
    z-index: 70;
    bottom: max(0px, env(safe-area-inset-bottom, 0px));
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
  }
  body:has(.checkout-summary),
  body:has(.order-pay-page),
  body:has(.pay-flow-card),
  body:has(.pay-card) {
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px)) !important;
  }
  .order-pay-page .auth-actions,
  .pay-flow-card .auth-actions,
  .pay-card .auth-actions {
    position: relative;
    z-index: 70;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
  }
}

/* dual Visa+MC brand mark — v=20261106d */
.pay-chip-icon,
.pay-row .pay-chip-icon,
.pay-select-trigger .pay-chip-icon,
.pay-select-option .pay-chip-icon {
  width: 4rem !important;
  min-width: 4rem;
  height: 1.65rem !important;
  overflow: visible !important;
  aspect-ratio: auto;
}
.pay-chip-icon svg,
.pay-row .pay-chip-icon svg,
.pay-select-option .pay-chip-icon svg {
  width: auto !important;
  height: 100% !important;
  max-width: 4rem;
  display: block;
}
/* mobile-poe-listing-gap — v=20261106f
   Cause: GamePageView-xenAYx9l.css
     .shop-page.skin-poe2,.shop-page.skin-poe2.shop-page--poe2-bg{min-height:100dvh}
   leaves a full-viewport dark shell when the item grid is short/collapsed.
   Compounded on mobile by storefront-routes forcing
     .shop-page.skin-poe2 .item-grid{grid-template-columns:repeat(4,...)}!important
   and sticky .poe2-dir--dock covering card tops (BUY/CART remnants).
*/
@media (max-width: 960px) {
  .shop-page.skin-poe2,
  .shop-page.skin-poe2.shop-page--poe2-bg {
    min-height: 0 !important;
  }

  /* restore usable card columns (override late storefront 4-col !important) */
  .shop-page.skin-poe2 .item-grid,
  .shop-page.skin-poe2 .item-grid.item-grid--layout-grid,
  .shop-page.skin-poe2 .item-grid.item-grid--layout-compact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.65rem !important;
    align-items: stretch !important;
  }

  /* sticky Filters dock: compact bar, above cards, no viewport-tall shell */
  .shop-page.skin-poe2 .shop-layout--poe2-dir .poe2-dir--dock,
  .shop-layout--poe2-dir .poe2-dir--dock {
    top: calc(var(--nav-h, 3.75rem) + 0.25rem);
    z-index: 30;
    width: 100%;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    position: sticky;
    overflow: visible !important;
    background: transparent;
    padding: 0;
    margin: 0 0 0.55rem;
  }

  .poe2-dir-desktop {
    display: none !important;
  }

  .poe2-dir-mobile-toggle {
    box-sizing: border-box;
    color: #f6efe2;
    width: 100%;
    min-height: 48px;
    font: inherit;
    letter-spacing: 0.04em;
    text-align: left;
    cursor: pointer;
    background: linear-gradient(165deg, #1c1610f5, #0a0908f0);
    border: 1px solid #d4a84b73;
    border-radius: 10px;
    justify-content: space-between;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
    padding: 0.55rem 0.85rem;
    font-size: 0.95rem;
    font-weight: 700;
    display: flex !important;
    box-shadow: 0 8px 20px #00000059;
  }

  .poe2-dir-mobile-toggle em {
    letter-spacing: 0;
    min-width: 0;
    color: color-mix(in srgb, #d4a84b 80%, white);
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    flex: auto;
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 550;
    overflow: hidden;
  }

  /* cards: avoid % min-height stretch quirks; keep media/actions visible */
  .shop-page.skin-poe2 .item-card--art,
  .shop-page.skin-poe2 .item-card--card-only,
  .shop-page.skin-poe2 .item-grid .item-card {
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  .shop-page.skin-poe2 .poe2-card-media,
  .shop-page.skin-poe2 .item-card[data-desk="items"] .poe2-card-media,
  .shop-page.skin-poe2 .item-card--art:not(.item-card--poe2-currency) .poe2-card-media {
    min-height: 140px !important;
    height: auto !important;
  }

  .shop-page.skin-poe2 .item-card-body,
  .shop-page.skin-poe2 .item-card-body--poe2,
  .shop-page.skin-poe2 .item-card-actions,
  .shop-page.skin-poe2 .item-card-actions--poe2 {
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* do not let SEO desk invent post-pager void */
  .shop-seo-desk[data-seo-skin] {
    margin-top: 1rem;
    padding-top: 1.25rem;
  }
  .shop-seo-desk[data-seo-skin]::before,
  .shop-seo-desk--cinema[data-seo-skin]::before {
    height: min(28vh, 16rem) !important;
  }
}

/* boost mobile 2-col — overrides index @media(width<=900px) .boost-grid{1fr}
   + keep item-grid at 2 cols on narrow phones (user: 代练一屏两个; listing 2-up) */
@media (max-width: 960px) {
  .boost-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.65rem !important;
    display: grid !important;
  }
  .boost-grid > * {
    min-width: 0;
  }
}

@media (max-width: 560px) {
  .shop-page.skin-poe2 .item-grid,
  .shop-page.skin-poe2 .item-grid.item-grid--layout-grid,
  .shop-page.skin-poe2 .item-grid.item-grid--layout-compact-grid,
  .boost-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.65rem !important;
  }
}

/* fc-player-desk-4col — v=20261106g
   Cause: GamePageView-xenAYx9l.css @media (width<=900px)
     .player-desk .pd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
   User: FC/FIFA player market desk shows 2 huge cards (Mia Hamm etc);
   want 一屏四个 (4 per screen). Keep boost-grid at 2; PoE item-grid stays 2.
*/
@media (max-width: 960px) {
  .player-desk .pd-grid,
  .player-desk[class*="player-desk--"] .pd-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.35rem !important;
    justify-items: stretch !important;
  }

  .player-desk .pd-grid > *,
  .player-desk[class*="player-desk--"] .pd-grid > * {
    min-width: 0;
  }

  .player-desk .pd-card,
  .player-desk[class*="player-desk--"] .pd-card {
    border-radius: 8px !important;
  }

  .player-desk .pd-card-art,
  .player-desk[class*="player-desk--"] .pd-card-art {
    aspect-ratio: auto !important;
    max-height: 84px !important;
    min-height: 0 !important;
    height: auto !important;
    place-items: center;
    display: grid;
  }

  .player-desk .pd-card-art img,
  .player-desk[class*="player-desk--"] .pd-card-art img {
    max-height: 84px !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 0.1rem !important;
    object-fit: contain !important;
  }

  .player-desk .pd-card-body,
  .player-desk[class*="player-desk--"] .pd-card-body {
    gap: 0.08rem !important;
    padding: 0.28rem 0.3rem 0.1rem !important;
  }

  .player-desk .pd-card-body h3,
  .player-desk[class*="player-desk--"] .pd-card-body h3 {
    font-size: 0.58rem !important;
    line-height: 1.15 !important;
  }

  .player-desk .pd-meta-row,
  .player-desk .pd-coin-row,
  .player-desk[class*="player-desk--"] .pd-meta-row,
  .player-desk[class*="player-desk--"] .pd-coin-row {
    gap: 0.14rem !important;
    font-size: 0.48rem !important;
  }

  .player-desk .pd-coin-row em,
  .player-desk[class*="player-desk--"] .pd-coin-row em {
    font-size: 0.44rem !important;
  }

  .player-desk .pd-coin-row strong,
  .player-desk[class*="player-desk--"] .pd-coin-row strong {
    font-size: 0.55rem !important;
  }

  .player-desk .pd-usd,
  .player-desk[class*="player-desk--"] .pd-usd {
    margin-top: 0.04rem !important;
    font-size: 0.68rem !important;
  }

  .player-desk .pd-usd-cmp,
  .player-desk[class*="player-desk--"] .pd-usd-cmp {
    font-size: 0.5rem !important;
  }

  .player-desk .pd-disc,
  .player-desk[class*="player-desk--"] .pd-disc {
    padding: 0.04rem 0.16rem !important;
    font-size: 0.44rem !important;
  }

  /* qty + Buy Now compact; cart wraps under when present */
  .player-desk .pd-card-actions,
  .player-desk[class*="player-desk--"] .pd-card-actions {
    grid-template-columns: minmax(0, 1.65rem) minmax(0, 1fr) !important;
    gap: 0.16rem !important;
    padding: 0.2rem 0.28rem 0.32rem !important;
  }

  .player-desk .pd-card-actions .pd-qty input,
  .player-desk[class*="player-desk--"] .pd-card-actions .pd-qty input {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 1.4rem !important;
    padding: 0.1rem 0.12rem !important;
    font-size: 0.52rem !important;
    box-sizing: border-box;
  }

  .player-desk .pd-card-actions .btn,
  .player-desk[class*="player-desk--"] .pd-card-actions .btn {
    min-height: 1.4rem !important;
    padding: 0.16rem 0.18rem !important;
    font-size: 0.5rem !important;
    min-width: 0 !important;
    max-width: 100%;
  }

  .player-desk .pd-card-actions .btn-ghost,
  .player-desk[class*="player-desk--"] .pd-card-actions .btn-ghost {
    grid-column: 1 / -1;
    min-height: 1.25rem !important;
    font-size: 0.48rem !important;
  }
}

/* Explicit: do not let 4-col leak onto boost / PoE item grids */
@media (max-width: 960px) {
  .boost-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .shop-page.skin-poe2 .item-grid,
  .shop-page.skin-poe2 .item-grid.item-grid--layout-grid,
  .shop-page.skin-poe2 .item-grid.item-grid--layout-compact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}