/*
 * PGP UI stability layer
 *
 * One final, shared stylesheet for first-paint and responsive corrections.
 * It intentionally changes presentation only; it does not alter requests,
 * fulfillment policy, stored data, or API payloads.
 */

html:root,
html:root[lang][dir] body {
  max-width: 100%;
  overflow-x: hidden;
}

/* The two retired delivery fields remain in the DOM so existing profile data
   and the backend schema stay untouched, but they are no longer presented. */
html:root[lang][dir] body #pgpAccountPage .pgpac-delivery-landmark-field-v002,
html:root[lang][dir] body #pgpAccountPage .pgpac-delivery-notes-field-v002,
html:root[lang][dir] body #deliveryLocationLandmark,
html:root[lang][dir] body #deliveryLocationNotes {
  display: none !important;
}

@media (max-width: 768px) {
  /*
   * Match the server first-paint with the JavaScript layout result:
   * exactly two visible product cards per row on phones.
   */
  html:root[lang][dir] body :is(
    .product-row,
    .pgp-product-row,
    .products-grid,
    .pgp-products,
    .garage-products,
    .saved-products-grid,
    .saved-grid,
    .wishlist-products,
    .following-grid,
    .pgp-most-row,
    .pgp-shared-product-row
  ):not(.pgp-view-grid):not(.pgp-home-force-grid) {
    gap: 8px !important;
  }

  html:root[lang][dir] body :is(
    .product-row,
    .pgp-product-row,
    .products-grid,
    .pgp-products,
    .garage-products,
    .saved-products-grid,
    .saved-grid,
    .wishlist-products,
    .following-grid,
    .pgp-most-row,
    .pgp-shared-product-row
  ):not(.pgp-view-grid):not(.pgp-home-force-grid) > * {
    box-sizing: border-box !important;
    flex: 0 0 calc((100% - 8px) / 2) !important;
    width: calc((100% - 8px) / 2) !important;
    min-width: calc((100% - 8px) / 2) !important;
    max-width: calc((100% - 8px) / 2) !important;
  }

  html:root[lang][dir] body :is(
    .pgp-view-grid.product-row,
    .pgp-view-grid.pgp-product-row,
    .pgp-view-grid.products-grid,
    .pgp-view-grid.pgp-products,
    .pgp-view-grid.garage-products,
    .pgp-view-grid.saved-products-grid,
    .pgp-view-grid.saved-grid,
    .pgp-view-grid.wishlist-products,
    .pgp-view-grid.following-grid,
    .pgp-home-force-grid
  ) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  /*
   * Active page files still contain older high-specificity v### rules.
   * This scoped form deliberately outranks those rules so they cannot paint
   * three columns before the shared layout controller runs.
   */
  html:root[lang][dir] body :is(
    #home,
    #iq-garages,
    .pgp-parts-wrap,
    .store-wrap,
    .saved-wrap,
    .following-wrap,
    .pgp-page,
    .pgp-main
  ) :is(
    .product-row,
    .pgp-product-row,
    .products-grid,
    .pgp-products,
    .garage-products,
    .saved-products-grid,
    .saved-grid,
    .wishlist-products,
    .following-grid,
    .pgp-most-row,
    .pgp-shared-product-row
  ):not(.pgp-view-grid):not(.pgp-home-force-grid) > :is(
    .product-card,
    .pgp-product-card,
    .pgp-most-product,
    .pgp-iq-product-card,
    .pgp-shared-product-card,
    article,
    a
  ) {
    flex: 0 0 calc((100% - 8px) / 2) !important;
    width: calc((100% - 8px) / 2) !important;
    min-width: calc((100% - 8px) / 2) !important;
    max-width: calc((100% - 8px) / 2) !important;
  }

  html:root[lang][dir] body :is(
    #home,
    #iq-garages,
    .pgp-parts-wrap,
    .store-wrap,
    .saved-wrap,
    .following-wrap,
    .pgp-page,
    .pgp-main
  ) :is(
    .pgp-view-grid.product-row,
    .pgp-view-grid.pgp-product-row,
    .pgp-view-grid.products-grid,
    .pgp-view-grid.pgp-products,
    .pgp-view-grid.garage-products,
    .pgp-view-grid.saved-products-grid,
    .pgp-view-grid.saved-grid,
    .pgp-view-grid.wishlist-products,
    .pgp-view-grid.following-grid,
    .pgp-home-force-grid,
    .products-grid:not(.pgp-view-row)
  ) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html:root[lang][dir] body :is(
    .pgp-part-card .pgp-product-row > .pgp-product-card,
    .pgp-parts-wrap .pgp-product-row > .pgp-product-card,
    .pgp-most-row > .pgp-most-product,
    .pgp-shared-product-row > .pgp-shared-product-card
  ) {
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
  }

  html:root[lang][dir] body :is(
    #home,
    #iq-garages,
    .pgp-parts-wrap,
    .pgp-home-managed-section,
    .pgp-shared-section-card
  ) :is(
    .pgp-product-card,
    .pgp-most-product:not(.pgp-most-garage),
    .pgp-iq-product-card,
    .pgp-shared-product-card
  ) {
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
  }

  html:root[lang][dir] body :is(
    #home,
    #iq-garages,
    .pgp-parts-wrap,
    .store-wrap,
    .saved-wrap,
    .following-wrap,
    .pgp-page,
    .pgp-main
  ) :is(
    .pgp-product-card,
    .pgp-most-product,
    .pgp-iq-product-card,
    .pgp-shared-product-card,
    .product-card
  ) :is(
    .product-title,
    .product-name,
    .pgp-product-title,
    .pgp-auto-card-title,
    .pgp-related-card b,
    .pgp-most-info strong,
    .pgp-iq-card-info strong
  ) {
    font-size: clamp(12px, 3.35vw, 14px) !important;
    line-height: 1.35 !important;
  }

  html:root[lang][dir] body :is(
    .product-title,
    .product-name,
    .pgp-product-title,
    .pgp-auto-card-title,
    .pgp-related-card b,
    .pgp-most-info strong,
    .pgp-iq-card-info strong
  ) {
    font-size: clamp(12px, 3.35vw, 14px) !important;
    line-height: 1.35 !important;
  }

  html:root[lang][dir] body :is(
    .product-sub,
    .pgp-product-sub,
    .garage-meta,
    .pgp-most-info span,
    .pgp-iq-card-info span,
    .pgp-related-card span
  ) {
    font-size: clamp(11px, 3vw, 13px) !important;
    line-height: 1.4 !important;
  }

  html:root[lang][dir] body :is(
    .price-tag,
    .details-price,
    .pgp-product-price,
    .pgp-most-price,
    .pgp-iq-price
  ) {
    font-size: 11px !important;
    line-height: 1.25 !important;
  }
}