/* ============================================================
   AlbiCuidar — MOBILE FIX V2
   Corrige especificamente:
   - hero escondido atrás do cabeçalho fixo
   - título cortado no topo
   - botões demasiado largos
   - centralização dos botões
   ============================================================ */

@media (max-width: 768px) {

  :root{
    --albi-mobile-header-h: 106px;
    --albi-mobile-bottom-h: 52px;
  }

  html, body{
    overflow-x:hidden!important;
  }

  body{
    padding-bottom:var(--albi-mobile-bottom-h)!important;
  }

  /* ----------------------------------------------------------
     CABEÇALHO — compacto, mas sem sobrepor o hero
     ---------------------------------------------------------- */
  header{
    height:var(--albi-mobile-header-h)!important;
    min-height:var(--albi-mobile-header-h)!important;
    max-height:var(--albi-mobile-header-h)!important;
    padding:6px 108px 7px 10px!important;
    align-items:flex-start!important;
    overflow:visible!important;
  }

  .albi-header-brand-stack{
    width:100%!important;
    max-width:none!important;
    height:92px!important;
    gap:5px!important;
    margin:0!important;
    padding:0!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
  }

  .albi-support-line{
    position:static!important;
    display:inline-flex!important;
    align-items:center!important;
    width:auto!important;
    max-width:100%!important;
    height:24px!important;
    min-height:24px!important;
    padding:4px 9px!important;
    margin:0!important;
    line-height:1!important;
    font-size:.61rem!important;
    white-space:nowrap!important;
    overflow:visible!important;
  }

  .albi-brand-pair{
    width:100%!important;
    height:61px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:6px!important;
    margin:0!important;
  }

  .albi-brand-pair .albi-main-brand{
    width:auto!important;
    height:58px!important;
    display:flex!important;
    align-items:center!important;
    padding:0!important;
    margin:0!important;
  }

  .albi-brand-pair .albi-main-brand img,
  header .logo-img{
    width:140px!important;
    max-width:140px!important;
    height:50px!important;
    max-height:50px!important;
    object-fit:contain!important;
    object-position:left center!important;
    display:block!important;
  }

  .albi-miminho-header{
    width:auto!important;
    height:58px!important;
    display:flex!important;
    align-items:center!important;
    padding:0 0 0 6px!important;
    margin:0!important;
  }

  .albi-miminho-header img{
    width:128px!important;
    max-width:128px!important;
    height:47px!important;
    max-height:47px!important;
    object-fit:contain!important;
    object-position:left center!important;
  }

  .mobile-menu-btn{
    position:fixed!important;
    top:47px!important;
    right:61px!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    padding:0!important;
    margin:0!important;
    border-radius:12px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:24px!important;
    line-height:1!important;
    z-index:1305!important;
  }

  .cart-btn-floating{
    position:fixed!important;
    top:47px!important;
    right:10px!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    border-radius:12px!important;
    z-index:1304!important;
  }

  header nav{
    top:var(--albi-mobile-header-h)!important;
    max-height:calc(100dvh - var(--albi-mobile-header-h))!important;
  }

  /* ----------------------------------------------------------
     HERO
     O header é position:fixed, portanto o hero tem de começar
     fisicamente DEPOIS dele.
     ---------------------------------------------------------- */
  .albi-hero-slider{
    margin-top:var(--albi-mobile-header-h)!important;
    min-height:calc(100dvh - var(--albi-mobile-header-h) - var(--albi-mobile-bottom-h))!important;
    height:auto!important;
    max-height:none!important;
    overflow:hidden!important;
  }

  .albi-hero-slider::before{
    background:
      linear-gradient(
        0deg,
        rgba(5,20,53,.96) 0%,
        rgba(5,20,53,.86) 50%,
        rgba(5,20,53,.42) 76%,
        rgba(5,20,53,.18) 100%
      )!important;
  }

  .albi-hero-slide{
    background-position:61% center!important;
  }

  .albi-hero-content{
    width:100%!important;
    min-height:calc(100dvh - var(--albi-mobile-header-h) - var(--albi-mobile-bottom-h))!important;
    margin:0!important;
    padding:38px 22px 72px!important;
    display:flex!important;
    align-items:flex-start!important;
    box-sizing:border-box!important;
  }

  .albi-hero-copy{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
  }

  /* O título já não fica atrás do cabeçalho e fica todo dentro do ecrã */
  .albi-hero-brand{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    font-size:clamp(2.15rem,10.5vw,2.75rem)!important;
    line-height:1!important;
    letter-spacing:-.035em!important;
    white-space:nowrap!important;
    overflow:visible!important;
  }

  .albi-hero-miminho{
    display:block!important;
    margin-top:12px!important;
    font-size:1.05rem!important;
    line-height:1.2!important;
    letter-spacing:.10em!important;
  }

  .albi-hero-tagline{
    margin-top:21px!important;
    font-size:clamp(1.35rem,6vw,1.65rem)!important;
    line-height:1.25!important;
  }

  .albi-hero-desc{
    width:100%!important;
    max-width:100%!important;
    margin:21px 0 0!important;
    font-size:.92rem!important;
    line-height:1.58!important;
    color:rgba(255,255,255,.94)!important;
  }

  /* ----------------------------------------------------------
     BOTÕES — menores e CENTRADOS
     ---------------------------------------------------------- */
  .albi-hero-actions{
    width:100%!important;
    max-width:270px!important;
    margin:25px auto 0!important;
    padding:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
  }

  .albi-hero-actions a{
    width:100%!important;
    max-width:270px!important;
    min-height:46px!important;
    height:auto!important;
    padding:11px 14px!important;
    margin:0 auto!important;
    box-sizing:border-box!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    font-size:.80rem!important;
    line-height:1.15!important;
    border-radius:8px!important;
  }

  .albi-hero-dots{
    left:22px!important;
    bottom:22px!important;
  }

  /* Barra inferior mais discreta */
  .mobile-contact-bar{
    height:var(--albi-mobile-bottom-h)!important;
    min-height:var(--albi-mobile-bottom-h)!important;
  }

  .mobile-contact-bar a{
    height:46px!important;
    font-size:1.12rem!important;
  }

  #backToTop{
    bottom:64px!important;
  }
}

/* iPhone / telemóveis estreitos */
@media (max-width: 390px) {

  :root{
    --albi-mobile-header-h: 102px;
  }

  header{
    padding-right:103px!important;
  }

  .albi-support-line{
    font-size:.57rem!important;
  }

  .albi-brand-pair .albi-main-brand img,
  header .logo-img{
    width:116px!important;
    max-width:116px!important;
    height:44px!important;
  }

  .albi-miminho-header img{
    width:103px!important;
    max-width:103px!important;
    height:41px!important;
  }

  .mobile-menu-btn{
    top:45px!important;
    right:57px!important;
    width:41px!important;
    height:41px!important;
    min-width:41px!important;
    min-height:41px!important;
  }

  .cart-btn-floating{
    top:45px!important;
    right:8px!important;
    width:41px!important;
    height:41px!important;
    min-width:41px!important;
    min-height:41px!important;
  }

  .albi-hero-content{
    padding:32px 18px 68px!important;
  }

  .albi-hero-brand{
    font-size:clamp(2.0rem,10.2vw,2.45rem)!important;
  }

  .albi-hero-miminho{
    font-size:.98rem!important;
  }

  .albi-hero-tagline{
    font-size:1.32rem!important;
  }

  .albi-hero-desc{
    font-size:.88rem!important;
    line-height:1.55!important;
  }

  .albi-hero-actions{
    max-width:245px!important;
  }

  .albi-hero-actions a{
    max-width:245px!important;
    min-height:44px!important;
    padding:10px 12px!important;
    font-size:.76rem!important;
  }
}