/* Royal Marine – Sito da telefono. Solo fino a 782px (telefoni e tablet in verticale). */
@media (max-width: 782px) {
  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 16px; line-height: 1.5; }

  /* 1. Intestazione compatta: prima occupava tutta la prima schermata */
  #masthead .top-header { padding: 8px 0 4px !important; }
  #masthead .top-header .container { padding-top: 0 !important; padding-bottom: 0 !important; }
  #masthead .advertise { margin: 0 auto 4px !important; text-align: center; }
  #masthead .advertise img { max-height: 26px !important; width: auto !important; }
  #masthead .t-header-holder, #masthead #site_tite { min-height: 0 !important; padding: 0 !important; margin: 0 !important; }
  #masthead .site-title, #masthead .site-title a { font-size: 17px !important; line-height: 1.25 !important; margin: 0 !important; padding: 0 !important; }
  #masthead .site-title-belowlogo { display: none !important; }       /* la frase lunga sotto il nome */
  #masthead .site-navigation { min-height: 0 !important; padding: 2px 0 !important; }
  #masthead .site-navigation .container { min-height: 44px; }

  /* 2. Titolo e briciole di pane: non restano più fissi in alto mentre scorri */
  article > header.header, .breadcrumb-holder { position: static !important; top: auto !important; }
  .breadcrumb-holder { padding: 14px 0 10px !important; min-height: 0 !important; height: auto !important; }
  .breadcrumb-holder .container { padding-left: 16px !important; padding-right: 16px !important; }
  h1.bread-title, .bread-title { font-size: 25px !important; line-height: 1.15 !important; margin: 0 0 6px !important; }
  .breadcrumb { font-size: 13px !important; margin: 0 !important; padding: 0 !important; }
  .inside-page { padding-top: 10px !important; }

  /* 3. Testo a tutta larghezza: il tema lasciava 40px vuoti per lato */
  .detail-holder .content > * { margin-left: 16px !important; margin-right: 16px !important; max-width: calc(100% - 32px) !important; }
  .detail-holder .content > .alignfull, .detail-holder .content > .wp-block-cover { margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; }
  .detail-holder .content img:not(.rmv-img img):not([class*="rmpm"] img):not([class*="rmrc"] img) { height: auto; max-height: 75vh; width: auto; object-fit: contain; display: block; margin-left: auto; margin-right: auto; }
  /* carosello della home e schede: la foto resta nel suo riquadro, anche quelle in verticale fatte col telefono */
  .rmv-img { position: relative; overflow: hidden; }
  .rmv-img img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; }
  .detail-holder .content table { display: block; overflow-x: auto; }

  /* 4. Barra in basso con Chiama e WhatsApp, come un'app (non dove c'è già la barra del preventivatore) */
  body:not(:has(.rmpm-barra)) { padding-bottom: 72px; }
  body:not(:has(.rmpm-barra)) .rmpu.rmpu-dx, body:not(:has(.rmpm-barra)) .rmpu.rmpu-sx {
    left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    display: grid !important; grid-template-columns: 1fr 1.5fr; gap: 8px; align-items: center;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    background: #fff; border-top: 1px solid #d5dce6; box-shadow: 0 -4px 16px rgba(15, 29, 58, .10);
  }
  body:not(:has(.rmpm-barra)) .rmpu .rmpu-btn {
    width: auto !important; height: 48px !important; border-radius: 10px !important; margin: 0 !important;
    display: flex !important; align-items: center; justify-content: center; gap: 8px; box-shadow: none !important;
  }
  body:not(:has(.rmpm-barra)) .rmpu .rmpu-tel::after { content: "Chiama"; font: 600 15px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #fff; }
  body:not(:has(.rmpm-barra)) .rmpu .rmpu-etichetta { display: inline !important; }
  body:not(:has(.rmpm-barra)) .rmpu .rmpu-su { position: fixed; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); width: 40px !important; height: 40px !important; border-radius: 50% !important; }
  /* il banner dei cookie resta sopra la barra */
  body:not(:has(.rmpm-barra)) .rmck { bottom: 76px; }
}

/* Lente "Cerca codice o ricambio" nella barra in alto (computer e telefono) */
.rmcerca-lente { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 6px 0 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; vertical-align: middle; }
.rmcerca-lente:hover, .rmcerca-lente:focus-visible { background: rgba(0, 0, 0, .07); }
.rmcerca-fissa { position: fixed; top: 10px; right: 10px; z-index: 9998; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.rmcerca { position: fixed; top: 0; left: 0; right: 0; z-index: 100000; background: #fff; box-shadow: 0 6px 24px rgba(15, 29, 58, .25); padding: 12px 12px 8px; }
.rmcerca[hidden] { display: none; }
.rmcerca form { display: flex; align-items: center; gap: 8px; max-width: 760px; margin: 0 auto; color: #0f1d3a; }
.rmcerca form > svg { flex: none; }
.rmcerca input[type=search] { flex: 1; min-width: 0; height: 46px; padding: 0 12px; font-size: 17px; border: 2px solid #0f1d3a; border-radius: 10px; background: #fff; color: #0f1d3a; }
.rmcerca .rmcerca-vai { height: 46px; padding: 0 16px; border: 0; border-radius: 10px; background: #0f1d3a; color: #fff; font-weight: 700; font-size: 16px; cursor: pointer; }
.rmcerca .rmcerca-chiudi { width: 40px; height: 46px; border: 0; background: transparent; font-size: 30px; line-height: 1; color: #555; cursor: pointer; }
.rmcerca-es { max-width: 760px; margin: 6px auto 0; font-size: 13px; color: #555; }
.rmcerca-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 460px) { .rmcerca .rmcerca-vai { padding: 0 12px; } .rmcerca form > svg { display: none; } }

/* Accessibilità (PageSpeed): verde WhatsApp più scuro, così la scritta bianca si legge bene */
.rmpu .rmpu-wa { background: #167c40 !important; }
/* Link del menu in fondo alla pagina più distanziati: facili da toccare col dito */
@media (max-width: 782px) {
  #menu-menu-basso a { display: inline-block; padding: 8px 4px; min-height: 24px; }
}