/* STLBEAST Main V447 — Mobile Header/Footer Final Polish
   Screenshot-driven: header still consumes too much height, footer columns are cramped,
   product pages need slightly more breathing room without getting tall again.
*/

@media(max-width:760px){
  /* Header: keep brand premium but reduce vertical crowding. */
  header,
  .stlb-header,
  .stlb375-header,
  .site-header{
    padding-top:6px !important;
    padding-bottom:6px !important;
  }

  header .wrap,
  .stlb-header .wrap,
  .stlb375-header .wrap,
  .stlb-header-inner,
  .stlb375-header-inner{
    gap:6px !important;
  }

  header img[src*="logo"],
  header img[src*="brand"],
  .stlb-logo img,
  .stlb375-logo img{
    max-width:154px !important;
    max-height:60px !important;
    object-fit:contain !important;
  }

  header form,
  .stlb-search,
  .site-search,
  .stlb375-search{
    min-height:32px !important;
    margin:4px 0 !important;
  }

  header input[type="search"],
  .stlb-search input,
  .site-search input,
  .stlb375-search input{
    min-height:32px !important;
    font-size:.73rem !important;
    border-radius:999px !important;
  }

  header button,
  .stlb-search button,
  .site-search button,
  .stlb375-search button{
    min-height:30px !important;
    padding:5px 9px !important;
    font-size:.68rem !important;
    border-radius:999px !important;
  }

  .stlb375-top-pill,
  .top-pill,
  .hub-fix-center,
  .join-membership,
  a[href*="membership"].stlb-btn{
    min-height:32px !important;
    font-size:.72rem !important;
    border-radius:12px !important;
  }

  nav,
  .stlb-nav,
  .stlb375-nav{
    gap:5px !important;
    padding:4px 0 2px !important;
  }

  nav a,
  .stlb-nav a,
  .stlb375-nav a{
    min-height:30px !important;
    padding:6px 8px !important;
    font-size:.66rem !important;
    letter-spacing:.03em !important;
  }

  /* Breadcrumb line: visible but less dominant. */
  .breadcrumb,
  .breadcrumbs,
  .stlb-breadcrumb,
  .stlb414-breadcrumb{
    font-size:.7rem !important;
    padding:7px 0 !important;
    line-height:1.25 !important;
  }

  /* Product page: the latest screenshot looks improved; this pass tightens the top block only. */
  .stlb421-main-render,
  .stlb335-main-render,
  .product-main-image,
  .product-gallery-main,
  figure[class*="main"]{
    min-height:200px !important;
    max-height:245px !important;
    margin-top:4px !important;
  }

  .stlb421-main-render img,
  .stlb335-main-render img,
  .product-main-image img,
  .product-gallery-main img,
  figure[class*="main"] img{
    max-height:220px !important;
  }

  .stlb421-product-copy h1,
  .stlb335-product-copy h1,
  .product-summary h1,
  .product-info h1,
  .product-copy h1,
  h1.product-title{
    font-size:clamp(1.62rem,7.1vw,2.12rem) !important;
    line-height:1.04 !important;
  }

  /* Homepage: keep hero powerful but reduce top-to-product scroll distance. */
  .hero,
  .stlb-hero,
  .stlb375-hero,
  .stlb413-hero,
  .stlb423-hero{
    padding-top:16px !important;
    padding-bottom:18px !important;
  }

  .hero h1,
  .stlb-hero h1,
  .stlb375-hero h1,
  .stlb413-hero h1,
  .stlb423-hero h1{
    font-size:clamp(1.95rem,9vw,2.75rem) !important;
    line-height:.96 !important;
  }

  /* Product cards: reduce repeated tall blocks on homepage/new drops. */
  .stlb375-product-media,
  .stlb408-product-media,
  .stlb423-drop-media,
  .product-card-media,
  .product-image,
  article[class*="product"] figure{
    min-height:176px !important;
    max-height:216px !important;
  }

  .stlb375-product-media img,
  .stlb408-product-media img,
  .stlb423-drop-media img,
  .product-card-media img,
  .product-image img,
  article[class*="product"] figure img{
    max-height:198px !important;
  }

  /* Footer: screenshot shows cramped columns. Convert to clean accordian-like blocks visually. */
  footer,
  .stlb-footer,
  .stlb375-footer{
    margin-top:22px !important;
    padding:20px 0 24px !important;
  }

  footer .wrap,
  .stlb-footer .wrap,
  .stlb375-footer .wrap{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  footer img,
  .stlb-footer img,
  .stlb375-footer img{
    max-width:150px !important;
    max-height:62px !important;
  }

  footer p,
  .stlb-footer p,
  .stlb375-footer p{
    font-size:.75rem !important;
    line-height:1.45 !important;
    max-width:34rem !important;
  }

  footer h2,
  footer h3,
  footer h4,
  .stlb-footer h2,
  .stlb-footer h3,
  .stlb-footer h4{
    font-size:.75rem !important;
    letter-spacing:.08em !important;
    text-transform:uppercase !important;
    margin:0 0 6px !important;
    color:#fff !important;
  }

  footer nav,
  .footer-nav,
  .stlb-footer nav,
  .stlb375-footer nav{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px 10px !important;
    overflow:visible !important;
    padding:0 !important;
  }

  footer nav a,
  .footer-nav a,
  .stlb-footer nav a,
  .stlb375-footer nav a{
    display:block !important;
    min-height:0 !important;
    padding:4px 0 !important;
    font-size:.72rem !important;
    line-height:1.25 !important;
    white-space:normal !important;
    border:0 !important;
    background:transparent !important;
  }

  footer small,
  .stlb-footer small{
    font-size:.68rem !important;
    line-height:1.4 !important;
  }
}

@media(max-width:420px){
  header img[src*="logo"],
  header img[src*="brand"],
  .stlb-logo img,
  .stlb375-logo img{
    max-width:138px !important;
  }

  nav a,
  .stlb-nav a,
  .stlb375-nav a{
    font-size:.61rem !important;
    padding:5px 7px !important;
  }

  .stlb421-main-render,
  .stlb335-main-render,
  .product-main-image,
  .product-gallery-main{
    min-height:185px !important;
  }

  footer nav,
  .footer-nav,
  .stlb-footer nav,
  .stlb375-footer nav{
    grid-template-columns:1fr 1fr !important;
  }
}