/* SPUTEK PV — Mobile Fixes V3 / 2026-08-27
   Loaded as a separate stylesheet to bypass the browser's cached styles.css. */

@media (max-width:700px){
  /* Mobile nav must never cover page content. It scrolls with the page. */
  body > .nav-shell,
  .nav-shell,
  .checkout-page .nav-shell{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    margin:12px auto 0 !important;
    width:calc(100% - 24px) !important;
    max-width:none !important;
    height:58px !important;
    z-index:1000 !important;
  }

  main{overflow:visible !important;}

  /* TECHNOLOGY CARD 02: graph can never overlap paragraph text. */
  .service-grid .service-card{
    min-height:0 !important;
    height:auto !important;
    padding:24px 20px 26px !important;
    overflow:hidden !important;
  }
  .service-grid .service-card h3{
    margin:24px 0 12px !important;
    font-size:clamp(31px,9.2vw,40px) !important;
    line-height:1.04 !important;
  }
  .service-grid .service-card > p{
    position:relative !important;
    z-index:2 !important;
    margin:0 !important;
    font-size:15px !important;
    line-height:1.55 !important;
  }
  .service-grid .service-card .bars,
  .service-grid .service-card:nth-child(2) .bars{
    position:static !important;
    inset:auto !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:100% !important;
    margin:28px 0 0 !important;
    padding:0 !important;
    transform:none !important;
    display:grid !important;
    gap:10px !important;
  }
  .service-grid .service-card .bars i{
    display:block !important;
    position:static !important;
    height:24px !important;
    max-width:100% !important;
    border-radius:10px !important;
  }
  .service-grid .service-card .timeline{
    margin-top:28px !important;
  }
  .service-grid .service-card .symbol-cloud{
    margin-top:28px !important;
  }

  /* S-FLEX gateway: clean mobile showroom with a dedicated lower info zone. */
  .sflex-ad-section{
    padding-top:34px !important;
    padding-bottom:72px !important;
  }
  .sflex-ad-card{
    border-radius:28px !important;
    overflow:hidden !important;
  }
  .sflex-ad-copy{
    padding:38px 24px 34px !important;
  }
  .sflex-ad-copy h2{
    font-size:clamp(40px,12vw,47px) !important;
    line-height:.98 !important;
  }
  .sflex-ad-copy p{
    font-size:14px !important;
    line-height:1.58 !important;
  }
  .sflex-feature-row{
    flex-wrap:wrap !important;
    row-gap:8px !important;
  }
  .sflex-ad-showroom{
    min-height:490px !important;
    padding-bottom:118px !important;
  }
  .sflex-product-glass{
    width:calc(100% - 38px) !important;
    height:62% !important;
    top:7% !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    border-radius:27px !important;
  }
  .sflex-product-glass .sflex-product-image-main{
    width:88% !important;
    height:88% !important;
  }
  .sflex-visual-label{
    top:16px !important;
    right:18px !important;
    max-width:72% !important;
    text-align:right !important;
    font-size:7px !important;
  }

  /* Bottom row 1: dots left, current power right. */
  .sflex-slider-dots{
    left:18px !important;
    right:auto !important;
    bottom:76px !important;
    transform:none !important;
    z-index:12 !important;
    padding:7px 9px !important;
  }
  .sflex-floating-spec-a{
    right:16px !important;
    left:auto !important;
    bottom:67px !important;
    width:116px !important;
    max-width:116px !important;
    padding:10px 12px !important;
    border-radius:15px !important;
  }

  /* Bottom row 2: series gets the full width so no values are clipped. */
  .sflex-floating-spec-b{
    left:16px !important;
    right:16px !important;
    bottom:12px !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    padding:10px 12px !important;
    border-radius:15px !important;
  }
  .sflex-floating-spec small{
    font-size:7.5px !important;
  }
  .sflex-floating-spec-b strong{
    display:block !important;
    width:100% !important;
    font-size:9.5px !important;
    line-height:1.25 !important;
    letter-spacing:0 !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    word-break:normal !important;
  }
}

@media (max-width:380px){
  .service-grid .service-card{padding-left:18px !important;padding-right:18px !important;}
  .service-grid .service-card h3{font-size:33px !important;}
  .sflex-ad-copy{padding-left:21px !important;padding-right:21px !important;}
  .sflex-ad-showroom{min-height:475px !important;}
  .sflex-product-glass{width:calc(100% - 30px) !important;height:60% !important;}
  .sflex-floating-spec-a{right:12px !important;width:108px !important;max-width:108px !important;}
  .sflex-slider-dots{left:12px !important;}
  .sflex-floating-spec-b{left:12px !important;right:12px !important;}
  .sflex-floating-spec-b strong{font-size:9px !important;}
}