/*
 * Customer header layout
 *
 * This is intentionally loaded after the older storefront layout layers.  It
 * keeps the navigation and account controls in predictable grid slots instead
 * of allowing breakpoint-specific rules to put one on top of the other.
 */

body.guest-site .site-top {
  isolation: isolate;
}

/*
 * Desktop is a three-part header: brand/search on the left, the primary
 * navigation in the visual centre, and account/shop actions on the right.
 * Do not make the navigation a full-width item in the left grid column — it
 * was the cause of the off-centre desktop header.
 */
@media (min-width: 1500px) {
  body.guest-site .site-top {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    gap: 0.9rem !important;
  }

  body.guest-site .site-top > .brand,
  body.guest-site .site-top .guest-top-cluster {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  body.guest-site .site-top > .nav-dock {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    width: auto;
    min-width: 0;
    max-width: min(100%, 52rem);
    margin-top: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  body.guest-site .site-top > .nav-dock::-webkit-scrollbar {
    display: none;
  }

  body.guest-site .site-top .site-top-end,
  body.guest-site .site-top .site-top-end--home {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    min-width: 0;
    max-width: min(34rem, 48vw);
    overflow-x: auto;
    scrollbar-width: none;
  }

  body.guest-site .site-top .site-top-end::-webkit-scrollbar,
  body.guest-site .site-top .site-top-end--home::-webkit-scrollbar {
    display: none;
  }

  body.guest-site .site-top .home-auth-bar {
    flex: 0 1 auto;
    min-width: 0;
  }
}

/* A single header row would make the long product labels collide with the
 * account controls on smaller laptops. Keep the same hierarchy there, but
 * place the centred navigation below the logo/search and right-side actions.
 */
@media (min-width: 901px) and (max-width: 1499px) {
  body.guest-site .site-top {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    gap: 0.6rem 0.9rem !important;
  }

  body.guest-site .site-top > .brand,
  body.guest-site .site-top .guest-top-cluster {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  body.guest-site .site-top .site-top-end,
  body.guest-site .site-top .site-top-end--home {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    min-width: 0;
    max-width: min(34rem, 48vw);
    overflow-x: auto;
    scrollbar-width: none;
  }

  body.guest-site .site-top > .nav-dock {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    width: auto;
    min-width: 0;
    max-width: 100%;
    margin-top: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  body.guest-site .site-top > .nav-dock::-webkit-scrollbar,
  body.guest-site .site-top .site-top-end::-webkit-scrollbar,
  body.guest-site .site-top .site-top-end--home::-webkit-scrollbar {
    display: none;
  }

  body.guest-site .site-top .home-auth-bar {
    flex: 0 1 auto;
    min-width: 0;
  }
}

@media (max-width: 900px) {
  html.guest-responsive-root body.guest-site .site-top,
  body.guest-site .site-top {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
    gap: 0.65rem !important;
  }

  html.guest-responsive-root body.guest-site .site-top > .brand,
  html.guest-responsive-root body.guest-site .site-top .guest-top-cluster > .brand,
  body.guest-site .site-top > .brand,
  body.guest-site .site-top .guest-top-cluster > .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html.guest-responsive-root body.guest-site .site-top .guest-top-cluster,
  body.guest-site .site-top .guest-top-cluster {
    display: contents;
  }

  html.guest-responsive-root body.guest-site .site-top .guest-header-search,
  body.guest-site .site-top .guest-header-search {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: min(100%, 36rem) !important;
    margin-inline: 0 !important;
  }

  html.guest-responsive-root body.guest-site .site-top > .nav-dock,
  body.guest-site .site-top > .nav-dock {
    grid-column: 1 !important;
    grid-row: 3 !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    overflow-x: auto;
    scrollbar-width: none;
  }

  html.guest-responsive-root body.guest-site .site-top .site-top-end,
  html.guest-responsive-root body.guest-site .site-top .site-top-end--home,
  body.guest-site .site-top .site-top-end,
  body.guest-site .site-top .site-top-end--home {
    grid-column: 1 !important;
    grid-row: 4 !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-top: 0 !important;
    overflow-x: auto;
    scrollbar-width: none;
  }

  html.guest-responsive-root body.guest-site .site-top .site-top-end::-webkit-scrollbar,
  html.guest-responsive-root body.guest-site .site-top .site-top-end--home::-webkit-scrollbar,
  body.guest-site .site-top .site-top-end::-webkit-scrollbar,
  body.guest-site .site-top .site-top-end--home::-webkit-scrollbar {
    display: none;
  }

  html.guest-responsive-root body.guest-site .site-top .home-auth-bar,
  body.guest-site .site-top .home-auth-bar {
    flex: 0 0 auto;
    max-width: none;
  }
}

@media (max-width: 640px) {
  html.guest-responsive-root body.guest-site .site-top,
  body.guest-site .site-top {
    grid-template-rows: auto auto auto !important;
  }

  html.guest-responsive-root body.guest-site .site-top .guest-header-search,
  body.guest-site .site-top .guest-header-search {
    display: none !important;
  }

  html.guest-responsive-root body.guest-site .site-top > .nav-dock,
  body.guest-site .site-top > .nav-dock {
    grid-row: 2 !important;
  }

  html.guest-responsive-root body.guest-site .site-top .site-top-end,
  html.guest-responsive-root body.guest-site .site-top .site-top-end--home,
  body.guest-site .site-top .site-top-end,
  body.guest-site .site-top .site-top-end--home {
    grid-row: 3 !important;
  }

  /* On phones, the sign-in sheet already contains the sign-up tab. Showing
     both actions in the header wastes the narrow action row. */
  body.page-home .home-auth-bar #homeAuthSignup {
    display: none !important;
  }

  body.guest-site .site-top > .nav-dock {
    gap: 0.25rem !important;
  }

  body.guest-site .site-top > .nav-dock .nav-dock-link {
    padding-inline: 0.72rem !important;
    font-size: 0.72rem !important;
  }
}

/* Product choice needs more visual space than a desktop card can provide.
   This is intentionally scoped to actual listing routes, not homepage category cards. */
@media (max-width: 480px) {
  html.guest-responsive-root.storefront-category-listing body.guest-site .plp-grid,
  html.guest-responsive-root.storefront-category-listing body.guest-site .plp-grid.product-grid,
  html.guest-responsive-root.storefront-category-listing body.guest-site .plp-grid.rm-grid-cards {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.9rem !important;
  }

  html.guest-responsive-root.storefront-category-listing body.guest-site .plp-card__media-wrap {
    aspect-ratio: 1 / 1 !important;
  }

  html.guest-responsive-root.storefront-category-listing body.guest-site .plp-card__media {
    padding: 0.45rem !important;
  }

  html.guest-responsive-root.storefront-category-listing body.guest-site .plp-card__media img {
    border-radius: 0.75rem !important;
  }

  /* Preserve the centered desktop dock. On phones focus the dock on shopping
     destinations; the complete site map remains available in the footer. */
  html.guest-responsive-root body.guest-site .nav-dock-link:nth-child(4),
  html.guest-responsive-root body.guest-site .nav-dock-link:nth-child(5) {
    display: none !important;
  }
}