/* ---- visual decorativo do card Grife (crachá + ícones), robusto em qualquer largura ---- */
.banner-card--grife{
  display:flex;
  align-items:center;
}
.banner-card--grife .banner-content{
  width:70%;
  flex:0 0 70%;
}
.banner-card--grife .grife-visual{
  position:relative;
  inset:auto;
  width:30%;
  flex:0 0 30%;
  height:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:24px 12px;
}
.banner-card--grife.banner-card::after{
  display:none;
}

.grife-badge{
  width:clamp(64px,9vw,92px);
  height:clamp(64px,9vw,92px);
  border-radius:50%;
  background:linear-gradient(135deg,var(--highlight),var(--cta));
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 16px 32px -12px rgba(0,0,0,.5);
  flex-shrink:0;
}
.grife-badge i{
  font-size:clamp(26px,3.4vw,36px);
  color:#fff;
}

.grife-chips{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  max-width:180px;
}
.grife-chip{
  width:clamp(32px,4.2vw,42px);
  height:clamp(32px,4.2vw,42px);
  border-radius:50%;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  display:flex;
  align-items:center;
  justify-content:center;
  animation:floaty 5s ease-in-out infinite;
}
.grife-chip i{
  font-size:clamp(13px,1.7vw,17px);
  color:#fff;
}
.grife-chip:nth-child(1){ animation-delay:.1s; }
.grife-chip:nth-child(2){ animation-delay:.6s; }
.grife-chip:nth-child(3){ animation-delay:1.1s; }
.grife-chip:nth-child(4){ animation-delay:1.6s; }

@media (max-width:900px){
  .banner-card--grife{
    flex-direction:column;
  }
  .banner-card--grife .banner-content,
  .banner-card--grife .grife-visual{
    width:100%;
    flex:0 0 auto;
  }
  .banner-card--grife .grife-visual{
    padding:0 24px 32px;
  }
}

.banner-card--grife{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
}

.banner-card--grife .banner-content{
    flex:1;
}

.grife-visual{
    flex:0 0 360px;
    display:flex;
    justify-content:center;
}

.grife-showcase{
    width:100%;
    max-width:340px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.12);
    border-radius:24px;
    padding:24px;
    box-shadow:0 25px 60px rgba(0,0,0,.25);
}

.showcase-header{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    color:#fff;
    font-weight:700;
    font-size:1.1rem;

    margin-bottom:24px;
}

.showcase-header i{
    color:#57c4ff;
    font-size:24px;
}

.showcase-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.showcase-item{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    padding:20px 12px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    transition:.3s;
}

.showcase-item:hover{
    transform:translateY(-5px);
    background:rgba(255,255,255,.12);
    border-color:#57c4ff;
}

.showcase-item i{
    font-size:30px;
    color:#57c4ff;
    margin-bottom:10px;
}

.showcase-item span{
    color:#fff;
    font-size:.9rem;
    font-weight:600;
}

.showcase-footer{
    margin-top:22px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.1);

    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;

    color:#fff;
    font-size:.9rem;
    font-weight:600;
}

.showcase-footer i{
    color:#57c4ff;
}

@media (max-width:992px){

    .banner-card--grife{
        flex-direction:column;
        text-align:center;
    }

    .grife-visual{
        width:100%;
    }

    .grife-showcase{
        max-width:420px;
    }

}

.banner-card--grife{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;

    padding:40px;
    overflow:hidden; /* impede qualquer elemento de sair do banner */
}

.banner-card--grife .banner-content{
    flex:1 1 60%;
    min-width:0;
}

.grife-visual{
    flex:1 1 40%;
    display:flex;
    justify-content:center;
    align-items:center;
    min-width:280px;
    max-width:360px;
}

.grife-showcase{
    width:100%;
    max-width:340px;
    box-sizing:border-box;
}

@media (max-width: 768px) {
    .shipping-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 16px;
    }

    .shipping-text {
        text-align: center;
    }

    .shipping-text h3,
    .shipping-text p {
        text-align: center;
    }

    .shipping-badge {
        align-self: center;
    }

    .shipping-icon {
        margin: 0;
    }
}

@media (max-width: 768px) {

    .banner-card--grife {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 30px;
        padding: 35px 20px;
    }

    .banner-card--grife .banner-content {
        width: 100%;
        max-width: 650px;
    }

    .banner-card--grife .banner-content h3,
    .banner-card--grife .banner-content p {
        text-align: center;
    }

    .banner-card--grife .grife-visual {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .banner-card--grife .grife-showcase {
        margin-left: 0 !important;
        width: 100%;
        max-width: 360px;
    }

    .banner-card--grife .showcase-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .banner-card--grife .showcase-item {
        padding: 14px 10px;
    }

    .banner-card--grife .showcase-item i {
        font-size: 1.4rem;
    }

    .banner-card--grife .showcase-footer {
        justify-content: center;
        text-align: center;
    }
}




.mobile-logo-text {
    display: none;
}

.logo-brand {
    display: flex;
    align-items: center;
    gap: 10px; /* distância uniforme entre logo e texto */
    text-decoration: none;
}

.mobile-logo-text {
    /* display: flex; */
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* alinha as duas linhas pela esquerda */
    line-height: 1;
}

.mobile-logo-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #05152E;
    margin: 0;
    padding: 0;
}

.mobile-logo-subtitle {
    font-size: 0.72rem;
    font-weight: 500;
    color: #6b7280;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    margin: 4px 0 0 0; /* apenas um pequeno espaço acima */
    padding: 0;
    align-self: flex-start; /* garante o mesmo alinhamento do título */
}

@media (max-width: 390px) {

      .prod-card {
          border-radius: 12px;
      }

      .prod-gallery {
          min-height: 180px;
      }

      .prod-images {
          padding: 8px;
      }

      .prod-images img {
          max-width: 88%;
          max-height: 88%;
      }

      .prod-card-body {
          padding: 12px;
      }

      .prod-card-body h3 {
          font-size: 16px;
          line-height: 1.2;
          margin-bottom: 12px;
      }

      .prod-card-body .btn-small {
          width: 100%;
          justify-content: center;
          padding: 10px 8px;
          font-size: 11px;
      }

      .prod-img-btn {
          width: 24px;
          height: 24px;
      }
  }

  @media (hover: none) and (pointer: coarse) {
    .products-carousel .prod-card:hover {
        transform: none;
        box-shadow: 0 10px 24px -16px rgba(8, 27, 58, 0.18);
    }
}

@media (max-width: 768px) {

    .grife-showcase {
        max-width: 280px;
        margin: 0 !important;
        padding: 16px;
        border-radius: 14px;
    }

    .showcase-header {
        font-size: 0.95rem;
        margin-bottom: 12px;
    }

    .showcase-header i {
        font-size: 1rem;
    }

    .showcase-grid {
        gap: 8px;
    }

    .showcase-item {
        padding: 10px 6px;
        border-radius: 10px;
    }

    .showcase-item i {
        font-size: 1.2rem;
    }

    .showcase-item span {
        font-size: 0.72rem;
    }

    .showcase-footer {
        margin-top: 12px;
        font-size: 0.75rem;
    }
}

@media (max-width:768px){

    .banner-card--grife .banner-content{
        padding:30px 20px 10px;
    }

    .banner-card--grife .banner-content h3{
        font-size:1.9rem;
        margin-bottom:12px;
    }

    .banner-card--grife .banner-content p{
        font-size:0.9rem;
        line-height:1.55;
    }

}


@media (max-width:390px){

    .grife-showcase{
        max-width:240px;
        padding:14px;
    }

    .showcase-grid{
        gap:6px;
    }

    .showcase-item{
        padding:8px 4px;
    }

    .showcase-item i{
        font-size:1rem;
    }

    .showcase-item span{
        font-size:.65rem;
    }

    .showcase-footer{
        font-size:.68rem;
    }

}

.showcase-icons{
    display:none;
}

@media (max-width:768px){

    .banner-card--grife{
        padding:32px 20px;
        gap:24px;
    }

    .banner-card--grife .banner-content{
        width:100%;
        padding:0;
        text-align:center;
    }

    .banner-card--grife .banner-content h3{
        font-size:2rem;
        margin-bottom:14px;
    }

    .banner-card--grife .banner-content p{
        font-size:.92rem;
        line-height:1.6;
        margin-bottom:0;
    }

    .grife-visual{
        width:100%;
        display:flex;
        justify-content:center;
    }

    .grife-showcase{
        margin:0 !important;
        width:100%;
        max-width:300px;
        padding:18px;
        border-radius:16px;
    }

    /* .showcase-grid{
        display:none;
    } */

    .showcase-icons{
        display:flex;
        justify-content:space-between;
        gap:10px;
        margin:18px 0;
    }

    .showcase-icons div{
        flex:1;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:6px;
    }

    .showcase-icons i{
        font-size:22px;
        color:#05152E;
    }

    .showcase-icons small{
        font-size:11px;
        font-weight:600;
    }

    .showcase-header{
        justify-content:center;
    }

    .showcase-footer{
        justify-content:center;
        text-align:center;
        font-size:12px;
    }

}

@media (max-width:768px){
    .logo-image{
        height:-webkit-fill-available;
        width:auto;
    }
}

/* Oculta o texto por padrão (desktop) */
.mobile-logo-text {
  display: none;
}

/* Exibe o texto apenas em telas menores (mobile) */
@media (max-width: 768px) {
  .mobile-logo-text {
    display: flex;
    flex-direction: column;
  }
}

/* Estilos de fonte organizados (boa prática para limpar o HTML) */
.mobile-logo-title,
.mobile-logo-subtitle {
  color: white;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.top-header-v2{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    height:90px;
    width:100%;
    background:#081B3A;
}

.top-header-v2__logo{
    position:absolute;
    left:30px;
    display:flex;
    align-items:center;
    z-index:2;
}

.top-header-v2__logo img{
    height:56px;
    width:auto;
    display:block;
}

.top-header-v2__nav{
    display:flex;
    align-items:center;
    gap:42px;
}

.top-header-v2__nav a{
    position:relative;
    color:#fff;
    text-decoration:none;
    font-weight:700;
    transition:.25s;
}

.top-header-v2__nav a:hover{
    color:#E8C66A;
}

.top-header-v2__nav a::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-8px;
    width:0;
    height:3px;
    background:#E8C66A;
    border-radius:999px;
    transform:translateX(-50%);
    transition:.25s;
}

.top-header-v2__nav a:hover::after{
    width:100%;
}

@media (max-width:768px){

    .top-header-v2{
        justify-content:space-between;
        padding:0 16px;
        height:72px;
    }

    .top-header-v2__logo{
        position:static;
    }

    .top-header-v2__logo img{
        height:46px;
    }

    .top-header-v2__nav{
        display:none;
    }
}



/* Configura o container para espalhar os 3 blocos igualmente */
.header-main .wrap {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
}



.mobile-logo-text {
  /* display: flex; */
  flex-direction: column; /* Empilha as linhas */
  font-family: sans-serif; /* Use a fonte da sua preferência */
  text-transform: uppercase; /* Garante caixa alta se desejar */
}

.top-header-v2__nav {
  margin: 0 auto !important;
}

/* ELEMENTO INVISÍVEL */
.header-spacer {
  /* Largura fixa aproximada da sua logo ou ajuste para o tamanho exato da logo */
  width: 300px; 
  height: 1px;
  visibility: hidden; /* Fica totalmente invisível e sem interação */
  pointer-events: none;
}

/* No Mobile, esconde o espaçador para não empurrar nada */
@media (max-width: 768px) {
  .header-spacer {
    display: none !important;
  }

  .top-header-v2__nav {
    display: none !important;
  }

  /* Garante que o espaçador invisível também suma no mobile */
  .header-spacer {
    display: none !important;
  }

  /* Exibe o botão do menu hambúrguer */
  .mobile-menu-toggle {
    display: flex !important;
  }
}

/* Sobrescreve com máxima especificidade */
@media screen and (max-width: 768px) {
  div.header-main nav.top-header-v2__nav,
  body .top-header-v2__nav,
  .top-header-v2__nav {
    display: none !important;
    visibility: hidden !important;
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
}

.mobile-logo-text {
  /* display: flex; */
  flex-direction: column; /* Empilha as linhas */
  font-family: sans-serif; /* Use a fonte da sua preferência */
  text-transform: uppercase; /* Garante caixa alta se desejar */
}

/* Primeira linha */
.line-1 {
  font-weight: bold;
  font-size: 13px;
}

/* Segunda linha (recuada para a direita) */
.line-2 {
  font-weight: bold;
  font-size: 13px;
    margin-left: 29px;}

/* Terceira linha (com recuo maior) */
.line-3 {
  font-size: 0.75rem;
  margin-left: 28px; /* Ajuste este valor para alinhar 'Desde 1981' logo abaixo da segunda linha */
  margin-top: 2px;
}

/* Regra para telas de celular (até 768px de largura) */
@media (max-width: 768px) {
  .logo-image {
    width: 116px !important;
    height: 140px !important;
    object-fit: contain;
    margin-bottom: 0px !important;
  }
}