.centro_produto{
    width: 80%;
    margin: 0 auto;
    max-width: 1920px;
    height: auto;
    display: table;
    }

    .centro_produto_todos{
    width: 90%;
    margin: 0 auto;
    max-width: 1920px;
    height: auto;
    display: table;
    }

    .navegador{
    width: 100%;
    margin-top: 30px;
    color: #858484;
    }



    .container {
      display: flex;
      width: 100%;
      margin: 30px auto;
      gap: 30px;
    }

    /* Galeria */
    .gallery { flex: 1; }
    .main-image {
      border: 1px solid #ddd;
      border-radius: 6px;
      overflow: hidden;
      text-align: center;
      background: #fafafa;
    }
    .main-image img {
      width: 100%;
      max-height: 400px;
      object-fit: contain;
    }
    .thumbnails {
      display: flex;
      gap: 10px;
      margin-top: 10px;
    }
    .thumbnails img {
      width: 70px;
      height: 70px;
      border: 1px solid #ddd;
      border-radius: 4px;
      cursor: pointer;
      object-fit: cover;
      transition: transform 0.2s;
    }
    .thumbnails img:hover {
      transform: scale(1.05);
      border-color: #333;
    }

    /* Detalhes */
    .details { flex: 1; }
    .details h1 {
      color: #6d1f1d;
      font-size: 24px;
      margin: 0 0 10px;
    }

    .sub{
      background: #f3ac42;
      padding: 10px;
      border-radius: 10px;
      margin: 0 0 20px;
    }

    .details p {      
      font-size: 14px;      
    }
    .price { font-size: 20px; margin-bottom: 20px; }
    .price .assinatura { color: #6d1f1d; font-weight: bold; }
    .price .unica { display: block; margin-top: 5px; color: #666; }

    .options { margin-top: 20px; }
    .options label { width: 100px; float: left; font-size: 10px; font-weight: bold; margin-top: 5px;}

    

    .buttons{
        display:flex;
        gap:10px;
        align-items:flex-start;
        margin-top:28px;              /* <-- novo */
    }

    .btn-wrap {
      position: relative; /* para ancorar a tag */
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .discount-tag{
        position:absolute;
        bottom:calc(100% - 3px);      /* fica acima do botão */
        left:60px;                    /* alinhado ao lado esquerdo do botão */
        transform:none;               /* remove centralização antiga */
        background:#e53935;
        color:#fff;
        font-weight:700;
        font-size:10px;
        line-height:1;
        padding:4px 7px;
        border-radius:999px;
        box-shadow:0 2px 6px rgba(0,0,0,.12);
        white-space:nowrap;
        pointer-events:none;
        z-index:5;     
        height: 20px;               /* garante que fique por cima */
    }

    .btn {
        padding: 10px 20px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
        transition: 0.2s;
    }

    .btn.assinatura { background: #f0f0f0; color: #555; }
    .btn.unica { background: #f0f0f0; color: #555; }

    /* quando ativo */
    .btn.assinatura.active { background: #6d1f1d; color: #fff; }
    .btn.unica.active { background: #6d1f1d; color: #fff; }

    .qtd { display: flex; align-items: center; gap: 10px; }
    .qtd button {
      width: 30px; height: 30px;
      border: 1px solid #ccc; background: #fff;
      font-size: 18px; cursor: pointer; border-radius: 4px;
      background: #000;
      color: #fff;
    }

    .qtd input {
      width: 25px; text-align: center;
      font-size: 1em;
      border: none;
    }

    select {
      padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; background: #f3f0f0;
    }
    .info_car{
        width: 100%;
    }

    .add-cart { margin-top: 20px; width: 50%; float: right;}
    .add-cart button {
      background: #ff9a00; color: #fff; border: none;
      padding: 15px; font-size: 16px; font-weight: bold;
      border-radius: 25px; width: 100%; cursor: pointer;
    }
    .add-cart button:hover { background: #d98302; }

    .frequencia{
        font-size: 11px;
        margin-top: 15px;
        color: #666;
        margin-bottom: 20px;
    }

    .freq{
      width: 80%;
    }

    .separador{
        width: 100%;
        height: 15px;
    }

    .linha_cinza{
        width: 100%;
        height: 2px;
        background: #f3f2f2;
    }

    .descricao_produto{
      margin-bottom: 50px;
      width: 50%;
      float: left;
    }

     .descricao_entrega{
      margin-bottom: 50px;
      width: 45%;
      height: auto;
      background: #ccc;
      padding: 20px;
      border-radius: 20px;
      float: right;
    }

    .descricao_entrega p{
      padding-bottom: 15px;
    }

    .descricao_produto p{
      font-size: 14px;
      padding-top: 12px;
    }


.tipo_ovo{
  width: 60px;
  height: 50px;          /* se ficar apertado, troque por min-height:50px; height:auto; */
  border-radius: 8px;
  background: #d98302;
  float: right;          /* opcional; se preferir, remova e use flex no pai */
  text-align: center;
  padding: 6px 6px 4px;
  font-weight: bold;
  font-size: 26px;       /* este não afeta o <span> porque já tem regra abaixo */
  line-height: 1;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;           
  margin-left: 5px;    /* espaço entre ícone e texto */
}

.tipo_ovo img{
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
  margin: 0;             /* remove o empurrão pra baixo */
}

.qtde_ovo{
  width: 60px;
  height: 50px;
  border-radius: 8px;
  background: #d98302;
  float: right;
  text-align: center;
  padding-top: 12px;
  font-weight: bold;
  font-size: 26px;
  line-height: 15px;
  margin-left: 5px;
}

.qtde_ovo span,
.tipo_ovo span{
  font-size: 10px;
  font-weight: 100;
  line-height: 1;
}



    .sugestoes{
      width: 90%;
      margin: 0 auto;
      max-width: 1920px;
    }

    .filtrar_produtos{
      float: left;
    }

    .ordernar_produtos{
      float: right;
    }






    /* =======================
   PÁGINA DE PRODUTO – MOBILE
   (não altera HTML)
   ======================= */
@media (max-width: 768px){

  /* container geral */
  .centro_produto{ width:94%; margin:0 auto; }
  .navegador{ margin-top:16px; font-size:12px; }

  /* empilha galeria e detalhes */
  .container{
    flex-direction: column;
    gap:16px;
    margin:18px auto;
  }

  /* galeria */
  .main-image img{ max-height: 280px; }
  .thumbnails{
    gap:8px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
  }
  .thumbnails img{
    flex: 0 0 60px;
    width:60px; height:60px;
    object-fit: cover;
    border-radius:6px;
    scroll-snap-align:start;
  }

  /* cabeçalho do produto (tag-ovo à direita) */
  .details h1{ font-size:20px; margin:6px 0 8px; }
  .sub{
    padding:12px;
    display:flex;
    align-items:center;
    gap:10px;
  }
  

.tag-ovo{
  margin-left:auto;
  display:flex;
  gap:6px;
}

/* estrutura idêntica para os dois badges */
.tipo_ovo, .qtde_ovo{
  display:grid;
  grid-template-rows: 1fr auto;   /* topo cresce, legenda fica na base */
  align-items:center;
  justify-items:center;
  min-width:64px;
  min-height:48px;                /* garanta mesma altura */
  padding:6px 10px;
  border-radius:10px;
  line-height:1;
  font-size:18px;
}

/* conteúdo */
.tipo_ovo img{ width:18px; height:18px; display:block; }
.tipo_ovo span, .qtde_ovo span{
  font-size:10px;
  line-height:1;
  margin-top:2px;                 /* espacinho entre topo e legenda */
}

/* número mais forte */
.qtde_ovo{ font-weight:700; font-size:22px; }

/* se mantiver o <br>, esconda-o para não quebrar o layout */
.qtde_ovo br{ display:none; }


  /* preço */
  .price{ font-size:18px; }

  /* opções/controles */
  .options{ margin-top:10px; }
  .options label{
    float:none; width:100%;
    display:block; margin:10px 0 4px;
    font-size:12px;
  }

  /* botões “assinatura/única” viram coluna */
  .buttons{
    flex-direction: column;
    align-items: stretch;
    gap:10px;
    margin-top:8px;
  }
  .btn-wrap{ width:100%; }
  .btn{ width:100%; padding:12px; border-radius:12px; }

  /* selo de desconto fica acima do botão, alinhado */
  .discount-tag{
    position: static !important;
    transform: none !important;
    margin-bottom: 6px;
    display: inline-flex !important;
  }

  /* quantidade */
  .qtd{ gap:8px; }
  .qtd button{ width:36px; height:36px; font-size:20px; }
  .qtd input{ width:40px; font-size:16px; }

  /* frequência */
  #frequenciaBox .frequencia{
    font-size:12px; margin-top:8px;
  }

  /* botão adicionar ao carrinho */
  .info_car{ width:100%; }
  .add-cart{ width:100%; float:none; margin-top:14px; }
  .add-cart a,
  .add-cart button{
    display:block;
    width:100%;
    border-radius:20px;
    text-align:center;
  }

  /* descrição e entrega empilham */
  .descricao_produto,
  .descricao_entrega{
    width:100%;
    float:none;
    margin:14px 0 0;
  }
  .descricao_entrega{ background:#f5f5f5; }

  /* área de sugestões ocupa toda a largura */
  .sugestoes{ width:94%; margin:0 auto; }

  /* carrossel de “você também pode gostar” – cards mais largos no mobile */
  .carousel-area{ width:100%; }
  .carrossel{ gap:14px; }
  .box_produto{ flex: 0 0 80%; } /* 1 card por “tela” */
}

/* telas menores ainda: aperta um pouco mais */
@media (max-width: 420px){
  .main-image img{ max-height: 240px; }
  .price{ font-size:17px; }
  .btn{ padding:11px; }
}


@media (max-width: 768px){

  /* respiro lateral geral na coluna da direita */
  .details{ padding: 0 14px; }

  /* bloco do topo: empilha e reordena */
  .sub{
    display:flex;
    flex-direction:column;     /* empilha tudo */
    align-items:flex-start;
    gap:10px;                  /* espaço entre os itens */
    padding:14px 16px;         /* margem lateral interna */
    border-radius:14px;
  }

  /* 1) TÍTULO no topo */
  .details h1{
    order:1;                   /* vem primeiro */
    margin:0;                  /* remove excesso */
    line-height:1.25;
  }

  /* 2) TAGS logo abaixo do título */
  .sub .tag-ovo{
    order:2;                   /* vem depois do título */
    margin:0;                  /* sem empurrões laterais */
    display:flex;
    gap:8px;                   /* espaço entre as duas tags */
  }

  /* mantém as tags compactas e legíveis */
  .tipo_ovo, .qtde_ovo{
    float:none;
    width:auto; height:auto;
    padding:6px 12px;
    border-radius:12px;
    font-size:16px;
    line-height:1;
  }
  .tipo_ovo img{ width:18px; height:18px; margin:0 6px 0 0; vertical-align:-3px; }
  .tipo_ovo span, .qtde_ovo span{ font-size:10px; }

  /* 3) DESCRIÇÃO por último, com boa leitura */
  .sub .texto-ovo{ order:3; width:100%; }
  .sub .texto-ovo p{
    margin:0;
    font-size:14px;
    line-height:1.5;
    color:#444;
  }

  /* respiro lateral nos demais blocos abaixo */
  .price, .options, .info_car, .descricao_produto, .descricao_entrega{
    margin-left:14px;
    margin-right:14px;
  }
}

/* garante que ambos os botões tenham 100% de largura iguais */
.buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-wrap {
  width: 100%;
  position: relative; /* para ancorar a tarja vermelha */
}

.btn {
  width: 100%;             /* mesmo tamanho */
  padding: 14px;
  border: none;
  border-radius: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.2s;
  text-align: center;
}

.btn.assinatura { background: #f0f0f0; color: #555; }
.btn.unica { background: #f0f0f0; color: #555; }

/* ativo */
.btn.assinatura.active,
.btn.unica.active {
  background: #6d1f1d;
  color: #fff;
}

/* tarja vermelha fixa no canto superior esquerdo */
.discount-tag {
  position: absolute;
  top: -8px;
  left: -8px;
  background: #e53935;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  pointer-events: none;
  height: 25px;
}

/* === MOBILE ONLY (<=768px): botões iguais + selo no canto esq. do botão === */
@media (max-width:768px){

  /* garante 100% de largura para ambos */
  .buttons{
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  .btn-wrap{
    position:relative !important;   /* ancora a tarja no botão */
    width:100%;
  }

  .btn{
    width:100% !important;
    padding:14px 18px;
    border-radius:14px;
    text-align:center;
  }

  /* selo de desconto: colado no topo-esquerda do botão */
  .discount-tag{
    position:absolute !important;   /* override do 'static' anterior */
    top:-10px !important;           /* sobe um pouco sobre a borda */
    left:18px !important;           /* alinha com o padding do botão */
    background:#e53935;
    color:#fff;
    font-weight:700;
    font-size:12px;
    line-height:1;
    padding:4px 10px;
    border-radius:999px;
    white-space:nowrap;
    box-shadow:0 2px 6px rgba(0,0,0,.12);
    pointer-events:none;
    z-index:10;
    height:auto !important;         /* desfaz height:20px global */
  }
}


/* MOBILE: Aumentar tamanho da tarja de desconto */
@media (max-width:768px){
  .discount-tag{
    font-size: 11px !important;      /* fonte maior */
    padding: 6px 14px !important;    /* mais “gordura” */
    top: -8px !important;           /* ajusta a posição pra não sobrepor o texto */
    left: 16px !important;           /* alinhado ao padding do botão */
    min-height: 24px;                /* altura mínima */
    line-height: 1.2;
  }
}

.details li{
  color: #666;
  font-size: 0.8em;
  margin-top: -10px;
  margin-bottom: 30px;
}

.tag-ovo{
  margin-left:auto;
  display:flex;
  gap:6px;
}

/* estrutura idêntica para os dois badges */
.tipo_ovo, .qtde_ovo{
  display:grid;
  grid-template-rows: 1fr auto;   /* topo cresce, legenda fica na base */
  align-items:center;
  justify-items:center;
  min-width:64px;
  min-height:48px;                /* garanta mesma altura */
  padding:6px 10px;
  border-radius:10px;
  line-height:1;
  font-size:18px;
}

/* conteúdo */
.tipo_ovo img{ width:18px; height:18px; display:block; }
.tipo_ovo span, .qtde_ovo span{
  font-size:10px;
  line-height:1;
  margin-top:2px;                 /* espacinho entre topo e legenda */
}

/* número mais forte */
.qtde_ovo{ font-weight:700; font-size:22px; }

/* se mantiver o <br>, esconda-o para não quebrar o layout */
.qtde_ovo br{ display:none; }

/* === Cabeçalho do produto: infos à esquerda, boxes à direita === */
.sub{
  display: grid;
  grid-template-columns: 1fr auto; /* esquerda cresce, direita só o necessário */
  column-gap: 12px;
  align-items: center;             /* centraliza verticalmente */
  background: #f3ac42;
  padding: 10px;
  border-radius: 10px;
  margin: 0 0 20px;
}

/* boxes vão para a coluna da direita e ocupam a altura do título + texto */
.sub > .tag-ovo{
  grid-column: 2;
  grid-row: 1 / span 2;            /* pega as duas linhas (título + descrição) */
  justify-self: end;               /* encosta na direita */
  margin: 0;                       /* zera margens herdas */
  display: flex;
  gap: 6px;
}

/* título e descrição ficam na coluna da esquerda */
.sub > h1{
  grid-column: 1;
  margin: 0 0 6px;
  line-height: 1.25;
}
.sub > .texto-ovo{
  grid-column: 1;
}

/* badges internos bonitinhos (sem float) */
.tipo_ovo, .qtde_ovo{
  float: none;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
  min-width: 64px;
  min-height: 48px;
  padding: 6px 10px;
  border-radius: 10px;
  line-height: 1;
  font-size: 18px;
  background: #d98302;
}
.tipo_ovo img{ width:18px; height:18px; display:block; }
.tipo_ovo span, .qtde_ovo span{ font-size:10px; margin-top:2px; }
.qtde_ovo{ font-weight:700; font-size:22px; }
.qtde_ovo br{ display:none; }      /* evita quebra extra */

/* Mobile: empilha e traz os boxes abaixo do título, à esquerda */
@media (max-width: 768px){
  .sub{
    grid-template-columns: 1fr;
    align-items: start;
    row-gap: 8px;
  }
  .sub > .tag-ovo{
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }
}