/* V23 mobile-only refinements. Load after the approved existing styles.
   Desktop rules, artwork, brand colours and motion engines remain inherited. */
@media (max-width: 800px) {
  /* Equal outside tracks retain the approved logo centre after hiding Store. */
  body.assembled-page[data-site="04-rolls-royce"] .rr-header {
    display: grid;
    height: calc(88px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: 12px;
    justify-content: normal;
  }

  body.assembled-page[data-site="04-rolls-royce"] .rr-header::after {
    left: 0;
    right: 0;
  }

  .assembled-page[data-site="04-rolls-royce"] .rr-header > .rr-menu-trigger {
    margin: 0;
    justify-self: start;
  }

  .assembled-page[data-site="04-rolls-royce"] .rr-header > .rr-logo {
    position: static;
    inset: auto;
    transform: none;
    margin: 0;
    justify-self: center;
  }

  .assembled-page[data-site="04-rolls-royce"] .rr-header .rr-header-right {
    min-width: 0;
    margin: 0;
    justify-self: end;
  }

  .assembled-page[data-site="04-rolls-royce"] .rr-header .rr-header-right > a[data-route="store"] {
    display: none;
  }

  .assembled-page[data-site="04-rolls-royce"] .rr-header > .rr-menu-trigger,
  .assembled-page[data-site="04-rolls-royce"] .rr-header .rr-languages > a {
    font: 500 12px / 24px Poppins, sans-serif;
    letter-spacing: 2px;
  }

  /* Counter the earlier portrait contain rule: one unchanged image fills the hero. */
  .assembled-page[data-page="home"] .rr-hero {
    height: 100svh;
    min-height: 100svh;
  }

  .assembled-page[data-page="home"] .rr-hero > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 36% 100%;
  }

  /* Native phone QA found bright ice behind the white opening copy.
     Localise contrast to that copy band; retain the bright photo elsewhere. */
  .assembled-page[data-page="home"] .rr-hero::after {
    background: linear-gradient(180deg,
      rgba(0, 0, 0, .2),
      transparent 25%,
      rgba(0, 0, 0, .55) 43%,
      rgba(0, 0, 0, .55) 60%,
      transparent 77%,
      rgba(0, 0, 0, .12));
  }

  .assembled-page[data-page="home"] .rr-hero .rr-campaign-text {
    position: absolute;
    top: 49%;
    right: 8%;
    bottom: auto;
    left: 8%;
    transform: translateY(-50%);
  }

  /* Root's mobile measure script supplies one common, measured prose width. */
  .assembled-page[data-page="home"] .assembled-story-copy p {
    width: var(--mobile-story-prose-width, 100%);
    max-width: 100%;
    margin-inline: auto;
    text-align: justify;
    text-align-last: left;
    text-justify: inter-word;
    text-wrap: wrap;
    hyphens: none;
    overflow-wrap: normal;
    word-break: normal;
  }

  /* Scope display to open dialogs so the closed native dialog remains hidden. */
  .assembled-page #nav-dialog.rr-dialog[open] {
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    display: flex;
    flex-direction: column;
  }

  .assembled-page #nav-dialog .rr-dialog-head {
    position: relative;
    z-index: 2;
    flex: 0 0 calc(88px + env(safe-area-inset-top, 0px));
    height: calc(88px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    box-sizing: border-box;
  }

  /* Keep the44px touch target; the close glyph and its focus square are smaller. */
  .assembled-page #nav-dialog .rr-dialog-head [data-close] {
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
  }
  .assembled-page #nav-dialog .rr-dialog-head [data-close]::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid currentColor;
    opacity: .55;
    pointer-events: none;
  }
  .assembled-page #nav-dialog .rr-dialog-head [data-close] svg {
    width: 18px;
    height: 18px;
  }
  .assembled-page #nav-dialog .rr-dialog-head [data-close]:focus-visible {
    outline-offset: -6px;
  }

  .assembled-page #nav-dialog .rr-dialog-content {
    position: static;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-height: 0;
    /* The 88px header and 66px language row differ by 22px. Preserve the
       viewport centre on tall screens; retain normal flow when space is short. */
    padding: 0 24px 22px;
  }

  .assembled-page #nav-dialog .rr-dialog-content > nav {
    position: static;
    transform: none;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 3.5svh, 30px);
    width: 100%;
    margin: auto 0;
    padding: 0;
    text-align: center;
  }

  .assembled-page #nav-dialog .rr-dialog-content > nav > a {
    display: inline-flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    text-align: center;
  }

  .assembled-page #nav-dialog .rr-dialog-languages {
    position: relative;
    z-index: 2;
    flex: 0 0 66px;
    margin-top: auto;
  }

  /* Restore the portrait source and overlay the existing titles on the image. */
  .assembled-page.inner-v8-locations .locations-hero {
    position: relative;
    isolation: isolate;
    display: block;
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
  }

  .assembled-page.inner-v8-locations .locations-hero > .v8-addresses-picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    z-index: -2;
  }

  .assembled-page.inner-v8-locations .locations-hero > .v8-addresses-picture > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    transform: none;
    object-fit: cover;
    object-position: 50% 50%;
  }

  .assembled-page.inner-v8-locations .locations-hero > .inner-hero-copy {
    position: absolute;
    z-index: 1;
    top: auto;
    right: 8%;
    bottom: 12%;
    left: 8%;
    max-width: none;
    padding: 0;
    transform: none;
  }

  /* A full-width native select retains 16px text and fits the longest EN label. */
  .assembled-page.inner-v8-locations .location-filters {
    grid-template-columns: minmax(0, 1fr);
  }

  .assembled-page.inner-v8-locations .location-filters .location-search {
    grid-column: 1;
  }

  .assembled-page.inner-v8-locations .v8-location-directory :is(input, select),
  .assembled-page.inner-v10-page .v10-enquiry-form .form-field :is(input, select, textarea) {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    font: 400 16px / 1.7 Poppins, Arial, sans-serif;
    letter-spacing: normal;
  }

  .assembled-page.inner-v10-page .v10-enquiry-form > .v10-form-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(220px, 100%);
    max-width: 100%;
    min-width: 0;
    margin-inline: auto;
  }

  /* Link content and routes stay intact; only the requested mobile placement changes. */
  .assembled-page .hermes-footer .footer-bottom:has(> .v15-instagram) {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .assembled-page .hermes-footer .footer-bottom > .v15-instagram {
    grid-row: 1;
    grid-column: 1;
    justify-self: center;
  }

  .assembled-page .hermes-footer .footer-bottom > .legal {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-row: 2;
    grid-column: 1;
    width: 100%;
    gap: 12px 24px;
  }

  .assembled-page .hermes-footer .legal > a {
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
    white-space: normal;
  }

  .assembled-page .hermes-footer .legal > a[data-route="pre-information"] {
    grid-row: 1;
    grid-column: 1;
    justify-content: flex-start;
    text-align: left;
  }

  .assembled-page .hermes-footer .legal > a[data-route="cookies"] {
    grid-row: 2;
    grid-column: 1;
    justify-content: flex-start;
    text-align: left;
  }

  .assembled-page .hermes-footer .legal > a[data-route="distance-sales"] {
    grid-row: 1;
    grid-column: 2;
    justify-content: flex-end;
    text-align: right;
  }

  .assembled-page .hermes-footer .legal > a[data-route="privacy"] {
    grid-row: 2;
    grid-column: 2;
    justify-content: flex-end;
    text-align: right;
  }

  .assembled-page .hermes-footer .footer-bottom > p {
    grid-row: 3;
    grid-column: 1;
  }

  /* Legal clause 16 contains a long slash-separated word group at 320px.
     Permit a line break instead of painting beyond the reading column. */
  .assembled-page.v16-legal-page[data-page="distance-sales"] .v16-document-body h2 {
    overflow-wrap: anywhere;
  }
}

/* Copyright uses the full footer column; legal links and Instagram retain their rows. */
@media (max-width:800px) {
  .assembled-page .hermes-footer .footer-bottom > p {
    justify-self: center;
    width: 100%;
    max-width: none;
    text-align: center;
  }
}