/* SPEEDACURE_MOBILE_LAYOUT_V1_7
   Tested against V1.6; header/logo + brand icon + banner-fit only.
   No JavaScript/PHP/database changes. */
@media screen and (max-width: 820px) {
  /* Reserve enough width for a legible full-size logo and three quick actions. */
  html.scm-mobile-modern body.scm-modern-active .scm-home .scm-header-row {
    grid-template-columns: minmax(0, 1fr) max-content !important;
    grid-template-areas: "brand actions" "location location" !important;
    gap: 7px 6px !important;
  }
  html.scm-mobile-modern body.scm-modern-active .scm-home .scm-brand {
    min-width: 0 !important;
    align-self: center !important;
    overflow: visible !important;
  }
  html.scm-mobile-modern body.scm-modern-active .scm-home .scm-brand img {
    width: clamp(164px, 49vw, 206px) !important;
    max-width: 100% !important;
    max-height: 61px !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: left center !important;
  }
  html.scm-mobile-modern body.scm-modern-active .scm-home .scm-header-actions {
    justify-self: end !important;
    gap: 5px !important;
  }
  html.scm-mobile-modern body.scm-modern-active .scm-home .scm-header-actions > a,
  html.scm-mobile-modern body.scm-modern-active .scm-home .scm-header-actions > button {
    width: 35px !important;
    height: 35px !important;
    flex: 0 0 35px !important;
  }
  /* Replace V1.6's approximation with the recognizable WhatsApp chat/phone glyph.
     Existing anchor href and ARIA label are unchanged. */
  html.scm-mobile-modern body.scm-modern-active .scm-home .scm-header-actions .scm-whatsapp {
    background: #13b967 !important;
    border-color: #13b967 !important;
    border-radius: 50% !important;
  }
  html.scm-mobile-modern body.scm-modern-active .scm-home .scm-header-actions .scm-whatsapp::before {
    content: "" !important;
    display: block !important;
    width: 29px !important;
    height: 29px !important;
    background-image: url('/assets/images/whatsapp-brand-v1_7.svg') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 27px 27px !important;
  }
  /* No cut-off text or clipped products. The banner manager's mobile_image
     is selected automatically by existing V1.5 <picture> markup when supplied. */
  html.scm-mobile-modern body.scm-modern-active .scm-home .scm-managed-banners {
    margin-bottom: 12px !important;
  }
  html.scm-mobile-modern body.scm-modern-active .scm-home .scm-managed-viewport {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    background: #effaf5 !important;
    border-radius: 17px !important;
  }
  html.scm-mobile-modern body.scm-modern-active .scm-home .scm-managed-slide,
  html.scm-mobile-modern body.scm-modern-active .scm-home .scm-managed-slide > a,
  html.scm-mobile-modern body.scm-modern-active .scm-home .scm-managed-slide picture {
    height: 100% !important;
    width: 100% !important;
    background: #effaf5 !important;
  }
  html.scm-mobile-modern body.scm-modern-active .scm-home .scm-managed-slide img {
    display: block !important;
    height: 100% !important;
    width: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #effaf5 !important;
  }
  html.scm-mobile-modern body.scm-modern-active .scm-home .scm-managed-prev { left: 2px !important; }
  html.scm-mobile-modern body.scm-modern-active .scm-home .scm-managed-next { right: 2px !important; }
}
@media screen and (max-width: 360px) {
  html.scm-mobile-modern body.scm-modern-active .scm-home .scm-brand img {
    width: clamp(150px, 48vw, 173px) !important;
  }
  html.scm-mobile-modern body.scm-modern-active .scm-home .scm-header-actions > a,
  html.scm-mobile-modern body.scm-modern-active .scm-home .scm-header-actions > button {
    width: 33px !important; height: 33px !important; flex-basis: 33px !important;
  }
}