/* ==========================================================================
   Ajustes pedidos pelo user em 31/08. Fica num arquivo separado de proposito:
   o post-595.css e o CSS original do Elementor e nao deve ser editado a mao —
   assim da pra ver (e desfazer) exatamente o que e alteracao nossa.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) ORDEM DOS CARDS DE PRECO: 2 / 6 / 3  (estava 6 / 3 / 2)
   O pai e flex row, entao basta reordenar com `order` — sem mexer no HTML,
   cada card continua com o seu preco, o seu frete e o seu link do Digistore.
   Sao DOIS blocos de preco na pagina (um antes e um depois do FAQ), por isso
   dois seletores em cada regra.
   -------------------------------------------------------------------------- */
.elementor-element-35eede85,           /* 2 Flaschen — bloco 1 */
.elementor-element-f5002ab  {          /* 2 Flaschen — bloco 2 */
    order: 1 !important;
}
.elementor-element-4d979d86,           /* 6 Flaschen — bloco 1 */
.elementor-element-5f25f7b  {          /* 6 Flaschen — bloco 2 */
    order: 2 !important;
}
.elementor-element-1ecf5bda,           /* 3 Flaschen — bloco 1 */
.elementor-element-05983b6  {          /* 3 Flaschen — bloco 2 */
    order: 3 !important;
}

/* --------------------------------------------------------------------------
   2) TEXTO ATRAS DO FRASCO no card de 3 Flaschen
   O container da imagem tem margin-top:-60px vindo do post-595.css. No layout
   original o frasco tinha margem transparente no topo e a sobreposicao nao
   aparecia; os frascos de IA preenchem mais a caixa e subiram por cima do
   "3 Flaschen, 90-Tage-Vorrat" (medi 21px de sobreposicao).
   -30px devolve o texto pra fora e ainda deixa a mesma folga dos outros dois
   cards (9px), preservando a intencao do design de puxar o frasco pra cima.
   -------------------------------------------------------------------------- */
.elementor-element-27f1d80e,           /* wrapper da imagem — bloco 1 */
.elementor-element-0b0106f  {          /* wrapper da imagem — bloco 2 */
    margin-top: -30px !important;
}

/* --------------------------------------------------------------------------
   3) Rede de seguranca: nenhum frasco pode passar por cima de texto.
   Se algum outro card mudar de imagem no futuro, o texto continua legivel.
   -------------------------------------------------------------------------- */
.elementor-widget-text-editor,
.elementor-widget-heading {
    position: relative;
    z-index: 2;
}


/* --------------------------------------------------------------------------
   4) FRASCOS CLICAVEIS (pedido do user)
   O <a> envolve a <img> sem mudar a caixa dela (display:block, sem espaco extra
   de linha). O feedback visual e leve pra nao descaracterizar o design.
   -------------------------------------------------------------------------- */
a.frasco-clicavel {
    display: block;
    line-height: 0;          /* mata o espaco fantasma abaixo da img inline */
    cursor: pointer;
    /* ⚠️ NAO adianta `width: fit-content` aqui: o fit-content resolve pela largura
       INTRINSECA da imagem (o atributo width=800 do WordPress) e o max-width:100%
       corta isso na largura do bloco — o link continuava 170px mais largo que o frasco.
       Solucao sem tocar no box: o link nao captura clique na area vazia; so a imagem
       captura, e o evento sobe pelo <a> normalmente, entao a navegacao funciona. */
    pointer-events: none;
}
a.frasco-clicavel img {
    display: block;
    pointer-events: auto;
    cursor: pointer;
    transition: transform .18s ease, filter .18s ease;
}
a.frasco-clicavel img:hover {
    transform: translateY(-4px) scale(1.02);
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.18));
}
a.frasco-clicavel, a.frasco-clicavel:hover { text-decoration: none; }

/* a ancora do bloco de precos: folga pro topo do card nao colar no topo da tela */
#angebote { scroll-margin-top: 90px; }